Cursos
Completo
Fundamentos de HTML y CSS
Creado por Grupo I.
Cómo fue en el aula
Todavía nadie ha contado cómo le fue con este recurso.
Descripción del Curso
Este curso, Pensamiento Computacional, está diseñado para estudiantes de 15 a 16 años, con la finalidad de desarrollar habilidades de razonamiento lógico y creativo para resolver problemas reales y académicos mediante enfoques computacionales. El curso se fundamenta en el pensamiento computacional: descomposición de problemas, reconocimiento de patrones, abstracción y diseño de algoritmos simples, así como en la capacidad de comunicar soluciones de forma clara y de colaborar con otros. A lo largo de las unidades, los estudiantes explorarán situaciones de la vida cotidiana y de áreas curriculares como matemáticas, ciencias y tecnología, aprendiendo a plantear soluciones prácticas con herramientas digitales accesibles.
Objetivo:
Desarrollar en los estudiantes la capacidad de pensar de forma computacional para identificar soluciones eficientes, estructuradas y éticas a problemas diversos, utilizando recursos digitales de manera responsable.
Específicos:
- Descomponer problemas complejos en partes manejables y definir metas de solución.
- Reconocer patrones y regularidades para prever comportamientos y simplificar soluciones.
- Formular algoritmos y describir pautas para su implementación, usando pseudocódigo o diagramas simples.
- Probar, depurar y ajustar soluciones propuestas, evaluando su efectividad y límites.
- Comunicar ideas, pasos y resultados de forma clara, ya sea oralmente, por escrito o mediante representaciones visuales.
- Trabajar de forma colaborativa en proyectos, gestionando roles, tiempos y recursos.
- Aplicar el pensamiento computacional en contextos transdisciplinarios y en proyectos prácticos.
- Desarrollar una mirada crítica sobre el uso de tecnología, la seguridad digital y la ética en la recopilación y manejo de datos.
- Reflexionar sobre su propio aprendizaje y estrategias para mejorar.
La estructura del curso se apoya en unidades que permiten progresar desde conceptos básicos hasta la aplicación en proyectos simples: Unidad 1, introducción al pensamiento computacional; Unidad 2, descomposición, patrones y algoritmos; Unidad 3, abstracción y datos; Unidad 4, proyectos integradores y evaluación.
Competencias
- Desarrollar pensamiento computacional para abordar problemas de la vida real y académicos.
- Aplicar descomposición, reconocimiento de patrones, abstracción y diseño de algoritmos en contextos prácticos.
- Resolver problemas de forma lógica y creativa, evaluando diferentes soluciones y sus pasos.
- Trabajar en equipo, comunicando ideas técnicas y resultados de manera clara y colaborativa.
- Utilizar herramientas digitales de forma responsable, segura y ética.
- Analizar y reflexionar sobre el proceso de aprendizaje y sobre la eficiencia de las soluciones propuestas.
Requerimientos
- Asistencia regular y participación activa en clase y en proyectos grupales.
- Dispositivo digital con acceso a internet y herramientas básicas de programación o simuladores en línea.
- Capacidad de lectura y escritura en español para comprender conceptos y comunicar soluciones.
- Entrega oportuna de tareas, ejercicios y proyectos, con evidencias de razonamiento y procesos.
- Actitud de colaboración, respeto por las ideas de otros y cumplimiento de normas de convivencia y seguridad digital.
Unidades del Curso
1
Unidad 1: Introducción a HTML y CSS
<p>En esta unidad se presentan los fundamentos de HTML y CSS, el entorno de trabajo y la relación entre estructura y estilo. Se explorarán conceptos básicos de una página web, su estructura y la idea de que HTML da contenido y CSS lo presenta visualmente.</p>
Objetivos de Aprendizaje
- Identificar la estructura de un documento HTML (, , , ).
- Distinguir entre HTML para contenido y CSS para estilo, y comprender la diferencia entre etiquetas semánticas y no semánticas.
- Crear una página simple con textos, encabezados, enlaces e imágenes, respetando la estructura del documento.
Contenidos Temáticos
- Estructura básica de un documento HTML: revisión de doctype, etiquetas html, head y body, y el flujo del contenido de una página.
- Textos, encabezados y enlaces: uso de h1-h6, p y a; atributos href; buenas prácticas de accesibilidad básica.
- Imágenes y recursos estáticos simples: etiqueta img, atributos src y alt, y consideraciones de accesibilidad.
- Introducción a CSS y su vinculación: qué es CSS, cómo enlazar un archivo CSS y conceptos básicos de estilo.
Actividades
- Actividad 1: Tu primera página HTML - Crear una página simple con un título, al menos dos párrafos y un enlace. Puntos clave: estructura del documento, etiquetas básicas y navegación entre enlaces. Aprendizajes: comprender la jerarquía de HTML y la posibilidad de enlazar páginas.
- Actividad 2: Añadir una imagen y una breve descripción - Insertar una imagen con texto alternativo y un pie de página. Puntos clave: uso de alt y descripción clara; prácticas de accesibilidad. Aprendizajes: impacto de las imágenes en la accesibilidad y el contenido.
- Actividad 3: Introducción a CSS - Vincular un archivo CSS y aplicar estilos simples (color de fondo y color de texto). Puntos clave: sintaxis de CSS y la relación HTML-CSS. Aprendizajes: cómo cambiar apariencia sin alterar el HTML.
Evaluación
- Se evaluará la correcta estructura de un documento HTML (doctype, html, head, body) y la presencia de al menos un título, párrafos y un enlace.
- Se evaluará la inclusión de una imagen con atributo alt y la correcta vinculación de CSS básica.
- Se valorará la capacidad de explicar, de forma breve, la función de HTML y CSS y la relación entre contenido y estilo.
Duración
2 semanas
2
Unidad 2: Estructura y etiquetas HTML básicas
<p>Esta unidad aborda la creación de contenido estructurado en HTML, enfatizando el uso de etiquetas semánticas, encabezados, párrafos, listas y enlaces. Se introducen prácticas para una página bien organizada y accesible.</p>
Objetivos de Aprendizaje
- Emplear etiquetas de encabezado, párrafo, lista y enlace de forma adecuada.
- Utilizar etiquetas semánticas para estructurar el contenido (header, nav, main, section, article, aside, footer).
- Incorporar imágenes con atributos alt y practicar conceptos de accesibilidad básica.
Contenidos Temáticos
- Encabezados, párrafos y listas: organización de texto con h1-h6, p, ul/ol y li.
- Enlaces, imágenes y atributos: creación de vínculos, destinos y uso de alt en imágenes.
- Estructura semántica: uso de header, nav, main, section, article, aside y footer para distribuir contenido.
- Buenas prácticas y accesibilidad básica: lectura clara, contraste y texto alternativo.
Actividades
- Actividad 1: Maqueta de una página con semántica - Construir una página con header, nav, main y footer, con al menos dos secciones (article/section). Puntos clave: semántica y estructura lógica. Aprendizajes: cómo organizar contenido para lectores y motores de búsqueda.
- Actividad 2: Contenido con listas y enlaces - Añadir listas y enlaces internos/externos con texto descriptivo. Puntos clave: claridad del enlace y accesibilidad. Aprendizajes: navegación clara y estructura textual.
- Actividad 3: Imágenes con alt - Insertar imágenes con atributos alt descriptivos y discutir su importancia para la accesibilidad. Aprendizajes: accesibilidad y buenas prácticas.
Evaluación
- Evaluación de la correcta utilización de encabezados, párrafos y listas para estructurar contenido.
- Ejecución adecuada de etiquetas semánticas (header, nav, main, section, article, aside, footer).
- Uso correcto de imágenes con texto alternativo y claridad de los enlaces.
Duración
2 semanas
3
Unidad 3: Introducción a CSS y el modelo de cajas
<p>En esta unidad se introduce CSS para estilizar HTML. Se exploran selectores básicos, propiedades de color y tipografía, y se comprende el modelo de cajas (box model) para gestionar márgenes, bordes y rellenos, con un diseño básico de página.</p>
Objetivos de Aprendizaje
- Aplicar selectores básicos (elemento, clase,Id) para estilizar elementos HTML.
- Utilizar propiedades de color, fuente, tamaño y espaciado; comprender el box model (padding, border, margin).
- Crear un diseño básico con varias secciones y navegación simple.
Contenidos Temáticos
- Introducción a CSS y sintaxis: cómo escribir reglas CSS y enlazarlas a HTML.
- Selectores y propiedades básicas: selectores de elemento, clase e ID; propiedades simples de color y tipografía.
- Modelo de cajas (box model): contenido, padding, borde, margen y su influencia en el diseño.
- Diseño básico y layout: aplicar estilos de fondo, fuentes, espaciado y crear secciones visualmente distintas.
Actividades
- Actividad 1: Enlazar CSS y cambiar estilos - Vincular un archivo CSS y modificar color de fondo y texto de una página. Puntos clave: sintaxis de reglas; cascada y herencia. Aprendizajes: ver la influencia de CSS en la apariencia.
- Actividad 2: Aplicar clases e IDs - Crear estilos usando clases e IDs para diferenciar partes de la página. Aprendizajes: organización de estilos y reutilización.
- Actividad 3: Explorar el box model - Ajustar padding, border y margin en diferentes elementos para observar cambios en el diseño. Aprendizajes: control del espacio y tamaño de los elementos.
- Actividad 4: Diseñar una página con secciones - Construir una página con header, main y footer estilizados de forma consistente. Aprendizajes: cohesión visual y estructura de diseño.
Evaluación
- Dominio de selectores básicos (elemento, clase, ID) para aplicar estilos.
- Aplicación adecuada del box model y de estilos de texto y fondo para una página legible.
- Creación de un diseño básico con estructura clara y navegación simple.
Duración
2 semanas
4
Unidad 4: Proyecto final y buenas prácticas
<p>Esta unidad integra HTML y CSS para crear una página web completa, con énfasis en accesibilidad, validación y presentación coherente. Se realizará un proyecto final y se discutirán buenas prácticas de desarrollo web.</p>
Objetivos de Aprendizaje
- Crear una página con estructura HTML semántica y estilo CSS aplicado de forma coherente.
- Aplicar buenas prácticas de accesibilidad y validación (W3C, alt text, contrastes, estructuras lógicas).
- Presentar un proyecto final y justificar decisiones de diseño simples.
Contenidos Temáticos
- Planificación y esqueleto de la página: definir estructura HTML, secciones y contenido a presentar.
- Diseño coherente: paleta, tipografía y estilo: elegir colores, fuentes y consistencia visual a lo largo de la página.
- Validación y accesibilidad: usar herramientas de validación y aplicar mejoras de accesibilidad (alt text, etiquetas semantics, contraste).
Actividades
- Actividad 1: Plan del proyecto - Esbozar la estructura de la página y decidir qué contenido incluir. Puntos clave: organización, semántica y objetivos de diseño. Aprendizajes: planificación previa para un desarrollo ordenado.
- Actividad 2: Implementación del proyecto - Construir la página con HTML semántico y aplicar CSS coherente. Aprendizajes: integración de contenido y estilo.
- Actividad 3: Accesibilidad y validación - Revisar la página con herramientas de validación y mejorar accesibilidad (alt, encabezados claros, contraste). Aprendizajes: calidad y usabilidad.
- Actividad 4: Presentación del proyecto - Explicar decisiones de diseño y mostrar el resultado final. Aprendizajes: capacidad de comunicar ideas de diseño y justificar elecciones.
Evaluación
- Precisión de la estructura HTML semántica y correcta aplicación de CSS para todo el proyecto.
- Conformidad con buenas prácticas de accesibilidad y uso de herramientas de validación.
- Calidad y claridad en la presentación del proyecto final, con justificación de decisiones de diseño.
Duración
2 semanas
Crea tus propios cursos con EdutekaLab
Diseña cursos completos con unidades, objetivos y actividades usando IA.
Comenzar gratis