Fichier XML et présentation en CSS

Transcription

1 /travaux-dirigés/semaine 1 Fichier XML et présentation en CSS Dans ce TP, il s'agit de construire et présenter en CSS un fichier XML qui représente le CV de chaque étudiant. Les ordinateurs de travail sont des Mac sous système OS Les logiciels utilisés sont : Firefox (ou Safari, mais la présentation par défaut des fichiers XML est moins pédagogique), TextWrangler come éditeur de teste pour les fichiers XML et CSS, le module FireBug de FireFox por aider à la mise au point du fichier de CSS. Les différentes balises à utiliser sont discutées et négociées dans le groupe pour arriver à un choix commun pour tout le monde. L'objectif visé pour la fin des travaux est que chacun ait son propre fichier XML mémorisant les informations de son CV. Dans la partie sur l'association d'une feuille de style en CSS, un modèle de résultat est proposé (voir /zoneprotegee/cv/cv_fr.html), mais finalement l'objectif est que chacun ait suffisament travaillé son CSS pour que son CV soit "présentable". Un compte-rendu de TP est attendu pour mémoriser le contenu de ces travaux. CR-sem 1-ABourguignon.pdf CR-sem 1-AHely.pdf CR-sem 1-ELamourre.pdf CR-sem 1-JMatray.pdf CR-sem 1-JRousseaux.pdf CR-sem 1-PThery.pdf CR-sem 1-TPineau.pdf CR-sem1-BAngebault.pdf CR-sem1-TJankowski.pdf CR-sem 1-FRaulet 1

2 Lamourre Étienne Séance du 17 novembre 2009 Compte rendu T.P1 : XML et CSS Le but de cette séance de T.P était la découverte du format de fichier XML. C est pourquoi notre objectif était de reproduire le plus fidèlement possible un document donné (C.V) grâce aux formats XML et CSS. I-L arbre Afin de reproduire précisément le document, nous avons commencé par créer un arbre qui défini la structure du document. CV poste identite formation exp_prof divers adresse rue CP ville pays contact ad_elec type:perso tel travail type:perso travail mobile etat_civil civilite nom prenom situ_fam date_nais annee niveau adresse diplome mention ets nom intitule poste type:job cdi cdd adresse rue CP ville pays debut fin entreprise nom rue CP ville pays II-Le fichier XML L arbre que nous avons créé nous à permis de créer le document XML. Un fichier XML doit impérativement contenir des informations d en-tête comme par exemple la version d XML utilisée dans le document ou encore le type d encodage utilisé (UTF-8 est le système d encodage le plus utilisé puisque il est universel). Le document XMl est donc construit de façon hiérarchique grâce à l arbre. La construction du document s effectue manuellement en saisissant les blises et leur contenu grâce au logiciel TextWrangler. Version d XML utilisée et systèeme d encodage Module 2 xml

3 Construction du fichier dans TextWrangler Le fichier XML peut être visualisé grâce à un navigateur web. On remarque alors que l affichage diffère en fonction du logiciel utilisé. L affichage de Firefox est plus intuitif et permet de réduire les balises alors que Safari affiche uniquement le contenu des balises bout à bout. Affichage avec Safari Affichage avec Firefox Module 2 xml

4 On remarque alors la nécessité d utiliser, dans le cas d un document destiné à être afficher, un langage permettant un affichage graphique personnalisé. C est le format de fichier CSS qui exécute cette fonction. II-Le fichier CSS Le fichier CSS fonctionne comme une sorte de feuille de style. Il permet d appliquer un ou plusieurs styles au contenu d un fichier XML. Ainsi, le fichier CSS peut-être appliqué à différents fichiers XML, à condition que leurs balises soient rigoureusement identiques. Le fichier CSS interviendra alors lors de l affichage du fichier XML dans un navigateur web et lui appliquera les styles créés. L un des objectifs majeurs de CSS est de permettre d apliquer un style hors des documents. Il est par exemple possible de ne décrire que la structure d un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Module 2 xml

5 Bourguignon Adrien Licence Pro.: flux numériques, éditions et production d'imprimés T.P. XML Quel différence entre Html et XML? Le HTML est destiné presque exclusivement au 'web' (navigateurs avec protocole HTTP). XML est destiné à l'échange de données hiérarchisées entre systèmes informatiques. XML est plus souple et plus 'customisable' en fonction des besoins (chacun peut définir de nouvelles balises pour un besoin particulier). Au contraire, le schéma du HTML est fixe et tout le monde se doit d'utiliser les balises définies par le W3C. XML vs HTML: Définir ses propres balises, Pas de limitation d'imbrication des entités XML, Validation possible par rapport à un Schéma ou une DTD, Uniquement la structure du document, pas de format de présentation, Amélioration du système de liens hypertextes, source: Quel logiciel a-t-on utilisés? Nous avons utilisés Texte Wrangler pour rédiger notre code XML et la feuille de style CSS; puis Firefox pour voir le résultat de nos travaux sur la feuille de style. Avant de débuter, il faut faire le choix du langage que l'on va utiliser, ici on a utilisé le langage UTF-8 pour pouvoir utiliser des caractères spéciaux comme les accents: Ensuite nous avons réfléchis aux éléments que l'on voulait voir apparaître dans un C.V. (sujet du T.P.), alors nous avons fait la sélection de rubrique: fonction, identité, formation, poste et divers. Puis pour chaque rubriques nous avons déterminés les sous-éléments que nous souhaitions voir apparaître tous en les organisant autour d'un arbre généalogique ou chaque rubrique à des enfants qui eux mêmes peuvent t'avoir des enfants.(voir ci-dessous) L'origine est C.V. et on en découle l'arbre suivant:

6 Cet arbre, nous a permit de concevoir notre fichier XML, en gardant cette même hiérarchie dans sa rédaction. On peut également repérer cet arbre, lorsque l'on regarde uniquement les balises du fichier XML verticalement. Ce tableau nous permet également d'atteindre deux objectif très important qui sont: well formed XML et valid XML. Le premier permettra que notre fichier XML soit lisible par un logiciel (sans faute ou erreur), le second que notre fichier respecte une certaine logique et sémantique qui est définie par la DTD. En effet la DTD spécifie les trois choses suivante: quel élément existe, quel attribut définis cet élément, quel structure et quel éléments doivent apparaître.

7 On peut en effet constater que l'arbre apparaît également sur cet exemple, qui concerne la parti de l'arbre lié à la rubrique divers, on dit alors qu'un document XML inclue la définition de sa structure sous forme d'arbre. NB: On peu également remarquer sur cette exemple; une règle du XML, il est interdit de mettre une balise de début et de fin avec aucun contenu entre elles, donc pour écrire une balise vierge, il suffit de faire une balise ouvrante et fermante: <balise/> Dans un fichier XML, on peut définir une balise avec un type comme ci-dessous,où cursudéfini le type de diplôme et cursus à pour valeur VAE, ce qui permet de définir encore plus précisément la nature de la balise. Puis pour rendre notre code XML plus lisible nous avons réaliser une feuille de style CSS, l'objectif étant d'obtenir une présentation proche de celle d'un C.V. classique. Tout d'abord, il convient de présenter sa feuille de manière à faciliter sa lecture en regroupant les styles liés à une même balise ou aux mêmes balises. On peu les regroupé en utilisant des commentaires que l'on écrit de la manière suivante: /* commentaires */ Voici la manière la plus lisible de présenter du style: exprof { border:solid 2px blue; background-color:#ccaadd; font:italic 12px Arial,Verdana,sans-serif; text-align:center; }

8 Sur cette exemple (page précédente), on comprend tout de suite la balise concerné puis sur le première ligne sa présentation et sur la second ligne ce qui est lié aux caractères. Ce style permet d'ajouter une chaîne de caractère visible qui décris la balise en précisant si l'on veut placer cette chaîne avant (before) ou après (after). exprof:before{ content:'expérience professionnelle:'; font:bold 24px Arial; color:black } On peut également utiliser un flottant pour réaliser des blocs que l'on peu placer soit à droite soit à gauche comme ci-dessous: identite { display:block; float:left; } Il est possible d'attribuer un même style à plusieurs balises en une seul en l'écrivant de la manière suivante: identite, formation, exprof, diplome, poste { display:block; } Pour conclure la feuille de style CSS nous permet de réaliser une présentation plus lisible mais elle trop limitée ce qui va nous amener à utiliser un autre moyen de présentation.

9 HELY Adrien Licence Professionnelle 14 octobre 2009 XML Compte-Rendu de T.P. 1 Initiation au langage XML, utilisation du CSS Le XML pour «extensible Markup Language» est un langage reposant sur des balises et permettant le stockage et le transfert de données de manière structurée. Sa grande particularité réside dans le fait que, contrairement au HTML qui utilise un jeu limité de balises orientées présentation, le xml permet l utilisation à volonté de nouvelles balises définies par le créateur. Lors de ce premier TP nous avons tenté de créer un curriculum vitae en XML. Objectifs du TP Initiation au XML Création d'un document XML à partir d'un arbre Paramétrage de l'affichage via un CSS externe Logiciels utilisés Plan I- Création d'un document XML Introduction Choix du document à créer Etude de la sémantique, création d'un arbre La syntaxe en XML XML bien formé Affichage et interprétation II - Affichage et CSS Déclaration d'une feuille de style externe Création du CSS TextWrangler Safari Firefox 1

10 I - Création d un document XML 4Introduction Avant de rentrer dans le vif du sujet, il semble impératif de comprendre les caractéristiques relatives à ce métalangage : Une des forces du XML, qui se trouve d ailleurs être sa caractéristique principale, est qu il n est pas contraint par une liste figée de balises. L utilisateur peut imaginer autant de balises que la logique du document nécessite. Une autre particularité du XML réside dans sa capacité à séparer la définition sémantique d une information avec l information elle même ainsi qu avec l apparence que l on désire lui donner pour l afficher. 4Choix du document à créer Nous avons choisi de reproduire le CV créé lors du cours sur l HTML. Ce document présentage l avantage de proposer une sémantique claire, à la fois suffisament complexe pour justifier l utilisation du xml et à la fois suffisament simple pour ne pas se heurter aux difficultés de la création de l arbre. Il s agit donc, de prime abord, de récupérer le fichier HTML afin d en faire l étude. 4Etude de la sémantique, création d un arbre Le document récupéré, nous étudions donc son organisation afin d en dégager une structure logique. Dans le cas présent, cette étude nous amène à considérer un arbre qui sera constitué d un tronc commun CV ou l on greffera 5 branches principales : fonction identite formation exppro divers Chacune de ces branches correspond à une partie importante du CV. Notons que pour respecter les contraintes de syntaxe du xml (voir le point suivant «La syntaxe XML»), nous avons d ores et déjà décidé de nommer les branches de l arbre avec des libellés en minuscules, sans espace. Par la suite, d autres branches viendront elles-même se greffer sur les branches principales. Puis d autres branches se grefferont sur les branches secondaires, et ainsi de suite jusqu à l obtention d un arbre complet qui tient compte de l ensemble de l information à stocker. La page suivante contient une illustration schématique de cette structure et consitue donc une base de travail pour l écriture du document en xml. 2

11 3

12 4La syntaxe en XML 4Structure du document xml L écriture du document en xml s effectuera dans un éditeur textuel quelconque. Cependant pour des raisons de commodités, nous choisissons d utiliser le logixiel TewtWrangler qui offre l avantage de reconnaire la syntaxe du langage choisi et d utiliser en conséquence un code couleur identifiable. Un document XML est composé de deux parties distinctes : 1. La première partie, que l on nommera «prologue» comprend obligatoirement la ligne : <?xml version="1.0"?> Cette ligne, appelée "déclaration", doit être la première du document. Elle permet de notifier à l'interpréteur qu'il s'agit d'un document en xml. Dans cette même partie il est possible de déclarer à l'aide d'un attribut l'encodage. exemple : <?xml version='1.0' encoding='iso '?> C'est également dans ce prologue que l'on appellera éventuellement une feuille de style externe. ex : <?xml-stylesheet type= "text/css" href="style.css"?> Le DTD, que nous aborderons prochainement, sera inscrit dans ce prologue. 2. La seconde partie du document est quant à elle consacrée à l'arbre des éléments : elle comportera, au travers de différentes balises, la structure du document et par la suite les informations à stocker. 4Les balises A l'instar du HTML, le XML est un méta-langage qui repose sur des balises. Une balise débute toujours avec un signe inférieur, puis un nom de balise et enfin un signe supérieur. <nomdebalise> Chaque balise ouverte doit être fermée après l'information. La balise qui ferme s'écrit de la même manière que la balise ouvrante avec un slash supplémentaire juste après la signe inférieur. <nomdebalise> contenu, information </nomdebalise> On appelle "élément" une balise ouvrante, une information puis une balise fermante. Certaines balises sont à la fois ouvrant et fermantes (elles ne sont pas faites pour contenir de l'infomation). Dans ce cas on écrit l'élément vide : <nomdebalise /> cela est équivalent à : <nomdebalise></nomdebalise> La particularité du xml réside dans le fait que nous ne sommes pas limités à une liste de balises reconnus par les interpréteurs. L'utilisateur est libre de créer autant de balises qu'il le désire tant qu'elle respecte cette syntaxe. Dans l'exemple de notre CV nous allons donc créer des balises "sur-mesure" : <CV>, <formation>, <identite>, <exppro>... Attention toutefois à éviter les accents et les espaces dans les noms de balises. 4Les attributs Un espace dans une balise est en effet utilisé pour affecter un attribut à un élément. <nomdebalise attribut="valeur"> L'attribut, comme la balise, n'est pas fixée, il peut prendre, tout comme sa valeur, n'importe quel nom. La valeur d'un attribut doit être entre guillemets. 4Les commentaires & l'indentation Un élément important est l'apparence du fichier xml. L'arbre des éléments pouvant vite devenir complexe, on saisit assez rapidement l'intérêt d'avoir un document facilement lisible. Dans cette optique de lisibilité, les commentaires sont un outil efficace. il s'agit en effet de "notes" que l'on inscrira à volonté dans le document sans qu'elles ne soient jamais interpetrées. Voici la syntaxe à respecter pour insérer un commentaire : <!-- texte du commentaire --> L'indentation assure également une meilleure lisibilité du document. Un élément fils sera simplement décalé par 4

13 rapport à son élément père et deux éléments de même niveau apparaitront alignés. <niveau1> <niveau2a> </niveau2a> <niveau2b> <niveau3> </niveau3> </niveau2b> </niveau1> Un outil internet "XML Indent Online" propose, à partir d'un document xml brut, de générer un document formaté, indenté. 4XML bien formé Tout le comme HTML, le XML est sujet à une standardisation par le World Wide Web Consortium (W3C). Cette standardisation assure une cohérence d'interprétation entre les différents logiciels utilisés. Le navigateur Firefox affiche la page xml avec les balises et les indentations, il utilise même un code couleur pour permettre de distinguer la définition de l'information (balises, attributs) et l'information elle même. Une autre fonction intégrée permet de dérouler ou enrouler les éléments imbriqués. Safari, le navigateur d'apple, interprète la page d'une toute autre manière : Il n'affiche que le contenu informatif et cache l'ensemble des balises. Pour retrouver les balises, il faudra afficher le code source de la page. Un document est considéré comme "bien formé" s'il respecte les contraintes suivantes : Les documents XML doivent avoir un élément racine ; Les éléments XML doivent avoir une balise de fermeture ; Les balises sont "case sensitive" ; les éléments XML doivent être positionnés correctement ; Les valeurs d'attribut XML doivent toujours être entre guillemets. Si le document est "bien formé" et que sa struture obéit à un modèle de DTD, alors le document est considéré comme "valide" 4Affichage et interprétation Observons l affichage du fichier xml brut dans les différents navigateurs internet. 5

14

15 2 - AFFICHAGE ET CSS 4Déclaration d'une feuille de style externe Nous l'avons vu, avec le xml l'affichage est séparé du contenu. Pour paramétrer l'apparence que l'on souhaite donner aux informations contenus dans un document xml, il faut alors utiliser une feuille de syle écrite en CSS. Pour préciser à l'interpréteur qu'il doit utiliser une feuille de style externe pour l'affichage il suffit d'insérer une ligne de déclaration dans le prologue du document xml. <?xml-stylesheet type= "text/css" href="style.css"?> L'attribut "href" de cette déclaration doit prendre comme valeur le chemin et le nom de la feuille de style. Ici, il s'agit d'un chemin relatif, la feuille de style "style.css" se trouvant dans le même dossier que le document xml. 4Création du CSS La feuille de style est créée à l'aide du même éditeur TextWrangler, et sera rédigée en CSS. Ce langage, déjà utilisé lors du cours sur le HTML, est lui aussi soumi à une standardisation du W3C. Ce langage repose principalement sur un système de boîtes à qui l'on affectera des propriétés de style (marges, arrière-plan, taille, polices de caractères, etc.) Si nous prenons l'exemple du CV, nous appliquerons des classes aux éléments cibles en utilisant le nom des balises. On définira, par exemple, une police de caractère précise pour tout le CV en affectant une propriété d'affichage à la balise racine <cv> (tout le contenu du CV se trouvant obligatoirement entre <cv></cv>). Cela se traduira en css par : cv { font: normal 12px Arial,Verdana,sans-serif;} Sauf si une exception est déclarée pour élément donné, ce style s'appliquera à l'ensemble des fils de <cv>, c'est à dire à l'ensemble du contenu (c'est l'effet cascade). On peut également, par exemple, afficher un arrière plan avec la propriété "background" : background: url(images/old_paper.jpg); On pourra combiner les 2 propriétés (font et background) pour obtenir : cv {background: url(images/old_paper.jpg); font: normal 12px Arial,Verdana,sans-serif;} Pour afficher un élément dans un bloc à part entière et donc le détacher des autres éléments, on peut lui affecter la propriété : {display: block;} 7

16 8

17 Compte Rendu XML - 1 Ojectif: Transformer une page internet faite en HTML, en XML. Nous avons dans un premier temps, chercher à mettre en place un modèle sous forme arborescence. En tenant compte des notions père-fils, ainsi que des types si besoin. CV identité formation expprof divers civilité nom étatcivil prenom situfam datenais adresse rue code postal ville pays contact teleph Type=perso =travail =mobile adelect Type=perso =travail diplome Cadre= «formation intiale» cursus= «apprentissage» anneeobt niveau intitule etablissement adresse mention fonction début poste Type=job d été =stage =cdd =cdi fin entreprise adresse nom langues langue informatique langages langage permis logiciels logiciel rue code postal ville pays Après avoir établi ce schéma nous l avons transposé en XML de la manière suivante: Comme on peut le voir, il n y a pas d erreur, firefox affiche le tout sans émettre d erreur. De plus nous avons utilisé TextWranglers. Ici l endentation pères/fils est bien respectée. Cela permet d y voir plus clair. Cela dit attention à la synthaxe car le langage est très peu permissif. Il faut par exemple éviter de mettre des espaces avant et après cv, comme ceci < cv > Il faut penser également à mettre entre quote la valeur des types et bien fermer chaque balise. Pour des questions de compatibilitées nous avons utilisé UTF-8 pour ne pas avoir de souci d accent ou autres.

18 On peut afficher le code source à l aide de firefox:

19 Compte Rendu XML - 2 Ojectif: Utilisation de CSS pour la mise en page du code XML. On a commencé par créer un fichier CSS (toujours depuis TextWrangler) que l on a mis dans le même dossier que le fichier XML. Nous avons ensuite utilisé le fichier du TP1 en lui ajoutant une ligne de code qui allait lui permettre de faire le pont entre le fichier css (que l on a créé précédement) et lui même. Ligne de code a ajouter: <?xml-stylesheet type=»text/css» href=»style.css»?> A partir de maintenant toutes les choses qui vont être faites, le seront dans le fichier CSS. Nous n intervenirons plus sur le fichier XML. - Comment ajouter un fond? Il faut ajouter directement cette ligne de code: cv { background-color: #aaffff; } Nous avons utilisé cv car c est l entité qui se trouve au sommet de l arborescence (qui englobe le tout)

20 - Comment mettre chaque entité en bloc séparé? Comme on a pu le voir précédement chaque entité était à la suite les unes après les autres. Pour les séparer il est possible de faire une mise à la ligne à chaque fin d entité pour les différencier plus facilement : Ligne de code: identite, formation, expprof, divers { display:block; } - Comment mettre un cadre avec un fond pour une entitée? Très simplement en attribuant aux entitées que l on désire mettre un bloc la ligne de code suivante: identite {border: solid 1px grey; background-color: #ffeedd; font: normal 12px Arial, Verdana, sans-serif; }

21 - Comment modifier la taille du bloc? A l aide de Margin et Padding Ligne de code: identite {border: solid 1px grey; background-color: #ffeedd; font: normal 12px Arial, Verdana, sans-serif; margin: 0 4px; padding: 2px 8px; } - Comment mettre un cadre avec un fond pour une balise d entité? Ligne de code: identite adresse {border: solid 1px grey; background-color: #abeedd; } Ici nous avons mis un cadre pour l adresse

22 Utilisation des selecteurs. On remarque à l aide de l image ci-dessous que fonction est présent à plusieurs endroits sur le fichier xml (se reporter au fichier 1.XML) alors que nous voulions changer seulement opérateur prépresse Pour corriger ce problème il faut procéder comme suit en ajoutant un signe plus grand ou plus petit selon ce que l on veut faire. Ici on utilisera un signe plus grand que. Ligne de code: cv>fonction {border: solid 1px grey; background-color: #FFFFFF; font: normal 12px Arial, Verdana, sans-serif; margin: 0 4px; padding: 2px 8px; }

23 Pour aller plus loin, il est possible d agencer les blocs comme bon nous semble. Lignes de code: cv>fonction { display:block; float: right;} identite { display:block; float: right;} formation { clear: both; } On remarque également la présence du terme «telephone» avant chaque numéro. Ceci a été réalisé grace au code suivant: teleph:before {content: telephone: ; font-size:10px; color:grey}

24 On peut aller plus loin et demander au programme de préciser si c est le téléphone du travail, portable ou encore perso (qui ont été défini dans le code XML). Ici nous avons pris l exemple du téléphone personnel avec comme code: teleph[type="perso"]:before {content: telephone personnel: ; font-size: 10px; color:grey} Remarque: on aurait pu l écrire différement en mettant le type après le numéro. Ce qui aurait donné: teleph[type="perso"]:after {content: personnel: ; font-size: 10px; color:grey} En conclusion en utilisant le CSS de cette manière, on a beaucoup de mal a faire vraiment ce que l on veut et ce n est pas toujours très pratique. Ca reste au final long et fastidieux.

25 XML : extensible Markup Lanquage Présentation de XML : XML (extensible Markup Language ou Langage à balises extensible) a été mis au point par le XML Working Group sous la directive du W3C (World Wide Web Consortium) dès Les spécifications du langage XML ont été reconnues comme recommandations par le W3C, ce qui en fait un langage reconnu. XML est en fait un langage HTML amélioré permettant de définir de nouvelles balises. Il s'agit effectivement d'un langage permettant de mettre en forme des documents grâce à des balises. Contrairement à HTML, qui est à considérer comme un langage défini et figé (avec un nombre de balises limité), XML peut être considéré comme un langage permettant de définir d'autres langages, c'est-à-dire définir de nouvelles balises permettant de décrire la présentation d'un texte. L'intérêt de XML réside dans sa capacité à pouvoir décrire n'importe quel domaine de données. Il va permettre de structurer, le vocabulaire et la syntaxe des données qu'il va définir. Les balises XML décrivent le contenu plutôt que la présentation (contrairement à HTML). XML permet de séparer le contenu de la présentation, ceci permet par exemple d'afficher un même document sur des applications ou des périphériques différentes sans avoir besoin de créer autant de versions du document que l'on nécessite de représentations. Les avantages de XML : Voici les principaux atouts de XML : - La lisibilité : aucune connaissance ne doit théoriquement être nécessaire pour comprendre un contenu d'un document XML, - Une structure arborescente : permettant de modéliser la majorité des problèmes informatiques, - Déployable : il peut être facilement distribué par n'importe quels protocoles à même de transporter du texte, comme HTTP, - Intégrabilité : un document XML est utilisable par toute application pourvue d'un parser (c'est-à-dire un logiciel permettant d'analyser un code XML, tel que Oxigen XML Editor)

26 - Extensibilité : un document XML doit pouvoir être utilisable dans tous les domaines d'applications. Ainsi, XML est particulièrement adapté à l'échange de données et de documents. Application en cours : Pour exemple au cours de la réalisation de notre CV nous avions une rubrique dans le langage XML qui dans l'arborescence s'intituler Formation, et bien dans visuelle du XML nous retrouvons bien la rubrique en toute lettre qui ce nomme Formation avec toute les informations que nous y avions renseignées. Pour des soucis de fichier, l'exemple qui suit n'est pas en rapport avec le TP réalisé en court mais illustre parfaitement ce que nous venons de décrire précedement. Document codé en langage XML. Nous pouvons bien voir ici notre arborescence de la fiche bibliothèque décrite avec les différentes rubriques : livre, auteur, avec leurs sous-rubriques dans l'arborescence tel que titre, nom, prénom et référence, qui ce repettent pour chaque bouquin détaillé.

27 Visuelle du document en langage XML Nous retrouvons donc bien ici toute les rubriques et sous-rubriques détaillées dans l'ordre de l'arborescence créer. Il n'est donc pas dur de retrouver une erreur dans le codage pour la corriger car toutes les informations apparaissent clairements dans le visuel final. TextWrangler : Pour la création de notre document XML (en l'occurence il s'agit ici de notre Curriculum Vitae), nous avons du avant tout créer notre base, c'est à dire le contenu du texte à l'aide d'un logiciel de traitement de texte qui est TextWrangler. TextWrangler est un éditeur de textes évolué, il propose de nombreuses fonctionnalités : - recherche/remplacement simple ou sur plusieurs fichiers, - utilisation d'une expression rationnelle (regexp), - comparaisons de fichiers, - presse-papiers multiple, - indentation automatique, - coloration syntaxique de nombreux langages, - exécution de commandes.

28 Interface de TextWrangler sous une plateforme de type Mac Utilisation du Cascading SyleSheet : Les CSS, Cascading Style Sheets (feuilles de styles en cascade), servent à mettre en forme des documents web, type page HTML ou XML. Ceci est possible par l'intermédiaire de propriétés d'apparence (couleurs, bordures, polices, etc.) et de placement (largeur, hauteur, côte à côte, dessusdessous, etc.). Le rendu d'une page web peut être intégralement modifié sans aucun code supplémentaire dans la page web. Les feuilles de styles ont d'ailleurs pour objectif principal de dissocier le contenu de la page de son apparence visuelle. Ceci permet donc: - de ne pas répéter dans chaque page le même code de mise en forme, - d'utiliser des styles génériques, avec des noms explicites, - de pouvoir changer l'apparence d'un site web complet en ne modifiant qu'un seul fichier, - de faciliter la lecture du code de la page. A l'heure actuelle il n'existe que trois solutions pour mettre en forme un document XML : - CSS (Cascading StyleSheet) : la solution la plus utilisée actuellement, étant donné qu'il s'agit d'un standard qui a déjà fait ses preuves avec HTML, - XSL (extensible StyleSheet Language) : un langage de feuilles de style extensible développé spécialement pour XML. Toutefois, ce nouveau langage n'est pas reconnu pour l'instant comme un standard officiel, - XSLT (extensible StyleSheet Language Transformation) : Il s'agit d'une recommandation W3C permettant de transformer un document XML en document HTML accompagné de feuilles de style. Lors de la réalisation de notre TP nous avons donc utilisé pour la réalisation de notre document (Curriculum Vitae) le solution du Cascading StyleSheet, de la feuille de style.

29

30 MATRAY Jérémy XML sur TextWrangler Compte rendu Le but de ce TD est la création de notre CV en utilisant un language de programmation XML. 1 - Utilisation du logiciel TextWrangler On commence dans un premier temps par créer notre schéma sous forme d arborescence sur papier avant de s attaquer à coder sur TW. Pour cela nous avons créé plusieurs parties (les pères) qui on une ou plusieurs sous parties (les fils). Notre CV comporte ainsi 4 grandes parties : les coordonnées, le parcours scolaire, les jobs pratiqué et les compétences divers. Ensuite nous avons créé notre page sur TextWrangler en prenant soin de préciser le codage utilisé : ici UTF-8. Nous créons ensuite les balises qui contiennent les différentes sous parties de notre curriculum vitae. 1 Licence professionnel flux numérique

31 2 - Création d une page en.css On créé en plus de notre page codé en XML une page en CSS afin de pouvoir classer les informations selon un style graphique. Ce fichier CSS nous permet aussi de pouvoir par exemple prendre le fichier XML d une autre personne et l incorporer dans notre style graphique créé grâce au fichier CSS. 2

32 XML : extensible Markup Lanquage Le but de cette séance de T.P était la découverte du format de fichier XML. Notre objectif est de reproduire le plus fidèlement possible un document donné (C.V) grâce aux formats XML et CSS. Présentation de XML : XML (extensible Markup Language ou Langage à balises extensible) a été mis au point par le XML Working Group sous la directive du W3C (World Wide Web Consortium) dès Les spécifications du langage XML ont été reconnues comme recommandations par le W3C, ce qui en fait un langage reconnu. XML est en fait un langage HTML amélioré permettant de définir de nouvelles balises. Il s'agit effectivement d'un langage permettant de mettre en forme des documents grâce à des balises. Contrairement à HTML, qui est à considérer comme un langage défini et figé (avec un nombre de balises limité), XML peut être considéré comme un langage permettant de définir d'autres langages, c'est à dire définir de nouvelles balises permettant de décrire la présentation d'un texte. L'intérêt de XML réside dans sa capacité à pouvoir décrire n'importe quel domaine de données. Il va permettre de structurer, le vocabulaire et la syntaxe des données qu'il va définir. Les balises XML décrivent le contenu plutôt que la présentation (contrairement à HTML). XML permet de séparer le contenu de la présentation, ceci permet par exemple d'afficher un même document sur des applications ou des périphériques différentes sans avoir besoin de créer autant de versions du document que l'on nécessite de représentations.

33 Les avantages de XML : Voici les principaux atouts de XML : La lisibilité : aucune connaissance ne doit théoriquement être nécessaire pour comprendre un contenu d'un document XML, Une structure arborescente : permettant de modéliser la majorité des problèmes informatiques, Déployable : il peut être facilement distribué par n'importe quels protocoles à même de transporter du texte, comme HTTP, Intégrabilité : un document XML est utilisable par toute application pourvue d'un parser (c'est à dire un logiciel permettant d'analyser un code XML, tel que Oxigen XML Editor) Extensibilité : un document XML doit pouvoir être utilisable dans tous les domaines d'applications. Ainsi, XML est particulièrement adapté à l'échange de données et de documents. Arborescence utisée pour la création du fichier XML.

34 TextWrangler : Pour la création de notre document XML (en l'occurence il s'agit ici de notre Curriculum Vitae), nous avons du avant tout créer notre base, c'est à dire le contenu du texte à l'aide d'un logiciel de traitement de texte qui est TextWrangler. TextWrangler est un éditeur de textes évolué, il propose de nombreuses fonctionnalités : recherche/remplacement simple ou sur plusieurs fichiers, utilisation d'une expression rationnelle (regexp), comparaisons de fichiers, presse papiers multiple, indentation automatique, coloration syntaxique de nombreux langages, exécution de commandes, Interface de une plateforme de TextWrangler sous type Mac.

35 Utilisation du Cascading SyleSheet : XML est un format de description des données et non de leur représentation, comme c'est le cas avec HTML. La mise en page des données est assurée par un langage de mise en page., c'est une sorte defeuille de style. A l'heure actuelle il n'existe que trois solutions pour mettre en forme un document XML : CSS (Cascading StyleSheet) : la solution la plus utilisée actuellement, étant donné qu'il s'agit d'un standard qui a déjà fait ses preuves avec HTML, XSL (extensible StyleSheet Language) : un langage de feuilles de style extensible développé spécialement pour XML. Toutefois, ce nouveau langage n'est pas reconnu pour l'instant comme un standard officiel, XSLT (extensible StyleSheet Language Transformation) : Il s'agit d'une recommandation W3C permettant de transformer un document XML en document HTML accompagné de feuilles de style. Le principe du CSS repausse donc comme il a été dit sur le principe de la représentation de donnée, c'est à dire qu'il ne gére pas principalement l'aspect visuelle d'une page comme peut le faire le langage HTML mais son contenu de façon à créer une arborescence visuelle compléte et facile en compréhenssion.

36 Théry PERSYN XML Compte Rendu Objectif : Réaliser un CV en utilisant le language de programmation XML Définition : XML (Extensible Markup Language ou «langage extensible de balisage») est un langage informatique de balisage générique. Il sert essentiellement à stocker/transférer des données de type texte Unicode structurées en champs arborescents. Ce langage est qualifié d extensible car il permet à l utilisateur de définir les balises des éléments. L utilisateur peut multiplier les espaces de nommage des balises et emprunter les définitions d autres utilisateurs. Nous avons commencé par éditer notre CV à l aide du logiciel TextWrangler en créant une arborescence. Celle-ci est composée de différents noeuds, résultats de liens père (partie) - fils (sous-partie). On trouve ainsi une arborescence composée de quatre grandes parties : L identité, la formation, l expérience proffessionnelle et une partie divers (voir annexe). Attention : Chaque noeud ne doit pas comporter d accent ni d espace (considéré comme attrubut). Le codage de la page doit être défini, ici la page est codé en UTF-8. Chaque balise est créée avec ses sousparties associées. -1- CV.xml sous textwrangler

37 Arborescence CV.XML CV identite formation expprof divers etatcivil contact diplome 3 poste langues informatique permis langue langages logiciels entreprise fi n debut fonction mention etablissement intitule niveau anneeobt 2 adelect 1 teleph adresse datenais situfam prenom nom civilite -2- adresse nom adresse nom langage logiciel pays ville codepostal rue pays ville codepostal rue pays ville codepostal rue 1 type = perso / travail / mobil 2 type = perso / travail 3 type = jobete / stage / CDI

38 Après avoir terminé la réalisation de notre arborescence correctement formée, nous créons un fichier au format CSS. Il nous permet l application direct d effets de styles graphiques sur notre page en XML. Il nous suffi pour cela de créer un lien appelant à ce fichier CSS dans notre page XML : <xml-stylesheet type= text/css href= style.css > Ainsi notre style grapique peut être incorporé à différentes pages de XML. Il nous suffit d appeller notre page CSS. Notre feuille de style sera ici appelée style.css. On peut y voir les effets de style apportés à notre CV : backgroundcolor = Couleur de fond border = Bordure (type, épaisseur, couleur...) font = Police (type, taille, nom...) margin = Marge padding = Espace float = Justification Notre feuille de style style.css -3-

39 Ainsi voilà notre CV au format XML ouvert à l aide de Mozilla Firefox : On peut alors vérifier que notre page est en accord avec l arborescence créée dans TextWrangler ainsi que le style appliqué dans notre page CSS. -4-

40 PINEAU Thomas TP1 : Premiers pas avec TextWrangler et Firefox L'objectif du TP est de commencer à manipuler et de comprendre les bases du xml. Pour cela, il nous est demandé de réaliser, à partir de l'arbre ci-dessous, la description d'un CV en utilisant le XML. Une fois la page XML terminée, nous la personnalisons avec un fichier externe écrit en CSS. Ce dernier sert à appliquer les différents styles souhaités à la page XML. rue CP ville pays type = perso type = travail adresse tel ad_elec contact adresse (idem contact) sit_fam niveau inititulé ets mention diplome sit_fam civilite nom prenom date_nais etat_civil identite formation debut CV exp_prof poste type = jobs stage fin entreprise adresse (idem contact) langages logiciels langues informatique permis nom divers fonction 1

41 Fichier XML Pour commencer, il faut écrire les différentes balises en respectant bien l'arborescence et en prenant bien soin d'obtenir un fichier XML bien formé. Un document XML bien-formé est un document XML qui respecte certaines rêgles simples. Il ne doit exister qu'une seule balise racine (ici "CV"). Toute balise ouverte doit être refermée. Les noms des balises doivent commencer par une lettre ou "_", les autres caractères peuvent être des chiffres, des lettres, "_", "." ou "-". Les noms des balises ne doivent pas commencer par XML. Par convention, les balises sont en minuscules. Attention un fichier bien formé n'est pas forcément un fichier valide : Document valide = document bien formé+ respecte la structure définie par la DTD + résolution des entités Pour vérifier si un problème est présent, il est possible d'ouvrir le fichier XML dans Firefox. Par exemple, Firefox affiche le message suivant si une balise n'a pas été fermée : Pour une meilleure lisibilité, il est préférable de mettre des alinéas pour bien identifier les différents niveaux et mieux visualiser l'arborescence. 2

42 Lorsqu'aucun style n'est appliqué à la page XML, on obtient deux présentations différentes avec Firefox et Safari. Safari Firefox 3

43 Fichier CSS Il est donc possible par la suite de mettre en forme la page XML créée, c'est-à-dire de lui appliquer des styles. Pour cela, il faut créer une feuille CSS externe. Le fichier XML comprend le fichier CSS à deux conditions : - si les deux fichiers sont au même niveau dans le même dossier ; - si la mention "<?xml-stylesheet type="text/css" href="style.css"?>" est présente sous " <?xml version="1.0" encoding="utf-8"?>" dans le fichier XML. Ce fichier CSS permet de choisir la couleur de fond, la police, le corps, le contour de chaque partie du CV. Exemple : caractéristiques de la balise diplome : " diplome " { clear:both; display: block; float: left; border: solid 1px grey; background-color: #ffeedd; } "clear" : sert à remettre à zéro les flottants "display: block" : sert à faire un retour à la ligne "float: left" : sert à mettre de nouveaux flottants "border: solid 1px grey" : contour gris de 1px d'épaisseur " background-color: #ffeedd" : couleur de fond en hexadécimal Aperçu du fichier CSS : Rendu du fichier XML avec les styles sur Firefox : 4

44 Angebault Baptiste le 17/11/2009 Licence professionnelle flux numérique Compte rendu du TP1 (XML)!: le CV Qu est ce que le XML!? Le xml (Xtensible Markup Language) est un langage de balises extensible. C est un langage qui permet de structurer une grande variété de contenus. Logiciel!: Pour créer des documents en XML, nous avons utilisés le logiciel «!TexteWrangler!». Différence entre HTML et XML!: HTML et XML sont tous les deux dérivés du SGML. Le HTML est exclusivement destiné aux pages 'web' (navigateurs avec protocole HTTP), alors que le langage XML est destiné à l'échange de données hiérarchisées entre des systèmes informatiques. Il n est pas seulement destiné aux pages web, il peut être utilisé seul, par exemple pour le JDF. Le langage XML est plus souple. Chacun peut définir de nouvelles balises en fonction de ces besoins._le schéma du HTML est fixe et l utilisation des balises définies par le W3C est obligatoire._en revanche toute balise qui est ouverte doit être fermée, en XML. Contrairement à l HTML qui autorise certaines balises comme la balise <p> à ne pas être fermées. CSS et XML!: Une feuille de style css peut être appliquée à plusieurs document possédant la même les mêmes catégories d information mais avec un contenu personnaliser. C est le cas des CV sur lesquels nous travaillons!: le contenue est différent pour chaque élève, mais les catégories reste les même (identité, formation, expérience professionnelle )

45 Au cours du TP!: - Créer un nouveau document avec «Texte Wrangler». On spécifie en première ligne qu on utilise la version XML 1.0 avec le code utf-8 - Création des balises correspondant aux contenue des catégories identité, formation, expprof, divers. On créer des attributs qui définiront les balises de façon précise. Ces attributs servent à renseigner de façon plus précise les informations indiquées dans les balises (par exemple «type=cdd» renseigne le nature d emploi réalisé dans une entreprise). - On inscrit le contenu désiré dans les balises appropriées de façon à obtenir les renseignements voulus. On s aperçoit que les informations apparaissent en ligne sans aucune mise en page, lorsqu on affiche le document XML avec le système de navigation firefox. - Création d une feuille de style css, pour appliquer une mise en page, au document XML, lorsqu on l affichera avec firefox.

46 - On remarque que l on peut créer des «retour à la ligne» avec la fonction display:block, ainsi que des cadres avec la fonction «border». On peut également choisir l épaisseur du cadre et sa couleur de fond et de bordure. On peut choisir le corps du texte, la police et la couleur. - On voit que certaines manipulations ne marchent pas comme on le souhaite. (Il y a une erreur dans le l imprim-écran au niveau situation familiale, c est «display none» et non display block.) C est le cas de la manipulation suivante : - On a donc eu recours à l opération «{ visbility:hidden }», à la place de «{ display:block }. - On voit également que l on a la possibilité d afficher des précisons et de choisir la couleur du texte ou des fonds. La fonction «content», avec le type=perso permet d afficher l expression «personnel» après le numéro de téléphone souhaité.

47 - D autre part on s aperçoit que la mise en page est bien plus délicate à réaliser qu avec de l HTML. Avec la feuille de style nous avons donc la possibilité de créer une mise en page, cependant cela reste difficile et délicat. On constate également que l'on est relativement limité en termes de possibilité dans cette mise en page. En revanche, on constate un avantage importatnt : cette mise en page est applicable à un autre CV fait par un autre élève sur le même modèle. Pour cela il n y à plus qu à appliquer la feuille css au document.

48 Thomas Jankowski Licence Pro Flux numériques Compte rendu sur le langage XML Objectif de la séance : - Savoir ce qu est le langage XML - Savoir les différences qu il y a avec le HTML. - Savoir les avantages du XML - Savoir ce qu est le CSS - Savoir les avantages d utiliser le CSS Définition du XML : XML (extensible Markup Language) que l on peut traduire par Langage à balises étendu, ou Langage à balises extensible) est en quelque sorte un langage HTML amélioré permettant de définir de nouvelles balises. Il s'agit effectivement d'un langage permettant de mettre en forme des documents grâce à des balises (markup). XML est un sous ensemble de SGML (Standard Generalized Markup Language), défini par le standard ISO 8879 en 1986, utilisé dans le milieu de la Gestion Electronique Documentaire (GED). XML reprend la majeure partie des fonctionnalités de SGML, il s'agit donc d'une simplification de SGML afin de le rendre utilisable sur le web. XML a été mis au point par le XML Working Group sous l'égide du World Wide Web Consortium (W3C) dès Depuis le 10 février 1998, les spécifications XML 1.0 ont été reconnues comme recommandations par le W3C, ce qui en fait un langage reconnu. Le langage XML peut être utilisé pour les pages web mais également, pour les flux de production comme par exemple pour le JDF (Job Definition Format). Le JDF est un format de fichier destiné à permettre la transmission d'information concernant un travail à réaliser. Le fichier JDF doit être utilisable à tout moment, de la conception à la livraison du produit fini. Le XML s'est imposé comme un format de référence pour l'échange de données, notamment de métadonnées. Les différences avec le HTML : Contrairement à HTML, qui est à considérer comme un langage défini et figé (avec un nombre de balises limité), XML peut être considéré comme un métalangage permettant de définir d'autres langages, c'est-à-dire il peut définir de nouvelles balises permettant de décrire la présentation d'un texte.

49 Thomas Jankowski Licence Pro Flux numériques La force de XML réside dans sa capacité à pouvoir décrire n'importe quel domaine de données grâce à son extensibilité. Il va permettre de structurer, poser le vocabulaire et la syntaxe des données qu'il va contenir. En réalité les balises XML décrivent le contenu plutôt que la présentation (contrairement à HTML). Ainsi, XML permet de séparer le contenu de la présentation, ce qui permet par exemple d'afficher un même document sur des applications ou des périphériques différents sans pour autant nécessiter de créer autant de versions du document que l'on nécessite de représentations. Le langage XML est un format de description des données et non de leur représentation, comme c'est le cas avec HTML. La mise en page des données est assurée par un langage de mise en page tiers. Il existe trois solutions pour mettre en forme un document XML : - CSS (Cascading StyleSheet), la solution la plus utilisée actuellement, étant donné qu'il s'agit d'un standard qui a déjà fait ses preuves avec HTML. - XSL (extensible StyleSheet Language), un langage de feuilles de style extensible développé spécialement pour XML. Toutefois, ce nouveau langage n'est pas reconnu pour l'instant comme un standard officiel. - XSLT (extensible StyleSheet Language Transformation). Il s'agit d'une recommandation W3C du 16 novembre 1999, permettant de transformer un document XML en document HTML accompagné de feuilles de style. Les avantages de XML : Voici les principaux atouts de XML : La lisibilité : aucune connaissance ne doit théoriquement être nécessaire pour comprendre un contenu d'un document XML. Autodescriptif et extensible Une structure arborescente : permettant de modéliser la majorité des problèmes informatiques. Universalité et portabilité : les différents jeux de caractères sont pris en compte. Déployable : il peut être facilement distribué par n'importe quels protocoles à même de transporter du texte, comme http. Intégrabilité : un document XML est utilisable par toute application pourvue d'un parser (c'est-à-dire un logiciel permettant d'analyser un code XML). Extensibilité : un document XML doit pouvoir être utilisable dans tous les domaines d'applications.

50 Thomas Jankowski Licence Pro Flux numériques Définition du CSS : Le langage CSS (Cascading Style Sheets) est utilisé pour définir l aspect futur du site web, comme par exemple la couleur du fond de la page ou le type de police. Il permet de mettre en forme individuellement des éléments significatifs du HTML. Plus concrètement, le CSS (ou feuille de style), c est un petit fichier comme par exemple, style.css, dans lequel on va définir l aspect futur du site. Les avantages d utiliser le CSS : Les avantages du CSS sont les suivants : - La structure et la présentation sont gérées séparément. - On se concentre sur la conception de la page, sans se soucier de la présentation. - Le code HTML est réduit en taille et en complexité. Le TP : Le but de ce TP était de recréer en utilisant les langages XML et CSS, la page du CV que l on avait crée en HTML. Tout d abord, avant de commencer, nous avons défini la structure de la page, c est à dire son arborescence. Ensuite, nous avons crée cette page en XML dans le logiciel TextWrangler. Au début, il faut bien préciser que l on est en XML version 1.0 et que l on utilise l encodage UTF-8, qui est l encodage universel international. Nous avons crée des balises correspondant au contenu des différentes catégories : identité, formation, exprof et divers. Ensuite, il faut créer des attributs qui serviront à renseigner de façon plus précise les informations indiquées dans les balises, comme par exemple, pour le téléphone, type=perso ; qui renseigne sur la nature du numéro de téléphone. Enfin, on recrée l arborescence dans TextWrangler et en rajouter le contenu des informations dans les balises.