Inserimento di suoni, immagini e filmati Argomenti trattati: - Inserimento di suoni Come gestire l'inserimento di brani musicali in un ipertesto. - Inserimento di immagini: Come inserire immagini gestibili come la formattazione. - Inserimento di filmati: Come inserire filmati con la stessa facilità delle immagini. Inserimento di suoni La presenza di file audio può essere una piacevole colonna sonora alla navigazione delle pagine web, oppure un fastidioso fardello capace solo di rallentare il caricamento ed innervosire il visitatore. Come spesso viene ripetuto in questa guida e' necessario considerare che sì, e' importante la piacevolezza grafica e musicale delle pagine web, ma e' fondamentale che la navigazione non risulti lenta e soprattutto l'utilizzo di musiche di facile ascolto per non infastidire l'utente e impedendire loro una gradevole navigazione. Il mio consiglio e' quindi l'utilizzo di musica in tono con la tipologia di sito che si sta creando e di evitare grossi file.wav (del peso anche di una cinquantina di Mb), anche se le attuali tecnologie ADSL hanno portato a velocità di dowload tali da non preoccupare più il carico non eccessivo di una pagina, ma optare per il famosissimo e leggero formato mp3 (che risulta essere anche dieci volte più leggero del WAV), in quanto i pochi Mb di cui è composto possono notevolmente accelerare la navigazione. Sconsiglio inoltre vivamente i grossolani file MIDI (.mid) per via soprattutto della scarsa qualità del suono emesso. Il comando <BGSOUND>, utilizzato per inserire un suono di sottofondo nella nostra pagina, funziona solo con Internet Explorer, e questa è la sintassi da utilizzare: <BGSOUND SRC="brano.mp3" LOOP=INFINITE>
Come si può vedere il tag BGSOUND è seguito dall'attributo SRC= che contiene il nome, e l'eventuale percorso, del brano utilizzato come musica di sottofondo e di un attributo chiamato LOOP= che contiene il numero di volte che il brano deve essere ripetuto. Nel nostro caso il valore INFINITE indica che il brano deve essere ripetuto finché non si abbandona la pagina. Inserimento di immagini. Internet, solo negli ultimi 10 anni si è affermata come media di massa. Per lunghi anni è stato un sistema di comunicazione ad esclusivo utilizzo di apparati militari prima, e universitari dopo. E' agevole immaginare quanto poco inclini alla grafica ed all'estetica fossero i vecchi navigatori della Rete. Alla fine degli anni Ottanta Internet ha subito una radicale trasformazione che ha portato sulle "autostrade telematiche" un'utenza di massa, con esigenze diverse da quelle militari o accademiche. Con la trasformazione della Rete si è imposta l'esigenza di mettere a disposizione strumenti di navigazione più "user friendly" per esigenze non più meramente di studio e ricerca. Così, nel 1989 nasce il WWW (World Wide Web) che grazie al primo browser della storia, Mosaic, trasforma il testo bianco su sfondo nero nell'attuale Web, fatto di colori e interattività. Il nuovo modo di vedere un immagine è anche merito del tag, oggi molto comune, <IMG>. Prima di trattare nello specifico il tag principale per l'inserimento di immagini negli ipertesti è bene precisare alcuni concetti di HTML. A differenza di molti editor di testo (Ms Word, per esempio) gli ipertesti non vengono "fusi" con le immagini a corredo grafico, ma si limitano a richiamarle da un percorso specifico in locale o su Web. In altre parole esiste una soluzione di continuità molto chiara tra file.htm e immagini (e, come vedremo in seguito, anche con suoni, applet ecc.). I documenti HTML si limitano a prevedere uno spazio al proprio interno entro il quale vanno inserite le immagini richiamate. Il tag <IMG> rappresenta, in un certo senso, una funzione di richiamo delle immagini e per questo motivo non necessita di chiusura. La sintassi è la seguente: <IMG SRC="immagine.gif"> SRC è l'abbreviativo di SOURCE (sorgente). Questo attributo contiene il percorso dal quale il browser "preleva" l'immagine (in questo caso "immagine.gif").
I browser (Mozilla Firefox, MsIe, Opera, ecc.) riconoscono molti formati grafici, anche se sono tre quelli più utilizzati: GIF (Graphics Interchange Format), JPEG (Joint Photographics Experts Group) e PNG (Portable Network Graphics) essendo questi, a parità di risoluzione, i migliori per quanto riguarda peso e qualità adatti ad essere caricate velocemente dai browser in Rete. Il tag <IMG> è corredato da diversi attributi molto utili ai fini del suo utilizzo. Vediamo insieme quali. Inserimento di immagini l'attributo ALT L'utilizzo di commenti testuali alle immagini è una fondamentale regola da osservare nella creazione di siti Web per alcune buone ragioni: taluni browser potrebbero essere impostati per non richiamare le immagini; i browser testuali per non vedenti non riuscirebbero ad interpretare le immagini senza un commento. è possibile evitare didascalie inserendo commenti all'interno dell'immagine stessa. In tutti i casi considerati l'uso di commenti risolve il problema e consente di ottimizzare l'utilizzo di una pagina Web. La corretta sintassi per i commenti è la seguente: <IMG SRC="immagine.gif" ALT="Commento visualizzabile con il cursore"> Inserimento di immagini gli attributi WIDTH e HEIGHT Negli esempi finora indicati non abbiamo specificato le misure dell'immagine che il browser ha provveduto a cercare automaticamente. E' possibile definire altezza e larghezza dell'immagine con gli attributi WIDTH ed HEIGHT: <IMG SRC="immagini/immagine.gif" WIDTH=178 HEIGHT=180 ALT="Commento"> Dove WIDTH=178 è la dimensione orizzontale (larghezza) dell'immagine espressa in pixel, e HEIGHT=180 la dimensione verticale (altezza). Con questi attributi è possibile definire dimensioni differenti da quelle effettive dell'immagine. E', comunque, consigliabile inserire immagini di dimensioni naturali soprattutto se in formato GIF, visto che ridimensionando questo formato la qualità decade enormemente.
Inserimento di immagini l'attributo BORDER Con l'attributo BORDER è possibile assegnare un bordo all'immagine. I valori sono numerici ed espressi in pixel. Il valore BORDER impostato su 0 ha l'effetto di non visualizzare alcun bordo. Quest'ultimo è il valore di default, ma se l'immagine è anche un link viene automaticamente assegnato un BORDER=1. Questa che segue è la giusta sintassi: <IMG SRC="immagini/immagine.gif" WIDTH=178 HEIGHT=180 BORDER=1 ALT="Commento"> Inserimento di immagini l'attributo ALIGN L'attributo ALIGN definisce la posizione dell'immagine rispetto al testo posto immediatamente prima o dopo la stessa. Esistono varie opzioni per questo attributo: ALIGN=top: allinea la prima riga di testo sulla sinistra al top dell'immagine. ALIGN=middle: allinea la prima riga di testo sulla sinistra al centro dell'immagine. ALIGN=bottom: allinea la prima riga di testo sulla sinistra nella parte più bassa dell'immagine. ALIGN=left: allinea il testo sulla sinistra dell'immagine partendo dal top. ALIGN=right: allinea il testo sulla destra dell'immagine partendo dal top. Inserimento di filmati Per l'inserimento di un filmato all'interno di una pagina la procedura è quasi identica a quella di un immagine; l'unica differenza consiste nel fatto che un'immagine non è altro che un fotogramma che ritrae una figura statica, mentre un filmato è una serie di fotogrammi illustrati dinamicamente tramite applicazioni apposite. Se ne deduce che la differenza è all'origine di questi elementi multimediali: una è statica (l'immagine) l'altra è dinamica (il filmato). Il tag <IMG>, visto finora, supporta anche il caricamento di file video in diversi formati. Ciò che permette tale inclusione in una pagina web è l'attributo DYNSRC (abbreviativo della parola Dynamic Source), permettendo così la visione dei filmati.
Si consiglia, sempre per gli ovvi motivi di dimensione e tempo di caricamento, di utilizzare i formati consigliati: AVI, MPEG e WMV. Per i nostri esempi adotteremo il formato AVI. Quindi la sintassi che utilizzeremo per l'inserimento di un filmato è il seguente: <IMG DYNSRC="filmati/nomefilmato.avi" WIDTH="250" HEIGHT="150" LOOP="infinite"> Come potete notare valgono le stesse regole dell'inserimento delle immagini. Unica eccezione è l'attributo AUTOSTART il cui valore booleano "true" ci permette di eseguire il filmato all'apertura della pagina. Il tag EMBED Attualmente, la migliore opzione per la visualizzazione dei filmati consiste nell'utilizzo del tag <EMBED>, dapprima utilizzato solo per il funzionamento in browser alternativi quali NetScape (attualmente in disuso). La sintassi è la seguente: <EMBED SRC="filmati/nomefilmato.avi" AUTOSTART="true/false" WIDTH=500 HEIGHT=500 LOOP=INFINITE> L'utilizzo dell'attributo LOOP è legato all'attributo AUTOSTART: nel caso si inserisca il valore false, LOOP diviene inutile, al contrario, in caso di valore true si può tranquillamente dichiarare con i suoi valori (1 o INFINITE). Il funzionamento del tag è, oggi, in maniera nativa con Internet Explorer e, con l'ausilio di plug-in aggiutivi (non ancora disponibili), in Mozilla Firefox. Si rimanda l'utente a nuove prove future.