Laboratorio di Tecnologie Web
HTML: Altri elementi
Dott. Stefano Burigat
www.dimi.uniud.it/burigat
Oltre a quelli chhe abbiamo visto in precedenza, l'HTML5
supporta diversi altri elementi che vengono utilizzati
principalmente per inserire all'interno delle pagine web
contenuti addizionali come audio, video, script, codice
CSS, meta-informazioni, etc. In questo capitolo, ne
vedremo alcuni dei più comuni.
iframe
L'elemento contenitore <iframe> consente di inserire un
documento html o un'altra risorsa all'interno di una pagina
web. Il risultato viene tipicamente mostrato come una
finestra all'interno di una pagina, con delle scrollbar se lo
spazio necessario alla risorsa è più lungo dello spazio a
disposizione, determinato dalle dimensioni della finestra
specificate tramite gli attributi “width” e “height”.
L'attributo “src” viene utilizzato per specificare l'indirizzo
della risorsa che si vuole visualizzare all'interno della
finestra. Se un browser non supporta l'elemento <iframe>,
viene visualizzato solo il contenuto presente al suo interno
(non la risorsa specificata tramite src).
<!DOCTYPE html>
<html>
<head>
<title>Uso di iframe</title>
</head>
<body>
<h1>Esempio d'uso dell'elemento iframe</h1>
<p>Questo testo fa parte del documento originale</p>
<iframe src="teoria/html5.html" width="320"
height="200">
<p>Questo testo viene visualizzato se il browser non
supporta iframe.</p>
</iframe>
<p>Anche questo testo fa parte del documento
originale</p>
</body>
</html>
Al giorno d'oggi, l'elemento <iframe> può essere utilizzato
per mantenere separato il contenuto proveniente da sorgenti
esterne (ad esempio, pubblicità o widget di terze parti) in
modo che non ci sia interferenza con gli script ed il
contenuto principale delle pagine.
Video e audio
Fino ad HTML5, i browser web non avevano alcun
meccanismo nativo per gestire video e audio e dovevano
affidarsi a plug-in esterni, in particolare a Flash che di fatto
ha rappresentato lo standard per la gestione di contenuti
multimediali sul web.
HTML5 ha introdotto due nuovi elementi, <video> e
<audio>, che consentono l'inserimento di contenuti video e
audio senza necessità di plug-in. La contemporanea scelta
di Apple di non supportare Flash sulle sue piattaforme
mobili, di Adobe di non continuare lo sviluppo della
versione mobile di Flash e di Microsoft di non supportare il
media player Silverlight fanno pensare che il futuro del
multimedia su web sia rappresentato da HTML5.
Gli elementi <video> e <audio> sono ben supportati dai
browser (eccetto IE8 e precedenti, e Opera Mini) ma il
supporto dei diversi formati video e audio che possono
essere utilizzati non è uniforme. Nella scelta dei formati da
utilizzare per il video e l'audio vanno considerati due
aspetti, il codec cioè il metodo con cui l'informazione viene
codificata/decodificata e il formato contenitore utilizzato
per raggruppare i dati multimediali e i metadati che
descrivono i dati. Le opzioni di formato più comuni per i
video sul web sono le seguenti tre:
• Contenitore OGG + Codec video Theora + Codec
audio Vorbis
• Contenitore MPEG-4 + Codec video H.264 + Codec
audio AAC
• Contenitore WebM + Codec video VP8 + Codec audio
Vorbis
Non tutti i browser supportano tutte queste combinazioni
per cui è necessario creare versioni differenti dei video nei
diversi formati.
Anche per quanto riguarda l'audio ci sono diverse opzioni:
• MP3 (è sia codec che contenitore), richiede pagamento
di licenza da parte delle aziende software/hardware che
vogliono utilizzarlo
• WAV (è sia codec che contenitore)
• Contenitore OGG + Codec audio Vorbis (estensione
.ogg o .oga)
• Contenitore MPEG-4 + Codec audio AAC
(estensione .m4a)
• Contenitore WebM + Codec audio Vorbis
(estensione .webm)
Aggiungere video ad una pagina
Se si stanno progettando pagine web per uno specifico
browser (quindi sapendo esattamente il formato video
supportato) allora è possibile aggiungere un video
utilizzando l'elemento <video>, specificando il file video
tramite l'attributo “src”. L'esempio seguente inserisce un
video in formato webm.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<h1>Esempio di video embedded HTML5</h1>
<video src="video/bunny.webm" width="640" height="360"
poster="imgs/rodents.png" controls autoplay>Il browser
utilizzato non è in grado di riprodurre questo video.</video>
</body>
</html>
Gli attributi “width” e “height” servono a specificare le
dimensioni del box in cui verrà inserito il media player per
la visualizzazione del video. Il video verrà scalato per
adattarsi a tali dimensioni (per cui è preferibile inserire
come dimensioni le stesse del video da mostrare).
L'attributo “poster” serve a specificare un'immagine che
verrà mostrata al posto del video in fase di caricamento o se
il video non è presente. L'attributo “controls” mostra i
controlli per la gestione del video. L'attributo “autoplay”
permette di iniziare automaticamente la riproduzione del
video non appena ne è stata scaricata una porzione
sufficiente (in generale, è preferibile lasciare che sia l'utente
a decidere quando far partire il video). L'attributo “loop”
permette di mettere il video in riproduzione continua.
L'attributo “muted” permette di riprodurre il video senza
audio. L'attributo “preload” lascia decidere al browser
quando iniziare lo scaricamento dei dati video
(preload=“auto”) oppure fa iniziare lo scaricamento nel
momento in cui l'utente preme il pulsante play
(preload=“none”).
Poichè browser diversi supportano formati diversi, una
soluzione come la precedente non è sufficientemente
generale. Per ovviare a tale problema, è possibile utilizzare
l'elemento <source> all'interno dell'elemento <video>. Ad
esempio, se si vogliono supportare tutti e tre i formati
riportati in precedenza, è necessario inserire tre elementi
<source>, uno per ogni formato, come nell'esempio
seguente. Il browser esaminerà la lista fino a trovare un
formato supportato da poter utilizzare.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<h1>Esempio di video embedded HTML5</h1>
<video width="640" height="360"
poster="imgs/rodents.png" controls preload="auto">
<source src="video/bunny.mp4" type='video/mp4;
codecs="avc1.424E01E, mp4a.40.2"'/>
<source src="video/bunny.webm" type='video/webm;
codecs="vp8, vorbis"'/>
<source src="video/bunny.ogv" type='video/ogg;
codecs="theora, vorbis"'/>
<div>Il browser utilizzato non è compatibile con
questo video.</div>
</video>
</body>
</html>
L'attributo “src” dell'elemento <source> specifica la
posizione del video da riprodurre mentre l'attributo “type”
serve ad indicare il tipo di file e (opzionalmente) il codec
video/audio utilizzato. Notate che il valore dell'attributo
“type” è tra virgolette singole anziché doppie in quanto le
doppie virgolette sono necessarie per racchiudere i codec.
L'ordine degli elementi <source> non è importante ma per
ragioni di compatibilità è preferibile specificare per primo il
formato mp4.
Se si vuole rendere disponibile un video anche agli utenti il
cui browser non supporta HTML5, è necessario includere
un player Flash nella pagina oppure utilizzare un servizio
come YouTube o Vimeo che consente di pubblicare un
video online e renderlo disponibile su una pagina web
tramite del codice fornito dal servizio stesso. Il codice
seguente aggiunge all'esempio precedente un player Flash e
dei link per il download del video, garantendo la massima
compatibilità possibile.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<h1>Esempio di video embedded HTML5 con fallback Flash e
link per il download</h1>
<video width="640" height="360"
poster="imgs/rodents.png" controls preload="auto">
<source src="video/bunny.mp4" type='video/mp4;
codecs="avc1.424E01E, mp4a.40.2"'/>
<source src="video/bunny.webm" type='video/webm;
codecs="vp8, vorbis"'/>
<source src="video/bunny.ogv" type='video/ogg;
codecs="theora, vorbis"'/>
<object type="application/x-shockwave-flash"
data="flash/flowplayer-3.2.18.swf" width="640" height="360">
<param name="movie" value="flash/flowplayer3.2.18.swf" />
<param name="flashVars" value="config={'playlist':
['imgs/rodents.png',
{'url':'video/bunny.mp4','autoPlay':false}]}" />
<img alt="Big Buck Bunny" src="imgs/rodents.png"
width="640" height="360" title="Il browser utilizzato non è in
grado di riprodurre questo video" />
</object>
</video>
<p>Download del video:</p>
<ul>
<li><a href="video/bunny.mp4">Formato MPEG-4</a></li>
<li><a href="video/bunny.ogv">Formato Ogg
Theora</a></li>
</ul>
</body>
</html>
Per inserire un player Flash che permetta di riprodurre
video per i browser dotati di plug-in Flash, è necessario
utilizzare l'elemento <object>. Tale elemento può essere
utilizzato in generale per inserire una risorsa esterna
all'interno di una pagina web. L'attributo “type” serve a
specificare il tipo di contenuto e l'attributo “data” la risorsa
che si vuole inserire, nell'esempio precedente un player
Flash chiamato flowplayer. Gli attributi “width” ed “height”
specificano le dimensioni dello spazio dedicato alla
visualizzazione della risorsa. All'interno dell'elemento
<object>, alcuni elementi <param> specificano i parametri
necessari alla visualizzazione della risorsa (che dipendono
dal tipo di risorsa e sono inseriti come coppia chiave/valore
dove la chiave è rappresentata dall'attributo “name” ed il
valore dall'attributo “value”). Nel caso in esame, i parametri
servono in particolare a specificare il file video da
riprodurre tramite il player Flash. All'interno di <object> è
stato inserito anche un elemento <img> che viene
visualizzato nel caso in cui nemmeno il player Flash sia in
grado di riprodurre il video. Infine, all'esterno dell'elemento
<video> sono stati inseriti alcuni link, in formato diverso, al
file video in caso nessuna delle soluzioni precedenti abbia
successo.
Aggiungere audio ad una pagina
Per aggiungere audio ad una pagina, si può utilizzare
l'elemento <audio> in modo simile a quanto fatto per
<video>. Gli attributi utilizzabili sono gli stessi di <video>
tranne “width”, “height” e “poster” che non sono presenti.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<h1>Esempio di audio embedded HTML5 con link per il
download</h1>
<audio id="soundtrack" controls preload="auto">
<source src="audio/soundtrack.mp3" type="audio/mp3">
<source src="audio/soundtrack.ogg" type="audio/ogg">
<source src="audio/soundtrack.webm"
type="audio/webm">
</audio>
<p>Download della canzone:</p>
<ul>
<li><a href="audio/soundtrack.mp3">MP3</a></li>
<li><a href="audio/soundtrack.ogg">Ogg
Vorbis</a></li>
</ul>
</body>
</html>
Canvas
Un componente estremamente interessante di HTML5 è la
Canvas API, un insieme di funzioni JavaScript che
permettono di disegnare sullo schermo in un'area definita
tramite l'elemento <canvas>. Tramite questa API è possibile
disegnare in modo dinamico sullo schermo anche in base
alle azioni degli utenti, rendendo quindi possibile creare
animazioni, giochi o intere applicazioni interattive senza la
necessità di plug-in proprietari.
Dal punto di vista dell'HTML, per poter utilizzare la
Canvas API è innanzitutto necessario aggiungere ad una
pagina web l'elemento contenitore <canvas>, specificando
le dimensioni dell'area in cui si vuole disegnare tramite gli
attributi “width” ed “height” e l'identificatore dell'elemento
tramite attributo “id”. Successivamente, è necessario
inserire il codice JavaScript che effettua le operazioni di
disegno. Nell'esempio seguente il codice JavaScript viene
inserito direttamente all'interno dell'elemento <head> della
pagina web tramite l'elemento <script>. L'esempio consiste
nel semplice disegno di una riga colorata. Un esame
approfondito della Canvas API è al di fuori dello scopo di
questo materiale.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded,
false);
function eventWindowLoaded() {
var canvas =
document.getElementById('prova_canvas');
var context = canvas.getContext('2d');
context.strokeRect(0,0,400,400);
context.beginPath();
context.moveTo(50, 50);
context.lineTo(350, 350);
context.strokeStyle = "red";
context.stroke();
}
</script>
</head>
<body>
<h1>Esempio di utilizzo della Canvas API</h1>
<canvas id="prova_canvas" width="400" height="400">
<p>Il browser utilizzato non supporta la Canvas API
</canvas>
</body>
</html>
<meta>
L'elemento <meta> viene utilizzato per aggiungere ad una
pagina web informazioni relative alla pagina stessa (che
non vengono visualizzate all'utente). E' uno degli elementi
che vengono inseriti all'interno dell'elemento <head> e può
essercene più di una istanza contemporaneamente. Viene
comunemente utilizzato per chiarire il tipo di informzione
presente sulla pagina, la codifica di carattere utilizzata,
informazioni sull'autore, etc.
Ne abbiamo visto un esempio di utilizzo quando abbiamo
trattato i link, per gestire il redirect automatico ad una
nuova pagina.
<meta http-equiv="refresh" content="10; URL=newpage.html" />
In questo caso sono stati utilizzati gli attributi “http-equiv”
e “content” che vengono sempre utilizzati in combinazione.
L'attributo “content” può anche specificare il valore di una
proprietà definita tramite l'attributo “name” come
nell'esempio seguente.
<meta name="author" content="Nome Autore" />
I seguenti due esempi definiscono la codifica di carattere
utilizzata dal documento (il secondo esempio integra anche
informazione sul tipo di documento). La codifica di
carattere specifica come il documento deve essere
convertito in byte quando viene salvato come file e
viceversa. Attualmente, la codifica di carattere più utilizzata
è l'UTF8 che consente anche di rappresentare caratteri in
lingue diverse dall'inglese. Affinchè venga utilizzata la
codifica corretta è comunque necessario verificare che
l'editor usato per scrivere le pagine web salvi i documenti
nel formato desiderato.
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
