1 / 106

XML : quelques applications

XML : quelques applications. …pas seulement un langage documentaire,. …pas seulement le successeur d'HTML !. 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. CML.

mateja
Download Presentation

XML : quelques applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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)

More Related