quaternum.net
Menu

Carnet

PhD (carnet de thèse)

Flux

2015-10-26

La création d'un livre web : Le livre 010101

Après avoir découvert le livre web Professionnal Web Typography de Donny Truong, voici une mise en pratique avec Le livre 010101 (1971-2015) de Marie Lebert : création d’un site web dédié et d’un fichier EPUB, afin de palier au seul format PDF disponible. Les principes : permettre une lecture en ligne ou hors ligne. Les contraintes : lisibilité, simplicité et légèreté. Explications du projet.

Le projet de Marie Lebert

Depuis plusieurs années Marie Lebert recense les événements majeurs de l’évolution du livre numérique à travers un ouvrage qui a connu plusieurs éditions. En avril 2015, elle publie la dernière version à jour : 46 chapitres, plus de 700 000 signes, et une chronologie comprenant plus de 200 dates entre 1971 et 2015.

Une précision importante : depuis avril 2015 et le dépôt du livre de Marie Lebert au format PDF sur le site de l’enssib, la publication est placée sous licence Creative Commons “Attribution - Pas d’Utilisation Commerciale - Pas de Modification 4.0 International”. Le contenu du livre peut donc être librement diffusé, hors usage commercial.

Une démarche personnelle

Seule une version PDF du livre de Marie Lebert est proposée, dommage pour un livre sur le livre numérique. Je décide mettre en forme les contenus déjà disponibles dans un livre web, accompagné d’un fichier au format EPUB.

Ne répondant à aucune demande ou commande, je décide de mener ce projet en mon nom propre, et propose à Marie Lebert des premiers essais.

www.010101book.net

Le livre est lisible en ligne à cette adresse :

www.010101book.net

Le code source du projet est disponible sur GitHub : https://github.com/antoinentl/010101book.net

Les étapes du projet

Pour celles et ceux qui seraient curieux des étapes d’un tel projet, voici quelques explications. Faites-vous un thé ou un café, c’est un peu long !

Je sais par avance que cette entreprise ne sera pas de tout repos, je découpe le projet en plusieurs parties :

  1. Conversion du PDF en HTML
  2. Scénarios pour une mise en ligne
  3. Structuration des contenus
  4. Production du site web
  5. Design
  6. Fabrication de l’EPUB
  7. Quelques briques technologiques
  8. Bilan (rapide)

1. Conversion du PDF en HTML

Marie Lebert n'ayant plus accès au fichier .doc originel, je n'ai que le format PDF comme point de départ. Afin de pouvoir envisager de faire quelque chose avec les contenus, je commence par convertir le fichier PDF en HTML, avec [Pandoc](http://pandoc.org/). Heureusement la mise en forme est minimaliste et à défaut d'une réelle feuille de style il y a une structure : des niveaux de titres. Quelques expressions régulières et une relecture en diagonale -- et quelques heures de travail -- et je dispose d'un contenu utilisable.

2. Scénarios pour une mise en ligne

L'envie est forte de vouloir produire un site *à la main*, mais je commence tout de même par faire le tour des quelques solutions qui existent déjà en matière de *livre web*. Je suis le projet [GitBook](https://www.gitbook.com/) depuis le lancement en mai 2014, mais je ne suis pas totalement en accord avec certains choix de design, et si je veux utiliser GitBook sérieusement cela demande un budget. Deux autres arguments m'éloignent de cette solution :

J’écarte assez vite l’utilisation d’un CMS avec base(s) de données, je ne veux pas maintenir un outil dont je ne saurai plus rien dans 3 ans.

Je m’oriente donc vers la production d’un site en HTML+CSS+JavaScript, facile à mettre à jour par moi ou par Marie Lebert, et qui ne demandera pas d’hébergement complexe. Jekyll – noDB CMS – semble tout indiqué.

3. Structuration des contenus

Pour pouvoir intégrer les contenus dans une chaîne de publication basée sur Jekyll, il me faut découper chaque chapitres et sous-chapitres en autant de fichiers Markdown, un exercice de copiés-collés depuis un seul fichier HTML, puis de corrections. Ce sera la partie la plus longue et la plus fastidieuse du projet -- au total il y a 250 fichiers Markdown, autant de pages web qui seront générées via Jekyll.

4. Production du site web

Si vous ne connaissez pas Jekyll vous trouverez une littérature abondante sur le web, mais vous pouvez également lire ces trois billets sur quaternum.net :

Jekyll est pensé par défaut pour les carnets web ou les blogs, mais pour construire un site avec une arborescence à deux niveaux c’est légèrement plus compliqué, Jekyll s’adapte aussi à cet usage. Je passe un certain temps à chercher les solutions les plus efficaces – en même temps que l’étape 3 – avec trois contraintes :

L’arborescence finale est la suivante :

Les principales difficultés arriverons lors des choix du design, et notamment du menu.

5. Design

Première contrainte : concevoir un design *liquide*. Je ne veux pas gérer des adaptations en fonction des *n* tailles d'écran, mais construire un même design lisible partout. Le site web étant très simple, je peux me permettre de n'envisager qu'un point de rupture : une diminution de la taille -- ou proportion -- des caractères en-deçà d'une certaine largeur.

Très inspiré par Professionnal Web Typography, et cherchant la simplicité maximale, le choix de la table des matières placée en pied de page me séduit beaucoup. Aussi parce que le site est de fait single colonn. Il n’y aura donc pas de menu, mais un accès aux différents chapitres et sous-chapitres sur chaque page et sans activation d’un menu. Ce sera l’un des points les plus complexes – pour moi – mais je trouve assez rapidement de l’aide et une solution. Cette table des matières très longues pourrait être amplement critiquée, j’assume cette décision. Dans le cadre de ce projet – ce qui n’est pas forcément vrai ailleurs – je défends le fait que la simplicité est un atout : il vaut mieux dérouler une page très longue que mal concevoir un menu qui sera peu visible ou accessible.

La navigation sera elle aussi très simple : deux liens “Partie précédente” et “Partie suivante” en bas de chaque sous-chapitre. La difficulté est de générer convenablement ces liens sans perdre dans l’arborescence, là encore je trouve des réponses – Jekyll a cet avantage de disposer d’une communauté active.

Après quelques recherches de couleurs via l’outil Coloors, je pars tout d’abord sur deux teintes de bleu et du orange flashy, puis j’abandonne le orange pour plus de simplicité. La charte graphique repose sur quatre couleurs (dont du blanc et du faux blanc) :

Couleurs utilisées pour 010101book.net

Le choix de la fonte se fait selon deux critères : une sans serif très lisible et complète. Après avoir tenté la Lato, je choisis l’Open Sans, pour plusieurs raisons :

6. Fabrication de l'EPUB

Vous ne savez pas ce qu'est le format EPUB ? C'est un format standardisé de livre numérique, un peu comme un site web encapsulé.

Je cherche tout d’abord une solution automatisée de production de l’EPUB : partir des mêmes fichiers du site web – en Markdown – pour générer un fichier EPUB, en détournant Jekyll. D’autres y avaient pensé avant moi, mais je ne trouve pas résultats concluants, et conformes aux standards actuels de l’EPUB. Je finis par reprendre le fichier HTML complet pour l’intégrer à la main dans des fichiers XHTML via Sigil. En quelques heures à peine le fichier EPUB est généré.

7. Quelques briques et outils

En dehors de Jekyll, j'ai utilisé plusieurs *briques* pour la production du site web :

Toujours pour la production du site web, voici les outils dont je me suis servis :

8. Bilan (rapide)

Si j'ai l'habitude de travailler en équipe sur des sites web beaucoup plus complexes, ce projet était l'occasion de me confronter à une gestion de projet *complète* en empruntant les différents rôles : chargé de projet, designer, intégrateur, etc.

Remerciements

Marie Lebert pour sa confiance.
Willy pour ses nombreuses aides sur la réalisation de la mise en forme.
Anthony, Julien, Frank et Priscille pour les relectures et les retours sur le site web.
Jiminy pour les derniers réglages techniques sur l’EPUB.

Des questions ou des remarques

Si vous avez des questions ou des remarques sur www.010101book.net, n’hésitez pas à m’écrire :

Contactez-moi