Codage des documents hypermédias

Codage des documentshypermé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 http://www.mathrice.org/rencontres/mars.2006/codages.pdf

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

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

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é 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 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 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>webmaster@commentcamarche.net</email> </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

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

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 XSL-FO XSLT 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="http://www.w3.org/1999/XSL/Transform"> ... <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> <xsl:apply-templates/> </LI> </xsl:template>

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 • 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) 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) 

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

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

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!

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

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

Codage des documents hypermédias