Ordre et méthode - 2 : préparer le terrain

09.10.2006

Le précédent article exposait le principe (travailler sur des copies locales) et tentait d'en montrer l'intérêt par deux tout petits essais. Celui-ci présente plus en détail l'organisation de l'espace de travail, c'est un peu austère mais indispensable. Récompense bien méritée dans l'article suivant où nous verrons comment utiliser tout ça pour le CSS et les articles. Un (ou peut-être deux) derniers articles parleront des modules, de l'en-tête et du pied de page.

Après, ce sera à vous de jouer !

Si vous êtes pressé… je ne vous referai pas le coup du smiley bleu – passez directement à autre chose… et revenez quand vous aurez un moment.

Remarque importante : les exemples que je donne sont basés sur mon propre blog (ben oui). Bien que je me sois efforcé d'être aussi général que possible dans mon propos, je compte sur votre jugeotte pour transposer ce que je raconte à votre cas particulier. Autre chose : cette série d'articles ne vise qu'à présenter une façon de faire, basée sur l'expérience, les ratages et l'observation, pour vous donner des idées. Ce n'est pas un cours magistral, on peut sûrement s'y prendre plus efficacement.

Par conséquent, toutes vos suggestions sont bienvenues en commentaires.

Dernier point : je ne travaille pas chez OverBlog ni au W3C ! Donc je ne sais pas tout et je n'ai pas réponse à tout…

Et maintenant, on y va !

1 - Rassembler les fichiers

Le but est de constituer sur votre ordinateur un échantillon représentatif des pages de votre blog. La procédure de "rapatriement" d'une page est expliquée dans le précédent article à propos de la page d'accueil. Utilisez-la pour

la page d'accueil (d'accord c'est déjà fait, mais autant que la liste soit complète),
un article isolé (=la page où l'on arrive en cliquant sur le titre de l'article), de préférence pas trop long et sans images.

Vous pouvez compléter l'assortiment avec

un article suivi de ses commentaires,
une page de la "Liste complète",
une page obtenue via le module "Archives" (là aussi, essayez d'éviter les images),
une page obtenue via le module "Catégories" (même remarque),
les CGU du blog (et pourquoi pas ?)
bref : toute page dont vous souhaitez travailler la présentation.

Pourquoi "sans images" ? Parce que nous aurons bien assez de travail sans elles. Mais si elles sont inévitables parce que votre blog est fortement illustré, choisissez au moins du pas trop encombrant. Ce n'est qu'un conseil d'expérience, pas un dogme absolu.

Encore une fois, rien ne vous oblige à tout rapatrier la première fois. C'est seulement pour vous rappeler que votre blog contient une grande variété de pages, même si certaines se ressemblent beaucoup. En particulier, si vous avez par exemple choisi de n'afficher qu'un article par page et que vous ne publiez qu'un article maximum par jour, la page où s'affiche l'article lorsqu'on clique sur son titre et celle où il apparaît quand on y accède par les catégories semblent identiques. Pourtant leur HTML est légèrement différent, et telle modif qui marche bien sur l'une aura des effets curieux sur l'autre – ça m'est arrivé.

Reprenons : nous obtenons un certain nombre de fichiers HTML et autant de répertoires "nomdepage_fichiers" qui tous contiennent à peu près la même chose. À peu près : si une page particulière inclut des fichiers (images ou autres) ces fichiers seront aussi rapatriés, mais évidemment pour cette page seulement.

Créez donc un nouveau dossier et nommez-le à votre goût – faites simple et bref : un seul mot bien choisi, composé uniquement de lettres non accentuées ou de chiffres (chez moi, c'est "auxiliaires") plutôt qu'une longue phrase comme "répertoire des fichiers complémentaires". Déplacez dans ce nouveau répertoire tout le contenu des autres ; il y aura bien sûr une rafale de questions du type "Voulez-vous remplacer tel fichier par tel autre qui porte le même nom ?". Répondez "oui pour tout" ou "non pour tout", peu importe puisque tous ces fichiers sont identiques.

C'est fait ? Jetez les sous-répertoires maintenant vides, froidement.

Pour la suite, je vous conseille de ne traiter qu'un fichier HTML à la fois, mais jusqu'au bout, pour bien comprendre à quoi rime tout ce que je vous propose de faire. Ensuite, le traitement des autres ira tout seul.

2 - Quelques coups de lime sur le fichier HTML

Étape indispensable pour au moins trois raisons :

les répertoires d'origine n'existent plus ! Le navigateur aura du mal à retrouver ses petits ;
le HTML fait appel à des scripts de gestion des stats qui nous gêneront plutôt qu'autre chose ;
le HTML brut de décoffrage des pages est peu lisible. Mieux vaut y mettre de l'ordre avant d'aller plus loin.

Commencez par créer une copie de chaque fichier HTML, et nommez-la "LOCAL-nom du fichier", histoire de ne pas sagouiner inconsidérément des fichiers qui nous ont coûté tant d'efforts. C'est fait ? Nous ne toucherons plus aux originaux, ça vaut mieux. Si vous êtes super-prudent, c'est-à-dire juste assez, mettez-les en lecture seule.

2.1 - Supprimer le script de statistiques

Commençons par le plus simple. Allez à la fin du fichier HTML et supprimez ce qui est sélectionné ( = sur fond gris) :

Sections SCRIPT et NOSCRIPT

C'est un script de mise à jour de statistiques, aucun intérêt pour notre travail (vous voulez compter les visiteurs de votre ordinateur, vous ?) et nous n'en parlerons plus.

2.2 - Alléger et corriger le <head>

Retour en haut. Voici le début d'un fichier HTML rapatrié d'OverBlog :

Bien sûr c'est aéré, même un peu trop ! mais pas très sympa à lire.

Supprimez les balises <meta... > et les <link rel="alternate"...> : ce sont des indications pour les moteurs de recherche ou bien l'adresse de vos flux RSS et autres, aucun intérêt pour ce que nous voulons faire.

Supprimez enfin la feuille de style incorporée au HTML, qui va de <style> à </style> puisqu'elle est vide – mais là, on raffine.

Attention : n'ayez pas la main trop lourde et arrêtez-vous avant le </head> !!

Il est temps de corriger les noms de répertoire : remplacez "Monblog_fichiers" par le nom du dossier créé tout à l'heure. Vous comprenez pourquoi il fallait faire simple ?

Dernière touche : ajoutez un préfixe comme "LOCAL -" au "title" de la page de manière à ne pas être trompé, plus tard, par la barre de titre Windows.

Ultime finition, faites le ménage dans les lignes blanches, et insérez "ce qu'il faut" de saut de lignes et d'espaces pour arriver à peu près à ceci :

section HEAD après nettoyage

Pas trop de sueurs froides, jusqu'ici ?

Bon… "Yapuka" refaire tout ceci pour tous les HTML que vous avez rapatriés. Il y a du copier/coller dans l'air – ne vous en privez surtout pas, mais faites attention à ne pas mettre le même title partout.

Note : ceci est un vieux screenshot, les détails ont changé depuis la rédaction de cet article. C'est le principe qui compte : supprimer les meta et les link des flux RSS, corriger les noms de répertoire.

3 - Bilan

Tout simple : vous avez coupé le cordon avec OB et monté sur votre ordinateur un modèle réduit de votre blog. Ce n'est qu'un décor de toiles peintes, en ce sens que les liens dont les pages sont parsemées renvoient toujours au "vrai" site. Mais, même si vous coupez la connexion à Internet, vous pouvez désormais ouvrir un (ou plusieurs) HTML local, qui utilisera le CSS local, modifier et tester tout ce que vous voudrez sans perturber votre "vrai" blog. C'est bon de se décrisper, non ?

Oui, mais quand tout sera au point, comment le faire remonter ? Réponse dans le prochain article – celui-ci est déjà bien assez long !.

Et toujours : le 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