SPIP Blog

Du logiciel libre et de la tendresse

Accueil > Développement > Design > Après les squelettes, la partie habillage

Après les squelettes, la partie habillage

dimanche 18 décembre 2005, par gvincent

Vous avez bouclé vos squelettes, le contenu est en ligne.. Maintenant à quoi ressemble le site ? Généralement, il demande un peu de travail graphique, et certains bugs de mise en page restent encore à corriger. Et comme on travaille mieux en étant bien outillé, je préconise :

  • Un bon éditeur : par exemple Notepad2, vim ou TextMate selon son environnement
  • Firefox
  • et rien d’autre (bon NVU, ...)

Pourquoi Firefox ? C’est un très bon navigateur, mais là ce n’est pas ce qui va nous intéresser le plus. Non, ce sont ses extensions qui vont nous permettre d’entrer dans le coeur de nos pages, de les débugger, et de les relooker en live. Croyez-moi, c’est tout simplement extraordinaire tout ce qu’on peut faire avec ça.

J’utilise surtout les extensions suivantes :

  • La barre de développeur : la grosse boite à outils (j’aime beaucoup la possibilité de modifier en direct les feuilles de style)
  • Aadvark : méconnu mais génial pour débugger ses pages ou analyser celle des autres (un excellent complément à la barre de dev)
  • colorzilla : permet de récupérer des codes couleur de pages, et plus encore
  • measureIt : pour tout mesurer dans les pages web
  • TAW3 en un clic : pour tester l’accessibilité de ses pages
  • Fangs Screen reader emulator : affiche une version de la page qui correspond assez-bien à ce que va lire un lecteur écran. Attention, cette extension pousse souvent à la déprime :)
  • et pour finir : IE tab pour mettre un IE dans les onglets FF et sauter en un clic d’une version à l’autre. Vous pouvez tester directement vos pages pour 90% des utilisateurs. Fabuleux, non ?

Avec tout cela, vous êtes fin prêts pour participer au prochain concours de rhabillage de squelette, qu’on se le dise !! ;)

Mais vous, quels outils et extensions FF utilisez-vous pour le développement de vos pages ?

Messages

    1. View Rendered Source Chart, bien pratique pour voir ce qui est sorti de cette boucle récursive de la mort
    2. DevBoi, la doc au bout des doigts
    3. DOM Inspector et Hypertext DOM Browser pour s’en sortir avec l’ajax
    4. All In One Sidebar pour tout bien ranger au bon endroit.

    Pour l’edition, c’est Emacs et le mode SPIP.

  • 1. illustrator / inkscape
    2. subethaedit / tag
    3. CSS edit
    4. FF web dev et Icab
    5. Transmit

Un message, un commentaire ?

Qui êtes-vous ?
Se connecter
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.