Documents structurés, Multimédia et Web

DEA 2003-2003

Objectifs et organisation du cours

Plan de la partie 1

  1. Modèles de documents, principes et objectifs
  2. Les standards du Web: XML, XML Schema, RDF
  3. Langages de présentation et de transformation
  4. Edition de documents structurés et multimédia

1. Modèles de documents, principes et objectifs

Notion de document

Traitement électronique des documents


Besoins des auteurs/lecteurs

Besoins des développeurs d'application

Que représenter ?

Caractérisation d'un document par
Mais aussi

Logical Structures

A document is organized as a tree structure in which the leaves are the basic elements representing the "content" of the document.

Examples of logical structures

From specific to generic structures

Specific structures

Representation of categories of documents

2. Les standards du Web: XML, XML Schema, RDF


Extensible Markup Language:

XML is:

XML Syntax

A DTD for messages

<!ELEMENT message (sender, receiver, subject?, date, body) >

<!ELEMENT body (para)+ >

<!ELEMENT sender #PCDATA >

<!ELEMENT receiver #PCDATA >

<!ELEMENT subject #PCDATA >



<! ATTLIST message lang (fr | en | sp | it ) #REQUIRED >

A DTD for bibliography documents

(from :

<!ELEMENT bib  (book* )>
<!ELEMENT book  (title,  (author+ | editor+ ), publisher, price )>
<!ELEMENT author  (last, first )>
<!ELEMENT editor  (last, first, affiliation )>
<!ELEMENT title  (#PCDATA )>
<!ELEMENT last  (#PCDATA )>
<!ELEMENT first  (#PCDATA )>
<!ELEMENT affiliation  (#PCDATA )>
<!ELEMENT publisher  (#PCDATA )>
<!ELEMENT price  (#PCDATA )>

XML documents

Well-formed document
Syntactical XML conformance (basically the document is a tree)

Valid document
DTD conformance for type elements, composition rules and attributes

XML Standards

XML Schemas


Principles of XML Schemas

XML Schemas Example 1

<xsd:schema xmlns:xsd="">

  <xsd:element name="purchaseOrder" type="PurchaseOrderType"/>

  <xsd:element name="comment" type="xsd:string"/>

  <xsd:complexType name="PurchaseOrderType">


   <xsd:element name="shipTo" type="USAddress"/>

   <xsd:element name="billTo" type="USAddress"/>

   <xsd:element ref="comment" minOccurs="0"/>

   <xsd:element name="items" type="Items"/>


<xsd:attribute name="orderDate" type="xsd:date"/>




XML Schemas Example 2: Message schema

<schema xmlns=''

<element name='message'>
  <complexType content='elementOnly'>
    <element ref='t:sender'/>
    <element ref='t:receiver'/>
    <element ref='t:subject' minOccurs='0' maxOccurs='1'/>
    <element ref='t:date'/>
    <element ref='t:body'/>
    <attribute name='lang' use='required'>
       <simpleType base='string'>
           <enumeration value='fr'/>
           <enumeration value='en'/>
           <enumeration value='sp'/>
           <enumeration value='it'/>

<element name='body'>
  <complexType content='elementOnly'>
    <sequence maxOccurs='unbounded'>
      <element ref='t:para'/> </sequence>

<element name='sender'> <complexType content='mixed'> </complexType> </element>
<element name='receiver'> <complexType content='mixed'> </complexType> </element>
<element name='subject'> <complexType content='mixed'> </complexType> </element>
<element name='date'> <complexType content='mixed'> </complexType> </element>
<element name='para'> <complexType content='mixed'> </complexType> </element>

Dublin Core

<xs:schema xmlns:xs=""
      <rdf:RDF xmlns:rdf=""
      <rdf:Description rdf:about="">  
      <dc:title>Simple DC XML Schema</dc:title>
      <dc:description>This schema defines terms for Simple Dublin Core...
      <dc:publisher>The Dublin Core Metadata Initiative</dc:publisher>
      <dc:creator>Pete Johnston (</dc:creator>
      <dc:creator> ...</dc:creator>
      <dc:relation rdf:resource=""/>

  <xs:import namespace=""

  <xs:element name="title" type="elementType"/>
  <xs:element name="creator" type="elementType"/>
  <xs:element name="subject" type="elementType"/>
  <xs:element name="description" type="elementType"/>
  <xs:element name="publisher" type="elementType"/>
  <xs:element name="contributor" type="elementType"/>
  <xs:element name="date" type="elementType"/>
  <xs:element name="type" type="elementType"/>
  <xs:element name="format" type="elementType"/>
  <xs:element name="identifier" type="elementType"/>
  <xs:element name="source" type="elementType"/>
  <xs:element name="language" type="elementType"/>
  <xs:element name="relation" type="elementType"/>
  <xs:element name="coverage" type="elementType"/>
  <xs:element name="rights" type="elementType"/>

  <xs:group name="elementsGroup">
    <xs:choice minOccurs="0" maxOccurs="unbounded">
      <xs:element ref="title"/>
      <xs:element ref="creator"/>
      <xs:element ref="subject"/>
      <xs:element ref="description"/>
      <xs:element ref="publisher"/>
      <xs:element ref="contributor"/>
      <xs:element ref="date"/>
      <xs:element ref="type"/>
      <xs:element ref="format"/>
      <xs:element ref="identifier"/>
      <xs:element ref="source"/>
      <xs:element ref="language"/>
      <xs:element ref="relation"/>
      <xs:element ref="coverage"/>
      <xs:element ref="rights"/>

  <xs:complexType name="elementType">
      <xs:extension base="xs:string">
        <xs:attribute ref="x:lang" use="optional"/>


XML Related Standard

RDF Resource Description Framework

RDF syntax

A simple example of RDF description


Property with structured value

  xmlns: rdf=""
  <rdf:Description about="">
    <s:Creator rdf:resource=""/>

  <rdf:Description about="">
    <rdf:type resource=""/>
    <v:Name>Ora Lassila</v:Name>

Representation of a reified statement

ex: Ralph Swick says that Ora Lassila is the creator of the resource

    <rdf:subject resource="" />
    <rdf:predicate resource="" />
    <rdf:object>Ora Lassila</rdf:object>
    <rdf:type resource="" />
    <a:attributedTo>Ralph Swick</a:attributedTo>

Representation of a reified statement

RDF Schema

A node and arc diagram showing domains and range properties of some of the main RDF properties

RDF properties (partial)

Property name comment domain range
rdf:subject The subject of an RDF statement. rdf:Statement rdfs:Resource
rdf:predicate the predicate of an RDF statement. rdf:Statement rdf:Property
rdf:object The object of an RDF statement. rdf:Statement not specified
rdf:type Indicates membership of a class rdfs:Resource rdfs:Class
rdfs:subClassOf Indicates membership of a class rdfs:Class rdfs:Class
rdfs:subPropertyOf Indicates specialization of properties rdf:Property rdf:Property
rdfs:label Provides a human-readable version of a resource name. rdfs:Resource rdfs:Literal
rdfs:domain A domain class for a property type rdf:Property rdfs:Class
rdfs:range A range class for a property type rdf:Property rdfs:Class

Example of definitions

3. Langages de présentation et de transformation

Style Sheets

Presentation models (Style sheets) for:
  • Separation of the style from the content/structure
  • Presentation of the same document without modifying it
  • Homogeneous presentation of documents having the same type
  • Automatic formatting
  • Association of a value of a property with an element (or element type)
  • Specific or generic definitions
  • Context sensitivity: relative values, inheritance

Requirements for interactive formatting

The formatting process in a structured document editor must deal with:

=> Formatting requirements:

Some examples of complex formatting

Non-textual elements
  • Tables
  • Equations ...
Floating elements
  • Page headers and footers
  • Floating figures
Multiple columns and multiple flows
  • Documents with mixed column models
  • Column balancing
  • Multi-lingual documents

Presentation models

CSS: Cascading Style Sheets

The W3C style sheet language for XML/HTML documents

Platform independence, document and site maintenance, adaptability to network performances

From CSS1 to CSS2 and CSS3

CSS principles

Generic properties

Separation of content and presentation between HTML and style sheets:

CSS syntax

A property (color, margin, font, etc.) is assigned to a selector in order to manipulate its style. Example: color: red;
  • HTML elements: P { text-indent: 3em }
  • Class selectors: code.html { color: #191970 }
    with CLASS attributes: <CODE CLASS=html> ... </CODE>
  • ID selectors (with ID attribute): #svp94O { text-indent: 3em }
Main rule: the inner selector inherits the surrounding selector's values unless otherwise modified.

Exceptions: the margin-top property is not inherited, etc.

CSS declaration

Local stylesheet declaration
<h2 style=font-size: 35pt; color: blue; line-height: 30pt;
font-weight: bold; font-family: "Verdana,Ariel,Helvetica">
This is the new headline.</h2>
Global stylesheet declaration

<style type="text/css">

<!-- h4 {font: 17pt; font-weight: bold; color: maroon}
h2 {font: 15pt; font-weight: bold; color: blue}
p {font: 12pt; color: black}


Linked stylesheets
  • Create aseparate stylesheet file (.css suffix):

    <html> <style type="text/css"> <!-- mystyle.css -- >
    <!-- body {font: 10pt };               p {color: black;
                  margin-left: 0.5in; margin-top: -10px } --> </style> </html>

  • Apply it to an HTML page:

    <head> <link rel=stylesheet href="mystyle.css" type="text/css">

Cascading stylesheets
Which stylesheet definition takes precedence?

Basic rule: the most specific setting wins.

"! important" statement overrides normal rules

XSL: eXtensible Stylesheet Language

XSL transformation language

A style sheet XSL contains a set of rules pattern/template

Structural context of the source tree (using XPath)
A resulting subtree for that corresponding pattern

XSL-T example

<xsl:template match="emph">
  <fo:inline-sequence font-weight="bold">
<xsl:template match="author-group">
    <xsl:apply-templates select="author/given-name"/>

Another XSL-T example

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet xmlns:xsl="">	
 <xsl:template match="memoset">
			<xsl:apply-templates select="mémo"/>
 <xsl:template match="mémo">

 <xsl:template match="de">
		<P>Message de: <xsl:value-of select="."/></P>
 <xsl:template match="message">
		   <xsl:apply-templates select="para"/>
 <xsl:template match="para">
		   <xsl:value-of select="."/>

4. Edition de documents structurés et multimédia

Outils d'édition multimédia

  1. Documents multimédias et besoins d'édition

  2. Edition des structures temporelles

    Cas de SMIL avec l'outil LimSee

  3. Edition des structures de média

    Cas de la vidéo avec VideoMadeus

  4. Edition dans les architectures complexes:

    Cas des systèmes de présentation par transformation(s)

Partie 1 :
Documents multimédias et besoins d'édition

Evolution des modèles de documents
  • multimédia, web

Evolution des besoins de présentation
  • interactivité, nouveaux terminaux

Nouvelles applications, nouveaux utilisateurs

Modèles de documents multimédias

  • Approches impératives / déclaratives

  • Intégration des structures logiques, temporelles, spatiales, liens
    • DTD métier / DTD de présentation / DTD mixtes

  • Spécifications temporelles: absolues ou relatives,
    modèles d'instants ou d'intervalles

  • Granularité des descriptions de média

  • Langages standard
    • HyTime, MHEG, MPEG4, SMIL

Exemple du langage SMIL

  • Modèle de synchronisation:
    • arbre d'opérateurs temporels : par, seq
    • structures de contrôle : switch, repeat
    • attributs de synchronisation : begin, end, dur, endsync

  • Modèle de structures spatiales
    • régions non hiérarchiques
    • attributs de placement

  • De SMIL1.0 à SMIL2: animations, profils

Besoins des auteurs

  • Edition des objets documentaires
    • Source
    • Modèle (DTD, XML Schémas)
    • Feuilles de style / transformation

  • Simplicité / Puissance

  • Autres : multilingue, adaptation, réutilisation

Difficultés de l'édition multimédia

  • Variété des médias

  • Perception de l'enchaînement temporel

  • Interdépendance des informations temporelles/spatiales/liens

  • Performances de la chaîne d'édition

Fondements des techniques d'édition

  • Techniques de visualisation

  • Modèle de présentation

  • Formatage incrémental

  • Modes d'édition : wysiwyg, templates, manipulation directe, démonstration

  • Edition libre / sous contrainte (de la structure)

  • Cohérence maintenue en cours d'édition

Editeurs XML (génériques/spécifiques)

  • Sites: w3c,,

  • Plus de 40 outils répertoriés

  • Editeurs génériques: édition "conviviale" du source

  • Editeurs spécifiques: pour XHTML, SVG, SMIL, MathML...

Partie 2:
Edition des structures temporelles

  • Complexité des structures

    -> spatial, temporel, animations, liens

    -> besoins de perception : multivues

  • Interdépendance des structures

    -> synchronisation entre les vues

  • Opérations d'édition complexes

    -> manipulatons directes

Approches de l'édition temporelle

  • Edition textuelle du source

  • Edition XML : Hiérarchie, Attributs

  • Edition du flot de contrôle (organigramme)

  • Edition avec canevas (templates)

  • Edition directe, s'approchant du wysywyg

  • Combinaison des approches!

Remarque: dépendance avec le modèle de composition multimédia

Exemples d'outils

  • Approche templates: RealSlideShow, Harmonia, Powerpoint

  • Approche flot de contrôle: IconAuthor, RdP, HyperPRO

  • Approche XML+: MPro, SMILComposer

  • Approche canaux synchronisés sur une ligne de temps: Director

  • Approche édition temporelle avec relations: CMIFed, Grins, Madeus, NSync

Travaux menés dans le projet Opéra

  • Modèle temporel à base de relations d'intervalles
  • Vue temporelle
  • Edition directe
  • Maintien de la cohérence

  • Editeur Madeus (L. Tardif)
  • Editeurs pour SMIL : SmilEditeur et LimSee

Objectifs de LimSee

  • Environnement d'édition pour documents SMIL

  • Modèle de temps SMIL 1.0 avec certains attributs de SMIL 2.0

  • Qualité de l'information temporelle visualisée
    • structure hiérarchique temporelle (par, seq, switch)
    • attributs de synchronisation (begin, end, dur)

  • Simplicité d'utilisation

Principe de fonctionnement de LimSee

  • Edition Multi-vues
    • hiérarchique
    • attribut
    • temporelle

  • Edition directe
    • placement des médias dans la vue temporelle
    • mise à jour des modifications dans l'ensemble des vues

  • Utilisation des techniques de propagation de contraintes

La vue Hiérarchique

détail de la vue hierarchique Le document est composé de 2 parties :

La structure spatiale

La structure temporelle (séquentielle ou parallèle)

La vue Attribut

détail de la vue Attribut

La vue Temporelle

  • Perception globale du placement temporel des médias
  • Manipulation directe des objets graphiques (médias, attributs temporels)

vue TimeLine

Limitations de limSee

  • Pas encore de vue d'exécution ni de vue spatiale

  • Couverture incomplète du langage SMIL
    • Attribut "repeat"
    • Attributs "clip-begin" et "clip-end" uniquement dans la vue Attribut)
    • Eléments switch et anchor non traités

  • Le développement continue...

Téléchargement :

Partie 3:
Edition de médias structurés

Les besoins

  • Limites de la composition "gros grain"

  • Décomposition de médias complexes
    • analyse automatique
    • édition manuelle

  • Intégration avec le modèle temporel de documents
    • notion de sous-éléments

Modèle de médias structurés

  • Décomposition en 4 structures:
    • Content/SubContent: structure du contenu
    • Actor/SubActor: association de style, de comportement (animation)
    • Region/SubRegion: structure spatiale, relations spatiales
    • Interval/SubInterval: structure temporelle, relations temporelles

  • Réutilisation de contenus/acteurs

  • Flexibilité du modèle

  • Ouverture: import/export MPEG7, SMIL

Edition de médias structurés : solution

Prototype VideoMadeus (T. Tran Thuong)

  • Edition multivue et multiniveaux des structures de média
    • structure hiérarchique
    • fenêtre d'exécution
    • vue temporelle hiérarchique

  • Insertion "drag&drop" dans le document multimédia

  • Edition des synchronisations entre sous-éléments et éléments

Partie 4:
Edition dans les architectures à transformation

  • Applications utilisant des modèles de document "métier"

  • Production automatisée de présentations multimédias

  • Production de présentations multimédias adaptées

=> Systèmes de présentation par transformations des
      données source

?? Quels besoins d'édition ??

Les besoins

  • Besoin d'édition des sources
    • édition XML
  • Besoin d'édition des feuilles de transformation
    • outils spécifiques (ex. Stylus studio, <xsl>composer)
  • Edition sur les structures cibles
    • le wysiwyg est-il possible?
    • problème du maintien des dépendances source-cible
  • Besoin de transformation incrémentale


Prototype Madeus* (L. Villard)

  • Contexte: production de présentations adaptables à partir de mêmes sources
  • Objectif: Edition dans la (les) vues formatées de l'information source et des feuilles de transformations
  • Moyens:
    • modèle de présentation multistructures et flexible
    • services d'édition à travers des vues synchronisées:
      • vue source
      • vue(s) cible(s) formattée(s)
      • vue de la feuille de style
    • processeur de transformation incrémental (xslt)


  • Edition "wysiwyg" pour des cas bien identifiés
    • modification de contenu
    • règles de style
    • choix de la vue d'édition laissé à l'auteur
  • De réels problèmes d'IHM
    • sélection des "patterns" dans la structure source
    • complexité du processus de transformation
    • variété des besoins d'édition: vers des générateurs d'interface d'édition en fonction des DTD source
  • Les difficultés augmentent si les structures des cibles sont éloignées des structures sources


  • Convergence des besoins -> convergence des solutions
    • formats
    • processus de traitement
    • outils d'édition ??

  • Peu de travaux qui intègrent toute la chaîne des traitements multimédias

  • Les services de base de l'édition doivent se perfectionner :
    • visualisation
    • formatage
    • édition multi-objets