Gestion de contenu au format XML - Le web de...

Université des Sciences et Technologies de Lille – Master E-Services – Année 2004-2005

Franck DUPONT

Université des Sciences et Technologies de Lille - Master E-Services – Année 2004-2005

Gestion de contenu au format XML

Mise en place d'un système de production et de diffusion normalisé de contenu au format XML pour le compte d'une agence d'information spécialisée dans le domaine hospitalier.

Soutenu par Franck DUPONT

Gestion de contenu au format XML sur 63

HOSPIMEDIAParc Eurasanté

55, rue Salvador AllendeBP 06 – Lille métropole

59374 Loos Cédex03-20-32-52-32

http://www.hospimedia.fr


Franck DUPONT sur 63 Gestion de contenu au format XML


Remerciements Je tiens à remercier Xavier Le-Pallec, Alain Derycke, Julien Sibierski et tout particulièrement David Dacosta pour m'avoir guidé dans les méandres administratifs nécessaires pour accéder à la formation.

Mesdames Daudin et Culva-Duverney, et plus globalement, l'ensemble du corps enseignant du Master E-Services ont brillé par leur suivi, leur efficacité et leur faculté d'adaptation à la formation continue à distance. Merci encore à Xavier, responsable de la formation, pour nous avoir accompagné tout au long de cette année et demi. Je remercie la jeune et dynamique équipe d'HOSPIMEDIA pour sa bonne humeur, mais aussi pour supporter mon caractère « grincheux ??? … » au quotidien. Clin d’œil à Ludovic Gasc, élève ingénieur à l'ISIMA, stagiaire chez HOSPIMEDIA, pour m’avoir fait partager sa culture open source et avoir tout mis en œuvre pour tenter de faire de moi un Geek ;) Bien sûr, je n’oublierai pas Ronan Denoual, « The Ronan », directeur technique d’HOSPIMEDIA pour m’avoir incité, encouragé, accompagné et aidé aussi bien durant la période de tutorat que pendant le stage.

Franck DUPONT Gestion de contenu au format XML Page 1 sur 63


Table des figures Figure 1 – L’ancien système de publication.......................................................................................11 Figure 2 – Le système de publication au format XML ......................................................................12 Figure 3 – Architecture technique de la société .................................................................................15 Figure 4 – Fonctionnement de la rédaction........................................................................................17 Figure 5 – Stockage des papiers.........................................................................................................19 Figure 6 – Copie d'écran de Kalinews................................................................................................28 Figure 7 – Copie d'écran de Serna......................................................................................................28 Figure 8 – Copie d'écran de EwebEdit Pro ........................................................................................29 Figure 9 – Copie d'écran de Xopus ....................................................................................................29 Figure 10 – Copie d'écran de EDX ....................................................................................................30 Figure 11 – Copie d'écran de Jaxe......................................................................................................31 Figure 12 – Copie d'écran de Bitfluw Editor .....................................................................................31 Figure 13 – Insertion d'un lien dans Bitflux.......................................................................................42 Figure 14 – Attributs affichés par Bitflux lors de l'ajout d'un lien.....................................................43 Figure 15 – Pages PHP développées autour de l'ajout de liens..........................................................44 Figure 16 – Insertion d'une image avec Biflux ..................................................................................45 Figure 17 – Commentaires correspondants une image ......................................................................46 Figure 18 – Résultat de notre exemple de transformation .................................................................48 Figure 19 – La page de saisie d'une brève..........................................................................................50



Table des matières 1. Avant propos ................................................................................................................................8

1.1 HOSPIMEDIA, la société ..................................................................................................8 1.1.1 Raison sociale...............................................................................................................8 1.1.2 Création ........................................................................................................................8 1.1.3 Organisation .................................................................................................................8

2. Objectifs du projet .....................................................................................................................10 2.1 Contexte.............................................................................................................................10 2.2 La mission .........................................................................................................................10

3. Analyse de l’existant..................................................................................................................14 3.1 Architecture technique ....................................................................................................14 3.2 Fonctionnement de la rédaction......................................................................................15 3.3 La structure des papiers ..................................................................................................18

3.3.1 Eléments propres au papier ........................................................................................18 3.3.2 Eléments propres au corps du papier..........................................................................19 3.3.3 Naissance d’un nouveau format .................................................................................21

4. XML, développé pour l’échange de données normalisés.......................................................22 4.1 Approche de la galaxie XML...........................................................................................22

4.1.1 Objectif et présentation ..............................................................................................22 4.1.2 Avantages ...................................................................................................................23

4.2 XML, la solution incontournable pour HOSPIMEDIA ...............................................24 4.2.1 Restrictions dues au format HTML............................................................................24 4.2.2 Possibilités offertes par le XML.................................................................................24

4.3 Pourquoi utiliser un éditeur WYSIWYG Web ?...........................................................25 4.4 Comparatif des solutions existantes................................................................................25

4.4.1 Constats préliminaires ................................................................................................25 4.4.2 Sites visités.................................................................................................................26 4.4.3 Critères de sélection ...................................................................................................27 4.4.4 Logiciels sélectionnés ................................................................................................27 4.4.5 Pourquoi existe-t-il peu d'éditeurs XML WYSIWYG ? ............................................33

4.5 Éditeur choisi : Bitflux Editor.........................................................................................35 4.5.1 Pourquoi avoir sélectionné Bitflux Editor ?...............................................................35

5. Implémentation de la solution sur hospimedia.fr ....................................................................36 5.1 Présentation de Bitflux.....................................................................................................36

5.1.1 Le contexte de création de Bitflux Editor ..................................................................36 5.1.2 Le fonctionnement général de Bitflux........................................................................36 5.1.3 Fonctionnement Interne de Bitflux ............................................................................36 5.1.4 Architecture de notre projet........................................................................................38

5.2 Sélection de la version de Bitflux ....................................................................................40 5.3 Relax-NG, le schéma XML utilisé par Bitflux...............................................................40



5.3.1 Intérêts à suivre le standard NITF ..............................................................................41 5.4 Mise en oeuvre de Bitflux ................................................................................................44

5.4.1 Contributions..............................................................................................................44 5.4.2 Personnalisation de l’éditeur ......................................................................................45 5.4.3 Insertion d'une image .................................................................................................45 5.4.4 Traduction ..................................................................................................................46 5.4.5 Relax-NG dynamique en fonction du type de papier .................................................46

5.5 Le processus de transformation......................................................................................46 5.5.1 Développement de la feuille XSL en vue de l'affichage dans Bitflux .......................47 5.5.2 Développement de la feuille de style CSS .................................................................47

5.6 Transformation des papiers XML au format XHTML pour hospimedia.fr ..............48 5.6.1 Utilisation du parseur XML .......................................................................................48

5.7 Implémentation de l’éditeur dans le workflow..............................................................49 6. Refonte de l’ensemble des solutions de diffusion de contenu .................................................51

6.1 Inventaire de la diffusion des contenus ..........................................................................51 6.2 Les normes d'export XML dans le monde de la presse ................................................51 6.3 Feuilles XSL compatibles NITF......................................................................................52

7. Conclusion .................................................................................................................................53 8. Annexes......................................................................................................................................54

Annexe 1 - Exemple de document XML produit par un journaliste.......................................54 Annexe 2 - La feuille XSL permettant la transformation d'un article....................................54 Annexe 3 - Exemple d'export d'informations respectant la norme NITF ..............................56 Annexe 4 – Manuel de l'utilisateur de Bitflux pour les journalistes........................................57



Glossaire La compréhension du présent document est soumise à l'assimilation de notions propres au monde de la presse et de l'informatique. Ces notions sont scindées en deux groupes et explicitées ci-après.

A - Termes journalistiques Papier Couramment utilisé dans la presse, ce terme désigne toute forme de publication écrite. Chez HOSPIMEDIA, un papier est une publication effectuée par la rédaction qui peut être une brève, un article, un dossier ou une interview. Brève C’est un papier court traitant des faits d’actualité récents. Article Ce format est plus développé que les brèves. Dossier C’est une étude de fond sur un sujet précis. Sur le site hospimedia.fr, les dossiers comportent toujours plusieurs pages. Chapeau C’est une phrase introductive, à mi chemin entre le résumé et l’accroche, il concentre en quelques lignes l’essentiel de l’information. Interview C’est le compte rendu d’une discussion avec une personne. Les interviews sont présentées sous forme de questions et réponses. Charte rédactionnelle C’est le document qui définie la manière de présenter les contenus sur le site. Il précise aussi bien le nombre de caractères maximum pour un papier que les polices et styles à utiliser lors de la saisie. Pigiste Un pigiste est une personne chargée de rédiger des papiers pour la rédaction HOSPIMEDIA de manière indépendante.

B - Termes informatiques Alerteur C’est le nom donné à la newsletter quotidienne reçue par les abonnés. Diffusion de contenu On entend par diffusion de contenu, l’export des contenus HOSPIMEDIA vers d’autres plateformes (sites web, intranets, etc.).



Une Comme sur un journal papier, la Une est la page principale de l’espace abonné. Elle présente essentiellement les contenus du jour. Workflow C’est un ensemble de scripts qui automatisent le traitement de tâches basées sur la circulation de documents. Dans ce rapport, ce terme désigne le processus de validation et de publication de papiers. Frontoffice C’est la partie d’un site web visible par le public. Aussi appelé frontal. Backoffice C’est l’espace dédié à l’administration d’un site. Sur hospimedia.fr, des rubriques de cet espace peuvent être accessibles aux clients. Ainsi, il arrive qu’on le qualifie également d’ « extranet ». Framework Ensemble de bibliothèques permettant le développement rapide d'applications Logiciel Libre (ou Open Source) L'expression « Logiciel Libre » caractérise les logiciels dont le code source est visible, modifiable et librement redistribuable sous certaines conditions qui peuvent être plus ou moins strictes. Plus d'informations sur : http://fr.wikipedia.org/wiki/Logiciels_libres. Editeur WYSIWYG Vient de l’acronyme anglais « What You See Is What You Get » signifiant littéralement « ce que vous voyez est ce que vous obtenez » ou plus élégamment « tel écran, tel écrit ». Désigne les interfaces utilisateur graphiques permettant de composer visuellement le résultat voulu. Plus d'informations sur : http://fr.wikipedia.org/wiki/WYSIWYG. Popup Une popup est une petite fenêtre qui s'ouvre au-dessus de la fenêtre du navigateur. Wiki Un wiki est un site Web dynamique permettant à tout visiteur de modifier les pages à volonté. Plus d'informations sur : http://fr.wikipedia.org/wiki/Wiki.


http://fr.wikipedia.org/wiki/Logiciels_libres

http://fr.wikipedia.org/wiki/WYSIWYG

http://fr.wikipedia.org/wiki/Wiki


Introduction Etant déjà salarié, l’apprentissage à distance m’a permis de suivre le Master E-Services en formation continue tout en continuant mon activité professionnelle.

J’ai donc effectué ma période de stage chez HOSPIMEDIA, la société qui m’embauche depuis quatre années.

Avec mon directeur technique, nous avons étudié et réservé un projet d’envergure pour cette période ; projet qui requiert des compétences fonctionnelles et techniques dont je ne disposais pas auparavant et qui entre dans le cadre de la formation.

L’objectif de la mission qui m’a été confiée est la refonte d’un système de gestion de contenu.

L’ancien système étant devenu inadapté pour diffuser et échanger les contenus, la solution qui se dessinait était évidemment basée sur la technologie XML.

Une société jeune et dynamique, une mission conséquente, cruciale pour l’entreprise, basée sur une problématique d’actualité et des technologies récentes, le projet m’a tout de suite intéressé.



1. Avant propos 1.1 HOSPIMEDIA, la société HOSPIMEDIA est un groupe média spécialisé dans les services et l'information professionnelle en ligne à destination des établissements de santé. De manière plus pragmatique, HOSPIMEDIA apporte des outils d'information permettant aux acteurs du monde hospitalier et sanitaire de répondre à la complexité croissante de la gestion, de la réglementation et des technologies de l'industrie des soins.

1.1.1 Raison sociale

HOSPIMEDIA est une S.A. au capital de 110.200 euros, à directoire et conseil de surveillance. Elle a la particularité d’avoir à sa tête un directoire de trois associés qui possèdent le même poids dans la prise de décision, et d’avoir un conseil de surveillance composé d’experts dans le domaine hospitalier.

Ce conseil valide l’intérêt du projet, apporte du crédit à l’ensemble ainsi qu’un réseau de partenaires. Il ne retire aucun bénéfice matériel de l’opération, mais un bénéfice moral important peut être retiré si HOSPIMEDIA confirme son succès.

1.1.2 Création Née en 2001, HOSPIMEDIA a grandi dans le bio incubateur d’Eurasanté, pôle important et dynamique de la région Nord-Pas-de-Calais. Cet incubateur donne à des projets naissants dans le cadre médical la possibilité d’avoir dès leur début un local, un financement de pré-amorçage et des services spécialisés (aide à la formalisation pour un projet naissant, expertises sur les domaines de la loi, du monde du travail, cycle de formation managériale, etc.). En 2002, vingt trois projets sont incubés à Eurasanté, pour deux abandons seulement. Parmi les exemples de réussite, dix sept entreprises créées totalisent 100 emplois nouveaux et devraient à terme mobiliser au minimum 230 personnes (business plan à 3 ans). Pour Hospimedia, Eurasanté a permis un démarrage rapide, la possibilité de trouver rapidement les contacts pertinents. La société est désormais installée sur une zone franche proche de l’incubateur.

1.1.3 Organisation

L’activité de la société est organisée autour de deux pôles :

• Le pôle information



L'activité principale de la société est la vente d'information hospitalière à des établissements de santé. HOSPIMEDIA dispose d’une rédaction chargée d’analyser quotidiennement l’information du secteur santé. L'accès aux contenus HOSPIMEDIA se fait sur abonnement payant. Si un établissement est abonné, l'ensemble de son personnel peut accéder à l'information. Un identifiant et un mot de passe leur sont attribués. Certains établissements ne fournissent pas de connexion Internet pour le personnel. Dans ce cas, HOSPIMEDIA peut proposer une solution de diffusion de son information sur intranet. Cette solution de diffusion de contenu consiste à transférer les contenus mis en forme pour hospimedia.fr vers un intranet. Le site web de la société : http://www.hospimedia.fr

• Le pôle technique L’équipe technique alimente les besoins en développement de l'autre pôle. Mais la société effectue également des prestations externes qui peuvent être des développements d’applications web, de l’hébergement, de l’installation de serveur ou des prestations de maintenance. Ces prestations s’adressent toujours à des professionnels de la santé. Quelques sites web développés par HOSPIMEDIA :

• Le site Médecins du nord http://www.medecinsdunord.com Site qui a vocation à promouvoir la région Nord-Pas-de-Calais auprès des métiers de la santé.

• Le site HôpitalExpo 2004 http://www.heim2004.hospimedia.fr Couverture médiatique du salon HOPITALEXPO 2004 par la rédaction HOSPIMEDIA.

• Le site Internet et l'intranet du centre hospitalier de Villeneuve Saint-George http://www.chiv.fr Site d’un établissement de soins de la région parisienne.

• Compétences Hospitalières http://www.ressources-hospitalieres5962.org/page.php Application de partage des ressources et de compétences santé dans la région Nord-Pas-de-Calais


http://www.hospimedia.fr/

http://www.medecinsdunord.com/

http://www.heim2004.hospimedia.fr/

http://www.chiv.fr/

http://www.ressources-hospitalieres5962.org/page.php


2. Objectifs du projet 2.1 Contexte

La gestion de contenu est devenue une problématique incontournable sur Internet. Face au succès grandissant du web, les sociétés, et plus particulièrement les agences d’informations ou les producteurs de contenus, se heurtent à des difficultés de valorisation, d’échange, de réutilisation de leurs contenus. Lors de la création de la société en 2001, l’unique activité d’HOSPIMEDIA était l’information. Cette information était alors exclusivement diffusée sur son site web (hospimedia.fr) et au travers d'une newsletter quotidienne. Un certain nombre d'établissements étaient intéressés par la diffusion de l'information HOSPIMEDIA sur leur intranet. En effet, à la différence d'Internet, l'intranet de ces établissements est accessible à l'ensemble du personnel. Suite à ces demandes croissantes de diffusion de contenus, HOSPIMEDIA s'est aperçu que son système de publication n'était plus adapté. En effet, les contenus étant initialement prévus pour être présentés sur hospimedia.fr, leur présentation n'est pas personnalisable sur la plateforme de l'établissement abonné. Mettre à disposition des contenus destinés à être exploités sur d’autres plateformes n’est pas sans poser problèmes. Par exemple, pour les utilisateurs d'un intranet n'ayant pas Internet, les liens hypertexte sont inutilisables donc frustrants. Comme autre exemple, on peut citer le problème d'intégration à la charte graphique de l'intranet ; la mise en forme des papiers étant intégrée au contenu, il n'est pas possible de la modifier (taille du texte, police de caractères, largeur du papier, etc.). Les contraintes fixées par l’ancien système font qu’il n’est pas toujours possible de répondre correctement aux attentes du client. En tant qu'agence d'information, HOSPIMEDIA se devait de disposer d'un système de publication prévu pour la diffusion multi-canal (cf. figure 2 – Le système de publication au format XML). 2.2 La mission

Face aux demandes croissantes de diffusion de contenus et aux problèmes rencontrés pour les implémenter, la société a envisagé une refonte du système de génération et de stockage des contenus. Cette refonte engendre de multiples développements propres à la présentation et à l’échange des contenus :

• Meilleure présentation de l’information sur le frontoffice hospimedia.fr ; • Transformation des contenus vers d’autres formats : PDF, Postcript, texte brut ; • Mise à disposition des papiers en XML (RSS, NewsML, etc.) ; • Refonte des exports de contenus déjà existants ;



• Personnalisation des contenus pour chaque abonné (retrait des liens hypertexte, des images, mises en forme personnalisées, etc.).

La mission comprend différentes étapes de veille, d’analyse, de développement, de formation et de test :

• Analyse du système d’information actuel implémenté par une société de services en informatique ; • Etude approfondie de la galaxie XML et de ses possibilités ; • Recherche d’un éditeur répondant aux besoins de la rédaction et du service technique ; • Implémentation de la nouvelle solution dans le workflow de publication ; • Présentation de la solution et tests avec les journalistes ; • Refonte au cas par cas, des exports de contenus déjà existants.

Les deux schémas ci-dessous résument les différences entre l’ancien système de stockage et le nouveau. On peut remarquer les possibilités offertes par le XML en terme de diffusion des contenus.

Dans l'ancien système, les journalistes saisissent les papiers avec un éditeur Web WYSIWYG. On enregistre ensuite le code HTML généré par ce dernier dans un fichier en vue de l'affichage sur le site hospimedia.fr. Le code généré par l'éditeur est du HTML brut, sans utilisation de CSS. Le code ne peut donc pas être modifié, ni sur hospimedia.fr, ni lors d'une diffusion de contenus.

Figure 1 – L’ancien système de publication.



Franck DUPONT

Figure 2 – Le système de publication au format XML.

Gestion de contenu au format XML Page 12 sur 63


Dans le nouveau système, les journalistes ne font plus de mise en forme mais qualifient les informations dans un éditeur Web WYSIWYG, pour produire le fichier XML. Après avoir effectué ce travail, les transformations XSL seront appliquées sur les contenus, afin d'obtenir les différents rendus pour chaque canal de diffusion (cf. figure 2 – Le système de publication au format XML).



3. Analyse de l’existant 3.1 Architecture technique Le site d’information hospimedia.fr est développé en PHP4 à partir du framework open source Interligo développé en PHP. Ce dernier s’appuie sur un serveur Apache et sur une base de données MySQL. Le tout fonctionne sur un système d’exploitation Linux Debian Sarge 3.1. La société dispose d'un serveur de fichiers appelé Pacha, il permet aux employés d'HOSPIMEDIA de partager les fichiers communs. Le serveur Web public, appelé NS273, héberge différents sites web dont hospimedia.fr et gère le courrier électronique. Bart est une réplique de NS273, il permet à l'équipe de développement de tester ses développements avant la mise en production. Enfin Phoenix sauvegarde une fois par jour les données des trois autres serveurs ainsi que les documents de chaque employé situés sur des postes clients Windows 2000.



Figure 3 – Architecture technique de la société. 3.2 Fonctionnement de la rédaction De nombreuses réunions avec la rédaction ont permis d’identifier clairement le travail des journalistes au quotidien et les contraintes s’y référant. En début de semaine, la rédaction se réunit afin de définir les thèmes qui doivent être traités. Cette réunion donne lieu à la rédaction de papiers de différents formats :

• Les brèves : ce sont des papiers courts qui donnent en 3 ou 4 phrases une information concise ;

• Les articles : plus longs que les brèves, ils traitent d’un sujet précis ;



• Les dossiers : étude de fond composée de plusieurs parties.

La rédaction des papiers peut se faire en interne (par les journalistes d’HOSPIMEDIA) ou en externe (par des pigistes). Compte tenu de la diversité des environnements de travail, l’échange de documents avec l’extérieur se fait via le format RTF. La rédaction d’un papier donne lieu à sa validation. Celle-ci est toujours réalisée par des journalistes d’HOSPIMEDIA. Une fois validé, le papier doit être saisi. Le but de cette opération est de passer du format RTF au format HTML, affichable sur le web. La saisie se fait avec un éditeur de texte intégré au backoffice permettant d’ajouter de la mise en forme, des images, des tableaux, etc. Pour chaque papier, une date de mise en ligne est définie ; elle détermine à partir de quelle date le document sera visible sur le site.

Chaque soir, la rédaction doit d'une part s’assurer que l’ensemble des papiers est saisi et d'autre part définir les papiers qui constitueront la Une du lendemain.



Figure 4 – Fonctionnement de la rédaction.



3.3 La structure des papiers Les réunions avec la rédaction ont permis de définir la structure des papiers.

3.3.1 Eléments propres au papier

Un document produit par la rédaction HOSPIMEDIA se compose des éléments affichables suivants :

• Le type de papier (brève, article, dossier) ; • Une date de mise en ligne : date à partir de laquelle le papier sera affiché sur le site ou

diffusé sur une autre plateforme ; • Un surtitre : il précède le titre. Il est facultatif ; • Un titre : obligatoire pour toutes les publications ; • Un chapeau : il est facultatif seulement pour les brèves ; • Un corps : c’est le contenu du papier. Il est saisi avec un éditeur web WYSIWYG.

En plus des éléments affichables, le papier comporte d’autres attributs tels que :

• Une référence à la personne ayant rédigé le papier ; • Une référence à la personne l’ayant validé ; • Une date d’expiration.

Toutes les informations relatives à une publication sont stockées dans une base de données à l’exception du corps. Ce dernier doit contenir de la mise en forme (liens hypertexte, images, tableaux, etc.), pour se faire, on a recours à un éditeur web WYSIWYG. Le corps des publications est donc stocké sur le serveur dans un fichier texte. Seule une référence à ce fichier est stocké dans la base de données ; ceci pour chaque papier (cf. figure ci-dessous).



Figure 5 – Stockage des papiers. Il a été conclu avec la rédaction que le workflow de publication de contenu était entièrement fonctionnel. Les modifications à apporter se situent donc uniquement au niveau de la saisie et de la modification de papiers ; aucune modification n’est à apporter au processus de publication.

3.3.2 Eléments propres au corps du papier Le travail d’analyse de la structure des papiers est incontournable pour la suite du projet et plus particulièrement pour la formalisation des contenus. Nous verrons plus loin que le document formel est une feuille Relax-NG (cf. 5.3 – Relax-NG, le schéma XML utilisé par Bitflux). Le corps d’un papier peut être constitué des éléments suivants :

• Paragraphes Tous les papiers contiennent au moins un paragraphe. Les paragraphes peuvent être précédés d’un intertitre.

• Intertitres Ils structurent le corps des articles et des dossiers. Les intertitres sont systématiquement centrés et mis en gras.

• Liens Le corps des papiers peut contenir des liens hypertexte. Ces liens peuvent être de plusieurs types : o Les liens internes

Ce sont des liens qui pointent vers un autre document du site hospimedia.fr :



Liens vers un autre papier HOSPIMEDIA ;. Liens vers un terme du glossaire HOSPIMEDIA ; Liens vers un événement d’agenda du site hospimedia.fr; Liens vers un livre de la bibliothèque du site hospimedia.fr.

o Les liens externes

Ce sont des liens qui pointent vers une ressource externe au site hospimedia.fr :

Liens vers une autre adresse Internet ; Liens vers une adresse e-mail ; Liens vers un document sur Intenet

Ce sont des liens qui pointent vers des documents sur Internet. Par exemple des documents Word, texte brut, PDF, PowerPoint, Excel, HTML.

• Images Le corps des articles peut contenir des images. Ces images peuvent être des liens.

• Renvois

Les renvois sont des précisions sur le texte. Ils apparaissent sous forme d’astérisques ou de numéros. Le détail des renvois est affiché en bas de page. La rédaction traite les renvois manuellement (comme dans la presse papier). Cependant il est souhaitable qu’à l’avenir les renvois apparaissent sous forme d’infobulle ou de popup.

• Définitions Ce sont des mots ou groupes de mots pointant vers une popup qui affiche leur définition. Les définitions sont extraites d’un glossaire tenu par la rédaction. Le glossaire peut contenir des définitions pures, des définitions de sigles ou de textes de lois. Aujourd’hui, les définitions sont peu utilisées par la rédaction.

• Encarts Ce sont des zones ajoutées en dessous du contenu afin de préciser une notion ou d’expliquer un concept. Ils comprennent un titre et un corps. Sur hospimedia.fr, ils sont encadrés d’une fine ligne.

• Tableaux

Ils sont utilisés pour les comparatifs. Les tableaux sont peu utilisés car leur mise en place est fastidieuse avec l’éditeur HTML.

• Citations

Les citations sont toujours en italique. Il faut prévoir d’insérer un espace insécable entre les guillemets et la citation.

• Signature

Insérée en dessous du corps, elle est facultative pour certaines brèves.



3.3.3 Naissance d’un nouveau format L’étape d’analyse des papiers a été l’occasion de réviser la charte rédactionnelle en vigueur depuis trois ans. En effet, certains éléments ont été supprimés et d’autres ajoutés. Un nouveau type de contenu est venu compléter la charte rédactionnelle : le format « Interview ». L’interview est le rapport d’un dialogue entre un journaliste HOSPIMEDIA et un interlocuteur. Ce format est uniquement composé de questions et de réponses. Un paragraphe peut éventuellement être ajouté à la fin du papier pour recueilllir les commentaires éventuels du journaliste ou ajouter des informations sur la personne interrogée. Ce paragraphe peut lui même contenir les informations de mise en forme listées au point précédent.



4. XML, développé pour l’échange de données normalisés

XML (Extensible Markup Language ou langage de balisage extensible) est un standard du World Wide Web Consortium. XML permet de qualifier l’information, c’est-à-dire qu’il est possible de structurer un document brut grâce à un balisage. Il permet en outre de mettre en évidence la structure en séparant le contenu de la forme. A ce propos, on peut remarquer que l’inconvénient majeur du HTML est qu’il n’est pas possible d’enlever la mise en forme pour ne récupérer que le contenu brut. <?xml version="1.0" encoding="iso-8859-1" ?> <candidat> <nom>DUPONT</nom> <prenom>Franck</prenom> <adresse> <rue>118, rue Basse</rue> <codepostal>59213</codepostal> <ville>Vendegies sur Ecaillon</ville> </adresse> </candidat>

Extrait de code 1 – Exemple de fichier XML 4.1 Approche de la galaxie XML

4.1.1 Objectif et présentation L'objectif initial de XML était de faciliter le partage de textes et d'informations structurées, par exemple au travers de l'Internet, en séparant le contenu (les données) du contenant (la présentation des données). La galaxie XML comprend de nombreux langages et concepts nécessaires à son exploitation. Ceux nécessaires à la réalisation du projet sont exposés ci-après. Tous ces concepts sont intéressants car ils permettent de structurer ou de transformer un document XML de manière normalisée. Il faut noter que le respect des normes permet d’utiliser des outils génériques déjà existants qui ne seront donc pas à développer.

• La définition de type de document Le Document Type Definition (DTD), ou Définition de Type de Document, est un document permettant de décrire un modèle de fichier XML. Une DTD ne décrit cependant que la structure du document (hiérarchie des champs, paramètres, type des données, etc.).

• Relax-NG

Relax-NG est également un langage de description de documents qui gère les paramètres ou valeurs autorisées. Plus loin dans le projet, ce langage sera indispensable au fonctionnement



de l’éditeur XML choisi. C’est grâce à Relax-NG que l’éditeur déterminera la structure du document.

• XSL

XSL (eXtensible Stylesheet Language) est une famille de recommandations pour la transformation et la présentation de documents. Une feuille de style XSL est un fichier qui décrit comment doivent être présentés (c'est-à-dire affichés, imprimés) les documents XML basés sur une même DTD.

• XSLT

Sous ensemble de XSL, XSLT (eXtensible Stylesheet Language Transformation) à pour objectif la transformation d'un document XML vers un autre, ou un dialecte XML (XHTML, XSL-FO, HTML, etc.).

• CSS

CSS (Cascading Style Sheets) ou feuilles de style en cascade, est utilisé pour décrire la mise en forme d’un document écrit en HTML.

4.1.2 Avantages XML est un langage normalisé dont l’utilisation ne cesse de croître. Divers outils d’analyse de fichiers XML (parseurs) sont d'ores et déjà opérationnels. La galaxie XML dispose de plusieurs dialectes propres à différents secteurs d’activités facilitant l’interopérabilité pour l’échange de données. Ce sont en quelque sorte les grammaires du XML. Parmi ces dialectes, on peut citer :

• XHTML XHTML est un langage balisé servant à l'écriture de pages web. C’est le successeur de HTML car il respecte la syntaxe définie par XML. XHTML oblige à séparer la forme du fond par le biais des CSS.

• EbXML

Abréviation de l'anglais Electronic Business using eXtensible Markup Language signifiant commerce électronique en utilisant XML. C’est une suite de spécifications basées sur le langage XML qui définit un standard pour le commerce électronique. C’est la norme à respecter dans l’exemple d’un partenariat entre deux sites de vente en ligne.

• MathML

MathML est un langage basé sur XML. Il permet l'affichage de symboles mathématiques, notamment sur Internet

• NewsML

L'International Press Telecommunication Council, créé entre autres par Reuters et l'Agence France Presse, a développé la norme NewsML qui offre une infrastructure XML adaptée à la transmission d'actualités (dépêches, images, vidéos, etc.). NewsML est donc un standard à prendre en compte dans le déroulement du projet.



• NITF Le format News Industry Text Format, sous ensemble de NewsML, permet de structurer le corps d’un papier (citations, encarts, etc.).

4.2 XML, la solution incontournable pour HOSPIMEDIA

4.2.1 Restrictions dues au format HTML

• Comme l’éditeur actuel génère le corps des papiers au format HTML et sans feuille de style, l’affichage des papiers est figé. Ils sont contenus dans un cadre de 450 pixels de large (largeur qui correspond à la zone centrale du site hospimedia.fr), les polices et tailles sont définies de manière stricte dans le fichier. Il est donc impossible de modifier la mise en forme des papiers.

• Chaque contenu étant balisé par du HTML, il est impossible de générer une version PDF du papier. Ce format est souvent très utile pour l’impression car le rendu papier est le même qu’à l’écran. Les contenus HOSPIMEDIA n’étant pas accessibles au public, il peut également servir aux journalistes pour envoyer un papier par e-mail.

• Il n’est pas possible de générer une version texte du papier. Cela serait très utile pour envoyer dans les alerteurs au format texte. A l’avenir HOSPIMEDIA pourrait également envisager une diffusion multi-canal et diffuser ainsi ses contenus sur des PDAs, ou des téléphones portables n’interprétant que le WML (WAP).

• La personnalisation de l’affichage est exclue. Il est pourtant très intéressant de pouvoir personnaliser l’affichage de contenus, ne serait ce que pour pouvoir modifier la taille de la police de caractères.

• Il est impossible d’enlever les liens pointant vers des ressources Internet. Ceci est très gênant pour les clients ne disposant pas de connexion à Internet comme exposé dans le contexte du présent document.

4.2.2 Possibilités offertes par le XML

• Le langage XSL associé aux feuilles de style CSS va permettre de personnaliser la mise en

forme des publications. On pourra par exemple proposer plusieurs versions d'un même papier : o La taille de police peut être différente pour les personnes déficientes visuellement.

Il serait alors possible de recharger la page en agrandissant la taille du texte. o La mise en forme peut également différer en fonction de l'utilisateur connecté. o Les renvois peuvent être personnalisés.

• L’ancien éditeur génére du code HTML non standard alors qu’avec le trio XML/XSL/CSS les

contenus sont conformes à la norme XHTML.

• Il sera beaucoup plus facile d’exporter les contenus HOSPIMEDIA. De plus ceux-ci respecteront les normes en vigueur dans le milieu de la presse. N’importe quel système tiers



pourra donc interpréter et mettre en forme les exports (avec la DTD).

4.3 Pourquoi utiliser un éditeur WYSIWYG Web ? Lors de la saisie des papiers dans le backoffice, le journaliste doit pouvoir qualifier facilement les différentes informations sans avoir de compétences techniques autour de XML. Cette facilité de saisie est vitale pour la viabilité du projet. Le grand intérêt d'un éditeur XML WYSIWYG est qu'il va permettre à l'utilisateur de sélectionner un morceau de texte, puis d'indiquer le type d'information contenu dans la sélection. L'éditeur WYSIWYG devra insérer la balise XML correspondante dans le fichier source du papier et appliquer un rendu à l'écran afin que le journaliste perçoive le résultat de son action. 4.4 Comparatif des solutions existantes

4.4.1 Constats préliminaires

Lors de notre première réunion technique sur ce projet, certaines idées principales à propos des caractéristiques de l'éditeur ont été dégagées.

• Cet éditeur doit être facilement accessible via un navigateur web afin que les journalistes puissent l'utiliser de n'importe quel endroit (chez eux par exemple).

• Il doit être assez modulaire pour pouvoir être intégré au framework actuel et paramétrable pour être adapté au besoin spécifique d'HOSPIMEDIA.

Après réflexion avec l'équipe de développement, il nous a semblé pertinent d'essayer de privilégier la sélection d'un logiciel libre pour différentes raisons :

• L'indépendance L'utilisation d'un logiciel libre garantit une indépendance vis-à-vis d'un éditeur, en effet rien ne certifie que la société éditrice d'une solution propriétaire ne fasse faillite. Comme cette société est la seule à posséder les compétences techniques pour faire évoluer le logiciel, HOSPIMEDIA serait dans une impasse avec un logiciel qu'elle ne pourra pas faire évoluer en fonction de ses besoins.

• Adaptation du logiciel

Comme la modification d'un logiciel libre est possible, cela permettra durant le développement du projet de répondre plus précisément aux besoins, et de faciliter l'intégration entre les différentes applications nécessaires pour répondre au problème posé.

• Le coût

La base libre, n'induit pas de coût sur les licences comme avec un logiciel propriétaire. Lors d'un développement spécifique, il vaut mieux partir d'une solution libre que de rien. Ceci permet de réduire le temps et le coût de fabrication de l'application. En effet, les fonctionnalités stables déjà présentes dans le logiciel libre ne sont pas à programmer ni à déboguer. Le développement d'un éditeur XML WYSIWYG par HOSPIMEDIA est trop coûteux car



trop long et très complexe (cf. 4.4.5.2 - Complexité à concevoir et développer un éditeur WYSIWYG Web).

• Maintenance d'un Logiciel Libre

HOSPIMEDIA n'a pas les moyens humains pour maintenir ce logiciel. Par contre, le fait d'apporter à la communauté les améliorations que nous allons développer va intéresser les autres développeurs de ce logiciel, qui feront évoluer ces fonctionnalités et corrigeront des erreurs. (cf. 5.4 - Mise en oeuvre de Bitflux).

4.4.2 Sites visités

Nous avons d'abord recensé les sites de recherche et les annuaires ayant une liste de logiciels qui correspondent à notre besoin :

4.4.2.1 Sites de recherches

● http://www.google.fr/

● http://freshmeat.net/ Le plus gros annuaire de logiciels libres du Web.

4.4.2.2 Annuaires d'éditeurs XML

● http://www.htmlarea.com/directory/WYSIWYG_Editors/ Annuaire d'éditeurs XHTML WYSIWYG, contient quelques éditeurs XML.

● http://www.geniisoft.com/showcase.nsf/WebEditors Annuaire d'éditeurs XHTML WYSIWYG avec un tableau des fonctionnalités.

● http://www.xmlsoftware.com/editors.html Éditeurs pour code source en XML, très peu de WYSIWYG.

● http://www.xml.com/pub/pt/3 Même type d'annuaire que le précédent.

Les réponses les plus pertinentes des moteurs de recherche, nous ont été fournies avec les mots clés suivants : « xml wysiwyg editor », « xml web editor », « web based xml editor ». Après une recherche préliminaire sur Internet, nous avons constaté que les éditeurs XML WYSIWYG étaient très rares (une demi-douzaine de logiciels). Nous avons donc décidé de privilégier la facilité d'utilisation par les journalistes. Les autres critères ne seront qu'optionnels.


http://www.google.fr/

http://freshmeat.net/

http://www.htmlarea.com/directory/WYSIWYG_Editors/

http://www.geniisoft.com/showcase.nsf/WebEditors

http://www.xmlsoftware.com/editors.html

http://www.xml.com/pub/pt/3


4.4.3 Critères de sélection Comme évoqué précédemment, aucun critère ne sera bloquant dans la sélection du logiciel. Ceux-ci seront classés par ordre décroissant d'importance. • Facilité d'utilisation (impératif)

L'interface graphique de l'éditeur doit être proche d'un outil comme Microsoft Word ou Open Office, le journaliste ne doit pas avoir besoin de taper du code XML.

● Fonctionne dans un navigateur Web Si ce point est respecté, les journalistes ne changeront pas leurs habitudes de saisie de papiers sur hospimedia.fr. De plus, ils pourront éditer des contenus de n'importe quel ordinateur connecté à Internet. Ce critère est néanmoins optionnel, en effet, la plupart des éditeurs XML WYSIWYG doivent être installés sur l'ordinateur.

● Fonctionne avec tous les navigateurs Tous les journalistes utilisent actuellement Internet Explorer, cependant, nous aimerions avoir la liberté de choix du navigateur.

● Coût de la licence / Logiciel Libre Comme développé dans les constats préliminaires, pour des raisons de coûts cela serait un vrai plus que cet éditeur soit libre. Néanmoins les projets libres sont très peu nombreux par rapport aux solutions propriétaires.

4.4.4 Logiciels sélectionnés

Les copies d'écran ci-dessous donnent un aperçu de chaque logiciel testé. Plus bas un tableau comparatif est dressé afin de pouvoir évaluer les fonctionnalités de chacun.



● Kalinews - http://www.kalinews.net/

Figure 6 – Copie d'écran de Kalinews. ● Serna - http://www.syntext.com/products/serna/

Figure 7 – Copie d'écran de Serna.


http://www.kalinews.net/

http://www.syntext.com/products/serna/


● Ewebedit Pro - http://www.ektron.com/ewebeditproxml.aspx

Figure 8 – Copie d'écran de EwebEdit Pro. Xopus - http://www.xopus.com/

Figure 9 – Copie d'écran de Xopus.


http://www.ektron.com/ewebeditproxml.aspx

http://www.xopus.com/


● EDX - http://sourcesup.cru.fr/edx/

Figure 10 – Copie d'écran de EDX.


http://sourcesup.cru.fr/edx/



axe - http://jaxe.sourceforge.net/Jaxe.htmlJ

Figure 11 – Copie d'écran de Jaxe.

itflux Editor - http://www.bitfluxeditor.org/ B

Figure 12 – Copie d'écran de Bitflux Editor.

Franck DUPONT



Logiciels Kalinews Serna Eweb Edit Pro Xopus Description Kalinews est un

logiciel spécialisé dans l'édition d'articles au format NITF ou NewsML.

Application XML WYSIWYG

Éditeur Web XML WYSIWYG

Éditeur Web XML WYSIWYG

Facilité d'utilisation

Moyenne Faible Très bonne Excellente

Utilisable dans un navigateur Web NON NON

OUI (Internet Explorer seulement)

OUI (Internet Explorer seulement)

Coût de licence / Logiciel Libre

855 € HT pour 5 utilisateurs

774,18 € pour 5 utilisateurs

490,68 € pour 10 utilisateurs

700 € pour 10 utilisateurs

Avantages ● Enregistre au format NITF

● Correspond à nos besoins

● Correspond à nos besoins

● Facile à utiliser Inconvénients ● Complexe à

utiliser ● Application à

installer

● Complexe à utiliser

● Application à installer

● Fonctionne avec Internet Explorer seulement

● Prix élevé

● Fonctionne avec Internet Explorer seulement

Logiciels EDX JAXE Bitflux Editor Description PHP, se pr

ormuApplet Java d'é

IWire)

diteur ML IW

Logiciel en ésente sous forme d'un fremplir

laire à XML WYSglossa

dition de ÉYM (voir WYS

Web XYG

Mauvaise

navigateu OUI x seulement)Coût de licence / Libre

(Licence GPL) Libre (Licence GPL)

Libre (Licence Apache 2) Logiciel Libre

Avantages ● ère les fichiers HTML, PDF, etc.

● orr s● Bien

Entipers

i● Utilisé par tous les projets

libres qui édite du XML sur le Web

Gén C espond à nos besoin documenté

● èrement onnalisable

● Ma ntenu

Comple● Peu ergonomiq

Pas intera

● Le rendu à l' ran ne au rendu

● Qucorrespfi

es bogues mineursl'utilisation

Facilité d'utilisation

Moyenne Excellente

Utilisable dans un r Web OUI OUI

(Firefo

Inconvénients ● xe à utiliser ue

● ctif

écond pas

nal ● Pas intuitif

elqu lors de

● Fonctionne avec Firefox seulement

Franck DUPONT



analyse ableau nous avons rema e les éditeurs web qui dent le mieux (Bitflux Editor, Xopus et eWebEdit pro) ne fonctionnent qu'avec un navigateur web donné,

e nous bres us les navigateurs

CKeditor .fckeditor.net/

Après de ce t rqué qu nous correspon

alors qu connaissons deux éditeurs we :

b XHTML WYSIWYG li , fonctionnant avec to

● F : http://www● TinyM

Nous nous somleur capacité

mes a YG n'avaient pas éten

WYSIWYG a

ors que d'échan

Nous n mes également penché id e éditeur XML.

YG ?

si demandé pob.

s créateurs de ce

L L enédition XM utilisée par des non- rmaticiens

CE : http://tinymce.moxiecode.com/

lors demandé pourquoi les éditeurs XHTML WYSIW du d'édition vers le XML et pourquoi il existe si peu de logiciels pour éditer le XML en

l le XML est le format ge de l'avenir.

ous som s sur l' ée de développer notre propr

4.4.5 Pourquoi existe-t-il peu d'éditeurs XML WYSIW En plus des questions évoquées au point précédent, nous nous sommes aus urquoi les éditeurs Web XML ne fonctionnent qu'avec un seul type de navigateur WeLors de notre prise de contact avec la communauté autour de Bitflux Editor, lelogiciel ont pu nous apporter des réponses.

4.4.5.1 ' core peu info

e XML est surtout utilisé lors d'échanges d'informations entre deux entités, cela peut être un rs, les résultats d'une recherche, ou encore dans des

ffectue ette séparation sans s'en rendre compte. Actuellement, lorsque l'utilisateur doit qualifier de

l'infor

ations dans un document n'est pas un automatisme que ossède les utilisateurs moyens.

Actuellement, la diffusion de contenu sur Internet se fait via des documents de traitement de texte ou via des pages Web. L'échange de contenus entre sites web se résume à un échange de lien ou de flux RSS. Léchange de messages entre deux utilisateufichiers de configuration.

Les utilisateurs n'ont pas conscience que leurs applications utilisent le XML. Même dans le cas de la suite bureautique OpenOffice qui utilise nativement le format XML, l'utilisateur n'a pas conscience de la séparation entre le fond et la forme. Pourtant, lorsqu'il indique par exemple que cette portion de texte est un titre de chapitre, il ec

mation, le système lui propose un formulaire à remplir. Les éditeurs XML WYSIWYG laissent beaucoup plus de liberté que les formulaires. En effet, ils peuvent par exemple agencer l'ordre de l'information, ce qui est impossible dans le cas d'un formulaire. Malheureusement, la qualification des informp

Franck DUPONT

http://www.fckeditor.net/

http://tinymce.moxiecode.com/



YG

anmoins, deux « détails » vont énormément compliquer le développement.

as

Le rendu à l'écran est bien plus complexe à réaliser. Pour l'éditeur XHTML, il lui suffit de

e XML en XHTML afin que le navigateur web puisse l'afficher.

sur un alités. Pour Internet Explorer, une

xtension (MSXML) doit être installée.

isation onnalités.

dards du web et qui fonctionne avec Internet Explorer seulement.

Mozilla Firefox quant à lui rend accessible les fonctionnalités précitées grâce à Javascript, une technNéanmoins, seul Mozilla Firefox possède un interpréteur Javascript assez complet pouvant réaliser

ctiveX n'est pas compatible avec Javascript : créer un éditeur XML qui fonctionnerait avec ces d x Pour résumer, un éditeur XML est un éditeur « générique » capable de créer un document à partir de n' ant d Tou u le tr

es éditeurs XHTML suffisent aux besoins des utilisateurs car dans la plupart des cas ils ont

ntent pas le besoin de qualifier l'information ; ils veulent juste appliquer des tyles sur du texte.

4.4.5.2 Complexité à concevoir et développer un éditeur XML WYSIW

À première vue, un éditeur XML semble être aussi difficile à réaliser qu'un éditeur XHTML. Dans un cas comme dans l'autre, il est nécessaire de manipuler des balises, puis d'appliquer un rendu à l'écran. Né • La grammaire de XHTML est déterminée, il possède un nombre de balises fixe. Dans le c

d'un éditeur XML, il doit s'adapter en fonction de chaque grammaire.

• passer au navigateur web les balises pour que celui-ci affiche le rendu. Pour le XML, le navigateur Web ne sait pas comment l'afficher. Il faut créer un fichier XSL qui transforme le cod

Le navigateur web doit donc savoir manipuler des fichiers XML et appliquer un fichier XSL fichier XML. Seul Mozilla Firefox possède de telles fonctionne Internet Explorer n'a pas du tout la même approche que Mozilla Firefox pour permettre l'utilde ces foncti Pour Internet Explorer, cela est possible seulement avec ActiveX, une technologie créée par Microsoft, non conforme aux stan

ologie standardisée largement utilisée par tous les navigateurs web.

ces opérations. Dans l'avenir, les autres navigateurs (Konqueror, Safari, Opéra) auront ces fonctionnalités, mais ce n'est pas à l'ordre du jour car ceci est encore très peu utilisé sur le web. A

eu navigateurs en même temps reviendrait à créer deux logiciels distincts.

importe quel dialecte XML, dont le XHTML. Un éditeur web XML WYSIWYG est dépendes fonctionnalités fournies par le navigateur web.

t ceci nous a dissuadés d'envisager de transformer un éditeur XHTML libre en éditeur XML vavail nécessaire.

4.4.5.3 Éditeur XHTML WYSIWYG couvrant en partie le besoin

Lseulement une problématique de publication sur le web. Les utilisateurs ne resses

Franck DUPONT



esoins en terme d'ergonomie :

itflux possède un certain nombre de défauts par rapport à Xopus :

flux va obliger les journalistes à utiliser Mozilla Firefox à la place d'Internet Explorer ;

● Le backoffice d'hospimedia.fr a été prévu pour Internet Explorer seulement, certaines fonctionnalités ne sont pas utilisables avec Mozilla Firefox. Le backoffice devra donc être mo

us.

.2.1 (« constats préliminaires »).

avec ce dernier va permettre de financer une partie du temps passé à corriger les bogues qui nous gênent le plus. Ces apports seront donnés à

e t améliorés par l'équipe de développement.

s journalistes vers Mozilla Firefox sera très facile, tous les navigateurs web ont une interface graphique similaire. De plus, ils pourront profiter de nouvelles fonctionnalités

La communauté autour de Bitflux : Bitflux est utilisé par un certain nombre de projets, dont le s au format XML.

et de nouvelles fonctionnalités vont

Tout ceci fait que les éditeurs XHTML sont beaucoup plus répandus, car ils sont plus faciles àréaliser et ils répondent globalement au problème des utilisateurs qui publient sur le web. 4.5 Éditeur choisi : Bitflux Editor Après avoir analysé les différents logiciels disponibles, deux logiciels couvrent entièrement nos b● Xopus ; ● Bitflux Editor. Les deux logiciels se ressemblent dans la façon d'éditer des documents XML, elle correspond à ce que nous avions défini (cf. 4.3 - Pourquoi utiliser un éditeur XML ?). B● Bitflux possède actuellement plus de bogues que Xopus ; ● L'utilisation de Bit

difié pour être compatible Mozilla Firefox.

Malgré tous ces défauts, nous avons sélectionné Bitflux Editor.

4.5.1 Pourquoi avoir sélectionné Bitflux Editor ?

Un certain nombre de points nous ont semblé plus intéressants à court et moyen terme que Xop

Bitflux est un logiciel libre, donc nous profiterons de tous les avantages cités au point 7●

● Le prix : Bitflux est gratuit et l'économie réalisée

l'équipe de développement de Bitflux afin que nos corrections profitent à d'autres utilisateurs dl’outil, et que nos ajouts soien

● La migration de

comme la navigation par onglets et une meilleure sécurité qu'avec Internet Explorer.

●fameux projet Apache Lenya1, un gestionnaire de contenus stockéComme le projet est assez actif, des corrections de boguesapparaître, elles pourront être intégrées dans la version de Bitflux d'HOSPIMEDIA.

1http://lenya.apache.org/screenshots.html#wysiwyg

Franck DUPONT



ur hospimedia.fr 5. Implémentation de la solution s 5.1 Présentation de Bitflux

5.1.1 Le contexte de création de Bitflux Editor

Bi ristian Stocker (alias chregu) qui travaille dans la société Bitflux Gmhtt

tflux Editor a été initié par Ch

bH, société suisse qui fournit des solutions globales pour la gestion de contenu sur Internet : p://www.bitflux.ch/.

tflux GmbH à donc créé BitCMS, qui est un logiciel de gestion de contenus basé sur XML. tCMS est un logiciel libre, disponible sur : http://www.flux-cms.org/

BiBi .

ur pouvoir modifier facilement les contenus dans BitCMS, les clients de Bitflux GmbH ont eu soin d'un éditeur WYSIWYG.

Pobe Toson

omme expliqué au point 6.6.1 (« Objectif et présentation »), la Relax-NG permet de connaître la rammaire d'un dialecte XML.

t qu'édite l'utilisateur, Bitflux détermine les

balises XML qui'il est possible d'ajouter grâce à la Relax-NG. (cf. 5.3 - Relax-NG, le schéma XML utilisé par Bitflux). Pour obtenir un rendu à l'écran, un fichier XSL est nécessaire pour transformer le code XML en code XHTML afin que Mozilla Firefox puisse l'afficher. Enfin, une feuille de style CSS permet de personnaliser le rendu. Sans tous ces éléments, il est impossible d'éditer un papier avec Bitflux. (cf. figure 2 - Le système de publication au format XML).

5.1.3 Fonctionnement Interne de Bitflux

Bitflux est basé sur deux autres projets libres : • Kupu - http://kupu.oscom.org/

ut ceci a donc conduit Christian Stocker à créer un éditeur web WYSIWYG XML. Le fruit de travail a donné Bitflux Editor.

5.1.2 Le fonctionnement général de Bitflux

Cg

Lors de l'édition, en fonction de la zone du documen

Kupu est un éditeur XHTML WYSIWYG. Il fonctionne avec tous les navigateurs web. Bitflux utilise Kupu pour dessiner son interface graphique ainsi que pour la gestion des boutons.

• Mozile - http://mozile.mozdev.org/

Franck DUPONT

http://lenya.apache.org/screenshots.html



l'enregistrement des fichiers XML est confié à Mozile.

5.1.3.1 Arborescence du projet Bitflux 2

Après avoir téléchargé le code source de Bitflux 2 à l’adresse suivante :

Mozile est un éditeur XHTML WYSIWYG. Il ne fonctionne qu'avec Mozilla Firefox. Dans Bitflux, la gestion des menus contextuels, la barre de menu, le chargement et

http://www.bitfluxeditor.org/development/cvs/, voici l'arborescence que l'on obtient :

• css Contient les CSS qui définissent la couleur des éléments de l'interface graphique de Bitflux.

Documentation obsolète. Toute la documentation est sur :

• docs

http://wiki.bitfluxeditor.org/BXE_2.0.

• examples

•

Contient le logo Bitflux ainsi que les images des boutons dans Bitflux.

Le noyau de Bitflux en Javascript. Détails de ce dossier :

ge le fichier de configuration.

stion des menus, du XML, du XSL, etc.)

Applique les styles sur l'interface graphique.

o bxeNodeElements.js

Fournit des fonctions Javascript pour modifier les balises dans le fichier XML édité.

Gestion des langues.

Contient deux exemples, un éditeur RSS et un éditeur qui contient une bonne partie des fonctionnalités de Bitflux.

images

• js

o bxeConfig.js

Char

o bxeFunctions.js Toutes les fonctions de base de Bitflux (ge

o bxehtmltb.js

Gestion interne des balises XML.

o bxeXMLDocument.js Gère le fichier XML édité.

o bxeXMLNode.js

o eDOMEvents.js

Quand le fichier XML est modifié, déclenche l'évènement approprié.

o i18n.js

Franck DUPONT

http://www.bitflux.ch/

http://mozile.mozdev.org/



o widget.js étés, etc.)

e itflux).

• itf_hospi

contenant notre projet.

• xemple d'une gallerie d'images avec Bitflux.

• lugins disponibles pour Bitflux.

• ossier qui contient des scripts qui analysent la Relax-NG.

• scripts

Exemples de scripts PHP pour gérer l'enregistrement des fichiers XML sur un serveur web. • xsl

Transforme le fichier XSL utilisé par notre projet.

• bxeLoaScript qui démarre Bitflux.

5.1.4 jet

Dans le dossier nitf_hospi, nous avons organisé notre projet ainsi :

• css Constyle de

• hosContiennitf e/production/data/xml/[numéro d'article].xml lorsqu’un nouvel article est créé.

o table.js Gestion des tableaux.

Gestion des fenêtres Bitflux (l'éditeur de propri

• kupu Fichier de kupu (cf. 5.1.3 – Fonctionnement interne de Bitflux).

• lang

Fichiers de traduction.

• mozilFichier de mozile (cf. 5.1.3 – Fonctionnement interne de B

nLe dossier picturesExample E plugins P relaxng D

der.js

Architecture de notre pro

tient les modifications de style que nous avons apporté à l'interface Bitflux ainsi que le papiers. s

pi t le fichier XML par défaut lors de la création d'un article. Ce fichier,

_modele.xml est copié dans le dossier /hom

Franck DUPONT

http://www.bitfluxeditor.org/development/cvs/



Ce dossier contient également nitf_hospi.xsl, la feuille de transformation du XML en XHTM Bitflux.

• popup Contie

add_img.php

add_link.php

aît lors de l'ajout ou de la modification d'un lien.

de lien, etc.).

id.php éro identifiant.

• ng G que nous avons créé, nous l'avons séparée en deux pour faciliter la

rps.rng.php le corps du papier.

ragraphe.rng.php

l

ig.xml.php t de tous les fichiers (Relax-NG, fichier utons présents dans la barre d'outils, etc

s sur : http://wiki.bitfluxeditor.org/Config.xml

L pour l'affichage dans

nt les fichiers PHP qui sont dans les popups :

o Permet d'ajouter ou de modifier une image.

o Popup qui appar

o get_header.php Permet de connaître les caractéristiques d'un lien (taille, type

o get_À partir de l'adresse web d'un papier HOSPIMEDIA, donne son num

rContient la Relax-Nmaintenance :

o coLes balises présentes dans

o paCelles contenues dans les paragraphes.

• exit.htmFichier appelé à la fermeture de Bitflux, pour fermer le navigateur.

• confLa configuration de Bitflux, contient l'emplacemen

ML à éditer, CSS, etc.), les plugins activés, les boX(Tous les détail ).

•

• loadsave.php b.

La plupart des fichiers qui contiennent du XML ont pour extension « .php ». En effeCela no r modifier le contenu d'un fichier XML lors de son appel. Par exemple, lorsque le journaliste clique sur le lien pour lancer Bitflux, le numéro du papier à modifier est passé en paramètre du fichier config.xml.php. Ainsi, lorsque Bitflux va lire ce fichier, il conti ml différent par pap

ndex.php i

Page qui démarre Bitflux.

Charge et sauvegarde le fichier XML édité sur le serveur we

t, PHP est un langage de script qui est utilisé pour être exécuté par un serveur web. us permet de pouvoi

endra le numéro du papier. Sans cela, nous aurions du faire un fichier config.xier.

Franck DUPONT



5.2 La dernière version stable de Bitflux 1 date de décembre 2004. Une nouvelle version, Bitflux 2 est en préparation depuis janvier 2005, elle sortira fin 2005. Cette nouvelle version apporte beaucoup de nouvelles fonctionnalités par rapport à Bitflux 1 :

• Un me

• Il e

• Les balises peuvent apparaître sous un nom plus explicite que dans la Relax-NG, avec une aid

• Il e rir une popup personnalisée lors de la création ou la modification d'une bal

•

• itflux 2 intègre un système de plug-in qui permet d'ajouter facilement des fonctionnalités san ettre à jour Bitflux mê

Plus de dét ions : http://wiki.bitfluxeditor.org/BXE_2.0

Sélection de la version de Bitflux

illeur rendu ;

st beaucoup plus rapide que Bitflux 1 ;

e explicative ;

st possible d'ouvise ;

Il est possible de cacher des balises ou des propriétés ; B

s modifier Bitflux. Ceci est très intéressant, car il est possible de mme si nous ajoutons des fonctionnalités.

ails à propos des améliorat . Par contre, Bitflux 2 n'est pas encore sorti en version stable, il possède plus de bogues que Bitflux 1. Néanm 1. ple pour les utilisateurs. Avec Bitflux 1,

i

2. La ppers lises spécifiques Bitflux.

version 1 cela n'existait pas.

3. Bitf Bitflux 2, or Bitflux 1 va être abandonné l'année prochaine, il aurait fallu repenser entièrement le projet pour pouvoir utiliser Bitflux 2.

Nous a

es modifications que nous apporterons à Bitflux 2 seront publiques afin qu'elles soient intégrées à

fficielle. e bogues et

oins nous avons décidé d'utiliser Bitflux deux pour trois raisons :

Il sera possible de réaliser une interface graphique siml'éd tion d'un papier aurait été complexe pour les journalistes.

ersonnalisation de Bitflux est bien plus simple avec la version 2 qu'avec la 1. En effet, ces nnalisations sont contenues dans la Relax-NG sous forme de bao

Alors qu'avec la

lux 1 est incompatible avec

vons donc décidé d'utiliser Bitflux 2. Lla version officielle de Bitflux. Nous avons pris cette décision afin que notre version de Bitflux soit identique à la version oAinsi, nous pourrons mettre facilement à jour Bitflux et donc profiter des corrections dde nouvelles fonctionnalités. 5.3 Relax-NG, le schéma XML utilisé par Bitflux

Franck DUPONT

http://wiki.bitfluxeditor.org/Config.xml

http://wiki.bitfluxeditor.org/Config.xml



5 F

es standards sont généralement définis par des consortiums (W3C, IPTC, etc.) qui regroupent des ts

nt que les standards qui en découlent correspondent à de nombreux cas réels. Nous avons suivi au plus près la norme NITF en effectuant le moins de modifications possibles.

à la norme NITF, les erreurs de conception qu'il ourrait contenir sont peu probables par rapport aux erreurs que nous aurions pu commettre

5.3.1.1 quoi avons nous néanmoins créé notre propre dialecte XML à partir de NITF ?

NITF correspond à notre besoin. Néanmoins, nous ne pouvons pas utiliser la Relax-NG de NITF dire

• sont pas utiles pour HOSPIMEDIA, il est donc inutile que les journalistes aient accès à celles-ci dans Bitflux.

• Avec NITF, il n'est pas possible de qualifier les liens aussi précisément comme défini au

pour indiquer si c'est un papier interne à HOSPIMEDIA ou une définition. Or, nous avons

5.3

pe DTD, XML-Schema u Relax-NG).

ent.

.3.1 Intérêts à suivre le standard NIT

Un standard définit les règles qui déterminent comment doit être constitué un fichier ou une communication qui respectent le standard. Cindustriels ainsi que des développeurs de logiciels libres. Les visions divergentes des participanfo

• Le consortium IPTC a longuement réfléchipsi nous avions créé notre propre dialecte.

Pour

ctement dans Bitflux, car :

NITF contient de nombreuses balises qui ne

point 5.3.2 « Eléments propres au corps du papier ». Par exemple, il n'existe pas d'attributs

besoin de cette information pour obtenir un affichage différent.

• Pour les interviews, NITF ne possède pas de balises pour différencier les propos du journaliste de ceux de la personne interrogée.

.1.2 Comment avons nous procédé pour créer notre propre dialecte ?

La définition de NITF n'existe qu'au format DTD, Néanmoins, il existe un logiciel, Trang2, qui rmet de convertir dans tous les formats de déclaration d'un dialecte XML (

o Nous avons utilisé la DTD NITF 3.2. Après la conversion, nous avons en premier lieu mis en commentaire toutes les balises et attributs qui nous étaient inutiles. Nous ne les avons pas supprimés mais commentés, afin qu'il soit toujours possible de les rajouter facilem Puis nous avons ajouté des balises Bitflux dans notre Relax-NG.

2http://www.thaiopensource.com/relaxng/trang.html

Franck DUPONT

Afin d r Bitflux dans notre Relax-NG, voici un exem

Figure <define name="a">

e comp endre précisément à quoi servent ces balisesple pour la balise qui représente les liens :

13 – Insertion d’un lien dans Bitflux.

<element name="a"> 

<bxe:name>lien</bxe:name>  <bxe:helptext>permet d'avoir un lien vers un autre document</bxe:helptext>  <bxe:onnew type="popup">popup/add_link.php</bxe:onnew> ! < -- indique la popup à ouvrir quand l'élément est ajouté dans le document.

en » --> Le contenu dans cette popup sera expliqué au point 8.4.2.1 « Insertion d'un Li <bxe:menuentry type="popup" name="Modifier le lien">popup/add_link.php

bxe:menuentry> </  <ref name="a.attlist"/>

<zeroOrMore> <ref name="enriched-text"/>  </zeroOrMore> </element> </define>  <define name="a.attlist" combine="interleave"> <ref name="common-attributes"/>  <attribute name="name"> <bxe:name>type de document</bxe:name> <bxe:defaultcontent>lien web</bxe:defaultcontent>  <bxe:noteditable/>  <choice> <value>lien web</value>

Franck DUPONT

http://www.thaiopensource.com/relaxng/trang.html

http://www.thaiopensource.com/relaxng/trang.html

<value>papier hospimedia</value> <value>e-mail</value> <value>glossaire</value>  </choice> </attribute> <optional> <attribute name="href"> <bxe:name>adresse web ou identifiant</bxe:name> <bxe:noteditable/> </attribute> </optional> <optional> <attribute name="rel"> <bxe:dontshow/> <data type="NMTOKEN"/> </attribute> </optional>  <optional> <attribute name="type"> <bxe:name>type</bxe:name> <bxe:noteditable/> </attribute> </optional> <optional> <attribute name="size"> <bxe:name>taille</bxe:name> <bxe:noteditable/> </attribute> </optional> </define>

Extrait de code 2 – Extrait de la Relax-NG d'HOSPIMEDIA Voici une capture d'écran des attributs affichés par Bitflux :

Figure 14 – Attributs affichés par Bitflux lors de l'ajout d'un lien.



P développées autour de l'ajout de liens.

editor.org/BX .0/RelaxNGEnhancement

Figure 15 – Pages PH La liste de toutes les balises Bitflux est disponible sur : http://wiki.bitflux E_2 .

e Bitflux

tion avec l'équipe de développement Bitflux, afin que notre travail .

un certain nombre de contributions dans le projet Bitflux :

les points qui n'étaient pas clairs t que nous n'avions compris.

aliser la couleur et les images sur les boutons. Toutes ces améliorations sont disponibles sur le wiki de Bitflux : http://wiki.bitfluxeditor.org/

uvre d5.4 Mise en oe

5.4.1 Contributions

Nous n collaboraavons travaillé e euxsoit réutilisable par

réalisé Nous avons

• Nous avons ajouté de la documentation en anglais sur tousou qui n'avaient pas été expliqués dans la documentation ePar exemple, nous avons expliqués comment personn

• Nous avons publié 25 rapports de bogues/souhaits sur http://bugs.bitfluxeditor.org/. Nous avons signalé tous les bogues que nous avons rencontrés. Nous avons également exprimé quelques souhaits, c'est à dire des demandes de nouvelles fonctionnalités. Pour quatre de ces bogues/souhaits, nous avons proposé un patch3 qui a été intégré à la version officielle de Bitflux. Nous avons notamment ajouté la gestion des langues (cf. 5.4.4 - Traduction).

• Nous avons donné le code source de notre projet pour qu'il soit intégré dans les exemples fournis avec Bitflux.

ou implémente la fonctionnalité proposée. 3Morceau de code source qui corrige le bogue



Comme nous l'avons signalé au point 7.2.1 (« constats préliminaires »), nous avons tout intérêt de communiquer nos améliorations au projet Bitflux. En effet, d'autres développeurs pourront à leur tour améliorer nos propositions. En ce qui concerne la documentation, il est intéressant d'y contribuer, car une bonne documentation permet à un plus grand nombre de débutants d'apprendre à modifier Bitflux, qui seront peut-être eux aussi des futurs contributeurs pour Bitflux, ce qui ne pourra qu'améliorer l’outil lui-même.

5.4.2 Personnalisation de l’éditeur

5.4.2.1 Insertion d'un lien

Lorsque le journaliste insère un lien, une popup s'ouvre (cf. figure 15 - Pages PHP développées

a popup permet au journaliste d'insérer facilement un lien vers un article HOSPIMEDIA ou vers

fin d'accélérer la saisie de liens par le journaliste, nous avons écrit une fonction en Javascript qui

st alement la taille du document ainsi que son type de ontenu (page web, image, document pdf, etc.).

Nous avons utilisé la classe XMLHttpRequest4 afin de connaître la taille d'un document sur Internet ou d'interroger la base de données pour récupérer le numéro identifiant d'un papier HOSPIMEDIA.

d'une image

ors de l'insertion d'une image, le journaliste choisit sur son disque dur le fichier image (Voir cap e

Figure Tou

uand eut mettre un commentaire sur l'image (Voir capture d'écran ci-dessous).

autour de l'ajout de liens). Lune définition grâce à un moteur de recherche intégré. Ava déterminer le type du lien (lien web, e-mail, lien vers un article HOSPIMEDIA, etc.). Si c'e un lien web, alors nous récupérons égc

5.4.3 Insertion

Ltur d'écran).

16 – Insertion d'une image avec Biflux.

tes les images sont stockées dans le dossier data/images/ à la racine du site web. l'image est insérée, il pQ

Franck DUPONT

4Cet objet Javascript permet de récupérer de nouvelles informations sans rafraîchir la page web. Ceci est l'élément clé de la technologie AJAX qui permet la même interactivité que la technologie Flash. Plus d'informations sur : http://fr.wikipedia.org/wiki/AJAX

http://wiki.bitfluxeditor.org/BXE_2.0/RelaxNGEnhancement



Figure 17 – Commentaires correspondants une image.

anger la langue de l'éditeur. Avec l'aide de ngues (aussi appelé support i18n).

l (cf. 5.1.4 - Architecture de notre projet).

our la syntaxe de ce fichier, nous avons utilisé la norme définie par le projet Cocoon5, qui est un framework pour la gestion de contenu XML. En effet, chregu l'a déjà utilisé pour le projet BitfluxCMS qui emploit les mêmes concepts de gestion de contenu que Cocoon.

les res à traduire.

Toutes les informations techniques ont été consignées sur : http://wiki.bitfluxeditor.org/BXE_2.0/i18n

5.4.4 Traduction

Bitflux n'existe qu'en anglais, il n'est pas possible de chhregu, nous avons donc développé le support multi-laC

5.4.4.1 Fonctionnement

La langue de l'éditeur est définie dans le fichier config.xmLes traductions de toutes les chaînes de caractères dans Bitflux sont contenues dans un fichier XML. P

Lors de l'execution de Bitflux, la méthode bxe_i18n.getText cherche dans le fichier de langueschaînes de caractè

5.4.5 Relax-NG dynamique en fonction du type de papier

Quand le journaliste crée ou édite un papier, celui-ci peut être de différents types (brève, dossier, interview, etc.). Suivant le type de papier, ce n’est pas la même Relax-NG qui est chargée et donc pas les mêmes balises qui sont disponibles. Pour gérer cela avec une seule Relax-NG, nous avons ajouté un peu de code PHP dans la Relax-

G, afin de n'afficher que les balises nécessaires pour le papier.

par document, nous évitons de faire évoluer des e.

N

n procédant ainsi au lieu de créer une Relax-NG Edocuments presque identiques de façon différent 5.5 Le processus de transformation

5http://cocoon.apache.org/2.1/userdocs/transformers/i18n-transformer.html

Franck DUPONT



5.5.1 Développement de la feuille XSL en vue de l'affichage dans Bitflux

L'étape suivante consiste à développer le script XSL nécessaire à la création document XHTML final.

XSL permet d'effectuer des actions sur les balises rencontrées dans le document XML. Ce langage peut donc ajouter du code ou du texte à n'importe quel endroit du document source ou lui appliquer des styles correspondants à une feuille CSS.

Pour obtenir des pages compatibles XHTML, nous devons utiliser la seconde méthode car ette norme s'appuie sur les feuilles de style CSS.

L'objectif de la feuille XSL est donc d'appliquer, pour chaque balise du document XML ource, une classe CSS spécifique.

<xsl:template match="nom">

c

s

<p class="nitfnom"><xsl:value-of select="."/></p> </xsl:template> Extrait de code 3 – Extrait de la feuille XSL

Dans l'exemple ci-dessus, le moteur XSL va encadrer de balises HTML <p>, mises en

éveloppement de

spensables pour obtenir une page web

part. Elles

améliorent l'accessibilité, et permettent de changer plus facilement de présentation. Les feuilles de

forme selon la classe CSS nitfnom, le contenu de la balise source nom.

5.5.2 Développement de la feuille de style CSS

La dernière étape nécessaire pour l'affichage d'un papier sur le site est le dla feuille CSS.

Comme évoqué au point précédent, les CSS sont indi

qui respecte la norme XHTML.

Les CSS permettent de gérer la mise en forme des pages dans un fichier à

style en cascade réduisent en outre la complexité de l'architecture d'un document.

.nitfnom { font-family: Verdana, Arial, Times; font-size: 16px; color: #336699;

font-weight:bold; }

xtrait de code 4 – Extrait de la feuille CSS E

Pour illustrer le processus de transformation expliqué dans ce point, considérons le code ci-dessous qui représente une partie de document XML.

<nom>DUPONT</nom>

Extrait de code 5 – Extrait d'un document XML.

Franck DUPONT

http://wiki.bitfluxeditor.org/BXE_2.0/i18n



En lui appliquant la transformation de l'extrait de code 3 (« Extrait de la feuille XSL ») et

le style i de us.

de l'extrait 4 (« Extrait d'un document XML »), le résultat dans le navigateur serait celu

la figure ci-desso

Figure 18 – Résultat de notre exemple de transformation.

ource d'information utilisée pour la mise en œuvre de cette tâche est le site du

La principale sW3C (http://www.w3.org/Style/CSS/). Le respect de la norme XHTML a demandé beaucoup de tem et d'attention ainsi que de nombreux tests sur différents navigateurs.

rg/

ps L'utilisation du validateur XHTML du W3C (http://validator.w3.o ) a été une aide

précieuse. 5.6 n at XHTML pour

’éditeur étant correctement configuré et intégré au framework, il faut maintenant appliquer une tra

ller un parseur XML. Ce dernier devra pouvoir être exécuté en ligne d

5.6.1 Utilisation du parseur XML

parseurs XML existent sur le marché. Les plus connus sont :

lle des transformations XSL pour PHP, Sablotron tend à devenir lent compliquent.

fre des performances raisonnables et une installation aisée.

Le principal inconvénient de ce parseur est qu’il est mal documenté.

Tra sformation des papiers XML au formhospimedia.fr

Lnsformation XSL avec XSLT pour obtenir un document XHTML affichable sur le site.

our se faire, il faut instaPe commande sous linux ; ce qui permettra d’exécuter une commande de transformation

depuis PHP.

Plusieurs

• Sablotron Implémentation officiequand les traitements se

• XSLTProc Of

• DOM Xslt

Franck DUPONT



otre choix s’est porté sur XSLTProc pour ses performances, mais aussi car c’est le parseur le plus

eur se fait en recompilant PHP après avoir installé la librairie Libxslt. Il faut jouter l’option --with-xsl[=repertoire_de_libxsl] à la ligne de compilation de PHP.

La ligne de commande utilisée pour exécuter la transformation a la forme suivante : /usr/bin/xsltproc -o [chemin_fichier_html] [chemin_fichier_xsl] [chemin_fichier_xml]

On utilise la fonction exec() de PHP pour appeler cette commande et effectuer la transformation (cf. extrait de code 6 – Exemple de transformation XSL depuis PHP).

exec("/usr/bin/xsltproc –o /home/hospimedia/data/articles/12.html

Nutilisé avec des outils libres. L’installation du parsa

/home/hospimedia/data/xsl/hospimedia.xsl /home/hospimedia/data/sources/12.xml");

Extrait de code 6 – Exemple de transformation XSL depuis PHP

e

5.7

'intégration de Bitfux dans le processus de publication est la dernière étape avant de pouvoir

Le travail consiste à recenser les endroits ou se lance l'ancien éditeur et à remplacer le code d'appel ar un appel à Bitflux. Il faut prendre en compte l'ajout mais également la modification de papiers.

Au tota

L'appel de l'éditeur se fait par une commande javascript qui ouvre une nouvelle fenêtre. Celle-ci prend d -

function open_bitflux(id_papier,type_papier)

Nous avons utilisé la même feuille XSL dans Bitflux sur hospimedia.fr. De même pour la feuille dstyle CSS.

Implémentation de l’éditeur dans le workflow Lgénérer des papiers au format XML.

pl, l'éditeur est appelé cinq fois dans le workflow.

eux paramètres qui sont l'identifiant du papier et son type afin de charger la feuille RelaxNG correspondante.

{ window.open("./bxe/nitf_hospi/index.php?papier="+id_papier+" &type_papier="+type_papier,"BitfluxEditor",""); }

Extrait de code 7 – Commande javascript qui lance Bitflux dans une nouvelle fenêtre Il a été convenu avec la rédaction que désormais, les brèves pourront également contenir de la mise en forme. En plus de l'implémentation du nouvel éditeur pour les articles et dossiers, il faut donc lancer Bitflux lors de la saisie de brèves. Pour fonctionner, Bitflux à besoin d'une feuille Relax-NG et d'une feuille XSL. De plus, lors de l'en n papier sur le serveur, Bitflux génère un document XML et un document HT portées à l'arborescence

hysique pour y intégrer ces nouveaux éléments.

registrement d'uML (par transformation XSLT). Des modifications ont donc du être ap

p

Franck DUPONT

http://www.w3.org/Style/CSS/

http://validator.w3.org/


urée de 4 heures. Ces derniers ont été mis en situation réelle

e saisie d'un article avec beaucoup de mise en forme.

petites modifications au niveau des rmes utilisé lors de la traduction été réalisées.

Figure 19 – La page de saisie d'une brève. Après avoir implémenté et testé Bitflux dans le workflow, j'ai procédé à une phase de test et deformation avec les journalistes d'une dd Les utilisateurs ont tout de suite été séduits par la facilité de prise en main de l'outil. La phase de test s'est déroulée sans problème majeur ; seules quelqueste




6. Refonte de l’ensemble des solutions de diffusion de contenu

6.1 Inventaire de la diffusion des contenus A ce jour, HOSPIMEDIA diffuse ses contenus sur des intranets avec les moyens qui dont elle dispose. La diffusion des contenus peut se faire via une base de données : tous les matins, on duplique les contenus générés qui sont dupliqués vers une base de données à laquelle le client a accès. Cette solution est lourde et oblige à avoir des compétences techniques chez le client, ce qui n'est pas toujours le cas. HOSPIMEDIA peut également proposer ses contenus sous forme de fil d’information. Le client dispose alors, pour chaque papier, des titres et chapeaux et d’un lien pointant vers le site hospimedia.fr. Cette solution exige d’avoir un compte abonné généraliste, on ne peut donc pas identifier quelle personne se connecte sur le site.

ce HTML autonome représentant les contenus du disposition sur le serveur HOSPIMEDIA ou

ent

s personnes n’ayant pas de connexion à Internet. n peut ajouter que les contenus ne respectent pas la norme HTML, ce qui réduit l'accessibilité.

.2 Les normes d'export XML dans le monde de la presse Proposé par Reuters, NewsML est une norme, basée sur XML, pour l'échange d'informations dans le monde de la presse. NewsML a un cadre d'application plus vaste que NITF, il permet de qualifier plus d'informations autour d'une collection d'articles ou de tout autre média (vidéo, son, image, etc.). Par contre, NewsML ne permet pas de qualifier le contenu d'un article, contrairement à NITF. En résumé, NITF est un sous-ensemble de NewsML. Cependant, NITF et NewsML partagent certaines balises en commun, comme le nom de l'auteur. Le dialecte XML que nous avons mis en place pour hospimedia.fr est très proche de NITF, la conversion vers ce format est très facile pour nous. NITF répond entièrement à notre besoin, car HOSPIMEDIA ne publie que des papiers.

La société peut aussi proposer une arborescenour. Cette arborescence peut alors être mise àj

transférée par FTP vers un site tiers. Pour proposer un lien vers l’actualité HOSPIMEDIA, le clidoit alors créer un lien qui pointera toujours sur le même fichier (par exemple index.html). La contrainte est que le rendu est figé car généré de façon statique en PHP. La mise en forme du corps

es papiers est en fait celle du site hospimedia.fr. d Ces trois moyens de diffuser l’information posent des problèmes de souplesse. Tout d'abord, le corps des papiers est figé et ne peut s’adapter à la charte graphique du client. De plus il est mpossible d’enlever les liens hypertexte pour lei

O 6

Franck DUPONT



Plus p://www.nitf.org/nitf-newsml.php

Néanmoins, si un client nous demande les informations au format NewsML, cela sera trivial de lui fournir, en effet, il existe un fichier XSL qui permet de transformer un fichier NITF vers NewsML.

d'informations sur : htt .

es

qui leur sont livrés.

ations les plus intéressantes se basent sur l'utilisation de XSL avec lequel il est .

ue

6.3 Feuilles XSL compatibles NITF HOSPIMEDIA diffuse ses contenus auprès de sept établissements. J'ai donc pris contact avec lresponsables techniques de ceux-ci pour leur expliquer les améliorations possibles dans les ontenus c

Les améliorations proposées portent sur l'intégration au sein de plateforme du client : on peut désormais parfaitement intégrer les contenus HOSPIMEDIA grâce à l'utilisation des CSS.

ais les améliorMpossible de générer des papiers personnalisés pour chaque client ou d'enlèver les liens hypertexte Sur sept établissements, un seul a accepté d'améliorer ses exports HOSPIMEDIA. Les causes derefus pour les six autres sont le manque de compétences techniques pour l'intégration et le manq

e temps. d

Franck DUPONT


7. Conclusion

Ce projet, fort enrichissant, m’a permis à travers ses différents aspects d’accroître mes étences personnelles et techniques : prise de responsabilités, travail en équipe, autonomie et ce n omptais.

ation

en respectant la norme NITF. HOSPIMEDIA rejoint ainsi la trentaine de sociétés qui pectent la norme Newsml notamment au coté de l'Agence France Presse et de Reuters.

Dorénavant, XML est le pilier central de la gestion du contenu de la société OSPIMEDIA. La société est capable de diffuser l'information sur n'importe quel support et dans ifférents formats.

compans u cadre propice à l’épanouissement auquel j’escd

Travailler sur une mission conséquente, cruciale pour l’entreprise et des technologies

récentes fût une expérience très intéressante.

J'ai désormais pris connaissance des problématiques liées à la production, à la présentet à l'échange de contenus sur Internet. Je me suis en outre rendu compte de l'efficacité de la echnologie XML pour répondre à ces problématiques. t

Etude de faisabilité, étude comparative, intégration de développements à une plateforme xistante, j'ai jugé ce projet complet. Le stage m'a permis de maîtriser trois nouveau langages : e

XML, XSL, Relax-NG. Le passage au XML permet à la société d'élargir les possibilités de diffusion de contenu,

ui plus estqre Hd


8. Annexes Annexe 1 - Exemple de document XML produit par un journaliste

C’est une étude sans précédent qui a été menée par l’INVS : de 1999 à 2000, les 5 Centres de coordination de la lutte contre les infections nosocomiales (CCLIN) ont

s de cadre de cette étude, les services de chirurgie clure pendant la période chaque patient opéré, y

compris en chirurgie ambulatoire. Un questionnaire standardisé a permis aux équipes

ite comptabiliser tous les cas d’ISO, y tie.

</p>

erence source="bxe_default.jpg" style="right" name="commentaires sous media-reference </media-reference>

<media-caption>#media-caption </media-caption>

ore cielles,

26% profondes et 14% concernaient un organe, une cavité ou encore un os, selon les

ner un allongement de la durée de l’hospitalisation, voire une létalité accrue. </p> <p>

Cette étude révèle en outre que les services sont inégalement touchés par des risques d’ISO. En effet, la chirurgie digestive, avec 3,9% d’ISO, présente le risque le plus élevé, contre 0,27% pour la chirurgie ophtalmique, service où les ISO sont les moins nombreuses (la transplantation d’organes se situe « hors catégorie » avec une incidence des ISO qui pointe à 8,7%). Il a également été constaté que le taux d’ISO augmentait avec la durée opératoire, l’âge des patients, la durée du séjour pré-opératoire, l’urgence ou encore le nombre de procédures chirurgicales. Ainsi, une analyse spécifique a été menée concernant les ISO sur prothèses articulaires. Il en ressort que le taux d’ISO selon le site d’infection est variable. Ainsi, pour l’ensemble des prothèses articulaires, l’incidence est de 1,4% et dans cette catégorie, les ISO « organe » représentent 10% des infections et les ISO sur prothèse de hanche représentent 85% de l’ensemble des infections sur prothèse. Cette dernière donnée, que les auteurs jugent préoccupante, « représente probablement, selon eux, un bon indicateur de la qualité des soins et un bon traceur des infections qu’il faudrait absolument éviter ».

</p> </body.content>

Annexe 2 - La feuille XSL permettant la transformation d'un article <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:strip-space elements="*"/> <xsl:output method="html" encoding="ISO-8859-1"/>   <xsl:template match="/"> <html> <head> <title><xsl:value-of select="nitf/head/title"/></title> <link rel="stylesheet" type="text/css" href="nitf.css"/>

<body.content> <p>

effectué une surveillance d’au moins 3 mois des patients opérés dans des servicechirurgie. Pour entrer dans le devaient être volontaires et in

chirurgicale et/ou d’hygiène de recueillir les données puis de classer les ISO par niveau (superficiel, profond, organe ou site). Les données concernant la date de survenue et la localisation ont également été consignées. Les patients ont ensuété suivis 30 jours après l’opération pourcompris ceux qui se déclarent après la sor

<hl2>Des infections qui touchent de manière inégale</hl2> <media media-type="image"> <media-metadata name="hospimedia"/>

<media-refl'image">#

</media> <p>

Au total, 162 151 interventions chirurgicales ont été analysées, dans des services aussi variés que la chirurgie cardiaque, vasculaire, ophtalmologique ou encthoracique. 3 129 patients ont été atteints d’une ISO : 59% étaient superfi

résultats consignés dans le <a name="lien web" type="text/html" href="http://www.google.fr/">rapport</a>

. Ces données témoignent de la gravité potentielle des ISO, qui peuvent parfois entraî

order="1" cellpadding="6" width="550"><tr><td> ly-templates /> 

</td></tr></table></body>

xsl:template match="body.head|body.content"> ply-templates />

<p cla</xsl:template<xsl:template </xsl:template <xsl:template </xsl:template<xsl:template

<xsl:t

h="th">

xsl: <xsl:t

>

<p cla </p> </xsl:template<xsl:template <b><xs</xsl:template<xsl:template <br/><</xsl:template<xsl:template <div c</xsl:template<xsl:template

es /></h1>

ch="hl2"> <h2 class="nitfhl2"><xsl:apply-templates /></h2>

/xsl:template>

xsl:template match="note"> tor's Note:</i> <xsl:value-of

<xsl:value-of select="."/></i></p>

plate match="ul"> emplates /></ul>

</head> <body><table b

<xsl:app </html> </xsl:template> < <xsl:ap</xsl:template> <xsl:template match="p">

ss="nitfp"><xsl:apply-templates /></p> > match="title"> >

match="nitf-table-summary"> > match="table"> <xsl:element name="table"> <xsl:attribute name="border">

<xsl:value-of select="@border"/> </xsl:attribute> <xsl:apply-templates /> </xsl:element> </xsl:template>

emplate match="tr"> <tr><xsl:apply-templates /></tr> </xsl:template>

e matc <xsl:templat <xsl:element name="th">

<xsl:attribute name="colspan"> <xsl:value-of select="@colspan"/> </xsl:attribute> <xsl:apply-templates />

</xsl:element> </ template>

emplate match="td"> y-templates /></td> <td><xsl:appl

te </xsl:templa<xsl:template match="byline">

ss="nitfby"> <xsl:apply-templates/>

> match="person"> l:value-of select="."/></b> > match="byttl"> i><xsl:value-of select="."/></i> > match="hedline"> lass="hedline"><xsl:apply-templates /></div> > match="hl1">

tfhl1"><xsl:apply-templat <h1 class="ni</xsl:template> xsl:template mat<

<<xsl:template match="hl3"> <h3 class="nitfhl3"><xsl:apply-templates /></h3> /xsl:template> <

< <div class="note"><blockquote><i>Ediselect="."/></blockquote></div> </xsl:template> <xsl:template match="tagline"> <p class="tagline"><i></xsl:template> <xsl:tem <ul><xsl:apply-t</xsl:template> <xsl:template match="li">

Franck DUPONT

mplates /></li>

plate> ch="block">

lockquote>

ch="org">

ribute name="href">http://www.stockpoint.com/get-quote?ticker=<xsl:value-of te>

ribute name="class">org</xsl:attribute><xsl:value-of select="."/> lement>

//www.stockpoint.com/get-quote?ticker=<xsl:value-of

g</xsl:attribute><xsl:value-of select="."/> ement>

xsl:attribute> of select="media-reference/@width"/></xsl:attribute>

ng">6</xsl:attribute>

xsl:value-of select="media-te>

idth"><xsl:value-of select="media-reference/@width"/></xsl:attribute> ><xsl:value-of select="media-

name="alt"><xsl:value-of select="media-reference/@alternate-ibute>

ue-of select="media-producer"/>

aption"/></font></b> r>

ons respectant la norme

itf>

ons du site opératoire - Près de 2% des patients touchés</title>

<tobject.subject tobject.subject.refnum="17000000" tobject.subject.type="Health"/>

ubject tobject.subject.refnum="17004000"

<tobject.subject tobject.subject.refnum="04001002" ct.subject.detail="Hospital"/>

ocdata management-status="usable" management-doc-idref="iptc.321656141.a" dref-status="canceled">

<li><xsl:apply-te</xsl:template> <xsl:template match="em"> <b><xsl:apply-templates /></b> </xsl:tem<xsl:template mat <blockquote><xsl:apply-templates /></b</xsl:template> <xsl:template mat <b> <xsl:element name="a"> <xsl:attselect="@value"/></xsl:attribu <xsl:att </xsl:e </b> </xsl:template>  <xsl:template match="media"> <xsl:element name="table"> <xsl:attribute name="align">right</xsl:attribute> <xsl:attribute name="border">1</ <xsl:attribute name="width"><xsl:value- <xsl:attribute name="cellpaddi <tr><td> <xsl:element name="img">

<xsl:attribute name="src">images/<reference/@source"/></xsl:attribu <xsl:attribute name="w <xsl:attribute name="height"reference/@height"/></xsl:attribute> <xsl:attributetext"/></xsl:attr </xsl:element> <div align="right"><font size="-2">Photo: <xsl:val </font></div> <b><font size="-1"><xsl:value-of select="media-c </td></t </xsl:element> </xsl:template> </xsl:stylesheet>

Annexe 3 - Exemple d'export d'informatiNITF <n <head> <title>Infecti <tobject tobject.type="news"> <tobject.property tobject.property.type="feature"/> <tobject.s tobject.subject.matter="Statistics"/> tobje </tobject>

<dmanagement-i

Franck DUPONT


Gestion de contenu au format XML

<hedline>

Page 57 sur 63

/> vloc city="France" iso-cc="FR"/>

rg" level-number="1"/> <from-src src-name="xmlteam.com" level-number="2"/>

ixture fix-id="tide-update"/>

elease norm="20050820T143000-0500"/> 0T143000-0500"/>

-winter-tide-updates" generation="14" version="1"/> NVS) montre que

ients opérés en 1999 et 2000 dans les services participant au ational de surveillance des infections nosocomiales (RAISIN) ont déclaré une

fection du site opératoire (ISO). Ces données varient selon le type d’intervention, la chirurgie digestive enregistrant le risque le plus élevé. "/>

year="2005" holder="HOSPIMEDIA"/> ns="online"/>

"lures"/>

ied-content> ation location-code="23602" code-source="zipcodes.usps.gov">

</location> </identified-content>

.org" date.publication="20050820T143000-0500" iptc.org/getEdition/

b"/>

of paper."/> story name="Pia Hemery" function="editor" norm="20050820T143000-0500">

Près de 2% des patients /hl1>

ire (INVS) montre que près de 2% des patients opérés en 1999 et 2000 dans les

vices participant au Réseau national de surveillance des infections nt déclaré une infection du site opératoire

elon le type d’intervention, la chirurgie gestive enregistrant le risque le plus élevé. </hl2>

<doc-id id-string="iptc.321656141.b" <e <del-list> <from-src src-name="iptc.o </del-list> <urgency ed-urg="3"/> <f <date.issue norm="20050820T143000-0500"/> <date.r <date.expire norm="2005082 <doc-scope scope="European Countries"/> <du-key key="ongoing

<ed-msg info="Une étude de l’Institut national de veille sanitaire (Iprès de 2% des patRéseau nin

<doc.copyright <doc.rights owner="HOSPIMEDIA" limitatio <key-list> <keyword key="fishing"/> <keyword key= <keyword key="tides"/> </key-list> <identif <loc </docdata>

<pubdata type="web" name="nitfvolume="XIX" number="3" issue="2" ex-ref="http://www.volume=XIX/number=3/issue=2/doc-id=iptc.321656141.<revision-history name="Nicolas Crestel" function="writer-author" norm="20050820T143000-0500" comment="Original creation <revision-hi

</head> <body>

<body.head>

<hl1>Infections du site opératoire - touchés<<hl2> Une étude de l’Institut national de veille sanita

sernosocomiales (RAISIN) o(ISO). Ces données varient sdi

</hedline> </body.head> </body> </nitf>

Annexe 4 – Manuel de l'utilisateur de Bitflux pour les journalistes

Franck DUPONT

DESS MICE 2004-2005 – Institut CUEEP – Université des Sciences et Technologies de Lille

1. Comment accéder à Bitflux ? Bitflux Editor est le logiciel qui permet d'ajouter ou d'éditer des papiers sur hospimedia.fr.

edia.fr, saisissez votre mot de passe. Allez dans vos éder à Bitflux (cf. copie d'écran ci-dessous).

Après vous être connecté sur extranet.hospimpapiers à saisir et cliquez sur "lancer l'éditeur" pour acc

Franck DUPONT Système de gestion de contenu au format XML

Page 58 sur 63


Système de gestion de contenu au format XML

Page 59 sur 63

suivante s'ouvrira :

Lorsque vous cliquerez sur le lien « Lancer l'éditeur », le fenêtre

Franck DUPONT



Page 60 sur 63

ns Bitflux ? 2. Comment faire pour copier mon papier da

Après avoir écrit votre papier avec votre éditeur de texte, lancez la création d'un papier dans l'extranet d'hospimedia. Puis : • Cliquez sur le lien « Lancer l'éditeur » ; • Voici ce que l'on obtient :

• Sélectionnez entièrement votre article dans votre éditeur de texte, puis copiez-le avec la

combinaison de touches « CTRL+C » ;

• Allez dans Bitflux, puis appuyez sur la touche F7 si le curseur de texte n'apparaît pas ;

• Cliquez après le mot « ici » ;

• Puis collez le dans Bitflux avec la combinaison de touches « CTRL+V » ;

• Enfin, cliquez avec le bouton droit sur le texte « collez votre texte ici » puis faites « supprimer l'élément paragraphe » (voir capture d'écran ci-contre) ;


3. Comment mettre en forme un article ? Chaque zone de texte encadrée représente un paragraphe dans Bitflux.

a quasi-totalité des fonctions dans Bitflux est accessible via le bouton droit.

un inter-titre, une question ou une réponse ?

Cliquez sur le paragraphe qui contient l'inter-titre ;

• En haut à gauche de l'écran, cliquez sur la liste déroulante, puis sur inter-titre (voir capture

d'écran ci-dessus). Pour définir les questions et les réponses dans une interview, « question » et « réponse » aparaîtra dans le même menu déroulant.

L 3.1 Comment insérer •


Page 61 sur 63



Page 62 sur 63

brillance, en

Pour les renvois, une fenêtre apparaît, collez le contenu du renvoi dedans.

.3 Comment insérer une image ? Cliquez dans le paragraphe avant l'endroit où vous voulez insérer

l'image ;

Cliquez sur le bouton droit, puis « paragraphe » puis « conteneur d'images » (voir capture d'écran) ;

• Cliquez avec le bouton droit sur l'image puis sur « éditer les attributs d'image » ;

3.2 Comment insérer un lien ou un renvoi, mettre en surxposant ou en indice ? e

• Sélectionnez le texte à transformer ;

• Cliquez sur le bouton droit, puis sélectionnez l'élément désiré (voir capture d'écran) ;

• Pour mettre un texte en indice ou en exposant, il faut d'abord le définir comme étant une valeur

numérique ;

• Quand vous insérez un lien, collez le lien dans la fenêtre qui apparaît puis validez -le (voir capture d'écran) ;

•

3•

•

Franck DUPONT



Page 63 sur 63

• Cliquez sur le bouton « ... » à côté du nom

de l'image pour changer l'image (voir capture d'écran ci-contre) ;

• Sélectionnez l’image sur votre disque dur ;

• Cliquez sur « Valider » puis sur « OK ».

3.4 Comment insérer un tableau ?

droit où vous voulez insérer le tableau ;

• s cellules ;

u » en bas de l'écran, puis cliquez sur « Remonter » ou « Descendre » (voir capture d'écran). Sinon, cliquez sur « éditer les attributs de tableau » pour aligner à droite ou centrer le tableau.

3.5 Comment insérer un encart ? • Cliquez sur le paragraphe après lequel vous voulez insérer un encart ;

• Cliquez sur le bouton droit, puis sur « paragraphe », puis sur « encart » ;

• Remplissez l'encart.

• Remplissez les différents champs de texte

qui apparaissent ;

• Cliquez dans le paragraphe avant l'en

• Cliquez sur le bouton « insérer un tableau » (voir capture d'écran ci-contre) ; • Indiquez le nombre de lignes et de colonnes ;

Remplissez le

• Si vous voulez bouger la position du tableau dans le document, cliquez sur « tablea

Franck DUPONT

Gestion de contenu au format XML - Le web de...

Documents

Transcript of Gestion de contenu au format XML - Le web de...