davidbgk
/
larlet-fr-david-cache
Observar 1
Favorito 0
Fork 0
Código Versões 0 Atividade
A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
314 Commits
1 Branch
Tag: e9ef5f47dd
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de e9ef5f47dd
${ noResults }
larlet-fr-david-cache/cache/320921a0251cb25aef965887edd.../index.html

index.html 27KB
Original Anotar Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557 
  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 chez soi numérique, c’est terminé (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://tcrouzet.com/2015/10/10/la-fin-des-medias-intermediaires-ou-la-necessite-denseigner-a-lecole-lhistoire-et-la-geographie-dinternet/">

  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.   Un chez soi numérique, c’est terminé (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://tcrouzet.com/2015/10/10/la-fin-des-medias-intermediaires-ou-la-necessite-denseigner-a-lecole-lhistoire-et-la-geographie-dinternet/">Source originale du contenu</a></h3>

  463.     <p>À l’invitation de <a href="https://twitter.com/rosselin">Jacques Rosselin</a>, j’ai parlé de ma vision du journalisme à l’âge d’Internet devant les élèves de l’<a href="http://www.efj.fr/">EFJ</a>. Je ne prépare plus guère mes conférences, mais rétrospectivement je peux résumer mon propos (surtout quand autour d’un verre <a href="http://www.internetactu.net/author/hubert/">Hubert Guillaud</a> m’aide à reformuler).<span id="more-42591"/></p>

  464. 

  465. <ol>

  466. <li><a href="http://tcrouzet.com/tag/territoire/">Internet est un territoire</a> et surtout pas un outil comme on l’entend souvent dire. Il faut imaginer les sites comme des maisons, des villages, des villes interconnectés par des routes plus ou moins importantes.</li>

  467. <li>« Qui a la carte a le pouvoir » disaient les empereurs romains. Si nous ne connaissons pas notre territoire, il nous est difficile de le vivre, de l’explorer, de l’exploiter, de l’étendre…</li>

  468. <li>L’école nous enseigne l’histoire et la géographie parce que c’est indispensable pour faire de nous des citoyens éveillés sur le territoire physique et géopolitique.</li>

  469. <li>Comme nous vivons désormais sur le territoire Internet, nous devons en connaître l’histoire et la géographie (il est aberrant que ce sujet ne soit pas encore enseigné en histoire/géo).</li>

  470. <li>Une idée reçue : le Net résulte d’un projet militaire américain. En réalité, il est né de la nécessité économique de contrôler à distance les premiers ordinateurs et notamment de les faire tourner la nuit en profitant des décalages horaires. Pendant qu’on dormait à New York, on travaillait en Californie. Peu à peu des réseaux se connectent entre eux et Internet se forme, presque de lui-même, sans que personne ne le pense de façon autocratique.</li>

  471. <li>Quand au début des années 1960, <a href="https://en.wikipedia.org/wiki/Paul_Baran">Paul Baran</a> formalise les topologies possibles d’un réseau de communication, c’est indépendamment de la naissance d’Internet (à laquelle il contribue par ailleurs en imaginant la transmission par paquets mise en œuvre dans ARPANET).</li>

  472. <p><a href="http://tcrouzet.com/images_tc//2015/10/paul.jpg"><img src="//tcrouzet.com/images_tc//2015/10/paul-600x282.jpg" alt="Les trois architectures." width="600" height="282" class="aligncenter size-large wp-image-42592"/></a></p>

  473. <li>Le réseau en étoile connecte toutes les branches à un nœud central. Les feuilles au bout des branches peuvent elles-mêmes devenir des nœuds, on obtient alors une structure hiérarchique, celle populaire dans les entreprises et les gouvernements. Les nœuds sont alors des points névralgiques : leur destruction coupe les communications.</li>

  474. <li>Le réseau distribué ressemble à un grillage. En gros, c’est le réseau routier qui interconnecte les villes. Toujours plusieurs chemins permettent de passer d’un point à un autre, ce qui implique une grande robustesse, mais aussi une très lourde infrastructure avec beaucoup de voies peu utilisées ou redondantes.</li>

  475. <li>Quant à lui, le réseau décentralisé interconnecte selon un mode distribué les nœuds des étoiles, et éventuellement les feuilles, si bien qu’il possède les avantages du réseau distribué, sans être aussi onéreux à mettre en œuvre. C’est ainsi que s’est constitué Internet.</li>

  476. <li>La décentralisation topologique du Net implique l’absence de commandement. N’importe qui peut se connecter n’importe où. Grands et petits sont également visibles et accessibles. Alors naît une utopie politique. En 1996, <a href="https://fr.wikipedia.org/wiki/John_Perry_Barlow">John Perry Barlow</a>, déclare <a href="http://editions-hache.com/essais/barlow/barlow2.html">l’indépendance du cyberspace</a>. Nous croyons que nous allons changer le monde en quelques années. Que nous allons l’arracher aux hiérarchies. Qu’un blogueur pèsera autant qu’un grand média à l’ancienne. Je prédis l’émergence <a href="http://tcrouzet.com/le-cinquieme-pouvoir/">d’un cinquième pouvoir</a>.</li>

  477. <li>Beaucoup de gens finissent pas le croire, même les politiques. L’acmé de cette époque est peut-être 2006, surtout en France. Après que le Net ait fait basculer vers le « non » le référendum européen de 2005, tous les politiciens et tous les journalistes ont peur que l’élection présidentielle de 2007 se joue sur le Net. Ce ne sera pas le cas. </li>

  478. <li>D’autant que 2007 est une année charnière : Facebook se mondialise, Twitter se lance, Google devient incontournable.</li>

  479. <li>Plus ces sites grandissent, plus il faut dépenser d’argent pour y être visible, ce qui entraîne une centralisation du Net, une concentration de la puissance. Les blogs deviennent marginaux par rapport aux grands médias qui d’ailleurs les absorbent peu à peu, en leur offrant la promesse du partage de leur audience, une audience de fait générée en grande partie par Google.</li>

  480. <li>On peut certes rester un activiste du réseau sur le mode d’avant 2007, mais on perd en visibilité (ou du moins on n’en gagne guère — ce n’est pas quelques exceptions qui changent le mouvement général). Toujours plus de revenus chez les GAFAM génère un mouvement concentrique qui centralise le Net autour de quelques trous noirs.</li>

  481. <li>Beaucoup de blogueurs décident alors de rejoindre des médias tout en perdant leur indépendance. C’est le début d’une catastrophe (le retour à un modèle d’avant le Web, en pire).</li>

  482. <li>Quand je publie un article sur Rue89, il est 100 fois plus lu que sur mon blog. C’est tentant, une tentation à laquelle peu de gens résistent. Le choix se pose à tous les acteurs du Web, pas seulement aux blogueurs indépendants. Un média de taille moyenne doit sans cesse se demander s’il doit garder une « adresse » ou se fondre dans une plus grande. Quand Rue89 publiera sur Google ou Facebook, il sera 100 fois plus lu que chez Rue89. Tous les médias sont en concurrence avec les géants du Net (et je vois mal comment ils pourront longtemps garder des internautes chez eux).</li>

  483. <li>La centralisation implique toujours plus de centralisation selon la loi <a href="https://en.wikipedia.org/wiki/Winner-take-all_(computing)">Winner-Take-All</a> (jusqu’à ce que la complexité grandissante du système centralisé le paralyse et le laisse soudainement s’écrouler ou qu’une loi de type antitrust tempère ce phénomène naturel).</li>

  484. <li>Nous avons désormais un monde de diffusion en trois couches : 1/ les producteurs de contenus autodiffusés, 2/ les médias, 3/ les GAFAM. La deuxième couche a déjà avalé une grande partie de la première. À son tour, elle est en train d’être avalée par la troisième, la seule capable de se payer les technologies modernes (parce que la centralisation implique également une centralisation des revenus). </li>

  485. <li>Telle est la carte du Net aujourd’hui. Il faut en tenir compte. Entre se terrer dans l’underground d’un réseau qui techniquement reste décentralisé ou tenter de rivaliser avec les GAFAM dans la couche intermédiaire, il existe une troisième voie : renoncer à attirer les lecteurs chez soi, renoncer à un chez soi, aller aux lecteurs où qu’ils se trouvent. <a href="http://www.wattpad.com/story/29694130-1-minute">C’est par exemple ce que je fais en publiant mon nouveau roman <em>One Minute</em> sur Wattpad.</a></li>

  486. <li>Pour disséminer des contenus sur le Net, il faut maîtriser une multitude d’outils, savoir les brancher les uns sur les autres, ce qui implique à un moment ou à un autre d’entrer dans le code (plutôt que se soumettre aux codes des autres). Cette nécessité ne cesse de s’accroître en même temps que le Net évolue et devient de plus en plus technique (et en même temps qu’il se ferme par un autre effet pervers de la centralisation).</li>

  487. <li>Dès aujourd’hui les journalistes et tous les créateurs de contenus doivent être des propulseurs : c’est-àd-dire des manipulateurs d’informations capables de faire naviguer leurs créations sur les flots du Net.</li>

  488. <li>L’idée d’un chez soi numérique est révolue. Cette idée d’avoir sa maison sur le Net n’était que le placage d’un concept issu de la géographie physique à celle du Net. Il faut imaginer les contenus comme des bateaux qui ne cessent de naviguer, sans connexion avec leur port d’attache.</li>

  489. <li>Quid de la génération de revenu ? Une fois qu’un contenu a largué les amarres, il nous reste à inventer un lien retour vers le producteur (une réciprocité dans les biens communs comme le propose <a href="http://p2pfoundation.net/index.php/Main_Page">Michel Bauwens</a>). Sans cette innovation sociale, une fracture séparera bientôt deux mondes étrangers. Celle d’une foule d’innombrables amateurs (ainsi appelés parce que non rémunérés) et une élite professionnelle (obsédée par l’audience, donc peu créative, politiquement correcte… parfaitement adaptée à un régime dictatorial).</li>

  490. <li>Le lien retour existe déjà en partie. C’est mon grand espoir. Par exemple, j’ai largué les amarres de mon livre <a href="http://tcrouzet.com/le-geste-qui-sauve/"><em>Le geste qui sauve</em></a>, des gens le traduisent partout dans le monde et une institution vient de me commander la suite, en me proposant un salaire confortable. Je crois que tel doit être le modèle pour nos créations futures, artistiques comme journalistiques. Je ne vois tout simplement pas d’autres possibilités. Les abonnements particuliers, les péages à tous les coins de rue, ça ne marche pas (ce serait revenir à une société féodale avec des octrois à l’entrée des villes). Le Net est né pour accroître nos libertés, pas pour les réduire.</li>

  491. <li>Il me semble que par le largage des amarres, par la mise en avant des créateurs au profit des marques intermédiaires qui les diffusent, autres que celles de GAFAM, nous nous approchons en fin de compte de l’idéal d’avant 2007 (créateurs délocalisés, mobiles, donc décentralisés, et contenus également mobiles, dupllicables, distribués… et peu importe qui les transporte). Une fois libéré d’un chez soi, nous contenus deviennent mobiles, comme de simples livres qui passent de main en main et se copient. Alors, peut-être, sera-t-il temps de faire tomber les GAFAM qui auront permis tout cela.</li>

  492. <li>Pour résumer, se lancer dans le business des médias intermédiaires est pour le moins hasardeux. Mieux vaut tout de suite s’adapter à l’Internet d’aujourd’hui et non à celui des années 2000.</li>

  493. </ol>

  494.   </article>

  495. </section>

  496. 

  497. 

  498. <nav id="jumpto">

  499.   <p>

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

  501.     <a href="http://tcrouzet.com/2015/10/10/la-fin-des-medias-intermediaires-ou-la-necessite-denseigner-a-lecole-lhistoire-et-la-geographie-dinternet/">Source originale</a> |

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

  503.   </p>

  504. </nav>

  505. 

  506. <footer>

  507.   <div>

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

  509.     <p>

  510.       Bonjour/Hi!

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

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

  513.     </p>

  514.     <p>

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

  516.     </p>

  517.     

  518.     <p>

  519.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  536.     </p>

  537.     <p>

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

  539.     </p>

  540.     <p>

  541.       Je ne traque pas ta navigation mais mon

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

  543.       conserve des logs d’accès.

  544.     </p>

  545.   </div>

  546. </footer>

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

  548.   ;(_ => {

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

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

  551.       e.preventDefault()

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

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

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

  555.     })

  556.   })()

  557. </script>