Sesión 1: Introducción al Diseño Web y Estructura HTML
Fase de Inicio
Tiempo estimado: 15 minutos
Propósito de la sesión: Conocer la importancia de las páginas web y entender la estructura básica de un documento HTML.
Activación de conocimientos previos:
- Docente: Pregunta inicial: "¿Qué sitios web visitas frecuentemente y qué te gusta de ellos?"
- Estudiantes: Responden en voz alta o levantan la mano para compartir ideas.
Motivación y enganche:
- Docente: Presenta un dato curioso: "¿Sabían que el primer sitio web se creó en 1991 y sólo mostraba texto? Hoy en día, millones de páginas usan HTML y CSS para ser atractivas."
- Estudiantes: Escuchan y reflexionan sobre la evolución de la web.
Contextualización:
- Docente: Explica cómo las páginas web son herramientas que usan para estudiar, comunicarse y entretenerse.
- Estudiantes: Relacionan esta información con su vida diaria y expresan ejemplos.
Fase de Desarrollo
Tiempo estimado: 90 minutos
Presentación del contenido:
Docente: Introduce la estructura básica de un archivo HTML mediante un ejemplo sencillo en pantalla: etiquetas </code>, <code><body></code>.</p>
<p><strong>Actividades de aprendizaje activo:</strong></p>
<ul>
<li>
<strong>Actividad 1: Explorando etiquetas HTML</strong><br/>
<strong>Objetivo:</strong> Comprender la función de etiquetas básicas en HTML.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>El docente muestra un ejemplo de código HTML simple.</li>
<li>Los estudiantes, en parejas, identifican y anotan las etiquetas que encuentran y qué contenido contiene cada una.</li>
<li>Discuten en su grupo para describir qué hace cada etiqueta.</li>
</ul>
<strong>Organización:</strong> Parejas<br/>
<strong>Producto:</strong> Lista escrita de etiquetas y su función.<br/>
<strong>Tiempo:</strong> 30 min<br/>
<strong>Rol del docente:</strong> Circula entre parejas, pregunta "¿Qué contenido encontraste dentro de esta etiqueta?" y guía con ejemplos.</li>
<li>
<strong>Actividad 2: Creando tu primer archivo HTML</strong><br/>
<strong>Objetivo:</strong> Aplicar etiquetas para crear la estructura básica de una página web.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>El docente explica cómo abrir el editor de texto y guardar un archivo con extensión <code>.html</code>.</li>
<li>Los estudiantes escriben el código base con etiquetas vistas y agregan un título y un texto dentro del <code><body></code>.</li>
<li>Guardan y abren el archivo en el navegador para ver su creación.</li>
</ul>
<strong>Organización:</strong> Individual<br/>
<strong>Producto:</strong> Archivo HTML básico visible en el navegador.<br/>
<strong>Tiempo:</strong> 60 min<br/>
<strong>Rol del docente:</strong> Asiste con dificultades técnicas y verifica que el archivo se visualice correctamente.</li>
<li>
<strong>Actividad 3: Discusión y reflexión grupal</strong><br/>
<strong>Objetivo:</strong> Consolidar los conceptos aprendidos y compartir experiencias.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>En plenaria, cada grupo comparte qué etiquetas usaron y cómo vieron su página en el navegador.</li>
<li>El docente plantea: "¿Qué les pareció crear su propia página? ¿Qué fue fácil, qué difícil?"</li>
</ul>
<strong>Organización:</strong> Plenaria<br/>
<strong>Producto:</strong> Participación oral<br/>
<strong>Tiempo:</strong> 15 min<br/>
<strong>Rol del docente:</strong> Facilita la participación y destaca aciertos.</li>
</ul>
<p><strong>Diferenciación:</strong></p>
<ul>
<li>Para estudiantes que terminan antes: se les invita a personalizar el texto con diferentes etiquetas de párrafos y encabezados (ejemplo: <code><h1></code>, <code><p></code>).</li>
<li>Para estudiantes que necesitan apoyo: el docente ofrece plantillas con código base para copiar y completar.</li>
</ul>
<p><strong>Transición:</strong> El docente anuncia que en la siguiente sesión explorarán cómo darle estilo y color a su página usando CSS.</p>
<h4>Fase de Cierre</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<ul>
<li><strong>Síntesis:</strong> Cada estudiante escribe en una hoja tres cosas que aprendió sobre HTML hoy.</li>
<li><strong>Reflexión metacognitiva:</strong>
<ul>
<li>¿Cuál es la función del código HTML en una página web?</li>
<li>¿Qué parte te gustó más al crear tu página?</li>
<li>¿Qué retos encontraste y cómo los solucionaste?</li>
</ul>
</li>
<li><strong>Retroalimentación:</strong> El docente lee algunas respuestas y brinda comentarios positivos y sugerencias.</li>
<li><strong>Transferencia:</strong> Se invita a que los estudiantes observen páginas web que visitan y reconozcan etiquetas HTML usando extensiones o herramientas simples.</li>
<li><strong>Tarea:</strong> Investigar en casa algún sitio web que les guste y anotar qué contenido tiene (texto, imágenes, enlaces).</li>
</ul>
<h3>Sesión 2: Introducción a CSS y Estilos Básicos para Páginas Web</h3>
<h4>Fase de Inicio</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<p><strong>Propósito de la sesión:</strong> Comprender qué es CSS y cómo se usa para darle estilo a una página web.</p>
<p><strong>Activación de conocimientos previos:</strong></p>
<ul>
<li><strong>Docente:</strong> Pregunta: "¿Cómo cambiarías el color o tamaño de las letras en un texto? ¿Han hecho esto antes en algún programa?"</li>
<li><strong>Estudiantes:</strong> Responden y comparten experiencias.</li>
</ul>
<p><strong>Motivación y enganche:</strong></p>
<ul>
<li><strong>Docente:</strong> Muestra dos versiones de una misma página web: una sin estilo y otra con colores y fuentes atractivas.</li>
<li><strong>Estudiantes:</strong> Observan y comentan cuál prefieren y por qué.</li>
</ul>
<p><strong>Contextualización:</strong></p>
<ul>
<li><strong>Docente:</strong> Explica que CSS es el lenguaje que permite agregar color, tipografía y diseño a las páginas web para hacerlas más bonitas y fáciles de usar.</li>
<li><strong>Estudiantes:</strong> Relacionan esto con aplicaciones o juegos que usan interfaces atractivas.</li>
</ul>
<h4>Fase de Desarrollo</h4>
<strong>Tiempo estimado:</strong> 90 minutos
<p><strong>Presentación del contenido:</strong></p>
<p><strong>Docente:</strong> Explica conceptos básicos de CSS: selectores, propiedades y valores. Muestra ejemplos simples como cambiar el color de fondo, texto y tamaño de fuente.</p>
<p><strong>Actividades de aprendizaje activo:</strong></p>
<ul>
<li>
<strong>Actividad 1: Experimentando con estilos CSS</strong><br/>
<strong>Objetivo:</strong> Aplicar estilos sencillos a una página HTML.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>El docente entrega un archivo HTML base sin estilos.</li>
<li>Los estudiantes, en parejas, agregan código CSS dentro de la etiqueta <code><style></code> o en archivo externo para cambiar color de fondo, color de texto y tamaño de fuente.</li>
<li>Prueban y observan cómo cambian los estilos en el navegador.</li>
</ul>
<strong>Organización:</strong> Parejas<br/>
<strong>Producto:</strong> Archivo HTML con estilos CSS aplicados.<br/>
<strong>Tiempo:</strong> 45 min<br/>
<strong>Rol del docente:</strong> Apoya en la sintaxis de CSS y su integración en HTML.</li>
<li>
<strong>Actividad 2: Creación de un menú de navegación simple</strong><br/>
<strong>Objetivo:</strong> Diseñar y dar estilo a un menú con enlaces usando HTML y CSS.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>El docente explica cómo usar etiquetas <code><nav></code> y <code><a></code> para enlaces.</li>
<li>Los estudiantes crean un menú con al menos tres enlaces y aplican estilos para cambiar colores y disposición horizontal.</li>
</ul>
<strong>Organización:</strong> Individual<br/>
<strong>Producto:</strong> Menú de navegación visible y estilizado.<br/>
<strong>Tiempo:</strong> 45 min<br/>
<strong>Rol del docente:</strong> Proporciona ejemplos y corrige errores.</li>
</ul>
<p><strong>Diferenciación:</strong></p>
<ul>
<li>Para estudiantes avanzados: se les invita a investigar y usar propiedades CSS adicionales como bordes o márgenes.</li>
<li>Para quienes requieran apoyo: se da un archivo modelo para modificar y entender los cambios.</li>
</ul>
<p><strong>Transición:</strong> El docente menciona que en la próxima sesión incorporarán imágenes y multimedia para enriquecer sus páginas.</p>
<h4>Fase de Cierre</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<ul>
<li><strong>Síntesis:</strong> Los estudiantes completan un organizador gráfico con las etiquetas HTML usadas y las propiedades CSS aplicadas.</li>
<li><strong>Reflexión metacognitiva:</strong>
<ul>
<li>¿Cómo hace CSS que una página web sea más atractiva?</li>
<li>¿Qué propiedades CSS aprendiste hoy?</li>
<li>¿Cómo aplicarías estos estilos en una página real?</li>
</ul>
</li>
<li><strong>Retroalimentación:</strong> El docente revisa los archivos y ofrece comentarios en clase.</li>
<li><strong>Transferencia:</strong> Se invita a explorar sitios web e identificar elementos de diseño.</li>
<li><strong>Tarea:</strong> Practicar agregando estilos a un archivo HTML personal y traerlo para compartir.</li>
</ul>
<h3>Sesión 3: Integración de Imágenes y Multimedia en Páginas Web</h3>
<h4>Fase de Inicio</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<p><strong>Propósito de la sesión:</strong> Aprender a incluir imágenes y videos en una página web para hacerla más dinámica.</p>
<p><strong>Activación de conocimientos previos:</strong></p>
<ul>
<li><strong>Docente:</strong> Pregunta: "¿Han visto videos o imágenes en sitios web? ¿Cómo creen que se agregan ahí?"</li>
<li><strong>Estudiantes:</strong> Responden y expresan ideas.</li>
</ul>
<p><strong>Motivación y enganche:</strong></p>
<ul>
<li><strong>Docente:</strong> Muestra una página con y sin imágenes para que comparen el impacto visual.</li>
<li><strong>Estudiantes:</strong> Comentan cuál prefieren y por qué.</li>
</ul>
<p><strong>Contextualización:</strong></p>
<ul>
<li><strong>Docente:</strong> Explica que imágenes y videos ayudan a comunicar ideas mejor y atraen a los visitantes.</li>
<li><strong>Estudiantes:</strong> Piensan en ejemplos donde han visto esto.</li>
</ul>
<h4>Fase de Desarrollo</h4>
<strong>Tiempo estimado:</strong> 90 minutos
<p><strong>Presentación del contenido:</strong></p>
<p><strong>Docente:</strong> Explica la etiqueta <code><img></code>, sus atributos básicos (src, alt, width, height) y cómo insertar un video con <code><video></code> o enlaces a multimedia.</p>
<p><strong>Actividades de aprendizaje activo:</strong></p>
<ul>
<li>
<strong>Actividad 1: Insertando imágenes en la página</strong><br/>
<strong>Objetivo:</strong> Añadir imágenes correctamente en HTML con atributos adecuados.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>El docente proporciona una carpeta con imágenes para usar.</li>
<li>Los estudiantes, individualmente, agregan imágenes a su archivo HTML y ajustan tamaño y texto alternativo.</li>
<li>Revisan en navegador el resultado.</li>
</ul>
<strong>Organización:</strong> Individual<br/>
<strong>Producto:</strong> Página web con imágenes visibles y accesibles.<br/>
<strong>Tiempo:</strong> 45 min<br/>
<strong>Rol del docente:</strong> Apoya en la ubicación correcta de archivos y sintaxis.</li>
<li>
<strong>Actividad 2: Agregando contenido multimedia</strong><br/>
<strong>Objetivo:</strong> Incorporar videos o enlaces multimedia para enriquecer la página.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>El docente muestra cómo insertar un video local o un enlace de video en línea.</li>
<li>Los estudiantes agregan un video o enlace multimedia a su página y prueban su funcionamiento.</li>
</ul>
<strong>Organización:</strong> Parejas<br/>
<strong>Producto:</strong> Página con video o multimedia integrado.<br/>
<strong>Tiempo:</strong> 45 min<br/>
<strong>Rol del docente:</strong> Supervisa el funcionamiento y explica soluciones a problemas comunes.</li>
</ul>
<p><strong>Diferenciación:</strong></p>
<ul>
<li>Para quienes avanzan rápido: se les propone crear una galería simple de imágenes con CSS.</li>
<li>Para apoyo adicional: el docente entrega ejemplos listos para modificar y probar.</li>
</ul>
<p><strong>Transición:</strong> El docente anuncia que la próxima sesión se dedicará a organizar y diseñar el contenido para que sea fácil de usar.</p>
<h4>Fase de Cierre</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<ul>
<li><strong>Síntesis:</strong> Elaboración de un mapa mental colectivo en la pizarra con los elementos multimedia aprendidos.</li>
<li><strong>Reflexión metacognitiva:</strong>
<ul>
<li>¿Qué etiquetas usaste para agregar imágenes y videos?</li>
<li>¿Por qué es importante el texto alternativo en imágenes?</li>
<li>¿Cómo mejora la experiencia del usuario el contenido multimedia?</li>
</ul>
</li>
<li><strong>Retroalimentación:</strong> Comentarios y correcciones en clase, reconocimiento de buenas prácticas.</li>
<li><strong>Transferencia:</strong> Se invita a observar cómo usan multimedia sus sitios favoritos.</li>
<li><strong>Tarea:</strong> Preparar imágenes o videos propios para usarlos en su proyecto final.</li>
</ul>
<h3>Sesión 4: Diseño y Maquetación con CSS – Posicionamiento y Colores</h3>
<h4>Fase de Inicio</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<p><strong>Propósito de la sesión:</strong> Aprender a organizar visualmente los elementos en la página con CSS para mejorar la experiencia de usuario.</p>
<p><strong>Activación de conocimientos previos:</strong></p>
<ul>
<li><strong>Docente:</strong> Pregunta: "¿Han visto páginas con menús al costado, encabezados de colores o secciones bien definidas?"</li>
<li><strong>Estudiantes:</strong> Comparten observaciones y ejemplos.</li>
</ul>
<p><strong>Motivación y enganche:</strong></p>
<ul>
<li><strong>Docente:</strong> Muestra un diseño sencillo y otro desordenado para comparar.</li>
<li><strong>Estudiantes:</strong> Analizan cuál es más fácil de navegar y por qué.</li>
</ul>
<p><strong>Contextualización:</strong></p>
<ul>
<li><strong>Docente:</strong> Explica que con CSS se puede controlar la posición, colores y separación de elementos para lograr un diseño atractivo.</li>
<li><strong>Estudiantes:</strong> Relacionan esta idea con aplicaciones y sitios que usan diseños claros.</li>
</ul>
<h4>Fase de Desarrollo</h4>
<strong>Tiempo estimado:</strong> 90 minutos
<p><strong>Presentación del contenido:</strong></p>
<p><strong>Docente:</strong> Introduce propiedades CSS para colores, márgenes, padding, bordes y posicionamiento simple (display, float, flexbox básico).</p>
<p><strong>Actividades de aprendizaje activo:</strong></p>
<ul>
<li>
<strong>Actividad 1: Aplicando colores y bordes</strong><br/>
<strong>Objetivo:</strong> Usar CSS para mejorar la apariencia visual con colores y bordes.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>Los estudiantes modifican su archivo para agregar colores de fondo y texto a diferentes secciones.</li>
<li>Aplican bordes y espacios (márgenes y padding) para separar elementos.</li>
</ul>
<strong>Organización:</strong> Individual<br/>
<strong>Producto:</strong> Página con estilos visuales mejorados.<br/>
<strong>Tiempo:</strong> 45 min<br/>
<strong>Rol del docente:</strong> Revisa coherencia en colores y ayuda con sintaxis.</li>
<li>
<strong>Actividad 2: Maquetando con Flexbox</strong><br/>
<strong>Objetivo:</strong> Organizar elementos en fila o columna usando CSS Flexbox.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>El docente explica y muestra ejemplos básicos de Flexbox.</li>
<li>Los estudiantes crean una sección con elementos organizados horizontalmente.</li>
<li>Prueban y ajustan el diseño.</li>
</ul>
<strong>Organización:</strong> Parejas<br/>
<strong>Producto:</strong> Sección maquetada con Flexbox.<br/>
<strong>Tiempo:</strong> 45 min<br/>
<strong>Rol del docente:</strong> Asiste en la comprensión y aplicación de Flexbox.</li>
</ul>
<p><strong>Diferenciación:</strong></p>
<ul>
<li>Para estudiantes avanzados: experimentar con otras propiedades CSS como sombras y fuentes personalizadas.</li>
<li>Para apoyo: usar ejemplos de código para copiar y adaptar.</li>
</ul>
<p><strong>Transición:</strong> El docente recuerda que en la siguiente sesión se trabajará en el proyecto final integrando todos los conocimientos.</p>
<h4>Fase de Cierre</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<ul>
<li><strong>Síntesis:</strong> Creación de un resumen gráfico con ejemplos de propiedades CSS usadas.</li>
<li><strong>Reflexión metacognitiva:</strong>
<ul>
<li>¿Cómo los colores y la organización mejoran una página?</li>
<li>¿Qué propiedades CSS aprendiste hoy?</li>
<li>¿Qué diseño te gustaría crear para tu proyecto final?</li>
</ul>
</li>
<li><strong>Retroalimentación:</strong> Comentarios orales y apoyo individual.</li>
<li><strong>Transferencia:</strong> Se sugiere analizar diseños de páginas web para identificar uso de colores y maquetación.</li>
<li><strong>Tarea:</strong> Planear el diseño visual para su proyecto final.</li>
</ul>
<h3>Sesión 5: Proyecto Final – Diseño y Construcción de Página Web Personal</h3>
<h4>Fase de Inicio</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<p><strong>Propósito de la sesión:</strong> Iniciar el proyecto integrador donde aplicarán HTML, CSS y multimedia para crear una página web que les represente.</p>
<p><strong>Activación de conocimientos previos:</strong></p>
<ul>
<li><strong>Docente:</strong> Revisa brevemente con preguntas: "¿Qué etiquetas HTML recuerdan? ¿Qué estilos CSS usarían en su página?"</li>
<li><strong>Estudiantes:</strong> Responden y comparten ideas.</li>
</ul>
<p><strong>Motivación y enganche:</strong></p>
<ul>
<li><strong>Docente:</strong> Muestra ejemplos de páginas personales creadas por otros estudiantes o profesionales.</li>
<li><strong>Estudiantes:</strong> Se inspiran y expresan qué quieren mostrar en su página.</li>
</ul>
<p><strong>Contextualización:</strong></p>
<ul>
<li><strong>Docente:</strong> Explica que el proyecto es una oportunidad para mostrar quiénes son y sus gustos usando tecnología.</li>
<li><strong>Estudiantes:</strong> Piensan en contenidos personales para incluir.</li>
</ul>
<h4>Fase de Desarrollo</h4>
<strong>Tiempo estimado:</strong> 90 minutos
<p><strong>Presentación del contenido:</strong></p>
<p><strong>Docente:</strong> Explica las pautas del proyecto final: debe incluir texto, imágenes, enlaces, estilos CSS y al menos un video o multimedia.</p>
<p><strong>Actividades de aprendizaje activo:</strong></p>
<ul>
<li>
<strong>Actividad única: Desarrollo del proyecto final</strong><br/>
<strong>Objetivo:</strong> Aplicar todos los conocimientos para crear una página web personal.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>Los estudiantes planifican en hoja el contenido y diseño.</li>
<li>Codifican en sus computadoras el archivo HTML y CSS.</li>
<li>Integran imágenes, texto, enlaces y multimedia.</li>
<li>Prueban y corrigen errores en el navegador.</li>
</ul>
<strong>Organización:</strong> Individual<br/>
<strong>Producto:</strong> Página web completa y funcional.<br/>
<strong>Tiempo:</strong> 90 min<br/>
<strong>Rol del docente:</strong> Supervisar, resolver dudas y motivar la creatividad.</li>
</ul>
<p><strong>Diferenciación:</strong></p>
<ul>
<li>Para estudiantes que avanzan rápido: agregar interactividad simple con enlaces y estilos avanzados.</li>
<li>Para quienes requieren apoyo: acceso a plantilla base y ayuda paso a paso.</li>
</ul>
<p><strong>Transición:</strong> El docente anuncia que en la siguiente sesión presentarán y evaluarán sus proyectos.</p>
<h4>Fase de Cierre</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<ul>
<li><strong>Síntesis:</strong> Cada estudiante escribe un breve resumen de lo que diseñó y cómo lo hizo.</li>
<li><strong>Reflexión metacognitiva:</strong>
<ul>
<li>¿Qué parte del proyecto fue más sencilla y cuál más difícil?</li>
<li>¿Qué técnicas de HTML y CSS usaste?</li>
<li>¿Cómo te gustaría mejorar tu página?</li>
</ul>
</li>
<li><strong>Retroalimentación:</strong> Comentarios iniciales del docente para preparar presentaciones.</li>
<li><strong>Transferencia:</strong> Se invita a pensar en usar estas habilidades en otros proyectos escolares o personales.</li>
<li><strong>Tarea:</strong> Preparar una presentación breve de su página para la próxima sesión.</li>
</ul>
<h3>Sesión 6: Presentación, Evaluación y Reflexión del Proyecto Web</h3>
<h4>Fase de Inicio</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<p><strong>Propósito de la sesión:</strong> Preparar y organizar las presentaciones de los proyectos realizados.</p>
<p><strong>Activación de conocimientos previos:</strong></p>
<ul>
<li><strong>Docente:</strong> Recuerda los objetivos del proyecto y pregunta: "¿Qué esperan mostrar de su página?"</li>
<li><strong>Estudiantes:</strong> Planifican en breve qué explicarán.</li>
</ul>
<p><strong>Motivación y enganche:</strong></p>
<ul>
<li><strong>Docente:</strong> Anima con frases motivadoras sobre compartir aprendizajes y valorar el trabajo propio y ajeno.</li>
<li><strong>Estudiantes:</strong> Se preparan con entusiasmo.</li>
</ul>
<h4>Fase de Desarrollo</h4>
<strong>Tiempo estimado:</strong> 90 minutos
<p><strong>Presentación del contenido:</strong> No aplica, se centra en exposición y evaluación.</p>
<p><strong>Actividades de aprendizaje activo:</strong></p>
<ul>
<li>
<strong>Actividad 1: Presentación de proyectos</strong><br/>
<strong>Objetivo:</strong> Comunicar el proceso y resultado del diseño web realizado.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>Cada estudiante presenta su página web en el proyector o computadora.</li>
<li>Explica las decisiones de diseño, contenido y dificultades superadas.</li>
<li>Compañeros y docente hacen preguntas y comentarios respetuosos.</li>
</ul>
<strong>Organización:</strong> Plenaria<br/>
<strong>Producto:</strong> Presentación oral con demostración del proyecto.<br/>
<strong>Tiempo:</strong> 60 min<br/>
<strong>Rol del docente:</strong> Facilita el orden, modera preguntas y destaca aspectos positivos.</li>
<li>
<strong>Actividad 2: Evaluación y retroalimentación</strong><br/>
<strong>Objetivo:</strong> Valorar el trabajo propio y ajeno para mejorar competencias.<br/>
<strong>Instrucciones:</strong>
<ul>
<li>El docente entrega una lista de cotejo para que los estudiantes evalúen a sus compañeros.</li>
<li>Se realiza autoevaluación con preguntas guiadas.</li>
<li>El docente brinda retroalimentación oral y escrita a cada estudiante.</li>
</ul>
<strong>Organización:</strong> Individual y plenaria<br/>
<strong>Producto:</strong> Evaluaciones llenadas y comentarios.<br/>
<strong>Tiempo:</strong> 30 min<br/>
<strong>Rol del docente:</strong> Revisa evaluaciones, ofrece sugerencias y reconoce logros.</li>
</ul>
<h4>Fase de Cierre</h4>
<strong>Tiempo estimado:</strong> 15 minutos
<ul>
<li><strong>Síntesis:</strong> Realización de un ticket de salida: cada estudiante escribe una idea clave que aprendió y un aspecto a mejorar.</li>
<li><strong>Reflexión metacognitiva:</strong>
<ul>
<li>¿Cómo te sentiste al crear tu página web?</li>
<li>¿Qué aprendiste sobre HTML y CSS que no sabías antes?</li>
<li>¿Cómo crees que estas habilidades te pueden ayudar en el futuro?</li>
</ul>
</li>
<li><strong>Retroalimentación:</strong> El docente recoge tickets y comenta observaciones generales para cerrar el ciclo.</li>
<li><strong>Transferencia:</strong> Se propone continuar explorando diseño web y recursos multimedia en otros contextos.</li>
<li><strong>Tarea final:</strong> Guardar y respaldar el proyecto para posibles mejoras futuras.</li>
</ul></div>
</div>
<div class="card">
<h2 class="text-lg font-bold text-on-surface mb-3">Evaluación</h2>
<div class="prose max-w-none text-on-surface-variant"><p><strong>Tipo de evaluación:</strong></p>
<ul>
<li><strong>Diagnóstica:</strong> En la sesión 1 durante la activación de conocimientos previos para conocer experiencias y expectativas de los estudiantes.</li>
<li><strong>Formativa:</strong> En todas las sesiones durante las actividades prácticas, especialmente al crear archivos HTML y CSS, con observación directa y retroalimentación inmediata.</li>
<li><strong>Sumativa:</strong> En la sesión 6, mediante la presentación del proyecto final, autoevaluación y coevaluación usando lista de cotejo.</li>
</ul>
<p><strong>Criterios de evaluación:</strong></p>
<ul>
<li>Uso correcto de etiquetas HTML para estructurar contenido (Objetivo 1 y 2).</li>
<li>Aplicación adecuada de estilos CSS para mejorar la presentación visual (Objetivo 3 y 4).</li>
<li>Integración coherente de imágenes y multimedia en la página (Objetivo 4).</li>
<li>Capacidad para presentar y explicar el proyecto, así como recibir y aplicar retroalimentación (Objetivo 5).</li>
</ul>
<p><strong>Instrumentos sugeridos:</strong></p>
<ul>
<li>Lista de cotejo para evaluar estructura, estilo y multimedia del proyecto.</li>
<li>Observación directa durante actividades prácticas.</li>
<li>Rúbrica simplificada para la presentación oral.</li>
<li>Autoevaluación y coevaluación con preguntas guía.</li>
<li>Portafolio digital con archivos finales de HTML y CSS.</li>
</ul>
<p><strong>Evidencias de aprendizaje:</strong></p>
<ul>
<li>Archivos HTML y CSS creados por los estudiantes.</li>
<li>Páginas web funcionales vistas en el navegador.</li>
<li>Presentaciones orales explicando el proyecto.</li>
<li>Listas de cotejo y autoevaluaciones completadas.</li>
<li>Notas y reflexiones escritas durante los cierres de sesión.</li>
</ul></div>
</div>
<!-- Generated activities enrichments -->
<!-- Recomendaciones para tu Plan -->
</div>
<!-- CTA (solo visitantes no logueados) -->
<div class="mt-10 text-center bg-marca-azul border border-marca-azul rounded-sm shadow-sm p-8">
<h2 class="text-xl font-bold text-white mb-2">Crea tu propio plan de clase con IA</h2>
<p class="text-white/75 mb-4">100 créditos gratuitos cada mes</p>
<a href="https://edukatic.co/cuenta/iniciar-sesion" class="inline-flex items-center px-6 py-3 bg-white text-marca-azul font-semibold rounded-sm hover:bg-white/90 transition-colors">
Comenzar gratis
</a>
</div>
<!-- Similar Resources Recommendations -->
</div>
</main>
</div>
<footer style="background:#0F0F1A;" class="no-print text-white/85 pt-14">
<div class="max-w-6xl mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-10">
<div class="col-span-2 md:col-span-1">
<a href="/" class="inline-block mb-4 text-2xl font-extrabold tracking-tight text-white hover:text-white/85">Eduteka+</a>
<p class="text-sm text-white/60 max-w-xs">
Plataforma educativa del Centro de Innovación Educativa y TIC de la Universidad Icesi:
materiales de calidad para docentes, directivos y formadores de maestros,
<strong class="text-white">completamente gratuita.</strong>
</p>
<div class="flex gap-2.5 mt-5">
<a href="https://www.facebook.com/portaleduteka/" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en Facebook" title="Facebook"
class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-facebook-f" aria-hidden="true"></i></a>
<a href="https://www.instagram.com/portaleduteka/" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en Instagram" title="Instagram"
class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-instagram" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/eduteka/" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en LinkedIn" title="LinkedIn"
class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-linkedin-in" aria-hidden="true"></i></a>
<a href="https://twitter.com/eduteka" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en X" title="X"
class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a>
<a href="https://www.youtube.com/channel/UCHFE2RwLxGzdPaWfjI33psQ" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en YouTube" title="YouTube"
class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-youtube" aria-hidden="true"></i></a>
<a href="https://wa.link/9ycdu2" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en WhatsApp" title="WhatsApp"
class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-whatsapp" aria-hidden="true"></i></a>
</div>
</div>
<div>
<h4 class="text-xs font-bold text-white uppercase tracking-wide mb-3 pb-2 border-b border-white/15">Contenidos</h4>
<nav class="flex flex-col text-sm" aria-label="Contenidos">
<a href="/articulos/index.php" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Artículos</a>
<a href="/contenidos/documentos" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Documentos</a>
<a href="/contenidos/videos" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Webinars</a>
<a href="/contenidos/podcast" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Podcast</a>
<a href="/contenidos/herramientas" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Herramientas recomendadas</a>
<a href="/consulta" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Pregúntale a Eduteka</a>
</nav>
</div>
<div>
<h4 class="text-xs font-bold text-white uppercase tracking-wide mb-3 pb-2 border-b border-white/15">EdutekaLab</h4>
<nav class="flex flex-col text-sm" aria-label="EdutekaLab">
<a href="/herramientas/agente" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Agente Pedagógico</a>
<a href="/herramientas/idea" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Planes de Clase</a>
<a href="/herramientas/rubrik" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Rúbricas</a>
<a href="/herramientas/planeo" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Cursos</a>
<a href="/herramientas/gamifika" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Gamificaciones</a>
<a href="/herramientas/genera" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Recursos</a>
<a href="/herramientas/mitica" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Diagnóstico TIC</a>
<a href="/articulos/index.php?q=Matem%C3%A1tica+Interactiva" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Matemática Interactiva</a>
<span class="block py-1.5 md:py-1 text-white/55">Evento Eduteka (pronto)</span>
</nav>
</div>
<div>
<h4 class="text-xs font-bold text-white uppercase tracking-wide mb-3 pb-2 border-b border-white/15">Información</h4>
<nav class="flex flex-col text-sm" aria-label="Información">
<a href="/ayuda" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Ayuda</a>
<a href="/nosotros" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Sobre nosotros</a>
<a href="/comunidad" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Comunidad</a>
<a href="/comunidad/condiciones" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Condiciones de la comunidad</a>
<a href="/herramientas/creditos" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Créditos</a>
</nav>
</div>
</div>
<div class="mt-12 border-t border-white/10 py-5">
<div class="max-w-6xl mx-auto px-4 flex items-center justify-between flex-wrap gap-3">
<span class="text-xs text-white/60">© Eduteka 2001–2026 · Universidad Icesi</span>
<div class="flex gap-5 text-xs">
<a href="/terminos" class="py-1.5 text-white/60 hover:text-white">Políticas de uso</a>
<a href="/privacidad" class="py-1.5 text-white/60 hover:text-white">Datos personales</a>
</div>
</div>
</div>
</footer>
<!-- Global JS -->
<script src="https://edukatic.co/herramientas/assets/js/app.js"></script>
<script src="https://edukatic.co/herramientas/assets/js/modules/recommendations.js"></script>
<!-- La licencia (v1.2 fase 5, VI-06/VI-07 con la decision 8): la ventana y su modulo solo
se montan cuando hay sesion y la licencia esta pendiente (Controllers\BaseController
resuelve @licencia_pendiente con una sola consulta por peticion). El <script> va
DESPUES de app.js a proposito: el modulo envuelve su apiFetch para que un 428 de
cualquier creacion abra la ventana. -->
</body>
</html>
