Interacció i Disseny d'Interfícies

Esteu aquí

Inici » Estudis » Graus » Grau en Enginyeria Informàtica » Pla d'estudis » Assignatures » Interacció i Disseny d'Interfícies
Crèdits
6
Tipus
Obligatòria
Requisits
  • Prerequisit: EDA
  • Prerequisit: M1
Departament
CS
L'assignatura tracta dos temes principals: el disseny d'interfícies i estudi de la seva usabilitat i la interacció gràfica.

Professorat

Responsable

  • Marta Fairen Gonzalez ( )

Altres

  • 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 ( )
  • Victor Anton Dominguez ( )
  • Víctor Franco Sánchez ( )

Hores setmanals

Teoria
2
Problemes
0
Laboratori
2
Aprenentatge dirigit
0
Aprenentatge autònom
6

Competències

Competències Tècniques

Competències tècniques comunes

  • CT1 - Demostrar coneixement i comprensió de fets essencials, conceptes, principis i teories relatives a la informàtica i a les seves disciplines de referència.
    • CT1.2A - Interpretar, seleccionar i valorar conceptes, teories, usos i desenvolupaments tecnològics relacionats amb la informàtica i la seva aplicació a partir dels fonaments matemàtics, estadístics i físics necessaris. CEFB1: capacitat per a resoldre els problemes matemàtics que es plantegin en la enginyeria. Aptitud per a aplicar els coneixements sobre: àlgebra, càlcul diferencial i integral i mètodes numèrics; estadística i optimització.
  • CT2 - Utilitzar d'una manera apropiada teories, procediments i eines en el desenvolupament professional de l'enginyeria informàtica en tots els seus àmbits (especificació, disseny, implementació, desplegament -implantació- i avaluació de productes) de manera que es demostri la comprensió dels compromisos adoptats a les decisions de disseny.
    • CT2.5 - Dissenyar i avaluar interfícies persona-computador que garanteixin l'accessibilitat i la usabilitat als sistemes, als serveis i a les aplicacions informàtiques.
  • CT4 - Demostrar coneixement i capacitat d'aplicació dels procediments algorísmics bàsics de les tecnologies informàtiques per a dissenyar solucions a problemes, analitzant la idoneïtat i la complexitat dels algorismes
    • CT4.1 - Identificar les solucions algorísmiques més adequades per a resoldre problemes de dificultat mitjana.
  • CT5 - Analitzar, dissenyar, construir i mantenir aplicacions de forma robusta, segura i eficient, triant el paradigma i els llenguatges de programació més adequats.
    • CT5.2 - Conèixer, dissenyar i utilitzar de forma eficient els tipus i les estructures de dades més adients per a la resolució d'un problema.
    • CT5.3 - Dissenyar, escriure, provar, depurar, documentar i mantenir codi en un llenguatge d'alt nivell per a resoldre problemes de programació aplicant esquemes algorísmics i utilitzant estructures de dades.
    • CT5.4 - Dissenyar l'arquitectura dels programes utilitzant tècniques d'orientació a objectes, de modularització i d'especificació i implementació de tipus abstractes de dades.
    • CT5.5 - Usar les eines d'un entorn de desenvolupament de software per a crear i desenvolupar aplicacions.

Competències Transversals

Actitud adequada davant el treball

  • G8 [Avaluable] - Tenir motivació per a la realització professional i per a afrontar nous reptes, tenir una visió àmplia de les possibilitats de la carrera professional en l'àmbit de l'enginyeria en informàtica. Sentir-se motivat per la qualitat i la millora contínua, i actuar amb rigor en el desenvolupament professional. Capacitat d'adaptació als canvis organitzatius o tecnològics. Capacitat de treballar en situacions de carència d'informació i/o amb restriccions temporals i/o de recursos.
    • G8.3 - Estar motivat pel desenvolupament professional, per a afrontar nous reptes i per la millora contínua. Tenir capacitat de treball en situacions de falta d'informació.

Objectius

  1. Aprendre a programar interfícies en un llenguatge de programació d'alt nivell i utilitzant una API concreta. Dissenyar i implementar aplicacions interactives que utilitzin APIs per al disseny d'interfícies.
    Competències relacionades: CT5.2, CT5.4, CT5.5, CT5.3,
  2. Aprendre els conceptes bàsics de Gràfics per Computador. Implementar aplicacions senzilles en OpenGL que visualitzin dades 3D.
    Competències relacionades: CT1.2A, CT4.1,
  3. Conèixer l'arquitectura de les GPUs actuals.
    Competències relacionades: CT5.5,
  4. Ser capaç de dissenyar aplicacions amb interfícies d'usuari diferents de les habituals, com els mòbils o els tablets.
    Competències relacionades: CT2.5, CT5.5, G8.3,
  5. Aconseguir una actitud proactiva per la qualitat i millora contínua.
    Competències relacionades: G8.3,
  6. Tenir capacitat per adaptar-se als canvis organitzatius o tecnològics.
    Competències relacionades: CT2.5, CT5.5, G8.3,
  7. Capacitat d'adaptació en situacions de restriccions temporals i/o de recursos i/o de falta d'informació.
    Competències relacionades: CT5.4, CT5.5, G8.3,
  8. Conèixer el concepte d'usabilitat i saber valorar si una interfície d'una aplicació o una pàgina web són usables. Ser capaç d'avaluar la usabilitat d'una interfície concreta.
    Competències relacionades: CT2.5, G8.3,

Continguts

  1. Introducció als sistemes interactius
    Conceptes bàsics dels sistemes interactius. Introducció a la interacció persona ordinador.
  2. Computació ubiqua i realitat augmentada
    Definicions. Sistemes de Realitat Virtual i de Realitat Augmentada.
  3. Disseny d'interfícies d'usuari
    Introducció a la Usabilitat. Principis bàsics de disseny d'interfícies d'usuari. Regles de disseny.
  4. Models de color
    Representacions del color. Traducció entre models.
  5. Programació d'interfícies
    Introducció a Qt. Programació d'interfícies avançades amb Qt.
  6. Processament i visualització de geometria 2D i 3D
    Introducció als Gràfics per Computador. Visualització utilitzant OpenGL.
  7. Desenvolupament centrat en l'usuari
    Disseny centrat en l'usuari. Avaluació del disseny d'interfícies. Avaluació de pàgines web. Estudis d'usabilitat.
  8. Arquitectura i programació de targetes gràfiques
    Introducció a GLSL. Vertex shaders i fragment shaders.

Activitats

Activitat Acte avaluatiu


Processament de Geometria.

Estudiar les diferents formes de modelar escenes i objectes. Aprendre els elements del processat de la geometria 2D i 3D: malles de triangles. Repassar estructures de dades. Anàlisi de diferents estructures de dades per a la geometria. Estudiar els elements d'un sistema gràfic interactiu. Implementar aplicacions senzilles en OpenGL i 3D.
  • Teoria: Models d'escenes i objectes. Elements del processat de la geometria 2D i 3D: malles de triangles. Estructures de dades per a la geometria. Elements d'un sistema gràfic interactiu.
  • Aprenentatge autònom: Repàs de conceptes. Exercicis de malles de triangles. Exercicis d'estructures de dades per a geometria.
Objectius: 2
Continguts:
Teoria
2h
Problemes
0h
Laboratori
0h
Aprenentatge dirigit
0h
Aprenentatge autònom
6h

Visualització 3D de dades.

Estudiar els conceptes bàsics de visualització en 3D. Aprendre el model de càmera. Fer exercicis de model de càmera i de transformacions geomètriques. Estudiar el pipeline de visualització programable.
  • Teoria: Transformacions geomètriques. Model de càmera. Llibreries gràfiques. Diagrama conceptual del procés de visualització en openGL. Sistemes de coordenades, transformacions de Modelat i Visualització en OpenGL. Il·luminació en OpenGL.
  • Aprenentatge autònom: Repàs de transformacions geomètriques. Exercicis de transformacions geomètriques. Exercicis de càmera. Repàs del procés de visualització.
Objectius: 2 3
Continguts:
Teoria
10h
Problemes
0h
Laboratori
0h
Aprenentatge dirigit
0h
Aprenentatge autònom
10h

Programació d'aplicacions gràfiques.

Programar estructures de dades que emmagatzemin malles de triangles. Programar de forma bàsica la GPU amb GLSL. Entendre i utilitzar els càlculs d'il·luminació en OpenGL. Aprendre a gestionar la interacció en Qt.
  • Laboratori: Aplicacions que utilitzin estructures de dades per a la geometria 3D. Simulació de la il·luminació utilitzant OpenGL. Interacció en Qt i OpenGL.
  • Aprenentatge autònom: Programar una aplicació amb Qt i OpenGL.
Objectius: 2 3
Continguts:
Teoria
0h
Problemes
0h
Laboratori
18h
Aprenentatge dirigit
0h
Aprenentatge autònom
15h

Introducció als sistemes interactius.

Estudiar els apunts d'interacció Persona-Computador. Estudiar els apunts d'usabilitat. Aprendre a dissenyar interfícies gràfiques. Aprendre a realitzar avaluacions d'usabilitat d'aplicacions i pàgines web.
  • Teoria: Conceptes bàsics de sistemes interactius. Introducció a la interacció Persona-Computador. Disseny centrat en l'usuari.
  • Aprenentatge autònom: Estudi apunts d'interacció.
Objectius: 8
Continguts:
Teoria
2h
Problemes
0h
Laboratori
0h
Aprenentatge dirigit
0h
Aprenentatge autònom
5h

Ampliació o exercicis sobre un tema de disseny d'interfícies.

Resoldre exercicis o estudiar un tema de disseny d'interficies de forma autònoma.
  • Aprenentatge autònom: Resoldre exercicis o estudiar un tema de disseny d'interficies de forma autònoma.
Objectius: 8 1 4 5 6 7
Continguts:
Teoria
0h
Problemes
0h
Laboratori
0h
Aprenentatge dirigit
0h
Aprenentatge autònom
10h

Prova Teo1: Control sobre interacció gràfica i disseny d'interfícies.

Parcial: Exercici escrit que avalua els coneixements adquirits d'interacció gràfica i disseny d'interfícies.
Objectius: 8 2 3 5
Setmana: 7 (Fora d'horari lectiu)
Teoria
2h
Problemes
0h
Laboratori
0h
Aprenentatge dirigit
0h
Aprenentatge autònom
10h

Prova Lab: Pràctica de laboratori d'implementació d'aplicacions gràfiques utilitzant OpenGL i dissenyant la iterfície amb Qt.

La prova pràctica de laboratori consisteix en la implementació d'una aplicació que utilitzi OpenGL i Qt.
Objectius: 1 2 3
Setmana: 12
Teoria
0h
Problemes
0h
Laboratori
0h
Aprenentatge dirigit
0h
Aprenentatge autònom
0h

Introducció a les interfícies gràfiques.

Aprendre a dissenyar i implementar interfícies gràfiques. Realitzar pràctiques en Qt.
  • Laboratori: Introducció a la programació d'interfícies. Pràctiques de programació en Qt.
  • Aprenentatge autònom: Programació de programes senzills utilitzant Qt.
Objectius: 1
Teoria
0h
Problemes
0h
Laboratori
6h
Aprenentatge dirigit
0h
Aprenentatge autònom
6h

Disseny d'interfícies d'usuari.

Estudiar el model Vista Controlador. Estudiar apunts sobre usabilitat d'aplicacions i pàgines web. Aprendre a dissenyar aplicacions en dispositius mòbils. Avaluar interfícies de dispositius mòbils.
  • Teoria: Introducció a la Usabilitat. Mesures d'usabilitat: Llei de Fitts, Control-Display Ratio... Estudis d'usabilitat: Disseny estudi, informes d'experts, avaluació de resultats... Aspectes fonamentals en el disseny de pàgines web usables. Disseny d'interfícies per a dispositius portables.
  • Aprenentatge autònom: Apunts d'usabilitat i avaluació d'interfícies. Apunts regles de disseny d'interfícies. Apunts metàfores d'interacció.
Objectius: 8 4
Continguts:
Teoria
10h
Problemes
0h
Laboratori
0h
Aprenentatge dirigit
0h
Aprenentatge autònom
8h

Introducció a la RA, RV i UC

Estudiar els conceptes bàsics d'interacció en entorns 3D, gràfics per computador, realitat virtual i realitat augmentada i fer els exercicis corresponents. Estudiar els apunts de l'assignatura.
  • Teoria: Gràfics, Realitat Virtual i Realitat Augmentada. Introducció a la visualització d'informació. Models de color.
Objectius: 2
Continguts:
Teoria
2h
Problemes
0h
Laboratori
0h
Aprenentatge dirigit
0h
Aprenentatge autònom
0h

Programació d'interfícies avançades utilitzant OpenGL i Qt.

Aprendre a programar interfícies avançades. Utilitzar els signals i slots de Qt. Integrar widgets complexes en interfícies avançades.
  • Laboratori: Programació d'una aplicació completa que utilitzi widgets avançats i OpenGL.
  • Aprenentatge autònom: Programació d'una aplicació completa que utilitzi widgets avançats i OpenGL.
Objectius: 1 2
Continguts:
Teoria
0h
Problemes
0h
Laboratori
6h
Aprenentatge dirigit
0h
Aprenentatge autònom
8h

Prova Teo2: Examen final.

Examen que avaluarà els coneixements adquirits durant l'assignatura. Serà un examen escrit tradicional.
Objectius: 8 1 2 3 4 5 6 7
Setmana: 15 (Fora d'horari lectiu)
Teoria
2h
Problemes
0h
Laboratori
0h
Aprenentatge dirigit
0h
Aprenentatge autònom
12h

Metodologia docent

En les sessions de teoria s'introduiran conceptes teòrics i, quan s'escaigui, exercicis i problemes. La part teòrica estarà fortament lligada als desenvolupaments proposats a laboratori.

Com a suport per a les classes de teoria, sobretot per a la part d'interacció i disseny, es proporcionaran apunts o articles que estaran disponibles via Racó. Aquests apunts estan pensats perquè els/les alumnes els tinguin disponibles durant les classes.

S'espera que els/les alumnes es preparin els materials addicionals que es proporcionaran en forma d'apunts o altre tipus de documentació de cara a preparar les clases, els exàmens i com a documentació que servirà per a poder realitzar les pràctiques de forma correcta.

En les sessions de laboratori, s'introduirà el programari a fer servir i es plantejaran una sèrie de petites pràctiques que s'hauran de desenvolupar i eventualment entregar.
Bona part del temps de laboratori es dedicarà a la resolució dels exercicis plantejats amb l'ajut del professorat.

Els exercicis de laboratori (lliurables) permetran l'ús de codi que s'hagi desenvolupat de manera autònoma. Compartir aquest codi entre alumnes serà considerat còpia.

Mètode d'avaluació

La nota de l'assignatura constarà de 3 parts:
- Una nota de laboratori: ProvaLab en la qual es demanarà que es resolguin petits problemes. Farà més èmfasi en la interacció gràfica però també inclourà una part de disseny i programació d'interfícies. S'haurà de resoldre a laboratori a partir d'un codi inicial proporcionat en el mateix examen.

Durant el curs s'especificarà un conjunt d'exercicis de laboratori (n) que s'hauran de realitzar i entregar Si s'entreguen TOTS aquests exercicis s'optarà a 1 punt extra en la nota del laboratori sempre que en la prova de laboratori (ProvaLab) s'assoleixi una nota igual o superior a 4.5. Si no s'entreguen tots aquests exercicis i només s'entreguen x d'aquests n, la fórmula per a decidir la porció del punt que es pot assolir és (x/n)^2.2. Per exemple, si n=4, els valors que s'obtindrien depenent del nombre x d'entregues és: 0 - 0; 1 - 0.05; 2 - 0.22; 3 - 0.53; 4 - 1.

- Dos exàmens de teoria: Prova Teo1 i Prova Teo2. No es podran utilitzar apunts ni calculadores ni dispositius mòbils.

Per calcular la nota final, s'utilitzarà la següent fórmula, on totes les notes són sobre 10:

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

Qualificació de la competència genèrica: Tindrà valors A, B, C o D (on A correspon a un nivell excel.lent, B correspon a un nivell desitjat, C correspon a un nivell suficient i D correspon a un nivell no superat). Un bona avaluació d'aquesta competència es tindrà quan es tingui:

- Actitud proactiva per la qualitat i la millora contínua.
- Motivació. S'haurà de treballar en condicions de manca d'informació.
- Capacitat d'adaptació en situacions de manca d'informació.

Bibliografia

Bàsica:

Complementaria:

Web links

Capacitats prèvies

Capacitats de les assignatures EDA (Estructures de Dades i Algorismes) i M2 (Matemàtiques 2).

En concret, s'espera que es tingui la capacitat de:
- Programar correctament usant programació orientada a objectes, en C++.
- Entendre i saber implementar les estructures de dades bàsiques, llistes, piles, etc.
- Conèixer els fonaments de l'àlgebra linial, transformacions geomètriques i canvis de base.