Caso de estudio · 2024
JM Eventos
Plataforma web de alto rendimiento con arquitectura moderna y optimización SEO avanzada
Visitar proyecto- Cliente
- JM Eventos
- Proyecto
- Plataforma Web Alto Rendimiento
- Entrega
- 2024
Contexto y respuesta
El proyecto, sin adornos.
Completé el desarrollo del sitio web para JM Eventos, una empresa de planificación y logística de eventos en Costa Rica. El objetivo era construir una plataforma digital moderna, visualmente atractiva, con un rendimiento excepcional y optimizada para los motores de búsqueda.
La elección de Astro como framework principal fue deliberada, siguiendo un enfoque de "islas de interactividad". Esto permite construir el sitio principalmente con contenido estático que se carga instantáneamente, e "hidratar" solo los componentes interactivos necesarios con JavaScript.
Para el estilizado, opté por Tailwind CSS con su enfoque utility-first, permitiendo construir un diseño completamente personalizado sin escribir CSS tradicional. La configuración en tailwind.config.mjsfue clave para definir la paleta de colores, tipografías y espaciados del proyecto.
Arquitectura
Tecnología con una función clara.
Cada herramienta se eligió por su aporte al rendimiento, la operación o la capacidad de crecimiento del proyecto.
- 01
Astro
Framework principal con Islands Architecture
- 02
Tailwind CSS
Diseño utility-first personalizado
- 03
GSAP + ScrollTrigger
Animaciones premium y efectos de scroll
- 04
JSON-LD Schemas
Datos estructurados para SEO
- 05
WebP + Lazy Loading
Optimización avanzada de imágenes
- 06
JavaScript Vanilla
Componentes interactivos optimizados
Capacidades
Lo que hace posible.
- 01
Rendimiento Excepcional
Arquitectura de 'islas de interactividad' con carga instantánea de contenido estático
- 02
Arquitectura Modular
Componentes reutilizables y sistema de enrutamiento basado en archivos
- 03
SEO Estructural Avanzado
Schemas JSON-LD dedicados para rich snippets y mejor visibilidad
- 04
Interactividad Premium
Mega-menús, carruseles y efectos de volteo con GSAP
- 05
Optimización de Imágenes
Formato WebP y lazy loading para carga diferida
- 06
Sistema de Diseño Cohesivo
Paleta de colores, tipografías y espaciados consistentes
Construcción
Decisiones detrás del resultado.
Una mirada a las piezas técnicas que sostienen la experiencia y facilitan su mantenimiento.
- 01
src/pages/
Sistema de enrutamiento basado en archivos de Astro. Cada archivo .astro se convierte automáticamente en una página.
- 02
src/components/
Librería de componentes reutilizables como Header.astro, Footer.astro y ServiceCard.astro siguiendo el principio DRY.
- 03
src/layouts/
Layout.astro como plantilla base con head HTML, scripts globales y estructura fundamental compartida.
- 04
src/components/schemas/
Componentes dedicados para schemas JSON-LD específicos por página, optimizando la visibilidad en buscadores.
01
Implementación Técnica Avanzada
Dinamismo y Experiencia de Usuario
Para las animaciones sofisticadas y efectos de scroll, integré GSAP con ScrollTrigger. Se desarrollaron scripts personalizados para componentes clave como el mega-menú, carrusel principal y tarjetas con efecto de volteo, asegurando una navegación intuitiva y atractiva.
Optimización de Rendimiento
Implementé un script de lazy loading para imágenes que no están en la ventana visible. Todas las imágenes fueron convertidas al formato WebP para compresión superior sin pérdida perceptible de calidad, reduciendo drásticamente el tiempo de carga inicial.
SEO Estructural con Schemas JSON-LD
Uno de los aspectos más destacados es la implementación de schemas de datos estructuradosa través de componentes dedicados. Creé schemas específicos para cada tipo de página, proporcionando contexto semántico detallado que puede resultar en rich snippets y mejor visibilidad en buscadores.
Resultado
JM Eventos
Impacto del proyecto
El sitio de JM Eventos junta diseño cuidado, buena velocidad y SEO. Con Astro y las optimizaciones de rendimiento quedó una plataforma rápida que ayuda al negocio a llegar a más clientes.
El siguiente paso