-------
S O M M A I R E

1- télécharger les contenus du site
2- renommer les fichiers
3- créer une page HTML
4- paramétrer l'affichage de la page et de ses contenus

-------

1- télécharger les contenus du site

Nous allons d'abord récupérer les contenus du site qui sont hébergés dans un data center quelque part aux États-Unis. Ils seront bien mieux sur mon ordinateur pour pourvoir les manipuler à notre guise.

Il existe des plugins à ajouter aux navigateurs pour télécharger tous les médias (images, MP3, vidéos...) d'une page mais peu le font sur l'ensemble d'un site.
L'effet infinite scroll de Tumblr laisse penser que l'ensemble du contenu du site peut s'afficher sur une page unique et ainsi qu'il est possible de récupérer toutes les images d'un seul coup. Cependant l'idéal serait de récupérer les fichiers natifs, non recadrés ni compressés (tumblr uniformise la largeur des images à 500 px lors de leur affichage, quelles que soient leurs dimensions d'origine).

Coup de chance : Tumblr permet de télécharger un ficher zip avec tous les contenus de son site (sous réserve de pouvoir se connecter au site en mode administrateur·ice)
Tumblr : règlages du blog > Exporter

Le fichier zip contient 3 dossiers : "Media", "Conversations" et "Posts".
Le dossier Media est, dans notre situation, celui qui nous intéresse. Il contient toutes les images, à chaque fois dans leur version d'origine (dimensions et format de fichier, soit jpg et gif).
Les noms des fichiers sont composés de 9 caractères numériques attribués a priori de façon aléatoire.

Plan B : utiliser HTTrack (logiciel libre) qui permet de télécharger un site en entier.
Cette solution génère un clone du site consultable hors connexion ; mais chaque image est rangée dans un dossier en version HD et en version reformatée (si la largeur de l'image est supérieure à 500px). Reste à trouver ou inventer un script qui réunirait toutes les images dans un seul dossier en ne gardant à chaque fois celle de la meilleure qualité. Le plan A fonctionne donc pas besoin de plan B (ni d'apprendre à coder des scripts)

2- renommer les fichiers

Pour afficher nos 2614 images dans une page web, il va falloir changer et simplifier leurs noms de fichiers.
À la place des 9 caractères aléatoires de base, nous allons remplacer le nom du fichier par une suite ordonnée de nombres (0001.jpg, 0002.jpg...) Cela permettra de générer beaucoup plus facilement le code HTML.

Utiliser antrenamer (logiciel libre). Ce super logiciel permet de renommer des fichiers en masse selon des critères aussi variés que subtils (date, donnée EXIF, aléatoire...).

• Fichiers > Dossiers : sélectionner le dossier où se trouvent les images
• Opérations > Énumération
- Masque : %num%%ext%
- Démarrer à : 1
- Nombre de chiffres : 4 (car il y a entre 1000 et 9999 fichiers à renommer)
- Incrémenter de : 1
• "Go" Démarrer

Pour changer l'ordre des images de façon aléatoire :
• Opérations > Noms aléatoires
- Masque : %random%%ext%
- Méthode : Nombre aléatoire (8 chiffres)
• "Go" Démarrer
• Puis réaliser toutes les étapes de Opérations > Énumération décrites plus haut.

Ranger tous les fichiers d'images dans un dossier. Appellons le "images".

3- créer une page HTML

Le code HTML pour afficher une image dans une page est <img src="...">
img indique que nous voulons afficher une image
src="...." permet, entre les guillemets, de préciser l'emplacement et le nom du fichier souhaité. Cela peut juste être nom-du-fichier.jpg ou nom-du-dossier/nom-du-fichier.jpg si on l'a placé dans un dossier (dans notre cas, le dossier est judicieusement nommé "images").
Pour afficher les 2614 images, il suffira donc de créer autant de lignes que d'images en incrémentant de 1 le nom du fichier :

<img src="images/0001.jpg">
<img src="images/0002.jpg">
<img src="images/0003.jpg">...

Saisir les 2614 lignes de code serait long et répétitif. Utilisons un tableur pour faire ce travail à notre place.

Utiliser LibreOffice Calc (logiciel libre) pour créer un nouveau classeur.
• Dans la première cellule (A1), saisir : <img src="images/
• Sélectionner la seconde cellule (B1) : Format > Cellule
- Catégorie : Nombre
- Format : - 1235
- Nombre de décimales : 0
- Zéros non significatifs : 4
- OK

• Dans la troisième cellule (C1), saisir : .jpg">
• Sélectionner les 3 cellules (A1+B1+C1)
• Cliquer sur la poignée dans le coin bas/droite de la sélection (le curseur se transforme en croix).
• Tirer la poignée vers le bas pour générer de nouvelles cellules. Les nombres de la deuxième colonne doivent s'accroître.
• Continuer jusqu'à la ligne 2614, conserver la sélection.
• Édition > Copier

Nota : il existe différentes façons de générer cette suite à partir de fonctions diverses (concaténation de texte). Je vous laisse utiliser celle qui vous convient en fonction de votre niveau de maîtrise du logiciel.

Nous avons généré la partie du code HTML pour afficher toutes les images mais il reste à ajouter le code pour créer une vraie page HTML complète digne de ce nom.
Utilisons un éditeur de texte et de code.

Utiliser Notepad++ (logiciel libre)
• Créer un nouveau fichier texte
• Édition > Coller
Dans le document, sélectionner l'espace vide entre <img src="images/ et 0001. Si les caractères masqués sont affichés, cet espace vide est signalé par une flèche orange (cf. capture ci-dessous)
• Édition > Copier
• Recherche > Remplacer
- recherche : coller ([ctrl]+[v])
- le champ Remplacer par : doit rester vide
- cliquer sur Remplacer tout

• Fermer la fenêtre Remplacer
• En tout début de document, juste avant la première ligne <img src..., coller le code suivant :
---
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

---
• En toute fin de document, juste après ...jpg">, coller le code suivant :
---
</body>
</html>
---
• Enregistrer le fichier :
- soit directement au format Hyper Text Markup Language (.html) ;
- soit au format .txt. Il suffira ensuite de changer manuellement l'extension du fichier en remplaçant .txt par .htm ou .html.
Le fichier doit être enregistré au même niveau que le dossier "images".
Le nom du fichier n'a pas d'importance.

Si on ouvre ce fichier avec un navigateur web, la page doit afficher toutes les images les unes à la suite des autres, dans leur format de base.

On constate que :
- la page n'a pas de marges ;
- les images sont collées bord à bord ;
- elles s'alignent verticalement sur le bas ;
- il y a de grosses différences de dimensions entre les images en haute résolution (qui prennent beaucoup de place) et celles en basse résolution.
- si on exporte la page au format PDF (en faisant Imprimer > Enregistrer au format PDF avec le navigateur Firefox) l'organisation des images gènère beaucoup d'espaces vides :

Nous allons maintenant voir comment gérer les paramètres d'affichage des contenus, bref : définir des règles qui vont permettre de concevoir la maquette.
Et si on peut contrôler tous ces paramètres en quelques lignes de code, ce serait top (spoiler : ça va l'être).

4- paramétrer l'affichage de la page et de ses contenus

Cette partie du tutoriel va grandement s'appuyer sur les travaux et outils mis à disposition par prepostprint.
Pour plus d'informations, je vous invite à consulter La bibliothèque web to print.