Una página interactiva
para tu clase.
Al terminar vas a tener un archivo en tu computadora que, al abrirlo, presenta un caso y deja que el alumno decida qué hacer. Cada decisión lleva a una consecuencia distinta. Funciona sin internet y no le pide cuenta a nadie.
Un caso donde cada respuesta cambia el desenlace.
Una diapositiva sobre ética no enseña ética.
Puedes explicar durante veinte minutos qué es una respuesta asertiva y tus alumnos van a asentir. Pon a esos mismos alumnos frente a un caso donde tienen que elegir, y vas a ver cuántos escogen la respuesta que suena firme pero rompe el vínculo.
Eso es lo que hace una página interactiva y no hace un PowerPoint: obliga a decidir y devuelve una consecuencia. Sirve para dilemas éticos, para diagnósticos clínicos, para casos legales, para atención a clientes, para cualquier cosa donde el criterio se ejerce eligiendo.
Hasta hace poco esto lo tenía que programar alguien. Hoy se lo pides en español, y ese es el cambio de verdad.
Antes de nada, qué es un archivo HTML.
Una página web es un archivo de texto que termina en .html. Tu navegador sabe leerlo y convertirlo en algo con botones y colores. Eso es todo.
Lo importante para ti es que un archivo así puede vivir en tu computadora, sin estar en internet. Le das doble clic, se abre en el navegador y funciona. Lo puedes mandar por correo o traerlo en una memoria, y en la máquina del salón va a abrir igual. Cuando el prompt dice «autocontenido» significa justo eso: un solo archivo que no depende de nada más.
Sí necesitas
No necesitas
Del caso al archivo que ya funciona.
Escribe el caso primero, en papel
Este es el paso que la gente se salta y por eso le sale una página bonita y vacía. Antes de abrir nada, define la situación, las tres o cuatro respuestas posibles y qué consecuencia tiene cada una.
La consecuencia es lo que hace que funcione. Si todas las opciones llevan a «bien hecho», acabas de hacer un cuestionario disfrazado.
Pídele el archivo completo
Nota las tres instrucciones técnicas del final. Son las que evitan que te devuelva tres archivos sueltos o algo que necesita internet para funcionar.
Hazme una actividad interactiva para mis alumnos de
[materia] en [nivel educativo].
El caso: [describe la situación en tres o cuatro
frases].
Las opciones de respuesta y su consecuencia:
1. [opción] → [qué pasa y por qué]
2. [opción] → [qué pasa y por qué]
3. [opción] → [qué pasa y por qué]
Cómo debe funcionar:
- Presenta el caso, el alumno elige una opción y ve la
consecuencia con una explicación breve.
- Al final, un cierre que le diga qué revela su
elección y le deje una pregunta para pensar.
- Un botón para volver a empezar.
Requisitos técnicos:
- UN SOLO archivo .html autocontenido, con el estilo y
el código dentro del mismo archivo.
- Que funcione sin internet, sin librerías externas ni
enlaces a servicios de fuera.
- Que se lea bien en celular y en proyector.
- Español de México. Texto grande y buen contraste.Guárdalo con la terminación correcta
Copia todo el código y pégalo en el Bloc de notas o TextEdit. Al guardar, ponle un nombre que termine en .html, por ejemplo caso-etica.html. Esa terminación es lo que hace que tu computadora sepa abrirlo con el navegador.
En Windows, elige «Todos los archivos» en el tipo, porque si no te va a guardar caso-etica.html.txt y no va a funcionar. En Mac, TextEdit pide pasar a formato de texto simple desde el menú Formato.
Si tu chatbot ofrece un botón para descargar el archivo, úsalo y te saltas todo esto.
Ábrelo con doble clic
Se abre en tu navegador y ya está corriendo. Juégalo completo, eligiendo cada una de las opciones, y fíjate si alguna consecuencia se siente floja o injusta.
Arréglalo hablando
Regresa a la misma conversación y pídele cambios en español normal. No tienes que tocar el código.
La consecuencia de la opción 2 es muy suave, hazla
más incómoda para el docente.
Agrega un segundo caso después del primero, sobre
[otro tema], con la misma estructura.
Las letras se ven chicas cuando lo proyecto. Súbeles
el tamaño y sepáralas más.
Al final, muéstrale al alumno el resumen de las
decisiones que tomó.Cada vez te devuelve el archivo completo otra vez. Guárdalo encima del anterior y recarga con F5.
Llévalo al salón
Tienes tres formas, de la más simple a la menos simple. La primera funciona casi siempre: copia el archivo a una memoria y ábrelo en la computadora del salón. La segunda: súbelo a tu Drive y comparte el enlace, sabiendo que a tus alumnos les va a descargar el archivo en lugar de abrirlo directo. La tercera, si quieres una liga de verdad, es un servicio gratuito de publicación donde arrastras el archivo y te da una dirección.
Para una sola clase, la memoria basta y evita que te quedes sin actividad si falla el internet de la escuela.
Cinco cosas que van a salir mal.
Casi siempre es que el código quedó cortado. Vuelve a la conversación y pídele: «se cortó, mándame el archivo completo otra vez desde la primera línea». Revisa que lo que pegaste empiece con <!doctype html> y termine con </html>.
Ignoró la instrucción de un solo archivo. Pídeselo directo: «júntalo todo en un solo archivo .html, con los estilos y el código dentro». Es el error más frecuente y se arregla en un mensaje.
El archivo se guardó como texto. Cámbiale el nombre para que termine en .html, o dale clic derecho, «Abrir con», y elige tu navegador. En Windows conviene activar la vista de extensiones de archivo para ver qué está pasando.
Los proyectores de salón suelen tener menos resolución y peor contraste que tu laptop. Pídele texto más grande y colores de más contraste, y pruébalo en el salón antes de la clase, no durante.
Pasa, sobre todo después de varias vueltas. Por eso conviene guardar una copia cada vez que quedes conforme: caso-v1.html, caso-v2.html. Si la versión nueva sale peor, borras y sigues con la anterior.
El archivo no es la actividad.
Aquí está el error más caro de todos, y no tiene nada que ver con la IA. Si repartes el simulador y dices «jueguen diez minutos», lo que va a pasar es que jueguen. Aprender es otra cosa.
La Brújula Social se usó dentro de una secuencia de diez minutos con tres momentos. Dos minutos de apertura donde el presentador encuadra qué se va a observar. Seis minutos de desarrollo, cada quien en su dispositivo. Y dos minutos de cierre donde se comparte qué estilo salió y qué microcompetencia toca fortalecer. Sin el cierre, la actividad se queda en anécdota.
Lo que hay que planear aparte
El principio que aplica
Y de paso, la secuencia que lo envuelve.
Ya que tienes el archivo, pídele la planeación con este segundo prompt. Son dos piezas distintas y las dos hacen falta.
Diseña la secuencia didáctica que envuelve la actividad
interactiva que acabas de crear, con el modelo de
Díaz-Barriga: apertura, desarrollo y cierre.
Duración total: [minutos]
Grupo: [nivel y número de alumnos]
Dame:
- Los aprendizajes esperados, redactados como lo que el
alumno será capaz de hacer.
- Qué digo yo en la apertura, palabra por palabra, para
encuadrar qué deben observar.
- Cómo organizo el desarrollo si algunos no traen
dispositivo.
- Tres preguntas de cierre para la discusión grupal.
- Cómo evalúo esto de forma formativa, sin ponerle
calificación.Sabes que te salió bien si
Ya llevas los tres
07 · SI QUIERES IR A FONDO
Dos cursos siguen por aquí.
Evaluar en la era de la IA trabaja las actividades donde el alumno tiene que ejercer criterio, que son las que no se resuelven copiando. Claude para planificar clases entra a la planeación completa, desde la secuencia hasta los materiales.