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/flowplayer- 3.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">