Saltar al contenido
Álvaro Maldonado Peña

Cómo está hecha esta web

Rápida, accesible, sin rastreadores y con un buzón antispam.

Qué pasa cuando me escribes

Arrastra los puntos o lanza una nota.

  1. Tu navegador Recibe páginas ya hechas y casi nada de JavaScript. HTML estático · islas de JS · fuentes propias
  2. Cloudflare, cerca de ti Sirve la web, comprueba que no eres un robot y guarda tu nota. Workers · D1 · Turnstile
  3. Mi asistente privado Recoge las notas cada minuto y aparta el spam. Las leo yo. sondeo saliente cada 60 s · sin puertos abiertos
  4. Mi móvil Me avisa. Contesto y la respuesta aparece en tu conversación. notificación push · respuesta por la API

Esta visita, al detalle

Medido ahora, en tu navegador.

Tu navegador no deja medirlo.

Cómo se hizo

Leer cómo se hizo

  1. Un acuerdo antes que el código

    La web, el buzón y mi asistente comparten unas reglas escritas sobre cómo se hablan. Se fijaron antes de empezar y solo se amplían: nada se rompe al crecer.

  2. Tres direcciones de diseño, una elegida

    Se valoraron «la nota en la puerta», «la conversación» y «el estudio editorial». Ganó la nota: escribirme tiene que parecer dejar un papel, no rellenar un formulario.

  3. Dos partes a la vez

    La web y el buzón seguro se hicieron en paralelo, cada uno en su propia copia del proyecto y siguiendo esas reglas. Yo dirigí y decidí.

  4. Revisión de seguridad independiente

    Una revisión de seguridad independiente, sin ver cómo se había hecho, no encontró nada grave; sí algún fallo medio, como una forma de saltarse el límite de envíos con un tipo de dirección de internet (IPv6 El tipo moderno de dirección de internet de un dispositivo; cada casa puede tener muchísimas, por eso los límites se cuentan por bloque.). Se arregló.

  5. Tres auditores de experiencia

    Un experto en diseño, una persona sin perfil técnico y un auditor de accesibilidad y rendimiento. La persona no técnica no sabía en 10 segundos qué ofrezco: ahora la portada lo dice en su primera frase. El experto vio que el envío decía “Doblando…” antes de saber si había llegado: ahora dice “Enviando…” y la nota solo se dobla si llega.

  6. Nada de código suelto

    La web sigue una política de seguridad de contenido Una regla que le dice al navegador qué puede ejecutar la web; si alguien intentara colar código, el navegador no lo ejecutaría. estricta: el navegador solo ejecuta lo que viene de sus propios archivos. Una prueba automática lo comprueba en cada página.

Las decisiones

  • Páginas ya hechas, JavaScript solo donde hace falta

    Cada página llega ya construida, así que se ve al instante aunque la conexión sea mala.

    Detalle técnico
    • Generada con Astro Un generador de webs que entrega páginas ya hechas y solo añade JavaScript donde hace falta. y TypeScript JavaScript con tipos: el ordenador avisa de muchos errores antes de que lleguen a la gente. estricto; CSS propio con los tokens de la identidad, sin frameworks de estilos.
    • Solo hay JavaScript en las islas Trocitos interactivos dentro de una página estática; el resto no carga JavaScript. que lo necesitan: el buzón, «Ahora», el hilo, el cambio de tema y las explicaciones de términos.
    • Fuentes servidas desde el propio dominio (Nunito y Fraunces, con licencia libre) y precargadas.

  • Un buzón que filtra el spam y no pide cuenta

    Cualquiera me escribe sin registrarse, y los robots se quedan fuera sin molestar a las personas.

    Detalle técnico
    • API en Cloudflare Workers Pequeños programas que corren en los servidores de Cloudflare de todo el mundo. con base de datos D1 La base de datos de Cloudflare donde se guardan los mensajes del buzón., en el mismo dominio que la web.
    • Defensas por capas: Turnstile La comprobación antirrobots de Cloudflare, sin acertijos ni cookies de seguimiento. invisible, campo trampa, tiempo mínimo de escritura, límite por IP (guardada solo como hash Una huella irreversible: sirve para reconocer algo repetido sin poder saber qué era.), longitud y enlaces, y puntuación de spam.
    • Quien escribe recibe una clave de hilo para leer la respuesta: sin correo, sin contraseña.

  • Accesible y probada como un producto

    Se usa con teclado, con lector de pantalla y con el texto ampliado, en claro y en oscuro.

    Detalle técnico
    • Objetivo WCAG AA Las pautas internacionales de accesibilidad web; el nivel AA es el que exige la ley en Europa.: contraste comprobado, foco visible, objetivos táctiles de 44 px y respeto a «reducir movimiento».
    • Recorridos clave probados con Playwright Una herramienta que maneja un navegador de verdad para probar una web como lo haría una persona. en móvil y escritorio, y análisis de accesibilidad automático en cada página.
    • Lighthouse La herramienta de Google que puntúa de 0 a 100 la velocidad, accesibilidad, buenas prácticas y SEO de una web. en móvil con 95 o más en rendimiento, accesibilidad, buenas prácticas y SEO Lo que hace que una web aparezca bien en los buscadores como Google. como requisito para publicar.

  • Privacidad desde el diseño

    Sin cookies propias, sin analítica y sin rastreadores. Puedes borrar tu conversación cuando quieras y, si no, se borra a los 12 meses.

    Detalle técnico
    • Política de seguridad de contenido estricta, sin código en línea; la web no llama a terceros salvo a la comprobación antirrobots.
    • Cumple el RGPD El Reglamento General de Protección de Datos de la Unión Europea.; la página de privacidad explica qué se guarda, para qué y cuánto tiempo.

  • Hecha con mi método

    La hice como hago todo: varias partes avanzando a la vez con reglas claras, revisiones independientes y yo dirigiendo y decidiendo. El trabajo en paralelo lo hacen agentes de IA.

    Detalle técnico
    • Una sesión de Claude Code La herramienta de Anthropic con la que se hizo el trabajo en paralelo, directamente sobre el código del proyecto. para la web y otra para la API, en paralelo, cada una en su worktree Una copia de trabajo aparte del mismo proyecto, para que cada parte avance sin pisar las demás..
    • Un contrato de tipos compartido entre web y API, definido antes de empezar.
    • Auditores independientes de UX/UI, de accesibilidad y una persona no técnica revisan cada pantalla hasta que no quedan fallos graves ni medios.

¿Quieres algo hecho así?

Escríbeme Descargar el CV en PDF