Multimedia 3

Ultima modifica

Abbiamo conosciuto molto superficialmente i collegamenti o LINK negli appunti precedenti. Oggi approfondiremo l'argomento partendo dal semplice concetto che un collegamento è come un segnalibro, un specie di indice elettronico, che istantaneamente (o quasi) rende disponibile la pagina che vogliamo consultare. I link hanno reso possibile la rete. Internet, infatti, altro non è che una enorme biblioteca in linea con milioni di documenti, alcuni buoni, altri meno, molti decisamente brutti, consultabili con la sola pressione di un tasto.

Il risultato ottenibile dalla flessibilità e versatilità operativa resa possibile da tale tecnica, applicabile a documenti non solo alfanumerici, è ben reso dal termine IPERTESTO anche se, volendo pignoleggiare si dovrebbe parlare di Ipertesto e Ipermedia per distinguere fra un collegamento testuale ed uno multimediale.

Definizioni a parte, la cosa importante è capire come funzionano ed è, come vedremo, un processo molto semplice.

La prima distinzione formale che è possibile fare, è fra i link interni al documento in esame e quelli esterni ad esso. Mentre un collegamento interno è chiaramente definito in termini di posizione (può essere solo all'interno del documento in esame e quindi nello stesso PC), un collegamento esterno può anche fare riferimento ad un documento in un PC distante migliaia di kilometri. Per ciò che attiene, invece, gli effetti causati da un link essi sono riconducibili principalmente a due: la consultazione o lo scambio di documenti.

Si ha la consultazione quando un link rende disponibile un documento per tale fine (sia esso la lettura di un testo, la visualizzazione di un'immagine, o l'ascolto di un brano musicale o parlato). Abbiamo lo scambio quando il link consente l'invio o l'acquisizione di documenti. In entrambe le situazioni, comunque, un link sovente deve attivare risorse aggiuntive necessarie per raggiungere il fine voluto.

Tali risorse debbono pertanto essere disponibili: se si attiva un link per l'ascolto di un file musicale, ad esempio, è necessario disporre del programma in grado di riprodurre il file medesimo.

Fatte queste premesse, vediamo in concreto i più comuni tipi di collegamenti. Supponiamo di voler scrivere le impressioni di una visita ad un museo. Potremmo avere il seguente semplice sommario:

I Musei Vaticani sono fra i più belli al mondo.
La Cappella Sistina, specie dopo il restauro, lascia nel visitatore un ricordo indelebile.
Attivare il mouse sopra i singoli argomenti per ulteriori dettagli (le pagine sono vuote).

Musei Vaticani	Dettagli in HTML
La Cappella Sistina	Dettagli in HTML
Il Giudizio Universale	Immagine JPG
Gli Affreschi	Descrizione audio WAV

Le parole che al passaggio del mouse cambiano colore e/o vengono sottolineate sono i link che fanno riferimento a file di contenuto diverso: pagine HTML, immagini e suoni. Attivando il mouse sopra tali collegamenti i relativi file verranno aperti. Prima di esaminare in dettaglio la sintassi dei link, soffermiamoci a considerare che i file ai quali i link fanno riferimento non debbono essere necessariamente predisposti da noi poiché è possibile collegarsi ad un file esistente fisicamente a centinaia di kilometri dal nostro computer: in tal caso noi ci limiteremmo a predisporre il solo collegamento:

BASTA COSCERE L'ESATTO INDIRIZZO (assoluto o relativo)

Ciò detto esaminiamo la costruzione dei collegamenti. Al momento, come abbiamo visto, i nostri link faranno riferimento ad una pagina vuota.

Questo è il codice del primo link... <A HREF="indirizzo/nome_file.htm">Dettagli in HTML</A>

Questo è ciò che viene visualizzato dal browser...

Dettagli in HTML

In breve, la codifica è composta da due parti ed inizia con l'ormai noto simbolo di minore seguito da quello dell'Ancora...
<A
abbiamo quindi il simbolo del riferimento ipertestuale...
HREF=
seguito dall'indirizzo, relativo od assoluto, dell'oggetto che si vuole collegare comprese le virgolette...
"indirizzo/nome_file.suffisso"
chiude la prima parte del codice il solito simbolo di maggiore...
>
Si inserisce ora la frase che compare sullo schermo e sulla quale occorre attivare il mouse, ossia il LINK come viene visto dal navigatore...
Dettagli informativi
Infine si termina la codifica con il marcatore di chiusura dell'Ancora...
</A>
Il link è terminato! Notare che nel nome del file è stato inserito il termine generico suffisso invece dell'estensione HTM per significare che il tipo di documento è variabile.

Facciamo ora una prova con un'immagine...

Nella Cappella Sistina si può ammirare il Diluvio Universale

La codifica è la seguente:
Nella Cappella Sistina si può ammirare il <A HREF="indirizzo/diluvio.gif" >Diluvio Universale</A>

Da quanto esposto, dovrebbe essere abbastanza chiaro il processo costruttivo di un link. Se dopo il simbolo di riferimento ipertestuale si inserisce un oggetto completo di indirizzo, questi viene aperto o direttamente dal browser, oppure attraverso un programma specifico, se esistente. Quando detto significa che il nostro link potrebbe fare riferimento a vari tipi di file, video, musicali, PDF, ecc. che potrebbero avere comportamenti diversi: ad esempio, un file ZIP o EXE potrebbero attivare la finestra di dialogo per un possibile scaricamento su disco.

Per terminare questa breve introduzione ai collegamenti, parliamo ora dei link interni ad un documento. Tutti gli esempi visti fino ad ora riguardavano dei link a pagine (documenti, file, oggetti) esterne: ma un file HTML potrebbe essere abbastanza lungo (anche se tale procedura è sconsigliata) da richiedere, per una efficace navigazione, l'utilizzo di collegamenti interni ad esso.

Un collegamento interno è costituito da due parti:

<A HREF= "#paragrafo1">Vai a quell'indirizzo</A>
<A NAME=paragrafo1>Segnalibro interno al documento</A>

Volendo è possibile usare dei collegamenti ibridi, ossia link esterni che puntano non all'inizio di un documento, ma al suo interno: non li useremo, pertanto per non appesantire il discorso non verranno per il momento esposti.

Ora ricapitoliamo tutti i Marcatori HTML che abbiamo incontrato e che useremo per costruire la favola multimediale dei Due compari e l'orso...

Marcatori HTML di base (molto di base...)

Marcatori strutturali di pagina

<HTML>
<HEAD>
<TITLE> Titolo facoltativo ma consigliato</TITLE>
</HEAD>
<BODY>
BLA... BLA... BLA... CONTENUTO DELLA PAGINA...
</BODY>
</HTML>

Suggerimento: se scriviamo questi marcatori e salviamo la pagina come BASE.HTM avremo una pagina vuota a disposizione senza dover ripetere questi TAG ad ogni nuova pagina (aprire BASE.HTM con notepad e salvarla subito con un nuovo nome).

<META HTTP-EQUIV="REFRESH" CONTENT="TEMPO; URL=INDIRIZZO/DOCUMENTO.HTM">

Attributo facoltativo del Marcatore HEAD che consente di aprire automaticamente la pagina definita in URL trascorsi TEMPO in secondi. E' utile per effetti particolari come, per esempio, la visualizzazione automatica di immagini.

Marcatori di formattazione generale

<BODY BACKGROUND="indirizzo/immagine.suffisso" BGCOLOR="" TEXT="">

Possibili attributi facoltativi del Marcatore BODY. L'immagine di sfondo ed il colore di sfondo sono naturalmente alternativi. Per i colori si possono usare sia i codici in formato RGB che i nomi come mostrato sotto.

Black #000000

Silver #C0C0C0

Gray #008000

White #FFFFFF

Maroon #800000

Red #FF0000

Fuchsia #FF00FF

Green #008000

Lime #00FF00

Olive #808000

Yellow #FFFF00

Navy #000080

Blue #0000FF

Teal #008080

Aqua #00FFFFF

Ad esempio, è possibile definire il colore Rosso con il comando
 invece di 

Poiché ipotizziamo l'uso di un PC minimale, sarebbe opportuno limitare i colori a quelli sopra elencati. Se si vogliono usare i colori di questa tabella usare i soli codici utilizzando, per praticità, la tecnica del taglia/incolla).

Marcatori di formattazione testo

<CENTER>
Centra tutto ciò che viene inserito (non solo il testo)...
</CENTER>

Testo in grassetto

Testo in italico

Testo sottolineato

Marcatore di fine linea o andata a capo. Non richiede chiusura e può essere usato ripetutamente per inserire righe vuote

Marcatore di fine paragrafo. Provoca l'interruzione di linea e il salto di una riga. La chiusura non è necessaria.

<Hn>

Testo formattato per intestazioni

il valore di n varia da 1 a 6 (grandissimo/piccolissimo)

e la chiusura del marcatore causa un fine linea automatico con aggiunta di una riga vuota

</Hn>

Marcatori vari

<HR WIDTH="95%" ALIGN=CENTER>
Inserisce una linea orizzontale; i parametri di larghezza e allineamento sono utili ma non obbligatori.

<BGSOUND SRC="indirizzo/filemidi.MID" LOOP=1>

Esegue, appena caricata la pagina e in sottofondo, un file midi per LOOP volte.

<IMG SRC="indirizzo/immagine.suffisso">

Carica nella pagina l'immagine prelevata all'indirizzo fornito. L'immagine può essere formato JPG o GIF (trasparente, con o senza animazione). L'immagine è posizionata nel punto della pagina in cui si trova il marcatore che la richiede. Non è richiesto il TAG di chiusura.

<A HREF="indirizzo/documento.suffisso">Descrizione</A>
<A HREF="#segnalibro">Descrizione</A>

Collegamento o Link esterno o interno al documento. Il documento a cui si fa riferimento può essere testuale o multimediale. Nel caso si usi un collegamento interno è necessario il sottostante segnalibro

<A NAME=segnalibro>Segnalibro interno al documento</A>

Abbiamo concluso quello che potremmo definire l'Estratto del Sunto di un Bignami sul linguaggio HTML. Il percorso fino a qui compiuto è naturalmente solo un inizio (abbiamo trattato poco più di una decina di marcatori con pochissime opzioni), tuttavia vi stupirete di quanto si potrà fare con tanto poco! Prova evidente di quanto fossero eccessive le preoccupazioni, eventualmente nutrite all'nizio, sulla difficoltà dell'argomento.

Laboratorio

La favola dei Due compari e l'orso che useremo per mettere in pratica quanto appreso è composta da quattro tavole, alcuni file audio e del testo: il file ZIP contenente le immagini e la campionatura audio è scaricabile a questo indirizzo. Il testo è bene che venga digitato per vedere nella realtà pratica l'evolversi di una narrazione multimediale, ossia la differenza fra il testo ed i marcatori html: detto in altri termini, fra ciò che viene visualizzato sullo schermo e ciò che determina un particolare tipo di visualizzazione (causa/effetto). Create una cartella di lavoro dove scompattare il file zippato e dove salvare questa vostra prima produzione multimediale...

L'esercizio sarà doppio in quanto prepareremo sia la storia con collegamenti esterni, sia quella con collegamenti interni. Circa questi ultimi, è opportuno sottolineare come essi tendano a far redigere pagine ipertestuali più complicate da aggiornare: l'uso di tale tecnica, quindi, deve essere limitato a documenti non particolarmente complessi. Verrà inoltre predisposta, per entrambe le versioni, una sorta di copertina che fungerà da introduzione alla favola.

Iniziamo con la versione più lunga (collegamenti esterni) in quanto richiede un numero maggiore di pagine. I file che useremo saranno chiamati 2c&orsoN.xxx dove N è un numero da 1 a 4 e xxx sono i suffissi relativi ai differenti tipi di file (htm - wav - jpg). L'argomento riguardante i file in genere ed i file grafici e audio in particolare verrà affrontato nei prossimi appunti. Notare, infine, come i nomi dei file rispettino il protocollo 8.3 (numero di caratteri prefisso.suffisso) per compatibilità di uso.

I marcatori usati per la prima volta nella costruzione di una pagina verranno evidenziati prima in rosso e successivamente in verde in modo da rendere palesi tutte le modifiche in itinere. In questo primo progetto, pertanto, verrà ripetuto molto codice. Nelle spiegazioni, citando dei marcatori, potranno essere omessi per semplicità i segni di maggiore e minore (es. CENTER invece di <CENTER>)

Iniziamo la nostra pagina base con la serie di marcatori ormai nota...

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BGCOLOR="#d2ddfb">

BLA BLA BLA BLA BLA....

</BODY>
</HTML>

Si ricorda che posizioniamo i marcatori su righe singole solo per motivi di chiarezza non per necessità. Per ciò che riguarda il browser quanto scritto sopra avrebbe potuto benissimo essere digitato così...

<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY BGCOLOR="#d2ddfb"> BLA BLA BLA BLA BLA.... </BODY> </HTML>

Salviamo questa pagina due volte: la prima come generica.htm e la seconda come index.htm. In questo modo abbiamo una pagina vuota da usare ogni volta che serve senza bisogno di digitare nuovamente tutti i marcatori di base e, contestualmente, abbiamo la nostra pagina iniziale sulla quale continuare ad operare.

Abbiamo chiamato questa prima pagina index.htm perché il nostro browser Andante apre automaticamente, se esiste, tale pagina semplificando in tal modo il processo di partenza, caratteristica questa utile se si parte da CD.

Poiché questa pagina serve come presentazione della favola, scriviamo qualcosa sugli autori. Modifichiamo la pagina aggiungendo quanto segue...

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BGCOLOR="#d2ddfb">

<CENTER>
 
<H2>
La Classe III E è orgogliosa di presentare una produzione
 
della magnifica...
 
fantastica...
 
insuperabile...
 
Compagnia artistica
 
<HR WIDTH="65%" ALIGN=CENTER>
 
== LA CHIACCHIERA ==
</H2>
 
<HR WIDTH="65%">
</CENTER>

</BODY>
</HTML>

Questa pagina, visualizzata con il browser si presenta così:

Cosa abbiamo fatto? Con pochi marcatori abbiamo deciso l'aspetto della pagina....

<CENTER> <-- Marcatore generale centratura oggetti
 <-- Interruzione riga della quale, nel seguito, verrà omessa la spiegazione
<H2> <-- Testo formattato H2
La Classe III E è orgogliosa di presentare una produzione <-- Prima riga di testo di colore predefinito
 
della magnifica... <-- Seconda riga di testo di differente colore
 
fantastica... <-- Terza riga di testo di differente colore
 
insuperabile... <-- Quarta riga di testo di differente colore
 
Compagnia artistica <-- Quinta riga di testo di colore predefinito
 
<HR WIDTH="65%" ALIGN=CENTER> <-- Riga orizzontale larga il 65% dello schermo e centrata
 
== LA CHIACCHIERA == <-- Sesta riga di testo in italico e di differente colore
</H2> <-- Chiusura marcatore formattazione testo Titolo H2
 
<HR WIDTH="65%"> <-- Atra riga orizzontale larga il 65% dello schermo
</CENTER> <-- Chiusura marcatore di centratura

Alcune considerazioni:

Ricordare che il browser interrompe una riga solo se incontra dei marcatori che gli indicano esplicitamente o implicitamente di eseguire tale interruzione.
Ne consegue che il numero di interruzioni e/o di salti di riga può variare in base alla disposizione e spaziatura che si vuole ottenere fra i vari oggetti che compongono la pagina (righe di testo, linee orizzontali, immagini, ecc.).
La normale spaziatura multipla fra una parola e l'altra non viene riconosciuta (Ciao maestra oppure Ciao maestra vengono visualizzate dal browser nello stesso modo, con un solo spazio fra le due parole).
La centratura delle linee orizzontali può essere ottenuta sia singolarmente con l'attributo ALIGN=CENTER proprio del marcatore HR, sia usando il marcatore generale CENTER che ha effetto su tutti gli oggetti ricadenti all'interno della relativa coppia apertura/chiusura.
Abbiamo definito i colori utilizzando entrambe le codifiche (esadecimale e nominativa).

Questa prima pagina è quasi ultimata. Manca solo il titolo della storia che tuttavia non vogliamo posizionare in questa pagina per semplici motivi scenografici: fare apparire automaticamente (dopo 10 secondi) il titolo da solo attira di più l'attenzione su di esso. Per far ciò dobbiamo scrivere una nuova pagina che chiameremo titolo.htm, prima però aggiungiamo a questa pagina le seguenti righe...

<HTML>
<HEAD>
<TITLE>Indice</TITLE>
<META HTTP-EQUIV= "refresh" content="10; url= titolo.htm">
</HEAD>
<BODY BGCOLOR="#d2ddfb">
<CENTER>
 
<H2>
La Classe III E è orgogliosa di presentare una produzione
 
della magnifica...
 
fantastica...
 
insuperabile...
 
Compagnia artistica
 
<HR WIDTH="65%" ALIGN=CENTER>
 
== LA CHIACCHIERA ==
</H2>
 
<HR WIDTH="65%">
</CENTER>
</BODY>
</HTML>

Terminata così la pagina index.htm, apriamo la pagina generica.htm salvandola subito con il nome titolo.htm. Apportiamo le seguenti aggiunte al codice di base...

<HTML>
<HEAD>
<TITLE>Titolo</TITLE>
<META HTTP-EQUIV= "refresh" content="5; url= 2c&orso1.htm">
</HEAD>
<BODY BGCOLOR="#d2ddfb">

<CENTER>
 
 
 
 
<HR WIDTH="65%" ALIGN=CENTER>
<h1>I due compari e l'orso</h1>
<HR WIDTH="65%" ALIGN=CENTER>
</CENTER>

</BODY>
</HTML>

Questa pagina, visualizzata con il browser si presenta così:

Quello che è stato fatto dovrebbe essere chiaro. In breve abbiamo...

Inserito il titolo della pagina (che come sappiamo è facoltativo ma utile)
Stabilito un tempo di 5 secondi trascorsi i quali viene automaticamente aperta la pagina 2c&orso1.htm, prima pagina effettiva della favola
Posizionato il titolo della favola quasi al centro della pagina e posto una riga orizzontale sopra ed una sotto per abbellimento

Salviamo questo file e riapriamo nuovamente la pagina generica.htm salvandola subito con il nome 2c&orso1.htm. Questa pagina rappresenta la prima delle quattro nelle quali si articola la favola. Ciò che ci proponiamo di fare è:

Posizionare la prima immagine grosso modo al centro della pagina
Posizionare il testo
Predisporre il collegamento al file audio per sentire la storia raccontata
Predisporre il collegamento alla seconda pagina della storia

Per completezza di analisi, notiamo come le pagine successive avranno una struttura analoga con la sola aggiunta, nelle pagine 2 e 3, di un collegamento indietro (pagine precedenti), mentre nella pagina 4 non sarà necessario il collegamento avanti. Tale struttura similare e ripetitiva (fatto abbastanza comune in questo genere di lavori) rende abbastanza semplice la preparazione delle pagine perché basterà cambiare pochissime cose per avere tutto il lavoro fatto in modo praticamente automatico.

Vediamo la codifica (i commenti sono in blu e non fanno parte del codice)...

<HTML>
<HEAD>
<TITLE>2c&orso1</TITLE>
</HEAD>
<BODY BGCOLOR="#d2ddfb">

 <-- Definizione del tipo di FONT (arial) e della sua grandezza (3)
<CENTER>
 
 
 
<HR WIDTH="65%" ALIGN=CENTER>
<IMG SRC="2C&O1.JPG"> <-- Inserimento dell'immagine 2C&O1.jpg
<HR WIDTH="65%" ALIGN=CENTER>
 
 
Un giorno, al mercato, due compari sempre alla ricerca di un modo facile per fare soldi,
 riuscirono a convincere una persona a comprare la pelle di un orso.
 
 
<A HREF="2C&ORSO1.WAV">VOCE</A> <-- Collegamento ipermediale al file audio 2C&O1.wav
 
 
<A HREF="2C&ORSO2.HTM">Pagina successiva</A> <-- Collegamento ipertestuale al file 2C&O2.htm
 
</CENTER>


</BODY>
</HTML>

Questa pagina, visualizzata con il browser si presenta così:

Salviamo questa pagina e vediamo come predisporre la pagina successiva partendo da questa. Le variazioni di codifica sono in rosso...

<HTML>
<HEAD>
<TITLE>2c&orso2</TITLE>
</HEAD>
<BODY BGCOLOR="#d2ddfb">


<CENTER>
 
 
 
<HR WIDTH="65%" ALIGN=CENTER>
<IMG SRC="2C&O2.JPG">
<HR WIDTH="65%" ALIGN=CENTER>
 
 
I due, incassato l'acconto, si misero alla ricerca dell'animale
 nel bosco vicino quando, ad un tratto, un grande orso uscì da un cespuglio.
 I due improvvisati cacciatori, spaventatissimi, scapparono a gambe levate.
 
 
<A HREF="2C&ORSO2.WAV">VOCE</A>
 
 
<A HREF="2C&ORSO1.HTM">Pagina precedente</A> ==== <A HREF="2C&ORSO3.HTM">Pagina successiva</A>
 
</CENTER>


</BODY>
</HTML>

Salviamo questa pagina modificata come 2c&orso2.htm. Al browser verrà così visualizzata:

Come abbiamo visto, con piccolissime modifiche abbiamo utilizzato la pagina 2c&orso1.htm salvandola come 2c&orso2.htm. La stessa cosa si può fare per la terza pagina. In questo caso, anzi, sarà ancora più facile perché non occorre aggiungere un collegamento ma basterà scrivere il nuovo testo e cambiare il nome dei vari file da usare (jpg - wav - htm).

Come esercizio pratico provate a terminare la storia elaborando le rimanenti due pagine.