Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Univesrità di Milano Bicocca - Prof.R.Polillo (a.a.2014-15) - Lezione del 5 maggio 2015

1. Corso di Interazione Uomo Macchina
AA 2014-2015
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Evoluzione dei paradigmi di interazione (III)
Edizione 2014-15

2. Le macro-fasi
1960 1970 1980 1990 2000
Teletype
Personal computer
Web
Terminali video
Mobiles
R.Polillo - Aprile 2015
3

3. Il World Wide Web
4
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

4. Web 1.0
MS Explorer
Amazon
eBay
IPO Netscape
1990 1 2 3 4 5 6 7 8 9 2000 2001
2002
First web site
at
CERN
W3C
Netscape Navigator
Yahoo
Mosaic
Google
Mozilla
Napster
Paypal
R.Polillo - March 2015

5. Narrowband connection
R.Polillo - March 2015

6. Web 1.0 Typical applications
 Corporate Web sites
 Portals and search engines
 eCommerce
 [Corporate portals]
R.Polillo - March 2015

7. Web 1.0 main success stories
 http://www.amazon.com from 1995
Current size:
http://www.wolframalpha.com/input/?i=amazon.com
 http://www.ebay.com from 1995
Current size:
http://www.wolframalpha.com/input/?i=ebay.com
 http://www.yahoo.com
from 1994, always among the first 5 more visited sites
R.Polillo - March 2015

8. Interfaccia nel Web‫׃‬ non solo Point & click
 testo attivo
 immagini attive
 bottoni
 Tabs
 forms
 esecuzione di programmi client side
R.Polillo - Marzo 2015
9

9. Italy: the beginning
R.Polillo - Aprile 2015
10
VideoOnLine (Grauso, 1994 → Tin.it, 1996)
(1996)

10. In sintesi…
R.Polillo - Marzo 201511
link
BROWSER
File HTML

11. Virtualizzazone / globalizzazione della rete
12
Da dove provengono i servizi?
R.Polillo - Marzo 2015

12. 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
13

13. 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
14

14. 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
15

15. WebBook
link esterni al WebBook
(chiude il libro e
ne apre un altro)
link interni al WebBook
(sfoglia il libro)
R.Polillo - Marzo 201516

16. Sfogliare le pagine di un WebBook
R.Polillo - Marzo 201517

17. Vedere un WebBook attraverso la “Document Lens”
R.Polillo - Marzo 201518

18. Web Forager
Livello 1:
Focus Place
per interazione diretta
con il contenuto
Livello 2:
Immediate Memory Place
per il materiale in uso
(spostamento in 3D)Livello 3:
Tertiary Storage
per WebBooks usati
di recente
R.Polillo - Marzo 201519

19. Il bookcase per i WebBook
R.Polillo - Marzo 201520

20. IPO (Initial Public Offering) frenzy
R.Polillo - Aprile 2015
21
 dot.com frenzy started by Netscape IPO (Aug 9, 1995)
 Founded 18 months earlier
 16 M$ revenues, no profit
 Market cap at IPO: 1 B$ (!)
 Large venture capital, to bring startups to IPO
 Many irrealistic business models
 NASDAQ bubble, then fall (2000-2001)
 Silicon Valley stops completely

21. The "dot.com bubble”
MS Explorer
Amazon
eBay
IPO Netscape
1990 1 2 3 4 5 6 7 8 9 2000 2001
2002
First web
site at
CERN
W3C
Netscape Navigator
Yahoo
Mosaic
Google
Mozilla
Napster
Paypal
Max
NASDAQ
9/11
Min
NASDAQ
Nasdaq Composite
Index
March 10 2000:
index at 5132
March 10 2000:
index at 5132
Oct 9 2002:
index at 1114
Oct 9 2002:
index at 1114
R.Polillo - Aprile 2015
22

22. Web 2.0 key aspects
Social media:
Not the hypertext pages, but the user is the leading actor
 User interaction throu the Web: one-to-many (blog), many-to-many
(social media)
 Services to host User Generated Content (UGC), to be shared with other
users
 Collective creation
 User rating in e-commerce
 "Market are conversations" (Cluetrain manifesto, 1999-2000)
The Web as a computing platform:
 Online services, virtualization
 Perpetuale beta
 Component and service mashups
 Rich Internet Applications (RIA) technologies
R.Polillo - March 2015

23. Web 2.0
2000 1 2 3 4 5 6 7 8 9 10 11 12
Twitter,
Slideshare,
Scribd
Google
DocsYouTube
,
Joomla,
NingFlickr,
Facebook
Skype
WordPress
Blogger
LinkedIn iPhone
Groupon
Android,
Dropbox
Foursquar
e
WhatsApp
iPad,
Pinterest
Instagram
Google+
Wikipedi
a
(In red start of mobile
Web)
Inter
net
traffi
c
vid
eo
R.Polillo - March 2015

24. Xmas 2006
Media acknowledge the paradigm change
R.Polillo - March 2015

25. Another bubble?
Netscape IPO
Google IPO
Aug 19 2004
LinkedIn IPO
(NYSE)
Facebook IPO
Twitter IPO
(NYSE)
199
4
199
5
199
7
199
6
March 10 2000:
5049
(Indice Nasdaq 1994-2013) R.Polillo - March 2015

26. In the meanwhile, telephony changes…
R.Polillo - March 2015

27. FirstW
eb
site
atCERN
M
osaic
(NCSA)
W
3C;Netscape
Navigator
Netscape
IPO
,,M
S
Explorer,Am
azon,eBay
Boom
and
fallofNASD
AQ
G
oogle
IPO
;Facebook
91 92 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 0990 10 11 12
WEB 1.0 WEB 2.0crisisPre-history
G
oogle
founded
9/11;W
ikipedia
Financialcrisi
iPhone,Android
Tw
itter
iPad
FB
IPO
Nasdaq
Composite
Index
YouTube
Inter
net
traffi
c
vid
eo
R.Polillo - March 2015

28. SMS
2 G
Nokia
5110
GSM (candybar)
SMS, watch, sveglia,
rubrica, calcolatrice,
rubrica, giochi,
suonerie
MMS
WAP
2.5 G
Motorola
V3 RAZR
"Feature phone"
GPRS (candybar,
clamshell) +
MMS,,photocamera,
email, (Internet)
Touch
phone
iPhone
+ multitouch,
sensors,
GPS, app, …
3 G
Blackberr
y
"Smartphone"
+ alphanumeric
kb, PDA, video,
GPS, radio, MP3,
OS, …Mobile telephony
TIM,
Omn
itel
FirstW
eb
site
atCERN
M
osaic
(NCSA)
W
3C;Netscape
Navigator
Netscape
IPO
,,M
S
Explorer,Am
azon,
Boom
and
fallofNASD
AQ
G
oogle
IPO
;Facebook
91 92 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 0990 10 11 12G
oogle
founded
9/11;W
ikipedia
Financialcrisi
iPhone,Android
Tw
itter
iPad
FB
IPO
YouTube
c
R.Polillo - March 2015

29. IP telephony
 Skype
 Internet based video-telephony, free
 Starting 2003, acquired by eBay in 2005, then by
Microsoft in 2011 (8,5 B$)
 2012: 700 ml accounts; one third of all international calls
pass through Skype
 Jan 2013: 50 ml concurrent users
 WhatsApp
 Free SMS via IP
 Started in 2009, acquired by Facebook in 2014 (19 B$)
R.Polillo - March 2015

30. Mobile cellular subscriptions
(total and per 100 inhabitants)
R.Polillo - March 2015

31. R.Polillo - March 2015

32. Le macro-fasi
1960 1970 1980 1990 2000
Teletype
Personal computer
Web
Terminali video
Mobiles
R.Polillo - Aprile 2015
33

33. "Guarda, parla, cammina"34
R.Polillo - Aprile 2015

34. Video
Guardate come Nokia ipotizzava il cellulare del futuro
nel 2006, e confrontatelo con ciò che esiste ora
http://it.youtube.com/watch?v=92uaW9K6QEk
http://it.youtube.com/watch?v=LN0vVf-a9V0
R.Polillo - Aprile 2015
35

35. Apple iPhone and iPad
2007 2010
R.Polillo - March 2015

36. Multi-touch
https://developer.apple.com/library/ios/documentation/user
experience/conceptual/mobilehig/InteractivityInput.html
R.Polillo - Aprile 2015
37

37. Android
 Linux based mobile OS
 Initially developed by Android Inc., acquired by Google in
2005
 Open-source
 First android phone: end 2008
 Today the largest market share for mobile OS
R.Polillo - March 2015

38. Guarda, parla, cammina
 Portabilità, piccole dimensioni
 Utilizzabile in movimento
 Context-aware
 Occhio sul mondo
 Sensori sul mondo
 Comunicazione vocale
R.Polillo - Aprile 2015
39

39. Mobile installed base (World)
R.Polillo - Aprile 2015
40

40. Camera eyes: QRCODE
R.Polillo - March 2015

41. Augmented reality
R.Polillo - March 2015

42. Augmented reality
R.Polillo - March 2015

43. Augmented reality
 https://www.youtube.com/watch?
v=L9UPWPgVlDo
Non solo turismo e manutenzione:
https://www.youtube.com/watch?v=NqUSfjTSLyo
R.Polillo - Aprile 2015
44

44. But we cannot do everything with a
small, portable device…
Mobile
and
cloud
com
puting
are
strongly
related
CLOUD
Tks Lara Ciccarelli per i disegni R.Polillo - March 2015

45. And now…
https://www.youtube.com/watch?v=ErpNpR3XYUw apr 2012
http://www.youtube.com/watch?v=fNATuCkRWFE feb 2013
R.Polillo - March 2015

46. Apple watch (2015)
R.Polillo - March 2015
https://www.apple.com/watch/guided-tours/

47. Smartphone voice assistant
 Apple Siri: in iPhone 4S ott 2011, in iPad in set 2012
Demo: https://www.youtube.com/watch?v=MtwVQhEXCcc
 Google Voice Search/Google now: ottobre 2012,
orientato al search
 Microsoft Cortana: 2014
 http://bgr.com/2014/04/14/cortana-vs-siri-vs-google-now
 Il futuro anche nei sistemi di guida di autoveicoli
R.Polillo - Aprile 2015
48