Arquitecto de Software Senior, Especialista en Ingeniería Inversa de Sistemas y Desarrollador Web Senior especializado en interfaces EdTech

 Actúa como un **Arquitecto de Software Senior, Especialista en Ingeniería Inversa de Sistemas y Desarrollador Web Senior especializado en interfaces EdTech**. Tu objetivo es ejecutar un flujo completo de ingeniería limpia (*Clean-Room Engineering*): primero, analizar la documentación descriptiva proporcionada (sitios web, transcripciones/análisis de videos y archivos PDF) sobre un software de gestión de aulas inspirado en la arquitectura de *NetSupport School* para extraer una especificación técnica rigurosa; y segundo, materializar dicha especificación en un prototipo web funcional e interactivo en un solo archivo HTML.

El entregable se divide estrictamente en **dos partes secuenciales**:

---

# PARTE I: ESPECIFICACIÓN TÉCNICA E INGENIERÍA INVERSA (CLEAN-ROOM SPEC)

Analiza el material fuente proporcionado y genera un informe técnico estructurado en los siguientes **5 bloques**, asegurando que cubran la totalidad de los **7 módulos funcionales** detallados en la Parte II:

### BLOQUE 1: INVENTARIO Y ARQUITECTURA GENERAL DEL SISTEMA

* **1.1 Propósito Principal y Casos de Uso:** Resume la propuesta de valor y el trabajo principal que realiza el programa en entornos educativos y de administración de red.

* **1.2 Componentes Identificados:** Describe la estructura del programa (Frontend/UI de consola docente y barra del alumno, Backend/Servidor intermediario *Name & Connectivity Server / Gateway*, Almacenamiento local/diarios, Integraciones de terceros y Procesos en segundo plano/servicios IT).

* **1.3 Entradas y Salidas (I/O):**

  * *Entradas:* Archivos soportados (PDF, listas de URLs/apps), eventos de usuario (clics, atajos, pulsaciones de teclado), parámetros de configuración y peticiones de red/IPC.

  * *Salidas:* Archivos generados (capturas de pantalla, *Student Journal* en PDF), cambios de estado en UI, notificaciones/alertas y comandos de control remoto.

### BLOQUE 2: MATRIZ DE EVIDENCIA EPISTÉMICA Y ATRIBUTOS

Clasifica cada característica, constante, comportamiento o atributo extraído de los datos descriptivos en una de estas tres categorías:

* **`[OBSERVADO]`**: Comportamientos, constantes, interfaces, modalidades o flujos directamente visibles o documentados en los videos, PDFs o webs (incluyendo las referencias `[4]` a `[40]`).

* **`[INFERIDO]`**: Reglas de negocio, estructuras de datos o algoritmos deducidos lógicamente a partir de la interacción de los elementos observados (y necesarios para la simulación en el prototipo).

* **`[DESCONOCIDO]`**: Lagunas en los datos descriptivos (p. ej., protocolos propietarios de transmisión de video en tiempo real, cifrado interno del *Gateway*, algoritmos exactos de diagnóstico de red no mostrados).

### BLOQUE 3: ESPECIFICACIÓN DETALLADA DE CARACTERÍSTICAS

Para cada una de las funciones clave de los 7 módulos del sistema, completa la siguiente ficha técnica:

* **Nombre de la Característica:**

* **Clasificación Epistémica:** (`[OBSERVADO]` / `[INFERIDO]`)

* **Descripción Funcional:**

* **Flujo de Trabajo (Paso a Paso):**

* **Estado e Interfaz de Usuario:** (Disposición visual, controles, retroalimentación al usuario y visibilidad según el modo de consola)

* **Reglas de Negocio y Transformación de Datos:** (Algoritmos, filtros o fórmulas requeridas)

* **Manejo de Errores y Excepciones:**

### BLOQUE 4: ESQUEMA DE DATOS Y ESTADO DEL SISTEMA

* **4.1 Modelo de Datos:** Entidades principales (p. ej., `ClassroomSession`, `StudentNode`, `PolicyRule`, `KeystrokeEvent`, `QnASession`, `HardwareInventory`), atributos de cada entidad y relaciones inferidas entre ellas.

* **4.2 Máquina de Estados:** Estados posibles del sistema y de los nodos de estudiantes (p. ej., *Desconectado, Reposo/Monitoreo, Bloqueado, Pantalla en Blanco, En Presentación/Exhibit, Evaluación Activa, Alerta de Ayuda*) y los eventos que desencadenan las transiciones.

### BLOQUE 5: GUÍA DE REIMPLEMENTACIÓN LIMPIA (CLEAN-ROOM SPEC)

* **5.1 Requisitos de Stack Tecnológico Sugerido:** Lenguajes, marcos de trabajo y bibliotecas recomendados para implementar tanto la versión de producción como el prototipo web limpio (HTML5, Tailwind CSS, JavaScript plano).

* **5.2 Roadmap de Desarrollo por Fases:**

  * *Fase 1:* Núcleo, modelo de datos en memoria y máquina de estados.

  * *Fase 2:* Interfaz de consola adaptable, grid de monitoreo y flujos pedagógicos principales.

  * *Fase 3:* Simulación de consola IT, telemetría en tiempo real y manejo de excepciones.

* **5.3 Casos de Prueba de Paridad Funcional:** Lista de pruebas de entrada/salida que la versión replicada debe pasar para confirmar que se comporta exactamente como el software original.

---

# PARTE II: IMPLEMENTACIÓN DEL PROTOTIPO INTERACTIVO (CLEAN-ROOM WEB APP)

Siguiendo estrictamente la especificación generada en la Parte I, diseña y desarrolla una aplicación web completa en **un solo archivo HTML** usando **HTML5, CSS (Tailwind CSS vía CDN) y JavaScript plano**, con estado reactivo en memoria que simule eventos en tiempo real y un diseño moderno, pulcro y profesional.

La interfaz debe implementar los siguientes **7 módulos funcionales**:

1. **Arquitectura de Interfaz y Modos de Usuario:**

   * Selector de modos de consola en la cabecera que adapte dinámicamente las herramientas visibles: **"Easy"** (interfaz simplificada para control básico), **"Intermediate"** (herramientas esenciales de enseñanza) y **"Advanced"** (acceso completo a administración y diagnósticos) `[4, 6, 7]`.

   * Indicadores de estado del sistema: estado de conexión del servidor intermediario (*"Name & Connectivity Server / Gateway"*), temporizador interactivo de la lección y accesos rápidos de emergencia (*Silenciar audio global*, *Bloquear Internet* y *Pantalla en blanco / Blank Screen*) `[8-11]`.

2. **Panel Principal de Monitoreo (Grid de Estudiantes):**

   * Cuadrícula con tarjetas/miniaturas escalables (control de tamaño de miniatura) que representan los equipos de los alumnos `[12-14]`.

   * Cada tarjeta debe mostrar: nombre del alumno/equipo, icono de estado (conectado, desconectado, encendido o apagado) `[15]`, indicadores de nivel de batería y cobertura Wi-Fi `[16, 17]`, aplicación en uso, sitio web activo en primer plano y alertas visuales de solicitud de ayuda `[18-20]`.

   * Menú contextual o modal de interacción al hacer clic en una tarjeta: **Zoom de pantalla** `[12, 14]`, **Captura de pantalla (Screenshot)** `[21]`, **Inicio de chat privado** interactivo `[22]` y **Sesión de control remoto** simulada `[13, 23]`.

3. **Control de Dispositivos y Atención al Aula:**

   * Panel de control de atención: botones para bloquear teclado/ratón (**"Lock"**) `[8, 18]` y oscurecer pantallas (**"Blank Screen"**) `[8, 13]`, reflejando el cambio de estado inmediatamente en las tarjetas de los alumnos.

   * Gestión de periféricos: *toggles* funcionales para restringir la impresión (límite de páginas o aprobación del profesor) y bloquear transferencias en memorias USB o unidades ópticas `[24, 25]`.

   * Modos de presentación: opciones para proyectar la pantalla del profesor a los alumnos (**"Show Mode"**) `[26, 27]` y exhibir la pantalla de un alumno destacado como modelo hacia el resto de la clase (**"Exhibit Mode"**) `[26, 28]`.

4. **Monitoreo de Contenido y Filtrado en Tiempo Real:**

   * **Control Web y de Aplicaciones:** pestaña para configurar dinámicamente listas de sitios web y programas autorizados (**"Approved"**) o restringidos (**"Restricted"**) `[13, 25, 29]`.

   * **Monitoreo de teclado (*Keylogger* pedagógico):** vista en tiempo real que registre palabras clave tipeadas por los alumnos (con simulador de flujo activo), destacando en **verde** las palabras objetivo de la lección y en **rojo** el vocabulario no permitido o inapropiado `[18, 25, 29]`.

5. **Evaluación Formativa e Interacción Pedagógica:**

   * **Módulo Q&A Gamificado:** simulador de preguntas dinámicas con modalidades funcionales: **"First to Answer"** (primer estudiante en responder), **"Pot Luck"** (selección aleatoria animada de alumno), **"Peer Assessment"** (evaluación entre pares) y **"Team Mode"** (trabajo y puntuación por equipos) `[30-32]`.

   * **Retroalimentación y Bienestar:** panel de encuestas rápidas al aula e indicadores en tiempo real de confianza/estado emocional del estudiante (*Student Feedback & Wellbeing*) `[33, 34]`.

6. **Vista de la Barra del Estudiante (Student Information Bar):**

   * Previsualización interactiva en vivo de la barra superior que ve el alumno en su pantalla, mostrando los objetivos actuales de la lección, tiempo restante sincronizado, recursos entregados y acceso simulado a su **Diario en PDF (*Student Journal*)** `[18, 35-37]`.

7. **Consola Técnica IT (Tech Console View):**

   * Pestaña dedicada para técnicos de red (visible especialmente en modo *Advanced*) que muestre: tabla de inventario de hardware y software por equipo `[5, 38, 39]`, estado de servicios y procesos activos `[5, 38]`, consola interactiva de comandos simulada (**PowerShell**) `[5]` y función operativa de encendido remoto (**Wake-on-LAN**) para despertar equipos apagados en el grid `[5, 38, 40]`.

---

# REGLAS DE RIGOR Y CUMPLIMIENTO

1. **Trazabilidad Epistémica:** No inventes detalles técnicos en la Parte I que no estén respaldados por el material fuente o por una deducción lógica explícita. Marca cualquier laguna técnica como `[DESCONOCIDO]`.

2. **Aislamiento Clean-Room:** Tanto la especificación como el código HTML/JS deben ser puramente funcionales y descriptivos, sin copiar código propietario ni activos gráficos con derechos de autor o marcas registradas.

3. **Calidad de Código:** El código de la Parte II debe entregarse completo, sin truncar funciones ni usar marcadores como `// TODO`, listo para abrirse en cualquier navegador moderno y probar todas sus interacciones.

---

### MATERIAL FUENTE DE ENTRADA:

`[Pega aquí tus transcripciones de video, extractos de PDF, documentación web o notas descriptivas del sistema antes de ejecutar]`