Voici un nouveau bookmarklets pour développeur Web. J'évoquais déjà hier à propos de l'édition spéciale internationale de la newsletter Mozilla Links, des bookmarklets permettant de traduire la page en cours. J'indiquais dans un précédent billet sur un bookmarklet forçant l'affichage des liens longs dans les tableaux (pratique pour les forums Web) qu'un « bookmarklet est un signet/favori, contenant des instructions en JavaScript, qui commande une action ou une suite d'actions du navigateur, en local, sur la page courante. » Ils ne fonctionnent pas toujours de la même façon sur tous les navigateurs, chacun n'ayant pas la même définition du JavaScript ni le même support.

Le bookmarklet du jour est pour les développeurs Web. Les utilisateurs de la barre d'outils pour Mozilla (la suite et Firefox) Web Developer sont accoutumés aux JavaScript qui met en valeur la structure HTML des pages Web. Ces fonctions utilisent la coloration des bordures et modifient la disposition des éléments formant la page. Le bookmarklet fournit par make-believe.org lui modifie le fond des différents éléments. Ainsi, leur disposition n'est pas modifiée. Les couleurs choisie sont assez sombre sauf quand au-dessus de dix niveaux d'inclusion des balises. Le fond est alors mis en rose. C'est assez rare dans une page bien codée mais très courant pour une mise en page par tableaux. Ce bookmarklet a été testé sur Mozilla 1.7b, Firefox 0.8, Opera 7, IE 6.0 et Safari. N'hésitez pas à partager votre expérience dans les commentaires ci-dessous.

Glissez-déposez les liens suivants dans votre barre personnelle ou barre de liens.

Topographie

javascript:(function(){function crawl(e, r){if (e.nodeType!=1)return;var ch = e.firstChild;while (ch!=null){crawl(ch, r+1);ch= ch.nextSibling;}var c ='#'+r.toString()+r.toString()+r.toString(); if(r>9) c='#FCC';e.style.color='white';e.style.background='none';e.style.backgroundColor=c;e.style.borderColor=c;}crawl(document.getElementsByTagName('body')[0], 0);})()

Topo avec fonds

Un bookmarklet alternatif qui conserve les images de fond.

javascript:(function(){function crawl(e, r){if (e.nodeType!=1)return;var ch = e.firstChild;while (ch!=null){crawl(ch, r+1);ch= ch.nextSibling;}var c ='#'+r.toString()+r.toString()+r.toString(); if(r>9) c='#FCC';e.style.color='white';e.style.backgroundColor=c;e.style.borderColor=c;}crawl(document.getElementsByTagName('body')[0], 0);})()

Topo 3D

Jesse Ruderman propose une petite modification qui donne un effet 3D aux différents blocs de la page.

javascript:(function(){function crawl(e, r){if (e.nodeType!=1)return;var ch = e.firstChild;while (ch!=null){crawl(ch, r+1);ch= ch.nextSibling;}var c ='#'+r.toString()+r.toString()+r.toString(); if(r>9) c='#FCC';e.style.color='white';e.style.background='none';e.style.backgroundColor=c; e.style.border='1px outset' + c;}crawl(document.getElementsByTagName('body')[0], 0);})()
make-believe.org, Topographic page layout, 1er avr. 2004, Joseph