Includere elementi multimediali e script

Premessa: il tag object

Se volete inserire file multimediali (audio e video), oppure effetti grafici particolari scritti in qualche linguaggio di programmazione, ricordatevi sempre di fare attenzione al peso dei file che state inserendo. Siamo infatti sul web e dunque tutti i file, in un modo o nell'altro, dovranno essere scaricati dal visitatore del vostro sito per essere correttamente visualizzati.

Bisogna anche considerare che - sebbene la banda a disposizione del pubblico si stia allargando grazie all'adsl e alle fibre ottiche - non tutte le zone sono "coperte" da questa tecnologia, e la maggioranza dei visitatori naviga ancora con modem analogici da 56 Kb.
In ogni caso - banda larga o no - inserire ad esempio un file mp3 da 3 Mb come musica di sottofondo sarebbe esagerato anche per una connessione adsl.

Quindi: attenzione al peso dei file che inserite!. Per approfondimenti vi consigliamo la lettura della lezione dedicata alla leggerezza dei siti Web della nostra guida all'Usabilità.

Nelle lezioni successive ci occuperemo di come includere in pagine Web elementi multimediali o file di scripting. Per chi fosse interessato alle inclusioni di file HTML in file HTML rimandiamo all'articolo «Come includere codice esterno nelle pagine web». Per chi volesse invece includere del codice XML in pagine HTML vi consigliamo la lettura dell'articolo: «Data binding client-side con XML Data Islands».

La maggior parte dei file multimediali che vedremo nel corso delle lezioni si inserisce all'interno delle pagine con il tag <object>, che è il tag corretto - secondo le indicazioni del W3C - per inserire elementi multimediali, tanto che nelle specifiche dell'XHTML 2 (l'evoluzione dell'HTML) persino le immagini devono essere inserite tramite questo tag.

Un altro tag che spesso viene utilizzato per la multimedialità è <embed>: si tratta di un elemento che non è nelle specifiche del W3C, ma che è stato a lungo utilizzato, perché supportato sia da Internet Explorer, sia da Netscape Navigator, a differenza di <object>, che ha dei problemi di compatibilità.

Vediamo i principali attributi di <object>:

All'interno del tag <object> è possibile specificare una sintassi alternativa per i browser che non leggono questo tag. Inoltre all'interno del tag è possibile specificare eventuali parametri necessari all'esecuzione dell'oggetto.

In molti casi il tag object si occupa di attivare un "plug-in", cioè un componente aggiuntivo che si integra nel browser, per lo più fornito dal produttore del software multimediale (es. Flash), in grado di leggere il file multimediale (qualsiasi esso sia).

Vedremo nelle lezioni seguenti quali sintassi specifiche utilizzare per includere questi oggetti nelle vostre pagine Web.

Includere un file Audio

Per impostare un suono di sottofondo si può utilizzare il tag

<bgsound>

Basta quindi inserire il riferimento del file audio (es. wav) e lasciare che il suono venga riprodotto:

• una volta:
•  loop="1"
• oppure omettendo l'attributo
• loop
• due volte o anche di più:
• loop="2"
• basta indicare il numero di ripetizioni desiderato
• infinite volte:
• loop="infinite"

In realtà questo non è il modo migliore, né il più efficace, per inserire un file audio, perché obsoleto e compatibile soltanto con Internet Explorer.

Un'altro modo obsoleto, ma crossbrowser prevede l'uso di <embed>.

Un esempio in questa pagina.

Se invece vogliamo seguire le specifiche dell'HTML 4.01, utilizziamo il tag <object>.

tuttavia, affinché tutto funzioni perfettamente, spesso conviene indicare il tipo di plugin da utilizzare grazie all'attributo

 classid.

Vediamo il codice necessario ad aprire la barra del lettore multimediale RealOne (se RealOne non è presente, l'utente verrà avvisato). Notare che all'interno del tag

 <object>

vengono espressi i parametri che indicano come devono essere visualizzati i controlli di RealOne, e la sintassi alternativa per browser obsoleti (indicata tramite

 <embed>):

Quando inserite dei file audio, fate sempre caso ad essere i proprietari dei diritti d'autore, o ad avere l'autorizzazione a utilizzare la musica (o il suono) in questione.

Ricordiamo anche che l'uso di suoni o musica di sottofondo se utilizzata in modo eccessivo può compromettere l'usabilità del sito.

Includere un file Video

Come per l'audio anche per i video si dovrebbe utilizzare il tag <object>. La sintassi è identica a quella dei file audio:

<object data="filmato.mov" type="video/quicktime" width="164" height="140">
 <embed src="filmato.mov" type="video/quicktime" width="164" height="140">
</object>
 

come abbiamo visto per i filmati audio, è possibile utilizzare l'attributo "classid" con gli appropriati parametri per aprire barre di visualizzazione e controlli vari ed eventuali.

Data la grande dimensione che questi file possono raggiungere, per i filmati (ma anche per l'audio) è possibile utilizzare lo streaming attraverso il web. Si tratta di un procedimento che consente di scaricare il filmato gradualmente dal server, a mano a mano che lo si sta vedendo e in modo del tutto trasparente all'utente.

Per maggiori informazioni sullo streaming video, vi rimandiamo alla sezione « Video Player Flash» di IsolaJava.

Finora abbiamo visto come inserire singoli filmati audio e video all'interno di una pagina web, se invece volete sincronizzare diversi filmati audio e video, dovete utilizzare un linguaggio apposito che prende il nome di « SMIL ».

Includere un file Flash

Flash è un software molto potente sviluppato da Macromedia a partire dal 1996. Si tratta di un programma che utilizza grafica vettoriale: significa che le immagini non vengono descritte attraverso mappe di bit (bitmap), ma attraverso formule matematiche. Per questo motivo i filmati in Flash pesano molto meno della grafica tradizionale, e per lo stesso motivo i colori sono "piatti".

Inoltre, proprio perché le immagini sono espresse da formule matematiche, non c'è il problema dell'effetto "sgranato" dovuto al ridimensionamento proprio della grafica tradizionale, perché i filmati in flash si adattano automaticamente alle dimensioni indicate nel codice HTML (o se le dimensioni sono espresse in percentuale, si adattano alla pagina).

Ovviamente il fatto che le immagini siano espresse grazie a delle formule è una caratteristica di questo software che non tocca minimamente il webmaster, il quale - quando sviluppa filmati in flash - si ritrova ad usare un "normale" software visuale.

I file sorgenti dei filmati (quelli su cui gli sviluppatori lavorano) hanno estensione .fla, i file compilati (quello che si possono vedere in giro per il web) hanno invece estensione .swf (cioè "Shockwave Flash"): è quest'ultimo tipo di file che dovremo inserire dunque nelle nostre pagine HTML.

Per inserire un filmato in flash in una pagina HTML è sufficiente utilizzare la seguente sintassi:

<object type="application/x-shockwave-flash" data="http://www.isolajava.com/guide/esempi/guida_html/multimedia/flash/bottone_in-out.swf" width="600" height="450">
<param name="movie" value="http://www.isolajava.com/guide/esempi/guida_html/multimedia/flash/bottone_in-out.swf"/>
</object>

Maggiori informazioni su Flash si possono trovare sul nostro sito dedicato a Flash.

Includere un file Java

Java è un linguaggio di programmazione rilasciato dalla Sun nel 1995, ma in corso di sviluppo sin dal 1991. Il suo successo nel web è dovuto alle famose "applet" ("piccole applicazioni") che permettono di aggiungere interattività alle pagine web.

Oggi si tende a non usare Java per le applet, perché la sua esecuzione avviene tramite un software chiamato "virtual machine", e ogni volta che tale software deve essere richiamato da una pagina web, l'esecuzione della pagina stessa risulta rallentata. In più c'è da sottolineare come Internet Explorer il browser maggiormente diffuso mentre scriviamo, non viene più distribuito con la Virtual Machine Java inclusa dalla versione 6. Dunque chi utilizzerà questo browser non visualizzerà le applet se non ha esplicitamente chiesto l'installazione della componente dal sito Windows Update.

Tutto quello che si può fare con le applet Java oggi lo si può fare anche con Flash o JavaScript, dunque in molti casi si preferisce utilizzare questi linguaggi.

Java rimane una valida alternativa per applicazioni web complesse (ad esempio i dati e i grafici delle quotazioni finanziarie, che devono essere aggiornati in tempo reale), o anche per applicazioni come la chat (i client in Java sono tuttora insuperati).

I file con il codice sorgente hanno estensione ".java", i file compilati (da inserire nelle nostre pagine web) hanno invece estensione ".class".

La sintassi per inserire un applet java è:

<applet code="lake" codebase="http://www.isolajava.com/guide/esempi/guida_html/multimedia/java/" width="263" height="130">
 
 <param name="image" value="http://www.isolajava.com/guide/esempi/guida_html/multimedia/java/logo.gif">

 <!--html alternativo -->
 <img src="http://www.isolajava.com/guide/esempi/guida_html/multimedia/java/logo.gif" width="263" height="65"
alt="html.it">  <!-- fine html alternativo -->
</applet>
 

che dà questo output:

Il W3C ha però deprecato l'utilizzo del tag <applet>, e al suo posto dovrebbe essere preferito il tag <object>:

<object id="appletLake" codetype="application/java" codebase="http://www.isolajava.com/guide/esempi/guida_html/multimedia/java/" classid="java:lake.class" width="263" height="130" >
 <param name="image" value="http://www.isolajava.com/guide/esempi/guida_html/multimedia/java/logo.gif">

 <!--html alternativo -->
 <img src="http://www.isolajava.com/guide/esempi/guida_html/multimedia/java/logo.gif" width="263" height="65" alt="html.it">
 <!-- fine html alternativo -->
</object>
 

quest'ultima sintassi tuttavia non è ancora perfettamente funzionante con tutti i browser.

Infine - dal momento che non è detto che tutti gli utenti possiedano il software e il plugin per vedere Java - è bene inserire del testo HTML alternativo nel caso in cui la virtual machine che esegue Java non sia presente (nel codice precedente era presente del codice HTML alternativo, al posto di un avviso). Ad esempio:

<applet code="lake.class" width="263" height="130">
     <param name="image" value="http://www.isolajava.com/guide/esempi/guida_html/multimedia/java/logo.gif">
     È necessario installare Java sul proprio sistema
</applet>

Includere file di scripting o CSS

Cominciamo subito con il dire che JavaScript non è Java. JavaScript è un linguaggio di scripting, eseguito dal browser, che permette di creare interattività all'interno della pagina.
La sintassi JavaScript deve essere inserita all'interno del tag <script>. Così:

<script type="text/javascript">
function ciao()
{
  alert ("ciao");
}
</script>

e poi nella pagina:

<input type="button" value="clicca" onClick="ciao()">

che dà il seguente output:

Se volete imparare a programmare in JavaScript potete consultare la relativa guida. Su HTML.it sono presenti numerose raccolte di JavaScript da usare così come sono o per prendere spunto e costruire nuove funzioni.

VbScript ("Visual Basic Script") è anch'esso un linguaggio di scripting eseguito dal browser, ma è possibile utilizzarlo soltanto con Internet Explorer.

I CSS (i fogli di stile)

Infine i fogli consentono di impostare il layout di un documento. La sintassi per includerli all'interno della pagina è:

<style type="text/css">
...
</style>

Anche in questo caso vi rimando alla «guida ai CSS».