XML : quelques applications - PowerPoint PPT Presentation

xml quelques applications n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
XML : quelques applications PowerPoint Presentation
Download Presentation
XML : quelques applications

play fullscreen
1 / 106
XML : quelques applications
97 Views
Download Presentation
mateja
Download Presentation

XML : quelques applications

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. XML : quelques applications …pas seulement un langage documentaire, …pas seulement le successeur d'HTML !

  2. Pourquoi application ? • XML pour créer des langages de description spécialisés. • Une déclinaison de la spécification du langage APPLIQUEE à un domaine particulier.

  3. CML La molécule de l'eau H2O <?xml version="1.0" ?> <CML> - <MOL TITLE="Water"> - <ATOMS> <ARRAY BUILTIN="ELSYM">H O H</ARRAY> </ATOMS> - <BONDS> <ARRAY BUILTIN="ATID1">1 2</ARRAY> <ARRAY BUILTIN="ATID2">2 3</ARRAY> <ARRAY BUILTIN="ORDER">1 1</ARRAY> </BONDS> </MOL> </CML>

  4. CML (suite) • Un éditeur spécialisé (visualisation graphique des molécules), • Un langage d'échange entre différents logiciels de chimie habituels (ex : Protein Data Bank)

  5. MathML • Pour des descriptions de formules mathématiques, • Pas visualisable avec les navigateurs habituels, • OK dans AMAYA (cf exemple des équations de Maxwell).

  6. XML et le multimédia • Graphismes sur le Web : SVG (Scalable Vector Graphics), X3D (format 3D) • Multimédia, synchronisation : SMIL (Synchronized Multimedia Integration Language) • VoiceXML

  7. SVG : Scalable Vector Graphics XML Graphics for the Web

  8. SVG : en résumé • Un format de données pour décrire des graphiques vectoriels, spécifié par le W3C, • Un langage vectoriel de description de graphismes pour le Web, et d’applications graphiques en XML, • Permet de décrire des formes (cercles, triangles, etc..), des couleurs, des polices, … • Origine : un consortium composé entre autre de Adobe, Apple, Corel, HP, IBM, Quark et Xerox.

  9. SVG : en résumé

  10. SVG : caractéristiques • Coordonnées, dimensions et structures des objets vectoriels sont indiquées sous forme numérique dans le document XML

  11. SVG : le format • Seize millions de couleurs, • gestion du texte, • transparence gérée, • dégradés, lissages, … • intégration complète à XML.

  12. Graphiques en 2D • 3 types d'objets : • des images, • du texte, • formes graphiques vectorielles (rectangle, cercle, ellipse, ligne, polyligne, polygone).

  13. Animations • En utilisant des scripts (javascript par exemple) • ou en utilisant des éléments prédéfinis dans SVG.

  14. Les éléments d' "animation" • animate : permet de modifier les coordonnées d'un objet au cours du temps, • animateMotion : pour faire bouger un objet sur un "chemin", • animateColor : pour modifier la couleur au cours du temps, • animateTransform : pour modifier les attributs des transformations au cours du temps

  15. svgZ : le fichier est compressé ! Insérer du SVG dans une page Web • Un fichier svg (extension : .svg) • En référençant le document svg dans l'élément 'embed' : <HTML> <body> … <embed src="Graphics.svgz" width="70%" height="800" pluginspage="http://www.adobe.com/svg/viewer/install/"> </body> </HTML> Solution prônée par ADOBE ATTENTION EMBED n’est pas standard

  16. Insérer du SVG dans une page Web • En référençant le document svg dans l'élément ‘objet' : <HTML> <body> … <object type="image/svg+xml" data="mon_image.svg"> <img src="mon_image.png" alt="mon image"> </object> </body> </HTML> Image de remplacement Solution prônée par le W3C Extrait de http://popolon.org/gblog2/integrer-du-svg-dans-une-page-xhtml

  17. Texte à afficher si pb affichage svg Insérer du SVG dans une page Web • En créant une iframe <iframe width="200" height="200" src="horloge.svg"> </iframe> • En intégrant du code directement dans le XHTML ?

  18. SVG : l’Enjeu • un format unique pour les graphismes sur le Web ?

  19. SVG : les avantages • Des tailles de fichiers 5 à 30 fois inférieures que leurs équivalents en GIF, • Le viewer sait décompresser "en ligne" (.svgz) : réduction des 2/3 de la taille ! (http://www.w3.org/TR/SVG11/minimize.html) • Le texte fait partie intégrante du dessin et reste reconnaissable… et donc indexable !

  20. SVG : les avantages • Intégration dynamique des données, • Code structuré, lisible, • Code modifiable avec un éditeur de texte,

  21. SVG : les avantages Extrait de http://fr.wikipedia.org/wiki/Svg

  22. SVG : plusieurs langages • SVG 1.1 : Le cœur des développements SVG actuels • SVG Tiny 1.2 : en cours de spécification (vers SVG 1.2) • SVG Mobile 1.1 • SVG Print : un ensemble de recommandations pour produire un document pour impression

  23. SVG : les outils • Visualisation : • Un plug-in d'Adobe à partir d’IE5, • SVG Map Toolkit 0.3.0 • Edition • Inkscape : éditeur de graphiques (open source) • Photoshop et Illustrator sont compatibles avec ce format, • Sketsa SVG Editor 5.0 • Skencil (anciennement Sketch) http://www.nongnu.org/skencil/

  24. SVG : les outils • outil de présentation : W3C SVG Slidemaker • Une application de démonstration : http://www.amaltas.org/svgapp/

  25. SVG : les outils • Sodipodi : un éditeur multi OS sous licence GNU http://www.sodipodi.com/ (à voir : les galeries d’images)

  26. SVG les outils : Batik • http://xml.apache.org/batik/ Une boite à outil qui permet de manipuler du svg partout où il est possible d'exécuter du JAVA • Generer du SVG sur un client ou sur un serveur • Convertir du SVG dans d'autres formats (jpg, tiff, …)

  27. SVG : les outils • WebDraw : importer, éditer, optimiser des fichiers SVG http://www.jasc.com/products/webdraw/ • RapidSVG™ v1.0 Professional http://xstreamsvg.com/

  28. SVG : des outils de conversion • XML_svg2image : Convertit un fichier svg en une image png/jpeg (utilise batik & php) http://pear.php.net/package/XML_svg2image • SVG Graphics 2D http://xml.apache.org/batik/svggen.html

  29. Quelques exemples • www.objectsbydesign.com/tools/svg.html • www.adobe.com/svg/main.html • http://www.adobe.com/svg/demos/cml2svg/html/index.html

  30. Liens Web • http://ptaff.ca/svg/ page francophone du format SVG • La spécification SVG 1.1 http://www.w3.org/TR/SVG/index.html • Le site SVG du W3C : http://www.w3.org/Graphics/SVG/ • Une comparaison d’éditeurs de graphiques vectoriels : http://en.wikipedia.org/wiki/Comparison_of_vector_graphics_editors

  31. X3D

  32. L’ancêtre : VRML • 1994 : VRML (Virtual Reality Modeling Language) • Standard 3D basé sur XML, • Standard public, • Mais … un standard qui ne s’est pas imposé

  33. X3D • Plus léger que VRML • Certifié ISO • Consortium Web3D (SUN, Sony, 3Dlabs, Alias, l’US Navy, FT R&D, EDF …)

  34. X3D : quelques caractéristiques • Plus évolué que VRML : • Gestion des surfaces géométriques par exemple • Personnages virtuels (composant Humanoïd Animation) • Modulaire

  35. X3D : sites de référence • http://www.web3d.org/x3d/ • http://www.ogre3d.org/ (un moteur 3D open-source) • http://www.alpharis.info/ (un player 3D – usage personnel gratuit) • …

  36. Autres « standards » • U3D (Intel, Adobe et HP) • XAML (Microsoft) • 3DXML (Dassault et IBM)

  37. SMIL : clips multimédias

  38. SMIL • Synchronized Multimedia Integration Language • SMIL 2.0 depuis août 2001 (W3C)

  39. Extrait de http://www.w3.org/TR/SMIL2/SMIL/Timing and Synchronization.htm Un scénario • Placement spatial des composants visuels (vidéo, texte, son, …), • Placement temporel de l'ensemble des composants.

  40. Un scénario • Quelles interactions ? • Les effets associés à chaque interaction.

  41. Etapes de production • Création ou récupération des composants (son, image, vidéo, texte) • Codage/Compression des composants (plusieurs formats, prenant la diffusion au fil de l'eau en compte (streamed media) ou non) • Production d'un document SMIL (placement géométrique des composants, versions des composants (en fonction de la langue, de la bande passante, …), synchronisation, …)

  42. Qu'est-ce que SMIL ? • Pas un langage d'animation • Pas un format • Un moyen de combiner des animations et des objets multimédias : exemple • Une sorte de version multimédia d'HTML, avec par contre une séparation stricte du contenu et de la structure

  43. Six catégories d'instructions • Structure • Media Content : Référencement du contenu • Layout : mise en page • Timing : gestion du temps • Linking : gestion de la navigation et des interactions • Adaptivity : adaptation des présentations à l'environnement

  44. La structure d’un fichier SMIL Info de positionnement dans l’espace <smil> <head> <layout> <region> </region> </layout> </head> <body> <switch> <par> </par> <seq> </seq> </switch> </body> </smil> Test Info de positionnement dans le temps

  45. Plusieurs régions <head> <layout> <region id="CIF-NTSC" width="352px" height="240px"/> <region id="US-photo" width="6in" height="4in"/> <region id="half-center" left="25%" top="25%" width="50%" height="50%"/> </layout> </head>

  46. Types d'objets • Extrait dehttp://real-and-smil.com/tutorialsmil4.php

  47. Les liens changent en fonction du temps <video src="advertisements.mpg" alt="a series of advertisements" dur="01:30"> <area href="http://advertiser1.com/" begin="00:00" end="00:30"/> <area href="http://advertiser2.com/" begin="00:30" end="01:00"/> <area href="http://advertiser3.com/" begin="01:00" end="01:30"/> </video> Extrait de : http://ttt.forno.us/en/tutorial/learning_to_smil/animating.html • exemple

  48. Animation : 4 instructions • <animate> • <animateMotion> • <animateColor> • <set>

  49. Animation : exemple <img src="smile.png" alt="a SMILe" region="mouth"/> <animate targetElement="left-eye" attributeName="width" to="30px" dur="3s" fill="freeze"/> <animate targetElement="right-eye" attributeName="height" to="80px" dur="3s" fill="freeze"/> <animate targetElement="nose" attributeName="width" to="100px" dur="3s" fill="freeze"/> <animate targetElement="mouth" attributeName="height" to="190px" dur="3s" fill="freeze"/> • exemple

  50. "Discrete, linear and paced animation" : attribut calcMode Paced discrete Et spline Linear : mode par défaut (chaque point a le même % de la durée)