Edizione 2013-14
Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
12. Evoluzione del Web: il Web mobile
Roberto Polillo
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
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
Lo sviluppo della telefonia mobilee la convergenza
4
R.Polillo - Marzo 2014
Fasi della storia del Web5
R.Polillo - Marzo 2014
Prim
o sito
Web
al C
ERN
Mos
aic
(NCS
A)
Nasce
il W
3C; N
etsc
ape
Navig
ator
IPO d
i Net
scap
e, M
S Ex
plor
er, A
maz
on, e
Bay
Boom
e c
rollo
del
NAS
DAQIP
O d
i Goo
gle;
Fac
eboo
k
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
nasc
e Goo
gle
11 set
tem
bre;
Wik
iped
ia
Crisi
finan
ziar
ia
iPho
ne, A
ndro
id
Twitt
er
iPad
IPO
FB
Andamento indice del Nasdaq
YouT
ube
Traffico sulla rete
vid
eo
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
finan
ziar
ia
Prim
o sito
Web
al C
ERN
Mos
aic
Boom
e c
rollo
del
NAS
DAQ
WEB 1.0 WEB 2.0
11 set
tem
bre
Napst
er
Prim
o sv
ilupp
o di
Tim
Ber
ners
Lee Yo
uTub
eiP
hone
Twitt
er
iPad
IPO
FB
IPO d
i Goo
gle;
Fire
fox,
Face
book
W3C
; Net
scap
e Nav
igat
or
IPO d
i Net
scap
e, M
S Ex
plor
er, A
maz
on, e
Bay
Moz
illa,
nas
ce G
oogl
e
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
Skyp
e (t
elef
onia
IP)
TIM, Omnitel
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
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
Internet & mobile phones penetration
R.Polillo - Marzo 20149
ITU, Measuring the Information Society 2012
Mobile cellular subscriptions
6 anni diritardo
ITU, Measuring the Information Society 2013
Internet users
R.Polillo - Marzo 201410
"Mobile miracle":Il 90% della popolazione del pianeta ha accesso a un cellulare
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
Global bandwidth growth12
7x in 5 anni
R.Polillo - Marzo 2014
Smartphone market share (2013)
R.Polillo - Marzo 2014
13
Prezzo medio: 260 USDFonte: FT, dic 2013
Mobile devices14
R.Polillo - Marzo 2014
Apple iPhone (2007)
R.Polillo - Marzo 2014
15
Apple iPhone
R.Polillo - Marzo 2014
16
2007 2012
Mobile operating system: iOS (proprietario)
Schermo: 4", 326 ppi
Siri
Apple iPhone timeline
R.Polillo - Marzo 2014
17
Da Wikipedia
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
Mobile OS market share
R.Polillo - Marzo 2014
19
Fonte: StatCounter
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
Tablet
R.Polillo - Marzo 2014
21
Apple iPad, da 2010
Altre convergenze:•I lettori di e-book evolvono in tablet computerEs. Amazon Kindle Fire
•Phablet = ibrido fra phone e tablet
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
Accesso a internet: desktop vs mobile
R.Polillo - Marzo 2014
23
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
Uso degli smartphone
R.Polillo - Marzo 2014
25
USA, età 13-54, 2012http://bit.ly/UjQm9P
Utilizzo mensile del cellulare pro-capite: voce vs SMS negli USA
26
R.Polillo - Marzo 2014
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-capiteper classi di etàvoce vs SMS (USA, Q2 2008, Nielsen)
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
Esempio: QRCODE
R.Polillo - Marzo 2014
29
Esempio: Realtà aumentata
R.Polillo - Marzo 2014
30
Esempio: Realtà aumentata
R.Polillo - Marzo 2014
31
Esempio: Realtà aumentata
R.Polillo - Marzo 2014
32
http://bit.ly/VIIoX1 R.Polillo - Marzo 201433
Cameraphone Samsung
Il mobile web: un nuovo paradigma35
R.Polillo - Marzo 2014
L'inizio di un totale cambio di paradigma
R.Polillo - Marzo 2014
36
Smartphone
Tks Lara Ciccarelli per i disegni
Tablet)
Tks Lara Ciccarelli per i disegni
Desktop
Tks Lara Ciccarelli per i disegni
Smart Tv
Tks Lara Ciccarelli per i disegni
Un utente con molti device
Un
cam
biam
ento
di p
arad
igm
a ep
ocal
e !
CLOUD
Tks Lara Ciccarelli per i disegni
41
R.Polillo, 24.3.2014
E ora…?
https://www.youtube.com/watch?v=ErpNpR3XYUw apr 2012
http://www.youtube.com/watch?v=fNATuCkRWFE feb 2013
Apps o responsive web sites?44
R.Polillo - Marzo 2014
Smartphone vs Internet: 2 approcci
R.Polillo - Marzo 2014
45
Nativeapp
Download & install App store
Mobile website
HTTP
App store
Applicazione online per la distribuzione di applicazioni software (apps) attraverso la rete InternetEsempi:Apple iOS App StoreDal 2008, per iPhone e iPad, evoluzione di iTunesApple non consente altri app store per iOSGoogle Play (http://play.google.com)Dal 2008 (col nome di Android Market)Google consente altri app store per androidAmazon Appstore (www.amazon.com)Dal 2011, per Android e Kindle Facebook App CenterDal 2012, per applicazioni che si connettono a FB (Android, iPhone)E' in realtà un'interfaccia verso altri app store
R.Polillo - Marzo 2014
46
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
Responsive web applications
R.Polillo - Marzo 201448
Il layout della pagine si modifica in funzione delle dimensioni del video
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
Esempio
R.Polillo - Marzo 2014
50
EsempioR.Polillo -
Marzo 201451
EsempioR.Polillo -
Marzo 201452
Esempio: menuR.Polillo -
Marzo 201453
Esempio: formR.Polillo -
Marzo 201454
Esempi
Sito responsive:http://thenextweb.comwww.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
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
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
Voi che ne pensate?
R.Polillo - Marzo 201458
(Agosto 2010)
… O NO?
Dove informarsi sull'evoluzione della rete
R.Polillo - Marzo 2014
59
www.mashable.com
www.techcrunch.com
www.thenextweb.com
www.theverge.com
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