XML et la distribution sur différents supports.

Depuis quelques années on entend très souvent parler de XML, d’applications XML, mais grand nombre d’entre nous ne l’utilise pas encore, ou n’a pas osé franchir le pas. Qu’est ce que cela apporte ? Quels sont les avantages et n’y a-t-il pas des inconvénients à utiliser ce langage ? Bref toujours les mêmes questions qui reviennent auxquelles ce court article va essayer de répondre pour permettre à ceux qui ne l’ont pas encore fait de franchir le pas… Au travers de ce tutorial vous pouvez utiliser un document XML et l'exploiter sous InDesign, Fireworks, Dreamweaver et Flash.

Liens associés à cet article

Accès aux fichiers

Chargement du fichier (1,7 Mo)

Chargement images (205 Ko)

Accéder au numéro

Retour au menu

XML… oui mais encore ?!

On revient rapidement sur les faits

Afin de répondre à des besoins d’évolution du Web, et pour palier aux lacunes de plus en plus révélées du HTML, en 1996 les premières briques du langage furent définies et dès 1998 le W3C le recommandait sous l’appellation de XML 1.0.

Comme le SGML ou le HTML, le XML est un langage qui permet de définir la structure arborescente d’un document… Une manière de séparer le contenu de la mise en forme.

Imaginons que l’on dise : « Création numérique. Avril 2006. XML… oui mais encore. Depuis quelques années… ». Pour nous, qui lisons cet article, nous comprendrions de manière intuitive de quoi il s’agit, mais pour une personne habitant au Danemark et ne connaissant pas du tout la revue ni le sujet, cela serait moins évident.

Il est alors intéressant de pouvoir structurer cette information, d’une manière standardisée, et de pouvoir utiliser une sémantique appropriés au sujet. Par exemple reformer le contenu précédent de cette manière.

    <nous allons parler d’un magasine français de type informatique>
        <son titre est>Création numérique</Voilà  pour son titre>
        <sa date de parution est>Avril  2006</c’est fini pour la date >
        <voilà un des articles>
            <son titre est>XML… oui mais  encore.</voilà c’est fini pour le  titre>
            <et ici le contenu de l’article>Depuis  quelques années…
            </voilà le contenu est complet>
        </cet article est terminé> 
    </le magasine est également terminé>

XML n’est ni plus ni moins que cela. Une simple façon de découper et structurer l’information, afin de la décrire et de la rendre accessible à tout lecteur. Cela serait sans compter que chacun de nous ne décrirait pas forcement l’information de la même manière. Il faut donc mettre en place un descriptif pour cette structuration.

La description de cette description… !!

Les DTD (Document Type Definition) ont d’abord été utilisées pour décrire les documents XML. Voilà une manière de définir l’arborescence précédente :

<!ELEMENT magasine (date,article*)>
<!ELEMENT date (#PCDATA) >
<!ELEMENT article (titre, contenu)>
<!ELEMENT titre (#PCDATA) >
<!ELEMENT contenu (#PCDATA) >

Mais leurs héritages du SGML, et leurs manques d’évolutivité ont laissées place au XML Schéma, recommandé et mis en place par le W3C, qui lui se présente de la sorte :

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
	<xs:element name="magasine" type="Magasine"/>
	<xs:complexType name="Magasine">
		<xs:sequence>
			<xs:element name="titre" type="xs:string"/>
			<xs:element name="contenu" type="xs:string"/>
		</xs:sequence>
	</xs:complexType>
</xs:schema>

Donc qui découlant de ce schéma, voici une présentation XML plus affinée du document précédent :

    <magasine   langue="fr"  type="informatique">
        <date>Avril  2006</date>
        <article  numero="1">
            <titre>XML…  oui mais encore.</titre>
            <contenu>Depuis  quelques années…</contenu>
        </article>
    </magasine>

De cette manière, tous les logiciels équipés d’un processeur XML peuvent être capable de comprendre le contenu du document, d’abord en analysant le XML Schema (ou la DTD) puis en parcourant le document lui même. Aujourd’hui, certains programmes tels que Flash ou Director ne s’appuient pas encore sur les documents de description, mais certains autre comme InDesign permettent ce genre de conformité.

De la rigueur dans l’écriture.

La syntaxe du XML est bien plus rigoureuse que celle d’un document HTML. Les principales règles à ne pas transgresser sont :

Une seule balise globale doit être présente et contenir l’ensemble du document.
Bien que le UTF-8 soit recommandé, l’encodage iso-8859 est supporté.
Une balise ouvrante doit toujours posséder sa balise fermante, même s’il s’agit d’une singlette telle que qui s’écrira alors .
L’écriture des balises est sensible à la casse <Balise> est donc différent de <balise>.
Les balises ne doivent pas se croiser. Les mauvaises habitudes du HTML comme n’auront plus cours.
Les attributs sont toujours définis entre guillemets (simple ou double).

Bien formé tu seras, valide on te préconiseras !

Au vu des deux derniers chapitres, le document XML est donc soumis à une conformité avec sa description (DTD ou XML Schéma) et à une syntaxe correcte. On dira alors qu’il est réciproquement valide et bien formé. Une première ligne est ajoutée au document qui permet d’indiquer la version et l’encodage du document.

<?xml version="1.0" encoding="UTF-8"?>

Attention, ce n’est pas parce que l’encodage spécifié est UTF-8 que le document sera encodé en UTF-8. Il faut effectuer cette tâche depuis le logiciel de création du document XML. Il existe divers outils permettant de travailler sur ce format allant d’un simple éditeur de texte (Bloc Notes, TextEdit) jusqu’à des usines à gaz spécialisées comme XML Spy, EditiX, BonFire Studio, etc…

Une bonne manière de vérifier si le document est bien formé reste de l’ouvrir dans un navigateur (depuis la version 5 de IE). Si le document n’est pas lié avec une feuille de style ou un document XSL, celui-ci devrait se déployer dans la fenêtre du navigateur, sinon le navigateur vous informera des erreurs de syntaxe qu’il rencontre.

Prolifération des descriptions…

De là à mettre à disposition des DTD (ou XML Schéma) décrivant un grand nombre de document normalisé n’était qu’un petit pas à franchir. Par exemple, une grande partie des documents administratifs sont accessibles sous forme de DTD sur http://www.info.univ-angers.fr/~gh/internet/actesXml/repertoire_schemas_xml_version_1_juin.htm, ou l’initiative remarquable de Dublin Core http://dublincore.org/documents/2001/04/11/dcmes-xml/ .

De même, et depuis son début, XML a donné naissance à des langages spécifiques basé sur son architecture comme le SMIL qui décrit des animations multimédia, le RSS qui permet la syndication de contenu sur le Web, le GML qui exprime des dispositifs géographiques, le MathML qui ouvre les portes de la représentation de symboles et formules mathématiques, le fameux SVG qui anime des tracés vectoriels… bref tout les secteurs inimaginables s’y sont représentés. Voir http://w3.org .

XML n’est pas seul, une grande famille l’entoure….

Afin de compléter sa puissance de description, toute une panoplie de langages vient se rajouter à XML. Parmi eux on retrouve le XSL qui n’est autre qu’un langage de description qui prend en charge l’aspect mise en forme au travers de CSS (voir l’article du mois dernier), ou bien le XSLT qui coté serveur renvoie un document HTML au client afin d’assurer toute compatibilité. XSL FO qui par rapport aux deux précédents est plus orienté impression.

D’un point de vue navigation ou gestion de l’arborescence, on peut utiliser XPath pour se promener de nœud en nœud au sein du document XSL ou encore Xpointer qui nous offre des options plus précises. S’il faut émettre des requêtes pour extraire certaines portions du documents on peut compter sur XQuery. Enfin et sans être exhaustif, on pourra aussi parler de XML Namespaces qui autorise la cohabitation de similitude en créant des espaces de nommage….

Pourquoi et quand utiliser XML

Comme nous venons de le voir jusqu’à présent, XML permet avant tout d’échanger de l’information entre applications, et surtout de standardiser la manière de décrire cette information. Une bonne démonstration de mise en application en reste l’utilisation des Web Services qui, au travers du protocole SOAP et du langage WSDL, ouvre la porte à l’utilisation d’outils développés par des sociétés tierces afin d’enrichir nos applications. Par exemple l’api de google http://www.google.com/apis/ , ou celle de sytrans http://www.systransoft.com/support/SL/UserGuide/api.html , etc… http://www.xmethods.net/

D’autres possibilités peuvent être propre au développement d’une application multimédia. Par exemple pour décrire le contenu des menus de l’interface utilisateur, notamment avec l’introduction de XUL. Ou encore pour décrire des arborescences complexes ou des mises en relation d’outils inter application. Adobe (anciennement Macromedia) en fait brillamment la démonstration avec ses nombreux documents de configuration basés sur XML, ou ses palettes d’outils de Fireworks réalisées sous Flash et communiquant une fois de plus au travers de XML. Allant même jusqu’à développer le langage MXML utilisé par Flex, le framework de développement d’application du même éditeur.

Quelques liens utiles !

http://www.w3.org/XML
http://www.editix.com/
http://jaxe.sourceforge.net/Jaxe.html
http://www.altova.com/
http://www.tucows.com/preview/239846
http://www.snapfiles.com/Freeware/webpublish/fwxml.html
http://www.academictutorials.com/xml/
http://www.j2s.net/FR/Produits/j2sProduit.html

Transition vers un cas pratique.

Dans le sujet précédent, nous avons examiné quelques facettes du langage XML, nous allons voir au cours de celui-ci, quelques une de ces possibilités. Commençons par mettre en place le décor… Un client souhaite présenter quelques bannières de publicité pour son agence de voyage, seulement voilà, les contenus ne sont pas tout à fait arrêtés par le service marketing ainsi que les photos qui restent à définir par le service de communication. De plus, les cibles multiples imposent une distribution sur plusieurs supports…

Il faut à la fois publier des encarts dans un catalogue papier, des bandeaux pour des pages Web, une intégration dans une application Flash, et un rendu HTML pour un moteur de recherche… tout un programme !

Afin de suivre plus facilement ce pas à pas, vous trouverez l’ensemble des fichiers nécessaires sur le site http://www.puce-et-media.com/creanum . Chaque fichier est abondamment commenté afin de détailler l’ensemble des codes utilisés.

Les outils et le document XML

Le document XML est simple, il contient et structure simplement les diverses publicités. Chaque service le complètera ultérieurement.

    < ?xml version=«1.0» encoding=«utf-8» ?>

    <pubs>

        <pub>

            <accroche></accroche>

            <destination></destination>

            <url></url>

            <prix></prix>

            <full></full>

            <bando></bando>

            <vignette></vignette>

        </pub>

    </pubs>

Pour les outils utilisés, InDesign adjoint de J2SCatalog http://www.j2s.fr/ sera utilisé pour la mise en place papier, Fireworks pour les bandeaux jpg, Dreamweaver pour le rendu HTML et Flash pour l’application SWF.

Installation et mise en place sur Indesign

Une fois la maquette réalisée et l’extension installée, l’insertion de données XML dans un document InDesign se fait en trois étapes.

La création du gabarit (Modules externes > J2Scatalog > Créer le gabarit) qui va mettre en place un modèle contenant l’ensemble des blocs textes/images nécessaires. L’intérêt et l’avantage, c’est que ce modèle pourra automatiquement se dupliquer et se déployer sur plusieurs pages en fonction des besoins.

Il faut dans un second temps générer le document lui-même (Modules externes > J2Scatalog > Générer…). Pointez simplement vers le document XML qui contient les datas.

J2SCatalog a automatiquement appliqué un style neutre du même nom que les balises XML à chaque bloc texte créé, appliquez donc les styles de votre choix.

Utilisation de l’outil de Fireworks

Contrairement à Indesign, le processus de mise en place du gabarit n’est pas pris en charge, il faut donc le créer manuellement. Fireworks, utilise un système de nommage de variables {variable} pour mettre en relation les objets du document png avec les balises du document XML. L’ensemble des objets (image, zone de texte, lien URL…) peut ainsi être codé.

Cette étape réalisée, le reste est entièrement automatique. Sélectionnez le menu Commandes > Assistant d’intégration de données et laissez vous guider au travers des six étapes. Notez au passage que l’activation des calques, leur verrouillage, le calque web, etc… ont tous leur influences sur la génération des documents… c’est magique… !

Série d'écran de validation

Sélection des fichiers sources (XML et dossier images).
Simple prévisualisation des données pour confirmer.
Sélection de la plage à traiter.
Vérification des mises en relation automatique variable/balise, et adaptation manuelle le cas échéant.
Réglages d’exportation des fichiers générés..
Récapitulations générales.

Dreamweaver, avec un Web plus standardisé.

Il est très facile de convertir depuis Dreamweaver une page HTML en page XSL, il est donc possible de la lier au document XML (Application > Liaisons) et ainsi de glisser déposer les balises utilisées sur le document. Il faut également penser d’apposer une région répétée depuis l’onglet Insertion > XSLT, en sélectionnant la balise <pub>, pour afficher l’ensemble des vignettes publicitaires.

Pour accéder à cette page depuis le web on peut placer une XSL Transformation coté serveur pour rendre la page compatible avec l’ensemble des navigateurs ou alors simplement ajouter la feuille de style XSL au document XML qui sera alors lisible depuis un navigateur récent.

Applications Multimédia, ou RIA (Rich Internet Application) avec Flash.

Coté Flash tout reste à faire. Bien qu’il soit possible d’utiliser des composants, il y a de forte chance pour que l’attente de votre client soit précise et corresponde à des besoins particuliers. Donc, pas de mystère, il faut développer et coder l’ensemble sur mesure. Mais rassurez vous, il ne s’agit là que de quelques lignes de code.

Au lancement de l’application, le fichier XML est chargé et génère en simultané la création de chaque vignette publicitaire. Deux boutons d’ascenseurs permettent de faire défiler l’ensemble afin de pouvoir toutes les visualiser correctement. Un bouton « en savoir plus » permet d’accéder aux détails de chaque annonce.

Et alors… qu’est ce que cela change… ?

En fait, c’est dès que vous allez devoir modifier, enrichir, changer les données externes que la magie va opérer… Chacune des applications utilisée vous permet soit de recharger le fichier XML soit de pointer vers un document différent, ce qui régénèrera alors l’ensemble du contenu du document généré sans qu’une quelconque intervention de votre part soit nécessaire.

Vous vous souvenez au début, la commande client n’était pas encore correctement formulée, les textes n’étaient pas définitifs, les images sélectionnées… bref, cela ne nous a pas empêcher de mettre en place l’ensemble des ‘coquilles à XML’ et de publier sur les divers supports de diffusion dans les temps…

Conclusion

C’est tout un univers de langages et de technologies qui font que cet incontournable de la structuration devient un outil indispensable et qu’il nous faut impérativement l’ajouter à notre panoplie d’outils de communication et à notre manière de travailler.

Puce et Média