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 el curso de Construcción de Páginas Web. A través de actividades prácticas, los estudiantes podrán integrar conceptos teóricos y habilidades técnicas, fortaleciendo su competencia para diseñar, desarrollar y publicar sitios web funcionales y atractivos. Estas actividades están diseñadas para simular situaciones reales del entorno profesional, fomentando la creatividad, la resolución de problemas y el trabajo colaborativo.

Las actividades propuestas abarcan desde proyectos integradores hasta ejercicios de análisis crítico, permitiendo una comprensión holística del proceso de construcción web. Se recomienda seguir las instrucciones cuidadosamente, dedicar tiempo a cada fase del desarrollo y reflexionar sobre los aprendizajes obtenidos en cada paso. La participación activa y la autoevaluación serán clave para maximizar los beneficios de estas actividades y prepararse para desafíos reales en el campo laboral.

2. Actividades Integradoras del Curso

Actividad 1: Proyecto Final Integrador

Descripción: Diseñar y desarrollar un sitio web completo que integre todos los conocimientos adquiridos en el curso, desde la estructura con lenguajes de marcas hasta la incorporación de estilos CSS, formularios y elementos multimedia.

Fases de desarrollo:

1. Planificación: Definir el tema del sitio, público objetivo, estructura general (mapa de navegación), tipos de páginas necesarias y contenidos principales.
2. Ejecutación: Crear las páginas HTML siguiendo buenas prácticas, aplicar hojas de estilo CSS, insertar imágenes y multimedia, diseñar formularios funcionales y definir enlaces internos y externos.
3. Evaluación: Revisar la accesibilidad, usabilidad y compatibilidad en diferentes navegadores. Realizar pruebas y ajustes finales.

Entregables esperados: Archivo ZIP con el código fuente completo, documentación breve del proyecto, mapa de navegación y guía de usuario.

Rúbrica de evaluación: Se valorará la correcta estructuración del sitio, uso adecuado de etiquetas HTML, aplicación coherente de estilos CSS, funcionalidad de formularios y multimedia, así como la presentación general.

Tiempo estimado: 10-15 horas

Actividad 2: Caso Práctico Complejo

Planteamiento: Una pequeña empresa necesita renovar su sitio web para mejorar su presencia digital. El proyecto requiere aplicar conocimientos sobre estructura HTML, estilos CSS, accesibilidad, navegación y multimedia.

Análisis:

• Identificar las necesidades del cliente y definir objetivos claros.
• Elegir la estructura adecuada con tipos de páginas según contenidos (inicio, servicios, contacto).
• Decidir qué elementos multimedia incluir (imágenes, vídeos) para potenciar la experiencia del usuario.
• Sugerir mejoras en accesibilidad y usabilidad para ampliar su alcance.

Toma de decisiones: Justificar técnicamente las elecciones realizadas en cuanto a estructura, estilos y elementos multimedia.

Presentación: Elaborar un informe que describa el análisis, decisiones tomadas y prototipo visual (puede ser un esquema o maqueta sencilla). Se puede complementar con ejemplos en código HTML/CSS si se desea.

Actividad 3: Portafolio de Evidencias

Objetivo: Documentar el aprendizaje adquirido durante el curso mediante un portafolio digital que incluya ejemplos prácticos por cada tema abordado.

Estructura requerida:

• Tema 1: Ejemplo de estructura HTML básica con marcas para formato y enlaces.
• Tema 2: Inserción de imágenes y elementos multimedia con código ejemplo.
• Tema 3: Análisis sobre accesibilidad implementada en una página ejemplo.
• Tema 4: Capturas o descripción del entorno de edición web configurado.
• Tema 5: Creación sencilla de una hoja de estilos CSS aplicada a un documento HTML.
• Tema 6: Esquema o mapa funcional con ejemplos de páginas y navegación.
• Tema 7: Formulario simple con controles básicos y atributos utilizados.
• Tema 8: Uso básico de plantillas en una página web ejemplo.

Añadir reflexiones personales sobre cada experiencia y autoevaluar el nivel alcanzado. Presentar en formato digital (PDF o página web sencilla) con enlaces o capturas que respalden cada elemento.

Actividad 4: Simulación Profesional

Caso simulado: Asumir el rol de diseñador web contratado por una organización sin fines de lucro que requiere un sitio accesible e interactivo para promover su causa social.

Roles y responsabilidades:

• Análisis del briefing para definir estructura y contenidos.
• Diseño visual usando estilos CSS adecuados para accesibilidad.
• Implementación técnica con HTML5 incluyendo formularios para voluntariado o donaciones.
• Sugerencias para mejorar la usabilidad en dispositivos móviles.

Sitúa al estudiante en un escenario real donde debe resolver desafíos técnicos relacionados con accesibilidad, organización del contenido y presentación profesional. La evaluación se basará en la calidad técnica, creatividad y cumplimiento del brief profesional.

Actividad 5: Investigación y Propuesta Innovadora

Tarea: Investigar una problemática actual en construcción web (como accesibilidad digital o optimización para buscadores) y proponer soluciones innovadoras fundamentadas en los contenidos del curso.

Estructura sugerida:

1. Análisis breve del problema detectado.
2. Sugerencias técnicas aplicables (ejemplo: uso correcto de etiquetas semánticas, estilos accesibles).
3. Caso práctico hipotético donde se aplique la propuesta.
4. Presentación ejecutiva (puede ser un informe o presentación sencilla).

Actividad 6: Análisis Crítico Transversal

Pensamiento integrador: Elegir uno o varios temas del curso (por ejemplo, estructuras HTML + estilos CSS + accesibilidad) y analizar cómo se relacionan entre sí para lograr un sitio web efectivo. Identificar ventajas, limitaciones e interdependencias. Elaborar un resumen que refleje las conexiones entre módulos e incluya recomendaciones para futuros desarrollos web integrados.

3. Actividades Colaborativas

A continuación se presentan algunas actividades diseñadas para fomentar el trabajo en equipo durante el curso:

1. Debate estructurado sobre buenas prácticas web

• Punto de partida: Discusión sobre los aspectos más importantes en la construcción web moderna (accesibilidad, usabilidad, diseño responsive).
• Número de participantes: grupos pequeños (3-4 personas).
• Criterios: preparar argumentos sólidos basados en conceptos aprendidos; presentar conclusiones al grupo completo.

2. Proyecto colaborativo multidisciplinar

• Cada equipo diseña un mini sitio web aplicando todos los temas abordados (estructura HTML, estilos CSS, multimedia).
• Cada integrante asume roles específicos: programador HTML/CSS, diseñador visual, especialista en accesibilidad o contenido textual.

3. Análisis conjunto de casos prácticos

• Sistema: analizar ejemplos reales o simulados en equipo; identificar buenas prácticas o errores comunes; proponer mejoras.

4. Sprint grupal para crear prototipo rápido

• Diseñar una página sencilla en un tiempo limitado (ejemplo: 2 horas), aplicando conocimientos clave; presentar resultados al grupo con retroalimentación mutua.

4. Autoevaluación Final del Curso

A continuación se propone una serie de preguntas que permiten evaluar integralmente lo aprendido. Se recomienda responderlas honestamente para identificar fortalezas y áreas a mejorar antes de finalizar el curso.

1. Pregunta opción múltiple: ¿Cuál es la función principal del lenguaje HTML? a) Dar formato al texto, b) Estructurar contenidos web, c) Aplicar estilos visuales, d) Ejecutar scripts
2. Pregunta desarrollo corto: Describe brevemente qué son las hojas de estilo CSS y su utilidad en una página web.
3. Caso práctico para resolver: Tienes que crear un formulario que permita a los usuarios registrarse. ¿Qué controles básicos debes incluir? Explica brevemente cómo garantizar accesibilidad en este formulario.
4. Pregunta opción múltiple: ¿Qué elemento HTML se usa para insertar imágenes? a)
   , b) , c) , d)
5. Pregunta desarrollo corto: Menciona dos ventajas principales del uso de plantillas en la construcción web profesionalmente eficiente.

Criterios para la Rúbrica Final

• Nivel técnico demostrado en cada actividad (claridad, funcionalidad)
• Cumplimiento de requisitos especificados
• Adecuación estética y usabilidad
• Análisis crítico e innovación en propuestas
• Presentación clara y ordenada

5. Recursos Adicionales

• Documentación MDN Web Docs sobre HTML
• Guía completa sobre CSS en MDN
• Directrices WCAG para accesibilidad web
• Plataforma online para practicar código HTML/CSS interactivo
• Colección de plantillas gratuitas disponibles en HTML5 UP.