Passer au contenu

Cartographiez un site avec Inxight Star Tree Studio

L’environnement de développement d’applications Inxight Star Tree Studio modélise l’information sous la forme d’arbres hyperboliques. Cet outil aide à créer une interface de navigation visuelle dans les sites internet.

La technique des arbres hyperboliques (hyperbolic trees) a été conçue à l’origine par le Palo Alto Research Center, dont est issue la société Inxight. Son principe repose sur une croissance exponentielle du nombre d’informations affiché en fonction de l’éloignement du centre de l’arbre. Elle se prête à des applications de visualisation d’informations hiérarchisées en 2D, telles que la cartographie d’un site web.

1 – Installez Star Tree Studio

La technologie Star Tree servira ici à localiser rapidement la page de téléchargement du logiciel, disponible en version d’évaluation. Ce sera l’occasion de découvrir une ergonomie plutôt étonnante et originale [voir figure ci-contre] en forme d’arborescence. Dans un navigateur, ouvrez la page d’accueil de l’éditeur ( inxight.com) et cliquez sur l’icône “Use Star Tree to Navigate This Site“.Localisez le n?”ud “Trial Copy” en suivant le chemin “Desktop Products>Start Tree Studio“. Double cliquez sur “Trial Copy” et remplissez le formulaire d’enregistrement pour recevoir, par e-mail, le lien de téléchargement de l’assistant d’installation. Il suffit ensuite de se conformer au scénario de l’assistant pour mettre en place le logiciel.

2 – Créez votre premier arbre

Vous allez maintenant créer une cartographie du site d’Inxight. Ouvrez l’application (“Démarrer>Inxight Star Tree Studio>Star Tree Studio“), puis acceptez l’invitation vous proposant la création d’un nouveau projet. Précisez son nom (par exemple “Inxight“) et l’emplacement où il sera mémorisé. Sélectionnez ensuite l’option de création sur “Crawling a Web site” et cliquez sur le bouton “Suivant“.Précisez comme URL l’adresse du site de l’éditeur, inxight.com. Laissez les autres réglages par défaut dans les écrans suivants. La récupération des pages du site démarre immédiatement après la validation. Une fois ce travail terminé, l’application vous propose de créer directement l’arbre contenant les titres et les liens trouvés. Refusez cette demande afin d’ajouter des images au projet.

3 – Ajoutez des images au projet

Cliquez avec le bouton droit sur le répertoire “Thumbnails” puis sur l’option “Copy into Project” du menu contextuel. Sélectionnez le fichier “Mesa” parmi ceux qui sont proposés par défaut. Recommencez la même opération avec le répertoire “Icons” et choisissez l’image “Globe“.Star Tree Studio organise sous forme arborescente les ressources qui composent un projet. Il peut s’agir d’arbres, d’icônes, de vignettes (thumbnails) rattachées à des n?”uds, ainsi que d’autres informations qui automatisent la construction de ces arbres à partir de sites existants (crawling) ou de fichiers de données tabulaires (import).

4 – Retouchez l’arbre

Sélectionnez la ressource “Crawl1” puis cliquez sur le bouton “Convert“. Dans le formulaire qui s’affiche, saisissez comme nom d’arbre “Inxight” et validez directement avec le bouton “Terminer“. Ouvrez ensuite avec Star Tree Designer l’arbre créé en double cliquant sur son nom (“inxight.stf“). Dans le menu contextuel associé au n?”ud “Inxight Products“, cliquez sur l’option “Node attribute“. Modifiez ensuite l’icône et la vignette, ainsi que la couleur de fond. Ces attributs sont spécifiques au n?”ud modifié. Cliquez dans la barre d’outils verticale sur le bouton “Label/Tooltips Entry Mode” et modifiez le label des n?”uds.Le texte saisi dans le champ “Tooltips” apparaîtra sous forme de bulle lors du passage de la souris sur le n?”ud associé. Vous pouvez ajouter de nouveaux n?”uds, insérer le contenu d’autres arbres, etc. Pour éviter d’avoir à refaire ce travail de retouche en cas de restructuration du site, une astuce consiste à gérer les attributs de tous les n?”uds dans un fichier Ascii délimité, qu’il suffira ensuite d’importer dans le projet en un seul clic de souris. Pour synchroniser encore plus facilement l’arbre avec un site dynamique, ce fichier peut être généré par une base de données ou le système de gestion de contenu correspondant. Mais cela exige un peu de programmation.

5 – Publiez l’arbre

La mise en ligne se fait par la commande “Project |Publish“. Lors de la première publication avec l’assistant, cochez les cases “Web Pages Prototypes” et “Star Tree Applet“. Dans l’écran suivant, précisez si l’arbre doit s’afficher dans sa propre fenêtre ou dans un cadre. Sélectionnez ensuite le mode de transfert des fichiers (via FTP ou copie directe dans un répertoire à spécifier). Vous pouvez ensuite retoucher la page prototype générée avec votre éditeur HTML habituel pour lui appliquer la charte graphique du site et changer les nombreux paramètres de l’applet.

6 – Procédez autrement

Il n’existe pas d’autres produits commerciaux qui s’appuient sur les arbres hyperboliques car Inxight a verrouillé son logiciel par des brevets américains. En revanche, ceux-ci ne s’appliquant pas encore en France, vous pouvez utiliser Hypertree ( hypertree.sourceforge.net) ou Treebolic ( treebolic.sortilege.net), deux librairies Java issues du monde libre qui méritent vraiment d’être examinées de près avant d’opter pour Inxight. Dans le même esprit, TouchGraph ( touchgraph.com) concurrence ouvertement TheBrain ( thebrain.com) pour des informations non hiérarchiques.D’autres logiciels exploitent des approches différentes pour visualiser de gros volumes d’informations, comme Thinkmap ( thinkmap.com), Fractal:Edge ( fractaledge.com) ou encore Elastictech ( elastictech.com).En conclusion, Star Tree Studio se révèle rapide à mettre en ?”uvre et très simple d’emploi. Si le contenu du site évolue fréquemment, il est judicieux de développer un script réservé à l’administrateur pour générer automatiquement les attributs de l’arbre hyperbolique à partir du contenu du site. Rappelons enfin que les applications possibles ne se limitent pas à la navigation de site web, mais peuvent toucher également d’autres domaines comme la gestion de connaissances.

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


Denis Rebaud