A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 30KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594
  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>Y a-t-il une place pour les numéros deux sur Internet? (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. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.slate.fr/story/95111/numeros-deux-internet">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Y a-t-il une place pour les numéros deux sur Internet? (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.slate.fr/story/95111/numeros-deux-internet">Source originale du contenu</a></h3>
  445. <p class="hat">La mise en réseau de tout et de tous va accroître les inégalités pour une raison simple, très étudiée mais dont peu de gens ont conscience: elle favorise les «superstars» de l’économie dans tous les domaines et concentre le pouvoir en quelques «nœuds» du réseau.</p>
  446. <p><span>S’il est bien un mythe de l’Internet qui a la vie dure, c’est celui selon lequel sa forme de réseau décentralisé a aussi permis de décentraliser le pouvoir et de mieux le (re)distribuer. On prend alors l’exemple de l’artiste de l’ère Internet qui, depuis sa petite chambre et avec son petit ordinateur portable, va toucher un immense public en publiant sa musique, ses dessins ou son film sans l’entremise d’intermédiaires comme les éditeurs, et va donc court-circuiter plusieurs échelons de la chaîne de production des industries culturelles. Pensons à <a href="http://www.normanfaitdesvideos.com/">Norman [qui] fait des vidéos.</a></span></p>
  447. <p><span>Un tel système a l’apparence de l’hyper-méritocratie. Jaron Lanier, auteur de plusieurs livres critiques sur l’économie numérique, dont le dernier –</span><em><a href="http://www.amazon.fr/Internet-poss%C3%A8de-futur-Jaron-Lanier/dp/2746507765/ref=sr_1_fkmr0_1?ie=UTF8&amp;qid=1417790951&amp;sr=8-1-fkmr0&amp;keywords=Internet%2C+qui+poss%C3%A8de+notre+futur%3F">Internet, qui possède notre futur?</a>– </em><span>vient d’être traduit en français, résume très bien cette nouvelle donne:</span></p>
  448. <blockquote>
  449. <p><em>«Les distributions des résultats des marchés hyperefficients dotés de réseaux numériques tendent à être de la forme où le gagnant rafle tout. C’est le cas des start-up technologiques, par exemple; seul un petit nombre d’entre elles réussissent, mais celles qui réussissent amassent des fortunes prodigieuses.</em></p>
  450. <p><em>C’est également le cas des nouvelles histoires de réussite individuelle sur Internet, par exemple lorsque quelqu’un gagne réellement beaucoup d’argent grâce à une application pour smartphone ou une vidéo mise en ligne sur YouTube; seul un nombre minuscule réussissent, tandis que les multitudes en rêvent –et échouent.»</em></p>
  451. </blockquote>
  452. <h3>Une économie des «Superstars» drivée par le talent et la chance</h3>
  453. <p>Cette nouvelle règle du jeu a été identifiée et théorisée en 1981 dans un article intitulé <a href="http://www.jstor.org/discover/10.2307/1803469?uid=3738016&amp;uid=2&amp;uid=4&amp;sid=21104614880551">«L’économie des superstars»</a> par l’économiste Sherwin Rosen, qui commence ainsi:</p>
  454. <blockquote>
  455. <p><em>«Le phénomène des Superstars, dans lequel un nombre relativement petit de gens gagnent d’énormes sommes d’argent et dominent les activités dans lesquels ils sont engagés, semble gagner en importance dans le monde moderne.»</em></p>
  456. </blockquote>
  457. <p>L’avenir lui aura donné plus que raison. Comme les coûts d’entrée sont faibles grâce aux technologies de l’information, la capacité d’innovation, la créativité et le «talent» sont plus que jamais les facteurs de réussite. Seuls les meilleurs et les plus doués bénéficient du système, et en bénéficient de plus en plus largement. De petites variations de talent génèrent en bout de chaîne d’énorme variations de revenu.</p>
  458. <p>Ces constats font donc un sort à la théorie de la longue traîne, selon laquelle Internet redistribue plus équitablement le succès entre de multiples petits producteurs. Le Financial Times notait récemment que le top 1% des stars de la musique accaparait en 2013 77% du marché total, contre «seulement» 71% à l’aube de l’Internet généralisé, en 2000. La même tendance a été observée <a href="http://www.nytimes.com/2010/12/26/business/26excerpt.html?pagewanted=all&amp;_r=0">pour le marché des concerts</a>. Et même pour le top 1%, la compétition n'a jamais été aussi rude, comme l'illustre une récente tribune très remarquée de Taylor Swift: la chanteuse y explique à quel point le développement et l'animation permanente d'une large base de fans sur de multiples canaux sont devenus <a href="http://www.latimes.com/opinion/opinion-la/la-ol-taylor-swift-oped-wall-street-journal-20140708-story.html">les conditions du succès</a>. </p>
  459. <p>Loin de la longue traîne, on assisterait à l’inverse à une généralisation des principes qui régissent le vedettariat à des secteurs «traditionnels». <em>«La nouvelle économie numérique, </em>poursuit Lanier, <em>a […] jusqu’à présent engendré des résultats qui ressemblent plus à un système de vedettariat qu’à une courbe en cloche.»</em> Il est bon que des systèmes où «le gagnant rafle tout» récompensent par exemple des scientifiques de haut niveau, mais qu’ils deviennent la norme est problématique pour l’auteur: ils <em>«devraient constituer un bonus dans une économie –les cerises sur le gâteau».</em></p>
  460. <p>Pour Lanier comme pour d’autres observateurs, la chance peut jouer un rôle non négligeable dans ces distributions très inégalitaires où le gagnant rafle la mise. Eric Brynjolfsson, autre spécialiste de ces questions, écrit dans la MIT Technology Review que l’économie tirée par les innovations technologiques <em>«<a href="http://www.technologyreview.com/featuredstory/531726/technology-and-inequality/">favorise grandement un petit groupe d’individus</a> qui réussissent en amplifiant leur talent et leur chance»,</em> ainsi que leurs revenus. C'est aussi le message de l'économiste Tyler Cowen dans <em>Average is over</em>, dans lequel il imagine un marché du travail polarisé entre ceux dont les compétences sont décuplées par l'automatisation, et ceux dont les compétences sont remplacées par elle. </p>
  461. <p><span>La topocratie, où la hiérarchie sociale dans le réseau</span></p>
  462. <p>Le facteur chance dépend lui-même en partie de la place occupée dans les réseaux: c'est l'aspect plus arbitraire de la réussite à l'ère numérique. Chercheur au MIT Media Lab (en charge du Macro Connections Group) et spécialiste des visualisations de données complexes, César A. Hidalgo a analysé la différence entre un système méritocratique et ce qu’il nomme <a href="https://www.youtube.com/watch?v=CTJ8TAMv3sk">un système topocratique</a>, c’est à dire un système dans lequel la place dans le réseau plutôt que le talent individuel assure la réussite.</p>
  463. <p>Quand un réseau social est densément interconnecté, un système peut être méritocratique: chaque point du réseau n’a que quelques degrés de séparation avec les autres, et aucun super-nœud de réseau n’accapare le capital social. Si vous voulez vendre votre travail dans un système méritocratique, vous pouvez en parler à plusieurs contacts autour de vous, sans avoir à transiter par un super-agent qui détient seul le carnet d’adresse auquel tous les autres veulent avoir accès.</p>
  464. <p>Mais il faut que chaque point ait accès à un nombre équivalent d’autres points du réseau pour éviter que quelques nœuds ou hubs où convergent le plus de connexions ne deviennent des intermédiaires obligés. Les entreprises du net vendent d’ailleurs souvent leur philosophie méritocratique en expliquant qu’elles court-circuitent les intermédiaires, agents ou «middle men», et oeuvrent ainsi à l’interconnexion de tous avec tous.</p>
  465. <p>Pour qu’un réseau soit égalitaire, il faudrait, dans le modèle mathématique développé par le chercheur et pour une population de la taille de celle des Etats-Unis, que chaque point soit en contact avec 17.000 autres (un point du réseau peut être un individu, un livre, une entreprise, un site internet, etc.) Autre exemple pris par le chercheur, plus parlant pour nos vies numériques: dans un réseau où chacun est connecté à 150 personnes, ce qui correspond à la limite établie du nombre de personnes avec lesquelles nous pouvons <a href="http://en.wikipedia.org/wiki/Dunbar's_number">entretenir des relations</a>, la taille du réseau qui préserverait une méritocratie parfaite ne pourrait excéder… 22.000 personnes.</p>
  466. <p><a href="http://www.slate.fr/sites/default/files/photos/network.png"><img alt="" class="doksoft_image_img" src="/sites/default/files/photos/network.png"/></a></p>
  467. <p class="media_legend"><a href="http://www.nature.com/srep/2014/140121/srep03784/full/srep03784.html">To Each According to its Degree</a>: The Meritocracy and Topocracy of Embedded Markets,  <span>J. Borondo, F. Borondo, C. Rodriguez-Sickert, &amp; C. A. Hidalgo, <em>Nature</em>.</span></p>
  468. <h3>Le pouvoir grandissant des super-hubs</h3>
  469. <p>Cette approche remet en perspective notre conception du web comme un espace nécessairement plus méritocratique: l’émergence de super-hubs que sont les plateformes d’accès au réseau favorise selon le chercheur la topocratie, la concentration du pouvoir de mise en relation entre quelques nœuds. Les nœuds du réseau qui ont le plus de connexions ne sont pas forcément ceux qui créent le contenu, ils peuvent être ceux qui identifient, classent, sélectionnent, relaient et amplifient le contenu des autres.</p>
  470. <p>La beauté de cette théorie est qu’elle s’applique aussi bien à un blogueur star qu’à un site de vente en ligne, un réseau social, une start-up de la sharing economy ou au marché des <a href="http://www.theguardian.com/technology/2014/jul/08/clash-of-clans-candy-crush-saga-mobile-games-apps-economy">applis de jeu vidéo</a>. Si internet favorise cette tendance monopolistique, c’est selon Hidalgo parce que <em>«vous n’avez besoin que d’un Facebook et d’un iTunes dans le monde»</em>, car la question de la distribution physique des produits ne se pose plus dans les mêmes termes. Vous n’avez de même besoin que d’un AirBNB, d’un Google, etc.</p>
  471. <p>Lanier fait un constat similaire dans <em>Qui possède notre futur? </em>Il insiste sur les effets de réseau qui donnent une prime à l’acteur le mieux installé:</p>
  472. <blockquote>
  473. <p><em>«Facebook attirait de nouveaux utilisateurs grâce à ceux qui l’utilisaient déjà, un peu comme la vieille blague sur quelqu’un qui est connu pour être connu.»</em></p>
  474. </blockquote>
  475. <p>Au niveau individuel, Lanier parle de <em>«lune de miel»,</em> lorsqu’<em>«un simple joueur peut bénéficier d’un coup de fouet spectaculaire comme il n’en aura jamais plus»</em> grâce à un de ces réseaux en phase d’ascension. A ce moment précis, <em>«quelques individus chanceux vont ainsi bénéficier d’un succès stupéfiant et trompeur. Leurs histoires seront portées aux nues, faussant ainsi la perception qu’a le public des opportunités possibles».</em> Car ce régime, met en garde l’auteur, n’engendre pas suffisamment d’occasions de ce type pour soutenir toute une société.</p>
  476. <h3>Une accumulation de capital entre quelques mains et quelques lieux</h3>
  477. <p>Lors de la conférence Lift organisée par la Fondation Internet nouvelle génération (FING), qui s’est tenue à Marseille les 21 et 22 octobre, l’anthropologue Stefana Broadbent a présenté ses recherches sur les jeunes du «précariat numérique» qui ont migré à Londres pour trouver un travail. A la fin de son intervention, elle a développé un point intéressant: comme nous voyons une concentration des capitaux et de la richesse, nous assistons à une concentration de capital social et de réputation entre les mains de quelques privilégiés –lieux, institutions, personnes– de l’ère numérique.</p>
  478. <p>Son analyse est elle aussi topocratique au sens littéral, puisqu’elle observe autour d’elle que les étudiants veulent de plus en plus travailler dans une poignée d’universités extrêmement réputées dans le monde, au détriment des autres institutions. Là encore, la logique de super-hubs se fait sentir. Hubert Guillaud, sur Internet Actu, a fait <a href="http://www.internetactu.net/2014/10/29/les-limites-de-lindividualisation-du-travail/">un compte-rendu complet</a> de son intervention, et note que<em> «de la même manière que la richesse se concentre, les lieux et les institutions se concentrent également. Nous ne sommes pas confrontés à un morcellement, mais à son contraire, à une toujours plus grande concentration».</em></p>
  479. <p>Quant à ces jeunes Européens et Sud-Américains du précariat numérique qui migrent à Londres et dont elle étudie les parcours, ils sont des «digital litterate», c’est-à-dire des gens très à l’aise avec les technologies de communication. Les observations de la chercheuse sont pourtant très dérangeantes pour le mythe de l’«empowerment» par les réseaux sociaux: les jeunes qu’elle suit ont beau avoir accès à tous les réseaux sociaux du moment, ils vivent plutôt un phénomène d’«enclosure», un repli sur quelques proches, dont la famille restée à l’étranger.</p>
  480. <p>A l’heure ou le modèle de la start-up et la célébrité numérique font rêver une partie de la jeunesse, on peut se poser la question de la viabilité d’un tel système de concentration entre quelques mains –et des nécessaires très nombreuses déceptions qui l’accompagnent.</p>
  481. <p>César Hidalgo juge quant à lui que la reconfiguration des réseaux en ligne est porteuse d’autant d’espoirs méritocratiques –comme la démocratisation de <a href="http://alfidicapitalblog.blogspot.fr/2014/02/choosing-between-meritocracy-and.html">l’accès au savoir</a>– que de menaces topocratiques. Les modèles décentralisés y cohabitent avec les super-hubs des intermédiaires de l’industrie culturelle.</p>
  482. <p>Comme pour nous avertir des dangers d’un système topocratique, le chercheur résume ses recherches sur les réseaux par un détournement d’une célèbre phrase de Karl Marx. Ce n’est plus <em>«à chacun selon ses besoins», </em>mais <em>«à chacun selon sa place»</em> dans le grand network. Etre une tête de nœud deviendra peut-être un compliment à l'ère numérique. </p>
  483. </article>
  484. </section>
  485. <nav id="jumpto">
  486. <p>
  487. <a href="/david/blog/">Accueil du blog</a> |
  488. <a href="http://www.slate.fr/story/95111/numeros-deux-internet">Source originale</a> |
  489. <a href="/david/stream/2019/">Accueil du flux</a>
  490. </p>
  491. </nav>
  492. <footer>
  493. <div>
  494. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  495. <p>
  496. Bonjour/Hi!
  497. 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>
  498. 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>).
  499. </p>
  500. <p>
  501. 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>.
  502. </p>
  503. <p>
  504. Voici quelques articles choisis :
  505. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  506. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  507. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  508. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  509. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  510. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  511. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  512. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  513. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  514. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  515. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  516. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  517. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  518. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  519. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  520. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  521. </p>
  522. <p>
  523. 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>.
  524. </p>
  525. <p>
  526. Je ne traque pas ta navigation mais mon
  527. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  528. conserve des logs d’accès.
  529. </p>
  530. </div>
  531. </footer>
  532. <script type="text/javascript">
  533. ;(_ => {
  534. const jumper = document.getElementById('jumper')
  535. jumper.addEventListener('click', e => {
  536. e.preventDefault()
  537. const anchor = e.target.getAttribute('href')
  538. const targetEl = document.getElementById(anchor.substring(1))
  539. targetEl.scrollIntoView({behavior: 'smooth'})
  540. })
  541. })()
  542. </script>