Actúa como un experto desarrollador de prompts y genera uno para crear una aplicación en html dirigida a niños de Educación Primaria con dislexia.
Quiero que la aplicación elija al azar una de las siguientes palabras:
consola, aprobar, estrecho, linterna, intento, atraco, párrafo, forofo, cálculo, digestión, estorbar, inmenso, forestal, apuro, conservar, fórmula, manzano, estrenar, interior, apunte, estrellas, inmortal, atorar, aprender, estoque, aplastar, esternón, apostar, fragata, inmóvil, apestar, formato, apodo, pasear, fractura, pasaje, pasado, apoyo, interés, apretar, consolar, estrechar, párpado
Realiza estas tareas:
Muestra inicialmente la palabra usando la fuente OpenDyslexic y reproduces su sonido.
Después esa palabra la divides en sílabas separadas por un guion y cada sílaba la pones de un color.
A los tres segundos la palabra se pone en negro y aparece en la parte inferior de la pantalla 8 gotas de pintura de colores diferentes.
Pídele al niño que seleccione uno de esos 8 colores y que coloree cada sílaba de un color.
Quiero que haya un botón que permita reproducir el sonido de la palabra sílaba a sílaba y a la vez que se escucha esta se resalta.
Quiero que cuando coloree una palabra aparezca otra y repita el proceso hasta 5 veces, aunque habrá un botón para regresar al menú.
Quiero también que la aplicación permita introducir las palabras que nosotros deseemos.
La aplicación debe funcionar en tablets, ordenadores, móviles con Android e IOs.
Después de colorear cada palabra que se muestren mensajes motivadores acompañados de pequeñas animaciones.
La aplicación debe incluir: botones grandes, alto contraste, posibilidad de activar/desactivar sonidos, funcionamiento tanto con ratón como con pantalla táctil, orientación horizontal y vertical...
Con una interfaz moderna inspirada en aplicaciones actuales.
La aplicación debe parecer un recurso educativo profesional.
Optimiza el prompt para hacerlo mejor y hazme las preguntas que consideres necesarias antes de proceder.
Actúa como un desarrollador experto en aplicaciones educativas, accesibilidad, experiencia de usuario y diseño de recursos digitales para alumnado con necesidades específicas de apoyo educativo, especialmente para niños y niñas de Educación Primaria con dislexia.
Diseña y desarrolla una aplicación web educativa completa en un único archivo HTML, incluyendo en el mismo archivo todo el código HTML, CSS y JavaScript, sin depender de instalaciones, servidores ni configuraciones adicionales.
La aplicación debe tener un aspecto moderno, atractivo, profesional y motivador, inspirado en las aplicaciones educativas actuales, pero evitando una apariencia infantil excesivamente recargada. Debe parecer un recurso educativo profesional que pueda ser utilizado tanto en el aula como en casa.
El objetivo principal de la aplicación es trabajar la conciencia silábica, la segmentación de palabras, la asociación entre sonido y representación escrita y la atención visual, mediante una actividad interactiva de escucha, división en sílabas y coloreado libre de cada una de ellas.
Crea una aplicación web titulada:
La aplicación estará dirigida a alumnado de Educación Primaria con dislexia.
Debe seleccionar aleatoriamente palabras de un banco inicial y desarrollar una secuencia de aprendizaje compuesta por las siguientes fases:
Presentación visual y auditiva de la palabra completa.
División de la palabra en sílabas.
Actividad de coloreado libre de cada sílaba.
Posibilidad de escuchar la palabra sílaba a sílaba.
Mensaje motivador y pequeña animación al completar cada palabra.
Repetición del proceso con nuevas palabras hasta completar una sesión de 5 palabras.
Pantalla final de felicitación y posibilidad de volver a jugar o regresar al menú principal.
La aplicación debe incluir inicialmente las siguientes palabras:
consola
aprobar
estrecho
linterna
intento
atraco
párrafo
forofo
cálculo
digestión
estorbar
inmenso
forestal
apuro
conservar
fórmula
manzano
estrenar
interior
apunte
estrellas
inmortal
atorar
aprender
estoque
aplastar
esternón
apostar
fragata
inmóvil
apestar
formato
apodo
pasear
fractura
pasaje
pasado
apoyo
interés
apretar
consolar
estrechar
párpado
La aplicación debe seleccionar 5 palabras diferentes de forma aleatoria en cada sesión.
No deben repetirse palabras dentro de una misma partida.
Al comenzar cada actividad:
Muestra la palabra completa centrada en la pantalla.
Utiliza preferentemente la tipografía OpenDyslexic.
La palabra debe aparecer con un tamaño grande, muy legible y con alto contraste.
Reproduce automáticamente la pronunciación de la palabra utilizando la Web Speech API.
La voz debe configurarse preferentemente en español de España (es-ES).
Si el dispositivo no dispone de una voz exacta en español de España, selecciona automáticamente la voz en español más adecuada disponible.
La presentación debe resultar tranquila y clara, evitando animaciones excesivas que puedan distraer al alumnado.
Después de la presentación inicial, la palabra debe aparecer dividida correctamente en sílabas.
Por ejemplo:
con-so-la
Cada sílaba debe aparecer visualmente diferenciada mediante un guion.
Inicialmente, cada sílaba debe mostrarse con un color diferente para facilitar la percepción de la segmentación silábica.
La aplicación debe intentar realizar la separación silábica automáticamente para las palabras incluidas en el banco de palabras.
Sin embargo, para garantizar una segmentación correcta, el sistema de gestión de palabras debe permitir que el profesorado introduzca las palabras manualmente con la separación silábica ya indicada mediante guiones.
Por ejemplo:
ma-ri-po-sa
En este caso, la aplicación debe respetar exactamente la separación introducida por el usuario.
Transcurridos aproximadamente 3 segundos, debe producirse una transición clara:
Todas las sílabas pasan a mostrarse en color negro.
Aparecen en la parte inferior de la pantalla 8 gotas o manchas de pintura.
Las 8 gotas deben corresponder siempre a 8 colores fijos, claramente diferenciados y con alto contraste.
El orden y la posición de las gotas deben cambiar aleatoriamente en cada palabra para evitar que el alumnado asocie un color con una posición concreta.
Las gotas deben ser visualmente atractivas y claramente identificables como una paleta de colores.
El funcionamiento debe ser exactamente el siguiente:
El niño pulsa o toca una de las 8 gotas de pintura.
El color seleccionado debe quedar claramente indicado mediante un borde, halo, aumento visual u otro sistema inequívoco.
El niño pulsa o toca una de las sílabas.
La sílaba cambia inmediatamente al color seleccionado.
El niño puede seleccionar otro color en cualquier momento.
Puede recolorear una sílaba tantas veces como quiera.
No existen respuestas correctas o incorrectas.
La actividad debe fomentar la experimentación y evitar mensajes de error o penalizaciones.
La interacción debe funcionar correctamente tanto con:
Ratón.
Pantalla táctil.
Ordenadores.
Tablets.
Teléfonos móviles.
Las sílabas deben tener un área táctil suficientemente grande para facilitar la interacción.
La aplicación debe incluir un botón grande y claramente identificable, por ejemplo:
Al pulsarlo, debe realizarse la siguiente secuencia:
Reproducir automáticamente la primera sílaba.
Mientras se escucha, esa sílaba debe quedar claramente resaltada visualmente.
Al terminar, debe existir una pequeña pausa.
Reproducir la siguiente sílaba y resaltarla.
Repetir el proceso hasta escuchar todas las sílabas.
Al finalizar la secuencia, reproducir automáticamente la palabra completa.
Durante la reproducción de la palabra completa, debe mostrarse un efecto visual discreto que indique que se está escuchando la palabra.
El resaltado debe ser muy evidente, pero no debe dificultar la lectura.
Si el niño pulsa nuevamente el botón mientras existe una reproducción en curso, la aplicación debe detener correctamente la locución anterior antes de iniciar una nueva.
La interfaz debe incluir un botón permanente que permita:
🔊 Activar el sonido.
🔇 Desactivar el sonido.
Cuando el sonido esté desactivado:
No deben reproducirse automáticamente las palabras.
No deben reproducirse las sílabas.
Deben seguir funcionando todos los elementos visuales de la aplicación.
El estado del sonido debe indicarse visualmente de manera clara.
Cuando el niño haya coloreado las sílabas de una palabra, debe aparecer un botón grande, por ejemplo:
Al pulsarlo:
Se muestra un mensaje motivador.
Aparece una pequeña animación positiva.
Después de un breve intervalo, se carga automáticamente la siguiente palabra.
Los mensajes deben variar aleatoriamente. Incluye ejemplos como:
«¡Muy bien!»
«¡Fantástico!»
«¡Lo estás haciendo genial!»
«¡Excelente trabajo!»
«¡Sigue así!»
«¡Eres un campeón!»
«¡Qué bien lo has hecho!»
«¡Cada vez lo haces mejor!»
Las animaciones deben ser breves, suaves y motivadoras, por ejemplo:
Confeti.
Estrellas.
Pequeño trofeo animado.
Caritas sonrientes.
Explosión suave de colores.
Las animaciones no deben provocar sobreestimulación ni dificultar la concentración.
La aplicación debe respetar las preferencias de accesibilidad relacionadas con la reducción de movimiento cuando el dispositivo o navegador las indique.
Cada partida estará compuesta por 5 palabras.
La interfaz debe mostrar claramente el progreso, por ejemplo:
Palabra 2 de 5
o mediante una barra de progreso visual acompañada de información textual.
No deben repetirse palabras durante la misma sesión.
Debe existir siempre un botón claramente visible para:
Al pulsarlo, debe solicitarse confirmación si existe una actividad en curso para evitar pérdidas accidentales del progreso.
Después de completar las 5 palabras, debe aparecer una pantalla final atractiva y motivadora que incluya:
🎉 Un mensaje de felicitación.
🏆 Una pequeña animación de celebración.
El número de palabras completadas.
Botón «Volver a jugar».
Botón «Menú principal».
El botón «Volver a jugar» debe iniciar una nueva sesión seleccionando nuevamente 5 palabras aleatorias.
El botón «Menú principal» debe regresar a la pantalla inicial.
La aplicación debe incluir un apartado específico denominado:
Este apartado debe permitir al profesorado o a la familia:
Permitir introducir nuevas palabras.
Las palabras personalizadas deben introducirse con las sílabas separadas mediante guiones para garantizar una segmentación correcta.
Ejemplo:
ca-mi-se-ta
La aplicación debe interpretar automáticamente cada fragmento separado por un guion como una sílaba independiente.
Debe ser posible modificar una palabra ya existente.
Debe ser posible eliminar palabras añadidas por el usuario.
Antes de eliminar una palabra debe solicitarse confirmación.
Incluye una opción para recuperar el banco de palabras original.
Esta opción debe solicitar confirmación antes de realizar cambios.
Las palabras añadidas o modificadas deben guardarse automáticamente en el navegador mediante localStorage, de manera que permanezcan disponibles al cerrar y volver a abrir la aplicación en el mismo dispositivo y navegador.
La aplicación debe distinguir claramente entre:
Palabras incluidas originalmente.
Palabras añadidas o modificadas por el usuario, si resulta necesario para gestionar correctamente la restauración del banco inicial.
El apartado de gestión debe ser sencillo y adecuado para personas sin conocimientos técnicos.
La aplicación debe incorporar un sistema para separar automáticamente las palabras del banco inicial en sílabas.
La separación debe respetar las reglas ortográficas y silábicas del español en la medida de lo posible.
Es especialmente importante comprobar cuidadosamente la separación de las palabras incluidas en el banco inicial.
No obstante, cuando una palabra haya sido introducida manualmente con guiones, debe respetarse siempre la segmentación proporcionada por el usuario y no intentar modificarla automáticamente.
Antes de entregar el código, verifica específicamente la correcta segmentación silábica de todas las palabras iniciales.
La interfaz debe tener un diseño:
Moderno.
Profesional.
Claro.
Atractivo.
Amigable para niños de Educación Primaria.
No excesivamente infantil.
Libre de elementos visuales innecesarios.
Utiliza:
Botones grandes.
Tipografía grande y muy legible.
Espaciado generoso.
Alto contraste.
Iconos acompañados de texto siempre que sea necesario para mejorar la comprensión.
Sombras suaves y tarjetas modernas.
Transiciones discretas.
Una jerarquía visual clara.
La palabra y las sílabas deben ser siempre el elemento principal de la pantalla.
Utiliza preferentemente OpenDyslexic.
Si no es posible cargar esta tipografía, establece una alternativa adecuada y legible.
Ten en cuenta que la aplicación debe ser un único archivo HTML. Si utilizas recursos externos para cargar la fuente, proporciona una alternativa que permita que la aplicación siga funcionando correctamente.
Prioriza:
Tamaño de letra amplio.
Separación adecuada entre elementos.
Líneas y textos fácilmente distinguibles.
Alto contraste.
Evitar bloques excesivamente densos.
La aplicación debe funcionar correctamente en:
Ordenadores con Windows.
macOS.
Linux.
Chromebook.
Tablets.
Teléfonos móviles Android.
iPhone.
iPad.
Debe adaptarse automáticamente mediante diseño responsive.
Debe funcionar correctamente tanto en:
Orientación vertical.
Orientación horizontal.
La interfaz no debe perder funcionalidades ni ocultar controles importantes al cambiar la orientación.
Aplica buenas prácticas de accesibilidad web:
HTML semántico.
Etiquetas ARIA cuando sean necesarias.
Navegación mediante teclado.
Indicadores claros de foco.
Alto contraste.
Botones con nombres comprensibles.
Áreas táctiles suficientemente grandes.
No depender exclusivamente del color para comunicar información importante.
Compatibilidad razonable con lectores de pantalla.
Respeto por prefers-reduced-motion.
La aplicación debe aspirar al cumplimiento de los principios de WCAG 2.2 AA.
Genera la aplicación en un único archivo HTML autocontenido.
El archivo debe incluir:
HTML.
CSS.
JavaScript.
Evita frameworks y dependencias innecesarias.
La aplicación debe funcionar directamente al abrir el archivo HTML en un navegador moderno.
Utiliza:
Web Speech API para la reproducción de las palabras y sílabas.
localStorage para guardar las palabras personalizadas y las preferencias necesarias, como el estado del sonido.
CSS responsive para la adaptación a diferentes tamaños de pantalla.
JavaScript moderno y organizado.
El código debe estar:
Bien estructurado.
Comentado.
Organizado en funciones claras.
Libre de código de ejemplo incompleto.
Sin secciones del tipo «añade aquí el resto».
Completamente funcional desde la primera entrega.
La aplicación debe disponer, como mínimo, de estas pantallas o estados:
Con:
Título de la aplicación.
Breve explicación.
Botón «Comenzar».
Botón «Gestionar palabras».
Control para activar o desactivar el sonido.
Palabra completa.
Reproducción automática del sonido si está activado.
Palabra dividida en sílabas.
Sílabas inicialmente diferenciadas mediante colores.
Sílabas en negro.
8 gotas de pintura.
Color seleccionado claramente visible.
Botón «Escuchar sílaba a sílaba».
Botón «Palabra terminada».
Indicador de progreso.
Botón para volver al menú.
Mensaje aleatorio.
Pequeña animación.
Transición a la siguiente palabra.
Felicitación.
Animación.
Número de palabras completadas.
Botón «Volver a jugar».
Botón «Menú principal».
Lista de palabras.
Añadir.
Editar.
Eliminar.
Restaurar banco inicial.
Guardado automático.
Antes de entregar el resultado:
Comprueba que todas las palabras iniciales estén incluidas.
Comprueba que se seleccionen 5 palabras diferentes en cada sesión.
Verifica la correcta segmentación silábica de las palabras iniciales.
Comprueba que la reproducción completa y silábica funcione correctamente.
Verifica que el sonido pueda activarse y desactivarse.
Comprueba que una nueva reproducción detenga correctamente la anterior.
Verifica que las 8 gotas aparezcan siempre, pero en posiciones u orden aleatorios.
Comprueba que el niño pueda recolorear una sílaba tantas veces como quiera.
Verifica que la actividad funcione tanto con ratón como con pantalla táctil.
Comprueba la adaptación a móviles, tablets y ordenadores.
Verifica el funcionamiento en orientación vertical y horizontal.
Comprueba que las palabras personalizadas se guarden mediante localStorage.
Verifica que las palabras introducidas con guiones respeten exactamente la segmentación proporcionada.
Comprueba que la restauración del banco inicial funcione correctamente.
Revisa que no existan errores de JavaScript ni botones sin funcionalidad.
Asegúrate de que el resultado sea una aplicación completa y funcional, no una demostración ni un prototipo parcial.
Entrega directamente el código HTML completo, listo para copiar, guardar con extensión .html y abrir en cualquier navegador moderno.
No dividas el código en varios archivos.
No dejes funcionalidades pendientes.
No utilices pseudocódigo.
El resultado final debe ser una aplicación educativa realmente funcional, visualmente cuidada, accesible y profesional.