La incorporación de la inteligencia artificial (IA) en el ámbito educativo representa una oportunidad para ampliar las posibilidades didácticas. Más allá de su papel como asistente de redacción o generador de contenido, los sistemas basados en IA permiten la creación de recursos digitales adaptados a contextos específicos de enseñanza y aprendizaje utilizando únicamente el lenguaje natural.

La elaboración de juegos de preguntas, fichas de lectura interactivas o formularios de repaso puede realizarse actualmente sin conocimientos de programación, únicamente mediante la redacción de instrucciones claras en lenguaje natural, es lo que se llama Vibe Coding (o programación por vibraciones). De este modo, la IA se consolida como un instrumento creativo al servicio del profesorado.

En este artículo hablaremos exclusivamente de la generación de programas a través de los chatbots disponibles de forma gratuita en la web y dejaremos de lado métodos más avanzados que se ejecutan desde el propio ordenador, como la programación mediante consola o versiones CLI de los chatbots.

Si te interesa estar al día, resolver dudas y compartir aplicaciones y conocimientos, apúntate a la comunidad Vibe Coding Educativo.

Paso 1: selección del chatbot o servicio de IA adecuado

Un chatbot de inteligencia artificial puede definirse como un sistema capaz de mantener una interacción conversacional y ejecutar tareas complejas en función de las instrucciones recibidas. Entre las opciones disponibles destacan los siguientes. Todos disponen de canvas, lienzo o visualizador del recurso educativo que estamos creando:

• Gemini (Google): con funciones como Canvas que permiten estructurar proyectos completos. https://gemini.google.com
• ChatGPT (OpenAI): ampliamente extendido por su versatilidad y facilidad de uso. También dispone de canvas o lienzo. https://chat.openai.com
• Qwen (Alibaba): orientado a la generación de código y con herramientas específicas de desarrollo web. Utiliza un canvas. https://qwen.ai
• Claude (Anthropic): reconocido por su claridad en la explicación de procesos y capacidad de depuración. Para la programación utiliza artefactos que no son editables por el usuario, es decir, donde no podemos editar directamente el código generado. https://claude.ai
• Deepseek: con un enfoque técnico que también resulta útil en entornos educativos. Como Claude, no puede modificarse el resultado mediante edición directa. https://deepseek.com

Además de los chatbots, se pueden utilizar plataformas que ofrecen la posibilidad de programar, aunque su enfoque es diferente.

• Canva Pro: herramienta de diseño gráfico, gratuita para docentes, que permite crear presentaciones, infografías y materiales visuales de apoyo. https://www.canva.com/education
• Lovable: servicio especializado en creación de aplicaciones y prototipos mediante IA. https://lovable.dev
• Websim: plataforma para generar y simular páginas web a partir de instrucciones en lenguaje natural. https://websim.ai

La elección de las versiones más avanzadas, como por ejemplo Gemini 2.5 Pro o ChatGPT con el modo pensamiento activado, facilita la creación de aplicaciones educativas gracias a su mayor capacidad de generación y corrección de código. Si hay una opción de «pensar» o «razonar» deberemos marcarla.

Paso 2: inicio del proceso de creación

Para garantizar la correcta producción de recursos, es necesario activar las funciones de programación que cada chatbot ofrece.

En el caso de Gemini y ChatGPT, la función Canvas (lienzo) organiza el trabajo en un entorno que permite generar, revisar y editar código. Qwen, por su parte, dispone de la opción desarrollo web, con la que se preparan estructuras en HTML, CSS o JavaScript (HTML se utiliza para estructurar el contenido de una página web, CSS para definir su aspecto visual y JavaScript para añadir interactividad). Cuando creamos un programa simple con un chatbot, estos tres elementos ya van incorporados dentro del código generado.

Este tipo de funciones operan como un “taller digital” en el que la IA recibe las herramientas necesarias para elaborar materiales educativos adaptados a las necesidades planteadas.

Paso 3: comunicación con la IA: transformar ideas en realidad mediante prompts sencillos

La forma de crear un recurso educativo es mediante lenguaje natural, explicando con el máximo detalle posible lo que deseamos. Conviene indicar siempre que sea una aplicación en HTML, de este modo no nos creará programas en Python y otros lenguajes de programación que no nos servirían para compartir en la web.

De forma opcional, pero recomendable en muchos casos, podemos también indicar:

• Que sea responsiva. Es decir, que se adapte a todo tipo de dispositivos (típicamente ordenadores, tablets y móviles).
• La licencia de uso que tendrá, aunque esto puede hacerse una vez que la aplicación está terminada (ver Licencias libres para docentes: apps educativas y materiales didácticos).

De cara a la creación de los prompts podemos utilizar dos enfoques. La primera es cuando sabemos lo que queremos, pero no cómo lo queremos. Por ejemplo:

• Crear una página HTML con un formulario básico para que los alumnos ingresen su nombre y respondan tres preguntas sobre el sistema solar.
• Generar un programa en HTML para un mini-juego de adivinar animales con pistas.
• Diseñar una plantilla HTML para una ficha de lectura con campos para título, autor y resumen.

El segundo enfoque es especificar detalles que ya tengamos pensados o que queremos incorporar después de una conversación previa con la IA. Por ejemplo:

Crea una aplicación de una sola página para gestionar fichas de lectura. Necesito que tenga las siguientes características:

• Un formulario para introducir título, autor y resumen.
• Que los datos se guarden localmente en el navegador.
• Una tabla que muestre todas las fichas guardadas.
• Botones para poder editar y borrar cada ficha de forma individual.
• Exportar todas las fichas a un archivo CSV.
• Un botón para borrar todas las fichas guardadas, con un aviso de confirmación.»

Pocas veces llegaremos al resultado deseado a la primera, por lo que deberemos decirle en cada interacción aquello que deseamos modificar hasta obtener el resultado deseado. Conviene ir guardando copias intermedias por si acabamos estropeando el programa. Una forma de hacerlo es compartirlo y guardar la URL que nos llevará siempre a esa versión concreta.

Características adicionales de canvas y visores integrados

Es importante remarcar que los programas que hagamos a través de los chatbots, en principio, tienen una serie de limitaciones:

• Excepto en Deepseek, en el resto tenemos un botón para compartir el resultado (que Qwen llama desplegar) para poder compartir lo que hemos hecho y que sea visible para los demás.
• En todos ellos, si queremos visualizar el resultado en el mismo chatbot, nos tenemos que limitar a un único archivo HTML. Esto ya lo tienen en cuenta los propios chatbots, que siempre nos ofrecerán un documento con todo lo necesario en su interior. No obstante, esto limita su aplicación en proyectos más complicados. Para proyectos complejos, una vez se dominen los chatbots, recomendamos el uso de las versiones de terminal de las IA (ver Guía básica para usar la inteligencia artificial desde la terminal).
• Todos tienen medidas de seguridad que impiden la ejecución de determinado tipo de código. Por ejemplo, la opción de guardar datos en el propio navegador no funciona nunca dentro de los visores integrados, por lo que no pueden recordar datos. En estos casos no quedará más remedio que pasarlo a una plataforma externa como GitHub. Ver GitHub para alojar recursos educativos abiertos (REA) y presentarlos en formato web.
• Canvas de Gemini:
  • Los programas de Gemini que incluyan inteligencia artificial solo podrán funcionar desde el propio entorno de Gemini. Deberemos tener en cuenta si los alumnos de nuestro centro los podrán usar (normalmente las cuentas educativas no lo permiten).
  • Las cuentas educativas no tienen la opción de compartir. Por lo tanto, la recomendación es utilizar siempre cuentas personales para crear los programas o nos encontraremos con un programa que solo podremos utilizar nosotros (a no ser que lo subamos a un servicio como GitHub).
• Las aplicaciones que hayamos compartido a partir del canvas en Gemini, ChatGPT y Claude podrán ser modificadas pulsando el botón para hacer copia que llevan integrado. De este modo podemos adaptar cualquier aplicación compartida según nuestras necesidades. Qwen permite compartir el recurso con otros usuarios, pero no les deja modificarlo.

Particularidades del canvas de Gemini

El canvas de Gemini tiene dos características únicas de las que merece la pena citar, aunque sea brevemente. Son la posibilidad de incorporar inteligencia artificial a nuestros productos y la herramienta gráfica para seleccionar sobre el propio recurso y pedir modificaciones.

Añadir características de IA a nuestro recurso

En Gemini podemos añadir IA a nuestra propia aplicación para hacerla inteligente. Deberemos tener en cuenta varios aspectos importantes:

• La aplicación solo funcionará dentro de Gemini, es decir, utilizando el botón compartir y proporcionando a los alumnos el enlace. No podríamos ponerla en Moodle, GitHub o nuestra página personal.
• Las versiones corporativas (educativas) no permiten compartir los recursos creados, por lo que es obligatorio hacerlo desde una cuenta personal.
• Las funciones de Gemini suelen estar desactivadas para el alumnado, por lo que debemos asegurarnos que pueden usar Gemini con las cuentas de centro o, en su defecto, deberán utilizar cuentas personales.

Una vez tenemos claro lo anterior, al crear un recurso educativo, en la parte inferior derecha veremos una pequeña barra de herramientas:

Al pulsar el botón para añadir IA, nos aparecerán funciones inteligentes decididas por el mismo Gemini.

Si no nos convence lo que acaba de hacer, podemos pulsar el botón «Versión anterior» para deshacer los cambios.

No es necesario pulsar el botón de IA para añadirla a nuestra aplicación, también le podemos indicar lo que queremos exactamente en el prompt inicial o más tarde, una vez tengamos la aplicación hecha. Por ejemplo, si a la versión que todavía no tiene IA le indicamos: Añade en cada ficha un cuadro de texto para que los alumnos puedan hacer preguntas a la IA y ampliar la información. El resultado será:

Herramienta para editar gráficamente el recurso

Recientemente, se ha añadido un botón que permite seleccionar una parte de la aplicación generada para pedirle a Gemini que cambie cualquier aspecto del contenido que tenemos en pantalla.

Al pulsarla, podemos seleccionar cualquier parte de la pantalla y decirle qué cambios queremos, por ejemplo, que modifique el título:

Paso 4: manejo de errores: identificación y solución

La aparición de errores forma parte habitual del proceso de generación de código. Este procedimiento de corrección recibe el nombre de depuración.

Los chatbots como Gemini, ChatGPT o Claude suelen ofrecer mecanismos de autocorrección y sugerencias para resolver fallos detectados. Ante un error, resulta recomendable interpretar el mensaje generado, solicitar a la IA una revisión del código.

Aparte de los mecanismos de autocorrección, una forma que muchas veces resulta útil es copiar el contenido a un archivo HTML, utilizando el bloc de notas o programa similar de texto (nunca Word o LibreOffice)

Paso 5: consulta con otro chatbot para errores persistentes

Cuando un error no se resuelve de forma satisfactoria, es posible recurrir a otro sistema de IA como apoyo complementario. El procedimiento consiste en trasladar el código con el fallo al nuevo chatbot, recibir una propuesta de solución y, posteriormente, proporcionar las correcciones indicadas a nuestra IA para que las ponga en práctica.

Esta estrategia se asemeja a la colaboración entre colegas: diferentes perspectivas contribuyen a encontrar soluciones más eficaces.

Paso 6: publicación de la creación: compartir la aplicación educativa con alumnos

Una vez finalizado el recurso, existen varias opciones para su difusión:

• Opción A (inmediata): compartir el proyecto y ejecutarlo directamente desde la plataforma de IA utilizada. Esta opción es obligatoria si nuestra app de Gemini utiliza en su interior la IA.
• Opción B (directa): guardar el archivo en formato HTML y abrirlo en un navegador web. Este archivo puede compartirse a través de plataformas educativas o entornos digitales de aprendizaje.
• Opción C (avanzada): utilizar espacios de almacenamiento y difusión como GitHub, que permiten compartir proyectos con mayor alcance. GitHub para alojar recursos educativos abiertos (REA) y presentarlos en formato web.

Dispones de más información y la forma de publicarlo en otros lugares como Google Sites o Moodle en la página: Dónde publicar las aplicaciones.

Resumen de características

Conclusión: integración de la IA en el aula para el futuro de la educación

La inteligencia artificial se presenta como una herramienta transformadora en la práctica docente, al posibilitar la creación de recursos personalizados sin necesidad de programación. Su valor radica en la capacidad de adaptar materiales al contexto de aprendizaje y potenciar la creatividad en el diseño de actividades educativas.

El desarrollo responsable y ético de estas tecnologías constituye un aspecto esencial. Al integrarse en el aula, la IA no solo amplía las metodologías disponibles, sino que también proyecta una visión de futuro en la que la innovación y la enseñanza avanzan de manera conjunta.

Nota: este artículo tiene nivel 3 en el Marco para la integración de la IA generativa.

Pódcast del artículo

Resumen creado por NotebookLM

FAQ creada por NotebookLM

1. ¿Qué es el «Vibe Coding» y cómo facilita la creación de herramientas educativas con IA?

El «Vibe Coding» o programación por vibraciones es la capacidad de crear recursos digitales mediante la redacción de instrucciones claras en lenguaje natural, sin necesidad de conocimientos de programación. En el ámbito educativo, esto permite a los docentes diseñar juegos de preguntas, fichas de lectura interactivas o formularios de repaso de forma sencilla, utilizando chatbots de IA. La IA se convierte así en un instrumento creativo al servicio del profesorado, transformando ideas didácticas en aplicaciones funcionales.

2. ¿Cuáles son los chatbots de IA recomendados para docentes que buscan crear herramientas educativas y qué ofrecen?

Existen varios chatbots de IA útiles para docentes, cada uno con características particulares:

• Gemini (Google): Ofrece funciones como Canvas para estructurar proyectos completos y la posibilidad de añadir inteligencia artificial a las aplicaciones creadas, aunque las apps con IA solo funcionan dentro de Gemini y las cuentas educativas no permiten compartir.
• ChatGPT (OpenAI): Ampliamente extendido por su versatilidad y facilidad de uso con un lienzo integrado para generar, editar y compartir, aunque sus diseños suelen ser básicos.
• Qwen (Alibaba): Orientado a la generación de código con una opción de «desarrollo web» y un visor integrado, pero no permite que otros modifiquen los recursos compartidos.
• Claude (Anthropic): Destaca por su claridad en la explicación de procesos y capacidad de depuración, con diseños más elegantes, pero no permite la edición directa del código generado.
• Deepseek: Con un enfoque técnico, útil para revisar y validar código con un visor integrado, aunque no ofrece botón de compartir ni edición en el visor.

Además de los chatbots, plataformas como Canva Pro (diseño gráfico), Lovable (creación de apps y prototipos) y Websim (simulación de páginas web) también pueden ser de utilidad.

3. ¿Qué pasos básicos debe seguir un docente para crear un recurso educativo con IA utilizando un chatbot?

El proceso de creación de recursos educativos con IA se resume en los siguientes pasos:

1. Selección del chatbot o servicio de IA: Elegir la herramienta más adecuada según las necesidades, como Gemini, ChatGPT, Qwen, Claude o Deepseek, considerando sus funcionalidades de Canvas o visualizador.
2. Inicio del proceso de creación: Activar las funciones de programación del chatbot (como Canvas en Gemini y ChatGPT, o la opción de desarrollo web en Qwen).
3. Comunicación con la IA mediante prompts: Redactar instrucciones claras y detalladas en lenguaje natural, especificando siempre que se desea una aplicación en HTML y, opcionalmente, que sea responsiva y con una licencia de uso. Se puede partir de una idea general o especificar detalles concretos.
4. Manejo de errores (depuración): Interpretar los mensajes de error, solicitar a la IA una revisión del código o copiar el contenido a un archivo HTML para revisar.
5. Consulta con otro chatbot (si los errores persisten): Trasladar el código con el fallo a un segundo chatbot para obtener una propuesta de solución y aplicarla en la IA original.
6. Publicación de la creación: Compartir el proyecto directamente desde la plataforma de IA, guardar el archivo HTML para abrirlo en un navegador, o usar plataformas de almacenamiento y difusión como GitHub.

4. ¿Qué son los «prompts» y cómo se utilizan eficazmente para generar herramientas educativas con IA?

Los «prompts» son las instrucciones que el usuario da a la IA en lenguaje natural para que genere un determinado recurso. Para utilizarlos eficazmente en la creación de herramientas educativas, es crucial:

• Ser lo más detallado posible: Explicar con precisión lo que se desea que la IA cree.
• Especificar el formato HTML: Es importante indicar que se quiere una aplicación en HTML para asegurar que el programa sea compartible en la web y no se generen códigos en otros lenguajes.
• Indicar características opcionales: Recomendar que la aplicación sea «responsiva» (adaptable a diferentes dispositivos) y, si se desea, la licencia de uso.

Existen dos enfoques principales para los prompts:

• Ideas generales: «Crear una página HTML con un formulario básico para alumnos…»
• Especificar detalles concretos: «Crea una aplicación de una sola página para gestionar fichas de lectura con un formulario, guardado local, tabla de fichas, botones de edición/borrado y exportación a CSV.»

5. ¿Qué limitaciones tienen los programas creados con chatbots de IA para docentes y cómo se pueden abordar?

Los programas creados directamente con chatbots de IA, especialmente en sus visores integrados, presentan algunas limitaciones:

• Un solo archivo HTML: Generalmente, se limitan a un único archivo HTML, lo que restringe su aplicación en proyectos más complejos. Para estos, se recomienda el uso de versiones de terminal de la IA.
• Medidas de seguridad: Impiden la ejecución de cierto tipo de código, como guardar datos en el propio navegador, lo que significa que no pueden recordar información. Para guardar datos de forma persistente, es necesario trasladar el proyecto a plataformas externas como GitHub.
• Funcionalidades de IA en Gemini: Si una aplicación de Gemini incluye IA, solo funcionará dentro del entorno de Gemini y no podrá ser compartida desde cuentas educativas, requiriendo el uso de cuentas personales.
• Edición de recursos compartidos: Mientras que Gemini, ChatGPT y Claude permiten hacer una copia y modificar aplicaciones compartidas, Qwen permite compartir pero no editar el recurso por otros usuarios.

Para abordar estas limitaciones, se sugiere utilizar plataformas externas para proyectos complejos o para guardar datos, y considerar las particularidades de cada chatbot al momento de la creación y difusión.

6. ¿Cómo se puede integrar la inteligencia artificial directamente en una aplicación educativa creada con Gemini?

Gemini ofrece la posibilidad de añadir características de IA a una aplicación educativa, lo que la hace «inteligente». Para lograrlo, se deben considerar algunos aspectos importantes:

• Funciona solo dentro de Gemini: La aplicación solo funcionará y podrá ser utilizada dentro del entorno de Gemini, mediante el enlace compartido. No se podrá integrar en otras plataformas como Moodle o GitHub.
• Cuentas personales: Es obligatorio crear y compartir estos recursos desde una cuenta personal, ya que las versiones corporativas o educativas no permiten compartir aplicaciones con funciones de IA.
• Disponibilidad para el alumnado: Hay que asegurarse de que los alumnos puedan usar Gemini con sus cuentas de centro o, si no es posible, deberán usar cuentas personales para interactuar con la aplicación.

Una vez que se tiene claro lo anterior, al crear el recurso, se puede pulsar un botón específico en la barra de herramientas inferior derecha para añadir opciones de IA que Gemini determine. Alternativamente, se puede indicar directamente en el prompt inicial o en interacciones posteriores qué funciones inteligentes se desean, por ejemplo: «Añade en cada ficha un cuadro de texto para que los alumnos puedan hacer preguntas a la IA y ampliar la información.»

7. ¿Qué opciones de publicación y difusión existen para las aplicaciones educativas creadas con IA?

Una vez finalizado el recurso educativo, hay varias opciones para su difusión, dependiendo de las necesidades y características de la aplicación:

• Opción A (inmediata): Compartir el proyecto directamente desde la plataforma de IA utilizada. Esta es la opción obligatoria si la aplicación de Gemini utiliza funciones de IA internas.
• Opción B (directa): Guardar el archivo generado en formato HTML y abrirlo en un navegador web. Este archivo puede compartirse fácilmente a través de plataformas educativas o entornos digitales de aprendizaje.
• Opción C (avanzada): Utilizar espacios de almacenamiento y difusión como GitHub, que permiten compartir proyectos con un alcance mayor, especialmente útil para recursos educativos abiertos (REA) y para alojar aplicaciones más complejas que requieren guardar datos o múltiples archivos.

Además, se menciona la posibilidad de publicarlo en otros lugares como Google Sites o Moodle, para lo cual se recomienda consultar la página «Dónde publicar las aplicaciones».

8. ¿Qué estrategias de depuración o resolución de errores se recomiendan al crear código con chatbots de IA?

La aparición de errores es una parte normal del proceso de generación de código con IA. Para manejarlos eficazmente, se recomiendan las siguientes estrategias:

• Interpretación del mensaje de error: Los chatbots como Gemini, ChatGPT o Claude suelen ofrecer mensajes claros que explican el error. Es fundamental leerlos y comprenderlos.
• Solicitar revisión a la IA: Pedir a la propia IA que revise el código y sugiera soluciones para el fallo detectado.
• Copiar el contenido a un archivo HTML externo: Una técnica útil es copiar el código generado a un archivo HTML simple usando un bloc de notas (nunca programas de procesamiento de texto como Word o LibreOffice). Esto permite una revisión manual más sencilla.
• Consulta con otro chatbot: Si un error persiste y no se resuelve satisfactoriamente, se puede recurrir a un segundo sistema de IA. El procedimiento consiste en trasladar el código con el fallo a este nuevo chatbot para que proponga una solución, la cual luego se aplica en la IA original. Esta estrategia aprovecha diferentes perspectivas para una depuración más eficaz.

Hace pocos días publiqué el artículo titulado Cómo crear mini-aplicaciones educativas con Claude. Nada más terminarlo descubrí que la IA de origen chino y código abierto DeepSeek permitía crear, no solo programas, ya que eso lo hacen todas, sino ejecutar en el mismo chatbot los programas que han sido creados en formato HTML.

Por lo tanto, al igual que Claude, es ideal para proponerle nuestras ideas y que sea la IA la que las plasme en forma de aplicación que podremos poner al alcance de los alumnos.

Consulta también el artículo: Cómo crear aplicaciones educativas con IA para integrarlas en tus recursos digitales.

Cómo hacer una aplicación

En primer lugar, debemos marcar el botón que hay en el mismo chat con el texto DeepThink, eso activa un modelo de IA tremendamente potente y claramente superior al de Claude. En el momento de escribir esto, es comparable con ChatGPT-o1, si bien este último parece ligeramente superior para determinadas tareas.

Una vez marcada esta opción, debemos plantearle lo que queremos hacer. Por ejemplo:

Haz una aplicación en HTML para aprender la conversión de unidades de temperatura, debe ser didáctica, autoexplicativa y atractiva

En este momento DeepSeek inicia un diálogo consigo mismo donde podremos ver los pensamientos que lo llevan a su respuesta.

En su respuesta incluye el código en una caja de fondo negro, similar a la de la imagen. Para ver cómo funciona el programa, deberemos pulsar Run HTML:

En nuestro caso, el resultado es este:

La aplicación está bien, pero la queremos mejorar visualmente, haciendo fórmulas de más calidad, por lo que le decimos:

Utiliza LaTeX para las fórmulas. Escribe todo el código

Es necesario decirle que escribe todo el código en cada petición que le hagamos, ya que de lo contrario solo pondría las modificaciones, pero no el programa completo. Finalmente nos hace la aplicación que ya damos por buena y que puedes probar a continuación:

Aplicación totalmente funcional sobre las unidades de temperatura

Otro ejemplo, en este caso le hemos pedido una aplicación para aprender las horas. El diálogo ha sido mucho más largo, puesto que le hemos hecho hacer numerosas modificaciones. Esta aplicación también es totalmente operativa y puedes interactuar con ella:

Aplicación totalmente funcional para aprender las horas del reloj

Aspectos a tener en cuenta

• Actualmente, no hay límite en el uso de DeepSeek, pero una misma conversación sí tiene límite y equivale aproximadamente a 16000 palabras. Si nos encontramos con este caso, simplemente tendremos que copiar el último código que nos generó, comenzar una nueva conversación y pegarlo allí para continuar.
• Cuando el código tiene cierta longitud, no lo escribe todo, sino solo la parte que le hemos pedido que rectifique, por lo que estará incompleto. Por este motivo, a partir de la segunda interacción, conviene decirle que escriba todo el código. Si en algún momento se nos ha olvidado y solo lo escribe parcialmente, bastará con decirle que escriba todo el código. Nos daremos cuenta porque al ejecutar el HTML sale solo una parte y el resto está en blanco o bien ha perdido parte de su funcionalidad.
• Las aplicaciones tienen que ser sencillas (por eso les hemos llamado mini-aplicaciones). Si deseamos algo más ambicioso, tendremos que dividirlo en pequeñas aplicaciones que sean manejables por la IA.
• Las aplicaciones difícilmente son aptas para su uso en la primera o segunda interacción, normalmente son necesarias más versiones y, de forma iterativa, ir mejorando el resultado hasta obtener lo que queremos.

Formas de compartir la mini-aplicación

• Insertarla como código:
  • En Google Sites.
  • En eXeLearning (enlace externo).
  • En WordPress.
• Descargarla como archivo para compartir.

Insertar la mini-aplicación en Google Sites

Para obtener el código creado por DeepSeek, seguiremos estos sencillos pasos:

1. Para poder incorporar nuestra aplicación a Google Sites deberemos pedirle que nos la haga en HTML.

2. A continuación, pulsamos el botón Copy que está en la parte superior derecha del cuadro del código:

3. En el modo edición de Google Sites pulsamos en el menú lateral sobre la opción Insertar > Insertar código > Siguiente > Insertar. La mini-aplicación aparecerá en nuestra web y le podremos dar el tamaño que queramos.

Insertar la mini-aplicación en WordPress

1. Seguiremos los dos primeros pasos explicados en el punto anterior para Google Sites para copiar el código.
2. Insertaremos el bloque HTML personalizado y allí pegaremos el código.

Uno de los problemas que hemos tenido con WordPress (este blog lo usa) es que a veces el fondo colorado de la aplicación se extiende a todo el post del blog con lo que queda estéticamente muy mal. Para solucionarlo, solo tenemos que decirle a DeepSeek algo como esto:

Quiero insertar este código en WordPress, pero me cambia el fondo de toda la página del post. ¿Puedes hacer que el fondo se limite a la zona de la aplicación?

DeepSeek lo arregla y gracias a esto hemos podido insertar las dos aplicaciones que hay más arriba.

Descargar la mini-aplicación como archivo para compartir

DeepSeek no permite, como Claude, descargar el código, pero no es ningún problema porque bastará con copiarlo y pegarlo en un archivo de texto y guardarlo con extensión html.

Por ejemplo, se pega en un documento vacío de Google Docs y se baja como archivo de texto sin formato:

Cuando lo guardemos, debemos asegurarnos que la extensión (formada por las letras tras el punto) sea html. Es decir: mi_aplicacion.html

Este archivo se puede abrir con cualquier navegador y contendrá nuestra aplicación. Con ella podemos:

• Enviarla por correo a los alumnos.
• Añadirla como adjunto en Classroom.
• Subirlo a nuestra página web, si tenemos una que permita hacerlo.
• Guardarla en nuestro almacén en la nube (Drive, Dropbox, etc.) para compartirla con el alumnado.
• Utilizar cualquier otro sistema de difusión o publicación que tengamos a nuestro alcance.

Conclusiones

Crear aplicaciones educativas nunca había estado tan al alcance del profesorado como en la actualidad. Tanto Claude como DeepSeek son de momento las más sencillas de usar para esta tarea por el hecho de poder ver el resultado sin salir del chatbot. En estos momentos DeepSeek no tiene límites de uso, por lo que podremos hacer una aplicación sin agotar los mensajes que le podemos enviar, cosa que sí sucede con Claude, por este motivo, ahora mismo esta IA es preferible a cualquier otra para esta tarea. Si nos gustan más las aplicaciones que hace Claude, podemos empezar pidiéndole a Claude la aplicación y cuando llegue a su límite, la podemos pasar a DeepSeek para que la termine.

Animamos a todos a crear pequeñas aplicaciones adaptadas a lo que hacemos en el día a día en nuestras clases, aplicaciones hechas a medida que ninguna plataforma educativa no podrá proporcionar nunca.

Pódcast creado con IA

Preguntas Frecuentes sobre la creación de mini-aplicaciones educativas con DeepSeek

1. ¿Qué es DeepSeek y cómo se diferencia de otras herramientas de IA para la creación de aplicaciones? DeepSeek es un modelo de inteligencia artificial que, a diferencia de otras herramientas, permite no solo generar código (como HTML), sino también ejecutarlo directamente dentro del mismo chat. Esto facilita la creación de mini-aplicaciones interactivas, como las que se pueden ver en los ejemplos del artículo (conversor de temperatura y aprendizaje de la hora). Además, DeepSeek cuenta con una opción llamada "DeepThink" que activa un modelo de IA más potente, similar a ChatGPT-o1 en muchas tareas. Esto hace que el proceso de creación de aplicaciones sea más intuitivo e iterativo, permitiendo mejorar las aplicaciones a través de sucesivos diálogos con la IA.
2. ¿Cómo puedo iniciar la creación de una mini-aplicación educativa con DeepSeek? Para comenzar, debes activar la opción "DeepThink" en el chat. Luego, puedes describir tu idea para la aplicación, como por ejemplo "Haz una aplicación en HTML para aprender la conversión de unidades de temperatura". DeepSeek generará el código y te permitirá ver cómo funciona ejecutándolo directamente en el chat. Puedes solicitar modificaciones sucesivas hasta obtener el resultado deseado, como mejorar el formato de las fórmulas o la apariencia visual en general.
3. ¿Qué tipo de aplicaciones educativas se pueden crear con DeepSeek? DeepSeek es ideal para crear mini-aplicaciones educativas que sean sencillas y manejables. Los ejemplos del artículo incluyen un conversor de unidades de temperatura y una aplicación para aprender la hora. Sin embargo, se pueden crear otras herramientas, como por ejemplo, pruebas, juegos interactivos simples, o cualquier otro tipo de aplicación que sea interactiva y útil para el aprendizaje de diversos temas. Es importante tener en cuenta que la complejidad debe ser limitada; para proyectos más ambiciosos, se recomienda dividirlos en varias mini-aplicaciones.
4. ¿Cuál es el proceso de iteración y mejora de las aplicaciones creadas con DeepSeek? Las mini-aplicaciones rara vez están perfectas en la primera iteración. La metodología adecuada para obtener el mejor resultado es ir modificando la aplicación en el diálogo con DeepSeek. Es decir, después de ver el resultado inicial, se puede pedir, por ejemplo, "Utiliza LaTeX para las fórmulas" o "Haz que el fondo se limite a la zona de la aplicación". Estas solicitudes y modificaciones llevan a DeepSeek a generar versiones mejoradas del código, que pueden ser probadas y modificadas hasta obtener el resultado deseado. La naturaleza iterativa del proceso es clave para el éxito.
5. ¿Cómo puedo compartir las mini-aplicaciones que he creado con DeepSeek? Hay varias formas de compartir las mini-aplicaciones. Puedes insertarlas directamente en Google Sites, WordPress o eXeLearning siguiendo los pasos explicados en el artículo. También puedes descargar el código como un archivo HTML para compartirlo por correo electrónico con tus estudiantes o subirlo a plataformas como Classroom o tu propia página web.
6. ¿Cuáles son las limitaciones de DeepSeek para crear estas mini-aplicaciones? Aunque DeepSeek es muy potente, tiene limitaciones. Por ejemplo, el uso en una misma conversación está limitado a aproximadamente 16,000 palabras. Si se excede, es necesario copiar el código más reciente, iniciar una nueva conversación y pegar el código allí. Además, cuando se pide modificaciones, DeepSeek puede no escribir todo el código, sino solo la parte que se ha solicitado cambiar. En este caso, se debe pedir que escriba todo el código. Finalmente, es recomendable mantener la complejidad de las aplicaciones limitada, ya que DeepSeek no es adecuada para proyectos complejos y largos.
7. ¿Cómo puedo insertar una mini-aplicación creada con DeepSeek en mi sitio web de WordPress? Primero, hay que copiar el código HTML generado por DeepSeek (usando el botón "Copy"). En WordPress, se debe insertar un bloque HTML personalizado y pegar allí el código. Es posible que el fondo de la aplicación se extienda a toda la página. Para solucionarlo, puedes pedirle a DeepSeek que limite el fondo a la zona de la aplicación.
8. ¿Puedo descargar las aplicaciones creadas con DeepSeek como un archivo? DeepSeek no ofrece una opción directa para descargar el código, pero se puede copiar y pegar el código en un documento de texto y guardarlo con la extensión ".html". Este archivo se puede abrir en cualquier navegador y contendrá la aplicación, permitiendo compartirla a través de correo electrónico, Classroom o cualquier otra plataforma.

FAQ creadas por NotebookLM

Quizás también te interese:

• Cómo crear mini-aplicaciones educativas con Claude.
• Cómo crear aplicaciones educativas con IA para integrarlas en tus recursos digitales

Nota: Nivel 0 en el Marco para la integración de la IA generativa, excepto las FAQ que han sido producidas íntegramente con IA (nivel 5).