Sviluppare siti web compatibili con i nuovi dispositivi grazie ad HTML5 e CSS3.

a cura di Daniele Martini
www.danielemartini.it/IF2012

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.

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

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.

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ì:

<audio src="musica.mp3" controls></audio>



Provalo: e poi vedi altre specifiche

Video

Anche per il <video> è previsto un supporto nativo, vediamo un esempio semplificato:

<video src="rain.mp4" controls width="480" height="360"></video>



In realtà le cose sono leggermente più complesse al momento... vedi altre specifiche

Web Semantico & Input Form

HTML5 è stato reso più snello e veloce da caricare per i dispositivi

Esempio pagina base html: prima - dopo.

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.

• Native:
• - Canvas (demo object | monster )
• - Web Forms 2.0 (datepicker - colorpicker - search - autovalidation - ecc...)
  Esempio: test page with input
  
• - Semantic Web (section - header - footer - nav - mark - article - aside - ecc...)
  Tutorial: esempio posizione tags | esempio codice: prima - dopo

Geolocation & More...

Tra le nuove caratteristiche che solitamente si accomunano ad HTML5 abbiamo:

• Funzionalità collegate ad HTML5:
• - Geolocalizzazione (esempi)
• - Web Storage APIs (Local Storage) (esempi)
• - History APIs (utile ad esempio per supporto navigazione Ajax)
• - File && Drag and Drop APIs

Possiamo creare un'animazione tramite keyframes e CSS

Compatibilità con browser: 47,1%.
Non compatibile con Explorer ed Opera

Esempio (campane)

Esempio (sunrise)

Usa Modernizr per verificare la compatibilità del codice con il browser in uso.

Utilizza sempre strategie di Fallback.

In questo caso un'animazione alternativa jQuery o Flash.

Grazie alle caratteristiche RGBA, HSL, HSLA si possono creare gradienti lineari e radiali direttamente da CSS

Compatibilità browser GRADIENTI: 55,5% (no I.E.)
Compatibilità browser OPACITA': 95,7%
Compatibilità browser COLORI: 67,1%

Tutorial (gradienti)

Demo (css generator) | Sfondi multipli e Pattern

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.

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%

Esempio (box shadows generator)

Esempio (text shadows generator)

Per le ombre interne ai box, usare la proprietà "inset"
box-shadow: inset 3px 2px 5px #cccccc;

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.

Esempio 2D: Slideshow con Trasform

Esempi 3D: Confezione 3D - Locandine - Box and Ball - Fiocchi

Guide: 2D Transform - 2D Transform and Transitions

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

Esempio: Generatore Transizioni

Guida: Transitions, Transforms and Animation

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:

- Accessibile
- Traducibile
- Ricercabile

Compatibilità browser: 93.53%

Esempio: Sito di Design

Come si implementa: Istruzioni per l'uso...

@font-face {   
        font-family: 'Tagesschrift';   
        src: url('tagesschrift.ttf'); 
}
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Riferimenti completi: Guida Rapida | Generatore codice massima compatibilità

Compatibilità browser: 93.53%

I migliori siti per i Web Fonts: Typekit | Fonts.com | Google Fonts | Mobile Font Fonts

Il meccanismo che consente di creare siti web "reattivi" ovvero in grado di adattare il proprio layout al dispositivo che lo sta consultando.

Vediamo subito qualche esempio:

- Blog

- Sito Web

- Altro Sito Web

Negli esempi indicati, provate a stringere ed allargare le dimensioni della finestra del browser!

@media screen and (max-width: 980px) { 

		/* regole CSS classiche */
		...
}

@media (min-width:500px) {

		/* regole CSS classiche */
		...
}

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":

import stili generali (con metodo HTML)

<link rel="stylesheet" type="text/css"  href="stile_base.css" />
      

import delle varianti (con metodo CSS)

@import url(pc-low-res.css) screen and (max-width:1024px);

@import url(tablet-hd.css) screen and (max-width: 980px);

@import url(tablet.css) screen and (max-width: 650px);

@import url(cellulari.css) screen and (max-width: 560px);

Separando i file evito il caricamento di codice non necessario.

Due tecniche per utilizzare media queries che hanno i suoi pro e contro.

L'ideale per ottimizzare la navigazione mobile è probabilmente la prima soluzione a discapito però di una progettualità più complessa.

Una possibile alternativa valida alle media queries è data dall'uso di Framework CSS per la creazione di layout fluidi come ad esempio LESS o SASS.