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.
13 / 30

Le transizioni

I Video di HTML.it

Stefano Sanna, Bluetooth Low Energy