{"id":2754,"date":"2026-08-07T13:22:23","date_gmt":"2026-08-07T11:22:23","guid":{"rendered":"https:\/\/koredesign.studio\/?page_id=2754"},"modified":"2026-08-20T22:35:21","modified_gmt":"2026-08-20T20:35:21","slug":"rock-records","status":"publish","type":"page","link":"https:\/\/koredesign.studio\/es\/rock-records\/","title":{"rendered":"Rock Records"},"content":{"rendered":"
\n\t\t\t\t
\n \n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/a>\n

\n\t\t\t\t\t
\n\t\t\t\t\t

Rock Records - Aplicaci\u00f3n Web de M\u00fasica Din\u00e1mica <\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n
\n \t\t\t

Descripci\u00f3n General<\/h2>\n\t\t\t\t\t

Rock Records<\/strong> es una aplicaci\u00f3n web din\u00e1mica de varias p\u00e1ginas dise\u00f1ada para mostrar un cat\u00e1logo interactivo de m\u00fasica y discos, con un enfoque en la experiencia de usuario (UX) moderna y una comunicaci\u00f3n visual clara. Desarrollado individualmente para el curso de Web Din\u00e1mica en laUniversitat de Lleida<\/em>, el proyecto demuestra la integraci\u00f3n 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\u00e1micamente los recursos de datos internos a partir de archivos JSON estructurados en m\u00faltiples tama\u00f1os de pantalla (ordenador, tableta y m\u00f3vil).<\/p>\n\t\t\t\t\t

El Desaf\u00edo<\/h2>\n\t\t\t\t\t

El objetivo del proyecto era dise\u00f1ar e implementar una aplicaci\u00f3n web completa y funcional con entre 3 y 5 subp\u00e1ginas interconectadas, que cumpliera con los est\u00e1ndares modernos de usabilidad y accesibilidad web (directrices WCAG). Los requisitos t\u00e9cnicos y estructurales clave inclu\u00edan:
     - Arquitectura del Framework:<\/strong> Creaci\u00f3n de una arquitectura reactiva de una o varias p\u00e1ginas utilizando Vue.js<\/strong> para la l\u00f3gica interactiva de la UI y Bootstrap \/ Bootstrap-Vue<\/strong> para dise\u00f1os responsivos.

     - Gesti\u00f3n de Datos:<\/strong> Gesti\u00f3n y carga din\u00e1mica del contenido mediante una estructura de datos JSON interna, en lugar de codificar los recursos est\u00e1ticos de la p\u00e1gina.

     - Cumplimiento de UX y Accesibilidad:<\/strong> Implementaci\u00f3n de jerarqu\u00edas visuales claras, flujos de navegaci\u00f3n intuitivos y adaptabilidad fluida a m\u00faltiples dispositivos, evitando conflictos entre componentes de la interfaz de usuario.

     - Est\u00e1ndares de Producci\u00f3n:<\/strong> Estructuraci\u00f3n de una clara separaci\u00f3n entre componentes, vistas, plugins y rutas, respaldada por documentaci\u00f3n t\u00e9cnica e implementaci\u00f3n p\u00fablica en GitHub Pages.<\/p>\n\t\t\t\t\t

Nuestro Enfoque<\/h2>\n\t\t\t\t\t

Para cumplir con estos requisitos t\u00e9cnicos, el proceso de desarrollo se organiz\u00f3 en fases de arquitectura modular, priorizando la mantenibilidad del c\u00f3digo y la interacci\u00f3n centrada en el usuario:
     - Arquitectura y Estructura de Vistas:<\/strong> Se configur\u00f3 una jerarqu\u00eda de carpetas de proyecto clara que separa vistas, componentes, rutas y complementos. Se cre\u00f3 un sistema de navegaci\u00f3n de subp\u00e1ginas que abarca las \u00e1reas clave de la plataforma (p\u00e1gina principal, vista de cat\u00e1logo, p\u00e1ginas de detalles y secciones informativas).

     - Implementaci\u00f3n de UI\/UX y Accesibilidad:<\/strong> Se utilizaron componentes de Bootstrap-Vue para construir dise\u00f1os de cuadr\u00edcula responsivos, barras de navegaci\u00f3n interactivas y tarjetas visuales. Las decisiones visuales (colores, tipograf\u00eda y espaciado) se adaptaron a la tem\u00e1tica de la m\u00fasica rock, aplicando las pautas b\u00e1sicas de contraste y legibilidad de WCAG para garantizar una amplia accesibilidad.

     - Enlace Din\u00e1mico de Datos:<\/strong> Se cre\u00f3 una capa de datos JSON interna que act\u00faa como una API de cat\u00e1logo localizada. Se utilizaron patrones de estado reactivo y obtenci\u00f3n de datos de Vue.js para renderizar din\u00e1micamente listas de registros, metadatos y atributos multimedia en componentes de plantilla reutilizables.

     - Optimizaci\u00f3n y Control de Calidad:<\/strong> Se realizaron pruebas en diferentes dispositivos para garantizar una adaptabilidad perfecta del dise\u00f1o y el comportamiento de los componentes en las distintas dimensiones de pantalla de PC, tabletas y tel\u00e9fonos inteligentes antes de implementar la versi\u00f3n de producci\u00f3n a trav\u00e9s de GitHub Pages.<\/p>\n\t\t\t\t\t

Galer\u00eda de Proyectos<\/h2>\n\t\t
\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visita la Web<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"\"\/\t<\/a>\t\t\n<\/div>\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visita el Wireframe<\/p>\n\t\t\n<\/a>\n\n<\/div>\n\n<\/div>\n\t\t\t

Resultados<\/h2>\n\t\t\t\t\t

- Plataforma Web Din\u00e1mica y Completamente Funcional:<\/strong> Se implement\u00f3 con \u00e9xito una aplicaci\u00f3n web responsiva de varias p\u00e1ginas que combina la l\u00f3gica de Vue.js con el estilo de Bootstrap-Vue, accesible en vivo a trav\u00e9s de GitHub Pages.

- Arquitectura de Frontend Basada en Componentes:<\/strong> Se estableci\u00f3 una base de c\u00f3digo modular con vistas desacopladas, bloques de componentes reutilizables y fuentes de datos JSON estructuradas.

- Experiencia de Usuario Optimizada:<\/strong> Se logr\u00f3 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.<\/p>\n\t\t\n<\/div>\n

\n
\n
\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

A\u00d1O<\/p>\n\t\t\n<\/div>\n\t\t\t

2023<\/p>\n\t\t\n<\/div>\n

\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

SERVICIOS<\/p>\n\t\t\n<\/div>\n\t\t\t

Desarrollo Web Frontend
Dise\u00f1o y Creaci\u00f3n de Prototipos UX\/UI
Arquitectura e Integraci\u00f3n de Datos<\/p>\n\t\t\t\t\t

HERRAMIENTAS Y TECNOLOG\u00cdA<\/p>\n\t\t

\n
\n \t\t\t

Vue.js<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Bootstrap-Vue<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

JSON<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

HTML5<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

CSS3<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

JavaScript<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Git<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

GitHub<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

VS Code<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Mockup - UI\/UX<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\t\t\t

ETIQUETAS<\/p>\n\t\t

\n
\n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Desarrollo Frontend<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Vue.js<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Bootstrap-Vue<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Dise\u00f1o UX\/UI<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Aplicaci\u00f3n Web Din\u00e1mica<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

\u00bfTe interesa un proyecto similar?<\/p>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tPonte en contacto<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Web Development Rock Records – Dynamic Music Web Application  Overview Rock Records is a dynamic multi-page web application engineered to showcase an interactive music and record catalog with a focus on modern user experience (UX) and clean visual communication. Developed individually for the Dynamic Web subject at the University of Lleida (Universitat de Lleida), the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2754","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/comments?post=2754"}],"version-history":[{"count":43,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2754\/revisions"}],"predecessor-version":[{"id":3014,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2754\/revisions\/3014"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/media?parent=2754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}