davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
49 коммитов
1 ветка
Дерево: 75fdee6039
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '75fdee6039'
${ noResults }
larlet-fr-david-cache/cache/5041bdbb39447a4ddd8d047dded.../index.html

index.html 25KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621 
  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>Bilan des ventes de l'ebook AngularJS (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://blog.ninja-squad.com/2014/09/23/bilan-des-ventes-ebook-angularjs/">

  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.   Bilan des ventes de l'ebook AngularJS (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://blog.ninja-squad.com/2014/09/23/bilan-des-ventes-ebook-angularjs/">Source originale du contenu</a></h3>

  463.     <div class="post-content"><p>Après une <a href="/2014/09/02/devenez-un-ninja-avec-angularjs-ebook/" title="La genèse du livre Devenez un Ninja avec AngularJS">longue et laborieuse genèse</a>, Ninja Squad a finalement mis en vente son premier livre : un <a href="https://books.ninja-squad.com/" title="Ebook AngularJS à prix libre et pour une bonne cause, par Ninja Squad">ebook sur AngularJS</a>.<br/>

  464. Si nous n’en sommes déjà pas peu fiers, il nous paraît aussi intéressant de vous faire un bilan sur les ventes. Car, caractéristique notable qui n’aura échappé à personne : il est vendu à <strong>prix libre</strong>, et en soutien optionnel à une cause caritative (<a href="https://www.humblebundle.com/">Humble Bundle-style</a>).</p>

  465. 

  466. <p>Alors, est-ce que ça marche un prix libre ?</p>

  467. 

  468. <h2 id="show-me-the-money">Show me the money!</h2>

  469. 

  470. <p>On savait en sortant ce livre qu’on ne rentabiliserait jamais le temps passé à sa rédaction. Pour tout vous dire, on pensait n’en vendre qu’une vingtaine sur l’année, à nos seuls supporters les plus fidèles. On savait que l’amour ne serait pas plus fort que la répulsion des galimatias techniques pour que nos proches se sentent obligés de l’acheter.</p>

  471. 

  472. <p>Mais on ne le sortait pas pour qu’il soit rentable. Comme d’habitude, on l’a fait sans trop réflechir, parce que ça nous semblait classe, même si ça demandait beaucoup de travail sans facturation.

  473. Et si cela convertissait de nouveaux enthousiastes, on aurait été ravi de les aider grâce à notre super formation (qui bénéficie de <a href="/2014/09/18/formations-prix-reduit/" title="Les formations Ninja Squad à prix réduit pour les Héros">la réduction pour les Héros</a>).

  474. On était aussi content de tester la vente en ligne directe de nos propres produits, sur un site fait à la main : <abbr title="Do It Yourself, bricole le toi-même">DIY</abbr> ! C’est notre ADN, ce qui fait qu’on aime ce métier de développeur. Et vivre de nos propres créations est une envie qui nous titille de longue date.</p>

  475. 

  476. <p>Bref, on annonce le livre et le site de vente, qui propose le prix libre et l’action caritative, le 2 septembre 2014 à 11H. Et là, <em>pouf-pouf</em>, la magie opère :

  477. <br/>

  478. <br/></p>

  479. 

  480. <p id="chart_ventes"/>

  481. 

  482. <p><br/>

  483. <br/>

  484. 87 ventes sur une première petite journée, pour pas loin de 1000€ HT ! On était déjà aux anges.</p>

  485. 

  486. <p>Bien sûr, ce rythme a très vite chuté, pour atteindre des volumes assez dérisoires passé la première semaine. On ne sait effectivement pas tellement communiquer en dehors de notre cercle communautaire. On constate un petit pic le 8 septembre, quand on a finalement ajouté une version MOBI, en plus des EPUB et PDF.</p>

  487. 

  488. <p>A ce jour du 23 septembre 2014, après trois semaines, on a fait <strong>4300 visiteurs unique, et 395 ventes pour un total de plus de 3900€ HT</strong>.</p>

  489. 

  490. <p>L’autre bonne nouvelle, c’est qu’on a aussi récolté <strong>plus de 1200€ pour l’association</strong> <a href="http://www.docteursouris.fr/">Docteur Souris</a>. \o/</p>

  491. 

  492. <p>Pour nous, c’était inespéré.</p>

  493. 

  494. <p>On peut dire que ça a fonctionné. Mais si le prix est libre, combien donnent les acheteurs ?</p>

  495. 

  496. <h2 id="taurais-pas-2-eurosnbsp">T’aurais pas 2 euros ?</h2>

  497. 

  498. <p>On a certes choisi un prix libre, on a certes fourni un ebook sans aucun DRM, mais on ne voulait pas le donner gratuitement : c’est notre bébé, notre sueur, notre travail. Pour obtenir le livre, il faut donc rentrer sa carte bleue, et payer un minimum de 2€.</p>

  499. 

  500. <p>Voici la répartition des prix donnés librement par les acheteurs :

  501. <br/>

  502. <br/></p>

  503. 

  504. <p id="chart_tarifs"/>

  505. 

  506. <p><br/>

  507. <br/></p>

  508. 

  509. <p>Attention, l’échelle est logarithmique.</p>

  510. 

  511. <p>On constate plusieurs choses :</p>

  512. 

  513. <ul>

  514.   <li>Seulement 1/5 des acheteurs donnent le prix minimum. Je trouve ça magique : ils font l’effort de faire un geste et de récompenser notre travail et l’association. Voilà de quoi redonner foi dans l’Humanité.</li>

  515.   <li>La majorité des acheteurs conservent le prix par défaut. Nous l’avions initialement valorisé à 10€ (<code>D1</code> sur le graphe). Puis au bout d’une semaine, pour voir, nous l’avons positionné à 20€ (<code>D2</code> sur le graphe). La proposition initiale a donc beaucoup de poids dans le choix de l’acheteur. C’est surprenant, mais bon à savoir ! :p </li>

  516.   <li>Quelques rares personnes ont donné des tarifs démesurés : 30€, 50€. Il faut avouer que ce sont pour l’essentiel des connaissances.</li>

  517.   <li>Et enfin, observation la plus importante : sept personnes ont donné 8,33€ HT (<code>P</code> sur le graphe), probablement pour payer 10€ TTC tout rond. Ne négligez donc pas la proportion de la population souffrant de <abbr title="Troubles Obsessionnels Compulsifs">TOCs</abbr> :p.</li>

  518. </ul>

  519. 

  520. <p>OK, donc le livre se vend bien, les gens sont prêts à payer un prix honnête. Mais alors, pourquoi ne pas le sortir chez un éditeur ?</p>

  521. 

  522. <h2 id="et-les-maisons-dditionsnbsp">Et les maisons d’éditions ?!</h2>

  523. 

  524. <p>Si ce livre s’est bien vendu - du moins à notre petite échelle - on pourait regretter de ne pas l’avoir sorti dans le circuit traditionnel, pour qu’il soit en vente partout et bénéficie du pouvoir de promotion de l’éditeur et des distributeurs.</p>

  525. 

  526. <p>Si la question ne s’était pas posée parce qu’on voulait le faire en mode DIY, par curiosité, nous avons interrogé des amis qui ont déjà sorti des livres techniques de références par le circuit traditionnel.</p>

  527. 

  528. <p>Tout d’abord, <a href="https://twitter.com/ndeloof">Nicolas De Loof</a> pour le livre <a href="http://www.amazon.fr/dp/2744024945">Apache Maven</a> écrit avec <a href="https://twitter.com/aheritier">Arnaud Héritier</a>.</p>

  529. 

  530. <p><strong>Combien avez-vous touché pour ce livre ?</strong></p>

  531. 

  532. <blockquote>

  533.   <p>On a touché chacun ~1500€ je crois, soit 1 euro par exemplaire - au pourcentage, divisé par deux imposable tout ça, soit de quoi ne pas avoir envie de recommencer :)</p>

  534. </blockquote>

  535. 

  536. <p><strong>Pour vos prochains livres, voulez-vous continuer de passer par un éditeur ?</strong></p>

  537. 

  538. <blockquote>

  539.   <p>Certainement pas. J’ai d’ailleurs fait l’erreur d’accepter pour Packt un livre sur cloudbees (déjà obsolète) et ça a été un enfer.

  540. Pearson nous laissait faire relativement à notre sauce avec un unique contact chez eux, ça a pas mal aidé.

  541. Chez Packt j’ai changé 3 fois de responsable du projet et été en contact avec 12 personnes différentes, dont un relecteur qui a commencé au chapitre 8 et indiqué “ce n’est pas très clair, il faudrait introduire ces notions” (ou lire les chapitres précédents ?)</p>

  542. </blockquote>

  543. 

  544. <p>Ensuite <a href="https://twitter.com/agoncal">Antonio Goncalvès</a> pour sa <a href="http://antoniogoncalves.org/category/books/">série de livres sur Java EE</a>. Voici le récit de son expérience :</p>

  545. 

  546. <blockquote>

  547.   <p>Pour faire simple, le monde de l’édition est à la ramasse (j’ai bossé directement avec Eyrolles et APress et je sais ce qui se passe derrière PackT et Oreilly… ils font tous pareil) : ils ont de moins en moins d’employés, la qualité chute, le passage au numérique se fait aux forceps, le suivi est miséreux, la relecture quasi inexistante et les contraintes multiples.

  548. Pour la rémunération, c’est simple : l’auteur touche 8/10/12% du prix… EDITEUR !!! Donc, mon livre est à 49$, prix éditeur 22$ et moi je touche 2.2$ (c’est à dire 1.8€). Le règlement se fait au trimestre, et t’es content de toucher tes 2.000€.</p>

  549. </blockquote>

  550. 

  551. <p>Moralité : des auteurs reconnus, sortant un livre de référence sur des technologies universellement utilisées, n’ont pas gagné plus d’argent que nous avec ce modeste livre vendu par nous-même dans des proportions infiniment plus faibles. Et au-delà de la rémunération, ils ont mal vécu leur relation éditeur. Suite à notre discusssion, Antonio Goncalvès vient d’ailleurs de publier <a href="http://antoniogoncalves.org/2014/09/16/the-uncensored-java-ee-7-book/">un article édifiant sur la censure exercée par son éditeur</a> qu’il gardait sous le coude depuis plus d’un an.</p>

  552. 

  553. <p>Si c’est donc pour ne pas gagner plus, et subir des pressions éditoriales, nous ne voyons pas l’intérêt de passer par le circuit traditionnel de l’édition. Encore un domaine qui souffre de la transition au numérique, comme le soulignait Antonio, et semble désormais obsolète. Un éditeur prend une marge démesurée pour lutter contre le piratage et vous offrir une exposition. Nous avons pourtant constaté avec cette expérience de livre technique auto-édité qu’on peut vraiment vendre des produits numériques sans DRM, et que Twitter et Google nous amenant sur notre site valent dans notre cas une exposition tout aussi importante que celle des distributeurs traditionnels. Alors imaginez si vous savez faire des <em>landing pages</em> bien plus jolies et vendeuses que <a href="https://books.ninja-squad.com">la nôtre</a> ! :p</p>

  554. 

  555. <p>Vous savez ce qu’il vous reste à faire pour votre prochain livre : DIY ! \o/</p>

  556. 

  557. </div>

  558.   </article>

  559. </section>

  560. 

  561. 

  562. <nav id="jumpto">

  563.   <p>

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

  565.     <a href="http://blog.ninja-squad.com/2014/09/23/bilan-des-ventes-ebook-angularjs/">Source originale</a> |

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

  567.   </p>

  568. </nav>

  569. 

  570. <footer>

  571.   <div>

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

  573.     <p>

  574.       Bonjour/Hi!

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

  576.       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>).

  577.     </p>

  578.     <p>

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

  580.     </p>

  581.     

  582.     <p>

  583.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  600.     </p>

  601.     <p>

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

  603.     </p>

  604.     <p>

  605.       Je ne traque pas ta navigation mais mon

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

  607.       conserve des logs d’accès.

  608.     </p>

  609.   </div>

  610. </footer>

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

  612.   ;(_ => {

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

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

  615.       e.preventDefault()

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

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

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

  619.     })

  620.   })()

  621. </script>