Introduzione ad HTML5
Dopo aver usato in modo intuitivo e discontinuo l’html5, ho deciso di usare il blog per condividere e riordinare i miei appunti. Prima di partire, segue un piccola premessa.
Sul mio vecchio sito e in giro per la rete, ho manifestato una certa perplessità nei confronti di coloro che, accogliendo con entusiasmo il nuovo html, lo vedevano come una sorta di “giustiziere” in grado di uccidere tutte le tecnologie alternative.
Come ho già avuto modo di scrivere, reputo l’html5 una tecnologica meravigliosa, ma di fatto non amo chi ragiona in modo troppo rigido. Questo linguaggio, pur essendo il protagonista assoluto delle applicazioni web presenti e future, ha alcuni ambiti nei quali non esprime ancora il suo massimo potenziale. Tagliando corto, nella mia cassetta da sviluppatore preferirei avere tutti gli attrezzi possibili, e scegliere quali usare in base alle esigenze del momento. Fatta la doverosa premessa entriamo nel vivo con alcune pillole di HTML5 per principianti.
Come nasce l’html5?
Volendo essere pignoli, bisognerebbe ripercorrere la lunga diatriba all’interno del W3C, con tanto di lotte intestine, votazioni e scissioni.
Volendo sintetizzare il discorso, tutto cominciò nel 2007, quando presso il W3C si formò un gruppo di esperti che aveva il compito di definire gli standard del web di nuova generazione. Un paio di anni dopo, visto il successo dell’iniziativa, il gruppo di lavoro dedicato all’XHTML 2.0 chiuse i battenti e il W3C concentrò tutti i suoi sforzi sull’HTML5.
Da allora, abbiamo assistito ad una corsa senza freni da parte di tutti i più importanti produttori di browser, per accogliere quanto prima le specifiche del nuovo linguaggio a marcatori. Una piccola grande rivoluzione che non si limita al web tradizionale, ma riguarda soprattutto i dispositivi mobili.
Perché è tanto amato dalla comunità di sviluppatori?
Perché razionalizza in modo pragmatico le regole per scrivere il codice necessario alla creazione di pagine web. Introduce nuove potenti funzionalità facili da impostare. Elimina un serie di tag obsoleti. In moltissime circostanze, consente di fare a meno di plug-in aggiuntivi. Di fatto è il nuovo standard per il mobile. Sta muovendo i primi passi anche nello mondo dello sviluppo di software: alcuni prodotti come phonegap, consentono di programmare in HTML5 e creare delle app che girano sulla maggior parte dei dispositivi mobili.
Quali sono i suoi limiti?
Una non perfetta sintonia con tutti browser web. Volendo ragionare in termini di prestazioni, per ora non consente la creazione di giochi web capaci di competere con Unity, Flash, Director o Java. Le app create con phonegap e affini, hanno una potenza limitata che può manifestarsi in fastidiosi rallentamenti.
Cosa bisogna conoscere per cominciare a lavorare in HTML5?
Basta una piccola infarinatura di HTML classico, qualche nozione di CSS e JavaScript.
Con cosa si può scrivere il codice?
Esistono una miriade di programmi gratuiti e a pagamento. Tra quelli gratuiti cito Aptana Studio, Komodo Edit e il mio preferito: Notepad++.
Primi passi con HTML5
Sarà banale, ma è sempre importante ricordarlo: L’HTML5, come il suo predecessore, è un linguaggio a marcatori. In parole semplici, non viene compilato per generare un programma , ma consiste in un testo che viene formattato tramite dei tag e rappresentato dal browser. Il DNA del nuovo HTML, nonostante le molteplici novità introdotte, non cambia. E in questo senso, anche le app create tramite Phonegap vanno intese come delle applicazioni ibride diverse dalle vere applicazioni native. Di seguito vediamo come è fatta una pagina HTML5 essenziale:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="ISO-8859-1">
<title>Html5 per principianti</title>
</head>
<body>
<p>Un paragrafo in HTML5</p>
</body>
</html>
Prima di tutto, abbiamo un nuovo <!DOCTYPE>. Questo tag fornisce informazioni sul tipo di documento, e dovrebbe agevolare i browser nella corretta lettura del file. Gli illustri predecessori del linguaggio (XHTML e HTML4,) presentavano il tag tramite sintassi lunghissime, poco intuitive e quasi impossibili da ricordare a memoria.
Adesso quelle informazioni sono state riorganizzate in modo più razionale. Nel nostro caso, abbiamo un brevissimo tag che dice al browser, io sono un documento realizzato in HTML5.
Nel tag di apertura <html>, attraverso l’attributo lang, viene indicato il linguaggio di riferimento. Questa informazione è utile sia per i motori di ricerca che per la creazione di siti accessibili.
Il tag <meta> specifica in modo meno verboso il set di caratteri supportato, e il resto dei tag è identico a quello del vecchio linguaggio.
Per quanto riguarda il valore da passare all’attributo charset, ho usato il valore ISO-8859-1 al posto del classico UTF-8. Questo perchè, per formattare correttamente i documenti in italiano, è necessario usare il set dell’europa occidentale. In questo modo saranno supportati correttamente tutti i caratteri della nostra lingua (tra cui le lettere accentate).
E a proposito di vecchi tag, ecco l’elenco dei marcatori non supportati da HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<isindex>
<noframes>
<strike>
<tt>
<u>
Si tratta di strumenti gradualmente messi da parte dalla comunità di sviluppatori, e che da oggi sono ufficialmente eliminati.
Tornando al nostro esempio essenziale, bisogna specificare alcune regole sintattiche generali.
A differenza di quanto avveniva con l’XHTML, il nuovo linguaggio a marcatori non è case sensitive, per cui, in teoria, potremmo scrivere i tag: <Html>, <HTML> o <html>. Altra regola riguarda l’uso opzionale delle virgolette. In teoria, possiamo usare una sintassi del tipo:
<tag attributo=valore>
al posto di
<tag attributo="valore">
Chiaramente, optare per questo tipo di sintassi, implica delle limitazioni sul valore degli attributi. In particolare, non possiamo, usare delle virgolette tra i caratteri, spazi vuoti, il segno uguale e le parentesi di apertura e chiusura usate per i tag.
Tralasciando le regole vere e proprie, la convenzione più diffusa nel mondo reale prevede l’utilizzo dei tag minuscoli (fatta eccezione per il tag <!DOCTYPE>) e i valori degli attributi tra le virgolette.
Del resto, la maggior parte dei tool usati dagli sviluppatori, rispettano questo modo di impostare il codice.
Per chiudere questo primo articolo introduttivo, segnalo il servizio (http://validator.w3.org/) messo a disposizione dal W3C per verificare la correttezza del codice HTML5. Questo validatore è ancora in fase sperimentale, ma ci consente di avere un primo riscontro sui nostri lavori.
