Je vais cibler ce billet sur les extensions propres à l'infographie, en omettant volontairement toutes les extensions indispensables qui n'ont aucun rapport, ne vous étonnez donc pas si il y a des manques comme l'excellent adblock+, tabmix + ou autres. J'ai par contre ajouté des "mini-extensions" très pratiques qui devraient être fournie en standard avec firefox.
evidemment si j'en ai oublié dans le lot, faites partager votre expérience en commentaire.
les indispensables
- Web developer toolbar: un classique que vous devez déjà tous connaitre, c'est une barre qui permet de faire tout ce dont un webdesigner a besoin, de la validation du code à l'édition à la volée, en passant par l'affichage de règles, la simulation de résolutions pour tester son site, la gestion des images et l'affichage de toutes les infos possible sur un mise en page html, bref, un must.
- Firebug: Au départ cette extension ne figurait pas dans ma liste car je l'avais essayé à la va vite et désinstallée car je trouvais qu'elle faisait doublons avec webdeveloper, un oubli impardonnable corrigé par un collègue américain du sud-ouest . Après un court (2eme) essai je me suis aperçu que si dans les fonctions on peut penser que ça fait doublons, dans les faits firebug est ZE extensions pour faire du layout css, avec liste des propriétés hérités, possibilités de changer les valeurs à la volée, d'activer/désactiver des propriétés, aperçu des margin/padding etc directement dans la page (pratique pour voir les padding hérités et autres conneries qui nous font chercher 3h le problème) etc... bref beaucoup plus souple que webdevelopper pour cet usage, je regrette de ne pas y avoir prété plus d'attention au départ, j'aurai gagné pas mal de temps pour faire le theme de ce blog.Ceci dit je pense que je vais l'utiliser pour optimiser la feuille de style et éviter les doublons.
- Fireftp: un client ftp inclus dans firefox, je n'utilise plus que ça pour uploader mes fichiers, c'est très pratique.
- ColorZilla: une extension permettant entre autre de "piquer" une couleur et de l'enregistrer automatiquement dans le presse papier dans le format voulu, rvb et hexa, un must pour avoir les références couleurs qui vous plaisent !
- Flash Switcher: permet de switcher entre les versions de flash pour tester son site et voir si il marchera sur les lecteurs pas à jour.
- Google pagerank status: pour avoir le pagerank google en un seul coup d'oeil, pratique pour le référencement
- ImageZoom: pour zoomer ou dezoomer sur n'importe quelle image affichée, très pratique pour voir les détails de certaines photos
- Save image in folder: un énorme gain de temps pour enregistrer les images trouvées sur le web: il suffit de pré-configurer des dossiers (genre mes images, images macro, portraits etc...) puis de faire un clic droit sur l'image et se voir proposer l'enregistrement dans un de ses dossiers ! beaucoup plus pratique pour trier ses photos à la volée et éviter le fastidieux "enregistrer l'image sous... chercher le dossier...enregistrer"
- IEtab: vous connaissez aussi surement, ça permet d'avoir le moteur d'internet explorer dans firefox, c'est très pratique pour voir des sites interdits aux autres navigateurs qu'IE, et pour tester une mise en page sans changer de navigateur. ATTENTION: j'ai déjà remarqué des différences entre le rendu d'IE tab et le vrai IE, ne basez donc pas tous vos tests là dessus (ce phénomène est d'ailleurs inexplicable vu que c'est le même moteur qui est utilisé)
- Screengrab: extension permettant de faire un screenshot de la page web en cours et de l'enregistrer directement. Vous pouvez faire une capture d'écran de la portion visible, de l'intégralité de la page ou d'une selection précise.
celles qui font gagner du temps
- Hashcoloured tabs +: permet d'ajouter un carré de couleur aux sites qui n'ont pas de favicon, en se basant sur l'url du site. ça n'a l'air de rien, mais quand on à 15 onglets ouverts on se rends compte de l'utilité du machin pour retrouver sa page
- Faviconize tab: Une extension qui permet de réduire l'onglet à la seule taille de la favicon. C'est un gros gain de place dans la barre d'onglets, car il y a plein de sites qui n'ont pas besoin d'avoir un onglet complet. Je m'en sert par exemple pour gmail, netvibes, google calendar, enfin bref les sites dont la favicon est parlante et le titre de page pas important. Vous pouvez "faviconiser" un onglet en faisant alt+clic ou en définissant à l'avance les sites ou domaines devant être "faviconisés".
- Linkification: indispensable ! transforme tous les liens textuels en vrais liens clicables de manière 100% transparente, je ne peux plus m'en passer !! Avant je rechignait à copier/coller les longs liens dans un nouvel onglet, le glisser-déposer dans la barre ne marchent pas à tous les coups, maintenant je ne me pose plus de questions !
- Locationbar²: une extension qui met en valeur des éléments de l'url comme le domaine pour une lecture immédiate, très pratique pour repérer le site sur lequel on se trouve
- Resizeable Textarea: une extension invisible dont je ne pourrai plus me passer non plus: elle permet de redimensionner les zones de textes, tout simplement. très pratique sur les forums ou les formulaires où on ne vous accorde que 5 lignes de texte pour écrire votre message, vous obligeant à scroller pour vous relire
les moteurs de recherches
les extensions c'est bien beau, mais firefox permet aussi d'inclure des moteurs de recherches qui peuvent faciliter grandement votre vie d'infographiste/webdesigner
- Wikipedia images: recherche des images libres de droits dans la bibliothèque wikipédia
- documentation css/html/actionscript mediabox: cherche dans la doc mediabox
- creative commons: permet de chercher du contenu sous cette licence
- flickr tags: permet de chercher des images sur flickr
1 De CaptainAmerica - 08/09/2007, 15:36
Et oui tu en as oublié un aussi essentiel que Webdeveloper !
C'est Firebug, qui est similaire à Webdeveloper mais qui est sur certains points notamment des infos graphiques sur le layout plus pratiques. Les deux sont complémentaires même s'ils semblent similaires dans les buts. http://extensions.geckozone.org/Fir...
2 De Inkboy - 08/09/2007, 19:00
3 De CaptainAmerica - 08/09/2007, 19:50
Webdeveloper a des fonctions propres (sur les images ou les tests de validation par exemple) mais comme inspecteur DOM poussé pour le xhtml-css-js, je préfère l'interface et l'ergonomie de firebug. Pour cet usage là (DOM), je prends webdeveloper pour un repérage rapide, mais quand ça se complique, j'utilise FireBug.
Ne serait-ce que l'interface des infos, comme par exemple ici pour la composition d'un block avec sa représentation graphique : http://www.le-studio-americain.com/... (image jpg, 178 ko)
Webdeveloper est plus comme un couteau suisse, Firebug comme un outil spécialisé.
4 De Inkboy - 08/09/2007, 22:48
Ah oui effectivement avec un screenshot ça calme de suite :RESPECT: :D !! d'autant que je me sert très souvent de cette fonctionnalité dans Webdeveloper, mais que je ne la trouvais pas super "carrée" (je faisait outline custom elements, quelques fois en affichant le nom et la taille des blocs, mais c'était vite illisible) J'installe (réinstalle en fait) de ce pas firebug pour le tester plus en profondeur, et je l'ajouterai dans la liste quand j'aurais testé à fond.
Merci pour l'exemple en tout cas !
//edit: bon OK j'ai testé 2 min, et je vois qu'apparemment je suis passé à coté de quelque chose d'énorme, puisqu'on peut désactiver les propriétés au cas par cas, les listes d'héritages sont très claires, l'aperçu de la box est géniale, bref, c'est ZE outil pour travailler un layout. Quand je pense à certaines fois où je me suis galérer à cause d'un héritage foireux :HONTE: ben du coup je vais éditer mon post.
par contre tu peux me dire comment je fais pour avoir un encadrement bleu direct sur la page comme sur ton screen ? et on se le boit quand ce coup au fait ?
5 De CaptainAmerica - 10/09/2007, 17:01
(Pour le coup à boire Là je vais partir en voyage d'affaire :D 3 jours mais je t'envoie un mail de suite !
6 De SPAM - 07/11/2008, 09:55
ranafout' allez spammez ailleurs, vous êtes quand même sacrément gonflés, c'est même pas en rapport avec le billet !!
7 De elolwin - 17/10/2010, 15:37
Il y a une autre extension dont je me sers beaucoup pour le webdesign et l'intégration c'est MeasureIt, ça t'indique la hauteur et la largeur en px de ta sélection !
https://addons.mozilla.org/fr/firef...