Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 30KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816
  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>Livre et diffusion — 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. <!-- Canonical URL for SEO purposes -->
  28. <link rel="canonical" href="https://larlet.fr/david/blog/2015/livre-diffusion/">
  29. <!-- SEO/Semantic metadata -->
  30. <meta name="description" content="Je suis en pleine réflexion et si vous avez des retours qui ne soient pas des success stories ça m’intéresse." />
  31. <meta name="twitter:description" property="og:description" itemprop="description" content="Je suis en pleine réflexion et si vous avez des retours qui ne soient pas des success stories ça m’intéresse." />
  32. <meta name="twitter:title" property="og:title" itemprop="name" content="Livre et diffusion" />
  33. <meta name="twitter:card" content="summary" />
  34. <meta name="twitter:creator" content="@davidbgk" />
  35. <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2015/livre-diffusion/" />
  36. <meta property="og:type" content="article" />
  37. <meta property="og:site_name" content="David Larlet (@davidbgk)" />
  38. <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2015/livre-diffusion.jpg" />
  39. <style>
  40. /* http://meyerweb.com/eric/tools/css/reset/ */
  41. html, body, div, span,
  42. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  43. a, abbr, address, big, cite, code,
  44. del, dfn, em, img, ins,
  45. small, strike, strong, tt, var,
  46. dl, dt, dd, ol, ul, li,
  47. fieldset, form, label, legend,
  48. table, caption, tbody, tfoot, thead, tr, th, td,
  49. article, aside, canvas, details, embed,
  50. figure, figcaption, footer, header, hgroup,
  51. menu, nav, output, ruby, section, summary,
  52. time, mark, audio, video {
  53. margin: 0;
  54. padding: 0;
  55. border: 0;
  56. font-size: 100%;
  57. font: inherit;
  58. vertical-align: baseline;
  59. }
  60. /* HTML5 display-role reset for older browsers */
  61. article, aside, details, figcaption, figure,
  62. footer, header, hgroup, menu, nav, section { display: block; }
  63. body { line-height: 1; }
  64. blockquote, q { quotes: none; }
  65. blockquote:before, blockquote:after,
  66. q:before, q:after {
  67. content: '';
  68. content: none;
  69. }
  70. table {
  71. border-collapse: collapse;
  72. border-spacing: 0;
  73. }
  74. /* http://practicaltypography.com/equity.html */
  75. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  76. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: normal;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  89. font-weight: 300;
  90. font-style: italic;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'EquityTextB';
  95. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  96. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  97. font-weight: 700;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. @font-face {
  102. font-family: 'ConcourseT3';
  103. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  104. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  105. font-weight: 300;
  106. font-style: normal;
  107. font-display: swap;
  108. }
  109. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  110. body {
  111. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  112. font-family: "EquityTextB", Palatino, serif;
  113. background-color: #f0f0ea;
  114. color: #07486c;
  115. font-kerning: normal;
  116. -moz-osx-font-smoothing: grayscale;
  117. -webkit-font-smoothing: subpixel-antialiased;
  118. text-rendering: optimizeLegibility;
  119. font-variant-ligatures: common-ligatures contextual;
  120. font-feature-settings: "kern", "liga", "clig", "calt";
  121. }
  122. pre, code, kbd, samp, var, tt {
  123. font-family: 'TriplicateT4c', monospace;
  124. }
  125. em {
  126. font-style: italic;
  127. color: #323a45;
  128. }
  129. strong {
  130. font-weight: bold;
  131. color: black;
  132. }
  133. nav {
  134. background-color: #323a45;
  135. color: #f0f0ea;
  136. display: flex;
  137. justify-content: space-around;
  138. padding: 1rem .5rem;
  139. }
  140. nav:last-child {
  141. border-bottom: 1vh solid #2d7474;
  142. }
  143. nav a {
  144. color: #f0f0ea;
  145. }
  146. nav abbr {
  147. border-bottom: 1px dotted white;
  148. }
  149. h1 {
  150. border-top: 1vh solid #2d7474;
  151. border-bottom: .2vh dotted #2d7474;
  152. background-color: #e3e1e1;
  153. color: #323a45;
  154. text-align: center;
  155. padding: 5rem 0 4rem 0;
  156. width: 100%;
  157. font-family: 'ConcourseT3';
  158. display: flex;
  159. flex-direction: column;
  160. }
  161. h1.single {
  162. padding-bottom: 10rem;
  163. }
  164. h1 span {
  165. position: absolute;
  166. top: 1vh;
  167. left: 20%;
  168. line-height: 0;
  169. }
  170. h1 span a {
  171. line-height: 1.7;
  172. padding: 1rem 1.2rem .6rem 1.2rem;
  173. border-radius: 0 0 6% 6%;
  174. background: #2d7474;
  175. font-size: 1.3rem;
  176. color: white;
  177. text-decoration: none;
  178. }
  179. h2 {
  180. margin: 4rem 0 1rem;
  181. border-top: .2vh solid #2d7474;
  182. padding-top: 1vh;
  183. }
  184. h3 {
  185. text-align: center;
  186. margin: 3rem 0 .75em;
  187. }
  188. hr {
  189. height: .4rem;
  190. width: .4rem;
  191. border-radius: .4rem;
  192. background: #07486c;
  193. margin: 2.5rem auto;
  194. }
  195. time {
  196. display: bloc;
  197. margin-left: 0 !important;
  198. }
  199. ul, ol {
  200. margin: 2rem;
  201. }
  202. ul {
  203. list-style-type: square;
  204. }
  205. a {
  206. text-decoration-skip-ink: auto;
  207. text-decoration-thickness: 0.05em;
  208. text-underline-offset: 0.09em;
  209. }
  210. article {
  211. max-width: 50rem;
  212. display: flex;
  213. flex-direction: column;
  214. margin: 2rem auto;
  215. }
  216. article.single {
  217. border-top: .2vh dotted #2d7474;
  218. margin: -6rem auto 1rem auto;
  219. background: #f0f0ea;
  220. padding: 2rem;
  221. }
  222. article p:last-child {
  223. margin-bottom: 1rem;
  224. }
  225. p {
  226. padding: 0 .5rem;
  227. margin-left: 3rem;
  228. }
  229. p + p,
  230. figure + p {
  231. margin-top: 2rem;
  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. figure {
  249. border-top: .2vh solid #2d7474;
  250. background-color: #e3e1e1;
  251. text-align: center;
  252. padding: 1.5rem 0;
  253. margin: 1rem 0 0;
  254. font-size: 1.5rem;
  255. width: 100%;
  256. }
  257. figure img {
  258. max-width: 250px;
  259. max-height: 250px;
  260. border: .5vw solid #323a45;
  261. padding: 1px;
  262. }
  263. figcaption {
  264. padding: 1rem;
  265. line-height: 1.4;
  266. }
  267. aside {
  268. display: flex;
  269. flex-direction: column;
  270. background-color: #e3e1e1;
  271. padding: 1rem 0;
  272. border-bottom: .2vh solid #07486c;
  273. }
  274. aside p {
  275. max-width: 50rem;
  276. margin: 0 auto;
  277. }
  278. /* https://fvsch.com/code/css-locks/ */
  279. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  280. font-size: 1rem;
  281. line-height: calc( 1.5em + 0.2 * 1rem );
  282. }
  283. h1 {
  284. font-size: 1.9rem;
  285. line-height: calc( 1.2em + 0.2 * 1rem );
  286. }
  287. h2 {
  288. font-size: 1.6rem;
  289. line-height: calc( 1.3em + 0.2 * 1rem );
  290. }
  291. h3 {
  292. font-size: 1.35rem;
  293. line-height: calc( 1.4em + 0.2 * 1rem );
  294. }
  295. @media (min-width: 20em) {
  296. /* The (100vw - 20rem) / (50 - 20) part
  297. resolves to 0-1rem, depending on the
  298. viewport width (between 20em and 50em). */
  299. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  300. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  301. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  302. margin-left: 0;
  303. }
  304. h1 {
  305. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. h2 {
  309. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  310. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  311. }
  312. h3 {
  313. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  314. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  315. }
  316. }
  317. @media (min-width: 50em) {
  318. /* The right part of the addition *must* be a
  319. rem value. In this example we *could* change
  320. the whole declaration to font-size:2.5rem,
  321. but if our baseline value was not expressed
  322. in rem we would have to use calc. */
  323. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  324. font-size: calc( 1rem + .6 * 1rem );
  325. line-height: 1.5em;
  326. }
  327. p, li, pre, details {
  328. margin-left: 3rem;
  329. }
  330. h1 {
  331. font-size: calc( 1.9rem + 1.5 * 1rem );
  332. line-height: 1.2em;
  333. }
  334. h2 {
  335. font-size: calc( 1.5rem + 1.5 * 1rem );
  336. line-height: 1.3em;
  337. }
  338. h3 {
  339. font-size: calc( 1.35rem + 1.5 * 1rem );
  340. line-height: 1.4em;
  341. }
  342. figure img {
  343. max-width: 500px;
  344. max-height: 500px;
  345. }
  346. }
  347. figure.unsquared {
  348. margin-bottom: 1.5rem;
  349. }
  350. figure.unsquared img {
  351. height: inherit;
  352. }
  353. @media print {
  354. body { font-size: 100%; }
  355. a:after { content: " (" attr(href) ")"; }
  356. a, a:link, a:visited, a:after {
  357. text-decoration: underline;
  358. text-shadow: none !important;
  359. background-image: none !important;
  360. background: white;
  361. color: black;
  362. }
  363. abbr[title] { border-bottom: 0; }
  364. abbr[title]:after { content: " (" attr(title) ")"; }
  365. img { page-break-inside: avoid; }
  366. @page { margin: 2cm .5cm; }
  367. h1, h2, h3 { page-break-after: avoid; }
  368. p3 { orphans: 3; widows: 3; }
  369. img {
  370. max-width: 250px !important;
  371. max-height: 250px !important;
  372. }
  373. nav, aside { display: none; }
  374. }
  375. ul.with_columns {
  376. column-count: 1;
  377. }
  378. @media (min-width: 20em) {
  379. ul.with_columns {
  380. column-count: 2;
  381. }
  382. }
  383. @media (min-width: 50em) {
  384. ul.with_columns {
  385. column-count: 3;
  386. }
  387. }
  388. ul.with_two_columns {
  389. column-count: 1;
  390. }
  391. @media (min-width: 20em) {
  392. ul.with_two_columns {
  393. column-count: 1;
  394. }
  395. }
  396. @media (min-width: 50em) {
  397. ul.with_two_columns {
  398. column-count: 2;
  399. }
  400. }
  401. .gallery {
  402. display: flex;
  403. flex-wrap: wrap;
  404. justify-content: space-around;
  405. }
  406. .gallery figure img {
  407. margin-left: 1rem;
  408. margin-right: 1rem;
  409. }
  410. .gallery figure figcaption {
  411. font-family: 'ConcourseT3'
  412. }
  413. footer {
  414. font-family: 'ConcourseT3';
  415. display: flex;
  416. flex-direction: column;
  417. border-top: 3px solid white;
  418. padding: 4rem 0;
  419. background-color: #07486c;
  420. color: white;
  421. }
  422. footer > * {
  423. max-width: 50rem;
  424. margin: 0 auto;
  425. }
  426. footer a {
  427. color: #f1c40f;
  428. }
  429. footer .avatar {
  430. width: 200px;
  431. height: 200px;
  432. border-radius: 50%;
  433. float: left;
  434. -webkit-shape-outside: circle();
  435. shape-outside: circle();
  436. margin-right: 2rem;
  437. padding: 2px 5px 5px 2px;
  438. background: white;
  439. border-left: 1px solid #f1c40f;
  440. border-top: 1px solid #f1c40f;
  441. border-right: 5px solid #f1c40f;
  442. border-bottom: 5px solid #f1c40f;
  443. }
  444. </style>
  445. <h1 class="single">
  446. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  447. Livre et diffusion
  448. <time>Publié le 7 janvier 2015</time>
  449. </h1>
  450. <article class="single">
  451. <blockquote>
  452. <p>Car si l’on y réfléchit un instant, un ebook n’est rien d’autre qu’un mini-site web encapsulé pour être consulté en mode <em>offline</em>, rien de plus. Et c’est notre besoin de jouer à la marchande « en échange de ton argent, je te transmets un fichier tangible et stockable » qui nous a propulsés droit dans le mur, et poussés à inventer des solutions toujours moins pratiques, plus compliquées et plus fermées. Alors que le web était là depuis le début, et qu’il nous tendait les mains. Nous avons réinventé le web, en moins bien. </p>
  453. <p><cite><em><a href="https://medium.com/@studiowalrus/le-livre-numerique-est-mort-vive-le-livre-numerique-6fae02cd829e">Le livre numérique est mort : vive le livre numérique</a></em> (<a href="/david/cache/c5f2c3d53be2a75f118cb94e257056a4/">cache</a>)</cite></p>
  454. </blockquote>
  455. <p>Suite à <a href="/david/blog/2015/publier-enseigner-cultiver/">mes envies de publications</a>, je me renseigne sur des projets comme <a href="https://leanpub.com/">LeanPub</a> ou <a href="https://www.gitbook.com/">GitBook</a> en évitant d’<a href="http://practicaltypography.com/why-racket-why-lisp.html">écrire le mien</a>. Au-delà des outils, il y a la question de la plateforme de diffusion, cruel dilemme lorsque l’on a les compétences techniques pour le faire chez soi.</p>
  456. <blockquote>
  457. <p>I should make sure to negotiate permission to make the book available for free on my web site. He told me that compared with the effort that you put into the book, the money you get back is insignificant. So if you write a book it should not be because you want to make a lot of money from it but because you have an idea that you want to present to the world. And as an author, you owe it to yourself to get your idea in front of as many people as possible.</p>
  458. <p><cite><em><a href="http://blog.plover.com/2014/12/01/">Why my book can be downloaded for free</a></em> (<a href="/david/cache/87117b2d6f28af858ab2e5a159f06c5a/">cache</a>)</cite></p>
  459. </blockquote>
  460. <p>J’ai suivi avec grand intérêt les aventure dans l’auto-édition <a href="http://blog.ninja-squad.com/2014/09/23/bilan-des-ventes-ebook-angularjs/">de Ninja-Squad</a> (<a href="/david/cache/5041bdbb39447a4ddd8d047dded12893/">cache</a>) (aux <a href="https://n.survol.fr/n/ninja-squad-bilan-des-ventes-de-lebook-angularjs">limites de la légalité</a> (<a href="/david/cache/c91860f38ed5d3985fa63805df9ec984/">cache</a>)) ou <a href="http://www.stpo.fr/blog/bd-et-auto-edition-je-lai-fait-et-jai-survecu/">de STPo pour sa BD</a> (<a href="/david/cache/2efd87035f65034a55dfa95925317f25/">cache</a>). <strong>Je suis en pleine réflexion et si vous avez des retours qui ne soient pas des success stories ça m’intéresse.</strong></p>
  461. </article>
  462. <section>
  463. <h3>Discussion suite à l’article :</h3>
  464. <article id="comment-1" class="comment">
  465. <p>Concernant la question du bouquin : oui, sauf à faire un bestseller, ce que tu retireras comme finance ne « vaudra » pas le temps passé par rapport à ton taux horaire habituel. Est-ce que ça veut forcément dire que ça ne mérite pas d’en retirer quelque chose quand même financièrement ? Bref, l’affirmation de départ est peut être vraie, mais elle n’aide finalement pas beaucoup.</p>
  466. <p>Si tu veux faire une vente à la ninja squad (j’aime beaucoup le principe), il y a deux astuces : Soit vendre en réalité un truc à la con (image, dédicace) qui lui est en prix libre, et donner le livre gratuitement à côté (mais du coup tu auras une TVA à 20% et non 5.5%).</p>
  467. <p>Soit faire une vingtaine d’éditions qui diffèrent à peine (genre la couleur de la couverture) et les vendre à des prix différents, pour faire une échelle de prix fixes au choix.</p>
  468. <p>Sinon tu peux tenter de jouer l’argumentation du « le prix est unique en France mais il change chaque minute à la volonté du client » mais je ne suis pas certain que ça soit très respectueux de la loi.</p>
  469. <p>La grande question à laquelle ton billet ne répond pas : Tu veux écrire pourquoi et selon quelles valeurs / principes directeurs ? C’est ça qui va diriger les réflexions.</p>
  470. <p>Après je ne sais plus si tu avais déjà fait un livre, mais c’est une aventure qui a son intérêt en soi.</p>
  471. <p>Seul conseil : si tu choisis de partir avec un éditeur classique en raison de la version papier, je te conseille de négocier très durement les conditions de vente numérique (à te les garder si tu le peux, au moins les limiter dans le temps et avoir un droit de regard sur la forme ainsi que la présence de drm).</p>
  472. <p>Pendant que j’y suis, autre question à te poser : jusqu’à quel point souhaites tu être tatillon dans le respect de la loi (prix unique, facturation tva, déclaration des revenus sur une entité commerciale, etc.) parce que si tu t’autorises à être un peu souple pour de tous petits revenus, tu peux faire des choses assez simples.</p>
  473. <p><cite>Éric D., le <a href="#comment-1">2015-01-07 à 22:20</a></cite></p>
  474. </article>
  475. <article id="comment-2" class="comment">
  476. <blockquote>
  477. <p>si vous avez des retours qui ne soient pas des success stories ça m’intéresse.</p>
  478. </blockquote>
  479. <p>Je ne suis pas sûr de ce que tu recherches comment information mais…
  480. certains textes de La Grange ont été publiés au format ePub par Publie.net et par Numeriklivres. </p>
  481. <ul>
  482. <li>L’ange comme extension de soi: vie numérique et poésie de la ville</li>
  483. <li>Avez-vous connu l’amour ?</li>
  484. </ul>
  485. <p>À noter, comme je l’avais expliqué, à l’époque, je n’ai pas travaillé avec les éditeurs. J’ai juste mis mes textes sous une licence permissive afin qu’ils puissent le faire et arrêtent de me demander de travailler avec eux pour une publication. Je n’ai touché aussi aucun profit en retour, puisque je n’ai jamais voulu d’argent pour ces textes. </p>
  486. <p>Je crois qu’il s’est vendu une centaine d’exemplaires (ce que je trouve énorme). Cela aurait rapporté 50% de 3 euros * 100 = 150 euros. Il s’agit donc d’un non succès. Tous les textes publiés sont en lignes, puisqu’ils l’étaient avant.</p>
  487. <p><cite>Karl Dubost, le <a href="#comment-2">2015-01-08 à 22:02</a></cite></p>
  488. </article>
  489. </section>
  490. <figure class="image" property="schema:image">
  491. <img src="/static/david/blog/2015/livre-diffusion.jpg" alt="" />
  492. </figure>
  493. <nav id="jumpto">
  494. <p>
  495. <a rel=prev href="/david/blog/2015/cours-iut-jquery-bonus/">← Cours IUT : jQuery et Bonus</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2015/formations-explorations/">Formations et explorations →</a>
  496. </p>
  497. </nav>
  498. <footer>
  499. <div>
  500. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  501. <p>
  502. Bonjour/Hi!
  503. 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>
  504. 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>).
  505. </p>
  506. <p>
  507. 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>.
  508. </p>
  509. <p>
  510. Les dernières publications hebdomadaires sont :
  511. </p>
  512. <ul class="with_columns">
  513. <li>
  514. <a href="/david/stream/2019/12/17/">Origines</a>
  515. </li>
  516. <li>
  517. <a href="/david/stream/2019/12/10/">Publier</a>
  518. </li>
  519. <li>
  520. <a href="/david/stream/2019/12/03/">En forêt</a>
  521. </li>
  522. <li>
  523. <a href="/david/stream/2019/11/26/">Ecocentric</a>
  524. </li>
  525. <li>
  526. <a href="/david/stream/2019/11/19/">Se livrer</a>
  527. </li>
  528. <li>
  529. <a href="/david/stream/2019/11/12/">Dépendances</a>
  530. </li>
  531. <li>
  532. <a href="/david/stream/2019/11/05/">Positif</a>
  533. </li>
  534. <li>
  535. <a href="/david/stream/2019/10/29/">Dettes</a>
  536. </li>
  537. <li>
  538. <a href="/david/stream/2019/10/22/">Privilèges</a>
  539. </li>
  540. <li>
  541. <a href="/david/stream/2019/10/15/">Discrétion</a>
  542. </li>
  543. <li>
  544. <a href="/david/stream/2019/10/08/">Désespérance</a>
  545. </li>
  546. <li>
  547. <a href="/david/stream/2019/10/01/">Présent</a>
  548. </li>
  549. <li>
  550. <a href="/david/stream/2019/09/24/">Manifester</a>
  551. </li>
  552. <li>
  553. <a href="/david/stream/2019/09/17/">Arpenter</a>
  554. </li>
  555. <li>
  556. <a href="/david/stream/2019/09/10/">Nostalgie</a>
  557. </li>
  558. <li>
  559. <a href="/david/stream/2019/09/03/">Déconstruire</a>
  560. </li>
  561. <li>
  562. <a href="/david/stream/2019/08/27/">Documenter</a>
  563. </li>
  564. <li>
  565. <a href="/david/stream/2019/08/20/">Frustration</a>
  566. </li>
  567. <li>
  568. <a href="/david/stream/2019/08/13/">Holisme</a>
  569. </li>
  570. <li>
  571. <a href="/david/stream/2019/08/06/">1%</a>
  572. </li>
  573. <li>
  574. <a href="/david/stream/2019/07/30/">Exemplarité</a>
  575. </li>
  576. <li>
  577. <a href="/david/stream/2019/07/23/">Timelines</a>
  578. </li>
  579. <li>
  580. <a href="/david/stream/2019/07/16/">Écoute</a>
  581. </li>
  582. <li>
  583. <a href="/david/stream/2019/07/02/">Anxiété</a>
  584. </li>
  585. <li>
  586. <a href="/david/stream/2019/06/21/">À lier</a>
  587. </li>
  588. <li>
  589. <a href="/david/stream/2019/06/14/">Pauvreté</a>
  590. </li>
  591. <li>
  592. <a href="/david/stream/2019/06/07/">Amateur</a>
  593. </li>
  594. <li>
  595. <a href="/david/stream/2019/05/31/">Pollution</a>
  596. </li>
  597. <li>
  598. <a href="/david/stream/2019/05/24/">Apaisement</a>
  599. </li>
  600. <li>
  601. <a href="/david/stream/2019/05/10/">Folie</a>
  602. </li>
  603. <li>
  604. <a href="/david/stream/2019/05/03/">Sympathie</a>
  605. </li>
  606. <li>
  607. <a href="/david/stream/2019/04/12/">Péremption</a>
  608. </li>
  609. <li>
  610. <a href="/david/stream/2019/04/05/">Définitions</a>
  611. </li>
  612. <li>
  613. <a href="/david/stream/2019/03/29/">Acceptation</a>
  614. </li>
  615. <li>
  616. <a href="/david/stream/2019/03/22/">Dissonance</a>
  617. </li>
  618. <li>
  619. <a href="/david/stream/2019/03/15/">Reconnaissance</a>
  620. </li>
  621. <li>
  622. <a href="/david/stream/2019/03/08/">Lecture</a>
  623. </li>
  624. <li>
  625. <a href="/david/stream/2019/03/01/">Journaux</a>
  626. </li>
  627. <li>
  628. <a href="/david/stream/2019/02/22/">Écriture</a>
  629. </li>
  630. <li>
  631. <a href="/david/stream/2019/02/15/">Kyriarchie</a>
  632. </li>
  633. <li>
  634. <a href="/david/stream/2019/02/08/">Mots-serrures</a>
  635. </li>
  636. <li>
  637. <a href="/david/stream/2019/02/01/">Sans voie</a>
  638. </li>
  639. <li>
  640. <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
  641. </li>
  642. <li>
  643. <a href="/david/stream/2019/01/18/">Agilité</a>
  644. </li>
  645. <li>
  646. <a href="/david/stream/2019/01/11/">Métaphores</a>
  647. </li>
  648. <li>
  649. <a href="/david/stream/2019/01/04/">Balbutiements</a>
  650. </li>
  651. </ul>
  652. <p>
  653. Voici quelques articles choisis :
  654. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  655. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  656. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  657. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  658. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  659. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  660. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  661. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  662. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  663. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  664. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  665. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  666. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  667. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  668. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  669. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  670. </p>
  671. <p>
  672. 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>.
  673. </p>
  674. <p>
  675. Je ne traque pas ta navigation mais mon
  676. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  677. conserve des logs d’accès.
  678. </p>
  679. </div>
  680. </footer>
  681. <script type="text/javascript">
  682. ;(_ => {
  683. const jumper = document.getElementById('jumper')
  684. jumper.addEventListener('click', e => {
  685. e.preventDefault()
  686. const anchor = e.target.getAttribute('href')
  687. const targetEl = document.getElementById(anchor.substring(1))
  688. targetEl.scrollIntoView({behavior: 'smooth'})
  689. })
  690. })()
  691. </script>
  692. <script>
  693. /* Service workers */
  694. if (navigator.serviceWorker) {
  695. window.addEventListener('load', function () {
  696. var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
  697. function sendLinks (selector) {
  698. var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
  699. return link.getAttribute('href')
  700. })
  701. links.push(location.pathname) // Put the current page in cache too.
  702. navigator.serviceWorker.controller.postMessage({ links: links })
  703. }
  704. navigator.serviceWorker.getRegistration()
  705. .then(function (registration) {
  706. if (!registration || !navigator.serviceWorker.controller) {
  707. return navigator.serviceWorker.register('/serviceworker.js')
  708. .then(navigator.serviceWorker.ready)
  709. .then(function () {
  710. console.log('[ServiceWorker] Ready to go!')
  711. })
  712. .catch(console.error.bind(console))
  713. } else {
  714. console.log('[ServiceWorker] Send links via registration')
  715. sendLinks(selector)
  716. }
  717. })
  718. navigator.serviceWorker.addEventListener('controllerchange', function () {
  719. console.log('[ServiceWorker] Send links via controller change')
  720. sendLinks(selector)
  721. })
  722. navigator.serviceWorker.addEventListener('message', function (event) {
  723. var link = document.querySelector('a[href="' + event.data.link + '"]')
  724. if (event.data.status && link) {
  725. link.style.backgroundColor = '#2d7474'
  726. link.style.color = '#f0f0ea'
  727. link.setAttribute('title', 'En cache pour consultation sans connexion')
  728. }
  729. })
  730. })
  731. } else {
  732. console.warn('[ServiceWorker] No cache for old browsers.')
  733. }
  734. </script>