Greasemonkey

Greasemonkey est une extension pour les navigateurs web Mozilla Firefox permettant de modifier le comportement d'une page web en associant un script JavaScript au chargement de celle-ci. Il est ainsi possible d'intervenir sur une page web pour y ajouter ou supprimer du contenu et y modifier le comportement des liens, entre autres.

De très nombreux scripts sont mis à disposition par les internautes qui les ont conçus.

Considérons cet outil comme des Bookmarklet 2.0.

Une version pour Internet Explorer est aussi disponible

OverlayComp

Vous trippez maintenant sur Pixel Perfect, et vous ne pouvez plus retenir vos larmes de ne pouvoir faire la même chose dans IE parce que le rendu est toujours désastreux? OverlayComp permet les même fonctionnalité de Pixel Perfect, mais à la façon FireBug Lite et Pi.Debugger

Je vous ai préparé un Bookmarklet pour cet outil.

Voici un exemple que vous pourrez tester:

1) Allez sur le site de la ville de Sherbrooke:

http://www.ville.sherbrooke.qc.ca/webconcepteur/web/VilledeSherbrooke

2) Exécuter le Bookmarklet

3) Rajouter le paramètre suivant dans la barre d'adresse

#comp=http://www.ville.sherbrooke.qc.ca/webconcepteurcontent63/000023300000/upload/Communications/Photos/etudiants.jpg

ce qui donnera:

http://www.ville.sherbrooke.qc.ca/webconcepteur/web/VilledeSherbrooke#comp=http://www.ville.sherbrooke.qc.ca/webconcepteurcontent63/000023300000/upload/Communications/Photos/etudiants.jpg

Ok... c'est solidement moche ce que je vous ai fait faire.. mais ca fait la job non?

• comp - URL vers l'image à superposer
• opacity - Opacité de l'image (valeur de 0.0 à 1.0; default = 0.8)
• align - Soit 'left', 'center', 'right', ou une valeur en pixel de la gauche (default = left)
• left - Nombre de pixel de la gauche (default = 0) - Utiliser avec align:left
• right - Nombre de pixel de la droite(default = 0) - Utiliser avec align:right
• top - Nombre de pixel du top (default = 0)
• interval - Intervalle (milliseconde) que la "step opacity" est appliqué (default = 10)
• step - Quantité d'opacité qui est ajouté ou soustraite à chaque intervalle (default = 0.1)
• z-index - Endroit où le "comp" est appliqué sur la page (default = 100)
• when - Temps en millisecondes après que la page ai fini de télécharger que le "comp" disparaît (default = -1, signifie désactivé)

Pixel Perfect

Pixel Perfect est une extension de FireBug, qui permet aux intégrateurs de superposé une image au-dessus d'une page web.

* Nécessite Firebug

Eviter le conflit des window.onload en JavaScript

Tout l'art du Javascript bien codé passe par le fait qu'il ne soit pas trop intrusif dans une page HTML. Cependant, il arrive qu'un script bloque un autre si vous utilisez plusieurs scripts d'origines différentes. Voici un petit moyen de résoudre cela.

A juste titre, de nombreux Javascripts s'enclenchent à la fin du chargement de la page via un window.onload. Ce qui est beaucoup plus propre que d'insérer dans son code HTML : .

Or, si deux scripts différents désirent s'enclencher à la fin du chargement de la page via un window.onload, seul le dernier script déclaré s'enclenchera. En effet, le window.onload ne peut prendre qu'une seule valeur et chaque nouvelle déclaration écrase la précédente.

Pour remédier à cela, plusieurs possibilités avec ou sans librairies :

Sans librairie : (http://www.babylon-design.com)

// Fonction de stockage des scripts à charger 
FuncOL = new Array(); 
function StkFunc(Obj) { 
    FuncOL[FuncOL.length] = Obj; 
} 
     
// Execution des scripts au chargement de la page 
window.onload = function() {
   for(i=0; i<FuncOL.length; i++) {
       FuncOL();
   }
}

Avec prototype:

Event.observe(window, 'load', votre_fonction, false);

Pi.debugger

Vous connaissez maintenant Firebug lite, qui permet de déboguer vous applications javascript depuis (presque) n'importe quel navigateur ! Et bien Pi.debugger reprend presque les mêmes caractéristiques sauf qu'il se rapproche un peu plus de la version complète de Firebug.

Donc en plus du débogueur de javascript, vous aurez accès à un explorateur XHTML, CSS et DOM ! De quoi ravir les développeurs qui n'utilisent pas Firefox (ça existe ça ?), puisque Pi.debugger est compatible avec:

• MSIE6
• MSIE7
• OPERA 9.2
• WEBKIT/525.1 (Safari)
• FIREFOX
  

L'installation se fait comme pour Firebug Lite, via un fichier .js !

Voici le bookmarklet pour Pi.debugger

FireBug Lite

FireBug Lite est un fichier javascript que vous insérez dans vos pages web pour émuler le fonctionnement de la console de Firebug dans les navigateurs autre que Firefox.

Vous pouvez insérer un tag dans le header de vos pages ou simplement utiliser le bookmarklet pour utilisé FireBug tout aussi simplement.