Interacció i Disseny d'Interfícies

Crèdits
6
Tipus
  • GIA: Optativa
  • GRAU: Obligatòria
  • GCED: Optativa
Requisits
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

Altres

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.3, CT5.4, CT5.5,
    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
    0h
    Problemes
    0h
    Laboratori
    0h
    Aprenentatge dirigit
    0h
    Aprenentatge autònom
    0h

    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
    0h
    Problemes
    0h
    Laboratori
    0h
    Aprenentatge dirigit
    0h
    Aprenentatge autònom
    0h

    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àsic

    Complementari

    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.