davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
173 提交
1 分支
目录树: 59da1dace8
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '59da1dace8'
${ noResults }
larlet-fr-david-cache/cache/3eb49ff78eeddb4fff4b569e0d7.../index.html

index.html 34KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608 
  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>Internet a permis au peuple d'écrire (en prison). (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://affordance.typepad.com/mon_weblog/2018/02/acceleration-prison.html">

  32. 

  33. <style>

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

  35. html, body, div, span,

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

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

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

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

  41. fieldset, form, label, legend,

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

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

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

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

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

  55. article, aside, details, figcaption, figure,

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

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

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

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

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

  72. @font-face {

  73.   font-family: 'EquityTextB';

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

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

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

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

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

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

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

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

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

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

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

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

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

  108. body {

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

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

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

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

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

  116.   text-rendering: optimizeLegibility;

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

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

  119. }

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

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

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

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

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

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

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

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

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

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

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

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

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

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

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

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

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

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

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

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

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

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

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

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

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

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

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

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

  282.   font-size: 1rem;

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

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

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

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

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

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

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

  296. }

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

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

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

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

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

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

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

  304.     margin-left: 0;

  305.   }

  306.   h1 {

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

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

  309.   }

  310.   h2 {

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

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

  313.   }

  314.   h3 {

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

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

  317.   }

  318. }

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

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

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

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

  323.      but if our baseline value was not expressed

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

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

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

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

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

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

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

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

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

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

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

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

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

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

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

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

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

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

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

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

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

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

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

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

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

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

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

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

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

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

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

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

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

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

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

  452.   }

  453. </style>

  454. 

  455. <h1>

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

  457.   Internet a permis au peuple d'écrire (en prison). (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://affordance.typepad.com/mon_weblog/2018/02/acceleration-prison.html">Source originale du contenu</a></h3>

  463.     <p>En Février 2016, Google lançait le format des AMP, les "<a href="https://www.ampproject.org/" rel="noopener noreferrer" target="_blank">Accelerated Mobile Pages</a>". A l'époque, <a href="https://www.numerama.com/tech/148181-google-amp-ou-quand-notre-impatience-menace-le-web-ouvert.html" rel="noopener noreferrer" target="_blank">un article de Numérama</a> pointait bien, déjà, les dangers de ce format privé concurrent au HTML qui au prétexte d'un affichage plus rapide et d'une interaction et d'un "engagement" plus forts, revenait à enfermer toujours davantage l'internaute au sein de services propriétaires, à lui ôter, toujours davantage, la possibilité et l'envie d'en sortir.</p>

  464. 

  465. <p>La semaine dernière, le 13 février 2018, Google a annoncé deux nouvelles évolutions majeures de son format AMP : AMP pour email et AMP stories. Cet article de Business Insider vous explique tout cela très bien sous le titre : "<a href="http://www.businessinsider.fr/google-lance-amp-email-amp-stories-ce-que-ca-implique" rel="noopener noreferrer" target="_blank">Google vient de confirmer que le web est désormais façonné par Facebook et Snapchat, et ce n'est pas une bonne chose.</a>"</p>

  466. 

  467. <p>On peut donc désormais "être et interagir" sur un service (Instagram, Doodle, Booking.com, etc.) sans jamais sortir de l'interface et de l'environnement de Gmail. </p>

  468. 

  469. <h2>Google Accelerated Mobile Pages = Architecture Mobile de Prison.</h2>

  470. 

  471. <p>Ce qui me frappe et m'inquiète dans cette extension des jardins fermés et des formats ou technologies propriétaires, dans cette rhétorique de l'enfermement, c'est que même les grands écosystèmes qui ne doivent leur existence qu'à des externalités "positives" (c'est notamment le cas de Google et des moteurs de recherche) sont en train de basculer vers des régimes d'internalités toujours plus denses, au risque de peut-être un jour s'effondrer sous leur propre poids. </p>

  472. 

  473. <h2>30 ans de web en 10 mots-clés.</h2>

  474. 

  475. <p>Alors que le web va bientôt fêter sa trentième année (en mars 2019), il est fascinant d'observer comment nous sommes progressivement passés d'une logique ouverte de publication à des logiques de plus en plus carcérales et concentrationnaires de consultation. C'est cette histoire que je vais essayer de vous raconter, une nouvelle fois, en tentant de la résumer autour de 10 mots-clés constituant - à mon sens - les 10 étapes cruciales de la mutation du web lors de ces vingt-neuf dernières années.</p>

  476. 

  477. <p>Ces 10 mots-clés sont les suivants :  </p>

  478. 

  479. <blockquote>

  480. <p><em>Publication &gt; Attention &gt; Intention &gt; Révélation / Migration / Rétention &gt; Prédiction &gt; Emotion &gt; Addiction &gt; Détention.</em></p>

  481. </blockquote>

  482. 

  483. <h2>Mais juste avant, quelques mots sur le "public" et le "privé".</h2>

  484. 

  485. <p>Avant le web, l'espace dit "public" de nos démocraties modernes se limitait, en termes d'expression et de revendication, à quelques manifestations plus ou moins encadrées. Si l'on voulait, avant le web toujours, rendre publique son opinion sur tel ou tel sujet en ayant sinon la garantie tout au moins la possibilité de toucher un grand nombre de personnes, il fallait d'une manière ou d'une autre être déjà être "connu" ou "reconnu" et l'on ne pouvait se dispenser de l'entremise de que qu'Umberto Eco appelait les "corporations du filtre". Avec le web, pour la première fois à l'échelle de la planète connectée, chacun disposait d'un espace d'expression <em>réellement</em> public et toujours potentiellement "grand" public, c'est à dire lisible et consultable par chacun. C'est la <a href="https://www.laquadrature.net/fr/ecransfr-l-imprimerie-a-permis-au-peuple-de-lire-internet-va-lui-permettre-d-ecrire-benjamin-bayart" rel="noopener noreferrer" target="_blank">formule de Benjamin Bayart qui résume le mieux tout cela</a> : </p>

  486. 

  487. <blockquote>

  488. <p>"L<em>'imprimerie a permis au peuple de lire. Internet va lui permettre d'écrire</em>". </p>

  489. </blockquote>

  490. 

  491. <p>Et puis progressivement les choses se sont complexifiées et brouillées. Trois événements majeurs sont venus totalement et durablement bouleverser le rapport public / privé à l'échelle numérique :</p>

  492. 

  493. <ul>

  494. <li>les blogs au début des années 2000 qui parachèvent la démocratisation réelle de la parole en abolissant les - légères - barrières techniques de la publication (maîtriser le code HTML) et / mais qui dans le même temps valident un mouvement inédit de "plateformisation" (en France les Skyblogs explosent en 2002).</li>

  495. <li>les réseaux sociaux, bien sûr, dont la caractéristique est de n'être ni réellement publics ni réellement privés comme l'a, dès le début, montré danah boyd (Facebook est créé en 2004). </li>

  496. <li>et les révélations inaugurales de Wikileaks (2006) qui vont totalement "fracasser" la notion de confidentialité dans le rapport au pouvoir (et permettre à Laurent Wauquiez de renouveler le genre du comique de situation)</li>

  497. </ul>

  498. 

  499. <h2>Passons maintenant aux 10 mots-clés annoncés.</h2>

  500. 

  501. <p><strong>1. PUBLICATION. </strong><em>Tout commence en Mars 1989.</em> La matrice originale du web. Un média de la publication. Du rendu public. D'un rendu <em>réellement</em> public qui présuppose que chacun puisse disposer d'une page et d'une adresse. <a href="http://affordance.typepad.com/mon_weblog/2012/11/le-web-promesse-tenue-.html" rel="noopener noreferrer" target="_blank">La promesse originelle</a>. Cette utopie concrète que fut le web, qui paradoxalement commença de s'étioler alors que venait d'être publié <a href="http://affordance.typepad.com/mon_weblog/2018/02/nouvelle-declaration-independance-cyberespace-hommage-john-perry-barlow.html" rel="noopener noreferrer" target="_blank">l'un des textes les plus féconds de son imaginaire partagé</a>.  </p>

  502. 

  503. <p><strong>2. ATTENTION.</strong> <em>Des années 1994 à 2000.</em> L'arrivée de l'économie. D'un business model. Celui de l'économie de l'attention. Amazon est lancé en 1994. Adwords sera lancé en Octobre 2000.</p>

  504. 

  505. <p><strong>3. INTENTIONS</strong>. <em>A partir de 2003</em>. La base de donnée des intentions <a href="http://battellemedia.com/archives/2010/03/the_database_of_intentions_is_far_larger_than_i_thought.php" rel="noopener noreferrer" target="_blank">comme l'appelle John Battelle depuis 2003</a>. Un an avant le lancement de Facebook. Comme un animal préparant sa mue prochaine. Et comme le dit en 2008 le responsable de la recherche chez Yahoo! "<em>We don't need taxonomy of knowledge. We need taxonomy of desire</em>. <em>A marketplace of intent</em>." (<a href="http://affordance.typepad.com/mon_weblog/2008/09/less-code-more.html" rel="noopener noreferrer" target="_blank">Source</a>)</p>

  506. 

  507. <p><strong>4. RÉVÉLATION / 5. MIGRATION / 6. RÉTENTION.</strong> <em>Le tournant 2006-2007</em>. La suite c'est ce double mouvement de révélation et de rétention. En 2006, la révélation c'est Wikileaks. La migration c'est celle du "Cloud". Amazon Web Service sera lancé en 2007. Nos données, toutes nos données, publiques, privées, celles relevant de l'explicite et du déclaratif, mais également celles permettant de caractériser la nature de notre attention et la logique de nos intentions, toutes nos données sont captées et retenues, détenues dans ces énormes centres de (r&amp;d)étention que sont les Data Centers. Rétention. Les grandes plateformes sont déjà passées à la phase suivante. </p>

  508. 

  509. <p><strong>7. PRÉDICTION</strong>. <em>Circa 2010-2012.</em> La prédiction est l'autre face de l'intention. Connaître la seconde c'est s'assurer de la fiabilité de la première. De cette corrélation nourrie de nos données va naître une chaîne de causalité inédite à cette échelle, à l'échelle de l'humanité connectée. Prévisible comme elle l'est depuis la nuit des temps, mais avec pour la première fois un déterminisme causal de la chaîne de prédictibilité des comportements dont les éléments tiennent presqu'entièrement dans le giron de quelques jardins fermés. "<a href="https://fr.wikipedia.org/wiki/La_sociologie_est_un_sport_de_combat" rel="noopener noreferrer" target="_blank">La sociologie est un sport de combat</a>". Nous le savions. Ce que nous ignorions c'est que combinée aux mathématiques statistiques et à l'algorithmie elle allait devenir une <a href="https://weaponsofmathdestructionbook.com/" rel="noopener noreferrer" target="_blank">arme de destruction matheuse</a>. "Predpol", emblématique algorithme de "police prédictive" convoquant l'imaginaire de Minority Report est lancé en 2011. </p>

  510. 

  511. <p><strong>8. ÉMOTIONS.</strong> <a href="http://affordance.typepad.com/mon_weblog/2017/01/base-de-donnee-emotions.html" rel="noopener noreferrer" target="_blank">Une autre base de donnée en construction</a>. Nouvelle tour de Babel des annonceurs. En 2012 paraît "<a href="http://books.openedition.org/oep/198?lang=fr" rel="noopener noreferrer" target="_blank">Opinion Mining et Sentiment Analysis</a>" de Dominique Boullier et Audrey Lohard qui annonce la couleur de ce qui est déjà en train de devenir une véritable industrie. En 2017, dans "<a href="https://presse.ina.fr/le-web-affectif-une-economie-numerique-des-emotions-de-camille-alloing-et-julien-pierre-ina-editions-2017/" rel="noopener noreferrer" target="_blank">Le web affectif : une économie des émotions</a>", Camille Alloing et Julien Pierre font un premier état des lieux. L'industrie se porte bien. Nous, peut-être un peu moins.</p>

  512. 

  513. <p><strong>9. ADDICTION.</strong> <em>2016 et après.</em> Car puissante est la voix du côté obscur. Et que bien sûr la fabrique du consentement ne peut faire l'économie d'une fabrique de l'addiction. Fabrique par ailleurs parfaitement documentée par des repentis de plus en plus nombreux. Et comme on dit dans le grand banditisme, s'il y a des repentis, c'est bien qu'il y avait une mafia. <a href="http://affordance.typepad.com/mon_weblog/2017/12/facebookenstein.html" rel="noopener noreferrer" target="_blank">Les révélations de Tristan Harris mais aussi celles du livre "Chaos Monkeys"</a> ouvrent une brèche qui n'est toujours pas refermée aujourd'hui. </p>

  514. 

  515. <p><strong>10. DÉTENTION.</strong> Le passage d'un web libre, ouvert et décentralisé à des navigations carcérales dans les plateformes silos. Depuis 2010 le fondateur du web n'a de cesse de dénoncer et d'alerter sur le danger de <a href="http://www.telegraph.co.uk/technology/facebook/8151101/tTim-Berners-Lee-criticises-Facebooks-walled-garden.html" rel="noopener noreferrer" target="_blank">ce qu'il nomme des "Walled Gardens"</a>. En 2010 j'écrivais : "<a href="http://abonnes.lemonde.fr/idees/article/2010/11/30/choisir-le-web-que-nous-voulons-l-exploration-ou-la-prison_1446539_3232.html" rel="noopener noreferrer" target="_blank">Choisir le web que nous voulons : l'exploration ou la prison</a>". Il semble que par défaut ce choix ait été fait. Et que nous n'en finissions plus d'explorer nos prisons.  </p>

  516. 

  517. <h2>Se remettre à publier.</h2>

  518. 

  519. <p>Se défaire de cette chaîne. Remonter le cours. Comment ? Simplement. Se remettre à publier. Mais à publier ailleurs. Ailleurs que dans le giron des plateformes. Simplement sur une adresse que l'on aurait achetée chez un indépendant (<a href="https://www.gandi.net/fr" rel="noopener noreferrer" target="_blank">par exemple Gandi</a>). A publier sur autre chose que sur nos simples intentions. A réagir sur autre chose que sur nos simples émotions. Se remettre à publier donc. Le web restera un média de la publication. Gafa ou pas Gafa, plateformes hyper-centralisées ou architecture décentralisée, rien ne tient sans cette logique première de la publication. Se remettre à publier. Alors on se remettra à lire. Et tout recommencera. <a href="https://www.youtube.com/watch?v=PQeeZ-SD_iU&amp;t=2s" rel="noopener noreferrer" target="_blank">N'est-ce pas Marguerite, toi qui avait déjà tout prévu</a> ?</p>

  520. 

  521. <p>Se remettre à publier ailleurs. Retrouver d'autres formes d'attention simplement en commençant par faire attention à l'endroit d'où nous publions. Avoir déjà l'intention de le faire. Ils veulent nos données ? Qu'ils les prennent. Mais qu'ils fassent au moins l'effort de venir les chercher là où elles sont, en dehors de chez eux. <a href="https://degooglisons-internet.org/" rel="noopener noreferrer" target="_blank">Sur des services ouverts, libres et décentralisés</a>. Fin de la rétention choisie. S'y forcer. S'y astreindre. <a href="http://www.davduf.net/+-linux-+" rel="noopener noreferrer" target="_blank">Prendre sa part</a>. Casser la chaîne de prédiction ensuite. Pour cela, en publiant ailleurs, permettre que la causalité déterministe que leurs algorithmes parviennent à construire ne soit plus qu'une forme renouvelée de corrélation fortuite, <a href="http://affordance.typepad.com/mon_weblog/2010/02/ingenieries-de-la-serendipite.html" rel="noopener noreferrer" target="_blank">de sérendipité féconde</a>.  </p>

  522. 

  523. <p>Cesser de conditionner la lisibilité, le fait d'être lu, aux seules règles marchandes de la "visibilité". La question de la visibilité n'a de toute façon plus aucun sens. Nous sommes passés du temps où "<em>tout le monde voulait être visible sur Google sans savoir comment s'y prendre</em>" au temps où "<em>ça ne sert de toute façon plus à rien puisque, primo, tout le monde paie pour cette visibilité et que tout le monde est donc visible et que surtout, deuxio, plus personne ne voit la même chose</em>." Alors passons à autre chose.  </p>

  524. 

  525. <h2>Ecrire en prison.</h2>

  526. 

  527. <p>"L<em>'imprimerie a permis au peuple de lire. Internet va lui permettre d'écrire</em>" <a href="https://www.laquadrature.net/fr/ecransfr-l-imprimerie-a-permis-au-peuple-de-lire-internet-va-lui-permettre-d-ecrire-benjamin-bayart" rel="noopener noreferrer" target="_blank">écrivait donc Benjamin Bayart en Septembre 2009</a>.</p>

  528. 

  529. <p>Un an auparavant, en Novembre 2008 en Iran, Hossein Derakhshan est condamné à une peine de 20 ans de prison, notamment pour des propos tenus sur son blog. Il en sortira finalement 6 ans plus tard, en 2014. Après 6 ans sans connexion, son retour dans le cyberespace va le bouleverser, et la lettre qu'il va nous adresser sera également bouleversante. Elle est titrée "The web we have to save" (en <a href="https://medium.com/matter/the-web-we-have-to-save-2eb1fe15a426" rel="noopener noreferrer" target="_blank">Anglais</a> et en <a href="http://www.liberation.fr/ecrans/2015/07/20/six-ans-apres-internet-se-recroqueville_1351044" rel="noopener noreferrer" target="_blank">Français</a>) et se termine ainsi :</p>

  530. 

  531. <blockquote>

  532. <p>"Le Web n’était pas envisagé comme une forme de télévision, lorsqu’il a été inventé. Mais, qu’on le veuille ou non, il se rapproche de plus en plus du petit écran : linéaire, passif, programmé et replié sur son propre nombril. Quand je me connecte sur Facebook, c’est ma télévision personnelle qui s’allume. Et je n’ai qu’à tout faire défiler : nouvelles photos de profil de mes amis, petites brèves résumant des opinions sur des articles d’actualité, liens vers des chroniques assortis de courtes légendes, publicités, et, évidemment, vidéos qui se mettent en route toutes seules. Parfois je clique sur «j’aime» ou «partager», parfois je lis les commentaires des autres ou j’en laisse un, parfois j’ouvre un article. Mais je reste dans Facebook, qui continue à afficher ce qui est susceptible de me plaire. Ce n’est pas l’Internet que je connaissais quand je suis entré en prison. Ce n’est pas l’avenir du Web. Cet avenir-là, c’est la télévision.</p>

  533. <p>Autrefois, Internet était une chose suffisamment sérieuse et puissante pour m’envoyer derrière les barreaux. Aujourd’hui, c’est apparemment à peine plus qu’un loisir. A tel point que même l’Iran ne prend pas certains services suffisamment au sérieux pour les bloquer - comme Instagram, par exemple. Je regrette l’époque où les gens prenaient le temps de consulter plusieurs opinions divergentes, et se donnaient la peine de lire plus qu’un paragraphe ou 140 caractères. Je regrette le temps où je pouvais écrire quelque chose sur mon propre blog, publier dans mon propre domaine, sans consacrer au moins autant de temps à le promouvoir ; l’époque où personne ne se souciait des «j’aime» et des «partager». C’est de ce Web-là dont j’ai le souvenir, celui d’avant la prison. C’est ce Web que nous devons sauver."</p>

  534. </blockquote>

  535. 

  536. <p>Alors oui, Internet a permis au peuple d'écrire. Mais aujourd'hui le peuple n'écrit plus que depuis sa prison.</p>

  537. 

  538. <h2>Moralité ?</h2>

  539. 

  540. <p>D'abord rester confiant(e)s. Car toute technologie à son cycle, et celles dont nous parlons ici, l'ensemble des technologies qui ont permis l'existence du web, sont très très très très récentes. Même pas 30 ans. A peine plus d'une génération. Pas de quoi considérer que les usages dominants que nous observons (et déplorons) aujourd'hui sont suffisamment consolidés pour être ceux de demain.</p>

  541. 

  542. <p>Rester confiant(e)s donc. Et rester enthousiastes. Parce qu'aux shoots de dopamine des plateformes répondent désormais de nouvelles approches des interfaces, de nouvelles questions d'éthiques qui ne sont pas que de façade, qui sont accompagnées par des cadres juridiques et réglementaires (le RGPD notamment) et qui doivent surtout et avant tout continuer d'être accompagnés par chacun d'entre nous à chaque fois qu'il peut être en situation d'être le formateur, le prof ou le conseiller de quelqu'un d'autre. Prendre notre part. Les alternatives existent. Les plans B aussi. Aucune forteresse n'est imprenable. Aucun mur d'aucun jardin fermé ne tient face au bélier de l'intérêt collectif pour autant qu'il arrive à s'incarner dans une lutte légitime. </p>

  543. 

  544. <p>"<em>Nous avons besoin d'un internet fait d'enthousiasmes non-monétisables</em>". <a href="http://www.wired.co.uk/article/obsessive-depth-of-the-internet" rel="noopener noreferrer" target="_blank">La formule n'est pas de moi</a>. Mais je la trouve assez belle. Et vous la propose comme un programme d'avenir. </p>

  545.   </article>

  546. </section>

  547. 

  548. 

  549. <nav id="jumpto">

  550.   <p>

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

  552.     <a href="http://affordance.typepad.com/mon_weblog/2018/02/acceleration-prison.html">Source originale</a> |

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

  554.   </p>

  555. </nav>

  556. 

  557. <footer>

  558.   <div>

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

  560.     <p>

  561.       Bonjour/Hi!

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

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

  564.     </p>

  565.     <p>

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

  567.     </p>

  568.     

  569.     <p>

  570.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  587.     </p>

  588.     <p>

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

  590.     </p>

  591.     <p>

  592.       Je ne traque pas ta navigation mais mon

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

  594.       conserve des logs d’accès.

  595.     </p>

  596.   </div>

  597. </footer>

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

  599.   ;(_ => {

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

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

  602.       e.preventDefault()

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

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

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

  606.     })

  607.   })()

  608. </script>