Semana |
Temas |
Actividades de enseñanza aprendizaje |
Horas de trabajo presencial |
Horas de trabajo autónomo |
Total |
Semana 1: |
1. Diseño de sitios web: lenguajes, herramientas y formatos. |
Introducción al diseño web. Tecnologías y herramientas para el diseño web. Diseñadores influyentes. Conceptos fundamentales. Investigación de estructura de páginas web habituales
Aprendizaje activo - Búsqueda de Diseñadores de referencia - Búsqueda de páginas de referencia para los intereses del estudiante - Elección de un tema para su proyecto. |
4.00 |
5.00 |
9.00 |
Semana 2: |
1. Diseño de sitios web: lenguajes, herramientas y formatos. |
Conceptos fundamentales: Arquitectura de la información y layout. Conceptos de Layout: Flow-layout, flexbox layout y Grid layout Ejercicios prácticos de estructura de layouts y estilos.
Aprendizaje activo: El estudiante debe realizar el - Diseño de una arquitectura de la información básica para su proyecto - Diseño de un layout básico para su proyecto |
4.00 |
5.00 |
9.00 |
Semana 3: |
1. Diseño de sitios web: lenguajes, herramientas y formatos. |
1) Estructura básica de una página web - HTML, HEAD, META y BODY 2) Buenas prácticas de la codificación (comentarios) 3) HTML5 semántico. 4) CSS3. Selectores básicos. Selectores avanzados 5) Creación de listas y aplicación a barras de navegación 6) Modelos de cajas. Colores y fondos. Valores y unidades (absolutas y relativas). 7) background-color, border, margin, padding
Aprendizaje activo - Creación de una página web básica con metadatos - Aplicación de unidades a elementos básicos - Creación de enlaces a otras páginas web. - Creación de listas y su aplicación a barras de navegación - Aplicación de las propiedades background-color, border, margin y padding |
4.00 |
5.00 |
9.00 |
Semana 4: |
1. Diseño de sitios web: lenguajes, herramientas y formatos. |
1) El concepto de clase: Utility classes y clases con muchas propiedades 2) Metodologías para organizar el CSS: OOCSS, BEM, SMACSS, ATOMIC CSS 3) Flow layout: CSS inline, head, hoja externa, Dirección de escritura, css links 4) Usabilidad y accesibilidad
Aprendizaje activo: El estudiante realizará las siguientes tareas para el proyecto que está desarrollando. - Separación de clases de estructura de clases de aspecto - Separación de continentes y contenidos - Elección de una metodología para la utilización de clases.
|
4.00 |
5.00 |
9.00 |
Semana 5: |
1. Diseño de sitios web: lenguajes, herramientas y formatos. |
1) W3C y estándares 2) Usabilidad y accesiblidad 3) Diseño responsivo: Unidades relativas al viewport, mediaqueries y z-index 4) Experiencia de usuario 5) CSS avanzado: Posicionamiento, maquetación y diseño. Fuentes y textos. Galería de Imágenes, Estilización de imágenes.
Aprendizaje activo: El estudiante debe: - Aplicar técnicas de Diseño responsivo a su página - Bocetado de galería de imágenes
|
4.00 |
5.00 |
9.00 |
Semana 6: |
1. Diseño de sitios web: lenguajes, herramientas y formatos. |
Técnicas de layout avanzadas (1/2) Flexbox layout - Flex Container: Propiedades (Direction, wrap, flow, justify, align) - Flex Item: Propiedades (Order, basis, shrink, grow, align) - Flex responsivo - Propiedades flex: (Direction
Aprendizaje activo: El estudiante debe: - Diseñar las barras de navegación de su página con flexbox - Diseñar una galería de imágenes con flexbox |
4.00 |
5.00 |
9.00 |
Semana 7: |
1. Diseño de sitios web: lenguajes, herramientas y formatos. |
Técnicas de layout avanzadas (2/2) Grid layout - Display, Rows, Columns, Gaps, Lines (propiedades) - Grid Container: Grid-template, justify-content, align-content - Grid item: Childs, Grid-column, Grid-row, Grid-area, nombrado de áreas. - Grids de tamaño fijo, fluidos, responsivo. - Ubicación explícita de imágenes y superposición de imágenes
Aprendizaje activo: El estudiante debe: - Desarrollar una página con Grid-layout de fondo - Desarrollar una galería con grid-layout |
4.00 |
5.00 |
9.00 |
Semana 8: |
1. Diseño de sitios web: lenguajes, herramientas y formatos. |
1) CSS Shapes: Shape inside, Shape-outside, Shape-margin, clip-path, 2) Formularios, Botones, imágenes, Vídeos, Gráficos SVG, Dropdown-menu |
4.00 |
5.00 |
9.00 |
Semana 9: |
1. Diseño de sitios web: lenguajes, herramientas y formatos. |
1) Animaciones: Delay, duration, direction, iteration-count,name, play state, timing-function, fill-mode
2) Transiciones: transition, transition-delay, transition-duration, transition-property, transition-timing-function
Aprendizaje activo: El estudiante debe
- Elegir las transiciones y animaciones más interesantes para su proyecto y hacer una implementación sencilla de las mismas para comprender su funcionamiento |
4.00 |
5.00 |
9.00 |
Semana 10: |
2. Metodologías de diseño: Pensamiento de diseño y DCU |
Clase magistral. Resolución de problemas frente a supuestos prácticos. Desde la idea al prototipo inicial del proyecto web. |
4.00 |
5.00 |
9.00 |
Semana 11: |
2. Metodologías de diseño: Pensamiento de diseño y DCU |
Clase magistral. Resolución de problemas frente a supuestos prácticos. Desde la idea al prototipo inicial del proyecto web.
ENTREGA SITIO WEB DE LA PRIMERA PARTE |
4.00 |
5.00 |
9.00 |
Semana 12: |
3. Desarrollo de proyectos web |
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 |
5.00 |
9.00 |
Semana 13: |
3. Desarrollo de proyectos web |
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. |
4.00 |
5.00 |
9.00 |
Semana 14: |
3. Desarrollo de proyectos web |
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 |
5.00 |
9.00 |
Semana 15: |
3. Desarrollo de proyectos web |
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 |
20.00 |
24.00 |
Semana 16 a 18: |
Evaluación |
periodo de evaluación |
0.00 |
0.00 |
0.00 |
Total |
|
|
60.00 |
90.00 |
150.00 |