Descripción General

Rock Records es una aplicación web dinámica de varias páginas diseñada para mostrar un catálogo interactivo de música y discos, con un enfoque en la experiencia de usuario (UX) moderna y una comunicación visual clara. Desarrollado individualmente para el curso de Web Dinámica en laUniversitat de Lleida, el proyecto demuestra la integración de frameworks frontend reactivos con bibliotecas de componentes de interfaz de usuario modulares. Mediante Vue.js y Bootstrap-Vue, la plataforma presenta una interfaz responsiva y accesible que obtiene y renderiza dinámicamente los recursos de datos internos a partir de archivos JSON estructurados en múltiples tamaños de pantalla (ordenador, tableta y móvil).

El Desafío

El objetivo del proyecto era diseñar e implementar una aplicación web completa y funcional con entre 3 y 5 subpáginas interconectadas, que cumpliera con los estándares modernos de usabilidad y accesibilidad web (directrices WCAG). Los requisitos técnicos y estructurales clave incluían:
     - Arquitectura del Framework: Creación de una arquitectura reactiva de una o varias páginas utilizando Vue.js para la lógica interactiva de la UI y Bootstrap / Bootstrap-Vue para diseños responsivos.

     - Gestión de Datos: Gestión y carga dinámica del contenido mediante una estructura de datos JSON interna, en lugar de codificar los recursos estáticos de la página.

     - Cumplimiento de UX y Accesibilidad: Implementación de jerarquías visuales claras, flujos de navegación intuitivos y adaptabilidad fluida a múltiples dispositivos, evitando conflictos entre componentes de la interfaz de usuario.

     - Estándares de Producción: Estructuración de una clara separación entre componentes, vistas, plugins y rutas, respaldada por documentación técnica e implementación pública en GitHub Pages.

Nuestro Enfoque

Para cumplir con estos requisitos técnicos, el proceso de desarrollo se organizó en fases de arquitectura modular, priorizando la mantenibilidad del código y la interacción centrada en el usuario:
     - Arquitectura y Estructura de Vistas: Se configuró una jerarquía de carpetas de proyecto clara que separa vistas, componentes, rutas y complementos. Se creó un sistema de navegación de subpáginas que abarca las áreas clave de la plataforma (página principal, vista de catálogo, páginas de detalles y secciones informativas).

     - Implementación de UI/UX y Accesibilidad: Se utilizaron componentes de Bootstrap-Vue para construir diseños de cuadrícula responsivos, barras de navegación interactivas y tarjetas visuales. Las decisiones visuales (colores, tipografía y espaciado) se adaptaron a la temática de la música rock, aplicando las pautas básicas de contraste y legibilidad de WCAG para garantizar una amplia accesibilidad.

     - Enlace Dinámico de Datos: Se creó una capa de datos JSON interna que actúa como una API de catálogo localizada. Se utilizaron patrones de estado reactivo y obtención de datos de Vue.js para renderizar dinámicamente listas de registros, metadatos y atributos multimedia en componentes de plantilla reutilizables.

     - Optimización y Control de Calidad: Se realizaron pruebas en diferentes dispositivos para garantizar una adaptabilidad perfecta del diseño y el comportamiento de los componentes en las distintas dimensiones de pantalla de PC, tabletas y teléfonos inteligentes antes de implementar la versión de producción a través de GitHub Pages.

Galería de Proyectos

Resultados

- Plataforma Web Dinámica y Completamente Funcional: Se implementó con éxito una aplicación web responsiva de varias páginas que combina la lógica de Vue.js con el estilo de Bootstrap-Vue, accesible en vivo a través de GitHub Pages.

- Arquitectura de Frontend Basada en Componentes: Se estableció una base de código modular con vistas desacopladas, bloques de componentes reutilizables y fuentes de datos JSON estructuradas.

- Experiencia de Usuario Optimizada: Se logró un rendimiento consistente en todos los dispositivos, transiciones interactivas fluidas y el cumplimiento de los principios fundamentales de la experiencia de usuario y los criterios de accesibilidad web.