Le développement web sous GNU/Linux de A à Z

Petit tour d’horizon des outils pour le développeur web disponibles sous GNU/Linux.

Graphisme

Inkscape
Inkscape est un logiciel de graphisme vectoriel, équivalent d’Adobe Illustrator. Inkscape utilise le format de fichiers SVG (Scalable vector Graphics), peut importer des formats tels que le Postscript, EPS, JPEG, PNG et TIFF, et exporte en PNG ainsi qu’en de nombreux formats vectoriels.
Le must pour créer logos, boutons, textures…

Gimp
On ne présente plus the Gimp, le photoshop du libre. Il comprend tous les outils dont le webdesigner aura besoin pour créer ses maquettes et retoucher des photos.
Pour une personalisation de son interface, lisez mon article “Les alternatives à Photoshop sous Linux” qui présente plusieurs customisations de l’interface de Gimp.

Photoshop 7/CS/CS2
Grace à wine, il est également possible d’installer Photoshop 7 ou CS (CS2 aussi, mais là ce n’est pas une mince affaire…) sous Linux. Voir également mon article “Les alternatives à Photoshop sous Linux” pour la procédure d’installation.

Agave
Agave est un compositeur de couleur. Ce petit programme fonctionne selon un schéma simple: Vous choisissez une couleur et le logiciel vous proposera des tons en harmonie avec votre choix selon plusieurs types de compositions prédéfinies (complements, split-complements, triads, tetrads, analogous et monochromatic)
Le must pour les non graphistes, ou graphistes en manque d’inspiration

Editeurs de texte

L’éditeur de texte est le B-A-BA de la programmation. Le moins que l’on puisse dire est qu’il en existe une floppée sous GNU/Linux, du plus minimaliste (Mousepad) aux véritables usines à gaz (Emacs, Eclipse).
Le choix d’un éditeur de texte étant vraiment quelquechose de personnel, difficile de dire quel est “le meilleur” outil de ce type pour le développement web. Tout dépendra des gouts et habitudes de chacun.
Le langage dans lequel vous développez peut aussi etre déterminant: Par exemple, pour le Java Eclipse s’avère être un choix judicieux, tandis que niveau CSS, c’est probablement cssed qui est le plus optimisé.

• Vim
• Emacs
• Gedit
• Eclipse
• Quanta+
• cssed

Editeurs WYSIWYG

J’aurais tendance à déconseiller ce genre d’éditeur: Editer un code source en mode WYSIWYG amène très souvent des erreurs de sémantique et un code peu élégant. La encore, c’est un choix personnel.
Comme éditeur WYSIWYG, le seul que j’ai -brievement- testé est Nvu. Par comparaison avec Dreamweaver de MaquereauMedia (hahaha :D), le code produit est généralement beaucoup plus propre, au prix d’une interface un peu moins accessible pour le débutant.
Au sujet des débutants, justement, je conseille grandement d’apprendre véritablement le (X)HTML/CSS et non de vous contenter des (pas toujours très bons) services offerts par les éditeurs WYSIWYG. Un intégrateur (X)HTML, dans le millieu professionnel, même s’il peut parfois avoir recours à un éditeur visuel, doit obligatoirement savoir coder à la main.

• Nvu
• Bluefish

Extensions Firefox pour le développement web

Les extensions pour le navigateur Firefox sont légion: Parmis elles, certaines sont d’une telle utilité au développeur web qu’on ne peut rapidement plus s’en passer.
Le principe des extensions Firefox est simple: Il suffit de se rendre sur le site proposant la dite extension, de cliquer sur le lien “installer” et le tour est joué. Au redémarrage de votre navigateur, il sera doté des nouvelles fonctions que vous venez d’installer.

Web Developper
Web Developper est comme son nom l’indique l’extension par excellence dédiée au développement web. Parmi ses très nombreuses fonctionnalitées, on trouve en vrac: un éditeur de code HTML, un éditeur de CSS (Les deux “à la volée”), une règle pour mesurer la taille des éléments, une fonction permettant de connaitre la classe ou l’id d’un élément au survol, la possibilité de valider le html, l’accessibilité et les css…A mon avis, totalement indispensable.

Firebug
Firebug est une extension Firefox qui donne à accès à des outils de suivi du code JavaScript, mais également CSS et de l’arbre DOM de la page ainsi que des données XML et des requêtes Ajax.
Firebug propose de nombreuse fonctionnalités avancées, tel qu’un objet console possedant un grand nombre de méthodes de journalisation et d’assertion ainsi qu’une console JavaScript permettant au développeur de tester du code à la volée.

ColorZilla
Dernière extension que j’aborderais ici, ColorZilla, qui permet de récupérer la couleur de n’importe quel élément via une pipette, ce qui peut faire gagner un temps assez conséquent: Plus besoin de faire un screenshot et de sélectionner la couleur dans Gimp, ou encore d’utiliser un programme dédié: Colorzilla récupère la couleur et la copie dans le presse papier: Vous n’avez plus qu’à la coller dans votre css et le tour est joué.

Standards web, accessibilité et SEO

WDG Validator
Le validateur W3C n’étant uniquement accessible que via une interface web, -même s’il est possible de l’installer directement sur votre serveur Apache- il peut être pratique d’installer le validateur WDG qui permet quand à lui de valider vos pages via une simple commande:
validate mapage.html
Installez le paquet wdg-html-validator pour pouvoir en profiter.

Lynx
Lynx est un navigateur web fonctionant integralement en mode texte. Un de ses gros avantages pour le développeur web, est que Lynx voit ce que les robots des moteurs de recherches voient. Grace à cet outil vous pourrez optimiser sans peine votre accessibilité aux moteurs de recherche ainsi qu’aux personnes atteintes de déficients visuels. (Dont un grand nombre, d’ailleurs, utilisent Lynx couplé à un synthétiseur vocal)
A noter également, en cas de plantage du serveur Xorg, Lynx peut s’averer extrêmement utile pour aller chercher une solution à votre problème sur Internet!
Pour l’installer, vous n’avez qu’à faire un bon vieux sudo apt-get install lynx.

Optimisation cross-browsers

IE4Linux
Lorsque l’on développe un site, on cherche la plupart du temps à ce que celui-ci soit visible et accessible au plus grand nombre. Et qui dit accessible au plus grand nombre, dit malheureusement, compatible IE.
Et bien entendu, IE n’existe pas en natif sous Linux…Heureusement, il existe IE4Linux, qui permet, via wine, de pouvoir utiliser le “navigateur” de Micro$oft sans pour autant devoir vous taper Windows.
Pour l’installer, saisissez simplement dans un terminal:
wget http://www.tatanka.com.br/ies4linux/downloads/ies4linux-latest.tar.gz
tar zxvf ies4linux-latest.tar.gz
cd ies4linux-*
./ies4linux

Un assistant très intuitif, en mode texte, vous guidera et proposera d’installer IE5, 5.5 et 6, au choix.
A noter qu’il est également possible d’émuler le moteur de rendu d’IE7, mais ce n’est pas une mince affaire.

Safari/Webkit
Il est également possible de compiler le moteur de rendu Webkit, utilisé par Safari. Je n’ai pas testé cette opération personellement, toutefois vous trouverez des infos en Français sur le blog-notes de JM et un tuto détaillé ici (en anglais)