Aplicación de Trivia Interactiva Táctil
Desarrollador Frontend
Trivia para pantallas verticales táctiles (kiosk) optimizada para eventos presenciales. Interfaz grande y legible, animaciones suaves y layout estable en resoluciones como 768×1366 y 1080×1920.
Funcionalidades
Pantalla de Inicio Llamativa
Título y subtítulo con tipografías grandes, animación sutil e indicación táctil para comenzar.
Interacción Táctil Completa
Botones y áreas 'tap-friendly' con tamaños generosos y feedback visual inmediato.
Ingreso de Edad con Teclado Numérico
Teclado on-screen de gran tamaño, validación básica y mensajes claros.
Preguntas con Texto o Imágenes
Soporte de layout 2×2 para opciones con imágenes y lista para opciones de texto; siempre legible en vertical.
Feedback en Tiempo Real
Animaciones para acierto/error, mensajes transitorios y transición a la siguiente pregunta.
Pantallas de Resultado y Reinicio
Cierre con mensaje/llamado a la acción y reinicio rápido para el siguiente participante.
Desafíos Técnicos
Problema
Asegurar legibilidad y ergonomía táctil en pantallas verticales grandes; evitar 'overflow' en preguntas con imágenes (4 opciones 2×2) y mantener separación consistente con el logo.
Soportar resoluciones específicas del evento (768×1366) sin que se rompa el diseño y garantizar que la interfaz sea completamente funcional en orientación vertical.
Implementar un sistema de interacción táctil que proporcione feedback inmediato y mantenga la estabilidad del layout durante las transiciones entre pantallas.
Solución
Diseño con CSS Grid/Flex y unidades relativas (vh/vw) combinado con límites y ajustes responsivos para pantallas verticales.
Corrección del espaciado del logo/encabezado y garantía del grid 2×2 para respuestas con imágenes, optimizando para las resoluciones objetivo.
Empaquetado con electron-builder para distribución sencilla y implementación de animaciones suaves que mantienen la estabilidad visual.
Resultados
Resultados destacados del proyecto que demuestran el impacto y la efectividad de la solución implementada.
Aprendizajes y Stack Utilizado
Aprendizajes Clave
- Probar temprano en la resolución real del hardware (p. ej., 768×1366) evita sorpresas
- Uso de unidades relativas y límites para escalar tipografías/espaciados sin romper el layout
- Ergonomía táctil: tamaños mínimos de toque, separación entre elementos y feedback inmediato
- Empaquetado con Electron Builder para entrega sin fricción
- Importancia de considerar la orientación vertical desde el diseño inicial
- Valor de las animaciones suaves para mantener la atención del usuario
- Necesidad de feedback visual inmediato en interfaces táctiles
- Relevancia de probar en el hardware real del evento antes del despliegue