Des outils bien pratiques pour le développement web

Plate-formes : Extension Firefox (Linux, Mac, Windows, etc.).
Liens : Geckozone (version francisée), Firefox Addons, Mozdev.


FireFTP est un client FTP très pratique, pour la simple et bonne raison qu'il s'intègre dans un onglet Firefox, ce qui n'est pas négligeable lorsqu'on fait du développement Web : après avoir vérifié les modifications apportées à votre site web en local, vous faites un rapide clic sur son icône (que vous avez, via Affichage > Barre d'outils > Personnaliser, judicieusement placé entre votre barre d'adresses et votre barre de recherche ), et vous faites un rapide cliquer-glisser pour envoyer vos fichiers . Avez-vous déjà vu quelque chose de plus pratique ?



FireFTP intègre toutes les fonctions qu'on demande à un client FTP, dont :

• le choix d'un répertoire local et distant par défaut ;
• la possibilité de garder les répertoires locaux et distants synchronisés ;
• la possibilité, par un simple clic droit ou via un raccourci clavier (Ctrl + O), de voir le fichier sur le web ;
• le copiage de l'URL d'un fichier en vue de son partage via HTTP ou FTP.

Plate-forme : Extension Firefox (Linux, Mac, Windows, etc.).
Liens : Version francisée, Firefox Add-ons, Site officiel.


Site compatible 800 * 600, 640 * 480, validité XHTML, CSS, textes alternatifs des images, autant de choses qu'on aimerait tant savoir quand on développe pour le web. Eh bien figurez-vous que la barre d'outils "Web Developer" vous donne tout ça, et plus. Vous pouvez éditer le XHTML, le CSS, entourer l'élément survolé et connaître son nom. Bref, tout y passe, du rendu visuel à l'accessibilité en passant par la sémantique et le rendu des versions imprimables. Avec cet outil, plus aucune excuse pour avoir mal refermé une balise .


Note : vous pouvez elle aussi la faire apparaître / disparaître en un clic en l'ajoutant à votre barre de navigation .

Avec KRuler

Plate-forme : Linux.
Nom du paquet : kruler.



Kruler est une règle d'écran très pratique ! Elle vous permet en effet de mesurer très précisément des longueurs sur votre écran. Sympa pour découper un design et préciser ses dimensions en CSS .


Note : ne pas se fier aux nombres marqués sur la règle : la mesure commence au bord extérieur de la fenêtre (bord extérieur gauche, dans le cas présent).

Avec la barre d'outils Web Developer

Eh oui, la barre d'outils Web Developer permet vraiment de faire plein de choses, même mesurer à l'écran. Pour ce faire, allez dans Divers > Afficher l'outil de mesure. Je vous laisse vous familiariser avec .

Avec MeasureIt

Plate-forme : Extension Firefox (Linux, Mac, Windows, etc.).
Liens : Firefox Add-ons.

MeasureIt se présente sous la forme d'un bouton qui se place à gauche de votre barre d'état, et fonctionne comme le module précédent.

Avec KColorChooser

Plate-forme : Linux.
Nom du paquet : kcoloredit.



On est souvent amené, lors du codage d'un design avec CSS, de préciser les couleurs de fond (par exemple) de différents éléments. Et plutôt que de faire une capture d'écran puis d'ouvrir un logiciel de retouche d'image pour utiliser seulement la pipette, on aimerait parfois employer un utilitaire plus léger : c'est là que KColorChooser, simple pipette d'écran, intervient. Dès que vous cliquez quelque part, elle vous donne les codes RGB, HSV et hexadécimal de la couleur sur laquelle vous avez cliqué. Vous pouvez même enregistrer les couleurs qui vous sont chères (tiens, pourquoi pas « la couleur chair », d'ailleurs ? ).

Avec FireColour

Plate-forme : Firefox (Windows, Mac, Linux).
Lien : Firefox Add-ons.

FireColour est un éditeur de palettes, qui, sous Windows seulement, est également doté d'une pipette.

Avec Agave

Plate-forme : Linux.
Nom du paquet : agave.
Lien : Site officiel.



Agave est un logiciel qui permet d'avoir du goût : si, si, je vous jure que c'est vrai. Autant vous dire que quand je l'ai découvert, j'étais aux anges ? ? . Rendez-vous compte : vous choisissez une couleur dans la palette, et Agave vous génère aléatoirement une palette de quelques couleurs (deux à quatre), qui sera soit dans les mêmes tons que la couleur choisie (mode monochromatic), soit assez proche (analogous), soit complémentaire (mode complements), etc. Comment ça marche, on ne sait pas¹, mais ça marche .

1. Enfin avec quelques connaissances en développement vous pouvez le savoir, puisque ce logiciel est libre.

Avec Palette Grabber

Plate-forme : Extension Firefox (Linux, Mac, Windows, etc.).
Lien : Firefox Add-ons.

Cette extension, qui placera une petite icône à gauche de votre barre d'état, permet d'exporter la palette de couleurs d'un site en vue de l'utiliser dans un logiciel de manipulation d'image. Les formats supportés sont les suivants :

• GIMP color palette (.gpl) ;
• Adobe color palette (.aco) ;
• Adobe Fireworks color table (.act) ;
• Flash color palette (.clr) ;
• Paint Shop Pro color palette (.psppalette) ;
• fichier texte : sous la forme suivante :
  Code : Autre

  1 2 3 4

  127 124 69 71 84 112 80 80 80 87 97 120

Plusieurs versions d'Internet Explorer

Sous Windows

Multiple IE : des versions 3.0 à 6.0.

Sous les Unix (Linux, Mac, etc.)

ies4linux vous permettra d'installer sous Linux et grâce à WINE les versions 5.0, 5.5 et 6.0 d'Internet Explorer.

Pour l'installer sous Ubuntu, commencez par lancer un terminal, tapez-y : Code : Console en remplaçant gedit par kedit si vous êtes sous KDE, ou nano si vous n'avez ni l'un ni l'autre. Au prompt, tapez votre mot de passe (les caractères ne s'affichent pas) et appuyez sur Entrée. Cherchez (Ctrl + F) la ligne suivante : Citation : dépôt multiverse où fr peut varier suivant votre géolocalisation et où feisty est la version actuelle au moment où j'écris ces lignes (2007/09/01), donc pas forcément la dernière : remplacez feisty par le nom de code de la version actuelle d'Ubuntu. Enlevez le dièse (#) devant cette ligne : il sert à la commenter, c'est-à-dire à dire au gestionnaire de paquet que ce dépôt n'est pas actif. En enlevant le dièse, on décommente donc la ligne, ce qui permet d'activer le dépôt .

Allez maintenant tout en bas du fichier et rajoutez ces lignes : Citation où encore une fois feisty est la version actuelle d'Ubuntu. Vous pouvez maintenant fermer votre éditeur de texte.

Toujours dans le terminal, tapez maintenant les commandes suivantes :
Citation
Code : Console
Code : Console

On va maintenant télécharger ies4Linux :
Citation : code console
On l'extrait de son archive :
Code : Console
On se dirige dans le dossier contenant le précieux installateur : Code : Console
Et on lance le script d'installation :
Code : Console
Vous n'avez plus maintenant qu'à suivre les consignes d'installation, ça va aller tout seul, vous verrez .

Internet Explorer dans Firefox

IE Tab

Plate-forme : Extension Firefox (seulement Windows).
Liens : Firefox Add-ons.

IE View

Plate-forme : Extension Firefox (seulement Windows).
Liens : Firefox Add-ons.

Safari dans Firefox

Plate-forme : Extension Firefox (seulement Mac).
Liens : Firefox Add-ons.

Quick Locale Switcher

Plate-forme : Extension Firefox (Linux, Mac, Windows, etc.).
Lien : Firefox Add-ons.

Cette extension, qui viendra placer avantageusement une icône à droite de votre barre d'état avec un petit drapeau de votre langue par défaut, vous permettra de changer facilement et rapidement l'identification linguistique de votre navigateur, ce qui sera très utile lorsque vous créerez des sites multilingues détectant automatiquement la langue du visiteur, en PHP par exemple .

Utiliser les feuilles de style alternatives

Plate-forme : Extension Firefox (Linux, Mac, Windows, etc.).
Liens : Firefox Add-ons.

La barre d'outils Web Developper permet, via Options > Fonctionnalités persistantes, de faire persister les styles alternatifs (c'est-à-dire qu'on ne revient pas au style par défaut à chaque rechargement du site), mais pour vos visiteurs, ce n'est pas très pratique d'installer cette extension pour ne se servir que de cette fonctionnalité . Heureusement, il y a StyleSheet Chooser Plus, une extension qui vous veut du bien qui elle aussi permet de faire persister les styles ainsi que d'en changer très facilement : une petite icône de palette de peinture vient se loger dans votre barre d'état . Celle-ci est grisée pour les sites ne proposant pas de feuille de style alternative (Le Site du Zéro, par exemple), mais colorée pour les sites qui en proposent (GeeXboX.org, par exemple) .

Dummy Lipsum Generator

Plate-formes : Extension Firefox (Linux, Mac, Windows, etc.).
Lien : Firefox Add-ons.

Cette magnifique extension permet de générer des "Lorem Ipsum", abrégés Lipsum (les textes utilisés généralement pour tester le design d'un site) avec ou sans les balises XHTML. Après l'avoir installé, allez simplement dans Outils > Dummy Lipsum Generator, et amusez-vous .