12. Mobile internet

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


3

Lo sviluppo della telefonia mobilee la convergenza

4


Fasi della storia del Web5


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


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


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, …


8

La distinzione non è netta, e i confini sono in continua evoluzione

Internet & mobile phones penetration


ITU, Measuring the Information Society 2012

Mobile cellular subscriptions

6 anni diritardo

ITU, Measuring the Information Society 2013

Internet users


"Mobile miracle":Il 90% della popolazione del pianeta ha accesso a un cellulare

Cellulari ultra low-cost: esempi


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


Smartphone market share (2013)


13

Prezzo medio: 260 USDFonte: FT, dic 2013

Mobile devices14


Apple iPhone (2007)


15

Apple iPhone


16

2007 2012

Mobile operating system: iOS (proprietario)

Schermo: 4", 326 ppi

Siri

Apple iPhone timeline


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


18

Mobile OS market share


19

Fonte: StatCounter

Samsung Galaxy S series (Android)


20

2010 2013

Galaxy S4: http://www.youtube.com/watch?v=9vz__sd7dCQ&feature=player_embedded

Schermo:5", 441 ppi

Air Touch

Tablet


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)


Accesso a internet: desktop vs mobile


23

A che cosa ci servono i mobile?

Il "mobile" è un device personale multifunzionale, sempre connesso, che (ogni tanto) serve anche a telefonare


24

Uso degli smartphone


25

USA, età 13-54, 2012http://bit.ly/UjQm9P

Utilizzo mensile del cellulare pro-capite: voce vs SMS negli USA

26


Utilizzo mensile del cellulare pro-capite: voce vs SMS per classi di età negli USA

27


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


28

Esempio: QRCODE


29

Esempio: Realtà aumentata


30



31



32

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

Cameraphone Samsung

Il mobile web: un nuovo paradigma35


L'inizio di un totale cambio di paradigma


36

Smartphone

Tks Lara Ciccarelli per i disegni

Tablet)


Desktop


Smart Tv


Un utente con molti device

Un

cam

biam

ento

di p

arad

igm

a ep

ocal

e !

CLOUD


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


Smartphone vs Internet: 2 approcci


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


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


47

Responsive web applications


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


Esempio


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


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


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


Voi che ne pensate?


(Agosto 2010)

… O NO?

Dove informarsi sull'evoluzione della rete


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


60

Education

12. Mobile internet