Tecnología · 3o de Preparatoria · Desarrollo de Aplicaciones y Arquitectura de Software · II Bimestre

Desarrollo Web Frontend: HTML, CSS y JavaScript

Los estudiantes construyen interfaces web interactivas utilizando HTML para la estructura, CSS para el estilo y JavaScript para la interactividad.

• Aprendizajes Esperados SEP
• SEP EMS: Desarrollo Web
• SEP EMS: Diseño de Interfaces y Experiencia de Usuario

Acerca de este tema

El desarrollo web frontend con HTML, CSS y JavaScript capacita a los estudiantes para construir interfaces web interactivas y responsivas. HTML establece la estructura semántica de las páginas, CSS aplica estilos visuales y diseños adaptables a distintos dispositivos, mientras JavaScript incorpora interactividad como menús desplegables o validaciones dinámicas. Los alumnos exploran cómo estos lenguajes colaboran para crear experiencias de usuario fluidas, respondiendo a preguntas clave sobre su integración, el diseño responsivo y la optimización del rendimiento.

En el plan de estudios SEP de Tecnología para 3° de preparatoria, este tema se ubica en la unidad de Desarrollo de Aplicaciones y Arquitectura de Software. Fortalece competencias en desarrollo web y diseño de interfaces, alineadas con los estándares EMS. Los estudiantes practican la depuración de código, el uso de media queries para responsividad y técnicas para reducir tiempos de carga, fomentando habilidades prácticas en entornos reales de programación.

El aprendizaje activo beneficia este tema porque los estudiantes codifican proyectos completos en equipo, prueban cambios en vivo y evalúan el impacto en dispositivos reales. Esto transforma conceptos teóricos en habilidades tangibles, mejora la retención y desarrolla el pensamiento crítico ante errores comunes en el código.

Preguntas Clave

1. ¿Cómo HTML, CSS y JavaScript trabajan juntos para crear una experiencia web completa?
2. ¿De qué manera el diseño responsivo adapta las interfaces a diferentes dispositivos?
3. ¿Por qué la optimización del rendimiento frontend es crucial para la experiencia del usuario?

Objetivos de Aprendizaje

• Diseñar una página web básica utilizando HTML para estructurar contenido semántico.
• Aplicar estilos visuales a elementos HTML mediante CSS, incluyendo el uso de selectores y propiedades.
• Implementar interactividad simple en una página web con JavaScript, manipulando el DOM.
• Explicar cómo HTML, CSS y JavaScript colaboran para crear una experiencia de usuario funcional y atractiva.
• Evaluar la adaptabilidad de un diseño web a diferentes tamaños de pantalla mediante el uso de media queries.

Antes de Empezar

Fundamentos de Informática y Computación

Por qué: Es necesario comprender conceptos básicos de hardware, software y cómo funciona una computadora para entender el entorno de desarrollo web.

Introducción a la Programación

Por qué: Conocer la lógica de programación, variables y estructuras de control básicas facilita la comprensión de JavaScript.

Vocabulario Clave

HTML (HyperText Markup Language)	Lenguaje de marcado estándar para crear la estructura y el contenido de las páginas web. Define elementos como encabezados, párrafos y enlaces.
CSS (Cascading Style Sheets)	Lenguaje de hojas de estilo utilizado para describir la presentación de un documento HTML. Controla colores, fuentes, espaciado y diseño.
JavaScript	Lenguaje de programación que permite crear contenido dinámico e interactivo en las páginas web. Se usa para animaciones, validaciones y actualizaciones de contenido.
DOM (Document Object Model)	Representación estructurada de un documento HTML o XML como un árbol de nodos. JavaScript interactúa con el DOM para modificar la página.
Diseño Responsivo	Enfoque de diseño web que busca adaptar la interfaz de usuario a diferentes tamaños de pantalla y dispositivos, asegurando una experiencia óptima en todos ellos.

Cuidado con estas ideas erróneas

Idea errónea común

HTML solo sirve para texto plano, sin impacto en el diseño.

Qué enseñar en su lugar

HTML define la estructura semántica que guía a CSS y JS; sin ella, los estilos no se aplican correctamente. Actividades de codificación en parejas ayudan a los estudiantes a ver cómo etiquetas como <header> o <nav> influyen en el layout responsivo, corrigiendo esta idea mediante pruebas visuales inmediatas.

Idea errónea común

CSS no afecta el rendimiento de la página.

Qué enseñar en su lugar

Estilos no optimizados generan repaints y reflows que ralentizan la carga. En rotaciones de estaciones con inspección de elementos, los grupos identifican selectores ineficientes y miden mejoras, lo que aclara el rol de CSS en la experiencia de usuario.

Idea errónea común

JavaScript solo se usa para funciones complejas, no en frontend básico.

Qué enseñar en su lugar

JS habilita interactividad esencial desde el inicio, como eventos en botones. Proyectos colaborativos donde estudiantes agregan listeners paso a paso revelan su simplicidad y poder, disipando miedos mediante depuración guiada en grupo.

Ideas de aprendizaje activo

Enseñanza entre Pares: Estructura Básica con HTML

Los estudiantes crean una página web simple con secciones como encabezado, navegación y contenido principal usando etiquetas semánticas. Luego, agregan enlaces e imágenes. Finalmente, validan el código en un navegador y comparten pantallazos.

30 min·Parejas

Grupos Pequeños: Estilos Responsivos con CSS

En grupos, aplican CSS a la página HTML anterior: definen colores, tipografías y media queries para móviles y desktops. Prueban en herramientas de desarrollador del navegador. Discuten ajustes para mejorar la adaptabilidad.

45 min·Grupos pequeños

Clase Completa: Interactividad con JavaScript

La clase sigue una demostración en pantalla grande para agregar un botón que cambie colores o un formulario con validación. Cada estudiante replica el código en su editor y experimenta variaciones. Comparten resultados en un muro digital.

50 min·Toda la clase

Individual: Optimización de Rendimiento

Cada alumno mide el tiempo de carga de su página con herramientas como Lighthouse, aplica minificación de CSS y JS, y compara antes/después. Documenta mejoras en un informe breve.

25 min·Individual

Conexiones con el Mundo Real

• Los desarrolladores frontend de empresas como Mercado Libre utilizan HTML, CSS y JavaScript para construir las interfaces de usuario de sus plataformas de comercio electrónico, permitiendo a millones de usuarios comprar y vender productos.
• Los diseñadores de experiencia de usuario (UX) en agencias digitales como Ogilvy emplean estos lenguajes para crear sitios web interactivos y atractivos para clientes de diversas industrias, desde automotriz hasta de consumo.
• Los creadores de contenido y bloggers usan editores visuales o escriben código básico para dar estilo a sus artículos y blogs en plataformas como WordPress, asegurando que su contenido sea accesible y agradable para los lectores en cualquier dispositivo.

Ideas de Evaluación

Boleto de Salida

Entregue a cada estudiante una tarjeta con un elemento de interfaz web (ej. un botón, un menú desplegable, un formulario). Pídales que escriban una frase explicando qué lenguaje (HTML, CSS o JavaScript) es el principal responsable de su estructura, estilo e interactividad, respectivamente.

Verificación Rápida

Muestre a los estudiantes una página web simple en el navegador y pregúnteles: '¿Qué parte del código creen que define la disposición de estos elementos en la pantalla?' y '¿Qué lenguaje usarían para hacer que este enlace cambie de color al pasar el cursor sobre él?'

Evaluación entre Pares

Los estudiantes trabajan en parejas para crear una pequeña sección de una página web. Luego, intercambian su código. Cada pareja debe revisar el código del otro, verificando si la estructura HTML es semántica, si el CSS está bien aplicado y si el JavaScript funciona como se espera, proporcionando una retroalimentación constructiva.

Preguntas frecuentes

¿Cómo enseñar HTML, CSS y JavaScript en 3° de preparatoria?

Inicia con proyectos modulares: estructura en HTML, luego estilos CSS y finalmente JS interactivo. Usa editores en línea como CodePen para pruebas rápidas sin instalaciones. Integra estándares SEP con rúbricas que evalúen responsividad y rendimiento, fomentando iteraciones basadas en retroalimentación grupal para alinear con competencias EMS.

¿Cómo el aprendizaje activo ayuda en desarrollo web frontend?

Actividades como codificación en parejas o estaciones de depuración permiten a los estudiantes experimentar fallos reales y soluciones inmediatas, fortaleciendo la comprensión de cómo HTML, CSS y JS interactúan. Proyectos grupales promueven revisión de código entre pares, mejoran la depuración y hacen el diseño responsivo tangible al probar en dispositivos variados, elevando la retención y confianza práctica.

¿Qué es diseño responsivo en frontend?

El diseño responsivo usa media queries en CSS para adaptar layouts a pantallas de distintos tamaños, como móviles o tablets. Los estudiantes lo practican midiendo breakpoints comunes (ej. 768px) y probando con herramientas de emulación. Esto asegura accesibilidad y usabilidad, clave en la optimización de rendimiento para usuarios SEP.

¿Por qué optimizar el rendimiento frontend?

Una carga lenta aumenta la tasa de rebote y frustra al usuario; técnicas como compresión de imágenes, minificación de archivos y lazy loading en JS lo evitan. En actividades individuales con Lighthouse, los alumnos cuantifican mejoras, conectando teoría con métricas reales y alineando con estándares de experiencia de usuario en el currículo EMS.