Ordre et méthode - 1 : le principe

Les bases d'une méthode de travail pour être tranquille quand on met au point des trucs pour Internet. Cet article s'adresse plus particulièrement aux auteurs de blogs sur OverBlog - et encore plus particulièrement à ceux qui se sont déjà plantés ! - , mais peut intéresser tout lecteur qui veut sortir du presse-bouton et mener ses propres développements.

Comme d'habitude c'est long et verbeux mais cette fois je me suis efforcé d'être progressif, voire abordable. On parie ?

Lire la suite…

---

Comment tripoter son blog sans piquer une crise de nerfs ni faire des crises d'angoisse à répétition ? À chacun sa réponse. Comme le café, l'aspirine, le Prozac, le yoga, les cierges brûlés au W3C et les poupées vaudou à l'effigie de Bill Gates ne résolvent pas tout, il a bien fallu trouver autre chose. J'ai déjà indiqué en passant ("Quelques outils") que je "travaillais en local", mais ça demande peut-être des éclaircissements. Les voici.

Remarque : cette série d'articles est écrite dans un contexte Windows avec des logiciels assortis, mais ce n'est vraiment pas le plus important. Il est ici question de méthodes, pas de bidouilles pré-digérées.

1 - Le principe

Tout simple : installer sur son micro une copie de (certains des) fichiers qui composent un blog, les modifier tranquillement, et n'intervenir sur les "vrais" fichiers que lorqu'on est sûr de son coup. Vous rédigez peut-être déjà vos articles un peu longs avec Word avant de les copier/coller dans FCKeditor ? Hé bien c'est exactement pareil.

Encore, pour les articles FCKeditor n'est pas mal du tout ; d'ailleurs je m'en sers pour certaines finitions ou des articles simples et brefs (si si, j'en fais aussi). Mais pour le CSS, on en est encore à l'âge de la pierre taillée - même le bloc-notes de Windows est plus perfectionné, c'est dire !

2 - Les outils

J'en ai déjà parlé, mais je récidive : Notepad ++ est un excellent outil. Juste pour me faire comprendre : voilà un bout de mon fichier CSS vu avec le bloc-notes (Notepad) :

et le même bout avec Notepad++ : 

Vous remarquez déjà qu'on peut travailler sur plusieurs fichiers à la fois ("Méthode.html", c'est ce que vous êtes en train de lire !) et que les éléments du CSS ont des couleurs différentes : rouge pour les noms de classe, bleu roi pour les id, etc. . C'est ça, la "coloration syntaxique" qui donne un air vachement pro à la conversation.

Une conséquence toute simple : la bonne syntaxe étant colorée, la mauvaise ne l'est pas ! et les fautes de frappe dans les noms des propriétés de CSS sautent aux yeux, voyez vous-même :

Pratique, non ?

Autre caractéristique TRES utile : on peut revenir sur TOUTES les modifications faites depuis qu'on a ouvert le fichier, et cela MEME SI on l'a sauvegardé dans l'intervalle. Et ça c'est commode ! Nous en reparlerons.

C'est évidemment l'éditeur que j'utiliserai dans la suite de l'article.

Petit tracas tout de même, soyons honnête : quelquefois, Notepad++ refuse de démarrer et je n'ai pas encore compris si ça tient à lui ou à mon PC. Comme il suffit de le désinstaller puis réinstaller pour que tout rentre dans l'ordre, que ce n'est pas long, et que le programme me rend de grands services, je fais avec - il faut seulement penser à garder le programme d'installation dans un coin.

Si vous n'avez qu'IE sur votre machine, installez aussi un autre navigateur. C'est gratuit, ça ne vous oblige pas à désinstaller IE, et vous découvrirez un tas de choses - ne seraient-ce que les infobulles pleines de vannes désolantes dont j'ai parsemé cet article. Vous savez ce qui m'a convaincu de passer à Mozilla ? Pas le plaisir de faire joujou avec des onglets, ni la vanité de jouer les rebelles ni la joie morale de respecter les standards, mais un problème très concret : une fenêtre d'administration d'un forum comportait un tas de champs à saisir - un gros tas : plusieurs centaines. Pas moyen, sur mon PC de pauvre, de l'ouvrir avec IE. Quand j'en ai eu marre de passer par des chemins détournés j'ai, pour voir, essayé Mozilla. Devinez la suite ?

Enfin, dans le tutoriel du Site du Zéro , vous trouverez "La Boîte à Couleurs", petit utilitaire sans prétention et bien commode.

Oups, j'ai failli oublier l'essentiel : du papier et un stylo - ça sert toujours, nous le verrons dans un prochain article.

3 - Pressé ?

Vous avez une réponse ici mais ce n'est pas une bonne idée.

4 - Mise en place

Avant tout : créez un répertoire dans un coin pas trop reculé (le "bureau" ou bien "Mes documents", par exemple), ouvrez-le et installez-vous tranquille.

Puis allez sur la page d'accueil de votre blog. Les détails de la manœuvre qui suit dépendent du navigateur utilisé, je vous en donne les détails pour IE, mais le principe vaut pour tous les navigateurs.

Menu "Fichier", la commande "Enregistrer sous ..." (quelle surprise !). Visez bien le répertoire que vous venez de créer, prenez bien garde à sauvegarder la "Page Web complète (*.htm,*.html)" et surtout pas la "page Web HTML uniquement".

Si tout se passe bien, votre dossier de travail contiendra "MonBlog.html" et un sous-dossier nommé "MonBlog_fichiers" ou analogue. Ce sous-dossier contient théoriquement tous les fichiers dont a besoin MonBlog.html pour s'afficher correctement sans appeler le site d'OverBlog. Kapisch ? Je dis "théoriquement" parce que certains navigateurs se limitent aux fichiers mentionnés dans MonBlog.html. Les images de fond en particulier, qui sont déclarées dans le CSS, peuvent manquer à l'appel. Mais les principaux sont là, et custom.css au premier chef. Si vraiment il vous faut tout le monde, nous verrons plus tard comment faire.

5 - Petit essai pour comprendre

Avec l'éditeur ouvrez le fichier HTML (je ne répéterai plus "MonBlog" toutes les fois, vous êtes grand). Intimidé(e) ? Ça va passer. Avec le navigateur ouvrez ce même fichier HTML. Rien de changé en apparence, mais si vous faites attention, vous remarquerez que la barre d'adresse du navigateur parle de "file://quelquechose" et non de "http://quelque chose" : c'est bien le fichier local que vous êtes en train de regarder, pas le fichier qui est chez OverBlog.

Faites attention au titre de la fenêtre (si chez vous ça ne dit pas Mozilla, je ne vous en voudrai pas) :

Rien de surprenant, nous sommes d'accord. Maintenant regardez dans l'éditeur de texte le début du fichier HTML :

Vous voyez ce qui est entre <title> et </title> ? Voui, c'est la même chose : le titre de votre fenêtre (enfin… d'accord, c'est un exemple choisi TOUT A FAIT au hasard, le lecteur aura rectifié de lui-même).

Laissez ouverte la fenêtre du navigateur, revenez à celle de l'éditeur et, d'un doigt tremblant, rajoutez quelque chose, par exemple ESSAI LOCAL *, comme ça :

Vous y êtes ? Qu'est-ce que ça change dans la fenêtre du navigateur ? Rien !

Pourtant pourtant, tu m'avais dit que, j'avais cru que ? Pas de panique. Il faut enregistrer la modification dans le fichier HTML : "Fichier/Enregistrer" ou encore Ctrl+S, c'est assez classique. Mais surtout NE FERMEZ PAS L'EDITEUR DE TEXTE ! Vous comprendrez bientôt pourquoi.

Vous y êtes ? Qu'est-ce que ça change dans la fenêtre du navigateur ? Rien !

REMBOURSEZ ! Oh mais que vous êtes susceptible… Personne n'a dit au navigateur que le fichier HTML avait changé, c'est le moment ou jamais : "rafraîchissez" la fenêtre du navigateur - laissez donc tranquille cette commande de climatisation et appuyez sur F5.

Vous y êtes ? Qu'est-ce que ça change dans la fenêtre du navigateur ? Ça :

Champagne !

Voui mais ? si je veux tout remettre comme c'était avant, je dois retaper le titre ? Encore là, il n'y a que deux mots et un astérisque à effacer, ça va encore, mais quand on aura commencé le CSS (il me tarde, d'ailleurs) ça sera invivable !

No panic ! Super Brendufat n'a pas dit son dernier mot ! Tatzaaam ! Retour à la fenêtre de l'éditeur de texte - elle était bien restée ouverte, pas de blagues ? Alors on peut annuler la modification : "Edition/annuler", ou Ctrl+Z qui est bien plus pratique. Magie : le texte d'origine réapparaît !

Sauvegarder, puis rafraîchir la fenêtre du navigateur : tout est rentré dans l'ordre. Finalement c'était pas si mal, avec une petite étoile ? Annuler, sauvegarder, rafraîchir.

Le même procédé est valable pour un nombre indéfini de modifications, qu'on peut annuler (Ctrl+Z) et rétablir (Ctrl+Y) à volonté, qu'il y ait eu sauvegarde ou pas (en réalité le "nombre indéfini" dépend de la mémoire disponible sur votre ordinateur, mais il est bien assez grand). Attention : "sauvegarde ou pas" PENDANT LA SESSION D'EDITION. Quand vous fermez l'éditeur pour de bon, les fichiers sont sauvegardés une dernière fois et l'historique des modifications est oublié. De là vient qu'il est important de ne pas fermer l'éditeur trop tôt.

Ça ouvre des horizons, non ?

6 - Deuxième essai pour être sûr d'avoir compris

(Et après ça, on arrête, promis)

Allez voir dans le HTML et repérez, dans le début, ces deux lignes :

Elles vous disent que le fichier (local) utilise deux feuilles de style (aaaah ! tout de même ! on y vient !) pour sa mise en page : common.css et custom.css, situées dans le répertoire (local) "Monblog_fichiers". Vous pouvez vérifier : elles y sont. Custom.css c'est la vôtre, common.css c'est une création d'OverBlog, donc pas touche. Vous pouvez fermer le fichier HTML, nous le laisserons tranquille.

Supposons que ceci est un article tiré de votre fichier local (le hasard, toujours) :

… et que vous voulez changer la couleur du texte - un classique quand on débute. Pour faire simple, testons avec du vert. La réponse est : "ajouter dans le CSS la ligne .article {color:green;}" (pourquoi ça et pas autre chose est hors-sujet pour aujourd'hui).

On y va : ouvrez custom.css dans l'éditeur, allez à la fin de ce fichier, et tapez la fameuse ligne :

Je vous l'avais déjà annoncé mais la coloration syntaxique c'est bien pratique. Essayez de faire des fautes de syntaxe : oubliez le point avant article, écrivez "colour" en bon anglais britannique au lieu de "color" en informatico-états-unien, etc. et observez les changements. Remarquez aussi l'indication "Cascade Style Sheets file" en bas à gauche : l'éditeur, voyant que le nom du fichier se termine en .css, s'attend à voir du langage de CSS et place ses couleurs en conséquence. Remarquez aussi que si vous écrivez "artlice" ou bien "greeeeeen" rien ne se passe : l'éditeur connaît la forme des mots-clés et les noms des propriétés CSS (color, background, padding, etc.) mais il est incompétent pour les valeurs de ces propriétés : après tout, il peut bien y avoir un "artlice" quelque part dans le HTML ou une couleur nommée "greeeeeen". Attention tout de même, donc.

C'est pas le tout de bavarder, mais vous l'avez tapée, cette ligne ? Sans faire de fautes ? Bon. Comme tout à l'heure : sauvegardez le fichier CSS que vous venez de modifier et rafraîchissez la fenêtre du navigateur pour prendre les modifications en compte. Vous y êtes ? Le résultat :

Ohhhhh… que c'est LAID ! Comment on répare ? Comme tout à l'heure : annuler les modifications faites dans l'éditeur (Ctrl+Z) (attention : si vous avez fait joujou avec l'orthographe de la ligne que vous avez tapée il faudra plusieurs annulations), sauvegarder le CSS réparé, et rafraîchir l'affichage pour être tranquille.

Ouf ! Bilan de l'opération : vous avez tenté une modification, fait une bêtise, corrigé votre bêtise, et personne ne s'en est rendu compte, et vous n'avez rien cassé chez OverBlog puisque tout s'est passé sur votre ordinateur. Rassurant, non ?

Et maintenant je vous laisse parce que ce soir je suis de corvée de pluche.

---

Perdu ! Aujourd'hui, pas de recettes ! Faut tout lire ! Allez, je ne suis pas méchant : le retour, c'est par ici.

---

… masquer la fin

Pour ne pas blogger idiot, commencez par lire le tutoriel du Site du Zéro.

Si vous vous sentez en forme : la vf de la spécification CSS2 vous apprendra bien des choses.

Si vous êtes en vraiment grande forme, essayez la vf de la spécification HTML 4.01. Aride, mais vaut le détour.

---

Article suivant