| Frame | Indice | Fogli di stile |
Le immagini e gli elementi multimediali (suoni, video, animazioni..) arricchiscono un documento HTML. Ad esempio, se si utilizzano con con intelligenza, le immagini possono migliorare un documento HTML anche da un punto di vista del contenuto informativo. D'altra parte, se un documento contiene immagini o altri oggetti multimediali di dimensioni significative o in un numero sproporzionato, il documento molto probabilmente diverrebbe difficile da consultare sia per i tempi di caricamento (download) sia per la probabile confusione al suo interno.
In questo capitolo si presente un'introduzione agli aspetti multimediali che possono essere inseriti in un documento HTML e si forniscono alcuni indicazioni di come utilizzare questi elementi.
Il termine multimedialità vuole indicare un modo di comunicare mediante mezzi di natura diversa, come filmati, suoni, immagini, testi, ecc ecc. Le immagini rappresentano il modo più semplice di comunicare dopo il testo.
Con il termine 'immagini' solitamente si intendono indifferentemente fotografie, icone, illustrazioni, disegni e semplici animazioni che possono essere inserite in un documento HTML. Esistono diversi modi per rappresentare e memorizzare (formati) le immagini in file. Di seguito si descrivono i formati più utilizzati nell'ambito della programmazione HTML.
Il formato GIF (Graphics Interchange Format) è stato creato da CompuServe. Supporta colori a 8 bit ed è il formato più utilizzato in rete. Tutti i browser grafici sono in grado di rappresentarlo. Il formato GIF ha tre varianti:
Un'immagine in formato GIF è richiede uno spazio di memorizzazione maggiore rispetto ad altri formati, ma la qualità delle immagini non si riduce quando un file GIF viene compresso e decompresso più volte.
Il formato JPEG (Joint Photographic Experts Group) supporta colori a 8 e 24 bit e solitamente richiede molto meno spazio di memorizzazione del formato GIF. Purtroppo però questo risparmi è a discapito della qualità generale dell'immagine: le immagini JPEG potrebbero presentare dei contorni sfuocati in alcune parti.
Il formato JPEG è supportato da tutti i browser grafici.
Il formato PNG (Portable Network Graphics) è un nuovo formato che supporta colori a 8 e 24 bit e, a differenza dei precedenti, è uno standard aperto nel senso che chiunque è libero di utilizzarlo e migliorarlo se lo ritiene opportuno.
PNG è supportato solo dai più diffusi browser.
Il formato PDF (Portable Data Format) è un formato proprietario della società Adobe, utilizzato per rappresentare soprattutto documenti in un layout adatto alla stampa. Le immagini PDF non possono essere visualizzate direttamente da un browser: è necessario utilizzare un programma esterno, chiamato 'Acrobat Reader', per poter aprire, visualizzare e stampare l'immagine. Tale programma esterno può essere integrato con il browser: in questo caso solitamente si dice che il programma è un plug-in. Attualmente, Acrobat Reader può essere scaricato gratuitamente dalla rete.
Come regola generale, è preferibile utilizzare il formato GIF per immagini che richiedono un dettaglio preciso (come i diagrammi con testo o simili) e il formato JPEG per immagini di paesaggi o foto in generale, dove i dettagli precisi si possono perdere.
Esistono diversi programmi in rete che permettono di creare immagini GIF e JPEG e di convertire le immagini da un formato all'altro. Per avere un'idea dei programmi (anche gratuiti) disponibili allo scopo è sufficiente consultare la sezione multimedia del sito http://www.tucows.com
Un file che contiene un'immagine può richiedere un spazio di memoria significativo e, quindi, tempi di caricamento pesanti. A titolo di esempio, supponiamo di avere un'immagine di 500x300 ovvero 150.000 pixel: è un'immagine abbastanza grande, ma che non occupa tutto lo schermo di dimensioni normali. Se si utilizza il formato GIF con 8 bit per pixel, il file avrebbe una dimensione di 1,2MBit. Se il collegamento ad Internet è realizzato con un modem che ha velocità 28.800 bps (bit per secondo), sono necessario minimo 42 secondi circa per vedere l'immagine sul browser... un tempo non facilmente accettabile considerando poi che di solito l'immagine non è mai sola in un documento.
Si possono dare le seguenti indicazioni per ridurre i tempi per scaricare i file immagini, pur mantenendo una buona qualità delle stesse:
Per poter inserire delle immagini all'interno di un documento HTML si deve utilizzare il tag 'img'.
| Descrizione | identifica un file immagine che il browser visualizzerà al posto del tag |
| Tipo | tag vuoto. |
| Attributi | align, alt, border, class, dir, height,hspace, id, ismap, lang, longdesc, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouse0ver, onMouseUp, src, style, title, usemap, vspace e width. |
Il tag <img> permette di inserire immagini nei documenti HTML. Questo tag non introduce un'interruzione di riga. Inserendo quindi il tag in una riga di testo, l'immagine sarà visualizzata insieme al testo.
La visualizzazione delle immagini dipende dal tipo di browser. I browser di testo (come Lynx) o i browser vocali ignorano il tag <img>. Si deve ricordare che è possibile per un utente disattivare il caricamento automatico delle immagini; in questa modalità, il browser ignora tutte le immagini contenute nella pagina. È necessario quindi scrivere pagine HTML che abbiamo un senso anche senza immagini. Anche sui colori esistono dei limiti. Non tutti i monitor sono in grado di poter riprodurre immagini a 24 bit di colore, quindi un'immagine da 24bit, per quanto interessante sia, potrebbe risultare insignificante per tutti gli utenti che non dispongono di monitor recenti.
L'attributo src (source o sorgente) è l'unico obbligatorio per il tag <img>. Indica l'URL dell'immagine. Per la specifica dell'URL si rimanda alla presentazione dell'attributo 'href' del tag 'a'.
la cui resa è:
Come si può notare nell'immagine del pinguino di Linux, il browser tratta un'immagine come qualsiasi altro elemento di testo: il browser sposta verso il basso la riga di testo per fare spazio all'immagine. Le immagini utilizzate in questo modo si chiamano immagini inline. L'immagine è allineata con la linea di base dei testi. Come presentano più avanti, è possibile cambiare questo allineamento standard.
L'attributo alt (alternate o alternativo) è facoltativo anche se molto raccomandato. Questo attributo contiene un testo che viene visualizzato quando l'utente di un browser grafico posizionano il puntatore del mouse sull'immagine o al posto dell'immagine se questa non è disponibile o quando il browser non carica le immagini. La stringa di descrizione può contenere fino a 1024 caratteri.
L'attributo 'alt' è un ottimo sistema per fornire le informazioni agli utenti che non possono vedere le immagini. Una buona descrizione dell'immagine aiuta a intuire cosa contiene/rappresenta l'immagine a chi non ha la possibilità di vederle.
Gli attributi height e width permettono di specificare la dimensione che l'immagine dovrà occupare all'interno della pagina. In questo modo si accelera la visualizzazione del documento in quanto il browser non deve attendere il file immagine prima di iniziare a visualizzare il documento. L'altezza ('height') e la larghezza ('width') devono essere espresse in pixel.
La seguente istruzione crea un'immagine alta 150 pixel e larga 200 pixel:
la cui resa è:
gli attributi 'height' e 'width' possono essere utilizzati per creare una miniatura o ridimensionare un'immagine. Si deve ricordare che anche riducendo con questi attributi le dimensioni dell'immagine, il file da caricare mantiene le stesse dimensioni: se si vuole fare una piccola immagine da una grande, conviene ridimensionare con un programma di grafica l'immagine originale e utilizzare quella! Nel dare le dimensioni, è importante mantenere le stesse proporzioni, altrimenti l'immagine risulterà distorta.
Dato che i valori di 'height' e 'width' devono essere espressi in pixel, si deve rammentare che il numero di pixel sugli schermi degli utenti non è sempre costante. Per esempio, se un'immagine occupa un terzo di un monitor di 1024x1080 pixel, questa immagine sarà molto più grande su uno schermo 600x400. La differenza di dimensioni può causare dei problemi nella presentazione delle informazioni e nella disposizione degli elementi della pagina.
Dato che le immagini sono trattate come qualsiasi altro elemento di testo, non è definito un allineamento standard per le immagini. Inserendo un'immagine in mezzo al testo, il browser la presenterà in quella posizione, con una riga di testo da entrambi i lati. In molti casi, il browser allinea la base dell'immagine con la linea di base dei testi; ma questo non vale per tutti i browser, quindi un autore attento dovrebbe specificare sempre come allineare le immagini, se questo è importante per la presentazione delle informazioni.
Ci sono cinque valori differenti che permettono di controllare la posizione di un'immagine all'interno della pagina e all'interno di una riga di testo. I tre valori standard di 'align' ('top', 'middle' e 'bottom') insieme ai loro valori estesi permettono di controllare l'allineamento di un'immagine con la riga di testo dove è inserita:
;
Il precedente codice produce lo stesso effetto di quello che utilizza l'attributo 'align' impostato a 'right':
;
L'allineamento di un'immagine al centro della pagina non è così immediato come per l'allineamento a destra o a sinistra: non esiste un'opzione 'center' per 'align'.
Esistono due tecniche alternative per centrare un'immagine sulla pagina. Qui viene illustrata SOLO la tecnica basata sugli stili. L'altra tecnica è basata sul tag 'center' che però è stato dichiarato deprecato dalla versione 4.
Per centrare un'immagine in una pagina, è sufficiente creare un paragrafo centrato ed inserire l'immagine all'interno del paragrafo. Abbiamo visto che l'allineamento di un paragrafo si può ottenere sia con l'attributo 'align' sia utilizzando l'attributo 'style' che fissa la proprietà 'text-align'. Nell'esempio che segue si utilizza l´attributo stile.
<p>Il sistema operativo Linux ha come logo un simpatico pinguino seduto:</p>
<p style="text-align: center">
<img src="immagini/logo.png" alt="Pinguino di Linux!">
</p>
<p>L'immagine non è coperta da alcun copyright!</p>
la cui resa è:
Il sistema operativo Linux ha come logo un simpatico pinguino seduto:
L'immagine non è coperta da alcun copyright!
Se si inserisce un'immagine all'interno di un link, si ottiene un effetto di immagine cliccabile che attiva un collegamento: questi link vengono chiamati link grafici. Per esempio, spesso si incontra un link grafico per la home page che è formato dall'icona di una casetta oppure link grafici realizzati con immagini di frecce per indicare le pagine successive o precedenti. Per ottenere un link grafico si deve semplicemente inserire il tag 'img' all'interno del tag 'a':
Un link grafico è solitamente visualizzato con un bordo di 1 o 2 pixel che ha lo stesso colore che è stato impostato per i link di testo. Il colore standard è blu per i link non visitati, viola per quelli visitati. Se si vuole togliere il bordo per qualche motivo, è possibile utilizzare l'attributo 'border' del tag <img>, che controlla lo spessore della cornice attorno alle immagini dei link ed impostarlo a '0'. Se si utilizza un'immagine senza bordo come link, è opportuno indicare in altro modo che l'immagine è un link in quanto se l'immagine è senza cornice, l'unico modo che ha l'utente di capire che si tratta di un link grafico consiste nel posizionare il puntatore del mouse sull'immagine e vedere come cambia la forma del puntatore.
Quando si utilizzano delle immagini in documento HTML, si dovrebbe tenere sempre presente che una parte significativa degli utenti della rete non userà o non potrà usare le informazioni contenute nelle immagini:
È opportuno quindi NON inserire delle informazioni in un'immagine che potranno essere accessibili soltanto attraverso quell'immagine. Si deve poi ricordare che le immagini non sono indicizzate dai motori di ricerca, quindi se rappresentate delle informazioni mediante immagini, queste non saranno mai catalogate da nessun motore.
Abbiamo già visto come per multimedialità s'intende l'uso di suoni, video e altri effetti speciali nelle pagine Web. I suoni sono, dopo le immagini, un altro mezzo di comunicazione utilizzato spesso nei documenti HTML. Come per le immagini, utilizzare i suoni può appesantire molto il tempo di caricamento e visualizzazione del documento. Per dare un'idea delle dimensioni di un file multimediale, prendiamo in considerazione i file audio che si usano in rete. I più comuni sono i file WAVE. Questi file richiedono circa 10 megabyte per ogni minuto di suoni. Dieci milioni di byte per registrare un minuto! Questi file devono avere un'enorme importanza per giustificarne l'impiego.
Come le immagini, gli oggetti multimediali non sono accessibili a tutti gli utenti della rete. Diversamente dalle immagini, molti elementi multimediali richiedono che l'utente disponga di speciali unità hardware (schede audio particolari e altoparlanti). Oltre alla scheda audio, l'utente deve avere caricato e configurato uno speciale software, chiamato plug-in, per utilizzare un oggetto multimediale.
Se l'utente non ha installato il plug-in o se il browser non supporta un determinato plug-in, le informazioni disponibili nell'oggetto multimediale vengono perdute. Se l'oggetto multimediale contiene informazioni essenziali o se queste informazioni sono disponibili soltanto nel formato multimediale, allora i dati contenuti nella pagina Web saranno utili solamente a una platea limitata di utenti del Web. Poiché lo scopo primario di una pagina Web è fornire informazioni a un pubblico più vasto possibile, l'uso diffuso della multimedialità può ridurre l'efficienza di una pagina Web.
Attualmente, gli oggetti multimediali vengono inseriti nei documenti HTML utilizzando il tag 'a' con l'attributo 'href' che identifica l'oggetto. Esempio di un link ad un file audio:
la cui resa è
I file audio si presentano in vari formati. Di solito ogni formato richiede un apposito plug-in; quindi è bene limitare il formato dei file audio sulle pagine Web a uno dei tipi più comuni. In questo modo, l'utente dovrà avere soltanto un plug-in per riprodurre tutti i file audio presenti nella pagina.
I formati audio più diffusi sono:
Attualmente è disponibile il formato MPEG3 che permette di creare file audio di qualità con dimensioni molto ridotte. Occorre meno di 1 MB per registrare un minuto di musica con MPEG3. Questo formato usa un rapporto di compressione 12:1 con una perdita di qualità molto piccola. Per riprodurre un file MPEG3 occorre una scheda audio a 16 bit. L'estensione dei file MPEG3 è mp3.
Indipendentemente dal formato, è utile descrivere il tipo di file audio che si inserisce nella pagina, in modo che gli utenti sappiano che genere di file stanno scaricando. Non sarebbe corretto costringere gli utenti a lunghe attese per scaricare un file audio che i loro browser non sono in grado di riprodurre. Inoltre, come detto a proposito delle immagini molto grandi, è doveroso anche indicare le dimensioni dei file audio.
I video digitali sono un altro strumento nuovo che viene incorporato in un alcuni siti Web per renderli più interessanti e fornire un altro mezzo di scambio delle informazioni. Per inserire un video all'interno di una pagina HTML è sufficiente creare il seguente link:
la cui resa è:
I file video sono formati da una serie di immagini più un eventuale file audio. I video digitali sono creati catturando i video analogici a intervalli regolari e salvando ogni immagine catturata in un fotogramma distinto, che si chiama frame.
I frame vengono poi riprodotti in sequenza a una determinata velocità (frame rate o numero di fotogrammi al minuto) per creare l'effetto del movimento. Quando la velocità di riproduzione raggiunge 60 frame al secondo, l'animazione del video digitale diventa regolare e uniforme come quella delle normali videocassette (analogiche).
I formati video più diffusi sono:
I file MPEG hanno estensione mpg nelle piattaforme Intel e mpeg nei sistemi che supportano nomi di file più lunghi.
Uno degli elementi multimediali più recenti è il filmato Shocked creato con il programma Director di Macromedia. Si tratta di presentazioni multimediali che usano una tecnologia chiamata "streaming audio e video", che significa che il video o l'audio iniziano non appena il plug-in del browser comincia a ricevere il file. Non appena i frame vengono scaricati dalla rete, il browser li visualizza sullo schermo. Questi frame vengono scaricati più rapidamente di quanto siano visualizzati, pertanto il processo di download è in anticipo sulla presentazione. Ne consegue che l'evento multimediale inizia subito, perché l'utente non deve attendere che venga scaricato l'intero file.
Lo svantaggio di questo processo di streaming è che, se il collegamento con la rete è lento, la presentazione può subire dei tagli in determinati istanti.
Sebbene il processo di streaming audio e video sia molto interessante, tuttavia genera un carico enorme sulla rete. Altre forme multimediali, che richiedono all'utente di scaricare e registrare le presentazioni prima di riprodurle, influiscono sul traffico in rete soltanto mentre il file viene scaricato. La tecnologia streaming, invece, impegna la rete per tutta la durata della presentazione.
| Frame | Indice | Fogli di stile |