eXeLearning es un programa de software libre para crear recursos educativos. Nos permite añadir texto, imágenes, audio, vídeo y dispone de un completo conjunto de recursos interactivos. Además, podemos insertar cualquier recurso creado fuera de eXeLearning gracias a su gestor de archivos, capaz de albergar cualquier objeto digital, y a la capacidad que tiene eXeLearning para insertarlos, aunque estén fuera del propio recurso.
Los proyectos (nombre que se da a los archivos creados con eXe, que tienen extensión ELPX) se pueden también exportar como página web (nos dará un archivo ZIP con la web en su interior), SCORM 1.2 (utilizado por programas educativos como Moodle), ePub (para libros electrónicos) y también como página única (todo el proyecto en una única página).
Hemos hecho tres aplicaciones que ofrecen apoyo al programa:
EdEX es un editor de estilos que permite utilizar diversas fuentes:
Por defecto, aparece un ejemplo cargado con el estilo base de eXeLearning. Podemos empezar a modificarlo o seleccionar cualquiera del resto de estilos que vienen con eXeLearning.
Cargar un estilo en formato ZIP de cualquier versión.
Cargar un archivo ELPX y trabajar directamente con él y el estilo que lleva incorporado. Podremos extraer el estilo por separado y volver a guardar el ELPX que lo incorporará.
Una vez que comencemos a modificarlo, podremos hacerlo a través de las pestañas que hay en el panel izquierdo o pulsando el botón para cambiar a modo edición por clic (el botón que hay en la esquina superior derecha).
eXeConvert
eXeConvert permite convertir entre diferentes formatos, donde el ELPX es el formato central.
ELP. Es el formato de las versiones anteriores. Cualquier ELP cargado en el programa es automáticamente convertido en ELPX que podremos guardar en el ordenador o convertirlo en DOCX, MD o PDF.
DOCX. Podemos exportar el ELPX hacia DOCX, pero también importar el DOCX para generar un ELPX. Los diferentes niveles de encabezados definen las páginas, subpáginas y los iDevices.
En el caso ELPX -> DOCX, se crearán los encabezados siguiendo la pauta: Los títulos de las páginas se convertirán en encabezado 1, los de las subpáginas en encabezado 2, las subpáginas de las subpáginas, encabezado 3, etc. Los títulos de los iDevices serán los próximos encabezados no usados (el 2, 3, …). Los encabezados propios que ya lleven los iDevices se adaptan a esta estructura descendente, hasta un máximo de 6 niveles.
Para el caso opuesto DOCX -> ELPX se sigue el mismo proceso, pero el usuario decide cuántos niveles de páginas habrá.
MD. Corresponde al formato Markdown. Se pueden insertar las imágenes, o no, en el texto, aunque no es aconsejable sin un motivo concreto, ya que se codifican en base64 y el archivo quedará lleno de caracteres no legibles. Exportar en este formato es muy útil para extraer únicamente el texto con un formato bien definido. Se siguen las mismas reglas de importación/exportación con encabezados que en el formato DOCX.
PDF. El ELPX se puede guardar en formato PDF.
Cuando exportemos a DOCX, MD o PDF, podremos elegir qué páginas queremos exportar: todas o solo alguna.
Infografía: Formatos con los que trabaja eXeConvert
Sugerencia: Podemos crear la estructura de un recurso en Markdown utilizando una IA y diciéndole que utilice encabezados para los diferentes niveles del índice. Al convertir en ELPX este archivo, obtendremos la estructura completa de páginas y subpáginas de una forma muy sencilla.
Visor Web-ZIP
Visor Web-ZIP es un programa que nos permite publicar y compartir un ELPX o un proyecto exportado en ZIP (de cualquier versión de eXeLearning) simplemente subiendo a Drive, Dropbox, Nextcloud, Box.com o un sistema similar el archivo.
Para publicar un ELPX o un proyecto exportado como página web en ZIP, únicamente necesitamos:
Subir el archivo a un sistema de almacenamiento en la nube y compartirlo para que todos puedan verlo (Google Drive solo permite archivos de unos 25MB, si nuestro recurso ocupa más, habrá que utilizar otro servicio).
Pegar el enlace para compartir que hemos obtenido en la nube en la sección 2 del programa y copiar el enlace que nos proporciona. Con ese enlace cualquiera podrá ver en su navegador nuestro proyecto.
Se pueden poner fechas de apertura y cierre de visualización del recurso. Véase el artículo anterior para saber cómo hacerlo.
En la siguiente presentación se explica con más detalle el proceso, incluyendo los límites de distintos servicios y cómo subir archivos de hasta 2GB para compartir.
ELPX Translator Desktop
A diferencia del resto de programas, este no es una página web, sino una aplicación que debe ser instalada en el ordenador local. El motivo es que, al hacer uso de un modelo de traducción de IA, los requerimientos de cálculo son demasiado exigentes para ser llevados a cabo por un navegador.
Hay dos versiones para Linux (una para derivados de Debian y una AppImage), una para Windows y otra para macOS.
El funcionamiento es bien sencillo. Se indica qué archivo ELPX se quiere traducir, se elige el idioma al que se traducirá y se pulsa el botón Traducir.
Se utilizan modelos de código abierto que se ejecutan en local, por lo tanto, no se envían datos a ningún lado. M2M100 418M de Meta para todos los idiomas, excepto euskera y OPUS-MT, que es de la Universidad de Helsinki (Helsinki-NLP), para euskera.
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).
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.
Prompt: Diseñar una plantilla HTML para una ficha de lectura con campos para título, autor y resumen. Hecho con Gemini 2.5 Pro. Su funcionalidad es limitada ya que no se puede guardar el resultado.
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:
Presentación creada por Gemini con el prompt: «Crea una presentación HTML que explique mediante fichas el concepto evolutivo actual a alumnos de 4º de ESO». El botón señalado añadirá opciones de intelegencia artificial. Pulsa sobre la imagen para acceder.
Al pulsar el botón para añadir IA, nos aparecerán funciones inteligentes decididas por el mismo Gemini.
Presentación con funciones inteligentes determinadas por Gemini. Pulsa sobre la imagen para acceder.
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á:
Cada ficha dispone de un espacio para escribir con el que el alumnado podrá hacer preguntas. Pulsa sobre la imagen para acceder
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:
Podemos seleccionar cualquier área y pedirle a Gemini modificaciones.
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.
Muy versátil y sencillo para generar, editar y compartir desde un lienzo.
Los diseños que genera son pobres y simples.
Útil para continuar programas ya empezados por otros o para corregir errores, pero poco recomendable para iniciar proyectos desde cero debido a sus diseños básicos.
Visor integrado útil para revisar y validar código con enfoque técnico.
No ofrece botón de compartir ni edición en el visor.
Como apoyo técnico para revisar soluciones, más que para crear y distribuir recursos finales desde el visor.
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.
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:
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.
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).
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.
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.
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.
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.
Como docente que crea materiales digitales, todo lo que produces está automáticamente protegido por derechos de autor. Sin una licencia clara, nadie puede usar legalmente tus creaciones, ni siquiera otros profesores de tu centro.
Las licencias libres son tu manera de decir: «Puedes usar esto, pero bajo estas condiciones».
Dos tipos de creaciones, dos tipos de licencias
En tus proyectos educativos mezclas dos cosas diferentes que necesitan licencias distintas:
Código (la parte técnica)
Todo lo que hace que funcione tu creación digital:
Una aplicación web para que los alumnos practiquen matemáticas.
Un formulario automático que califica ejercicios.
Una plantilla de Moodle personalizada.
Un script que genera gráficas automáticamente.
Contenidos (la parte educativa)
El material didáctico que creates:
Los textos explicativos de la aplicación.
Las actividades y ejercicios.
Los vídeos tutoriales.
Las imágenes y diagramas.
Las rúbricas de evaluación.
¿Por qué licencias diferentes? Porque el código necesita permisos especiales (ejecutar, compilar, redistribuir) que no tienen sentido para un texto o una imagen.
Licencias para contenidos educativos (lo más importante para ti)
CC BY-SA – Atribución + compartir igual
Qué significa: «Úsalo libremente, menciona mi autoría, y si lo modificas, compártelo con la misma licencia».
Ejemplo práctico: Tu infografía del sistema solar puede ser mejorada por otros, pero deben compartir esa versión mejorada con la misma libertad.
Ventaja: Garantiza que las mejoras vuelvan a la comunidad docente. Alineación: Coherente con los principios de participación activa y colaboración.
CC BY – Atribución simple
Qué significa: «Úsalo libremente, solo menciona que soy el autor».
Ejemplo práctico: Creas una infografía sobre el sistema solar. Cualquier profesor puede usarla, modificarla o incluirla en un libro, solo debe poner tu nombre.
Ventaja: Máxima difusión de tu trabajo. Inconveniente: Alguien podría cerrar las mejoras sin compartirlas.
CC BY-NC-SA – Con restricción comercial
Qué significa: Lo mismo que BY-SA, pero prohíbe usos comerciales.
Problema: «Comercial» genera dudas. ¿Puede usarlo un centro privado? ¿En una plataforma con publicidad? ¿En un curso que cobra matrícula? Por eso muchas instituciones la evitan.
Recomendación: Mejor evitar «NC» para no limitar usos educativos legítimos.
Licencias para código (si creas aplicaciones o herramientas)
AGPL v3 – Garantiza reciprocidad también en la web
Qué significa: «Si usas mi código para ofrecer un servicio a través de una red (por ejemplo, una aplicación educativa en un servidor web), debes compartir también las modificaciones con la misma licencia».
Ejemplo práctico: Creas una aplicación web para practicar matemáticas. Si alguien la mejora y la ofrece a sus alumnos desde su propio servidor, debe publicar esas mejoras.
Ventaja: Asegura que las mejoras vuelvan a la comunidad incluso cuando el código no se redistribuye directamente, sino que se usa como servicio online.
Alineación: Refuerza la filosofía de conocimiento abierto en el contexto actual, donde muchas aplicaciones educativas se ofrecen como páginas web.
MPL 2.0 – Copyleft moderado
Qué significa: «Si modificas estos archivos específicos, debes compartir esas modificaciones, pero puedes combinar con código cerrado».
Ejemplo práctico: Si mejoras tu calculadora web, solo debes compartir los archivos que modificaste, no todo el proyecto.
Ventaja: Equilibrio entre reciprocidad y flexibilidad de integración. Alineación: Copyleft parcial, menos restrictivo que AGPL v3.
Apache 2.0 – Máxima adopción, sin reciprocidad
Qué significa: «Usa este código como quieras, pero si contribuyes, no podrás demandarme por patentes después».
Importante: NO obliga a compartir mejoras. Permite que otros cierren las modificaciones.
Ventaja: Muy compatible con proyectos institucionales y comerciales. Inconveniente: Las mejoras pueden no volver a la comunidad.
MIT – Simple pero sin protecciones
Qué significa: «Usa este código como quieras, solo menciona mi autoría».
Limitaciones: No protege contra patentes ni garantiza reciprocidad.
Tablas comparativas
Licencias de código: enfoque en reciprocidad
Licencia
Garantiza retorno a la comunidad
Filosofía
Apreciación educativa
AGPL v3
✅ Sí, total (incluye uso en red)
Conocimiento abierto en la web
Recomendada para apps educativas ofrecidas como páginas web, asegura que las mejoras se compartan aunque no haya redistribución del código
MPL 2.0
✅ Sí, parcial
Copyleft moderado
Adecuada para colaboración entre docentes, equilibrando retorno y flexibilidad
Apache 2.0
❌ No
Adopción sin barreras
Útil para instituciones que buscan adopción amplia sin exigir retorno obligatorio
MIT
❌ No
Simplicidad máxima
Muy práctica para docentes que desean difundir recursos sin condiciones
Para: Proyectos alineados con el conocimiento abierto y la participación activa. Asegura que las mejoras vuelvan a la comunidad educativa.
Para máxima adopción institucional
Contenidos: CC BY
Código: Apache 2.0
Para: Cuando priorizas que tu trabajo se use ampliamente, incluso si las mejoras no regresan.
Opción intermedia
Contenidos: CC BY-SA
Código: MPL 2.0
Para: Copyleft moderado en código (solo archivos modificados deben compartirse) con reciprocidad total en contenidos. Más flexible para integraciones institucionales que AGPL v3.
Casos prácticos para docentes
Caso 1: App de ejercicios de matemáticas
Tu creación: Una aplicación web donde los alumnos resuelven ecuaciones. Licencias:
Código de la aplicación → AGPL v3
Ejercicios y explicaciones → CC BY-SA
Caso 2: Presentación interactiva
Tu creación: Una presentación con animaciones en JavaScript. Licencias:
Scripts de animación → AGPL v3
Contenido de las diapositivas → CC BY-SA
Caso 3: Material imprimible
Tu creación: Fichas de trabajo en PDF. Licencia: Solo CC BY-SA (no hay código)
Preguntas frecuentes de docentes
P: ¿Puedo ganar dinero vendiendo material con CC BY-SA? R: Sí, puedes vender tu trabajo. CC BY-SA no prohíbe ganar dinero, solo obliga a mantener la misma licencia en las modificaciones.
P: ¿Qué pasa si uso imágenes de Internet en mis materiales? R: Debes respetar la licencia de cada imagen. Usa bancos de imágenes con licencias claras como Unsplash (tipo CC BY) o Pixabay.
P: ¿Es obligatorio poner licencias? R: No es obligatorio, pero sin licencia nadie puede usar legalmente tu trabajo. Si quieres que se comparta, pon licencia.
P: ¿AGPL v3 limita la adopción de mi código? R: Puede limitarla en entornos que prefieren cerrar sus modificaciones, pero garantiza que las mejoras vuelvan a la comunidad educativa. Es una decisión de valores: ¿prefieres máxima adopción o reciprocidad?
P: ¿Puedo cambiar la licencia de un material que he creado o adaptado?R: Depende del origen del material. Si es tu trabajo original, puedes cambiar la licencia para versiones futuras, pero las ya publicadas mantienen su licencia. Si has adaptado trabajo de otros, debes respetar la licencia original: adaptar material CC BY-SA obliga a que tu versión sea CC BY-SA también.
P: ¿Qué licencia debo elegir en GitHub si mi repositorio incluye código y materiales educativos?R: Lo más claro es no seleccionar ninguna licencia en el asistente de GitHub. Después, en tu repositorio:
Cómo aplicar las licencias
Para contenidos educativos (Creative Commons u otras):
Añade en la página principal o en un lugar destacado de tu proyecto un texto claro indicando la licencia elegida (por ejemplo: «Esta obra está bajo licencia [nombre de la licencia]»).
Incluye el enlace oficial a la licencia correspondiente.
Si es posible, acompáñalo con el icono oficial de la licencia (Creative Commons, etc.).
Para código (AGPL, Apache, MIT, MPL u otras):
Añade en la misma página principal o en un lugar destacado de tu proyecto una mención clara a la licencia elegida para el código, junto con el enlace oficial.
Incluye el archivo LICENSE.txt con el texto completo de la licencia.
Añade una nota breve al inicio de cada archivo de código indicando la licencia.
Menciona la licencia también en la documentación del proyecto.
Recomendación final
Para docentes comprometidos con el conocimiento abierto y la reciprocidad:
Contenidos educativos: CC BY-SA 4.0
Código: AGPL v3
Esta combinación garantiza que tu trabajo y las mejoras que otros hagan permanezcan abiertas para toda la comunidad educativa, fomentando la participación activa y la colaboración.
Generador de licencias para recursos educativos abiertos (REA)
Aquí tienes una utilidad con la que puedes elegir las licencias que quieres. Obtendrás un texto que puede ser pegado en un documento de texto, un prompt que puedes usar para que la IA cree automáticamente las licencias de uso y un bloque HTML que puedes pegar directamente en una página web.
El uso de los Objetivos de Desarrollo Sostenible (ODS) en educación permite conectar el aprendizaje con problemáticas globales reales. Sin embargo, diseñar actividades que integren los ODS de manera efectiva en el aula puede ser un desafío. Para facilitar este proceso, se ha desarrollado un EduPrompt que ayuda a los docentes a generar actividades alineadas con los ODS de forma rápida y estructurada.
El poder de los ODS en el aula
Los ODS son 17 metas globales establecidas por la ONU en 2015 para abordar problemas como la pobreza, la desigualdad, el cambio climático y la paz. Estos objetivos buscan promover un futuro sostenible y equitativo antes de 2030, y su integración en la enseñanza permite a los estudiantes comprender su impacto en la sociedad y desarrollar competencias clave como el pensamiento crítico y la resolución de problemas.
El EduPrompt para diseñar actividades basadas en los ODS
Este EduPrompt guía a los docentes en la creación de actividades educativas relacionadas con los ODS, asegurando que estén alineadas con los saberes y criterios de evaluación de la materia. La IA actúa como un experto en ODS y educación, estructurando la actividad paso a paso.
Cómo funciona el EduPrompt
La IA sigue una secuencia de preguntas para recopilar la información necesaria y diseñar una actividad relevante para el aula:
Identificación del contexto educativo
Pregunta al docente el curso y la asignatura en la que se implementará la actividad.
Selección de saberes
Solicita al docente que indique qué saberes específicos quiere trabajar con su alumnado.
Alineación con criterios de evaluación
Recoge los criterios de evaluación asociados a los saberes seleccionados.
Propuesta de ODS
Basándose en los saberes y criterios indicados, la IA sugiere tres ODS que se relacionan con el contenido, para que el docente elija el más adecuado.
Generación de la actividad
Una vez seleccionado el ODS, la IA diseña una actividad didáctica, justificando su relación con el objetivo elegido y explicando cómo ayuda a desarrollar los saberes planteados.
Puesta en práctica de la actividad
Se detalla un plan de implementación con ejercicios y actividades concretas, asegurando que la propuesta sea viable y efectiva en el aula.
Ejemplo de uso
Un docente de Ciencias Sociales en 3º de ESO quiere trabajar el impacto del crecimiento urbano en el medioambiente. El EduPrompt le guía en la creación de una actividad siguiendo estos pasos:
Saberes: Desarrollo sostenible y urbanismo.
Criterios de evaluación: Analizar los efectos de la urbanización en el entorno natural.
ODS sugeridos: ODS 11 (Ciudades y comunidades sostenibles), ODS 13 (Acción por el clima) y ODS 15 (Vida de ecosistemas terrestres).
ODS seleccionado: ODS 11.
Actividad generada: Los estudiantes investigarán el crecimiento urbano en su localidad, identificarán impactos negativos y propondrán medidas sostenibles para mejorar la planificación urbana.
Puesta en práctica: Trabajo en grupos con recolección de datos locales, análisis de casos y presentación de propuestas mediante infografías o videos.
Ventajas de este enfoque
Alineación curricular: La actividad se estructura según los saberes y criterios de evaluación de la asignatura.
Conexión con la realidad: Se fomenta el aprendizaje significativo al vincular el contenido con problemáticas globales.
Facilidad y rapidez: El uso de IA permite diseñar actividades educativas en pocos minutos, optimizando el tiempo del docente.
Personalización: Se adapta a diferentes niveles educativos y áreas del conocimiento.
Conclusión
Gracias a este EduPrompt, cualquier docente puede diseñar actividades basadas en los ODS de manera estructurada y eficiente. Integrar estos objetivos en la educación permite a los estudiantes desarrollar una conciencia global y habilidades clave para el siglo XXI.
Si deseas probar esta herramienta, puedes acceder al EduPrompt de actividades basadas en ODS en el siguiente enlace: EduPrompt ODS y comenzar a transformar tu enseñanza con la ayuda de la inteligencia artificial.
Preguntas Frecuentes sobre el Uso de los ODS en Educación con IA
¿Qué son los Objetivos de Desarrollo Sostenible (ODS) y por qué son importantes en la educación? Los ODS son 17 metas globales establecidas por la ONU en 2015, que abordan problemas mundiales como la pobreza, la desigualdad, el cambio climático y la paz. Su integración en la educación es crucial porque permite a los estudiantes comprender el impacto de estos problemas en la sociedad y desarrollar habilidades esenciales como el pensamiento crítico y la resolución de problemas, preparándolos para un futuro más sostenible y equitativo.
¿Qué es el EduPrompt y cómo facilita la creación de actividades educativas basadas en los ODS? El EduPrompt es una herramienta basada en inteligencia artificial (IA) diseñada para guiar a los docentes en la creación de actividades educativas alineadas con los ODS. Actúa como un experto en ODS y educación, estructurando el proceso de diseño paso a paso. Ayuda a los docentes a integrar los ODS de forma rápida y eficiente, asegurando que las actividades estén conectadas con los saberes y criterios de evaluación del currículo.
¿Cuál es el proceso que sigue el EduPrompt para diseñar una actividad educativa? El EduPrompt sigue un proceso estructurado que comienza con la identificación del contexto educativo, preguntando el curso y la asignatura. Luego, solicita al docente que especifique los saberes que desea trabajar y los criterios de evaluación asociados. Basándose en esta información, la IA sugiere tres ODS relevantes. Una vez seleccionado un ODS, la IA genera una actividad didáctica, justificando su relación con el objetivo y explicando cómo ayuda a desarrollar los saberes planteados. Finalmente, ofrece un plan de implementación con ejercicios y actividades concretas.
¿Qué tipo de información debe proporcionar el docente al EduPrompt para obtener una actividad educativa relevante? El docente debe proporcionar información sobre el curso y la asignatura en la que se implementará la actividad, así como los saberes específicos que se desean trabajar y los criterios de evaluación asociados a esos saberes. Esta información permite que la IA sugiera los ODS más apropiados y diseñe una actividad que se integre de forma efectiva en el currículo.
¿Cómo se asegura el EduPrompt de que las actividades generadas estén alineadas con el currículo? El EduPrompt se asegura de la alineación con el currículo al estructurar la actividad según los saberes y criterios de evaluación de la asignatura que el docente especifica al inicio del proceso. Al basar la actividad en estos elementos, se garantiza que el aprendizaje sea significativo y relevante para los estudiantes.
¿Qué ventajas ofrece el uso del EduPrompt en comparación con los métodos tradicionales de diseño de actividades? El EduPrompt ofrece ventajas significativas como la alineación curricular, la conexión con la realidad, la facilidad y rapidez en el diseño y la personalización. La IA permite diseñar actividades educativas en pocos minutos, optimizando el tiempo del docente y asegurando la relevancia del contenido. Además, se adapta a diferentes niveles educativos y áreas del conocimiento.
¿Cómo se garantiza que las actividades generadas por el EduPrompt sean viables y efectivas para su implementación en el aula? El EduPrompt detalla un plan de implementación con ejercicios y actividades concretas que aseguran que la propuesta sea viable y efectiva en el aula. La IA se asegura de que la actividad sea adecuada para el nivel educativo y las necesidades específicas de los estudiantes, proporcionando un plan claro y detallado para la puesta en práctica.
Gracias a los chatbots de IA como DeepSeek, ChatGPT, Claude, Grok, Qwen, Gemini, Kimi o Le Chat de Mistral, podemos crear pequeñas aplicaciones educativas que podemos utilizar como material para nuestras clases, como forma de repasar o practicar determinados aspectos del currículo o reforzar conocimientos.
Estos chatbots son los que en la actualidad permiten realizar estos programas y probarlos in situ, es decir, sin salir del chatbot, por lo que hacer una aplicación es tan sencillo como proponerle una idea y dejar que la IA le dé forma digital.
Actualmente, se conoce esta técnica para crear programas con el nombre de vibe coding. Según Wikipedia, el término se acuñó en febrero de 2025 y se podría traducir como programación de vibraciones o programar por sensaciones.
Creación de una mini-aplicación educativa
Preparación inicial
En algunos chatbots hay que seleccionar algunas opciones antes de pedirle el programa:
En Qwen hay que pulsar el botón «Artefactos»
En Le Chat de Mistral debemos marcar «Canvas» en el desplegable «Herramientas».
En Gemini debemos activar el botón «Canvas».
Con el resto de chatbots no es necesario realizar ninguna acción previa inicial.
Definir la idea para la IA
Se trata simplemente de proporcionarle a la IA la idea que tenemos y que queremos que convierta en aplicación. Un prompt inicial para que la IA haga nuestra aplicación podría ser:
Haz una aplicación interactiva en HTML para que los alumnos comprendan el significado de la razón trigonométrica del seno de un ángulo y puedan practicarlo. La aplicación tiene que ser responsiva y atractiva visualmente
Hemos marcado en negrita varios aspectos que debemos tener en cuenta, sobre todo los dos primeros:
En formato HTML, ya que es fundamental para facilitar su difusión. De lo contrario, podríamos obtener un programa en Python u otros lenguajes que dificultarían su acceso y uso generalizado. Al generarlo en HTML, obtendremos una página web accesible desde cualquier navegador.
Interactiva. Para evitar que la página sea estática o con poca interacción, es importante indicarlo claramente.
Responsiva. Este término hace referencia a la adaptabilidad a diferentes dispositivos. Si queremos que la aplicación funcione bien en dispositivos móviles, debemos especificar que debe ser responsiva, asegurando así una correcta visualización y usabilidad en distintos tamaños de pantalla.
Diseño atractivo. Para mejorar la apariencia visual, es recomendable mencionarlo, ya que muchas veces los programas presentan un diseño demasiado simple.
Además, si creamos aplicaciones tipo test, ejercicios o preguntas interactivas, conviene especificar que el contenido debe generarse de forma aleatoria. Esto permitirá que el orden y la selección de ejercicios varíen en cada ocasión, haciendo la experiencia más dinámica y enriquecedora.
Por supuesto, podemos añadir todas las instrucciones que pensamos que deberá tener nuestra aplicación, sabiendo siempre que no podemos complicarla excesivamente o la IA no será capaz de llevar a cabo nuestra idea.
Visualización del resultado: Al terminar de escribir el código, las IA nos mostrarán la vista previa del programa, aunque en ChatGPT hay que pulsar antes el botón «Previsualizar» y en DeepSeek hay que pulsar «Run HTML». El resto de chatbots nos muestran el resultado final directamente.
Mejorar el programa
Si lo que obtenemos la primera vez es muy diferente a lo que esperábamos, es más útil añadir lo que le falta a la aplicación en el prompt inicial, en lugar de ir haciendo mejoras sucesivas, es decir, iniciar una conversación nueva ampliando el primer prompt con las carencias que hemos visto. Una vez tenemos algo más cercano a lo que deseábamos, podemos empezar la conversación con la IA para ir mejorando el resultado.
Una vez tenemos una primera versión aceptable, deberemos refinarla dándole indicaciones adicionales (cambiar el color, añadir un selector de idioma, agregar un botón de ayuda, eliminar un botón, optimizarla para dispositivo móvil, etc.). Después de unas pocas, o muchas iteraciones, obtendremos el producto final: un programa hecho a la medida del profesorado y del alumnado al que va dirigido, todo un lujo absolutamente impensable hace tan solo un par de cursos.
No obstante, si observamos que no conseguimos obtener lo que queremos, quizás la solución sea fragmentar la aplicación en otras más pequeñas. Por ejemplo, en lugar de una aplicación para practicar las razones trigonométricas, será más sencillo para la IA si hacemos una aplicación para cada una de ellas.
Qué hacer cuando llegamos al límite de interacciones en un chatbot
Es frecuente que, a medida que el chatbot nos hace el programa, le vayamos pidiendo mejoras sucesivas y también es frecuente que alcancemos el límite máximo de mensajes, sobre todo si usamos las versiones gratuitas.
En ese caso debemos pasar el código a otro chatbot diferente o en el mismo chatbot, pero en otra cuenta, si disponemos de más de una en el mismo.
Una vez lo hemos pasado, le podemos decir las mejoras que debe hacer.
Para pasar el programa de un chatbot a otro, podemos hacer dos cosas:
Si el programa es breve y con pocas líneas, lo podemos copiar y pegar directamente en el nuevo chatbot.
Si tiene cierta longitud, nos puede decir que excede la longitud máxima permitida en un chat. En ese caso, si el chatbot lo permite, lo podemos descargar en formato HTML. Algunos chatbots como Claude o Le Chat tienen un botón para ello. Con el resto podemos utilizar un programa como el bloc de notas de Windows. Copiamos y pegamos en el bloc de notas el contenido del programa y lo guardamos con extensión HTML, por ejemplo: mi_programa.html. Es importante que el archivo final sea un archivo de texto puro, es decir, no sirve un archivo de Word o similar. Este archivo se lo podemos subir al nuevo chatbot para que lo continúe donde lo dejamos.
Cuando finalmente obtenemos una aplicación que damos por buena y definitiva, habrá que compartirla con los alumnos. Dependiendo del recurso o plataforma que vayamos a utilizar, hay 3 posibilidades básicas:
Obtener un enlace directo a la aplicación. Solo está disponible para Claude, Gemini y ChatGPT. Este sistema es el más sencillo, ya que lo podemos publicar nada más creado el recurso.
Insertar el código en el recurso. Para integrar en los medios digitales utilizados.
Descargar el programa como página web. Para enviar o poner a disposición del alumnado como recurso independiente, insertar a través de un Iframe o ponerlo en nuestra propia página web en GitHub (véase más adelante).
1. Obtener un enlace directo a la aplicación en Claude, Gemini y ChatGPT.
En el caso de ChatGPT y Claude, puede obtenerse un enlace al artefacto.
1a. Publicar en Claude
Para compartir una aplicación hay que publicar («Publish») el artefacto una vez que lo tengamos en su forma definitiva.
Botón para publicar un artefacto en Claude
Pulsamos el botón «Publish & Copy Link» y el enlace será copiado automáticamente.
De un recurso público, siempre podremos volver a copiar el enlace pulsando el botón «Published» y también podremos hacerlo privando pulsando el botón «Unpublish».
El enlace del artefacto se puede proporcionar a los alumnos para que accedan a la aplicación. En estos casos recomendamos utilizar un acortador de direcciones como https://ja.cat o https://kutt.it. Ya que si modificamos la aplicación habrá que publicarla de nuevo, estos acortadores de direcciones permiten modificar la dirección larga (la del artefacto) sin modificar la corta.
Puede verse un par de ejemplos de aplicaciones: para ordenar palabras y otra para practicar operaciones básicas en matemáticas enlazadas ambas al artefacto original de Claude.
1b. Publicar en ChatGPT
ChatGPT tiene la ventaja de que podemos modificar manualmente el programa (cosa que Claude no permite) y, además, si modificamos el programa una vez publicado no será necesario republicarlo con una dirección nueva (como en Claude) sino que bastará con actualizar la URL.
Veamos los pasos a seguir. Una vez tengamos el programa en su versión definitiva, pulsamos el botón para compartir:
Obtendremos una ventana similar a esta:
Después de pulsar «Crear enlace» podremos distribuir esta URL entre nuestros alumnos.
Si actualizamos el programa, podremos volverlo a publicar con el mismo botón, pero esta vez seleccionando la opción «Actualizar». No deberemos hacer nada más, ya que el enlace seguirá siendo válido, pero conducirá a la aplicación actualizada. También podremos hacerlo privado pulsando sobre el desplegable con el texto «Público» y seleccionando la opción «Privado», al hacerlo la URL compartida dejará de funcionar.
En el canvas disponemos de un botón para compartir y allí obtendremos el enlace para compartir.
2. Insertar el código en el recurso
Con este método lo que hacemos es utilizar directamente el código generado con la IA para insertarlo en el interior del recurso digital o plataforma que usemos. Para ello solo debemos utilizar el botón copiar que tienen todos los chatbots cuando generan el código.
Situación del botón «copiar» en algunos chatbots
Este código lo podremos insertar en eXeLearning, Google Sites, WordPress, Moodle y otros servicios o plataformas. Consulta los apartados correspondientes, más adelante, para saber cómo hacerlo.
3. Descargar el programa como página web
Podemos descargar el programa que previamente le hemos pedido a la IA en formato HTML. En el caso de Claude, Grok y Le Chat, tenemos un botón para hacerlo.
Descargar como pǵina web
Para el resto de IA:
Deberemos copiar el código con el botón copiar que todos llevan incorporados en alguna parte del código.
Pegamos el contenido en un documento vacío de texto y lo guardamos (en formato de texto sin formato, también llamado texto puro o texto plano) con extensión «.html». La siguiente imagen indica cómo hacerlo con un documento de Google:
Cuando lo guardemos, debemos asegurarnos que la extensión (formada por las letras tras el punto) sea html. Es decir: mi_aplicacion.html
Lo que hemos obtenido es una página web que podemos abrir con cualquier navegador y que contiene nuestra aplicación.
Qué hacer con la página web que hemos descargado
Enviarla por correo electrónico para que la abran desde sus dispositivos.
Adjuntarla en nuestra plataforma preferida como Google Classroom, Drive, Dropbox, etc., para que el alumnado pueda acceder a ella.
Insertarla en eXeLearning, WordPress o Moodle. Consultar el apartado correspondiente más adelante para ver el proceso.
Inserción de la aplicación en plataformas y servicios
A continuación veremos cómo añadir el programa a distintas plataformas educativas de uso habitual.
Google Sites
Debemos copiar el código tal como se explicó en la sección Insertar el código en el recurso.
En el modo edición de Google Sites pulsamos en el menú lateral sobre la opción Insertar > Insertar código > Siguiente > Insertar y allí pegamos el código que hemos copiado de la IA. La mini-aplicación aparecerá en nuestra web y le podremos dar el tamaño que queramos.
Pasos a seguir para insertar una aplicación en Google Sites
La aplicación una vez insertada
WordPress
Si tenemos un blog con WordPress, podremos incluir aplicaciones en las entradas que hagamos.
Para ello, insertaremos el bloque HTML personalizado y allí pegaremos el código.
Inserción del bloquie HTML personalizado y pegado del código
Así obtenemos una aplicación insertada que puedes probar a continuación (esta aplicación fue hecha con Claude y mejorada con DeepSeek). Solo funciona desde el ordenador:
Clasifica seres vivos y no vivos
Clasifica seres vivos y no vivos
Puntos: 0
Seres vivos
Seres no vivos
Uno de los problemas que hemos tenido con WordPress (este blog lo usa) es que a veces el color de fondo de la aplicación se extiende a todo el artículo del blog, lo que hace que quede estéticamente muy mal. Para solucionarlo, solo tenemos que decirle a la IA algo como esto:
Quiero insertar este código en WordPress, pero me cambia el fondo y la letra de toda la página del post. ¿Puedes hacer que el formato de la aplicación se limite al contenedor de la zona de la aplicación? Escribe el código completo y funcional
Esto nos dará un nuevo código apto para ser incluido en nuestro blog. Esto mismo hemos tenido que hacer para que la aplicación que hay insertada anteriormente no modificase todo el aspecto del blog.
eXeLearning
eXeLearning es un programa de código abierto que permite crear recursos educativos completos en el que también podremos añadir nuestros programas.
Insertar el código en un iDevice (recomendado)
La aplicación debe ser adaptada antes de introducirla en un iDevice (nombre de los bloques de contenidos en eXeLearning) con el siguiente prompt:
Quiero hacer la aplicación para eXeLearning que será puesta en un iDevice y que, por tanto, no deberá tener etiquetas HTML: head, body ni style. Debe ser HTML puro con los estilos en línea y scripts. El formato de la aplicación debe estar limitado al contenedor de la propia aplicación para que no afecte al resto del iDevice. Escribe el código completo y funcional
Una vez tengamos el nuevo código, lo copiamos y podremos usar cualquiera de estos dos botones para insertarlo.
Podemos usar cualquiera de estos botones para insertar la aplicación en el iDevice
El código se pega a través del botón insertar código o del botón HTML.
Ya podemos guardar el iDevice y previsualizar el resultado:
La aplicación una vez insertada en eXeLearning
Descargar un archivo HTML para añadirlo a eXeLearning
Este método es alternativo al anterior y lo podemos usar si por algún motivo no nos ha ido bien.
Moodle es probablemente el sistema más versátil y con más posibilidades para insertar aplicaciones hechas con IA.
Insertar código (recomendado)
Una vez tenemos el código del programa, deberemos adaptarlo a Moodle con el siguiente prompt:
Quiero hacer la aplicación para Moodle que será puesta en un editor de texto HTML y que, por tanto, no deberá tener etiquetas HTML: head, body ni style. Debe ser HTML puro con los estilos en línea y scripts. El formato de la aplicación debe estar limitado al contenedor de la propia aplicación para que no afecte al resto de la página. Escribe el código completo y funcional
En el editor de texto HTML de una actividad o recurso, pulsamos el botón «Mostrar más botones» (ver imagen).
Pulsamos el botón «HTML» y pegamos el código que hemos copiado
Al pulsar de nuevo el botón «HTML» veremos el resultado.
Pegamos el código de la aplicación en el editor de HTML
Al pulsar el botón HTML (</>) podremos ver la aplicación
Una vez guardado, ya podemos ver el resultado.
Descargar un archivo HTML para añadirlo a Moodle
Si por algún motivo el método anterior no funciona como deseamos, podemos descargarlo como página web, tal como se indicó en el apartado Descargar el programa como página web.
No entraremos en detalles, pero el proceso consiste en subir la página web con el programa como recurso de tipo archivo que podrá mostrarse tal cual o bien insertándolo en el editor de texto HTML de otra actividad o recurso mediante un Iframe.
Este sistema puede causar problemas si se hace una segunda versión de curso por copia (ya que los enlaces cambian), por este motivo sería aconsejable subirlo a GitHub para poder visualizarlo desde allí con un Iframe. A continuación se explica cómo.
GitHub
GitHub es un servicio para programadores que ofrece un amplio conjunto de herramientas y utilidades para desarrollar software. Lo que aquí nos interesa es, sobre todo, subir las páginas web creadas y descargadas por la IA para visualizarlas como página web. En la siguiente presentación puede verse el proceso:
Preguntas Frecuentes sobre la Creación de Aplicaciones Educativas con IA
¿Qué tipo de chatbots de IA se recomiendan para crear aplicaciones educativas y por qué? Se recomiendan chatbots como DeepSeek, ChatGPT, Claude, Qwen y Le Chat de Mistral debido a su capacidad para generar código ejecutable directamente dentro del chat, lo que permite una creación y prueba inmediata de aplicaciones sin necesidad de herramientas externas. DeepSeek R1 se destaca por ser uno de los más avanzados y por permitir interacciones ilimitadas (aunque con un límite por conversación), lo que facilita la iteración y mejora de las aplicaciones.
¿Cuál es el formato de archivo más adecuado para las aplicaciones educativas creadas con IA y por qué? El formato HTML es el más adecuado, ya que permite crear páginas web que se pueden abrir en cualquier navegador. Esto facilita la distribución y el uso de las aplicaciones por parte del alumnado sin depender de software específico. Además, asegura la compatibilidad con la mayoría de plataformas y dispositivos.
¿Cómo se debe estructurar un prompt para que la IA genere una aplicación educativa interactiva y atractiva? Un prompt inicial debe incluir instrucciones claras sobre el formato (HTML), la interactividad, el diseño responsive para dispositivos móviles, la necesidad de atractivo visual y la aleatoriedad en ejercicios o preguntas (si aplica). Es importante indicar también el objetivo educativo de la aplicación y cualquier funcionalidad específica deseada. Al dar estas indicaciones, se asegura que la IA genere algo útil y acorde a lo que se busca.
¿Qué estrategias se deben seguir para mejorar una aplicación creada con IA? Es preferible, en lugar de realizar mejoras sucesivas, crear un nuevo prompt que incluya las carencias observadas en la primera versión de la aplicación. Una vez que se tiene una versión más cercana al resultado deseado, se pueden realizar iteraciones con la IA para refinar detalles como colores, idiomas, botones, optimización móvil, etc. Si la aplicación resulta demasiado compleja, se sugiere fragmentarla en aplicaciones más pequeñas.
¿Cuáles son las principales opciones para compartir aplicaciones educativas creadas con IA con los estudiantes? Hay tres opciones principales: a) Obtener un enlace directo a la aplicación, disponible en Claude y ChatGPT, lo que permite una distribución rápida; b) Insertar el código de la aplicación directamente en la plataforma o recurso digital que se utilice, como Google Sites, WordPress, eXeLearning o Moodle; y c) Descargar el programa como una página web para compartirla como archivo independiente o integrarla en otros recursos.
¿Cómo se puede actualizar una aplicación educativa compartida a través de un enlace en ChatGPT y Claude? En ChatGPT, la actualización de la aplicación no requiere un nuevo enlace. Al modificar el código y republicarlo con la opción «Actualizar,» el mismo enlace seguirá siendo válido y dirigirá a la versión modificada. En Claude, es necesario publicar la aplicación nuevamente, generando un nuevo enlace, por lo que se recomienda usar un acortador de direcciones para que los alumnos siempre usen el mismo enlace corto, aunque cambie el enlace largo.
¿Qué consideraciones se deben tener en cuenta al insertar el código de una aplicación en plataformas como WordPress, eXeLearning o Moodle? Es fundamental ajustar el código de la aplicación para cada plataforma, ya que cada una tiene sus propias reglas de visualización. Se debe usar un prompt que indique a la IA que el código es para una de estas plataformas y que debe ser HTML puro, sin etiquetas head, body o style y asegurando que el formato de la aplicación se limite a su contenedor para evitar problemas estéticos y funcionales.
¿Qué se debe hacer si los métodos de inserción directa de código no funcionan correctamente en eXeLearning o Moodle? Si el método de inserción directa falla, se puede descargar la aplicación como página web HTML y luego insertarla como un objeto iframe en la plataforma, seleccionando el archivo HTML y asignándole un tamaño adecuado. Para Moodle, otra opción es subir la página web como un recurso tipo archivo y luego insertarla en el editor de texto HTML de otras actividades o recursos mediante un iframe. Se recomienda subir la página a GitHub para obtener un enlace estable para evitar problemas si se realizan copias de un curso.
Sería insensato, y contradictorio en sí mismo, pensar que es posible hacer lo que hasta ahora nunca se ha hecho por procedimientos que no sean totalmente nuevos.
Comentarios recientes