Interacció i Disseny d'Interfícies

Esteu aquí

Crèdits
6
Tipus
Obligatòria
Requisits
  • Prerequisit: M1
  • Prerequisit: EDA
Departament
CS
L'assignatura tracta dos temes principals: el disseny d'interfícies i estudi de la seva usabilitat i la interacció gràfica.

Professors

Responsable

  • Marta Fairen Gonzalez ( )

Altres

  • Alejandro Ríos Jerez ( )
  • Alvaro Vinacua Pla ( )
  • Antonio Chica Calaf ( )
  • Bernardino Casas Fernández ( )
  • Carlos Andujar Gran ( )
  • Isabel Navazo Alvaro ( )
  • M. Jose Blesa Aguilera ( )
  • Nuria Pelechano Gomez ( )
  • Oscar Argudo Medrano ( )
  • Otger Rogla Pujalt ( )
  • Pere Pau Vázquez Alcocer ( )
  • Ricard Gavaldà Mestre ( )
  • Robert Joan Arinyo ( )

Hores setmanals

Teoria
2
Problemes
0
Laboratori
2
Aprenentatge dirigit
0.4
Aprenentatge autònom
5.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 - 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.
    Related competences: CT5.3, CT5.2, CT5.4, CT5.5,
  2. Aprendre els conceptes bàsics de Gràfics per Computador. Implementar aplicacions senzilles en OpenGL que visualitzin dades 3D.
    Related competences: CT1.2A, CT4.1,
  3. Conèixer l'arquitectura de les GPUs actuals.
    Related competences: CT5.5,
  4. Ser capaç de dissenyar aplicacions amb interfícies d'usuari diferents de les habituals, com els mòbils o els tablets.
    Related competences: CT2.5, CT5.5, G8.3,
  5. Aconseguir una actitud proactiva per la qualitat i millora contínua.
    Related competences: G8.3,
  6. Tenir capacitat per adaptar-se als canvis organitzatius o tecnològics.
    Related competences: 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ó.
    Related competences: 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.
    Related competences: 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

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
4
Problemes
0
Laboratori
0
Aprenentatge dirigit
0
Aprenentatge autònom
6
  • 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:

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
12
Problemes
0
Laboratori
0
Aprenentatge dirigit
0
Aprenentatge autònom
10
  • 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:

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.
Teoria
0
Problemes
0
Laboratori
18
Aprenentatge dirigit
0
Aprenentatge autònom
15
  • 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:

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
2
Problemes
0
Laboratori
0
Aprenentatge dirigit
0
Aprenentatge autònom
5
  • 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:

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.
Teoria
0
Problemes
0
Laboratori
0
Aprenentatge dirigit
0
Aprenentatge autònom
10
  • 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:

Introducció a les interfícies gràfiques.

Aprendre a dissenyar i implementar interfícies gràfiques. Realitzar pràctiques en Qt.
Teoria
0
Problemes
0
Laboratori
6
Aprenentatge dirigit
0
Aprenentatge autònom
6
  • 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

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
11
Problemes
0
Laboratori
0
Aprenentatge dirigit
0
Aprenentatge autònom
8
  • 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:

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
1
Problemes
0
Laboratori
0
Aprenentatge dirigit
0
Aprenentatge autònom
0
  • Teoria: Gràfics, Realitat Virtual i Realitat Augmentada. Introducció a la visualització d'informació. Models de color.
Objectius: 2
Continguts:

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.
Teoria
0
Problemes
0
Laboratori
6
Aprenentatge dirigit
0
Aprenentatge autònom
8
  • 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:

Metodologia docent

En les sessions de teoria el professor introduirà 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ó uns quants dies abans. Aquests apunts estan pensats perquè els alumnes els tinguin disponibles durant les classes, però en tot cas en format paper. Durant el desenvolupament de les classes, per no pertorbar el normal funcionament, no serà permès l'ús de dispositius portàtils ni mòbils de cap mena.

S'espera que els estudiants 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 l'alumne haurà de desenvolupar i eventualment entregar.
Bona part del temps de laboratori es dedicarà a que els estudiants resolguin les pràctiques plantejades amb l'ajut del professor.

Els exàmens de laboratori permetran l'ús de codi que hagi desenvolupat l'alumne de manera autònoma. Compartir aquest codi entre estudiants 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à a l'estudiant que resolgui 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 i permetrà l'ús de codi que hagi desenvolupat l'alumne de manera autònoma. Compartir aquest codi de partida entre estudiants serà considerat còpia. Per a arribar a l'examen amb garanties, els estudiants desenvoluparan uns guions proporcionats pel professorat.
Durant el curs s'especificarà un conjunt d'exercicis de laboratori (n) que l'estudiant haurà de realitzar i entregar Si s'entreguen TOTS aquests exercicis l'estudiant 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 a calcular la nota final, s'utilitzarà la següent fórmula, on totes les notes són sobre 10:

El càlcul de la nota final serà:
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 la tindran els estudiants que tinguin:

Motivació per a la realització professional.
Realització professional. A nivell teòric, es començaran a introduir idees amplies de les possibilitats de la carrera professional en l'àmbit de la informàtica. A nivell pràctic, en la mesura del possible, es realitzaran xerrades de professionals convidats.

Actitud proactiva per la qualitat i la millora contínua.
Motivació. Els estudiants hauran de treballar en condicions de manca d'informació.
Capacitat d'adaptació als canvis organitzatius o tecnològics.
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 l'estudiant sigui capaç 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.