Digital Studio

Caso de estudio · Nuestra propia web

Cómo construimos digitalstudio.world: ocho idiomas, sin framework, sin rastrearte

5 min de lecturaWeb + Rendimiento

8

idiomas, correctos desde el primer fotograma

El brief más duro que podíamos escribir

La web de un estudio tiene un único trabajo honesto: demostrar que el estudio sabe hacer el trabajo. Cualquiera puede presumir de oficio en una lista de servicios. Así que tratamos nuestra propia web como un proyecto de cliente con el brief más exigente que hemos escrito - un viaje 3D guiado por el scroll que se sienta premium, pinte en una fracción de segundo, hable ocho idiomas desde el primer fotograma, muestre precios reales y respete al visitante lo bastante como para no rastrearlo.

Este artículo explica la construcción. Como todo en este blog, es real y verificable - la web donde lo está leyendo es la prueba.

Sin framework, a propósito

Cada página de digitalstudio.world es un archivo HTML autónomo. No hay framework, ni bundler, ni router en el cliente. El viaje de la portada - una esfera de partículas que se transforma en ola y luego en galaxia al hacer scroll - corre sobre three.js con una biblioteca de scroll suave, y esa es toda la lista de dependencias.

No es nostalgia: es control. Cuando no se envía nada que no se use, cada milisegundo de carga es nuestro para gastarlo con intención. El pipeline WebGL se adapta al dispositivo: los móviles reciben un campo de partículas más ligero, menor resolución de render y un brillo recortado, para que el mismo viaje siga fluido en un teléfono de gama media. El bucle de animación se detiene al ocultar la pestaña y devuelve su memoria GPU cuando usted se va.

Ocho idiomas sin destello en inglés

La mayoría de las webs multilingües traducen en el navegador: la página carga en inglés, un script despierta y el texto parpadea al español. Para un estudio que vende localización, ese parpadeo es una confesión de derrota.

Lo construimos al revés. La URL es el idioma: /de/, /fr/, /pl/. Un pequeño script de build lee una fuente en inglés y un diccionario por idioma y emite 56 páginas estáticas totalmente localizadas - titulares, metadatos, datos estructurados, incluso la moneda. Un visitante en Polonia ve precios en esloti en el primer fotograma pintado, porque ese fotograma se construyó así antes de salir del servidor.

  • Los enlaces antiguos con ?lang= se redirigen en el edge, antes de que se ejecute código alguno en el navegador.
  • Una preferencia de idioma guardada le lleva a su idioma al llegar - no hay fotograma inglés que parpadee.
  • Las páginas 404 y la página de gracias del brief existen en todos los idiomas.
  • Cada página lleva un clúster hreflang completo y su propia URL canónica, para que cada idioma posicione por sí mismo.

El build se niega a cooperar con los errores: un script guardián examina cada página antes de generar y aborta si una referencia se rompería al copiarse a una carpeta de idioma - nombrando archivo, línea y solución. Rigor mecánico y aburrido - exactamente lo que la localización necesita.

La velocidad como decisión de diseño

Para nosotros la velocidad no es una puntuación de Lighthouse; es un material de diseño. El primer pintado cae entre unos 150 y 400 milisegundos en nuestras mediciones de laboratorio, en las rutas que seguimos, en todos los idiomas - y el desplazamiento acumulado de diseño es exactamente cero, porque precios y etiquetas se renderizan en el HTML en lugar de inyectarse después.

La lista sin glamur que lo hace posible: fuentes auto-alojadas reducidas a lo necesario, assets estáticos con huella en la ruta y caché inmutable de un año, HTML que revalida en cada petición para que un deploy sea visible al instante, y una única función edge pequeña - el formulario del brief - como única pieza móvil de toda la web.

Nota de honestidad: son mediciones de laboratorio, con CPU limitada y cachés fríos. No publicamos cifras de campo por una razón sencilla - recogerlas significaría rastrearle, y no lo hacemos.

Nada le rastrea

Sin analítica. Sin cookies publicitarias. Sin fingerprinting. Lo único que esta web guarda en su dispositivo es su elección de idioma, y el aviso que se lo dice es el único banner que verá aquí. La política de seguridad de contenido está bloqueada a nuestro propio origen - la página se negará a cargar scripts de terceros aunque alguna vez se inyectara uno.

Probamos en el laboratorio en lugar de medir a los visitantes. Nos cuesta datos. Creemos que compra algo más valioso.

Qué gana usted con esto

Todo lo anterior es la misma arquitectura que vendemos. La estructura de búsqueda trilingüe de Doggo Paradiso, el sprint de 21 días de marca a producción de Maison Astral, la ficha de tienda enviada a 175 países de Water Sommelier - todo está hecho de las piezas descritas aquí: páginas static-first, localización correcta desde el primer fotograma y velocidad tratada como parte del diseño.

Nuestra web es la primera pieza de nuestro portfolio. Usted tiene la prueba en las manos.

¿Quiere una web construida así - rápida, multilingüe, respetuosa? El brief solo pide un campo.