Esta web

Quería tener mi propia web… pero ¿cómo?

Después de escuchar hablar durante un tiempo sobre servicios como Hostinger y otros similares, decidí invertir un poco de dinero en mi portafolio profesional y crear otra forma de que empresas y compañeros de trabajo supieran más de mí.

Obtuve una vista previa de un posible sitio web generado por una de estas plataformas, habría costado unos 95 € por dos años, incluyendo el dominio, el correo electrónico y la personalización mediante drag-and-drop.

No era un mal precio, pero les pedí una segunda opinión a Gemini y ChatGPT. El consenso fue que no era un mal trato, pero que podría obtener el mismo resultado por mucho menos si lo construía yo mismo.

¿Así que podía ahorrarme unos cuantos euros y aprender algo nuevo? ¡Pa’lante!

Las tecnologías

Después de investigar un poco, me decidí por el siguiente stack:

• Astro para el desarrollo web
• Tailwind CSS para los estilos
• Cloudflare para DNS
• Vercel para los despliegues automáticos

Con esta configuración, cada cambio que subiera a mi repositorio se desplegaría automáticamente y se serviría en mi propio dominio.

Más adelante, me di cuenta de que el plan gratuito de Vercel podría llegar a ser una limitación. Incluye restricciones en las solicitudes edge y en el ancho de banda. No esperaba alcanzar esos límites con visitantes normales (de los cuales espero… muy pocos), pero un ataque de bots maliciosos podría haber causado problemas. Así que finalmente migré a Cloudflare Workers & Pages, que ofrece esencialmente la misma experiencia pero con más protecciones y un ancho de banda prácticamente ilimitado.

Quiero ser claro: no escribí manualmente el código de cada parte de este sitio web. No soy ingeniero frontend, así que me apoyé en la IA para que me ayudara en el proceso.

Entonces este sitio web son solo un par de prompts… ¿no?

¡No! Para mi desgracia, no fue tan sencillo.

Todo el texto que puedes leer aquí y en cualquier otra parte fue escrito por mí, primero en inglés y luego traducido (con herramientas automáticas, sí) al español, para revisarlo yo mismo más tarde.

En cuanto al código, pasé varias semanas retocando pequeños detalles, proporcionando ejemplos de diseños que me gustaban y dándole forma poco a poco al sitio web hasta convertirlo en lo que puedes ver hoy. En el camino, aprendí un poco de Astro, algo de JavaScript e intenté aprender y seguir las buenas prácticas de desarrollo web.

Aprendiendo sobre experiencia de usuario e intención del usuario

Lanzé la primera versión de este sitio web “friends and family” para poder recopilar primeros comentarios y sugerencias. Aunque esta es mi primera web, me esforcé en hacer que la experiencia de usuario fuera lo más fluida posible.

Algunas de las personas con las que compartí la web eran antiguos compañeros de trabajo, gente de la que esperaba que supiesen moverse por la web sin problema, y accediesen a toda la información sin esfuerzo. Sin embargo, me sorprendió descubrir que este no fue el caso.

En la mayoría de las ocasiones, feedback se reflejó en mejoras en la web, ya que ciertos elementos interactivos no resultaban evidentes o las opciones no eran lo suficientemente claras. Sorprendentemente, los usuarios con un perfil más técnico tenían a veces la peor experiencia. Por otro lado, usuarios sin ninguna formación técnica exploraban cada rincón y detectaban hasta los detalles más minúsculos. ¿Cómo es posible?

Fue entonces cuando empecé a reflexionar sobre la intención del usuario.

Las personas que entran solo para echar un vistazo rápido al sitio no van a hacer clic en todo ni a prestar mucha atención. Por el contrario, quienes estaban dispuestos a ayudarme, terminaban explorando cada página, haciendo clic en cada botón y descubriendo áreas a las que los otros visitantes no llegaban.

En última instancia, entiendo que deber haber un equilibrio. Por un lado, quieres que los visitantes casuales capten la idea principal sin esfuerzo y naveguen con facilidad. Por el otro, no quieres abrumar a los usuarios curiosos con demasiada información ni hacer que la información clave sea difícil de encontrar.

Espero haber alcanzado un buen equilibrio aquí, aunque, como ocurre con muchas otras cosas en la vida, cuanto más aprendes, más te das cuenta de lo mucho que ignoras.

¿Podemos ver el código?

Bueno, podréis en el futuro! Ahora mismo todavía se puede pulir un poco más el proyecto, y revisar que cumpla las mejores prácticas. Haré público el repositorio y añadiré el enlace en el futuro, pinky promise.