Resumen y Rol del Proyecto
Este proyecto es un sitio web de campaña especial para albergar el evento de votación de popularidad de la mascota oficial de AutoRace (AutoRace.JP), 'Otomocchi'. Su objetivo principal es el público de fans de AutoRace y de personajes, con el fin de promover la votación, anunciar los resultados y dirigir a los usuarios a campañas de premios relacionadas.
En este proyecto, fui responsable del desarrollo front-end en general. Me encargué de todo, desde el diseño de la información y la implementación de la interfaz de usuario (UI) teniendo en cuenta la experiencia del usuario (UX), hasta asegurar la accesibilidad independientemente del dispositivo.
Pila Tecnológica Adoptada
- HTML5
- CSS3 (incluyendo reset con destyle.css)
- JavaScript
- Google Tag Manager (GTM)
- Google Fonts
- Adobe Fonts (Typekit)
Seleccioné estas tecnologías para construir un entorno de desarrollo moderno y eficiente, capaz de ofrecer expresiones ricas acorde a la imagen de marca, al tiempo que eliminaba las diferencias de visualización entre navegadores.
Diseño e Implementación en los que Puse Énfasis
1. Estructura HTML que Combina Accesibilidad y SEO
Para que los usuarios y los motores de búsqueda pudieran entender correctamente el significado del contenido, implementé un marcado HTML semántico riguroso. Utilicé de forma adecuada etiquetas como <main>, <section>, <h2>, <figure>, <dl> para diseñar una estructura de documento lógica.
Además, asigné el atributo alt apropiado a todas las imágenes, asegurándome de que la información se transmitiera con precisión a los usuarios de lectores de pantalla. Esta es una implementación crucial directamente relacionada con la garantía de accesibilidad (a11y).
2. Diseño Responsivo Optimizado para Dispositivos
Asumí que, debido a la naturaleza de la campaña, la mayoría de los accesos a este sitio web provendrían de smartphones. Por lo tanto, implementé con precisión un diseño responsivo basado en la filosofía 'mobile-first', logrando un diseño y una operatividad óptimos en todos los dispositivos, desde PC hasta smartphones.
Especialmente para la primera vista (FV) y las imágenes principales, utilicé la etiqueta <picture>. Esto permite mostrar imágenes con diferentes resoluciones y relaciones de aspecto según el tamaño de la pantalla, reduciendo la transferencia de datos innecesaria y proporcionando la experiencia visual más hermosa en cada dispositivo.
3. Diseño OGP para Maximizar la Compartición en Redes Sociales
La difusión en redes sociales es indispensable para el éxito de la campaña. Configuraré detalladamente los metadatos de OGP (Open Graph Protocol) y Twitter Cards para que, cuando los usuarios compartan contenido en X (anteriormente Twitter) o Facebook, se muestren el título, la descripción y una imagen atractiva (og:image) deseados. Esto está diseñado para aumentar la tasa de clics en las redes sociales y maximizar el tráfico al sitio.
4. Equilibrio entre Rendimiento del Sitio y Calidad del Diseño
Para no comprometer la experiencia del usuario, también presté atención a la velocidad de carga de la página. Primero, introduje destyle.css para resetear las diferencias de visualización innecesarias entre navegadores y construir una base de estilo consistente. Luego, cargué correctamente fuentes web como Noto Sans JP y Poppins (Google Fonts, Adobe Fonts) para lograr una tipografía altamente legible mientras se mantenía la imagen de marca.
