davidbgk
/
larlet-fr-david
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Julkaisut 0 Activity
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 Commitit
1 Haara
Puu: e26c5c23cd
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from 'e26c5c23cd'
${ noResults }
larlet-fr-david/david/blog/2016/illusion-sociale/index.html

index.html 35KB
Raaka Blame Historia

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830 
  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>L’illusion sociale — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

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

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2016/illusion-sociale/">

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

  31.   <meta name="description" content="Peut-être qu’il faut dépasser la relation sociale pour aller vers une relation locale multi-directionnelle." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Peut-être qu’il faut dépasser la relation sociale pour aller vers une relation locale multi-directionnelle." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="L’illusion sociale" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2016/illusion-sociale/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2016/illusion-sociale.jpg" />

  41. 

  42. 

  43. <style>

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

  45. html, body, div, span,

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

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

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

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

  51. fieldset, form, label, legend,

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

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

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

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

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

  65. article, aside, details, figcaption, figure,

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

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   L’illusion sociale

  468.   <time>Publié le 28 juillet 2016</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Semblables à ces chrétiens qui parlent indéfiniment de Dieu, du christianisme et de leur foi, parce que s’ils s’arrêtaient de parler, ils se trouveraient devant un vide immense, nous parlons sans fin de politique pour couvrir inconsciemment le vide de la situation. […] Le progrès, c’est recevoir cette extrême puissance, cette part mythique d’une souveraineté théorique qui consiste à se déposséder de ses décisions au profit de quelqu’un qui les prendra à votre place. Le progrès, c’est lire le journal.</p>

  473. <p>[…]</p>

  474. <p>Celui qui dans notre société se tient sur la réserve, ne participe pas aux élections, tient les débats politiques et les changements de constitution pour superficiels et sans véritable prise sur les véritables problèmes de l’homme, celui qui sait bien que la guerre d’Algérie l’atteint dans sa chair ou celle de ses enfants, mais ne croit pas que déclarations, motions et votes y changeront quoi que ce soit, celui-là sera jugé le plus sévèrement par tous. C’est le véritable hérétique de nos jours. Et la société l’excommunie comme l’Église médiévale le sorcier. Il est un pessimiste, un stupide (car il ne voit pas les relations très profondes et secrètes du jeu politique), un défaitiste qui se courbe devant la fatalité, un mauvais citoyen : assurément si tout va mal, c’est à cause de lui, car s’il faisait preuve de civisme, le votre serait valorisé (il ne suffit pas de 80 % de votants, non, il faut 100 % !) et la démocratie serait effective ! Les jugements pleuvent sur lui, autant jugements d’efficacité, que jugements moraux, et même psychologiques (car l’apolitique est forcément un paranoïaque ou schizophrène). Enfin, condamnation dernière en notre temps ; ce ne peut être qu’un réactionnaire.</p>

  475. <p><cite><em>L’illusion politique</em> par Jacques Ellul.</cite></p>

  476. </blockquote>

  477. <p>Là où la religion avait une portée internationale, la politique se restreignait déjà au niveau national et le social réduit encore davantage les ambitions humaines en se limitant à un groupe local faussement distribué par les réseaux sociaux. On ne lit plus les journaux pour faire de la politique, on dépile ses <em>timelines</em> pour interagir socialement.</p>

  478. <p>Des réseaux entre privilégiés qui conspuent d’autres privilégiés, qui s’apitoient sur la misère du monde avec des milliers de <em>like</em> et de <em>retweets</em> en la piétinant par ailleurs. Ivre d’un effet de masse sans aucune incidence si ce n’est celui d’avoir créé une nouvelle profession, celle de <em>community manager</em>.</p>

  479. <blockquote>

  480. <p>Très superficiellement l’homme moderne désire être informé de la dernière actualité parce qu’elle est une source de prestige incontestable dans un groupe. Pouvoir annoncer aux autres ce qu’ils ignorent, entrer dans ce personnage légendaire du porteur de nouvelles, être celui qui a la supériorité d’être mieux informé, et plus encore celui qui détient un secret, qu’il va transmettre à d’autres, attendant leur réaction, attendant leur surprise, avec cette distance possible de celui qui sait, et qui par là même peut mettre en question ceux qui ne savent pas encore. Quelle affirmation de maîtrise ! Dans un monde avide de nouvelles comme le nôtre, être celui qui sait et qui transmet est une participation aux forces souveraines, c’est pourquoi l’homme actuel cherche à être le premier informé.</p>

  481. <p><cite><em>L’illusion politique</em> par Jacques Ellul.</cite></p>

  482. </blockquote>

  483. <p>Ce que Jacques Ellul décrivait en 1965 n’a finalement fait l’objet que d’une amplification liée à la mise en réseau à une échelle plus large permise par le Web. Une gigantesque captation d’attention en guise d’intelligence collective, chacun essayant d’être le porteur de nouvelles de ses communautés. C’est l’une des raisons pour laquelle j’ai arrêté de <a href="/david/stream/2015/">publier quotidiennement</a> cette année.</p>

  484. <p>Quelles faiblesses veut-on cacher via cette recherche de supériorité ? Quel manque social nous pousse à en chercher ailleurs ? Quel lien familial brisé souhaite-t-on remplacer ?</p>

  485. <blockquote>

  486. <p>Il y a peut-être abus à parler de « transmission horizontale » pour parler de cette puissante force de socialisation des jeunes qui semble aujourd’hui faire obstacle à la transmission : la socialisation par les pairs ou par les moyens de communication de masse. Il faudra en revanche aborder la véritable nature de cet obstacle supposé, car il est partie prenante du sentiment de « crise de la transmission ». Peut-on dire, comme cela se répète à l’envi dans les travaux contemporains, que nous sommes passés de la transmission verticale à la transmission horizontale, autrement dit « des pères aux pairs » ? L’importance accordée à la socialisation par les pairs contribue à maintenir dans l’ombre le rôle de la transmission familiale.</p>

  487. <p><cite><em>Transmettre, apprendre</em> par Marie-Claude Blais, Marcel Gauchet et Dominique Ottavi.</cite></p>

  488. </blockquote>

  489. <p>Ces deux formes — pair-à-pair vs. (p|m)ère-à-fil(s|le) — sont-elles vraiment complémentaires alors que l’attention est limitée par le temps ? Les membres de la famille deviennent-ils des pairs comme les autres ?</p>

  490. <p><strong>Après avoir monétisé l’attention, on s’en prend aujourd’hui à l’occupation.</strong> Pokémon GO n’est que le début d’une perte de l’<em>être avec</em> vers celle du <em>faire avec</em>. L’intermédiaire social est loin d’être neutre dans cette relation guidée par une main invisible qui a des impacts bien réels.</p>

  491. <p>J’ai déjà parlé de <a href="/david/blog/2016/economie-extraction/">l’épuisement des colibris</a>, en monétisant l’occupation on passe un cap dans notre incapacitation à agir ensemble à des fins bien supérieures à celles du profit. En jouant sur les <a href="https://scinfolex.com/2016/06/28/ce-que-lon-apprend-sur-les-communs-en-lisant-frederic-lordon/">affects joyeux intrinsèques</a> (<a href="/david/cache/202858c9a26f193aaf18a6770d5f8171/">cache</a>) chers à Frédéric Lordon, on n’enrôle plus seulement la force de travail des salariés mais celle de toute la population ce qui représente une main — qui soutient un <em>smartphone</em> — d’œuvre gratuite bien plus conséquente.</p>

  492. <p>Ce manque de bien commun tangible conduit à des <a href="/david/blog/2016/etat-violence/">super-structures violentes</a> et sans âme. <em>L’État est une SCOP qui a mal tournée.</em> C’est le passage à l’échelle de ce qui ne peut passer à cette échelle auquel cas le lien social s’en trouve rompu.</p>

  493. <blockquote>

  494. <p>Confondre communication et relation serait extrêmement préjudiciable à la reconquête d’un temps réel, convivial et solidaire, dont des êtres de plus en plus nombreux ressentent la nécessité vitale. Un lien social tangible dans la sphère de  vie de chacune et de chacun de nous ne peut être aboli sans un immense préjudice. Les outils de la communication, de la commande à distance et de l’information auront toujours une grande mémoire, mais jamais de souvenirs. Renforcent-ils les liens sociaux, ou ne font-ils que connecter des solitudes ?</p>

  495. <p><cite><em>Vers la sobriété heureuse</em>, Pierre Rabhi</cite></p>

  496. </blockquote>

  497. <p>Je me pose de plus en plus la question. Le nuage se remplit chaque jour un peu plus de nos relations sans pour autant nous faire profiter de la pluie de souvenirs associés. Les échanges deviennent aussi éphémères que les réflexions qui en découlent.</p>

  498. <p>Observez vos dernières notifications (ou <em>flatulences numériques</em> comme j’aime les nommer maintenant tant elles sont dérangeantes pour l’entourage), combien se rapportent à un individu, combien se rapportent à une entreprise, combien enfin décrivent une action ou une réflexion collective ? Le lien social numérique n’est qu’une suite de micro-interactions décousues qui ne peut mener au <em>vivre ensemble</em>. Un réseau social ne peut survivre sans des échanges longs.</p>

  499. <blockquote>

  500. <p>Le lien social existe toujours, voire même davantage avec l’arrivée du numérique, qui permet des rencontres inattendues. Les algorithmes font des suggestions, qui peuvent être pertinentes et intéressantes, mais que l’on n’est pas obligé de suivre. Il n’y a aucune obligation à être sur Facebook, et encore moins à en faire sa principale porte d’entrée sur le web (je le déconseille même fortement). La construction de la pensée ne s’y fait pas, même si c’est un canal de diffusion non négligeable.</p>

  501. <p><cite><em><a href="http://authueil.org/?2016/07/11/2333-pour-penser-la-disruption-numerique-il-faut-y-plonger">Pour penser la "disruption" numérique, il faut y plonger</a></em> (<a href="/david/cache/084758a6079aaeddd903bab6c4e5ff10/">cache</a>)</cite></p>

  502. </blockquote>

  503. <p>Qu’est-ce qu’un lien social si ce n’est co-construire de la pensée ? Est-ce que le divertissement suffit vraiment à certaines personnes ? Quelles addictions viennent combler ce vide de sens ? C’est ce qui me semble être une illusion sociale bien orchestrée.</p>

  504. <p><strong>En refusant ces services, je me marginalise.</strong> De manière <a href="/david/blog/2015/oiseau-bleu/">militante</a> et volontaire même si cela m’affecte de ne plus participer à certaines discussions. Je me retire d’un espace de vie qui est passé du PMU aux Galeries Lafayette. Et je ne parle même pas de la <a href="http://idlewords.com/talks/sase_panel.htm">surveillance associée</a> (<a href="/david/cache/fa3c6aace8c96eada03d113ac49ef77a/">cache</a>).</p>

  505. <blockquote>

  506. <p>L’émergence de ce qu’on appelle le web 2.0 fut à la fois une idéologie et une stratégie d’accumulation du capital : il a promis de nouveaux profits énormes, ce qui a permis d’attirer de nouveaux investisseurs financiers. Il a promis un Internet participatif de « prosommateurs », une publicité de plus en plus ciblée et une exploitation du travail numérique accrue à travers le crowdsourcing, qui a vu son heure de gloire dans le soi-disant « nouveau réseau (new web) ». Google et Facebook ne sont pas des entreprises de communication mais les plus grandes agences publicitaires du monde. Les « réseaux sociaux », c’est de la publicité ciblée.</p>

  507. <p><cite><em><a href="http://revueperiode.net/internet-et-lutte-des-classes/">Internet et lutte des classes</a></em> (<a href="/david/cache/637a090890f6a6da12da087d45b0fe58/">cache</a>)</cite></p>

  508. </blockquote>

  509. <p>Le problème n’est pas tant que les fins soient lucratives mais ce que les personnes en capacité de décider sont prêtes à faire pour augmenter cette rentabilité. L’<a href="/david/blog/2016/classements-listes/">opinion publique</a> semble être très facile à manipuler lorsqu’on a une telle force de frappe. Peut-être l’avons-nous déjà été à notre insu sous couvert d’un <em>bug</em> dans une mise à jour algorithmique.</p>

  510. <blockquote>

  511. <p>As one colleague in tech explained it to me recently, for most people working on such projects, the goal is basically to provide for themselves everything that their mothers no longer do.</p>

  512. <p><cite><em><a href="http://www.nytimes.com/2016/07/10/opinion/sunday/solving-all-the-wrong-problems.html">Solving All the Wrong Problems</a></em> (<a href="/david/cache/7727b060c25b64136ce5f1a5c7598f2d/">cache</a>)</cite></p>

  513. </blockquote>

  514. <p>Peut-être qu’un jour les trentenaires en manque d’affection et d’attention n’essayeront plus de recréer leur <em>Mother-as-a-Service</em>. Peut-être que les entrepreneurs qui ne rêvent que d’impact et d’échelle se rendront compte que l’on peut diversifier les impacts en restant à petite échelle et en liant les externalités positives générées. Peut-être que les citoyens prendront conscience qu’un <em>faire commun</em> n’est pas une urne. <strong>Peut-être qu’il faut dépasser la relation sociale pour aller vers une relation locale multi-directionnelle.</strong></p>

  515. </article>

  516. 

  517. 

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

  519.     <img src="/static/david/blog/2016/illusion-sociale.jpg" alt="" />

  520.   </figure>

  521. 

  522. 

  523. 

  524. <nav id="jumpto">

  525.   <p>

  526.     <a rel=prev href="/david/blog/2016/pratique-experiences/">← Pratique et expériences</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2016/expatriation-choisie/">Expatriation choisie →</a>

  527.   </p>

  528. </nav>

  529. 

  530. <footer>

  531.   <div>

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

  533.     <p>

  534.       Bonjour/Hi!

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

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

  537.     </p>

  538.     <p>

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

  540.     </p>

  541. 

  542.       <p>

  543.         Les dernières publications hebdomadaires sont :

  544.       </p>

  545.       <ul class="with_columns">

  546. 

  547.           <li>

  548.             <a href="/david/stream/2019/12/31/">Merci</a>

  549.           </li>

  550. 

  551.           <li>

  552.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  553.           </li>

  554. 

  555.           <li>

  556.             <a href="/david/stream/2019/12/24/">Outils</a>

  557.           </li>

  558. 

  559.           <li>

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

  561.           </li>

  562. 

  563.           <li>

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

  565.           </li>

  566. 

  567.           <li>

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

  569.           </li>

  570. 

  571.           <li>

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

  573.           </li>

  574. 

  575.           <li>

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

  577.           </li>

  578. 

  579.           <li>

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

  581.           </li>

  582. 

  583.           <li>

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

  585.           </li>

  586. 

  587.           <li>

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

  589.           </li>

  590. 

  591.           <li>

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

  593.           </li>

  594. 

  595.           <li>

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

  597.           </li>

  598. 

  599.           <li>

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

  601.           </li>

  602. 

  603.           <li>

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

  605.           </li>

  606. 

  607.           <li>

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

  609.           </li>

  610. 

  611.           <li>

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

  613.           </li>

  614. 

  615.           <li>

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

  617.           </li>

  618. 

  619.           <li>

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

  621.           </li>

  622. 

  623.           <li>

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

  625.           </li>

  626. 

  627.           <li>

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

  629.           </li>

  630. 

  631.           <li>

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

  633.           </li>

  634. 

  635.           <li>

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

  637.           </li>

  638. 

  639.           <li>

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

  641.           </li>

  642. 

  643.           <li>

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

  645.           </li>

  646. 

  647.           <li>

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

  649.           </li>

  650. 

  651.           <li>

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

  653.           </li>

  654. 

  655.           <li>

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

  657.           </li>

  658. 

  659.           <li>

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

  661.           </li>

  662. 

  663.           <li>

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

  665.           </li>

  666. 

  667.           <li>

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

  669.           </li>

  670. 

  671.           <li>

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

  673.           </li>

  674. 

  675.           <li>

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

  677.           </li>

  678. 

  679.           <li>

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

  681.           </li>

  682. 

  683.           <li>

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

  685.           </li>

  686. 

  687.           <li>

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

  689.           </li>

  690. 

  691.           <li>

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

  693.           </li>

  694. 

  695.           <li>

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

  697.           </li>

  698. 

  699.           <li>

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

  701.           </li>

  702. 

  703.           <li>

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

  705.           </li>

  706. 

  707.           <li>

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

  709.           </li>

  710. 

  711.           <li>

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

  713.           </li>

  714. 

  715.           <li>

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

  717.           </li>

  718. 

  719.           <li>

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

  721.           </li>

  722. 

  723.           <li>

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

  725.           </li>

  726. 

  727.           <li>

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

  729.           </li>

  730. 

  731.           <li>

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

  733.           </li>

  734. 

  735.           <li>

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

  737.           </li>

  738. 

  739.           <li>

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

  741.           </li>

  742. 

  743.       </ul>

  744. 

  745.     <p>

  746.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  763.     </p>

  764.     <p>

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

  766.     </p>

  767.     <p>

  768.       Je ne traque pas ta navigation mais mon

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

  770.       conserve des logs d’accès.

  771.     </p>

  772.   </div>

  773. </footer>

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

  775.   ;(_ => {

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

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

  778.       e.preventDefault()

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

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

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

  782.     })

  783.   })()

  784. </script>

  785. 

  786.   <script>

  787.   /* Service workers */

  788.   if (navigator.serviceWorker) {

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

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

  791.       function sendLinks (selector) {

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

  793.           return link.getAttribute('href')

  794.         })

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

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

  797.       }

  798.       navigator.serviceWorker.getRegistration()

  799.         .then(function (registration) {

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

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

  802.               .then(navigator.serviceWorker.ready)

  803.               .then(function () {

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

  805.               })

  806.               .catch(console.error.bind(console))

  807.           } else {

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

  809.             sendLinks(selector)

  810.           }

  811.         })

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

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

  814.         sendLinks(selector)

  815.       })

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

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

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

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

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

  821. 

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

  823. 

  824.         }

  825.       })

  826.     })

  827.   } else {

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

  829.   }

  830. </script>