davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 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.
288 Commits
1 Branch
Tree: 215e169fba
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '215e169fba'
${ noResults }
larlet-fr-david/david/blog/2013/diete-information/index.html

index.html 34KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861 
  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>Diète d’information — 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/2013/diete-information/">

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

  31.   <meta name="description" content="J’ai également repris le contrôle de mon attention, celui dont cette société a tant besoin." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="J’ai également repris le contrôle de mon attention, celui dont cette société a tant besoin." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Diète d’information" />

  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/2013/diete-information/" />

  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/david-larlet-avatar-thumbnail.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.   Diète d’information

  468.   <time>Publié le 4 mars 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <p><a href="http://www.la-grange.net/karl/">Karl</a> m’a récemment transmis un lien vers une vidéo de <a href="https://fr.wikipedia.org/wiki/Gilles_Deleuze">Gilles Deleuze</a> au départ au sujet de <a href="/david/blog/2013/developpeurs-creatifs/">la créativité</a> (première partie de la vidéo) mais dont la seconde se révèle être tout aussi intéressante, si ce n’est plus :</p>

  472. <blockquote>

  473. <p>Une information c’est un ensemble de mots d’ordres. Quand on vous informe, on vous dit ce que vous êtes sensés devoir croire. En d’autres termes, informer c’est faire circuler un mot d’ordre. Les déclarations de police sont dites à juste titre des « communiqués ». On nous communique de l’information, c’est-à-dire on nous dit ce que nous sommes sensés être en état de ou devoir croire, ce que nous sommes tenus de croire. Ou même pas de croire mais de faire comme si l’on croyait. On nous demande pas de croire, on nous demande de nous comporter comme si nous le croyons. […] L’information c’est exactement le système du contrôle. […] Les sociétés de contrôle ne passeront plus par des milieux d’enfermement [vs. sociétés de discipline]. […] La contre-information n’est effective que lorsqu’elle devient un acte de résistance.</p>

  474. <p><cite>Gilles Deleuze, <em><a href="https://www.youtube.com/watch?v=7DskjRer95s">Qu’est-ce que l’acte de création ?</a></em></cite></p>

  475. </blockquote>

  476. <p>Je vous invite à visionner l’intégralité de la vidéo ou <a href="http://www.arpla.fr/canal20/adnm/?p=3103">l’une</a> <a href="http://lesilencequiparle.unblog.fr/2010/02/25/quest-ce-quun-acte-de-creation-1-gilles-deleuze/">de ses</a> <a href="http://lesilencequiparle.unblog.fr/2010/02/26/quest-ce-quun-acte-de-creation-2-gilles-deleuze/">transcriptions</a>.</p>

  477. <p>Les propos de Gilles Deleuze prennent une résonance particulière pour moi car ils corroborent mon analyse des effets de ma <em>diète d’information</em> au cours de ces derniers mois. En arrivant au Japon, s’est posée la question de savoir s’il était pertinent de garder un œil sur ce qu’il se passait en France et je m’étais abonné à <a href="https://www.mediapart.fr/">Mediapart</a> dans cette optique. Je me suis rapidement senti étranger à toute cette information, d’une part en raison de la distance physique, mais surtout par la futilité et/ou la distance en termes d’intérêts qui émanait de cette actualité pessimiste et anxiogène.</p>

  478. <p>De retour <a href="/david/thoughts/#japan">après quelques mois</a>, j’ai confirmé mon choix de ne plus être abreuvé d’information en donnant <a href="/david/thoughts/#television">ma télévision</a>, en n’écoutant pas la radio et en ne m’abonnant à aucun journaux. <em>C’est un réel soulagement.</em> Je ne consulte que la revue délivrée par la mairie pour connaître les actualités locales une fois par mois et je suis parfois informé de ce qu’il se passe à une autre échelle par des proches ou Twitter (ce qui transforme <a href="/david/blog/2012/opinion-audience/">cette information en opinion</a> discutable). <strong>Mon empathie est redevenue locale.</strong> Elle n’a plus besoin d’être sollicitée incessamment et inutilement pour des situations sur lesquelles je n’ai aucun pouvoir, ni parfois aucune motivation. </p>

  479. <p><strong>J’ai également repris le contrôle de mon attention, celui dont cette société a tant besoin.</strong></p>

  480. </article>

  481. 

  482.   <section>

  483.     <h3>Discussion suite à l’article :</h3>

  484. 

  485.       <article id="comment-1" class="comment">

  486.         <p>Et que fais-tu de tes flux RSS et de tes suivis Twitter : tu réduis leur nombre à 150 également ?</p>

  487. <p>Tout ça ramène à la concentration : je m’intéresse à quoi, je fais quoi et comment ça se mesure.

  488. J’ai convaincu davantage de monde de mieux manger et de s’alimenter local en les invitant chez moi et en répondant à leurs questions quant à mes fournisseurs de ses produits aussi savoureux.</p>

  489. <p>Finalement, en faisant ta valise pour le Japon, tu avais déjà commencé à éliminer tout ce qui t’était <em>confortable</em> mais pas <em>indispensable</em> pour vivre au quotidien.</p>

  490.         <p><cite>Oncle Tom, le <a href="#comment-1">2013-03-04 à 23:46</a></cite></p>

  491.       </article>

  492. 

  493.       <article id="comment-2" class="comment">

  494.         <p>Je reprends ici ma première tentative de réponse sur le réseau de l’oiseau qui sifflote.

  495. Je disais donc que j’ai eu le même genre de réaction ces derniers temps face à ces informations systématiquement anxiogènes, répétitives et superficielles. Sans parler du manque de recul sur les sujets présentés et des prises de position contestables des "journalistes" (oui, c’est entre guillemets).</p>

  496. <p>Par contre, nous gardons notre téléviseur. Je l’utilise le plus souvent pour regarder des films ou des séries.

  497. Idem concernant la radio, que l’on écoute essentiellement le week-end pour quelques émissions que l’on adore. L’avantage de la radio publique suisse est qu’elle diffusée sans publicité, toute la journée ! Mais l’omniprésence de la publicité est un autre débat...

  498. Bref, nous avons décidé de ne regarder le Journal Télévisé (JT) qu’essentiellement et de temps à autre via la Télévision Suisse Romande (TSR) et de manière sporadique sur les chaînes publiques françaises.</p>

  499. <p>Un autre sujet qui me semble aussi effarant est la fréquence de lecture de la presse "gratuite" qui, si elle a ses avantages, a aussi l’inconvénient de véhiculer, à mon sens, une information jetable, dénuée de toute profondeur. Ce qui m’inquiète est à la fois sa présence ancrée - la plupart des pendulaires que je vois dans le train n’ont quasiment qu’elle entre les mains, mais aussi la sensation qu’il s’agit d’un nivellement vers le bas quant au niveau rédactionnel.</p>

  500. <p>Je dis cela, mais d’un autre côté, je ne pense pas avoir (encore) repris le contrôle de mon attention, car je reste accroché à Twitter et autres flux RSS qui m’inonde d’informations plus ou moins pertinentes. J’ai du ménage à faire en ce sens.

  501. Au final, ça reste un début me concernant, et je suis preneur de tes retours sur le long terme.</p>

  502.         <p><cite>Sébastien Fievet, le <a href="#comment-2">2013-03-05 à 21:26</a></cite></p>

  503.       </article>

  504. 

  505.       <article id="comment-3" class="comment">

  506.         <blockquote>

  507. <p>Et que fais-tu de tes flux RSS et de tes suivis Twitter : tu réduis leur nombre à 150 également ?</p>

  508. </blockquote>

  509. <p>Je suis en dessous des 100 dans les 2 cas et ça me convient très bien pour l’instant.</p>

  510. <blockquote>

  511. <p>Finalement, en faisant ta valise pour le Japon, tu avais déjà commencé à éliminer tout ce qui t’était confortable mais pas indispensable pour vivre au quotidien.</p>

  512. </blockquote>

  513. <p>C’est certain, ça m’a beaucoup aidé à faire un premier tri puis à consommer de manière différente en considérant la contrainte d’encombrement (et de retour) une fois là-bas. Le fait d’avoir le sentiment de vivre dans un grand supermarché permet de prendre beaucoup de recul aussi.</p>

  514. <blockquote>

  515. <p>Un autre sujet qui me semble aussi effarant est la fréquence de lecture de la presse "gratuite" qui, si elle a ses avantages, a aussi l’inconvénient de véhiculer, à mon sens, une information jetable, dénuée de toute profondeur. Ce qui m’inquiète est à la fois sa présence ancrée - la plupart des pendulaires que je vois dans le train n’ont quasiment qu’elle entre les mains, mais aussi la sensation qu’il s’agit d’un nivellement vers le bas quant au niveau rédactionnel.</p>

  516. </blockquote>

  517. <p>Cela me préoccupait au début mais finalement la presse papier traditionnelle est bien trop liée à des intérêts politico-économiques pour avoir la pertinence que l’on attend d’elle donc je ne sais pas si c’est beaucoup mieux… Le côté « je lis ce que l’on me donne sans réfléchir » est assez troublant par contre en terme de propagande.</p>

  518.         <p><cite>David Larlet, le <a href="#comment-3">2013-03-05 à 22:48</a></cite></p>

  519.       </article>

  520. 

  521.       <article id="comment-4" class="comment">

  522.         <blockquote>

  523. <p>la presse papier traditionnelle est bien trop liée à des intérêts politico-économiques pour avoir la pertinence que l’on attend d’elle</p>

  524. </blockquote>

  525. <p>s/politico-//</p>

  526. <p>Si seulement la presse avait un agenda politique seulement. :) Je préfèrerai lire une presse clairement politiquement biaisée pour un choix de société et décrypté l’information avec cette grille que celle du consensus mou de l’argent, qui avale tout sur son passage.</p>

  527.         <p><cite>Karl Dubost, le <a href="#comment-4">2013-03-05 à 23:37</a></cite></p>

  528.       </article>

  529. 

  530.       <article id="comment-5" class="comment">

  531.         <blockquote>

  532. <p>Si seulement la presse avait un agenda politique seulement. :)</p>

  533. </blockquote>

  534. <p>Je ne suis pas sûr que l’argent soit le seul moteur de la presse (ou plutôt <a href="https://larlet.fr/david/blog/2012/opinion-audience/">des media</a>), il est question également de pouvoir et d’influence. J’évoquais la <a href="http://fr.wikipedia.org/wiki/Politique">Politique</a> au sens de <em>Politikè</em> et non de <em>Politeia</em>.</p>

  535.         <p><cite>David Larlet, le <a href="#comment-5">2013-03-06 à 09:45</a></cite></p>

  536.       </article>

  537. 

  538.       <article id="comment-6" class="comment">

  539.         <blockquote>

  540. <p>Je ne suis pas sûr que l’argent soit le seul moteur de la presse (ou plutôt des media)</p>

  541. </blockquote>

  542. <p>Je ne pense pas non plus dans ce sens là, comme une volonté propre du milieu. Ce que j’entendais par motivation par l’argent est les groupes qui sont derrière. </p>

  543. <blockquote>

  544. <p>il est question également de pouvoir et d’influence. J’évoquais la Politique au sens de <em>Politikè</em> et non de <em>Politeia</em>.</p>

  545. </blockquote>

  546. <p>Oui. Et c’est bien l’enjeu car si nous réfléchissons à la finalité de ce jeu de pouvoir, nous revenons à la case départ de la motivation. Dans le livre sur le mouvement situationniste, lu récemment, l’auteur remarque que ce que les situationnistes n’avaient pas prévu, c’est que leurs idées de détournement, de remise en cause du système, etc, seraient adoptées le plus complètement par le capitalisme (par la voie du marketing, de la publicité et même de changements de société). Pour une raison très simple, c’est que la volonté du capitalisme est de grossir son emprise économique et que <strong>toutes les méthodes</strong> sont bonne pour y arriver, même si c’est de vendre l’idée d’une révolution sociale.</p>

  547.         <p><cite>Karl Dubost, le <a href="#comment-6">2013-03-06 à 13:00</a></cite></p>

  548.       </article>

  549. 

  550.   </section>

  551. 

  552. 

  553. 

  554. 

  555. <nav id="jumpto">

  556.   <p>

  557.     <a rel=prev href="/david/blog/2013/autoritaire-cooperatif/">← Autoritaire ou coopératif</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/conferences-diversite/">Conférences et diversité →</a>

  558.   </p>

  559. </nav>

  560. 

  561. <footer>

  562.   <div>

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

  564.     <p>

  565.       Bonjour/Hi!

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

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

  568.     </p>

  569.     <p>

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

  571.     </p>

  572. 

  573.       <p>

  574.         Les dernières publications hebdomadaires sont :

  575.       </p>

  576.       <ul class="with_columns">

  577. 

  578.           <li>

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

  580.           </li>

  581. 

  582.           <li>

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

  584.           </li>

  585. 

  586.           <li>

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

  588.           </li>

  589. 

  590.           <li>

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

  592.           </li>

  593. 

  594.           <li>

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

  596.           </li>

  597. 

  598.           <li>

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

  600.           </li>

  601. 

  602.           <li>

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

  604.           </li>

  605. 

  606.           <li>

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

  608.           </li>

  609. 

  610.           <li>

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

  612.           </li>

  613. 

  614.           <li>

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

  616.           </li>

  617. 

  618.           <li>

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

  620.           </li>

  621. 

  622.           <li>

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

  624.           </li>

  625. 

  626.           <li>

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

  628.           </li>

  629. 

  630.           <li>

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

  632.           </li>

  633. 

  634.           <li>

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

  636.           </li>

  637. 

  638.           <li>

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

  640.           </li>

  641. 

  642.           <li>

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

  644.           </li>

  645. 

  646.           <li>

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

  648.           </li>

  649. 

  650.           <li>

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

  652.           </li>

  653. 

  654.           <li>

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

  656.           </li>

  657. 

  658.           <li>

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

  660.           </li>

  661. 

  662.           <li>

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

  664.           </li>

  665. 

  666.           <li>

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

  668.           </li>

  669. 

  670.           <li>

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

  672.           </li>

  673. 

  674.           <li>

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

  676.           </li>

  677. 

  678.           <li>

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

  680.           </li>

  681. 

  682.           <li>

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

  684.           </li>

  685. 

  686.           <li>

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

  688.           </li>

  689. 

  690.           <li>

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

  692.           </li>

  693. 

  694.           <li>

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

  696.           </li>

  697. 

  698.           <li>

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

  700.           </li>

  701. 

  702.           <li>

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

  704.           </li>

  705. 

  706.           <li>

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

  708.           </li>

  709. 

  710.           <li>

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

  712.           </li>

  713. 

  714.           <li>

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

  716.           </li>

  717. 

  718.           <li>

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

  720.           </li>

  721. 

  722.           <li>

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

  724.           </li>

  725. 

  726.           <li>

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

  728.           </li>

  729. 

  730.           <li>

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

  732.           </li>

  733. 

  734.           <li>

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

  736.           </li>

  737. 

  738.           <li>

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

  740.           </li>

  741. 

  742.           <li>

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

  744.           </li>

  745. 

  746.           <li>

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

  748.           </li>

  749. 

  750.           <li>

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

  752.           </li>

  753. 

  754.           <li>

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

  756.           </li>

  757. 

  758.           <li>

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

  760.           </li>

  761. 

  762.           <li>

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

  764.           </li>

  765. 

  766.           <li>

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

  768.           </li>

  769. 

  770.           <li>

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

  772.           </li>

  773. 

  774.       </ul>

  775. 

  776.     <p>

  777.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  794.     </p>

  795.     <p>

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

  797.     </p>

  798.     <p>

  799.       Je ne traque pas ta navigation mais mon

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

  801.       conserve des logs d’accès.

  802.     </p>

  803.   </div>

  804. </footer>

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

  806.   ;(_ => {

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

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

  809.       e.preventDefault()

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

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

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

  813.     })

  814.   })()

  815. </script>

  816. 

  817.   <script>

  818.   /* Service workers */

  819.   if (navigator.serviceWorker) {

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

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

  822.       function sendLinks (selector) {

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

  824.           return link.getAttribute('href')

  825.         })

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

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

  828.       }

  829.       navigator.serviceWorker.getRegistration()

  830.         .then(function (registration) {

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

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

  833.               .then(navigator.serviceWorker.ready)

  834.               .then(function () {

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

  836.               })

  837.               .catch(console.error.bind(console))

  838.           } else {

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

  840.             sendLinks(selector)

  841.           }

  842.         })

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

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

  845.         sendLinks(selector)

  846.       })

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

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

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

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

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

  852. 

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

  854. 

  855.         }

  856.       })

  857.     })

  858.   } else {

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

  860.   }

  861. </script>