Resumen y Roles del Proyecto

Es el sitio web oficial de promoción de la exposición retrospectiva más grande hasta la fecha del artista Hajime Sorayama: "SORAYAMA Luz, Transparencia, Reflejo -TOKYO-". Su propósito es expresar el arte de la exposición en la web y difundir información sobre el evento y su atractivo a usuarios objetivo nacionales e internacionales (fans de Hajime Sorayama, amantes del arte y posibles visitantes generales).

En este proyecto, fui responsable del desarrollo frontend en general. Me encargué de forma integral del diseño de la estructura HTML, el diseño CSS, la implementación de interacciones con JavaScript y la optimización del rendimiento.

Tecnologías Adoptadas

• HTML5
• CSS3 (Diseño basado en las convenciones FLOCSS/BEM)
• JavaScript (ES Modules)
• Google Tag Manager (GTM)

Construí un entorno frontend ligero y de fácil mantenimiento, combinando HTML semántico, CSS moderno y JavaScript modularizado, sin depender de un framework específico.

Diseño e Implementación en los que Puse Énfasis

Diseño CSS Considerando Mantenibilidad y Escalabilidad

En este proyecto, apliqué estrictamente las convenciones de FLOCSS (o BEM) como metodología de diseño CSS. Los nombres de las clases se dividieron por responsabilidad de la siguiente manera:

• Proyecto (p-): p-header o p-modal, etc., componentes de UI específicos del proyecto.
• Componente (c-): c-title o c-button, etc., la unidad de UI más pequeña y reutilizable en todo el sitio.
• Maquetación (l-): l-container, etc., componentes que definen la estructura del diseño de la página.

Este diseño permitió evitar conflictos de estilos y crear una base de código robusta que puede responder rápidamente a futuros cambios de diseño o la adición/modificación de componentes.

Diseño UI/UX y Accesibilidad para Mejorar la Experiencia del Usuario

Con el fin de transmitir el universo de la exposición, busqué lograr un equilibrio entre una rica experiencia visual y la usabilidad.

• Animación de Apertura: Implementé una secuencia de apertura que utiliza animaciones CSS para aumentar la expectación al visitar el sitio.
• HTML Semántico: Utilicé apropiadamente etiquetas HTML como <main>, <section>, <nav> para diseñar una estructura legible por máquinas.
• Soporte WAI-ARIA: Aseguré la accesibilidad (a11y) considerando a los usuarios de lectores de pantalla, por ejemplo, configurando aria-label="Abrir menú" en el botón del menú hamburguesa.
• Interacciones: Implementé interfaces de usuario interactivas, como menús hamburguesa y ventanas modales, para organizar y mostrar información compleja, utilizando JavaScript con ES Modules.

Consideraciones de Rendimiento y Optimización de Imágenes

Aunque la calidad visual es primordial para un sitio que maneja obras de arte, no se puede permitir una disminución en la velocidad de visualización debido a esto. Optimicé el rendimiento en los siguientes puntos:

• Imágenes Adaptables: Adopté completamente la etiqueta <picture> para entregar la imagen óptima (imágenes normales e imágenes de alta resolución @2x) según el tamaño de pantalla y la resolución del dispositivo, desde smartphones hasta PCs.
• Optimización de LCP: Para mejorar el LCP (Largest Contentful Paint), que es lo que más afecta la velocidad percibida de la página, especifiqué intencionadamente loading="eager" para las imágenes esenciales en la apertura, fomentando así la carga temprana por parte del navegador.
• Control de Desplazamiento: Para evitar que se mostrara la posición de visualización anterior al recargar la página, utilicé JavaScript en línea para restablecer la posición de desplazamiento a la parte superior de inmediato, controlando que el sitio siempre comenzara desde el estado deseado (apertura).