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
Contexto:
urbano
NEE/Inclusión:
Ninguna
Enfoque:
STEAM
Retroalimentación global
Agregar
Planeacion base
Regenerar campo
Planeación de Clase - HTML Básico 0. Supuestos Los estudiantes de Grado 11 en un contexto urbano tienen acceso individual o en parejas a un computador con conexión a internet. Los estudiantes tienen conocimientos básicos de manejo de computador y navegador web. El docente tiene conocimientos básicos de HTML para guiar la actividad y resolver dudas. 1. Alineacion curricular (MEN) DBA sugerido (POR VERIFICAR EN DOCUMENTO MEN): Comprende y aplica principios básicos de programación y diseño web para crear soluciones digitales sencillas que respondan a necesidades específicas o comuniquen ideas de manera estructurada. Estandar sugerido (POR VERIFICAR EN MEN): Utilizo lenguajes de programación y herramientas de desarrollo para crear aplicaciones y recursos digitales que resuelvan problemas o automaticen tareas. Objetivo de aprendizaje (medible): Diseñar una página web básica utilizando HTML, aplicando etiquetas semánticas y la estructura fundamental, para presentar información personal de manera organizada y accesible en un editor en línea. Desempeno esperado (observable): El estudiante creará un archivo HTML con la estructura básica, incluyendo encabezados, párrafos y enlaces, y lo visualizará correctamente en un navegador web. Criterios de exito (2-4): La página web tiene la estructura básica de HTML (<!DOCTYPE html>, <html>, <head>, <body>). La página incluye al menos un encabezado (<h1> o <h2>) y dos párrafos (<p>) con información personal. La página contiene al menos un enlace (<a>) a un sitio externo o a una sección interna. El código HTML es sintácticamente correcto y la página se visualiza sin errores en el navegador. Enfoque aplicado: STEAM 2. Secuencia didactica (60 total) 2.1 Inicio (10 min) Proposito para estudiantes (en lenguaje simple): Hoy vamos a descubrir cómo se construyen las páginas web que usamos todos los días y vamos a crear nuestra primera página web personal usando un lenguaje llamado HTML. ¡Será como aprender el idioma secreto de internet! Activacion de saberes previos (2-4 preguntas o mini-actividad): (Pregunta) ¿Alguna vez se han preguntado cómo se hacen las páginas web que visitan? ¿Qué creen que hay "detrás" de lo que vemos? (Pregunta) Cuando hacen clic en un enlace o ven una imagen en una página, ¿cómo creen que el computador sabe qué mostrar? (Mini-actividad) Muestra una página web sencilla (ej. una página de Wikipedia con texto e imágenes). Pregunta: ¿Qué elementos identifican aquí? (Texto, imágenes, enlaces, títulos). Enfoque aplicado: STEAM (Ciencia, Tecnología, Arte) Justificacion del enfoque: Se despierta la curiosidad científica sobre el funcionamiento de la web (Ciencia), se introduce la tecnología fundamental (Tecnología) y se valora la estructura y el diseño visual (Arte) de una página. Paso a paso (docente): Saluda a los estudiantes y presenta el propósito de la clase de manera entusiasta. Realiza las preguntas de activación de saberes previos, fomentando la participación y anotando ideas clave en el tablero. Muestra un ejemplo de una página web simple y luego, si es posible, su código fuente (usando "Ver código fuente de la página" en el navegador) para ilustrar que las páginas son texto con instrucciones. Introduce brevemente HTML como el "esqueleto" de una página web. Rol del docente: Facilitador, motivador, presentador de conceptos iniciales. Rol del estudiante: Participa activamente en la discusión, observa y relaciona sus conocimientos previos con la nueva información. Evidencia rapida del inicio (que observar/recoger): Participación en la discusión, ideas expresadas sobre el funcionamiento de las páginas web. 2.2 Desarrollo (40 min) Actividad central (que haran los estudiantes): Los estudiantes crearán una página web personal básica utilizando un editor de código HTML en línea (como CodePen, JSFiddle o W3Schools Tryit Editor), aplicando las etiquetas fundamentales de HTML para estructurar su información. Organizacion (individual/parejas) y roles si aplica: Individual, pero se fomenta el trabajo en parejas para apoyo mutuo y resolución de problemas. Enfoque aplicado: STEAM (Tecnología, Ingeniería, Ciencia, Arte) Justificacion del enfoque: Se aplica directamente la Tecnología al codificar, se desarrolla el pensamiento de Ingeniería al estructurar y resolver problemas, se comprende la lógica de la Ciencia de la computación y se permite la expresión creativa en la organización del contenido (Arte). Paso a paso (docente) — numerado: Guía a los estudiantes para que abran el editor HTML en línea sugerido (ej. W3Schools Tryit Editor). Explica y demuestra la estructura básica de un documento HTML: <!DOCTYPE html>, <html>, <head> (con <title>) y <body>. Pide a los estudiantes que la repliquen. Introduce las etiquetas para encabezados (<h1>, <h2>) y párrafos (<p>). Pide que escriban su nombre como <h1> y una breve presentación en <p>. Explica cómo crear enlaces (<a href="URL">Texto del enlace</a>). Pide que añadan un enlace a una red social o a un sitio web de su interés. Circula por el aula, observando el progreso, ofreciendo ayuda individualizada y resolviendo dudas comunes en voz alta. Anima a los estudiantes a experimentar con diferentes contenidos y a "jugar" con las etiquetas aprendidas. Rol del docente: Guía, demostrador, solucionador de problemas, observador y facilitador del aprendizaje práctico. Rol del estudiante: Codifica activamente, experimenta, resuelve problemas, busca información y colabora con compañeros. Andamiaje (preguntas guia): ¿Qué etiqueta usarías para el título principal de tu página? Si quieres agregar más texto, ¿qué etiqueta es la más adecuada? ¿Cómo harías para que al hacer clic en un texto te lleve a otra página web? Si tu código no funciona, ¿qué parte crees que deberías revisar primero? Diferenciacion: Rezago: Proporcionar plantillas de código con la estructura básica ya escrita, enfocarse en solo dos o tres etiquetas esenciales (<h1>, <p>, <a>). Ofrecer apoyo uno a uno más frecuente y ejemplos visuales paso a paso. Al dia: Seguir las instrucciones principales, se les anima a explorar etiquetas adicionales como <img> (si el tiempo lo permite y hay recursos para imágenes) o a añadir más contenido. Avanzado: Desafiarlos a investigar y aplicar etiquetas semánticas adicionales (ej. <header>, <footer>, <nav>, <section>) o a intentar incrustar un video simple. Pueden ayudar a compañeros con dudas. Control de tiempo (hitos por minuto aproximado): Min 0-5: Apertura del editor y explicación de la estructura básica. Min 5-15: Creación de encabezados y párrafos. Min 15-25: Creación de enlaces. Min 25-40: Trabajo autónomo, experimentación y resolución de dudas. 2.3 Cierre (10 min) Sintesis guiada (como el estudiante demuestra comprension): Los estudiantes compartirán brevemente su página web con un compañero y explicarán qué etiquetas usaron y para qué. Luego, el docente hará una síntesis colectiva de los aprendizajes. Enfoque aplicado: STEAM (Arte, Ingeniería, Ciencia) Justificacion del enfoque: Se promueve la comunicación y presentación de resultados (Arte), la reflexión sobre el proceso de construcción (Ingeniería) y la consolidación de conceptos (Ciencia). Paso a paso (docente): Pide a los estudiantes que guarden su trabajo (si el editor lo permite) o que copien su código en un documento de texto. Organiza a los estudiantes en parejas para que cada uno muestre su página al otro y explique qué hizo. Realiza una puesta en común rápida, pidiendo a algunos voluntarios que compartan un aprendizaje clave o un desafío superado. Recoge los "tickets de salida". Rol del docente: Moderador, sintetizador, evaluador formativo. Rol del estudiante: Comparte su trabajo, reflexiona sobre su aprendizaje, responde preguntas de síntesis. Ticket de salida / verificacion rapida (1-3 items): Escribe una etiqueta HTML que hayas usado hoy y explica brevemente para qué sirve. Menciona algo nuevo que aprendiste sobre cómo funcionan las páginas web. Conexion con proxima clase (1 linea): En la próxima clase, aprenderemos a darle estilo y color a nuestras páginas web usando CSS, el "maquillaje" de HTML. 3. Atencion a la diversidad / Ajustes razonables (DUA) Representacion (al menos 1 accion): Proporcionar ejemplos visuales claros de código HTML y su resultado en el navegador, usando proyectores o pantallas grandes. Utilizar recursos como W3Schools, que ofrecen explicaciones textuales, ejemplos de código interactivos y resultados en tiempo real. Ofrecer plantillas de código básico pre-escritas para que los estudiantes puedan enfocarse en el contenido y la experimentación, en lugar de la sintaxis inicial. Accion y expresion (al menos 1 accion): Permitir que los estudiantes elijan el tema de su página personal (dentro de un marco de seguridad y respeto), fomentando la autonomía y la conexión con sus intereses. Ofrecer la opción de presentar su trabajo mostrando el código, el resultado en el navegador, o explicando verbalmente los elementos que usaron. Proporcionar un listado de etiquetas HTML comunes con su función para que los estudiantes puedan consultarlo durante la actividad. Compromiso (al menos 1 accion): Conectar la actividad con el mundo real, mostrando cómo el HTML es la base de todas las páginas web que usan a diario, desde redes sociales hasta sitios de noticias. Fomentar el trabajo colaborativo en parejas para la resolución de problemas, permitiendo que los estudiantes se apoyen mutuamente y compartan descubrimientos. Celebrar los pequeños logros y la experimentación, creando un ambiente de aprendizaje seguro donde los errores son oportunidades para aprender. 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 universal para beneficiar a todos los estudiantes. 4. Evaluacion formativa (alineada al objetivo) Evidencia(s) de aprendizaje: Página web personal básica creada en el editor en línea (código y visualización). Respuestas al ticket de salida. Instrumento principal: Lista de cotejo y rúbrica analítica. Retroalimentacion en clase (como y cuando): Durante el desarrollo: El docente circulará por el aula, ofreciendo retroalimentación inmediata y constructiva sobre el código y la estructura de la página. Al cierre: Durante la puesta en común y la revisión de los tickets de salida, se ofrecerá retroalimentación general sobre los conceptos clave y los errores comunes. Rubrica analitica (3 niveles: Superior / Basico / Bajo; 3 criterios): Criterio 1: Estructura básica del documento HTML Superior: Incluye correctamente <!DOCTYPE html>, <html>, <head> (con <title>) y <body>, y el código está bien indentado. Basico: Incluye la mayoría de los elementos de la estructura básica, aunque podría faltar el <title> o la indentación no es consistente. Bajo: La estructura básica está incompleta o es incorrecta, impidiendo la visualización adecuada de la página. Criterio 2: Uso de etiquetas de contenido (encabezados, párrafos, enlaces) Superior: Utiliza al menos un <h1> o <h2>, dos <p> y un <a> de forma correcta y semántica, presentando información clara y relevante. Basico: Utiliza las etiquetas de contenido principales (<h1>/<h2>, <p>, <a>) con algunos errores menores de sintaxis o en la presentación de la información. Bajo: Las etiquetas de contenido son escasas, incorrectas o no cumplen con el propósito de presentar la información requerida. Criterio 3: Sintaxis y visualización Superior: El código HTML es sintácticamente correcto en su totalidad y la página se visualiza sin errores en el navegador, mostrando el contenido de forma organizada. Basico: El código HTML presenta algunos errores menores de sintaxis que no impiden completamente la visualización, pero afectan la presentación. Bajo: El código HTML contiene errores significativos que impiden la correcta visualización de la página o gran parte de su contenido. 5. Recursos (coherentes con contexto) Materiales del entorno / bajo costo: Tablero o pizarra para anotar ideas y ejemplos. Cuadernos y esferos para tomar apuntes y responder el ticket de salida. Material impreso / manipulativo: (Opcional) Ficha con un listado de etiquetas HTML básicas y su función. Alternativa sin internet (si aplica): Si no hay internet, se puede usar un editor de texto simple (como Bloc de Notas en Windows o TextEdit en Mac) para escribir el código HTML y luego guardar el archivo con extensión .html para abrirlo directamente en un navegador web instalado localmente. Los ejemplos y demostraciones se harían con capturas de pantalla o código impreso. (Opcional) Recurso digital si hay conectividad: Computadores con acceso a internet (individual o en parejas). Proyector o pantalla interactiva para demostraciones del docente. Editor de código HTML en línea (ej. W3Schools Tryit Editor, CodePen, JSFiddle). 6. Notas para el docente (breves) Error comun esperado y como corregirlo: Es común que los estudiantes olviden cerrar etiquetas (ej. <p> sin </p>) o escriban mal los atributos (ej. href por hreff). Recuérdales la importancia de revisar cuidadosamente la sintaxis y de que cada etiqueta que abre, debe cerrar (la mayoría). Los editores en línea suelen ayudar a identificar estos errores. Recomendacion de manejo de aula (si aplica): Fomenta un ambiente de "prueba y error". Anima a los estudiantes a experimentar y a no tener miedo de que el código no funcione a la primera. La depuración (encontrar y corregir errores) es una parte fundamental de la programación.
Agregar
Guardar cambios
Volver a Mis clases