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 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. |
2.00 |
6.00 |
8.00 |
Semana 2: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos. |
Conceptos fundamentales:
- Guía de identidad visual
- Arquitectura de la información y layout.
- Conceptos de Layout: Flow-layout, flexbox layout y Grid layout
- Bocetado y propiedades de una página web
- 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 |
6.00 |
10.00 |
Semana 3: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos.
Práctica 1 - entregable 1. |
- Estructura básica de una página web - HTML, HEAD, META y BODY
- Buenas prácticas de la codificación (comentarios)
- HTML5 semántico.
- CSS3. Selectores básicos. Selectores avanzados
- Creación de listas y aplicación a barras de navegación
- Modelos de cajas. Colores y fondos. Valores y unidades (absolutas y relativas).
- Propiedades del layout y propiedades del skin.
Primer entregable: Se debe entregar un PDF con la siguiente información:
- Guía de identidad visual (colores, tipografía y logo)
- Arquitectura de la información (Páginas que se van a desarrollar, estructura jerárquica y navegación entre ellas)
- Tres bocetos a lápiz (página home, páginas de segundo nivel y páginas terciarias) escaneados, diferenciando los elementos que están dentro de otros más generales.
- Asignar propiedades a cada uno de los elementos de la página (ancho, alto, color de fondo, color de texto,....)
- Hacer una lista con todas las propiedades
- Separarlas en dos listas: Una referida a todas las propiedades de layout (ancho, alto, etc…) y otra a las propiedades de skin (tipo de fuente, tamaño de fuente, color de fondo, color de texto, etc…)
|
4.00 |
6.00 |
10.00 |
Semana 4: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos. |
- El concepto de clase: Utility classes y clases con muchas propiedades
- Metodologías para organizar el CSS: OOCSS, BEM, SMACSS, ATOMIC CSS
- Flow layout: CSS inline, head, hoja externa, Dirección de escritura, css links
- 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 |
6.00 |
10.00 |
Semana 5: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos. Práctica 1 - entregable 2. |
Conceptos fundamentales
- W3C y estándares
- Usabilidad y accesiblidad
- Diseño responsivo: Unidades relativas al viewport, mediaqueries y z-index
- Experiencia de usuario
- CSS avanzado: Posicionamiento, maquetación y diseño. Fuentes y textos. Galería de Imágenes, Estilización de imágenes.
Se irá desarrollando la práctica por versiones. Para ello se crearán varias carpetas en el servidor (version1, version2, versión3, etc..)
Segundo entregable:El segundo entregable implica subir a una carpeta de Drive el contenido del servidor:
- En public_html debe existir un index.html que enlace al index.html de cada una de las versiones.
- En public_html debe crearse una carpeta CSS para los ficheros de estilo
- En public_html debe crearse una carpeta IMG (le puedes dar otro nombre) que contenga las imágenes
- En cada una de las carpetas de versión hay que crear tantas páginas como las que hemos puesto en arquitectura de la información (aunque no todas tengan demasiado contenido).
- La página home de la primera versión debe estar totalmente prototipada (puede que los colores sean falsos pero se cumple que todos los elementos están en su sitio aunque no tengan contenido aún).
- Se debe haber creado una plantilla para las páginas de segundo nivel y una para las páginas de tercer nivel completamente prototipadas
|
4.00 |
6.00 |
10.00 |
Semana 6: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos. |
Técnicas de Diseño de layout avanzadas (1/2) con Flexbox
- Flex Container: Propiedades (Direction, wrap, flow, justify, align)
- Flex Item: Propiedades (Order, basis, shrink, grow, align)
- Flex responsivo
- Propiedades flex: (Basis,Direction, Flow, grow, shrink, wrap)
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 |
6.00 |
10.00 |
Semana 7: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos.
|
Técnicas de Diseño 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
|
4.00 |
6.00 |
10.00 |
Semana 8: |
Tema 1. Diseño de sitios web: lenguajes, herramientas y formatos. |
- CSS Shapes: Shape inside, Shape-outside, Shape-margin, clip-path,
- Formularios, Botones, imágenes, Vídeos, Gráficos SVG, Dropdown-menu
- Animaciones: Delay, duration, direction, iteration-count,name, play state, timing-function, fill-mode
- Transiciones: transition, transition-delay, transition-duration, transition-property, transition-timing-function
|
4.00 |
6.00 |
10.00 |
Semana 9: |
Tema 2: Desarrollo de proyectos web mediante CMS Práctica 1 - entregable 3.
|
Introducción a los frameworks de desarrollo
Entregable 4 de la parte 1: El estudiante debe implementar todo lo que se ha visto en clase:
- Al menos una de las páginas debe estar implementada con flow layout utilizando las propiedades float, position, display y visibility (al menos)
- Todos los menús tienen que estar implementados con flexbox
- Tiene que haber al menos una galería flexbox
- Tiene que haber al menos una página con GRID-layout con áreas nombradas
- Tiene que haber la menos una página con GRID-layout especificando filas y columnas
- Tiene que haber una galería grid con todas las imágenes del mismo tamaño
- Tiene que haber una galería grid con imágenes que ocupen distintos tamaño
- Tiene que haberse utilizado CSS shapes (forma de imágenes, y texto fluyendo alrededor de figuras)
- Tiene que haberse implementado al menos una transición y una animación
- Se podrán implementar hasta dos scripts de javascript de los que se hayan explicado en clase.
|
4.00 |
6.00 |
10.00 |
Semana 10: |
Tema 2: Desarrollo de proyectos web mediante CMS |
Clase magistral.
- Resolución de problemas frente a supuestos prácticos.
- Desde la idea al prototipo inicial del proyecto web.
|
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.
|
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.
|
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
|
4.00 |
6.00 |
10.00 |
Semana 16 a 18: |
Evaluación |
Examen final de la evaluación continua y Examen de Evaluación única para los que hayan elegido esa modalidad |
2.00 |
0.00 |
2.00 |
Total |
|
|
60.00 |
90.00 |
150.00 |