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

SMIL: sorridi alla multimedialità

Introduzione al linguaggio SMIL e alle sue potenzialità multimediali
Introduzione al linguaggio SMIL e alle sue potenzialità multimediali
Link copiato negli appunti

Syncronized Multimedia Integration Language (SMIL) rende possibile l'integrazione di contenuti diversi per natura e modalità di fruizione (quali video, audio, grafica e testo) mirando a colmare uno dei divari che ancora sussistono tra il Web e il mondo della comunicazione tradizionale. Limitati nelle scelte dalla non ancora ampia diffusione della banda larga, si dispone di contro di solide basi tecniche nei formati per la multimedialità in rete e di un'ampia scelta di piattaforme (seppure, come vedremo, con molta frammentazione) per realizzare questo.

Tra le applicazioni possibili vi è la riproposta dell'advertising online che, tra banner in popup, in Flash o fluttuanti sopra il testo, pare aver esaurito da tempo il suo potenziale comunicativo. Ogni piattaforma di e-learning evoluta mira inoltre a integrare questi stessi tipi di dato; infine il mondo della televisione ammicca alle potenzialità di un sistema bidirezionale nel quale l'utente, oltre che fare da spettatore, possa eseguire azioni (possibilmente acquisti ;-).

Ad esempio sarà possibile assistere ad una fiction e decidere, in momenti prestabiliti, quale piega debbano prendere gli eventi, oppure guardare la partita navigando al contempo schede di approfondimento su squadre, giocatori e classifiche. In ambito didattico è già possibile assistere a lezioni a distanza, corredate di trascrizioni in più lingue, e dotate di una lavagna virtuale per gli appunti scritti dal professore.

In realtà lo streaming presenta implicazioni ben più complesse della codifica corretta di un sorgente SMIL (pronunciato come "smile"), ad esempio la scelta del giusto compromesso tra qualità e peso in KB dei singoli contenuti, piuttosto che la loro organizzazione temporale e il conseguente diagramma del carico che la connessione dell'utente dovrà sopportare per fornire un'esperienza multimediale efficace. Queste tematiche troveranno spazio in un futuro articolo.

Versioni, moduli e profili

Con le specifiche 1.0 del linguaggio si è voluto fornire lo scheletro di un nuovo modello di interazione, come avvenuto per HTML 1.0, all'interno del quale il susseguirsi dei contenuti non fosse però solo frutto delle scelte da parte dell'utente, ma dipendente da una timeline predefinita. In breve realizzare in rete quanto è stato fatto sinora con le presentazioni multimediali su CD-ROM. RealPlayer G2 e Quicktime consentono entrambi di organizzare diacronicamente i contenuti con SMIL 1.0, sebbene con differenze ed estensioni proprietarie.

La versione 2.0 rappresenta uno sforzo enorme destinato ad ampliare il modello base, suddividere il linguaggio in moduli e infine combinare questi untimi in profili, in modo da favorire la più ampia accettazione. Tra i risultati più evidenti abbiamo l'apertura al mondo wireless (SMIL Mobile Profile è ad esempio il formato di rappresentazione degli MMS) e il riconfluire nello standard di HTML+TIME, formato proprietario di Microsoft, attraverso il profilo XHTML+SMIL che sarà argomento del secondo articolo di questa serie.

SMIL 2.0 è supportato (con qualche non conformità) da RealONE, ultima evoluzione di RealPlayer dalla veloce diffusione, Internet Explorer 5.0+ (di fatto 6.0+ e solo per PC) e da GRiNS Player di Oratrix, che produce anche una versione per PocketPC di questo software oltre che i migliori editor SMIL sul mercato.

In questo articolo vedremo come strutturare lo spazio del media player, e soprattutto l'evolversi nel tempo di una presentazione, attraverso gli elementi comuni alle due versioni successive in modo da scrivere codice applicabile ad una vasta gamma di piattaforme. Faremo riferimento ad essi secondo la modularizzazione di SMIL 2.0, accennando anche alle nuove possibilità introdotte con la seconda versione del linguaggio.

Il Moduli di Struttura e di Layout

Un documento SMIL consta, in analogia con HTML, di due blocchi che separano l'intestazione dai contenuti veri e propri. I tre elementi del Modulo di Struttura, privi di attributi ad eccezione dell'id facoltativo associabile ad ogni elemento XML, costituiscono il template di base:

  <smil>
    <head>
      ...
    </head>
    <body>
      ...
    </body>
  </smil>

Il meccanismo dei namespaces viene utilizzato per includere nel codice estensioni proprietarie; ad esempio quelle relative a Quicktime possono essere introdotte con la dichiarazione:

  <smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions">

All'interno dell'intestazione di un documento SMIL non troveremo solo i meta-dati relativi alla risorsa, ma anche la definizione di tutte le aree della presentazione all'interno delle quali si alterneranno i contenuti multimediali. Il Modulo di Layout prevede un elemento root-layout con le caratteristiche dell'intera presentazione:

  <head>
    <layout>
      <root-layout background-color="red" width="680" height="500"/>
      ...
    </layout>
  </head>

Abbiamo così definito una "tela" larga 680 pixel e alta 500, con un colore rosso di sfondo. La sintassi dell'attributo background-color è mutata in backgroundColor con la versione 2.0, cambiamento comune a molti altri attributi; per garantire la compatibilità è sufficiente un semplice foglio di stile XSL che declini il codice secondo la versione supportata.

Il modo in cui vengono definite le singole regioni all'interno della presentazione ricorda il posizionamento assoluto degli elementi in una pagina DHTML: l'attributo id è essenziale se si vuole inserire successivamente un qualsiasi contenuto nella regione, i successivi quattro definiscono le dimensioni e le coordinate all'interno del root-layout, lo z-index stabilisce l'ordine di sovrapposizione delle regioni.

[

  <head>
    <layout>
      ...
      <region id="regione_1" background-color="white" width="200" height="100"
       top="10" left="20" z-index="5" fit="meet" />
    </layout>
  </head>

L'area denominata "regione_1" ha cioè una larghezza di 200 pixel, altezza 100 e verrà posizionata a 20 pixel dal margine sinistro e 100 dal margine superiore. L'attributo fit merita invece un più attento esame, perchè consente di adattare i media rispetto alle dimensioni dell'area che li ospita attraverso cinque possibili valori: hidden, fill, meet, slice e scroll: il primo esempio che abbiamo preparato (RealPlayer G2, RealONE) mostra i cinque diversi comportamenti applicati alla medesima immagine.

Il valore hidden mantiene invariate le dimensioni, eseguendo il cropping della parte sovrabbondante, mentre fill andrà di contro a riempire la regione, distorcendo se necessario l'immagine. Con meet e slice l'immagine viene ridimensionata mantenendo le corrette proporzioni, lasciando nel primo caso parte della regione vuota e tagliando la parte di troppo nel secondo. Con scroll infine si rimanda all'interfaccia il compito di fornire uno strumento per la visione del media nella sua completezza.

Le migliorie più significative apportate nella versione 2.0 riguardano la possibilità di articolare una presentazione in più finestre sincronizzate tra loro, inserire sottoregioni all'interno delle regioni e modificare il volume del suono a seconda della regione che ospiti il media.

Il Modulo di Temporizzazione e Sincronizzazione

Per quanto visto sinora, il modello di SMIL può sembrare una semplice riscrittura di HTML, dove i livelli creati con il tag <div> diventano regioni spostandosi nell'header del documento. La sfida lanciata da questo linguaggio prende invece forma nel Modulo di Temporizzazione e Sincronizzazione, in grado di combinare e alternare i singoli elementi della presentazione. Con i due soli elementi par e seq è infatti possibile articolare una timeline del tutto analoga a quella di una presentazione in Flash o Director, con ripetizioni e loop al suo interno.

Con il tag <seq> vengono infatti racchiusi media da porre in sequenza, eventualmente all'interno della stessa regione, mentre il tag <par> organizza i media in parallelo all'interno di regioni distinte. La flessibilià ottenibile nidificando ulteriormente questi elementi è notevole, ogni cosa è virtualmente esprimibile come una successione di elementi in sequenza o parallelo:

  <seq id="settimana" repeat="indefinite">
    <seq id="giorno_lavorativo" repeat="5">
     mi sveglio
      <par>
       faccio colazione
       leggo il giornale
      </par>
     esco col cane
      <par>
       vado al lavoro
       ascolto la radio
      </par>
      ...
    </seq>
    <seq id="giorno_festivo" repeat="2">
      ...
    </seq>
  </seq>

Abbiamo cioè che una settimana è composta dalla [I]seq[/I]uenza di sette giorni, o meglio di cinque giorni lavorativi e due festivi, a loro volta suddivisi in una [I]seq[/I]uenza di azioni singole o in [I]par[/I]allelo. Con l'attributo repeat è possibile indicare il numero di volte che si vuole ripetere il blocco, piuttosto che "indefinite" per andare in loop. SMIL 2.0 ha deprecato questo attributo, che viene comunque supportato per compatibilità all'indietro, in favore degli attributi repeatCount e repeatDur. I nuovi attributi consentono di specificare il numero di volte oppure la durata complessiva.

Una volta definiti i blocchi conponenti della presentazione, non resta che temporizzare questi ultimi, piuttosto che i singoli elementi multimediali in essi contenuti (sinora limitati a immagini e testo, per non confondere le idee) con l'attributo begin e uno tra gli attributi end o dur a scelta.

Il formato base dei tre attributi, hh:mm:ss.dd, definisce un intervallo in ore, minuti, secondi e decimi di secondo. Con tre sintassi proprietarie è possibile specificare in modo più semplice intervalli di tempo per ognuno dei media player:

  • dur="15s" in RealPlayer
  • dur="15sec" in Quicktime
  • dur="15" in Internet Explorer

Per begin e end esistono altre possibilità, ad esempio indicare l'inizio di un altro media, attraverso l'id associato ad esso. In SMIL 1.0 utilizzeremo:

begin="id([identificatore])(5s)
in SMIL 2.0 begin="[identificatore].begin+5s"

oltre a poter utilizzare molti altri eventi (quali .end, .click) e combinarli tra loro.

Il secondo esempio mostra l'utilizzo combinato di SMIL 1.0 e dei media type proprietari introdotti da RealPlayer G2 (RealPix e RealText), per supplire alla mancanza di un modulo di animazione nella prima versione del linguaggio.

Ti consigliamo anche