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.
26 Commits
1 Branch
Tree: 9c2d709fb0
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '9c2d709fb0'
${ noResults }
larlet-fr-david/david/blog/2014/un-web-omni-present/index.html

index.html 39KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892 
  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>Un web omni-présent — 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/2014/un-web-omni-present/">

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

  31.   <meta name="description" content="Intervention donnée lors des Rencontres de Lure 2014." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Intervention donnée lors des Rencontres de Lure 2014." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Un web omni-présent" />

  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/2014/un-web-omni-present/" />

  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/blog/2014/un-web-omni-present.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.   Un web omni-présent

  468.   <time>Publié le 26 août 2014</time>

  469. </h1>

  470. <article class="single">

  471.   <p><em>Intervention donnée lors des <a href="http://delure.org/">Rencontres de Lure</a>, avec pour thème CHEMINS DE FAIRE, ACTIVER LA PAGE BLANCHE // Traverse. 1h et un public inconnu, bien éloigné de ma zone de confort…</em></p>

  472. <p>J’ai emprunté plusieurs <em>chemins de traverse</em> au cours de ma vie. Le premier a été de passer de la biologie à l’informatique et plus particulièrement au web. Puis j’ai assez rapidement décidé de travailler à mon compte pour avoir plus de liberté. Je suis ensuite allé au Japon pendant un an pour explorer une nouvelle culture, d’autres modes de vie et de pensée. Et enfin j’ai co-créé une SCOP de retour en France il y a 2 ans. Chacune de ces expériences a été l’occasion de repartir d’une <em>page blanche</em>. Ou presque. De faire en sorte que mon passé et ma culture soient des acteurs de nouvelles interactions dans de nouveaux domaines.</p>

  473. <p>En découvrant le web, j’ai exploré un monde de relations qui n’était finalement pas si éloigné de la biologie. En découvrant la vie de freelance, j’ai pris conscience des enjeux et des responsabilités qui incombent à un chef d’entreprise, chaque client devenant un petit patron. En découvrant le Japon, j’ai appris à apprécier les singularités de la culture française. En découvrant la collaboration, j’ai été confronté aux difficultés d’une approche démocratique.</p>

  474. <p>Aujourd’hui, on expérimente avec <a href="http://scopyleft.fr">scopyleft</a> l’activation de la <em>page blanche</em> des autres pour arriver ensemble à produire le plus de valeur. On a essayé l’agilité avant de se rendre compte qu’il fallait travailler en amont même des projets en s’inspirant des méthodes du Lean Startup (et notamment du <a href="https://fr.wikipedia.org/wiki/Lean_Startup#Lean_Canvas">Lean Canvas</a>). La vérification de la pertinence d’une idée peut être obtenue avant même de plonger dans la technique à travers des interviews ou des « produits embryons ».</p>

  475. <figure class="image">

  476.     <img src="/static/david/blog/2014/lure/univers.jpg" />

  477. </figure>

  478. 

  479. <p>Je me représente le web comme cet univers en expansion. On en définit mal les contours — on sait qu’il s’agit d’amas d’amas de galaxies — que l’on se représente plus ou moins sphérique. Parmi cette multitude d’étoiles, des planètes se sont formées et certaines se trouvent être à des conditions de pression et de température favorables à l’apparition de rencontres. <strong>J’ai l’impression d’être un astéroïde qui a atterri par hasard sur la planète des Rencontres de Lure.</strong> Afin que l’on partage un vocabulaire commun, j’ai posé 3 questions pour que l’on puisse échanger durant l’heure qui a suivi :</p>

  480. <ul>

  481. <li>Quels sont ceux d’entre vous qui travaillent dans le web ?</li>

  482. <li>Quels sont ceux parmi vous qui codent pour le web (html, css, js) ?</li>

  483. <li>Quels sont ceux qui ont un compte Facebook ? Twitter ? Gmail ?</li>

  484. </ul>

  485. <h2>Un web</h2>

  486. <blockquote>

  487. <p>The problem with a centralized web is that the few points of control attract some unsavory characters. […] It’s not just possible, but fairly common for someone to visit a Google website from a Google device, using Google DNS servers and a Google browser on the way.</p>

  488. <p><cite><em><a href="http://idlewords.com/bt14.htm">The Internet With A Human Face</a></em></cite></p>

  489. </blockquote>

  490. <p>On appelle souvent le web « la toile » ce qui lui donne une représentation concentrique avec l’araignée généralement au centre. C’est une assez mauvaise image du web originel, malheureusement cette métaphore tend à se rapprocher du web actuel. Nous sommes partis d’un web plus ou moins acentré pour arriver à un web qui ressemble à une télévision sur lequel on zappe entre 6 onglets (Google, Facebook, Twitter, Instagram, Wikipedia, Amazon). Cette position donne à ces monopoles une situation préoccupante à triple titre :</p>

  491. <ul>

  492. <li><em>Ils peuvent fragmenter le web.</em> Certains contenus, certaines données, ne deviennent accessibles qu’en faisant partie de la plateforme. En publiant sur ces sites, vous êtes acteurs de cette fragmentation sous couvert d’élitisme/snobisme.</li>

  493. <li><em>Ils peuvent filtrer le web.</em> Les algorithmes mis en place pour vous afficher les contenus de manière pertinente sont des œillères dangereuses. En ne consultant que ces sources d’information vous devenez prisonniers de bulles de complaisance bien lisses.</li>

  494. <li><em>Ils peuvent monétiser le web.</em> À partir de vos données, de vos relations, de vos interactions, de vos simples explorations. Votre profil prend de la valeur si vous êtes malade, si vous êtes dépensier, si vous tombez enceinte !</li>

  495. </ul>

  496. <p>Les amas de galaxies dont je parlais en introduction s’agrègent et perdent de leur hétérogénéité. Comment évoluera un réseau en pair à pair avec de telles inégalités entre les pairs ?</p>

  497. <p>On assiste également à une <em>app</em>-ification du web qui sous couvert de simplicité transforme vos interactions à travers le réseau en passant par des boîtes noires qui n’ont plus ni la simplicité des technologies web, ni la lisibilité de leur code.</p>

  498. <figure class="image">

  499.     <img src="/static/david/blog/2014/lure/unweb.jpg" />

  500. </figure>

  501. 

  502. <p>La diversité sur le web se réduit à tel point qu’une page personnelle vous fait aujourd’hui passer pour un marginal. Voire un suspect ?</p>

  503. <h2>Omni</h2>

  504. <blockquote>

  505. <p>Le coût de la surveillance est beaucoup trop bas.</p>

  506. <p><cite><em><a href="http://reflets.info/lettre-aux-barbus/">Lettre aux barbus</a></em>, Laurent Chemla</cite></p>

  507. </blockquote>

  508. <p>On parle beaucoup d’<em>Internet of Things</em>, de <em>Quantified Self</em> ou d’<em>OpenData</em> avec l’idée derrière tout cela que beaucoup de données (<em>Big Data</em> — BINGO!) vont transiter entre nous, nos objets et notre environnement au sens large pour <strike>enrichir des hipsters de la silicon valley</strike> nous simplifier la vie.</p>

  509. <p>Malheureusement ce dont on s’est aperçu avec Snowden et depuis, c’est que <strong>ces données servent surtout à nous tracer à grande échelle.</strong> Cette surveillance généralisée est préoccupante pour 3 raisons :</p>

  510. <ul>

  511. <li><em>Perte de confiance dans le politique.</em> C’était déjà pas la joie mais alors là c’est à vous faire douter de votre intérêt pour la citoyenneté. Les acteurs en puissance ont tout à gagner à ce qu’on les laisse s’amuser entre eux. Mais ce n’est plus de la démocratie…</li>

  512. <li><em>Sentiment d’insécurité et lissage de l’opinion.</em> Si chaque citoyen devient suspect, il faut <a href="http://www.journaldugeek.com/2014/08/28/spirale-du-silence-baillonnereseaux-sociaux/">se fondre dans la masse</a>. Pour tromper les algorithmes, pour tromper les (futurs) drones, pour finir par se tromper soi-même. Et lorsqu’on s’est suffisamment conformé au moule on tape sur la minorité voisine pour évacuer son stress et se sentir vivant. Ou on retweete une cause vraiment juste… <a href="http://www.slate.fr/story/90839/indigner-twitter-oublier">mais passagère aussi</a>.</li>

  513. <li><em>Renoncement à une vie privée numérique.</em> Puisque <a href="http://www.framablog.org/index.php/post/plus-rien-ne-marche-que-faire">plus rien ne marche</a>, autant vivre avec et arrêter d’essayer de se battre contre des moulins. De toute façon ceux qui ont peur <a href="https://www.youtube.com/watch?v=xxSKmecZ09E">doivent bien avoir quelque chose à cacher</a> ? Ou peut-être que l’on a envie d’un web intime, d’un web qui autorise les erreurs, d’un web qui dénonce les injustices ?</li>

  514. </ul>

  515. <figure class="image">

  516.     <img src="/static/david/blog/2014/lure/traces.jpg" />

  517. </figure>

  518. 

  519. <p>Devant cette surveillance généralisée, pour vivre heureux vivons submergés ?</p>

  520. <h2>Présent</h2>

  521. <blockquote>

  522. <p>Seven generation sustainability is an ecological concept that urges the current generation of humans to live sustainably and work for the benefit of the seventh generation into the future.</p>

  523. <p><cite><em><a href="https://en.wikipedia.org/wiki/Seven_generation_sustainability">Great Law of the Iroquois</a></em></cite></p>

  524. </blockquote>

  525. <p><em>Internet n’oublie jamais.</em> On a tous entendu cet adage qui est pourtant relativement faux. Des pages, des photos, des données disparaissent tous les jours. Lorsqu’un service ferme ce sont des milliers, voire des millions de comptes qui sont perdus. J’ai d’ailleurs appelé cela <a href="/david/biologeek/archives/20091202-discussions-sur-les-applications-web-libres/">un datacide</a> lorsque l’on assiste à un génocide de données. Cela peut avoir des effets bénéfiques et l’on pense bien évidemment au <em>droit à l’oubli</em> mais le problème est qu’Internet n’agit pas comme une souvenance — la façon dont on se souvient de ce que l’on a vécu — mais comme un journal de bord à moitié effacé. On ne choisit pas ce qui est conservé, on le subit.</p>

  526. <p><strong>Face à cette culpabilité numérique on en vient à une sorte d’exhibitionnisme numérique</strong> : plus je publie et moins les choses que je souhaite cacher seront visibles. On obtient des flux sans réflexion, sans espoir d’archivage, sans aucun contrôle. Le lâcher-prise sur ses interactions en ligne est symptomatique d’une inconscience généralisée de l’usage qui peut en être fait.</p>

  527. <figure class="image">

  528.     <img src="/static/david/blog/2014/lure/present.jpg" />

  529. </figure>

  530. 

  531. <p>Ouf ! On a survécu à l’introduction un peu déprimante (j’ai réussi à plomber l’ambiance de typographes — huhu). Si l’on analyse chacun des points de ce web omni-présent, on constate qu’il y a principalement <a href="/david/blog/2013/confort-convivialite/">un problème de confort</a>. Le web se fragmente car on ne prend pas la peine d’avoir son propre serveur, se surveille massivement car on est paresseux sur le chiffrement et disparait car l’on n’a pas envie de se soucier de ses traces numériques. Quelles pistes non techniques pour un web plus sain ?</p>

  532. <h2>Pistes</h2>

  533. <h3>Militer</h3>

  534. <p>Le militantisme peut avoir un impact s’il est pratiqué à large échelle. La force du web est de pouvoir transmettre et propager des informations très rapidement. Il faut se servir de cet outil à bon escient !</p>

  535. <figure class="image">

  536.     <img src="/static/david/blog/2014/lure/militer.jpg" />

  537. </figure>

  538. 

  539. <h3>Déconnecter</h3>

  540. <p>Je vais prendre mon exemple : je n’ai pas de compte Facebook, j’ai fait plusieurs <a href="/david/blog/2013/diete-tweets/">diètes de tweets</a>, je n’ai <a href="/david/blog/2013/telephone-stupide/">plus de smartphone</a>. C’est certainement extrême mais je n’en suis pas <a href="/david/blog/2013/testament-numerique/">mort numériquement</a> pour autant. Je me porte même plutôt mieux depuis. S’interroger sur ses usages permet de prendre conscience de ce qui a vraiment de la valeur.</p>

  541. <figure class="image">

  542.     <img src="/static/david/blog/2014/lure/retro.jpg" />

  543. </figure>

  544. 

  545. <h3>Innover localement</h3>

  546. <p>Je fonde beaucoup d’espoirs dans les initiatives locales. De nombreux projets sont en gestation et se développent autour de petites communautés de façon décentralisée. Une façon de s’adapter à la culture locale, de recréer une sorte d’<a href="/david/blog/2013/donnees-intimes/">intimité numérique</a>.</p>

  547. <figure class="image">

  548.     <img src="/static/david/blog/2014/lure/innover.jpg" />

  549. </figure>

  550. 

  551. <h3>Éduquer</h3>

  552. <p>Cette dynamique d’ouverture ne se fera pas sans éducation. <a href="/david/blog/2014/education-citoyenne-web/">Pas seulement auprès des enfants</a>, on n’a malheureusement pas le luxe d’attendre que les nouvelles générations représentent la majorité. Il faudrait une éducation citoyenne de masse, 100 personnes aujourd’hui qui transmettront demain à 1000 autres ? ;-)</p>

  553. <figure class="image">

  554.     <img src="/static/david/blog/2014/lure/eduquer.jpg" />

  555. </figure>

  556. 

  557. <h3>Se réapproprier</h3>

  558. <p>En utilisant des <em>outils conviviaux</em> tels que les défini Ivan Illich :</p>

  559. <ul>

  560. <li>ne doit pas dégrader l’autonomie personnelle en se rendant indispensable</li>

  561. <li>ne suscite ni esclave, ni maître</li>

  562. <li>élargit le rayon d’action personnel</li>

  563. </ul>

  564. <p>Il est temps de se réapproprier ses savoirs pour être à même de réacquérir son autonomie et en offrir à d’autres.</p>

  565. <figure class="image">

  566.     <img src="/static/david/blog/2014/lure/reapproprier.jpg" />

  567. </figure>

  568. 

  569. <p>La concentration de galaxies est à l’origine d’une augmentation de la température qui se termine généralement en trous noirs. Quels autres leviers avons-nous pour éviter que le web ne soit aspiré par ces trous noirs ? J’ai démarré le discussion avec cette citation :</p>

  570. <blockquote>

  571. <p>Il faut choisir, se reposer ou être libre.</p>

  572. <p><cite><em><a href="https://fr.wikipedia.org/wiki/Thucydide">Thucydide</a></em>, ~2400 av. Facebook</cite></p>

  573. </blockquote>

  574. <h2>Discussion</h2>

  575. <h3>Questions techniques</h3>

  576. <p>Beaucoup de discussions sur la faisabilité technique d’une telle surveillance. <a href="http://www.libwalk.so/2014/07/14/NSA-temps-de-faire-le-premier-point.html">Si l’on fait un premier point sur l’affaire Snowden</a>, le constat est on ne peut plus limpide. C’est même pire après tout ce qui a été découvert depuis…</p>

  577. <h3>Questions sur la peur</h3>

  578. <p>On m’a demandé de quoi est-ce que j’avais peur, ressortant le fameux <a href="https://www.youtube.com/watch?v=5MzlV0Clees">Nothing to hide, nothing to fear</a>. Je n’ai pas peur, je m’interroge sur un constat et sur ma participation indirecte à la situation actuelle en étant acteur de ce système. J’explore des solutions et je vais en chercher dans des lieux comme les rencontres de Lure pour y retrouver une certaine naïveté technique et une expérience vieille de quelques millénaires.</p>

  579. <h3>Solutions techniques</h3>

  580. <p>Il m’a quand même été demandé de donner quelques solutions techniques. Voici des propositions :</p>

  581. <ul>

  582. <li>Utiliser <a href="https://duckduckgo.com/">DuckDuckGo</a> ou <a href="https://www.yandex.com/">Yandex</a> plutôt que Google pour la recherche ;</li>

  583. <li>Héberger ses contenus chez <a href="http://www.online.net/fr">un des</a> <a href="https://www.ovh.com/fr/index.xml">nombreux</a> <a href="https://www.alwaysdata.com/">hébergeurs</a> <a href="https://www.gandi.net/">français</a> avec son propre nom de domaine ;</li>

  584. <li>Utiliser ce nom de domaine pour avoir <a href="http://mathieu.agopian.info/blog/quitter-gmail.html">une adresse email que l’on contrôle</a>, des projets <a href="https://caliopen.org/">dédiés à la confidentialité</a> arrivent ;</li>

  585. <li>Ne pas hésiter à <a href="/david/stream/">dupliquer ses contenus</a> lorsqu’ils sont publiés sur des plateformes externes.</li>

  586. </ul>

  587. <p>Ces 4 points sont très basiques, vous pouvez ensuite vous pencher sur des solutions comme les <a href="https://fr.wikipedia.org/wiki/R%C3%A9seau_priv%C3%A9_virtuel">réseaux privés virtuels (VPN)</a> ou <a href="https://fr.wikipedia.org/wiki/Tor_%28r%C3%A9seau%29">Tor</a> pour aller plus loin.</p>

  588. <p><strong>Le web est une invention précieuse, préservons son graphe : ses liens et ses données.</strong></p>

  589. </article>

  590. 

  591. 

  592.   <figure class="image" property="schema:image">

  593.     <img src="/static/david/blog/2014/un-web-omni-present.jpg" alt="" />

  594.   </figure>

  595. 

  596. 

  597. 

  598. <nav id="jumpto">

  599.   <p>

  600.     <a rel=prev href="/david/blog/2014/heritage-immobilier/">← Héritage et immobilier</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2014/dix-ans/">10 ans →</a>

  601.   </p>

  602. </nav>

  603. 

  604. <footer>

  605.   <div>

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

  607.     <p>

  608.       Bonjour/Hi!

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

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

  611.     </p>

  612.     <p>

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

  614.     </p>

  615.     

  616.       <p>

  617.         Les dernières publications hebdomadaires sont :

  618.       </p>

  619.       <ul class="with_columns">

  620.         

  621.           <li>

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

  623.           </li>

  624.         

  625.           <li>

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

  627.           </li>

  628.         

  629.           <li>

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

  631.           </li>

  632.         

  633.           <li>

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

  635.           </li>

  636.         

  637.           <li>

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

  639.           </li>

  640.         

  641.           <li>

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

  643.           </li>

  644.         

  645.           <li>

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

  647.           </li>

  648.         

  649.           <li>

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

  651.           </li>

  652.         

  653.           <li>

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

  655.           </li>

  656.         

  657.           <li>

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

  659.           </li>

  660.         

  661.           <li>

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

  663.           </li>

  664.         

  665.           <li>

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

  667.           </li>

  668.         

  669.           <li>

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

  671.           </li>

  672.         

  673.           <li>

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

  675.           </li>

  676.         

  677.           <li>

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

  679.           </li>

  680.         

  681.           <li>

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

  683.           </li>

  684.         

  685.           <li>

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

  687.           </li>

  688.         

  689.           <li>

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

  691.           </li>

  692.         

  693.           <li>

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

  695.           </li>

  696.         

  697.           <li>

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

  699.           </li>

  700.         

  701.           <li>

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

  703.           </li>

  704.         

  705.           <li>

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

  707.           </li>

  708.         

  709.           <li>

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

  711.           </li>

  712.         

  713.           <li>

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

  715.           </li>

  716.         

  717.           <li>

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

  719.           </li>

  720.         

  721.           <li>

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

  723.           </li>

  724.         

  725.           <li>

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

  727.           </li>

  728.         

  729.           <li>

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

  731.           </li>

  732.         

  733.           <li>

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

  735.           </li>

  736.         

  737.           <li>

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

  739.           </li>

  740.         

  741.           <li>

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

  743.           </li>

  744.         

  745.           <li>

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

  747.           </li>

  748.         

  749.           <li>

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

  751.           </li>

  752.         

  753.           <li>

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

  755.           </li>

  756.         

  757.           <li>

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

  759.           </li>

  760.         

  761.           <li>

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

  763.           </li>

  764.         

  765.           <li>

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

  767.           </li>

  768.         

  769.           <li>

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

  771.           </li>

  772.         

  773.           <li>

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

  775.           </li>

  776.         

  777.           <li>

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

  779.           </li>

  780.         

  781.           <li>

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

  783.           </li>

  784.         

  785.           <li>

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

  787.           </li>

  788.         

  789.           <li>

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

  791.           </li>

  792.         

  793.           <li>

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

  795.           </li>

  796.         

  797.           <li>

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

  799.           </li>

  800.         

  801.           <li>

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

  803.           </li>

  804.         

  805.       </ul>

  806.     

  807.     <p>

  808.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  825.     </p>

  826.     <p>

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

  828.     </p>

  829.     <p>

  830.       Je ne traque pas ta navigation mais mon

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

  832.       conserve des logs d’accès.

  833.     </p>

  834.   </div>

  835. </footer>

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

  837.   ;(_ => {

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

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

  840.       e.preventDefault()

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

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

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

  844.     })

  845.   })()

  846. </script>

  847. 

  848.   <script>

  849.   /* Service workers */

  850.   if (navigator.serviceWorker) {

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

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

  853.       function sendLinks (selector) {

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

  855.           return link.getAttribute('href')

  856.         })

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

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

  859.       }

  860.       navigator.serviceWorker.getRegistration()

  861.         .then(function (registration) {

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

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

  864.               .then(navigator.serviceWorker.ready)

  865.               .then(function () {

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

  867.               })

  868.               .catch(console.error.bind(console))

  869.           } else {

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

  871.             sendLinks(selector)

  872.           }

  873.         })

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

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

  876.         sendLinks(selector)

  877.       })

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

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

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

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

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

  883.           

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

  885.           

  886.         }

  887.       })

  888.     })

  889.   } else {

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

  891.   }

  892. </script>