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

<article class="post">
  <time datetime="2015-10-26T00:00:00+01:00" class="post-date">26-10-2015</time>
  <h1 class="post-title">La crÃ©ation d'un livre web : Le livre 010101</h1>
  <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>



<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>



<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>
  
</article>