Codage des documents hyperm dias
This presentation is the property of its rightful owner.
Sponsored Links
1 / 73

Codage des documents hypermédias PowerPoint PPT Presentation


  • 56 Views
  • Uploaded on
  • Presentation posted in: General

Codage des documents hypermédias. Romulus GRIGORAS ENSEEIHT. 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:

Download Presentation

Codage des documents hypermédias

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Codage des documents hyperm dias

Codage des documentshypermédias

Romulus GRIGORAS

ENSEEIHT


Coder du texte

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


Coder du texte1

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


Codage des documents hyperm dias

HTML

Hyper-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


Html exemples 1

HTML - exemples (1)

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<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>

</HTML>


Html exemples 2

HTML - exemples (2)

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

<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>


Html exemples 3

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>


Manque de g n ralit

Manque de généralité

Interactivité ?

Séparation du contenu et de la forme ?

Données différentes ?


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).


Document xml

Document XML

Attribut : plutôt dédié au

fonctionnement d’une appli 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>

élément

Contenu Textuel

Ex: url

Arbre d’éléments

parseur


Mise en page xml

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


Structure d un document xml

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).


Xml file example

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>


Dtd xml

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


Dtd xml d clarer des l ments

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>


Dtd xml d clarer des l ments1

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 >


Dtd xml d clarer des attributs

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


Dtd xml d clarer des attributs1

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...


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


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,...


Mathml example

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>


Association des feuilles de style aux documents

Association des feuilles de style aux documents

  • Document XML

    • <?xml-stylesheet href = «  mystyle.css » type = « text/css » ?>

HTML

CSS

XML

XSL


Xsl extensible style language

XSL – eXtensible Style Language

  • XSL est une recommandation W3C pour spécifier la présentation de documents XML

    • En fait, un peu plus!

XSL

XSL-FO

XSLT

xPath


Processeur xslt

Processeur XSLT

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

processeur

XSLT

source XML

Résultat(XML, HTML, …)

règles XSLT


Feuille de style xslt

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/>


Exemple introductif instance du catalogue

Exemple introductif: instance du catalogue


Processeur xslt mod le d ex cution

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


R gles xsl template

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 »


Exemple une feuille de style

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>


Exemple une deuxi me feuille de style

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!


Application r cursive des r gles

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


Xsl fo

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)

XSLT

FO processor

XML doc

XSL-FO

Target doc

XHTML,DocBook

PDF, PS, RTF etc.


Xsl fo1

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.


Xsl fo example

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>


Xsl fo the big picture

XSL-FO : the big picture


Coder des objets graphiques 2d

Coder des objets graphiques 2D

texte

Description textuelle !! 

Coordonnées, rayon, fontes etc.

Description raster (comme une image) 


Coder des objets graphiques 2d1

Coder des objets graphiques 2D

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

<?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


Coder des objets graphiques 3d

Coder des objets graphiques 3D


Vrml n en 1994 premi re conf rence sur le www

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...)


Esprit de vrml

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.


Vrml exemple perspective x3d vrml xml unifi s http www web3d org taskgroups x3d index html

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"

} } } }


Perspectives eai

Perspectives : EAI

External Authoring Interface

L'interface permet le controle du plugin VRML, à l'aide d'un langage externe à VRML, soit en java (applet) ou un simple script (javascript).

  • 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.


Coder des sons signaux 1d

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 pression

    atmosphé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!


Coder des sons signaux 1d1

Coder des sons (signaux 1D)

Même principe

pour le micro

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!


Coder des sons signaux 1d2

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:

Coder des sons (signaux 1D)

temps


Coder des sons signaux 1d3

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


Num risation du son

Taux d'échantillonage

Qualité du son

44000 Hz

qualité CD

22000 Hz

qualité radio

8000 Hz

qualité téléphone

Numérisation du son

échantillonnage

signal analogique

quantification

signal numérisé


Coder des sons en vectoriel

Coder des sons en vectoriel

  • MIDI


Formation des images signaux 2d

Formation des images (signaux 2D)

Système optique

10 mm

Plan photosensible

CCD


Image numerique monochrome

IMAGE NUMERIQUE MONOCHROME

pixels

Le niveau de gris est une

mesure quantifiée de

l ’éclairement du pixel

CAPTEUR CCD

numérisation

affichage

pixels

gray (15)

colonne

1

2

3

4

O

12

9

13

niveau de gris

1

0

affichage

9

14

0

13

2

gray (15)

10

0

14

11

3

0

13

5

13

pixels

4

IMAGE SUR ECRAN

IMAGE NUMERIQUE

ligne


Coder des images en couleur

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


Image numerique couleur

IMAGE NUMERIQUE COULEUR

pixel

filtres

3 CAPTEURs CCD

Séparateur optique

Qui crée trois rayons dupliqués

lumière


Coder des images en couleur1

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)

Formats 4:2:2


Compression pourquoi est ce n cessaire

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


Compression pourquoi est ce possible

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)


Compression la redondance

Compression : la redondance ?

Spatiale

Fréquentielle

Temporelle

Fractale


Compression des donn es algorithmes universels

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

entêtes ? marqueurs ?


Compression des donn es codages statistiques

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 ...


Huffman

Huffman

0

A

E

D

U

B

K

W

R

  • 0.3

  • 0.18

  • 0.15

  • 0.10

  • 0.10

  • 0.05

  • 0.05

  • 0.07

A 10

E 00

D 110

U 011

B 010

K 11111

W 11110

R 1110

0

1

0.62

1

0

0

1

0.38

1

1

0

0.2

0.32

1

1

0

0.1

1

0

0.17


Compression des donn es algorithmes de type dictionnaire

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

@1

DU

« Du Pain » @[email protected]

Paires de symboles

syllabes

mot

groupe mot

EL

MENT

@k

Le problème majeur est le stockage ou

la construction du dictionnaire

PAIN

AUJOURD ’HUI


Compression des hauts d bits algorithmes normes

Compression des hauts débitsalgorithmes / normes

codage

Données

Source

Décorrélateur

Quantificateur

train binaire

Éliminer la redondance

la plus évidente

Huffman par exemple

Seule opération non réversible permet

d ’augmenter le taux de compression

Éliminer les détails !


Formats d image pour le web

Formats d’image pour le Web

GIF (Graphics Interchange Format)

JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

SVG (Scalable Vector Graphics )


Documents hyperm dias

Documents Hypermédias


Describing multimedia presentations

Describing multimedia presentations

  • MHEG

  • SMIL (W3C)

  • SAMI, XHTML + SMIL (Microsoft)


Pages html

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>

Interactivité ?


Au del de html dhtml

(Dynamic HTML)

Au-delà de HTML : DHTML

  • 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


  • Au del de html dhtml1

    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>


    Au del de html dhtml2

    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…


    Au del de html smil

    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)


    Structure of a smil document

    Structure of a SMIL document

    toto.smi

    body

    head

    Layout

    par

    seq

    switch

    Audio channel

    Region 1

    Animation

    Media

    Media

    Transition

    Transition


    Codage des documents hyperm dias

    header

    <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>

    Body

    =

    scénario


    Layout

    Layout

    Region 1

    Region 2

    a

    b

    c

    Region 3

    time

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


    Smil synchronisation

    CLIP2

    CLIP 1

    CLIP4

    CLIP3

    SMIL : synchronisation

    Synchronisation inter-média :

    les balises <par> et <seq>

    <seq>

    CLIP 1

    <par>

    CLIP 2

    CLIP 3

    </par>

    CLIP 4

    </seq>

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

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

    • </par>


  • Login