Interacción y Diseño de Interfaces

Usted está aquí

Inicio » Estudios » Grados » Grado en Ingeniería Informática » Plan de estudios » Asignaturas » Interacción y Diseño de Interfaces
Créditos
6
Tipos
Obligatoria
Requisitos
  • Prerrequisito: EDA
  • Prerrequisito: M1
Departamento
CS
La asignatura trata dos temas principales: el diseño de interfaces y estudio de su usabilidad y la interacción gráfica.

Profesorado

Responsable

  • Marta Fairen Gonzalez ( )

Otros

  • Alejandro Beacco Porres ( )
  • Alejandro Ríos Jerez ( )
  • Alvaro Vinacua Pla ( )
  • Amalia Duch Brown ( )
  • Antonio Chica Calaf ( )
  • Bernardino Casas Fernández ( )
  • Carlos Andujar Gran ( )
  • Eduard Pujol Puig ( )
  • Francisco Jose Arias Arnedo ( )
  • Genis Bayona Jaume ( )
  • Imanol Muñoz Pandiella ( )
  • Joan Fons Sánchez ( )
  • Jordi Luque Serrano ( )
  • Maria Josep Blesa Aguilera ( )
  • Nuria Pelechano Gomez ( )
  • Oscar Argudo Medrano ( )
  • Pere Pau Vázquez Alcocer ( )

Horas semanales

Teoría
2
Problemas
0
Laboratorio
2
Aprendizaje dirigido
0
Aprendizaje autónomo
6

Competencias

Competencias Técnicas

Competencias técnicas comunes

  • CT1 - Demostrar conocimiento y comprensión de hechos esenciales, conceptos, principios y teorías relativas a la informática y a sus disciplinas de referencia.
    • CT1.2A - Demostrar conocimiento y comprensión de los conceptos fundamentales de la programación y de la estructura básica de un computador. CEFB5. Conocimiento de la estructura, funcionamiento e interconexión de los sistemas informáticos, así como los fundamentos de su programación.
  • CT2 - Utilizar de forma apropiada teorías, procedimientos y herramientas en el desarrollo profesional de la ingeniería informática en todos sus ámbitos (especificación, diseño, implementación, despliegue -implantación- y evaluación de productos) de manera que se demuestre la comprensión de los compromisos adoptados en las decisiones de diseño.
    • CT2.5 - Diseñar y evaluar interfaces persona-computador que garanticen la accesibilidad y la usabilidad a los sistemas, a los servicios y a las aplicaciones informáticas.
  • CT4 - Demostrar conocimiento y capacidad de aplicación de los procedimientos algorítmicos básicos de las tecnologías informáticas para diseñar soluciones a problemas, analizando la idoneidad y la complejidad de los algoritmos
    • CT4.1 - Identificar las soluciones algorítmicas más adecuadas para resolver problemas de dificultad mediana.
  • CT5 - Analizar, diseñar, construir y mantener aplicaciones de forma robusta, segura y eficiente, escogiendo el paradigma y los lenguajes de programación más adecuados.
    • CT5.2 - Conocer, diseñar y utilizar de forma eficiente los tipos y las estructuras de datos más adecuados para la resolución de un problema.
    • CT5.3 - Diseñar, escribir, probar, depurar, documentar y mantener código en un lenguaje de alto nivel para resolver problemas de programación aplicando esquemas algorítmicos y usando estructuras de datos.
    • CT5.4 - Diseñar la arquitectura de los programas utilizando técnicas de orientación a objetos, de modularización y de especificación e implementación de tipos abstractos de datos.
    • CT5.5 - Usar las herramientas de un entorno de desarrollo de software para crear y desarrollar aplicaciones.

Competencias Transversales

Actitud frente al trabajo

  • G8 [Avaluable] - Tener motivación para la realización profesional y para afrontar nuevos retos, así como una visión amplia de las posibilidades de la carrera profesional en el ámbito de la Ingeniería en Informática. Tener motivación por la calidad y la mejora continua, y actuar con rigor en el desarrollo profesional. Capacidad de adaptación a los cambios organizativos o tecnológicos. Capacidad de trabajar en situaciones de falta de información y/o con restricciones temporales y/o de recursos.
    • G8.3 - Tener motivación para el desarrollo profesional y para afrontar nuevos retos. Tener motivación para la mejora continua. Disponer de capacidad de trabajo en situaciones de falta de información.

Objetivos

  1. Aprender a programar interfaces en un lenguaje de programación de alto nivel y utilizando una API concreta. Diseñar e implementar aplicaciones interactivas que utilicen APIs para el diseño de interfaces.
    Competencias relacionadas: CT5.2, CT5.4, CT5.5, CT5.3,
  2. Aprender los conceptos básicos de Gráficos por Computador. Implementar aplicaciones sencillas en OpenGL que visualicen datos 3D.
    Competencias relacionadas: CT1.2A, CT4.1,
  3. Conocer la arquitectura de las GPUs actuales.
    Competencias relacionadas: CT5.5,
  4. Ser capaz de diseñar aplicaciones con interfaces de usuario diferentes de las habituales, como los móviles o los tablets.
    Competencias relacionadas: CT2.5, CT5.5, G8.3,
  5. Conseguir una actitud proactiva por la calidad y mejora continua.
    Competencias relacionadas: G8.3,
  6. Tener capacidad de adaptación a los cambios organizativos o tecnológicos.
    Competencias relacionadas: CT2.5, CT5.5, G8.3,
  7. Capacidad de adaptación en situaciones de restricciones temporales y / o de recursos y / o de falta de información.
    Competencias relacionadas: CT5.4, CT5.5, G8.3,
  8. Conocer el concepto de usabilidad y saber valorar si una interfaz de una aplicación o una página web son usables. Ser capaz de evaluar la usabilidad de una interfaz específica.
    Competencias relacionadas: CT2.5, G8.3,

Contenidos

  1. Introducción a los sistemas interactivos
    Conceptos básicos de los sistemas interactivos. Introducción a la interacción persona ordenador.
  2. Computación ubicua y realidad aumentada
    Definiciones. Sistemas de Realidad Virtual y de Realidad Aumentada.
  3. Diseño de interfaces de usuario
    Introducción a la Usabilidad. Principios básicos de diseño de interfaces de usuario. Reglas de diseño.
  4. Modelos de color
    Representaciones del color. Traducción entre modelos.
  5. Programación de interfaces
    Introducción a Qt. Programación de interfaces avanzadas con Qt.
  6. Procesamiento y visualización de geometría 2D y 3D
    Introducción a los Gráficos por Computador. Visualización utilizando OpenGL.
  7. Desarrollo centrado en el usuario
    Diseño centrado en el usuario. Evaluación del diseño de interfaces. Evaluación de páginas web. Estudios de usabilidad.
  8. Arquitectura y programación de tarjetas gráficas
    Introducción a GLSL. Vertex shaders y fragment shaders.

Actividades

Actividad Acto evaluativo


Procesamiento de Geometría.

Estudiar las diferentes formas de modelar escenas y objetos. Aprender los elementos del procesado de la geometría 2D y 3D: mallas de triángulos. Repasar estructuras de datos. Análisis de diferentes estructuras de datos para la geometría. Estudiar los elementos de un sistema gráfico interactivo. Implementar aplicaciones sencillas en OpenGL y 3D.
  • Teoría: Modelos de escenas y objetos. Elementos del procesado de la geometría 2D y 3D: mallas de triángulos. Estructuras de datos para la geometría. Elementos de un sistema gráfico interactivo.
  • Aprendizaje autónomo: Repaso de conceptos. Ejercicios de mallas de triángulos. Ejercicios de estructuras de datos para geometría.
Objetivos: 2
Contenidos:
Teoría
2h
Problemas
0h
Laboratorio
0h
Aprendizaje dirigido
0h
Aprendizaje autónomo
6h

Visualización 3D de datos.

Estudiar los conceptos básicos de visualización en 3D. Aprender el modelo de cámara. Hacer ejercicios de modelo de cámara y de transformaciones geométricas. Estudiar el pipeline de visualización programable.
  • Teoría: Transformaciones geométricas. Modelo de cámara. Librerías gráficas. Diagrama conceptual del proceso de visualización en openGL. Sistemas de coordenadas, transformaciones de Modelado y Visualización en OpenGL. Iluminación en OpenGL.
  • Aprendizaje autónomo: Repaso de transformaciones geométricas. Ejercicios de transformaciones geométricas. Ejercicios de cámara. Repaso del proceso de visualización.
Objetivos: 2 3
Contenidos:
Teoría
10h
Problemas
0h
Laboratorio
0h
Aprendizaje dirigido
0h
Aprendizaje autónomo
10h

Programación de aplicaciones gráficas.

Programar estructuras de datos que almacenen mallas de triángulos. Programar de forma básica la GPU com GLSL. Entender y utilizar los cálculos de iluminación en OpenGL.Aprender a gestionar la interacción en Qt.
  • Laboratorio: Aplicaciones que utilicen estructuras de datos para la geometría 3D. Simulación de la iluminación utilizando OpenGL. Interacción en Qt y OpenGL.
  • Aprendizaje autónomo: Programar una aplicación con Qt y OpenGL.
Objetivos: 2 3
Contenidos:
Teoría
0h
Problemas
0h
Laboratorio
18h
Aprendizaje dirigido
0h
Aprendizaje autónomo
15h

Introducción a los sistemas interactivos.

Estudiar los apuntes de interacción Persona-Computador. Estudiar los apuntes de usabilidad. Aprender a diseñar interfaces gráficas. Aprender a realizar evaluaciones de usabilidad de aplicaciones y páginas web.
  • Teoría: Conceptos básicos de sistemas interactivos. Introducción a la interacción Persona-Computador. Diseño centrado en el usuario.
  • Aprendizaje autónomo: Estudio apuntes de interacción.
Objetivos: 8
Contenidos:
Teoría
2h
Problemas
0h
Laboratorio
0h
Aprendizaje dirigido
0h
Aprendizaje autónomo
5h

Ampliación o ejercicios sobre un tema de diseño de interfaces.

Resolver ejercicios o estudiar un tema de diseño de interfaces de forma autónoma.
  • Aprendizaje autónomo: Resolver ejercicios o estudiar un tema de diseño de interfaces de forma autónoma.
Objetivos: 8 1 4 5 6 7
Contenidos:
Teoría
0h
Problemas
0h
Laboratorio
0h
Aprendizaje dirigido
0h
Aprendizaje autónomo
10h

Prueba Teo1: Control sobre interacción gráfica y diseño de interfaces.

Ejercicio escrito que evalúa los conocimientos adquiridos de interacción gráfica y diseño de interfaces.
Objetivos: 8 2 3 5
Semana: 7 (Fuera de horario lectivo)
Tipo: examen de teoría
Teoría
2h
Problemas
0h
Laboratorio
0h
Aprendizaje dirigido
0h
Aprendizaje autónomo
10h

Prueba Lab: Práctica de laboratorio de implementación de aplicaciones gráficas utilizando OpenGL y diseñando la interfaz con Qt.

La prueba práctica de laboratorio consiste en la implementación de una aplicación que utilice OpenGL y Qt.
Objetivos: 1 2 3
Semana: 12
Tipo: examen de laboratorio
Teoría
0h
Problemas
0h
Laboratorio
0h
Aprendizaje dirigido
0h
Aprendizaje autónomo
0h

Introducción a las interfaces gráficas.

Aprender a diseñar e implementar interfaces gráficas. Realizar prácticas en Qt.
  • Laboratorio: Introducción a la programación de interfaces. Prácticas de programación en Qt.
  • Aprendizaje autónomo: Programación de programas sencillos utilizando Qt.
Objetivos: 1
Teoría
0h
Problemas
0h
Laboratorio
6h
Aprendizaje dirigido
0h
Aprendizaje autónomo
6h

Diseño de interfaces de usuario.

Estudiar el modelo Vista Controlador. Estudiar apuntes sobre usabilidad de aplicaciones y páginas web. Aprender a diseñar aplicaciones en dispositivos móviles. Evaluar interfaces de dispositivos móviles.
  • Teoría: Introducción a la Usabilidad. Medidas de usabilidad: Ley de Fitts, Control-Display Ratio ... Estudios de usabilidad: Diseño estudio, informes de expertos, evaluación de resultados ... Aspectos fundamentales en el diseño de páginas web usables. Diseño de interfaces para dispositivos portables.
  • Aprendizaje autónomo: Apuntes de usabilidad y evaluación de interfaces. Apuntes reglas de diseño de interfaces. Apuntes metáforas de interacción.
Objetivos: 8 4
Contenidos:
Teoría
10h
Problemas
0h
Laboratorio
0h
Aprendizaje dirigido
0h
Aprendizaje autónomo
8h

Introducción a la RA, RV i CU

Estudiar los conceptos básicos de interacción en entornos 3D, gráficos por computador, realidad virtual y realidad aumentada y hacer los ejercicios correspondientes. Estudiar los apuntes de la asignatura.
  • Teoría: Gráficos, Realidad Virtual y Realidad Aumentada. Introducción a la visualización de información. Modelos de color.
Objetivos: 2
Contenidos:
Teoría
2h
Problemas
0h
Laboratorio
0h
Aprendizaje dirigido
0h
Aprendizaje autónomo
0h

Programación de interfaces avanzadas utilizando OpenGL y Qt.

Aprender a programar interfaces avanzadas. Utilizar los signals y slots de Qt. Integrar widgets complejas en interfaces avanzadas.
  • Laboratorio: Programación de una aplicación completa que utilice widgets avanzados y OpenGL.
  • Aprendizaje autónomo: Programación de una aplicación completa que utilice widgets avanzados y OpenGL.
Objetivos: 1 2
Contenidos:
Teoría
0h
Problemas
0h
Laboratorio
6h
Aprendizaje dirigido
0h
Aprendizaje autónomo
8h

Prova Teo2: Examen final.

Examen que evaluará los conocimientos adquiridos durante la asignatura. Será un examen escrito tradicional.
Objetivos: 8 1 2 3 4 5 6 7
Semana: 15 (Fuera de horario lectivo)
Tipo: examen de teoría
Teoría
2h
Problemas
0h
Laboratorio
0h
Aprendizaje dirigido
0h
Aprendizaje autónomo
12h

Metodología docente

En las sesiones de teoría se introducirán conceptos teóricos y, cuando proceda, ejercicios y problemas. La parte teórica estará fuertemente ligada a los desarrollos propuestos en laboratorio.

Como apoyo para las clases de teoría, sobre todo para la parte de interacción y diseño, se proporcionarán apuntes o artículos que estarán disponibles vía Racó. Estos apuntes están pensados ¿¿para que los/las estudiantes los tengan disponibles durante las clases.

Se espera que los/las estudiantes se preparen los materiales adicionales que se proporcionarán en forma de apuntes u otro tipo de documentación de cara a preparar las clases, los exámenes y como documentación que servirá para poder realizar las prácticas de forma correcta.

En las sesiones de laboratorio, se introducirá el software a utilizar y se plantearán una serie de pequeñas prácticas que se deberán desarrollar y eventualmente entregar.
Buena parte del tiempo de laboratorio se dedicará a la resolución de los ejercicios planteados con la ayuda del profesorado.

Los ejercicios de laboratorio (entregables) permitirán el uso de código que se haya desarrollado de manera autónoma. Compartir dicho código entre estudiantes será considerado copia.

Método de evaluación

La nota de la asignatura constará de 3 partes:
- Una nota de laboratorio: ProvaLab en la que se pedirá que se resuelvan pequeños problemas. Tendrá más énfasis en la interacción gráfica pero incluyendo también diseño y programación de interfaces. Deberá resolverse en laboratorio a partir de un código inicial proporcionado en el mismo examen.

Durante el curso se especificará un conjunto de ejercicios de laboratorio (n) que se deberan realizar y entregar Si se entregan TODOS estos ejercicios se optará a 1 punto extra en la nota del laboratorio siempre que en la prueba de laboratorio (ProvaLab) se alcance una nota igual o superior a 4.5. Si no se entregan todos estos ejercicios y sólo entregan x de estos n, la fórmula para decidir la porción del punto que se puede alcanzar es (x / n) ^ 2.2. Por ejemplo, si n = 4, los valores que se obtendrían dependiendo del número x de entregas es: 0 - 0; 1 - 0.05; 2 - 0.22; 3 - 0.53; 4 - 1.
 
- Dos exámenes de teoría: Prova Teo1 y Prova Teo2. No se podrán utilizar apuntes ni calculadoras ni dispositivos móviles.

Para calcular la nota final, se utilizará la siguiente fórmula, donde todas las notas son sobre 10:

25% ProvaLab + 25% Prova Teo1 + 50% Prova Teo2

Calificación de la competencia genérica: Tendrá valores A, B, C o D (donde A corresponde a un nivel excelente, B corresponde a un nivel deseado, C corresponde a un nivel suficiente y D corresponde a un nivel no superado). Una buena evaluación de esta competencia se tendrá cuando se tenga:

- Actitud proactiva para la calidad y la mejora continua.
- Motivación. Se deberá trabajar en condiciones de falta de información.
- Capacidad de adaptación en situaciones de falta de información.

Bibliografía

Básica:

Complementaria:

Web links

Capacidades previas

Capacidades de las asignaturas EDA (Estructuras de Datos y Algoritmos) y M2 (Matemáticas 2).

En concreto, se espera que se tenga la capacidad de:
- Programar correctamente usando programación orientada a objetos, en C++.
- Entender y saber implementar las estructuras de datos básicos, listas, pilas, etc.
- Conocer los fundamentos del álgebra lineal, transformaciones geométricas y cambios de base.