Bookmarklet mon amour…

Vous connaissez les bookmarklets ?! Moi j’adore ^^

Alerte définition @La rache

Un bookmarklet, c’est comme un bookmark, un favoris, une petite étoile jaune quoi… mais qui, au lieu d’être un simple lien vers une page, agit sur la page ouverte via l’exécution de Javascript.

Si vous avez rien compris c’est pas grave, vous pouvez toujours aller lire l’article Wikipédia pour une meilleure explication.

Voici une petite sélection de ceux que vous devriez vraiment avoir dans vos bookmarks.

Responsive Design Test

Ce bookmarklet va vous permettre de tester en une page le résultat de vos jolies @mediaqueries.

Bookmarklet Responsive design test

Vous pouvez le configurer avez les tailles de viewport dont vous avez besoin en utilisant le site de l’auteur : http://www.benjaminkeen.com/misc/bricss/

Affichage d’une grille

Deuxième bookmark dans la catégorie « webdesign ». L’affichage d’une grille css en layer au dessus du site que vous visitez. Voyez plutôt :

 Grid overlay

Pratique pour vérifier qu’on a bien calé tout ce petit monde pendant l’intégration, ou juste pour comprendre le système de grille ;)

Vous en trouverez un sur le site 960.gs, et si celui ci ne vous plait pas GIYF…

C’est quoi cette font ?

La typographie prend aujourd’hui – pour le plus grand bonheur de tous, ou en tous cas le mien – de plus en plus d’importance dans le webdesign.

Ce bookmarklet vous permet de savoir quel font est utilisée pour un texte sans avoir à passer par firebug ou n’importe quel autres inspecteur d’élément.

Fount

Moi j’utilise Fount, mais encore une fois, GIYF, il en existe beaucoup d’autres.

Et en wireframe ça donne quoi ?

Celui-ci est plus anecdotique, mais les résultats sont parfois intéressant.

Il transformera un site en « wireframes ». D’un coup la structure du site devient plus clair…

Wirify - 960.gs

Vous le trouverez sur le site Wirify

Goggles

Maintenant que vous savez tout du site que vous visitez, il est temps de le pourrir…

Ce bookmarklet est juste une idée de génie, si l’on part du principe que tout ce qui est inutile est indispensable

Vous pouvez dessiner sur la page que vous visitez, et voir ce que les autres utilisateurs ont fait sur celle-ci. Une sorte de réseau social global sous-terrain ou un truc dans le genre. On attendra le premier mémoire de fin d’étude sur Goggles pour en savoir plus sur les implications sociologiques sous-jacentes.

Sur le site orange.fr ça donne ça (à l’heure du screenshot – soit le 16/02 à 22h) :

Goggles

A ajouter d’urgence à vos bookmarks pour la beauté du lol : http://goggles.sneakygcr.net/

Kick Ass

Maintenant que vous avez tout pourri, que plus rien n’est lisible, vous pouvez finir de vous défouler en détruisant le DOM de la page.

Vous avez passer des heures à essayer de finir Astéroids, vous passerez des heures à détruire des sites web, juste pour la beauté du geste…

KickAss

Indispensable, cela va sans dire… http://erkie.github.com/

Voilà pour ceux que j’utilise le plus souvent (enfin pour les deux derniers c’est juste qu’il me font marrer, je bosse un peu de temps en temps quand même).

Vous en trouverez plein d’autres sur votre moteur de recherche préféré ou sur le site Marklets, un annuaire plein de bookmarklets.

Et comme on dit, il y a un bookmarklet pour a peu près tout…