Actividades prácticas del curso
1. Introducción a las Actividades
La práctica constante es fundamental para consolidar y aplicar los conocimientos adquiridos en un curso de HTML5 Intermedio. A través de actividades prácticas, los estudiantes podrán integrar conceptos de diferentes temas, fortalecer habilidades técnicas y desarrollar una visión crítica sobre el uso del lenguaje en contextos reales. Estas actividades están diseñadas para promover el aprendizaje activo, la creatividad y la resolución de problemas, permitiendo que cada participante experimente con la creación y estructuración de contenidos web de manera efectiva.
Las actividades aquí propuestas integran conocimientos desde la estructura básica del documento, el uso correcto de etiquetas y atributos, hasta la implementación de estructuras semánticas y componentes avanzados. Se recomienda seguir las instrucciones cuidadosamente, dedicar tiempo a cada fase del proceso y reflexionar sobre los resultados obtenidos. La participación activa y el compromiso con cada ejercicio facilitarán la adquisición de competencias sólidas en HTML5, preparándote para afrontar desafíos profesionales en el diseño y desarrollo web.
Instrucciones generales:
- Lee cuidadosamente cada enunciado o planteamiento de las actividades.
- Planifica tu trabajo antes de comenzar a codificar.
- Utiliza las herramientas recomendadas y recursos adicionales cuando sea necesario.
- Documenta tu proceso y resultados en archivos organizados.
- Entrega tus actividades en los plazos establecidos y sigue las rúbricas de evaluación.
2. Actividades Integradoras del Curso
Actividad 1: Proyecto Final Integrador
Descripción: Desarrolla un sitio web completo para un centro estético especializado en tratamientos faciales y corporales. Este proyecto debe reflejar todos los conocimientos adquiridos, incluyendo estructura semántica, uso correcto de etiquetas, atributos, tablas, enlaces internos y externos, así como componentes visuales y funcionales.
Fases:
- Planificación: Define la estructura general del sitio, los contenidos principales y secundarios, y el esquema visual básico.
- Diseño e implementación: Crea las páginas HTML siguiendo las buenas prácticas aprendidas. Incluye encabezados, secciones semánticas, tablas con información de servicios, enlaces internos para navegar entre secciones y enlaces externos a recursos relevantes.
- Evaluación: Revisa la coherencia estructural, accesibilidad y presentación visual. Realiza pruebas en diferentes navegadores.
Entregables: Código fuente completo del sitio web, archivo README con descripción del proyecto y capturas de pantalla.
Rúbrica: Se evaluará la correcta utilización de etiquetas, atributos adecuados, organización lógica del contenido, diseño responsive (si aplica) y calidad en la presentación.
Tiempo estimado: 10-15 horas
Actividad 2: Caso Práctico Complejo
Descripción: Imagina que un cliente solicita una página web para promocionar una clínica estética que ofrece diversos tratamientos. Debes analizar sus necesidades y crear una propuesta técnica que incluya estructura semántica, integración de contenido multimedia, enlaces relevantes y elementos interactivos básicos.
Análisis de situación: Evalúa qué tipos de contenidos (texto, imágenes, videos) serán necesarios. Decide qué etiquetas semánticas usar para mejorar la accesibilidad y SEO. Considera cómo organizarás la información usando listas, tablas o secciones.
Toma de decisiones: Selecciona las etiquetas apropiadas para cada contenido; por ejemplo, <section>, <article>, <nav>. Define atributos necesarios para mejorar la experiencia del usuario.
Justificación técnica: Explica por qué escogiste ciertas etiquetas y atributos específicos para cumplir con objetivos funcionales y estéticos.
Presentación: Prepara un documento o presentación digital donde muestres tu propuesta con ejemplos visuales del código HTML y justificaciones técnicas.
Actividad 3: Portafolio de Evidencias
Descripción: Crea un portafolio digital que documente tu proceso de aprendizaje en cada uno de los temas del curso. Incluye ejemplos prácticos, fragmentos de código resaltantes y reflexiones personales sobre cada etapa.
Estructura requerida por tema:
- Tema 1: Introducción a HTML5: Breve explicación con ejemplo simple del DOCTYPE y estructura básica.
- Tema 2: Encabezado del documento: Uso correcto de etiquetas
<head>,<title>,<link>. - Tema 3: Cuerpo del documento: Ejemplo con enlaces internos y externos, uso de etiquetas formateo como
<b>,<em>, etc. - Tema 4: Atributos en HTML5: Ejemplo con atributos globales en una etiqueta
<img>. - Tema 5: Estructuras básicas: Creación de listas (
<ul>,<ol>) y uso de etiquetas semánticas (<section>,<article>).
Añade reflexiones personales sobre lo aprendido en cada tema. Presenta el portafolio en formato PDF o página web sencilla con enlaces internos.
Actividad 4: Simulación Profesional
Descripción: Participa en una simulación donde actúes como desarrollador web contratado por un centro estético para crear una landing page promocional. Debes definir roles (diseñador, programador), resolver desafíos técnicos (como incluir un formulario simple o enlaces dinámicos) y presentar el trabajo final ante un “cliente”.
Criterios:
- Cumplimiento de requisitos funcionales (enlaces correctos, estructura clara).
- Puesta en práctica correcta de etiquetas semánticas y atributos.
- Adecuada presentación visual básica (uso correcto del formato).
- Puntualidad en entregas parciales y presentación final profesional.
Actividad 5: Investigación y Propuesta Innovadora
Descripción: Investiga una problemática actual relacionada con el diseño web para centros estéticos (por ejemplo: accesibilidad digital o integración multimedia). Propón soluciones innovadoras fundamentadas en contenidos aprendidos durante el curso.
Estructura:
- Análisis breve del problema detectado.
- Sugerencias prácticas usando etiquetas HTML5 adecuadas (ejemplo: uso avanzado de
<picture>, atributos ARIA). - Sustenta tus propuestas con referencias teóricas o ejemplos reales.
- Puedes presentar tu propuesta mediante un documento escrito o presentación digital sencilla.
Actividad 6: Análisis Crítico Transversal
Descripción: Elige un sitio web real relacionado con estética o salud. Analiza cómo utilizan las distintas estructuras HTML5 vistas en el curso. Identifica buenas prácticas y aspectos mejorables desde una perspectiva integral que considere estructura, accesibilidad, usabilidad y diseño semántico. Elabora un informe que resuma tus hallazgos e incluya recomendaciones concretas para mejorar su código HTML.
3. Actividades Colaborativas
A lo largo del curso también se fomentará el trabajo en equipo mediante diversas actividades colaborativas que potenciarán habilidades sociales, comunicación efectiva e integración multidisciplinar:
- Debate estructurado sobre buenas prácticas en HTML5: Los participantes investigan diferentes enfoques para estructurar sitios web accesibles e inclusivos. Se organiza un debate donde cada uno presenta sus argumentos basados en ejemplos reales o teóricos.
- Proyecto colaborativo multidisciplinar: En grupos pequeños crean una página web para un centro estético ficticio. Cada integrante aporta desde su rol (diseñador visual, programador técnico, redactor). Se coordinan tareas usando herramientas colaborativas como Google Drive o GitHub Pages.
- Análisis conjunto de casos prácticos: En equipos revisan sitios web existentes relacionados con salud o belleza. Identifican fortalezas y áreas a mejorar usando criterios aprendidos durante el curso. Presentan sus análisis ante la clase para discusión grupal.
- Símulación grupal profesional: Simulan una reunión con cliente donde deben presentar avances del proyecto web desarrollado por su equipo. Practican habilidades comunicativas, argumentación técnica y resolución rápida de problemas emergentes.
- ¿Puedes definir qué es un documento HTML5 y cuáles son sus componentes principales?
- ¿Sabes diferenciar entre etiquetas semánticas (
<section>,<article>) y no semánticas? - ¿Puedes crear enlaces internos entre páginas o secciones dentro del mismo documento?
- ¿Conoces cómo usar atributos globales como
id,class,<meta>? ¿Para qué sirven? - ¿Sabes construir tablas sencillas y avanzadas incluyendo combinaciones de filas/columnas?
- ¿Puedes estructurar contenidos usando listas (
<ul>,<ol>)? - ¿Has utilizado correctamente etiquetas formateo como
<b>,<em>,<small>? ¿Y etiquetas relacionadas con citas o notas (<blockquote>)? - ¿Comprendes cómo aplicar atributos a diferentes etiquetas para mejorar accesibilidad o funcionalidad?
- ¿Eres capaz de planificar la estructura completa de un sitio web utilizando componentes semánticos?
- Séptico respecto a mi conocimiento teórico-práctico sobre HTML5.
- Puedo crear páginas estructuradas correctamente siguiendo buenas prácticas.
- Manejo adecuado de atributos globales y específicos en diferentes etiquetas.
- Sé capaz de integrar contenidos multimedia básicos usando etiquetas apropiadas.
- Puedo planificar proyectos web completos considerando aspectos semánticos y accesibilidad.
- Estructuras básicas y plantillas útiles:
- Editores recomendados:
- Sublime Text
- Visual Studio Code
- Tutoriales interactivos:
- Pautas para diseño accesible e inclusivo:
- WAI - Web Accessibility Initiative
4. Autoevaluación Final del Curso
Cierra tu proceso formativo realizando una autoevaluación integral que abarque todos los temas tratados. Responde las siguientes preguntas para identificar tus fortalezas y áreas a mejorar: