Esperimenti con HTML5: gli Esempi di Google, Best Practices e Mobile

Uno dei temi sempre più ricorrenti è l'HTML5: è open, standard, multipiattaforma ed supportato a modo suo da diversi Big del settore tra cui Google, Apple,.. e addirittura Microsoft con Internet Explorer 9!

Un mio layout senza immagini con Webfont e gradienti CSS3

Quindi la soluzione di tutti i mali? Più o meno, ci sono ancora alcune questioni in sospeso, alcune limitazioni che verranno risolte de facto, altre che non si risolveranno e altre ancora che si ricorrerà ad hack.

HTML5 e HTML5 & Family

Come già chiarito qualche post fa, quando si parla di HTML5 quasi nessuno intende puramente solo la specifica HTML5, ma per semplificazione ci si mette dentro anche CSS3 e altre tecnologie standard che sono alle porte. Ad ogni modo è consigliato, prima di usare qualche funzionalità di HTML5, verificare che sia effettivamente implementata o che ci sia un modo decente per fare fallback a browser più "limitati" come Internet Explorer 6, 7, 8 e Opera Mini.

HTML5Rocks ed esempi

Il sito Html5Rocks sponsorizzato da Google forniva una slide con alcuni casi pratici di utilizzo, da poche ore si è aggiunta un'altra parte dedicata ad alcuni esempi riutilizzabili per i propri progetti.

Mobile e Touch

Sebbene i browser mobili più utilizzati come Webkit (Android) e Safari (iPhone) siano basati su Webkit e abbiano nomi uguali alle versioni desktop, non offrono realmente le stesse funzionalità dei fratelli maggiori e non mi riferisco solo alla mancanza di azioni legate al mouse (drag and drop ed evento hover), ma anche alla difficoltà che si ha ad interagire con alcuni widget come editor WYSIWYG.
Sempre in questi giorni è partita l'iniziativa JQuery Mobile per i dispositivi Touch, sicuramente un progetto da tenere d'occhio.

Un layout d'esempio in CSS3 che si adatta al desktop e al mobile. Riducete la larghezza della finestra a meno di 800px o ruotate lo smartphone in landscape per vedere la differenza. Funziona su Webkit, Fennec, Firefox, Opera, ma non su Opera Mini :(

Nel caso questo riadattamento liquido non si adatti al vostro sito dovete fare 3 versioni: desktop, mobile e touch come ha fatto Facebook(m, touch) e mantenerle :(.

Best Practices

Trasformare gli esempi in progetti reali non è sempre facile come sembra, e anche un semplice markup può dar problemi e non essere riconosciuto su tutti i browser. Fortunatamente per ovviare a tanti piccoli ostacoli che si possono incontrare è nato HTML5 ★ Boilerplate che ha lo scopo principale di implementare un template iniziale funzionante con tutte le migliorie che si possono già usare tranquillamente.

Ecco le caratteristiche salienti:

• markup HTML5 (<article>, <header>,..)
• Compatibile con i browser moderni e quel cancro di IE6 (quindi png fix, ecc..)
• Ottimizzato per i dispositivi mobili iOS, Android, Opera Mobile (quindi hack standard, Caching, Manifest per non far riscaricare più volte gli elementi grafici del sito)
• Ottimizzazione al .htaccess (utf8, redirect www,..)

Happy Web Developing, less stress :P