Le développement d'un site Web de qualité demande de disposer des bons outils en plus d'un éditeur de code comme Nvu par exemple. Un des meilleurs disponible pour développer et tester vos pages Web c'est le navigateur Mozilla Firefox.
Note aux utilisateurs, utilisatrices :
Lors de l'installation du programme, choisissez l'option Installation personnalisée afin de pouvoir accéder à l'installation des outils de développement intégrés
À part naviguer
La version standard de Firefox est livrée avec plusieurs outils intégrés suffisamment puissants pour faire de ce dernier un programme essentiel du développement Web.
Vous disposez de :
Avec Firefox, on peut voir le code source d'une page comme dans n'importe quel navigateur cependant il offre une intégration différente. Au lieu de renvoyer le code source vers un éditeur externe, il utilise son propre système d'affichage avec mise en évidence de la syntaxe et coloration des balises HTML que ce soit pour la page complète ou une sélection de celle-ci.
En plus, sa parfaite intégration avec le validateur HTML Tidy (voir thème Continuer) en fait un outil d'analyse sémantique et de construction des pages Web remarquable.
Firefox peut fournir des informations précises pour chaque page Web
La console JavaScript est destinée aux développeurs de scripts afin qu'ils puissent érire et tester soit des routines JavaScript soit des scripts complets externes.
L'interface utilise les composants XPCOM qui chargent dynamiquement les scripts dans la console en même temps que la page Web se charge et renvoie les messages d'erreurs JavaScript ou les conflits avec telle ou telle extension.
Pour chaque élément HTML, objets du document, l'inspecteur fournit une liste d'informations incluant les règles CSS ; le positionnement de chaque élément, sa valeur nodale pour un accès script, etc. Avec l'extension Inspecter l'Element vous avez un direct à l'inpecteur DOM pour l'élément sélectionné.
En plus des outils intégrés, Firefox peut recevoir des programmes additionnels, appelés extensions, qui lui apportent de nouvelles fonctionnalités pour le développement et la maintenance d'un site Web mais pas uniquement.
Quelques unes, parmi les plus utiles, seront décrites dans ce diaporama. Elles seront classées par thèmes : Débuter, Continuer, Approfondir, Rendre accessible.
Bien d'autres extensions pour les développeurs sont disponibles sur le site de Mozilla. Jetez un coup d'oeil au menu outils pour développeurs.
Les francophones visiteront avec profit le site Geckozone, une référence en la matière.
Quelques extensions simples et pratiques.
Launchy. Ouvrir une page Web dans plusieurs navigateurs différents, éditer la source dans un éditeur de votre choix ou encore voir l'image dans un visualisateur ! Indispensable.
Un fichier de configuration personnel est à votre disposition ; utile pour le fonctionnement sous Linux. Extension native sous Windows, la configuration sous cet OS est automatisée.
Auteur : Henrik Gemal
MeasureIt dessine une règle en filigrane, mesure un élément et vous donne sa taille en pixels (largeur et hauteur).
Auteur : Kevin Freitas
ColorZilla est bien plus qu'un simple outil de gestion des couleurs. En survolant un élément avec la souris il vous donnera de multiples informations : couleur, emplacement, taille, chemin DOM de l'objet survolé, etc. Cette extension dispose non seulement d'une pipette mais aussi de multiples palettes de couleurs, un zoom, un accès à l'inspecteur dom, bref un must !
Auteur : Alex Sirota
LinkChecker vérifie la validité de chaque lien d'une page Web.
Une coloration de type vert, jaune, rouge vous indique si le lien est valide, douteux ou cassé
Auteur : Kevin Freitas
Aardvark est un outil qui encadre l'élément pointé avec la souris, fournit sa valeur ainsi que ses attributs (id, class). La touche "v" du clavier visualise le code source de l'élément pointé.
Auteur : Rob Brown
CuneAform est un éditeur HTML en mode WYSIWYG basique suffisant pour satisfaire la création de pages Web sans prétentions mais fonctionnelles.
L'enregistrement de la page est d'abord envoyé vers Firefox avant d'être sauvegardée définitivement.
Auteur : cuneAform Community
Des extensions plus complètes pour être au coeur du développement.
Validateur HTML. Basé sur Tidy, le célèbre validateur du w3c, ce programme analysera votre page selon les normes officielles qui définissent les fameux standards du Web.
En plus du listage des erreurs, un écran d'aide analyse l'erreur (sa cause), fournit une solution et propose des exemples. Indispensable.
Auteur : Marc Gueury
Elle transforme de fait Firefox comme l'outil incontournable du développement Web. Web Developper Extension ajoute une barre d'outils dans la fenêtre du navigateur. Elle peut, entre autres, souligner les éléments dépréciés ; donner la taille des images ; activer, désactiver ou réécrire les feuilles de style pour des besoins de tests et les sauvegarder si besoin est ; donner des informations sur les formulaires et bien plus encore. Indispensable !
Auteur : Chris Pederick
View Rendered SourcePour comprendre la structure sémantique d'une page web par coloration, utile lorsque vous travaillez avec des scripts. Cette extension s'intègre parfaitement à l'extension Platypus, la version WYSIWYG de Greasemonkey (voir thème Approfondir).
Auteur : Jennifer Madden
Fireftp est un client FTP d'excellente facture. Gérez et accéder à vos sites web depuis Firefox !
Auteur : Mime Cuvalo
Live HTTP Headers affiche en temps réel les information des entêtes HTTP des page Web.
Pour un développement Web maîtrisé et professionnel.
Rss Editor est un éditeur de flux RSS en mode WYSIWYG. Faîtes profiter tout le monde des dernières informations de votre site.
Auteur : WC Leung
CodeTch est un remarquable éditeur en mode texte ou WYSIWYG. Attention une extension à suivre de très près ; de la puissance en développement : HTML, PHP, C++, XML, etc
Auteur : Zachary Carter
Le Fameux Venkman dont tout le monde dit tant de bien en ce qui concerne le débogage de JavaScript à la fois console JavaScript et interface graphique de gestion des scripts. Pas simple à aborder.
Auteur : Robert Ginda
JS Console, à ne pas confondre avec la console JavaScript est une console étendue pour les développeurs de JavaScript. Il y a tout ce qu'il faut pour développer, tester, travailler d'un simple clic de souris vos scripts et bien plus grace à un ensemble de commandes contextuelles.
View Formatted Source affiche la source du document sous forme d'arbre et affiche à la volée les informations de style CSS pour chaque élément. Deux modes sont disponibles : en ligne pour voir la source d'un élément particulier et normal pour voir la page complète. Utile pour bien comprendre la relation entre informations de style CSS et balises HTML.
Auteur : Felix Ritter
Deux extensions autant adulées que redoutées. Elles vont au-delà du développement Web et permettent, grâce à des scripts écrits en JavaScript, de modifier le comportement de n'importe quel site Web qui arrive dans votre navigateur.
Extensions destinées aux plus confirmé-e-s d'entre vous !
Greasmonkey, l'extension dont on parle beaucoup !
Auteur : Aaron Boodman
Platypus, sa version en mode WYSIWYG pour créer dynamiquement vos scripts.
Auteur : Scott R. Turner
Penser à rendre accessible ses pages
Checky est une suite de liens vers des validateurs gratuits ou commerciaux afin de tester la validité de vos pages selon la cible choisie : HTML, WAI, CSS, RDF, RSS, XML, Section 508
Auteur : Joachim Schreibe
Mozilla Accessibility Extension est orientée vers le développement et l'analyse de vos pages, comme la Web Developper Extension, mais, ici, très précisément sur l'accessibilité.
Auteur : UIUC DRES (Université aux États Unis)
Accessibar Toolbar est une extension similaire à la précédente moins orientée vers le développement mais avec une option de lecture orale et la persistance automatisée des choix.
Auteur : Edan Kemelman
Fangs donne une représentation visuelle et textuelle d'une page WEB de la même manière qu'un lecteur écran.
Intimidant toutes ces exntensions mentionnées dans ce diaporama ? Il est bien possible qu'elles résolvent et simplifient de nombreux problèmes, cause de frustration et de perte de temps !
Familiarisez-vous avec la Web Developper Extension, ColorZilla, l'Inspecteur DOM et le validateur HTML. Vous n'en serez que plus satisfait !
Bien des points n'ont pas été abordés comme le support de XML, de XSLT, bref des langages plus évolués et évolutifs qui vont être l'un des atouts majeurs des prochaines versions du navigateur.
Traduction, adapatation, modification (après accord de l'auteur) : jean-marc juin (fun-sun) pour framasoft.