Les Cakos du Web

30 mai 2006

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> !!

08 mai 2006

Zack Kim and the Cosmic Funk Express

Ho Yeah ! On peut dire qu’il « envoie du steak sur Jupiter » celui-la !

Découvert par hasard ? Non pas vraiment … en fait je faisais une recherche sur la musique du jeu « Mario Bros » reprise par un certain nombre d’artistes qui par chance publient leurs vidéos sur la toile.

Parmi les plus connues, on retrouve bien sûr la fameuse version à la guitare électrique de Keiichi ou encore la célèbre version au piano de Martin Leung (version courte de 5 minutes et dans sa version « longue » de 10 minutes) pour les autres, je vous laisse fouiller google video.

Hé oui, c’est en effet là que j’ai découvert Zack Kim. C’est un Coréen de 22 ans (à l’heure où j’écris bien entendu) qui joue de la guitare depuis 13 ans et qui travaille depuis plus d’un an sur la technique du « Touch Style », le tapping à deux mains, amenée par Emmet Chapman, dans les années 70, grâce à son Stick.

Voici la version, à deux guitares, de mario interprétée par Zack Kim. Vous trouverez bon nombre de ses vidéos dans sa playlist.
Tout simplement époustouflant, il maîtrise la technique du tapping qui consiste à « frapper » les cordes directement sur le manche et non à les pincer au dessus des micros ou de la rosace (trou dans la guitare par où jailli le son) comme on a tendance à le voir assez souvent. Cette technique n’est utilisable qu’avec des guitares à son amplifié (électriques), car la pression sur les cordes n’est pas suffisante pour produire un son assez audible sur un guitare acoustique.

Il nous donne l’impression de faire du piano avec ses guitares, et c’est effectivement ce qu’il fait car, dans un piano, c’est exactement le même type de mécanique qui s’applique : les marteaux viennent heurter les cordes, le son émis par celles-ci est amplifié par la caisse de résonance du piano.

Comme vous pouvez le voir sur la vidéo, il utilise deux guitares en même temps, et c’est la première fois que je vois ça ! Les habitués du milieu sont peut être au courant depuis longtemps, mais je peux vous dire que c’est déjà pas facile de jouer avec une seule, alors avec deux en même temps…

Sur son blog, vous trouverez deux autres vidéos (au moment ou j’écris ce billet) l’une avec la même technique et l’autre sur son concert en Malaisie avec son groupe les « Cosmic Funk Express ». C’est du pur son !!! Ruez-vous sur les téléchargements du blog, une musique aussi funky doit être écoutée sans modération !

Il nous fait part de son rêve : « faire de la musique son métier et être reconnu dans le monde entier ». Hé bien, mon cher Zack, avec un talent pareil, je suis sûr que ça ne va pas tarder !

21 avril 2006

Foon : Hapland by Robin Alen

Voici enfin un petit article sur un Génie, un Cakos, un Champion incontestable du jeu en flash : Robin Allen. Il publie ses créations sur le site Foon.co.uk et je vous présente ici sa trilogie Hapland (1) (2) (3).

Le but du jeu est assez simple :

Dans chaque cas vous devez déclencher le portail symbolisé par une grande roue sur la zone de jeu. Mais les choses se compliquent : aucune aide n'est disponible sur le site (et je vous déconseille de chercher ailleurs car le jeu perdrait de son intérêt). Tout se joue à la souris, il suffit de cliquer sur les différents éléments actif du décor et voir quelle(s) conséquence(s) votre action aura sur le jeu. En fait, toute la difficulté réside dans cette simple problématique :"Que suis-je censé faire?" Hé bien à vous de trouver ! ;-p

A savoir :

vous pouvez réinitialiser la zone de jeu indéfiniment en cliquant sur la double flèche, en bas à droite.

visionner les maigres indications sur le jeu en cliquant sur le Z avec un point en dessous, en bas à droite. (c'est en anglais ! ben oui : .uk ^^).

vous allez forcément vous planter plus d'une fois : réinitialisez le jeu est la seule option ! Pas de sauvegardes (mais dans l'ensemble les actions sont rapides à effectuer).

cliquez sur tout, et surtout cliquez !

votre vitesse d'exécution peut être mise à contribution, alors ne vous endormez pas entre chaque action ! Si vous ratez le coche, alors il faudra tout recommencer !

Voilà ! Les liens sont ci-dessous. Amusez vous bien et faites moi part de vos impressions !
(Personnellement, j'ai accompli les deux premiers et je me prends bien la têtes sur le 3)