SMIL Synchronized Multimedia Integration Language

Slides:



Advertisements
Présentations similaires
Jean-Pierre Villain - Qelios W3Café Accessibilité - Paris – Avril 2011
Advertisements

Été INF1025 Driouch Elmahdi
HTML Abda Anne Plan Présentation Structure Texte Listes Images Liens Tableaux Formulaires.
Intégration fine de médias dans les présentations multimédias
IN’Tech Le club de technologie de Grenoble Network Initiative animé par l’INRIA Rhône-Alpes.
DTD Sylvain Salvati
Conception de Sites Web dynamiques
Conception de Site Webs Interactifs Cours 4
Dispositif de formation multimédia Préparation à lépreuve écrite du concours dentrée à lécole daide-soignant A.P.P. - Digne-les-Bains.
Domaines nominaux XSLT
Web traditionnel
Etude des Technologies du Web services
XML-Family Web Services Description Language W.S.D.L.
HTML.
Présentation de la séquence de cours sur les interactions HTML-javascript Laure Walser, 11 juin 2010.
Des outils pour le développement logiciel
Word Gabarit les étapes à suivre? C) Synthèse /rapport personnel (disponible sur votre site dans la site section travaux) et la version graphe finale.
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
Mars 2013 Grégory Petit
La Scénarisation Pédagogique
Introduction Evolution technologique –Puissance des machines –Réseau rapides (ADSL : 30 euros/mois) –Manipulation digitale de l'audio et de la vidéo Applications.
Document élaboré à Centrale Paris par Pascal Morenton LES TECHNOLOGIES DU WEB 1. LES PHASES D UN DEPLOIEMENT DE RESEAUX 2. LE LANGAGE HTML 3. LE LANGAGE.
Jonathan Montois Cyrille Kriegel
Le flux RSS Symbole du flux RSS..
8 - XML Cours XML.
03/09/2014BELKHIR ABDELKADER Le Cours Virtuel Belkhir Abdelkader Laboratoire LSI USTHB
Le langage XHTML 420-S4W-GG Programmation Web Client
Jacques Cartier, enseignant à l’Université de Franche-Comté Unité de Formation et de Recherche - Sciences du Langage, de l’Homme et de la Société Besançon.
Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède.
LANGAGE HTML Le HTML (Hyper Text Markup Langage) est un langage universel utilisé sur le World Wide Web. Le HTML permet de : * Publier des documents sur.
SSPT – CHOPIN module 2 Système de gestion de contenu de sites web Par Liette Pothier, Chargée de projet Nancy Dodier, technicienne en informatique.
L’ ACCESSIBILITE « C’est mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure.
 Objet window, la fenêtre du navigateur
Programmation Web : Introduction à XML
Programmation Web : Schémas XSD Jérôme CUTRONA 19:27:07 Programmation Web
Technologies web et web sémantique TP3 - XML. XML eXtensible Markup Language (langage extensible de balisage) – Caractéristiques: méta-langage = un langage.
1 : Le nom du fichier contenant les métadonnées. 2 : Affichage des données du programme (Varie selon le mode – lecture/saisie). 3 : Application de filtres.
G.KEMBELLEC - UP81 Master 2 THYP Cas pratique d’utilisation De SimpleXML Un lecteur de RSS Novembre 2009.
S'initier au HTML et aux feuilles de style CSS Cours 5.
27/05/2008© 1 présente Les sites WEB Les premiers pas.
POWERPOINT.
Visualisation d’un entrepôt de données Pré soutenance technique
S'initier au HTML et aux feuilles de style CSS Cours 5.
SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008.
INTERNET Le langage HTML
Initiation au JavaScript
Module : Langage XML (21h)
IFT Introduction au multimédia Cours 10 FORMAT DE FICHIER SWF.
Karine Vallin - Dorian Baysset
Introduction à MathML Par Katia Larrivée UQO Le 18 mars 2004.
Introduction à SVG Scalable Vector Graphic. Informations ● Plus d'informations ici (draft, tutoriaux, outils... ): –
ORGANISATION DE L’ENSEIGNEMENT
SOAP et les RPC XML SOAP WSDL RPC. Rappels sur le XML Langage avec des balises Très lisible Pour stocker des données Séparation entre contenu et présentation.
Premiers pas avec Flash
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
FLASH MX 1ère Séance. Introduction Création d’animation pour le Web, pouvant contenir une forte interactivité. Faible poids des fichiers. Compatible avec.
Présentation Dreamweaver 8 (1) Nina BOUAZIZ et Matthieu DI RUSSO SI28.
Dreamweaver le retour Avec Les Formulaires Les Calques
Plan de la présentation Le langage HTML Dreamweaver MX Les premiers outils pour créer une page web :  Propriétés d’une page  Création de cadres  Création.
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.
DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8.
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver CS4 séance 1 Ahmed Aryan – Isma Teir.
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
SI28 : D REAMWEAVER 2 Audrey BUISSON – GSU05 Romain LASSALLE – GI05 1 SI28 – Ecriture interactive et multimedia.
INF2005– Programmation web– A. Obaid Les cartes. INF2005– Programmation web– A. Obaid Images cliquables Outil permettant d'effectuer des liens à partir.
Conception de site web. Place du Web dans le monde  Entreprises  Commerce électronique  Réseaux sociaux  Les municipalités  Les partis politiques.
SMIL - Yves bekkers - IFSIC1 SMIL Synchronized Multimedia Integration Language par Yves Bekkers.
Synchronized Multimedia Integration Language par Yves Bekkers
Transcription de la présentation:

SMIL Synchronized Multimedia Integration Language Réalisé Par : Ahmed BENSI Fouzi KERAÏM Master 1 Informatique Université Paris 13

Sommaire Introduction Historique Les Avantages Structure d’un document SMIL Organisation d’un document SMIL Difficultés rencontrées Exemples Conclusion

Introduction SMIL permet de créer des présentations multimédia interactives. Le langage SMIL est basé sur le XML et XHTML. Il permet de synchroniser plusieurs éléments multimédia tels que du son, de la vidéo, des images, ou encore du texte . Pour lire une présentation SMIL , on utilise des lecteurs multimédia (Real Player , Quick Time, X-Smiles). Pour éditer un fichier SMIL, on peut utiliser un simple éditeur de texte. Il existe d’autres éditeurs (RealNetworks, Limsee 2)

Historique Décembre 1995 - Début de la conception SMIL Juin 1998 - Recommandation SMIL 1.0 de W3C Août 1999 - Première ébauche publique de SMIL 2.0 Août 2001 - Recommandation SMIL 2.0 de W3C Septembre 2005 - Recommandation SMIL 2.1 de W3C En cours - SMIL 3.0

Les Avantages Recommandation W3C. Ne nécessite aucune compétence en programmation. Les composants peuvent appartenir à des serveurs web multiples. Ils sont récupérés à l'exécution de la présentation. Interopérabilité. Adaptabilité. Il est possible de définir des liens entre différentes présentations SMIL. Présentation au fil de l'eau(Streamed).

Structure d’un document SMIL Afin de respecter les recommandations du W3C , quelques déclarations doivent être faites. Une première ligne identifiant le document comme un fichier XML : <?xml version="1.0"?> Ensuite une ligne indiquant qu’il s’agit plus précisément d’un document SMIL 2.0 : <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN"                       "http://www.w3.org/2001/SMIL20/SMIL20.dtd"> La racine du document SMIL, c'est-à-dire la balise <SMIL>  doit contenir au moins un attribut  xmlns (XML Namespace) : <smil xmlns="http://www.w3.org/2001/SMIL20/Language">

La structure d'un document SMIL Exemple.smi body head Layout par seq switch Region 1 Region 2 Animation Media Media Transition Transition

Organisation d’un document SMIL 1- En-tête : <layout> : Détermine comment les éléments, dans le corps du document, sont positionnés sur une surface . Il peut contenir les éléments suivants : <root-layout> : Détermine la taille de la fenêtre dans laquelle la présentation SMIL est rendue. <region> : L'élément region contrôle la position, la taille et l'échelle des éléments de type objet média.

Organisation d’un document SMIL 2- Positionnement : <head> <layout> <root-layout width= "400" height= "450" /> <region id="region1" top="10 " right="10 " left="10" width="380" height= " 300" /> <region id="region2" top=« 320" right="10"  left="10" width="380" height="70" /> </layout> </head> Région 1 Région 2

Organisation d’un document SMIL 3- synchronisation : Le corps du document <body> contient la structure temporelle et les médias Parallèle <par> : Les éléments contenus sont joués en même temps Séquence <seq> : Les éléments contenus sont joués l'un après l'autre, dans l'ordre. Exclusif <excl> : Les éléments contenus ne peuvent pas être joués en même temps. Exemple : pour lire 2 fichiers son l’un après l’autre : <seq> <audio src= "son1.mp3"/> <audio src= "son2.mp3"/> </seq>

Organisation d’un document SMIL 4- Objet média : SMIL utilise un concept d’ « objet média » afin d’intégrer et de synchroniser du multimédia. Voici les différents éléments permettant de les intégrer : <Text> : Pour lire un fichier au format .txt,… <Img> : Pour lire un fichier image au format JPG, GIF, PNG… <Audio> : Pour lire un fichier audio brut ou compressé (WAV, MP3, RM,…) <Video> : Pour lire un fichier vidéo qui peut aussi contenir du son (MPEG, AVI, MOV) <Animation> : Pour lire une animation graphique en Flash ou SVG. <Textsteam> : Pour un flux de texte. <Ref > : Référence à un objet média générique, en cas de doute sur le groupe d'appartenance d'un objet média.

Organisation d’un document SMIL 5- Attributs: Src : Localiser le fichier du média de base. Region : identifiant d’une surface d’affichage. Type : le type de l'objet média. Dur : Durée de l’objet média. Fit : permet de définir la manière dont un objet doit remplir une région.

Organisation d’un document SMIL 6- Le contrôle du temps : En SMIL, il y a deux manières de gérer le temps dans une présentation : en spécifiant les temps de début et de fin, ou en définissant une durée pour un média. Exemple 1: <par> <img scr="./image.jpg" begin="2s"/> <audio scr="son.wav" begin="5s"/> </par> Exemple 2 : <img src="./image.jpg" dur="15s" />

Organisation d’un document SMIL 7- Transitions : Définies dans le <head>, utilisées dans le <body> Exemple : <head> <transition id="wipe1" type="veeWipe" subtype="leftToRight" dur="1s"/> </head> <body> <seq> <img src="butterfly.jpg" dur="5s"... /> <img src="eagle.jpg" dur="5s" fill="transition" transIn="wipe1" ... /> </seq> </body>

Organisation d’un document SMIL 8- Liens : Définis par les éléments <a> et <area>, similaire à la technologie HTML. Les attributs pour <a> : Target : indique l'environnement ou le lien va s'ouvrir. Accesskey : Raccourcis clavier. Href : prend pour valeur l'URL de la cible du lien. Replace : la présentation cible remplace la présentation courante. Les attributs pour <area> : Coords : spécifie une zone de lien.

Organisation d’un document SMIL 9- Adaptabilité : Fournir un contenu adapté à la plateforme cible Paramètres Systèmes : taille de l’écran, débit réseau, … Les préférences des utilisateurs : langues,… Exemple : <switch> <audio src="french.wav" systemlanguage="fr"/> <audio src="english.wav" systemlanguage="en"/> </switch>

Organisation d’un document SMIL 10- Intéropérabilité : Integration facile aux autres technolgies du Web. Dans un document HTML avec l’élément <embed> Exemple : <html> <body> <embed src= " exemple.smi" width= "300"   heigth= " 400 " /> </body> </html>

Difficultés rencontrées Trouver des fichiers compressés ram pour tester la video. L’apparence change d’un visualisateur à un autre. Tous les visualisateurs ne supportent pas tous les formats. Sources d’aide Lien Internet - W3C : http://xmlfr.org/w3c/TR/smil20 - limsee : http://limsee2.gforge.inria.fr Ouvrage : - XML Langages et applications (Alain MICHARD)

Exemples

Conclusion L'adapatation du contenu permet de considérer les limitations des terminaux mobiles et des préférences utilisateurs. Le developpement de l'ADSL permet la généralistation de cette technologie (présentation au fil de l'eau).