Aller directement au contenu

Firefox, le complice de l’ergonome

15/12/2008
4

Mozilla-Firefox-addon-moduleAlors 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 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

Firefox-module-addon-Pencil 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;
Firefox-module-addon-ColorZilla 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);
Firefox-module-addon-FireShot Fireshot et Screengrab! font des copies d’une page entière ou d’une zone particulière (une sorte de Snagit léger); il y a également Pearl Crescent Page Saver Basic avec un peu moins de fonctionnalité;
Firefox-module-addon-MeasureIt MeasureIt: permet de mesurer une zone rectangulaire particulière de la page en pixel;

Gabarits

Firefox-module-addon-Firebug 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;
Firefox-module-addon-Web-Developer 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;
Firefox-module-addon-Feng-GUI-heatmap 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 ;
Firefox-module-addon-Quick-Locale-Switcher 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é;
Firefox-module-addon-IE-Tab IE tab: permet l’affichage d’une page selon le moteur d’Internet Explorer (lorsque ce dernier est installé sur le pc);
Firefox-module-addon-IE-NetRenderer 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é

Firefox-module-addon-TAW3-with-a-click 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-module-addon-ocawatoolbar 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;
Firefox-module-addon-Yellowpipe-Lynx-Viewer-Tool 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;
Firefox-module-addon-Firefox-Accessibility-Extension 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€;
Firefox-module-addon-Juicy-Studio-Accessibility-Toolbar 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).

4 Commentaires

  • Opportun dit :

    Tout ça est vrai dans un monde de desktop et laptop. Qu’en est-il du iPhone et iPod touch?

    Il ne faut pas ignorer cette nouvelle plate-forme. Elle sera un élément des plus important dans les prochaines années.

  • Gianfranco dit :

    Je veux activer JavaScript pour toujours!

  • Thierry B. dit :

    “Opportun” – je suis tout à fait d’accord, les formats d’écran se diversifient et des contraintes ergonomiques en découlent. Nous évoquerons d’ici quelque temps des problématiques liées à ce type d’écran de même que des spécificités d’interaction tactile… à suivre donc!

    “Gianfranco” – je ne suis pas sûr de voir le lien avec ce billet… à part la problématique de l’accessibilité à garder à l’esprit, quel est l’intérêt de désactiver le javascript ou tout type de code dhtml ou RIA?

  • remy66 dit :

    Merci pour tous ces liens.

    Pour les captures, j’utilise :
    Pearl Crescent Page Saver

    Pour le code (qui est indirectement lié à l’ergo) :
    HTML validator
    A++

Laisser un commentaire à Thierry B. Annuler la réponse