Transcript
Page 1: Codage des documents hypermédias

Codage des documentshypermédias

Romulus GRIGORAS

ENSEEIHT

Page 2: Codage des documents hypermédias

Coder du texte • La mémoire de l'ordinateur conserve toutes les données sous forme numérique. Il

n'existe pas de méthode pour stocker directement les caractères. Chaque caractère possède donc son équivalent en code numérique:

• c'est le code ASCII (American Standard Code for Information Interchange).• Le code ASCII de base représentait les caractères sur 7 bits (c'est-à-dire 128

caractères possibles, de 0 à 127). Le code ASCII a été mis au point pour la langue anglaise, il ne contient donc pas de caractères accentués, ni de caractères spécifiques à une langue. Pour coder ce type de caractère il faut recourir à un autre code. Le code ASCII a donc été étendu à 8 bits (un octet) pour pouvoir coder plus de caractères (on parle d'ailleurs de code ASCII étendu...). Ce code attribue les valeurs 0 à 255 (donc codées sur 8 bits, soit 1 octet) aux lettres majuscules et minuscules, aux chiffres, aux marques de ponctuation et aux autres symboles (caractères accentués dans le cas du code iso-latin1).

• Les codes 0 à 31 ne sont pas des caractères. On les appelle caractères de contrôle car ils permettent de faire des actions telles que: – retour à la ligne (CR)

• Les codes 65 à 90 représentent les majuscules (A est codé comme 65, B comme 66)• Les codes 97 à 122 représentent les minuscules

(il suffit de modifier le 5ème bit pour passer de majuscules à minuscules, c'est-à-dire ajouter 32 au code ASCII en base décimale)

• Le caractère é est codé 233• Voir http://www.mathrice.org/rencontres/mars.2006/codages.pdf

Page 3: Codage des documents hypermédias

Coder du texte • Il y a bien plus de 256 caractères dans le monde - pensez au cyrillique, à l'hébreu, à

l'arabe, au chinois, au japonais au coréen et au thaï -, et de temps à autres, de nouveaux caractères sont inventés.

• D’où l’émergence du standard UNICODE• L’unité de base d’encodage reste l’octet (8bits) mais on peut s’en servir de différentes

manières : – UTF-8

• 128 caractères sont encodés en utilisant 1 octet : les caractères ASCII.1920 caractères sont encodé en utilisant deux octets : le latin, le grec, le cyrillique, le copte, l'arménien, l'hébreu, les caractères arabes.63488 caractères sont encodés en utilisant 3 octets, le chinois et le japonais entre autres. Les 2147418112 caractères restant (non encore assignés) peuvent être encodés en utilisant 4, 5 ou 6 caractères.

– UCS-2 • Chaque caractère est représenté par deux octets. Cet encodage peut

représenter seulement les 65536 premiers caractères d'Unicode

Page 4: Codage des documents hypermédias

HTMLHyper-Text Markup Language

• Langage de description des pages Web dérivé de SGML (Standard Generalized Markup Langage)

• Les pages contiennent du texte mais aussi des éléments multimédia, des programmes etc.

• Les pages incorporent un mécanisme d’hypertexte

Page 5: Codage des documents hypermédias

HTML - exemples (1)

<TITLE>Mon premier document achetéhèmelle </TITLE>

<HTML>

</HTML>

<img src="paul.jpg" width="200" height="150" alt="Mon ami Paul">

Ceci est un lien vers la <a href= "paul.html">page de Paul</a>.

<BODY>

</BODY>

<HEAD>

</HEAD>

Page 6: Codage des documents hypermédias

HTML - exemples (2)

<table border="1"> <tr><th>Year</th><th>Sales</th></tr> <tr><td>2000</td><td>$18M</td></tr> <tr><td>2001</td><td>$25M</td></tr> <tr><td>2002</td><td>$36M</td></tr>

</table>

<p>Ceci est un paragraphe.</p>

Page 7: Codage des documents hypermédias

HTML - exemples (3)

<FORM METHOD="POST"

ACTION="http://www.serveur.com/cgi-bin/prg">

<P>Nom: <INPUT NAME="Nom" TYPE="text">

<P>Surnom: <INPUT NAME="Surnom" TYPE="text">

<INPUT TYPE="submit" VALUE="Envoyer">

<INPUT TYPE="reset" VALUE="Annuler">

</FORM>

Page 8: Codage des documents hypermédias

Manque de généralité

Interactivité ?

Séparation du contenu et de la forme ?

Données différentes ?

Page 9: Codage des documents hypermédias

XML

• XML : entendez eXtensible Markup Language et traduisez Langage à balises étendu

• <balise> contenu textuel </balise>• XML permet de séparer le contenu de la présentation• 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 fevrier 1998, les spécifications XML 1.0 ont été reconnues comme recommandation par le W3C

• XML est un sous ensemble de SGML (Standard Generalized Markup Language), défini par le standard ISO8879 en 1986, utilisé dans le milieu de la Gestion Electronique Documentaire (GED).

Page 10: Codage des documents hypermédias

Document XML

<annuaire> <personne class = "etudiant"> <nom>Pillou</nom> <prenom>Jean-Francois</prenom> <telephone>555-123456</telephone> <email>[email protected]</email> </personne> <personne> ...

<-- Voici des commentaires XML --> </personne> </annuaire>

Attribut : plutôt dédié au fonctionnement d’une appli XML

Contenu TextuelEx: url

parseur

élément

Page 11: Codage des documents hypermédias

Mise en page XML

• 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

plusieurs 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. XSL=XSL-FO + XSLT

– XSLT (eXtensible StyleSheet Language Transformation), langage de transformation des données, permet de transformer la structure des documents XML

Page 12: Codage des documents hypermédias

Structure d’un document XML

En réalité un document XML est structuré en 3 parties: • La première partie, appelée prologue permet d'indiquer la version de la

norme XML utilisée pour créer le document (cette indication est obligatoire) ainsi que le jeu de caractères (en anglais encoding) utilisé dans le document (attribut facultatif, ici on spécifie qu'il s'agit du jeu ISO8859-1, jeu LATIN, pour permettre de prendre en compte les accents français). Ainsi le prologue est une ligne du type

• <?xml version="1.0" encoding="ISO8859-1"?> Le prologue se poursuit avec des informations facultatives sur des instructions de traitement à destination d'applications particulières. Leur syntaxe est la suivante:

• <?instruction de traitement?> • Le second élément est une déclaration de type de document (à l'aide d'un

fichier annexe appelé DTD - Document Type Definition) • Et enfin la dernière composante d'un fichier XML est l'arbre des éléments

(comme celui ci-dessus).

Page 13: Codage des documents hypermédias

XML file example

• annuaire.xml

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE annuaire SYSTEM “annuaire.dtd"><annuaire>

<personne class = "etudiant"><nom>Pillou</nom>…..

</personne>…..

</annuaire>

Page 14: Codage des documents hypermédias

DTD XML

XML permet d'utiliser un fichier afin de vérifier qu'un document XML est conforme à une syntaxe donnée. La norme XML définit ainsi une définition de document type appelée DTD (Document Type Definition), c'est-à-dire une grammaire permettant de vérifier la conformité du document XML. La norme XML n'impose pas l'utilisation d'une DTD pour un document XML, mais elle impose par contre le respect exact des règles de base de la norme XML.

Ainsi on parlera de • document valide pour un document XML comportant une DTD • document bien formé pour un document XML ne comportant

pas de DTD mais répondant aux règles de base du XML 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 • 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

Page 15: Codage des documents hypermédias

DTD XML : déclarer des éléments

• Pour définir un élément on utilisera la syntaxe suivante: • <! ELEMENT Nom Modèle > • Le paramètre modèle représente soit un type de donné prédéfini, soit une

règle d'utilisation de l'élément. • Les types prédéfinis utilisables sont les suivants: • Type prédéfini ANY : L'élément peut contenir tout type de données• Type prédéfini EMPTY : L'élément ne contient pas de données

spécifiques• Type prédéfini #PCDATA : L'élément doit contenir un chaîne de caractère• Ainsi un élément nommé Nom contenant un type #PCDATA sera déclaré de

la façon suivante dans la DTD: • <! ELEMENT Nom #PCDATA >• Cet élément pourra être écrit de la façon suivante dans le document XML:

<Nom>Pillou</Nom>

Page 16: Codage des documents hypermédias

DTD XML : déclarer des éléments• D'autre part il est possible de définir des règles d'utilisation, c'est-à-dire les éléments

XML qu'un élément peut ou doit contenir. Cette syntaxe se fait à l'aide d’expressions régulières dont voici un récapitulatif:

• L'élément doit être présent au minimum une fois A+• L'élément peut être présent plusieurs fois (ou aucune) A*• L'élément peut être optionnellement présent A?• L'élément A ou B peuvent être présents (pas les deux)A|B• L’élément A doit être présent et suivi de l'élément B A,B• Les parenthèses permettent de regrouper des éléments afin de leur appliquer les

autres opérateurs (A,B)+• Ainsi on peut créer la déclaration suivante dans la DTD: <! ELEMENT personne (nom,prenom,telephone),email? > <! ELEMENT nom #PCDATA > <! ELEMENT prenom #PCDATA > <! ELEMENT telephone #PCDATA > <! ELEMENT email #PCDATA >

Page 17: Codage des documents hypermédias

DTD XML : déclarer des attributs

• Il est possible d'ajouter des propriétés à un élément particulier en lui affectant un attribut, c'est-à-dire une paire clé/valeur. Ainsi avec XML la syntaxe pour définir un attribut est la suivante:

• <! ATTLIST Elément Attribut Type >• Type représente le type de donnée de l'attribut, il en existe trois:

– littéral: il permet d'affecter une chaîne de caractères à un attribut. Pour déclarer un tel type il faut utiliser le mot clé CDATA

– L’énumération: cela permet de définir un liste de valeurs possibles pour un attribut donné, afin de limiter le choix de l'utilisateur. La syntaxe de ce type d'attribut est: <! ATTLIST Elément Attribut (Valeur1 | Valeur2 | ... ) >Pour définir une valeur par défaut il suffit de faire suivre l'énumération par la valeur désirée entre guillemets: <! ATTLIST Elément Attribut (Valeur1 | Valeur2 ) "valuer par défaut" >

– atomique: il permet de définir un identifiant unique pour chaque élément

Page 18: Codage des documents hypermédias

DTD XML : déclarer des attributs

• Enfin chacun de ces types d'attributs peut-être suivi d'un mot clé particulier permettant de spécifier le niveau de nécessité de l'attribut:

• #IMPLIED signifie que l'attribut est optionnel, c'est-à-dire non obligatoire

• #REQUIRED signifie que l'attribut est obligatoire

• #FIXED signifie que l'attribut sera affecté d'une valeur par défaut s'il n'est pas défini. Il doit etre immédiatement suivi de la valeur entre guillemets

• Ainsi on pourra avoir une déclaration d'attribut du type:

• <! ATTLIST disque IDdisk ID #REQUIRED type(K7|MiniDisc|Vinyl)"CD" >

• Ce qui signifie que l'on affecte à l'élément disque deux attributs IDdisk et type. Le premier attribut est de type atomique, il s'agit d'un identifiant unique obligatoire. L'élément type peut être soit K7,MiniDisc,Vinyl ou CD, sachant que ce dernier sera affecté par défaut...

Page 19: Codage des documents hypermédias

XML

  Les avantages 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)

• Exensibilité : un document XML doit pouvoir être utilisable dans tous les domaines d'applications

Page 20: Codage des documents hypermédias

XML

  • Ainsi, XML est particulièrement adapté à l'échange de données et de

documents. • L'intérêt de disposer d'un format commun d'échange d'information dépend du

contexte professionel dans lequel les utilisateurs interviennent. C'est pourquoi, de nombreux formats de données issus de XML apparaissent (il en existe plus d'une centaine) : • OFX : Open Financial eXchange pour les échanges d'informations

dans le monde financier • MathML : Mathematical Markup Language permet représenter des

formules mathématique • CML : Chemical Markup Language permet de décrire des

composés chimiques • SMIL : Synchronized Multimedia Integration Language permet de

créer des présentations multimédia en synchronisant diverses sources : audio, vidéo, texte,...

Page 21: Codage des documents hypermédias

MathML Example<math> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mrow> <mo>-</mo> <mi>b</mi> </mrow> <mo>&PlusMinus;</mo> <msqrt> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>-</mo> <mrow> <mn>4</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> <mo>&InvisibleTimes;</mo> <mi>c</mi> </mrow> </mrow> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>

Page 22: Codage des documents hypermédias

Association des feuilles de style aux documents

• Document XML– <?xml-stylesheet href = «  mystyle.css » type =

« text/css » ?>

HTML CSS

XML XSL

Page 23: Codage des documents hypermédias

XSL – eXtensible Style Language

• XSL est une recommandation W3C pour spécifier la présentation de documents XML– En fait, un peu plus!

XSLT XSL-FO

XSL

xPath

Page 24: Codage des documents hypermédias

Processeur XSLT

• XSLT permet de transformer des documents sources (en XML) en d'autres, dans des formats divers

source XML

règles XSLT

processeurXSLT

Résultat(XML, HTML, …)

Page 25: Codage des documents hypermédias

Feuille de style XSLT• XSLT est une application XML

• Son espace de nom (namespace) est défini par une URL du consortium W3C

• La structure globale d'un fichier XSLT a la forme

<?xml version="1.0" encoding="UTF-8"?><xsl:styleheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> ... <xsl:template match="..."> ... <xsl:template/> ...</xsl:stylesheet/>

Page 26: Codage des documents hypermédias

Exemple introductif: instance du catalogue

Page 27: Codage des documents hypermédias

Processeur XSLT: modèle d’exécution

• Traitement de listes de nœuds– Arbre (potentiellement récursivement)

• Par défaut, chaque fils est traité selon son ordre d’apparition dans l’arborescence

– Feuille

• Traitement = « génération des données du fichier cible » via l’application de règles– Les règles sont spécifiées via les éléments

« template »– To « keep in mind »

• Règles par défaut• Priorités d’application des règles

Page 28: Codage des documents hypermédias

Règles <xsl:template>

• L'élément <xsl:template ...> définit une règle de transformation

• L'attribut match="…" spécifie les nœuds auxquels s'applique la règle– Par exemple, la valeur "/" désigne la racine du document

• Le contenu de xsl:template détermine le contenu généré– du texte (éventuellement structuré XML)– des « instructions »

Page 29: Codage des documents hypermédias

Exemple: … une feuille de style

<xsl:template match="/"> <HTML> <BODY bgcolor="#FFFFCC"> <H1>Liste des produits</H1> <UL> <xsl:apply-templates/> </UL> </BODY> </HTML></xsl:template>

<xsl:template match ="Product"> <LI> <xsl:apply-templates/> </LI></xsl:template>

Page 30: Codage des documents hypermédias

Exemple: … une deuxième feuille de style<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> <HTML> <BODY bgcolor="#FFFFCC"> <H1>Liste des produits</H1> <xsl:apply-templates/> </BODY> </HTML></xsl:template>

</xsl:stylesheet>

Résultat!

Page 31: Codage des documents hypermédias

Application récursive des règles

• Dans le corps d'une règle, l'instruction <xsl:apply-templates ...> provoque l'application récursive des règles– Celles-ci sont appliquées sur les éléments

• Comportement par défaut– Copie du contenu

Page 32: Codage des documents hypermédias

XSL-FO

• Mostly used for generating PDFs

• XSL-FO– Unified presentation language (<>HTML+CSS)– Stores all document’s data within itself (XSLT,

CSS transform an external document)

XML doc

XHTML,DocBook

XSL-FOXSLT

Target docFO processor

PDF, PS, RTF etc.

Page 33: Codage des documents hypermédias

XSL-FO

• does not definitively describe the layout of the text on various pages. Instead, it describes what the pages look like and where the various contents go

• From there, an FO processor determines how to position the text within the boundaries described by the FO document.

• For example, some FO processors can hyphenate words to minimize space when breaking a line, while others choose not to.

Page 34: Codage des documents hypermédias

XSL-FO example

<fo:block space-before.optimum="20pt" font-size="20pt">From:<fo:inline font-style="italic">(Customer Reference) <fo:inline font-weight="bold">cust123</fo:inline> </fo:inline> 05  </fo:block>

Page 35: Codage des documents hypermédias

XSL-FO : the big picture

Page 36: Codage des documents hypermédias

Coder des objets graphiques 2D

Description textuelle !! Coordonnées, rayon, fontes etc.

Description raster (comme une image)

Page 37: Codage des documents hypermédias

Coder des objets graphiques 2D

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="12cm" height="4cm"> <desc>Example rect01 - rectangle expressed in physical units</desc> <rect x="4cm" y="1cm" width="4cm" height="2cm" style="fill:yellow; stroke:navy; stroke-width:0.1cm" /> </svg>

Example rect01

Scalable Vector Graphics (SVG), a language for describing two-dimensional vector and mixed vector/raster graphics in XML.

Page 38: Codage des documents hypermédias

Coder des objets graphiques 3D

Page 39: Codage des documents hypermédias

VRML né en 1994 (première conférence sur le WWW)

Le but est de développer les spécifications de VRML, qui sera un langage indépendant des plates-formes en liaison avec le World Wide Web, destiné à décrire les scènes 3D, et utilisable dans les browsers (visualiseurs), les logiciels de création et autres outils, autorisant ainsi la réalité virtuelle sur le Web.

Enfin en 1995, la norme VRML 1.0 voit le jour, ainsi les développeurs ont put commencer à créer des mondes 3D statiques.

Trés vite le besoin de dynamisme s'est fait sentir, certains plugin ont géré des noeuds d'animation. Mais deux ans aprés en 1997, la deuxieme version majeure (la compatibilité déscendante n'est plus assurée) de VRML apparait sous le nom de VRML97 ou VRML2. Parmis les nombreuses amélioration on citera :

•Structure hiéarchique plus pratique pour l'application des propriétées •Gestion des évenements et sensors •une varité d'effets atmospherique (brouillard, fumée) •Surfaces irrégulières •son spacial (stéréo...)

Page 40: Codage des documents hypermédias

Esprit de VRML•VRML est avant tout un langage de description et non un programme, (VRML est à la scène 3D ce que HTML est au document texte)

•Le fichier VRML doit être parsé pour afficher une scène 3D (une vue 2D de la scène) il faut donc un Navigateur VRML.

•Dans un soucis d'uniformisation les navigateurs VRML sont intégrés dans les navigateurs Web sous forme de Plug'ins : Programmes externes ayant l'interface dans un programme hôte.

•La description géométrique de la scène est stockée sous forme de structure arborescente •Propagation des propriétés (i.e. : Une translation d'un groupe Table entraîne la propagation des 4 pieds) •VRML97 a quelques primitives intéressantes permettant de gérer les animations et gestion d'événements utilisateur / comportement des objets a l'aide de scripts. •Mais ce format et les plug'ins ont des limitations : par exemple , on ne peut avoir une

session de communication entre un client et un serveur.

Page 41: Codage des documents hypermédias

VRML exemple perspective : X3D (VRML & XML

unifiés) http://www.web3d.org/TaskGroups/x3d/index.html

Exemple de source VRML #VRML V2.0 utf8 DEF Camera Viewpoint { orientation 0 1 0 1 position 5 0 2} DEF _TR Transform {

translation 0 10 0 rotation 1 0 1 .6 children Shape {

geometry Box { } appearance Appearance { texture ImageTexture {

url "http://www.jwz.org/webcollage/collage.jpg" } } } }

Page 42: Codage des documents hypermédias

Perspectives : EAI

Ce contrôle permet entre autre :

•D'accéder aux fonctionalités du browser VRML (ex : créer un nouvel objet)

•D'envoyer des évènements et donc modifier les nœuds (position ; aspect d'un objet)

•D'avoir un retour sur les caractéristiques d'un objet, d'un évènement

•Dans un premier temps, il faut accéder à l'objet Browser. Ensuite on crée un évement. Et par cet évenement on modifie les primitives et propriétés.

L'interface permet le controle du plugin VRML, à l'aide d'un langage externe à

VRML, soit en java (applet) ou un simple script (javascript).

External Authoring Interface

Page 43: Codage des documents hypermédias

Coder des sons (signaux 1D)

• Qu’est ce que le son ? Le son est une vibration de l'air, c'est-à-dire une suite de surpression et de

dépressions de l'air par rapport à une moyenne, qui est la pressionatmosphérique.

• La façon la plus simple de reproduire un son actuellement est de faire vibrer un objet. De cette façon un violon émet un son lorsque l'archet fait vibrer ses corde

• Pour reproduire des sons, on utilise actuellement des haut-parleurs. Il s'agit en fait d'une membrane reliée à un électro-aimant, qui, suivant les sollicitations d'un courant électrique va aller en avant et en arrière très rapidement, ce qui provoque une vibration de l'air situé devant lui, c'est-à-dire du son!

Page 44: Codage des documents hypermédias

Coder des sons (signaux 1D)

HP :Une membrane reliée à un électro-aimant, qui, suivant les sollicitations d'un courant électrique va aller en avant et en arrière très rapidement, ce qui provoque une vibration de l'air situé devant lui, c'est-à-dire du son!

Même principe pour le micro

Page 45: Codage des documents hypermédias

Coder des sons (signaux 1D)

de cette façon on produit des ondes sonores qui peuvent être représentées sur un graphique comme les variations de la pression de l'air (ou bien de l'électricité dans l'électro-aimant) en fonction du temps. On obtient alors une représentation de la forme suivante:

                                         

temps

Page 46: Codage des documents hypermédias

Coder des sons (signaux 1D)Cette représentation d'un son est appelée audiogramme. On peut remarquer qu'un audiogramme présente une fréquence fondamentale, à laquelle se superposent des fréquences plus élevées, appelées harmoniques.

C'est ce qui permet d'arriver à distinguer plusieurs sources sonores: les fréquences graves auront des fréquences basses, et les sons aigus des fréquences élevées

Page 47: Codage des documents hypermédias

Taux d'échantillonage Qualité du son

44000 Hz qualité CD

22000 Hz qualité radio

8000 Hz qualité téléphone

signal analogiquesignal analogique

quantificationquantification signal numérisésignal numérisé

échantillonnageéchantillonnage

Numérisation du son

Page 48: Codage des documents hypermédias

Coder des sons en vectoriel

• MIDI

Page 49: Codage des documents hypermédias

Plan photosensibleCCD

Système optique

10 mm

Formation des images (signaux 2D)

Page 50: Codage des documents hypermédias

012

9

9

14

13

0 13

10

0

0

13

14

5

11

13

CAPTEUR CCD

IMAGE NUMERIQUE IMAGE SUR ECRAN

numérisation affichage

affichage

colonne

ligne

O

pixels

pixels

pixels

niveau de gris

1 2 3 4

1

2

3

4

Le niveau de gris est unemesure quantifiée de

l ’éclairement du pixel

gray (15)

gray (15)

IMAGE NUMERIQUE MONOCHROME

Page 51: Codage des documents hypermédias

Coder des images en couleur

• Red/Green/Blue : RGB• Luminance :

– réponse de l'oeil à l'ensemble des longueurs d'ondes d'une source lumineuse

– transporte la "luminosité" (N/B) et la "brillance"• Chrominance : couleur• Transformation en 3 autres signaux• Œil moins sensible à la couleur qu'à la luminance

Page 52: Codage des documents hypermédias

3 CAPTEURs CCD

IMAGE NUMERIQUE COULEUR

lumière

Séparateur optiqueQui crée trois rayons dupliqués

filtres

pixel

Page 53: Codage des documents hypermédias

Coder des images en couleur

• Luminance : Y = .30R + .59G + .14B

• NTSC : nuance (hue), saturation, Y/I/Q– I = 0.74 (R-Y) - 0.27 (B-Y)

– Q = 0.48 (R-Y) + 0.41 (B-Y)

• PAL : 2 signaux de chrominance, Y/U/V– U = 0.493 (B-Y)

– V = 0.877 (R-Y)

Page 54: Codage des documents hypermédias

Compression : pourquoi est-ce nécessaire ?

• Intérêts pratiques dans le domaine multimédia– une conversation téléphonique de 5min : 5

millions de bits– une seconde de vidéo numérique non

compressée : 216 millions de bits– une journée dans un CHU des Giga bits– mais aussi … imagerie satellitaire

Page 55: Codage des documents hypermédias

Compression : pourquoi est-ce possible ?

– La réponse est mise en évidence par le jeu de Shannon : la redondance !!!

– Différentes redondances :

• cas des images : spatiale/ fréquentielle/fractale

• cas des images animées : temporelle

– Intérêt de la redondance : elle permet de transmettre/reconnaître un message malgré le bruit!

– Conséquence pratique de la redondance : surabondance de voyelles en français (distribution non uniforme des probas associées aux différentes lettres)

Page 56: Codage des documents hypermédias

Compression : la redondance ?

SpatialeFréquentielleTemporelleFractale

Page 57: Codage des documents hypermédias

Compression des donnéesalgorithmes universels

– Codage par plage (RLC, Run Length Coding) : 10 fois A …

– Codage Topologique : utiliser un octet de localisation d’un symbole dominant

– Codage Relatif : factoriser un préfixe binaire

Page 58: Codage des documents hypermédias

Compression des donnéescodages statistiques

– Huffman, 1952 : « A method for the construction of minimum redundancy codes »

– principe des codes à longueurs variables :• analyser statistiquement les symboles composant un fichier• attribuer aux différents symboles des codes de tailles différentes : plus un symbole est présent au

sein du fichier plus son code selon Huffman est court, inversement, les symboles rares ont des codes longs

– un concurrent : Algorithme de Shannon-Fano

– il faut une entête ...

Page 59: Codage des documents hypermédias

Huffman

• 0.3

• 0.18

• 0.15

• 0.10

• 0.10

• 0.05

• 0.05

• 0.07

A

E

D

U

B

K

W

R

1

1

0

1

0

1

1

0

0

0

1

0

11

0

0.1

0.17

0.2

0.38

0.32

0.62

A 10

E 00

D 110

U 011

B 010

K 11111

W 11110

R 1110

Page 60: Codage des documents hypermédias

Compression des donnéesalgorithmes de type dictionnaire

– jusqu ’en 1978, qui disait compression disait Huffman

– idée de départ : • en français, environ 9000 mots de 6 lettres dans le dictionnaire mais

266=208 915 776 séquences de 6 lettres

• coder de grande quantité de données à l ’aide d ’un base multi-indexée

DU

PAIN

AUJOURD ’HUI

EL

MENT

Paires de symbolessyllabesmotgroupe mot

@1

@k

« Du Pain » @1@k

Le problème majeur est le stockage oula construction du dictionnaire

Page 61: Codage des documents hypermédias

Compression des hauts débitsalgorithmes / normes

DonnéesSource

Décorrélateur Quantificateur codage train binaire

Éliminer la redondancela plus évidente

Seule opération non réversible permetd ’augmenter le taux de compressionÉliminer les détails !

Huffman par exemple

Page 62: Codage des documents hypermédias

Formats d’image pour le Web

GIF (Graphics Interchange Format)

JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

SVG (Scalable Vector Graphics )

Page 63: Codage des documents hypermédias

Documents Hypermédias

Page 64: Codage des documents hypermédias

Describing multimedia presentations

• MHEG

• SMIL (W3C)

• SAMI, XHTML + SMIL (Microsoft)

Page 65: Codage des documents hypermédias

Pages HTML<html><head><body bgcolor="#000000" link="#000000« 

vlink="#000000" topmargin="20" leftmargin="20" text="#000000" alink="#000000">

<img src= "douze.gif" border=0><bgsound src="coperta.mid" loop="-1"></body></html>

Page 66: Codage des documents hypermédias

Au-delà de HTML : DHTML(Dynamic HTML)

Objectif : rendre + interactives les pages HTML Principe : le contenu doit être modifié grâce à des événements (mouvements de la souris, survol d’un objet etc.)

Les modifications sont basées sur des couches d’éléments superposés qui seront affichés successivement : nouvelles balises LAYER + attributs de positionnement, DIV, SPAN +attributs de positionnement, de visibilité, de gestion de la profondeur de superposition

Technologies mise en œuvre :• HTML + feuilles de style CSS• modèle objet de document DOM (w3c) proposant

une hiérarchie d’objets afin de faciliter leur manipulation

• des langages de script pour la récupération des événements JavaScript Vbscript

Page 67: Codage des documents hypermédias

Au-delà de HTML : DHTML

< LAYER NAME =« img1 » LEFT=« 20 » TOP=« 30 »>< IMG SRC=« image.gif »></LAYER>< LAYER NAME =« img2 » LEFT=« 25 » TOP=« 35 »>< IMG SRC=« image2.gif »></LAYER>

<DIV style=« position : absolute; top : 99 px; left : 97 px;visibility : visible; z-index : 2; »>…. Éléments HTML</DIV>

Page 68: Codage des documents hypermédias

Au-delà de HTML : DHTML

L’animation se fait (à travers l’exécution de scripts) en modifiant les propriétés (position, z-index etc.) suite à

des événements…

• le DOM (Doc Object Model) définit la hiérarchie des objets présents dans un document et permet ainsi d’accéder aux propriétés de l’un d’entres aux …• selon le navigateur, l’accès et les propriétés ne sont pas identiques…

• exemple d’accès à un attribut d’un élément : document.layers.nom.zIndex…

Page 69: Codage des documents hypermédias

Au-delà de HTML : SMIL(Synchronized Multimédia Integration Language)

Exemple:•Diaporama synchronisée avec l’audio et le texte•Effets spéciaux (transitions)•Bas débit (modem)

Page 70: Codage des documents hypermédias

Structure of a SMIL document

toto.smi

head body

seq switchparLayout

Region 1

Media

Audio channel

Media

Transition

Animation

Transition

Page 71: Codage des documents hypermédias

<smil xmlns="http://www/w3.org/2000/SMIL20/Language"> <head> <layout type="text/smil-basic"> <region id="left-video" left="20" top="50" z-index="1"/> <region id="left-text" left="20" top="120" z-index="1"/> <region id="right-text" left="150" top="120" z-index="1"/>

<region id="right-video" left="150" top=« 50" z-index="1"/> </layout> </head> <body> <par>

<seq> <img src="graph" region="left-video" dur="45s"/> <text src="graph-text" region="left-text"/> </seq> <par> <a href="http://www.w3.org/People/Berners-Lee"> <video src="tim-video" region="right-video"/> </a> <text src="tim-text" region="right-text"/> </par>

</par> </body> </smil>

header

Body=

scénario

Page 72: Codage des documents hypermédias

Layout

Region 1 Region 2

Region 3

b

c

a

time

Régions hiérarchiques et sous-régions pour le placement spatial

Page 73: Codage des documents hypermédias

SMIL : synchronisation

CLIP 1

CLIP 3

CLIP 2

CLIP 4

<seq>CLIP 1<par>

CLIP 2CLIP 3

</par>CLIP 4

</seq>

Synchronisation inter-média :les balises <par> et <seq>

<par begin="0s" dur="33s">

<video begin="1s" dur="10s" repeatCount="2.5" fill="freeze" .../>

</par>


Recommended