|
|
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
|