Resumen del Proyecto

Este proyecto consiste en la creación de «K-MUSIC», un portal oficial de información de KDDI para presentar la diversa escena musical de Corea en Japón y apoyar las actividades de los artistas. Fue diseñado como una plataforma que consolida eventos, artículos destacados e información de artistas, dirigida no solo a los fans del K-POP, sino también a un público amplio de la cultura coreana.

En este proyecto, me encargué del desarrollo frontend general y del diseño y construcción de WordPress.

Pila tecnológica utilizada

• CMS: WordPress (Desarrollo de tema personalizado)
• HTML: HTML5
• CSS: CSS3 (destyle.css)
• JavaScript: jQuery, Slick Carousel, Lightbox2
• Otros: Font Awesome, Google Fonts, Google Analytics

Se seleccionaron estas tecnologías para construir un entorno de desarrollo moderno y eficiente que equilibra la operabilidad para el cliente y la conveniencia para el usuario.

Diseño e implementación en los que me enfoqué

Diseño de WordPress que maximiza la flexibilidad y operabilidad del CMS

Este sitio es un portal con frecuentes actualizaciones de información, por lo que se eligió WordPress como CMS. En lugar de simplemente usar un tema existente, desarrollé un tema personalizado dedicado llamado «kmusic» desde cero.

En particular, los contenidos centrales del sitio como «Event», «Feature» y «Artist» fueron diseñados e implementados como «tipos de publicaciones personalizadas». Esto permitió establecer un sistema donde el cliente (encargado de la operación del sitio) puede introducir y actualizar información desde una interfaz de administración intuitiva, sin necesidad de ningún conocimiento de HTML.

Diseño de UI/UX para presentar contenido diverso de manera atractiva

Nos enfocamos en una interfaz de usuario dinámica para que los usuarios puedan encontrar los artículos deseados incluso entre una gran cantidad de información.

• Implementación de Slick Carousel: Se implementaron múltiples carruseles deslizantes en la página de inicio. Utilizando la biblioteca Slick Carousel, logramos una interfaz rica y dinámica para artículos destacados en la primera vista, listas de eventos y presentaciones de artistas.
• Interfaz de usuario interactiva: Utilizando jQuery, se incorporaron interacciones como el menú hamburguesa para la visualización en teléfonos inteligentes y la visualización modal de imágenes con Lightbox2, para proporcionar una experiencia de usuario (UX) fluida.

Consideraciones de rendimiento y accesibilidad

Para garantizar la fiabilidad como sitio multimedia, se implementó teniendo en cuenta los siguientes puntos:

1. HTML Semántico: Para asegurar que la estructura del sitio se transmita correctamente a los motores de búsqueda y tecnologías de asistencia, se utilizaron etiquetas semánticas adecuadas como <header>, <main>, <nav> y <figure>, garantizando la accesibilidad (a11y).
2. Diseño Responsivo: Además de la configuración de viewport, se separaron los estilos en common.css (común) y top.css (específico de la página) para garantizar una completa adaptación responsiva que muestre el diseño óptimo desde dispositivos móviles hasta PC.
3. Optimización de Imágenes: Se utilizaron correctamente los atributos srcset y sizes para garantizar la entrega de la imagen óptima según el tamaño de pantalla del dispositivo. Para la imagen principal de la primera vista, se especificó fetchpriority="high" para mejorar la velocidad de visualización percibida (Core Web Vitals).

Diseño de código considerando la mantenibilidad y escalabilidad

Se priorizó la mantenibilidad del código para poder adaptarse de manera flexible a futuras adiciones de funciones y cambios de diseño. El CSS se diseñó utilizando destyle.css para restablecer las diferencias entre navegadores, y los componentes se estructuraron con nombres de clase genéricos como box_card y btn01. Esto ha permitido mejorar la reutilización de estilos y lograr un desarrollo y mantenimiento eficientes.