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