Firefox, le complice de l'ergonome

Alors que des navigateurs comme Chrome ou Safari se focalisent sur la facilité d'utilisation et la rapidité d'interprétation des pages web, Firefox reste l'outil incontournable des professionnels du web. Et pour cause, il fourmille d'extensions devenues pour certaines "incontournables". Pour la pratique de l'ergonomie au quotidien, Firefox est sans nul doute notre meilleur ami! Voyez plutôt cette liste d'extensions sans pareil!

Globalement, ces extensions intéressantes concernent les maquettes, les gabarits et l'accessibilité. Certaines nécessitent une connexion pour accéder aux services en ligne. Il y a encore d'autres extensions bien sûr, notamment certaines qui se limitent à quelques compétences en un icône plutôt qu'à un grand nombre de fonctionnalités en une seule barre. Tout dépend du besoin!

Maquettage

Pencil: permet de créer des prototypes (au format epz et png) simplement et grâce à des éléments classiques des interfaces web et logiciels;
Colorzilla: récupère le code couleur d'un pixel de la page selon différent format (RGB, Hexadecimal, etc.), avec la possibilité de zoomer au besoin et de cibler l'endroit du code source où se trouve le pixel ciblé (grâce à l'extension FIrebug);
Fireshot et Screengrab! font des copies d'une page entière ou d'une zone particulière (comme SnagIt):
MeasureIt: permet de mesurer une zone rectangulaire particulière de la page en pixel;

Gabarits

Firebug: permet d'afficher le code source d'une page de manière hiérarchique, afin notamment de cibler une zone particulière de la page. Il permet également de mesurer le temps nécessaire au chargement et à l'interprétation des différents éléments d'une page;
Web developer: une barre dotée d'un nombre incroyable d'outils tels que cibler et obtenir des informations sur les éléments et leur hiérarchie dans la page, modifier la css en direct, activer/désactiver (css, javascritp), valider la propreté du code et cibler les erreurs, etc., l'extension la plus complète pour les professionnels du web;
Feng GUI HeatMap Creator: génère le rendu des déplacements et zones d'attention visuelle, à la manière de l'eye-tracking. L'algorithme est basée sur des modèles classiques de l'attention visuelle en psychologie cognitive et des résultats d'études oculométriques ;
Quick Locale Switcher: permet de modifier la langue préférée par Firefox pour afficher une page, quand la détection de la langue existe pour le site visité;
IE tab: permet l'affichage d'une page selon le moteur d'Internet Explorer (lorsque ce dernier est installé sur le pc);
IE NetRenderer: génère une image de la page selon le moteur d'Internet Explorer et les versions 5.5, 6, 7 (et 8 bêta).

Accessibilité

TAW3: une initiative espagnole qui génère, en un click, l'ensemble des problèmes d'accessibilité selon une analyse basée sur le WCAG 1.0;
Firefox Accessibility Extension, Ocawatoolbar et WAVE toolbar proposent chacune une barre d'outils complète pour identifier les différents types d'éléments qui font défaut en terme d'accessibilité, et offrent les validateurs de code classiques;
Yellowpipe Lynx Viewer Tool et Fangs: permettent de visualiser une page comme le visualiseur textuel Lynx, telle qu'elle sera visible ou interprétée pour un mal-voyant;
Fire Vox: est un synthétiseur vocale permettant de lire autant le contenu de la page visitée (selon la position du curseur ou de la sélection de la souris) que les menus de Firefox lui-même. La voix est par défaut en anglais, et il est possible d'y intégrer une voix française pour 30€;
Juicy Studio Accessibility Toolbar:génère un tableau des contrastes de couleurs utilisés sur une page selon les propriétés d'affichage et le respect de la norme WAI-ARIA;
ColorChecker propose de vérifier dans le même esprit si deux couleurs sont suffisamment contrastées.

Pour plus d'outils ne se limitant pas à FIrefox, allez voir ici chez le W3C. Nous ferons prochainement un post sur les recommandations en accessiblité en particulier.

Certaines extensions ne sont pas encore portées sur Firefox 3, mais il est possible de désactiver la vérification de la version du navigateur pour leur permettent de fonctionner (comment faire ici).