Lezioni del corso di Strumenti e applicazioni del Web per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca (prof.R.Polillo) - lezione del 2 aprile 1014

1. Edizione 2013-14
Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
12. Evoluzione del
Web:
il Web mobile
Roberto Polillo

2. 2
Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il
sito del corso, con il materiale completo, si trova in
www.corsow.wordpress.com . Data la rapida evoluzione della rete, il corso
viene aggiornato ogni anno.
Il presente materiale è pubblicato con licenza Creative Commons
“Attribuzione - Non commerciale - Condividi allo stesso modo – 3.0”
(http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it ):
La licenza non si estende alle immagini provenienti da altre fonti e
alle screen shots, i cui diritti restano in capo ai rispettivi proprietari,
che, ove possibile, sono stati indicati. L'autore si scusa per eventuali
omissioni, e resta a disposizione per correggerle.
R.Polillo - Marzo 2014
Queste slides

3. Temi di oggi
 Lo sviluppo della telefonia mobile e la convergenza
 Il mobile Web: un nuovo paradigma
 App stores & responsive web applications
R.Polillo - Marzo 2014
3

4. Lo sviluppo della telefonia mobile
e la convergenza
4
R.Polillo - Marzo 2014

5. Fasi della storia del Web
5
R.Polillo - Marzo 2014
Prim
o
sito
W
eb
alCERN
M
osaic
(N
CSA)
Nasce
ilW
3C;N
etscape
N
avigator
IPO
diN
etscape,M
S
Explorer,Am
azon,eBay
Boom
e
crollo
delN
ASD
AQ
IPO
diG
oogle;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.0crisipreistoria
nasce
G
oogle
11
settem
bre;W
ikipedia
Crisi
finanziaria
iPhone,Android
Tw
itter
iPad
IPO
FB
Andamento indice del
Nasdaq
YouTube
Traffico
sulla rete
video

6. R.Polillo - Marzo 20146
91 92 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 0990 10 11 12
Crisi
finanziaria
Prim
o
sito
W
eb
alCERN
M
osaic
Boom
e
crollo
delN
ASD
AQ
WEB 1.0 WEB 2.0
11
settem
bre
Napster
Prim
o
sviluppo
diTim
Berners
Lee
YouTube
iPhone
Tw
itter
iPad
IPO
FB
IPO
diG
oogle;Firefox,
Facebook
W
3C;Netscape
N
avigator
IPO
diN
etscape,M
S
Explorer,Am
azon,e
M
ozilla,nasce
G
oogle
SMS
2 G
Nokia
5110
GSM (candybar)
SMS, orologio, sveglia,
rubrica, calcolatrice,
rubrica, giochi, suonerie
MMS
WAP
2.5 G
Motorola
V3 RAZR
"Feature phone"
GPRS (candybar,
clamshell)
+ MMS,
fotocamera, email,
(Internet)
Touch phone
iPhone
+ multitouch,
sensori, GPS,
app, …
3 G
Blackberry
"Smartphone"
+ kb alfanumerica,
PDA, video, GPS,
radio, MP3, OS, …TELEFONIA
MOBILE
Skype
(telefonia
IP)
TIM,
Omnitel

7. Telefonia IP
 Skype
 Video-telefonia IP, gratuita
 Dal 2003, poi acquisita da eBay nel 2005, quindi da
Microsoft nel 2011 per 8,5 B$ (ora è una divisione di
MS)
 2012: 700 milioni di accounts; un terzo di tutte le
telefonate internazionali passano per Skype; gen 2013:
50 ml utenti concorrenti
 WhatsApp
 SMS gratuiti via IP, accesso alla rubrica del telefonino
 Fondata nel 2009, nel 2014 acquisita da FB per 19 B$
7
R.Polillo - Marzo 2014

8. Cellulari: terminologia
 Dumb phones
- prezzo basso
- essenzialmente, voce + SMS
 Feature phones
- prezzo medio
- + MMS, PDA, fotocamera, media player,
wi-fi, mobile broadband access, [GPS]
 Smartphones
- prezzo alto
- + 3d party apps, …
R.Polillo - Marzo 2014
8
La distinzione
non è netta, e i
confini sono in
continua
evoluzione

9. Internet & mobile phones penetration
R.Polillo - Marzo 20149
ITU, Measuring the Information Society
2012
Mobile cellular subscriptions
6 anni di
ritardo
ITU, Measuring the Information Society
2013
Internet users

10. R.Polillo - Marzo 201410
"Mobile
miracle":
Il 90% della popolazione del
pianeta ha accesso a un
cellulare

11. Cellulari ultra low-cost: esempi
R.Polillo - Marzo 2014
11
Nokia 1100 (2003)
GSM, SMS, sveglia, calcolatrice,
rubrica, suonerie, giochi, torcia
elettrica, antipolvere e
antiscivolo)
200 milioni venduti
Samsung Chief
Hero
(2013)
< 40 USD
Nokia 103
(2013)
circa 20 USD

12. Global bandwidth growth
12
7x in 5 anni
R.Polillo - Marzo 2014

13. Smartphone market share (2013)
R.Polillo - Marzo 2014
13
Prezzo medio:
260 USD
Fonte: FT, dic 2013

14. Mobile devices14
R.Polillo - Marzo 2014

15. Apple iPhone (2007)
R.Polillo - Marzo 2014
15

16. Apple iPhone
R.Polillo - Marzo 2014
16
2007 2012
Mobile operating system: iOS
(proprietario)
Schermo:
4", 326
ppi
Siri

17. Apple iPhone timeline
R.Polillo - Marzo 2014
17
Da Wikipedia

18. Android
 Mobile OS basato su Linux
 Inizialmente sviluppato da Android Inc., comprata da Google
nel 2005
 Open-source
 Primo cellulare Android: fine 2008
 Oggi la piattaforma più diffusa per mobile
R.Polillo - Marzo 2014
18

19. Mobile OS market share
R.Polillo - Marzo 2014
19
Fonte:
StatCounter

20. Samsung Galaxy S series (Android)
R.Polillo - Marzo 2014
20
2010 2013
Galaxy S4: http://www.youtube.com/watch?
v=9vz__sd7dCQ&feature=player_embedded
Schermo:
5", 441
ppi
Air Touch

21. Tablet
R.Polillo - Marzo 2014
21
Apple iPad, da
2010
Altre convergenze:
•I lettori di e-book
evolvono in tablet
computer
Es. Amazon Kindle
Fire
•Phablet = ibrido fra
phone e tablet

22. La crescita del mobile
Il numero dei device mobili (smartphone + tablets)
ha superato quello dei desktop/laptop/net computers
(base installata)
R.Polillo - Marzo 2014

23. Accesso a internet: desktop vs mobile
R.Polillo - Marzo 2014
23

24. A che cosa ci servono i mobile?
 Il "mobile" è un device personale multifunzionale,
sempre connesso, che (ogni tanto) serve anche a
telefonare
R.Polillo - Marzo 2014
24

25. Uso degli smartphone
R.Polillo - Marzo 2014
25
USA, età 13-54,
2012
http://bit.ly/UjQm9P

26. Utilizzo mensile del cellulare pro-capite: voce vs
SMS negli USA
26
R.Polillo - Marzo 2014

27. Utilizzo mensile del cellulare pro-capite: voce vs
SMS per classi di età negli USA
27
R.Polillo - Marzo 2014
Utilizzo mensile del
cellulare pro-capite
per classi di età
voce vs SMS
(USA, Q2 2008,
Nielsen)

28. Camera phone
 Fotocamera sui cellulari circa dal 2002, in
connessione con servizi MMS
 Ora possibilità di editing (foto e video) e
pubblicazione / sharing immediati in rete
 Molte applicazioni:
- Fotocamera Apple
- Instagram
- Pinterest
- Flickr
- Photoshop Express
R.Polillo - Marzo 2014
28

29. Esempio: QRCODE
R.Polillo - Marzo 2014
29

30. Esempio: Realtà aumentata
R.Polillo - Marzo 2014
30

31. Esempio: Realtà aumentata
R.Polillo - Marzo 2014
31

32. Esempio: Realtà aumentata
R.Polillo - Marzo 2014
32

33. http://bit.ly/VIIoX1
R.Polillo - Marzo 201433

34. Cameraphone Samsung

35. Il mobile web: un nuovo paradigma35
R.Polillo - Marzo 2014

36. L'inizio di un totale cambio di paradigma
R.Polillo - Marzo 2014
36

37. Smartphone
Tks Lara Ciccarelli per i disegni

38. Tablet)
Tks Lara Ciccarelli per i disegni

39. Desktop
Tks Lara Ciccarelli per i disegni

40. Smart Tv
Tks Lara Ciccarelli per i disegni

41. Un utente con molti device
Un
cam
biam
ento
diparadigm
a
epocale
!
CLOUD
Tks Lara Ciccarelli per i disegni
41
R.Polillo, 24.3.2014

42. E ora…?
https://www.youtube.com/watch?v=ErpNpR3XYUw apr 2012
http://www.youtube.com/watch?v=fNATuCkRWFE feb 2013

44. Apps o responsive web sites?44
R.Polillo - Marzo 2014

45. Smartphone vs Internet: 2 approcci
R.Polillo - Marzo 2014
45
Native
app
Downloa
d &
install App store
Mobile
website
HTTP

46. App store
Applicazione online per la distribuzione di applicazioni
software (apps) attraverso la rete Internet
Esempi:
Apple iOS App Store
Dal 2008, per iPhone e iPad, evoluzione di iTunes
Apple non consente altri app store per iOS
Google Play (http://play.google.com)
Dal 2008 (col nome di Android Market)
Google consente altri app store per android
Amazon Appstore (www.amazon.com)
Dal 2011, per Android e Kindle
Facebook App Center
Dal 2012, per applicazioni che si connettono a FB (Android, iPhone)
E' in realtà un'interfaccia verso altri app store
R.Polillo - Marzo 2014
46

47. iTunes Store & App Store
 iTunes Store (da apr 2003): il più grande negozio di
musica online
 App Store (da lug 2008) : estensione di iTunes, per
download applicazioni per iPhone, iPod Touch, iPad
 70% ricavi subito al produttore, 30% a Apple
 Processo di approvazione breve
 Dall’apertura a sett 2010: 250 K apps, 6,5 Mdi downloads
 http://en.wikipedia.org/wiki/App_Store
R.Polillo - Marzo 2014
47

48. Responsive web applications
R.Polillo -
Marzo 201448
Il layout della pagine si modifica in funzione delle dimensioni
del video

49. Media query (HTML5)
Da HTML si possono identificare alcune
caratteristiche del dispositivo che riceve la pagina, e
comporre layout diversi a seconda dei casi:
responsive design
una sola pagina web per tutti i device
R.Polillo - Marzo 201449

50. Esempio
R.Polillo - Marzo 2014
50

51. Esempio
R.Polillo -
Marzo 201451

52. Esempio
R.Polillo -
Marzo 201452

53. Esempio: menu
R.Polillo -
Marzo 201453

54. Esempio: form
R.Polillo -
Marzo 201454

55. Esempi
Sito responsive:
http://thenextweb.com
www.rpolillo.it
Non confondere i siti responsive con i siti
cosiddetti a layout liquido (in uso da molti anni):
http://www.governo.it
R.Polillo - Marzo 201455

56. Pro & cons per l'utilizzatore
Responsive Web Application
 Si accede con un normale browser,
su ogni device
 Aggiornamenti effettuati dal
fornitore del servizio, senza
coinvolgere l'utente
 Si adatta alla dimensione dell0
schermo, ma non è ottimizzata per il
device di accesso
 Non è "garantita" da una terza
parte
 Ecosistema aperto
Native App
 Deve essere scaricata da uno
store, per ogni device
 Aggiornamenti devono essere
effettuati dall'utente
 È ottimizzata per il device di
accesso
 È "garantita" dal gestore dello
store
 In caso di esclusiva,
l'ecosistema è controllato dal
gestore del servizio
56
R.Polillo - Marzo 2014

57. Pro & cons per lo sviluppatore
Responsive Web Application
 Una sola versione per tutti i device
 Non è ottimizzata per il device di
accesso
 Non serve un distributore
Native App
 Una versione differente per
ogni device (!)
 È ottimizzata per il device di
accesso
 Serve un distributore
(ricarico sul prezzo ed eventuale
filtro)
57
R.Polillo - Marzo 2014

58. Voi che ne pensate?
R.Polillo - Marzo 201458
(Agosto
2010)
… O NO?

59. Dove informarsi sull'evoluzione della rete
R.Polillo - Marzo 2014
59
www.mashable.com
www.techcrunch.com
www.thenextweb.com
www.theverge.com

60. Lavoro individuale
 Sperimentate, se non lo avete già fatto, le app per i
principali servizi citati in questa lezione
 Esplorate www.mashable.com, www.techcrunch.com e
www.thenextweb.com, www.theverge.com e diventate
follower dei rispettivi profili Twitter
R.Polillo - Marzo 2014
60