El laboratorio: dos aplicaciones

• Está literalmente en tu temario. TIC, programación, sistemas de control, simulación, evaluación y didáctica. No estás haciendo algo «de informática»: estás haciendo tu asignatura.
• Es la parte práctica que nadie más lleva. Presentarse con una aplicación tuya, funcionando, publicada y con un enlace que el tribunal abre en su ordenador es una diferencia que se ve en dos segundos.
• Contesta la pregunta de moda. Cuando te pregunten cómo integrarías la IA en tu aula, la respuesta convincente no es una opinión: es enseñar lo que has hecho con ella y cómo lo verificaste.
• Y cuando tengas la plaza, lo vas a usar cada semana. Un simulador para cada contenido difícil, hecho en una tarde. Eso antes no existía.

El modo agente no te contesta: actúa. Crea ficheros, los edita, ejecuta órdenes en la terminal, lee el error que sale y vuelve a intentarlo. Eso cambia tu papel: dejas de teclear y pasas a dirigir y verificar. Pulsa cada paso.

No son maquetas ni vídeos: ábrelas y úsalas. Cada una salió de un solo encargo bien escrito, y en su página tienes ese encargo publicado íntegro, para que veas exactamente qué frase produce qué comportamiento.

Esto es lo que se hace en directo en la sesión y lo que puedes repetir en casa. Si te quedas a medias, cada paso está aquí completo.

1. 1Prepara el terreno. Visual Studio Code instalado, extensión de GitHub Copilot, sesión iniciada con tu cuenta, y una carpeta vacía abierta —por ejemplo ~/tecno/app—. El agente trabaja dentro de esa carpeta y no ve el resto de tu disco.
2. 2Abre el chat en modo agente. No es el chat normal: en el selector del panel de Copilot eliges el rol de agente. La diferencia es que puede crear y modificar ficheros y ejecutar órdenes — te pedirá permiso la primera vez.
3. 3Pega el encargo completo. Uno solo, largo, con sus seis bloques. No lo piques por trozos: en la primera pasada quieres la aplicación entera, aunque salga tosca.
4. 4Déjalo trabajar y míralo. Dos o tres minutos. Verás cómo crea ficheros, los escribe, ejecuta algo, se encuentra un error y lo arregla solo. Merece la pena mirar: se aprende viendo en qué orden hace las cosas.
5. 5Ábrela y úsala entera. De principio a fin, como la usaría tu alumnado más trasto. Comprueba los datos, las fórmulas, los casos raros y qué pasa al reiniciar. Aquí es donde estás tú y no puede estar nadie más.
6. 6Corrige de uno en uno. Un fallo, una petición, y verificas otra vez antes de pedir el siguiente. «Arréglalo todo» devuelve un revoltijo.
7. 7Publícala. Repositorio en GitHub, Settings → Pages, publicar desde la rama principal. En un minuto tienes una dirección pública del tipo tuusuario.github.io/tu-app. Ese enlace va en tu defensa: el tribunal lo abre sin instalar nada.

# Rol
Eres ingeniero de software especializado en aplicaciones educativas interactivas
y conoces el currículo de Tecnología de Secundaria.

# Contexto
Soy profesor de Tecnología. Necesito una aplicación web para [CURSO Y ETAPA],
sobre "[CONTENIDO EXACTO DEL CURRÍCULO]".
La voy a usar proyectada en clase y en los portátiles del alumnado.
La idea pedagógica es que el alumnado [QUÉ DESCUBRA O QUÉ PRACTIQUE].

# Tarea
Construye "[NOMBRE DE LA APLICACIÓN]", de una sola pantalla, con estas partes:
1) [LA ESCENA PRINCIPAL: qué se ve, qué se toca y qué pasa al tocarlo.]
2) [LOS MANDOS: qué puede cambiar el alumno y entre qué valores.]
3) [LAS LECTURAS: qué magnitudes se muestran, con su fórmula y su unidad.]
4) [LOS RETOS: cuántos, de qué dificultad creciente, y con qué enunciados reales.]

Datos que tienes que usar (no inventes ninguno):
- [DATO 1 CON SU VALOR Y SU UNIDAD]
- [DATO 2 CON SU VALOR Y SU UNIDAD]

# Reglas
1) Una sola pantalla, sin recarga y sin enrutado.
2) Sin librerías externas, sin CDN y sin imágenes externas: todo gráfico en SVG.
   Tiene que funcionar sin internet, porque en mi aula la wifi falla.
3) Accesible: todo se opera con teclado, los controles son elementos reales
   (botones, range, number) con su etiqueta, y los cambios se anuncian con aria-live.
4) Responsive: legible en un móvil de 360 px y espectacular proyectado en 1080p.
   Nunca puede haber scroll horizontal de la página.
5) Cuando el alumno se equivoque, explica POR QUÉ estaba mal, no solo que lo está.
   Nada punitivo: cada error se explica.
6) Geometría SVG calculada con constantes, no a ojo: nada se solapa ni se sale del viewBox.
7) Las unidades tienen que cuadrar. [ESCRIBE AQUÍ LA RELACIÓN ENTRE UNIDADES QUE IMPORTA.]
8) Todo en español de España, con tuteo al alumnado.

# Formato
Paleta sobria de cuatro colores. Lo que sea "el instrumento" va en panel oscuro
para que contraste proyectado; el resto, en tarjetas claras.

# Control
Antes de darlo por terminado, comprueba a mano este caso y dime el resultado:
[UN CASO QUE TÚ HAYAS RESUELTO CON CALCULADORA, CON SU RESULTADO ESCRITO].
Si tus cálculos no lo reproducen, están mal.
Dime también qué has dado por supuesto que yo no te había dicho.

1. 1Elige el contenido que peor se explica de todo lo que preparas. Ese que siempre necesita dibujo en la pizarra. Ese es el candidato.
2. 2Escribe el prompt con la plantilla, incluido el caso numérico de control resuelto a mano. Diez minutos de preparación; son los que deciden el resultado.
3. 3Ejecútalo, verifícalo y corrige tres cosas. Anota cuáles: esas tres correcciones son tu mejor material de defensa, porque demuestran criterio propio.
4. 4Publícala y guarda el enlace junto a una captura de la aplicación y otra del código. Van en la diapositiva de tu práctica.