Consigli e trucchi HTML5

Con questo articolo continuiamo l’introduzione ad HTML5, trattando alcuni dei nuovi tag e gli attributi che ne scaturiscono.
Come riportato in altri articoli, non tutti i browser ancora ad oggi supportano pienamente la specifica HTML5, in costante evoluzione.

Per ogni passo, è possibile utilizzare questo tool: http://html5test.com/

1. Dichiarazione DOCTYPE

Con HTML4 dichiarare il doctype comportava una sintassi contorta e lunga:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Con HTML5 quanto scritto sopra si traduce semplicemente con:


<!DOCTYPE html>

2. Includere un file Javascript o uno stylesheet

Con HTML4:


<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>

In HTML5, non dobbiamo specificare il MIME. Tutti gli script tag sono assunti con type=”text/javascript” e type=”text/css”.
Occorre semplicemente scrivere:


<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

Nota: HTML5 ha aggiunto l’attributo async, per il tag script. Questo ci consente di far eseguire asincronamente lo script, non appena è disponibile.

3. Struttra semantica – header , footer & nav

In principio, i div non avevano una struttura semantica senza prima aggiungere attributi quali id e class.


<div id="header">
   ...
</div>
<div id="nav">
   <ul<...</ul>
</div>
<div id="footer">
   ...
</div>

Con HTML5 sono stati introdotti nuovi tag, per meglio mostrare la struttura semantica di un documento.
Sono nati quindi i tag header, nav e footer che posso essere utilizzati in sostituzione di quanto scritto sopra, fornendo una struttura semantica al contenuto.


<header<
   ...
</header>
<nav>
   <ul>...</ul>
</nav>
<footer>
   ...
</footer>

4. Strutture semantica – article vs section

HTML5 introduce inoltre i tag article e section per aiutare lo sviluppatore nella creazione di contenuto semantico.


<section>
   ...
</section>
<section> tag defines sections in a HTML such as headers, footers, or any other sections of content.

<article>
   ...
</article>

Il tag article è usato per sepcificare contenuto indipendente ed autonomo.

5. Input Form – types ed attributi con HTML5

HTML5 introduce 13 nuovi tipi e molti altri attributi per i tag form e input.
Non tutti browser però, forniscono pieno supporto a questi ultimi.


<form id="myform">
   Name: <input name="name" required placeholder="Your name" pattern="[A-z]{7}" />
   <br/>
   Email: <input type="email" name="email" required placeholder="email@inwebson.com"/>
   <br/>
   URL: <input type="url" name="url" placeholder="Homepage URL"/>
   <br/>
   Age: <input type="number" name="age" min="18" max="99" />
   <br/>
   Description: <textarea name="desc" placeholder="Describe yourself here..."> </textarea>
   <br/>
   <input type="submit" value="Submit" />
</form>

Come è possibile notare, sono introdotti input types come email, url e number. I nuovi attributi, sono invece required, pattern(regexp), min, max e placeholder.

6. HTML5 Canvas

Molta importanza ha poi l’attributo canvas, il quale permette di renderizzare forme 2D o grafgici all’interno di pagine web, mediante l’aiuto di Javascript. Usando HTML5 Canvas, è inoltre possibile creare animazioni.
In questo esempio, viene dichiarato un semplice Canvas, e usato JavaScript per disegnare un rettangolo blu al suo interno.


<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
   var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");
   ctx.fillStyle="#0000FF";
   ctx.fillRect(0,0,150,150);
</script<

7. HTML5 Audio and Video Support

Prima, per includere audio o video all’interno di una pagina web, dovevamo includere plugin di terze parti, come ad esempio Flash, all’interno di tag object e embed.
Per poter visualizzare tali object inoltre, l’utente doveva installare particolare reader da installare come estensione del browser.


<object width="400" height="300" >
   <param name="movie" value="video.mp4" />
   ...
   <embed src="video.mp4" type="application/x-shockwave-flash" ... ></embed>
</object>

Con HTML5 viene introdotta una nuova strada. Con l’utlilizzo dei tag audio e video non dobbiamo preoccuparci di installare particolari plugin.
Come per altri tag però, non ancora tutti i browser supportano tali tag.


<audio controls="controls">
   <source src="audio.mp3" type="audio/mp3" />
   <source src="audio.ogg" type="audio/ogg" />
   Your browser does not support the <audio> tag.
</audio<
<video controls="controls" width="400" height="300">
   <source src="movie.mp4" type="audio/mp4" />
   <source src="media.ogg" type="audio/ogg" />
   Your browser does not support the <video> tag.
</audio>

8. Contenuto editabile con HTML5

HTML5 introduce l’attributo – contenteditable. Mediante il suo utilizzo, è possibile rendere il contenuto del tag editabile dall’utente via browser.
Questo attributo è molto utile in appoggio all’uso della feature di Local Storage.


<div contenteditable="true">
   Any content here will be editable...
</div>

9. HTML5 Local Storage

HTML5 ha introdotto una nuova via per memorizzare dati localmente nel browser, evitando l’uso di cookies. Queste features sono chiamate localStorage e sessionStorage.


<script>
   localStorage.variableName = "value";
   alert(localStorage.variableName);
   localStorage.removeItem("variableName");
   alert(localStorage.variableName);
</script>

localStorage memorizza i dati senza limiti di tempo, il che significa che sono resi accessibili in qualunque momento e scheda del browser(ma con condizioni che riguardano dominio e tipo di browser).


<script>
   sessionStorage.variableName = "value";
   alert(sessionStorage.variableName);
   sessionStorage.removeItem("variableName");
   alert(sessionStorage.variableName);
</script>

I dati memorizzati, sono cancellati quando la sessione è cancellata.

10. HTML5 attributo Custom Data

Have you ever use custom attributes inside a tag to store arbitrary data for the purpose of JavaScript? Or store these arbitrary data using class or rel attribute rather than creating custom attributes for the purpose of valid HTML markup.


<div id="div1" class="style" time="3" order="1"></div>
<div id="div1" class="style" time="5" order="3"></div>
<div id="div1" class="style" time="2" order="2"></div>

Possamo ora creare attributi personalizzati su tutti gli elementi HTML, mediante l’uso del prefisso data- e simultaneamente, fornendo un markup HTML.


<div id="div1" class="style" data-time="3" data-order="1"></div>
<div id="div1" class="style" data-time="5" data-order="3"></div>
<div id="div1" class="style" data-time="2" data-order="2"></div>

Extra: Fix HTML5 per Internet Explorer

Internet Explorer fino alla versione 8.0 non supporta tags HTML5. Sono stati creati comunuque dei fix da Remy Sharp e John Resig.


<!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"<</script>
<![endif]-->

Mediante queste poche righe, viene incluso uno script nell’header ed è quindi possibile fornire lo stile agli elementi HTML5.

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.