davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
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.
288 Commits
1 Branch
Tree: 215e169fba
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '215e169fba'
${ noResults }
larlet-fr-david/david/blog/2013/blogs-partage/index.html

index.html 29KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810 
  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>Blogs et partage — 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.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2013/blogs-partage/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="J’aimerais avoir une liseuse de Web, qui me permette de lire du contenu brut de proche en proche, d’idées en idées, de pair à pair." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="J’aimerais avoir une liseuse de Web, qui me permette de lire du contenu brut de proche en proche, d’idées en idées, de pair à pair." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Blogs et partage" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2013/blogs-partage/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/david-larlet-avatar-thumbnail.jpg" />

  41. 

  42. 

  43. <style>

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

  45. html, body, div, span,

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

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

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

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

  51. fieldset, form, label, legend,

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

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

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

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

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

  65. article, aside, details, figcaption, figure,

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

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   Blogs et partage

  468.   <time>Publié le 24 janvier 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <p>Beaucoup de réactions suite à <a href="/david/blog/2013/blogs-epubs/">ma réponse à Thierry Crouzet</a> qui a son tour me répond chez lui :</p>

  472. <blockquote>

  473. <p>Parce que sur un blog les billets se suivent, comme dans un journal intime, ils nous incitent à écrire des histoires/réflexions en épisodes. Pas besoin que les billets soient autonomes, compréhensibles en eux-mêmes. Ils s’adressent à des lecteurs fidèles. Déjà familiers de l’univers de lecture.</p>

  474. <p>De même, la forme blog à un moment donné cesse, à mon sens, de nourrir le blogueur. Elle ne le pousse plus en avant, à moins qu’il n’ait cessé de se remettre en cause.</p>

  475. <p><cite>Thierry Crouzet, <em><a href="http://blog.tcrouzet.com/2013/01/22/tout-est-format/">Tout est format</a></em></cite></p>

  476. </blockquote>

  477. <p>Je ne conçois plus le blog comme un <em>journal intime</em> mais comme un outil permettant de <a href="/david/blog/2013/citations-inspiration/">faire ricocher les idées</a> et d’échanger — effectivement en plusieurs épisodes — non pas avec soi-même mais avec d’autres blogueurs, c’est à mon avis le seul moyen de <em>nourrir le blogueur</em> sur le long terme, <strong>sortir de sa bulle narcissique pour s’ouvrir et échanger avec la communauté, participer à sa définition et se (re)définir ainsi.</strong></p>

  478. <blockquote>

  479. <p>Mais à mon sens, cela rendra d’autant plus nécessaire l’accès traditionnel au « livre clos » (imprimé ou numérique), celui qui a un commencement et une fin, qu’un auteur a publié à une certaine date et auquel il ne touche plus après. C’est-à-dire le contraire du livre modifié en permanence – dit parfois « liquide » –, parce que son auteur y revient ou qu’il est enrichi par d’autres : une modalité passionnante, mais inévitablement inscrite dans l’instant, impossible à inscrire dans la durée.</p>

  480. <p><cite>François Gèze, <em><a href="http://www.bastamag.net/article2882.html">Nous sommes à un tournant majeur de l’histoire de l’édition</a></em></cite></p>

  481. </blockquote>

  482. <p>Le « livre liquide » qu’est le blog peut au contraire s’inscrire dans la durée par les nombreuses références qui peuvent être faites montrant le cheminement de la réflexion, parfois collective. <strong>Le problème du livre numérique et/ou du blog ne vient pas de sa temporalité mais de l’<a href="/david/blog/2013/developpeurs-magiciens/">obsolescence du schéma de pensée de ses concepteurs</a>.</strong> La technique est pourtant là pour assurer la pérennité des contenus numériques… mais encore faut-il que ceux-ci continuent à être liés pour pouvoir être découverts. Ce n’est pas tant <a href="http://carnets.contemporain.info/audet/archives/1204">une question de pagination</a> mais de parcours de graphe qui doit rester une expérience plaisante pour le lecteur. Je suis atterré de lire encore des articles sans aucun lien, <em>des impasses du Web</em>.</p>

  483. <blockquote>

  484. <p>Le blog cherche à communiquer. David parle de partage. En étant plus terre à terre je parlerai de mise à jour, d’ajout régulier de contenu, de liens et de commentaires. […] Pour améliorer les blogs parlons plutôt simplicité de diffusion, facilité d’écriture, amélioration des discussions, mais tout ceci est rarement une question de format ou de technique.</p>

  485. <p><cite>Éric D., <em><a href="http://n.survol.fr/n/blogs-et-epub">Blogs et EPUB</a></em></cite></p>

  486. </blockquote>

  487. <p>Pour préciser ma vision sur le partage, <strong>ce qui m’intéresse c’est avant tout le dialogue que cela rend possible avec mes pairs.</strong> Les discussions croisées qui enrichissent le débat, qui donnent d’autres manières de penser, d’autres <em>matières</em> à penser, qui font <em>progresser</em>. Et cela me semble aller dans le sens de ce que ressent Clochix :</p>

  488. <blockquote>

  489. <p>Mais ce ne sont pas forcément les liens les plus pertinents sur une page. Lorsque je lis le billet de David, m’intéresse davantage le contexte que la liste des autres publications sur d’autres sujets dans son carnet. […] Il suffirait que l’auteur ajoute manuellement ces références à son article.</p>

  490. <p><cite>Clochix, <em><a href="http://esquisses.clochix.net/2013/01/23/liens/">Reconstruire une toile</a></em></cite></p>

  491. </blockquote>

  492. <p><em>Note : j’ajoute ces liens manuellement jusqu’à présent lorsque je suis informé de ces sources. Ce qui est <a href="/david/refonte/#20121213">devenu moins facile</a>.</em></p>

  493. <p>Le danger serait de tourner en vase clos, <strong>que la communauté tourne en rond et s’étouffe d’elle-même</strong> et cela m’inquiète car je (re)lis beaucoup de « vieux » blogueurs (certains apprécieront :P) mais j’ai du mal à découvrir de l’encre numérique neuve, de la fraîcheur dans les idées. C’est très préoccupant mais je retrouve malheureusement cela dans les événements aussi et j’ai du mal à <em>améliorer l’accessibilité des communautés auxquelles je participe</em>.</p>

  494. <blockquote>

  495. <p>Et soudain j’y ai vu un grand manque de nos liseuses : comment se fait-il qu’elles ne puissent communiquer entre elles ?! Pourquoi ne pourrais-je pas approcher ma liseuse de celle d’un ami pour partager un livre ? de façon horizontale.</p>

  496. <p><cite>Emmanuel Clément, <em><a href="http://emmanuel.clement.free.fr/blog/index.php/post/2013/01/23/Un-epub-et-au-lit">Un epub et au lit</a></em></cite></p>

  497. </blockquote>

  498. <p>Certes, <cite>les liseuses ne sont pas partageuses</cite> mais qu’est-ce qu’elles sont profiteuses ! C’est avant tout un choix dicté par le profit, c’est le même débat que celui sur l’asymétrie du débit ne permettant pas d’avoir des échanges en pair-à-pair optimisés <em>par</em> le Web afin de privilégier les fournisseurs de contenus centralisés <em>sur</em> le Web. <strong>J’aimerais avoir une liseuse de Web, qui me permette de <a href="https://bitbucket.org/david/contentbrowser/">lire du contenu brut</a> de proche en proche, d’idées en idées, de pair à pair.</strong></p>

  499. </article>

  500. 

  501. 

  502. 

  503. 

  504. <nav id="jumpto">

  505.   <p>

  506.     <a rel=prev href="/david/blog/2013/histoires-formations/">← Histoires et formations</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/twitter-dunbar/">Twitter et Dunbar →</a>

  507.   </p>

  508. </nav>

  509. 

  510. <footer>

  511.   <div>

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

  513.     <p>

  514.       Bonjour/Hi!

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

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

  517.     </p>

  518.     <p>

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

  520.     </p>

  521. 

  522.       <p>

  523.         Les dernières publications hebdomadaires sont :

  524.       </p>

  525.       <ul class="with_columns">

  526. 

  527.           <li>

  528.             <a href="/david/stream/2019/12/31/">Merci</a>

  529.           </li>

  530. 

  531.           <li>

  532.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  533.           </li>

  534. 

  535.           <li>

  536.             <a href="/david/stream/2019/12/24/">Outils</a>

  537.           </li>

  538. 

  539.           <li>

  540.             <a href="/david/stream/2019/12/17/">Origines</a>

  541.           </li>

  542. 

  543.           <li>

  544.             <a href="/david/stream/2019/12/10/">Publier</a>

  545.           </li>

  546. 

  547.           <li>

  548.             <a href="/david/stream/2019/12/03/">En forêt</a>

  549.           </li>

  550. 

  551.           <li>

  552.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  553.           </li>

  554. 

  555.           <li>

  556.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  557.           </li>

  558. 

  559.           <li>

  560.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  561.           </li>

  562. 

  563.           <li>

  564.             <a href="/david/stream/2019/11/05/">Positif</a>

  565.           </li>

  566. 

  567.           <li>

  568.             <a href="/david/stream/2019/10/29/">Dettes</a>

  569.           </li>

  570. 

  571.           <li>

  572.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  573.           </li>

  574. 

  575.           <li>

  576.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  577.           </li>

  578. 

  579.           <li>

  580.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  581.           </li>

  582. 

  583.           <li>

  584.             <a href="/david/stream/2019/10/01/">Présent</a>

  585.           </li>

  586. 

  587.           <li>

  588.             <a href="/david/stream/2019/09/24/">Manifester</a>

  589.           </li>

  590. 

  591.           <li>

  592.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  593.           </li>

  594. 

  595.           <li>

  596.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  597.           </li>

  598. 

  599.           <li>

  600.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  601.           </li>

  602. 

  603.           <li>

  604.             <a href="/david/stream/2019/08/27/">Documenter</a>

  605.           </li>

  606. 

  607.           <li>

  608.             <a href="/david/stream/2019/08/20/">Frustration</a>

  609.           </li>

  610. 

  611.           <li>

  612.             <a href="/david/stream/2019/08/13/">Holisme</a>

  613.           </li>

  614. 

  615.           <li>

  616.             <a href="/david/stream/2019/08/06/">1%</a>

  617.           </li>

  618. 

  619.           <li>

  620.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  621.           </li>

  622. 

  623.           <li>

  624.             <a href="/david/stream/2019/07/23/">Timelines</a>

  625.           </li>

  626. 

  627.           <li>

  628.             <a href="/david/stream/2019/07/16/">Écoute</a>

  629.           </li>

  630. 

  631.           <li>

  632.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  633.           </li>

  634. 

  635.           <li>

  636.             <a href="/david/stream/2019/06/21/">À lier</a>

  637.           </li>

  638. 

  639.           <li>

  640.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  641.           </li>

  642. 

  643.           <li>

  644.             <a href="/david/stream/2019/06/07/">Amateur</a>

  645.           </li>

  646. 

  647.           <li>

  648.             <a href="/david/stream/2019/05/31/">Pollution</a>

  649.           </li>

  650. 

  651.           <li>

  652.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  653.           </li>

  654. 

  655.           <li>

  656.             <a href="/david/stream/2019/05/10/">Folie</a>

  657.           </li>

  658. 

  659.           <li>

  660.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  661.           </li>

  662. 

  663.           <li>

  664.             <a href="/david/stream/2019/04/12/">Péremption</a>

  665.           </li>

  666. 

  667.           <li>

  668.             <a href="/david/stream/2019/04/05/">Définitions</a>

  669.           </li>

  670. 

  671.           <li>

  672.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  673.           </li>

  674. 

  675.           <li>

  676.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  677.           </li>

  678. 

  679.           <li>

  680.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  681.           </li>

  682. 

  683.           <li>

  684.             <a href="/david/stream/2019/03/08/">Lecture</a>

  685.           </li>

  686. 

  687.           <li>

  688.             <a href="/david/stream/2019/03/01/">Journaux</a>

  689.           </li>

  690. 

  691.           <li>

  692.             <a href="/david/stream/2019/02/22/">Écriture</a>

  693.           </li>

  694. 

  695.           <li>

  696.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  697.           </li>

  698. 

  699.           <li>

  700.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  701.           </li>

  702. 

  703.           <li>

  704.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  705.           </li>

  706. 

  707.           <li>

  708.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  709.           </li>

  710. 

  711.           <li>

  712.             <a href="/david/stream/2019/01/18/">Agilité</a>

  713.           </li>

  714. 

  715.           <li>

  716.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  717.           </li>

  718. 

  719.           <li>

  720.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  721.           </li>

  722. 

  723.       </ul>

  724. 

  725.     <p>

  726.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  743.     </p>

  744.     <p>

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

  746.     </p>

  747.     <p>

  748.       Je ne traque pas ta navigation mais mon

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

  750.       conserve des logs d’accès.

  751.     </p>

  752.   </div>

  753. </footer>

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

  755.   ;(_ => {

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

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

  758.       e.preventDefault()

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

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

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

  762.     })

  763.   })()

  764. </script>

  765. 

  766.   <script>

  767.   /* Service workers */

  768.   if (navigator.serviceWorker) {

  769.     window.addEventListener('load', function () {

  770.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  771.       function sendLinks (selector) {

  772.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  773.           return link.getAttribute('href')

  774.         })

  775.         links.push(location.pathname)  // Put the current page in cache too.

  776.         navigator.serviceWorker.controller.postMessage({ links: links })

  777.       }

  778.       navigator.serviceWorker.getRegistration()

  779.         .then(function (registration) {

  780.           if (!registration || !navigator.serviceWorker.controller) {

  781.             return navigator.serviceWorker.register('/serviceworker.js')

  782.               .then(navigator.serviceWorker.ready)

  783.               .then(function () {

  784.                 console.log('[ServiceWorker] Ready to go!')

  785.               })

  786.               .catch(console.error.bind(console))

  787.           } else {

  788.             console.log('[ServiceWorker] Send links via registration')

  789.             sendLinks(selector)

  790.           }

  791.         })

  792.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  793.         console.log('[ServiceWorker] Send links via controller change')

  794.         sendLinks(selector)

  795.       })

  796.       navigator.serviceWorker.addEventListener('message', function (event) {

  797.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  798.         if (event.data.status && link) {

  799.           link.style.backgroundColor = '#2d7474'

  800.           link.style.color = '#f0f0ea'

  801. 

  802.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  803. 

  804.         }

  805.       })

  806.     })

  807.   } else {

  808.     console.warn('[ServiceWorker] No cache for old browsers.')

  809.   }

  810. </script>