I nuovi elementi HTML5

html5audio

PARTE TERZA: A COSA SERVONO I NUOVI TAG HTML5

Terza ed ultima parte.

Come detto negli articoli precedenti di questa miniserie dedicata all’html5, questo linguaggio ha delle potenzialità incredibili.

Con l’html5 si possono fare cose mai pensate prima. Andiamo a vedere quali sono e a cosa servono i suoi nuovi tag.

CANVAS

HTML5_canvas_game

videogame realizzato utilizzato il tag canvas

L’elemento <canvas> viene utilizzato per comporre degli elementi grafici. Ad esempio è possibile costruire delle forme e colorarle attraverso l’uso di codice Javascript.

Questa un’applicazione pratica in cui viene disegnato un quadrato rosso:

<canvas id=”myCanvas”>

</canvas>

<script>
var c=document.getElementById(‘myCanvas’);
var ctx=c.getContext(‘2d’);
ctx.fillStyle=’#FF0000′;
ctx.fillRect(0,0,80,80);
</script>

Guardate voi stessi il risultato cliccando qui

Il canvas supporta gli attributi height (altezza) e width (larghezza) per definire le dimensioni dell’area disegnabile.

DATALIST

Non so se avete presente quei form con dei campi in cui, cliccandoci sopra, vi appare un elenco a discesa di opzioni selezionabili. Ecco, quell’elenco è una “lista di dati”. Il tag <datalist> è stato implementato per offrire all’utente il completamento automatico della parola mentre la si sta digitando all’interno del campo. Utilizzando il tag <datalist> fornirete all’utente un’esperienza di compilazione del vostro form di richiesta davvero piacevole.

<datalist> non è supportato attualmente né da Safari né da versioni antecedenti ad Internet Explorer 9.

Questo il codice

<form action=”demo_form.asp” method=”get”>
<input list=”browsers” name=”browser”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
<input type=”submit”>
</form>

Cliccate qui e guardate il risultato!

DETAILS

Il tag <details> serve per inserire dei dettagli nel vostro sito. Genericamente si usa per il footer dove si mettono l’autore del sito, oppure informazioni di copyright, ecc… Attualmente è supportato solo dai Browser Opera, Safari 6 e Chrome. Ecco un esempio di come si implementa il tag <details>

<details>
<summary>Copyright 2014.</summary>
<p> – by flavioweb. All Rights Reserved.</p>

</details>

 EMBED

Il tag <embed> è una risorsa molto interessante perché permette di inserire elementi esterni animati o interattivi. E’ interessante secondo me, soprattutto perché permette di inserire contenuti in flash all’interno delle nostre pagine senza appesantirle e senza avere il problema della scarsa indicizzabilità tipica delle pagine in flash. Vi pare poco?

Ecco un esempio il cui risultato potrete vederlo qui

<embed src=”helloworld.swf”>

 FIGURE

Il tag <figure > è un contenitore destinato a contenere una foto all’interno della nostra pagina e si implementa in questo modo

<figure>
  <img src=“miaimmagine.jpg” alt=“la mia immagine” title=”titolo immagine” >
</figure>

FIGCAPTION

Il tag <figcaption> si utilizza a supporto del tag <figure> e serve per scrivere le didascalie delle vostre immagini.

<figure>
<img src=”miaimmagine.jpg” alt=”la mia immagine” title=”titolo immagine”>
<figcaption>Figura1 – questa è la didascalia della mia immagine</figcaption>
</figure>

MAIN

E’ un tag destinato ad ospitare il contenuto principale della pagina. Per essere utilizzato correttamente, il testo contenuto nel main deve essere unico e non la copia ripetuta di altri testi, link o informazioni presenti in altre aree della pagina  (per esempio nel footer o nelle barre laterali). Ogni pagina web può contenere un solo elemento <main> e non può essere “discendente” di elementi <article>, <aside>, <footer>, <header> o <nav>. Attualmente il tag <main> è supportato da tutti i browser tranne (oh che sorpresa!) Internet Explorer. 

Esempio di utilizzo del tag <main>

<main>
<h1>Titolo Principale Argomento Pagina</h1>
<p>Questo è il sottotitolo.</p>

<article>

<h2>Titolo Articolo</h2>
<p>bla bla bla bla bla … contenuto dell’articolo …….</p>
</article>

<article>
<h2>Titolo Articolo 2</h2>
<p>bla bla bla bla bla … contenuto dell’articolo 2…….</p>
</article>
</main>

Come potete vedere il <main> contiene il tag <article> ed è quest’ultimo che ospita l’articolo vero e proprio.

MARK

Avete mai avuto bisogno di evidenziare un testo? Con il tag <mark> potete farlo 🙂 .
Anche se non importante come i precedenti ho voluto inserire anche questo tag nell’articolo perché lo ritengo davvero simpatico ed è supportato da tutti i browser. Implementarlo è facilissimo:

<mark>testo da evidenziare </mark>

 AUDIO e SOURCE

html5audioUn altro bel tag è <audio>. Come lascia intendere il nome si tratta di un tag che ha a che fare con i suoni. Viene utilizzato per regolare riprodurre delle tracce audio, stopparle, metterle in pausa o regolarne il volume, tramite i suoi attributi. Ecco gli attributi del tag <audio>:  <autoplay>, <controls>, <muted>, <loop>,<preload>.

Esempio dell’uso del tag <audio>

<audio controls>
<source src=”horse.mp3″ type=”audio/mpeg”>
</audio>

In questo esempio viene inserito un file audio tramite l’attributo src e il controllo della riproduzione e del volume tramite l’attributo controls. Guarda come funziona!

Come potete vedere nell’esempio, per richiamare il file audio viene utilizzato un altro nuovo elemento html5: il <source> abbinato all’attributo “src”. I file audio utilizzabili sono .mp3, .ogg e .wav

I tag <audio> e <source> sono supportati da tutti i browser.

VIDEO

Allo stesso modo del tag <audio> per i file audio, in HTML5 è stato introdotto il tag <video> per gestire la riproduzione di filmati.

video-html5Supporta 3 formati video ma nessuno dei tre viene supportato da tutti i browser. In generale è consigliabile utilizzare il formato video .mp4 che è quello più “cross-browser”. Gli attributi del tag <audio> sono utilizzabili anche per il tag <video> ma per quest’ultimo si aggiungono il width e l’height per determinare la grandezza del riproduttore di filmati ed il “poster” con cui si stabilisce l’anteprima da mostrare quando il filmato all’inizio è in attesa che si clicchi sul tasto play.

Ecco un esempio di implementazione del codice con il tag <video>

<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
</video>

Guardate l’effetto che fa

 CONCLUSIONI

Siamo giunti al termine di questa miniguida di 3 articoli sul codice html5  andando a conoscere come strutturare una pagina con i tag html5 e come implementare i nostri contenuti con i nuovi e potenti elementi messi a disposizione da questo linguaggio di programmazione web.

Per scelta e per non tediarvi troppo, ho scelto di inserire solo gli elementi che a mio parere sono più utilizzabili di frequente sui vostri siti internet. In realtà l’HTML5 ne ha introdotti anche altri, ma parecchi di questi ancora non sono supportati da tutti i browser o non hanno un utilizzo pratico rilevante per la maggior parte dei siti.

Il mio consiglio è quello di utilizzare l’HTML5 per creare i vostri siti e di integrarlo mediante l’uso dei microdati in modo di ottenere il massimo della leggibilità del vostro codice e dei vostri contenuti agli occhi dei motori di ricerca e facilitarvi la vita nell’attività SEO.

verso l'html5

Ti manca la lezione precedente? ——-> Elementi Strutturali HTML5

About the author

Flavio

Mi trovo nel campo del web dal 2006. Nel tempo mi sono specializzato soprattutto nell'indicizzazione,  nel posizionamento di siti internet e nell'utilizzo dei social media principali a fini di marketing.