DAM2 Mòdul professional 7:

Desenvolupament d’interfícies
UF1_UD1 – Interfícies d’Usuari.
Història, elements bàsics i
confecció directa.
 Interfícies d’Usuari. Història, elements bàsics i
confecció directa.

● 1 Interfícies d’Usuari. Història, elements bàsics i confecció directa.

○ 1.1 Què són les interfícies
○ 1.2 Evolució de les interfícies d’usuari.
○ 1.3 Tipus d’interfícies d’usuari
○ 1.4 Elements de les GUI. Propietats i característiques
○ 1.5 Eines de propietat i eines lliures d’edició d’interfícies

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 2

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.1 Què són les interfícies

Windows 3.1 MAC-OS

TABLET ANDROID VENDA AUTOSERVEI ELECTRODOMESTICS

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 3

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.1 Què són les interfícies

Una aplicació informàtica tindrà diverses interfícies

d’usuari. Una interfície d’usuari és un conjunt
d’elements (que poden pertànyer al programari o al
maquinari) que ofereixen una informació a l’usuari, i
permeten, a més a més, la interacció (física o lògica)
entre l’usuari i l’ordinador, per mitjà d’un dispositiu
perifèric o un enllaç de comunicacions.

Les interfícies gràfiques d’usuari (GUI) són aquelles

ACTORS EN LA RELACIÓ
AMB EL MAQUINARI
que fan servir elements gràfics, com poden ser
menús, finestres o diàlegs, a més de l’ús d’altres
recursos del sistema informàtic (perifèrics com el
teclat, el ratolí o el so) per permetre a l’usuari
interactuar amb l’ordinador de manera molt senzilla i
intuïtiva.

@PBonilla ●
DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 4
2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1
.2 Evolució de les interfícies d’usuari
● Aparició de la informàtica - 1970
○ Interfícies d’usuari basades en la línia d’instruccions

● 1970 i posteriors
○ Naixement de les interfícies d’usuari

● 1980 - 1995
○ Evolució envers Interfícies Gràfiques

● 1996-2001
○ Interfícies gràfiques d’usuari no basades en instruccions

● 2001-Actualitat
○ Interfícies gràfiques d’usuari interactives

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 5

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.2 Evolució de les interfícies d’usuari.
Interfícies d’usuari basades en línia d’instruccions

Inicis. Primeres interfícies. A partir dels 60.

Sense interfície S’introdueixen les Terminals amb vídeo i línia
Accés directe a maquinari. instruccions pel d’instruccions.
font Exèrcit EUA maquinari directament. Primera interacció amb
Un cop processat l’ordinador on un text es tradueix
s’obté el resultat. a una ordre i l’ordinador pot
font: Teletype tornar dades a mig programa.
font: Wikipedia

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 6

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.2 Evolució de les interfícies d’usuari.
Naixement de les interfícies d’usuari (1970)
Evolució cap a ordinadors d’un
únic usuari.

Necessitat d’editar i compartir

informació amb altres.

Informació en pantalla només de

text, semblants a les BIOS
actuals.

Menús desplegables jeràrquics.

Pantalla d’un emulador de Lotus 123.

Un dels primers fulls de càlcul.
font: Tavis Ormandy

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 7

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.2 Evolució de les interfícies d’usuari.
Evolució envers Interfícies Gràfiques
Interfícies WIMP (windows, icons, menus and pointer).

Podem tenir més d’una finestra i més d’una aplicació.

(es pot considerar 3D.

La interacció amb l’usuari es basa en la manipulació

directa.

1981: Xerox Star

Xerox Star 1984: Apple Macintosh
La primera GUI 1985: Commodore Amiga, Microsoft Windows 1.0
Palo Alto Reseach Center 1990: Microsoft Windows 3.0
font: OCI 1992: IBM OS 2 2.0
1995: Microsoft Windows 95
1998: KDE/ Gnome
2001: Apple Mac OS X 10.0, Microsoft Windows XP

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 8

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.2 Evolució de les interfícies d’usuari.
Evolució envers Interfícies Gràfiques
Els inputs de l’usuari (clicks, veu, prémer botó, etc) ja
no es tradueixen a una ordre de text que s’envia a
l’intèrpret corrents en segon terme. S’interpreten
directament, al mateix nivell que l’intèrpret de text.

Les GUI continuen fent servir elements de WINP, però

van evolucionant.

Es van introduint elements visuals (amb mapes de bits)

Exemple de GUI no cada cop més complexos, fins que s’incorporen
basada en instruccions. imatges a les GUI.
(recrea el SO BeOS
mitjançant codi font C++)
font: OCI

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 9

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.2 Evolució de les interfícies d’usuari.
Interfícies gràfiques d’usuari interactives
El disseny actual va encaminat a millorar les
opcions existents i afegir noves dimensions.

Elements multimèdia interactius

● Imatges amb les que pots interactuar
● Reconeixement de veu.
● Animacions (introdueix el temps)

Realitat augmentada
Disseny de GUI per
visualització 3D Realitat virtual

font: arvrjourney.com

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 10

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.3 Tipus d’interfícies d’usuari
Segons maquinari/programari
● De maquinari: Incorporen elements físics que directament fan a la màquina
interactuar com ara:
○ Polsadors (calculadora)
○ Lectors de barres (biblioteca)
○ Reguladors. (taula de mescles analògica)

● De programari: Tota la interfície es basa en desenvolupament de

programari, que informa a l’usuari amb dispositius de sortida i interpreta els
inputs de l’usuari amb dispositius d’entrada.
○ Sistemes operatius.
○ Aplicacions de smartphones.
○ Caixer automàtic 100% digital.

● De programari-maquinari: Combinen els 2 anteriors.

○ Caixa de supermercat (lectors de codis i pantalla tàctil)

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 11

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.3 Tipus d’interfícies d’usuari
Subtipus de programari
Subtipus d’Interfícies de programari.

● CLI: interfícies de línia d’instruccions

■ Input i output exclusivament alfanumèric.

● GUI: Interfícies gràfiques d’usuari. Incorpora elements gràfics.

○ WINP: windows, icons, menus and pointer.
■ És imprescindible el ratolí.
■ Objectiu reduir el temps d’aprenentatge per usar l’App.
○ Pantàlles tàctils
■ Únic dispositiu d’entrada i sortida.
■ Cal disseny pensat per menys precissió
○ Dispositius mòbils
■ Subclasse de pantalles tàctils amb encara menys espai
disponible.

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 12

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.3 Tipus d’interfícies d’usuari
Segons arquitectura
CLASSIFICACIÓ SEGONS ARQUITECTURA

● Aplicacions locals:
○ Únic usuari simultani.
○ Instal·lades a la màquina.
○ Habitualment interfícies Winforms.

● Aplicacions client-servidor:
○ Més d’una màquina empra l’aplicació (normalment).
○ Calen instal:lacions a la màquina servidor i a les clients.
○ Es poden fer servir interfícies Winforms o tipus web.

● Aplicacions web
○ Subtipus de client-servidor on s’accedeix via telemàtica.
○ Tota la manipulació de dades es fa al servidor.

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 13

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.3 Tipus d’interfícies d’usuari
Segons independència del programari
CLASSIFICACIÓ SEGONS INDEPENDÈNCIA DEL PROGRAMARI

● Rich client:
○ El programari controla tots els elements de disseny i desenvolupament.
○ No es necessita cap altra GUI.
○ Es poden aprofitar biblioteques existents.
○ Exemples: Visual Studio, Eclipse, NetBeans.

● Thin client:
○ Necessiten altres eines de desenvolupament.
○ Exemples: Google docs, Overleaf.

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 14

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.4 Elements de les GUI. Propietats i
característiques. Entorn de treball (escriptori)
És un element més de les interfícies, com ho
són els menús, les barres d’eines o molts
altres.

És la ubicació principal de les informacions

amb les quals el S.O. interactua amb l’usuari,
Entorn de Mac on es mostrarà el text, les imatges o les
dades que l’usuari haurà demanat mitjançant
els menús.

Les aplicacions el poden fer servir de fons o

com a part de la seva interfície (arrossegar
carpetes)

Entorn GNOME
per Linux

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 15

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.4 Elements de les GUI. Propietats i
característiques. Finestres
Finestres inactives Finestres activa
Escriptori
Normalment bidimensionals i rectangulars.
● S’ubiquen a l’escriptori del S.O.
● Només 1 activa (primer pla).
● Permet diverses interfícies simultànies.
● Permet organitzar la informació de
sortida
● Les finestres contenen altres GUI i
elements.
Elements de l’estàndard actual:
● Marc: delimita i redimensiona la finestra
● Capçalera: elements de funcionalitats
principals
● Espai de contingut: on es mostra la
informació en ús actual.
● Peu de finestra: informacions sobre la
finestra.
● Barra lateral: funcionalitats secundàries

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 16

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.4 Elements de les GUI. Propietats i
característiques. Quadres de diàleg
Exemple de quadre de diàleg de
Thunderbird. És un tipus de finestra (secundària).
Apareixen en primer pla demanant una
interacció de l’usuari molt concreta.

S’empren per avisos, advertències requisits

de dades o quelcom imprescindible per
continuar l’aplicació principal.

Input requerit per l’usuari.

Es poden fer servir diversos
elements com botons, exploradors,
quadres d’entrada de text, etc. però
sempre és un input concret.

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 17

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.4 Elements de les GUI. Propietats i
característiques. Assistents
Exemple de assistent (wizard) de
Thinderbird.
És una seqüència de finestres per requerir
diferents inputs necessaris per arribar a un
objectiu. (Normalment la instal·lació d’algun
component o aplicació, i en l’ajuda sobre l’
ús o configuració d’una funcionalitat
complexe).

Serveix perquè l’usuari no oblidi validar cap

dels passos necessaris.

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 18

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.4 Elements de les GUI. Propietats i
característiques. Menus
Exemple de menu Thunderbird.
Input requerit per l’usuari.
Es poden fer servir diversos
elements com botons, exploradors,
quadres d’entrada de text, etc. però
sempre és un input concret.
@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES
2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
El menu es situa o a la Capçalera o just a
sota de la mateixa.
Despleguen totes les funcionalitats que
l’usuari té a l’abast amb jerarquia.
Tot i que es van pensar per ús amb ratolí,
cal que siguin accessibles d’altres maneres.
Elements principals: textos i icones.
Jeràrquics: Forma d’arbre desplegable. Un
mateix nivell vertical té ordres amb
correspondència.
Contextuals: No són visibles fins que
l’usuari ho ordrena. S’obren en finestra
flotant en funció d’on es clica.
De navegació (scrolls): Evolució dels
jeràrquics. Mostra les opcions més
utilitzades. La resta és accessible
mitjançant un click addicional.
19
 1.4 Elements de les GUI. Propietats i
característiques. Pestanyes i Barres d’eines
Pestanya activa
Serveixen per organitzar la
informació a l’espai de contingut de
la finestra per grups.

Barra d’eines
Subtipus de menu de tipus icones.
Permet seleccionar les
funcionalitats del menu que es fan
servir més habitualment

Tipografies Icones
El tipus de text també és un element de Imatges amb o sense text que
disseny de les GUI. representen funcionalitats
Hi ha tipografies digitals, dissenyades Es fan servir a menus i barres d’eines.
específicament per GUIs. Cal que la imatge sigui descriptiva.

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 20

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.4 Elements de les GUI. Propietats i
característiques. Controls
Hi ha molts tipus de controls i els desenvolupadors poden crear-ne de nous.
Son elements que s’afegeixen als elements de les GUI que hem vist, per tal de
facilitar la interacció amb l’usuari.
Exemples més comuns:
● Marcs: Divisió de l’espai de treball per incloure més controls.
● Etiquetes: Divisió de l’espai de treball per afegir informació.
● Botons de relleu: Imita un botó físic com si tingués volum.
● Botos de confirmació (checkbox): normalment quadrats
accepten la opció seleccionada.
● Botons botons d’opció (radio buttons): normalment rodons
només es pot acceptar 1 de les opcions disponibles per seleccionar.
● Botons Lliscans (sliders): Botó selecció proporcional entre 2 valors
● Barra desplaçament (scrollbars): per navegar per GUI > espai pantalla.
● Knobs/dial: Botó de selecció proporcional amb rotació
● Finestres de diferents tipus…

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 21

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.
 1.5 Eines de propietat i eines lliures d’edició
d’interfícies
Les eines de creació i edició d’interfícies són un tipus de programari que ajudarà al
programador a desenvolupar interfícies que segueixin les indicacions establertes en la
fase de disseny a partir de l’anàlisi de les necessitats. Hauran de tenir en compte
totes les fases de desenvolupament d’un projecte informàtic.

● Incorporen diversos elements preprogramats que faciliten molt la creació de GUIs

● Es poden gestionar els possibles errors per part de l’usuari en fer servir la
interfície, processar excepcions, gestionar i controlar els seus accessos i estionar
els dispositius d’entrada
● Són tipus d’eines del tipus WYSIWYG, és a dir, el que fan és el que veurà l’usuari
final de les aplicacions, i es poden veure els resultats de manera immediata.

@PBonilla DAM7 UF1 DISSENY I IMPLEMENTACIÓ D’INTERFÍCIES 22

2022-2023 UD1 – Interfícies d’Usuari. Història, elements bàsics i confecció directa.