WaterBaby Serres — Escuela de Natación para Bebés y Niños
4 semanas|Diseño y Desarrollo Frontend
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
HTML5CSS3Vanilla JS (ES Modules)GSAP 3ScrollTriggerJSON-LDi18n (EL/EN)Node Test RunnerWCAG 2.2 AASEO
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.
Dos Programas — De Cuatro Meses a Diez AñosLas Cifras que Tranquilizan a una Familia — Edad, Temperatura, Tamaño del GrupoBaby Swimming — Un Programa en el que la Familia Entra al AguaUna Sola URL, Cualquier Idioma — Los Cuatro Niveles, en InglésMaterial y Documentos — Las Preguntas de Antes de Cada Primera ClaseLa Galería — Fotos Dimensionadas por el Momento, No por la CuadrículaEl Visor — Un Elemento Dialog Nativo, Primero el TecladoContacto — Tres Formas de Localizar una Escuela Sin Recepción
Nuestro sitio web ha sido diseñado conforme a las últimas directrices de accesibilidad WCAG 2.2 nivel AA (Web Content Accessibility Guidelines). Esto significa que el sitio web es accesible para todos los usuarios, incluidas las personas con discapacidad.
Funciones de accesibilidad:
Contraste de colores adecuado para una lectura cómoda
Tipografías y tamaños de texto legibles
Navegación completa por teclado
Texto alternativo para todas las imágenes
Estructura clara y HTML semántico
Compatibilidad con lectores de pantalla
Áreas táctiles de tamaño ampliado
Indicadores de enfoque visibles
La accesibilidad es nuestro compromiso con todos los usuarios.
Financiación UE - NextGenerationEU
Financiado por la Unión Europea – NextGenerationEU
Esta empresa está financiada en el marco de la acción «Subvención para Iniciativas Empresariales de Jóvenes Profesionales Autónomos (NEE)» del Servicio Público de Empleo (DYPA), con financiación de la Unión Europea – NextGenerationEU, a través del Mecanismo de Recuperación y Resiliencia «Grecia 2.0».
El Plan Nacional de Recuperación y Resiliencia «Grecia 2.0» apoya a empresas y profesionales en su desarrollo y transformación digital, ofreciendo herramientas financieras para reforzar la competitividad, la innovación y el empleo.
A través de este programa, savage.design obtuvo los recursos necesarios para desarrollar una presencia digital moderna, accesible y funcional que mejora la comunicación con los clientes y la prestación de servicios.
El panel de administración con IA es una interfaz inteligente que le permite gestionar cada aspecto de su sitio web simplemente hablándole. Sin paneles CMS, sin conocimientos técnicos, sin edición manual. Solo dígale a la IA lo que desea y véalo materializarse en tiempo real.
Entorno de pantalla dividida
Converse con su asistente de IA a la izquierda mientras ve los cambios aparecer en directo a la derecha. Alterne entre las vistas de escritorio, tableta y móvil para ver exactamente cómo se ve su sitio en cada dispositivo.
Tres modos de funcionamiento
Preguntar
Haga preguntas sobre su sitio web, obtenga explicaciones y orientación — sin realizar ningún cambio.
Actuar
Indique a la IA que realice cambios. Edite texto, actualice estilos, cambie imágenes, añada secciones — todo revisado en borrador antes de publicar.
Planificar
Solicite un plan de implementación detallado para actualizaciones complejas. La IA lo desglosa en pasos con estimaciones de alcance antes de comenzar.
Qué puede hacer su IA
Editar textos, títulos y contenido de página
Actualizar colores, tipografías y diseño
Reemplazar y gestionar imágenes
Optimización SEO y etiquetas meta
Añadir nuevas secciones y páginas
Gestión de contenido multilingüe
Historial de versiones con restauración en un clic
Separación borrador/producción — revisión antes de publicar
Seguridad de nivel empresarial
Todos los cambios van primero a borrador — nunca directamente a su sitio en producción
Historial completo de versiones con restauración instantánea a cualquier estado anterior
Autenticación multiusuario con acceso basado en roles
Registro de auditoría exhaustivo de cada acción
Elija su plan
Starter
€40
/mes
Impulsado por Claude Haiku 4.5
Ideal para actualizaciones sencillas de contenido, ediciones de texto y cambios de imágenes.
Edición de texto e imágenes
Gestión básica de contenido
Historial de versiones
1 cuenta de usuario
Más popular
Professional
€100
/mes
Impulsado por Claude Sonnet 4.6
Cambios de diseño, nuevas secciones, SEO y creación de contenido.
Todo lo incluido en Starter
Cambios de diseño y maquetación
Optimización SEO
Hasta 3 cuentas de usuario
Enterprise
€250
/mes
Impulsado por Claude Opus 4.6
Funcionalidades complejas, rediseños completos de página, JavaScript personalizado y desarrollo avanzado.
Todo lo incluido en Professional
Desarrollo de funcionalidades multifichero
Código personalizado avanzado
Cuentas de usuario ilimitadas
¿Le interesa el AI Admin Panel? Inclúyalo en su solicitud de presupuesto.