Embed Size (px)
DESCRIPTION
In questa presentazione condivido la mia "esperienza sul campo" nel prendere un sito web (www.nosqlday.it) inizialmente realizzato in HTML5+CSS3 ma con il solo target "desktop", e renderlo non solo compatibile o ottimizzato, ma addirittura "speciale" per la visualizzazione su dispositivi mobili.
Citation preview
HTML5FOR MOBIІLECHIMERA o REALTÀ?
Cristiano Rastelli
/ 65
Cristiano Rastelli
➜ Freelance (“Area Web”)
➜ Developer & Designer(da oltre un decennio)
➜ Web + App UI + Mobile
➜ Passionate of UX, AI, Agile
2
www.didoo.net@areaweb
/ 65
Che ci faccio io qui?
3
http://www.flickr.com/photos/megan_russell/1444187600/
/ 65
Cosa facevo ieri a quest’ora?
X
/ 65
WEB & MOBIІLE
4
/ 655
Osservaziіone #1
/ 65
Definizione di “web mobile”
non-mobilemobile
6
/ 65
Definizione di “web mobile”
non-mobilemobile
???
6
/ 65
Definizione di “web mobile”
7
/ 65
Definizione di “web mobile”
8
“Tablet Survey - April 2011” - AdMob for Google
/ 65
Definizione di “web mobile”
9
http://blog.nielsen.com/nielsenwire/?p=27702
NIELSEN - Q1 2011 Mobile Connected Device Report
0 6 12 18 24 30
Watching TVLying in bedIn the bathroomWith friends/familyWaiting for somethingShoppingAttending a meeting/classCommutingOther
/ 65
Definizione di “web mobile”
10
/ 65
Definizione di “web mobile”
11
http://www.youtube.com/watch?v=CjUcq_E4I-s
"The Mobile Movement: Understanding Smartphone Consumers" - GoogleMobileAds
/ 65
Definizione di “web mobile”
Ma allora è mobile!
12
/ 6513
Osservaziіone #2
/ 65
Definizione di “web mobile”
14
http://iphonetowp7andback.didoo.net/
/ 65
Definizione di “web mobile”
Questo è web?
Questo è mobile?
Dimensioni: 1x0.7x1.2 cmPeso: 162 g
15
/ 65
Definizione di “web mobile”
Dimensioni: 1x0.7x1.2 cmPeso: 162 g
15
/ 65
Definizione di “web mobile”
Dimensioni: 1x0.7x1.2 cmPeso: 162 g
15
/ 65
Definizione di “web mobile”
Dimensioni: 1x0.7x1.2 cmPeso: 162 g
15
/ 65
Definizione di “web mobile”
Questo è web?
Questo è mobile?
Dimensioni: 1x0.7x1.5 metriPeso: 245 kg
16
/ 65
Definizione di “web mobile”
Dimensioni: 1x0.7x1.5 metriPeso: 245 kg
16
/ 65
Definizione di “web mobile”
Dimensioni: 1x0.7x1.5 metriPeso: 245 kg
16
/ 65
Definizione di “web mobile”
Dimensioni: 1x0.7x1.5 metriPeso: 245 kg
16
/ 65
Definizione di “web mobile”
Internet Explorer 7
17
CSS2 (with paged-media) + CSS3 SelectorsJavaScript 1.1 + DOM2 + AJAX
/ 65
HTML5
18
CRASH COURSE
/ 65
W3CWHATWG
STANDARD
20
HTML5
Cosa si intende con “HTML5”
/ 65
W3CWHATWG
STANDARD
20
HTML5
Cosa si intende con “HTML5”
/ 6521
HTML5CSS3 GEO
Local-databaseWebworkers Websockets
Font-embeddiіngJЈavascriіpt “magiіcs”
Cosa si intende con “HTML5”
/ 65
HTML5
22
La parola magica del momento
/ 65
HTML5 IІN BREVE
23
/ 65
In due minuti...
24
Novità nel linguaggio:
• introduzione di nuovi elementi semantici
• introduzione di nuovi attributi (anche “custom”)
• eliminazione elementi/attributi obsoleti
• definizione di un nuovo doctype
• definizione di nuove regole di sintassi
/ 65
In due minuti...
25
Introduzione di nuove API per semplificare lo sviluppo di applicazioni web:
• disegno vettoriale/bitmap su canvas (bidimensionale)
• riproduzione audio/video integrata
• gestione di storage di dati locali
• geo-localizzazione dell’utente
• gestione dello stato offline delle pagine web
• e molto altro ancora...
/ 65
THE BONNIІE SIІTUATIІON
26
MOBILE
/ 65
HTML5 for “mobile”?
27
/ 65
HTML5 for “mobile”!
28
• geo-localizzazione dell’utente• gestione dello stato offline delle pagine web• gestione di storage di dati locali• disegno vettoriale/bitmap su canvas (bidimensionale)
• cross-browser + cross-platform + cross-device• “write once, run anywhere”• semplicità dei linguaggi + bassa curva di apprendimento• interazione con “gesture” (eventi touch)
/ 65
HTML5 Mobile Boilerplate
29
/ 65
Ottimizzazione siti “mobili”
30
/ 65
Vere “applicazioni” web-based
31
http://37signals.com/svn/posts/2761-launch-basecamp-mobile
/ 65
Gamification of HTML5
32
/ 65
Angry Birds for Chrome
33
/ 65
Browser mobili sono i più evoluti
34
http://www.slideshare.net/jamesgpearce/building-cross-platform-mobile-web-apps-7925215
/ 65
Un mondo difficile...
X
/ 65
Un mondo difficile...
X
o forse no?
/ 65
In continua ebollizione...
35
/ 65
In continua ebollizione...
35
Continua corsa in avanti dei browser-vendor
/ 65
In continua ebollizione...
35
Continua corsa in avanti dei browser-vendor
Continua proliferazione di draft & specs
/ 65
In continua ebollizione...
35
Continua corsa in avanti dei browser-vendor
Continua proliferazione di draft & specs
Continua frammentazione delle feature supportate
/ 65
... come piovessero dal cielo!
36
/ 65
Confini sempre meno delimitati
37
/ 65
Confini sempre meno delimitati
37
/ 65
“Hortus conclusus”? Non più...
38
/ 65
Equilibrio (molto) precario
39
/ 65
HTML5 is the new Flash?
40
/ 65
FOR REAL
41
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 6543
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 6544
Quindi è già un sito “mobile”!
/ 6545
• donazione con paypal• segnalazione sui social• header grafico/visuale• elenco degli sponsor
• introduzione conferenza• programma della giornata• presentazioni dei relatori
Quali contenuti “in mobilità”?
• sede hotel• pausa pranzo • pernottamenti• mappa punti di interesse• come arrivare
• iscrizione• donazione con paypal• footer loghi/credits
/ 6545
• donazione con paypal• segnalazione sui social• header grafico/visuale• elenco degli sponsor
• introduzione conferenza• programma della giornata• presentazioni dei relatori
Quali contenuti “in mobilità”?
• sede hotel• pausa pranzo • pernottamenti• mappa punti di interesse• come arrivare
• iscrizione• donazione con paypal• footer loghi/credits
/ 65
Quali contenuti “in mobilità”?
46
✓ header grafico/visuale
✓ programma della giornata
✓ presentazioni dei relatori
✓ mappa punti di interesse
✓ footer loghi/credits
/ 65
Una versione veramente “mobile”
47
• Utilizzare il codice esistente (HTML, CSS e JS) senza doverlo duplicare e creare una seconda versione del sito
• Limitare i contenuti visualizzati alle sole informazioni interessanti e/o significative rispetto al contesto d’uso.
• Sfruttare le peculiarità del device per aggiungere al sito funzioni/interazioni tipiche del contesto “mobile”
?
/ 65
LET’S CODE!
48
/ 6549
IІn the begiіnniіng...
/ 65
Struttura del sito web
50
HTML• index.html
CSS• style.css
JЈS• jquery.min.js (framework)• jquery.scroll.js (smooth scrolling)• html5.js (per IE<9)• interaction.js
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 6551
Step #1
/ 65
“Mobilizzazione”
52
HTML• Aggiungere meta-tag per dispositivi mobile• Aggiungere script per gestione eventi “touch”• Aggiungere css per adattamento a schermo 320x480 px
CSS• Adattare elementi a schermo 320x480 px• Nascondere contenuti non necessari
JЈS• Gestire il caso “mobile” usando user-agent detection
/ 65X
/ 65X
/ 65X
/ 65X
/ 6553
Step #2
/ 65
“Inception”
54
HTML• Togliere script esterni per evitare chiamate inutili• Gestire meglio la visualizzazione verticale dei contenuti
CSS• Evitare eccessivo scroll verticale• Re-impaginare elenchi programma/relatori
JЈS• Inserire via dom-manipulation gli script esterni• Rimuovere dal dom gli elementi non necessari
/ 65X
/ 65X
/ 65X
/ 65X
/ 6555
Step #3
/ 65
“Adaptation”
56
HTML• Gestire l’elenco dei POI come lista <ul>• Aggiungere meta-informazioni al programma
CSS• Evidenziare il talk in corso nel programma• Impaginare elenco POI
JЈS• Gestire toggling degli elementi per contenuti aggiuntivi• Rimuovere link di tipo “ancora” all’interno della pagina
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
/ 6557
At last...
/ 65
“Orientation”
58
CSS• Gestire i diversi stati di orientamento del device
JЈS• Implementare una soluzione fallback per simulare il
comportamento di media-orientation con iOS 3.2• Gestire geolocalizzazione dei POI
/ 65X
/ 65X
/ 65X
/ 65X
/ 65X
Portrait
Landscape (90°)
Landscape (-90°)
/ 6559
What about Androiіd ?
/ 65X
/ 65X
/ 6560
... and Wiіn Phone 7 ?
/ 6561
WP7 = Internet Explorer 7
http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
• CSS3 Media Queries
• CSS3 Media Orientation
• onOrientationChange event
• gradients, rounded corners, box/text shadows, selectors, transitions, transformations
• @font-face
/ 6561
WP7 = Internet Explorer 7
http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
• CSS3 Media Queries
• CSS3 Media Orientation
• onOrientationChange event
• gradients, rounded corners, box/text shadows, selectors, transitions, transformations
• @font-face
/ 6561
WP7 = Internet Explorer 7
http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
• CSS3 Media Queries
• CSS3 Media Orientation
• onOrientationChange event
• gradients, rounded corners, box/text shadows, selectors, transitions, transformations
• @font-face
MANGO = IE9
/ 65
CONCLUSIІONIІ
62
/ 65
Take-away points
63
➜ Capite con attenzione quali strategie/tecnologie volete adottare per lo sviluppo di un sito “mobile”.
➜ Valutate se davvero vi occorre un secondo sito web.
➜ Provate a sfruttare le possibilità, offerte dall’HTML5, in modo intelligente e non convenzionale.
➜ Avete il DOM. Usatelo! Giocateci!! Manipolatelo!!!
www.didoo.net@areaweb
Grazie per l’attenzione.
Cristiano Rastelli
