Dopo aver visto, nella lezione precedente, gli elementi ed attributi fondamentali che gestiscono il layout in SMIL, ci soffermiamo su alcuni esempi.
Riprendiamo, a tal fine, il codice della seconda lezione:
<?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="black" width="405"
height="275"/>
</layout>
</head>
<body>
<par>
<audio src="media/sottofondo.mp3"/>
<img src="media/paesaggio.jpg"/>
<text src="media/descrizione.txt"/>
</par>
</body>
</smil>
Notiamo come venga già definita una superficie di presentazione tramite l’elemento <root-layout>; aggiungiamo ora alcune regioni al cui interno posizioniamo alcuni media:
<?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="black" width="405" height="275"/>
<region regionName="sottotitoli" backgroundColor="#EEEEEE"
width="300" height="50" top="200" left="100"/>
<region regionName="particolare" backgroundColor="#FF0000"
width="150" height="100" top="50" left="160"/>
</layout>
</head>
<body>
<par>
<audio src="media/sottofondo.mp3"/>
<img src="media/paesaggio.jpg"/>
<img src="media/particolare.jpg" region="particolare"/>
<text src="media/descrizione.txt" region="sottotitoli"/>
</par>
</body>
</smil>
Riproducendo la presentazione è possibile notare il posizionamento dei media all’interno delle regioni ed i colori di sfondo delle varie regioni. I media che non sono stati associati ad alcuna regione, vengono posizionati sulla superficie principale di presentazione a partire dall’angolo superiore sinistro.
Molto probabilmente l’immagine “particolare.jpg” non ha le stesse dimensioni della regione “particolare”, pertanto inseriamo l’attributo fit per ridimensionarla; in più creiamo un’altra regione dove inserire l’audio “sottofondo.mp3” e impostiamo il volume di tale regione al 30%:
<?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="black" width="405" height="275"/>
<region regionName="sottotitoli" backgroundColor="#EEEEEE"
width="300" height="50" top="200" left="100"/>
<region regionName="particolare" backgroundColor="#FF0000"
width="150" height="100" top="50" left="160" fit="meet"/>
<region regionName="sottofondo" soundLevel="30%"/>
</layout>
</head>
<body>
<par dur="10">
<audio src="media/sottofondo.mp3" region="sottofondo"/>
<img src="media/paesaggio.jpg"/>
<img src="media/particolare.jpg" region="particolare"/>
<text src="media/descrizione.txt" region="sottotitoli"/>
</par>
</body>
</smil>
Possiamo osservare come parte della regione “particolare”, a causa dell’attributo fit impostato a “meet” non venga coperta: è infatti possibile vedere lo sfondo rosso di tale regione; per renderlo trasparente è sufficiente togliere l’attributo backgroundColor, oppure impostarlo a “transparent”.
Nella gestione del layout è importante tenere conto dell’ordine con cui vengono definite le regioni, infatti le regioni definite per ultime si sovrappongono graficamente a quelle definite per prime; lo stesso vale per l’inserimento di più media all’interno di una stessa regione.
I moduli relativi al layout in SMIL, prevedono anche la gestione di layout gerarchici e di finestre di presentazione multiple, oltre ad altre funzionalità; per tali approfondimenti fare riferimento al quinto capitolo della Recommendation.
Nella prossima lezione ci soffermiamo sull’inserimento di media in una presentazione SMIL.