Caso de estudio · naeon.es

Cómo se hizo esta web

Lo que ves, lo que no ves y por qué te importa.

Esta web es mi carta de presentación. Te cuento cómo está hecha, sin tecnicismos: cada decisión, traducida a lo que gana un negocio.

5escenas, del callejón al jardín
0cookies
0rastreadores
320px: el móvil más pequeño probado
6filtros antispam, 0 captchas
1persona que responde

Empieza

01 / 08
Una historia, no un folleto
Cinco escenas, del callejón oscuro al jardín cuidado: tu parte digital pasa de problema a algo que funciona.
Qué ganas túQue te recuerden. No pareces una plantilla más.
Para curiosos
- Web estática (Astro): HTML de verdad, sin un servidor que se pueda caer.
- Las escenas se pintan en un lienzo (Canvas 2D y WebGL): lluvia, agua, neón y humo.
- Paradas magnéticas: el scroll se detiene donde mejor se lee.
1. 01El callejónEl problema
2. 02El puenteTodo cambia
3. 03El canalTener el control
4. 04La escaleraPaso a paso
5. 05El jardínUn negocio cuidado
02 / 08
Imágenes con dirección de arte
Ilustraciones creadas a medida y dirigidas una a una. Para el móvil, recortes propios: la escalera tiene su versión vertical.
Qué ganas túUna imagen que es tuya. Nada de fotos de banco que ya ha visto todo el mundo.
Para curiosos
- Originales de 2688 px de ancho.
- Cada foto viaja en AVIF o WebP y en varios tamaños: el móvil no descarga la del monitor.
- La escalera vertical se amplió a medida y se encajó al píxel con la horizontal, para que los mismos efectos sirvan en las dos.
Apaisada · monitorVertical · móvil
03 / 08
Funciona aunque falle la animación
Debajo de la animación hay una web completa: textos, fotos y formulario. Si la animación no puede arrancar, se queda esa.
Qué ganas túNo pierdes visitas por un móvil antiguo ni por el modo ahorro.
Para curiosos
- Mejora progresiva: sin JavaScript se lee todo.
- Si una imagen o la animación no cargan, la web se reorganiza sola y deja la versión fija. Comprobado caso a caso.
- Con «reducir movimiento» o ahorro de datos activados, sale directamente la versión fija.
- Capa de efectoslluvia, agua, neón
- Web completatextos, fotos, formulario
Ver la portada sin efectos ↗Con efectos ↗
04 / 08
Para cualquier móvil
Revisada pantalla a pantalla, del móvil más pequeño al monitor grande. Sin encoger la letra para que quepa.
Qué ganas túNo dejas fuera a ningún cliente, tenga el teléfono que tenga.
Para curiosos
- Un medidor propio comprueba en cada parada que ningún texto se sale ni queda tapado.
- Si algo no cabe, se reordena: la lectura nunca se encoge.
- Probada a 320, 360, 375, 390, 412, 430 y 1440 px.
320 px
390 px
430 px
05 / 08
Cuida el móvil de quien te visita
En el móvil, la escena se dibuja 30 veces por segundo y se detiene cuando el formulario la tapa.
Qué ganas túLa web no calienta el teléfono ni se come la batería. La visita se queda a gusto.
Para curiosos
- Antes, hasta 60 dibujos por segundo; ahora 30, y ninguno con el formulario a la vista.
- El desplazamiento se suaviza por tiempo, así que sigue igual de ágil.
- Si el móvil va justo, la escena baja su resolución sola.
- 60dibujos por segundoantes
- 30dibujos por segundoahora, en las escenas
- 0dibujos por segundocon el formulario delante
06 / 08
Privacidad de serie
Sin cookies, sin rastreadores y sin servicios de terceros. Hasta las tipografías se sirven desde la propia web.
Qué ganas túSin banner de cookies que espante, con menos riesgos legales y con más confianza.
Para curiosos
- Política de seguridad estricta (CSP): el navegador solo ejecuta código de naeon.es.
- HTTPS obligatorio y cabeceras de seguridad en cada respuesta.
- El programa del formulario vive fuera de la carpeta pública: desde internet no se puede leer.
0 cookies0 rastreadores0 banners
07 / 08
Un formulario que filtra, no que molesta
Seis filtros invisibles separan clientes de spam. Sin captchas ni semáforos que identificar.
Qué ganas túTe llegan clientes, no anuncios. Lo dudoso te llega igual, pero marcado.
Para curiosos
- Se envía desde una cuenta del propio dominio, autenticada: así es mucho menos probable que acabe en spam.
- El tiempo de rellenado lo mide el navegador: no depende de que su reloj esté en hora.
- Lo apartado como spam se guarda 30 días por si algo merece una segunda mirada. Del visitante solo se guarda una huella de la IP, nunca la IP.
1. 01¿Viene de naeon.es?Lo que llega de otra web, fuera.
2. 02Campo trampaInvisible para personas. Un robot lo rellena y se delata.
3. 03¿Menos de 4 segundos?Sospechoso, pero no basta: autocompletar también es rápido.
4. 04¿Más de 5 en una hora?Frena los envíos en cadena.
5. 05¿Correo o teléfono válidos?Si no hay forma de contestar, no sirve.
6. 06Puntuación del mensajeOfertas de SEO, enlaces, cripto… Lo dudoso llega marcado.
7. ✓Bandeja de entradaSolo clientes. Respondes tú.
08 / 08
Auditada desde fuera
Audito cada trabajo con herramientas externas. Una mirada desde fuera ayuda a pulirlo hasta el último detalle.
Qué ganas túUn trabajo contrastado y pulido al detalle, no solo bonito.
Para curiosos
- Catorce puntos: rendimiento, accesibilidad, seguridad, privacidad, posicionamiento y conversión.
- Cada punto se comprueba antes de actuar, y lo que suma se aplica el mismo día.
auditoría · naeon.es · 14-10-2026
- Formulariofiltra el spam y confirma cada envío
- Móviles desde 320 pxtodo el texto a la vista
- Plan B automáticoversión completa, sin animación
- Navegación con tecladocada atajo, a su sitio
- Enlace compartidotarjeta con imagen propia
- Batería del visitante30 por segundo y reposo