Catégories : Logiciels libres ▶ Fondation Mozilla ▶
Mise en ligne : 06/05/05 - 11/05/07 | stéphane09 | 69548 visites

Web Developer

L’installation de l’extension Web Developer est identique aux autres extensions de Firefox. L’interface est francisée (choisir « Localized Version » sur la page « Download » du site de l’auteur, si la fenêtre d’installation de l’extension n’apparaît pas, vérifier que Firefox autorise l’ouverture du popup pour le site considéré). Redémarrez votre navigateur préféré, clic droit dans la barre des menus puis choisissez "Barre d’outils Web Developer". Une nouvelle barre d’outils apparaît.

Cette extension pourrait être définie comme "le couteau suisse pour webmestres". L’utilisation la plus "spectaculaire" est sans doute celle qui concerne les CSS, voir plus bas. Mais les autres possibilités ne sont pas à négliger.

Petite revue des menus :

Dans le premier menu, Désactiver, vous pourrez par exemple

Désactiver le Javascript, utile en terme de test d’accessibilité, en effet le Javascript dans vos pages peut masquer certaines informations.
Pourquoi ne pas repartir de zéro et "désactiver les couleurs de la page", vous pourrez même désactiver tous les styles Css de la page (et ce de façon précise : ceux inclus dans la page, ceux liés à une feuille externe)
Depuis que vous utilisez Firefox, les popups vous manquent ? et bien choisissez "désactiver le bloqueur de popups pour les voir réapparaître.
...

Passons le menu CSS (plus bas) pour s’attarder au menu Form. qui vous permettra de tester les formulaires des pages web :

tester les variables envoyées en Get ou en Post
voir les informations liées aux formaulaires : adresse du script utilisé, ID, voir les mots de passe que vous entrez
...

Le menu images

vous donnera des informations visuelles : taille, affiche/masquer...
vous permettra par exemple de repérer les images qui n’ont pas d’attribut "alt" (accessibilité), qui n’ont pas de taille spécifiée, de repérer les Url des images.

Les menus Informations et Divers sont des petits fourre-tout où l’on trouvera des choses bien utiles comme :

l’affichage des AccesKeys
l’affichage de la taille des blocs
Vous pourrez repérer facilement les "ID" et les "Class"
Lire les informations sur les cookies ou les effacer
Vider le cache
Afficher les commentaires du code Html
...

Le menu "Entourer" permet de repérer la "super-structure" de la page en mettant en évidence les blocs, frames, cellules de tableaux... on peut personnaliser les couleurs d’affichage des blocs en fonction des éléments "div" de la page.

Vous pourrez rapidement redimensionner vos pages dans autant de résolutions que vous souhaitez (il suffit d’en rajouter)

Le menu validation permet de renvoyer vers les "validateurs" connus ( Html, css, accessibilité ). Cette liste est personnalisable [1], et vous seriez bien inspiré d’y rajouter ce validateur Html moins "froid" que celui du W3C et francophone de surcroît. A noter que vous pourrez même tester une page produite en local.

Web Developer est assez intuitif à l’utilisation et se prend donc rapidement en main. Par ailleurs cette extension permet de configurer de nombreux raccourcis-clavier ainsi que de personnaliser les couleurs d’affichage des informations.

Difficile de s’en passer une fois que l’on y a goûté !

Exemple d’utilisation : Le CSS

Attention : si vous utilisez, ou souhaitez utiliser les CSS (Cascading Style Sheet) vous risquez de devenir accroc à Web Developer...

Une feuille de style est un fichier dont l’extension est .css. Il peut être associé à une page Web pour définir son style (couleur de fond, taille des caractères, caractéristique des blocs...) séparant ainsi contenus et mise en forme.

Exemple de l’intégration de la feuille de style framastyle.css sur la page d’accueil du site de Framasoft. Voici le code, placé entre les balises <head> et </head> :

<link href="css/framastyle.css" rel="stylesheet" type="text/css">

On voit ici que la feuille de style est placée dans le répertoire « css ».

Je ne m’étendrai pas sur l’intérêt d’utiliser des feuilles de style pour concevoir des pages Web (rapidité, accessibilité, respect des standards...).

Avant, les CSS, c’était souvent la galère... il fallait éditer le fichier CSS, rentrer des valeurs (sans voir le résultat), enregistrer, revenir au navigateur pour rafraîchir la page Web associé au style... et recommencer tout ça jusqu’à l’obtention du résultat voulu.

Web Developper va vous permettre maintenant d’éditer vos feuilles de styles en affichant directement le résultat.

Tenez, petit exemple basique :

Vous avez une page Web (en local) : ouvrez-là avec Firefox.
Vous avez une feuille de style vide (créer un fichier texte, et changer l’extension .txt en .css).
Cliquez sur l’icône CSS puis « ajouter une feuille de style personnalisée » et ouvrez votre fichier CSS vide précédemment créé. Puis faites, toujours dans le menu CSS, « Edit CSS ». Une SideBar s’ouvre et vous permet d’essayer vos propres paramètres CSS avec affichage du résultat immédiat.

Essayez par exemple l’instruction suivante qui met le fond de la page web en rouge :

body

{

background-color : red ;

}

Là où cela devient intéressant et pédagogique, c’est que Web Developer va vous permettre d’éditer, de modifier, n’importe quelle CSS de n’importe quelle page Web. Cliquez sur « CSS / voir les styles d’un élément particulier » pour que l’information CSS d’un élément particulier s’affiche dans la barre d’état du navigateur. Pour éditer la feuille Css : cliquez simplement sur « CSS / Edit CSS » et essayez de modifier quelques paramètres. Vous pourrez bien sûr enregistrer votre Css modifiée en local puis la transférer sur votre site...

J’ai beaucoup appris comme cela sur les CSS.

Site officiel

[1] en passant par le menu Options

Très bon tutoriaux Css en ce moment sur Pompage.net : épisode 1, épisode 2, épisode 3, épisode 4, épisode 5

Tags: mozilla firefox gecko extension greffon plugin html css javascript js programmation développement
Ajouter des tags (séparés par des virgules ou des espaces) : Attention: tous les caractères spéciaux sont interdits (sauf le .). Les tags n'apparaîtront qu'au prochain rafraichissement du cache (dans plusieurs heures).

<< Mettre à jour >>
:: lien mort :: orthographe :: nouveauté :: mise à jour ::

Vous souhaitez mettre à jour la notice ? La première chose à faire est de déterminer s'il s'agit d'une mise à jour mineure ou d'une mise à jour majeure .

Mineure : un lien mort, des fautes d'orthographe, un lien à ajouter ou encore une petite précision.

Veuillez renseigner les champs ci dessous :

Votre nom ou pseudo

Paragraphe

Type de modification

Les modifications à apporter*
Majeure : une nouvelle version avec des nouveautés, des changements majeurs.

En cochant cette case, vous allez créer une page sur le wiki afin de mettre à jour la notice.

Mettre la notice de Web Developer sur le wiki

<< Poster un message >>
:: question :: précision :: avis :: commentaire :: bug ::

À la une !

Nouveau Framabook : Simple Comme Ubuntu 8.04 !

L'actualité du libre :

Autres logiciels

Framasoft needs you !

Vous trouverez ici une liste de logiciels qui ont fait acte de candidature et qui n’attendent que vous pour réussir avec brio l’examen d’entrée dans notre annuaire.