Il tuo browser non supporta questa presentazione quindi ti verrà mostrata una versione semplificata.
Per una visualizzazione ottimale dei contenuti usa Chrome, Safari o Firefox.
Taggers @ work!
Web programming
for tablet & smartphone
Sviluppare siti web compatibili con i nuovi dispositivi grazie ad HTML5 e CSS3.
a cura di Daniele Martini
www.danielemartini.it/IF2012
Perchè preoccuparsi del mobile?
In Italia oltre 25'000'000 di persone possiedono uno smartphone e circa 2'500'000 possiedono un tablet.
Il tempo medio di navigazione da mobile è di 7,9 ore a settimana per utente.
Mediamente, circa il 10% delle visite proviene da dispositivi mobile.
Queste cifre sono in netta crescita.
Elenco degli argomenti di oggi.
1) HTML 5: cosa, come e quando?
2) Alcune novità interessanti di HTML5.
3) Le novità di CSS3 per lo sviluppo web.
4) CSS3 per il design "reattivo".
5) Conclusioni e domande.
1) HTML 5: cosa, come e quando?
HTML 5 non è un qualcosa di completamente nuovo. La maggior parte delle specifiche deriva da HTML 4 e da XHTML 1.0
HTML 5 non è ancora qualcosa di definitivo e le sue specifiche crescono e cambiano giorno per giorno.
Spesso vengono accomunati ad HTML5 tante nuove funzionalità, effetti grafici o script tipici delle pagine web più moderne. In realtà non tutto questo è HTML5.
Non tutte le specifiche di HTML 5 vengono supportate attualmente da tutti i browser. Spesso sono necessarie delle strategie per la compatibilità e soprattutto è necessario considerare sempre le vecchie versioni dei browser.
A Febbraio 2011 è stato annunciato dal WWW Consortium (W3C) che entro Luglio 2014, HTML 5 verrà raccomandato ufficialmente come standard nel mondo dello sviluppo web.
Fin da subito i browser più noti si sono adoperati per supportare HTML5 viste le sue enormi potenzialità, compreso Internet Explorer 9 che in passato è sempre stato ritroso a seguire gli standard proposti.
Audio
Come è stato per le immagini nel 1994, adesso il TAG <audio> diventa nativo, e quindi da adesso possiamo inserire musica nelle pagine web semplicemente così:
HTML5 presenta diverse funzionalità, alcune di esse sono native, altre sono di solito accomunate ad HTML5 anche se in effetti sono delle estensioni che necessitano componenti esterni sviluppate ad esempio in jQuery.
- History APIs (utile ad esempio per supporto navigazione Ajax)
- File && Drag and Drop APIs
Come detto precedentemente, queste funzionalità sono sviluppate mediante API esterne ad HTML5, spesso sfruttando jQuery e framework avanzati.
e adesso passiamo a:
CSS3*
* funzionalità e novità
Questa presentazione per esempio
si ispira al concetto di prezi.com
ma è sviluppata grazie alle funzionalità transforms e transitions di CSS3 e può quindi essere visualizzata su tutti i browser più moderni.
Una strategia di Fallback è quella di mettere un'immagine già pronta... il vantaggio? Chi supporta CSS3 non avrà bisogno di caricarla e la navigazione risulterà più veloce.
Ombre CSS3 (shadows)
Possiamo creare ombre interne o esterne per i box mentre solo ombre esterne per i testi.
Compatibilità BOX shadows: 65.09%
Compatibilità TEXT shadows: 57.57%
Per le ombre interne ai box, usare la proprietà "inset" box-shadow: inset 3px 2px 5px #cccccc;
CSS3 Transform (2D e 3D)
Le trasformazioni CSS si dividono in 2D e 3D e, insieme a transitions ci consentono di creare fantastiche animazioni senza bisogno di ricorrere a script esterni. Solo puro CSS.
Compatibilità transform 2D: 72.99% | 3D: 48.39% ** Attenzione: queste percentuali aggiornate le trovate su caniuse.com.
Le transizioni sono simili alle animazioni, ma sono più semplici da usare... richiedono meno codice e sono più intuitive. Rispetto ad animations però non danno un controllo totale sulle proprietà da animare.
Compatibilità browser: 56.68%
I browser che non supportano le transizioni rischiano di effettuare il cambio di proprietà (per esempio cambio posizione, rotazione, cambio colore, dimensione, ecc..) senza passaggi intermedi e quindi effettuare un cambio "di scatto". Se l'animazione è fondamentale per la corretta visualizzazione, è meglio usare effetti di script (es:jQuery).
Grazie a @font-face finalmente è possibile utilizzare qualsiasi font nei nostri progetti web senza dover ricorrere a compromessi e a strategie esterne. Il testo sarà sempre:
Le media queries non si applicano solo alla larghezza ma anche ad altre proprietà del dispositivo come ad esempio i colori del display o il suo orientamento. Una guida più completa potete trovarla qui.
Inoltre le regole possono essere separate in diversi fogli di stile e importati solo "al bisogno":