Inicio

Para que la IA nos diseñe un programa bastará con decirle que deseamos un programa HTML, indicándole qué queremos que haga. Un prompt típico sería:

En los ejemplos anteriores, las aplicaciones aparecen en dos idiomas cuando en realidad no se le ha dicho nada en el prompt, también tienen un pie a modo de firma. Esto es así porque se han especificado en la configuración del chatbot con el que han sido creadas estas opciones. Si hay aspectos que añadimos siempre, en lugar de especificarlo en el prompt lo podemos indicar en la configuración del propio chatbot. No todos permiten añadir instrucciones que se aplicarán siempre, entre los que sí lo permiten se encuentran: ChatGPT, Grok o Gemini.

Depuración

Una vez tengamos la primera versión de nuestra aplicación, podremos ir pidiendo mejoras como modificar el aspecto, añadir funcionalidades, etc. Debemos tener presente que actualmente las IA solo pueden hacer programas simples. Si intentamos que hagan demasiadas cosas, posiblemente nos encontraremos con múltiples problemas, como que generen errores que no seamos capaces de eliminar.

Si un programa nos da un error, debemos copiárselo a la IA para que intente arreglarlo.

Si vemos que la aplicación inicial se aleja demasiado de lo que queremos obtener, podemos empezar una nueva conversación, incluyendo aquellos aspectos que hemos visto que no ha resuelto bien la primera vez, de este modo, conseguimos una primera versión más acorde con nuestros deseos.

Cualquier chatbot nos hará una aplicación, pero no todas nos permiten ver el resultado in situ, es decir, sin salir del chat. Los chatbots que no permiten ejecutar el código directamente son Copilot y Perplexity. En tareas de programación destacan Claude, ChatGPT, Grok y Gemini y son los que recomendamos para comenzar. Para decidirnos por uno u otro, podemos utilizar un programa como Multiprompt que nos lanza el mismo prompt en diferentes chatbots. Una vez veamos el que más nos gusta, podemos continuar con él.

Gemini destaca por la posibilidad de incluir inteligencia artificial en los propios programas, de forma que podemos hacer aplicaciones inteligentes, capaces de responder al usuario en sus necesidades. Podemos indicarle que deseamos el uso de IA para determinadas acciones de nuestro programa, pero también hay un botón (✨) que añade características de IA a nuestro programa. En este último caso, Gemini decide la función que se añadirá y que identificará con el mismo icono estrellado. Si no nos interesan los cambios que ha hecho, podemos utilizar el botón deshacer para volver a la versión anterior.

Cuando se nos acaben las interacciones gratuitas del chatbot que estemos usando, aparte de esperar a que se reinicien, podemos copiar el código y pasarnos a otra sesión con el mismo chatbot con un usuario diferente o bien, pegar el programa en otro chatbot diferente para continuarlo.

Existen servicios que son chatbots, que nos permiten realizar estas mismas tareas, los podrás encontrar en la sección de Herramientas: Vibe Coding.

Compartir directamente desde el propio chatbot

Algunos chatbots como Gemini, ChatGPT y Claude permiten compartir directamente la aplicación a través de un enlace. ChatGPT tiene la ventaja de que, al actualizar el programa, permite actualizar el mismo enlace, sin necesidad de cambiarlo. Sin embargo, Claude proporciona una dirección diferente para cada nueva versión que hagamos.

Cuadros de diálogo para compartir aplicaciones de ChatGPT y Claude.

Guardar como página web de forma local

Guardar el programa como página web nos permite abrirla desde el propio ordenador. Simplemente abriendo el archivo, la aplicación se abrirá en el navegador que tengamos predeterminado, De este modo podemos:

• Enviarla a los alumnos por cualquier sistema de comunicación (correo electrónico, Google Drive, Classroom, etc.) para que se la descarguen y la puedan visualizar desde su propio dispositivo.
• Subirla a un servicio de alojamiento web para visualizarla directamente en el navegador proporcionando su dirección de Internet. Véase GitHub más adelante.

En Claude, Grok y Le Chat disponemos de un botón que permite descargar directamente la aplicación en formato de página web, HTML. En el resto de chatbots podemos copiar el código (todos los chatbots disponen de botones para copiar el contenido sin necesidad de seleccionar con el ratón el texto) y pegaro en algún programa que permita descargar el contenido en formato de texto puro (formato de texto o txt) asegurándonos que cuando lo guardamos, le ponemos extensión HTML, para que quede algo así: mi_aplicación.html. Puedes consultar cómo hacerlo para cualquier programa a continuación:

¿Cómo puedo crear un archivo HTML con el programa a partir del código que he copiado de la IA?

Consultar

Insertar en Google Sites

Es posible insertar el código directamente en una página de Google Sites, aunque con determinados programas el resultado podría no ser el esperado. Recomendamos comprobar que el programa actúa como se espera una vez insertado.

El proceso es bastante sencillo. En primer lugar, copiamos el código directamente de la IA, abrimos Google Sites y en cualquier página pulsamos en el menú que hay en la parte derecha de la página: Insertar > Insertar > Insertar código > Siguiente. En este momento aparecerá nuestro programa, si es necesario, modificamos su tamaño para que se vea de forma óptima.

Publicar en un servicio web: GitHub

GitHub es un servicio gratuito para la creación de software donde podemos subir nuestras páginas web creadas con IA, tal como se ha explicado anteriormente en el apartado Guardar como página web de forma local.

Podemos crear repositorios donde se alojarán nuestras aplicaciones y accederemos a ellas a través de la URL que GitHub nos proporciona. La siguiente presentación resume el proceso.

Desde el grupo Vibe Coding Educativo se ha creado un repositorio de aplicaciones educativas diseñadas por la comunidad de docentes. Puedes verla en la página: Repositorio de aplicaciones educativas.