Tous les billets sont listés ici et classés par titres et mois dans la boîte Archives.

J'ai enfin réussi à doter le site d'un sommaire listant tous les billets publiés ici, en attendant un archivage automatique des billets dans un menu latéral, via un plugin ou un fork.

On peut ainsi consulter les billets de diverses façons :

• En feuilletant le carnet, on lit, de façon suivie, les billets dans leur intégralité.
• En consultant le sommaire, on visualise sur une page la liste de tous les billets publiés.
• Grâce aux archives mensuelles du menu latéral ci-contre, on peut lire les billets en fonction de leur date de publication.

Comme j'étais de gaillarde humeur ce soir, j'ai adapté le code de mon sommaire pour qu'il fonctionne sur la dernière version de GuppY (v4.5.x). Sommaire.php n'est ni un fork, ni un plugin. Il s'agit d'un simple script additionnel à déposer à la racine de GuppY. Les GuppYstes intéressés le trouveront dans les scripts de mes cartons, accompagné d'un fichier lisezmoi.txt expliquant son fonctionnement (au demeurant ultra-simple : un seul fichier à charger par FTP !) Merci à ce générateur ; c'est lui qui a fait tout le travail...

Parlant de rayures, je me suis souvenue de la technique dite Super Stripes et bookmarkée il y a quelques mois, tandis que je parcourais, assez avidement, la section Webdesign de maratz.com.

L'auteur y explique que les rayures sont un élément graphique à la mode, notamment en fond de site, mais qu'il n'est pas évident de choisir leur couleur, à moins de tâtonner. Il a donc eu l'idée d'utiliser comme un masque une minuscule image semi-transparente et de moduler, en dessous, la couleur du background, pour simuler ces rayures. L'économie réalisée avec sa technique n'est pas moindre : en effet, une seule image de 4px va servir à dessiner tous les backgrounds rayés d'un site, quelle que soit leur couleur !

Inspirée par cette technique, sensiblement identique à celle que j'avais mise en oeuvre dans La fabrique, j'ai créé aujourd'hui le Stripes Maker, un générateur de fonds à rayures obliques, verticales et horizontales :


Cet outil vous permettra de générer le fond rayé idéal pour retapisser votre site : sélectionnez le type de rayures souhaitées, choisissez leur couleur et prévisualisez en direct le rendu obtenu. Une fois votre choix arrêté, vous n'avez plus qu'à copier-coller le code et à enregistrer l'image, qui se trouvent tous deux sur chaque générateur. L'entoileuse de ce site spécialisé dans... le tricot a codé un générateur de rayures, le Stripe Maker, pour visualiser ses modèles avant de les tricoter. On sélectionne les couleurs en cochant les cases du nuancier, puis on précise les diverses épaisseurs de rayures possibles et on obtient au final une modèle aléatoire de rayures, comme ceci :


L'image est accompagnée d'une version textuelle, indiquant le nombre de rang à tricoter et les couleurs à utiliser pour reproduire le modèle généré :

13 of khaki O O O O O O O O O O O O O
8 of black O O O O O O O O
8 of lightsteelblue O O O O O O O O
5 of khaki O O O O O
13 of gray O O O O O O O O O O O O O
13 of cornflowerblue O O O O O O O O O O O O O
13 of gray O O O O O O O O O O O O O
13 of lightsteelblue O O O O O O O O O O O O O
13 of cornflowerblue O O O O O O O O O O O O O
13 of forestgreen O O O O O O O O O O O O O Recolored est un logiciel qui permet de coloriser très aisément une photo en noir en blanc. Pour l'instant, il est livré gratuitement en version Bêta pour un usage non commercial, mais une version commerciale (comprendre payante) est annoncée pour 2006. Il faut dire que ce logiciel a été l'un des bookmarks les plus populaires sur Del.icio.us notamment et que le buzzz a fonctionné à plein.

Le fonctionnement du logiciel est simplissime :

1. D'abord, on charge dans l'interface de travail une photo en noir et blanc.
   
   
   
   La photo de départ
   
   
2. Ensuite, on applique sur la photo des traits de couleurs, pour indiquer la couleur à appliquer aux différentes régions de l'image.
   
   
   
   Le marquage sur la photo
   
   
3. Enfin, après avoir cliqué sur le générateur, on obtient le résultat suivant :
   
   
   
   Le résultat

D'autres exemples, tout aussi impressionnants, sont disponibles dans la galerie du site. Un bref tutoriel vous permettra de vous familiariser avec l'interface du logiciel, avant de le télécharger.

Hâtez-vous ; je doute que la version gratuite reste en place bien longtemps... J'ai consacré l'après-midi à visiter des sites consacrés à l'art auto-généré (ou auto-génératif, j'ignore comment traduire élégamment) et fait de substantielles trouvailles, qui ont considérablement engraissé mon répertoire de signets chez del.icio.us ! Je manque de temps, malheureusement, pour rendre compte des fruits glânés au cours de cette errance féconde au long cours.

Aussi me contenterai-je aujourd'hui d'indiquer la section Incubator de Quasimondo, où vous pourrez admirer de très belles expérimentations Java et quelques productions en Flash, dont le générateur de machines fractales. Entrez un nombre dans le champ et regardez évoluer l'étrange machine correspondante. Voici la machine du jour de ma naissance :


J'ai généré le fichier Flash grâce au logiciel opensource Camstudio , chroniqué dans ce billet et qui, c'est confirmé, ressuscite de ses cendres sur Sourceforge !

J'accompagne l'animation d'une illustration sonore, en l'espèce, le délicat "Bang Bang" de Nancy Sinatra, turbiné par le léger Dewplayer. Sur feu-Anatole, j'utilisais, comme "desktop webcam", un futilitaire gratuit très côté : j'ai nommé ScWebCam, chroniqué dans ce billet de février 2005. J'ai découvert aujourd'hui Deskcam de Iamcal Software, qui remplit le même office, en étant plus simple à configurer, plus léger et tout aussi gratuit. Seule ombre au tableau : le développement du logiciel semble s'être arrêté en 2003.

Deskcam est un programme qui va faire une photo de votre bureau, la redimensionner à votre convenance et l'enregistrer au format *.jpeg, *.gif, *.bmp ou *.png. L'image obtenue sera automagiquement chargée par FTP sur votre serveur et rafraîchie à un intervalle de temps régulier, que vous configurez librement. Vous pouvez ainsi afficher une capture en live de votre bureau virtuel sur votre blog. Cela n'a bien entendu pas le moindre intérêt...

Ma deskcam est rafraîchie toutes les 10 minutes :

Vendredi dernier, j'ai confisqué la paire de ciseaux de Loucif, qui jouait avec au lieu de relire son "auto-dictée préparée" - c'est un concept spécial ZEP ; j'en toucherai un mot ici avant de le breveter... A la fin de l'heure, mon Loucif, soucieux de récupérer son bien, vient, comme il se doit, pousser son lamento d'élève martyr à mon bureau. Pour faire bonne mesure, je lui rétorque que je lui restituerai le corps du délit en échange d'une rédaction d'une douzaine de lignes expliquant pourquoi (j'ai bien dit pourquoi) je proscris l'usage des ciseaux pendant le cours de français, a fortiori pendant une autodictée.

Aujourd'hui, à son arrivée, Loucif me tend son laïus, proprement surréaliste (et hilarant), que je livre à votre gourmande sagacité :


Vous aurez noté que ma sanction relève de l'arbitraire absolu : si Loucif s'escrime, avec une évidente bonne foi, à faire amende honorable, en répétant sur tous les tons qu'il ne doit jouer ni avec des ciseaux, ni avec des équerres pendant mon cours, à aucun moment, il ne parvient cependant à justifier la sanction, ni à mettre à jour le bon sens qui la sous-tend.

Il a récupéré sa paire de ciseaux, content. Quant à moi, j'ai bien ri dans le métro en lisant sa petite litanie à la Prévert... Il y a peu, j'ai exposé, dans ce billet, comment faire un rollover avec deux images, grâce à un petit code en javascript. Dans la foulée, j'ai créé un générateur de rollovers, le Rollover Maker, qui permet, très simplement, d'obtenir le code à copier-coller.

Aujourd'hui, je me suis toutefois souvenue que GuppY contenait nativement un javascript permettant de créer le rollover optionnel sur les icônes de la barre de menu. J'ai donc pensé qu'il serait judicieux de l'exploiter, d'autant que le code correspondant est d'une simplicité déconcertante. Ainsi, pour obtenir ce rollover :


... j'utilise le mini-code suivant :

<img src="img/ban_carbon.gif" alt="Bannière modèle Carbon" class="imgover" />

Il me suffit :

• d'ajouter la classe class="imgover" au code HTML de l'image de départ
• de verser deux images de mêmes dimensions dans le répertoire img/, la seconde portant le même nom que la première, auquel on adjoint le suffixe _o

... pour que le rollover fonctionne !

Il y a un petit hic : le javascript du rollover de GuppY n'est chargé que si l'option "rollover sur les icônes" est cochée dans l'admin. Donc de deux choses l'une : ou bien cette option est cochée et le rollover fonctionnera partout dans le site ; ou bien il faut modifier le fichier inc/hpage.inc pour que le javascript soit appelé sans condition. Dans ce cas, il suffit de remplacer, vers le début du fichier inc/hpage.inc les lignes suivantes :

if ($­-page[20] != "") {
  echo "<script language="javascript" type="text/javascript" src="".CHEMIN."inc/rollover.js"></script>";
}

par celles-ci :

<script language="javascript" type="text/javascript" src="<? echo CHEMIN; ?>inc/rollover.js"></script>"

Amusez-vous bien ! Les iframes sont à l'origine une exclusivité de Microsoft et leur usage est contestable, en termes de référencement. Aussi vaut-il mieux y recourir à titre exceptionnel, d'autant que les magic'CSS offrent, on va le voir, une alternative intéressante à cette pratique.

Pourquoi l'iframe ?

Souvent, on justifie l'usage de l'iframe en termes d'ergonomie. En effet, en insérant une autre page dans une fenêtre dotée de barres défilantes, on réduit l'espace occupé par l'information à un cadre de dimensions fixes. Cette iframe, créée avec l'Iframe Maker, rend compte de l'économie réalisée :



Assurément, on gagne de la place à l'affichage, mais on doit en contrepartie créer les pages à framer (iframe.html, ici).

CSS : l'overflow

Or, la propriété overflow des CSS permet d'obtenir le même effet, c'est-à-dire de réaliser le même gain de place, sans avoir à créer ces pages à framer. Elle permet de créer, dans une page, une petite boite dotée d'une barre de défilement et d'afficher du contenu dans cet espace limité. En un mot, elle simule l'iframe, dont elle a tous les avantages, sans l'inconvénient de la création de pages externes :



Plus précisément, la propriété overflow permet de déterminer ce qu'il advient d'un contenu (typiquement : du texte) s'il est trop grand pour son conteneur (typiquement : une div), grâce à quatre valeurs :

1. visible : ce qui dépasse est affiché, quitte à se superposer à d'autres éléments [à proscrire]
2. hidden : ce qui dépasse est caché et inaccessible [à proscrire]
3. scroll : que le contenu excède ou non son conteneur, ce dernier est équipé de deux barres de défilement, horizontale et verticale [pourquoi pas]
4. auto : dès que le contenu excède la taille du conteneur, une barre de défilement apparaît et permet d'avoir accès au contenu caché. Si le contenu n'excède pas la taille allouée par le conteneur, les barres de défilement n'apparaissent pas [solution optimale]

Au final, c'est la propriété overflow: auto que nous retiendrons.

Commentaires sur le code

Décortiquons le code utilisé :

<div align="center"><div style="border:5px double #99bb33; padding: 10px; margin: 10px; background-color: lightyellow; width: 400px; height: 100px; overflow: auto; text-align: left;">Ici tout le texte</div></div>

• <div align="center"></div> : pour centrer le cadre, j'utilise une div de centrage
• border:5px double #99bb33; : je dessine une bordure verte double de 5px autour de le fenêtre
• padding: 10px; : j'insère une marge de 10px entre le cadre et son contenu
• margin: 10px; : j'insère une marge de 10px entre le cadre et le reste de la page
• background-color: lightyellow; : je choisis de mettre du jaune clair en couleur de fond du cadre
• width: 400px; height: 100px; : je fixe la largeur et la hauteur du cadre
• overflow: auto; : le cadre sera doté de barres de défilement si le contenu dépasse
• text-align: left; : j'aligne le contenu à gauche

Peut-être ferai-je un générateur pour faciliter la création du code, mais en attendant, l'overflow est la bonne trouvaille du jour ! Cela faisait quelque temps que je songeais à cette réalisation en lisant les posts du forum de GuppY et la recrudescence de questions relatives aux insertions de [tout] dans GuppY...

Après avoir consacré un tutoriel à la balise <object> la semaine dernière, j'ai finalement codé ce week-end l'Iframes Maker qui permet de générer, en visuel, une iframe paramétrable et qui a rejoint mes autres générateurs dans Ma toolbox. L'utilisateur renseigne quelques champs, prévisualise ses changements en direct sur une iframe de démo et récupère in fine le code à copier-coller. Le cadre de l'iframe est entièrement personnalisable, ainsi que ses dimensions. Toutefois, malgré de nombreuses tentatives, je n'ai réussi à faire fonctionner la prévisualisation du redimensionnement qu'avec IE. Avec Firefox, on ne peut prévisualiser que les changements affectant le cadre. Avec IE, tout fonctionne.

Certes, l'usage de l'iframe est contesté, car il pose des problèmes au niveau du référencement et de l'accessibilité du contenu, mais il peut néanmoins s'avérer utile, quand il s'agit d'insérer une page HTML ou PHP dans un billet, sans passer par la balise <object> qui pose plusieurs problèmes de compatibilité. Aujourd'hui, Dan (5ème) a retiré son pantalon pendant le cours d'anglais et j'ai surpris Laura (5ème) en train de se repeindre les dents à coups de blanc correcteur.

Parfois, j'ai l'impression de travailler dans un zoo, mais en fait, c'est un collège. ... sort de la bouche des enfants, ne dit-on pas ? Voici donc une pépite extraite, à coups de stylo rouge, d'une copie d'éducation civique de 3ème (merci à Milie pour le forward) :

"La République française est démocratique, laïque, sociale et invisible".

Railthello est un jeu d'Othello - aussi connu sous le nom de Rerversi - qui se joue en ligne. Il doit son nom au langage de programmation Ruby on Rails dans lequel il a été programmé. On peut jouer, bien sûr, mais aussi assister à des matchs et envoyer le film de ses parties à des amis.

Le but du jeu est de remplir complètement le plateau de jeu, en y déposant des pions blancs et noirs. A chaque tour, les joueurs déposent une pièce de leur couleur sur le plateau. Un joueur ne peut toutefois jouer qu'à la condition qu'il "piège" au moins un pion de la couleur adverse entre le pion qu'il s'apprête à poser et un de ses pions déjà posés. Alors, par exemple, tous les pions blancs piégés entre les deux pions noirs, sont convertis en pions noirs. Les coups possibles à chaque tour sont signalés au passage de la souris sur les cases du plateau. Pour placer un pion, cliquez simplement sur l'une de ces cases vides, lorsqu'elle s'éclaire au passage de la souris.

Gagne celui qui compte le plus de pions posés sur le plateau, donc le plus de points. "Tricky game", really...