davidbgk
/
larlet-fr-david-cache
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Vydání 0 Aktivita
A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
403 Revize
1 Větev
Strom: cf213338ae
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „cf213338ae“
${ noResults }
larlet-fr-david-cache/cache/6c0974fcae97500031780dc4795.../index.html

index.html 28KB
Surový Blame Historie

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>La création d'un livre web : Le livre 010101 (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://www.quaternum.net/2015/10/26/creation-d-un-livre-web-le-livre-010101/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   La création d'un livre web : Le livre 010101 (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://www.quaternum.net/2015/10/26/creation-d-un-livre-web-le-livre-010101/">Source originale du contenu</a></h3>

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

  464. 

  465. <h2 id="le-projet-de-marie-lebert">Le projet de Marie Lebert</h2>

  466. 

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

  468. 

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

  470. 

  471. <h2 id="une-dmarche-personnelle">Une démarche personnelle</h2>

  472. 

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

  474. 

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

  476. 

  477. <h2 id="www010101booknet">www.010101book.net</h2>

  478. 

  479. <p>Le livre est lisible en ligne à cette adresse :</p>

  480. 

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

  482. 

  483. <h2 id="les-tapes-du-projet">Les étapes du projet</h2>

  484. 

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

  486. 

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

  488. 

  489. <ol>

  490.   <li><a href="#1">Conversion du PDF en HTML</a></li>

  491.   <li><a href="#2">Scénarios pour une mise en ligne</a></li>

  492.   <li><a href="#3">Structuration des contenus</a></li>

  493.   <li><a href="#4">Production du site web</a></li>

  494.   <li><a href="#5">Design</a></li>

  495.   <li><a href="#6">Fabrication de l’EPUB</a></li>

  496.   <li><a href="#7">Quelques briques technologiques</a></li>

  497.   <li><a href="#8">Bilan (rapide)</a></li>

  498. </ol>

  499. 

  500. <h3 id="1">1. Conversion du PDF en HTML</h3>

  501. 

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

  503. 

  504. <h3 id="2">2. Scénarios pour une mise en ligne</h3>

  505. 

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

  507. 

  508. <ul>

  509.   <li>je veux profiter de ce projet pour construire une interface de lecture <em>décentralisée</em> ;</li>

  510.   <li>le projet de Marie Lebert n’a pas de dimension collective, donc ici GitBook n’est pas totalement pertinent.</li>

  511. </ul>

  512. 

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

  514. 

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

  516. 

  517. <h3 id="3">3. Structuration des contenus</h3>

  518. 

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

  520. 

  521. <h3 id="4">4. Production du site web</h3>

  522. 

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

  524. 

  525. <ul>

  526.   <li><a href="/2012/12/23/pourquoi-quitter-wordpress/">Pourquoi quitter Wordpress ?</a></li>

  527.   <li><a href="/2014/04/26/latex-et-jekyll/">LaTeX et Jekyll : deux workflows de publication</a></li>

  528.   <li><a href="/2014/12/29/un-point-sur-jekyll/">Un point sur Jekyll</a></li>

  529. </ul>

  530. 

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

  532. 

  533. <ul>

  534.   <li>ne pas perdre de temps en recherche et ensuite en intégration ;</li>

  535.   <li>trouver des solutions que je peux implémenter – je ne développe pas en Ruby ;</li>

  536.   <li>ne pas faire une usine à gaz.</li>

  537. </ul>

  538. 

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

  540. 

  541. <ul>

  542.   <li>niveau 1 : home</li>

  543.   <li>niveau 2 : chapitre (niveau d’arborescence sans page HTML) ou <em>pages statiques</em> comme l’À propos</li>

  544.   <li>niveau 3 : sous-chapitre (s’il n’y a pas de sous-chapitre : création d’une page “Résumé”)</li>

  545. </ul>

  546. 

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

  548. 

  549. <h3 id="5">5. Design</h3>

  550. 

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

  552. 

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

  554. 

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

  556. 

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

  558. 

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

  560. 

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

  562. 

  563. <ul>

  564.   <li>c’est une fonte très complète ;</li>

  565.   <li>elle est très lisible en bas casse <em>et</em> en majuscule ;</li>

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

  567. </ul>

  568. 

  569. <h3 id="6">6. Fabrication de l'EPUB</h3>

  570. 

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

  572. 

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

  574. 

  575. <h3 id="7">7. Quelques briques et outils</h3>

  576. 

  577. <p>En dehors de Jekyll, j’ai utilisé plusieurs <em>briques</em> pour la production du site web :</p>

  578. 

  579. <ul>

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

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

  582. </ul>

  583. 

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

  585. 

  586. <ul>

  587.   <li>un éditeur de texte : <a href="http://www.sublimetext.com/">Sublime Text 2</a> ;</li>

  588.   <li>un navigateur web : <a href="https://www.mozilla.org/fr/firefox/">Mozilla Firefox</a> et ses outils pour développeurs ;</li>

  589.   <li>la liste des bonnes pratiques d’Opquast, <a href="https://checklists.opquast.com/fr/">un incontournable</a> ;</li>

  590.   <li>etc.</li>

  591. </ul>

  592. 

  593. <h3 id="8">8. Bilan (rapide)</h3>

  594. 

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

  596. 

  597. <h2 id="remerciements">Remerciements</h2>

  598. 

  599. <p><a href="https://marielebert.wordpress.com/">Marie Lebert</a> pour sa confiance.<br />

  600. <a href="http://insitu-collective.com/">Willy</a> pour ses nombreuses aides sur la réalisation de la mise en forme.<br />

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

  602. <a href="http://jiminy.chapalpanoz.com/">Jiminy</a> pour les derniers réglages techniques sur l’EPUB.</p>

  603. 

  604. <h2 id="des-questions-ou-des-remarques">Des questions ou des remarques</h2>

  605. 

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

  607. 

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

  609.   </article>

  610. </section>

  611. 

  612. 

  613. <nav id="jumpto">

  614.   <p>

  615.     <a href="/david/blog/">Accueil du blog</a> |

  616.     <a href="http://www.quaternum.net/2015/10/26/creation-d-un-livre-web-le-livre-010101/">Source originale</a> |

  617.     <a href="/david/stream/2019/">Accueil du flux</a>

  618.   </p>

  619. </nav>

  620. 

  621. <footer>

  622.   <div>

  623.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  624.     <p>

  625.       Bonjour/Hi!

  626.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  627.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  628.     </p>

  629.     <p>

  630.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  631.     </p>

  632.     

  633.     <p>

  634.       Voici quelques articles choisis :

  635.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  636.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  637.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  638.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  639.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  640.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  641.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  642.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  643.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  644.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  645.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  646.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  647.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  648.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  649.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  650.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  651.     </p>

  652.     <p>

  653.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  654.     </p>

  655.     <p>

  656.       Je ne traque pas ta navigation mais mon

  657.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  658.       conserve des logs d’accès.

  659.     </p>

  660.   </div>

  661. </footer>

  662. <script type="text/javascript">

  663.   ;(_ => {

  664.     const jumper = document.getElementById('jumper')

  665.     jumper.addEventListener('click', e => {

  666.       e.preventDefault()

  667.       const anchor = e.target.getAttribute('href')

  668.       const targetEl = document.getElementById(anchor.substring(1))

  669.       targetEl.scrollIntoView({behavior: 'smooth'})

  670.     })

  671.   })()

  672. </script>