Codage des documents hypermédias

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

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 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 caractères sont encodés en utilisant 3 octets, le chinois et le japonais entre autres. Les 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 premiers caractères d'Unicode

Hyper-Text Markup Language
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> <HEAD>
<TITLE>Mon premier document achetéhèmelle </TITLE> </HEAD> <BODY> <img src="paul.jpg" width="200" height="150" alt="Mon ami Paul"> <balise> texte </balise> <balise attribut=valeur> texte </balise> Ceci est un lien vers la <a href= "paul.html">page de Paul</a>. </BODY> </HTML>

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> listes images cliquables utilisation des cadres (frames) Pour voir un exemple HTML plus complet, voir

HTML - exemples (3) <FORM METHOD="POST"
ACTION=" <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> Les formulaires HTML: utilisés pour saisir des données afin de les transmettre à une application. les données saisies sont mises au format par le navigateur, qui construit une chaine de caractères envoyée au serveur Si méthode GET: action?name=value&name=value&name=value Si méthode POST : The contents of the form are encoded exactly as with the GET method (above), but rather than appending them to the URL specified by the form's ACTION attribute as a query, the contents are sent in a data block as part of the POST operation. The ACTION attribute (if any) is the URL to which the data block is POSTed.

Séparation du contenu et de la forme ?
Manque de généralité Interactivité ? Séparation du contenu et de la forme ? Données différentes ?

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

Attribut : plutôt dédié au fonctionnement d’une appli 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> </telephone> </personne> <personne> ... <-- Voici des commentaires XML --> </personne> </annuaire> élément Contenu Textuel Ex: url Arbre d’éléments parseur

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 contrairement aux CSS, XSL permet aussi de retraiter un document XML afin d'en modifier totalement sa structure, ce qui permet à partir d'un document XML d'être capable de générer d'autres types de documents (PostScript, HTML, Tex, RTF, ...) ou bien un fichier XML de structure différente.

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 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 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
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é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), ? > <! ELEMENT nom #PCDATA > <! ELEMENT prenom #PCDATA > <! ELEMENT telephone #PCDATA > <! ELEMENT #PCDATA >

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 [Definition: CDATA sections may occur anywhere character data may occur; they are used to escape blocks of text containing characters which would otherwise be recognized as markup. CDATA sections begin with the string " <![CDATA[ " and end with the string " ]]> ":] An example of a CDATA section, in which " <greeting> " and " </greeting> " are recognized as character data, not markup: <![CDATA[<greeting>Hello, world!</greeting>]]>

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

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

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 <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>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi> </mrow> </mrow> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>⁢</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>

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 est une recommandation W3C pour spécifier la présentation de documents XML En fait, un peu plus! XSL XSLT XSL-FO xPath

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 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=" ... <xsl:template match="..."> <xsl:template/> </xsl:stylesheet/>

Exemple introductif: instance du catalogue

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

Exemple: … une deuxième feuille de style
<xsl:stylesheet version="1.0" xmlns:xsl=" <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
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 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) The general idea behind XSL-FO's use is that the user writes a document, not in FO, but in an XML language. XHTML, DocBook, and TEI are all possibilities, but it could be any XML language. Then, the user obtains an XSLT transform, either by writing one themselves or by finding one for the document type in question. This XSLT transform converts the XML into XSL-FO. Once the XSL-FO document is generated, it is then passed to an application called an FO processor. FO processors convert the XSL-FO document into something that is readable, printable or both. The most common output of XSL-FO is a PDF file or as PS, but some FO processors can output to other formats like RTF files or even just a window in the user's GUI displaying the sequence of pages and their contents. The XSLT language itself was originally conceived only for this purpose; it is now in widespread use for more general XML transformations. This transformation step is taken so much for granted in XSL-FO that it is not uncommon for people to call the XSLT that turns XML into XSL-FO the actual XSL-FO document itself. Even tutorials on XSL-FO tend to be written with XSLT commands around the FO processing instructions. The XSLT transformation step is exceptionally powerful. It allows for the automatic generation of a table of contents, linked references, an index, and various other possibilities. An XSL-FO document is not like a PDF or a PostScript document. It 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. The XSL-FO specification even allows different FO processors to have varying responses with regard to the resultant generated pages. For example, some FO processors can hyphenate words to minimize space when breaking a line, while others choose not to. Different processors may even use different hyphenation algorithms, ranging from very simple to more complex hyphenated algorithms that take into account whether the previous or next line also is hyphenated. These will change, in some borderline cases quite substantially, the layout of the various pages. There are other cases where the XSL-FO specification explicitly allows FO processors some degree of choice with regard to layout. XSLT FO processor XML doc XSL-FO Target doc XHTML,DocBook PDF, PS, RTF etc.

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

Coder des objets graphiques 2D
texte Description textuelle !!  Coordonnées, rayon, fontes etc. Description raster (comme une image) 

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

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 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
Exemple de source VRML #VRML V2.0 utf8 DEF Camera Viewpoint { orientation position 5 0 2 } DEF _TR Transform { translation rotation children Shape { geometry Box { } appearance Appearance { texture ImageTexture { url " } } } }

External Authoring Interface
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)
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!

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!

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

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 échantillonnage signal analogique quantification signal numérisé

Coder des sons en vectoriel
MIDI

Formation des images (signaux 2D)
Système optique 10 mm Plan photosensible CCD

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 O 1 2 3 4 1 12 9 13 niveau de gris 2 9 14 13 affichage 10 14 11 gray (15) 3 13 5 13 pixels 4 IMAGE NUMERIQUE IMAGE SUR ECRAN ligne

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
pixel filtres 3 CAPTEURs CCD Séparateur optique Qui crée trois rayons dupliqués lumière

Coder des images en couleur
Luminance : Y = .30R + .59G + .14B NTSC : nuance (hue), saturation, Y/I/Q I = 0.74 (R-Y) (B-Y) Q = 0.48 (R-Y) (B-Y) PAL : 2 signaux de chrominance, Y/U/V U = (B-Y) V = (R-Y) Formats 4:2:2

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 ?
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 ?
Spatiale Fréquentielle Temporelle Fractale

Compression des données algorithmes 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
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 A E D U B K W R 0.3 0.18 0.15 0.10 0.05 0.07 A 10 E 00 D 110 U 011 B 010 K 11111 W 11110 R 1110 1 0.62  1   1 0.38 1  1 0.2  0.32 1 1  0.1 1  0.17

Compression des données algorithmes 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= séquences de 6 lettres coder de grande quantité de données à l ’aide d ’un base multi-indexée @1 DU « Du Pain » EL Paires de symboles syllabes mot groupe mot MENT Le problème majeur est le stockage ou la construction du dictionnaire @k PAIN AUJOURD ’HUI

Compression des hauts débits algorithmes / normes
Données Source Décorrélateur Quantificateur codage 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
GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) SVG (Scalable Vector Graphics ) GIF et JPEG : les formats d’image les plus répandus. Ce sont des moyens d’enregistrer et de transporter des images en comprimant les données. Les images sont en général très gourmandes en ressources. Ainsi, une image brute peut occuper 800 KO, mais après, en GIF, elle ne fait que 100 KO et en JPEG ne fait que 40 Ko… Avec/sans pertes….

Documents Hypermédias

Describing multimedia presentations
MHEG SMIL (W3C) SAMI, XHTML + SMIL (Microsoft) HTML manque de sémantique temporelle et de mécanismes pour positionner d’une manière précise les éléments. DHTML n’étant pas suffisant -> SMIL SAMI = des sous-titres synchrosés

Pages HTML Interactivité ? <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)
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 : DHTML < LAYER NAME =« img1 » LEFT=« 20 » TOP=« 30 »> < IMG SRC=« image.gif »> </LAYER> < LAYER NAME =« img2 » LEFT=« 25 » TOP=« 35 »> < IMG SRC=« image2.gif »> <DIV style=« position : absolute; top : 99 px; left : 97 px; visibility : visible; z-index : 2; »> …. Éléments HTML </DIV>

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…

(Synchronized Multimédia Integration Language)
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
toto.smi body head Layout par seq switch Region 1 Audio channel Animation Media Media Transition Transition

<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> <a href=" <video src="tim-video" region="right-video"/> </a> <text src="tim-text" region="right-text"/> </par> </body> </smil> header Body = scénario

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
Synchronisation inter-média : les balises <par> et <seq> <seq> CLIP 1 <par> CLIP 2 CLIP 3 </par> CLIP 4 </seq> CLIP 1 CLIP 3 CLIP 2 CLIP 4 <par begin="0s" dur="33s"> <video begin="1s" dur="10s" repeatCount="2.5" fill="freeze" .../> </par>

Codage des documents hypermédias

Présentations similaires

Présentation au sujet: "Codage des documents hypermédias"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Codage des documents hypermédias

Présentations similaires

Présentation au sujet: "Codage des documents hypermédias"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back