Arbres Web

L'objectif du projet est de concevoir un logiciel qui permet de visualiser graphiquement la structure arborescente de pages web.

Introduction

Les pages web sont des documents textuels décrits avec un langage à base de balises appelé HTML (HyperText Markup Language). Les différentes balises définies dans HTML permettent de structurer le contenu du document. Un exemple de document HTML très simple contenant un titre, un paragraphe et une liste de deux éléments est présenté ci-dessous.

La structure des documents HTML est arborescente : les balises correspondent aux noeuds de l'arbre et les relations de contenance entre éléments (balises) correspondent aux arcs entre les nœuds . Un élément racine contient tous les autres éléments. La figure ci-dessous montre la structure arborescente du fichier HTML utilisé en exemple. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Un document HTML</title>
  </head>
  <body>
    <h1>Titre</h1>
    <p>Paragraphe.</p> 
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
  </body>
</hml>

Structure d'un document HTML simple.

Visualisation du même document HTML dans un navigateur.

Structure arborescente simplifiée du même document HTML.

A l'aide d'une interface de programmation (API) appelée DOM, disponible dans différents langages de programmation dont Java, il est possible de parcourir la structure arborescente de documents HTML et même de la modifier (rajouter des noeuds, en supprimer, etc.).

Il est donc également possible d'utiliser DOM pour générer automatiquement une représentation graphique de la structure d'une page web. Ainsi, les figures ci-dessous ont été générées à partir de différentes pages web.

Exemple d'arbres générés à partir de différentes pages web (crédit : Haiko).

Fonctionnalités minimum attendues

  1. Le logiciel doit permettre d'obtenir une représentation graphique arborescente à partir d'un document HTML.
  2. L'utilisateur doit pouvoir choisir le document HTML à représenter, soit en fournissant directement un fichier, soit en indiquant l'URL de la page web de son choix.
  3. Le logiciel doit proposer des réglages permettant de faire varier la représentation graphique obtenue (forme, couleurs, etc.).

Dans une version avancée, on pourra également imaginer rendre la représentation graphique obtenue dynamique. Ainsi, par exemple, lorsque l'utilisateur clique sur un nœud, la représentation est zoomée sur ce noeud, l'utilisateur peut changer un noeud de place dans l'arbre, etc.

Quelques pistes pour démarrer

Le projet peut être décomposé en deux modules principaux :

  • l'analyseur syntaxique de documents HTML ;
  • l'interface graphique de visualisation d'arbre et d'interaction avec l'utilisateur.

Analyse des documents HTML

Pour l'analyse des documents HTML, il est nécessaire de s'intéresser à DOM et son implémentation en java (Java DOM API). L'utilisation de bibliothèques implémentant des parseurs, telles que jsoup par exemple, pourra faciliter l'analyse des documents.

Le fichier pdf suivant donne quelques éléments introductifs sur DOM.

Attach:dom.pdf

Interface graphique

Concernant l'interface graphique :

  • Dans un premier temps, les fonctionnalités de l'interface pourront être limitées à la visualisation des arbres.
  • Dans un deuxième temps, il pourra être envisagé de rajouter à l'interface les éléments nécessaires pour que l'utilisateur puisse configurer l'apparence graphique de l'arbre.

Différentes technologies peuvent être envisagées pour l'interface graphique :

  • SVG : il s'agit d'un langage textuel à base de balises (basé sur XML), qui permet de décrire des figures. Une image SVG peut être visualisée dans un logiciel de dessin ou même dans un navigateur web.
  • Swing : il s'agit d'une bibliothèque standard de Java permettant de créer des interface graphiques interactives. Cette bibliothèque dispose notamment d'une classe appelée JTree spécifiquement dédiée à la représentation de structures hiérarchiques. L'utilisation de bibliothèques complémentaires telles que JGraphT ou JUNG peut également être envisagée pour aller plus loin.

Le placement des nœuds de l'arbre dans la figure résultante devra être réfléchi de manière à obtenir un résultat le plus esthétique possible.

Documents