Websites as Graphs
"Retour aux sources" aurait pu être l'intitulé de ce billet. Voici un excellent outil, fonctionnant via la plateforme java, et développé grâce au langage de programmation open source : Processing (vous pouvez d'ailleurs avoir un aperçu des différents prototypes de programmes exploitant ce média). Le principe de fonctionnement de "Websites as Graphs" est simple : il scrute l'architecture du code source du site web que vous lui soumettez et via un certain algorithme (dont voici les sources) génère une arborescence "multicolore" représentative de la logique d'imbrication de vos balises html. Evidemment, dit comme cela, ça ne parle qu'aux initiés, mais déjà, graphiquement, c'est beau non? Mais alors d'un point de vu "développeur" c'est sublime. Non seulement ce programme est capable de parser le code d'une page web, mais en plus il génère un rendu en temps réel de son analyse, avec une dynamique graphique superbe : on a l'impression que la "bête qui se dessine est vivante". Bon après avoir passé le stade de l'éblouissement visuel, passons aux choses sérieuses : le décryptage!- Le noir : la balise
<html>, la "racine" du code source. C'est de là que doit débuter la lecture du graphique. - Le vert : les balises
<div> - Le orange : les balises de formatage du texte :
<br /> <p> <blockquote> - Le rouge : les tableaux :
<table> <tr> <td> - Le bleu : la balise de lien :
<a> - Le jaune : les formulaires :
<form> <input> <textarea> <select> <option> - Le violet : les images :
<img /> - Le gris : toutes les autres balises qui n'ont pas été listées ci-dessus.
Maintenant que l'on a le code des couleurs, on va lire un graphique :
Voici une page de test que j'ai développée pour vous donner un aperçu. J'ai volontairement agencé les couleurs de cette façon (via le code source) afin de bien distinguer chaque groupe : en premier, la racine du site (le point noir) d'où partent deux branches vers des noeuds gris. Ce type de départ dans l'architecture est (normalement) le même pour toutes les pages web. En effet, un code source doit contenir au minimum une balise <html>, <head> et <body> pour "commencer" à être conforme aux normes de l'Internet (W3C). Ensuite, gravitent autour du point gris en bas les balises du type <title>, <script>, <link> ou <style>, et du point gris au dessus les balises <div> (en vert). Autour de chacune d'entre elles vous reconnaîtrez les balises listées ci-dessus. Ainsi, nous avons un aperçu graphique, rapide et esthétique du code source d'une page html sans avoir besoin de se plonger dans la "programmation" pour en comprendre l'architecture. On pourrait même imaginer de développer des pages html dont le code source générerait de beaux graphiques multicolores (genre fleurs ou feux d'artifices) avec ce programme ! Un "détournement" de l'outil par les artistes ? Ce ne serait pas la première fois que cela se produirait... Toujours est-il que nombreux sont ceux qui ont déjà posté leur capture d'écran sur Flickr !Pour ma part, je ne serais pas mécontent qu'une nouvelle version de l'outil soit développé, mais cette fois-ci avec davantage de balises parsées, dont notamment la fameuse balise
<object> !!Posté par Jean D. à 22:56 
5 Commentaires:
Bravo Nikouf pour ce blog que tu enrichis régulièrement. C'est un plaisir de suivre tes découvertes aussi diverses et variées qu'interressantes. Ce blog mériterait d'être plus connu. Encore une fois Félicitations.
Joël.
Par
Anonyme, le mercredi, 31 mai, 2006
Merci Joël ! ça me fait plaisir de savoir que tu visionnes mon blog régulièrement ! J'aimerais également qu'il soit plus connu... mais on ne me fait pas beaucoup de pub ! :-p
Par
Nikouf, le mercredi, 31 mai, 2006
belle trouvaille :) j'aime bien le faite de taguer son image du site et de le diffuser via flickr.
Par
denis, le jeudi, 01 juin, 2006
en effet, flickr est une bonne façon de promouvoir cet outil qui à la base se réserverait plus aux développeurs.
En tout cas en 2 jours déjà de nombreuses personnes se sont amusées à créer des codes sources capables de générer des figures assez sympatoches :
http://flickr.com/photos/deeknow/157592973/
http://flickr.com/photos/peterbaldes/157423204/
Par
Nikouf, le jeudi, 01 juin, 2006
Oui, effectivement très l'fun comme effet, c'était d'ailleur mon prochain sujet ;)
Par
Patrick, le lundi, 30 octobre, 2006
Enregistrer un commentaire
<< Accueil