Votación Vallenata
Prototipo interactivo de una plataforma configurable de votación pública para el 60.º Festival de la Leyenda Vallenata, hecho en equipo en la universidad.
- Papel
- Responsable de UX/UI y del prototipo
- Equipo
- Equipo del curso de Desarrollo Web, Areandina
- Fechas
- oct. 2026
- Tecnología
- HTML, CSS y JavaScript, sin dependencias en ejecución ni paso de compilación
- Estado
- Prototipo académico

Contexto
El 60.º Festival de la Leyenda Vallenata se celebra en Valledupar, Colombia, del 28 de abril al 1 de mayo de 2027. El proyecto del curso consistía en analizar, diseñar y prototipar una plataforma de votación pública para el festival. El cliente aún no había definido la mayoría de las reglas de votación, así que nada podía quedar fijo en el código.
Es un prototipo académico, no una web oficial del Festival, y todas las votaciones que aparecen son datos de ejemplo.
El equipo y mi papel
El equipo escribió junto el documento de análisis y diseño. Dirigí la parte de UX/UI y construí el prototipo interactivo que lo acompaña, con el recorrido del votante (pensado primero para el móvil) y un área de administración para ediciones, votaciones, opciones y resultados.
Resultado
Cada votación lleva su propia regla (votos por persona, periodo, visibilidad de resultados y registro), así que la organización puede decidir más adelante sin rehacer nada. Dos votaciones de ejemplo usan reglas distintas a propósito, para que la diferencia se vea en pantalla.
Las reglas de seguridad del análisis están aplicadas, con contraseñas guardadas como hash con sal y un bloqueo de dos minutos tras cinco intentos fallidos. Una auditoría con axe-core (WCAG 2.1 AA) no encontró ninguna infracción en móvil ni en escritorio, y el HTML es válido, sin errores de ESLint.
Qué aprendí
Cuando un cliente todavía no ha decidido las reglas, las reglas pueden convertirse en ajustes. Así el prototipo sigue sirviendo decida lo que decida el Festival, y el equipo tenía algo concreto que enseñar mientras las preguntas al cliente seguían abiertas.
- 0
- fallos de accesibilidad, WCAG 2.1 AA
- 320 px
- ancho mínimo sin desplazamiento lateral
- 0
- dependencias en ejecución