![Page 1: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/1.jpg)
Corso di Interazione Uomo MacchinaAA 2014-2015
Roberto Polillo
Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
Evoluzione dei paradigmi di interazione (II)
Edizione 2014-15
![Page 2: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/2.jpg)
Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano tutte le necessarie spiegazioni. Vedi www.rpolillo.it
Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, senza necessità di preventiva autorizzazione:
http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it
La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile, nelle didascalie del libro. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.
R.Polillo - Marzo 2015
2
![Page 3: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/3.jpg)
Il personal computer: tappe
IBM PC
1981
XEROX STAR
1982APPLE
MACINTOSH
1984+
MICROSOFTWINDOWS
1990+
R.Polillo - Aprile 2015
3
![Page 4: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/4.jpg)
IBM PC, 1981
• Assemblato da componenti standard
• Basso costo
• Sistema operativo MS-DOS (Microsoft, non IBM), con interfaccia a comandi
• Enorme successo commerciale
R.Polillo - Aprile 2015
4
![Page 5: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/5.jpg)
MS-Dos
R.Polillo - Marzo 2015
5
![Page 6: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/6.jpg)
Software Arts, 1979 (Apple II), 1981 (IBM PC)R.Polillo - Aprile 20156
![Page 7: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/7.jpg)
Xerox Star, 1982
Schermo grafico a doppia pagina
mouse
R.Polillo - Aprile 2015
7
![Page 8: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/8.jpg)
R.Polillo - Marzo 20158
![Page 9: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/9.jpg)
Mouse e legge di Fitts
I movimenti del mouse seguono la legge di Fitts:
T = 1.03 + 0.96 log2 (D/S + 0.5)
T = tempo per posizionare il mouse (in secondi)
D = distanza dall’oggetto (in pixels)
S = larghezza dell’oggetto
Le costanti (1.03 e 0.96) sono circa le stesse dei movimenti manuali. Pertanto il mouse è quasi ottimale come pointing device
R.Polillo - Aprile 2015
9
![Page 10: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/10.jpg)
WIMP
Con questa sigla si indica spesso la classe di interfacce che seguono la filosofia impostata da Star (Mac, Windows, …):
Windows Icons Menus Pointing
R.Polillo - Marzo 2015
10
![Page 11: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/11.jpg)
Apple Macintosh, 1984
“The computer for the rest of us”
Ispirato allo Star della Xerox:https://www.youtube.com/watch?v=vpMeFh37mCE
https://www.youtube.com/watch?v=y58u79RrK60 R.Polillo - Aprile 2015
11
![Page 12: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/12.jpg)
Desktop ispirato da Xerox Star, ma semplificato
R.Polillo - Aprile 201512
![Page 13: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/13.jpg)
R.Polillo - Marzo 201513
![Page 14: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/14.jpg)
(Un gioco di scacchi per il Macintosh, circa 1987)R.Polillo - Aprile 201514
![Page 15: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/15.jpg)
Microsoft Windows
Windows 1 (1985) Windows 2 (1987) Windows 3 (1990) Windows 95 (1995) Windows 98 (1998) Windows 2000 (2000) Windows XP (2001) Windows VISTA (2007) Windows 7 (2009) Windows 8 (2012) Windows 10 (2014)
R.Polillo - Aprile 2015
15
![Page 16: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/16.jpg)
WINDOWS 95
R.Polillo - Marzo 2015
16
![Page 17: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/17.jpg)
Il desktop 30 anni dopo
La metafora della scrivania ha avuto un eccezionale successo e diffusione
E’ infatti un ottimo ambiente per gestire documenti archiviati localmente da parte di utenti che utilizzano una stazione di lavoro “da seduti”
- desktop = spazio per documenti attivi- file system gerarchico per ordinare documenti e applicazioni
… ma oggi il contesto d’uso è completamente cambiato rispetto a 30 anni fa: la mail, il web, i mobile, il cloud…
R.Polillo - Marzo 2015
17
![Page 18: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/18.jpg)
Alcuni problemi apparsi presto (pre-Web)
Supporto a user multitasking confuso (troppe finestre aperte)
Integrazione fra le applicazioni carente
Alcune linee di ricerca: desktop multipli e 3D, integrando l’interfaccia web
(es.prototipi Xerox Parc)
zoomable user interface” (ZUI) + command language
R.Polillo - Marzo 2015
18
![Page 19: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/19.jpg)
Esempio 1: Information Visualizer
XEROX PARC (S.Card et al.), 1987 Desktop multiplo 3D + aimazione (prototipo) Information visualizations: cone trees, cam trees,
perspective wall, …
R.Polillo - Marzo 2015
19
![Page 20: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/20.jpg)
R.Polillo - Marzo 201520
![Page 21: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/21.jpg)
cone tree
R.Polillo - Marzo 201521
![Page 22: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/22.jpg)
perspective wall
R.Polillo - Marzo 201522
![Page 23: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/23.jpg)
Esempio 3: ZUI +command language
R.Polillo - Marzo 2015
23
![Page 24: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/24.jpg)
ZUI (Zoomable User Interfaces): esempi
https://www.youtube.com/watch?v=4EhWbqZVtGE
Prezi:https://www.youtube.com/watch?v=7bHyW6un-Kc&list=PL92546C8F504816AF
R.Polillo - Marzo 2015
24
![Page 25: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/25.jpg)
Le macro-fasi
1960 1970 1980 1990 2000
Teletype
Personal computer
Web
Terminali video
Mobiles
R.Polillo - Marzo 2015
25
![Page 26: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/26.jpg)
"Point & clic"26
R.Polillo - Marzo 2015
![Page 27: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/27.jpg)
Tecnologia dominante: il Web
R.Polillo - Marzo 2015
27
![Page 28: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/28.jpg)
LINK
NODO
Ipertesto
R.Polillo - Marzo 201528
![Page 29: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/29.jpg)
Visualizzazione dei nodi
Un nodo per ogni schermata Più nodi per ogni schermata(overlapped / tiled)
R.Polillo - Marzo 2015
29
![Page 30: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/30.jpg)
Ipertesti (fase 1: offline)
1945 Vannevar Bush, propone il Memex (“Memory extender”, basato su microfilm e mai implementato)
1965 Ted Nelson (“Xanadu”) conia il termine “ipertesto”1986 Guide (OWL)1987 Hypercard (Apple)1987 Hypertext ‘87 (primo convegno su ipertesti)1990+ Ampia diffusione di ipertesti su CD rom
R.Polillo - Marzo 2015
30
![Page 31: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/31.jpg)
stack
card
area sensibile(bottone invisibile)
script
clic
Ipertesti off-line: Hypercard (1987)
R.Polillo - Marzo 201531Realizzato da Bill Atkinson perApple Macintosh
Apple Macintosh, 1984+
![Page 32: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/32.jpg)
Una delle prime applicazioni di Hypercard, 1987R.Polillo - Marzo 201532
![Page 33: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/33.jpg)
R.Polillo - Marzo 201533
![Page 34: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/34.jpg)
R.Polillo - Marzo 201534
![Page 35: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/35.jpg)
Hypercard: esempi (video)
Computer chronicles: Hypercard Mania!https://www.youtube.com/watch?v=BeMRoYDc2z8 Intervista a Bill Atkinson, con esempi importanti (22', da vedere)
The Manhole (1988, 8') di Rand e Robin Millerhttps://www.youtube.com/watch?v=YyOTq1EpV5o
A children hypercard adventure (3'): http://bit.ly/XFN1hT
R.Polillo - Marzo 201535
![Page 36: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/36.jpg)
Inigo Gets Out, di Amanda Goodenough (Hypercard, 1987)R.Polillo - Marzo 201536
![Page 37: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/37.jpg)
R.Polillo - Marzo 201537
![Page 38: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/38.jpg)
R.Polillo - Marzo 201538
![Page 39: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/39.jpg)
R.Polillo - Marzo 201539
![Page 40: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/40.jpg)
R.Polillo - Marzo 201540
![Page 41: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/41.jpg)
R.Polillo - Marzo 201541
![Page 42: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/42.jpg)
The Manholeby Robin e Rand Miller (Hypercard)
R.Polillo - Marzo 2015
42
![Page 43: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/43.jpg)
The Manholeby Robin e Rand Miller (Hypercard)
R.Polillo - Marzo 2015
43
![Page 44: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/44.jpg)
The Manholeby Robin e Rand Miller (Hypercard)
R.Polillo - Marzo 2015
44
![Page 45: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/45.jpg)
The Manholeby Robin e Rand Miller (Hypercard)
R.Polillo - Marzo 2015
45
![Page 46: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/46.jpg)
Myst, 1993 (di Rand e Robin Miller)
R.Polillo - Marzo 201546
![Page 47: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/47.jpg)
(Le immagini che seguono sono contigue)
R.Polillo - Marzo 201547
https://www.youtube.com/watch?v=yEDokgNoziM&index=2&list=PLahKLy8pQdCOJCIdtF_OYUQAceilcbbFo
![Page 48: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/48.jpg)
R.Polillo - Marzo 201548
![Page 49: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/49.jpg)
R.Polillo - Marzo 201549
![Page 50: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/50.jpg)
R.Polillo - Marzo 201550
![Page 51: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/51.jpg)
R.Polillo - Marzo 201551
![Page 52: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/52.jpg)
R.Polillo - Marzo 201552
![Page 53: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/53.jpg)
R.Polillo - Marzo 201553
![Page 54: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/54.jpg)
R.Polillo - Marzo 201554
![Page 55: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/55.jpg)
R.Polillo - Marzo 201555
![Page 56: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/56.jpg)
Un CD della Microsoft, 1994 R.Polillo - Marzo 201556
![Page 57: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/57.jpg)
R.Polillo - Marzo 201557
![Page 58: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/58.jpg)
R.Polillo - Marzo 201558
![Page 59: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/59.jpg)
R.Polillo - Marzo 201559
![Page 60: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/60.jpg)
R.Polillo - Marzo 201560
![Page 61: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/61.jpg)
R.Polillo - Marzo 201561
![Page 62: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/62.jpg)
Nascita della iperfiction: Afternoon, a story (Michel Joyce, 1987)
R.Polillo - Marzo 2015
62
![Page 63: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/63.jpg)
Nascita della iperfiction: Afternoon, a story (Michel Joyce, 1987)
R.Polillo - Marzo 2015
63
![Page 64: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/64.jpg)
Nascita della iperfiction: Afternoon, a story (Michel Joyce, 1987)
R.Polillo - Marzo 2015
64
![Page 65: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/65.jpg)
Ipertesti (fase 2: il Web)
INTERNET
Pagina (file) Link
R.Polillo - Marzo 201565
![Page 66: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/66.jpg)
Il Web
Un sistema di tecnologie correlate, evolutesi con continuità a partire dai primi anni ’90:
R.Polillo - Marzo 201566
Concetto di ipertesto (es.Hypercard, 1987)
Protocolli internet:-TCP/IP (primi ‘70)-DNS (primi ‘80)
• HTTP• HTML• URI• BROWSE
R(da1990-
91)
+ WWW
=
![Page 67: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/67.jpg)
Il World Wide Web
67
Tim Berners-Lee (1995)
"I just had to take the hypertext idea and connect it to the TCP Protocol and Domain Name System ideas and – Ta-da! – the World Wide Web!”
R.Polillo - Marzo 2015
![Page 68: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/68.jpg)
Interfaccia nel Web׃ non solo Point & click
testo attivo immagini attive bottoni Tabs forms esecuzione di programmi client side
R.Polillo - Marzo 2015
68
![Page 69: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/69.jpg)
Sito
YouTube
Flickr
Incorporazione ("embedding")
iFrame
R.Polillo - Marzo 2015
69
![Page 70: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/70.jpg)
HTML: iframe
R.Polillo - Marzo 201570
<iframe width="560" height="315" src="http://www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen></iframe>
![Page 71: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/71.jpg)
Embedding
R.Polillo - Marzo 201571
<html><body>
embed code
</body></html>
oggetto attivo
disponibile sulla rete
![Page 72: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/72.jpg)
"Widgets": esempi
R.Polillo - Marzo 201572
![Page 73: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/73.jpg)
Creazione di un widget: esempio
R.Polillo - Marzo 201573
Twitter:
![Page 74: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/74.jpg)
R.Polillo - Marzo 2015
74
![Page 75: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/75.jpg)
In sintesi…
R.Polillo - Marzo 201575
link
BROWSER
File HTML
![Page 76: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/76.jpg)
Virtualizzazone / globalizzazione della rete76
Da dove provengono i servizi?
R.Polillo - Marzo 2015
![Page 77: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/77.jpg)
Desktop vs Web
E’ dubbio che il modello desktop sia il più adatto al nuovo contesto (documenti locali vs pagine Web)
Varie proposte per risolvere il problema dell’affollamento dello schermo, es.: - immergere le pagine in uno spazio 3D, in cui vedo in lontananza le
pagine precedentemente aperte - usare per i siti web la metafora del libro (vedi WebBook e
WebForager) …
R.Polillo - Marzo 2015
77
![Page 78: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/78.jpg)
Esempio: WebBook & Web Forager
XEROX PARC, 1996 Interfaccia (prototipo) per web Obiettivo: ridurre i costi di accesso
all’informazione utilizzata più di frequente Metafora del libro
S.K.Card, G.G.Robertson, W.York, The WebBook and the Web Forager: An Information Workspace for the World Wide Web, 1996
R.Polillo - Marzo 2015
78
![Page 79: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/79.jpg)
Come cambia l’interfaccia con il web
1. dalla singola pagina web come unità di interazione, a un aggregato più ampio (metafora del libro: “WebBook”):- tutte le pagine del sito (raggiungibili dalla home page con URL relativi), pre-loaded per velocità di accesso
2. da un ambiente di lavoro contenente un singolo elemento a un ambiente contenente una pluralità di elementi (WebForager)
R.Polillo - Marzo 2015
79
![Page 80: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/80.jpg)
WebBook
link esterni al WebBook(chiude il libro e ne apre un altro)
link interni al WebBook(sfoglia il libro)
R.Polillo - Marzo 201580
![Page 81: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/81.jpg)
WebBook: controlli
cliccando sulla pagina dx [sx] si va alla pagina seguente / precedente cliccando sullo “spessore del libro” si va “più avanti” con i bottoni “scan” (sotto il WebBook) si scorre il libro avanti /
indietro. Si può fermare lo scan cliccando su una pagina si può lasciare un bookmark su una pagina (quando il libro viene
chiuso, un bookmark resta automaticamente sull’ultima pagina letta) ci sono bottoni di Back e History come in un normale browser su ogni pagina ci sono tre scrollbars. La terza permette di modificare
la dimensione delle fonti la dimensione del libro può essere modificata
R.Polillo - Marzo 2015
81
![Page 82: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/82.jpg)
Sfogliare le pagine di un WebBook
R.Polillo - Marzo 201582
![Page 83: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/83.jpg)
Vedere un WebBook attraverso la “Document Lens”
R.Polillo - Marzo 201583
![Page 84: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/84.jpg)
Struttura dello spazio informativo
Piccola quantità di informazione accessibile a basso costo
Media quantità di informazione accessibile a medio costo
Grande quantità di informazione accessibile ad alto costo
massima interazione
R.Polillo - Marzo 2015
84
![Page 85: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/85.jpg)
Web Forager
Livello 1: Focus Place
per interazione direttacon il contenuto
Livello 2: Immediate Memory Place
per il materiale in uso(spostamento in 3D)Livello 3:
Tertiary Storage per WebBooks usati
di recenteR.Polillo - Marzo 201585
![Page 86: 17. Evoluzione dei paradigmi di interazione uomo macchina (I)](https://reader033.vdocuments.pub/reader033/viewer/2022052509/55a70dee1a28ab10628b45c4/html5/thumbnails/86.jpg)
Il bookcase per i WebBook
R.Polillo - Marzo 201586