El viaje completo
Esta práctica nació como un ejercicio académico sencillo de HTML y CSS, pero con el paso de las semanas se convirtió en una auténtica travesía creativa y técnica. El objetivo era crear un blog estático navegable, con al menos tres entradas, aplicando los fundamentos de HTML5 y CSS3. El resultado final fue “Bitácora del Comodoro”, un blog con cuatro entradas más esta memoria, cada una con su propio tono, imagen y mensaje, reflejando el proceso completo de aprendizaje y adaptación.
1. El comienzo del viaje
El proyecto se inició en Visual Studio Code, partiendo de una estructura HTML básica y un CSS minimalista. En principio, el objetivo era cumplir con la rúbrica: tres entradas, navegación funcional y un diseño claro. Pero muy pronto la práctica tomó otro rumbo. La idea de limitarse a un “Hola Mundo” no encajaba; había que dotar al trabajo de carácter y coherencia, y así nació la temática de bitácora de navegación, un hilo conductor entre el tono académico y la creatividad personal.
Durante esta fase inicial se probaron distintos enfoques. Se valoró usar un generador de sitios como Jekyll o Gatsby, pero se descartaron conscientemente. Aunque simplifican el despliegue, esconden parte del código y automatizan la estructura, lo cual hubiera ido en contra del propósito formativo: entender de primera mano cómo se conectan las piezas, cómo se comportan las etiquetas y cómo se construye la navegación a mano. La decisión fue pedagógica y técnica: mejor aprender despacio y entender cada capa que delegar el trabajo a una herramienta.
2. Primer rumbo: la estructura
Con el rumbo decidido, se levantó el armazón del sitio. Cada página se construyó con etiquetas semánticas de HTML5 (<header>, <nav>, <main>, <article>, <figure>, <footer>), siguiendo las recomendaciones del W3C. La estructura fue simple pero sólida, pensada para ser entendible y ampliable. La navegación se mantuvo común entre todas las páginas, y se añadieron pequeñas mejoras, como coherencia en títulos y enlaces relativos, para asegurar consistencia.
También se tomó una decisión importante: añadir una cuarta entrada en lugar de las tres requeridas. La intención no era sumar contenido por cantidad, sino crear un ciclo completo: inicio, desarrollo, comunicación y cierre. Este planteamiento dio equilibrio al conjunto y reforzó la narrativa.
3. Segundo rumbo: el diseño
El CSS pasó por varias iteraciones. La primera versión era blanca y funcional, pero resultaba demasiado fría. La segunda añadió tonos suaves y bordes redondeados, buscando equilibrio. La tercera —la definitiva— fue una reinterpretación total: fondo degradado en tonos marinos, paneles gris-azulados y tipografía clara. El objetivo era que el diseño transmitiera profundidad, calma y coherencia, sin perder la legibilidad ni parecer un sitio corporativo.
En este punto se decidió unificar el CSS en un único archivo (style.css), organizado en bloques lógicos: estructura, tipografía, navegación, figuras y responsive design. También se incluyeron pequeñas transiciones en los enlaces y una regla @media para móviles. Sin embargo, se evitó la tentación de incorporar animaciones o efectos avanzados; el objetivo seguía siendo didáctico, no demostrativo.
4. Ajuste de velas: simplificación consciente
Una de las lecciones más valiosas fue la gestión del equilibrio entre “demostrar conocimiento” y “mantener la esencia del ejercicio”. A lo largo del desarrollo surgieron ideas para añadir efectos visuales, animaciones o incluso pequeños scripts, pero se descartaron uno a uno. La práctica debía mantener su naturaleza académica, mostrando dominio técnico sin perder sobriedad. El CSS se depuró varias veces hasta lograr un código limpio, legible y con personalidad.
Esta etapa también trajo una mejora importante: unificar el tono del contenido. Todas las páginas —desde la primera hasta la memoria final— adoptaron un lenguaje coherente, con guiños marineros y humor sutil. Esto convirtió al blog en algo más que una práctica: en un relato técnico con identidad propia.
5. Nuevos puertos: imágenes propias
Las imágenes del blog fueron generadas expresamente para este proyecto, manteniendo un hilo visual y temático. Cada una representa una metáfora: la bitácora como inicio, el ancla como estabilidad, las olas como fluidez, la botella como comunicación y el puerto como cierre. No se recurrió a bancos de imágenes; se prefirió crear material propio para asegurar coherencia estética y originalidad.
Este proceso permitió aplicar criterios de composición, color y luz. Las imágenes fueron diseñadas para integrarse con el fondo del sitio, respetando la misma paleta cromática y reforzando la sensación de unidad visual.
6. Cartas de navegación: metodología y herramientas
Durante el desarrollo se utilizó Visual Studio Code como entorno de trabajo, por su ligereza y la posibilidad de integrar extensiones útiles como Live Server, que permitió validar los cambios en tiempo real. Se realizaron comprobaciones en distintos navegadores (Chrome, Edge y Firefox) para verificar la compatibilidad con HTML5 y CSS3.
En paralelo, se fue construyendo un registro de decisiones: cada cambio de diseño, cada corrección de estructura, cada ajuste visual. Esto ayudó a mantener control sobre el proyecto y a documentar el proceso de manera ordenada, como una bitácora técnica real.
7. Cierre del viaje
El resultado final es un blog sencillo, claro y navegable, que cumple con todos los requisitos de la rúbrica: estructura semántica, navegación funcional, diseño atractivo y documentación. Pero más allá de eso, el proyecto dejó una enseñanza mayor: la importancia de la claridad, la coherencia y la intención detrás de cada línea de código.
La Bitácora del Comodoro se convirtió en algo más que una práctica: fue un ejercicio de reflexión sobre la simplicidad, sobre la artesanía de escribir HTML y CSS a mano, y sobre la belleza de construir algo propio sin depender de automatismos.
El viaje concluye, pero el mar del código siempre ofrece nuevas rutas. Lo importante, como en toda travesía, es mantener el rumbo y disfrutar del viento que empuja las ideas hacia adelante.