Primero - Recuperación (Conocer/Recordar):

Para que los estudiantes adquieran las habilidades necesarias para alcanzar esta meta de aprendizaje, es posible crear muchas otras actividades. Estos son solo ejemplos de prácticas iniciales. Las actividades más enriquecedoras son aquellas que permiten a los estudiantes aplicar los conocimientos teóricos en casos o problemas reales, como proyectos de programación.

Segundo - Comprensión

En este momento, ya se puede presentar un desafío sencillo, además de ejercicios de práctica que refuercen los conocimientos adquiridos.

Ejemplo de consigna para el desafío:

Instrucciones:

• Deben crear una página web simple siguiendo las normas de estilo HTML y CSS.
• El trabajo se realizará en clase en equipos de dos estudiantes.
• Utilizaremos Visual Studio Code como entorno de desarrollo.

Nota: La consigna debe ser clara y concreta. Se sugiere iniciar con un trabajo guiado en clase. Es deseable proporcionar una captura del resultado esperado o describir detalladamente lo que se espera.

Además de la consigna de trabajo se puede optar por actividades de práctica que refuercen los saberes que están en juego:

Pregunta 1: ¿Por qué es importante utilizar etiquetas semánticas en HTML?

a) Porque hacen que la página web se vea más bonita.

Retroalimentación: Las etiquetas semánticas no tienen relación directa con la apariencia de la página web. Su objetivo principal es mejorar la estructura y accesibilidad del contenido.

b) Porque ayudan a los motores de búsqueda y a los lectores de pantalla a entender mejor la estructura y el contenido de la página.

Retroalimentación: (Correcto) Las etiquetas semánticas proporcionan significado a la estructura del contenido, lo que ayuda tanto a los motores de búsqueda como a los lectores de pantalla a interpretar y navegar el contenido de manera más efectiva.

c) Porque reducen el tamaño del archivo HTML.

Retroalimentación: Las etiquetas semánticas no están diseñadas para reducir el tamaño del archivo HTML. Su propósito es describir claramente la estructura y función del contenido en la página.

d) Porque permiten agregar más colores a la página web.

Retroalimentación: Las etiquetas semánticas no afectan la paleta de colores de una página web. Están destinadas a mejorar la comprensión y accesibilidad del contenido.

Pregunta 2: ¿Cómo contribuye el uso de alt en las imágenes a la accesibilidad web?

a) Hace que las imágenes se carguen más rápido.

Retroalimentación:  El atributo alt no afecta la velocidad de carga de las imágenes. Su propósito es proporcionar descripciones textuales de las imágenes para usuarios con discapacidades visuales.

b) Proporciona descripciones textuales de las imágenes para usuarios con discapacidades visuales.

Retroalimentación: (Correcto) El atributo alt permite que los lectores de pantalla describan las imágenes a los usuarios con discapacidades visuales, mejorando así la accesibilidad de la página web.

c) Mejora la estética de la página web.

Retroalimentación:  El atributo alt no está relacionado con la estética de la página web. Su función es ofrecer una descripción alternativa para las imágenes.

d) Permite que las imágenes se usen con fines comerciales.

Retroalimentación: El atributo alt no tiene impacto en los derechos de uso comercial de las imágenes. Su objetivo es mejorar la accesibilidad proporcionando descripciones textuales.

Tercero - Aplicación

En esta etapa los estudiantes deberán ser capaces de emplear normas de estilo HTML y CSS en la manipulación del DOM para crear sitios web.

Es recomendable continuar con actividades prácticas, se puede optar por continuar con el proyecto anterior o crear uno nuevo.

Una posible presentación de la actividad para presentar a los estudiantes:

• Deben crear una página web interactiva que cumpla con las normas de estilo HTML y CSS, y que incluya manipulación del DOM mediante JavaScript.
• Utilizaremos Visual Studio Code como entorno de desarrollo.

Descripción del Proyecto:

La página web debe incluir los siguientes elementos:

• Estructura semántica (uso de etiquetas <header>, <nav>, <main>, <footer>, etc.).
• Accesibilidad (inclusión de texto alternativo para imágenes, uso de etiquetas aria, etc.).
• Estilo y diseño coherente (uso de rem y em para tamaños de fuente, variables en CSS, indentación consistente).
• Funcionalidad interactiva (uso de JavaScript para manipular el DOM, como cambiar el contenido dinámicamente, responder a eventos del usuario, etc.).

Fases del Proyecto:

Fase 1: Diseño y estructura de la página web (HTML y CSS).
Fase 2: Implementación de funcionalidades interactivas (JavaScript y DOM).
Fase 3: Pruebas y ajustes finales.

Evaluación:

Esta dimensión es por demás importante y sumamente enriquecedora, es una etapa más de aprendizaje, por este motivo se debe fomentar que la evaluación sea lo más horizontal posible, que permita a los estudiantes participar activamente del proceso. Se puede construir o coconstruir una herramienta que permita ordenar las actividades de evaluación, puede ser una rúbrica o una lista de cotejo.

Nota: Debido a lo complejo del tema es posible que algunos estudiantes requieran apoyos, es vital el acompañamiento en estos casos. Algunas sugerencias que pueden apuntalar los procesos de los más rezagados son:

• Disponer de proyectos incompletos dónde se puedan basar en una parte ya realizada para completar lo que falte.
• Preparar video tutoriales que expliquen con mayor detenimiento lo trabajado en clase.

Al igual que en el resto del proceso es recomendable acompañar con actividades que complementen la construcción, en este caso pueden ser códigos incompletos o desordenados.

En muchos formatos y plataformas se pueden realizar, por ejemplo en Crea, se pueden diseñar propuestas de reordenamiento o de completar espacios en blanco.

Debajo se proporciona un ejemplo de ordenamiento de CSS y JS, en este caso se proporciona el Index ordenado, luego ir aumentando la complejidad.

Index:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Manipulación del DOM</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1 id="text">Texto Original</h1>

<button onclick="changeText()">Cambiar Texto</button>

<button onclick="changeColor()">Cambiar Color</button>

<script src="script.js"> </script>

</body>

</html>

Cuarto - Análisis

En esta fase final del proyecto se pretende que los estudiantes analicen criticamente los proyectos web realizados por ellos y/o por sus compañeros, centrándose en la programación y los estilos. El objetivo es identificar fortalezas y áreas de mejora, proporcionando retroalimentación constructiva y realizando mejoras en el código.

Una actividad sugerida es:

Formación de grupos de análisis (testing):

Basicamente consiste en dividir a los estudiantes en equipos de tres o cuatro, cada grupo recibirá los proyectos web realizados por otros equipos para su revisión. Como guia pueden utilizar la herramienta de evaluación previamente diseñada.

Se puede proporcionar una lista de chequeo que ordene el trabajo:

• Estructura del Código:Uso adecuado de etiquetas semánticas.
• Consistencia en la indentación y el estilo del código.
• Manipulación del DOM:Correcta adición, eliminación y modificación de elementos del DOM.
• Manejo de eventos (click, mouseover, etc.).
• Interactividad y Usabilidad:Respuesta del sitio a las acciones del usuario.
• Coherencia y funcionalidad de los scripts.
• Optimización y Rendimiento:Impacto de la manipulación del DOM en el rendimiento de la página.
• Identificación de posibles problemas de rendimiento.

En este punto es deseable solicitar un documento de revisión donde se registren las observaciones de cada equipo.

• Con base en la retroalimentación recibida, los equipos originales mejorarán su código.
• Implementarán sugerencias y realizarán optimizaciones necesarias.
• Presentación de Resultados Mejorados