Resumen del Proyecto y Rol

Fui responsable del desarrollo del sitio web especial para el gran proyecto de colaboración "Kanjou Discovery Tour" con Kizuna AI, en conmemoración del 100 aniversario de la operación circular de la línea Yamanote de JR East.

El objetivo de este proyecto era promover experiencias reales en las 15 estaciones de la línea Yamanote a través de una campaña de sellos, maximizando la asistencia y el conocimiento del evento. El público objetivo variaba desde los usuarios de la línea Yamanote hasta los fans de Kizuna AI.

En este proyecto, fui responsable de todo el desarrollo frontend (diseño, implementación, pruebas, configuración del entorno).

Pila Tecnológica Adoptada

En este proyecto, seleccionamos la siguiente pila tecnológica, priorizando una experiencia de desarrollo rápida, rendimiento y mantenibilidad.

• Herramienta de compilación: Vite
• Lenguaje: TypeScript (strict mode)
• Estilizado: Sass (SCSS)
• Diseño CSS: Notación BEM (convención de prefijos l-, c-, p-)
• Pruebas: Vitest (pruebas unitarias), Playwright (pruebas E2E)
• Calidad del código: ESLint, Prettier
• Librería: a11y-dialog (implementación de modal accesible)
• Entorno de desarrollo: Docker (docker-compose)

Seleccionamos estas tecnologías para construir un entorno de desarrollo moderno, eficiente y robusto.

Diseño e Implementación que Cuidé Especialmente

1. Animaciones Ricas que Expresan el Mundo del Proyecto

En este proyecto, la implementación de animaciones para sumergir al usuario en el mundo del proyecto era un requisito de máxima prioridad.

• Animación de Apertura: Controlamos con precisión la secuencia de apertura que determina la primera impresión al visitar el sitio, utilizando CSS y TypeScript. Implementamos suavemente el flujo desde la aparición del logo sobre un fondo rosa hasta el despliegue de una superposición blanca, sin comprometer la imagen de marca.
• FV (Primera Vista): Como elemento visual principal para captar la atención del usuario, implementamos una animación en la que un grupo de ilustraciones de Kizuna AI giraba en forma circular. Conscientes del rendimiento, aprovechamos la aceleración GPU mediante la propiedad transform para mantener una representación fluida de 60 fps.
• Experiencia de Desplazamiento: También nos centramos en animaciones vinculadas al desplazamiento. En la sección de concepto, introdujimos un efecto parallax (fondo fijo), y para la visualización en PC, implementamos un desplazamiento inercial, logrando una experiencia de usuario sofisticada y agradable.

2. Arquitectura CSS que Considera la Mantenibilidad y Escalabilidad

Como un sitio de campaña a gran escala, un diseño CSS robusto capaz de soportar futuras actualizaciones y operaciones era esencial.

• Diseño basado en BEM: Para el diseño de SCSS, nos basamos en la notación BEM.
• Convención de prefijos: Introdujimos una convención de prefijos propia, l- (Layout), c- (Component), p- (Project), vinculando los roles de los archivos (`foundation`, core, layout, component, project) con los nombres de las clases.
• Separación de intereses: Este diseño clarificó el alcance de los estilos, previniendo conflictos o rupturas de estilos no deseados, y asegurando una alta mantenibilidad y reusabilidad.

3. Accesibilidad para Todos los Usuarios (a11y)

Como proyecto de JR East, era un requisito indispensable que todos los usuarios pudieran acceder a la información. Nos aseguramos meticulosamente de la accesibilidad web (a11y).

• HTML Semántico: Utilizamos etiquetas HTML adecuadas (main, section, h2, etc.) para clarificar la estructura del documento.
• Modal Accesible: Para el modal que muestra la información del creador, seleccionamos la librería a11y-dialog. Esto permitió un soporte completo para la operación con teclado (cierre con tecla Esc, trampa de enfoque) y la lectura por lectores de pantalla (aria-hidden, role="dialog").
• Consideración del Movimiento: También implementamos la consideración de detectar la configuración del sistema operativo del usuario (prefers-reduced-motion) para suprimir animaciones.

4. Garantía de Calidad y Entorno de Desarrollo

Para entregar un producto de alta calidad de manera estable, también nos enfocamos en la preparación de pruebas y el entorno de desarrollo.

• Automatización de Pruebas: Introdujimos pruebas unitarias con Vitest y pruebas E2E con Playwright (como la verificación de apertura/cierre de modales y transiciones de página), estableciendo un sistema para detectar automáticamente la degradación de funcionalidades.
• Mantenimiento de la Calidad del Código: Implementamos análisis estático y formateadores con ESLint (TypeScript) y Prettier para garantizar la coherencia del código en el desarrollo en equipo.
• Contenerización: El entorno de desarrollo y producción se construyó con contenedores Docker, eliminando problemas causados por diferencias en el entorno de los desarrolladores.

5. Optimización del Rendimiento

Dado que es un sitio con muchas imágenes, la velocidad de visualización afecta directamente la experiencia del usuario. Implementamos la conmutación de imágenes de alta resolución (compatibles con pantallas Retina (2x)) y imágenes normales según el dispositivo, aplicando rigurosamente el atributo srcset a todas las imágenes. Esto redujo las transferencias de datos innecesarias y proporcionó una experiencia visual nítida.