72729
Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 

Malgrado lo standard non sia stato ancora ultimato, quasi tutti i browser più moderni già oggi integrano molte delle specifiche relative a HTML5 e CSS3. Ognuno con un diverso grado di compatibilità e supporto, ma in generale tutti abbastanza rispettosi degli standard.

Ma quali opportunità offrirà HTML5 agli sviluppatori nel momento in cui inizierà a essere utilizzato su larga scala nella realizzazione di siti web? Un buon esempio di cosa possiamo aspettarci ci viene da Apple che ha realizzato una galleria di esempi molto indicativi. HTML5 probabilmente non ucciderà Flash di Adobe, ma cambierà in meglio l'utilizzo quotidiano del web per milioni di persone, non soppianterà le migliaia di giochini che spopolano sul web al giorno d'oggi, ma ricostruirà le basi del web per permettere ai siti internet del futuro di offrire molte nuove funzionalità in maniera semplice e immediata.

Ad esempio, HTML5 permetterà di capire da dove un utente si stia collegando in quel preciso momento (magari da uno smartphone) e tramite le funzioni di geolocalizzazione sarà in grado di offrire dei servizi mirati per quel territorio, come identificare il punto vendita o il ristorante più vicini. Oppure immagazzinerà le nostre preferenze relative a un sito in locale sul nostro computer, per esempio una serie di appunti e note presi mentre si studia su una ben nota enciclopedia online. Soprattutto renderà il web un posto più sicuro, più efficiente e più adattabile.

HTML5 ci libererà infatti completamente, o almeno in larga parte, dalla dipendenza da plugin proprietari che recentemente sono assurti fin troppo spesso agli onori della cronaca come principali responsabili di possibili attacchi da parte di hacker o virus.

Proprio grazie all’uso ridotto di plugin proprietari HTML5 favorirà la convergenza e la compatibilità tra i nuovi dispositivi in arrivo nei prossimi anni come tablet, televisori intelligenti, perfino forni a microonde e frigoriferi!

Un altro vantaggio apportato sarà anche quello di plasmare un web più semantico, aggiungendo alle pagine web una serie di elementi come “article, section, header, footer e nav” rendendone più chiara la struttura e l'organizzazione. Google sarà il primo ad avvantaggiarsi di questa rivoluzione, perché sarà in grado di capire e analizzare meglio i contenuti di un sito web, fornendo risultati di ricerca migliori e in definitiva saranno gli utenti a giovare di ricerche più mirate ed efficaci.

Grazie ad iPhone e soprattutto iPad molti grandi attori del web stanno lentamente aggiornando i loro siti per renderli fin da subito in grado di offrire contenuti attraverso HTML5 per questi dispositivi, Youtube, Vimeo, Flickr, la CNN, Nike, National Geographic e (perché no) ItalyGuides.it per citare alcuni esempi.

La domanda che tutti i web-developer al mondo si stanno facendo in questo momento è: "cosa potrò fare con HTML5 quando inizierò a implementarlo sui miei siti?”. La buona notizia è che si potrà fare tantissimo grazie all'HTML5, ma quello che più stupisce è che con HTML5 si può fare tanto, già oggi, iniziandolo a implementare fin da subito.

Una premessa però è d'obbligo, conoscere la propria audience è fondamentale. Se ad esempio ci si rivolge a un pubblico business, formato da aziende che utilizzano ancora, loro malgrado, Internet Explorer 6, allora forse potete lasciare l'innovazione in un cassetto ancora per qualche anno (tanto i vostri utenti saranno abituati a questo). Se al contrario i vostri navigatori utilizzano per la maggior parte Firefox, Chrome o meglio ancora Safari con iPhone o iPad, allora non c'è tempo da perdere.

Ma se il vostro audience si trova da qualche parte nel mezzo di questi due scenari – come la maggior parte dei siti Internet al momento – ci sono comunque alcune linee guida da poter seguire per implementare al meglio HTML5 già da adesso.

Nonostante le specifiche dell'HTML5 siano ancora considerate solo come un draft dal W3C – la prima bozza è del gennaio 2008 – come già detto tutte le ultime release dei browser supportano, a diversi livelli di compatibilità, le nuove specifiche. L'unico browser che attualmente non supporta a nessun livello HTML5 è IE8, ma non è una novità, e l'arrivo del nuovo Internet Explorer 9 comunque fa ben sperare anche sul fronte Microsoft.

È notizia recente poi che la quota di utilizzo di IE sia scesa sotto al 50% aprendo scenari ben diversi dai tempi in cui era il browser con il 95% dello share. Si fa strada la possibilità di concepire un web a due vie, offrendo “innovazione” a un buon numero di navigatori del web e rimanendo comunque compatibili con chi utilizza ancora Internet Explorer.

HTML5 (e CSS3) infatti sono in buona parte scalabili, cioè se un browser non li supporta si limiterà a ignorare le specifiche. Il sito di ComPart è già una dimostrazione pratica di questo concetto, basterà aprilo con IE e Chrome per accorgersi delle differenze di visualizzazione dovute in questo caso principalmente alle specifiche CSS3.

Come usare HTML5? Iniziamo dalla testa.

Prima di tutto già da oggi si può iniziare a usare il DOCTYPE di HTML5, non esiste nessuna ragione pratica per non farlo, il vostro browser continuerà a renderizzare il sito in maniera rispettosa degli standard. Per esempio invece di una dichiarazione standard come questa:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

si può scrivere:


<!DOCTYPE html>
<html>

Il codice della vostra pagina risulterà più pulito e pronto per i tag HTML5 che vorrete implementare e il bello è che tutti i browser tenteranno di interpretare la pagina nella maniera migliore possibile.

Il famoso e famigerato TAG <video> è un'altra cosa facilmente implementabile. Anche se non è ancora ben chiaro quale sarà il formato standard del futuro per i contenuti audio e video, dato che diverse forze in campo cercano di imporre il proprio, come h.264, Ogg Theora o WebM, il bello di HTML5 è appunto quello di essere scalabile.

Quindi si potrà inserire il tag con la source a un h.264 per iPad o iPhone e prevedere un fallback a Theora per Firefox e Opera fino a scendere a un player in flash per Explorer o addirittura una semplice jpg.


<video>
<source src="/video.m4v" type="video/mp4" /> <!-- h.264 per Safari -->
<source src="/video.ogg" type="video/ogg" /> <!-- Ogg Theora per Firefox -->
<p>Spiacente, il tuo browser non supporta i tag video, leggiti un buon libro...</p>
</video>

In contatto con HTML5

Anche nelle <form> ci sono notevoli passi avanti che possono essere apportati. A oggi l'unico modo per poter validare, ad esempio, un campo di una form destinato a una email è quello di produrre un file Javascript che si occupi di questo.

Con HTML5 non sarà più necessario basterà inserire un type corretto come negli esempi riportati qui sotto:


<input type="email">
<input type="url">
<input type="number">
<input type="tel">

Facile vero? Anche se purtroppo la presenza di IE limita lo sviluppo e ci rende ancora dipendenti dal JavaScript anche per validare una banale email, esiste ancora un vantaggio pratico nell'inserire il type corretto.

Primo perché i browser meno recenti interpreteranno o meglio ignoreranno il type assegnando il valore standard “text” (e questo è un bene), il secondo è che ad esempio su un dispositivo mobile come iPhone, che invece è in grado di capire la natura del type, presenterà una tastiera virtuale dedicata al tipo di campo da inserire. In caso di numero come un CAP avremo una tastiera numerica, in caso di email una tastiera dedicata con tanto di @ in bella vista e scorciatoie per i domini ".com, .it, etc...". Chiunque navighi con un iPhone o un iPad ha ben chiaro il vantaggio e la comodità di una tale funzione.

HTML5 luci e ombre

Ovviamente non tutte le features di HTML5 sono pronte per l'implementazione di massa e... no, non tutte le ragioni iniziano con IE! Ombre, angoli stondati e sfumature possono essere usati con tranquillità a patto però di non pretendere una corrispondenza assoluta tra i diversi browser. La metà circa dei vostri visitatori vedrà un sito più curato graficamente, mentre l'altra metà si avvantaggerà di una maggiore velocità del sito in virtù di un minore uso di immagini a vantaggio di regole CSS. Se a questo aggiungiamo che Google di recente ha affermato che i tempi di caricamento sono importanti ai fini del posizionamento e del Rank, i vantaggi appaiono ancora più evidenti.

Il sito di ComPart è una dimostrazione pratica di questo concetto, basterà aprilo con IE e Chrome per accorgersi delle differenze di visualizzazione dovute in questo caso principalmente alle specifiche CSS3. Ad esempio questo codice stonderà gli angoli di un box:


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Questo darà una ombreggiatura ai vostri testi:


text-shadow: 5px 5px 3px #CCC;

Questo ombreggerà un box:


-webkit-box-shadow: 10px 10px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
box-shadow: 10px 10px 5px #666;

Dimmi dove ti trovi e ti servirò meglio

La Geolocalizzazione è un altro elemento molto importante che può essere implementato fin da subito. Ovviamente i “mobile browser” come Safari sono stati i primi a supportarlo ma di recente anche Firefox e Chrome hanno aggiunto queste features. Geolocallizare un utente sarà facilissimo, basteranno poche righe di Javascript come queste:


navigator.geolocation.getCurrentPosition( success, fail );

In un futuro fatto sempre più di netbook, di tablet e smartphone, ecco che la geolocalizzazione è una cosa che in certi ambiti proprio non si potrà ignorare. Infine, dato che anche l'occhio vuole la sua parte, anche alcune semplici animazioni basate su CSS3 potranno essere implementate con relativa facilità e in quel caso i browser vecchi si limiteranno a ignorarle.


-webkit-transition: all 1s ease-in-out;
-webkit-transform: translate(3em,0);
-webkit-transform: rotate(30deg);

Un ultimo consiglio è quello di implementare sempre e comunque il codice per Google Frame:


<meta http-equiv="X-UA-Compatible" content="chrome=1">

In questo modo potremo limitare ulteriormente i danni che IE6 ha provocato sul web nell'ultimo decennio.

Tags: