Interacción y Diseño de Interfaces

Créditos
6
Tipos
  • GIA: Optativa
  • GRAU: Obligatoria
  • GCED: Optativa
Requisitos
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

Otros

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)
    Teoría
    0h
    Problemas
    0h
    Laboratorio
    0h
    Aprendizaje dirigido
    0h
    Aprendizaje autónomo
    0h

    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
    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)
    Teoría
    0h
    Problemas
    0h
    Laboratorio
    0h
    Aprendizaje dirigido
    0h
    Aprendizaje autónomo
    0h

    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ásico

    Complementario

    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.