Estado del proyecto: En ejecución
La agencia de viajes "Jornada" está reformulando su sitio web para mejorar la experiencia de sus usuarios. El equipo de desarrollo web de Jornada ha estado trabajando arduamente para asegurar que la refactorización del código sea accesible y siga las mejores prácticas de HTML semántico. Sin embargo, se han encontrado con un problema: la navegación principal del sitio web no es clara y no sigue los estándares de semántica HTML y accesibilidad.
Tu desafío será ayudar al equipo a refactorizar su código HTML para hacerlo más accesible y semántico.
Código base HTML:
<a>
<img class="encabezado__logo--icono" alt="" src="./img/[email protected]" />
</a>
<div class="encabezado__navegacion">
<a class="encabezado__navegacion--elemento" href="">Blog</a>
<a class="encabezado__navegacion--elemento" href="">Paquete de viaje</a>
<a class="encabezado__navegacion--elemento" href="">Contacto</a>
</div>
Espero que eso ayude al equipo de "Jornada" a mejorar la accesibilidad y semántica de su sitio web.
Echa un vistazo a las otras páginas que están allí en Figma ¿Te imaginas llevarlas a la vida como hicimos con la página de inicio? Y lo mejor es que puedes elegir cómo hacerlo: ya sea utilizando solo el HTML, JS y CSS que ya hemos visto, o incluso con ese genial framework que estás deseando explorar.
Utilizar Lighthouse: Es una herramienta de código abierto automatizada que audita páginas web en términos de rendimiento, accesibilidad, prácticas recomendadas, SEO y PWA (aplicaciones web progresivas). Es una herramienta valiosa para los desarrolladores web porque ayuda a identificar problemas que pueden afectar la experiencia del usuario;
Analizar las principales áreas de evaluación de Lighthouse, como:
-
Rendimiento: Mide el tiempo de carga de la página, la interactividad y la estabilidad visual. Las recomendaciones pueden incluir optimización de imágenes, mejora de la eficiencia de la caché y reducción del impacto de terceros;
-
Accesibilidad: Evalúa si la página es accesible para todos los usuarios, incluidos aquellos con discapacidades. Las sugerencias pueden incluir mejorar el contraste de colores o agregar descripciones de texto a las imágenes;
-
Prácticas Recomendadas: Verifica el uso de API y prácticas modernas. Esto puede incluir recomendaciones para usar HTTPS, evitar API obsoletas o asegurarse de que el sitio no utilice bibliotecas de JavaScript con vulnerabilidades conocidas.
✔️ He realizado las mejoras necesarias en la sintáxis y semántica, con el fin de refactorizar el código y darle mayor porcentaje de accesibilidad, mejorar prácticas, rendimiento y SEO (Optimización en Motores de Búsqueda).
✔️ Utilizando la herramienta Lighthouse, logré obtener el siguiente resultado en la página index.
✔️ He desarrollado la página "Blog", realizando la conexión entre la página principal index y viceversa.