Embed Size (px)
Citation preview
/travaux-dirigés/semaine 1
Dans ce TP, il s'agit de construire et présenter en CSS un fichier XML qui représente le CV dechaque étudiant.
Les ordinateurs de travail sont des Mac sous système OS 10.5. Les logiciels utilisés sont :
Firefox (ou Safari, mais la présentation par défaut des fichiers XML est moinspé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 à unchoix commun pour tout le monde.
L'objectif visé pour la fin des travaux est que chacun ait son propre fichier XML mémorisant lesinformations de son CV. Dans la partie sur l'association d'une feuille de style en CSS, un modèlede résultat est proposé (voir http://www.tiprof.fr/HTML-CSS-court/materiel/OssEtStyle_sPerso/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
Fichier XML et présentation en CSS
1http://www.tiprof.fr/LicPro-XML/travaux-dirig%C3%A9s/semaine%201/
Module 2 xml
Lamourre Étienne
Compte rendu T.P1 : XML et CSS
Séance du 17 novembre 2009
LebutdecetteséancedeT.PétaitladécouverteduformatdefichierXML.C’estpourquoinotreobjectifétaitdereproduireleplusfidèlementpossibleundocumentdonné(C.V)grâceauxformatsXMLetCSS.
I-L’arbreAfin de reproduire précisément le document, nous avons commencé par créer un arbre qui défini la structure du document.
II-Le fichier XMLL’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.
CV
poste formation exp_prof diversidentite
etat_civilcontact
civilitenomprenomsitu_famdate_nais
rueCPvillepays
adresse ad_electype:perso
travail teltype:perso
travail mobile
diplome
annee intituleniveau mentionets
adresse nom
rueCPvillepays
postetype:job
cdicdd
adresse nom
rueCPvillepays
debutfinentreprise
Version d’XML utilisée et systèeme d’encodage
Module 2 xml
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 Firefox
Affichage avec Safari
Module 2 xml
On remarque alors la nécessité d’utiliser, dans le cas d’un document destiné à être afficher, un langage permettant un affichage graphi-que personnalisé. C’est le format de fichier CSS qui exécute cette fonction.
II-Le fichier CSSLe 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.
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: http://www-sop.inria.fr/acacia/cours/essi/xmlhtml/s17.html
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:
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.
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;
}
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.
1
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
• TextWrangler
• Safari
• Firefox
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
XMLCompte-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.
14 octobre 2009HELY AdrienLicence Professionnelle
2
4IntroductionAvant de rentrer dans le vif du sujet, il semble impératif de comprendre les caractéristiques relatives à ce méta-langage :
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éerNous 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 arbreLe document récupéré, nous étudions donc son organi-sation 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 • diversChacune de ces branches correspond à une partie im-portante 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.
I - Création d’un document XML
3
4La syntaxe en XML4Structure du document xmlL’écriture du document en xml s’ef-fectuera dans un éditeur textuel quelconque. Ce-pendant pour des raisons de commodités, nous choisis-sons d’utiliser le logixiel TewtWran-gler qui offre l’avan-tage de reconnaire la syntaxe du langage choisi et d’uti-liser 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 pre-mière du document. Elle permet de notifier à l'inter-pré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-8859-1' ?> 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 do-cument et par la suite les informations à stocker.
4Les balisesA l'instar du HTML, le XML est un méta-langage qui re-pose 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'in-formation. 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 </nom-
debalise>
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 attributsUn espace dans une balise est en effet utilisé pour affec-ter 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'indentationUn é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 ins-crira à 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
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 for-maté, indenté. http://xmlindent.com/
4XML bien formé
Tout le comme HTML, le XML est sujet à une standardisa-tion par le World Wide Web Consortium (W3C).
Cette standardisation assure une cohérence d'interpréta-tion entre les différents logiciels utilisés.
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 ferme-ture ;• Les balises sont "case sensitive" ;• les éléments XML doivent être positionnés correcte-ment ;• 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.
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 infor-matif et cache l'ensemble des balises. Pour retrouver les balises, il faudra afficher le code source de la page.
5
4Déclaration d'une feuille de style externeNous 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 CSSLa 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 affec-ter la propriété :
{display: block;}
7
2 - AFFICHAGE ET CSS
8
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é
adelect
contact
civilité
étatcivil
teleph
payscode postalrue
adressedatenaissitufamprenomnom mentionetablissementintituleniveauanneeobt
diplome
formation
Type=perso =travail =mobile
Type=perso =travail ville
Cadre= «formation intiale» cursus= «apprentissage»
payscode postalrue ville
adresse
expprof
poste
fonction entreprise�ndébut
adresse nom
Type=job d’été =stage =cdd =cdi
divers
langues permisinformatique
langue langages
langage
logiciels
logiciel
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 toutsans émettre d’erreur.De plus nous avons utilisé TextWranglers.
Ici l’endentation pères/filsest 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 éviterde 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.
On peut affi cher le code source à l’aide de fi refox:
Compte Rendu XML - 2
Ojectif: Utilisation de CSS pour la mise en page du code XML.
Nous avons ensuite utilisé le fi chier du TP1 en lui ajoutant une ligne de code qui allait lui permettre de faire le pont entre le fi chier 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 fi chier CSS. Nous n’intervenirons plus sur le fi chier XML.
On a commencé par créer un fi chier CSS (toujours depuis TextWrangler) que l’on a mis dans le même dossier que le fi chier 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)
- 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 fi n 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; }
- Comment modifi er 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
Utilisation des selecteurs.
On remarque à l’aide de l’image ci-dessous que fonction est présent à plusieurs endroits sur le fi chier xml (se reporter au fi chier 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; }
Pour aller plus loin, il est possible d’agencer les blocs comme bon nous semble.
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}
Lignes de code: cv>fonction { display:block; fl oat: right;} identite { display:block; fl oat: right;} formation { clear: both; }
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éfi ni 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 fi nal long et fastidieux.
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 1996. 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)
- 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é.
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.
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, dessus-dessous, 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.
1 Licence professionnel !ux numérique
MATRAYJérémy
Compte renduXML sur TextWrangler
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 "ls). 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 di#érentes sous parties de notre curriculum vitae.
2
2 - Création d’une page en .css
On créé en plus de notre page codé en XML une page en CSS a"n de pouvoir classer les informations selon un style graphique. Ce "chier CSS nous permet aussi de pouvoir par exemple prendre le "chier XML d’une autre personne et l’incorporer dans notre style gra-phique créé grâce au "chier CSS.
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 1996. 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) 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.
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,
pressepapiers multiple,
indentation automatique,
coloration syntaxique de nombreux langages,
exécution de commandes,
Interface de TextWrangler sous une plateforme de type Mac.
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.
-1-
XML Compte RenduThéry PERSYN
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 don-né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 utili-sateurs.
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 sous-parties associées.
CV.xml sous textWrangler
-2-
Arb
ores
cenc
e CV
.XM
L
CV
iden
tite
form
atio
n ex
ppro
f di
vers
etat
civi
l co
ntac
tdi
plom
e3 po
ste
lang
ues
info
rmat
ique
pe
rmis
civilitenom
prenomsitufam
datenais
adresse1teleph
2adelect
ruecodepostal
villepays
adressenom
anneeobtniveauintitule
etablissementmention
fonctiondebut
fi nentreprise
ruecodepostal
villepays
langageslogiciels
adressenom
ruecodepostal
villepays
langue
langagelogiciel
1 ty
pe =
per
so /
trav
ail /
mob
il2
type
= p
erso
/ tr
avai
l3
type
= jo
bete
/ st
age
/ CD
I
-3-
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’’
-4-
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 Tex-tWrangler ainsi que le style appliqué dans notre page CSS.
1
TP1 : Premiers pas avec TextWrangler et FirefoxL'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 !chier externe écrit en CSS. Ce dernier sert à appliquer les di"érents styles souhaités à la page XML.
PINEAU #omas
CV
diversfonction
exp_profform
ationidentite
etat_civil
contact
diplome
poste
informatique
languesperm
is
sit_famcivilite
date_naisprenom
nom
niveauinititulé
etssit_fam
mention
adresse(idem
contact)
ad_electel
adresse
paysrue
villeC
P
type = perso
type =
travail
type = jobs
stage
finentreprise
debut
adresse(idem
contact)nom
logicielslangages
2
Fichier XMLPour commencer, il faut écrire les di"érentes balises en respectant bien l'arborescence et en prenant bien soin d'obte-nir un !chier 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 chi"res, des lettres, "_", "." ou "-". Les noms des balises ne doivent pas commencer par XML. Par convention, les balises sont en minuscules.
Attention un !chier bien formé n'est pas forcément un !chier valide : Document valide = document bien formé+ respecte la structure dé!nie par la DTD + résolution des entités
Pour véri!er si un problème est présent, il est possible d'ouvrir le !chier XML dans Firefox. Par exemple, Firefox a$che 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 identi!er les di"érents niveaux et mieux visualiser l'arborescence.
3
Lorsqu'aucun style n'est appliqué à la page XML, on obtient deux présentations di"érentes avec Firefox et Safari.
Firefox
Safari
4
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 !chier XML comprend le !chier CSS à deux conditions : - si les deux !chiers 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 !chier XML.
Ce !chier 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; %oat: le&; border: solid 1px grey; background-color: #"eedd; }
"clear" : sert à remettre à zéro les %ottants "display: block" : sert à faire un retour à la ligne "%oat: le&" : sert à mettre de nouveaux %ottants "border: solid 1px grey" : contour gris de 1px d'épaisseur " background-color: #"eedd" : couleur de fond en hexadécimal
Aperçu du !chier CSS :
Rendu du !chier XML avec les styles sur Firefox :
Angebault Baptiste le 17/11/2009Licence 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 langagequi 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 seulementdestiné aux pages web, il peut être utilisé seul, par exemple pour le JDF.__Le langage XMLest plus souple. Chacun peut définir de nouvelles balises en fonction de ces besoins._Leschéma du HTML est fixe et l’utilisation des balises définies par le W3C est obligatoire._Enrevanche toute balise qui est ouverte doit être fermée, en XML. Contrairement à l’HTML quiautorise 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 lesmêmes catégories d’information mais avec un contenu personnaliser. C’est le cas des CV surlesquels nous travaillons!: le contenue est différent pour chaque élève, mais les catégoriesreste les même (identité, formation, expérience professionnelle…)
Au cours du TP!:
- Créer un nouveau document avec « Texte Wrangler ». On spécifie en premièreligne 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çonprécise. Ces attributs servent à renseigner de façon plus précise les informationsindiquées dans les balises (par exemple « type=CDD » renseigne le nature d’emploiréalisé dans une entreprise).
- On inscrit le contenu désiré dans les balises appropriées de façon à obtenir lesrenseignements voulus. On s’aperçoit que les informations apparaissent en lignesans aucune mise en page, lorsqu’on affiche le document XML avec le système denavigation firefox.- Création d’une feuille de style css, pour appliquer une mise en page, au documentXML, lorsqu’on l’affichera avec firefox.
- On remarque que l’on peut créer des « retour à la ligne » avec la fonctiondisplay:block, ainsi que des cadres avec la fonction « border ». On peut égalementchoisir l’épaisseur du cadre et sa couleur de fond et de bordure. On peut choisir lecorps du texte, la police et la couleur.
- On voit que certaines manipulations ne marchent pas comme on le souhaite. (Il y aune 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 lacouleur du texte ou des fonds. La fonction « content », avec le type=perso permetd’afficher l’expression « personnel » après le numéro de téléphone souhaité.
- D’autre part on s’aperçoit que la mise en page est bien plus délicate à réaliserqu’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 estrelativement limité en termes de possibilité dans cette mise en page. En revanche,on constate un avantage importatnt : cette mise en page est applicable à un autreCV fait par un autre élève sur le même modèle. Pour cela il n’y à plus qu’à appliquerla feuille css au document.
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 1996. 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.
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.
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.
Thomas Jankowski Licence Pro Flux numériques
Une fois la composition en XML fini, on ouvre la page XML dans Firefox et l’on voit très bien l’arborescence de la page. On s’aperçoit également qu’il n’y a aucune mise en page.
Thomas Jankowski Licence Pro Flux numériques
Maintenant, dans TextWrangler, nous allons créer une feuille de style CSS, que l’on va appliquer à la mise en page du CV.
Avec la fonction border, on peut créer des bordures. On peut également lui définir une couleur de fond ainsi que définir la taille en pixel de la bordure. On peut choisir le type de police, sa taille et sa couleur. Nous avons également utilisé la fonction display :block.
Pour le numéro de téléphone, nous lui avons dit de différencier le numéro personnel et celui
du travail et le mobile. Cela se fait grâce à la fonction content.
Voici la mise en page réalisé en CSS.
Thomas Jankowski Licence Pro Flux numériques
Pour conclure, on s’aperçoit qu’il est plus facile de réaliser une mise en page directement en
HTML qu’en XML et CSS. La création d’une page web est plus rapide en HTML. Mais, au niveau présentation grâce au CSS, on peut appliquer cette mise en page sur plusieurs documents comme par exemple si l’on veut l’appliquer sur d’autres CV.
Angebault Baptiste le 17/11/2009Licence 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 langagequi 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 seulementdestiné aux pages web, il peut être utilisé seul, par exemple pour le JDF.__Le langage XMLest plus souple. Chacun peut définir de nouvelles balises en fonction de ces besoins._Leschéma du HTML est fixe et l’utilisation des balises définies par le W3C est obligatoire._Enrevanche toute balise qui est ouverte doit être fermée, en XML. Contrairement à l’HTML quiautorise 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 lesmêmes catégories d’information mais avec un contenu personnaliser. C’est le cas des CV surlesquels nous travaillons!: le contenue est différent pour chaque élève, mais les catégoriesreste les même (identité, formation, expérience professionnelle…)
Au cours du TP!:
- Créer un nouveau document avec « Texte Wrangler ». On spécifie en premièreligne 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çonprécise. Ces attributs servent à renseigner de façon plus précise les informationsindiquées dans les balises (par exemple « type=CDD » renseigne le nature d’emploiréalisé dans une entreprise).
- On inscrit le contenu désiré dans les balises appropriées de façon à obtenir lesrenseignements voulus. On s’aperçoit que les informations apparaissent en lignesans aucune mise en page, lorsqu’on affiche le document XML avec le système denavigation firefox.- Création d’une feuille de style css, pour appliquer une mise en page, au documentXML, lorsqu’on l’affichera avec firefox.
- On remarque que l’on peut créer des « retour à la ligne » avec la fonctiondisplay:block, ainsi que des cadres avec la fonction « border ». On peut égalementchoisir l’épaisseur du cadre et sa couleur de fond et de bordure. On peut choisir lecorps du texte, la police et la couleur.
- On voit que certaines manipulations ne marchent pas comme on le souhaite. (Il y aune 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 lacouleur du texte ou des fonds. La fonction « content », avec le type=perso permetd’afficher l’expression « personnel » après le numéro de téléphone souhaité.
- D’autre part on s’aperçoit que la mise en page est bien plus délicate à réaliserqu’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 estrelativement limité en termes de possibilité dans cette mise en page. En revanche,on constate un avantage importatnt : cette mise en page est applicable à un autreCV fait par un autre élève sur le même modèle. Pour cela il n’y à plus qu’à appliquerla feuille css au document.
