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 43KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952
  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>Confort et convivialité — 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/2013/confort-convivialite/">
  29. <!-- SEO/Semantic metadata -->
  30. <meta name="description" content="Ce billet est un résumé enrichi de ce que j’ai dit ou aurait voulu dire lors de TEDxToulon le 18 octobre." />
  31. <meta name="twitter:description" property="og:description" itemprop="description" content="Ce billet est un résumé enrichi de ce que j’ai dit ou aurait voulu dire lors de TEDxToulon le 18 octobre." />
  32. <meta name="twitter:title" property="og:title" itemprop="name" content="Confort et convivialité" />
  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/2013/confort-convivialite/" />
  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/david-larlet-avatar-thumbnail.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. Confort et convivialité
  448. <time>Publié le 21 octobre 2013</time>
  449. </h1>
  450. <article class="single">
  451. <p><em>Ce billet est un résumé enrichi de ce que j’ai dit ou aurait voulu dire lors de <a href="http://tedxtoulon.com/">TEDxToulon</a> le 18 octobre.</em></p>
  452. <p>Le Web est devenu une télévision dont l’audience est principalement répartie sur les 9 « chaînes » suivantes :</p>
  453. <ol>
  454. <li>Facebook</li>
  455. <li>Twitter</li>
  456. <li>Instagram</li>
  457. <li>Google</li>
  458. <li>Wikipédia</li>
  459. <li>Amazon</li>
  460. <li>Github</li>
  461. <li>Youtube</li>
  462. <li>eBay</li>
  463. </ol>
  464. <p>Cela m’attriste et compte-tenu de mon métier m’amène à me questionner sur les raisons de ce que je considère comme un échec dans <strong>le passage d’un réseau distribué et collaboratif à une centralisation massive et individualisante.</strong> La transformation d’un système d’échange de savoirs en une plateforme dédiée à la consommation d’information.</p>
  465. <p>J’ai passé ces 10 dernières années à me concentrer sur les outils comme tout bon technicien, puis les usages pour finalement m’intéresser aux raisons profondes qui sont à l’origine d’un tel phénomène sociétal. J’en suis arrivé à identifier 2 causes majeures.</p>
  466. <blockquote>
  467. <p>Il faut un milieu sécurisant pour exécuter le programme génétique et il faut un milieu stressant pour l’optimiser. […] Cette lacune provoque l’apparition de maladies de la dégénérescence « car il n’y a pire stress que l’absence de stress ».</p>
  468. </blockquote>
  469. <p>Nous sommes dans ce que Boris Cyrulnik appelle une « <em>sécurité angoissante</em> » qu’il oppose à un <em>stress optimisant</em>. Une partie (réduite et riche) de notre planète vit dans cette sécurité angoissante qui ne lui permet plus d’évoluer, de trouver des solutions innovantes, d’avoir une activité gratifiante. Nous compensons par une boulimie d’informations, de choses, de drogues mais cela reste cruellement insatisfaisant.</p>
  470. <p>Ce confort nous enferme — seul — dans des <em>bulles de confort</em> qui ne nous permettent plus d’évoluer et ce à toutes les échelles, aussi bien en tant qu’individu qu’en tant qu’espèce. <strong>Nous n’avons plus besoin de développer notre intelligence adaptative.</strong> Nous n’avons plus besoin de collaborer et nous sommes en train de perdre la notion de <em>vivre ensemble</em>.</p>
  471. <p>La seconde source de notre incapacité à pouvoir exploiter Internet à son plein potentiel est notre manque d’attention. Notre société souffre d’un déficit d’attention en partie généré par le marketing qui conduit à une perte de respect pour son prochain.</p>
  472. <blockquote>
  473. <p>La population <em>dans son ensemble</em> souffre à cet égard, et <em>demande attention</em>. C’est pourquoi une politique de la jeunesse ne peut être qu’une politique de la <em>formation de ses capacités</em> dans tous les domaines, et telles que <em>ses capacités (ses savoirs faire, vivre et penser) sont toutes des formes de son attention</em> — et ceci est vrai de toutes les époques de l’humanité.</p>
  474. <p>Mais à notre époque, une telle politique est un <em>combat</em> et un <em>dépassement</em> en un sens nouveau, dans la mesure où il s’agit :</p>
  475. <ol>
  476. <li>d’une part, de surmonter l’époque de la croissance conçue comme un consumérisme basé lui-même sur la captation toxique et destructrice de l’attention.</li>
  477. <li>d’autre part, de <em>prendre appui sur les technologies de l’esprit qui émergent avec le numérique</em>, qui constituent aussi des technologies de la transindividuation qui sont un nouveau <em>pharmakon</em>, et qui permettent donc tout autant de dépasser le modèle toxique que d’en aggraver <em>irréversiblement</em> les effets.</li>
  478. </ol>
  479. <p>Tel est le véritable enjeu de la crise et du tournant qui doit s’y prendre — vers du meilleur ou vers du pire, sinon vers <em>le</em> pire : ce tournant est la croisée de ces deux chemins et constitue une alternative.</p>
  480. <p>S’élever, c’est aller vers le meilleur, et un tel chemin, qui est un combat, contre la régression, ne peut être mené qu’<em>avec les générations</em> qui doivent en devenir actrices et responsables.</p>
  481. <p><cite><em>Pharmacologie du Front National</em>, Bernard Stiegler</cite></p>
  482. </blockquote>
  483. <p>On ne sait plus prendre soin de son voisin ou de ses enfants. Cela peut vous sembler éloigné du Web mais <strong>comment avoir envie de cultiver un réseau de proches en proches si l’on ne s’intéresse plus à son proche-ain ?</strong></p>
  484. <p>Partant de ce cuisant constat d’une société qui n’était pas prête à utiliser un tel outil collaboratif, j’ai exploré les différentes pistes qui permettraient de se rapprocher de cet usage.</p>
  485. <h2>Les outils conviviaux</h2>
  486. <p>Ivan Illich dans son ouvrage <em>Tools for conviviality</em> introduit le concept d’<em>outil convivial</em> à travers 3 critères propres à une <em>instrumentation</em> ou une <em>institution</em> conviviale :</p>
  487. <blockquote>
  488. <ul>
  489. <li>ne doit pas dégrader l’autonomie personnelle en se rendant indispensable</li>
  490. <li>ne suscite ni esclave, ni maître</li>
  491. <li>élargit le rayon d’action personnel</li>
  492. </ul>
  493. </blockquote>
  494. <p>On peut utiliser ces critères pour analyser du marteau à la voiture en passant par l’école. Il est intéressant de constater que peu d’outils actuels passent ce simple test. Avec ces critères, l’outil technologique s’abstient de renforcer les hiérarchies entre individus et utilise les avancées techniques comme des amplificateurs. C’est l’inverse de ce qu’il se produit avec les spécialisations et les expertises en tout genres qui favorisent les relations de dépendances. <strong>On ne sait plus vivre en groupes réduits car on a perdu nos savoirs essentiels, on les a délégués et/ou morcelés.</strong></p>
  495. <blockquote>
  496. <p>Une vie sans savoir est une vie sans saveur. — Bernard Stiegler</p>
  497. </blockquote>
  498. <p>Il nous faut réacquérir ces savoirs et redécouvrir la valeur des outils conviviaux. Ce n’est pas ici une apologie de l’autarcie mais une revalorisation des communautés, l’individuation de soi passant par l’accomplissement de la vision du groupe. Un même individu pouvant appartenir simultanément à plusieurs groupes.</p>
  499. <h2>Les initiatives locales</h2>
  500. <blockquote>
  501. <p>Never doubt that a small group of thoughtful committed citizens can change the world — M. Meade</p>
  502. </blockquote>
  503. <p>Malgré un bilan pessimiste, amer, je vois bien aussi qu’il y a une activité locale foisonnante qui — sur des initiatives quasi-individuelles — produit du lien social, de la reconquête de citoyenneté et de nouvelles interactions. Le déploiement de <em>tiers-lieux</em> (fablabs, espaces de co-working, espaces publics numériques, etc) sur l’ensemble du territoire en est un exemple. L’essor du tissu associatif en est un autre. Le maillage s’intensifie localement et laisse s’exprimer les diversités culturelles des groupes créés. <strong>On assiste à des micro-expériences d’intelligence collective.</strong></p>
  504. <blockquote>
  505. <p>When you close that door, you’re creating a small culture. — Dan Mezick</p>
  506. </blockquote>
  507. <p>Dan Mezick explique que les personnes présentes dans une même salle créent déjà une culture locale qui va être à même d’avoir ses propres règles de collaboration. Passant par des étapes de <em><a href="https://en.wikipedia.org/wiki/Liminality">liminarité</a></em> pour accéder à l’état de <em><a href="https://en.wikipedia.org/wiki/Communitas">communitas</a></em>.</p>
  508. <h2>Une éducation à la collaboration</h2>
  509. <blockquote>
  510. <p>Un gagnant c’est un fabriquant de perdants. — <a href="http://out.neokraft.net/post/61016024417">Albert Jacquard</a></p>
  511. </blockquote>
  512. <p>On nous enseigne à devenir les meilleurs, cela provient historiquement de l’<a href="https://fr.wikipedia.org/wiki/Lyc%C3%A9e_en_France#Des_.C3.A9tablissements_d.27abord_uniquement_masculins_pour_former_une_.C3.A9lite">excellence des lycées</a> mis en place par Napoléon il y a 2 siècles avec ses <em><a href="https://fr.wikipedia.org/wiki/Masses_de_granit">masses de granit</a></em> mais n’a plus lieu d’être. L’objectif de Napoléon au lendemain de la révolution française était de créer un système lui permettant de s’élever au plus vite tout en ayant une base solide, or on sait <a href="http://www.nioutaik.fr/index.php/2013/02/26/640-la-revelation-des-pyramides-le-documentaire-en-mousse">depuis les pharaons</a> que la meilleure structure pour arriver à cela est la pyramide, d’où l’aboutissement à une pyramide administrative hiérarchisée dont l’école est la base. <strong>Cette approche archaïque de l’enseignement n’est plus une nécessité.</strong></p>
  513. <p>L’<a href="http://www.publicsenat.fr/emissions/documentaire/l-ecole-a-bout-de-souffle/71763">exemple de certains pays du nord</a> ou d’<a href="http://www.lapresse.ca/le-soleil/actualites/education/201309/27/01-4694156-la-classe-inversee-le-pari-denseigner-a-lenvers.php">expériences menées au Québec</a> nous montre qu’il est tout à fait possible d’avoir une autre approche fondée sur la collaboration que l’on peut qualifier de réussite en termes d’acquis et de bien-être de l’enfant.</p>
  514. <blockquote>
  515. <p>Chaque fois que l’on enseigne prématurément à un enfant quelque chose qu’il aurait pu découvrir par lui-même, on lui empêche de l’inventer et donc de le comprendre complètement</p>
  516. <p>Jean Piaget au sujet du <a href="https://fr.wikipedia.org/wiki/Constructivisme_%28psychologie%29">constructivisme</a></p>
  517. </blockquote>
  518. <p>Cette compétition permanente nécessite de comparer des résultats, or ce sont les chemins menant à ces résultats qui sont intéressants mais ceci est beaucoup plus difficilement évaluable. <strong>L’attachement aux diplômes forme ces élèves à devenir des adultes qui ont perdu tout esprit critique et qui se sont déshumanisés au profit d’une rigueur scientifique.</strong> Qui consomment et diffusent une information sans être capable de l’analyser ou de la recouper.</p>
  519. <h2>Vers une vision commune consentie</h2>
  520. <p>Néanmoins, ces pistes ne pourront passer à une échelle plus large et <em>a fortiori</em> mondiale sans une vision politique consentie. L’enjeu est pour moi celui de faire évoluer notre espèce plus par son adaptation ou ses outils mais par sa façon d’interagir. <strong>Cela va demander aux politiques non pas de se comporter en guides mais en facilitateurs : faire en sorte que les groupes de citoyens puissent s’exprimer et interagir pour créer de la valeur et la partager.</strong></p>
  521. <p>Il existe des outils comme la <a href="http://www.sociocratie.net/Theorie/index.php">sociocratie</a> pour faire interagir ces groupes et prendre des décisions à une échelle plus large de façon à aider les politiques. Celle-ci repose sur 4 règles simples :</p>
  522. <blockquote>
  523. <ul>
  524. <li>Le consentement</li>
  525. <li>Les cercles</li>
  526. <li>Le double lien</li>
  527. <li>L’élection sans candidat</li>
  528. </ul>
  529. </blockquote>
  530. <p>Il existe également des structures juridiques comme les <a href="https://fr.wikipedia.org/wiki/Soci%C3%A9t%C3%A9_coop%C3%A9rative_et_participative">SCOP</a> qui amènent des valeurs <a href="https://larlet.fr/david/blog/2013/scopyleft-valeurs/">démocratiques et collaboratives</a> au sein de l’entreprise.</p>
  531. <blockquote>
  532. <p>Penser global, agir local. — <a href="https://fr.wikipedia.org/wiki/Ren%C3%A9_Dubos">René Dubos</a></p>
  533. </blockquote>
  534. <p><strong>Je suis de plus en plus persuadé qu’Internet était un accident et que nous n’étions pas prêts à nous servir d’un tel outil.</strong> Avant de passer à une échelle globale il va falloir apprendre à collaborer de manière locale. Il faut envisager Internet comme un cap en direction duquel notre société et notre espèce peuvent aller pour évoluer de manière significative : <strong>celui qui fait passer de l’individu au groupe, celui qui fait passer de la sécurité à la collaboration, celui qui fait passer du confort à la convivialité.</strong></p>
  535. <p><em>Lecture proposée par l’un des auditeur (<a href="https://twitter.com/ygini">Yoann</a>) à la suite de l’intervention : <a href="http://thetransitioner.org/Intelligence_Collective_Revolution_Invisible_JFNoubel.pdf">Intelligence Collective, la révolution invisible</a>.</em></p>
  536. </article>
  537. <section>
  538. <h3>Discussion suite à l’article :</h3>
  539. <article id="comment-1" class="comment">
  540. <blockquote>
  541. <p>On ne sait plus prendre soin de son voisin ou de ses enfants.</p>
  542. </blockquote>
  543. <p>Ce n’est pas un peu réducteur, David ? Je comprends le fond du message,
  544. mais je laisserais tomber internet n’importe quand pour mes enfants.
  545. Peut-être pas mes voisins, il est vrai, mais j’ai de meilleurs amis
  546. grâce à internet que sans lui, d’une certaine manière. Des gens du monde
  547. entier avec qui je lie des amitiés profondes et avec qui on parle des
  548. heures.</p>
  549. <p>Un village remplace l’autre ?</p>
  550. <p><cite>Stéphane Deschamps, le <a href="#comment-1">2013-10-28 à 23:33</a></cite></p>
  551. </article>
  552. <article id="comment-2" class="comment">
  553. <blockquote>
  554. <p>Peut-être pas mes voisins, il est vrai, mais j’ai de meilleurs amis grâce à internet que sans lui, d’une certaine manière. </p>
  555. </blockquote>
  556. <p>« Pas testable » dit la petite voix en moi.
  557. Tu as des amis que tu as trouvé sur internet mais tu ne sais pas s’ils sont meilleurs ou moins bons que si tu les avais fait dans ton réseau géographique proche. Pour plein de raisons, l’amitié cela prend du temps, de l’émotion, du respect, des coups durs, etc.</p>
  558. <p>Internet est un outil magnifique. Il ouvre des voyages, de la poésie, de la découverte. En revanche, nous, hyper-connectés sur nos réseaux sociaux, nous transformons notre approche du monde sur un flux tendu réactif. La nature a été à une époque un lieu difficile à conquérir avec de nombreux dangers. Il nous a fallu construire des silos (villes et villages) pour ensemble se protéger. Aujourd’hui, ce qui est agressif est ce qui constitue notre sociabilité. Le langage et nos communications sont très instrumentalisés. Il est difficile de prendre du recul ou de la distance sans avoir peur d’être laisser de côté. Car ce qui agresse est aussi, notre moyen de survie. Je ne parle pas de dépendances, ni de dégoûts, juste du trouble ambivalent.</p>
  559. <blockquote>
  560. <p>Avant de passer à une échelle globale il va falloir apprendre à collaborer de manière locale.</p>
  561. </blockquote>
  562. <p>Ce qui se passe avec la NSA est très intéressant, en dehors de l’enjeu scandaleux, combien de nos messages transitent plusieurs fois à travers les continents avant de nous atteindre.</p>
  563. <p>De la ville de Longjumeau, France à travers le réseau Orange, tu envoies un mail à librelist, dont le serveur est à San Francisco, États-Unis. David l’a reçu et l’a peut-être modéré (si ce n’est pas automatique) donc re-transfert en France. Ce message a ensuite été redistribué à tous les abonnés de la liste dont mon serveur qui est à Boston, pour finalement être relevé à Montréal.</p>
  564. <p>C’est merveilleux et en même temps, je me dis qu’il y a quelque chose de pas tout à fait efficace dans ce système. Pourquoi lorsque nous envoyons un message à nos proches à deux maisons d’ici, il doit faire un trajet vers des serveurs très loin. Au niveau de l’infrastructure, de la confidentialité, de la proximité, de l’échange, il y a des choses qui ne sont pas efficaces localement. Les réseaux ad-hocs ne sont toujours pas une réalité quotidienne entre nous. De mêmes nos échanges locaux ne sont plus tout à fait direct. Ceci est accentué par les villes où la surabondance d’interactions nous invite à justement éviter nos voisins.</p>
  565. <p>Je me souviens d’une statistique amusante, mais qui a quelque chose d’intéressant. Les couples de moineaux de campagnes tiennent plus longtemps que les couples de moineaux des villes.</p>
  566. <p><cite>Karl Dubost, le <a href="#comment-2">2013-10-29 à 00:28</a></cite></p>
  567. </article>
  568. <article id="comment-3" class="comment">
  569. <blockquote>
  570. <p>« Pas testable » dit la petite voix en moi.
  571. Tu as des amis que tu as trouvé sur internet mais tu ne sais pas s’ils sont meilleurs ou moins bons que si tu les avais fait dans ton réseau géographique proche. Pour plein de raisons, l’amitié cela prend du temps, de l’émotion, du respect, des coups durs, etc.</p>
  572. </blockquote>
  573. <p>Karl,</p>
  574. <p>J’ai dit « d’une certaine manière » parce qu’il m’est difficile de dire
  575. en peu de mots toute la richesse et l’intelligence (et l’affect) que je
  576. tire des relations qu’internet m’a apportées (même en faisant
  577. abstraction de la magie que tu décris très bien).</p>
  578. <p>Ce n’est effectivement pas testable, c’est du qualitatif et de
  579. l’affectif. Ce que je voulais dire maladroitement, l’heure avancée
  580. aidant, c’est que j’ai malgré cela, heureusement, un très grand plaisir
  581. à croiser un mec de mon quartier avec qui je n’ai presque rien de commun
  582. en termes de vie quotidienne, sans savoir pourquoi à part la générosité
  583. de son sourire, tout comme j’ai un très grand plaisir et un grand
  584. attachement à plein de gens rencontrés via internet. Quand je dis qu’ils
  585. sont meilleurs, j’entends que j’ai des relations plus profondes dans cet
  586. espace-là, relations qui souvent se prolongent dans la vie réelle.</p>
  587. <p>C’est très brouillon, hein, mais je veux dire que ce n’est pas
  588. antithétique ; en tout cas, je ne suis pas privé de relations, en
  589. particulier de relations du "monde réel", parce que je suis connecté au
  590. réseau. Mais force m’est de constater que la plupart des gens que j’ai
  591. rencontrés ces dernières années, la plupart de ceux avec qui j’ai
  592. construit des relations affectives et itnellectuelles durables, je les
  593. ai rencontrés via internet.</p>
  594. <p><cite>Stéphane Deschamps, le <a href="#comment-3">2013-10-29 à 00:41</a></cite></p>
  595. </article>
  596. <article id="comment-4" class="comment">
  597. <blockquote>
  598. <p>J’ai dit « d’une certaine manière » parce qu’il m’est difficile de dire en peu de mots toute la richesse et l’intelligence (et l’affect) que je tire des relations qu’internet m’a apportées (même en faisant abstraction de la magie que tu décris très bien).</p>
  599. </blockquote>
  600. <p>C’est justement assez révélateur du <em>manque</em> de richesse que l’on a dans nos relations en ligne avec un manque d’expressivité, de contexte, de sensations. Le tweet/sms est emblématique d’une telle pauvreté de communication et de l’illusion de socialisation qu’elle procure. C’est bien pour cela que l’on a autant besoin de regroupements ponctuels qui nous rendent si heureux.</p>
  601. <blockquote>
  602. <p>David l’a reçu et l’a peut-être modéré (si ce n’est pas automatique) donc re-transfert en France. </p>
  603. </blockquote>
  604. <p>Pour information, je n’ai aucun moyen de modérer la liste, ni les abonnements, ni de savoir qui est abonné. Et j’aime bien ça :-)</p>
  605. <blockquote>
  606. <p>Au niveau de l’infrastructure, de la confidentialité, de la proximité, de l’échange, il y a des choses qui ne sont pas efficaces localement. Les réseaux ad-hocs ne sont toujours pas une réalité quotidienne entre nous. De mêmes nos échanges locaux ne sont plus tout à fait direct.</p>
  607. </blockquote>
  608. <p>Il y a un chaînon (lien ?) manquant entre l’échelle locale (réseau domestique/intranet d’entreprise) et l’échelle mondiale (internet). Il y a eu des initiatives comme les réseaux wifi longue portée à l’échelle de villages/villes mais c’était pour se connecter à Internet et non pour échanger localement il me semble. Il y aurait des choses à tenter pourtant…</p>
  609. <blockquote>
  610. <p>Je me souviens d’une statistique amusante, mais qui a quelque chose d’intéressant. Les couples de moineaux de campagnes tiennent plus longtemps que les couples de moineaux des villes.</p>
  611. </blockquote>
  612. <p>Il serait intéressant de savoir pourquoi : plus grande mortalité ? plus de relations possibles ? adaptation à une population plus dense ? etc.</p>
  613. <p><cite>David Larlet, le <a href="#comment-4">2013-10-30 à 08:49</a></cite></p>
  614. </article>
  615. </section>
  616. <nav id="jumpto">
  617. <p>
  618. <a rel=prev href="/david/blog/2013/web-oriente-composants/">← Un Web orienté composants</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/conseils-pere/">Conseils de père →</a>
  619. </p>
  620. </nav>
  621. <footer>
  622. <div>
  623. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  624. <p>
  625. Bonjour/Hi!
  626. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  627. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  628. </p>
  629. <p>
  630. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  631. </p>
  632. <p>
  633. Les dernières publications hebdomadaires sont :
  634. </p>
  635. <ul class="with_columns">
  636. <li>
  637. <a href="/david/stream/2019/12/31/">Merci</a>
  638. </li>
  639. <li>
  640. <a href="/david/stream/2019/12/27/">Intemporels</a>
  641. </li>
  642. <li>
  643. <a href="/david/stream/2019/12/24/">Outils</a>
  644. </li>
  645. <li>
  646. <a href="/david/stream/2019/12/17/">Origines</a>
  647. </li>
  648. <li>
  649. <a href="/david/stream/2019/12/10/">Publier</a>
  650. </li>
  651. <li>
  652. <a href="/david/stream/2019/12/03/">En forêt</a>
  653. </li>
  654. <li>
  655. <a href="/david/stream/2019/11/26/">Ecocentric</a>
  656. </li>
  657. <li>
  658. <a href="/david/stream/2019/11/19/">Se livrer</a>
  659. </li>
  660. <li>
  661. <a href="/david/stream/2019/11/12/">Dépendances</a>
  662. </li>
  663. <li>
  664. <a href="/david/stream/2019/11/05/">Positif</a>
  665. </li>
  666. <li>
  667. <a href="/david/stream/2019/10/29/">Dettes</a>
  668. </li>
  669. <li>
  670. <a href="/david/stream/2019/10/22/">Privilèges</a>
  671. </li>
  672. <li>
  673. <a href="/david/stream/2019/10/15/">Discrétion</a>
  674. </li>
  675. <li>
  676. <a href="/david/stream/2019/10/08/">Désespérance</a>
  677. </li>
  678. <li>
  679. <a href="/david/stream/2019/10/01/">Présent</a>
  680. </li>
  681. <li>
  682. <a href="/david/stream/2019/09/24/">Manifester</a>
  683. </li>
  684. <li>
  685. <a href="/david/stream/2019/09/17/">Arpenter</a>
  686. </li>
  687. <li>
  688. <a href="/david/stream/2019/09/10/">Nostalgie</a>
  689. </li>
  690. <li>
  691. <a href="/david/stream/2019/09/03/">Déconstruire</a>
  692. </li>
  693. <li>
  694. <a href="/david/stream/2019/08/27/">Documenter</a>
  695. </li>
  696. <li>
  697. <a href="/david/stream/2019/08/20/">Frustration</a>
  698. </li>
  699. <li>
  700. <a href="/david/stream/2019/08/13/">Holisme</a>
  701. </li>
  702. <li>
  703. <a href="/david/stream/2019/08/06/">1%</a>
  704. </li>
  705. <li>
  706. <a href="/david/stream/2019/07/30/">Exemplarité</a>
  707. </li>
  708. <li>
  709. <a href="/david/stream/2019/07/23/">Timelines</a>
  710. </li>
  711. <li>
  712. <a href="/david/stream/2019/07/16/">Écoute</a>
  713. </li>
  714. <li>
  715. <a href="/david/stream/2019/07/02/">Anxiété</a>
  716. </li>
  717. <li>
  718. <a href="/david/stream/2019/06/21/">À lier</a>
  719. </li>
  720. <li>
  721. <a href="/david/stream/2019/06/14/">Pauvreté</a>
  722. </li>
  723. <li>
  724. <a href="/david/stream/2019/06/07/">Amateur</a>
  725. </li>
  726. <li>
  727. <a href="/david/stream/2019/05/31/">Pollution</a>
  728. </li>
  729. <li>
  730. <a href="/david/stream/2019/05/24/">Apaisement</a>
  731. </li>
  732. <li>
  733. <a href="/david/stream/2019/05/10/">Folie</a>
  734. </li>
  735. <li>
  736. <a href="/david/stream/2019/05/03/">Sympathie</a>
  737. </li>
  738. <li>
  739. <a href="/david/stream/2019/04/12/">Péremption</a>
  740. </li>
  741. <li>
  742. <a href="/david/stream/2019/04/05/">Définitions</a>
  743. </li>
  744. <li>
  745. <a href="/david/stream/2019/03/29/">Acceptation</a>
  746. </li>
  747. <li>
  748. <a href="/david/stream/2019/03/22/">Dissonance</a>
  749. </li>
  750. <li>
  751. <a href="/david/stream/2019/03/15/">Reconnaissance</a>
  752. </li>
  753. <li>
  754. <a href="/david/stream/2019/03/08/">Lecture</a>
  755. </li>
  756. <li>
  757. <a href="/david/stream/2019/03/01/">Journaux</a>
  758. </li>
  759. <li>
  760. <a href="/david/stream/2019/02/22/">Écriture</a>
  761. </li>
  762. <li>
  763. <a href="/david/stream/2019/02/15/">Kyriarchie</a>
  764. </li>
  765. <li>
  766. <a href="/david/stream/2019/02/08/">Mots-serrures</a>
  767. </li>
  768. <li>
  769. <a href="/david/stream/2019/02/01/">Sans voie</a>
  770. </li>
  771. <li>
  772. <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
  773. </li>
  774. <li>
  775. <a href="/david/stream/2019/01/18/">Agilité</a>
  776. </li>
  777. <li>
  778. <a href="/david/stream/2019/01/11/">Métaphores</a>
  779. </li>
  780. <li>
  781. <a href="/david/stream/2019/01/04/">Balbutiements</a>
  782. </li>
  783. </ul>
  784. <p>
  785. Voici quelques articles choisis :
  786. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  787. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  788. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  789. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  790. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  791. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  792. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  793. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  794. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  795. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  796. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  797. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  798. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  799. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  800. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  801. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  802. </p>
  803. <p>
  804. 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>.
  805. </p>
  806. <p>
  807. Je ne traque pas ta navigation mais mon
  808. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  809. conserve des logs d’accès.
  810. </p>
  811. </div>
  812. </footer>
  813. <script type="text/javascript">
  814. ;(_ => {
  815. const jumper = document.getElementById('jumper')
  816. jumper.addEventListener('click', e => {
  817. e.preventDefault()
  818. const anchor = e.target.getAttribute('href')
  819. const targetEl = document.getElementById(anchor.substring(1))
  820. targetEl.scrollIntoView({behavior: 'smooth'})
  821. })
  822. })()
  823. </script>
  824. <script>
  825. /* Service workers */
  826. if (navigator.serviceWorker) {
  827. window.addEventListener('load', function () {
  828. var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
  829. function sendLinks (selector) {
  830. var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
  831. return link.getAttribute('href')
  832. })
  833. links.push(location.pathname) // Put the current page in cache too.
  834. navigator.serviceWorker.controller.postMessage({ links: links })
  835. }
  836. navigator.serviceWorker.getRegistration()
  837. .then(function (registration) {
  838. if (!registration || !navigator.serviceWorker.controller) {
  839. return navigator.serviceWorker.register('/serviceworker.js')
  840. .then(navigator.serviceWorker.ready)
  841. .then(function () {
  842. console.log('[ServiceWorker] Ready to go!')
  843. })
  844. .catch(console.error.bind(console))
  845. } else {
  846. console.log('[ServiceWorker] Send links via registration')
  847. sendLinks(selector)
  848. }
  849. })
  850. navigator.serviceWorker.addEventListener('controllerchange', function () {
  851. console.log('[ServiceWorker] Send links via controller change')
  852. sendLinks(selector)
  853. })
  854. navigator.serviceWorker.addEventListener('message', function (event) {
  855. var link = document.querySelector('a[href="' + event.data.link + '"]')
  856. if (event.data.status && link) {
  857. link.style.backgroundColor = '#2d7474'
  858. link.style.color = '#f0f0ea'
  859. link.setAttribute('title', 'En cache pour consultation sans connexion')
  860. }
  861. })
  862. })
  863. } else {
  864. console.warn('[ServiceWorker] No cache for old browsers.')
  865. }
  866. </script>