Hypermédia et technologies Web

Conférence H2PTM03, Paris, 26 septembre 2003

Introduction

Hypermédia et technologies Web :

• les évolutions en cours des technologies du Web

• en focalisant sur l'hypermédia en réseau

• ... et quelques axes de recherche actifs

Web et multimédia

Origine

• Architecture : un système d'adressage universel (URI) donnant accès à des ressources de tous types et de tous formats (MIME)
  -- les bases de l'hypermédia en réseau
• Outils : WorldWideWeb sur NeXT (1990) : image hors texte, puis dans le texte - copie d'écran

Hier

• Pages HTML et plug-ins
• Problèmes : formats hétéroclites, difficultés d'intégration, d'interopérabilité

La révolution XML

XML bouleverse le Web

• XML est un langage de balisage
• XML est aussi un langage de définition de documents (DTD)
• XML est surtout une famille de technologies pour le développement du Web

XML pour l'hypermédia sur le Web

Information structurée

XML ne représente que la structure et le contenu des documents/données

Un document XML est indépendant de
 

• sa présentation

• tout type de traitement

• toute application

Présentation

La présentation des documents XML est spécifiée de façon externe par des feuilles de style

• 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
• Un ensemble cohérent de documents peut être présenté de façon homogène en appliquant les mêmes feuilles de style

Avantages

• Maintenabilité
• Indépendance des plates-formes
• Performances

Langages de style

Deux langages de style complémentaires

CSS : Cascading Style Sheets

Un langage simple pour associer des propriétés de style à des éléments dans les documents XML

Cascade : plusieurs feuilles de style peuvent être combinées
-- auteur, site, agent, utilisateur

Exemple XHTML, exemple DocBook

XSL : Extensible Stylesheet Language

Permet de transformer la structure d'un document XML et d'y ajouter du style

Syntaxe : XML

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

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, espacements, etc.
• Sortie vocale : volume, pauses, effets sonores, position de la source, débit, hauteur du son, etc.

CSS et l'adaptation

La cascade CSS permet l'adaptation du document aux utilisateurs
-- auteur, site, agent, utilisateur

Les médias CSS permettent l'adaptation aux appareils :

• aural, braille, embossed, handheld, print, projection, screen, tty, tv

Exemple :

  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

Universalité du Web

L'adaptabilité apportée par CSS n'est qu'un aspect de l'universalité du Web :

Utilisateurs

• accessibilité
• internationalisation (I18N)

Moyens techniques

• terminaux d'accès
• réseaux

L'adaptabilité est un sujet important pour le Web

Adaptation par transformation

L'adaptation peut s'appuyer sur des transformations

XSLT, langage de transformation pour XML - principe

XSLT permet de générer des formes différentes d'un même document XML :

• XSL-FO, XHTML, SVG, etc.

Au-delà du WYSIWYG

Pour adapter un document par le style ou les transformations, il faut une source qui s'y prête

Le paradigme WYSIWYG ne fonctionne plus

Un nouveau défi : « device independent authoring »

• Édition multi-vues
• Édition contenu / style simultanément
• Édition structure / transformations simultanément

Structure et traitements

Présentation et adaptation ne sont que deux aspects des traitements de document

L'indépendance entre documents et traitements est un intérêt majeur de XML

Des langages de traitement spécialisés pour XML se développent :

• Style : CSS, XSL
• Recherche d'information : XQuery
• Transformations : XSLT

Transformations XML

Les transformations sont au coeur de tous les traitements de documents :

• Évolution des DTD et schémas
• Interopérabilité entre applications utilisant des modèles de document différents
• Conversions de formats
• Réutilisation : versions dérivés, assemblage de fragments, éclatement -- exemple
• Formatage évolué : pages complexes, sommaires, index, etc.
• Adaptation de la présentation à l'appareil, à l'utilisateur, au réseau
• Édition de documents
• Recherche d'information
• etc.

Une forte activité de recherche se développe autour des langages de transformation

Programmation

Les langages spécialisés sont principalement déclaratifs

Les langages de programmation « classiques » et les scripts peuvent aussi être utilisés, grâce au DOM (Document Object Model)

Le DOM est un modèle objet des documents XML et une interface de programmation standard pour l'accès à la structure et au contenu des documents

Documents dynamiques :

• Événements associés aux actions de l'utilisateur : XML Events
• Mécanisme de liaison entre événements et actions
• Langage de programmation ou de script pour réaliser les actions
• Interface de programmation pour accéder au document : DOM

XML et le multimédia

Bien que s'appuyant sur une syntaxe textuelle, XML a favorisé le développement d'applications non textuelles sur le Web :

• VoiceXML, SVG, SMIL, MathML

Les objets média (images, sons, vidéo) sont des ressources séparées sur le Web

La structure XML assemble les objets média

Multimédia synchronisé : SMIL

Synchronized Multimedia Integration Language

• SMIL est au multimédia ce que HTML est au texte
• Un format textuel simple, XML
• Intégration avec les autres technologies Web : XML, CSS, DOM, XLink, etc.
• Intégration de médias de différents formats
• Indépendant des protocoles d'accès : HTTP, RTP, RTSP
• Mécanismes puissants pour la gestion du temps, de la synchronisation et de l'animation
• Grande adaptabilité aux systèmes et aux utilisateurs

SMIL -- Structure d'un document

Un document SMIL contient deux parties (schéma) :

entête <head>

layout et méta-information, comme dans HTML

corps <body>

contenus et liens, comme dans HTML

gestion du temps : scénario temporel, animations, transitions

Graphique vectoriel : SVG

Scalable Vector Graphics

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

• des formes vectorielles
• des images
• du texte
• des animations

Structuration : hiérarchie d'objets, références, style (CSS), transformations géométriques.

Effets : clipping, transparence, filtres

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

Animation SMIL dans SVG

Les éléments d'animation de SMIL sont utilisés dans SVG

• Pratiquement tous les éléments SVG peuvent être animés
• Pratiquement tous les attributs SVG peuvent être animés
• Éléments d'animation :
  • animate, animateMotion, animateTransform
  • animateColor
  • set (valeurs discrètes)
• Exemple :

  <rect x="10" y="0" ...>
     <animate attributeName="x" from="10"
              to="500" dur="3s"/>
  </rect>

Intégration

XML favorise la création de langages spécialisés qui se combinent

Espaces de nom

mécanisme pour combiner plusieurs langages XML dans un même document

• Conception modulaire des langages de balisage
• Réutilisation d'un même langage dans des contextes différents

Exemple : XHTML + MathML + SVG + SMIL

Intégration des médias et des structures

Hypertexte : XLink

Objectif : fournir à XML des mécanismes hypertexte au niveau de l'état de l'art (HyTime, TEI, Dexter), au-delà des possibilités de HTML

XLink permet à des éléments de documents XML quelconques d'établir des liens vers des (parties de) ressources Web

• Liens simples, unidirectionnels à la HTML
• Liens étendus, multi-ressource, multi-directionnels
• Liens décrits à l'extérieur des ressources qu'ils relient
• Ancres décrites dans le lien, pas nécessairement dans le document
• Liens avec comportement

Exemple

Conclusion

• XML n'est pas seulement un langage de balisage
• XML est aussi un méta-langage pour créer d'autres langages
• XML est accompagné de langages de style
• L'adaptabilité est un point clé des documents du Web
• Les transformations forment la base des applications XML
• XML favorise les documents dynamiques
• Plusieurs formats multimédia sont construits sur XML
• Les différents langages XML peuvent se combiner
• Des liens hypertexte puissants accompagnent XML

Pour en savoir plus

http://www.w3.org/

Ces transparents : http://wam.inrialpes.fr/talks/2003/H2PTM03-Sep03/Overview.html

Merci!