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.