Semàfor (HTML5)

Semàfor de sonido para el aula, instalable y sin backend. Ayuda a visualizar el nivel de ruido y conserva las herramientas de alumnado, avisos y evaluación.

Ejecución

Opción simple:

• abre index.html en el navegador

Opción recomendada en Linux:

cd /home/sasogu/github/web/EduAvisos
python3 -m http.server 8000

Luego abre:

• http://localhost:8000

Qué hace

La app abre con el semáforo y el modo de trabajo como vista principal. El botón «Proyectar el semáforo» abre la pantalla completa y muestra las luces en grande. «Salir de pantalla completa» o Escape recuperan la vista anterior. Si el navegador no admite pantalla completa, la proyección ocupa la ventana. Alumnado y Evaluación se activan desde Configuración; la elección se guarda en el navegador.

La app incluye:

• semáforo de sonido con micrófono, calibración y vista para proyectar
• gestión de clases y alumnado
• generación rápida de comentarios de evaluación

Todo funciona en local y se guarda en localStorage.

El botón verde «Activar micròfon», bajo el nombre de la app, inicia el semáforo tras conceder permiso al micrófono. El temporizador de avisos está en el panel de alumnado y funciona por separado.

Uso diario

1. Alumnado y clase

• elige una de las 12 clases
• cambia el nombre de la clase si lo necesitas
• importa alumnos:
  • pegando un nombre por línea
  • cargando un .txt o .csv
  • cargando un .pdf si procede
• la importación añade alumnos, no borra los existentes

2. Avisos y semáforo

• +☹︎: suma aviso negativo
• +🙂: suma aviso positivo
• puedes filtrar por mínimos de ☹︎ y 🙂
• el temporizador descuenta tiempo cuando está en Play

3. Evaluación rápida

• selecciona un alumno
• elige la evaluación activa:
  • 1ª evaluación
  • 2ª evaluación
  • 3ª evaluación
  • Final
• marca opciones por categoría
• el comentario final se genera automáticamente
• puedes añadir observación libre
• puedes editar manualmente el comentario final si hace falta

Atajos de teclado

Atajos disponibles en el panel de evaluación:

• 1-9: seleccionar opción en la categoría activa
• Tab: siguiente categoría
• Shift+Tab: categoría anterior
• Flecha arriba / abajo: alumno anterior o siguiente
• Enter: copiar comentario y pasar al siguiente alumno
• Ctrl+S: guardar
• Ctrl+C: copiar comentario
• F1: abrir/cerrar ayuda rápida

Copias entre evaluaciones

Copiar una evaluación del mismo alumno a la siguiente

• elige un alumno
• selecciona la evaluación activa
• usa Copiar evaluación anterior

Ejemplos:

• 1ª -> 2ª
• 2ª -> 3ª
• 3ª -> Final

Copiar notas individuales de toda la clase entre evaluaciones

• selecciona la evaluación origen
• en Copiar a evaluación elige la evaluación destino
• pulsa Copiar evaluación a toda la clase

Esto copia, alumno por alumno:

• selecciones de categorías
• observación libre
• comentario editable

Copiar el alumno actual al resto visibles

• usa Copiar este alumno a visibles
• esta acción clona el contenido del alumno actual al resto de alumnos visibles según el filtro activo

Personalización de frases y categorías

En ⚙︎ Configuración puedes:

• editar frases por categoría
• añadir categorías nuevas
• cambiar el orden de las categorías
• eliminar categorías
• restaurar el catálogo por defecto

Formato de cada frase:

ID | valenciano | castellano

Ejemplo:

A1 | Manté una actitud positiva. | Mantiene una actitud positiva.

Visibilidad de paneles

En Configuración puedes mostrar u ocultar:

• Alumnos
• Semáforo
• Evaluación
• Modo

La app recuerda esa preferencia.

Configuración y backup

En ⚙︎ Configuración puedes:

• cambiar idioma de interfaz
• ajustar minutos por ☹︎
• ajustar minutos por 🙂
• exportar copia completa en .json
• importar copia completa en .json

La copia incluye:

• clases
• alumnos
• avisos
• histórico
• configuración
• evaluaciones
• frases y categorías personalizadas

Datos

Se guardan en localStorage del navegador.

Esto incluye:

• clases y alumnos
• filtros
• configuración de evaluación
• comentarios
• visibilidad de paneles
• personalización de frases y categorías

PWA (instalación y modo sin conexión)

La app es instalable y funciona sin conexión tras la primera carga:

• Instalar: en Chrome/Edge aparece el botón "Instalar app" en la cabecera (o el icono de instalación en la barra de direcciones) en cuanto el navegador confirma que cumple los requisitos. En iOS/Safari no hay aviso automático: usa "Compartir → Añadir a pantalla de inicio".
• Sin conexión: el Service Worker (sw.js) guarda en caché el HTML, CSS, JS e iconos. Estando online siempre se sirve la versión más reciente (network-first); si no hay red, se sirve la última copia cacheada.
• Requisito: el Service Worker solo funciona en https:// o en localhost (por eso python3 -m http.server sirve para probarlo en local).
• Forzar actualización a usuarios offline: si despliegas un cambio importante y quieres que quien esté sin conexión lo reciba en cuanto vuelva a tener red, sube el valor de EDUAVISOS_SW_VERSION en sw-version.js (p. ej. eduavisos-v1 → eduavisos-v2). Quien esté online ya recibe la última versión en cada carga sin necesidad de tocar nada. Esta versión también se muestra en el pie de página de la app.

Estructura de archivos

• index.html: estructura principal de la app
• css/styles.css: estilos
• js/i18n.js: textos de interfaz
• js/app.js: lógica principal
• manifest.json: metadatos de instalación (PWA)
• sw.js: Service Worker (caché offline)
• sw-version.js: versión de caché del Service Worker (fuente única, usada por sw.js y mostrada en el pie de página)
• icons/: iconos de la app (192/512/maskable/apple-touch-icon)

Mantenimiento

Puntos habituales de mantenimiento:

• ajustar frases/categorías desde la propia configuración
• revisar textos de interfaz en js/i18n.js
• tocar lógica principal en js/app.js

Licencia

MIT. Ver LICENSE.