Prompt sesion2: Generador de sesión de aprendizaje interactiva gamificada

Superprompt reutilizable

text
# SUPERPROMPT MAESTRO
## Generador de sesión de aprendizaje interactiva gamificada

Actúa como un equipo integrado por:

1. Diseñador instruccional universitario experto en metodologías activas.
2. Especialista en el modelo didáctico IUTPC: Inicio, Utilidad, Transformación, Práctica y Cierre.
3. Docente especialista en [CURSO / PROGRAMA DE ESTUDIOS].
4. Diseñador UX/UI y desarrollador front-end experto en HTML5, CSS3 y JavaScript vanilla.
5. Especialista en gamificación, evaluación formativa, accesibilidad WCAG 2.1 AA y portafolios académicos en GitHub.
6. Redactor académico en español, con enfoque claro, motivador y adecuado para estudiantes de educación superior tecnológica.

Tu tarea es crear una **sesión de aprendizaje digital, gamificada, interactiva y autocontenida** en un único archivo `index.html`, lista para ser publicada en GitHub Pages y utilizada por estudiantes.

---

# 1. DATOS DE ENTRADA

Utiliza exclusivamente la siguiente información como base de diseño:

- Institución: [NOMBRE DE LA INSTITUCIÓN]
- Programa de estudios: [PROGRAMA]
- Curso o unidad didáctica: [CURSO]
- Unidad de aprendizaje: [UNIDAD]
- Semana: [SEMANA]
- Sesión: [NÚMERO Y NOMBRE DE SESIÓN]
- Duración total: [90 / 120 / 150 / 180] minutos
- Modalidad: [Presencial / Virtual / Semipresencial]
- Logro de unidad: [LOGRO DE UNIDAD]
- Logro específico de sesión: [LOGRO DE SESIÓN]
- Tema central: [TEMA]
- Saberes previos requeridos: [SABERES PREVIOS]
- Producto o evidencia principal: [EVIDENCIA]
- Contexto profesional o caso: [CASO, ORGANIZACIÓN O PROBLEMA]
- Narrativa de misión: [NOMBRE DE LA NARRATIVA]
- Número estimado de estudiantes: [CANTIDAD]
- Forma de trabajo: [Individual / Parejas / Equipos]
- Repositorio o ruta de GitHub sugerida: [URL O NOMBRE DEL REPOSITORIO]

Si falta algún dato crítico, asume una alternativa pedagógicamente razonable, indícala al inicio como “Supuesto de diseño” y continúa sin detenerte.

---

# 2. PROPÓSITO DEL PRODUCTO

Genera una experiencia digital que no sea una ficha estática ni una simple presentación de contenidos. Debe funcionar como una misión de aprendizaje con:

- Una narrativa profesional o ficticia coherente con el curso.
- Cinco niveles vinculados obligatoriamente a IUTPC.
- Actividades breves, interactivas y progresivas.
- Retroalimentación inmediata y orientadora.
- Sistema de XP, insignias, progreso y desbloqueo de niveles.
- Trabajo colaborativo durante la clase.
- Reto individual para consolidar el aprendizaje.
- Evidencias exportables o copiables para un portafolio en GitHub.
- Reflexión metacognitiva y evaluación formativa.
- Uso responsable, ético y transparente de inteligencia artificial.

La narrativa debe contextualizar al estudiante como un profesional en formación que debe resolver un problema realista. Evita una narrativa infantil; utiliza un tono de misión, expediente, laboratorio, consultoría, investigación, agencia, estudio creativo, centro tecnológico u otro contexto pertinente al curso.

---

# 3. ESTRUCTURA OBLIGATORIA

Organiza la sesión en esta secuencia exacta:

## A. Barra superior y cabecera

Incluir:

- Barra superior fija o visible con el nombre de la misión.
- Indicador de XP acumulado.
- Contador de insignias obtenidas.
- Barra o rastreador de progreso.
- Nombre del curso, unidad, semana y sesión.
- Título creativo de la misión.
- Breve briefing narrativo de máximo 120 palabras.
- Tiempo total de la sesión.
- Problema o desafío central.
- Mensaje motivador inicial.

## B. Datos de la sesión

Presentar en una tabla:

| Elemento | Información |
|---|---|
| Logro de unidad | [Logro] |
| Logro de sesión | [Logro] |
| Tema central | [Tema] |
| Duración | [Duración] |
| Modelo didáctico | IUTPC |
| Evidencia final | [Evidencia] |
| Modalidad | [Modalidad] |

## C. Indicaciones iniciales

Explicar de manera breve y visual:

- Cómo se desarrolla la misión.
- Cómo se obtienen XP e insignias.
- Qué actividades son grupales y cuáles individuales.
- Qué evidencia se debe elaborar.
- Cómo registrar o descargar el trabajo.
- Qué se espera en términos de participación, colaboración y ética.

Incluir un recuadro destacado titulado: **“En una frase”**, que explique claramente qué hará el equipo y qué realizará cada estudiante de forma individual.

## D. Registro del estudiante o equipo

Crear un formulario funcional con los siguientes campos:

- Apellidos y nombres.
- Correo institucional.
- Nombre del equipo.
- Rol dentro del equipo.
- Miembros adicionales del equipo, agregables dinámicamente.
- Selector de modalidad: “Modo equipo” y “Modo individual”.

Los datos deben guardarse en `localStorage`, sin enviar información a servidores externos. Incorporar un mensaje claro sobre privacidad.

---

# 4. NIVELES IUTPC

Diseña cinco niveles secuenciales. Cada nivel debe incluir: tiempo, propósito, actividad principal, interacción, verificación, retroalimentación, XP, evidencia y transición al nivel siguiente.

## Nivel 1: Inicio — Activación y desafío

- Duración sugerida: 10 a 15 minutos.
- Nombre narrativo creativo: [NOMBRE DEL NIVEL].
- Propósito: activar saberes previos, generar curiosidad y presentar el problema.
- Incluir una actividad breve como enigma, caso sorpresa, reto visual, dilema profesional, pregunta provocadora, mini trivia o análisis de imagen/dato.
- Solicitar una respuesta abierta inicial.
- Añadir dos preguntas de verificación:
  - Una conceptual.
  - Una aplicada al campo profesional.
- Incluir una escala breve de autopercepción o confianza inicial.
- Otorgar XP por participación y una insignia inicial si se completa la actividad.
- Generar una evidencia para GitHub con nombre de archivo sugerido.

## Nivel 2: Utilidad — Conectar y contextualizar

- Duración sugerida: 15 a 20 minutos.
- Nombre narrativo creativo: [NOMBRE DEL NIVEL].
- Propósito: vincular el nuevo aprendizaje con la utilidad profesional, académica o social.
- Incluir una rutina de pensamiento, por ejemplo:
  - KWL: Lo que sé, lo que necesito saber y lo que aprendí.
  - Antes pensaba / ahora pienso.
  - Semáforo de saberes.
  - Mapa de necesidades.
- Incluir una dinámica colaborativa breve: identificación de ideas compartidas, votación, clasificación, priorización o diálogo en parejas.
- Formular preguntas sobre el valor del tema en un contexto profesional.
- Incluir retroalimentación orientadora.
- Otorgar XP y una insignia por completar la actividad.
- Incorporar una evidencia parcial para GitHub.

## Nivel 3: Transformación — Construcción conceptual

- Duración sugerida: 30 a 40 minutos.
- Nombre narrativo creativo: [NOMBRE DEL NIVEL].
- Propósito: presentar, explorar, analizar y transformar la información en comprensión significativa.
- Desarrollar entre 3 y 4 microactividades interactivas, seleccionadas según el tema:
  - Tarjetas de conceptos desplegables.
  - Línea de tiempo.
  - Clasificación de elementos.
  - Relación de pares.
  - Arrastrar y soltar.
  - Mapa conceptual.
  - Anagrama de términos.
  - Preguntas de opción múltiple con explicación.
  - Simulador de decisiones.
  - Caso contextualizado.
  - Infografía o diagrama SVG interactivo.
  - Comparación entre conceptos.
  - Mini reto de análisis de datos, diseño, programación o investigación.

Cada microactividad debe incluir:
- Objetivo específico.
- Instrucciones claras.
- Interacción real con JavaScript.
- Retroalimentación inmediata.
- XP por logro.
- Explicación pedagógica de la respuesta correcta o esperada.

Agregar un caso de aplicación relacionado con [CASO / CONTEXTO PROFESIONAL]. El caso debe pedir análisis, toma de decisiones y argumentación, no repetición mecánica de definiciones.

Cerrar el nivel con:
- Una pregunta conceptual.
- Una pregunta aplicada.
- Una pregunta metacognitiva.
- Una evidencia de aprendizaje para el portafolio.

## Nivel 4: Práctica — Producción y aplicación

- Duración sugerida: 20 a 30 minutos.
- Nombre narrativo creativo: [NOMBRE DEL NIVEL].
- Propósito: aplicar el aprendizaje para resolver una situación o crear un producto concreto.
- Crear una ficha de misión editable que permita elaborar la evidencia principal de la sesión.
- Los campos de la ficha deben responder directamente al logro de sesión.
- Incluir criterios explícitos de calidad antes de que el estudiante complete la tarea.
- Incorporar una actividad de comunicación profesional: pitch, explicación de 60 segundos, presentación breve, justificación técnica, defensa de propuesta o demostración.
- Permitir copiar, generar o descargar el resultado en formato Markdown.
- Incluir coevaluación o retroalimentación entre pares con dos campos:
  - “Lo que más valoro de la propuesta es…”
  - “Una mejora posible sería…”
- Otorgar XP por producción, colaboración y revisión entre pares.
- Generar una insignia de aplicación profesional.

## Nivel 5: Cierre — Reflexión y transferencia

- Duración sugerida: 10 a 15 minutos.
- Nombre narrativo creativo: [NOMBRE DEL NIVEL].
- Propósito: consolidar, reflexionar, evidenciar el logro y proyectar la transferencia.
- Desbloquear el campo “Lo que aprendí” de la rutina iniciada en el Nivel 2.
- Incorporar:
  - Autoevaluación breve.
  - Reflexión metacognitiva.
  - Pregunta de transferencia: “¿Dónde y cómo aplicarías esto fuera del aula?”
  - Compromiso de mejora.
  - Síntesis de conceptos clave.
- Mostrar el puntaje final, insignias y progreso alcanzado.
- Generar un reporte final descargable o copiable en Markdown.
- Incluir una nota de felicitación que valore el proceso, no solo el puntaje.

---

# 5. GAMIFICACIÓN

Implementa un sistema de gamificación pedagógicamente pertinente:

- XP por participación, resolución, colaboración, reflexión y elaboración de evidencias.
- Barra de progreso por niveles.
- Insignias con nombre y criterio de desbloqueo.
- Mensajes emergentes de retroalimentación positivos y específicos.
- Temporizadores opcionales para retos de análisis o toma de decisiones.
- Desbloqueo progresivo de niveles.
- Evitar rankings públicos que desmotiven; priorizar progreso individual y de equipo.
- Permitir reintentos sin penalización excesiva.
- El XP debe reforzar la participación, el razonamiento y la mejora, no la velocidad como único criterio.

Proponer, como mínimo, estas insignias adaptadas al tema:

1. Explorador/a: por completar el reto inicial.
2. Analista: por demostrar comprensión conceptual.
3. Estratega: por resolver el caso aplicado.
4. Constructor/a: por elaborar la evidencia.
5. Profesional ético: por completar la reflexión sobre uso responsable.
6. Guardián/a del portafolio: por generar la evidencia para GitHub.

---

# 6. EVALUACIÓN FORMATIVA

Incluir una rúbrica breve con tres niveles de desempeño: Logrado, En proceso e Inicial.

Utilizar cuatro criterios mínimos:

| Criterio | Logrado | En proceso | Inicial |
|---|---|---|---|
| Comprensión conceptual | Explica y relaciona correctamente los conceptos | Reconoce conceptos con algunas imprecisiones | Presenta confusiones relevantes |
| Aplicación al caso | Propone soluciones pertinentes y justificadas | Propone soluciones parcialmente pertinentes | No vincula adecuadamente teoría y caso |
| Trabajo colaborativo | Participa, escucha y aporta constructivamente | Participa de manera irregular | Muestra escasa colaboración |
| Comunicación y evidencia | Presenta una evidencia clara, organizada y completa | Presenta evidencia parcial | Evidencia incompleta o poco clara |

Añadir:
- Autoevaluación con escala de 1 a 5.
- Coevaluación breve.
- Retroalimentación automática no punitiva.
- Un apartado de “Interpretación docente” que explique qué evidencian las respuestas de cada nivel.

---

# 7. PORTAFOLIO GITHUB

Incluir una sección visible llamada: **“Evidencia para Portafolio GitHub”** en cada nivel.

Para cada evidencia, indicar:

- Nombre sugerido del archivo.
- Tipo de archivo: `.md`, `.html`, `.pdf`, `.png` u otro.
- Contenido mínimo que debe registrar.
- Mensaje de commit sugerido.
- Casilla para que el estudiante marque: “Ya realicé el commit”.
- XP adicional por registrar la evidencia.

Al final, generar automáticamente un informe en Markdown con:

- Datos del estudiante o equipo.
- Nombre de la sesión.
- Respuestas elaboradas.
- Actividades completadas.
- Puntaje e insignias.
- Reflexión final.
- Enlaces o rutas sugeridas de los archivos.
- Mensajes de commit sugeridos.

El Markdown debe poder copiarse con un botón y descargarse como archivo `.md`.

---

# 8. USO RESPONSABLE DE IA

Incluir una sección obligatoria titulada: **“Uso responsable de inteligencia artificial”**.

Debe contener:

- La IA puede usarse como apoyo, no como sustituto del razonamiento.
- El estudiante debe verificar, adaptar y citar toda información generada.
- No se deben ingresar datos personales, sensibles o confidenciales.
- Toda producción con IA debe declarar:
  - Herramienta utilizada.
  - Prompt empleado.
  - Qué parte fue revisada, corregida o ampliada por el estudiante.
- Incluir un campo editable de “Declaración de uso de IA”.
- Relacionar el uso ético de IA con el campo profesional del curso.

---

# 9. REQUISITOS TÉCNICOS

Genera un único archivo completo `index.html` que incluya HTML, CSS y JavaScript interno.

## HTML

- Usar HTML5 semántico: `header`, `main`, `section`, `article`, `nav`, `aside`, `footer`.
- Aplicar etiquetas `label` asociadas correctamente a todos los campos.
- Usar botones reales para acciones.
- Incorporar atributos ARIA cuando aporten accesibilidad.
- Incluir títulos, subtítulos y jerarquía correcta de encabezados.
- No depender de recursos externos críticos para que la actividad funcione.

## CSS

- Diseño visual profesional, inmersivo y responsive.
- Usar una estética coherente con la narrativa: tecnológica, laboratorio, expediente, estudio creativo, centro de datos, agencia u otra pertinente.
- Mantener contraste suficiente.
- No saturar con animaciones.
- Aplicar `@media (prefers-reduced-motion: reduce)` para respetar preferencias de movimiento reducido.
- Garantizar visualización correcta en móviles, tabletas y computadoras.
- Incluir estilos de impresión para exportar la sesión o el reporte final a PDF.

## JavaScript

- Usar JavaScript vanilla moderno.
- Implementar `localStorage` para guardar el progreso local.
- Implementar XP, insignias, barra de progreso y niveles desbloqueables.
- Incluir validaciones de campos.
- Incluir botones funcionales para:
  - Guardar avance.
  - Reiniciar avance con confirmación.
  - Copiar resultados.
  - Descargar reporte Markdown.
  - Generar evidencia.
  - Mostrar ayuda contextual.
- Evitar dependencias pesadas.
- Añadir comentarios breves y útiles en el código.
- No usar datos personales reales ni servicios externos de recolección de datos.

---

# 10. ACCESIBILIDAD

La experiencia debe cumplir, como mínimo, con estos criterios:

- Navegación completa con teclado.
- Estados visibles de foco.
- Contraste legible.
- Textos alternativos cuando existan recursos visuales.
- No depender solo del color para comunicar errores o avances.
- Mensajes de retroalimentación legibles por lectores de pantalla.
- Botones con nombres claros.
- Formularios accesibles.
- Animaciones no esenciales reducidas o eliminadas cuando el usuario lo solicite.

---

# 11. ESTILO DE REDACCIÓN

- Escribir en español claro, directo y profesional.
- Dirigirse al estudiante en segunda persona: “Analiza”, “Registra”, “Propón”, “Justifica”.
- Mantener consistencia con la narrativa.
- Evitar párrafos excesivamente largos.
- Explicar términos técnicos al momento de utilizarlos.
- Plantear retos auténticos, relacionados con el desempeño profesional.
- Evitar preguntas que se resuelvan solo copiando definiciones.
- Promover análisis, toma de decisiones, creación, argumentación y reflexión.

---

# 12. FORMATO DE SALIDA

Tu respuesta debe entregarse en este orden:

1. Breve ficha de diseño pedagógico de la sesión.
2. Tabla de distribución de tiempo según IUTPC.
3. Lista de actividades y evidencias.
4. Rúbrica formativa.
5. Código completo y funcional de `index.html`.
6. Guía breve para publicar el archivo en GitHub Pages.
7. Sugerencias para adaptar la sesión a modalidad virtual o presencial.

No entregues código incompleto, pseudocódigo ni fragmentos aislados. Entrega un archivo `index.html` listo para copiar, guardar y ejecutar.

Campos que conviene completar

Para obtener sesiones coherentes, antes de usar el superprompt conviene definir con precisión el logro de sesión, el caso profesional y la evidencia final; estos tres elementos orientan las actividades, la práctica y la evaluación. La estructura propuesta conserva la progresión IUTPC, el trabajo por niveles, los retos interactivos, el registro de avance, las evidencias GitHub y la reflexión individual presentes en el material adjunto.[ppl-ai-file-upload.s3.amazonaws]

Campo	Ejemplo

Campo	Ejemplo
Curso	Diseño de interfaces digitales
Tema	Principios de jerarquía visual y accesibilidad
Logro de sesión	Diseña una interfaz de baja fidelidad aplicando jerarquía visual, contraste y navegación accesible
Caso	Una institución necesita rediseñar su portal de matrícula para reducir abandonos
Evidencia	Prototipo comentado y justificación en Markdown
Narrativa	“Operación Interfaz Clara”
Producto GitHub	sesion-03-prototipo-accesible.md

Ajuste recomendado

El superprompt está diseñado para mantener una sesión de 90 minutos como referencia, distribuida en activación, utilidad, construcción conceptual, práctica y cierre, pero puede recalibrar automáticamente los tiempos cuando se indique otra duración.[ppl-ai-file-upload.s3.amazonaws]