Inserimento di suoni, immagini e filmati

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>
"Lezioni HTML di base" del prof. Maurizio Gambino – 04 Suoni, immagini e filmati.
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").
"Lezioni HTML di base" del prof. Maurizio Gambino – 04 Suoni, immagini e filmati.
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.
"Lezioni HTML di base" del prof. Maurizio Gambino – 04 Suoni, immagini e filmati.
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.
"Lezioni HTML di base" del prof. Maurizio Gambino – 04 Suoni, immagini e 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.
"Lezioni HTML di base" del prof. Maurizio Gambino – 04 Suoni, immagini e filmati.