8. Exportation
8.2 Étude de l’exportation de LimSee3
Dans cette section, nous présentons les études d’exportation d’un document LimSee3 vers SMIL, XHTML et aussi l’exportation d’un document avec un template.
8.2.1 Étude de l’exportation vers SMIL
Pour mieux comprendre les mécanismes d’exportation vers SMIL, nous allons utiliser l’exemple du document LimSee3 présenté dans la section 6.4 et le convertir dans le format de document SMIL. La Figure 9 montre la structure de l’exemple qui est composé de trois parties séparées children, timing, et layout.
36 Exportation
Figure 9 : La structure de l'exemple (Liste 1)
Exportation de la structure spatiale
SMIL définit la disposition dans la section head du document. LimSee3 ne définit pas explicitement le root-layout. En fait, c’est la section spatiale de l’objet de plus haut niveau qui joue le rôle de root-layout. Les attributs de root-layout correspondent aux attributs spatiaux de l’élément de plus haut niveau de la structure logique. La région de SMIL correspond exactement à la définition LimSee3 smil:region. La source SMIL de la section layout correspondante à l’exportation de l’exemple est listée ci-dessous (liste 2):
Liste 2: la section spatiale de SMIL
1. <layout type="text/smil-basic-layout">
2. <root-layout id="rootLayout" width="500" height="300"/> 3. <region left="auto" top="auto" width="100%" height="50"
id="r_title"/>
4. <region width="350" top="50" left="auto" height="250" id="r_image1"/>
5. <region backgroundColor="green" showBackground="always" top="50" width="150" left="350" height="250" id="r_desc"/> 6. </layout>
Les objets médias ne sont pas associés aux définitions de région. Par contre, l’attribut
region d’un objet indique la région dans laquelle il sera placé. En plus, l’élément layoutRef définit la référence d’une région vers un objet média.
Exportation de la structure temporelle
Le modèle de document LimSee3 s’appuie sur plusieurs éléments et attributs de SMIL. Les éléments smil:par, smil:seq, smil:excl sont identiques à ceux de SMIL. En plus,
37
le container de temps défaut pour le body est la séquence (seq). C’est pourquoi nous intercalons un container par représentant la section timing entre body et son contenu. La liste 3 présente la source du corps de document exporté de l’exemple 6.4.
Liste 3: La section temporelle de SMIL
7. <body id="body"> 8. <par>
9. <text src="medias/title.txt" dur="indefinite" region="r_title"/> 10. <par begin="3s" dur="8s">
11. <img src="medias/scene1.jpeg" region="r_image1"/> 12. <text src="medias/desc.txt" region="r_desc"/> 13. </par>
14. </par> 15. </body>
Notons aussi que le template qui est un « document à trous » ne contient pas explicitement d’un élément multimédia ni d’une disposition (temporelle ou spatiale). Donc, nous l’ignorons dans l’exportation.
Pour l’instant, LimSee3 ne supporte pas les animations et les transitions. Si ces notions viennent enrichir LimSee3, cela risque de rendre l’exportation plus problématique.
Finalement, la Figure 10 résume le principe de l’exportation de LimSee3 vers SMIL.
Figure 10: La correspondance entre le document LimSee3 et le document SMIL
Exportation vers XHTML+SMIL
L’autre format de sortie issu des travaux de SMIL est celui proposé par Microsoft, XHTML+SMIL [Schmitz 2000]. L’exportation de LimSee3 vers ce format est un peu
38 Exportation
différente de précédent. Cependant, XHTML+SMIL utilise le mécanisme de positionnement spatial absolu (position:absolute) de CSS et l’inclut dans la structure temporelle de SMIL. Cette conversion fait perdre quelques attributs, car CSS n’est pas complètement compatible avec l’équivalent SMIL. Ainsi, dans cet exemple, l’attribut
showBackground n’est pas généré parce que ce langage ne contient rien d’équivalent.
Liste 4: L’exportation de l’exemple vers XHTML+SMIL code
Il est possible d’intégrer du code JavaScript qui récupère les événements générés par le navigateur et permet de contrôler la synchronisation des objets média.
8.2.2 Étude de l’exportation vers XHTML
Comme l’exemple ci-dessus l’a montré, la conversion d’un document LimSee3 vers SMIL ne pose pas de grande difficulté du fait de son emprunt des concepts de SMIL. Nous décrivons ici les problèmes d’exportation de LimSee3 vers le format XHTML plus CSS et JavaScript pour lequel les difficultés sont plus importantes puisque les synchronisations n’y sont pas explicitement définies et qu’elle sera découvert de recourir à un ordonnanceur (voir la section 9.3) couplé avec le navigateur. Il faut analyser les structures et les sémantiques de XHTML pour identifier les correspondances possibles entre les éléments deux langages.
La structure d’un document LimSee3 est très différente de celle d’un document XHTML.
1. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:smil="http://www.w3.org/2001/SMIL20"> 2. <head> 3. </head> 4. <body> 5. <smil:par>
6. <smil:text src="medias/title.txt" dur="indefinite"
style="position:absolute;left:auto;top:auto;width:500;height:50;" /> 7. <smil:par begin="3s" dur="8s">
8. <smil:img src="medias/img1.jpg" style="position:absolute;left:auto;top:50;width:350;height:250;" /> 9. <smil:text src="medias/desc.txt" style="position:absolute;left:350;top:50;width:150;height:250;" /> 10. </smil:par> 11. </smil:par> 12. </body> 13. </html>
39
Nous analysons ici les correspondances possibles entre des éléments LimSee3 et des éléments XHTML ainsi que les capacités d’intégration de JavaScript et CSS :
1. La structures logique : Les éléments objets complexes qui structurent des documents et groupent des sous-objets et des éléments médias correspondent aux étiquettes div et
span de XHTML à décorer par des attributs CSS pour ce qui est des aspects spatiaux. 2. Les objets médias : De façon générale, l’élément textuel correspond au paragraphe
(étiquette p) de XHTML. Les autres objets médias sont convertis vers XHTML par l’étiquette img (image), object ou embed (vidéo, audio, animation). XHTML ne supporte pas de descriptions de temps (les attributs dur, begin, end,…) ou des synchronisations entre des objets. De plus, un lecteur de document multimédia doit être capable de suivre et traiter les états de chaque élément média lors de l’exécution du document (e.g. visible, invisible, begin, stop, outofsync,…).
Pour compenser cette lacune de XHTML+CSS, il faut utiliser un langage externe exécutable par les lecteurs Web. C’est le cas de JavaScript qui permet de récupérer et traiter les états des objets. Dans ce cas, le navigateur appelle les lecteurs de média externes (audio, vidéo, animation) qui agissent comme des plugins pour la présentation d’objets médias.
3. La disposition spatiale : Les éléments layout, smil:region basé sur SMIL sont compatibles avec le mécanisme de disposition absolue de CSS [Bulterman 2004, 281- 283].
4. Les événements : Les événements sont divisés en deux catégories : les interactions d’utilisateur (les événements interactifs) comme mouseclick, mouseover,… et les événements non-interactifs comme beginevent, endevent, outofsync,… qui sont générés par le système pendant l’exécution. JavaScript est capable de récupérer la plupart des événements interactifs. Au contraire, JavaScript ne peut pas traiter certains événements générés au cours de l’exécution comme outofsync, syncrestored du fait que les navigateurs délèguent la visualisation des médias aux plugins qui ne génèrent pas ces événements.
Pour pallier cette limité dans le cas des événements donc on peut calculer l’arrivé statiquement. C’est le cas des événements begin, end, dur qui sont liés la durée de l’exécution de média (vidéo, audio, animation). Lors de l’exécution, l’ordonnanceur peut utiliser des valeurs calculées pour déterminer et générer les événements du document. Cette approche risque de perdre certaines synchronisations entre des objets
40 Exportation
médias comme des synchronisations qui utilisent les événements irrécupérables (outofsync, syncrestored).
5. Le temps : XHTML ne supporte pas d’expression de temps dans un document. Aussi un ordonnancement est généré à partir des attributs temporels (dur, begin, end). JavaScript contrôle les durées de présentation de chaque objet média, et génère des événements non-interactifs et la synchronisation entre des objets médias. En effet, les containers du temps (par, seq, excl) sont convertis à l’ordonnancement. Donc JavaScript peut les traiter.
6. Les liens : LimSee3 propose des liens traditionnels comme XHTML. En plus, il est basé sur SMIL en ajoutant le temps dans un lien qui n’est pas supporté dans XHTML. Nous utilisons JavaScript pour contrôler l’exposition des liens temporels.
7. Les transitions et les animations : XHTML ne supporte pas des transitions et des animations. Pour l’instant, LimSee3 ne les supporte pas. Mais cette extension envisagée pour LimSee3 risque de poser des problèmes lors de son exportation du fait de JavaScript peut contrôler des coordonnées d’un média.
L’analyse ci-dessus monte que la plupart d’éléments LimSee3 sont convertibles vers XHTML en ajoutant du code JavaScript et CSS ainsi que la possibilité de jouer des éléments multimédias sur la plupart de navigateurs avec des plugins.
8.2.3 Étude de l’exportation avec un template
Le template est un squelette de document qui contraint la structure globale du document. L’exportation peut tirer parti des templates en proposant un mécanisme de prétraitement adapté. Dans cette section, le slideshow est utilisé comme un exemple de document multimédia qui s’appuie sur un template.
Figure 11: La structure de slideshow
Le slideshow est un cas particulier de document multimédia dont la structure globale prédéfinie (Figure 11) comporte une suite ordonnée de transparents. Le contenu de chaque transparent est un document complet qui contient des structures logique, spatiale, et temporelle séparé et qui conforme au squelette de slideshow. Donc, l’exportation d’un
tr a n sp a re n t 1
Slide 1
tra n sp a re n t 2Slide 2
tra n sp a re n t 3Slide 3
41
transparent réutilise la plupart de l’analyse du document général.
Pour le prétraitement d’un template, nous nous intéressons à la structure globale de template. À un instant donné, le slideshow dispose à l’écran un transparent et fournit diverses façons d’enchaîner la présentation vers un autre transparent (précédent, suivant, ou bien une page particulière). Dans le cas de XHTML, c’est à JavaScript de gérer les transparents et de récupérer les interactions d’utilisateurs pour générer les enchainements demandés. Dans le cas de SMIL, les transparents se situent dans une structure temporelle
« seq ». Chaque transparent fournit un bouton « suivant » et un bouton « précédant » qui
ont pour but de basculer vers le transparent suivant ou le transparent précédant. Cette structure définit le squelette de SMIL pour un transparent.
L’exportation avec un template permet de bien traiter les squelettes particuliers pour chaque application. En plus, elle permet aussi d’intégrer son résultat à l’application existant. C’est le cas de l’exportation de slideshow vers Slidy [Raggett 2005]. Slidy est une bibliothèque JavaScript qui génère et gère les transparents sous le format XHTML et les feuilles CSS spécifiques. L’exportation vers Slidy génère des sources XHTML en respectant les contraints de Slidy. Par exemple, Slidy définit un transparent par une étiquette div utilisé la classe CSS slide :
<div class="slide" id="L1.L2" style="width:800; height:600; ">…</div>
Le contenu de transparent est les éléments descendants de cette étiquette. L’ordonnanceur en JavaScript rajoute la disposition temporelle dans le document résultat.
En plus, cette approche profite des cadres d’application existants. Par contre, elle a la dépendance de cadre d’application externe. En plus, Il manque un mécanisme générique pour le problème d’exportation.
8.2.4 Bilan sur l’étude des besoins d’exportation
Les exemples ci-dessus ont illustré les deux catégories d’exportation nécessaires:
• Un document LimSee3 général défini avec des structures internes de LimSee3 pour générer les enchaînements demandés.
• Un document LimSee3 créé à partir d’un template LimSee3.
42 Exportation
cible. Il faut chercher les correspondances entre les concepts élémentaires (image, vidéo, région,…) du document LimSee3 et du format cible. Puis, les relations entre la structure du document LimSee3 et le format cible doivent être spécifiées afin de déterminer le processus de conversion.
Dans le deuxième cas, le template donné par une structure globale permet de prétraiter l’exportation pour une application particulière. En plus, cela sépare bien le contenu et la structure de document.
Enfin, cette étude nous permet de dégager un ensemble de critères afin d’évaluer les différentes solutions pour le problème d’exportation :
• Adaptation à plusieurs formats : comme on l’a vu, les formats du document cible sont variés. Donc la solution doit être la plus adaptée à cette diversité de formats afin d’expérimenter un cadre d’application qui permet de créer facilement un nouveau transformateur pour un nouveau format.
• Extensibilité : l'exportation doit prendre en compte les changements et les évolutions de LimSee3 ou des formats cibles.
• Optimisation de résultat: l’exportation doit être capable d’optimiser le résultat obtenu pour chaque format cible et également pour chaque type de lecteur.
• Performance d’exportation: l’algorithme d’exportation doit être efficace.
• Facilité de conception : la proposition doit être facile à mettre en œuvre et également à créer un nouvel exportateur.