Eduteka+
Cursos Completo

Fundamentos de HTML y semántica web

Creado por Catalina M.

Tecnología e Informática Publicado en EdutekaLab · términos de origen
DOCX PDF
Me sirvió · 0
Guardar en un portafolio

Cómo fue en el aula

Todavía nadie ha contado cómo le fue con este recurso.

Descripción del Curso

El curso Evaluación de accesibilidad de páginas HTML es un programa orientado a formar a estudiantes para analizar, valorar y mejorar la accesibilidad de contenidos web. A lo largo de las unidades, se abordan principios fundamentales de accesibilidad, conceptos de semántica en HTML, diseño inclusivo y herramientas de evaluación que permiten identificar barreras y proponer soluciones prácticas. La finalidad es desarrollar una mirada crítica y una capacidad operativa para hacer que los sitios web sean utilizables por todas las personas, sin importar sus habilidades, dispositivos o contextos de uso. La Unidad 7, Evaluación de accesibilidad de una página HTML, constituye la unidad final y la culminación del aprendizaje. En esta unidad se evalúa la accesibilidad de una página HTML mediante criterios básicos (navegación por teclado y lectura con lectores de pantalla) y se proponen mejoras concretas en la estructura y el marcado. Objetivo: evaluar la accesibilidad de una página HTML mediante criterios básicos (navegación por teclado y lectura con lectores de pantalla) y proponer mejoras concretas en estructura y marcado. Específicos: identificar barreras de accesibilidad en contenido HTML; utilizar criterios de evaluación simples: navegación por teclado, lectura de pantalla, pruebas de contraste y herramientas de validación; proponer mejoras prácticas y priorizadas para la estructura y marcado del sitio. El curso favorece un desarrollo integral del alumnado, promoviendo pensamiento crítico, responsabilidad digital, capacidad de comunicación y trabajo colaborativo. Se plantean prácticas basadas en casos reales que permiten obtener resultados tangibles para facilitar decisiones de desarrollo web inclusivo. Al finalizar, el estudiantado habrá aprendido a identificar problemas, justificar soluciones y documentar recomendaciones dirigidas a audiencias técnicas y no técnicas.

Competencias

  • Analizar críticamente barreras de accesibilidad en contenidos HTML y evaluar su impacto en la experiencia del usuario.
  • Aplicar criterios básicos de accesibilidad (navegación por teclado, lectura con lectores de pantalla) para evaluar interfaces web.
  • Utilizar herramientas de validación y pruebas de contraste para identificar problemas de accesibilidad.
  • Proponer mejoras prácticas y priorizadas en la estructura y el marcado HTML, con justificación basada en la experiencia del usuario.
  • Comunicar hallazgos y recomendaciones de manera clara y adaptable a audiencias técnicas y no técnicas.
  • Trabajar de forma colaborativa en proyectos de evaluación de accesibilidad y gestionar tareas en equipo.
  • Resolver problemas de accesibilidad en contextos reales y diversos navegadores/dispositivos, manteniendo criterios de ética digital.

Requerimientos

  • Computadora o dispositivo con acceso a Internet y navegador moderno (Chrome, Firefox, Edge o Safari).
  • Editor de código o entorno básico para practicar (opcional, recomendado).
  • Navegador actualizado para pruebas de accesibilidad y compatibilidad.
  • Lectores de pantalla disponibles (NVDA para Windows, VoiceOver para macOS/iOS, TalkBack para Android).
  • Herramientas de validación y evaluación de accesibilidad (p. ej., validadores HTML/WCAG, herramientas como WAVE, Lighthouse, etc.).
  • Conjunto de páginas HTML para practicar evaluación y mejoras, o capacidad para trabajar con proyectos propios.
  • Conexión a Internet estable y disponibilidad para prácticas en diferentes dispositivos y navegadores.

Unidades del Curso

1

Unidad 1: Introducción a HTML y Semántica Web

<p>En esta unidad se introducirá las etiquetas HTML5 de estructura y semántica (header, nav, main, section, article, aside, footer) y su función para organizar el contenido. Se explorarán ejemplos simples y la importancia de una estructura clara para la accesibilidad y la lectura de la página.</p>

Objetivos de Aprendizaje

  • Identificar y describir las etiquetas HTML5 de estructura y semánticas y explicar su función para la organización del contenido.
  • Diferenciar entre el uso de etiquetas semánticas y etiquetas genéricas como div, justificando su elección en distintos contextos.
  • Analizar ejemplos simples de código para distinguir estructuras semánticas de estructuras no semánticas.

Contenidos Temáticos

  1. Tema 1: Qué es HTML5 y el valor de la semántica en el desarrollo web.

  2. Tema 2: Estructura básica de una página HTML (doctype, html, head, body) y metadatos esenciales.

  3. Tema 3: Etiquetas de estructura semántica: header, nav, main, section, article, aside y footer, y sus roles.

  4. Tema 4: Atributos globales básicos (lang, charset, viewport) y su impacto en compatibilidad y diseño adaptable.

Actividades

  • Actividad 1: Exploración guiada de semántica Revisa un fragmento de HTML de ejemplo y señala qué etiquetas estructuran la página.
    • Puntos clave: identificar header, nav, main, y footer; comparar con estructuras no semánticas.
    • Aprendizajes: comprender la función de cada etiqueta y su impacto en accesibilidad.
  • Actividad 2: Esqueleto semántico básico En parejas, crean un boceto de una página con header, nav, main, aside y footer y luego generan el código HTML semántico correspondiente.
    • Puntos clave: elección de etiquetas adecuadas, jerarquía de contenidos, facilidad de navegación.
    • Aprendizajes: aplicar etiquetas semánticas en una estructura real.
  • Actividad 3: Revisión por pares de semántica Intercambio de fragmentos y evaluación de semántica; proponen mejoras con ejemplos de código.
    • Puntos clave: identificar usos inadecuados de div para estructura, proponer reemplazos por etiquetas semánticas cuando corresponde.
    • Aprendizajes: capacidad de justificar cambios y explicar beneficios.

Evaluación

  1. Identificar y explicar las etiquetas de estructura semánticas: header, nav, main, section, article, aside y footer. (Criterio de desempeño).
  2. Explicar cómo la semántica mejora accesibilidad, SEO y experiencia de usuario a través de ejemplos.
  3. Crear una página HTML básica con estructura semántica adecuada (cabecera, navegación, área de contenido, barra lateral y pie de página).
  4. Aplicar y justificar los atributos globales básicos (lang, charset, viewport) en un documento HTML y demostrar consideraciones de accesibilidad básicas.

Duración

2 semanas

2

Unidad 2: Semántica web, accesibilidad y SEO

<p>Esta unidad profundiza en los principios de la semántica web y cómo la elección adecuada de etiquetas mejora la accesibilidad, el SEO y la experiencia del usuario.</p>

Objetivos de Aprendizaje

  • Definir los principios de la semántica web y su impacto en la accesibilidad y el SEO.
  • Ilustrar el uso de landmarks y roles para mejorar la navegación y la lectura de la página.
  • Analizar ejemplos de código para evaluar la semántica y proponer mejoras.

Contenidos Temáticos

  1. Tema 1: Principios de la semántica web: significado, estructura y accesibilidad.

  2. Tema 2: Landmarks y roles de accesibilidad para guiar a usuarios y tecnologías asistivas.

  3. Tema 3: SEO y semántica: cómo las etiquetas semánticas influyen en el rastreo y la experiencia de usuario.

  4. Tema 4: Atributos globales y recursos de accesibilidad: lang, dir, viewport, alt, aria-label.

Actividades

  • Actividad 1: Análisis comparativo de semántica Compara dos fragmentos de HTML: uno semántico y otro con divs para estructuras similares; identifica ventajas y desventajas y propone mejoras.
  • Actividad 2: Práctica de landmarks Reescribe una página con landmarks (header, nav, main, aside, footer) y describe cómo facilita la navegación.
  • Actividad 3: SEO básico y accesibilidad Optimiza un ejemplo para accesibilidad y SEO: usa etiquetas semánticas adecuadas, atributos adecuados y describe por qué.

Evaluación

  1. Explicar principios de semántica y su impacto en accesibilidad y UX.
  2. Demostrar uso correcto de landmarks y roles para facilitar la navegación y lectura.
  3. Analizar fragmentos de código y proponer mejoras que aumenten semántica y accesibilidad.

Duración

2 semanas

3

Unidad 3: Creación de una página HTML básica con etiquetas semánticas

<p>En esta unidad los estudiantes crearán una página HTML básica que represente una estructura típica de sitio: cabecera, navegación, área de contenido principal, barra lateral y pie de página utilizando etiquetas semánticas adecuadas.</p>

Objetivos de Aprendizaje

  • Aplicar correctamente las etiquetas header, nav, main, aside y footer en una página HTML.
  • Construir una jerarquía de contenido clara con títulos y contenido estructurado.
  • Resolver errores comunes de semántica en ejemplos prácticos.

Contenidos Temáticos

  1. Tema 1: Planificación de la estructura de una página con semántica.

  2. Tema 2: Implementación de cabecera y navegación con elementos semánticos.

  3. Tema 3: Área de contenido principal y barra lateral con roles y secciones.

  4. Tema 4: Pie de página, metadatos y accesibilidad básica en una página simple.

Actividades

  • Actividad 1: Construcción de un HTML básico Crea un archivo HTML que contenga una cabecera, navegación, main, aside y footer usando semántica. Incluye títulos y contenido mínimo en cada sección.
  • Actividad 2: Revisión y mejora semántica Revisa un fragmento con divs y reemplázalo por etiquetas semánticas adecuadas, justificando cada cambio.
  • Actividad 3: Presentación de la maqueta Presenta la maqueta al grupo y explica las decisiones semánticas y de accesibilidad con evidencia.

Evaluación

  1. Creación de una página HTML básica con estructura semántica correcta (header, nav, main, aside, footer).
  2. Justificación de las etiquetas utilizadas y su función para la organización y accesibilidad.
  3. Identificación y corrección de errores semánticos en fragmentos de código.

Duración

2 semanas

4

Unidad 4: Atributos globales y recursos de accesibilidad

<p>Esta unidad aborda el uso de atributos globales (lang, charset, viewport) y recursos de accesibilidad para garantizar compatibilidad, diseño adaptable y una experiencia más inclusiva.</p>

Objetivos de Aprendizaje

  • Explicar la función de lang, charset y viewport en un documento HTML y su impacto en usuarios y motores de búsqueda.
  • Aplicar correctamente estos atributos en ejemplos prácticos.
  • Incorporar recursos de accesibilidad (texto alternativo, etiquetas ARIA, enlaces de salto) y justificar su uso.

Contenidos Temáticos

  1. Tema 1: Atributos globales: lang, dir, charset y su influencia en la interpretación y el SEO.

  2. Tema 2: Meta viewport y diseño adaptable: conceptos y ejemplos prácticos.

  3. Tema 3: Accesibilidad: textos alternativos, descripciones, etiquetas ARIA y navegación por teclado.

  4. Tema 4: Prácticas de internacionalización y pruebas básicas de accesibilidad.

Actividades

  • Actividad 1: Corrección de atributos Revisa una página con errores en lang y charset y corrígelos con explicaciones de por qué.
  • Actividad 2: Diseño adaptable Implementa viewport y ajustes básicos para una página de escritorio a móvil, con ejemplos de CSS cuando sea necesario.
  • Actividad 3: Accesibilidad práctica Añade textos alternativos y etiquetas ARIA a elementos interactivos y realiza una pequeña auditoría de accesibilidad.

Evaluación

  1. Demuestra comprensión de los atributos globales y su impacto en compatibilidad y SEO.
  2. Aplica y justifica el uso de lang, charset y viewport en ejemplos prácticos.
  3. Incluye recursos de accesibilidad y evalúa su eficacia mediante criterios básicos.

Duración

2 semanas

5

Unidad 5: Análisis de fragmentos HTML y mejoras semánticas

<p>En esta unidad se analizan fragmentos de código HTML para identificar usos correctos e incorrectos de la semántica y se proponen mejoras prácticas con ejemplos claros.</p>

Objetivos de Aprendizaje

  • Reconocer el uso adecuado de etiquetas semánticas frente a etiquetas genéricas y detectar estructuras ambiguas.
  • Proponer mejoras en fragmentos de código con ejemplos concretos y justificaciones basadas en accesibilidad y SEO.
  • Justificar las mejoras con criterios de buenas prácticas de marcado y usabilidad.

Contenidos Temáticos

  1. Tema 1: Lectura crítica de fragmentos HTML con foco en semántica.

  2. Tema 2: Casos de estudio: estructuras no semánticas y refactorización.

  3. Tema 3: Propuestas de mejora: refactorización de código con etiquetas semánticas.

  4. Tema 4: Validación y herramientas para verificar semántica y accesibilidad.

Actividades

  • Actividad 1: Análisis de Fragmento A Evalúa un fragmento con etiquetas no semánticas y propone cambios; justifica cada modificación.
  • Actividad 2: Análisis de Fragmento B Revisa otro fragmento y propone mejoras para accesibilidad y SEO; presenta código de ejemplo.
  • Actividad 3: Taller de refactorización En grupos, refactorizan un código de ejemplo y presentan before/after y por qué.

Evaluación

  1. Identifica usos correctos e incorrectos de semántica en fragmentos de código.
  2. Propone mejoras prácticas con ejemplos de código que demuestren comprensión de accesibilidad y SEO.
  3. Justifica las mejoras con criterios de buenas prácticas de marcado y usabilidad.

Duración

2 semanas

6

Unidad 6: Maqueta de sitio web con secciones semánticas y navegación coherente

<p>En esta unidad se construye una maqueta de sitio web con secciones semánticas claramente etiquetadas y se crean enlaces de navegación coherentes entre ellas para simular una experiencia de usuario real.</p>

Objetivos de Aprendizaje

  • Diseñar la estructura del sitio con header, nav, main, aside y footer de forma coherente.
  • Crear una navegación entre secciones estableciendo rutas claras (anclas o enlaces entre páginas de la maqueta).
  • Justificar las elecciones semánticas mediante criterios de accesibilidad y usabilidad.

Contenidos Temáticos

  1. Tema 1: Planificación de la maqueta y roles semánticos.

  2. Tema 2: Implementación de la navegación y enlazado entre secciones.

  3. Tema 3: Integración de contenido y estructura de formato.

  4. Tema 4: Revisión de accesibilidad y coherencia del marcado.

Actividades

  • Actividad 1: Construcción de la maqueta Elabora una maqueta estática con cabecera, navegación, main, aside y footer; añade contenido representative y manten una jerarquía semántica.
  • Actividad 2: Enlaces entre secciones Implementa una navegación con enlaces internos para moverse entre secciones principales y prueba la accesibilidad.
  • Actividad 3: Presentación y reflexión Presenta la maqueta al grupo y explica las decisiones semánticas y de accesibilidad con evidencia.

Evaluación

  1. Construcción correcta de la maqueta con cabecera, navegación, main, aside y footer.
  2. Coherencia de navegación y enlazado entre secciones.
  3. Justificación de las elecciones semánticas en términos de accesibilidad y uso real.

Duración

2 semanas

7

Unidad 7: Evaluación de accesibilidad de una página HTML

<p>En la unidad final se evalúa la accesibilidad de una página HTML mediante criterios básicos (navegación por teclado, lectura con lectores de pantalla) y se proponen mejoras concretas en la estructura y el marcado.</p>

Objetivos de Aprendizaje

  • Identificar barreras de accesibilidad en contenido HTML.
  • Utilizar criterios de evaluación simples: navegación por teclado, lectura de pantalla, pruebas de contraste y lectura de herramientas de validación.
  • Proponer mejoras prácticas y priorizadas para la estructura y marcado del sitio.

Contenidos Temáticos

  1. Tema 1: Fundamentos de accesibilidad web (a11y) y criterios básicos.

  2. Tema 2: Pruebas de accesibilidad: navegación por teclado y uso de lectores de pantalla.

  3. Tema 3: Herramientas simples de evaluación y revisión de marcado.

  4. Tema 4: Priorización de mejoras y plan de implementación de accesibilidad.

Actividades

  • Actividad 1: Prueba de accesibilidad Realiza una prueba de navegación por teclado y lectura de pantalla en una página indicada y documenta hallazgos.
  • Actividad 2: Propuesta de mejoras Diseña mejoras específicas de marcado para resolver las barreras detectadas y muestra ejemplos de código.
  • Actividad 3: Presentación de informe de accesibilidad Presenta un informe con hallazgos, prioridades y plan de implementación para mejoras.

Evaluación

  1. Ejecuta pruebas de accesibilidad básicas y documenta resultados (navegación por teclado y lectura de pantalla).
  2. Propone mejoras de marcado y estructura con justificación basada en criterios de accesibilidad.
  3. Demuestra comprensión de principios de accesibilidad y su aplicación práctica.

Duración

2 semanas

Crea tus propios cursos con EdutekaLab

Diseña cursos completos con unidades, objetivos y actividades usando IA.

Comenzar gratis