davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
403 коммитов
1 ветка
Дерево: cf213338ae
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'cf213338ae'
${ noResults }
larlet-fr-david-cache/cache/0972c7929355861c9e6f5121152.../index.html

index.html 35KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619 
  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>Après avoir Liké, les gilets jaunes vont-ils voter ? (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="https://www.affordance.info/mon_weblog/2018/12/les-gilets-jaunes-vont-ils-voter.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.   Après avoir Liké, les gilets jaunes vont-ils voter ? (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="https://www.affordance.info/mon_weblog/2018/12/les-gilets-jaunes-vont-ils-voter.html">Source originale du contenu</a></h3>

  463.     <p>Le mouvement des Gilets Jaunes continue de (me) fasciner. Tant d'ailleurs sur le plan humain du voisinage que sur celui plus universitaire de l'analyse des interactions en ligne et du rôle de Facebook. </p>

  464. 

  465. <p>Rappel de mes articles précédents : </p>

  466. 

  467. <p>En plus des "grands" groupes déjà créés et visible sur Facebook (La France en colère, Fly Rider notamment) qui cumulent déjà des communautés de près de 200 000 personnes, un nouveau groupe est né récemment à l'intitulé programmatique : </p>

  468. 

  469. <blockquote>

  470. <p>"<a href="https://www.facebook.com/groups/357767044781992/members/" rel="noopener" target="_blank">Combien sommes-nous de gilets jaunes ?</a>" (et titré : "Compteur officiel de gilets jaunes")</p>

  471. </blockquote>

  472. 

  473. <p>Se compter. Connaître l'état des forces et des copains mobilisés. Se compter pour savoir sur qui on pourra compter. Réflexe aussi vieux que les luttes sociales le sont. </p>

  474. 

  475. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef022ad3a51481200d-pi"><img alt="Gj" class="asset  asset-image at-xid-6a00d8341c622e53ef022ad3a51481200d img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef022ad3a51481200d-500wi" title="Gj"/></a></p>

  476. 

  477. <p>Et comme à chaque comptage, et même sur Facebook, des chiffres qui parfois diffèrent entre ceux de la police et ceux des organisateurs. La bandeau du groupe affiche ici plus de 2,5 millions de "gilets jaunes" mais le compteur des membres du groupe est - et c'est déjà considérable - de plus d'1,7 millions (gardez bien ces chiffres en tête, je vous en reparle plus bas, vous allez voir c'est édifiant ;-). </p>

  478. 

  479. <p>Mis à part certaines stars (du foot notamment) qui peuvent cumuler plusieurs <a href="https://fr.statista.com/statistiques/570639/pages-de-fans-facebook-les-plus-populaires/" rel="noopener" target="_blank">dizaines ou centaines de millions de "fans" sur leur "page"</a>, il est vraiment très rare qu'un "groupe" parvienne à plus d'un million et demi de membres en quelques jours. </p>

  480. 

  481. <p>Parmi les rares groupes à frôler le million, on citera le groupe "Wanted", communauté d'entraide et de conseils qui compte 800 000 membres, et qui est <a href="https://www.lemonde.fr/pixels/article/2018/05/05/wanted-une-communaute-facebook-de-800-000-membres-et-pas-un-rond_5294723_4408996.html" rel="noopener" target="_blank">l'une des plus grosses communautés Facebook en France</a>.</p>

  482. 

  483. <p>L'adhésion à un groupe est différente de celle à une page Fan. Les pages de certaines célébrités, notamment dans le monde du Football, cumulent à plusieurs centaines de millions d'abonnés.</p>

  484. 

  485. <p>La "viralité" au sein de Facebook suit des chemins relativement différents selon qu'elle concerne un individu, une cause, une page, un groupe, etc. Même si le premier point commun de ces logiques virales reste leur capacité à jouer sur le registre émotionnel de <a href="https://affordance.typepad.com/mon_weblog/2013/09/combien-like-retablir-peine-de-mort.html" rel="noopener" target="_blank">l'indignation et de la colère qui sont les deux sentiments qui se propagent le mieux "naturellement"</a>.</p>

  486. 

  487. <p>Mais souvenez-vous que la dimension du "défi" si elle est bien orchestrée est également capable de produire de spectaculaires incendies viraux. Ainsi en 2013 je vous racontais comment le défi consistant à récolter un million de Likes avait permis à <a href="https://affordance.typepad.com/mon_weblog/2013/02/un-chien-un-enfant-et-du-sexe.html" rel="noopener" target="_blank">trois petites têtes blondes de convaincre leurs parents récalcitrants d'acheter un chien, à un monsieur de convaincre sa femme d'avoir un enfant et à un ado de demander à sa copine d'avoir une relation sexuelle</a>.  </p>

  488. 

  489. <h2>Mais revenons aux Gilets Jaunes. Et aux groupes.</h2>

  490. 

  491. <p>Pour bien comprendre comment fonctionnent les effets d'audience et d'engagement sur Facebook il faut piger les trucs suivants. Facebook est un graphe géant. Avec différents niveaux. Et avec à chacun de ces niveaux différents "attracteurs". </p>

  492. 

  493. <p>La brique de base du graphe c'est moi. Enfin vous. Enfin nous quoi. Chacun de nos profils. Et le graphe de ces 2,2 milliards de profils.</p>

  494. 

  495. <p>Chacun d'entre nous est en relation avec ce que l'on appelle des liens "forts" et des liens "faibles". Les liens "forts" ce sont nos "vrais" amis / famille, les gens avec qui l'on interagit le plus souvent. Et les liens "faibles" sont "les amis de nos amis", c'est à dire les cercles relationnels plus distants, mais dont la force et la capacité de prescription est également très efficace en cela qu'ils permettent d'avoir accès à d'autres cercles, d'autres réseaux. C'est la <a href="https://fr.wikipedia.org/wiki/Mark_Granovetter#Liens_forts_et_Liens_faibles" rel="noopener" target="_blank">théorie de la force des liens faibles développée par Mark Granovetter en 1971</a> et dont Facebook est l'incarnation absolument parfaite.</p>

  496. 

  497. <p>Facebook dispose du graphe complet des liens forts et des liens faibles de chacun des 2,2 milliards de nos profils. C'est déjà fascinant (et angoissant) mais ce n'est que la partie émergée de l'iceberg.</p>

  498. 

  499. <p>A un autre niveau du graphe on trouve les différentes "interactions" dont le célèbre "Like". Et là encore, pour chacun d'entre nous, et au prisme de chacun de nos liens faibles ou forts, Facebook dispose de l'ensemble des "Like" que nous avons déposés et qui renseignent là encore assez admirablement sur nos opinions politiques, religieuses, sur notre situation sociale, sur nos intentions d'achats, sur nos goûts et nos dégoûts culturels, etc. <a href="https://www.blogdumoderateur.com/chiffres-facebook/" rel="noopener" target="_blank">Là encore les chiffres sont dantesques</a> : 4,5 milliards de Likes distribués chaque jour, presque 5 milliards de contenus partagés chaque jour et plus de 10 milliards de message chaque jour. Bref "<em>une version post-moderne de la Stasi</em>" comme disait Julian Assange.  </p>

  500. 

  501. <p>Et puis au milieu de tous ces graphes déjà tous reliés entre eux, il existe aussi, dans la structure du réseau lui-même, des points qui jouent le rôle "d'attracteurs". Ces points peuvent être des profils individuels, par exemple les gens qui ont statistiquement beaucoup plus de liens forts ou de liens faibles que les autres, et qui sont donc, pour le dire très vite, plus "influents" ou qui sont des "aiguilleurs de viralité" beaucoup plus efficaces ; et puis il y a, donc, les pages et les groupes. Dont le Compteur officiel de gilets jaunes ("<a href="https://www.facebook.com/groups/357767044781992/members/" rel="noopener" target="_blank">Combien sommes-nous de gilets jaunes ?</a>").</p>

  502. 

  503. <p>Le premier truc qui frappe avec ce groupe, c'est sa fonction de "révélateur". Sans avoir besoin de s'y inscrire, on "voit" combien de nos amis en sont déjà membres. Faites le test. Et il n'est pas impossible que vous ayez certaines surprises dans vos liens forts ou faibles ;-) </p>

  504. 

  505. <p>Le deuxième truc important c'est qu'il s'agisse d'un groupe (il faut s'y inscrire) et non d'une page (à laquelle on peut s'abonner ou que l'on peut "liker"). Un groupe, on y "entre". Et une fois qu'on y est entré, l'algorithme de Facebook va faire le reste. Et <a href="https://www.liberation.fr/debats/2018/11/30/dans-le-combat-final-des-gilets-jaunes-jupiter-va-affronter-des-moderateurs-facebook_1695023" rel="noopener" target="_blank">comme le rappelait l'excellent Vincent Glad</a> : </p>

  506. 

  507. <blockquote>

  508. <p>"<em>Le mouvement a été sans conteste aidé par le nouvel algorithme Facebook qui survalorise les contenus de groupes au détriment des contenus postés par des pages (et donc par les médias). Après quelques likes sur un groupe, on se retrouve submergé du contenu de ce groupe dans son fil d’actualités. Le nouvel algo a précipité les gilets jaunes dans une «bulle de filtre» où ils ne voient presque plus que du contenu jaune.</em>"</p>

  509. </blockquote>

  510. 

  511. <h2>Mais au fait, Facebook sait-il compter ?</h2>

  512. 

  513. <p>En rédigeant cet article j'échangeais sur Twitter avec Elsa Trujillo, qui vient de publier un <a href="https://www.bfmtv.com/tech/gilets-jaunes-les-groupes-les-plus-actifs-sur-facebook-1582133.html" rel="noopener" target="_blank">article consacré aux groupes les plus actifs sur Facebook</a>. Et nous n'avions pas du tout les mêmes chiffres pour le Compteur de gilets jaunes. De son côté elle avait l'information reprise sur le bandeau (2,7 millions) et moi j'avais (en cliquant sur le lien "à propos" dudit groupe) "seulement" 1,7 millions. </p>

  514. 

  515. <p>Donc nous en étions à WTF <a href="https://twitter.com/affordanceinfo/status/1070341631151353857" rel="noopener" target="_blank">quand soudain j'ai compris</a>. Quand on ne fait pas partie du groupe la partie "à propos" affiche 1,7 millions de membres. Et quand on le rejoint, la même partie "à propos" rajoute un million au compteur. La preuve avec les copies d'écran ci-dessous.</p>

  516. 

  517. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef022ad3c4f72f200b-pi"><img alt="Pasmembre" class="asset  asset-image at-xid-6a00d8341c622e53ef022ad3c4f72f200b img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef022ad3c4f72f200b-500wi" title="Pasmembre"/></a>Vue sans être membre du groupe</p>

  518. 

  519. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef022ad37f4029200c-pi"><img alt="Membre" class="asset  asset-image at-xid-6a00d8341c622e53ef022ad37f4029200c img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef022ad37f4029200c-500wi" title="Membre"/></a>Vue en étant membre du groupe. + 1 million :-)</p>

  520. 

  521. <p>Assez ahurissant non ? C'est pas la 1ère fois que Facebook bidouille les chiffres ceci dit, mais là ... M'enfin, c'est le risque quand on est l'organisateur <em>et en même temps</em> la police ;-)</p>

  522. 

  523. <p>Dans tous les cas la "croissance" en une semaine reste ahurissante, mais s'il fallait une énième preuve de la difficulté d'extrapoler à partir de chiffres uniquement fournis par la plateforme ...</p>

  524. 

  525. <h2>Et maintenant parlons un peu politique.</h2>

  526. 

  527. <p>Difficile d'évoquer la mobilisation en ligne, Facebook et le mouvement des Gilets Jaunes sans convoquer en arrière-plan ce qui s'est passé dans le cadre de la campagne électorale de Trump ou du Brexit et de ce que l'on sait aujourd'hui de la manipulation de l'opinion orchestrée par Cambridge Analytica et du rôle que cela a joué (dans l'élection de Trump et dans le vote pour le Brexit donc). </p>

  528. 

  529. <p>Les Décodeurs du Monde ont repris les listes de revendications "officielles" des Gilets Jaunes et les ont complété par les mots d'ordre revenant régulièrement sur les réseaux sociaux ou dans les manifs pour obtenir une liste d'une cinquantaine de revendications, <a href="https://abonnes.lemonde.fr/les-decodeurs/article/2018/12/04/sur-un-axe-de-melenchon-a-le-pen-ou-se-situent-les-revendications-des-gilets-jaunes_5392592_4355770.html?" rel="noopener" target="_blank">et les ont placées sur l'échiquier politique "de Mélenchon à Le Pen"</a>. Vous pouvez vous-même voter "oui" ou "non" pour chacune des propositions et comparer cela avec la position des leaders des principaux partis politiques lors de la dernière campagne présidentielle. Bref c'est rigolo et assez instructif. </p>

  530. 

  531. <p>Naturellement, énormément de ces propositions sont apparues, dans Facebook, sous la forme de simples posts isolés et ont généré parfois des centaines de commentaires. Certaines ont aussi fait l'objet de points particuliers lors des différents Facebook Live de Fly Rider, ou d'Eric Drouet et de Priscilla Ludowsky qui sont les principaux "attracteurs" du mouvement sur Facebook depuis leurs comptes et pages respectives.</p>

  532. 

  533. <p>Pour Facebook il est donc très facile de très précisément savoir, à l'échelle de chaque profil individuel, qui a liké, commenté, approuvé ou désapprouvé tout ou partie des revendications, et de le faire revendication par revendication, profil par profil, avec un niveau de granularité très fin. Non seulement c'est très facile mais en plus c'est la base de son modèle économique, de son architecture technique, et de ses récents et récurrents ennuis ...</p>

  534. 

  535. <p>Ces informations, Facebook est en capacité de les "vendre", à tel ou tel parti politique dans le cadre de n'importe quelle élection. Pour être précis - c'est important - il ne "vendra" pas "le nom de Untel qui a liké telle proposition" mais il permettra à tel annonceur agissant pour tel parti politique ou tel lobby, d'afficher la bonne publicité ou le bon argument au bon moment sur le bon profil pour le convaincre que son candidat soutient cette idée. Bref très exactement ce qui s'est produit dans le cadre du scandale Cambridge Analytica (avec toute les histoires de "dark posts" et autres "shadow profiles") et qui, sachons-le, va continuer de se produire puisque la seule décision de la plateforme après ledit scandale fut de promettre davantage de transparence.</p>

  536. 

  537. <p>#OhWait.</p>

  538. 

  539. <p>On a donc, une nouvelle fois un assez gros problème qui se profile à l'horizon pour autant que l'on soit attaché à une version républicaine de la démocratie. Parce que quelle que soit l'issue du mouvement des Gilets Jaunes et indépendamment de sa temporalité propre, il est absolument évident que les prochaines élections en France vont se jouer <a href="https://abonnes.lemonde.fr/les-decodeurs/article/2018/12/04/sur-un-axe-de-melenchon-a-le-pen-ou-se-situent-les-revendications-des-gilets-jaunes_5392592_4355770.html?" rel="noopener" target="_blank">sur la cinquantaine de thèmes qui sont présentés ici</a>. En commençant par ceux liés au pouvoir d'achat.</p>

  540. 

  541. <p><strong>Quelle que soit l'issue du mouvement, la base de donnée "opinion" qui restera aux mains de Facebook est une bombe démocratique à retardement ... Et nous n'avons à ce jour absolument aucune garantie qu'elle ne soit pas vendue à la découpe au(x) plus offrant(s).  </strong></p>

  542. 

  543. <p>Pour autant que l'hypothèse sociologique ramenant l'essentiel du mouvement des gilets jaunes aux classes populaires et aux professions intermédiaires soit valide (et je pense qu'elle l'est <a href="https://www.contretemps.eu/sociologie-gilets-jaunes/" rel="noopener" target="_blank">comme expliqué entre autres par ici</a>), la suite est parfaitement connue, <a href="http://ses.ens-lyon.fr/articles/les-classes-populaires-periurbaines-et-le-vote-fn" rel="noopener" target="_blank">elle est même déjà écrite</a>.</p>

  544. 

  545. <p>Le discrédit actuel des partis politiques "non radicaux" étant ce qu'il est, l'espoir de ne pas voir la France basculer sous présidence FN ne repose plus que sur le nombre de faux pas ou <a href="https://www.youtube.com/watch?v=CH_6R4yXo3U" rel="noopener" target="_blank">d'erreurs de communication que feront les leaders de ce parti fasciste</a> et sur le <a href="https://fr.wikipedia.org/wiki/Florian_Philippot" rel="noopener" target="_blank">charisme d'huître de leurs potentiels alliés</a>. La seule alternative possible étant aujourd'hui à chercher du côté de la France Insoumise, à la seule condition que son leader charismatique parvienne à redescendre un peu sur terre.</p>

  546. 

  547. <p><a href="https://www.affordance.info/mon_weblog/2018/11/gilets-jaunes-internet-familles-modestes-facebook.html" rel="noopener" target="_blank">Dans mon dernier article sur le sujet</a> je concluais en soulignant la forme "d'émancipation paradoxale" que produisait Facebook en permettant aux Gilets Jaunes d'accéder à un espace, discursif, médiatique, organisationnel et situationnel dont ces gens-là se retrouvaient privés depuis l'effondrement des corps intermédiaires supposés les représenter. </p>

  548. 

  549. <p>Il n'est pas impossible que cette émancipation leur soit également volée parce qu'une nouvelle fois, il faut le dire, le répéter et le comprendre, <a href="https://www.ted.com/talks/zeynep_tufekci_how_the_internet_has_made_social_change_easy_to_organize_hard_to_win?language=fr" rel="noopener" target="_blank">Facebook facilite autant les révolutions sociales qu'il en compromet la victoire</a>. Et qu'une plateforme commerciale privée se substituant à un espace de débat public a d'abord vocation à instrumentaliser toute forme d'expression singulière ou groupale au service de ses seuls intérêts économiques. </p>

  550. 

  551. <p>Ajoutez à cela le fait que voilà des décennies que l'action politique a privé et amputé les classes populaires et intermédiaires d'un peu de leur pouvoir d'achat et de beaucoup de leur dignité. Considérez également toutes ces années où la parole et la voix de ces mêmes classes populaires et intermédiaires, pour autant qu'on leur ait permis de l'exprimer, a été niée dans son expression même, notamment au moment du <a href="https://fr.wikipedia.org/wiki/R%C3%A9f%C3%A9rendum_fran%C3%A7ais_sur_le_trait%C3%A9_%C3%A9tablissant_une_constitution_pour_l%27Europe#Reformulation_du_texte_dans_le_trait%C3%A9_de_Lisbonne" rel="noopener" target="_blank">référendum européen de 2005</a>. Et puis tant que vous y serez, n'oubliez pas d'ajouter aussi toutes ces années à refuser la proportionnelle et à déconnecter toujours davantage la votation de la représentation pour s'étonner ensuite de la montée des abstentions. </p>

  552. 

  553. <p>Ce que les Gilets Jaunes sont en train de tenter de rebâtir dans une errance politique qui n'est mesurable qu'à l'aune de leur désespérance idéologique c'est, simplement, fondamentalement et essentiellement, un espace réel de revendications. Rien d'autre. Autour de ronds-points qui sont leurs assemblées. <a href="https://abonnes.lemonde.fr/les-decodeurs/article/2018/12/04/sur-un-axe-de-melenchon-a-le-pen-ou-se-situent-les-revendications-des-gilets-jaunes_5392592_4355770.html?" rel="noopener" target="_blank">Un espace réel de revendications <em>toutes</em> légitimes</a>. Oui. <em>Toutes</em> légitimes car <em>toutes</em> relevant d'un sentiment d'urgence. Et cette urgence est moins celle des fins de mois difficiles que celle d'une dignité à reconstruire. </p>

  554. 

  555. <p>Que la rationalité politique classique et les alcôves classiques du compromis (la fameuse "table des négociations") paraissent tout à fait inatteignables n'est une surprise que pour ceux qui ont laissé ce fiasco s'organiser tant qu'il leur permettait de préserver leurs intérêts. Chaque plateau télé, chaque débat radiophonique confrontant les moins radicaux des Gilets Jaunes aux plus modérés des représentants politiques l'affirme avec l'évidence d'une formidable claque dans la gueule.</p>

  556.   </article>

  557. </section>

  558. 

  559. 

  560. <nav id="jumpto">

  561.   <p>

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

  563.     <a href="https://www.affordance.info/mon_weblog/2018/12/les-gilets-jaunes-vont-ils-voter.html">Source originale</a> |

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

  565.   </p>

  566. </nav>

  567. 

  568. <footer>

  569.   <div>

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

  571.     <p>

  572.       Bonjour/Hi!

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

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

  575.     </p>

  576.     <p>

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

  578.     </p>

  579.     

  580.     <p>

  581.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  598.     </p>

  599.     <p>

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

  601.     </p>

  602.     <p>

  603.       Je ne traque pas ta navigation mais mon

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

  605.       conserve des logs d’accès.

  606.     </p>

  607.   </div>

  608. </footer>

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

  610.   ;(_ => {

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

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

  613.       e.preventDefault()

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

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

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

  617.     })

  618.   })()

  619. </script>