HTML5 for Mobile

HTML5FOR MOBIІLECHIMERA 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 @areaweb2 / 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ІLE4 / 65

Osservaziіone #15 / 65

Definizione di “web mobile” mobile non-mobile6 / 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 Google8 / 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=277029 / 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-s11 / 65

Definizione di “web mobile” Ma allora è mobile!12 / 65

Osservaziіone #213 / 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 g15 / 65

Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g15 / 65

Definizione di “web mobile” Questo è web? Questo è mobile? Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65

Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65

Definizione di “web mobile” Internet Explorer 7 CSS2 (with paged-media) + CSS3 Selectors JavaScript 1.1 + DOM2 + AJAX17 / 65

HTML5 CRASH COURSE18 / 65

Cosa si intende con “HTML5” W3C WHATWG STANDARD HTML520 / 65

Cosa si intende con “HTML5” HTML5 CSS3 GEO Font-embeddiіng JЈavascriіpt “magiіcs” Local-database Webworkers Websockets21 / 65

La parola magica del momento HTML522 / 65

HTML5 IІN BREVE23 / 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 sintassi24 / 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ІON26 / 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 Boilerplate29 / 65

Ottimizzazione siti “mobili”30 / 65

Vere “applicazioni” web-based http://37signals.com/svn/posts/2761-launch-basecamp-mobile31 / 65

Gamification of HTML532 / 65

Angry Birds for Chrome33 / 65

Browser mobili sono i più evoluti http://www.slideshare.net/jamesgpearce/building-cross-platform-mobile-web-apps-792521534 / 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-vendor35 / 65

In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs35 / 65

In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs Continua frammentazione delle feature supportate35 / 65

... come piovessero dal cielo!36 / 65

Confini sempre meno delimitati37 / 65

“Hortus conclusus”? Non più...38 / 65

Equilibrio (molto) precario39 / 65

HTML5 is the new Flash?40 / 65

FOR REAL41 / 65

42 / 65

X / 65

43 / 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/credits45 / 65

Quali contenuti “in mobilità”? ✓ header grafico/visuale ✓ programma della giornata ✓ presentazioni dei relatori ✓ mappa punti di interesse ✓ footer loghi/credits46 / 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.js50 / 65

X / 65

Step #151 / 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 detection52 / 65

X / 65

Step #253 / 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 necessari54 / 65

X / 65

Step #355 / 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 pagina56 / 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 POI58 / 65

X / 65

Landscape (90°) Portrait Landscape (-90°)X / 65

What about Androiіd ?59 / 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.aspx61 / 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.aspx61 / 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

http://www.whymca.org	155
http://www.geekagenda.it	3
http://paper.li	1

HTML5 for Mobile

by Cristiano Rastelli

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 159

Statistics

HTML5 for Mobile Presentation Transcript