Tifosi Club — Tifosi Club
Contexto
Tifosi Club opera cinco líneas a la vez —ropa, entradas, eventos, equipaciones universitarias y viajes— y no tenía dónde explicarlas. Toda la operación vivía en Instagram y en una red de RRPP: cada venta dependía de que alguien contestara un mensaje directo, y la información de los tres viajes estaba encerrada en dossieres de agencia que sumaban más de mil páginas, un formato que ningún estudiante iba a abrir.
El encargo no era solo tener presencia. Era construir un sitio que el propio equipo pudiera mantener sin depender de un desarrollador: publicar una fiesta el martes, cerrar una fecha el jueves y apagar una sección entera cuando acaba la temporada.
Resultado Un sitio propio en producción donde el equipo publica eventos, edita toda la portada y activa o desactiva secciones sin tocar una línea de código, con la imagen de cabecera servida a 120 KB en móvil partiendo de un original de 56 MB y el contenido legible incluso con JavaScript desactivado.
- Proyecto
- Tifosi Club
- Cliente
- Tifosi Club
- Año
- Mi papel
- Diseño y desarrollo completos, de la dirección visual al código en producción. Definí el sistema visual a partir de una referencia que aportó el cliente, extrayendo la paleta del propio SVG de su logotipo en lugar de aproximarla, para que la marca nunca desentonara contra el fondo. Construí el tema de WordPress desde cero, sin maquetador ni plantilla de partida: 26 ficheros PHP, hoja de estilo propia y JavaScript sin dependencias. Leí los tres dossieres de viajes y estructuré su información en una página interactiva por destino, sin mezclar datos entre ellos y sin inventar los precios que los PDF no cerraban. Programé dos pantallas de administración a medida: un configurador de eventos con reordenación por arrastre y vista previa en vivo, y un interruptor para activar o desactivar páginas que también las retira del menú y de la portada. Auto-hospedé las tipografías para evitar el CDN de Google Fonts, que transfiere la IP del visitante a un tercero y no cumple el RGPD. Resolví accesibilidad y rendimiento: objetivos táctiles de 44 px, contraste WCAG AA, imágenes responsive en WebP con respaldo JPEG y animaciones replegadas bajo prefers-reduced-motion. Iteré sobre el feedback del cliente y de su socio de viajes, incluida una corrección de fondo cuando detectaron que el precio de los packs de actividades se leía como el precio del viaje.
- Stack
- WordPress (tema a medida, sin maquetador) · PHP 8 · CSS (custom properties, Grid, clamp, container-aware) · JavaScript (sin dependencias) · IntersectionObserver · WP Customizer API · Custom Post Types y metadatos · WP Settings API y admin-post · jQuery UI Sortable · Tipografías auto-hospedadas (WOFF2) · WebP con respaldo JPEG
