Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Link ipermediali

Cosa significa "ipermediale", le aree e l'elemento
Cosa significa "ipermediale", le aree e l'elemento
Link copiato negli appunti

Nella scorsa lezione abbiamo costruito una presentazione multimedialea partire dalla sincronizzazione di diversi media; in questa lezione vedremo come rendere interattiva una presentazione SMIL grazie alconcetto di link ipermediale.

Ciò che contraddistingue il web ad una semplice biblioteca informatizzata è, tra le altre cose, la possibilità di “saltare” da un documento all'altro grazie ai link ipertestuali. Questa funzionalità, traslata nel campo delle presentazioni multimediali, ha portato alla creazione dei link ipermediali.

A differenza del link ipertestuale,quello ipermediale permette di muoversi non solo nel campo dellospazio (da un punto di un documento ad un punto di un altrodocumento), ma anche nel campo del tempo (da un istante di una presentazione ad un istante di un'altra presentazione).

Gli elementi che si usano in SMIL sono molto simili a quelli dell'HTML: il più semplice è <a>, che ha come attributo principale href. Per esempio, se volessimo associare ad una immagine un collegamento dovremmo scrivere il seguente codice:

<a href="http://www.meoale.it/smil/presentazione.smil">
  <img src="media/paesaggio.jpg"/>
</a>

In questo caso l'attraversamento del collegamento aprirebbe il documento con URL pari a http://www.meoale.it/smil/presentazione.smil. Da notare il fatto che il collegamento è attivo solo nei momenti in cui sono attivi gli elementi contenuti; ecco un esempio chiarificatore:

<seq>
  <img src="media/particolare.jpg" dur="5"/>
  <a href="http://www.meoale.it/smil/presentazione.smil">
    <img src="media/paesaggio.jpg" dur="5"/>
  </a>
</seq>

In questo caso il collegamento è attivo solo negli ultimi cinque secondi di presentazione.

Un elemento più flessibile per creare collegamenti è <area>, il quale ci permette di scegliere qualsiasi area spazio-temporale in cui deve essere attivo il collegamento, per esempio:

<img src="media/paesaggio.jpg" dur="10">
  <area shape="rect" coords="0,0,50,50" begin="0" dur="2"
    href="http://www.meoale.it/smil/presentazione.smil"/>
  <area shape="rect" coords="0,0,50,50" begin="3" dur="4"
    href="http://www.meoale.it/smil/presentazione2.smil"/>
</img>

in questo caso, all'interno di un'immagine della durata di dieci secondi, sono state definite due aree spazio-temporali, la prima attiva dall'inizio per due secondi, la seconda attiva dopo il terzo secondo per quattro secondi; entrambe le aree sono ristrette ad un quadrato di 50x50 pixel posto nell'angolo in alto a sinistra della presentazione. Gli attributi che definiscono le forme entro cui un'area è attiva sono shape, coords, href e nohref; il loro utilizzo è uguale a quello di HTML.

Come già accennato è anche possibile collegarsi ad un particolare istante di una presentazione; per farlo bisogna inserire l'attributo id nel punto della presentazione a cui ci si vuole collegare, per poi specificare tale id nella parte frammento dell'URL. Ecco un esempio:

<seq>
  <img id="img1" src="media/paesaggio.jpg" dur="10">
    <area href="#img2"/>
  </img>
  <img id="img2" src="media/particolare.jpg" dur="10">
    <area href="#img1"/>
  </img>
</seq>

Questo pezzo di presentazione è una sequenza di due immagini, ciascuna della durata di dieci secondi; ad ogni immagini è stato assegnato un id, inoltre, dentro ogni immagine è presente un'area che ha come URL l'id dell'altra immagine. Il risultato è una sequenza di due immagini, dove è possibile passare manualmente all'altra immagine con un click.

Le potenzialità dei link ipermediali viene incrementata dall'uso dell'elemento <excl>, tale elemento è simile all'elemento <par>, tuttavia gli elementi in esso contenuti vengono eseguiti al massimo uno alla volta; in più la riproduzione degli elementi contenuti non avviene se non è esplicitamente richiesta. Da qui la possibilità di segmentare una presentazione in parti liberamente navigabili dall'utente.

<par>
  <img src="media/paesaggio.jpg" dur="indefinite">
    <area id="sh1" shape="rect" coords="0,0,50,50"/>
    <area id="sh2" shape="rect" coords="60,0,120,50"/>
  </img>
  <excl dur="indefinite">
    <video begin="sh1.activateEvent" src="media/film1.mpeg"/>
    <video begin="sh2.activateEvent" src="media/film2.mpeg"/>
  </excl>
</par>

In quest'ultimo esempio viene riprodotta un'immagine al cui interno esistono due aree, nel caso in cui venga attivata una delle aree, viene riprodotto il video corrispondente; se, durante la riproduzione di un video, viene attivata l'area corrispondente all'altro video, quest'ultimo sostituisce il primo.

Da notare l'uso del valore "indefinite" per l'attributo dur, che definisce una durata illimitata per l'elemento in questione, inoltre la riproduzione dei video non viene richiamata da collegamenti ipertestuali, ma grazie all'attributo begin.

In questa lezione abbiamo visto come gestire collegamenti ipermediali, nella prossima lezione costruiremo una presentazione che utilizza tali funzionalità.

Ti consigliamo anche