Technologies Web. Technologies Web DHTML TCM-TWEB Julien BEAUCOURT 2006 pour ETNA

Transcription

1 DHTML

2 Sommaire Introduction Compatibilité du DHTML Les layers Les balises dynamiques Balise <layer> Balise <div> et <span> La balise <div> Animer de éléments Le Document Object Model (DOM) Modifier une propriété Conclusion

3 Introduction Le DHTML (Dynamic HyperText Markup Language) n'est pas à proprement parler un langage de balises pour Internet, il n'existe d'ailleurs aucune norme DHTML à part entière. En réalité, le DHTML est un ensemble de technologies Internet associées afin de fournir des pages HTML plus interactives, c'est-à-dire dont le contenu peut être modifié grâce à des événements (mouvements de la souris, survol d'un objet par le curseur,...) après le chargement de la page. Les technologies que le DHTML met en oeuvre sont : Le HTML, nécessaire pour présenter le document ; Les feuilles de style (CSS), permettant de définir un style pour plusieurs objets et le positionnement de ceux-ci sur la page ; Le modèle objet de document (DOM), proposant une hiérarchie d'objets, afin de faciliter leur manipulation ; Le Javascript, un petit langage de script essentiel pour définir des événements utilisateur ;

4 Compatibilité du DHTML Le problème de la compatibilité : Le DHTML est certes très amusant et permet de faire des documents HTML originaux, toutefois l'utilisation de pages HTML «dynamiques» n'est possible que sur les navigateurs Microsoft Internet Explorer et Netscape Navigator versions 4 ou supérieures. D'autre part, l'interprétation du code HTML peut être différente d'un navigateur à l'autre, c'est-à-dire qu'un un gros travail sera nécessaire pour s'assurer que l'effet sera visible sur la majorité des configurations : en écrivant un script pour chaque navigateur ; en créant (si possible) un script fonctionnant sur les différents navigateurs.

5 Les layers Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des "couches" contenant des éléments et pouvant être positionnées sur l'écran. Il s'agit en réalité de balises HTML spéciales pouvant contenir ellesmêmes d'autres balises HTML, et dont les attributs sont entreautres : La position par rapport au haut du navigateur La position par rapport à la bordure gauche du navigateur La largeur La hauteur Le Z-Index, c'est-à-dire le niveau de superposition de la balise

6 Les layers En effet, on appelle ces conteneurs HTML "couches" car il s'agit d'éléments HTML pouvant être superposés à l'écran comme des carrés de papier calque et pouvant être déplacés séparément (chaque calque est repéré par un identifiant unique que l'on définit comme attribut) dans la fenêtre du navigateur grâce à du Javascript. De plus, le z-index définit l'ordre de superposition des calques, c'està-dire quel calque se trouve au-dessus des autres...

7 Les balises dynamiques Les balises permettant de constituer des couches sont les balises LAYER, SPAN et DIV. LAYER est une balise spécifique à Netscape Navigator, et dont le fonctionnement est très proche de celle énoncée ci-dessus, c'est-àdire la superposition de transparents. Les balises DIV et SPAN sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que Netscape Navigator

8 Balise <layer> La syntaxe de la balise <layer> est la suivante : <layer name="nom de la couche" left="distance au bord gauche" top="distance au haut"> éléments HTML </layer> Attributs de layer : name : Chaine de caractèredéfinit un identifiant unique pour la couche Left : valeur numérique entièredistance en pixel à la bordure gauche Top : valeur numérique entièredistance en pixel au haut de la page

9 Balise <div> et <span> Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-P, au moyen des balises DIV et SPAN. Étant donné que le navigateur Internet Explorer 4 est apparu après Netscape Navigator 4, les possibilités "dynamiques" qu'il offre sont plus vaste que celles de Netscape, c'est-à-dire qu'il offre plus d'attributs au niveau de ses balises, pouvant être modifiées par l'intermédiaire d'un code écrit en Javascript après chargement de la page (d'où la notion de HTML dynamique).

10 Balise <div> Les attributs de la balise <div> : Position Left Right Top Bottom Overflow Clip Visibility Z-index static, absolute, relative. Distance de la bordure de gauche Distance de la bordure de droite Distance du bord haut Distance du bord bas Gestion du contenu superflu : visible, hidden, auto, scroll Gestion du cadre de découpe : auto, bottom, left, top, right Gestion de la visibilité du calque : Inherit, hidden, visible Niveau de calque : auto, ou numéro

11 Animer des éléments L'animation des éléments présents sur une page Web se fait en modifiant leur propriété (position, hauteur, largeur, visibilité, z-index,...) ou en utilisant leur méthodes (fonctions associées à un élément). Cela ne peut se faire qu'à l'aide d'un code Javascript, permettant de modifier les propriétés des éléments suite à des événements utilisateurs (clic sur la souris, déplacement de la souris,...), et cela grâce à une structuration des éléments dans la page définie par le DOM (Document Object Model).

12 Le Document Object Model (DOM) Le Document Object Model est un principe consistant à représenter le navigateur et le document qui y est affiché comme une hiérarchie d'objets possèdant des propriétés intrinsèques et auxquels ont peut accéder en décrivant la hiérarchie qui mène à chaque objet. Toutefois, le Document Object Model ayant été implémenté de manière "sauvage" dans les deux navigateurs concurrents (ie Netscape et Internet Explorer), la hiérarchie et les propriétés diffèrent quelque peu entre les deux navigateurs.

13 Modifier une propriété Selon que l'on utilise Internet Explorer ou Netscape, la façon d'accèder aux propriétés des éléments est différente, ainsi que les propriétés elles-mêmes (il s'agira donc dans un premier temps de déterminer par l'intermédiaire du script le type de navigateur utilisé, puis adapter la notation en fonction...). Netscape permet d'accéder aux différents layers en utilisant la syntaxe suivante : document.layers['nom'].document.layers['nom2'].attribut ou document.layers.nom.document.layers.nom2.attribut Internet Explorer définit un objet appelé "all" contenant tous les éléments DIV. Ainsi, l'accès aux éléments se fait par la syntaxe suivante : document.all.nom.attribut

14 Modifier une propriété Modifier l'image de fond : document.all.nom.style.backgroundimage Modifier la couleur du fond : document.all.nom.style.backgroundcolor Modifier le clipping : document.all.nom.style.clip Modifier le contenu : document.all.nom.innerhtml Modifier la distance à gauche : document.all.nom.style.left Accéder au nom : objet.name Modifier la visibilité : document.all.nom.style.visibility Modifier la distance au haut : document.all.nom.style.top Modifier le z-index : document.all.nom.style.zindex

15 Conclusion On a que le DHTML n'était pas un langage en soi, mais une série de technologies qui permettaient d'augmenter les possibilités dynamiques des pages web. Un des éléments présenté dans ce travail, cependant, va permettre un développement important dans le domaine du web : Le Document Object Model (DOM) est associé, comme on l'a vu, avec le DHTML. Cependant, l'apparition de ce modèle de programmation orienté objet va nous mener plus loin que simplement permettre d'animer des pages web. Le DOM a également été désigné par le W3C pour être associé au fameux XML (extensible Markup Language).Comme le XML permet de structurer les informations, son association avec le DOM va permettre d'échanger des "données structurées entre applications fonctionnant en environnements hétérogènes." Il ne sera alors plus nécessaire de passer par des logiciels reposant sur des technologies propriétaires, c'est à ce niveau que le DOM est promis à un brillant avenir.