Diseño y desarrollo web

1. Introducción a los principios de diseño centrado en el usuario.

   Descripción: fundamentos de usabilidad, accesibilidad, rendimiento y diseño responsive y su influencia en la experiencia del usuario.

2. Usabilidad y experiencia de usuario (UX).

   Descripción: conceptos de usabilidad, heurísticas y métodos simples de evaluación de UX.

3. Accesibilidad y WCAG básicas.

   Descripción: barreras comunes y prácticas para hacer sitios más accesibles para diferentes usuarios.

4. Rendimiento web y buenas prácticas de carga.

   Descripción: métricas clave (respuesta, tamaño de recursos, rendering) y estrategias para optimizarlas.

5. Diseño responsive y adaptabilidad.

   Descripción: principios de reactividad y uso de grids y media queries para distintos dispositivos.

• Actividad 1: Análisis rápido de usabilidad – Observa tres sitios web y anota al menos 3 prácticas de usabilidad que observes. Tema clave: entender qué funciona y qué no desde la experiencia del usuario. Aprendizajes: reconocer elementos que facilitan o dificultan la interacción.
• Actividad 2: Evaluación de accesibilidad básica – Realiza una revisión de accesibilidad en dos páginas simples y propone mejoras mínimas. Aprendizaje: identificar barreras y aplicar soluciones simples de accesibilidad.
• Actividad 3: Medición de rendimiento básico – Utiliza herramientas simples (p. ej., auditoría rápida) para identificar áreas de mejora en la carga de una página. Aprendizajes: reconocer causas comunes de lentitud y posibles optimizaciones.
• Actividad 4: Diseño responsive con bocetos – Crea bocetos de una landing page que se adapte a móvil y escritorio, destacando puntos de quiebre. Aprendizaje: entender la importancia de la adaptabilidad.

• Evaluación por criterio de cada principio: comprensión y capacidad de identificar prácticas de usabilidad, accesibilidad, rendimiento y diseño responsive (40%).
• Análisis de casos prácticos: informe breve que compare dos sitios web y proponga mejoras medibles (30%).
• Participación y reflexión en clase sobre aprendizaje activo (30%).

2 semanas

1. Visión general de las tres tecnologías.

   Descripción: qué hace cada tecnología y cómo se complementan en una página web.

2. Estructura HTML básica vs estilo CSS y comportamiento JavaScript.

   Descripción: diferencias entre contenido, presentación y comportamiento.

3. Integración y flujo de desarrollo.

   Descripción: cómo html, css y js interactúan en un proyecto típico.

4. Herramientas y buenas prácticas de edición.

   Descripción: editores, herramientas de desarrollo y organización de archivos.

5. Ejemplos prácticos de uso.

   Descripción: casos simples para entender la interacción entre las tres tecnologías.

• Actividad 1: Construcción de una página estática simple – Crear una página básica usando HTML semántico, aplicar estilos simples con CSS y discutir dónde encaja JavaScript si fuera necesario. Aprendizaje: entender roles y límites de cada tecnología.
• Actividad 2: Lectura de código y reflexión – Analizar fragmentos de código que usan HTML, CSS y JS para identificar la función de cada parte. Aprendizaje: identificar la separación de responsabilidades.
• Actividad 3: Mini reto de integración – Implementar un pequeño formulario con validación básica en JS y estilos con CSS para realzar su presentación. Aprendizaje: ver la interacción entre tecnologías.
• Actividad 4: Visualización de devtools – Explorar herramientas del navegador para inspeccionar HTML, CSS y JS y comprender su influencia en la página. Aprendizaje: uso de herramientas para depurar.

• Comprensión de roles y uso correcto de HTML, CSS y JavaScript (40%).
• Proyecto corto de integración: página estática con estilos y comportamiento mínimo (35%).
• Participación y precisión en ejercicios de lectura de código (25%).

2 semanas

1. HTML5 semántico: etiquetas y roles.

   Descripción: diferencias entre etiquetas como header, nav, main, section, article, aside y footer.

2. Estructura de una página con marked sections.

   Descripción: cómo organizar el contenido de forma lógica y accesible.

3. Accesibilidad y navegación por landmarks.

   Descripción: cómo los cambios semánticos benefician a lectores y tecnologías asistivas.

4. Práctica de una página de noticias o blog.

   Descripción: aplicar estructuras semánticas en un ejemplo real.

• Actividad 1: Identificación de etiquetas semánticas – Distinguir y justificar el uso de etiquetas HTML5 en varias secciones de una página. Aprendizaje: seleccionar etiquetas adecuadas por función y significado.
• Actividad 2: Construcción de una página semántica – Crear una página simple usando header, nav, main, section, article, aside y footer. Aprendizaje: aplicar semántica correctamente.
• Actividad 3: Mejora de accesibilidad – Revisar semántica para mejorar navegación por lectores de pantalla. Aprendizaje: entender el impacto de la semántica en accesibilidad.
• Actividad 4: Revisión entre pares – Intercambiar archivos HTML y evaluar si cumplen criterios semánticos. Aprendizaje: reciprocidad y verificación de buenas prácticas.

• Uso correcto de etiquetas semánticas y estructura de la página (40%).
• Justificación de elecciones semánticas y mejoras de accesibilidad (30%).
• Producto final con organización clara y legible (30%).

2 semanas

1. Planificación de una landing page.

   Descripción: objetivos, público, jerarquía de información y flujo de conversión.

2. Estructura HTML y marcado semántico para una landing.

   Descripción: usar header, nav, main, section y footer con contenido relevante.

3. Maquetación con CSS: responsive con Flexbox/Grid.

   Descripción: técnicas de diseño adaptable y distribución de elementos.

4. Accesibilidad en diseño y color.

   Descripción: contraste de colores, foco visible y navegación accesible.

5. Práctica de landing page completa.

   Descripción: implementación de una página lista para despliegue básico.

• Actividad 1: Planificación de la landing – Definir objetivos, público y estructura de contenido. Aprendizaje: claridad de propósito y jerarquía de información.
• Actividad 2: Implementación semántica – Crear la estructura HTML de la landing con elementos semánticos. Aprendizaje: organización y accesibilidad desde el código.
• Actividad 3: Estilizado y responsive – Aplicar CSS para adaptar el diseño a móvil, tablet y escritorio. Aprendizaje: técnicas de responsive design y consistencia visual.
• Actividad 4: Pruebas de accesibilidad – Verificar contraste y navegación por teclado; ajustar estilos si es necesario. Aprendizaje: mejoras de usabilidad para todos los usuarios.

• Calidad de la estructura semántica y legibilidad (35%).
• Responsive y consistencia visual (35%).
• Conformidad con pautas de accesibilidad y claridad de código (20%).
• Presentación final y documentación (10%).

2 semanas

1. Tipografía y legibilidad.

   Descripción: elección de fuentes, tamaños y jerarquía para facilitar la lectura.

2. Color y contraste.

   Descripción: paletas, contraste y accesibilidad visual.

3. Espaciado, rejilla y alineación.

   Descripción: diseño modular y consistencia en márgenes y paddings.

4. Práctica de UI básica.

   Descripción: aplicar conceptos para diseñar una pequeña interfaz de usuario.

• Actividad 1: Selección tipográfica – Elegir tipografías para títulos y cuerpo y justificar la legibilidad. Aprendizaje: jerarquía tipográfica y legibilidad.
• Actividad 2: Paleta de color y contraste – Crear una paleta de 3-4 colores con criterios de accesibilidad y aplicar en una maqueta. Aprendizaje: contraste y armonía de color.
• Actividad 3: Espaciado y rejilla – Diseñar una interfaz con una rejilla simple y aplicar márgenes/padding consistentes. Aprendizaje: organización visual y claridad.
• Actividad 4: Mini prototipo – Montar una pequeña interfaz estática aplicando los principios aprendidos.

• Calidad de las decisiones tipográficas y de espaciado (35%).
• Coherencia de colores y accesibilidad visual (30%).
• Prototipo funcional y claridad de la interfaz (25%).
• Documentación y presentación (10%).

2 semanas

1. Fundamentos de JavaScript para interacción.

   Descripción: variables, funciones, eventos y manipulación del DOM.

2. Selección y manipulación del DOM.

   Descripción: métodos de selección y actualización de elementos.

3. Validación de formularios en el cliente.

   Descripción: reglas básicas, mensajes de error y experiencia de usuario.

4. Eventos y respuestas interactivas simples.

   Descripción: listeners de eventos y cambios en la interfaz.

• Actividad 1: Validación de formulario en vivo – Crear un formulario simple con validaciones (nombre, correo) y feedback en tiempo real. Aprendizaje: manejo de validación y mensajes claros.
• Actividad 2: Interacciones de botón – Añadir respuestas a clics para mostrar/ocultar secciones o cambiar estilos. Aprendizaje: manipulación del DOM ante eventos.
• Actividad 3: Control de foco y accesibilidad – Gestionar el foco para mejorar la navegación y accesibilidad de las interacciones. Aprendizaje: experiencias inclusivas.
• Actividad 4: Pequeño proyecto interactivo – Implementar una mini-app con al menos dos interacciones básicas. Aprendizaje: integración de conceptos en un único producto.

• Funcionalidad y robustez de las validaciones (40%).
• Uso correcto de eventos y manipulación del DOM (35%).
• Accesibilidad y claridad de la interacción (15%).
• Calidad de la documentación de código y explicaciones (10%).

2 semanas

1. Introducción a Git y conceptos clave.

   Descripción: repositorio, commits, ramas, merge y pull requests.

2. Flujo de trabajo básico y mensajes de commit.

   Descripción: buenas prácticas para mensajes y organización de cambios.

3. Colaboración en equipo y manejo de conflictos.

   Descripción: estrategias para evitar y resolver conflictos.

4. Repos, ramas y estrategias de integración.

   Descripción: estrategias como feature branches, main/development, y pull requests.

• Actividad 1: Configuración de repositorio – Crear un repositorio, hacer commits iniciales y practicar con mensajes descriptivos. Aprendizaje: establecer una base de control de versiones sólida.
• Actividad 2: Trabajo en ramas – Crear ramas para características y realizar merge, resolviendo posibles conflictos. Aprendizaje: flujo de trabajo colaborativo.
• Actividad 3: Revisión por pares – Realizar pull requests entre compañeros y aprobar cambios con comentarios útiles. Aprendizaje: colaboración y revisión de código.
• Actividad 4: Resolución de conflictos – Simular y resolver conflictos de fusión en un proyecto compartido. Aprendizaje: resolución de problemas reales de versión.

• Uso correcto de commits y claridad del historial (40%).
• Eficacia del flujo de trabajo en equipo (30%).
• Capacidad para resolver conflictos y mantener trazabilidad (20%).
• Participación y documentación de prácticas (10%).

2 semanas

1. Metodologías de evaluación de accesibilidad.

   Descripción: checklists, pruebas de usuario y herramientas de evaluación.

2. Medición de rendimiento y herramientas de análisis.

   Descripción: Lighthouse, Core Web Vitals y otras herramientas.

3. Interpretación de resultados y priorización de mejoras.

   Descripción: convertir resultados en acciones concretas y medibles.

4. Plan de mejora y seguimiento.

   Descripción: elaboración de un plan de acción y métricas de progreso.

• Actividad 1: Auditoría de accesibilidad – Aplicar una lista de verificación WCAG a un sitio y registrar problemas detectados. Aprendizaje: identificar barreras comunes y su impacto.
• Actividad 2: Auditoría de rendimiento – Ejecutar pruebas de rendimiento y registrar métricas clave (LCP, CLS, TBT). Aprendizaje: interpretar resultados y focalizar mejoras.
• Actividad 3: Propuesta de mejoras – Elaborar una lista priorizada de mejoras con métricas objetivo y estimaciones de impacto. Aprendizaje: convertir hallazgos en acciones medibles.
• Actividad 4: Plan de acción – Desarrollar un plan de implementación y seguimiento para las mejoras. Aprendizaje: gestión de proyectos centrada en resultados.

• Compleción y calidad de la auditoría de accesibilidad (30%).
• Comprensión e interpretación de métricas de rendimiento (30%).
• Propuesta de mejoras y plan de acción con métricas (30%).
• Claridad de documentación y presentación final (10%).

2 semanas