larlet-fr-david-cache/cache/6c0974fcae97500031780dc47950e33d/index.md

title: La création d'un livre web : Le livre 010101
url: http://www.quaternum.net/2015/10/26/creation-d-un-livre-web-le-livre-010101/
hash_url: 6c0974fcae97500031780dc47950e33d

<p>Après avoir découvert le livre web <a href="/2015/05/12/un-design-de-livre-web/">Professionnal Web Typography</a> de Donny Truong, voici une mise en pratique avec <em>Le livre 010101 (1971-2015)</em> 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 <em>en ligne</em> ou <em>hors ligne</em>. Les contraintes : lisibilité, simplicité et légèreté. Explications du projet.</p>

<h2 id="le-projet-de-marie-lebert">Le projet de Marie Lebert</h2>
<p>Depuis plusieurs années <a href="https://marielebert.wordpress.com/">Marie Lebert</a> recense les événements majeurs de l’évolution du livre numérique à travers un ouvrage qui a connu plusieurs <em>éditions</em>. 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.</p>

<p>Une précision importante : depuis avril 2015 et le dépôt du livre de Marie Lebert au format PDF <a href="http://www.enssib.fr/bibliotheque-numerique/notices/65334-le-livre-010101-1971-2015">sur le site de l’enssib</a>, 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.</p>

<h2 id="une-dmarche-personnelle">Une démarche personnelle</h2>
<p>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 <em>livre web</em>, accompagné d’un fichier au format EPUB.  </p>

<p>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.</p>

<h2 id="www010101booknet">www.010101book.net</h2>
<p>Le livre est lisible en ligne à cette adresse :</p>

<p><a class="link-button" href="http://www.010101book.net">www.010101book.net</a></p>

<h2 id="les-tapes-du-projet">Les étapes du projet</h2>
<p>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 !</p>

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

<ol>
  <li><a href="#1">Conversion du PDF en HTML</a></li>
  <li><a href="#2">Scénarios pour une mise en ligne</a></li>
  <li><a href="#3">Structuration des contenus</a></li>
  <li><a href="#4">Production du site web</a></li>
  <li><a href="#5">Design</a></li>
  <li><a href="#6">Fabrication de l’EPUB</a></li>
  <li><a href="#7">Quelques briques technologiques</a></li>
  <li><a href="#8">Bilan (rapide)</a></li>
</ol>

<h3 id="1">1. Conversion du PDF en HTML</h3>
<p>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 <a href="http://pandoc.org/">Pandoc</a>. 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.</p>

<h3 id="2">2. Scénarios pour une mise en ligne</h3>
<p>L’envie est forte de vouloir produire un site <em>à la main</em>, mais je commence tout de même par faire le tour des quelques solutions qui existent déjà en matière de <em>livre web</em>. Je suis le projet <a href="https://www.gitbook.com/">GitBook</a> 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 :</p>

<ul>
  <li>je veux profiter de ce projet pour construire une interface de lecture <em>décentralisée</em> ;</li>
  <li>le projet de Marie Lebert n’a pas de dimension collective, donc ici GitBook n’est pas totalement pertinent.</li>
</ul>

<p>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.</p>

<p>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. <a href="/2014/12/29/un-point-sur-jekyll/">Jekyll</a> – <em>noDB CMS</em> – semble tout indiqué.</p>

<h3 id="3">3. Structuration des contenus</h3>
<p>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.</p>

<h3 id="4">4. Production du site web</h3>
<p>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 :</p>

<ul>
  <li><a href="/2012/12/23/pourquoi-quitter-wordpress/">Pourquoi quitter Wordpress ?</a></li>
  <li><a href="/2014/04/26/latex-et-jekyll/">LaTeX et Jekyll : deux workflows de publication</a></li>
  <li><a href="/2014/12/29/un-point-sur-jekyll/">Un point sur Jekyll</a></li>
</ul>

<p>Jekyll est pensé par défaut pour les carnets web ou les <em>blogs</em>, 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 :</p>

<ul>
  <li>ne pas perdre de temps en recherche et ensuite en intégration ;</li>
  <li>trouver des solutions que je peux implémenter – je ne développe pas en Ruby ;</li>
  <li>ne pas faire une usine à gaz.</li>
</ul>

<p>L’arborescence finale est la suivante :  </p>

<ul>
  <li>niveau 1 : home</li>
  <li>niveau 2 : chapitre (niveau d’arborescence sans page HTML) ou <em>pages statiques</em> comme l’À propos</li>
  <li>niveau 3 : sous-chapitre (s’il n’y a pas de sous-chapitre : création d’une page “Résumé”)</li>
</ul>

<p>Les principales difficultés arriverons lors des choix du design, et notamment du <em>menu</em>.</p>

<h3 id="5">5. Design</h3>
<p>Première contrainte : concevoir un design <em>liquide</em>. Je ne veux pas gérer des adaptations en fonction des <em>n</em> 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.  </p>

<p>Très inspiré par <a href="/2015/05/12/un-design-de-livre-web/">Professionnal Web Typography</a>, 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 <em>single colonn</em>. Il n’y aura donc pas de menu, mais un accès aux différents chapitres et sous-chapitres sur chaque page et sans <em>activation</em> d’un menu. Ce sera l’un des points les plus complexes – pour moi – mais je trouve assez rapidement <a href="http://stackoverflow.com/questions/31194588/generate-a-menu-in-jekyll">de l’aide et une solution</a>. 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.</p>

<p>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 <a href="http://stackoverflow.com/questions/31013878/navigation-for-pages-not-for-posts-in-jekyll">des réponses</a> – Jekyll a cet avantage de disposer d’une communauté active.</p>

<p>Après quelques recherches de couleurs via l’outil <a href="https://coolors.co/">Coloors</a>, 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) :  </p>

<p><img src="/images/010101-colors.png" alt="Couleurs utilisées pour 010101book.net" />  </p>

<p>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 <a href="http://www.latofonts.com/">Lato</a>, je choisis l’<a href="https://fr.wikipedia.org/wiki/Open_Sans">Open Sans</a>, pour plusieurs raisons :</p>

<ul>
  <li>c’est une fonte très complète ;</li>
  <li>elle est très lisible en bas casse <em>et</em> en majuscule ;</li>
  <li>elle est placée sous licence <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache version 2.0</a>, je peux donc l’utiliser librement.</li>
</ul>

<h3 id="6">6. Fabrication de l'EPUB</h3>
<p>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é.</p>

<p>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 <em>à la main</em> dans des fichiers XHTML via <a href="http://sigil-ebook.com/">Sigil</a>. En quelques heures à peine le fichier EPUB est généré.</p>

<h3 id="7">7. Quelques briques et outils</h3>
<p>En dehors de Jekyll, j’ai utilisé plusieurs <em>briques</em> pour la production du site web :</p>

<ul>
  <li>KNACSS pour la base de la feuille de style, un projet développé et maintenu par Raphael Goetter : <a href="http://www.knacss.com">www.knacss.com</a> ;</li>
  <li>Min+ : “un <em>boilerplate</em> EPUB minimaliste, léger et modulaire”, créé et maintenu par <a href="http://jiminy.chapalpanoz.com/outils-ebook/">Jiminy Panoz</a>.</li>
</ul>

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

<ul>
  <li>un éditeur de texte : <a href="http://www.sublimetext.com/">Sublime Text 2</a> ;</li>
  <li>un navigateur web : <a href="https://www.mozilla.org/fr/firefox/">Mozilla Firefox</a> et ses outils pour développeurs ;</li>
  <li>la liste des bonnes pratiques d’Opquast, <a href="https://checklists.opquast.com/fr/">un incontournable</a> ;</li>
  <li>etc.</li>
</ul>

<h3 id="8">8. Bilan (rapide)</h3>
<p>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 <em>complète</em> en empruntant les différents rôles : chargé de projet, designer, intégrateur, etc.</p>

<h2 id="remerciements">Remerciements</h2>
<p><a href="https://marielebert.wordpress.com/">Marie Lebert</a> pour sa confiance.<br />
<a href="http://insitu-collective.com/">Willy</a> pour ses nombreuses aides sur la réalisation de la mise en forme.<br />
<a href="https://twitter.com/AnthonyMasure">Anthony</a>, <a href="https://twitter.com/John_Tax">Julien</a>, <a href="http://www.fadebiaye.com/">Frank</a> et <a href="https://twitter.com/Priscille_Lgrs">Priscille</a> pour les relectures et les retours sur le site web.<br />
<a href="http://jiminy.chapalpanoz.com/">Jiminy</a> pour les derniers réglages techniques sur l’EPUB.</p>

<h2 id="des-questions-ou-des-remarques">Des questions ou des remarques</h2>
<p>Si vous avez des questions ou des remarques sur www.010101book.net, n’hésitez pas à m’écrire :</p>

<p><a href="mailto:antoine@quaternum.net" class="link-button">Contactez-moi</a></p>