Diseño Web
(Curso Académico 2024 - 2025)

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:
PROFESOR: José Luis Sánchez de la Rosa
1. Diseño de sitios web: lenguajes, herramientas y formatos.

PROFESOR: DAVID ABREU
2. 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. En el aula virtual se indicará:
   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 simultá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.

La IA puede ser usada como una primera aproximación pero es necesario analizar las respuestas de manera crítica, contrastando la información, para llegar a un resultado creativo que permita el aprendizaje y evite algunos de los problemas derivados del uso de la IA. En caso de ser utilizada, deben adjuntarse todas las preguntas que se le han hecho. Las preguntas que se hacen son un buen indicador del proceso de aprendizaje por lo que la calificación de la práctica correspondiente podrá ver modificada su nota en función de la calidad y el objetivo que se persigue a través de dichas preguntas.  Si se detecta el uso de IA en la realización de la práctica pero no se ha informado ni entregado las preguntas, será considerado plagio a los efectos del reglamento de evaluación y calificación 
 

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

Tutotriales para  desarrolladores web 
w3schools
MDN
 

MARTÍNEZ ROLÁN, Xabier. Diseño de páginas web: Wordpress para todos los públicos. 2019.

La Evaluación de la asignatura se rige por el Reglamento de Evaluación y Calificación de la Universidad de La Laguna, que la Universidad tenga vigente, además de por lo establecido en la Memoria de Verificación o Modificación vigente.

Todo el alumnado se evalúa mendiante evaluación contínua en la primera convocatoria, salvo en los casos contemplados en el reglamento. El estudiante se podrá cambiar a evaluación única en la primera convocatoria antes de agotar la evaluación continua, solicitándolo a través del procedimiento establecido en el  aula virtual. Se entenderá agotada la convocatoria de EvC desde que el alumnado se presente a cualquier combinación de  pruebas evaluativas cuya suma de ponderaciones sea igualo superior al 40% de las actividades de Evaluación continua (EvC). En ese caso, si suspende alguna de las dos partes, figurará en ACTA con la nota correspondiente a la parte suspensa.

En caso de no haber agotado la evaluación continua aparecerá en el  ACTA correspondiente a la evaluación continua como NO PRESENTADO

EVALUACIÓN CONTINUA

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.

EVALUACIÓN UNICA
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, ya que se mantendrá la calificación de cualquiera de las partes (completas) durante el curso académico actual.

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%. 

Tanto la práctica de la primera parte como la de la segunda, tendrán cuatro tareas entregables (aparte del examen) cuya fecha se comunicará oportunamente. En la evaluación continua sólo se podrá aspirar, como máximo, a la nota de las partes entregadas en fecha.

 
Tanto para la evaluación continua como para la única se mantendrán las notas de las partes (parte 1 o parte 2) aprobadas el curso anterior.
 

Tipo de prueba	Competencias	Criterios	Ponderación
Pruebas objetivas	[B2], [E14], [E9], [E10], [B4]	Dominio de los contenidos de la asignatura	15,00 %
Pruebas de respuesta corta	[B2], [E14], [E9], [E10], [B4]	Dominio de los contenidos de la asignatura	10,00 %
Trabajos y proyectos	[G7], [G5], [E10], [G8], [B5], [B4], [B2], [E14], [G3], [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	[G7], [G5], [E10], [G8], [B5], [B4], [B2], [E14], [G3], [E9]	Dominio de los contenidos prácticos de la asignatura Expresión escrita	10,00 %
Portafolios	[G7], [G5], [E10], [G8], [B5], [B4], [B2], [E14], [G3], [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	6.00	10.00
Semana 2:	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:	1. Diseño de sitios web: lenguajes, herramientas y formatos. PR1_1. Primer entregable de la práctica de la primera parte	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. 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. 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:	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:	1. Diseño de sitios web: lenguajes, herramientas y formatos. PR1_2. Segundo entregable de la práctica de la primera parte	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..) 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:	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	6.00	10.00
Semana 7:	1. Diseño de sitios web: lenguajes, herramientas y formatos. PR1_3. Tercer entregable de la práctica de la primera parte	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 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	4.00	6.00	10.00
Semana 8:	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:	1. Diseño de sitios web: lenguajes, herramientas y formatos. PR1_4. Cuarto entregable de la práctica de la primera parte PR2_1. Primer entregable de la práctica de la segunda parte	Se deben implementar CSS-shapes Se deben implementar al menos una transición y una animación Se debe implementar al menos dos scripts de javascripts de los que se hayan explicado en clase.	4.00	6.00	10.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	6.00	10.00
Semana 11:	2. Metodologías de diseño: Pensamiento de diseño y DCU PR2_2. Segundo entregable de la práctica de la segunda parte	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:	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	6.00	10.00
Semana 13:	3. Desarrollo de proyectos web PR2_3. Tercer entregable de la práctica de la segunda parte	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:	3. Desarrollo de proyectos web PR2_4. Cuarto entregable de la práctica de la segunda parte	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 a 17:	Evaluación Única		4.00	6.00	10.00
Total			60.00	90.00	150.00