Curso de HTML5

Lección 1 • HTML5 vs. Versiones Anteriores de HTML

Contrasta HTML5 con HTML 4 y XHTML para aclarar qué cambió y por qué. Establece expectativas para las reglas de sintaxis modernas utilizadas a lo largo del curso.

Lección 2 • Cómo los Navegadores Renderizan las Páginas Web

Explica el ciclo de solicitud-respuesta y la construcción del DOM. Fundamenta toda la autoría HTML posterior en el comportamiento real del navegador.

Lección 3 • Configuración de un Entorno de Desarrollo

Guía a los estudiantes en la instalación de un editor de código y herramientas de desarrollo del navegador. Asegura que cada estudiante tenga un espacio de trabajo funcional antes de escribir código.

Lección 1 • Entidades HTML y Caracteres Especiales

Cubre las referencias de caracteres con nombre y numéricas para símbolos y caracteres reservados. Previene errores de renderizado comunes causados por caracteres sin escapar.

Lección 2 • Elementos de Seccionamiento y Puntos de Referencia

Presenta header, nav, main, article, section, aside y footer. Los estudiantes reestructuran un documento plano en un diseño semánticamente significativo.

Lección 3 • Listas: Ordenadas, Desordenadas y de Descripción

Explica ol, ul, li, dl, dt y dd y cuándo usar cada tipo. Refuerza la elección semántica sobre la preferencia visual.

Lección 4 • Encabezados, Párrafos y Flujo de Texto

Cubre h1–h6, p, br y hr y su impacto en el esquema del documento. Conecta la jerarquía de encabezados adecuada con los resultados de accesibilidad y SEO.

Lección 1 • Hipervínculos y Fundamentos de URL

Explica las URL absolutas vs. relativas, los atributos de anclaje y los destinos de enlace. Permite a los estudiantes conectar correctamente sitios de varias páginas.

Lección 2 • Imágenes y Técnicas Responsivas

Cubre img, texto alternativo, srcset, sizes y el elemento picture. Los estudiantes implementan patrones de cambio de resolución y dirección de arte.

Lección 3 • Figuras y Leyendas

Enseña figure y figcaption para asociar imágenes con texto descriptivo. Refuerza la agrupación semántica introducida en el capítulo anterior.

Lección 4 • Incrustación de Audio y Video

Presenta los elementos audio y video, alternativas de source y track para subtítulos. Los estudiantes incrustan medios accesibles con soporte para múltiples formatos.

Lección 1 • Fundamentos de la Estructura de Tablas

Cubre table, tr, th y td y su orden de anidación requerido. Establece el marcado correcto antes de introducir mejoras de accesibilidad.

Lección 2 • Cuándo No Usar Tablas

Aclara el mal uso de las tablas para diseño y sus consecuencias de accesibilidad. Refuerza la toma de decisiones semánticas establecida en capítulos anteriores.

Lección 3 • Marcado de Tablas Accesible

Presenta los atributos scope, headers e id para compatibilidad con lectores de pantalla. Conecta la semántica de las tablas con el comportamiento de la tecnología asistiva.

Lección 1 • Etiquetas, Conjuntos de Campos y Accesibilidad

Enseña label, fieldset, legend y aria-describedby para formularios accesibles. Asegura que cada control esté asociado programáticamente con su etiqueta.

Lección 2 • Estructura y Envío de Formularios

Cubre los atributos form, action, method y enctype y cómo se envían los datos. Proporciona la base estructural para todas las secciones relacionadas con formularios.

Lección 3 • Tipos de Entrada y Controles Básicos

Presenta text, password, email, number, checkbox, radio y select. Los estudiantes construyen una variedad de controles y entienden sus comportamientos predeterminados.

Lección 4 • Tipos de Entrada y Selectores HTML5

Explora los tipos de entrada date, time, color, range, file y search. Los estudiantes aprovechan la interfaz de usuario nativa del navegador para reducir la necesidad de JavaScript personalizado.

Lección 1 • Pruebas y Auditoría de Accesibilidad

Presenta herramientas automatizadas, pruebas manuales y flujos de trabajo de prueba con lectores de pantalla. Los estudiantes producen un informe de auditoría de accesibilidad para una página de muestra.

Lección 2 • Roles, Estados y Propiedades ARIA

Cubre role, aria-label, aria-labelledby, aria-hidden y regiones activas. Los estudiantes agregan ARIA solo donde la semántica nativa es insuficiente.

Lección 3 • Fundamentos de Accesibilidad Web

Presenta los principios WCAG: perceptible, operable, comprensible, robusto, y sus implicaciones prácticas. Enmarca la accesibilidad como un requisito de diseño, no como una idea tardía.

Lección 4 • Navegación por Teclado y Gestión del Foco

Enseña tabindex, atrapamiento de foco y enlaces de salto de navegación para usuarios de teclado. Los estudiantes verifican la operabilidad completa por teclado de los componentes interactivos.

Lección 1 • API de Geolocalización

Cubre getCurrentPosition, watchPosition y el manejo de errores para datos de ubicación. Los estudiantes construyen una función que muestra las coordenadas del usuario a solicitud.

Lección 2 • Elemento Canvas y Dibujo 2D

Presenta el elemento canvas y su contexto de renderizado 2D para dibujo programático. Los estudiantes dibujan formas, texto e imágenes usando métodos de contexto de JavaScript.

Lección 3 • API de Historial y Navegación de Página Única

Cubre pushState, replaceState y el evento popstate para la gestión de URL. Los estudiantes actualizan la URL del navegador sin recargas completas de página.

Lección 4 • API de Arrastrar y Soltar

Enseña draggable, dragstart, dragover y drop eventos para DnD nativo. Los estudiantes construyen una lista ordenable usando solo eventos de arrastrar y soltar de HTML5.

Lección 1 • Estrategias de Optimización de Imágenes

Cubre la selección de formato, compresión y formatos de nueva generación como WebP y AVIF. Los estudiantes reducen la carga útil de imágenes manteniendo la calidad visual.

Lección 2 • Consideraciones de Seguridad en HTML

Identifica vectores XSS, incrustaciones iframe inseguras y destinos de formulario inseguros. Los estudiantes aplican mitigaciones a nivel HTML para endurecer una aplicación de muestra.

Lección 3 • Carga de Recursos y Ruta Crítica

Explica cómo la ubicación de script, link y meta afecta la velocidad de carga de la página. Los estudiantes reordenan los recursos del documento para minimizar el bloqueo de renderizado.

Lección 4 • Fundamentos de SEO a Través de HTML

Cubre title, meta description, etiquetas Open Graph y marcado de datos estructurados. Los estudiantes agregan metadatos que mejoran la visibilidad en motores de búsqueda y redes sociales.