Laboratorio de lógica digital

# RolEres ingeniero de software especializado en aplicaciones educativas interactivasy conoces el currículo de Tecnología de la ESO.​# ContextoSoy profesor de Tecnología. Necesito una aplicación web para 4.º de ESO,bloque de electrónica digital: puertas lógicas, tablas de verdad y funciones booleanas.La voy a usar proyectada en clase y también en los portátiles del alumnado.Esta aplicación es una pieza de escaparate: tiene que verse EXCELENTEy tener pedagogía real, no ser una demo de juguete.​# TareaConstruye «Laboratorio de lógica digital», una aplicación de una sola pantallacon tres modos, conmutables con pestañas accesibles.​1) EXPLORAR.El alumno elige una puerta entre NOT, AND, OR, NAND, NOR y XOR. En un lienzo oscurotipo banco de trabajo se dibuja el símbolo ANSI/IEEE correcto de esa puerta (distintivoy reconocible: el semicírculo de la AND, el escudo curvo de la OR, la doble curva de la XOR,el circulito de negación de NAND/NOR/NOT). Dos interruptores A y B (solo A si es NOT) queel alumno conmuta con ratón o teclado; los cables se colorean según lleven 0 o 1 y la salidaenciende un LED. Debajo, la tabla de verdad completa de esa puerta con la fila actualresaltada en vivo. Al lado, una tarjeta que explica la puerta en una frase llana («la ANDsolo da 1 cuando las DOS entradas valen 1»), su expresión booleana (S = A · B, S = A + B,S = A ⊕ B, S = ¬(A · B)…) y una analogía cotidiana de una línea.​2) MONTAR.Un circuito de dos puertas encadenadas: tres entradas A, B y C, y dos huecos (la puerta 1recibe A y B; la puerta 2 recibe la salida de la puerta 1 y la entrada C). El alumno eligequé puerta va en cada hueco desde un desplegable, conmuta las tres entradas y ve propagarselos valores por los cables, con el valor 0/1 rotulado en cada tramo. Se muestra la tabla deverdad de las 8 combinaciones del circuito completo, recalculada en vivo, con la fila actualresaltada. Un panel plantea un objetivo con enunciado real («que la alarma suene solo si lapuerta está abierta Y el sistema está armado, salvo que se haya pulsado el botón deanulación») y comprueba automáticamente si la combinación de puertas elegida cumple la tablaobjetivo, avisando en cuántas filas de 8 coincide.​3) RETOS.Seis retos de dificultad creciente, cada uno con un enunciado del mundo real (alarma de unavivienda, riego automático de un invernadero, luz de un ascensor, detector de cinturón deseguridad, ventilación de un taller, control de un semáforo de obra). En cada reto el alumnodecide la salida (0 o 1) para cada fila de la tabla de verdad, o elige la puerta que resuelveel enunciado. Corrección inmediata con explicación del porqué en cada fila fallada: no solo«mal», sino qué condición se cumple y qué debería salir. Barra de progreso y marcador deaciertos. Botón de reintentar. Al terminar los seis, un resumen con el recuento y una frasede cierre según el resultado. Nada punitivo: cada error se explica.​# Reglas1) Una sola pantalla, sin recarga y sin enrutado.2) Sin librerías externas, sin CDN y sin imágenes externas: todo gráfico va en SVG.   Tiene que funcionar sin internet, porque en el aula 12 no hay wifi.3) Accesible: todo se opera con teclado; los interruptores son botones reales con aria-pressed;   los cambios de estado se anuncian con aria-live; los SVG informativos llevan role="img"   con su descripción; foco visible con anillo.4) Responsive de verdad: legible en un móvil de 360 px de ancho y espectacular proyectado   en 1080p. Nunca puede haber scroll horizontal de la página.5) No bases ninguna información SOLO en una animación.6) Geometría SVG calculada con constantes, no a ojo: nada se solapa ni se sale del viewBox,   y ningún texto por debajo de 13 px efectivos.7) RIGOR: las tablas de verdad, los símbolos ANSI y la propagación lógica tienen que ser   exactos. Un profesor de Tecnología va a ver esto proyectado. Revisa una por una las seis   tablas de verdad y los seis enunciados: el enunciado en lenguaje natural tiene que   corresponder EXACTAMENTE con la tabla que se pide. Compruébalo a mano antes de darlo   por bueno.​# FormatoPaleta sobria: azul para lo primario, verde para el acierto y para la señal a 1, ámbar paralos avisos, rosa para el error, grises para lo neutro. El banco de trabajo donde vive elcircuito, en panel oscuro, para que contraste proyectado: cables a 0 en gris azulado, a 1 enverde, y el LED encendido con halo. Tarjetas con borde suave y sombra ligera. Todo en españolde España, con tuteo al alumnado.​# ControlAntes de darlo por terminado: ejecútalo, recorre los tres modos entero y comprueba a mano lalógica de las seis tablas de verdad. Cuando acabes, dime qué has dado por supuesto que yo note había dicho.