Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Cr´ eer un document multim´ edia avec SMIL S´ ebastien Laborie Sebastien.Labori

Cr´ eer un document multim´ edia avec SMIL S´ ebastien Laborie Sebastien.Laborie@iutbayonne.univ-pau.fr http://slaborie.perso.univ-pau.fr 1 S´ ebastien Laborie Cr´ eer un document multim´ edia avec SMIL XML : eXtensible Markup Language Quelques rappels essentiels S´ ebastien Laborie 2 S´ ebastien Laborie XML : eXtensible Markup Language Le contexte : structurer/traiter/´ echanger des donn´ ees requˆ ete requˆ ete requˆ ete requˆ ete transformation transformation transformation transformation requˆ ete WWW N´ ecessit´ e de d´ eﬁnir un langage structur´ e (semi-structur´ e) et extensible. N´ ecessit´ e de prendre en compte la diversit´ e des informations ´ echang´ ees. 3 S´ ebastien Laborie XML : eXtensible Markup Language XML Document XML Compos´ es d’unit´ es de stockage appel´ ees entit´ es. Ces donn´ ees sont soit des donn´ ees simples soit des donn´ ees concourant au marquage (balisage). Le balisage permet de d´ ecrire la structure logique du document. Validation d’un document XML Un document XML est “bien form´ e” s’il respecte les r` egles de XML. XML fournit un m´ ecanisme pour contraindre les structures, les DTD (D´ eﬁnition de Type de Document). Un document XML peut ˆ etre “valide” par rapport ` a une ou plusieurs DTD. 4 S´ ebastien Laborie XML : eXtensible Markup Language Un exemple en XML <?xml version="1.0" encoding="iso-8859-1"?> <carnetDeContact> <contact> <adresse> <lignesAdresse> <ligne>IUT de Bayonne et du Pays Basque</ligne> <ligne>17 Place Paul Bert</ligne> </lignesAdresse> <codePostal>64100</codePostal> <ville>BAYONNE</ville> </adresse> <url>http://www.iutbayonne.univ-pau.fr</url> <logo src="http://www.iutbayonne.univ-pau.fr/logo.jpg" /> <tel t="fixe">05.59.57.43.70</tel> <tel t="fax">05.59.57.43.79</tel> </contact> <contact>...</contact> </carnetDeContact> 5 S´ ebastien Laborie XML : eXtensible Markup Language L’arbre XML carnetDeContact contact contact adresse url logo tel tel lignesAdresse codePostal ville ligne ligne ligne 6 S´ ebastien Laborie XML : eXtensible Markup Language Question ? Quel langage XML connaissez-vous ? 7 S´ ebastien Laborie XML : eXtensible Markup Language Les standards du W3C bas´ es sur XML 8 S´ ebastien Laborie XML : eXtensible Markup Language SMIL : Synchronized Multimedia Integration Language Une introduction au langage S´ ebastien Laborie 9 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction Un exemple de document multim´ edia Synchronisation Aﬃchage Interactivit´ e 10 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction Le contexte Pourquoi utiliser le langage SMIL ? D’autres langages de sp´ eciﬁcation de documents multim´ edia : Flash Javascript . . . SMIL est une recommandation du W3C (un “standard”) format ouvert d´ eﬁni par RealNetworks, Macromedia, Intel, IBM, Microsoft, Panasonic, Sony, Nokia, Philips, INRIA, CWI. . . DTD XML = ⇒Interoperabilit´ e Utilisation de toutes les technologies XML (XQuery, XPath, XSLT. . .) Beaucoup de projets Open Source autour des standards (Editeurs, Players. . .) Un langage en ´ evolution constante. 11 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction L’histoire de SMIL 1996 : W3C Workshop 1997 : Premi` ere r´ eunion du groupe de travail SYMM 1998 : La recommandation SMIL 1.0 est n´ ee Synchronisation et placement visuel d’objets multim´ edia Interactivit´ e Capacit´ e d’adaptation ` a diﬀ´ erents contextes 2001 : SMIL 2.0 Animation M´ eta-donn´ ees 2005 : SMIL 2.1 Eﬀets de transitions Ex´ ecution multi plates-formes (SMIL proﬁles) 2008 : SMIL 3.0 Outils suppl´ ementaires de structure et de contrˆ ole de la pr´ esentation 12 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction Tables des mati` eres 1 Introduction au langage SMIL Structure g´ en´ erale d’un document multim´ edia SMIL Dimension spatiale Dimension contenu Dimension temporelle Dimension hyperm´ edia 2 Autres fonctionnalit´ es Les animations Adaptation au contexte Sp´ eciﬁcation de m´ eta-donn´ ees 3 Les d´ eriv´ es du langage SMIL HTML+TIME puis Timesheets SMIL Timesheets MMS SVG - Animation 4 Les outils d´ evelopp´ es autour de SMIL Les ´ editeurs Les lecteurs 13 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Tables des mati` eres 1 Introduction au langage SMIL Structure g´ en´ erale d’un document multim´ edia SMIL Dimension spatiale Dimension contenu Dimension temporelle Dimension hyperm´ edia 2 Autres fonctionnalit´ es Les animations Adaptation au contexte Sp´ eciﬁcation de m´ eta-donn´ ees 3 Les d´ eriv´ es du langage SMIL HTML+TIME puis Timesheets SMIL Timesheets MMS SVG - Animation 4 Les outils d´ evelopp´ es autour de SMIL Les ´ editeurs Les lecteurs 14 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Structure g´ en´ erale d’un document multim´ edia SMIL La structure g´ en´ erale d’un document multim´ edia SMIL <head> ... </head> Sp´ eciﬁcations de l’aﬃchage, des m´ eta-donn´ ees et des transitions <smil> <body> ... </body> </smil> Synchronisation des objets multim´ edia, Sp´ eciﬁcation des informations hyperm´ edia 15 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension spatiale Sp´ eciﬁcation des zones d’aﬃchage x y R´ egion englobante R´ egion 1 R´ egion 2 R´ egion 3 R´ egion 4 . . . 16 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension spatiale Sp´ eciﬁcation des zones d’aﬃchage en SMIL <head> <layout> <root-layout background-color="#ffffcc" height="460" width="710"/> <region height="440" id="RVideo" left="10" top="10" width="440"/> <region height="230" id="RTitre" left="450" top="10" width="260"/> <region height="230" id="RRecette" left="450" top="240" width="260"> <region id="Ingdt1" left="30" top="100" width="200" height="50"/> </region> </layout> </head> 17 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension spatiale Exercice : Sp´ eciﬁer cette organisation spatiale en SMIL region1 500 600 (0,0) region2 region3 (200,150) 650 region4 region5 (570,200) 18 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension contenu Le corps d’un document multim´ edia SMIL <body> ... </body> Synchronisation des objets multim´ edia, Sp´ eciﬁcation des informations hyperm´ edia <smil> </smil> <head> ... </head> Sp´ eciﬁcations de l’aﬃchage, des m´ eta-donn´ ees et des animations 19 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension contenu Le corps d’un document multim´ edia SMIL 20 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension contenu Sp´ eciﬁcation des objets multim´ edia Audio : <audio id="..." src="..." begin="..." dur="..." end="..." /> Vid´ eo : <video id="..." src="..." begin="..." dur="..." /> Texte : <text id="..." src="..." region="..." /> Image : <img id="..." src="..." region="..." fit="fill" /> 21 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension temporelle Sp´ eciﬁcation de la timeline de la pr´ esentation Certains ´ el´ ements sont jou´ es en “parall` ele”. Certains ´ el´ ements sont jou´ es en “s´ equence”. Publicit´ e Titre Vid´ eo Recette 0s 5s 2m 11s 22 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension temporelle Sp´ eciﬁcation de la timeline en SMIL Conteneurs temporels SMIL : PAR et SEQ. <body> <seq> <img id="Publicite" src="pub.jpg" region="RPub" dur="5s"/> <par> <video id="Emission" src="Emission.avi" region="RVideo"/> <img id="Titre" src="Titre.jpg" region="RTitre"/> <img id="Recette" src="Recette.jpg" region="RRecette"/> </par> </seq> </body> 23 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension temporelle Exercice : Sp´ eciﬁer cette organisation temporelle en SMIL Image irit.jpg Image carte.jpg Texte sous-titrage.rt Vid´ eo presentation.avi Musique music.mp3 0s 5s 20s 95s 24 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension hyperm´ edia Sp´ eciﬁcation de liens hyperm´ edia Deﬁnition Liens hyperm´ edia Interne : permet de naviguer ` a l’int´ erieur d’une mˆ eme pr´ esentation. Externe : permet de naviguer vers d’autres pr´ esentations. Publicit´ e Titre Vid´ eo Recette l1 Autre document 0s 5s 2m 11s 25 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension hyperm´ edia Sp´ eciﬁcation de liens hyperm´ edia en SMIL <body> <seq> <img id="Publicite" src="pub.jpg" region="RPub" dur="5s"> <area href="http://www.pub.com"/> </img> <par> <video id="Emission" src="Emission.avi" region="RVideo"/> <img id="Titre" src="Titre.jpg" region="RTitre" dur="255s"> <area href="#Publicite" dur="100s"/> </img> <img id="Recette" src="Recette.jpg" region="RRecette"> <area coords="0,85,260,103" href="command:seek(52)"/> </img> </par> </seq> </body> 26 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Autres fonctionnalit´ es Tables des mati` eres 1 Introduction au langage SMIL Structure g´ en´ erale d’un document multim´ edia SMIL Dimension spatiale Dimension contenu Dimension temporelle Dimension hyperm´ edia 2 Autres fonctionnalit´ es Les animations Adaptation au contexte Sp´ eciﬁcation de m´ eta-donn´ ees 3 Les d´ eriv´ es du langage SMIL HTML+TIME puis Timesheets SMIL Timesheets MMS SVG - Animation 4 Les outils d´ evelopp´ es autour de SMIL Les ´ editeurs Les lecteurs 27 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Autres fonctionnalit´ es Les animations Les animations D´ eﬁnition (animation) L’animation consiste ` a donner l’illusion d’un mouvement ` a l’aide d’une suite d’images. Examples d’animation Mouvement d’un ensemble d’objets Translation Rotation Modiﬁcation de l’apparence d’un objet Modiﬁcation de taille Changement de couleurs 28 S´ ebastien Laborie SMIL : Synchronized Multimedia Integration Language Autres fonctionnalit´ es Les animations Les animations en SMIL Sp´ eciﬁcation d’une animation Une animation en SMIL se d´ ecrit dans la sp´ eciﬁcation d’un objet multim´ edia. D´ eclaration de l’animation Mouvement d’un ensemble d’objets Translation : <animateMotion targetElement="IdRegion" from="0,0" to="10,10" dur="3s"/> Pas de rotation Modiﬁcation de l’apparence d’un objet uploads/s1/ cours-smil.pdf