Ordre et méthode - 3 : produire

02.12.2006

Rappel prudent : comme les deux premiers articles, celui-ci ne présente qu'UNE méthode (et "méthode" est un bien grand mot) de travail possible – la mienne.

Mise au point par tâtonnements successifs, elle peut encore changer. Elle répond d'abord à mes besoins particuliers dans mon environnement particulier, vous n'avez pas forcément les mêmes.

Ne voyez donc dans cet article qu'un recueil d'idées, de principes et de recettes, n'en retenez que ce qui vous convient, accommodez-le à votre sauce et ne vous privez pas de donner vos ficelles perso.

1 - Petit résumé des épisodes précédents

Premier article, le principe :

rapatrier sur votre micro une copie locale d'au moins une page de votre blog ainsi qu'une copie du fichier custom.css ;
ouvrir le fichier CSS avec un éditeur de texte. J'ai déjà dit que j'ai un faible pour l'excellent Notepad++ mais tout autre éditeur fait l'affaire – évitez cependant Word ou tout autre traitement de texte, leur visée n'est pas celle d'un éditeur de texte ;
ouvrir la copie locale de la page de blog dans votre navigateur habituel et même, raffinement, dans un autre – histoire de pouvoir comparer le rendu et détecter au moins les différences les plus grossières ;
répéter aussi souvent que nécessaire la séquence "modifier le CSS/le sauvegarder/rafraîchir l'affichage du ou des navigateurs".

Deuxième article : comment monter votre "atelier" local et quelques retouches du HTML.

Maintenant, au boulot.

2 - Pratiques prudentes

Maîtriser le temps et l'espace (crévinguiou, ça c'est du titre !)

Vous vous rappelez peut-être que j'avais parlé, dans le premier article, de papier et de stylo ? L'usage en est double :

faire toutes sortes de dessins et de calculs pour couper les pixels en 8
mais surtout, NOTER en quelques mots ce que vous vous proposez de faire, et le noter AVANT de commencer.

Pourquoi ? L'expérience (malheureuse…) montre qu'on n'a au départ qu'une vision un peu vague de ce qu'on souhaite faire. Alors on cherche de la doc, on demande sur le forum, on va explorer chez PêUR et Francisek, voire sur le W3C (ce qui est, en soi, une excellente activité), les idées et les questions affluent, on veut un peu tout essayer… on perd son temps et on oublie l'intention initiale. Noter ce qu'on veut faire sert d'abord à ne pas l'oublier mais SURTOUT à savoir s'arrêter : j'ai fait ce que j'avais écrit ? OK, Champomy pour tout le monde et ensuite, dodo .

Autre pratique prudente : garder une horloge sous les yeux…

Ne pas toujours écrire de gauche à droite

Pardon ? Au fou !

Mais non – simplement ceci : vous avez sûrement remarqué que tout langage informatique fait un grand usage de parenthèses, crochets, accolades, mots-clés etc. et qu'il ne fait pas bon oublier de fermer ce genre de portes. Je vous donne ce tuyau simple : écrire D'ABORD la paire de parenthèses (par exemple) et seulement ENSUITE la remplir.

Justification : si vous commettez une erreur dans ce "conteneur", les dégâts seront limités au conteneur. Mais si vous oubliez de le fermer, c'est toute la suite de votre CSS (ou texte HTML, ou script JavaScript, ou…) qui sera comprise comme faisant partie du texte inachevé, et les erreurs surgiront en rafales.

Un réglage de Notepad++ permet d'ailleurs d'écrire automatiquement la balise ou la parenthèse de fermeture, ce réglage devient vite indispensable.

3 - Mettre son CSS au point

C'est une application directe de la méthode.

Ouvrez le fichier HTML local dans un navigateur, ou dans plusieurs si vous pensez que vous allez vous lancer dans des manœuvres un peu limite.

Ouvrez la copie locale de custom.css dans une fenêtre de l'éditeur.

Pour bien faire, vous pouvez aussi ouvrir le fichier HTML lui-même dans l'éditeur, histoire de repérer les endroits dont vous voulez changer l'aspect. Si ce fichier n'est pas déjà "read only", Notepad++ permet de l'ouvrir en lecture seule, ce qui est plus prudent. Notepad++ permet aussi, grâce à son système d'onglets, d'ouvrir une seule fenêtre pour tous les fichiers en cours d'édition, c'est bien commode.

Dès lors, c'est à vous de tenter la modif de la mort.

4 - Les images de fond

Vous utilisez probablement des images de fond dans votre blog, ou bien justement vous voulez vous y mettre.

Première possibilité : charger l'image dans OverBlog, puis préciser son URL complète dans le CSS. Par exemple, pour le motif de fond de mon blog, ça donne :

 body { background-image: http://idata.over-blog.com/0/38/68/97/fonds/url(bibal.jpg) }

Ça marche parfaitement dans notre "atelier" local, mais il est très pénible de modifier quoi que ce soit :

pour utiliser une autre image, il faut d'abord la charger sur OB, ce qui n'est pas rapide.
en outre, perversion supplémentaire, la charger sous un nouveau nom, sans quoi le changement ne sera pas vu tout de suite.
En effet, par souci de rapidité, les serveurs OB mettent leurs fichiers en cache (kézako ? peu importe ici), ce qui fait que les changements de ces fichiers ne sont pris en compte qu'au bout d' "un certain temps" (lire : "un temps certain").
Vous imaginez la série des "fond1.jpg","fond2.jpg","fond3.jpg", etc. ?

Et puis, ça cadre mal avec l'idée de travailler en local, c'est-à-dire sans liaison avec OB.

Voici donc la…

Deuxième possibilité : mettre l'image (une copie…) dans le même répertoire que le fichier CSS, et ajuster l'URL en conséquence.

 /* http://idata.over-blog.com/0/38/68/97/fonds/bibal.jpg */ body { background-image: url(bibal.jpg) }

Dès lors, vous pouvez retoucher l'image locale autant que vous voudrez, les changements se verront tout de suite.

Notez que la "vraie" URL est laissée en commentaire pour plus tard. Elle est facile à prévoir : elle débute exactement comme l'URL de n'importe laquelle de vos images, seuls changent le nom du fichier et, le cas échéant, celui de son répertoire.

Laissez les "vraies" URL en commentaire près de toutes les définitions d'image de fond.

5 - Gérer les versions du CSS

Vaste sujet. J'en suis venu à me limiter à trois versions plus une :

custom.css: le fichier CSS local en cours de mise au point.
customOK.css: la dernière version réputée correcte de ce fichier local (plus ancienne, donc).
CSS en service.css: la version actuellement en service sur OB (encore plus ancienne).
CSS original.css: la version d'origine du design OB que j'utilise. Ce fichier-là, bien sûr, est à mettre en lecture seule une bonne fois pour toutes.

Au début, évidemment, les trois fichiers sont identiques, voire les quatre – dans le cas improbable où vous n'avez encore rien tripoté.

Quel est l'intérêt de customOK.css ?

Pour modifier un code de couleur ou une marge, aucun.

Pour un chantier plus important, en plusieurs étapes, ou plus modeste mais s'étalant sur plusieurs jours parce que vous manquez de temps, il fournit un "point de reprise" bien rassurant : après avoir tenté plusieurs modifications de custom.css, il devient difficile de revenir dessus avec certitude. Le fichier customOK.css est là pour vous empêcher de tout perdre.

Procédure :

Charcutez paisiblement custom.css
Content du résultat ? Envie d'aller plus loin avant de tout remonter sur OB ? Avant de poursuivre (et de risquer de tout esquinter), copiez custom.css dans customOK.css, protégez ce fichier contre l'écriture, puis continuez le travail sur custom.css.
Vraiment content ? Prêt à remonter custom.css sur OB ? Copiez-le d'abord dans customOK.css puis remontez-le sur OB (on en reparlera plus loin). Quand vous êtes certain que votre blog est d'aplomb, ET SEULEMENT quand vous en êtes certain (on ne sait jamais), recopiez custom.css dans CSS en service.css et protégez ce fichier contre l'écriture.

Assez logique, finalement. Résultat : juste après la mise en service du nouveau fichier CSS, les trois sauvegardes sont identiques et on peut entamer un nouveau cycle de modifications.

6 - Une astuce commode et encore une retouche du HTML (mais pas pour IE)

Si vous utilisez un navigateur convenable (pas de nom !) il vous permet de choisir la feuille de style utilisée pour afficher une page HTML. Il faut pour cela modifier l'en-tête du fichier HTML (la partie comprise entre <head> et </head> ).

Photo "avant" :

 <head> [... diverses lignes ...] <link rel="stylesheet" type="text/css" href="auxiliaires/common.css" /> <link rel="stylesheet" type="text/css" href="auxiliaires/custom.css" title="CSS de test" /> </head>

Vous reconnaissez les deux lignes qui indiquent les deux feuilles de style utilisées.

Photo "après" :

 <head> [... diverses lignes ...] <link rel="stylesheet" type="text/css" href="auxiliaires/common.css" /> <link rel="stylesheet" type="text/css" href="auxiliaires/custom.css" title="CSS de test" /> <link rel="alternate stylesheet" type="text/css" href="auxiliaires/custom%20OK.css" title="Dernier CSS de test stable"/> <link rel="alternate stylesheet" type="text/css" href="auxiliaires/css%20en%20service.css" title="CSS actuelle du serveur"/> <link rel="alternate stylesheet" type="text/css" href="auxiliaires/css%20original.css" title="CSS d'origine du serveur"/> </head>

Trois lignes supplémentaires, une par sauvegarde : en changeant de feuille par le navigateur, on voit instantanément les changements. Très pratique.

7 - Remonter son CSS sur OB

Ahhhh…enfin nous y voilà ! Aucune magie noire à espérer, désolé :

Pour de petites modifs de quelques lignes, le plus simple est encore de les retaper (ou copier/coller) directement dans le CSS.
Pour des travaux plus substantiels, un copier/coller de l'ensemble du fichier local s'impose.

ATTENTION :

pensez à "uploader" les images de fond avant de toucher au CSS du serveur ;
après avoir recopié le CSS local dans le CSS du serveur, pensez à corriger toutes les URL d'images avant de valider le CSS (d'où l'intérêt d'avoir mis les "vraies URL" dans des commentaires). Si vous l'oubliez, ce n'est pas très grave : votre blog aura simplement une drôle de tête – et vous n'oublierez plus cette retouche la prochaine fois.

8 - Mettre un article au point

Pour un article de structure simple, même un peu long, l'éditeur proposé par Over-Blog est très bien. Pourquoi se compliquer la vie ?

Pour un article plus substantiel tel que celui-ci, avec des balises partout, des images, du JavaScript et autres ornements, j'en suis venu à procéder ainsi :

taper le texte "au kilomètre", sans AUCUNE décoration, dans le logiciel qu'on préfère. Et pourquoi pas Word, d'ailleurs ? Ne serait-ce que pour le correcteur orthographique.
s'il y a des images, rajouter une phrase comme "(ici, telle image)" aux bons endroits. Éventuellement insérer la balise <img> "qui va bien" (et qui fait référence à un exemplaire local de l'image) mais sans illusion : il faudra la virer plus tard.
quand le texte est au point, le copier/coller dans un fichier HTML local ouvert avec Notepad++ (et SURTOUT PAS avec Word). Ce fichier permet de voir l'article "en situation" – : l'équivalent de la prévisualisation chez OB.
rajouter les éventuelles balises de liste, de paragraphe (j'en fais une grande consommation), les div, les span… le JavaScript éventuel. Exécuter le cycle "modifier/sauvegarder/rafraîchir" jusqu'à cuisson parfaite.

L'important est de ne pas chercher à écrire d'un même jet du texte et son balisage. Écrire un bout de texte puis lui rajouter des balises, ou bien écrire un "squelette" de balises (une liste, par exemple) et le remplir. Mais la technique "j'écris la balise ouvrante, je saisis le contenu, j'écris la balise fermante" est ou bien lente (parce qu'on vérifie tout le temps qu'on ferme ce qu'on a ouvert), ou bien cause d'erreurs (parce qu'on ne le vérifie pas). Je crois bien l'avoir déjà dit ici.

9 - Remonter un article sur OB

Au début, processus analogue à celui utilisé pour le CSS – heureusement, d'ailleurs :

avant de remonter l'article, uploader les illustrations sur OB.
copier/coller le source de l'article dans la fenêtre "Source" de l'éditeur.

Mais là, on dispose en plus des outils de l'éditeur OB, alors :

supprimer les balises <img> (je vous l'avais bien dit !). En effet, leur modification est assez fastidieuse et je préfère…
insérer les images en utilisant le bouton "insérer une image" de l'éditeur. Pourquoi donc repartir de zéro ? L'éditeur a du mal à exploiter les balises <img> qu'il n'a pas créées lui-même ; en outre, les noms des fichiers ont pu être altérés au cours du processus d'upload (espaces, accents, etc.). Donc, plutôt que de tout spécifier à la main dans le source, autant utiliser ce qu'on nous propose quand ça couvre nos besoins.
quand les images sont OK, ne pas oublier de supprimer les aide-mémoire "(ici telle image)" !
un coup de prévisualisation, et roulez jeunesse.

Voilà. Vous n'avez pas trop souffert ? Si cet article vous a rendu service, dites-le moi, ça me fera plaisir. Si vous avez d'autres idées, dites-les moi aussi, ça m'intéresse. Si vous trouvez que j'ai écrit des bourdes ou que je me complique la vie pour rien, dites-le moi de même, ça me rendra service.

Encore une fois, il y a beaucoup à découvrir dans l'excellent tutoriel du Site du Zéro pour acquérir les notions de base, la VF de la spécification CSS2 et la VF de la spécification HTML 4.01 pour les approfondir.

Article précédent Article suivant Premier article