Volver al portfolio
WaterBaby Serres — Escuela de Natación para Bebés y Niños

WaterBaby Serres — Escuela de Natación para Bebés y Niños

WaterBaby Serres enseña a bebés desde los cuatro meses y a niños hasta los diez años, en una piscina cubierta climatizada del Elpida Resort. La web tenía que hablarle primero a las familias griegas y después a las visitas en inglés, sin convertirse en dos webs. Así que cada texto visible se escribe dos veces dentro del mismo archivo y el conmutador solo cambia cuál queda oculto: una URL por página, sin recargas, sin fetch, sin un segundo juego de páginas que mantener, y el griego se lee entero con JavaScript desactivado. Seis páginas lo sostienen — inicio, sobre nosotros, los dos programas, galería y contacto — con los cuatro niveles infantiles de principiante a avanzado, el material y los documentos que necesita una familia, y unas preguntas frecuentes. GSAP y ScrollTrigger van alojados en local en vez de en un CDN, y toda animación es aditiva: el CSS no oculta nada de antemano, así que un script que falla deja una página completa y no una en blanco. La animación de entrada de la portada hace bajar una ola una vez por sesión y se retira sola mediante keyframes CSS: no puede dejar a nadie atrapado tras una capa, aunque muera todo el JavaScript. Los datos estructurados cubren los cursos, las preguntas, la galería y las migas de pan; un llms.txt declara los datos verificados para los asistentes de IA y los tests lo amarran a las páginas para que no se separen. Veintiún tests de Node sujetan el conjunto — estructura de páginas, textos en griego, los stubs de redirección, las propiedades de seguridad del loader y el contraste WCAG en cada superficie naranja.

Tecnologías

HTML5 CSS3 Vanilla JS (ES Modules) GSAP 3 ScrollTrigger JSON-LD i18n (EL/EN) Node Test Runner WCAG 2.2 AA SEO

Retos

Una web bilingüe suele significar todo por duplicado — dos juegos de páginas, dos URL, dos ocasiones de actualizar una y olvidar la otra. Aquí la mantiene una sola instructora, así que una segunda copia de cada página era un lastre, no una función. El griego además tenía que ser el idioma por defecto de verdad, legible antes de que se ejecute ningún script, porque el público son familias de la zona. Y los detalles que quiere una escuela de natación — animación de entrada, apariciones al hacer scroll, un visor de fotos — son justo lo que deja una página en blanco cuando un script falla en un móvil con mala cobertura.

Soluciones

Los dos idiomas van en línea dentro de cada archivo y el conmutador solo alterna un atributo hidden: una página que editar, una URL que compartir, nada que sincronizar; la preferencia vive en localStorage y el cambio lanza un evento propio que la galería escucha. Las cadenas que no son texto — aria-labels, placeholders, meta descripciones, incluso el título del documento — se traducen mediante pares de atributos data que gestiona la misma función, para que una página traducida no tenga rincones sin traducir. El movimiento es aditivo por norma y un test lo obliga: el CSS nunca puede ocultar de antemano un elemento animado, así que si GSAP no carga solo se pierde la animación. La capa de entrada sale hidden y solo la revela una clase que añade JavaScript, mientras que su salida es un keyframe CSS con fill-mode forwards: con el script apagado, bloqueado o roto, la capa se retira igual. Las librerías se alojan en local para que una caída de CDN no se lleve el movimiento del sitio, y cada uno de los veintiún tests se verificó rompiendo a propósito aquello que protege.