Una delle funzionalità più interessanti dell’HTML 5 è senza dubbio rappresentata dalla possibilità di inserire filmati video all’interno della pagina web.

Questo elemento cambia notevolmente il modo in cui gli utenti possono usufruire dei video su internet permettendo la visione del contenuto senza un player flash.

L’attuale supporto per questo elemento è riservato alle ultime versioni di firefox, safari e chrome ma la stessa microsoft ha annunciato il supporto per Internet explorer 9 mentre per Opera dalla versione 10 (10.5).

Per iniziare

Prima di iniziare con il codice è indispensabile ricordare che non tutti i browser supportano gli stessi contenitori e gli stessi codecs audio/video. Un file video è di fatti composto da un contenitore (mpeg4,flash video, ogg ecc), un codec audio (mpeg1,vorbis, ecc) e un codec video (mpeg4 asp, h.264, theora).
Per portare un po’ di ordine in questa situazione è utile tener presente ciò che è supportato dai browser e preparare due files. Uno con theora,vorbis e ogg e il secondo con h.624,aac e mp4.

Il primo files sarà supportato da firefox, opera e chrome il secondo da chrome, safari, iphone e android.

Per la conversione dei files di questo esempio sono stati utilizzati ffmpeg2theora ed handbrake .

L’elemento video

Per integrare nella pagina web il nostro video utilizziamo l’elemento video con chiusura esplicita.

<video></video>

Al suo interno è possibile specificare un contenuto alternativo nel caso il browser non supporti questo elemento.

<video>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Considerato che l’elemento video si comporta come l’elemento immagine necessita sempre di avere un altezza e una larghezza specifica.

<video width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per inserire il video sorgente aggiungiamo l’attributo src con la path relativa alla risorsa.

<video src="miovideo.ogv" width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per rendere visibili i controlli del video è sufficiente aggiungere l’attributo controls.

<video src="miovideo.ogv" width="640" height="480" controls>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Se desideriamo che il video venga scaricato non appena la pagina è caricata possiamo aggiungere l’attributo preload.

<video src="miovideo.ogv" width="640" height="480" preload>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

O in caso contrario specificare “none” come valore.

<video src="miovideo.ogv" width="640" height="480" preload="none">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima opzione viene offerta dall’attributo autoplay che fa partire automaticamente il filmato.

<video src="miovideo.ogv" width="640" height="480" autoplay>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima nota va dedicata al fatto che abbiamo due file da inserire e non uno, l’attributo src non è quindi sufficiente e dobbiamo utilizzare l’elemento source con l’attributo src per definire la risorsa.
In aggiunta è necessario specificare il mime del file e i codecs per far sì che il browser sappia a priori cosa andrà a caricare e se è supporta lo specifico file.

<video  width="640" height="480" autoplay>
<source src="miovideo.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="miovideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

In conclusione

Una volta applicato questo codice con i relativi percorsi ai rispettivi files si ottiene un risultato come in questo esempio.

Il video utilizzato nell’esempio è visibile su youtube ed è stato gentilmente fornito da Guido Viale Marchino che ringrazio per l’aiuto.

Una funzionalità aggiuntiva per i browser che non supportano il tag video potrebbe essere quella di aggiungere un flash player come contenuto alternativo ma richiede una verifica del supporto dell’elemento video per il client utilizzato dall’utente.

Nel prossimo articolo vedremo come verificare il supporto delle varie funzionalità dell’HTML 5 nel browser dell’utente. Torna a trovarmi su howtoweb.it per le prossime lezioni di html 5 o iscriviti agli rss per rimanere sempre aggiornato sui nuovi articoli.

Nota:

Ho notato che inizialmente il video non veniva caricato correttamente su firefox e opera, il problema era il fatto che il mime video/ogg non veniva associato da apache al file in formato .ogv

Per risolvere ho aggiunto un file .htaccess nella cartella specificando a quali formati applicare il mime presente nela pagina html.

Nel caso incontriate la stessa problematica è possibile risolvere con questa linea di codice all’interno del file .htaccess

AddType video/ogg .ogg .ogv

Una delle funzionalità più interessanti dell’HTML 5 è senza dubbio rappresentata dalla possibilità di inserire filmati video all’interno della pagina web.

Questo elemento cambia notevolmente il modo in cui gli utenti possono usufruire dei video su internet permettendo la visione del contenuto senza un player flash.

L’attuale supporto per questo elemento è riservato alle ultime versioni di firefox, safari e chrome ma la stessa microsoft ha annunciato il supporto per Internet explorer 9 mentre per Opera dalla versione 10 (10.5).

Per iniziare

Prima di iniziare con il codice è indispensabile ricordare che non tutti i browser supportano gli stessi contenitori e gli stessi codecs audio/video. Un file video è di fatti composto da un contenitore (mpeg4,flash video, ogg ecc), un codec audio (mpeg1,vorbis, ecc) e un codec video (mpeg4 asp, h.264, theora).
Per portare un po’ di ordine in questa situazione è utile tener presente ciò che è supportato dai browser e preparare due files. Uno con theora,vorbis e ogg e il secondo con h.624,aac e mp4.

Il primo files sarà supportato da firefox, opera e chrome il secondo da chrome, safari, iphone e android.

Per la conversione dei files di questo esempio sono stati utilizzati ffmpeg2theora ed handbrake .

L’elemento video

Per integrare nella pagina web il nostro video utilizziamo l’elemento video con chiusura esplicita.

<video></video>

Al suo interno è possibile specificare un contenuto alternativo nel caso il browser non supporti questo elemento.

<video>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Considerato che l’elemento video si comporta come l’elemento immagine necessita sempre di avere un altezza e una larghezza specifica.

<video width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per inserire il video sorgente aggiungiamo l’attributo src con la path relativa alla risorsa.

<video src="miovideo.ogv" width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per rendere visibili i controlli del video è sufficiente aggiungere l’attributo controls.

<video src="miovideo.ogv" width="640" height="480" controls>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Se desideriamo che il video venga scaricato non appena la pagina è caricata possiamo aggiungere l’attributo preload.

<video src="miovideo.ogv" width="640" height="480" preload>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

O in caso contrario specificare “none” come valore.

<video src="miovideo.ogv" width="640" height="480" preload="none">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima opzione viene offerta dall’attributo autoplay che fa partire automaticamente il filmato.

<video src="miovideo.ogv" width="640" height="480" autoplay>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima nota va dedicata al fatto che abbiamo due file da inserire e non uno, l’attributo src non è quindi sufficiente e dobbiamo utilizzare l’elemento source con l’attributo src per definire la risorsa.
In aggiunta è necessario specificare il mime del file e i codecs per far sì che il browser sappia a priori cosa andrà a caricare e se è supporta lo specifico file.

<video  width="640" height="480" autoplay>
<source src="miovideo.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="miovideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

In conclusione

Una volta applicato questo codice con i relativi percorsi ai rispettivi files si ottiene un risultato come in questo esempio.

Il video utilizzato nell’esempio è visibile su youtube ed è stato gentilmente fornito da Guido Viale Marchino che ringrazio per l’aiuto.

Una funzionalità aggiuntiva per i browser che non supportano il tag video potrebbe essere quella di aggiungere un flash player come contenuto alternativo ma richiede una verifica del supporto dell’elemento video per il client utilizzato dall’utente.

Nel prossimo articolo vedremo come verificare il supporto delle varie funzionalità dell’HTML 5 nel browser dell’utente. Torna a trovarmi su howtoweb.it per le prossime lezioni di html 5 o iscriviti agli rss per rimanere sempre aggiornato sui nuovi articoli.

Nota:

Ho notato che inizialmente il video non veniva caricato correttamente su firefox e opera, il problema era il fatto che il mime video/ogg non veniva associato da apache al file in formato .ogv

Per risolvere ho aggiunto un file .htaccess nella cartella specificando a quali formati applicare il mime presente nela pagina html.

Nel caso incontriate la stessa problematica è possibile risolvere con questa linea di codice all’interno del file .htaccess

AddType video/ogg .ogg .ogv

Nel precedente articolo abbiamo visto come utilizzare gli elementi semantici dell’HTML 5 nella nostra pagina web.

Oggi approfondiremo gli aspetti relativi alla semantica di questi tag.

Un principale vantaggio derivante dall’utilizzo di questi elementi è la standarizzazione degli elementi, ovvero a differenza dell’HTML 4.01 abbiamo una serie di elementi specifici da utilizzare per diverso scopo.

Questo di fatto evita la definizione di div con classi ed id che risultano generici e variano a seconda delle abitudini di chi sviluppa la pagina.

Oltre a questo l’HTML 5 presenta un nuovo algoritmo per la definizione dell’outline del documento che modifica il normale modo di definire le intestazioni nel file html.

Facciamo un passo indietro, nell’HTML 4.01 l’unico modo per definire l’outline del documento è quello di utilizzare gli elementi h1/h6 con il rispettivo valore semantico.

Per esempio:

<h1>Titolo del sito</h1>
 <h2>sottotitolo del sito</h2>

<h3>Titolo del post</h3>
 <h4>Sottotitolo del post</h4>

<h3>Titolo del post</h3>
 <h4>Sottotitolo del post</h4>

Notate come h1 sia univoco nella pagina e rappresenti il titolo del sito, il sottotitolo del sito è definito con <h2>, mentre h3 e h4 rappresentano rispettivamente titolo e sottotitolo di una sezione/contenuto della pagina.

In HTML 5 possiamo modificare questa situazione come segue:

<header>
 <hgroup>
 <h1>Titolo del sito</h1>
 <h2>sottotitolo del sito</h2>
 </hgroup>
 </header>

<article>
 <hgroup>
 <h1>Titolo del post</h1>
 <h2>Sottotitolo del post</h2>
 </hgroup>
 </article>

<article>
 <hgroup>
 <h1>Titolo del post</h1>
 <h2>Sottotitolo del post</h2>
 </hgroup>
 </article>

Analizziamo nel dettaglio le differenze.

L’elemento h1 si ripete

Nell’HTML 5 l’utilizzo dell’elemento <article> definisce una sezione indipendente della pagina dove appunto posso riutilizzare l’elemento h1 dove avrà valore di titolo della sezione/contenuto e non della pagina.

Utilizzo di hgroup

L’utilizzo di hgroup ha lo scopo di raggruppare insieme intestazioni diverse, nel caso del primo elemento all’interno dell’header h1 avrà valore di titolo e h2 di sottotitolo, questo permette di utilizzare un’intestazione con valore associato ad altre intestazioni presenti in quel contesto senza che il significato venga mistificato da elementi uguali presenti sulla pagina.

Come abbiamo visto l’HTML 5 tratta diversamente la semantica degli elementi da altri linguaggi di markup ma offre indubbiamente una serie di vantaggi che rendono il codice molto più modulare e semantico.

Nel prossimo articolo vedremo come verificare il supporto delle funzionalità più avanzate dell’HTML5 sul browser dell’utente.

Passate a trovarmi come sempre su howtoweb.it o abbonatevi ai feed rss per rimanere aggiornati sugli ultimi articoli.

Alla prossima

Nella lezione precedente abbiamo visto come impostare il nostro file in HTML 5 definendo un doctype shorted, un corretto charset e gestendo css e javascript senza enunciazione del mime.

Oggi vedremo invece alcuni tag che utilizzeremo per definire il layout della nostra pagina web.

Prima di procedere, dobbiamo però risolvere un dubbio cruciale.

I nuovi elementi dell’HTML 5 sono supportati dai browser attuali?

La maggior parte dei browser non incontriamo problemi nell’utilizzo di questi tag, normalmente il browser individua l’elemento lo aggiunge al DOM della pagina e gli attribuisce dei valori di default in base alle informazioni in suo possesso e nel caso possiamo sovrascrivere stili customizzati con un normale css.

La vera problematica è Internet Explorer che fino alla versione attuale (8) rappresenta l’elemento sconosciuto nel DOM come un nodo vuoto, rendendo impossibile definire un qualunque stile per l’elemento.

La soluzione per Internet Explorer

Prima di disperarci e tornare ad insultare per l’ennesima volta il browser di mamma Microsoft sappiate che esiste una soluzione molto semplice al problema.

Possiamo infatti pensare di creare un elemento sconosciuto a Internet Explorer prima della creazione del DOM.

Senza aggiungere l’elemento a mano nel codice possiamo utilizzare javascript per creare a priori l’elemento e permetter così di stilizzarlo con i css.

<script>document.createElement("header");</script>

Per fare in modo che il workaround funzioni, è necessario mantenere lo script nell’head della pagina, una buona norma può essere quella di inserire lo script in un commento condizionale per IE.

<!--[if IE]>
<script>document.createElement("header");</script>
<![endif]-->

Lo script creerà così un elemento <header> prima della creazione del DOM solo per IE, permettendo di stilizzare tale elemento con i css.

Una scelta migliore, HTML5 enabling script

Considerato che i nuovi elementi dell’HTML 5 sono numerosi potremmo pensare di aggiungerli a mano ma una soluzione sicuramente più comoda e più sicura è rappresentata da questo script javascript di Remy Sharp che oltre a velocizzare la realizzazione considera anche problematiche più peculiari come i css per la stampa dove i javascript non vengono eseguiti.

Al markup!

Ora che siamo certi di un funzionamento crossbrowser possiamo iniziare ad aggiungere qualche nuovo tag al nostro file.

Header

L’elemento <header> ha come scopo quello di racchiudere una porzione di codice che avrà ruolo di testata della pagina.

Per esempio

<header>
<!-- il logo ed eventuale intestazione al sito -->
</header>

Hgroup

L’elemento <hgroup> racchiude una porzione di codice composta da intestazioni

<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>

Article

L’elemento <article> racchiude una porzione di codice semanticamente indipendente dal resto della pagina e sì possiamo utilizzarla al posto del solito <div> di wordpress

<article>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>
</article>

Time

L’elemento <time> rappresenta una data di pubblicazione.

<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>

L’attributo datetime accetta sia date che in aggiunta l’ora in formato leggibile per la macchina

L’attributo pubdate determina a scelta la data di pubblicazione di un contenuto specifico (se all’interno di <article>) o la data di pubblicazione della pagina se lasciato all’esterno.

Nav

L’elemento <nav> specifica una porzione di codice destinato ala navigazione per esempio la lista di un menu.

<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>

Aside

L’elemento <aside> viene utilizzato per definire una porzione di codice destinata correlata al contenuto ma comunque separata come per esempio una sidebar

Footer

L’elemento <footer> definisce una porzione di codice che rappresenta di fatto il piede della pagina o del contenuto specifico.

<footer>Make with love and HTML5!</footer>

un esempio completo della pagina è il seguente.

<!doctype html>
<html>
<head>
<title>titolo della pagina</title>
<meta charset=utf-8>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo del sito</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<article>
<header>
<hgroup>
<h1>Titolo dell'articolo</h1>
<h2>Sottotitolo dell'articolo</h2>
</hgroup>
</header>
<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>
<p>Testo di prova</p>
</article>
<aside>contenuto relazionato ma indipendente</aside>
<footer>Make with love and HTML 5</footer>
</body>
</html>

Un’ultima nota sui tag visti in questo articolo, la loro funzione è altamente semantica ed è quindi utile sapere come utilizzarli correttamente nel contesto specifico.
Nel prossimo articolo parleremo della semantica nell’HTML 5 e dei cambiamenti che comporta.

Per oggi è tutto, tornate a trovarmi oppure abonatevi agli RSS per rimane aggornati sulle ultime novità.

Alla prossima!