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

Il profilo SMIL+TIME per Explorer

Integrazione di funzionalità SMIL in HTML con Internet Explorer
Integrazione di funzionalità SMIL in HTML con Internet Explorer
Link copiato negli appunti

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.

Ti consigliamo anche