Actividades prácticas del curso
1. Introducción a las Actividades
La práctica constante y activa es fundamental para consolidar los conocimientos adquiridos en este curso sobre creación de páginas web con lenguaje de marcas. A través de actividades prácticas, los estudiantes podrán aplicar conceptos teóricos, experimentar con herramientas y técnicas, y desarrollar habilidades que les permitan afrontar desafíos reales en la construcción y publicación de sitios web. Estas actividades están diseñadas para integrar todos los temas del curso, desde la estructura básica y el uso de marcas hasta la incorporación de elementos multimedia, la accesibilidad y las herramientas de edición.
Se recomienda abordar cada actividad con compromiso y dedicación, siguiendo las instrucciones proporcionadas y reflexionando sobre los aprendizajes en cada paso. La participación activa en estas tareas facilitará no solo la comprensión técnica, sino también el desarrollo de una mirada crítica y creativa para diseñar páginas web efectivas, accesibles y profesionales.
Las actividades están estructuradas para ser progresivas, permitiendo que cada una refuerce lo aprendido previamente y prepare al estudiante para proyectos más complejos. Es importante dedicar el tiempo estimado a cada una, aprovechar los recursos sugeridos y realizar las entregas en los formatos solicitados. La práctica constante será la clave para convertir conocimientos teóricos en habilidades prácticas sólidas.
2. Actividades Integradoras del Curso
Actividad 1: Proyecto Final Integrador
Descripción: Diseña y desarrolla un sitio web completo que integre todos los conocimientos adquiridos en el curso. El proyecto debe incluir una estructura bien definida usando marcas, enlaces internos y externos, incorporación de imágenes y multimedia, además de aplicar técnicas básicas de accesibilidad y usabilidad.
Fases de desarrollo:
- Planificación: Define el tema del sitio, estructura general, contenido principal y elementos multimedia a incluir.
- Ejecutación: Escribe el código HTML siguiendo buenas prácticas, inserta imágenes, enlaces, elementos multimedia y marcas para formato.
- Evaluación: Revisa la accesibilidad, usabilidad y compatibilidad en diferentes navegadores.
Entregables: Archivo HTML principal, documentación breve del proceso, lista de recursos utilizados.
Rúbrica de evaluación: Se valorará la correcta aplicación de marcas, organización del contenido, inclusión de multimedia, accesibilidad básica y presentación general.
Tiempo estimado: 10-15 horas
Actividad 2: Caso Práctico Complejo
Planteamiento: Una pequeña empresa desea crear su página web institucional que incluya información sobre sus servicios, ubicación mediante mapas interactivos, testimonios con marcas para formato y enlaces a redes sociales.
Análisis: Evalúa las necesidades del cliente, selecciona las técnicas apropiadas (marcas para formato, enlaces, mapas), y diseña una propuesta técnica que incluya estructura HTML y recomendaciones para mejorar accesibilidad y usabilidad.
Toma de decisiones: Decide qué elementos multimedia incluir (imágenes o vídeos), cómo organizar la información usando capas o marcos si aplica, y cómo garantizar accesibilidad (uso de atributos alt en imágenes).
Justificación técnica: Explica por qué eliges ciertas marcas o técnicas específicas para resolver cada requerimiento.
Presentación: Prepara un informe o presentación breve explicando la solución propuesta con ejemplos visuales o fragmentos de código.
Actividad 3: Portafolio de Evidencias
Objetivo: Documentar el proceso de aprendizaje mediante un portafolio digital que incluya ejemplos prácticos realizados en cada tema del curso.
Estructura requerida:
- Tema 1: Ejemplo de estructura básica con marcas para formato y enlaces.
- Tema 2: Inserción de imágenes y elementos multimedia con código ejemplo.
- Tema 3: Elementos que demuestren accesibilidad (atributos alt, navegación sencilla).
- Tema 4: Capturas o descripciones del editor web utilizado y sus funciones principales.
Reflexiones: Incluye una breve autoevaluación sobre lo aprendido en cada tema y cómo planeas aplicar estos conocimientos en futuros proyectos.
Formato y presentación: Puede ser un documento PDF o una página web sencilla que organice claramente cada evidencia con explicaciones breves.
Actividad 4: Simulación Profesional
Caso simulado: Eres un diseñador web contratado por una organización sin fines de lucro que necesita su primera página web. Tu rol incluye definir la estructura básica usando marcas, insertar imágenes relevantes, agregar enlaces a redes sociales y asegurar cierta accesibilidad básica.
Situações a resolver:
- Crea un esquema inicial del sitio con estructura semántica usando marcas apropiadas.
- Añade imágenes descriptivas con atributos alt adecuados.
- Incluye enlaces internos a diferentes secciones del sitio y enlaces externos a recursos útiles.
- Sugiere elementos multimedia simples (como un vídeo introductorio) si es posible.
Criterios de éxito profesional: Calidad técnica del código, coherencia en la organización del contenido, atención a la accesibilidad básica y presentación clara del proyecto finalizado.
Actividad 5: Investigación y Propuesta
Tema: Investiga cómo las técnicas de marcado pueden mejorar la accesibilidad en sitios web educativos para personas con discapacidad visual o auditiva.
Paso a paso:
- Búsca artículos académicos o recursos confiables relacionados con accesibilidad web basada en marcas HTML.
- Identifica buenas prácticas recomendadas por expertos en el área.
- Crea una propuesta innovadora que aplique estos conocimientos para mejorar sitios existentes o diseñar uno nuevo enfocado en accesibilidad total.
Punto fuerte: Fundamenta tu propuesta usando contenidos del curso (como atributos específicos o técnicas vistas).
Presentación ejecutiva: Elabora un resumen visual o escrito dirigido a un público no técnico explicando tu propuesta e impacto potencial.
Actividad 6: Análisis Crítico Transversal
Tema a analizar: La relación entre estructura semántica (marcas), multimedia e impacto en usabilidad y accesibilidad en páginas web educativas.
Análisis:
- Distingue cómo cada módulo contribuye a mejorar la experiencia del usuario final.
- Identifica conexiones entre el uso correcto de marcas para formato y enlaces con la accesibilidad global del sitio.
- Sintetiza recomendaciones integradoras para diseñar páginas efectivas considerando todos los aspectos aprendidos.
3. Actividades Colaborativas
A lo largo del curso también se fomentarán actividades grupales que potenciarán el trabajo en equipo y el aprendizaje compartido. Entre ellas se incluyen debates estructurados sobre temas clave como la importancia de la accesibilidad web o las mejores prácticas en diseño responsive; proyectos colaborativos donde los equipos diseñarán prototipos básicos integrando conceptos aprendidos; estudios de casos presentados por grupos donde analizarán soluciones técnicas aplicadas; y simulaciones grupales que replican entornos profesionales reales enfrentando desafíos comunes en creación web. Estas actividades promoverán habilidades comunicativas, cooperación efectiva y pensamiento crítico colectivo. Se recomienda que los equipos sean multidisciplinarios cuando sea posible para enriquecer las perspectivas durante el proceso creativo e innovador.
4. Autoevaluación Final del Curso
Culminando el aprendizaje, se propone una autoevaluación integral compuesta por preguntas variadas que cubren todos los temas abordados. Estas incluyen preguntas de opción múltiple sobre conceptos técnicos (por ejemplo: ¿Qué atributos se usan para mejorar la accesibilidad en imágenes?), preguntas cortas donde reflexionar sobre procesos (como describir cómo insertar un mapa interactivo), casos prácticos donde resolver problemas específicos (crear una estructura HTML simple con marcas semánticas), además de rúbricas que permitan evaluar objetivamente el nivel alcanzado. Esta autoevaluación busca fomentar la reflexión crítica sobre lo aprendido, identificar fortalezas y áreas a mejorar, así como consolidar las competencias adquiridas como creador/a de páginas web eficientes, accesibles y bien estructuradas. La lista final ayudará a los estudiantes a visualizar su progreso general en todo el curso completo.
5. Recursos Adicionales
- Documentación oficial HTML - MDN Web Docs
- Directrices WCAG para accesibilidad web
- Plantillas gratuitas para portafolios digitales
- Herramientas gratuitas de edición web online
- Recursos prácticos para aprender HTML desde cero
- Plantillas básicas en formato HTML disponibles para descargar como referencia rápida
- Sugerencias para realizar pruebas en diferentes navegadores (Chrome DevTools, Firefox Developer Tools)
- Cursos complementarios sobre diseño responsive y buenas prácticas en usabilidad