Il Web per il mobile - soluzioni

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!


Cosa è “mobile”?

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

• E’ facile distinguere o no?


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


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…


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)


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


• Tablet: molte dimensioni, molte caratteristiche

• Netbook (in via di estinzione)

• Ultrabook…

Categorie di dispositivi mobili - 4


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


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


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)


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!


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!


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

• Vari approcci diversi. Nessuno perfetto!

Gli sforzi del progettista Web - 3


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


• 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


• 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”


• 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”


• 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


• 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




• 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


• Link utili:

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

• http://www.responsinator.com/

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



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

http://www.responsinator.com/

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

Technology

Il Web per il mobile - soluzioni