Formats de documents pour le Web

Vincent Quint

Document Formats Domain Leader

World Wide Web Consortium

CEMT workshop ⋅ Grenoble ⋅ 23 mai 2002

Formats de documents

Hypertexte : XHTML
Mathématiques : MathML - Mathematical Markup Language
Graphique : SVG - Scalable Vector Graphics
Style - Séparation contenu/style
- CSS - Cascading Style Sheets
- XSL - Extensible Stylesheet Language

Hypertexte - XHTML

Objectif : Après HTML 4.0 (1997), développer la prochaine génération de HTML en utilisant les technologies XML

Favoriser le développement de pages correctes
Intégration de HTML avec les autres applications XML
Modularisation : adaptation à la variété croissante des browsers
Réduire les coûts de production des sites Web

XHTML - Recommandations

XHTML 1.0 - janvier 2000, 2^nde édition octobre 2001
Reformulation de HTML 4.01 en XML

3 variantes : Transitionnel, Frameset, Strict
Modularisation de XHTML - avril 2001
XHTML 1.0 découpé en modules définis par des DTD

Pour définir des sous-ensembles et sur-ensembles de XHTML
XHTML Basic - décembre 2000
Un ensemble minimum de modules adapté aux mobiles
XHTML 1.1 - mai 2001
Une version modularisée de XHTML 1.0 strict + Ruby

XHTML - Développements

Modularisation de XHTML fondée sur les schémas XML
XML Events - associer des comportements au balisage
XHTML 2.0 - 1er WD bientôt
- Document complet
- Compatibilité non assurée
- Pas de frames (XFrames), pas de formulaires (XForms)
Media type : application/xhtml+xml

Plus de détails : http://www.w3.org/MarkUp/xhtml-roadmap/

MathML - Mathematical Markup Language

Objectifs

Intégrer des expressions mathématiques dans les pages Web
Permettre l'échange de formules entre logiciels mathématiques
Représenter la structure de présentation
et la structure du contenu

Caractéristiques

Un langage écrit en XML
Utilisable avec d'autres langages XML
Style compatible avec CSS

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

MathML - Un exemple

$x^{2} + 1$
Présentation	Contenu
<math> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mn>1</mn> </math>	<apply> <plus/> <apply> <power/> <ci>x</ci> <cn>2</cn> </apply> <cn>1</cn> </apply>

MathML

Résultats

Recommandations :
MathML 1.0 - avril 1998, MathML 2.0 - février 2001
Nombreuses implémentations :
éditeurs, browsers, afficheurs, convertisseurs, widgets
DTD XHTML 1.1 + MathML 2.0

Travaux en cours

Maintenance de MathML 2.0, errata
Schéma XML pour MathML 2.0
Feuille de style XSLT pour MathML
Déploiement
Services Web MathML

SVG - Scalable Vector Graphics

Un langage XML pour décrire des graphiques 2D contenant :

des formes vectorielles
des images
du texte

Structuration : groupes, copies par référence, style (CSS), transformations géométriques.

Effets : clipping, transparence, filtres

Dynamique : interaction (événements, scripts, DOM), animation (SMIL)

SVG

Résultats

Recommandation SVG 1.0 - septembre 2001
Suite de tests pour SVG 1.0
Nombreuses implémentations : viewers, éditeurs natifs, importation/exportation, convertisseurs, générateurs (serveur)

Travaux en cours

SVG 1.1 : Modularisation de SVG 1.0 (CR)
Profils Mobile : SVG Tiny et SVG Basic (CR)
SVG 1.2 : extension de SVG 1.1
Préparation de SVG 2.0

Feuilles de style

Séparer le style d'un document de sa structure/contenu

Sans modifications, un même document peut être présenté de différentes façons :
- Selon le lecteur
- Selon les caractéristiques de l'appareil de restitution
Différents documents peuvent être présentés de façon homogène

Avantages : maintenabilité des sites Web, indépendance des plates-formes, performances

CSS, XSL - Langages de feuille de style

CSS - Cascading Style Sheet

Un langage simple pour associer des propriétés de style à des documents structurés

Cascade : différentes feuilles de style peuvent être combinées (auteur, site, client, utilisateur)

XSL -Extensible Style sheet Language

Conçu pour XML. Permet de transformer la structure du document ou des données

Syntaxe XML

Structures de pages complexes, tables des matières, index, conversion de format

CSS - Principes

Une feuille de style est un ensemble de règles comprenant chacune

Un sélecteur, qui spécifie les éléments auxquels elle s'applique
Des propriétés, avec leurs valeurs, à appliquer à ces éléments
```
h1 {color: blue; font-weight: bold}
ul ul li {font-size: smaller}
```

Sélecteurs CSS

Type de l'élément : h1 {color: blue}
Classe de l'élément (attribut class) : .important {font-style: italic}
Un élément unique (ID) : #z98y {font-family: helvetica}
Pseudo-classe : p:first-letter {font-size: 24pt}
Type et classe : li.important {background-color: yellow}
Contexte structural : ul ul li {font-size: smaller}
etc.

Propriétés CSS2

Polices : famille, taille, style, variantes, graisse, étirement, etc.
Couleur du texte, couleur de fond, image de fond
Format : Bloc, élément flottant, élément en ligne
Position absolue, relative, superposition
Géométrie : Largeur, hauteur, marges, filets
Génération de contenu, numérotation, marques de listes
Description des pages, contrôle des sauts de page
Texte : indentation, alignement, décoration, soulignement, interlettrage, etc.
Tables : bordures, cadres, espacement, etc.
Sortie vocale : volume, pauses, effets sonores, position de la source, débit, hauteur du son, etc.

CSS

Résultats

Recommandations CSS1 - décembre 1996, CSS 2 - mai 1998
Nombreuses implémentations, suites de test, validateur

Travaux en cours : CSS3

Modularisation, profils (TV, mobile)
Desktop publishing
Internationalisation (texte, ruby, fontes)
Multimedia (media queries)
Suite de tests pour CSS3

XSL - Architecture

XSL comprend deux composants

XSLT : Transformations: Un langage pour exprimer les transformations d'un type de document XML en un autre
Le type cible peut être XSL-FO
XSL-FO : Formatting Objects: Un langage XML qui définit des objets de formatage et les propriétés de style associées
Mêmes propriétés que CSS

Transformations XSLT

XSLT - Transformations

XSLT : "le Perl de XML"

Une feuille de style XSLT contient un ensemble de règles pattern/template

Pattern: Contexte structural dans la structure source
Expression XPath

Template: Fragment du résultat à produire pour le pattern correspondant

XSLT - Exemple

<xsl:template match="Titre">
   <h1>
      <xsl:apply-templates/>
   </h1>
</xsl:template>

Source : <Titre>Introduction</Titre>

Résultat : <h1>Introduction</h1>

XSL-FO

Modèle de formatage pour documents mis en page

Modèle de zones riche pour le formatage du texte
Multi-colonnes
Plusieurs modes d'écriture
et plus encore.

XSL

Résultats : Recommandations

XSLT 1.0 - novembre 1999
XPath 1.0 - novembre 1999
XSL 1.0 - octobre 2001

Travaux en cours

XSLT 2.0 (WD) : groupement, tris, fonctions utilisateur, sorties multiples, sortie XHTML
XPath 2.0 : en liaison avec XQuery
XSL-FO : propositions d'extensions pour version 2.0

Autres activités

XForms: Nouvelle génération de formulaires sur le Web
Internationalisation: Assurer que les spécifications soient adaptées à toutes les langues et cultures
Amaya: Mise en oeuvre des spécifications W3C dans un environnement auteur/browser

Conclusions

Des pages Web plus riches : graphique, mathématiques, style

Utilisation des technologies XML

Des pages mieux structurées ==> réutilisables, retraitables

Des langages modulaires ==> combinaisons, profils

Pour en savoir plus : http://www.w3.org/DF/