En plus d'une conception graphique simple et percutante, d'une écriture correcte, valide et sémantique et d'un contrôle de qualité soigné qui est le fruit de la précision et de la minutie, il existe de véritables outils en ligne qui facilitent la production d'un résultat pleinement convaincant.
Prêt pour la liste ?
Il s'agit de programmes d'aide ou de plugins, qui ne remplacent pas le logiciel de base classique et n'affectent pas la qualité de votre talent ou de votre effort.
Voici le premier outil que vous connaissez certainement aussi :
Firebug : l'outil dont vous ne pouvez pas vous passer
On exclue immédiatement cet outil, non pas parce qu'il n'est pas utile, en fait c'est probablement le premier outil dont vous ne devriez jamais vous priver, mais parce que sur ce blog vous trouvez déjà un guide très complet sur firebug.
Il décrit en détail les caractéristiques de cet outil qui sont restées stables au fil du temps. Au moment de la rédaction de ce guide, vous en êtes à la version 1.8.4.
Développeur Web : vous aide et s'intègre comme outil de développement
Disponible pour les systèmes d'exploitation suivants :
Cette extension, disponible pour Firefox et Chrome, ajoute divers outils de développement au navigateur.
Associé à Firebug, il vous permet d'interagir de manière approfondie avec chaque page Web grâce à de nombreuses options.
Après l'installation, juste en dessous de la barre d'adresse, la barre "Web developer" apparaîtra avec une série d'icônes contemplatives :
La liste des actions est très large et l'utilisation de cet outil est vraiment efficace car il permet d'agir rapidement sur les paramètres du navigateur, sans jongler entre ses différentes fenêtres natives.
Avec Firebug, l'analyse de chaque aspect d'une page est très approfondie et il est beaucoup plus difficile de passer à côté des plus petits détails.
Validateur HTML : utile pour corriger les erreurs
Disponible pour les systèmes d'exploitation suivants :
HTML Validator, basé sur les algorithmes de Tidy et OpenSP, tous deux développés par le W3C (World Wide Web Consortium), est une extension pour Firefox qui aide le webdesigner à corriger les erreurs dans le HTML (même le HTML5 !), en les distinguant entre trois types :
Une fois l'outil installé, un résumé de la validation HTML apparaît dans la barre d'état avec le résultat réparti entre erreurs et avertissements.
En cas de HTML valide, une icône verte apparaîtra à côté des mots "0 erreur ou 0 avertissement".
Enfin, la commande "Nettoyer", au mieux de ses capacités, fournit automatiquement un code valide et sans erreur.
Difficile de se passer de cette extension.
Contrôleur de contraste WCAG : utile pour améliorer l'accessibilité d'un site web
Disponible pour les systèmes d'exploitation suivants :
Si le devis accepté par votre client prévoit spécifiquement l'accessibilité totale du projet pour les personnes souffrant de divers types de déficiences visuelles, cet outil est pour vous.
Le vérificateur de contraste WCAG vérifie le schéma de couleurs pour s'assurer qu'il est correct pour la perception visuelle, selon les principes des WCAG1 et WCAG2.
Dans la barre d'état, après l'installation, il y aura une icône de roue de couleur et un élément supplémentaire dans le menu "Outils".
Vous pouvez ouvrir cette extension de deux façons : elle ouvrira une barre latérale sur notre gauche qui contient en haut les champs pour le code couleur (à la fois hexadécimal et RGB) du premier plan et de l'arrière-plan.
En bas, il y a deux onglets :
Dans les deux onglets, il est possible de sélectionner un seul élément d'une page (un paragraphe, un lien, une image, etc.) et de vérifier qu'il passe les paramètres de validation avec une vision "normale" et une vision "dyschromatopsie", divisée à son tour en :
La validation peut être considérée comme terminée lorsque les rapports d'erreur sont nuls.
Ce module complémentaire est utile même si ce n'est pas votre client qui nous a demandé une accessibilité totale pour le projet.
Il vous est souvent arrivé de voir des mises en page avec des couleurs trop claires sur du blanc, avec pour résultat une perte de lisibilité des textes : un feedback objectif selon des critères précis acquiert beaucoup plus d'autorité en fournissant la direction à suivre pour corriger les "erreurs".
Colorzilla : utile pour récupérer une couleur à partir d'une page web
Disponible pour les systèmes d'exploitation suivants :
Avec cet outil, disponible uniquement pour Firefox, vous avez :
Il existe toutes les manières possibles et imaginables de coder les couleurs : l'hexadécimal n'est pas le seul système.
Il s'agit d'un complément fantastique qui permet de gagner du temps et d'éviter en partie de dépendre nécessairement d'un logiciel tiers (comme Photoshop) pour récupérer la couleur dont vous avez besoin.
Conclusions
Voici la liste de modules complémentaires utiles pour un concepteur de sites web : même un seul outil nous aide à être plus efficaces et plus créatifs dans la production de vos projets.
Ces petites applications dans le même environnement de travail (le navigateur) ne nuisent pas à votre travail, mais offrent plutôt une assurance sur la qualité de chaque aspect que vous traitez.
