Copiloto Croma
Mis clases
Workbench (solo lectura)
Editor de planeación (v2)
Edita campo por campo con retroalimentación y regeneración parcial.
Nueva planeación v2
Regenerar todo
Metadata
Modelo:
Escuela graduada
Nivel:
Media técnica
Grado:
11
Área:
tecnología
Temática:
html
Duración:
60 minutos
Contexto:
internet, pc
NEE/Inclusión:
Ninguna
Enfoque:
Aula invertida
Retroalimentación global
Agregar
Planeacion base
Regenerar campo
```html Planeación de Clase - HTML Básico 0. Supuestos Se asume que los estudiantes han realizado una actividad de pre-clase (ej. ver un video tutorial o leer un documento introductorio) sobre los conceptos básicos de HTML (estructura general, etiquetas principales como ``, ``, ``, ``). 1. Alineacion curricular (MEN) DBA sugerido (POR VERIFICAR EN DOCUMENTO MEN): Comprende y aplica los principios básicos del lenguaje HTML para la creación y estructuración de contenido web, utilizando etiquetas y atributos fundamentales para organizar información. Estandar sugerido (POR VERIFICAR EN MEN): Identifico y utilizo diferentes lenguajes de programación y herramientas de desarrollo para la creación de soluciones tecnológicas que respondan a necesidades específicas. Objetivo de aprendizaje (medible): Aplicar los conceptos fundamentales de HTML para estructurar una página web básica, utilizando etiquetas de encabezado, párrafo y listas, en un editor de texto y navegador web, demostrando una comprensión inicial de la sintaxis y la jerarquía del lenguaje. Desempeno esperado (observable): Los estudiantes crearán un archivo HTML con una estructura básica que incluya un título, al menos dos párrafos y una lista, visualizándolo correctamente en un navegador web. Criterios de exito (2-4): El archivo HTML contiene la estructura básica (``, ``, ``, ``) correctamente definida. Se utilizan etiquetas de encabezado (`` a ``), párrafo (``) y listas (``/``, ``) de forma adecuada para organizar el contenido. El código HTML es sintácticamente correcto y se visualiza sin errores en un navegador web. El contenido de la página es coherente y relevante para la temática propuesta. Enfoque pedagógico: Aula invertida. 2. Secuencia didactica (60 minutos total) 2.1 Inicio (10 min) Proposito para estudiantes (en lenguaje simple): Hoy vamos a conectar lo que aprendieron en casa sobre HTML con una actividad práctica aquí en clase, resolviendo cualquier duda que tengan antes de empezar a crear. Activacion de saberes previos (2-4 preguntas o mini-actividad): ¿Qué es HTML y para qué se utiliza? (Basado en el material de pre-clase) Mencionen al menos tres etiquetas HTML que recuerden y expliquen brevemente su función. ¿Cuál es la estructura básica que debe tener un documento HTML? Enfoque aplicado: Aula invertida. Justificacion del enfoque: Permite consolidar el conocimiento adquirido previamente por los estudiantes de forma autónoma y enfocar el tiempo de clase en la resolución de dudas y la preparación para la aplicación práctica. Paso a paso (docente): Saludar a los estudiantes y recordarles la temática de HTML que exploraron en la actividad de pre-clase. Abrir un espacio de 5 minutos para que los estudiantes compartan sus principales aprendizajes y formulen preguntas sobre el material revisado. Proyectar un fragmento de código HTML muy simple (ej. un `` y un ``) y pedirles que identifiquen las etiquetas y su propósito. Rol del docente: Facilitador, aclarador de dudas, verificador de la comprensión inicial. Rol del estudiante: Participa activamente en la discusión, formula preguntas, comparte lo aprendido en la actividad de pre-clase. Evidencia rapida del inicio (que observar/recoger): Respuestas orales a las preguntas de activación, participación en la identificación de etiquetas. 2.2 Desarrollo (40 min) Actividad central (que haran los estudiantes): Los estudiantes crearán su primera página web personal utilizando un editor de texto y la visualizarán en un navegador. La página debe incluir un título principal, una breve descripción personal (en párrafos) y una lista (ej. de sus hobbies o asignaturas favoritas). Organizacion (individual/parejas/grupos) y roles si aplica: Trabajo individual, con la posibilidad de apoyo entre compañeros y del docente. Enfoque aplicado: Aula invertida. Justificacion del enfoque: El tiempo de clase se dedica a la aplicación práctica del conocimiento adquirido, permitiendo al docente ofrecer apoyo individualizado y resolver problemas en tiempo real, maximizando la interacción y la construcción activa del aprendizaje. Paso a paso (docente) — numerado: Presentar el reto de la actividad central: "Vamos a crear una página web personal sencilla. Debe tener un título principal, al menos dos párrafos con información sobre ustedes y una lista de sus intereses." Guiar a los estudiantes para que abran un editor de texto (ej. VS Code, Notepad++) y un navegador web en sus computadores. Recordarles la estructura básica de un documento HTML y animarlos a empezar a escribir su código. Circular por el aula, observando el progreso, ofreciendo apoyo individualizado, resolviendo dudas sobre sintaxis o estructura, y fomentando la experimentación. Animar a los estudiantes a guardar su archivo con extensión `.html` y abrirlo en el navegador para ver sus avances. Andamiaje (preguntas guia): ¿Están utilizando la estructura básica de HTML (``, ``, ``)? ¿Están cerrando todas las etiquetas que abren? ¿Qué etiqueta usarían para un título muy importante? ¿Y para un párrafo de texto normal? Si quieren hacer una lista, ¿qué etiquetas necesitan? ¿Cómo pueden ver lo que han hecho en el navegador? Diferenciacion: Rezago: Proporcionar una plantilla HTML con la estructura básica ya escrita y enfocarse en la correcta inserción de 2-3 etiquetas de contenido. Ofrecer apoyo directo y constante. Al dia: Crear la página con los requisitos mínimos (título, dos párrafos, una lista) de forma autónoma. Avanzado: Desafiarlos a añadir una imagen (si conocen la etiqueta ``), un enlace a otra página (``) o a experimentar con etiquetas de formato de texto (ej. ``, ``). Control de tiempo (hitos por minuto aproximado): Min 0-5: Explicación del reto y preparación de herramientas. Min 5-35: Trabajo práctico individual con acompañamiento del docente. Min 35-40: Revisión final del código y visualización en el navegador, guardado del archivo. 2.3 Cierre (10 min) Sintesis guiada (como el estudiante demuestra comprension): Pedir a algunos estudiantes que compartan su página web y expliquen brevemente qué etiquetas usaron y por qué. Guiar una reflexión grupal sobre los aprendizajes y desafíos. Enfoque aplicado: Aula invertida. Justificacion del enfoque: Se cierra el ciclo de aprendizaje con una reflexión y verificación de la comprensión, permitiendo a los estudiantes consolidar lo aprendido y al docente evaluar formativamente. Paso a paso (docente): Invitar a 2-3 estudiantes voluntarios a proyectar su página web y explicar brevemente su código y el resultado. Guiar una breve discusión: "¿Qué fue lo más fácil? ¿Qué fue lo más difícil? ¿Qué aprendieron hoy sobre HTML?" Entregar un "ticket de salida" para verificar la comprensión individual. Rol del docente: Moderador, facilitador de la reflexión, evaluador formativo. Rol del estudiante: Comparte su trabajo, participa en la reflexión grupal, completa el ticket de salida. Ticket de salida / verificacion rapida (1-3 items): Escribe una etiqueta HTML que usaste hoy y su función. ¿Cuál es la diferencia entre `` y ``? ¿Qué harías si tu página web no se ve correctamente en el navegador? Conexion con proxima clase (1 linea): En la próxima clase, aprenderemos a darle estilo y color a nuestras páginas web usando CSS. 3. Atencion a la diversidad / Ajustes razonables (DUA) Representacion (al menos 1 accion): Presentar la información del pre-clase y en clase a través de múltiples formatos: videos explicativos, lecturas, ejemplos de código en pantalla y demostraciones prácticas. Utilizar un vocabulario claro y conciso, explicando términos técnicos con analogías o ejemplos cercanos a su contexto. Accion y expresion (al menos 1 accion): Permitir a los estudiantes demostrar su comprensión de HTML a través de la creación del código, pero también mediante explicaciones verbales, diagramas o la resolución de problemas en el código de otros. Ofrecer flexibilidad en el nivel de complejidad de la página web a crear, permitiendo a cada estudiante avanzar a su propio ritmo y con los elementos que dominen. Compromiso (al menos 1 accion): Fomentar la autonomía al permitirles elegir el contenido de su página web personal, aumentando su sentido de propiedad y relevancia. Proporcionar retroalimentación constructiva y oportuna durante el desarrollo de la actividad, enfocándose en el progreso y los esfuerzos, más allá del resultado final. Establecer un ambiente de aula seguro donde la experimentación y el "error" sean vistos como oportunidades de aprendizaje. Barreras seleccionadas: Ninguna. Ajustes razonables por barrera (si aplica): No aplica, ya que no se identificaron barreras específicas. Se aplican los principios DUA de forma general para beneficiar a todos los estudiantes. 4. Evaluacion formativa (alineada al objetivo) Evidencia(s) de aprendizaje: Archivo HTML creado por el estudiante (`.html`) y respuestas al ticket de salida. Instrumento principal: Rúbrica analítica y preguntas guía del ticket de salida. Retroalimentacion en clase (como y cuando): Durante el desarrollo: El docente circulará por el aula ofreciendo retroalimentación inmediata y específica sobre el código y la estructura a medida que los estudiantes trabajan. Al cierre: A través de la discusión grupal sobre los trabajos presentados y la revisión de las respuestas del ticket de salida. Rubrica analitica (3 niveles: Superior / Basico / Bajo; 3 criterios): Criterio 1: Estructura básica HTML Superior: El archivo incluye todas las etiquetas estructurales (``, ``, ``, ``) correctamente anidadas y con metadatos básicos. Basico: El archivo incluye la mayoría de las etiquetas estructurales, pero puede tener alguna omisión menor o anidación incorrecta que no impide la visualización. Bajo: Carece de una estructura HTML coherente o presenta errores graves en la definición de las etiquetas estructurales. Criterio 2: Uso de etiquetas de contenido (encabezados, párrafos, listas) Superior: Utiliza correctamente y de forma variada las etiquetas de encabezado, párrafo y listas, organizando el contenido de manera lógica y clara. Basico: Utiliza las etiquetas principales (``, ``, ``/``, ``) según lo solicitado, pero puede haber inconsistencias en su aplicación o falta de variedad. Bajo: Uso incorrecto o muy limitado de las etiquetas de contenido, o el contenido no está organizado adecuadamente con ellas. Criterio 3: Sintaxis y visualización Superior: El código HTML no presenta errores de sintaxis, todas las etiquetas están correctamente cerradas y la página se visualiza perfectamente en el navegador. Basico: Presenta pocos errores de sintaxis (ej. una etiqueta sin cerrar) que no impiden la visualización básica y la comprensión del contenido. Bajo: Múltiples errores de sintaxis que impiden la correcta visualización de la página o hacen que el código sea incomprensible. 5. Recursos (coherentes con contexto) Materiales del entorno / bajo costo: Tablero, marcadores, proyector. Material impreso / manipulativo: (Opcional) Una pequeña "chuleta" o guía rápida de etiquetas HTML básicas para consulta. Alternativa sin internet (si aplica): No aplica, el contexto especifica "internet, pc". Recurso digital si hay conectividad: Computadores con sistema operativo funcional. Editor de texto instalado (ej. VS Code, Notepad++, Sublime Text). Navegador web (ej. Google Chrome, Mozilla Firefox). Acceso a internet para el material de pre-clase (video/lectura). 6. Notas para el docente (breves) Error comun esperado y como corregirlo: Es común que los estudiantes olviden cerrar etiquetas (``, ``, etc.) o cometan errores tipográficos. Al circular, el docente debe enfatizar la importancia de revisar el código y usar el navegador para identificar dónde el código no se comporta como se espera. Recomendacion de manejo de aula (si aplica): Fomentar un ambiente de colaboración donde los estudiantes puedan ayudarse mutuamente a depurar errores menores. Establecer un tiempo límite claro para cada fase de la actividad para mantener el ritmo. ```
Agregar
Guardar cambios
Volver a Mis clases