Diseño Web
(Curso Académico 2022 - 2023)

Mostrar Todo Ocultar Todo

• E9 - Conocer la terminología específica, las técnicas y los lenguajes aplicados a los procesos del diseño: preimpresión y sistemas de impresión, técnicas y soportes digitales y multimedia.
• E10 - Conocimiento y manejo de todas aquellas herramientas tecnológicas y metodológicas de aplicación en el proyecto de diseño (programas informáticos específicos, sistemas de representación tradicional y digital; construcción de maquetas, modelos y prototipos, fotografía, técnicas de video, animación e ilustración) así como demostrar habilidad en el manejo de otras técnicas y procedimientos específicos, materiales, tecnología y ciencias de la construcción.
• E14 - Estar motivado por la calidad de los resultados obtenidos así como demostrar autoexigencia y rigor en el trabajo personal. Familiaridad con las normativas vigentes que regulan la calidad en productos y servicios como para saber aplicarlas (como por ejemplo las normas ISO).

• G3 - Trabajo en equipo: capacidad para colaborar con los demás y de contribuir a un proyecto común; capacidad para colaborar en equipos interdisciplinares y multiculturales.
• G5 - Desarrollar la sensibilidad estética y cultivo de la facultad de apreciación estética: capacidad de crítica y evaluación estética, capacidad para tomar decisiones de carácter estético y extraer información sobre la cultura que la ha generado.
• G7 - Capacidad para utilizar las tecnologías de la información y la comunicación (TIC) en diferentes contextos y desde una perspectiva crítica, creativa e innovadora. Comprender la relación entre la tecnología y otros campos del saber humano.
• G8 - Capacidad para organizar y planificar tareas a desarrollar personal o colectivamente.

• B2 - Que los estudiantes sepan aplicar sus conocimientos a su trabajo o vocación de una forma profesional y posean las competencias que suelen demostrarse por medio de la elaboración y defensa de argumentos y la resolución de problemas dentro de su área de estudio.
• B4 - Que los estudiantes puedan transmitir información, ideas, problemas y soluciones a un público tanto especializado como no especializado.
• B5 - Que los estudiantes hayan desarrollado aquellas habilidades de aprendizaje necesarias para emprender estudios posteriores con un alto grado de autonomía.

 Temas:

1. Diseño de sitios web: lenguajes, herramientas y formatos.
2. Metodologías de diseño: Pensamiento de Diseño. Diseño centrado en el usuario
3. Desarrollo de proyectos web

-Profesores: Todos
* Consulta bibliográfica en inglés
* Gestión de documentación técnica en inglés
* Manejo de herramienta informática en inglés.
* Visualización de vídeos en inglés.

1. La asignatura consta de clases teóricas, actividad en aula de ordenadores y actividad en aula virtual. 
2. La metodología docente que se seguirá en esta asignatura se conoce como “Flipped Classroom” o “Aula invertida”. Esta denominación se debe a la inversión de papeles respecto a las clases magistrales habituales.  El profesorado ha elaborado un larga lista de videotutoriales  a los que se puede acceder desde el aula y que se encuentran ordenados para una mejor temporización. Los estudiantes deben visualizarlos antes de ir a clase. Las clases teóricas y de problemas ya no consistirán en una exposición durante toda la hora por parte del profesor. Se fomenta el aprendizaje activo y participativo por parte del estudiante. Por tanto, se fomentará la interactividad en las clases. Desde el punto de vista metodológico, la visión de aula invertida significa que las habilitades cognitivas de orden inferior (recordar y comprender) se trabajan en casa mientras que las habilidades cognitivas de orden superior (aplicar, analizar, evaluar y crear) se trabajan en clase. Por tanto, es importante traer pensado el "cómo aplicar" al proyecto lo visualizado en casa y mientras el profesor aclara las posibles dudas, el estudiante debe ir aplicando lo aprendido y evolucionar en la creación de su sitio web.Si no fuera suficiente, el estudiante deberá aprovechar las tutorías del profesor para aclarar dudas a lo largo de todo el curso. De esta manera los alumnos aprenderán de forma continua.
3. El profesor indicará cada semana:
   1. Los videotutoriales que tienen  que visualizar antes de las clases de la siguiente semana.
   2. Sobre qué conceptos tienen que reflexionar.
   3. Aspectos que tienen que traer pensados a clase (pueden ser tanto conceptos teóricos como procedimentales).

Actividades formativas

1. De acuerdo con la metodología docente empleada, previamente los discentes tienen que haber visualizado los tutoriales indicados. En las clases, el profesor hará una explicación sobre lo que deben haber visualizado en casa y se abrirá a la participación e intervención de los estudiantes para expresar sus lagunas y el "cómo lo aplicarían" a sus proyectos. El estudiante debe tener en cuenta que las clases no son "puramente teóricas" o "puramente prácticas", ya que mientras el profesor aclara conceptos, el estudiante deber ir comprobándolos y aplicando lsimultáneamente en el ordenador. Por tanto, tanto en las clases prácticas como teóricas puede haber intervenciones por parte del profesor, así como interacción y práctica por parte de los estudianets.
2. Cada semana se indicará, por parte del profesor, los vídeos que se tienen que visualizar, sobre qué conceptos tienen que reflexionar y un esbozo de trabajo que tienen que traer inciado a la clase práctica. En ella se aclararán las dudas tanto conceptuales como de procedimiento para poder realizarlos.
3. El trabajo práctico será individual en la primera parte de la asignatura para fomentar la autonomía personal  en el aprendizaje y grupal en la segunda para fomentar el aprendizaje colaborativo.
4. En ambas partes de la asignatura se aplicará el aprendizaje basado en proyectos, ya que al final de cada una de las partes habrá que entregar un sitio web desarrollado por el estudiante y durante el periodo docente si irá trabajando en la consecución de dicho proyecto.
5. Estudio autónomo. En la metodología Flipped classroom el estudio autónomo cobra especial importancia, dado que una parte importante se realiza previamente a la clase.  Esto facilita que en el caso de una docencia no presencial los discentes puedan tener acceso a la información y gestionar el tiempo de forma personalizada para adquirir dichos conocimientos. Este estudio autónomo requiere, por parte de los alumnos y alumnas: a) La visualización de los tutoriales (u otras fuentes de información) indicados, b) La reflexión sobre determinados conceptos de diseño, c) El inicio de un trabajo en el que intente plasmar dichos conceptos en su trabajo personal.
6. Participación activa y asistencia a clase. Con la metodología de aula invertida la participación activa del alumno es fundamental.  Los estudiantes deben acudir a clase con la intención de resolver las dudas que les han surgido al estudiar el material correspondiente con anterioridad a la clase.
7. Realización de exámenes. El sistema de evaluación permite que los alumnos y alumnas superen la asignatura mediante evaluación continua sin tener que presentarse a examen final sobre la totalidad de la misma.

Actividades formativas	Horas presenciales	Horas de trabajo autónomo	Total horas	Relación con competencias
Clases teóricas	10,00	0,00	10,0	[B5], [B4], [B2], [G8], [G7], [G5], [G3], [E10], [E9]
Clases prácticas (aula / sala de demostraciones / prácticas laboratorio)	38,00	0,00	38,0	[B4], [B2], [G7], [G5], [E9]
Realización de seminarios u otras actividades complementarias	2,00	0,00	2,0	[B5], [G7], [G3], [E9]
Realización de trabajos (individual/grupal)	0,00	75,00	75,0	[B5], [B4], [G7], [G5], [G3], [E14], [E10]
Estudio/preparación de clases teóricas	0,00	15,00	15,0	[B5], [B2], [E14], [E9]
Realización de exámenes	4,00	0,00	4,0	[B4], [B2], [G7], [E14], [E9]
Asistencia a tutorías	2,00	0,00	2,0	[B2], [G7], [G3], [E14]
Estudio y análisis de casos	2,00	0,00	2,0	[B5], [B4], [B2], [G8], [G7], [G5], [G3], [E14], [E10], [E9]
Visitas profesionales	2,00	0,00	2,0	[B4], [B2], [G7], [E14], [E10]
Total horas
Total ECTS

Apuntes y videotutoriales desarrollados por los profesores de la asignatura. Disponibles en el Campus Virtual.
 
Especificaciones del World Wide Web Consortium disponible en su página web (www.w3c.org).
Tutotriales para  desarrolladores web https://www.w3schools.com/
Jesús Lorés, Julio Abascal, José J. Cañas, Miguel Gea, Ana Belén Gil, Ana Belén Martínez Prieto, Manuel Ortega, Pedro Valero y Manuel Vélez. La interacción persona-ordenador libro electrónico. Primera edición.
Helen Sharp, Yvonne Rogers, and Jenny Preece. 2007. Interaction Design: Beyond Human Computer Interaction. John Wiley & Sons. 3rd edition.
 

Donald Norman (2010). La psicología de los objetos cotidianos. Nerea. 4ta edición
Jenny Preece, Yvonne Rogers, Helen Sharp, David Benyon, Simon Holland, and Tom Carey. 1994.Human-Computer Interaction. Addison-Wesley
Jakob Nielsen. 1999. Designing Web Usability: The Practice of Simplicity. New Riders Publishing, Thousand Oaks, CA, USA. 1rst edition.
Longman Ltd., Essex, UK. 1rst Edition.
Alan Dix, Janet Finlay, Gregory Abowd y Russell Beale, Human-Computer Interaction. Prentice Hall, 2004. 3rd edition

Adobe Creative Suite (PC). Software (*) Sujeto a disponibilidad presupuestaria ULL.
Adobe Muse (PC/MAC). Software (*) Sujeto a disponibilidad presupuestaria ULL.

De acuerdo con artículo 4.4 del Reglamento de Evaluación y Calificación de la Universidad de La Laguna (en adelante, REC), todo el alumnado está sujeto a EVALUACIÓN CONTINUA en primera convocatoria de la asignatura, salvo los casos previstos en los artículos 5.4. y 5.5. La evaluación continua requerirá cumplir los siguientes requisitos:

- Asistencia al menos a un 60% de las clases y actividades programadas, que se verificará, en las clases teóricas, por medio del control de firmas, y en las clases prácticas, mediante la entrega de los trabajos realizados en el aula. Por debajo de ese nivel de asistencia se considera que no se cumplen las condiciones mínimas para la evaluación continua y por tanto la nota en primera convocatoria será "No presentado", pudiendo concurrir en la siguiente convocatoria por evaluación única. 
-  Entrega de los trabajos programados del curso. Según establece el artículo 4.7 del REC, se entenderá agotada la convocatoria cuando el alumno o alumna presente actividades cuya ponderación compute, al menos, el 50% de la evaluación continua. Para los trabajos que queden sin entregar, su nota para la evaluación continua será 0.

La asignatura consta de dos partes: La parte 1 se corresponde con el tema 1 y la parte 2 con los temas 2 y 3 del apartado de contenido.

La EVALUACIÓN CONTINUA constará de las siguientes pruebas:
Pruebas objetivas 15,00 %                   : Se evalúa completa en la parte I de la asignatura
Pruebas de respuesta corta 10,00 %  : Se evalúa completa en la parte II de la asignatura
Trabajos y proyectos 50,00 %              : Su evaluación se reparte en 30 % en la primera parte y 20% en la segunda parte
Informes memorias de práctica 10,00 %: Su evaluación se reparte en 5% en cada parte.
Portafolios 15,00 %                               : Se evalúa completa en la parte II de la asignatura

Dichas ponderaciones se reparten de la siguiente manera entre cada una de las partes:
-  Práctica de la primera parte, con una ponderación sobre la nota del 35% (30% corresponde a trabajos y proyectos y 5% a informe de memoria de prácticas). 
-  Examen de convocatoria de la primera parte, con una ponderación sobre la nota del 15% (correspondiente al 15% de pruebas objetivas).

-  Práctica de la segunda parte, con una ponderación sobre la nota del 40% (20% corresponde a trabajos y proyectos, 15% a portafolios y 5% a informe de memoria de prácticas). 
-  Pruebas de respuesta corta de la segunda parte, con una ponderación sobre la nota del 10%. 

Las fechas de entrega de las actividades de cada parte de la asignatura tendrán como plazo límite la fecha indicada en el aula virtual.
Si el estudiante no se presentara a todas las pruebas aparecerá en la convocatoria correspondiente  a la evaluación continua como NO PRESENTADO.
Si el estudiante se presenta a todas las pruebas pero suspende alguna de ellas, figurará en acta con la nota mínima de las obtenidas en el conjunto de tareas.

De manera general, en la segunda convocatoria, la asignatura se evaluará por EVALUACIÓN ÚNICA. No obstante, el alumnado que haya concurrido en primera convocatoria por evaluación continua y no haya superado la asignatura, podrá optar por recuperar las actividades de evaluación continua que no se hayan superado en primera convocatoria mediante un examen la prueba de la primera parte y mediante la entrega de las prácticas correspondientes a la segunda parte.

La EVALUACIÓN ÚNICA consiste en las siguientes pruebas:
-  Examen de la primera parte, que sustituye a las dos pruebas de evaluación continua, con una ponderación sobre la nota del 50%. 
-  Práctica de la segunda parte, con una ponderación sobre la nota del 40%. 
-  Pruebas de respuesta corta de la segunda parte, con una ponderación sobre la nota del 10%. 

Si el alumno no ha superado todas las pruebas en la evaluación continua, en la evaluación única sólo deberá presentarse a aquellas que no ha superado, manteniéndose la calificación de cualquiera de las partes hasta la
convocatoria de septiembre del mismo curso escolar.
 
Las pruebas de evaluación única se realizarán en las fechas establecidas para cada convocatoria en el Calendario de Exámenes del Grado en Diseño (https://www.ull.es/grados/diseno/informacion-academica/horarios-y-calendario-examenes/).
Para su realización, se atenderá a lo establecido en el REC (https://riull.ull.es/xmlui/bitstream/handle/915/28275/Regl.%20Evaluacion%20Calificacion%20CG%2021_06_2022%20Fdo.pdf) 

Tipo de prueba	Competencias	Criterios	Ponderación
Pruebas objetivas	[B4], [B2], [E14], [E10], [E9]	Dominio de los contenidos de la asignatura	15,00 %
Pruebas de respuesta corta	[B4], [B2], [E14], [E10], [E9]	Dominio de los contenidos de la asignatura	10,00 %
Trabajos y proyectos	[B5], [B4], [B2], [G8], [G7], [G5], [G3], [E14], [E10], [E9]	Asistencia a las sesiones prácticas. Dominio de los contenidos prácticos de la asignatura. Capacidad para trabajar en equipo. Valoración de una actitud participativa. Defensa de trabajos.	50,00 %
Informes memorias de prácticas	[B5], [B4], [B2], [G8], [G7], [G5], [G3], [E14], [E10], [E9]	Dominio de los contenidos prácticos de la asignatura Expresión escrita	10,00 %
Portafolios	[B5], [B4], [B2], [G8], [G7], [G5], [G3], [E14], [E10], [E9]	Aplicación de los contenidos prácticos de la asignatura a un portafolios personal	15,00 %

En las guías docentes la planificación temporal de la programación sólo tiene la intención de establecer unos referentes u orientaciones para presentar la materia atendiendo a unos criterios cronológicos, sin embargo son solamente a título estimativo, de modo que el profesorado puede modificar –si así lo demanda el desarrollo de la materia– dicha planificación temporal.

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:	Semanas 15-16 periodo de evaluación	periodo de evaluación	4.00	20.00	24.00
Semana 16 a 18:			0.00	0.00	0.00
Total			60.00	90.00	150.00