HTML5 for Mobile
Report
Cristiano RastelliFollow
May. 21, 2011•0 likes•1,366 views
11 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Check these out next
HTML5 for Mobile
May. 21, 2011•0 likes•1,366 views
11 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
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.
Cristiano RastelliFollow
Recommended
Lo Zen e l'arte dello UX Design Mobile - festival ICT 2015 - SynesthesiaFrancesco Ronchi
Adesso In OndaDavide Cerbo
2011-2014: cosa è cambiato sul Web per le aziendeGabriele Romanato
2011 -2014: COSA È CAMBIATO SUL WEB PER LE AZIENDESmau
Sviluppo applicazioniInSide Training
Mobile UI DesignSimone Viani
HTML5 for Mobile
- HTML5 FOR MOBIІLE CHIMERA o REALTÀ? Cristiano Rastelli
- Cristiano Rastelli ➜ Freelance (“Area Web”) ➜ Developer & Designer (da oltre un decennio) ➜ Web + App UI + Mobile ➜ Passionate of UX, AI, Agile www.didoo.net @areaweb 2 / 65
- Che ci faccio io qui? http://www.flickr.com/photos/megan_russell/1444187600/ 3 / 65
- Cosa facevo ieri a quest’ora? X / 65
- WEB & MOBIІLE 4 / 65
- Osservaziіone #1 5 / 65
- Definizione di “web mobile” mobile non-mobile 6 / 65
- Definizione di “web mobile” mobile non-mobile ??? 6 / 65
- Definizione di “web mobile” 7 / 65
- Definizione di “web mobile” “Tablet Survey - April 2011” - AdMob for Google 8 / 65
- Definizione di “web mobile” NIELSEN - Q1 2011 Mobile Connected Device Report Watching TV Lying in bed In the bathroom With friends/family Waiting for something Shopping Attending a meeting/class Commuting Other 0 6 12 18 24 30 http://blog.nielsen.com/nielsenwire/?p=27702 9 / 65
- Definizione di “web mobile” 10 / 65
- Definizione di “web mobile” "The Mobile Movement: Understanding Smartphone Consumers" - GoogleMobileAds http://www.youtube.com/watch?v=CjUcq_E4I-s 11 / 65
- Definizione di “web mobile” Ma allora è mobile! 12 / 65
- Osservaziіone #2 13 / 65
- Definizione di “web mobile” http://iphonetowp7andback.didoo.net/ 14 / 65
- Definizione di “web mobile” Questo è web? Questo è mobile? Dimensioni: 1x0.7x1.2 cm Peso: 162 g 15 / 65
- Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g 15 / 65
- Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g 15 / 65
- Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g 15 / 65
- Definizione di “web mobile” Questo è web? Questo è mobile? Dimensioni: 1x0.7x1.5 metri Peso: 245 kg 16 / 65
- Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg 16 / 65
- Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg 16 / 65
- Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg 16 / 65
- Definizione di “web mobile” Internet Explorer 7 CSS2 (with paged-media) + CSS3 Selectors JavaScript 1.1 + DOM2 + AJAX 17 / 65
- HTML5 CRASH COURSE 18 / 65
- Cosa si intende con “HTML5” W3C WHATWG STANDARD HTML5 20 / 65
- Cosa si intende con “HTML5” W3C WHATWG STANDARD HTML5 20 / 65
- Cosa si intende con “HTML5” HTML5 CSS3 GEO Font-embeddiіng JЈavascriіpt “magiіcs” Local-database Webworkers Websockets 21 / 65
- La parola magica del momento HTML5 22 / 65
- HTML5 IІN BREVE 23 / 65
- In due minuti... 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 24 / 65
- In due minuti... 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... 25 / 65
- MOBILE THE BONNIІE SIІTUATIІON 26 / 65
- HTML5 for “mobile”? 27 / 65
- HTML5 for “mobile”! • 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) 28 / 65
- HTML5 Mobile Boilerplate 29 / 65
- Ottimizzazione siti “mobili” 30 / 65
- Vere “applicazioni” web-based http://37signals.com/svn/posts/2761-launch-basecamp-mobile 31 / 65
- Gamification of HTML5 32 / 65
- Angry Birds for Chrome 33 / 65
- Browser mobili sono i più evoluti http://www.slideshare.net/jamesgpearce/building-cross-platform-mobile-web-apps-7925215 34 / 65
- Un mondo difficile... X / 65
- Un mondo difficile... o forse no? X / 65
- In continua ebollizione... 35 / 65
- In continua ebollizione... Continua corsa in avanti dei browser-vendor 35 / 65
- In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs 35 / 65
- In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs Continua frammentazione delle feature supportate 35 / 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 / 65
- 42 / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- 43 / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- Quindi è già un sito “mobile”! 44 / 65
- Quali contenuti “in mobilità”? • donazione con paypal • sede hotel • segnalazione sui social • pausa pranzo • header grafico/visuale • pernottamenti • elenco degli sponsor • mappa punti di interesse • come arrivare • introduzione conferenza • programma della giornata • iscrizione • presentazioni dei relatori • donazione con paypal • footer loghi/credits 45 / 65
- Quali contenuti “in mobilità”? • donazione con paypal • sede hotel • segnalazione sui social • pausa pranzo • header grafico/visuale • pernottamenti • elenco degli sponsor • mappa punti di interesse • come arrivare • introduzione conferenza • programma della giornata • iscrizione • presentazioni dei relatori • donazione con paypal • footer loghi/credits 45 / 65
- Quali contenuti “in mobilità”? ✓ header grafico/visuale ✓ programma della giornata ✓ presentazioni dei relatori ✓ mappa punti di interesse ✓ footer loghi/credits 46 / 65
- Una versione veramente “mobile” • 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” 47 / 65
- LET’S CODE! 48 / 65
- IІn the begiіnniіng... 49 / 65
- Struttura del sito web HTML • index.html CSS • style.css JЈS • jquery.min.js (framework) • jquery.scroll.js (smooth scrolling) • html5.js (per IE<9) • interaction.js 50 / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- Step #1 51 / 65
- “Mobilizzazione” 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 52 / 65
- X / 65
- X / 65
- X / 65
- X / 65
- Step #2 53 / 65
- “Inception” 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 54 / 65
- X / 65
- X / 65
- X / 65
- X / 65
- Step #3 55 / 65
- “Adaptation” 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 56 / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- X / 65
- At last... 57 / 65
- “Orientation” 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 58 / 65
- X / 65
- X / 65
- X / 65
- X / 65
- Landscape (90°) Portrait Landscape (-90°) X / 65
- What about Androiіd ? 59 / 65
- X / 65
- X / 65
- ... and Wiіn Phone 7 ? 60 / 65
- WP7 = Internet Explorer 7 • CSS3 Media Queries • CSS3 Media Orientation • onOrientationChange event • gradients, rounded corners, box/text shadows, selectors, transitions, transformations • @font-face http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx 61 / 65
- WP7 = Internet Explorer 7 • CSS3 Media Queries • CSS3 Media Orientation • onOrientationChange event • gradients, rounded corners, box/text shadows, selectors, transitions, transformations • @font-face http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx 61 / 65
- WP7 = Internet Explorer 7 MANGO = IE9 CSS3 Media Queries • • CSS3 Media Orientation • onOrientationChange event • gradients, rounded corners, box/text shadows, selectors, transitions, transformations • @font-face http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx 61 / 65
- CONCLUSIІONIІ 62 / 65
- Take-away points ➜ 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!!! 63 / 65
- Grazie per l’attenzione. Cristiano Rastelli www.didoo.net @areaweb