🔝To translate this blog post to your language, select it in the top left Google box.
En este artículo explicaré lo que he aprendido en dos días para conseguir programar una comparativa animada, gracias a la Programación Asistida por IA, que te animo a que la uses para mejorar como programador.
En este artículo puedes probar la Comparativa animada y los botones de Repetir animación:
Por supuesto que publicaré las PROMPTS (SOLICITUDES en español) con las que he guiado a la IA de Microsoft Copilot para obtener este aspecto de la comparativa animada.
Hace dos semanas le hice varias preguntas a la IA, y la contestación de Microsoft Copilot está en estos enlaces:
- Tarjeta en formato imagen A4 de la comparativa entre programación por pares y programación asistida.
Con estas cinco preguntas, la IA me ofreció una explicación bastante clara sobre la Programación por Pares y la Programación Asistida, además de proporcionarme una imagen comparativa que se muestra a la derecha de este texto.
El problema es que se colaron bastantes errores en el texto de la imagen: "Dos deansolladores humans", "Entorno comparrido", "Ejecución y y depuración en cónjusitó", "Sugerencias y correcciónes", "Transferencia de conveinnento".
Aquí no voy a poner las preguntas que le hice a la IA para que corrigiera los textos de la imagen, cosa imposible, o para que generara los textos correctos en archivos tipo .docx o .xlsx o .pptx. Me indicaba los pasos manuales a seguir, que eran muchos, pero no generaba automáticamente los archivos Word ni Excel ni PowerPoint, lo que era muy frustrante...
Como son gratuitas, le hice unas cuantas preguntas más a la IA:
No conseguí los textos correctos en la comparativa hasta que le pedí:
La imagen resultante está a la derecha, y no se parece a la imagen generada previamente por la IA, aunque se puede integrar en el blog porque está diseñada con HTML + CSS.
Le falta añadir los iconos y que también sean animadas la cabecera y el pie de la comparativa y la última fila que es estática.
En los siguientes enlaces comienza la Programación Asistida por la IA para mejorar el código HTML + CSS + JavaScript de la comparativa animada.
Le hice varias preguntas sobre esta versión animada a la IA, pues yo no he usado prácticamente CSS y necesitaba aprender a programar si quería incrustar la comparativa animada en mi blog:
Después de varias consultas conseguí que generara el primer icono.
El procedimiento no me pareció efectivo, por lo que extraje los 18 iconos desde la imagen de la comparativa con la aplicación Fotos de Windows 11:
Le hice varias preguntas más:
Además necesitaba asistencia para repetir la animación:
Como no sabía nada de la cantidad de animaciones que se pueden generar en CSS, estuvo platicando con la IA sobre algunas de ellas, pero es tan extenso el tema que aquí no voy a enlazar la animada charla que tuve con la IA y las pruebas que hice con algunos de los tipos de animación que ofrece CSS.
Destaco aquí las animaciones que decidí usar:
- Para la cabecera: animation: bounceWave 3s ease-out forwards;
- Para las filas: animation: fadeIn 0.8s ease forwards;
- Para el pie animation: bounceWave 5s ease-out forwards;
Lo que me faltaba por resolver era:
Y con todas esas SOLICITUDES (PROMPTS en inglés) conseguí respuesta a todas mis preguntas y conseguí resolver algo que no sabía programar hasta hace unos días: una comparativa animada con código HTML + CSS + JavaScript, que puedes probar aquí:
Si necesitas ayuda en algún paso concreto de cómo programé la comparativa animada, puedes consultarme a mí y te contestaré en modo Programación Remota por Pares o en Pareja.
¡¡¡ O mejor aún, puedes preguntar directamente a la IA en modo Programación Asistida !!!
Le he pedido a la IA una tabla con los métodos de programación usados en la comparativa animada:
En el siguiente enlace está la respuesta de la IA de Microsoft Copilot en formato tabla HTML + CSS, y un poco más abajo la tabla creada con algunos ajustes adicionales:
Al principio de este artículo aparece un índice automático desplegable, que conseguí programar asistido por la IA, mediante las siguientes SOLICITUDES:
Para que funcione en teléfonos ¿inteligentes? he tenido que mostrar siempre mi blog en modo escritorio:
Con esto consigo crear un índice automático desplegable en cualquier artículo de mi blog y usarlo tanto en el escritorio de Windows como en el teléfono con Android.
El índice se puede plegar y desplegar manualmente, y reconoce automáticamente las etiquetas h4 con class="indice" como partes integrantes del índice automático.
Al pulsar los botones: Volver al índice se hace scroll hacia arriba hasta llegar al índice.
¿Quieres que este índice automático desplegable aparezca en los próximos artículos?
Sigue todo lo que escribo sobre Programación Asistida para mejorar el Mapamundi con relojes desde aquí:
Me alegrará saber si este proyecto te parece interesante.
Deja un comentario y te lo agradeceré.
