6 modules complémentaires Firefox essentiels pour les concepteurs
En tant que webdesigner (et utilisateur d’Internet à la pointe de la technologie), il n’ya aucune excuse pour ne pas utiliser Firefox comme navigateur Web principal. Si vous n'utilisez pas encore Firefox, vous devez aller Télécharger c'est tout de suite Firefox fournit non seulement une expérience de navigation Internet haut de gamme, mais il fournit également une quantité infinie de fonctionnalités que vous ne trouverez tout simplement dans aucun autre navigateur Internet.
Les tiers pouvant développer des modules complémentaires pour Firefox, en téléchargeant les meilleurs modules complémentaires disponibles, vous pouvez transformer Firefox en un outil qui augmente considérablement votre productivité et vous fait gagner un temps considérable. Comme il y a tellement de modules complémentaires disponibles à télécharger, il peut être difficile de choisir ceux que vous devriez utiliser.
Par conséquent, j'ai décidé de faire tout le travail de terrain pour vous et de compiler une liste des six meilleurs add-ons de Firefox pour les concepteurs Web.
Développeur web
Bien qu'il s'appelle Développeur web , cet add-on Firefox est absolument inestimable pour les concepteurs Web. Si vous ne deviez télécharger et installer qu'un seul module complémentaire Firefox, c'est celui que je vous recommanderais. La raison en est que cet add-on offre une variété de fonctionnalités utiles, et pourrait être classé parmi les compléments Swiss Army Knife de Firefox .
La première caractéristique de cet add-on que les concepteurs trouveront utile est le menu CSS . Les fonctionnalités de ce menu incluent la possibilité de désactiver les styles, d'afficher les CSS par type de média, d'afficher les CSS, d'afficher les informations de style, d'ajouter une feuille de style utilisateur personnalisée ou de modifier directement les CSS .
La caractéristique suivante intéressante pour les concepteurs est le menu Image . En plus de vous permettre d'afficher des attributs ALT, des dimensions d'image, des tailles de fichier image et des chemins d'image, vous pouvez désactiver les images, rechercher des images brisées, délimiter des images avec des attributs ALT et plusieurs fonctions supplémentaires.
Bien que je puisse consacrer plusieurs pages à toutes les fonctionnalités offertes par cet add-on, je veux simplement aborder quelques autres fonctions que les concepteurs Web trouveront particulièrement utiles. Celles-ci incluent la possibilité de définir différents éléments (allant des cadres aux éléments de niveau bloc), d' éditer du code HTML et d'afficher des éléments cachés .
Pyromane
Bien que Web Developer soit le premier add-on que je recommanderais à tout concepteur, Pyromane court deuxième en termes d'utilité pour les concepteurs.
Avec Firebug, vous pouvez instantanément modifier, déboguer ou surveiller une page Web . Firebug vous donne un contrôle total sur les CSS, HTML et JavaScript de toutes les pages que vous choisissez. Mieux encore, chaque modification que vous apportez est effectuée en direct et instantanément , de sorte que vous pouvez rapidement tester différentes modifications et voir les résultats de ces modifications instantanément.
Comme la plupart des meilleurs modules complémentaires pour Firefox, Firebug va au-delà de ses fonctionnalités de base et offre une multitude d’options qui permettent à tout utilisateur de personnaliser complètement son utilisation de ce module complémentaire. Parmi les fonctions et options supplémentaires offertes par Firebug, citons les raccourcis clavier, la possibilité de contrôler l’endroit où la zone d’édition Firebug apparaît, les guides visuels pour l’édition de CSS, l’analyse de l’activité réseau et la journalisation personnalisable pour JavaScript .
Colorzilla
En tant que concepteur Web, vous ne savez jamais quand l’inspiration vous frappera lorsque vous surfez sur Internet. Par exemple, vous regardez peut-être un site Web et trouvez une couleur que vous aimez vraiment.
Si vous voulez un moyen rapide et efficace de connaître la valeur exacte de HSV et de RVB pour cet outil, vous devez installer le ColorZilla Ajouter.
L'add-on ColorZilla dispose d'une pipette en ligne , ce qui simplifie grandement l' obtention de la valeur exacte d'une couleur spécifique. En plus de la pipette en ligne, ColorZilla offre plusieurs fonctionnalités supplémentaires que la plupart des concepteurs Web trouveront utiles, comme un analyseur de couleurs DOM et un visualiseur de palettes en ligne . L'analyseur de couleurs DOM vous permet de localiser sur la page les éléments correspondant à une couleur donnée et de rechercher les règles CSS spécifiant une couleur donnée, tandis que le visualiseur de palette en ligne vous permet de marquer et de partager les palettes de couleurs qui vous plaisent.
Coup de feu
Bien que votre système d'exploitation dispose sans aucun doute d'une fonction de capture d'écran intégrée, cela ne signifie pas que la capture d'écran par défaut possède toutes les fonctionnalités dont vous avez besoin.
Par exemple, la capture d'écran par défaut de votre système d'exploitation peut-elle saisir des parties d'une page Web situées hors de la fenêtre du navigateur?
Dans la plupart des cas, la réponse à cette question sera non. Heureusement, il existe un module complémentaire de Firefox qui offre cette fonctionnalité, ainsi que diverses autres fonctions utiles.
FireShot est un complément avancé de capture d'écran pour Firefox . En plus de vous permettre de capturer une page Web entière (même si certaines parties de la page Web ne sont pas visibles en raison des contraintes de la fenêtre de votre navigateur), FireShot vous permet également d’ajouter des annotations directement à votre page Web. captures d'écran.
Coup de feu vous donne plusieurs options pour gérer vos captures d'écran. Ils peuvent non seulement être enregistrés dans divers formats de fichiers, mais ils peuvent également être enregistrés sur votre ordinateur, envoyés par courrier électronique à d'autres utilisateurs ou enregistrés sur le serveur d'hébergement FireShot gratuit. Grâce à ses nombreuses fonctionnalités, cet additif a attiré plus de 150 000 utilisateurs actifs et s’est avéré inestimable pour les concepteurs de sites Web et d’autres professionnels de l’Internet.
Validateur CSS / Validateur HTML
En tant que concepteur, vous voulez vous assurer que tous vos efforts peuvent être facilement accessibles aux visiteurs et affichés correctement. L'un des moyens les plus simples de s'assurer que ces deux tâches sont accomplies consiste à valider tout votre code .
Bien qu'il s'agisse de deux add-ons distincts, le validateur CSS et le validateur HTML doivent être installés dans le navigateur de tout concepteur Web. Une fois les add-ons installés, le Validateur CSS peut être accessible à partir du menu Outils, tandis que le validateur HTML est accessible à partir de la barre d'état de Firefox.
Chacun des add-ons valide le code en fonction des normes W3C appropriées . Bien que le validateur CSS effectue simplement une validation standard du code, le validateur HTML fournit des fonctionnalités supplémentaires.
Lorsque vous utilisez le validateur HTML, vous pouvez choisir de valider directement dans le navigateur (où les erreurs sont affichées sous forme d'icône de barre d'état), afficher la source avec des explications d'erreur après la validation ou une validation avec les solutions proposées.
Resizer de la fenêtre du navigateur
En tant que créateur de designs pour Internet, l'un des problèmes les plus frustrants que vous rencontrerez sans aucun doute est la création de designs compatibles avec différentes tailles d'écran.
Comme vous ne savez pas si un visiteur visualisera votre travail en 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 ou 1600 × 1200, il vous incombe de créer des modèles compatibles avec toutes ces résolutions. .
Bien qu’il existe de nombreuses manières de visualiser votre travail à différentes résolutions, j’ai constaté que le navigateur Complément de fenêtre Resizer est le moyen le plus efficace pour accomplir cette tâche. Une fois que vous avez téléchargé et installé cet add-on, vous pourrez redimensionner instantanément la fenêtre de votre navigateur à l'une des tailles de résolution standard répertoriées ci-dessus.
Cela vous permettra de voir si votre design va bien paraître aux visiteurs qui n'utilisent pas la même résolution que vous. La meilleure chose à propos de cet add-on est que si vous l'utilisez conjointement avec les autres add-ons de cette liste (en particulier Firebug), lorsque vous voyez que quelque chose ne s'affiche pas correctement, vous pouvez instantanément modifier votre code. et voir si cela résout le problème, sans jamais quitter votre fenêtre de navigateur actuelle.
Connaître d'autres bonnes extensions pour les concepteurs? N'hésitez pas à commenter et à nous laisser vos commentaires.