La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Codage des documents hypermédias Romulus GRIGORAS ENSEEIHT.

Présentations similaires


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

1 Codage des documents hypermédias Romulus GRIGORAS ENSEEIHT

2 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

3 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. Doù lémergence du standard UNICODE Lunité de base dencodage reste loctet (8bits) mais on peut sen servir de différentes manières : –UTF 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

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

5 HTML - exemples (1) Mon premier document achetéhèmelle Ceci est un lien vers la page de Paul.

6 HTML - exemples (2) Year Sales 2000 $18M 2001 $25M 2002 $36M Ceci est un paragraphe.

7 HTML - exemples (3)

Nom: Surnom:

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

9 XML XML : entendez eXtensible Markup Language et traduisez Langage à balises étendu contenu textuel 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 W3CWorld Wide Web Consortium 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).

10 Document XML Pillou Jean-Francois Attribut : plutôt dédié au fonctionnement dune appli XML Contenu Textuel Ex: url parseur élément

11 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

12 Structure dun 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 Le prologue se poursuit avec des informations facultatives sur des instructions de traitement à destination d'applications particulières. Leur syntaxe est la suivante: 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).

13 XML file example annuaire.xml Pillou ….. …..

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

15 DTD XML : déclarer des éléments Pour définir un élément on utilisera la syntaxe suivante: 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: Cet élément pourra être écrit de la façon suivante dans le document XML: Pillou

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

17 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: 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: Pour définir une valeur par défaut il suffit de faire suivre l'énumération par la valeur désirée entre guillemets: –atomique: il permet de définir un identifiant unique pour chaque élément

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

19 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

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

21 MathML Example x = - b ± b ⁢ a ⁢ c 2 ⁢ a

22 Association des feuilles de style aux documents Document XML – HTMLCSS XMLXSL

23 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

24 Processeur XSLT XSLT permet de transformer des documents sources (en XML) en d'autres, dans des formats divers source XML règles XSLT processeur XSLT Résultat (XML, HTML, …)

25 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

26 Exemple introductif: instance du catalogue

27 Processeur XSLT: modèle dexécution Traitement de listes de nœuds –Arbre (potentiellement récursivement) Par défaut, chaque fils est traité selon son ordre dapparition dans larborescence –Feuille Traitement = « génération des données du fichier cible » via lapplication 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 dapplication des règles

28 Règles L'élément 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 »

29 Exemple: … une feuille de style Liste des produits

30 Exemple: … une deuxième feuille de style Liste des produits Résultat!

31 Application récursive des règles Dans le corps d'une règle, l'instruction provoque l'application récursive des règles –Celles-ci sont appliquées sur les éléments Comportement par défaut –Copie du contenu

32 XSL-FO Mostly used for generating PDFs XSL-FO –Unified presentation language (<>HTML+CSS) –Stores all documents data within itself (XSLT, CSS transform an external document) XML doc XHTML,DocBook XSL-FO XSLT Target doc FO processor PDF, PS, RTF etc.

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

34 XSL-FO example From: (Customer Reference) cust123 05

35 XSL-FO : the big picture

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

37 Coder des objets graphiques 2D Example rect01 - rectangle expressed in physical units Example rect01 Scalable Vector Graphics (SVG), a language for describing two- dimensional vector and mixed vector/raster graphics in XML.

38 Coder des objets graphiques 3D

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

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

41 VRML exemple perspective : X3D (VRML & XML unifiés) Exemple de source VRML #VRML V2.0 utf8 DEF Camera Viewpoint { orientation position } DEF _TR Transform { translation rotation children Shape { geometry Box { } appearance Appearance { texture ImageTexture { url "http://www.jwz.org/webcollage/collage.jpg" } }

42 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

43 Coder des sons (signaux 1D) Quest 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!

44 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

45 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

46 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

47 Taux d'échantillonageQualité du son Hzqualité CD Hzqualité radio 8000 Hzqualité téléphone signal analogique quantification signal numérisé échantillonnage Numérisation du son

48 Coder des sons en vectoriel MIDI

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

50 CAPTEUR CCD IMAGE NUMERIQUE IMAGE SUR ECRAN numérisation affichage colonne ligne O pixels niveau de gris Le niveau de gris est une mesure quantifiée de l éclairement du pixel gray (15) IMAGE NUMERIQUE MONOCHROME

51 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

52 3 CAPTEURs CCD IMAGE NUMERIQUE COULEUR lumière Séparateur optique Qui crée trois rayons dupliqués filtres pixel

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

54 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

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

56 Compression : la redondance ? Spatiale Fréquentielle Temporelle Fractale

57 Compression des données algorithmes universels –Codage par plage (RLC, Run Length Coding) : 10 fois A … –Codage Topologique : utiliser un octet de localisation dun symbole dominant –Codage Relatif : factoriser un préfixe binaire

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

59 Huffman AEDUBKWRAEDUBKWR A 10 E 00 D 110 U 011 B 010 K W R 1110

60 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 26 6 = 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 symboles syllabes mot « Du Pain » Le problème majeur est le stockage ou la construction du dictionnaire

61 Compression des hauts débits algorithmes / normes Données Source DécorrélateurQuantificateur codage train binaire Éliminer la redondance la plus évidente Seule opération non réversible permet d augmenter le taux de compression Éliminer les détails ! Huffman par exemple

62 Formats dimage pour le Web GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) SVG (Scalable Vector Graphics )

63 Documents Hypermédias

64 Describing multimedia presentations MHEG SMIL (W3C) SAMI, XHTML + SMIL (Microsoft)

65 Pages HTML

66 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 dun 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 dobjets afin de faciliter leur manipulation des langages de script pour la récupération des événements JavaScript Vbscript

67 Au-delà de HTML : DHTML

…. Éléments HTML

68 Au-delà de HTML : DHTML Lanimation se fait (à travers lexé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 daccéder aux propriétés de lun dentres aux … selon le navigateur, laccès et les propriétés ne sont pas identiques… exemple daccès à un attribut dun élément : document.layers.nom.zIndex…

69 Au-delà de HTML : SMIL (Synchronized Multimédia Integration Language) Exemple: Diaporama synchronisée avec laudio et le texte Effets spéciaux (transitions) Bas débit (modem)

70 Structure of a SMIL document toto.smi head body seq switch par Layout Region 1 Media Audio channel Media Transition Animation Transition

71 header Body = scénario

72 Layout Region 1Region 2 Region 3 b c a time Régions hiérarchiques et sous-régions pour le placement spatial

73 SMIL : synchronisation CLIP 1 CLIP 3 CLIP 2 CLIP 4 CLIP 1 CLIP 2 CLIP 3 CLIP 4 Synchronisation inter-média : les balises et


Télécharger ppt "Codage des documents hypermédias Romulus GRIGORAS ENSEEIHT."

Présentations similaires


Annonces Google