Una volta illustrato il profilo XHTML+SMIL, esaminiamo qualche accorgimento per modificare il codice XHTML+SMIL, in modo che venga accettato da Internet Explorer.
Nota: Si tenga presente innanzitutto che il codice SMIL viene considerato da Internet Explorer 6 come contenuto attivo e, pertanto, viene bloccato: per riprodurre correttamente i prossimi esempi, bisogna agire sulla barra informazioni e consentire il contenuto bloccato.
L’implementazione di XHTML+SMIL presente in Internet Explorer si chiama HTML+TIME; tale supporto è stato inserito, inizialmente, nella versione 5.5 del browser, per poi essere esteso nella versione 6.
Le differenze tra HTML+TIME e XHTML+SMIL consistono, principalmente, in una serie di direttive proprietarie, che si aggiungono o sostituiscono codice XHTML+SMIL standard, nella dichiarazione dei namespace e negli stili CSS.
Partiamo dal codice XHTML+SMIL standard:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+SMIL //EN"
"http://www.w3.org/2001/SMIL20/WD/xhtmlplussmil.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:smil="http://www.w3.org/2001/SMIL20">
<head>
<title>Esempio pagina HTML+TIME</title>
</head>
<body>
<smil:seq repeatCount="indefinite">
<div smil:dur="2">Prova HTML+TIME</div>
<div smil:dur="2">By Dott. Alessandro Meo</div>
</smil:seq>
</body>
</html>
Per prima cosa bisogna sostituire l’URN del namespace “smil” ed inserire una processing instruction per associare al namespace “smil” l’implementazione HTML+TIME:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+SMIL //EN"
"http://www.w3.org/2001/SMIL20/WD/xhtmlplussmil.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:smil="urn:schemas-microsoft-com:time">
<?import namespace="smil"
urn="urn:schemas-microsoft-com:time"
implementation="#default#time2" />
<head>
<title>Esempio pagina HTML+TIME</title>
</head>
<body>
<smil:seq repeatCount="indefinite">
<div smil:dur="2">Prova HTML+TIME</div>
<div smil:dur="2">By Dott. Alessandro Meo</div>
</smil:seq>
</body>
</html>
Questo fa sì che tutti gli elementi con namespace “smil” vengano trattati come codice SMIL (cfr. “smil:seq” nel precedente esempio); tuttavia questo non vale per gli attributi esterni a tali elementi (cfr. “smil:dur” nel precedente esempio).
Per ovviare a questa mancanza bisogna modificare lo stile CSS degli elementi con namespace diverso da “smil”, ma che abbiano al loro interno attributi SMIL; in particolare bisogna impostare a “url(#default#time2)” la proprietà “behavior”, (si noti che tale proprietà non è presente nello standard CSS). Inoltre deve essere rimosso il namespace “smil” dagli attributi. Ecco come deve essere modificato l’esempio precedente:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+SMIL //EN" "http://www.w3.org/2001/SMIL20/WD/xhtmlplussmil.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:smil="urn:schemas-microsoft-com:time">
<?import namespace="smil" urn="urn:schemas-microsoft-com:time" implementation="#default#time2" />
<head>
<title>Esempio pagina HTML+TIME</title>
</head>
<body>
<smil:seq repeatCount="indefinite">
<div style="behavior: url(#default#time2);" dur="2">Prova HTML+TIME</div>
<div style="behavior: url(#default#time2);" dur="2">By Dott. Alessandro Meo</div>
</smil:seq>
</body>
</html>
Questo è un esempio, funzionante con Internet Explorer, di integrazione tra SMIL e XHTML. Ovviamente è possibile estrapolare il codice CSS dal corpo del documento ed inserirlo nell’elemento “style” una volta per tutte; inoltre non ha più senso lasciare la dichiarazione “DOCTYPE”, né la definizione del namespace di default, infatti, il risultato della nostra manipolazione non è né un documento XHTML, né un documento XHTML+SMIL. Ecco il prodotto finale:
<?xml version="1.0"?>
<html xmlns:smil="urn:schemas-microsoft-com:time">
<?import namespace="smil"urn="
urn:schemas-microsoft-com:time"
implementation="#default#time2" />
<head>
<title>Esempio pagina HTML+TIME</title>
<style>
.smil {
behavior: url(#default#time2);
}
</style>
</head>
<body>
<smil:seq repeatCount="indefinite">
<div class="smil" dur="2">Prova HTML+TIME</div>
<div class="smil" dur="2">By Dott. Alessandro Meo</div>
</smil:seq>
</body>
</html>
In realtà, in alcuni casi è possibile semplificare maggiormente il codice: se gli unici elementi SMIL che vengono utilizzati sono “par”, “seq” ed “excl”, è possibile sostituirli con elementi XHTML in cui venga inserito l’attributo “timeContainer”. In questo modo non è più necessario specificare né la dichiarazione del namespace “smil”, né la processing instruction:
<?xml version="1.0"?>
<html>
<head>
<title>Esempio pagina HTML+TIME</title>
<style type="text/css">
.smil { behavior: url(#default#time2); }
</style>
</head>
<body>
<div class="smil" timeContainer="seq" repeatCount="indefinite">
<div class="smil" dur="2">Prova HTML+TIME</div>
<div class="smil" dur="2">By Dott. Alessandro Meo</div>
</div>
</body>
</html>
Per finire, ecco un esempio più complesso:
<?xml version="1.0"?>
<html xmlns:smil="urn:schemas-microsoft-com:time">
<?import namespace="smil"
urn="urn:schemas-microsoft-com:time"
implementation="#default#time2" />
<head>
<title>Esempio pagina HTML+TIME</title>
<style>
.smil { behavior: url(#default#time2); }
</style>
</head>
<body>
<smil:par repeatCount="indefinite">
<div style="text-align: center;">
<div class="smil" begin="1" dur="5">
<smil:animateColor attributeName="color" from="#FFFFFF" to="#000000" dur="2" accelerate="0.7"/>
<span style="font-family: sans-serif; font-size: 20px; font-weight: bold;">
Prova HTML+TIME
</span>
</div>
<div class="smil" begin="1" dur="5" style="position: relative;">
<smil:animate attributeName="top" from="-200" to="0" begin="1" dur="2" decelerate="0.4"/>
<span style="font-family: sans-serif; font-size: 20px; font-weight: bold; font-style: italic; color: rgb(255,0,0);">
by Dott. Alessandro Meo
</span>
</div>
<div class="smil" timeContainer="par" begin="3.5" style="font-family: sans-serif; font-size: 16px; font-weight: bold; color: rgb(0,0,0);">
<a href="http://www.meoale.it/" style="color: rgb(0,120,0);">
<span class="smil" begin="0.2" dur="1.5">www</span>
<span class="smil" begin="0.4" dur="1.5">.</span>
<span class="smil" begin="0.6" dur="1.5">meoale</span>
<span class="smil" begin="0.8" dur="1.5">.</span>
<span class="smil" begin="1" dur="1.5">it</span></a>
</div>
</div>
</smil:par>
</body>
</html>
In questa lezione abbiamo visto alcuni esempi di documenti HTML+TIME, nella prossima lezione verrà invece spiegata la relazione tra SMIL e gli MMS.