Introducción al Desarrollo Web (HTML y CSS)
Los estudiantes aprenden los fundamentos de HTML para estructurar contenido web y CSS para aplicar estilos visuales a las páginas.
Acerca de este tema
La introducción al desarrollo web con HTML y CSS permite a los estudiantes de 1° Medio estructurar y estilizar páginas web básicas. HTML organiza el contenido mediante etiquetas como <html>, <head>, <body>, <h1> y <p>, creando la base semántica de una página. CSS separa la presentación visual aplicando estilos con selectores y propiedades como color, font-size y margin, lo que facilita el mantenimiento y la adaptabilidad del diseño.
Este tema se alinea con los objetivos de aprendizaje OA TEC 1°M de Programación de Interfaces en las Bases Curriculares de MINEDUC, fomentando habilidades en desarrollo de aplicaciones y experiencia de usuario. Los estudiantes responden preguntas clave sobre la organización del contenido, las ventajas de separar estructura de estilo y la compatibilidad entre navegadores, desarrollando pensamiento lógico y resolución de problemas digitales.
El aprendizaje activo beneficia este tema porque los estudiantes construyen páginas reales en editores de código, iteran diseños colaborativamente y prueban en navegadores distintos. Estas prácticas convierten conceptos abstractos en productos funcionales, refuerzan la depuración de errores y promueven la comprensión práctica de estándares web.
Preguntas Clave
- ¿Cómo se utiliza HTML para organizar el contenido de una página web?
- ¿Qué ventajas ofrece CSS para separar el contenido de la presentación visual?
- ¿Cómo se evalúa la compatibilidad de un diseño web en diferentes navegadores?
Objetivos de Aprendizaje
- Identificar la función de las etiquetas HTML principales (html, head, body, h1, p) para estructurar el contenido de una página web.
- Aplicar selectores y propiedades CSS básicas (color, font-size, margin) para modificar la presentación visual de elementos HTML.
- Comparar la apariencia de una página web simple en dos navegadores diferentes, identificando posibles inconsistencias.
- Crear una página web básica utilizando HTML para la estructura y CSS para el estilo, demostrando la separación de contenido y presentación.
Antes de Empezar
Por qué: Los estudiantes necesitan comprender cómo funciona Internet y qué es un navegador web para entender el propósito del desarrollo web.
Por qué: Comprender conceptos como secuencias y comandos básicos facilita la asimilación de la sintaxis y estructura de HTML y CSS.
Vocabulario Clave
| Etiqueta HTML | Un código o marcador que indica al navegador cómo mostrar o estructurar el contenido de una página web. Por ejemplo, <p> indica un párrafo. |
| Selector CSS | Una parte de una regla CSS que identifica el elemento o elementos HTML a los que se aplicará el estilo. Por ejemplo, 'h1' selecciona todos los encabezados de nivel 1. |
| Propiedad CSS | Un atributo de estilo que se puede aplicar a un elemento HTML seleccionado. Ejemplos incluyen 'color' para el texto o 'background-color' para el fondo. |
| Semántica HTML | El uso de etiquetas HTML para dar significado al contenido, no solo para presentarlo. Ayuda a los motores de búsqueda y a las tecnologías de asistencia a entender la estructura. |
Cuidado con estas ideas erróneas
Idea errónea comúnHTML solo sirve para escribir texto, no para estructurar.
Qué enseñar en su lugar
HTML define la semántica con etiquetas que organizan secciones como encabezados y listas. Actividades de pares ayudan a comparar páginas desestructuradas con semánticas, revelando cómo mejora la accesibilidad y SEO.
Idea errónea comúnCSS reemplaza el contenido de HTML.
Qué enseñar en su lugar
CSS solo estiliza la estructura existente de HTML, no la modifica. En grupos, estudiantes aplican estilos a la misma HTML y ven que el contenido permanece igual, aclarando la separación de responsabilidades mediante iteraciones visuales.
Idea errónea comúnTodos los navegadores muestran el mismo diseño CSS.
Qué enseñar en su lugar
Diferencias en motores de renderizado causan variaciones. Pruebas en clase completa exponen inconsistencias reales, guiando discusiones sobre estándares web y propiedades cross-browser.
Ideas de aprendizaje activo
Ver todas las actividadesEnseñanza entre Pares: Mi Primera Página HTML
Los estudiantes abren un editor como CodePen o VS Code. Crean una estructura básica con <html>, <head> y <body>, agregan un título <h1> y párrafos <p> sobre sí mismos. Comparten el código con su pareja para revisar etiquetas.
Grupos Pequeños: Estilizando con CSS
En grupos de 3-4, toman una página HTML compartida y aplican CSS: cambian colores de fondo con body { background-color: blue; }, fuentes con h1 { font-size: 24px; } y márgenes. Prueban cambios en vivo y discuten mejoras.
Clase Completa: Prueba de Compatibilidad
La clase carga la misma página en Chrome, Firefox y Edge. Observan diferencias en renderizado, como bordes o fuentes. Discuten en plenaria ajustes CSS como vendor prefixes para uniformidad.
Individual: Debug de Estilos
Cada estudiante recibe un código HTML/CSS con errores intencionales, como selectores mal escritos. Identifican y corrigen problemas, luego comparan resultados con una versión modelo proyectada.
Conexiones con el Mundo Real
- Los diseñadores web utilizan HTML y CSS diariamente para construir sitios web interactivos y visualmente atractivos para empresas, organizaciones sin fines de lucro y artistas. Plataformas como WordPress o Wix, aunque ofrecen interfaces visuales, se basan en estos lenguajes en su núcleo.
- Los desarrolladores front-end en empresas tecnológicas como Mercado Libre o Rappi emplean HTML y CSS para crear las interfaces de usuario de sus aplicaciones web, asegurando que la experiencia del cliente sea intuitiva y estéticamente agradable en diversos dispositivos.
Ideas de Evaluación
Entregue a cada estudiante una pequeña tarjeta. Pídales que escriban una etiqueta HTML y describan brevemente su propósito, y luego escriban una propiedad CSS y expliquen qué estilo modifica. Ej: Etiqueta: <h1>, Propósito: Encabezado principal. Propiedad: color, Modifica: el color del texto.
Muestre una captura de pantalla de una página web simple y pida a los estudiantes que identifiquen qué etiquetas HTML podrían usarse para la estructura principal (ej. encabezado, párrafo) y qué propiedades CSS se podrían aplicar para cambiar el color del texto o el tamaño de la fuente.
Los estudiantes trabajan en parejas para crear una página HTML muy básica y luego aplican un par de estilos CSS. Deben intercambiar sus archivos y revisar el código del otro, respondiendo: ¿Es el HTML semántico? ¿Los estilos CSS son claros y aplicados correctamente? Cada pareja debe dar una sugerencia de mejora al otro.
Preguntas frecuentes
¿Cómo enseñar los fundamentos de HTML en 1° Medio?
¿Cuáles son las ventajas de CSS sobre estilos inline en HTML?
¿Cómo evaluar compatibilidad web en navegadores?
¿Cómo el aprendizaje activo ayuda en desarrollo web con HTML y CSS?
Más en Desarrollo de Aplicaciones y Experiencia de Usuario
Introducción al Diseño de Experiencia de Usuario (UX)
Los estudiantes comprenden los principios fundamentales del diseño UX, enfocándose en la usabilidad, accesibilidad y satisfacción del usuario.
2 methodologies
Diseño Centrado en el Usuario (UX)
Los estudiantes aplican metodologías para entender al usuario, sus necesidades y comportamientos antes de diseñar una solución tecnológica.
2 methodologies
Principios de Diseño de Interfaz de Usuario (UI)
Los estudiantes exploran los principios de diseño visual, como la jerarquía, el contraste, la alineación y la repetición, para crear interfaces atractivas y funcionales.
2 methodologies
Prototipado y Wireframing
Los estudiantes crean prototipos de baja y alta fidelidad para visualizar y probar el diseño de una aplicación antes de la codificación.
2 methodologies
Creación de Prototipos Interactivos
Los estudiantes utilizan herramientas de prototipado visual para crear maquetas interactivas de aplicaciones, enfocándose en la navegación y la experiencia del usuario.
2 methodologies
Arquitectura de Información
Los estudiantes organizan el contenido dentro de un sistema digital para facilitar su navegabilidad y la búsqueda de información por parte del usuario.
2 methodologies