- Learn
- Guida Smil 2.0
- Esempi di utilizzo dei link
Esempi di utilizzo dei link
Nella scorsa lezione sono stati introdotti i concetti fondamentali per operare con collegamenti ipermediali, ora mettiamo in pratica gli elementi e gli attributi visti.
Supponiamo di voler creare un album fotografico introdotto da un piccolo video, in modo tale che durante i primi tre secondi di riproduzione di tale video sia possibile passare alle foto con un click:
<?xml version=”1.0″?>
<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN”
“http://www.w3.org/2001/SMIL20/SMIL20.dtd”>
<smil xmlns=”http://www.w3.org/2001/SMIL20/Language”>
<head>
<layout>
<root-layout backgroundColor=”white” width=”405″ height=”275″/>
</layout>
</head>
<body>
<seq>
<video src=”media/introduzione.mpeg”>
<area begin=”0″ dur=”3″ href=”#foto”/>
</video>
<par id=”foto”>
<img src=”media/sfondoalbum.jpg” dur=”indefinite”/>
</par>
</seq>
<body>
</smil>
A questo punto creiamo, nella parte bassa della presentazione, una barra con i collegamenti relativi alle varie foto dell’album:
<?xml version=”1.0″?>
<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN”
“http://www.w3.org/2001/SMIL20/SMIL20.dtd”>
<smil xmlns=”http://www.w3.org/2001/SMIL20/Language”>
<head>
<layout>
<root-layout backgroundColor=”white” width=”405″ height=”275″/>
<region regionName=”fotoarea” width=”405″ height=”235″
fit=”meet”/>
<region regionName=”linkarea” width=”405″ height=”40″ top=”235″
fit=”fill”/>
</layout>
</head>
<body>
<seq>
<video src=”media/introduzione.mpeg”>
<area begin=”0″ dur=”3″ href=”#foto”/>
</video>
<par id=”foto”>
<img src=”media/sfondoalbum.jpg” dur=”indefinite”/>
<excl dur=”indefinite”>
<img id=”img1″ begin=”sh1.activateEvent” end=”img2.begin”
src=”media/paesaggio.jpg” region=”fotoarea”/>
<img id=”img2″ begin=”sh2.activateEvent” end=”img1.begin”
src=”media/particolare.jpg” region=”fotoarea”/>
</excl>
<img src=”media/barralink.jpg” region=”linkarea”>
<area id=”sh1″ shape=”rect” coords=”0,0,100,40″/>
<area id=”sh2″ shape=”rect” coords=”120,0,220,40″/>
</img>
</par>
</seq>
<body>
</smil>
Da notare l’introduzione di un’unica immagine come barra, l’uso delle aree per i vari link e l’uso dell’elemento <excl>
. Ora creiamo un terza area che colleghi ad una presentazione esterna:
<?xml version=”1.0″?>
<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN”
“http://www.w3.org/2001/SMIL20/SMIL20.dtd”>
<smil xmlns=”http://www.w3.org/2001/SMIL20/Language”>
<head>
<layout>
<root-layout backgroundColor=”white” width=”405″ height=”275″/>
<region regionName=”fotoarea” width=”405″ height=”235″
fit=”meet”/>
<region regionName=”linkarea” width=”405″ height=”40″ top=”235″
fit=”fill”/>
</layout>
</head>
<body>
<seq>
<video src=”media/introduzione.mpeg”>
<area begin=”0″ dur=”3″ href=”#foto”/>
</video>
<par id=”foto”>
<img src=”media/sfondoalbum.jpg” dur=”indefinite”/>
<excl dur=”indefinite”>
<img id=”img1″ begin=”sh1.activateEvent” end=”img2.begin”
src=”media/paesaggio.jpg” region=”fotoarea”/>
<img id=”img2″ begin=”sh2.activateEvent” end=”img1.begin”
src=”media/particolare.jpg” region=”fotoarea”/>
</excl>
<img src=”media/barralink.jpg” region=”linkarea”>
<area id=”sh1″ shape=”rect” coords=”0,0,100,40″/>
<area id=”sh2″ shape=”rect” coords=”120,0,220,40″/>
<area shape=”rect” coords=”240,0,340,40″
href=”http://www.meoale.it/smil/presentazione.smil”/>
</img>
</par>
</seq>
<body>
</smil>
In questa lezione abbiamo costruito una presentazione con collegamenti ipermediali, nella prossima vedremo come definire gli effetti di transizione.
Se vuoi aggiornamenti su Esempi di utilizzo dei link inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Myron Campbell
Parliamo di come indurre processi creativi con un visionario del design