Actúa como un experto desarrollador de prompts y crea un prompt para generar una aplicación web en HTML dirigida a niños y niñas de Educación Infantil con deficiencia visual.
El objetivo de la aplicación es que el alumnado identifique, mediante imágenes y audios, los siguientes animales: león, caballo, gato, perro, pato, gallo, oveja y vaca.
La aplicación deberá ser compatible con tablets, ordenadores y dispositivos móviles con sistemas Android e iOS.
Deberá incluir varios juegos educativos que permitan trabajar el reconocimiento de los animales de forma lúdica e interactiva.
Tras cada cinco respuestas correctas, la aplicación mostrará mensajes motivadores acompañados de pequeñas animaciones para reforzar positivamente el aprendizaje.
La interfaz deberá incorporar botones de gran tamaño, un diseño de alto contraste, la posibilidad de activar o desactivar los sonidos, compatibilidad tanto con ratón como con pantalla táctil y adaptación automática a orientación horizontal y vertical.
El diseño deberá ser moderno, atractivo e inspirado en las mejores aplicaciones educativas infantiles actuales, ofreciendo una experiencia intuitiva, accesible y motivadora.
El resultado final deberá tener la apariencia y la calidad de un recurso educativo profesional, listo para su uso en el aula.
Actúa como un desarrollador front-end experto especializado en tecnología educativa accesible (EdTech inclusiva). Tu tarea es crear una aplicación web educativa en un único archivo HTML autocontenido (HTML + CSS + JavaScript embebidos, sin dependencias externas ni librerías de terceros, sin necesidad de conexión a internet una vez cargada), dirigida a alumnado de Educación Infantil (3-6 años) con discapacidad visual (baja visión y ceguera).
El alumnado debe aprender a identificar 8 animales combinando estímulos visuales y auditivos: león, caballo, gato, perro, pato, gallo, oveja y vaca.
Para cada animal, la aplicación debe ofrecer:
Una representación visual clara, de gran tamaño y alto contraste (ilustración vectorial SVG simple, con siluetas gruesas y colores muy diferenciados; evita el fotorrealismo, que dificulta la lectura visual a personas con baja visión).
El nombre del animal narrado por voz (usando la Web Speech API, SpeechSynthesisUtterance, en español de España).
Un sonido representativo del animal (onomatopeya) generado o reproducido mediante la Web Audio API.
Diseña pensando primero en el sonido y el tacto, y después en la vista:
Audio-first: cada pantalla, botón y evento relevante debe anunciarse por voz (Web Speech API) al recibir el foco o al ser tocado/pulsado, no solo al activarse. Nunca debe haber información que dependa exclusivamente de la vista.
Diseño de alto contraste: paleta reducida (p. ej. fondo oscuro con elementos en colores muy saturados, o fondo claro con negro), evitando combinaciones problemáticas para daltonismo asociado.
Botones e iconos de gran tamaño (mínimo 88x88px táctiles, idealmente más), con área de toque amplia y separación suficiente entre elementos para evitar pulsaciones accidentales.
Compatibilidad total con lectores de pantalla (VoiceOver en iOS, TalkBack en Android, NVDA/JAWS en escritorio): usa HTML semántico, atributos ARIA (aria-label, role, aria-live para mensajes dinámicos), y asegura un orden de tabulación lógico.
Tipografía grande, sin serifa, con buen espaciado (mínimo 24-28px para textos, más en títulos).
Nunca uses el color como único vehículo de información: acompaña siempre con forma, texto y sonido.
Todos los elementos interactivos deben funcionar tanto con ratón, teclado como con pantalla táctil (eventos pointerdown/pointerup o gestión combinada de click y touchstart, evitando duplicación de eventos).
Debe funcionar correctamente en navegadores móviles de Android e iOS (Safari y Chrome) y en navegadores de escritorio (Chrome, Edge, Firefox), sin necesidad de instalación.
Diseño responsive: debe adaptarse automáticamente a orientación horizontal y vertical, y a distintos tamaños de pantalla (móvil, tablet, ordenador), usando CSS Flexbox/Grid y unidades relativas (vh, vw, rem, clamp()).
Todo el código (HTML, CSS y JavaScript) debe estar en un único archivo .html, sin dependencias externas (sin CDNs, sin frameworks), de forma que pueda abrirse directamente en cualquier dispositivo o subirse a cualquier plataforma educativa.
Usa localStorage para guardar el progreso y las preferencias del usuario (por ejemplo, sonido activado/desactivado) entre sesiones.
Incluye una pantalla de menú principal accesible desde la que se pueda elegir entre al menos 3 minijuegos diferentes, todos centrados en el reconocimiento de los 8 animales, por ejemplo:
"¿Qué animal es?": se reproduce el sonido/onomatopeya de un animal y el alumno debe elegir la imagen correcta entre varias opciones (2-4 opciones, ajustable).
"Escucha y toca": se narra el nombre de un animal y el alumno debe tocar/seleccionar la imagen correspondiente entre las disponibles en pantalla.
"Memoria sonora" o "Parejas": emparejar el sonido de un animal con su imagen, con refuerzo narrado en cada intento.
Cada minijuego debe:
Dar retroalimentación inmediata (visual, sonora y narrada) tanto en aciertos como en errores, siempre con un tono positivo y sin penalizar el error (nunca "mal", sino invitaciones a intentarlo de nuevo).
Permitir repetir el sonido/instrucción tantas veces como se necesite (botón de "repetir" siempre visible y accesible).
Adaptar la dificultad (por ejemplo, número de opciones en pantalla) mediante una configuración sencilla.
Cada 5 respuestas correctas (contador acumulado, no por sesión de juego individual), la aplicación debe mostrar un mensaje motivador (ej. "¡Lo estás haciendo genial!", "¡Eres un crack de los animales!") narrado por voz y acompañado de una pequeña animación (CSS o SVG animado: estrellas, confeti, un animal saltando, etc.), sin depender de que el usuario la vea para que la experiencia sea satisfactoria (acompañar siempre de sonido festivo).
Los mensajes deben variar (usa un array de al menos 5-6 frases distintas) para no resultar repetitivos.
Un botón de sonido general (activar/desactivar todos los audios) siempre visible, grande y accesible desde cualquier pantalla.
Botón de volver al menú principal siempre accesible.
Un panel opcional para docentes/familias (protegido de forma simple, por ejemplo con una pulsación larga o un botón discreto) que muestre estadísticas básicas de progreso (aciertos, animales dominados, minijuegos completados).
Transiciones y animaciones suaves, no bruscas ni parpadeantes (evita destellos que puedan afectar a la fotosensibilidad).
Estética moderna, cálida y atractiva, inspirada en aplicaciones educativas infantiles de referencia (tipo Duolingo ABC, Khan Academy Kids), pero adaptada a alto contraste: formas redondeadas, ilustraciones vectoriales amigables, micro-animaciones (rebotes, escalados suaves) al interactuar con los botones.
Mantén la coherencia visual y sonora en toda la aplicación (misma paleta, misma voz narradora, mismo estilo de ilustración para los 8 animales).
El resultado debe tener la terminación y el pulido de un recurso educativo profesional, listo para usarse directamente en el aula por un docente de Educación Infantil, sin errores de consola, con el código bien organizado y comentado por secciones (HTML, CSS, JS) para facilitar futuras adaptaciones.
Genera el archivo HTML completo, funcional y listo para usar.
Puedes ajustar el listado de animales, el número de minijuegos o el umbral de refuerzo positivo directamente en el texto antes de usarlo.
Si quieres iterar sobre la app ya generada (añadir animales, cambiar voces, ajustar contraste), pide los cambios de uno en uno para mantener el control sobre el código.