multimedialab poule
coursmagdocgalerieliensinfos
En informatique, un arbre est une structure de données récursives. Par exemple, les répertoires de la plupart des systèmes d'exploitation actuels forment des arbres: Windows, Unix, Linux et Mac OS X.

Dans un arbre, on distingue deux catégories d'éléments :
- les "feuilles", éléments "terminaux" ne possédant plus de sous-branches, éléments "enfants";
- les "nœuds" internes, éléments possédant des sous-branches, donc étant "parents".

La racine de l'arbre est le nœud ne possédant plus de parent.
La hauteur d'un arbre est la longueur du plus grand chemin menant, pour chaque étape, d'un "parent" à un" enfant".

Une arborescence permet d'organiser les données en mémoire ou sur disque, de manière logique et hiérarchisée,
rendant plus efficaces la consultation et la manipulation des données stockées.

Une structure en forme d'arbre se déploie (par exemple) à partir d'un menu "racine" principal (disque dur, page d'accueil), en sous-menus, puis pages, puis composants de la page. Une fois visualisée, une telle structure permet de décrire ou de plannifier les cheminements possibles au sein de données, ou encore les scénarii de navigation au sein d'un contenu, d'un site web, et plus largement d'un programme. Cheminements horizontaux ou verticaux.

La représentation d'une arborescence sous la forme d'un organigramme ("flowchart") est un excellent outil d'évaluation. L'organisation des différents dossiers contenant pages et fichiers est le reflet fidèle d'une arborescence. La nomenclature des fichiers en profite à son tour.

Il s'agit ici d'indentifier, de classer, de hiérarchiser, de guider, de structurer, d'organiser.
L'arborescence d'un site incarne sa navigation: l'utilisateur ne tarde pas à en comprendre la structure.
Lors de la conception d'un projet, un bon schéma de travail en facilite le développement
et la programmation, surtout dans un contexte collaboratif.

PDF_image

Arborescence & réseau.

Une approche en image introduisant les notions de structure, de répertoire, de racine,
de flux, de connexion, de lien...

PDFTélécharger (PDF - 5,0 Mo).



Nous examinerons le livre étonnant de Gaston Bonnier: "Les noms des fleurs trouvés par la méthode
simple" (Librairie générale de l'enseignement). Cet ouvrage, apparemment publié vers 1945 (il est mal
daté), est un exemple frappant d'une arborescence visible à l'oeil nu.
En naviguant d'une page à l'autre sur base de critères simples, le lecteur peut identifier précisémment
une plante ou une fleur parmi 372 reproductions couleurs et 2715 figures en N/B... Génial !

Outre le parallèle évident avec le principe de l'hypertexte, ce livre de botanique peut induire une réflexion
sur l'étonnante similitude entre les modèles informatiques des nouvelles technologies et la nature:
arborescence, ramification, fractales, codes et messages génétiques, réseaux, rhizomes, etc.
Une recherche sur ce thème sera proposée en atelier: différence entre rhizome et arborescence, etc.

La série "un livre dont vous êtes le héros" a adapté plus tard ce type de structure à des romans d'aventures.

Autre exemple: "Continue" de Dieter Kiessling (Artintact 4, 1997 - ZKM).
Le schéma d'arborescence de ce projet, également basé sur un principe simple, rend justement sa conception très efficace et facile à comprendre. L'idée de ce projet en est d'autant forte et métaphorique.
Voir la page "Continue" sur le site de Dieter Kiessling.

Idea line. Menu en "mille-feuilles", chronologie de la création en ligne, par Martin Wattenberg.
They rule. Arborescence interactive sur le site bien connu de Josh On.
Sinnzeug. Moteur de recherche dynamique, visualisation originale.
Hamada-takeshi. Une arborescence simple mais originale oriente ici la navigation.
Comment faire un site ? L'interface de ce site visualise simplement son arborescence.
Ben Vautier. Amusante interface présentant l'arborescence du site de l'artiste Ben.
What if ?. Qu'est-ce qui arriverait si je n'avais pas fait ce choix ? Sur Flip Flop Flyin.

Tri de cartes et ergonomie web. Une méthode d'organisation des contenus décrite sur ErgoLab.
Tri par cartes. Autre exemple chez Usabilis.
Information design using cart sorting. Un article de James Robertson sur Step two.

Interactive Visualization of Large Graphs and Networks. Un article de T. Munzer (Stanford University).
Dynamic diagrams. Agence d'architecture de l'information fondée par Robert Kahn à Providence.
kahn+Associates. Agence d'architecture de l'information fondée par Robert Kahn à Paris.
Architecture d'un site web. Précieux conseils de conception par Luc Van Lancker.

Mappa mundi. Découverte et cartographie de l'information sur Internet. Technologie, histoire et futur.
Mapnet. Visualisation macroscopique et mesure sur Internet.
Skitter. Visualisation et mesure des connexions entre adresses IP.
Plankton. Visualisation expérimentant la consultation de pages stockées en mémoire cache.
Walrus. Visualisation 3D de données complexes en forme de méduse.
Jellyfish. Un articlesur Walrus par Young Hyun, paru sur Mappa mundi.
Medusa. Demo d'un projet de fin d'étude: une interface inspirée d'une méduse.

Jodi. Carte de liens proposés par Jodi.org.

TreeView. Applet JavaScript de visualisation des dossiers et fichiers.
SmartDraw. Logiciel de création d'organigrammes.
Advanced Visual Systems. Logiciels de visualisation de données interactives.