6.2 Etude de cas : DOM-Filter
6.2.1 Les technologies du Web
Nous allons passer en revue plusieurs technologies en usage sur Internet, afin de faciliter la compréhension et la lecture de la suite de l’étude. Historiquement, les sites Web sont écrits en HTML (Hyper Text Markup Language). Il s’agissait au départ d’un langage de mise en forme du texte. Par la suite, les pages Web sont devenues plus riches, incorporant notamment des interactions assez complexes et des communications synchrones ou asynchrones avec un serveur distant. De statiques, les sites Web sont devenus dynamiques.
De nombreux langages sont utilisés pour bâtir ces sites. Parmi ceux-ci nous verront plus en détails le DOM et le CSS qui présentent des caractéristiques très intéressantes pour notre étude.
6.2.1.1 AJAX et JavaScript
Ce qu’on désigne sous le terme AJAX (Asynchronous JavaScript And XML) est en réalité une collection de technologies et de langages permettant de mettre en place des interactions riches et dynamique du côté client d’une architecture client-serveur.
Le principe de ces technologies repose sur l’utilisation d’un objet JavaScript,
XMLHttpRequest, permettant une communication asynchrone avec le serveur.
Le gain est important pour le ressenti utilisateur. Les premières pages faisant appel à des données distantes sur un serveur et mettant en place une première forme de dynamicité sur les sites Web reposaient sur un mécanisme de génération de pages Web depuis le serveur. La communication était synchrone : le client envoyait sa requête au serveur, qui générait la réponse et la renvoyait au client qui l’affichait. Pour une modification minime de la page (une image à rafraîchir), c’est l’intégralité de la page qu’il fallait recomposer, réexpédier et réafficher.
L’objet XMLHttpRequest permet une communication asynchrone avec le serveur : lorsqu’une donnée est demandée, le reste de la page continue de s’exécuter. C’est une fonction JavaScript qui est déclenchée au moment de la réception des données et qui rafraîchit le fragment concerné par la mise à jour.
L’usage de cet objet est devenu incontournable dans le développement Web de par le très grand sentiment de fluidité qu’il procure à l’utilisateur et les possibilités d’interactions qui en découlent.
6.2 - Etude de cas : DOM-Filter
6.2.1.2 DOM
Si les pages Web sont codées en HTML, il existe une interface permettant d’accéder aux différents éléments de la page : le DOM pour Document Object Model. Le DOM est une recommandation W3C.
Le Document Object Model est un modèle de documents. Il s’agit d’une structure arborescente où chaque nœud de l’arbre correspond à un élément de la page. A titre d’exemple, voici un fichier HTML très simple, suivi de sa représentation équivalente sous forme arborescente, telle que le DOM va la représenter.
<HTML> <BODY>
<SPAN> Hello </SPAN> <SPAN> World </SPAN> </BODY>
<HTML>
Table 19 : représentation DOM d’un fichier HTML.
Cette représentation arborescente inclut également une représentation des attributs et des propriétés rattachées aux nœuds (appelés element). L’API DOM fournit un ensemble de méthodes permettant d’accéder et/ou de modifier les différents nœuds et aux informations s’y rattachant, comme l’illustre l’exemple ci-dessous, écrit en JavaScript.
document.body.appendChild(document.createTextNode(‘world’);
Code source 17 : Fragment de code JavaScript manipulant DOM.
La première partie de cette instruction (document.body) est un exemple de navigation dans l’arborescence par sélection successive des nœuds. La suite de l’instruction montre la possibilité de modifier la structure de l’arbre en y insérant (fonction appendChild un nouvel élément (document.createTextNode).
document
body
span span
6.2.1.3 Feuilles de style CSS
Les Cascading Style Sheets (CSS) ou feuilles de style en cascade permettent de maîtriser l’affichage des éléments d’une page. Les possibilités sont extrêmement nombreuses. Les principes en eux-mêmes sont simples : il s’agit d’un système d’adressage. On définit un élément cible (par exemple une balise DIV) et on spécifie la liste de règles qui vont s’y appliquer.
Ce ciblage peut être très précis (un élément en particulier dans la page et uniquement celui-là) ou plus vague (une classe d’éléments). Un mécanisme d’héritage (d’où feuille de style en cascade) permet d’appliquer ces règles aux éléments situés plus bas dans la hiérarchie de la page.
L’aspect intéressant de la technologie CSS réside dans son accessibilité au travers des différents API DOM. On peut savoir très précisément les règles CSS s’appliquant à un élément (par exemple : sa position dans la page, sa taille, sa couleur…). De manière plus générale, les règles CSS vont regrouper l’ensemble des informations perceptuelles en jeu dans une page Web. Or, nous avons axé notre étude des modèles pour l’assistance vers les caractéristiques perceptuelles des éléments référençables par un usager.
BODY {
background : #ddeeaa ; }
.contenu {
border : solid 1px dark-gray ; #mon_element {
font-family : sans-serif ; }
Code source 18 : exemple de définition de règle CSS. Les règles sont écrites en blocs, séparés par des
accolades. Le terme, ou la liste de termes, précédant l’accolade ouvrante permet de cibler un type d’éléments (premier bloc), une classe d’éléments (deuxième bloc) ou un élément en particulier (dernier bloc). A l’intérieur d’un bloc, les règles sont délimitées par des points-virgules ; les propriétés et les valeurs sont séparées par des deux-points.
Ces informations CSS sont donc de première importance pour nous, d’autant plus qu’elles sont facilement récupérables par l’API DOM.
6.2.1.4 XML, Transformations XSLT
Si les sites Web utilisent le langage HTML pour structurer les informations, le CSS pour les mettre en page et le JavaScript pour enrichir le tout avec des interactions, les sites Web ont également besoin de stocker des informations persistantes. Plusieurs
6.2 - Etude de cas : DOM-Filter
techniques peuvent être employées et les plus courantes consistent à recourir à des bases de données.
Toutefois, le format XML est aussi employé, notamment en tant que langage pivot dans l’échange de données. C’est une technique qui a l’avantage d’être indépendante de toute considération de langage de traitement ultérieur ou de plate-forme.
Le format XML partage également des caractéristiques avec plusieurs autres technologies que nous employons : nous avons déjà vu la possibilité d’exprimer notre modèle en RDF. La structure arborescente du XML est également identique à la structure arborescente d’une page HTML. Enfin, l’API DOM permet d’accéder aussi bien à un document HTML qu’à un document XML