| Semana |
Temas |
Actividades de enseñanza aprendizaje |
Horas de trabajo presencial |
Horas de trabajo autónomo |
Total |
| Semana 1: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos.
|
Introducción y análisis de referentes
- Introducción al diseño web y conceptos fundamentales.
- Tecnologías y herramientas: editores de código, navegadores (developer tools) y prototipado.
- Diseñadores influyentes y análisis de la estructura de páginas web habituales.
- Aprendizaje activo: búsqueda de diseñadores y páginas de referencia según los intereses del estudiante y elección del tema del proyecto.
|
2.00 |
6.00 |
8.00 |
| Semana 2: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos. |
Identidad visual, arquitectura y bocetado
- Guía de identidad visual: color (HSL y OKLCH) y tipografía.
- Arquitectura de la información y conceptos de disposición (flujo, Flexbox y Grid).
- Bocetado y propiedades de una página web; ejercicios de estructura de layouts y estilos.
- Aprendizaje activo: diseño de la arquitectura de la información y del layout básico del proyecto (bocetado de grano grueso de todas las páginas).
|
4.00 |
6.00 |
10.00 |
| Semana 3: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos.
|
Estructura semántica y organización del CSS
- Estructura básica del documento (HTML, head, meta, body) y HTML5 semántico; buenas prácticas de codificación.
- Selectores CSS: básicos y avanzados.
- Modelo de caja, colores y fondos, valores y unidades (absolutas y relativas); propiedades de layout y de skin.
- Diseño atómico y convención de nombres (BEM).
|
4.00 |
6.00 |
10.00 |
| Semana 4: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos. Práctica 1 - entregables 1, 2 y 3 |
Del boceto al anteproyecto técnico
- Listas y barras de navegación.
- Cierre del bocetado de grano grueso de todas las páginas.
- Generación del scaffolding: estructura semántica, inventario de componentes y nomenclatura del proyecto.
Práctica 1: Entrega de los entregables 1, 2 y 3, e inicio de la codificación a mano sobre el anteproyecto |
4.00 |
6.00 |
10.00 |
| Semana 5: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos.
|
Del anteproyecto al código: primeros componentes
- W3C y estándares; usabilidad, accesibilidad y experiencia de usuario.
- Inicio de la codificación a mano: enlazado del CSS (inline, en head y hoja externa), posicionamiento y maquetación, fuentes y textos, imágenes y galerías.
- Diseño responsivo: unidades relativas al viewport, media queries y z-index.
- Construcción de los primeros componentes en flujo; desarrollo por versiones (carpetas version1, version2…) y alfabetización en prompts (IA para generar artefactos visuales que apoyen el diseño).
|
4.00 |
6.00 |
10.00 |
| Semana 6: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos. |
Disposición avanzada con Flexbox
- Contenedor flex: propiedades (direction, wrap, flow, justify, align).
- Elemento flex: propiedades (order, basis, grow, shrink, align).
- Flex responsivo.
- Aprendizaje activo: diseñar con Flexbox las barras de navegación y una galería de imágenes del proyecto.
|
4.00 |
6.00 |
10.00 |
| Semana 7: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos.
|
Disposición avanzada con Grid
- Propiedades de Grid: display, filas, columnas, gaps y líneas.
- Contenedor grid (grid-template, justify-content, align-content) y elemento grid (grid-column, grid-row, grid-area y nombrado de áreas).
- Grids de tamaño fijo, fluidos y responsivos; ubicación explícita y superposición de imágenes.
- Aprendizaje activo: galería de imágenes con Grid e integración de los componentes en todas las páginas del proyecto.
|
4.00 |
6.00 |
10.00 |
| Semana 8: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos. Práctica 1: Examen |
Efectos visuales y examen
- CSS Shapes: shape-inside, shape-outside, shape-margin y clip-path.
- Formularios, botones, imágenes, vídeos, gráficos SVG y dropdown-menu.
- Transformaciones, transiciones y animaciones (delay, duration, direction, iteration-count, name, play-state, timing-function, fill-mode).
Práctica 1: Examen de la Parte 1 |
4.00 |
6.00 |
10.00 |
| Semana 9: |
Tema 2: Desarrollo de proyectos web mediante CMS
|
Integración y refinamiento del sitio
- Integración de los componentes y ajuste fino del sitio sobre el anteproyecto.
- Revisión de accesibilidad y responsividad.
- Análisis entre pares de las páginas y resolución de dudas finales.
|
4.00 |
6.00 |
10.00 |
| Semana 10: |
Tema 2: Desarrollo de proyectos web mediante CMS Práctica 1 - entregable 4. Sitio web completo |
Parte 1:Entrega del proyecto final (E4): sitio web completo, codificado a mano y coherente con el anteproyecto.
Parte 2.Clase magistral.
- Resolución de problemas frente a supuestos prácticos.
- Desde la idea al prototipo inicial del proyecto web.
Práctica 1 - entregable 4. Sitio web completo |
4.00 |
6.00 |
10.00 |
| Semana 11: |
Tema 2: Desarrollo de proyectos web mediante CMS Práctica 2 - entregable 1.
|
Clase magistral.
- Resolución de problemas frente a supuestos prácticos.
- Desde la idea al prototipo inicial del proyecto web.
Práctica 2 - entregable 1. |
4.00 |
6.00 |
10.00 |
| Semana 12: |
Tema 2. Desarrollo de proyectos web mediante CMS |
Clase magistral.
- Creación incremental del proyecto web funcional.
- Resolución de problemas frente a supuestos prácticos.
- Trabajo práctico en laboratorio de ordenadores.
|
4.00 |
6.00 |
10.00 |
| Semana 13: |
Tema 2. Desarrollo de proyectos web mediante CMS Práctica 2 - entregable 2. |
Clase magistral.
- Creación incremental del proyecto web funcional.
- Resolución de problemas frente a supuestos prácticos.
- Trabajo práctico en laboratorio de ordenadores.
- Tutorías.
Práctica 2 - entregable 2. |
4.00 |
6.00 |
10.00 |
| Semana 14: |
Tema 2. Desarrollo de proyectos web mediante CMS
|
Clase magistral.
- Creación incremental del proyecto web funcional.
- Resolución de problemas frente a supuestos prácticos.
- Trabajo práctico en laboratorio de ordenadores.
|
4.00 |
6.00 |
10.00 |
| Semana 15: |
Tema 2. Desarrollo de proyectos web mediante CMS Práctica 2 - entregable 3 |
Clase magistral.
- Creación incremental del proyecto web funcional.
- Resolución de problemas frente a supuestos prácticos.
- Trabajo práctico en laboratorio de ordenadores
Práctica 2 - entregable 3 |
4.00 |
6.00 |
10.00 |
| Semana 16 a 18: |
Evaluación |
Examen final |
2.00 |
0.00 |
2.00 |
| Total |
|
|
60.00 |
90.00 |
150.00 |