Mi primera web

La necesidad

Necesitaba un enlace que compartir en LinkedIn con quienes quisieran saber mejor a qué me dedico. Mi perfil ofrece una primera visión; la web me permite dirigir a las personas interesadas hacia contenidos más específicos. En pocos segundos, quien llegue debe poder orientarse, identificar las distintas opciones y entender dónde ampliar la información.

También he pensado en quienes llegarán más adelante, cuando mis proyectos tengan una historia que contar. Los posibles socios e inversores deben poder entender qué estoy construyendo y seguir su evolución, incluidos los resultados que generen esos proyectos. Por eso he diseñado una estructura capaz de incorporar nuevos contenidos sin tener que rediseñarla cada vez. Las próximas páginas podrán surgir junto con los propios proyectos.

Era la primera vez que creaba una web. Organicé el trabajo con el método que utilizo con mis clientes: requisitos claros, decisiones justificadas y comprobaciones antes de publicar. Claude se encargó del desarrollo; yo definí las reglas, evalué las propuestas y probé las soluciones. Para la parte visual, trabajé sobre la web real, activando y desactivando temas en distintos niveles, y evalué el resultado en mis dos pantallas y en el móvil. Solo publiqué lo que ya había podido ver en una vista previa.

Restricciones

Desde el principio establecí varios límites: alojamiento gratuito, sin base de datos y sin cookies. La accesibilidad según WCAG 2.2 AA y la calidad visual debían ir de la mano. Los contenidos tenían que seguir siendo legibles incluso sin JavaScript y la web debía funcionar bien en iPhone y iPad. Preví ocho idiomas, con árabe de derecha a izquierda y chino simplificado.

Decisiones y alternativas

1. Elección

   La página de inicio parte de un selector 3D de tarjetas. En los ordenadores menos potentes, cambia automáticamente a fichas sencillas, mientras que en el móvil se convierte en una cuadrícula de iconos similar a la de las aplicaciones.

   Alternativas descartadas

   Tarjetas dispuestas en anillo; solo un menú clásico.

   Motivo

   La primera pantalla debe orientar de inmediato y dejar claro cómo continuar. La presentación se adapta al dispositivo para que la navegación siga siendo rápida incluso cuando los recursos disponibles son limitados.

2. Elección

   El formulario de contacto requiere una confirmación por correo electrónico. El mensaje solo me llega cuando la persona que lo envía abre el enlace que recibe.

   Alternativas descartadas

   Dirección de correo publicada en la página; servicio de formularios de pago.

   Motivo

   La confirmación evita que se utilice el formulario para enviar correos a desconocidos en mi nombre. He mantenido los datos en herramientas que controlo.

3. Elección

   He creado mi propio editor en la web de pruebas para actualizar los contenidos, accesible mediante un código recibido por correo electrónico. Cada cambio genera una vista previa que reviso antes de publicarlo.

   Alternativas descartadas

   CMS con base de datos; modificación manual de archivos.

   Motivo

   Puedo actualizar los textos sin tocar el código. La vista previa me permite comprobar el resultado antes de que un cambio se haga público.

4. Elección

   Cada texto se gestiona como un dato independiente del código, con una versión para cada uno de los ocho idiomas. Si falta una traducción o una opción del menú supera el espacio disponible, la generación de la web se detiene.

   Alternativas descartadas

   Textos insertados directamente en las páginas; CMS externo.

   Motivo

   Puedo modificar una frase o añadir un idioma sin tocar el código. Las comprobaciones detectan las traducciones que faltan y las opciones demasiado largas antes de publicar.

5. Elección

   El punto de partida fue una tarjeta de visita negra mate con lámina de oro. La transformé en una tarjeta central negra y pulida, con el icono dorado incrustado y una luz roja que asoma por detrás del borde, como un estuche que se abre. Elegancia, lujo y lujuria fueron las palabras que marcaron el rumbo. Busqué las webs más premiadas, tomé como inspiración la atmósfera de movimiento y luz de ciaoenergy.com sin copiar su diseño y comparé el resultado con una versión de prueba realizada con Lovable. De esa comparación decidí conservar la iluminación roja de fondo. El rojo se mantiene como efecto de luz o indica la página activa, mientras que todos los elementos en los que se puede hacer clic comparten el mismo acabado lacado.

   Alternativas descartadas

   Iconos blancos; oro plano; mármol veteado, probado y descartado; imágenes en las tarjetas; navegación por puntos.

   Motivo

   Quería una identidad visual reconocible incluso antes de empezar a leer. Mantuve la coherencia entre superficies, luz y colores, y asigné a cada elemento una función concreta. Las pruebas me ayudaron a distinguir qué soluciones reforzaban esta dirección y cuáles restaban uniformidad al conjunto.

6. Elección

   Para diseñar la experiencia de uso, consulté Nielsen Norman Group, las directrices de W3C sobre menús y accesibilidad y las recomendaciones sobre carruseles, incluidas las relativas a las flechas situadas debajo de las tarjetas. En las páginas interiores, por ejemplo, las opciones del menú permanecen visibles en el ordenador porque los menús ocultos se utilizan mucho menos.

   Alternativas descartadas

   Decisiones basadas únicamente en el gusto personal.

   Motivo

   Quería respaldar con documentación las decisiones que afectan a la navegación. Utilicé las recomendaciones disponibles para decidir cómo se accede a los contenidos y cómo se interactúa con los elementos de la interfaz.

Resultado

La web está en línea en ocho idiomas. Las comprobaciones automáticas de accesibilidad no detectan errores en ninguna página. Tras la optimización, el peso de la página de inicio con 3D se ha reducido un 57%. Cada modificación activa pruebas automáticas en todas las páginas, incluidas las comprobaciones con los tamaños de pantalla de iPhone y iPad.

Las pruebas no lo cubren todo, y conviene dejarlo claro. He probado manualmente la web en iPhone y iPad. También la he probado con Chrome y Firefox; Safari en Mac no se ha probado de forma sistemática. Algunas pruebas en teléfonos y tabletas se realizan mediante simulación. Por ahora, las traducciones son automáticas; más adelante recurriré a servicios profesionales de traducción.