Documents numériques

Transcription

UE STIC
2010-2011
Documents numériques
Patrice WIRA
Université de Haute-Alsace
[email protected]
2010-2011
I.
II.
III.
IV.
V.
VI.
VII.
VIII.
IX.
Plan du cours
Rappels historiques
Concepts et problématiques
Structure logique des données
La syntaxe de XML
Document Type Definition (DTD)
Mises en forme
Scripting et Document Object Model (DOM)
Les documents interactifs
Conclusion
[email protected]
2
2010-2011
Rappels historiques
[email protected]
3
2010-2011
Rappels historiques
L’écriture
L’ écriture est aujourd’hui encore
la forme d’expression la plus efficace.
[email protected]
<h2> "Amélie Poulain" - 2001</h2>
<h3> Début du film - texte à trous</h3>
<p>Le --- septembre 197---, à 18 heures 28
minutes et --- secondes, une mouche bleue de
la famille des californiennes capable de
produire 14 670 battements d’ailes à la minute
se posait rue Saint-Vincent à Montmartre. </p>
<p>A la même--- --- --, à la terrasse d’un
restaurant, à deux pas du Moulin de la Galette
le vent s’engouffrait comme par magie sous une
nappe faisant danser les --- -- sans que
4
personne ne s’en aperçoive.</p>
2010-2011
Rappels historiques
Avant…
•
Jusque dans les années 80 et malgré l’informatique, les échanges
d’informations se faisaient sur supports matériels :
–
–
–
–
papier,
micro-fiches
disquettes, CD et DVD,
USB
micro-fiche et disquettes
•
1995 : aux USA, pour la première fois les PC sont livrés avec un
navigateur installé par défaut (Windows 95 et IE 1.0)
•
Internet va bouleverser notre façon de concevoir et d’échanger des
données
[email protected]
5
2010-2011
Rappels historiques
Avant…
•
•
•
•
•
•
•
•
•
•
1995 : IE 1.0 et 2.0
1996 : IE 3.0 (20 % de PDM)
1997 : IE 4.0
1999 : IE 5.0 (près de 50 % de PDM)
2001 : IE 6.0 (plus de 90 % de PDM, Microsoft stoppe le développement d’IE)
2004 : Firefox 1.0 de Mozilla (suite de Netscape)
2006 : IE 7.0 et Firefox 2.0. Les PDM d’IE commencent à nettement régresser.
2008 : IE 8.0, Firefox 3.0 et Chrome 1.0. IE recule toujours rapidement.
2009 : Firefox 3.5 et Chrome 2.0 et 3.0.
2010 : IE 9.0, Chrome 4.0, 5.0 et 6.0, et Firefox 4. IE occupe moins de 60 %
de PDM et en Europe Microsoft doit proposer le fameux ballot screen
(écran de sélection de plusieurs navigateurs)
PDM = part de marché
[email protected]
6
2010-2011
Rappels historiques
Avant…
•
•
•
•
•
•
•
•
•
•
1989 : le CERN propose un projet WWW
1992 : MOSAIC est le premier navigateur
1994 : HTML
1995 : HTML 2.0
1997 : HTML 4.0 = internationalisation de HTML
1997 : XML 1.0
1999 : HTML 4.01
2000 : XHTML 1.0
2006 : XHTML 2.0
2010 : HTML 5
[email protected]
7
2010-2011
Rappels historiques
Aujourd’hui…
•
Les débits ont explosés.
•
Le Wifi se généralise.
•
Le réseau téléphonique et Internet convergent.
•
Le PC n’est plus le seul terminal Web, il y a les smartphones,
radio-réveil, les TV numériques, les voitures, …
•
On produit et on reçoit de l’information « de partout ».
[email protected]
8
2010-2011
Rappels historiques
Aujourd’hui… et demain
Aujourd’hui
Demain, on connectera des objets virtuels…
[email protected]
9
2010-2011
[email protected]
10
2010-2011
Exigences : on veut…
•
structurer l'information :
– pour la retrouver facilement
– et l'imbriquer facilement dans des applications
•
faire des hypertextes puissants
•
afficher et imprimer de façon flexible et agréable
•
un format universel pour toutes sortes de données et usages
(pas seulement pour afficher mais pour diffuser, échanger, stocker,
chercher....)
•
un meta-langage qui permet de créer des langages variés, adaptés
aux besoins, et "propres ".
[email protected]
11
2010-2011
HTML n’est pas LA solution
•
HTML est un langage surmarquant permettant de créer du texte
structuré et hiérarchisé.
•
HTML a été une application du SGML
Standard Generalized Markup Language
(ISO 8879, 1986).
•
Format Web universel et par excellence, il est limité au Web.
[email protected]
12
2010-2011
Problèmes avec HTML
•
HTML n'est pas flexible et pas de "customisation" possible
•
HTML est faible pour décrire le contenu d'information
– essentiellement un langage pour structurer et présenter un "texte"
– ne permet pas d'exprimer des hiérarchies et relations entre données
•
HTML est faible pour l'hypertexte
– les pages HTML sont isolées
– pas de liens bi-directionnels
– pas d’inclusion, .....
•
HTML est fait pour être affiché dans un navigateur (pas pour
échanger de l'information entre programmes)
[email protected]
13
2010-2011
Le PDF n’est pas la solution
•
•
Le PDF est un format trop orienté vers l'impression ou l'affichage
Le code PDF est très difficilement manipulable
•
Et avec Word, Framemaker, Indesign, etc.
– On est prisonnier d'un format propriétaire
(qui change selon les veux des fabricants),
– Absence de "features" typiques de HTML,
– Formats aussi difficiles (RTF, MIF, etc.) que PDF,
– Pas utile comme format de représentation de données.
[email protected]
14
2010-2011
Langage et métalangage
Définitions :
Un langage "markup" (langage de balisage) sert à
encoder et à structurer un texte.
Un métalangage sert à créer des langages "markup".
[email protected]
15
2010-2011
Naissance de XML
XML : eXtensible Markup Language
•
est métalangage,
•
qui permet de définir d'autres langages (appelés souvent
"applications" dans ce contexte) en particulier des langages
"markup",
•
est une simplification du SGML.
[email protected]
16
2010-2011
Historique des langages "markup" :
•
1986 : SGML
(Standard Generalized Markup Language, ISO standard) = metalangage pour définir des langages de "markup".
•
1990 : HTML
est une application SGML avec très peu de balises (tags)
•
1997 : XML
[email protected]
17
2010-2011
Différences HTML / XML
XML :
• un meta-langage plus léger que SGML adapté au Web
• permet la définition de langages adaptés à des besoins très variés
• est un langage pour décrire des structures de données
• sert à organiser l'échange d'informations
• sert à remplacer HTML (mais fonctionne d'une autre façon !)
• donc XML n'est qu'un formalisme.
[email protected]
18
2010-2011
Fonctionnalités de base d'un système
d'information
•
Markup : Langage pour caractériser des éléments d'information
•
Style : Langage pour définir la mise en page d'une classe d'objets
•
•
•
Linking : Langage pour représenter des liens entre éléments et objets
Scripting : Interface et langages pour créer des applications
[email protected]
19
2010-2011
Fonctionnalités de base d'un système
d'information
monde HTML
Linking
Style
monde XML
(<A> Tag dans
HTML)
CSS2
CSS1
Xlink & Xpointer & Xpath HyTime & TEI
XSL
(CSS)
DSSL
applications
SGML
(Docbook, TEI,
....)
Markup
HTML
applications XML
(XHTML, Docbook)
Multimédia
formats
"exotiques"
(Flash, Gif,
Jpeg)
formalismes XML (SVG,
SMIL, MathML)
Interface entre Markup
et Scripting
Document Object Model
(DOM)
Scripting
Javascript
JScript
ECMAScript
[email protected]
monde SGML
20
2010-2011
Applications XML
XML est un langage universel pour la représentation/structuration
de contenu.
Exemples :
• CML (Chemical Markup Language)
• X3D (VRML-Xmlisé)
• NML (News Markup Language) et NITF
(News Interchange Text Format)
• MathML
• SVG
[email protected]
21
2010-2011
Applications XML du W3C
•
•
•
•
•
•
•
•
•
•
•
•
XSL/FO (application XML) : Langage de style pour XML
XSLT (application XML) : Langage de transformation pour XML
XLink: Hypertext links
http://www.w3.org/TR/xlink/
XPointer (pointeurs vers une ressource) et XPath (chemins dans la structure,
utilisés par XSLT, XInclude, XLink, XQuery, etc.)
Applications RDF : (langage pour définir des relations entre objets)
http://tecfa.unige.ch/guides/rdf/pointers.html
PICS 2.0 : Platform for Internet Content Selection http://www.w3.org/PICS/
SMIL : Synchronized Multimedia Integration Language
http://www.w3.org/AudioVideo/
P3P: Platform for Privacy Preferences http://www.w3.org/P3P/
SVG: Scalable Vector Graphics
http://www.w3.org/TR/SVG/
MathML : Mathematical Markup Language
http://www.w3.org/Math/
XHMTL http://www.w3.org/TR/html/
RSS http://validator.w3.org/feed/docs/rss2.html
[email protected]
22
2010-2011
Autres applications XML
Exemples :
• playlists dans iTune
• textes dans Open Office
• skins dans Winamp
• dans une application Web
• import/export depuis les SGBD
cf. fichiers ci-contre
•
et on peut créer
son propre langage !
[email protected]
pas mal…
mieux !
mieux !
<math display='block'
xmlns='http://www.w3.org/1998/Math/MathML'>
<mrow>
<mi>sin</mi><mi>A</mi><mo>=</mo><mfrac>
<mrow>
<mtext>opposite</mtext>
</mrow>
<mrow>
<mtext>hypotenuse</mtext>
</mrow>
</mfrac>
</mrow>
</math>
23
2010-2011
XML dans la pratique
Exemple : une bibliographie
<?xml version="1.0" encoding="ISO-8859-1"?>
<biblio>
<livre>
<titre>Les Misérables</titre>
<auteur>Victor Hugo</auteur>
<nb_tomes>3</nb_tomes>
</livre>
<livre>
<titre>L'Assomoir</titre>
<auteur>Émile Zola</auteur>
</livre>
<livre lang="en">
<titre>David Copperfield</titre>
<auteur>Charles Dickens</auteur>
</livre>
</biblio>
[email protected]
24
2010-2011
Exemple :
Une liste de
diapositives
[email protected]
<presentation>
<image type="1">
<ligne>La Direction Informatique</ligne>
<ligne>La DI s’occupe de...</ligne>
</image>
<image type="1">
<ligne>La Direction des Ressources Humaine</ligne>
<ligne>La DRH gère entièrement...</ligne>
</image>
<image type="2">
<graphisme>graphisme.gif</graphisme>
<ligne>Le Pôle Technique</ligne>
<ligne>Il est composé du : </ligne>
<ligne>service des espaces verts, du service</ligne>
<ligne>électrique et du service chauffage.</ligne>
</image>
<presentation>
25
2010-2011
Exemple : une playlist du « Windows MediaPlayer »
<?wpl version="1.0"?>
<smil>
<head>
<meta name="Generator" content="Microsoft Windows Media Player -- 9.0.0.3250"/>
<author/>
<title>Sélection5</title>
</head>
<body>
<seq>
<media src="E:\MyMusic\Gorillaz - Demon Days (2005)\15 Demon Days.mp3" tid="{FF199
<media src="E:\MyMusic\Garbage - Bleed like me (2005)\Garbage - 02 - Run Baby Run.
<media src="E:\MyMusic\Lauryn Hill - The Miseducation Of Lauryn Hill (1998)\Lauryn
<media src="E:\MyMusic\Muse - Absolution (2004)\Muse - 08 - Hysteria.mp3" tid="{AB
<media src="E:\MyMusic\Radiohead - Pablo Honey (1993)\Radiohead - 02 - Creep.mp3"
</seq>
</body>
</smil>
[email protected]
26
2010-2011
Exemple : une playlist du « Windows MediaPlayer »
Les morceaux de musiques sont écrits de la manière suivante
(avec src et tid) :
<media src="E:\MyMusic\Gorillaz - Demon Days (2005)\15 Demon Days.mp3"
tid="{FF199B8E-90D9-4764-A00A-FCF49B4E8E6B}"/>
<media src="E:\MyMusic\Garbage - Bleed like me (2005)\Garbage - 02 - Run Baby Run.mp3"
tid="{45210153-1899-46EC-9DCF-E07E0AFCE3F2}"/>
[email protected]
27
2010-2011
Structure logique
des données
[email protected]
28
2010-2011
Introduction
•
XML permet de structurer une information.
•
L’organisation de l’information est hiérarchisée
sous forme d’arbre.
•
Le fond et la forme sont complètement séparés.
[email protected]
29
2010-2011
Structure de données : l'arbre
•
Les structures réflexives permettent de traiter l'information de
manière plus puissante qu'avec une structure linéaire.
•
L'arbre est une structure très puissante de gestion, d'insertion et
de recherche de données.
•
Remarque : les tableaux sont
une autre forme d’organisation
de l’information.
La racine
Les nœuds
Les feuilles
[email protected]
30
2010-2011
Exemple 1
racine: <biblio>
feuilles : <titre>
<auteur>
<nb_tomes>
<livre> est un élément
fils de <biblio>
etc.
lang est un attribut de
l’élément <livre>.
[email protected]
<biblio>
<livre>
</livre>
<livre>
</livre>
<livre lang="en">
</livre>
</biblio>
31
2010-2011
Exemple 2
Extrait d’un document Web
<h1>Page d'acueil du site sur le chocolat</h1>
<h2>Définition du mot chocolat</h2>
<p>D'après le Larousse, le mot chocolat est un
nom masculin (espagnol chocolate, mot
aztèque). C'est une pâte de cacao préparée
avec du sucre, mélangée ou non avec d'autres
produits (beurre de cacao, par ex.) et
consommée sous diverses formes (tablette,
bonbons, boisson, etc.). </p>
<p>C'est également un adjectif invariable :
<br /> 1. Brun-rouge foncé. <br />
2. Fam. Être chocolat : être déçu,
dupé ou bredouille.</p>
<img src="Images/tablettes.jpg" alt="une belle tablette de chocolat"
title="tablettes de chocolat" width="153" height="208" />
<h2>Sa vertue, un grand stimulant pour le cerveau</h2>
<p>De nouvelles études nous ont confirmé que le chocolat est un des aliments qui contient
le plus de stimulants pour notre cerveau, résultant en un allié très particulier pour son
équilibre.
</p>
[email protected]
32
2010-2011
Exemple 3
Balises de bases d’un document XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body>
<p>De nouvelles études nous ont confirmé que...</p>
</body>
</html>
[email protected]
33
2010-2011
La syntaxe
de XML
[email protected]
34
2010-2011
La syntaxe de XML
Introduction
L’objectif est de hiérarchiser l’information au sein d’un document :
•
afin de la rendre accessible et compréhensible
Les documents sont sur le Web et leur contenu sert :
• pour le référencement,
• à identifier des personnes, des comportements, etc.
• à cibler les messages publicitaires
• à créer automatiquement des agrégats ou des synthèses de
documents,
• etc.
[email protected]
35
2010-2011
La syntaxe de XML
Remarques
•
On peut baliser un document en fonction de son contenu (balisage
sémantique), sa présentation, ou les deux. Le rendu (papier, écran,
etc.) ne se fait pas par les balises mais par les feuilles de styles.
•
Un balisage orienté contenu est un balisage dit sémantique (bien
que des instructions de mise en forme puissent être considérées
comme une forme de sémantique).
•
Sémantique : relatif au sens, à la signification des unités
linguistiques.
[email protected]
36
2010-2011
La syntaxe de XML
Balisage
•
un début de balise est respectivement soit < soit &
•
une fin de balise est respectivement soit > soit ;
•
tout ce qui n'est pas balisage est du contenu
•
un balisage doit être 100% explicite
[email protected]
37
2010-2011
La syntaxe de XML
Balisage
La déclaration XML :
– Identifie ce qui suit comme étant du code XML (indique la
version, l’autonomie ou non du document, la nécessité/utilisation
d’une DTD),
– Est une instruction (repérée par <?...?>,
exemple : <?xml version="1.0"?>),
– N’est pas strictement obligatoire.
[email protected]
38
2010-2011
La syntaxe de XML
Balisage
XML est sensible à la casse (case sensitivity).
Un élément est constitué :
– d’une balise ouvrante (< ou &),
– d’un contenu,
– et d’une balise fermante (> ou ;).
[email protected]
39
2010-2011
La syntaxe de XML
Balisage
L’élément vide :
– il doit être clairement identifié comme tel
(si non, utilisation d’une DTD),
– il est ainsi formé : <empty/>,
– exemples :
<saut.de.ligne/>
<graphique source="fichier.gif" />
[email protected]
40
2010-2011
La syntaxe de XML
Balisage
Les attributs
• Les balises d’ouvertures peuvent contenir des attributs facultatifs ou
obligatoires.
• Leur forme s’écrit :
<nom.type.element nom.attribut="valeur">
Exemples :
<fruit saveur ="acide">
<probleme taille ="immense" cause="inconnue">
[email protected]
41
2010-2011
La syntaxe de XML
Balisage
Si un élément apparaît avec deux jeux différents d’attributs, alors ils
sont fusionnés.
Exemple :
<fruit saveur ="acide">
…
<fruit couleur ="rouge">
[email protected]
Les attributs de <fruit>
sont saveur et couleur
42
La syntaxe de XML
2010-2011
Séparateurs
Symbole
<
</
>
/>
Description
séparateur d’ouverture de balise d’ouverture
séparateur d’ouverture de balise de fermeture
séparateur de fermeture de balise
séparateur de fermeture de balise vide
[email protected]
43
La syntaxe de XML
2010-2011
Attributs
•
L’attribut xml:lan est réservé à XML.
Exemple : <paragraphe xml:lang="en-US">My country
is USA.</paragraphe>
•
Rq : respect de la casse
codes :
[email protected]
code
de
en
es
fr
langue
Allemand
Anglais
Espagnol
Français
code
CA
EN
US
FR
pays
Canada
Angleterre
Etats-Unis
France
44
2010-2011
La syntaxe de XML
Règles d'affectation des nom de balises
•
Le nom doit contenir au moins une lettre (de "a" à "z" ou de "A" à "Z").
•
Si le nom a plus d'un caractère, le premier peut être "_" ou ":".
•
Le premier caractère peut être suivi de
– tout caractère alphanumérique codable avec Unicode
– des signes de ponctuation "-" et ".".
[email protected]
45
2010-2011
La syntaxe de XML
Règles d'affectation des nom de balises
•
Le premier caractère peut être suivi de tabulation, d'espace ou de
soulignement.
•
Pour les noms longs la convention fixe ceci.est.un.long.nom
que ceci_est_un_long_nom.
•
SURTOUT ne pas hésiter à utiliser des noms longs, lisibles, suggestifs
et compréhensibles.
[email protected]
plutôt
46
2010-2011
La syntaxe de XML
Commentaire
•
•
"" sont des séparateurs réservés aux commentaires.
-- ne peut faire partie que du texte en commentaire.
•
Exemples :
– <! -- Voici un commentaire -->
– <! -- Voici un autre commentaire <para> autorisé </para> -->
– <para> paragraphe contenant <! -- un commentaire -->…
</para>
– A NE PAS FAIRE :
<para <! -- commentaire interdit--> > paragraphe </para>
[email protected]
47
2010-2011
La syntaxe de XML
Structure physique et logique
•
HTML utilise ses balises comme des commutateurs de style alors
que XML les utilise comme des conteneurs.
•
Les balises sont les bornes d'une sorte d'intervalle dont l'intérieur
est un contenu.
•
Deux intervalles ne se chevauchent jamais, ils sont disjoints ou l'un
est contenu dans l'autre.
[email protected]
48
2010-2011
La syntaxe de XML
•
L'entité principale est l'entité document (racine), divisée logiquement
en éléments.
•
Une entité est une sorte d'objet de stockage qui peut être soit un
élément soit une entité XML (un fichier externe).
•
Les entités en appellent d'autres (textes, images, codes XML/HTML,
etc.) et peuvent provoquer leur inclusion dans le document.
[email protected]
49
2010-2011
La syntaxe de XML
•
Dans <bannière source="banniere.gif"> l’attribut source de l’élément
appelle une entité externe.
•
XML permet de spécifier la notation (format) de l’entité appelée.
•
La disposition des éléments suscite une structure logique et
la disposition des entités crée une structure physique.
[email protected]
50
2010-2011
La syntaxe de XML
Résumé
Il faut tout mettre dans des balises et correctement les imbriquer.
<citation>
<p>Les gens qui veulent fortement une chose sont
presque toujours bien servis par le hasard.<p>
<author>Honoré de Balzac</author> 1799 - 1850
</citation>
<citation>
<p>Les gens qui veulent fortement une chose sont
presque toujours bien servis par le hasard.<p>
<author>Honoré de Balzac</author>
<period>1799 – 1850</period>
</citation>
[email protected]
<citation>
<p>Les gens <ita>qui veulent fortement une
<bold>chose </ita> sont presque toujours bien
servis</bold> par le hasard.<p>
</citation>
<citation>
<p>Les gens <ita>qui veulent fortement une
<bold>chose </bold></ita> <bold>sont presque
toujours bien servis</bold> par le hasard.<p>
</citation>
51
2010-2011
Document Type Definition
(DTD)
[email protected]
52
DTD
2010-2011
Définition
Une DTD (Document Type Definition) donne la grammaire du contenu
légal d'un document XML. Elle en décrit les éléments types, les
attributs des éléments, les entités pouvant être incluses, les
notations de données externes.
Exemple :
1 page
Web
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
</head>
<body>
<p>De nouvelles étuds nous ont confirmé que...</p>
</body>
</html>
[email protected]
53
2010-2011
DTD
Utilisation des DTD
Les DTD sont intéressantes lorsqu’elles sont « public » c’est-à-dire
disponibles sur le Web.
Les DTD permettent de définir le contenu d’un document et donc de
fiabiliser les échanges automatiques d’information.
Formule plane du butane
Exemples d’échanges :
•
•
•
•
•
une page Web
une équation
un texte (.doc) ou une feuille de calculs (.xls)
Représentation de Cram de l’éthanol
un titre de transport (billet d’avion ou de train)
une formule chimique (formule développée plane
ou la représentation de Cram)
[email protected]
54
2010-2011
DTD
Utilisation des DTD
Exemples de DTD « public » :
•
•
•
Les documents de bureautique de OpenOffice ( fichiers .odt …)
Les documents de bureautique de MicroSoft Office
(depuis 2007, fichiers .docx …)
Des standards (SVG, MathML, X3D, etc.)
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="800">
<g transform="translate(200,200)" style="fill-opacity:1; fill:none;">
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.172">
<path d="M-122.304 84.285C-122.304 84.285 -122.203 86.179 -123.027
86.16C-123.851 86.141 -140.305 38.066 -160.833 40.309C-160.833
40.309 -143.05 32.956 -122.304 84.285z"/> </g>
...
Exemple :
[email protected]
55
2010-2011
DTD
Rôle de la DTD
La DTD décrit en particulier :
- les éléments types (les noms de tous les éléments et leur modèle de
contenu)
- les attributs de chaque élément (nom, type et valeur par défaut)
- les entités binaires ou textuelles pouvant être utilisées dans le
document (les caractères non ASCII par exemple)
- les notations qui permettent d'identifier les types spécifiques de
données externes binaires
[email protected]
56
2010-2011
DTD
XML bien formé et valide
Document XML bien formé :
Un document suivant uniquement les règles de syntaxe XML est
appelé document bien formé.
Document XML valide :
Un document XML possédant une DTD et étant conforme à celle-ci est
appelé document valide.
[email protected]
57
2010-2011
DTD
Déclaration d’une DTD
Une DTD peut être définie de 2 façons :
•
sous forme interne, c'est-à-dire en incluant la grammaire au sein
même du document XML
•
sous forme externe, soit en appelant un fichier contenant la
grammaire à partir d'un fichier local ou bien en y accédant par son
URL
[email protected]
58
DTD
2010-2011
Exemple d’une DTD interne
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE addressBook [

[email protected]
<!ELEMENT addressBook (person)+>
<!ELEMENT person (name,email*)>
<!ELEMENT name (family,given)>
<!ELEMENT family (#PCDATA)>
<!ELEMENT given (#PCDATA)>
<!ELEMENT email (#PCDATA)>
]>
<addressBook>
<person>
<name>
<family>Wallace</family>
<given>Bill</given>
</name>
<email>[email protected]</email>
</person>
<person>
<name>
<family>Tunne</family>
<given>Helen</given>
</name>
<email>[email protected]</email>
59
DTD
2010-2011
Exemple d’une DTD externe
entête qui
contient les
déclarations
corps qui est un
arbre logique
au format XML
[email protected]
<?xml-stylesheet type="text/css" href="bibliographie.css"?>
<!DOCTYPE Biblio SYSTEM "bibliographie.dtd" >
<biblio>
<livre>
</livre>
<livre>
</livre>
<livre lang="en">
</livre>
</biblio>
60
2010-2011
DTD
Introduction aux namespaces
XML définit un système permettant de créer des balises modulaires,
c'est-à-dire pouvoir donner la possibilité d'utiliser des balises
provenant de différents langages à balise au sein d'un même
document grâce à la notion de namespaces (espaces de noms).
La définition d'un espace de nom permet d'associer toutes les balises
d'un langage à un groupe afin d'être capable de mêler différents
langages à balise dans un même document XML (être capable de
dissocier les éléments de HTML contenus dans le document des
balises XML, ou mieux : pouvoir mettre du HTML, MathML, et CML
dans un même document).
[email protected]
61
2010-2011
DTD
Fondamentalement il n'y a pas de risques que des balises XML
interfèrent avec des balises HTML.
Par contre, étant donné que XML est un méta-langage, il permet par
définition de définir de nouvelles balises. Ainsi, il se peut que deux
organismes mettent au point des langages dont certaines balises
portent le même nom, ce qui pose un problème si on désire utiliser
des éléments des deux langages au sein d'un même document.
[email protected]
62
2010-2011
DTD
Les espaces de nom sont identifiés par des URIs (Uniform Resource
Identifiers), mais l'on précise pour chacun d'eux un "label" qui
servira de préfixe aux balises concernés.
[email protected]
63
2010-2011
DTD
Exemple:
<UnElement xmlns:UnEspaceDeNom="UneURI">
xmlns est le "mot-clé" XML permettant de définir un espace de nom.
Le champ d'utilisation de notre espace de nom est délimité par les
balises d'ouverture et de fermeture de l'élément auquel il est associé
(UnElement ici); l'URI (UneURI ici) peut par exemple être:
http://www.w3.org/REC-html40 pour les balises HTML 4.0
http://www.w3.org/REC-MathML pour les balises MathML
[email protected]
64
DTD
2010-2011
Si l'on écrit :
<exemple xmlns:H="http://www.w3.org/REC-html40"
xmlns:M="http://www.w3.org/REC-MathML">
<H:b><M:mn>2</M:mn></H:b>
</exemple>
Les balises HTML et MathML sont parfaitement identifiées grâce aux
préfixes H et M qui renvoient aux URI correspondantes.
Remarquons que l’élément "exemple" doit avoir été défini au préalable et
correspondre à une DTD. On peut ainsi écrire :
<exemple xmlns="UneURI"
xmlns:H="http://www.w3.org/REC-html40"
xmlns:M="http://www.w3.org/REC-MathML">
[email protected]
65
2010-2011
DTD
L'intérêt des espaces de nom est particulièrement notable dans le cas
où il y a "conflit" de signification.
Pour en savoir plus :
http://www.w3.org/TR/xhtml-modularization/dtd_module_rules.html
[email protected]
66
2010-2011
Mises en Forme
[email protected]
67
2010-2011
Mises en forme
Introduction
XML sépare la forme et le fond. Cela signifie que pour produire un
document hypertexte à partir de données en utilisant le format XML,
il est nécessaire d'écrire au moins deux fichiers, le premier
contenant les données à mettre en forme, le second les informations
nécessaires à cette mise en forme.
En pratique, et dans un souci de normalisation et de généralisation, il
faut ajouter un troisième fichier qui contient la DTD.
[email protected]
68
2010-2011
Mises en forme
Introduction
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
[email protected]
69
Mises en forme
2010-2011
Déclaration d’une feuille de style CSS
La déclaration de la feuille de style se fait dans l’entête du document XML
avec <?xml-stylesheet type="text/css" href="fichier.css"?>
(ou <link href="fichier.css" rel="stylesheet" type="text/css" /> en HTML/XHTML)
Exemples :
XML
XHTML
[email protected]
<?xml-stylesheet type="text/css" href="bibliographie.css"?>
<biblio>
<livre>
<nb_tomes>3</nb_tomes> ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head> <title>Votre envie est-elle intacte ?</title>
<link rel="stylesheet" type="text/css" href="/css2/main.css" />
...
70
Mises en forme
2010-2011
Déclaration d’une feuille de style CSS
Exemple d’un document XML+CSS
header {
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="../lecon.css" type="text/css"?>
<lecon>
<header>
<title>lecon 1</title>
<author email="[email protected]">
Patrice Wira</author>
<date>oct. 2006</date>
</header>
<content>
<separator>
<title>XML et styles CSS</title>
</separator>
<separator>
<p>Les règles qui définissent les styles…</p>
lecon.xlm
[email protected]
display:none;
}
separator {
display:block;
height:451px;
margin:0px;
margin-bottom:200px;
border-top:#C63C00 solid 100px;
padding:0px;
background-color:#ededed;
}
title {
display:block;
color:black;
font-weight:bold;
}
lecon.css
71
2010-2011
Mises en forme
Déclaration d’une mise en forme XSL
La déclaration de la feuille de style se fait dans l’entête du document XML
avec <?xml-stylesheet type="text/xsl" href="fichiere.xsl"?>
Exemple :
<?xml-stylesheet type="text/xsl" href="bibliographie.xsl"?>
<biblio>
<livre>
<nb_tomes>3</nb_tomes> ...
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="../lecon.xsl" type="text/xsl"?>
<lecon>
<title>lecon 1</title> ...
[email protected]
72
2010-2011
Mises en forme
XSL
Le XSL pour eXtensible Stylesheet Language ou "langage extensible
de feuilles de style" est une recommandation du W3C datant de
novembre 1999. C'est un standard dans le domaine de la
publication sur le Web.
Le XSL est en quelque sorte le langage de feuille de style du XML. Un
fichier de feuilles de style reprend des données XML et produit la
présentation ou l'affichage de ce contenu XML selon les souhaits du
créateur de la page.
[email protected]
73
2010-2011
Mises en forme
XSL
Le XSL comporte en fait 3 langages :
•
•
•
XSLT qui est un langage qui transforme un document XML en un
format, généralement en (X)HTML, reconnu par un navigateur.
Xpath qui permet de définir et d'adresser des parties de document
XML.
XML Formatter pour "formater" du XML (transformé) de façon qu'il
puisse être rendu sur des PCpockets ou des unités de
reconnaissance vocale.
[email protected]
74
2010-2011
Mises en forme
XSL
Le langage XML est un langage de balises dérivé du langage XML. Le XSL
reprend donc toutes les règles de syntaxe du XML
Rappels :
- les balises sensibles à la casse, s'écrivent en minuscules.
- toutes les balises ouvertes doivent être impérativement fermées.
- les balises vides auront aussi un signe de fermeture soit <balise/>.
- les balises doivent être correctement imbriquées.
- les valeurs des attributs doivent toujours être mises entre guillemets.
- le document XSL devra être "bien formé" [Well-formed].
[email protected]
75
2010-2011
Mises en forme
XSL
Principe de fonctionnement
1.
2.
3.
XSL est dérivé du XML. Le document XSL reprend donc la
structure et la syntaxe de n'importe quel document XML.
le document XSL comporte un document HTML ou XHTML qui
sera quant à lui reconnu par le navigateur et qui servira de
support à tout ou partie des données du document XML associé.
XSL fonctionne avec une ou plusieurs "templates", sorte de
gabarit pour définir comment afficher des éléments du fichier
XML. Les éléments concernés du fichier XML sont déterminés par
l'attribut "match".
[email protected]
76
2010-2011
Mises en forme
XSL
Exemple : compilation.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="xsldemo.xsl"?>
<compilation>
<mp3>
<titre>Foule sentimentale</titre>
<artiste>Alain Souchon</artiste> </mp3>
<mp3>
<titre>Solaar pleure</titre> <artiste>MC Solaar</artiste> </mp3>
<mp3>
<titre>Le baiser</titre> <artiste>Alain Souchon</artiste> </mp3>
<mp3>
<titre>Pourtant</titre><artiste>Vanessa Paradis</artiste> </mp3>
<mp3>
<titre>Chambre avec vue</titre> <artiste>Henri Salvador</artiste> </mp3>
</compilation>
[email protected]
77
2010-2011
Mises en forme
XSL
Exemple : xsldemo.xsl
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html><head><title>Document Web</title></head>
<body>
<table border="1" cellspacing="0" cellpadding="3">
<tr><td>Titre</td> <td>Artiste</td>
</tr>
<tr>
<td><xsl:value-of select="compilation/mp3/titre"/></td>
<td><xsl:value-of select="compilation/mp3/artiste"/></td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
[email protected]
78
2010-2011
Mises en forme
XSL
Explications :
Après l’entête XSL, on aborde un tableau tout à fait classique en
HTML.
On remplit la cellule correspondante au titre par la balise xsl:value-of
avec l'attribut select="compilation/mp3/titre" qui indique comme
chemin d'accès la balise racine compilation la balise mp3 la balise
titre.
On répète l’opération pour la balise artiste.
[email protected]
79
2010-2011
Mises en forme
XSL
Résultat :
Ce qu’on peut faire avec XSL (et pas avec CSS) :
trier, filtrer, sélectionner, mettre des conditions, etc.
CSS permet de réaliser toute la mise en forme de toutes les balises
(HTML, XHTML, et d’autres langages).
[email protected]
80
2010-2011
Scripting et
Document Object Model (DOM)
[email protected]
81
2010-2011
Définition
•
W3C Data Formats
(http://www.w3.org/TR/NOTE-rdfarch)
•
C’est un API (Application Programming Interface) pour documents
HTML et XML
•
Cet API sert à :
– construire des documents (browsers...)
– naviguer dans leur structure avec un programme/script
– rajouter, modifier ou détruire des éléments
[email protected]
82
2010-2011
Définition
"A platform- and language-neutral interface that allows programs
and scripts to dynamically access and update the content, structure
and style of documents. The Document Object Model provides a
standard set of objects for representing HTML and XML documents,
a standard model of how these objects can be combined, and a
standard interface for accessing and manipulating them. Vendors
can support the DOM as an interface to their proprietary data
structures and APIs, and content authors can write to the
standardDOM interfaces rather than product-specific APIs, thus
increasing interoperability on the Web. "
[email protected]
http://www.w3.org/
83
2010-2011
Définition
•
Le DOM est une interface (API), indépendante de la plateforme et
du langage, permettant à des programmes et à des scripts
d’accéder et de mettre à jour le contenu, la structure et le style des
documents.
•
Le DOM fournit un ensemble de standards pour la représentation de
documents HTML et XML, un modèle pour combiner des objets
entre eux, et une interface pour l’accès et la manipulation de ces
objets.
[email protected]
84
2010-2011
En clair
•
Tout document contient des objets possédant des propriétés et des
méthodes pour leur manipulation.
•
Avec DOM, on peut :
– ajouter, modifier ou supprimer des éléments,
– modifier leur contenu,
– ajouter, modifier ou supprimer des attributs.
[email protected]
85
2010-2011
En clair
•
•
•
La majorité des documents possèdent un DOM et peuvent donc
contenir des scripts (JavaScript, VBScript, Java, C++, C#, …)
Le W3C ne fournit que des recommandations pour un jeu d’interface
(API).
Il peut y avoir des différences selon le langage/script, selon le
browser.
[email protected]
86
2010-2011
En clair
Exemple : un document Web ce n’est pas que ça !
xhtlm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<link rel="stylesheet" href="css_vector" type="text/css" media="screen" />
<link rel="stylesheet" href="css_vector" type="text/css" media="print" />
<script src="encoder_bits.js" type="text/javascript"></script>
</head>
<body>
<p>De nouvelles études nous ont confirmé que...</p>
<img alt="image joker" src="big_joker.gif" />
...
</body>
</html>
[email protected]
87
2010-2011
En clair
dtd
xhtlm
Exemple : un document Web c’est ça !
xhtlm
js
xhtlm
rss
gif
css
css
xhtlm
swf
[email protected]
jpg
pdf
88
2010-2011
En clair
dtd
xhtlm
Exemple : un document Web c’est ça !
xhtlm
js
xhtlm
rss
gif
css
css
xhtlm
swf
[email protected]
gif
pdf
89
2010-2011
En clair
Exemple : un document pdf
Un fichier swf
(animation
Flash) est
très
similaire…
pdf
en-tête
aperçu
jpg
jpg
<p>De nouvelles études
nous ont confirmé
que... </p>
<img alt="joker"
src="big_joker.gif" />
<p>...</p> <p>...</p>
xhtlm
jpg
jpg
[email protected]
<h1> ...<h1>
<p> ... <a> ...</a>
</p>
<p> ... </p>
php
90
2010-2011
En clair
•
•
•
Les interfaces sont des objets
Exemples :
DOMImplementation, DOMException, Document,
DocumentFragment, Node, NodeList, Attr, Element
Text, Comment
Relations d’interfaces : ces objets peuvent hériter de propriétés et
méthodes d’autres objets
[email protected]
91
2010-2011
Organisation des objets (dont certains spécifiques à XML)
Node
[email protected]
DocumentType
DocumentFragment
Document
Data
Text
CDATASection
Comment
Attribute
Element
Notation
Entity
EntityRef
ProcessingInstruction
92
2010-2011
Utilité
En HTML :  dynamisme et interactivité
pour
– changer l’aspect d’un paragraphe
– vérifier la validité des données saisies dans un formulaire
– effectuer des calculs et affichages automatiques
[email protected]
93
2010-2011
Exemple : une table comme DOM tree
Données XML :
<table>
<tbody>
<tr> <td>Pierre Dupont</td><td>sculpteur</td></tr>
<tr> <td>Emilie Renaud </td><td>
</td ></tr>
</tbody>
</table>
Pierre Dupont
sculpteur
Emilie Renaud
[email protected]
94
2010-2011
Exemple : une table comme DOM tree
<table>
Arbre dans le DOM :
<tbody>
<table>
<tbody>
<tr> <td>Pierre Dupont</td><td>sculpteur</td></tr>
<tr> <td>Emilie Renaud </td><td>
</td ></tr>
</tbody>
</table>
<tr>
<td>
<td>
<td>
<td>
0
Emilie Renaud
sculpteur
Pierre Dupond
[email protected]
<tr>
95
2010-2011
XML et DOM : une potentialité énorme
Le DOM de XML par rapport à celui de HTML :
•
•
•
•
un seul formalisme pour (presque) tout,
donc un formalisme à vocation multiple,
un formalisme pour représenter toutes sortes de structures de
données,
mieux adapté à l’âge de l’information et aux systèmes d’information.
[email protected]
96
2010-2011
Les documents
interactifs
[email protected]
97
2010-2011
Définition
Un document interactif : c’est un document numérique qui
• contient des formulaires,
• stocke les informations saisies par l'utilisateur (au format XML),
• se connecte à des services Web,
• contrôle les entrées à l'aide d'un langage de script (Ecmascript),
• effectuent les calculs évolués sur les champs du documents, etc.
[email protected]
98
2010-2011
Aperçu général
On parle aujourd’hui de
publication numérique/électronique
ou encore de
l’industrie de l’information.
Les formats sont : XForms, Infopath, PDF, etc.
Remarque :
la différence entre document et formulaire s'estompe petit à petit.
[email protected]
99
2010-2011
Aperçu général
Ces documents électroniques n'existent qu'en version électronique
(inutile de les imprimer!) et nécessitent un lecteur (Infopath, Acrobat
Reader, un plugin XForms) sur le poste client (= client riche).
Leur déploiement s'effectue par simple téléchargement,
ou par envoi par email du document.
[email protected]
100
2010-2011
Aperçu général
IBM et Novell supportent déjà les XForms (du W3C).
Aujourd’hui, Acrobat Reader 6 se connecte à des services Web et
calcule automatiquement certains champs d'un formulaire.
Microsoft cherche à imposer son format, Infopath, livré avec MS Office
2003... et surtout depuis Office 2007.
[email protected]
101
2010-2011
Aperçu général
Le document interactif, quelque part, ne va pas sans Internet. Ils permettent
de saisir de l’information de la base (des clients).
Bases de
données
Associer les deux permet de démultiplier les possibilités et les applications.
[email protected]
102
2010-2011
Client riche
Si HTML a homologué un nouveau mode de navigation, simplissime
dans la portion visible d'un logiciel, la complexité des exigences
fonctionnelles des nouvelles applications n'a cessé de croître.
Client riche : sorte de navigateur
sophistiqué supportant le multimédia
en natif et compatible avec les
formats des services Web.
[email protected]
103
2010-2011
Client riche
Le client riche s'appuie sur une couche d'abstraction supplémentaire,
un socle d'exécution qui découple l'application graphique de l'OS
pour garantir sa portabilité. Le code source est compilé en local,
puis interprété par une machine virtuelle.
Exemples :
• JVM/JRE dans le monde Java
• CLR (Common Language Runtime) dans le camp .Net
• Zend Engine pour PHP,
• le lecteur Flash de Adobe,
• le logiciel Acrobat Reader de Adobe.
[email protected]
104
2010-2011
Client riche
Ces clients intègrent toutes les fonctionnalités pour les documents
interactifs.
Sur le plan technique, l'intérêt du client riche est d'améliorer
l'interactivité avec l’utilisateur, de limiter les temps de réponse, de
pouvoir anticiper sur les actions à venir de l'utilisateur et de
récupérer en avance de phase les informations dont il pourra avoir
besoin (dans une tâche asynchrone invisible à l'écran, par
exemple).
[email protected]
105
2010-2011
Client riche
Pour l'utilisateur, ce changement d'architecture sera complètement
transparent.
Il continue de travailler au sein d'une interface graphique dont il
maîtrise parfaitement l'ergonomie, - le glisser/déplacer, le multifenêtrage, le click droit, etc. - et qui a fait ses preuves en terme de
productivité.
Des entreprises ont du retard, certaines cherchent à combler leur
retard rapidement…
[email protected]
106
2010-2011
Client riche
Les clients riches ne sont pas que logiciels, il peuvent être matériels.
Exemples :
• iPhone, smartphones, et simples téléphones,
• écrans géants, écrans publicitaires,
• TV numériques de salon,
• afficheurs des voitures,
• etc.
[email protected]
107
2010-2011
Conclusion
[email protected]
108
2010-2011
Conclusion
A retenir
Tout objet d’un document structuré par des balises, pour peu qu’il soit
doté d’un nom, est accessible, compréhensible dans son
environnement et peut être manipulé avec un script (via le DOM).
De manière plus générale, tout document numérique (pdf, fichiers de
bureautique, animation Flash, XML, …
• laisse un accès totalement libre au texte,
• contient ou fait le lien avec de nombreuses ressources
(images, sons, vidéos, etc.),
• peut être "scripté" en gérant les événements.
[email protected]
109
2010-2011
Conclusion
Finalement
Si HTML a régné en maître sur le Web durant la période 1995-2005, le
formalisme XML est devenu le standard omniprésent pour tout ce
qui concerne la manipulation et la transmission des données.
En fait, ce n'est pas tant XML lui-même qui est utilisé (même sans le
savoir) mais surtout les nombreux langages qui en découlent.
XML est le socle des documents numériques normalisés du futurs.
[email protected]
110
2010-2011
Conclusion
Finalement
La diffusion d’informations était archaïque jusqu’en 1995-2005.
Depuis elle a explosée et s’est industrialisée (grâce à XML).
Les médias sont devenus multi-canal
et les formats multi-standart.
[email protected]
nombres d’articles dans Wikipedia
(période 2003-2007)
111
Conclusion
2010-2011
Finalement
Chacun de nous produit également de l’information
(numérique/électronique) :
• positions du téléphone portable / géo-localisation,
• logins sur plateformes Web,
• emails stockés,
• documents de bureautique,
• paiements par carte bancaire,
• informations liées aux autres cartes,
• billets électroniques (d’avion, de train…),
• passeports électroniques …
exemple : "Scannable 2D Bar Code with Hyperlink to Website"
[email protected]
112
2010-2011
Conclusion
Finalement
Et chacun en produira bien plus encore avec un minimum d’effort :
• facture
[email protected]
113
2010-2011
Conclusion
Finalement
Et chacun en produira bien plus encore avec un minimum d’effort :
• factures, feuilles des paye, <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE facture SYSTEM "facture.dtd">
• fiches de soins,
<?xml-stylesheet type="text/css" href="facture.css"?>
<facture>
• données biométriques,
<magasin>
<nom>Super P</nom>
• etc.
<slogan>Les super commerçants</slogan>
[email protected]
<adresse> <rue>Pont d'hier</rue>
<codepostal>68980</codepostal>
<ville>Belleville le Haut</ville>
<telephone>03 89 78 44 90</telephone>
</adresse>
</magasin>
<achats>
<achat>
<description>coca cola boite 33cl</description>
<prix>1.72</prix>
<quantite>4 X</quantite>
</achat> ...
exemple : "ma facture électronique" (janv. 2007)
114
2010-2011
Conclusion
Finalement
La diffusion d’informations n’est viable qu’avec des documents
structurés.
L’information de base reste... le texte !
[email protected]
115

Documents numériques

Transcription

Documents pareils

Optimisation du placement de caméras de

Proposition d`un poste d`apprenti - Apprentissage Dpt GEii

U583 - Institut des Neurosciences de Montpellier, INM

Dossier d׳inscription 2016-2017

U583 - Institut des Neurosciences de Montpellier, INM

U583 - Institut des Neurosciences de Montpellier, INM

U583 - Institut des Neurosciences de Montpellier, INM

XML (eXtensivble Markup Language)

Programme - Sociéte des italianistes de l`enseignement supérieur