Prompts para Generar Aplicaciones Educativas con IA – Guía Definitiva para Docentes

Introducción

¿Te has preguntado cómo crear aplicaciones educativas para tus estudiantes sin necesidad de ser un experto en programación? Los docentes enfrentan el desafío constante de diseñar recursos educativos que mantengan el interés de los alumnos mientras refuerzan conceptos clave. La inteligencia artificial se posiciona como una solución potente a través de prompts para profesores que generan aplicaciones interactivas, permitiéndote crear recursos adaptados a las necesidades particulares de tus estudiantes.

En este artículo, exploraremos técnicas efectivas y ejemplos prácticos de prompts para que puedas crear tus propias aplicaciones interactivas desde cero, con diferentes niveles de dificultad y adaptadas a diversos estilos de aprendizaje.

El Poder de los Prompts para Generar Aplicaciones Educativas

¿Qué son los prompts para generar aplicaciones educativas?

Los prompts son instrucciones claras y específicas que proporcionamos a las herramientas de IA para obtener resultados precisos. En el contexto educativo, un prompt efectivo para crear aplicaciones interactivas debe incluir:

• Definición del objetivo pedagógico: ¿Qué concepto específico quieres reforzar?
• Estructura de la aplicación: Tipo de interacción deseada (quiz, juego, simulación, etc.)
• Nivel de dificultad: Adaptado al grado y conocimientos previos de tus estudiantes.
• Estilo de aprendizaje: Visual, auditivo, kinestésico, lector/escritor.
• Restricciones técnicas: Por ejemplo, la especificación «Todo debe estar en un solo archivo HTML sin dependencias externas.» Esta especificación en particular resulta útil para otorgarle a la aplicación un alto grado de autonomía y portabilidad.

Estructura básica de los prompts para generar aplicaciones educativas interactivas

Actúa como un [rol especializado] experto en [tema educativo] y diseña una aplicación interactiva HTML para [objetivo pedagógico específico]. La aplicación debe estar dirigida a estudiantes de [nivel educativo] y enfocarse en [concepto específico]. Incluye [elementos interactivos específicos] y asegúrate que la dificultad sea [nivel de dificultad]. El código debe estar completamente contenido en un único archivo HTML sin dependencias externas.

Ejemplos de Prompts para Generar Aplicaciones Educativas con Diferentes Niveles de Dificultad

Nivel Básico (Primaria)

Prompt 1: Quiz matemático simple

Descripción: Aplicación interactiva que genera ejercicios aleatorios de sumas y restas con números del 1 al 20. Incluye retroalimentación inmediata, sistema de puntuación y elementos visuales atractivos para niños.

Propósito educativo: Reforzar operaciones matemáticas básicas en estudiantes de primaria de forma lúdica, estimulando la práctica constante con feedback inmediato.

Actúa como un especialista en educación primaria y crea una aplicación interactiva HTML para practicar sumas y restas básicas. La aplicación debe estar dirigida a estudiantes de 2do grado de primaria y enfocarse en operaciones con números del 1 al 20. 

Incluye:
1. Un sistema que genere 10 problemas aleatorios
2. Retroalimentación inmediata (sonido y visual) 
3. Sistema simple de puntuación
4. Tema visual colorido y amigable para niños
5. Instrucciones claras y simples

La dificultad debe ser apropiada para principiantes. El código debe estar completamente contenido en un único archivo HTML sin dependencias externas, utilizando solo JavaScript y CSS integrados. Al finalizar, el estudiante debe ver su puntuación final y un mensaje motivacional.

Probamos este prompt en Gemini y obtuvimos este resultado 👉 Quiz Matemático. ¡Anímate y pruébalo tú también! 😊👍

Prompt 2: Juego de vocabulario

Descripción: Juego donde aparecen imágenes de animales (mediante emojis o arte ASCII) y los estudiantes deben escribir el nombre del animal correctamente. Ofrece pistas, lleva conteo de aciertos y permite avanzar a nuevas palabras.

Propósito educativo: Ampliar el vocabulario relacionado con animales en estudiantes de primaria, reforzando la asociación imagen-palabra y la escritura correcta.

Actúa como un profesor de idiomas para niños y crea una aplicación interactiva HTML para aprender vocabulario básico en español. La aplicación debe estar dirigida a estudiantes de 3er grado y enfocarse en el vocabulario relacionado con animales.

Diseña un juego simple donde:
1. Aparezcan imágenes de animales (usa emojis o ASCII art)
2. El estudiante deba escribir el nombre del animal
3. Ofrezca pistas si hay dificultades
4. Tenga un contador de aciertos
5. Incluya un sistema de "siguiente palabra"

El nivel debe ser básico con palabras simples. Todo el código debe estar en un único archivo HTML autocontenido, utilizando JavaScript y CSS internos. Asegúrate que la interfaz sea colorida, intuitiva, y adaptada para usuarios jóvenes.

Aquí el 👉 Juego de Vocabulario que obtuvimos con este prompt en Gemini ¡Vamos inténtalo! 😊👍

Nivel Intermedio (Secundaria)

Prompt 3: Simulador de fenómenos físicos

Descripción: Simulador visual que muestra la trayectoria de movimiento parabólico con controles ajustables para modificar parámetros como velocidad inicial, ángulo y gravedad. Muestra cálculos de altura máxima y alcance.

Propósito educativo: Facilitar la comprensión de conceptos físicos abstractos mediante visualización interactiva, permitiendo a estudiantes de secundaria experimentar cómo diferentes variables afectan los resultados.

Actúa como un profesor de física de secundaria y diseña una aplicación interactiva HTML para simular el movimiento parabólico. La aplicación debe estar dirigida a estudiantes de 3er año de secundaria y enfocarse en visualizar cómo los parámetros afectan la trayectoria.

La aplicación debe incluir:
1. Un lienzo (canvas) donde se muestre la simulación
2. Controles deslizantes para modificar: velocidad inicial, ángulo y gravedad
3. Visualización de la trayectoria completa
4. Cálculo y visualización de altura máxima y alcance
5. Opción para ver las ecuaciones relevantes

El nivel de dificultad debe ser intermedio, permitiendo la exploración de conceptos pero sin matemáticas avanzadas. El código debe estar completamente contenido en un único archivo HTML sin referencias externas, empleando solo JavaScript y CSS integrados. Incluye comentarios en el código para que los estudiantes más avanzados puedan entender la implementación.

Este fue el Simulador de Fenómenos Físicos que obtuvimos con este prompt desde Gemini ¿A ti cómo te fue?! déjanos tus enlaces en los comentarios 😊👍

Prompt 4: Explorador de literatura

Descripción: Aplicación que presenta fragmentos literarios donde los estudiantes deben identificar figuras retóricas (metáforas, símiles, hipérboles y personificaciones), ofreciendo explicaciones y un sistema progresivo de puntuación.

Propósito educativo: Desarrollar la capacidad de análisis literario en estudiantes de secundaria, mejorando su comprensión de recursos estilísticos a través de ejemplos prácticos.

Actúa como un docente de literatura y crea una aplicación interactiva HTML para analizar figuras literarias. La aplicación debe estar dirigida a estudiantes de 2do año de secundaria y enfocarse en identificar metáforas, símiles, hipérboles y personificaciones.

Desarrolla una aplicación que:
1. Presente fragmentos literarios de obras famosas apropiadas para adolescentes
2. Permita al estudiante identificar qué figura literaria contiene cada fragmento
3. Proporcione explicaciones cuando se equivoquen
4. Ofrezca un sistema de puntuación y progreso
5. Incluya al menos 15 ejemplos diferentes

La dificultad debe ser intermedia, con textos enriquecedores pero comprensibles. Todo el código debe estar contenido en un único archivo HTML sin dependencias de bibliotecas externas, utilizando solo JavaScript y CSS internos. Diseña una interfaz atractiva para adolescentes, con un aspecto moderno que invite a la participación.

Aquí el Explorador de Figuras Literarias obtenido al ejecutar este prompt en Gemini. Pruébalo y déjanos tus enlaces en los comentarios 😊👍

Nivel Avanzado (Bachillerato/Universidad)

Prompt 5: Simulador de algoritmos

Descripción: Visualizador paso a paso de diferentes algoritmos de ordenamiento (burbuja, inserción, selección y quicksort) con controles de velocidad, métricas de rendimiento en tiempo real y comparativas de eficiencia.

Propósito educativo: Facilitar la comprensión de conceptos avanzados de programación para estudiantes universitarios, haciendo visibles procesos algorítmicos abstractos y sus diferencias de rendimiento.

Actúa como un profesor de informática y diseña una aplicación interactiva HTML para visualizar el funcionamiento de algoritmos de ordenamiento. La aplicación debe estar dirigida a estudiantes de 1er año de universidad y enfocarse en comparar la eficiencia de diferentes métodos.

La aplicación debe incluir:
1. Visualización paso a paso de los algoritmos: burbuja, inserción, selección y quicksort
2. Control para ajustar la velocidad de la animación
3. Métricas en tiempo real de comparaciones y swaps
4. Opción para generar arrays aleatorios de diferentes tamaños
5. Gráfica comparativa de rendimiento teórico (Big O)

El nivel debe ser avanzado, permitiendo un análisis profundo de complejidad algorítmica. El código debe estar completamente contenido en un único archivo HTML sin dependencias externas, utilizando JavaScript y CSS internos. Incluye comentarios detallados en el código que expliquen las implementaciones de los algoritmos y las decisiones de diseño.

Este es el resultado obtenido con el prompt para generar un Simulador de Algortimos. Te invitamos a probarlo y a compartir el enlace de tu aplicación en los comentarios.

Prompt 6: Modelador molecular

Descripción: Aplicación 3D que permite construir y manipular modelos moleculares, visualizar su estructura espacial, analizar ángulos y distancias de enlace, y entender conceptos de hibridación y polaridad.

Propósito educativo: Mejorar la comprensión tridimensional de estructuras químicas en estudiantes universitarios, facilitando la visualización espacial de conceptos abstractos de química orgánica e inorgánica.

Actúa como un profesor de química y crea una aplicación interactiva para modelar moléculas y enlaces químicos en 3D. La aplicación debe estar dirigida a estudiantes universitarios de primer año y enfocarse en la comprensión de geometrías moleculares VSEPR.

Desarrolla una aplicación que:
1. Permita construir moléculas seleccionando átomos y tipos de enlaces
2. Visualice las estructuras en un espacio 3D manipulable
3. Muestre información sobre los ángulos de enlace y distancias
4. Proporcione explicaciones sobre hibridación y polaridad
5. Incluya ejemplos preconstruidos de moléculas comunes

La dificultad debe ser avanzada, apropiada para nivel universitario. Optimiza el rendimiento de la visualización 3D.

Al ejecutar este prompt en Gemini, obtuvimos el siguiente 👉 Modelador Molecular. Nota: Luego de seleccionar un elemento desde los botones, arrastre el puntero del mouse sobre la imagen generada para rotarlo en 3D.

Prompts para Diferentes Estilos de Aprendizaje

Estilo Visual

Prompt 7: Mapa conceptual interactivo

Descripción: Herramienta que permite crear, reorganizar y conectar conceptos visualmente en un mapa interactivo, con nodos arrastrables, conexiones visuales y codificación por colores para diferentes categorías de información.

Propósito educativo: Potenciar el aprendizaje visual mediante la organización espacial de conceptos, ayudando a estudiantes a establecer relaciones y jerarquías entre ideas de forma gráfica.

Actúa como un especialista en diseño instruccional y crea una aplicación interactiva tipo mapa conceptual para visualizar las relaciones entre conceptos de [tema específico]. La aplicación debe estar dirigida a estudiantes de [nivel educativo] con preferencia por el aprendizaje visual.

Incluye:
1. Un mapa conceptual con nodos arrastrables para reorganizar conceptos
2. Conexiones visuales entre conceptos relacionados
3. Opción para expandir/contraer secciones del mapa
4. Codificación por colores para diferentes categorías de información
5. Posibilidad de agregar notas visuales a cada concepto

La interfaz debe priorizar elementos gráficos sobre texto extenso. El diseño debe ser visualmente atractivo, con alto contraste y disposición espacial clara.

Aquí nuestro Mapa Conceptual Interactivo. En el prompt indicamos que el tema específico era ‘Computación Cuántica’ y el nivel educativo ‘universitario’.

Nota: La primera vez que corrimos este prompt en Gemini no se visualizaba correctamente (este error no necesariamente puede sucederle a usted) en nuestro caso solo se mostraba una línea sobre un fondo negro. Asi que le dijimos a Gemini «Solo veo una línea sobre un fondo negro», entonces realizó las modificaciones y ¡eureka! ahora el mapa concceptual se visualiza correctamemte y podemos cambiar de posición las cajas de conceptos arrastrándolas con el mouse.

Moraleja: Si la aplicación no se muestra o no funciona como se espera descríbele el problema a la IA e intentará solucionarlo.

Estilo Auditivo

Prompt 8: Guía de pronunciación interactiva

Descripción: Herramienta que combina representaciones visuales de fonemas con capacidades de grabación y reproducción de voz, permitiendo a los estudiantes practicar y recibir retroalimentación sobre su pronunciación.

Propósito educativo: Mejorar las habilidades de pronunciación en el aprendizaje de idiomas, especialmente para estudiantes con preferencia por el aprendizaje auditivo, mediante práctica guiada y feedback.

Actúa como un especialista en lingüística y crea una aplicación interactiva para practicar la pronunciación de [idioma específico]. La aplicación debe estar dirigida a estudiantes de [nivel educativo] con preferencia por el aprendizaje auditivo.

La aplicación debe incluir:
1. Representación visual de los fonemas con instrucciones de pronunciación
2. Sistema para grabar y reproducir la voz del estudiante (usando Web Audio API)
3. Comparador básico de patrones de pronunciación con feedback
4. Instrucciones verbales claras en cada sección
5. Ejercicios guiados por audio

Prioriza la interacción a través de audio y las instrucciones habladas, usando las capacidades nativas del navegador para audio. Incluye una introducción narrada (transcrita en texto) que explique cómo usar la aplicación.

Esta es nuestra Guía de Pronunciación Interactiva y el resultado usando Gemini fue mejor de lo que esperábamos. La funcionalidad de grabar nuestra voz funcionó perfecto (dependiendo del navegador que uses es posible que te solicite permiso para utilizar el micrófono, si es así, debes otrogar el permiso). Como dato adicional, mencionar que en el prompt indicamos que el idioma a trabajar es el español y que el nivel educativo era 2do grado de primaria.

Estilo Kinestésico

Prompt 9: Laboratorio virtual manipulable

Descripción: Simulador que recrea un entorno de laboratorio donde los estudiantes pueden arrastrar, soltar y manipular elementos para realizar experimentos virtuales con resultados en tiempo real y feedback táctil.

Propósito educativo: Proporcionar experiencia práctica en ciencias experimentales para estudiantes con aprendizaje kinestésico, permitiendo la experimentación segura y accesible sin necesidad de materiales físicos.

Actúa como un profesor de ciencias experimentales y diseña una aplicación interactiva que simule un laboratorio virtual de [tema específico]. La aplicación debe estar dirigida a estudiantes de [nivel educativo] con preferencia por el aprendizaje kinestésico.

Desarrolla una aplicación donde:
1. Los estudiantes puedan arrastrar y soltar elementos para crear experimentos
2. Exista feedback táctil (vibraciones en dispositivos compatibles)
3. Se requiera interacción física constante (clicks, arrastres, rotaciones)
4. Los resultados de los experimentos respondan en tiempo real a las manipulaciones
5. Se incluyan desafíos que requieran ensayo y error físico

Prioriza elementos que requieran manipulación constante sobre texto pasivo. La interfaz debe fomentar el movimiento y la interacción continua, con metáforas visuales que sugieran manipulación física.

Aquí una aplicación que simula un Laboratorio de Química lo cual logramos al indicar esto en el tema específico del prompt y como nivel educativo establecimos tercer año de secundaria. Nota: para visualizar la reacción química debes arrastrar y soltar los elementos dentro de la probeta (en este caso representado por el cuadrado gris)

Tip: Luego de generada la aplicación le pedimos a Gemini que agregara un botón ‘Reiniciar Probeta’ para facilitar la implementacón de nuevas reacciones químicas.

Tip: Podrías pedirle también a Gemini que reemplace los elementos que sugirió por defecto (Agua, Sal, Azúcar y Vinagre) por los elementos químicos de tu interés o cualquier otra funcionalidad o apariencia necesaria.

Estilo Lector/Escritor

Prompt 10: Editor de escritura colaborativa

Descripción: Plataforma de análisis y escritura de textos con herramientas de marcado, anotación, plantillas narrativas, sugerencias contextuales de vocabulario y sistema de revisión que destaca áreas de mejora.

Propósito educativo: Potenciar habilidades de escritura y análisis textual en estudiantes con preferencia por el aprendizaje lector/escritor, facilitando la estructura y revisión de textos de diversos géneros.

Actúa como un profesor de literatura y diseña una aplicación interactiva para análisis y escritura colaborativa de [género literario]. La aplicación debe estar dirigida a estudiantes de [nivel educativo] con preferencia por el aprendizaje a través de lectura y escritura.

La aplicación debe incluir:
1. Un sistema de análisis de texto con herramientas para marcado y anotación
2. Plantillas para diferentes estructuras narrativas o argumentativas
3. Sugerencias de vocabulario contextual al escribir
4. Sistema de revisión que destaque áreas de mejora
5. Opción para alternar entre modo de lectura y escritura

Prioriza la interacción basada en texto, con explicaciones detalladas y ejemplos escritos. Utiliza el almacenamiento local del navegador para guardar el trabajo. El diseño debe ser limpio, con tipografía clara y espaciado adecuado para facilitar la lectura prolongada.

Presentamos el Editor de Escritura (en nuestro caso de ciencia ficción para estudiantes de segundo año de secundaria) que obtuvimos al utilizar el prompten Gemini. Particularmente nos gustó mucho la funcionalidad para elegir una plantilla desde una lista despegable. Nota: Cuando ejecutamos la aplicación por primera vez el área de escritura aparece en blanco, para obtener la plantilla selecciónela de la lista desplegable y listo.

Consideraciones:

Estas aplicaciones y sus respectivos prompts (sujetos a iteraciones y mejoras) representan diferentes enfoques para crear experiencias de aprendizaje interactivas y adaptadas a distintos niveles educativos y estilos de aprendizaje.

Es importante señalar que los resultados de los prompts pueden variar debido a la ‘naturaleza’ misma de los modelos de IA los cuales tienden a presentar la misma respuesta de diferentes maneras. Recuerde, la IA no es perfecta y está aún en fase desarrollo; pero si afinamos nuestros prompts -también es cierto- podemos obtener resultados bastante decentes y sobretodo funcionales.

La idea de esta guía, es proporcionar a los docentes una base que les permita experimentar, seleccionar o adaptar los prompts según las necesidades específicas de sus estudiantes.

Uso de Tecnología

La creación de aplicaciones educativas interactivas mediante prompts, representa una notable avance en la forma en que los docentes pueden generar recursos educativos personalizados. Para implementar eficazmente estos prompts, recomendamos las siguientes herramientas de IA:

1. Google Gemini: Es la IA que hemos utilizado en nuestros ejemplos y destaca particularmente por su opción ‘Canvas’ la cual al ser activada permite la creación de aplicaciones que incorporen elementos visuales y procesamientos de datos. Además proporciona enlaces que facilitan mucho la acción de compartir las aplicaciones rápidamente con nuestros estudiantes. Vea aquí un ejemplo de cómo activar la opción ‘Canvas’ en Gemini.
2. Qwen AI: Puede generar aplicaciones educativas activando la opción ‘Artifacts’. Estos artifacts permiten crear contenido educativo dinámico y personalizado de forma rápida y precisa. De manera similar a Gemini, Qwen AI proporciona un enlace para compartir las aplicaciones generadas a través de la opción ‘Deploy.’
3. ChatGPT (OpenAI): Otra muy buena opción para generar código interactivo a partir de prompts detallados. Utiliza GPT-4 para obtener aplicaciones más sofisticadas y mejor estructuradas.
4. Claude (Anthropic): Excelente para prompts largos y detallados, permitiendo mayor contexto en las instrucciones técnicas y pedagógicas.
5. Microsoft Copilot: Ofrece buena integración con herramientas educativas de Microsoft y puede general código de calidad.

Estas herramientas (y existen muchas más) permiten que, incluso sin conocimientos profundos de programación, los docentes puedan crear recursos interactivos adaptativos al nivel y necesidades de sus estudiantes. La clave está en la especificidad de los prompts y en la iteración progresiva para refinar los resultados.

Consejos para Optimizar tus Prompts

1. Sé específico con el objetivo pedagógico: En lugar de pedir «una aplicación para matemáticas», especifica «una aplicación para practicar la resolución de sistemas de ecuaciones lineales 2×2 usando el método de sustitución».
2. Define claramente la audiencia: Incluye el nivel educativo exacto y características relevantes de los estudiantes.
3. Especifica el tipo de interacción: Indica si deseas un quiz, una simulación, un juego, etc., y cómo debe funcionar la interactividad.
4. Incluye requisitos técnicos claros: Si es necesario, menciona explícitamente que todo debe estar en un solo archivo HTML sin dependencias externas.
5. Solicita comentarios en el código: Esto facilitará que puedas modificarlo o entenderlo posteriormente.
6. Itera y refina: Si la primera versión no cumple tus expectativas, proporciona feedback específico para mejorarla.
7. Prueba en diferentes navegadores: Asegúrate de que las aplicaciones generadas funcionen en los navegadores que utilizarán tus estudiantes.

Conclusión

Los prompts para generar aplicaciones educativas representan una herramienta poderosa para que los docentes creen recursos educativos personalizados sin necesidad de conocimientos avanzados de programación. Al estructurar adecuadamente estas instrucciones, especificando el objetivo pedagógico, nivel de dificultad y estilo de aprendizaje, podemos obtener aplicaciones interactivas de alta calidad que realmente se ajusten a las necesidades de nuestros estudiantes.

Como hemos señalado, la capacidad de generar estos recursos en un único archivo HTML, facilita enormemente su distribución y uso en diversos entornos educativos, incluso aquellos con conectividad limitada. Por todo lo anterior, te invitamos a aprovechar el poder de los prompts para transformar tu práctica docente y ofrecer experiencias de aprendizaje interactivas y significativas.

Gracias por leernos y ¡éxitos en el aula! 😊👍

Referencias

• Posada Prieto, F. (2023). 15 prompts básicos útiles para docentes en chatGPT. canalTIC.com. https://canaltic.com/blog/?p=5498
• Villegas, A. (2024). 50 prompts para apoyar la labor docente. AVD aprendizaje digital. https://adrianvillegasd.com/50-prompts-para-apoyar-la-labor-docente/
• Roca, D. (2024). La clave para usar la IA: una guía básica de prompting en educación. Substack. https://davidroca.substack.com/p/la-clave-para-usar-la-ia-una-guia
• Docentes con IA. (2024). Guía para Crear Prompts Efectivos en IA. https://docentesconia.com/pages/blog-prompt.php
• LinkedIn. (2024). Cómo utilizar HTML para aplicaciones Web interactivas. https://es.linkedin.com/advice/1/how-can-html-used-create-interactive-web-applications?lang=es
• Khan Academy. (2024). HTML/JS: hacer páginas web interactivas. https://es.khanacademy.org/computing/computer-programming/html-css-js