Creación de Páginas Web (Curso con contenido de IA)- Copy- Copy

Los alumnos aprenden qué son las matrices (listas) en MakeCode y cómo almacenar muchos valores bajo un mismo nombre. Durante la clase, crearán el juego «The Games - Parte 2», en el que el jugador recibe equipamiento de una matriz y se enfrenta a oleadas de monstruos invocados. El resultado final es una arena funcional con distribución automática de equipamiento y aparición de enemigos.

El objetivo de la lección es aprender sobre CSS: los alumnos descubrirán qué es una hoja de estilo en cascada, cómo incorporarla directamente en una página HTML y cómo utilizar selectores de etiquetas, identificadores y clases para aplicar estilos a elementos concretos. El resultado final será una página de blog sencilla compuesta por un encabezado, un banner y una sección con entradas con un estilo similar al de las publicaciones de Facebook.

Los alumnos aprenderán sobre el modelo de caja de CSS (margen, borde y relleno) y las etiquetas de sección de HTML. Durante la clase, crearán una ficha de jugador con las secciones: biografía, equipamiento y logros, utilizando el modelo de caja para aplicar estilos a cada bloque. Esto les ayudará a comprender cómo calcula el navegador el tamano de los elementos y cómo crear disenos de página claros.

Los alumnos aprenderán las etapas de la creación de un producto web y los estándares para el diseno de maquetaciones de páginas. Durante la clase, crearán una página sencilla en HTML5 con una maquetación semántica que incluya navegación, un encabezado, secciones de contenido y un pie de página. Al finalizar la clase, cada alumno tendrá una página funcional con navegación desplazable y una estructura clara.

La clase introduce a los alumnos al mundo del color y las formas en CSS: desde los modelos de color y las formas de definir los colores, pasando por los bordes redondeados y las sombras, hasta los degradados. Los participantes crean una postal con un paisaje compuesto exclusivamente por elementos HTML y CSS, experimentando con las propiedades visuales. Al final de la sesión, cada alumno publica la postal terminada en GitHub Pages.

En esta sesión, crearemos una galería de fotos usando HTML y CSS, aprendiendo a controlar el diseno y el flujo de los elementos en una página web. Exploraremos métodos para lograr la responsividad, de modo que la galería se vea correctamente en distintos tamanos de pantalla. Al final de la sesión, cada participante tendrá una página web funcional y responsive con una galería formada por secciones semánticas de HTML5.

En esta lección, los estudiantes aprenderán tres métodos para animar páginas web: transformaciones, transiciones y animaciones en CSS. Paso a paso, construirán una escena interactiva con una ambulancia, en la que la sirena parpadea al pasar el cursor, las ruedas giran continuamente y un cartel se agranda suavemente. El resultado final será una página animada completa que cada estudiante podrá seguir desarrollando y presentar como su propio proyecto.

Los participantes reforzarán los principios de la responsividad y repasarán el modelo de caja, los degradados, los colores y el HTML5 semántico. Durante la sesión, disenarán y construirán de forma independiente un proyecto responsive de ranking de teléfonos, organizando tarjetas en una cuadrícula flexible que se vea bien en distintas pantallas. También usarán IA para generar contenido actualizado del ranking y gráficos de modelos de teléfonos.