Il Web per il mobile - soluzioni

Preview:

Citation preview

Mobile Web

Pubblicare siti per mobile

V.De Luca, F. Brunetta (c) 2103 1

C’era una volta il “PC”

• “Pesante”

• Fisso (anche il notebook ha mobilità limitata!)

• Monitor limitati: 4:3, 16:9; 1024x768, ecc.

• Hardware “tradizionali”: mouse, tastiera

• Il “mobile” ha cambiato tutto– La tecnologia cambia tutto ogni giorno!

V.De Luca, F. Brunetta (c) 2103 2

Cosa è “mobile”?

• Quali sono le “categorie” di dispositivi “mobile”?

• E’ facile distinguere o no?

V.De Luca, F. Brunetta (c) 2103 3

Categorie di dispositivi mobili - PDA

• PDA (Personal Digital Assistant):– Introducevano strumenti di

organizzazione del lavoro (agenda, calendario, contatti)

– Alcuni con funzionalita wireless

– Questi sì che sono “morti”!– I cellulari sono diventati PDA

trasformandosi in smartphone

V.De Luca, F. Brunetta (c) 2103 4

Categorie di dispositivi mobili - GSM

• Quando il telefono serviva per… telefonare!

• Inizialmente il massimo della sofisticatezza erano… i giochini!

• Niente connettività Internet

• SMS, MMS

• Poi…

V.De Luca, F. Brunetta (c) 2103 5

Evoluzione dei dispositivi cellulari

• Connettività: GSMGPRSEDGE UMTSHSDPA– Aumento della velocità– Implementazione di nuove funzionalità (ad es.

GSM>SMS, UMTS>video digitale)

• Schermo: LCD monocromaticia coloriLEDtouchscreen

• Aumento delle porte e dei metodi dei metodi di connessione (Bluetooth, wi-fi, USB)

• Aumento degli accessori (cuffie, microfoni, GPS)• Aumento della capacità (aggiunta di SD card)

V.De Luca, F. Brunetta (c) 2103 6

Categorie di dispositivi mobili - 3

• Smartphone: telefoni cellulari con funzionalità aggiuntive– Grafica– Software PDA– Internet– GPS– …e giochini!

• (blackberry: smartphone “particolare” : push email; crittografia e compressione…)

V.De Luca, F. Brunetta (c) 2103 7

• Tablet: molte dimensioni, molte caratteristiche

• Netbook (in via di estinzione)

• Ultrabook…

Categorie di dispositivi mobili - 4

V.De Luca, F. Brunetta (c) 2103 8

Caratteristiche comuni

• Sistema GPS (per la geolocalizzazione)

• Connettività di rete (Wi-Fi; Cable)

• Limitate capacità di calcolo o di memoria

• Alimentazione a batteria

• Non esiste una standardizzazione (né di hardware né di software)

• Touch-screen

V.De Luca, F. Brunetta (c) 2103 9

Sistemi operativi

• Android (Google, ma abbastanza “open”)

• iOS (Apple)

• Windows Phone (ormai versione 8) Windows 8

• Symbian OS non più usato

• Blackberry OS proprietario!

• Firmware non standard tutti proprietari

V.De Luca, F. Brunetta (c) 2103 10

Quale futuro?

• Assisteremo ad una “morte” del PC oppure a una diversificazione all’estremo?– avere il dispositivo che serve quando serve

(teoria dell’ubiquitous computing)

V.De Luca, F. Brunetta (c) 2103 12

Divergenza e convergenza

• Dove “finisce” il PC e dove inizia il “mobile”?

• Che differenza c’e’ tra uno smartphone da 5 pollici e un Tablet da 7?

• E tra un “netbook” da 11 pollici con tastiera e un tablet “trasformabile”?

• E’ più “grande” un display a 7” HD o un 10” non ad alta definizione?

• Non esiste più una delimitazione netta!V.De Luca, F. Brunetta (c) 2103 13

Gli sforzi del progettista web - 1

• Chi organizza informazioni “web” deve cambiare mentalità– Non può più orientarsi verso un dispositivo

specifico– Non può “basarsi” su una definizione di

schermo specifica– Non deve dare tutto per scontato!

V.De Luca, F. Brunetta (c) 2103 14

Gli sforzi del progettista Web - 2

• Ciò che “prima” funzionava “sempre”, ora può non funzionare più. Qualche esempio:– I menu a comparsa con effetto “over”

funzionano col mousesu mobile non c’è mouse!

– La stessa pagina deve poter essere vista su schermi molto diversi: da piccolissimi (mini smartphone) a enormi (wide-screen) e posizioni intermedie!

– Molti browser diversi!

V.De Luca, F. Brunetta (c) 2103 15

• Come realizzare un sito Web che sia “compatibile” con quanto detto?

• Vari approcci diversi. Nessuno perfetto!

Gli sforzi del progettista Web - 3

V.De Luca, F. Brunetta (c) 2103 16

I diversi approcci – sito derivato

• Consiste nel “convertire” un sito esistente (per desktop) a una impaginazione “mobile”

• Compito arduo:– Certe caratteristiche saranno di troppo (ad es.

su uno schermo desktop “ci stanno” molti più elementi)

– Meccanismi di navigazione sono diversi

V.De Luca, F. Brunetta (c) 2103 17

• Consiste nel creare un sito “parallelo” dedicato al mobile

• Vantaggi:– Architettura progettata ad-hoc, navigazione

coerente con molti dispositivi

• Inconvenienti:– Si rischia duplicazione di informazioni (grave)

o forte complessità di realizzazione

I diversi approcci – sito dedicato

V.De Luca, F. Brunetta (c) 2103 18

• Approccio “alternativo”: creare un’APP specifica per vari dispositivi (Android, iOS, ecc.)

• Vantaggi:– Fruizione più comoda per gli utilizzatori– Si “aggirano” problemi tecnologici (ad es: Flash su

iOS)

• Svantaggi:– Molto complesso e anche costoso– Informazioni vanno “sincronizzate”…– Vanno fatte “app” per ogni piattaforma…

I diversi approcci – le “app”

V.De Luca, F. Brunetta (c) 2103 19

• Scuola di pensiero che dice: “Progettare il sito prima di tutto per il mobile”- il resto viene dopo

• Ottima idea ma:– Non tutto è mobile– Rischiamo auto-limitazioni

I diversi approcci – “mobile first”

V.De Luca, F. Brunetta (c) 2103 20

• La “novità” del 2012/2013

• Sfrutta CSS3 e apposite tecnologie

• Il layout del sito “cambia” a seconda del dispositivo di visualizzazione

• Elementi vengono disposti / visualizzati / nascosti in base a caratteristiche del browser / schermo

I diversi approcci - web “responsivo” - 1

V.De Luca, F. Brunetta (c) 2103 21

• Si identificano fogli stile diversi a seconda della dimensione schermo

• Ad es. mobile, narrow, normal, wide

• “Breakpoint” definiscono quando cambiare visualizzazione (ad es. 320px, 480, 600, 768, 1024, 1200).

• I “box” vengono riallineati di conseguenza

I diversi approcci - web “responsivo” - 2

V.De Luca, F. Brunetta (c) 2103 22

I diversi approcci - web “responsivo” - 3

• Vantaggi:– Non più limitati ad uno solo tipo di dispositivo– Visualizzazione ottimizzata per “ogni”

situazione

• Svantaggi:– Realizzazione complessa– Solo i browser più recenti la supportano

V.De Luca, F. Brunetta (c) 2103 23

• Link utili:

• http://it.wikipedia.org/wiki/Responsive_Web_Design

• http://www.responsinator.com/

• http://www.netmagazine.com/features/top-25-responsive-sites-2012

I diversi approcci - web “responsivo” - 4

V.De Luca, F. Brunetta (c) 2103 24

Recommended