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

index.html 25KB
Неформатований Blame Історія

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595 
  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>Nous, les robots (archive) — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

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

  31.   <link rel="canonical" href="http://la-grange.net/2011/05/17/robots">

  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.   Nous, les robots (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://la-grange.net/2011/05/17/robots">Source originale du contenu</a></h3>

  463.     <p class="figure"><img src="http://la-grange.net/2011/04/30/5475-tv-robot" alt="Graffiti"/><br/><span class="source">New-York, États-Unis, 30 avril 2011</span></p>

  464. 

  465. <blockquote cite="urn:isbn:978-1-902902-52-4">

  466.     <p>The boundary conditions of this installation shift from moment to moment, responding to the changing moods of nature.</p>

  467.     <p class="source">

  468.         <cite class="auteur">Kuma, Kengo</cite>,

  469.         <cite class="titre">Anti-Object</cite>, p.37, AA publications, 2008.</p>

  470. </blockquote>

  471. 

  472. <p>L'homme créa le robot à son image, mais il fût extrêmement déçu. Et pourtant, l'espoir habitait toutes les imaginations. Comme dans toute mythologie, il inventa la genèse, le moment ultime de l'avant et de l'après. La courte vie demande que cet instant soit bref afin qu'il soit palpable dans le moment d'une génération. Que ce soit dans <a href="http://en.wikipedia.org/wiki/Ghost_in_the_Shell_(film)">Ghost In The Shell</a>, <a href="http://en.wikipedia.org/wiki/I,_Robot_(film)">I, Robot</a>, <a href="http://www.wetherobots.com">We the robots</a> (ci-dessous), les robots s'éveillent à la conscience, le don ultime.</p>

  473. 

  474. <p class="figure"><img id="wetherobots20071001" src="http://la-grange.net/2011/05/17/wetherobots-2007-10-01-IntroCh1" alt="Wetherobots20071001"/><br/><span class="source">Chris Harding 2007 ©, <a href="http://www.wetherobots.com/2007/10/01/intro-ch-001/">We The Robots 2007-01-01</a></span></p>

  475. 

  476. <p>Généralement, l'homme disparaît ou définit une place dans la société pour cette nouvelle espèce consciente. Mais est-ce là toute l'histoire, existe-t-il d'autres chemins dont nous n'avons pas conscience, plus subtils ? Je décide de poser la question dans le terminal de mon ordinateur.</p>

  477. 

  478. <div class="sourcecode">

  479. <pre>karl: [10:26:23]% whoami

  480. karl

  481. </pre>

  482. </div>

  483. 

  484. <p>Hmm… qui me répond ? Un programme obéissant aux instructions construites dans le système Unix de l'ordinateur. Il ne s'agit pas là vraiment d'une réponse mais bien d'une programmation de mon futur. Le programme a été conçu pour répondre dans le futur. Lorsque nous entrons <code>whoami</code> (Qui suis-je ?), le programme répond avec mon identifiant sur l'ordinateur. Bien que la réponse soit exacte et en accord avec ce qui avait été défini, elle éveille un manque de « conscience. » Imaginons que le programme réponde, « je ne sais pas. » La relation devient soudainement intéressante car elle est un accident, une opportunité d'exploration afin de mieux comprendre. Il s'agit du début d'un dialogue.</p>

  485. 

  486. <h2 id="leprogrammeduquotidien">Le programme du quotidien</h2>

  487. 

  488. <h3 id="calendrier">Calendrier</h3>

  489. 

  490. <p>Notre vie est pleine de ces moments où nous répondons à des programmes.  Le calendrier réorganise le temps en une séquence de semaines, mois et années. Mais bien plus que cela il est une programmation de notre futur. Nous obéissons à des éléments qui structurent nos actions individuelles, mais également et inconsciemment à nos comportements en société. Dans de nombreuses parties de notre société industrialisée, nous avons rythmé nos vies autour de 5+2 jours. Ces deux jours de week-ends programment un comportement différent, un type d'action, une suppression de notre flexibilité. Dans les grandes entreprises, nous ne pouvons <em>généralement</em> aller travailler le samedi à la place du mercredi, car ce n'est pas prévu par le programme. L'accident est impossible.</p>

  491. 

  492. <p class="figure"><img src="http://la-grange.net/2011/05/17/calendrier" alt=""/><br/><span class="source">Calendrier du mois de mai 2011</span></p>

  493. 

  494. <h3 id="systmedecartographie">Système de cartographie</h3>

  495. 

  496. <p>Les systèmes de cartographie en ligne proposent également un programme dont nous réalisons peu la portée. Chercher la direction d'une adresse d'origine vers une destination est devenue une action très courante. Nous n'y pensons pas vraiment. Nous ne sommes plus émerveillés. Nous utilisons sans questionner. Le programme est couramment optimisé selon certains critères : </p>

  497. 

  498. <ul>

  499. <li>la distance (la plus courte), </li>

  500. <li>le temps (le plus court), </li>

  501. <li>le trajet (le moins cher), </li>

  502. <li>le moyen de transport : à pied, en voiture, en transport en commun (avec une date et heure).</li>

  503. </ul>

  504. 

  505. <p>Ces choix sont le reflet d'une certaine organisation de nos sociétés, de ses valeurs et de son optimisation. Le chemin proposé est toujours le même pour les critères définis précédemment. Il nous suffit de suivre les instructions pour réaliser un saut quantique entre les deux points de la carte. L'entre-deux n'est pas important, il n'est que l'exécution. Nous pourrions d'ailleurs optimiser un peu plus et accentuer ce saut quantique en automatisant complètement la <a href="http://www.physorg.com/news/2011-05-google-driverless-cars-legal-nevada.html">conduite directement branché dans le système de direction en ligne</a>. L'argument retenu sera la sécurité et l'optimisation du système. Une fois tout le monde branché dans le même système, nous pouvons également réguler, distribuer le trafic à travers différents chemins.</p>

  506. 

  507. <p class="figure"><img src="http://la-grange.net/2011/05/17/directionmap" alt="carte de direction"/><br/><span class="source">Route de Renault, Cléon à Elbeuf</span></p>

  508. 

  509. <h3 id="laroute">La route</h3>

  510. 

  511. <p>Le système de cartographie est lui-même programmé à partir d'un autre programme : le système des voies de communications. Avant l'invention de la route et de la machine, nous marchions avec une grande flexibilité. Nos contraintes consistaient en la géographie naturelle de l'espace physique ainsi que de sa biologie. Nous avons créé des chemins, puis des routes, puis des voies de chemins de fer afin d'optimiser nos déplacements, les sécuriser, les rendre plus fiables, plus contrôlables, plus efficaces. En les suivant nous répondons à un programme pré-établi et dont nous questionnons peu l'existence, duquel nous pouvons difficilement échapper.</p>

  512. 

  513. <p class="figure"><img src="http://la-grange.net/2007/10/12-6722-circulation" alt="Système  de routes en béton"/><br/><span class="source">Hong-Kong, 12 octobre 2007</span></p>

  514. 

  515. <h2 id="demeilleursprogrammes">De « meilleurs » programmes</h2>

  516. 

  517. <p>Ces programmes sont une contrainte. Pour nombre d'entre eux, nous ne réalisons pas toujours l'impact qu'ils ont sur notre libre arbitre. Nous les avons acceptés. Nous les suivons avec bonheur nous donnant une forme de sécurité, de confort accélérant nos prises de décisions dans la société. Ils peuvent être bien sûr optimisés.</p>

  518. 

  519. <p>Les appareils mobiles permettent de tracer nos déplacements, leurs fréquences. Les opérateurs savent exactement à quelques mètres près combien de temps nous avons passé dans un endroit précis. Il ne s'agit pas seulement de tracer un déplacement mais également de comprendre les temps immobiles et les catégories de ces temps. Notre appareil mobile dit que nous avons passé 45 minutes dans ce café japonais à l'heure du midi. Il remarque que nous y passons régulièrement aux mêmes heures certains jours de la semaine. Que nous échangeons des messages avec des amis qui sont aussi dans ce même café aux mêmes moments que nous. Toute cette information pourrait être utilisée pour nous proposer un itinéraire qui ne répond plus seulement aux critères précédents mais également à nos préférences. La route proposée s'ajustera pour utiliser des rues avec des magasins que nous sommes susceptibles d'aimer. Le programme nous proposera de faire un arrêt à un endroit que nous aimons et évitera les endroits qui nous rendent inconfortables. Ce programme sera finalement plus facile à suivre car il collera à ce qui nous semble naturel. Il est moins violent.</p>

  520. 

  521. <h2 id="ladsobissancenumrique">La désobéissance numérique</h2>

  522. 

  523. <p>La personnalisation est un système de programmation du futur. </p>

  524. 

  525. <p>En diminuant les risques d'accident, en optimisant l'expérience, nous créons un système vie générant moins de questions. Eli Pariser exprime ce phénomène par les <a href="http://www.youtube.com/watch?v=B8ofWFx525s">bulles de filtres</a>. Dans notre rencontre avec l'information, les programmes éliminent petit à petit, les éléments accidentels ceux qui sont matières à nous déstabiliser, ceux que nous ne voulons pas voir. Il crée un univers plus policé dans lequel nous <a href="http://www.recombinantrecords.net/docs/2009-05-Amusing-Ourselves-to-Death.html">voulons participer jusqu'à notre fin</a>.</p>

  526. 

  527. <p>Le système est pernicieux car il n'est pas vraiment contraignant, il nous habitue à nos choix initiaux jusqu'au moment où nous ne sommes plus conscients de ces choix. Jusqu'au moment où ne faisons qu'obéir à un programme. <strong>Nous sommes les robots</strong>.</p>

  528. 

  529. <p>Dans le film <a href="http://en.wikipedia.org/wiki/Wall-e" title="WALL-E - Wikipedia, the free encyclopedia">Wall-e</a>, le robot vient provoquer l'accident au cœur des humains qui ne sont plus <a href="http://www.youtube.com/watch?v=u9s7afoYI-M">conscients de leurs états</a>. Les fauteuils auto-dirigés s'arrêtent, les humains obèses doivent marcher et communiquer. Ils communiquent de nouveau. Ils réalisent qu'ils ont une piscine. Les humains avaient oublié qu'ils avaient une conscience.</p>

  530. 

  531. <p>Dans tous ces systèmes qui nous entourent, nous devons créer parfois de la désobéissance numérique afin de créer des possibles.</p>

  532.   </article>

  533. </section>

  534. 

  535. 

  536. <nav id="jumpto">

  537.   <p>

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

  539.     <a href="http://la-grange.net/2011/05/17/robots">Source originale</a> |

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

  541.   </p>

  542. </nav>

  543. 

  544. <footer>

  545.   <div>

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

  547.     <p>

  548.       Bonjour/Hi!

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

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

  551.     </p>

  552.     <p>

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

  554.     </p>

  555.     

  556.     <p>

  557.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  574.     </p>

  575.     <p>

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

  577.     </p>

  578.     <p>

  579.       Je ne traque pas ta navigation mais mon

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

  581.       conserve des logs d’accès.

  582.     </p>

  583.   </div>

  584. </footer>

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

  586.   ;(_ => {

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

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

  589.       e.preventDefault()

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

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

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

  593.     })

  594.   })()

  595. </script>