|
|
XHTML+SMIL
|
XHTML+SMIL vous laissera écrire le code de SMIL dans un document valide de XHTML. Ajouter la synchronisation, l'animation, la transition et d'autres éléments de SMIL à vos pages Web. Se rendre juste compte qu'en date d'Internet d'aujourd'hui Explorer>5.5 est le seul navigateur du choix.
|
Une manière simple d'expliquer le profil de XHTML+SMIL est en disant quel modules de SMIL ne contient pas
Module de disposition : Le module de disposition de SMIL 2.0 n'est pas inclus. Le modèle de disposition de XHTML/CSS fournit la fonctionnalité de disposition.
Enchaînement du module : Le module de enchaînement de SMIL 2.0 n'est pas inclus, car XHTML fournit lier la fonctionnalité.
Module de structure : Le module de structure de SMIL 2.0 n'est pas inclus, pendant que le document de XHTML est défini pour être la langue de centre serveur, et ainsi fournit les éléments et la sémantique équivalents.
Module de Metainformation : Le module de SMIL 2.0 Metainformation n'est pas inclus, car XHTML fournit la fonctionnalité de méta-données.
Les modules de SMIL qui sont laissés alors sont :
- Module d'animation
- Module de commande contente
- Module résultant de médias
- Synchronisation et module de synchronisation
- Module de manipulations de Temps
- La transition effectue le module
Ce les modules devraient être asse'à jouer avec, puisque la fonctionnalité « manquante » de modules sont pleinement approuvées dans XHTML/CSS.
|
Namespace elements are included with a
SMIL namespace declaration:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:smil="http://www.w3.org/2001/SMIL20">
|
HTML+TIME |
HTML+TIME est basé sur (X) le profil de HTML+SMIL. C'est l'exécution de Microsoft dans l'Internet Explorer et emploie le comportement de l'élément time2. Un namespace différent est employé mais il a une grande partie du funcionality décrit pour XHTML+SMIL. L'association des éléments au comportement time2 employant un attribut de classe de CSS nous donne ce dossier minimal :
|
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
</body>
</html>
|
Au-dessous de est la source pour la présentation de M. Zebra qui a été présentée dans la section de section d'introduction. La grande différence est disposition d'écran puisque le module de disposition de SMIL n'est pas inclus. Au lieu de cela j'avais l'habitude le modèle intégré de CSS pour décrire la disposition d'écran. J'ai également choisi d'inclure les texte-éléments en utilisant le <p> au lieu de les inclure comme texte-dossiers.
|
<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
< .time {behavior: url(#default#time2);}>
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY width="640" height="560" bgcolor="#FFFFFF">
<t:par>
<t:audio src="audio/Mr._Zebra.mp3" alt="Mr. Zebra perfomed by
Tori Amos" dur="19.6s"/>
<img class="time" src="images/zebra.jpg" alt="a zebra" width="640"
height="480" dur="18s" style="position: absolute; left: 0px; top: 0px;
width: 640px; height: 480px;"/>
<p class="time" dur="8s" style="position: absolute; left: 0px;
top: 480px; width: 640px; height: 80px; background-color:#FFFFFF" >
Hello Mr. Zebra</p>
<p class="time" begin="10s" style="position: absolute; left: 0px;
top: 480px; width: 640px; height: 80px; background-color:#FFFFFF">
Ratatouille Strychnine</p>
<p class="time" begin="13s" style="position: absolute; left: 0px;
top: 480px; width: 640px; height: 80px; background-color:#FFFFFF" >
sometimes she's a friend of mine</p>
<img class="time" src="images/sweater.jpg" alt="a sweater" begin="4s"
style="z-index:1; position: absolute; left:500px; top:360px; width:140;
height:120"/>
<img class="time" src="images/snow2_oil.jpg" alt="snow" begin="5.5s"
style="z-index:1; position: absolute; left:500px; top:240px; width:140;
height:120"/>
<img class="time" src="images/snow1_oil.jpg" alt="snow" begin="6s"
style="z-index:1; position: absolute; left:500px; top:120px; width:140;
height:120"/>
<img class="time" src="images/snow1_charcoal.jpg" alt="snow"
begin="6.5s" style="z-index:1; position: absolute; left:500px;
top:0px; width:140; height:120"/>
<img class="time" src="images/zebra_swirl80.jpg" alt="a swirled zebra"
begin="18s" style="position: absolute; left: 0px; top: 0px;
width: 640px; height: 480px;"/>
</t:par>
</BODY>
</HTML>
|
|
|
Keywords: xhtml examples,
xhtml tutorial,
smil player,
smil tutorial,
xhtml example,
smil example,
smil multimedia,
xhtml editor,
mms smil,
w3c xhtml,
xml xhtml,
text xhtml,
xhtml xslt,
smil text,
xsl xhtml,
xhtml svg,
xhtml dtd,
xhtml reference,
xhtml tags,
xhtml cdata,
xhtml namespace,
xhtml template,
xhtml stylesheet,
xhtml attributes,
xhtml javascript,
embed xhtml,
layout xhtml,
xhtml code,
xhtml tag
xhtml element,
xhtml document,
xhtml attribute,
css xhtml,
using xhtml
|