Skills que aprenderás
Convocatorias
No hay convocatorias abiertas ahora mismo, pero no te pierdas la oportunidad: guarda este curso y te avisamos en cuanto se abra una convocatoria.
Recursos
No hay recursos disponibles todavía para esta convocatoria
Este curso está dirigido a desarrolladores con experiencia sólida en HTML intermedio que desean dominar las decisiones de arquitectura semántica, rendimiento de carga y accesibilidad programática propias de entornos de producción reales. A lo largo de las 8 horas, la persona participante aprenderá a diseñar estructuras documentales complejas justificando cada decisión de marcado, a diagnosticar y corregir problemas de accesibilidad mediante ARIA y jerarquía de encabezados, a optimizar la ruta crítica de renderizado y la carga de scripts de terceros, y a encapsular funcionalidad en Web Components accesibles basados en <template> y Shadow DOM. Como resultado concreto, la persona será capaz de auditar, corregir y publicar documentos HTML de nivel profesional que superen validaciones automáticas de calidad, accesibilidad y rendimiento integradas en un pipeline de integración continua.
preload, prefetch, preconnect, async o defer.<template> y Shadow DOM que encapsule estructura, gestione slots y exponga correctamente roles ARIA al árbol de accesibilidad del documento huésped.Bloque 1 — Arquitectura semántica avanzada y accesibilidad estructural Se estudian los criterios que guían la elección de elementos HTML en documentos de alta complejidad: cómo distribuir las regiones de una página en secciones funcionales coherentes, qué papel desempeña el outline del documento en la navegación asistida y cómo una jerarquía de encabezados incorrecta genera fallos tanto de parseo como de accesibilidad. La parte práctica incluye la corrección de estructuras reales y la verificación del outline resultante con herramientas como HeadingsMap o axe.
Bloque 2 — ARIA avanzado: evaluación crítica y corrección Se analiza el modelo de accesibilidad del navegador para profundizar en el uso correcto de roles, propiedades y estados ARIA. Se trabaja específicamente la detección de antipatrones frecuentes: roles redundantes con la semántica nativa, estados incoherentes con el comportamiento real del componente y conflictos que degradan la experiencia de usuarios de tecnologías asistivas. El bloque incluye ejercicios de auditoría y reescritura justificada de fragmentos de código.
Bloque 3 — Rendimiento de carga: ruta crítica, recursos y scripts
Se examina cómo el navegador construye y prioriza la ruta crítica de renderizado, con foco en la optimización del <head> mediante directivas de recurso (preload, prefetch, preconnect) y en la gestión de scripts de terceros con async y defer. Se practica la medición de impacto real con métricas de Core Web Vitals antes y después de aplicar las optimizaciones, y se evalúan los trade-offs de cada estrategia en escenarios concretos.
Bloque 4 — Web Components: <template>, Shadow DOM y accesibilidad encapsulada
Se introduce la arquitectura de componentes nativos del navegador: el elemento <template> como mecanismo de marcado inerte, Shadow DOM como capa de encapsulación de estructura y estilo, y el sistema de slots para la delegación de contenido desde el documento huésped. Se presta especial atención a los desafíos de accesibilidad que introduce el Shadow DOM —gestión del foco, exposición de roles ARIA al árbol de accesibilidad externo— y se construye un componente completo que los resuelve correctamente.
Bloque 5 — Internacionalización y calidad automatizada en CI
Se abordan los atributos lang, dir y hreflang como mecanismos esenciales para la correcta pronunciación por parte de lectores de pantalla y para el posicionamiento internacional en buscadores, identificando los fallos habituales de implementación. El bloque cierra el curso integrando todo lo aprendido: se configura un pipeline de integración continua con herramientas de análisis estático que validan la estructura y la accesibilidad del HTML de forma automática y bloquean el merge ante errores críticos.
Para aprovechar este curso es necesario haber completado HTML02 o disponer de un nivel equivalente al intermedio de HTML. Esto implica manejar con soltura formularios accesibles, atributos ARIA básicos, elementos semánticos de sección, tablas de datos, multimedia embebida y las principales estrategias de organización de metadatos en <head>. Sin esta base, los bloques de evaluación crítica y arquitectura resultan inaccesibles.