davidbgk
/
larlet-fr-david-cache
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Släpp 0 Aktiviteter
A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
299 Incheckningar
1 Gren
Träd: 038090ae42
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från '038090ae42'
${ noResults }
larlet-fr-david-cache/cache/8264d5066f4071a8e5580b84734.../index.html

index.html 45KB
Rå Blame Historik

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586 
  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>Re-contraindre le design (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://www.internetactu.net/2018/05/07/re-contraindre-le-design/">

  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.   Re-contraindre le design (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://www.internetactu.net/2018/05/07/re-contraindre-le-design/">Source originale du contenu</a></h3>

  463.     <p>On a souvent évoqué sur InternetActu.net les travaux du designer James Auger (<a href="http://crapfutures.tumblr.com/">blog</a>, <a href="https://twitter.com/crapfutures">@crapfutures</a> ; voir notamment <a href="http://www.internetactu.net/2017/09/18/quelle-ethique-pour-le-design/">« Quelle éthique pour le design ? »</a> et <a href="http://www.internetactu.net/2009/03/05/le-design-pour-construire-le-futur-dans-lequel-nous-voulons-vivre/">« Le design pour construire le futur dans lequel nous voulons vivre »</a>). L’occasion d’une masterclass qu’il livrait récemment à l’<a href="https://www.ensci.com/">Ensci</a>, nous permet de revenir sur l’éclairage qu’il apporte à la question du design, pour faire évoluer les contraintes qui pèsent sur la conception. </p>

  464. 

  465. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/reconstraineddesignbyAuger-211x300.png" alt="" class="alignright size-medium wp-image-31770" hspace="6" vspace="6" srcset="http://www.internetactu.net/wp-content/uploads/2018/05/reconstraineddesignbyAuger-211x300.png 211w, http://www.internetactu.net/wp-content/uploads/2018/05/reconstraineddesignbyAuger.png 526w" sizes="(max-width: 211px) 100vw, 211px"/>Recontraindre le design est le titre <a href="https://www.researchgate.net/publication/317486037_Reconstrained_Design_A_Manifesto">d’un manifeste que James Auger a publié en 2017</a>. Cette nécessité, pour lui, est née des travaux que le designer a réalisés ces dernières années à l’<a href="https://www.m-iti.org">Institut des technologies interactives de Madère</a>. Mais avant de re-contraindre le design, il faut d’abord comprendre les contraintes qui pèsent sur le designer. </p>

  466. 

  467. <p>Tous les designers pensent à partir de contraintes, de limites, rappelle Auger. En 1972, le célèbre couple de designers <a href="https://fr.wikipedia.org/wiki/Charles_Eames">Charles et Ray Eames</a>, répondaient à <a href="http://www.eamesoffice.com/the-work/design-q-a-text/">une série de 29 questions</a> sur le design à l’occasion de l’exposition sur « Qu’est-ce que le design ? » au musée des arts décoratifs de Paris. Pour eux, expliquaient-ils, le design consiste à répondre à une somme de contraintes, qui sont à l’origine des problèmes que rencontre le designer, car il doit travailler avec celles-ci. Pour eux, les contraintes qu’ils identifiaient étaient multiples comme le prix, la taille, la force, l’équilibre, la surface, le temps, etc. Chaque problème auquel est confronté le designer produit sa propre liste de contraintes. Réaliser une chaise par exemple nécessite de prendre en compte les contraintes des matériaux et de production qui lui sont associées. Avec le numérique, les contraintes qui pèsent sur le designer n’ont pas disparues, estime Auger, au contraire. Mais il est plus que jamais nécessaire d’identifier les contraintes problématiques et se demander comment reconstruire le design depuis elles. </p>

  468. 

  469. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/Augermasterclass-1024x576.jpg" alt="" class="aligncenter size-large wp-image-31787" srcset="http://www.internetactu.net/wp-content/uploads/2018/05/Augermasterclass-1024x576.jpg 1024w, http://www.internetactu.net/wp-content/uploads/2018/05/Augermasterclass-300x169.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/05/Augermasterclass-768x432.jpg 768w, http://www.internetactu.net/wp-content/uploads/2018/05/Augermasterclass.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px"/><br/>

  470. <em>Image : James Auger, en masterclass à l’Ensci, <a href="https://twitter.com/Rouffi/status/988456502062211072/photo/1">via Romain Rouyer</a>.</em> </p>

  471. 

  472. <h2>La contrainte du progrès</h2>

  473. 

  474. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/augerbelgeddesfuturama-300x169.jpg" alt="Norman Bel Geddes sur la maquette de Futurama" title="Norman Bel Geddes sur la maquette de Futurama" class="alignleft size-medium wp-image-31771" hspace="6" vspace="6" srcset="http://www.internetactu.net/wp-content/uploads/2018/05/augerbelgeddesfuturama-300x169.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/05/augerbelgeddesfuturama-768x432.jpg 768w, http://www.internetactu.net/wp-content/uploads/2018/05/augerbelgeddesfuturama-1024x576.jpg 1024w, http://www.internetactu.net/wp-content/uploads/2018/05/augerbelgeddesfuturama.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px"/>La première des contraintes qui pèse sur le designer aujourd’hui est le dogme du progrès, souligne Auger. Comme le pointait le spécialiste des sciences et du développement durable <a href="https://en.wikipedia.org/wiki/Langdon_Winner">Langdon Winner</a> dans son livre <em><a href="https://amzn.to/2w8j8oT">La baleine et le réacteur</a></em>, la technologie n’ébranle pas la foi dans le progrès, au contraire. La prochaine vague d’innovation est toujours vue comme la planche de salut des échecs de la précédente. Le progrès technologique, dans ses innovations, a toujours été vu comme ayant une influence positive sur la civilisation. Le design a bien sûr joué un rôle majeur pour vendre ces rêves technologiques, estime le designer en évoquant par exemple le rôle du décorateur <a href="https://fr.wikipedia.org/wiki/Norman_Bel_Geddes">Norman Bel Geddes</a>, architecte du pavillon de General Motors lors de la Foire internationale de New York de 1939, plus connue sous le nom de <a href="https://en.wikipedia.org/wiki/Futurama_(New_York_World%27s_Fair)">Futurama</a>.  Cette exposition composée principalement d’immenses maquettes a servi General Motors pour faire du lobbying auprès de politiciens et du grand public afin de promouvoir le développement des autoroutes. En pleine crise économique, l’exposition a été un catalyseur d’espoirs. Les grandes autoroutes américaines ont été construites. Et GM a pu vendre les voitures que ces infrastructures nécessitaient. Reste que la réalité n’a pas été aussi belle que celle qu’illustraient les immenses maquettes de Norman Bel Geddes. On n’y voyait pas d’embouteillages, seulement une circulation fluide, célébrant à la fois la liberté et l’organisation rationnelle du monde. L’utopie de Bel Geddes a été de courte durée. Pour chaque bénéfice qu’apporte une nouvelle technologie, il faut toujours compter sur leurs implications négatives. Pour Auger, cela montre que nous devons explorer les conséquences des technologies avant leur déploiement. Or, bien souvent, on n’explore pas ces aspects-là, trop occupés que nous sommes à vendre des solutions et des visions. </p>

  475. 

  476. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/RPM-copia-copia-300x264.jpg" alt="Real Prediction Machine" title="Real Prediction Machine" class="alignright size-medium wp-image-31772" hspace="6" vspace="6" srcset="http://www.internetactu.net/wp-content/uploads/2018/05/RPM-copia-copia-300x264.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/05/RPM-copia-copia.jpg 540w" sizes="(max-width: 300px) 100vw, 300px"/>En 2014, le projet <a href="http://www.auger-loizeau.com/projects/real-prediction-machines">Real Prediction Machines</a> (RPM) (<a href="https://vimeo.com/119781315">vidéo</a>) de James Auger avait justement pour objet de regarder les implications des produits avant qu’ils ne soient produits. Ce travail de conception spéculative, réalisée avec des scientifiques avait pour but d’interroger l’intuition et l’incertain, en observant l’impact des techniques prédictives issues des Big data sur nos existences. Le projet avait pour but de révéler comment l’analyse de données pouvait prédire une attaque cardiaque. Avec des spécialistes, Auger a sélectionné des flux de données permettant d’évaluer un risque cardiaque et de le rendre visible. À défaut de données médicales, le designer a cherché à trouver d’autres données pour caractériser les risques, par exemple en utilisant un microphone pour écouter le ton des conservations, leur fréquence, leur volume et les mots-clefs utilisés. Au final, l’objet se présente comme un capteur en temps réel, dont les lumières tournent, clignotent et changent de couleurs pour créer un retour stroboscopique de l’état d’énervement de l’utilisateur. L’enjeu du RPM, présenté à l’exposition Crafting Narrative, était de montrer le potentiel transformateur du big data dans la vie quotidienne. D’imaginer un retour immédiat de l’analyse de données personnelles selon qu’un facteur prédictif semble imminent ou éloigné. </p>

  477. 

  478. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/toothimplant-150x150.jpg" alt="L'implant dentaire de Auger et Loizeau" title="L'implant dentaire de Auger et Loizeau" class="alignleft size-thumbnail wp-image-31773" hspace="6" vspace="6"/>L’un des projets les plus célèbres de James Auger et Jimmy Loizeau, <a href="http://www.auger-loizeau.com/projects/toothimplant">l’implant dentaire audio</a> était une image conceptuelle spéculative d’une dent augmentée de capacités techniques censée permettre la communication télépathique. Ce projet, présenté lors d’une exposition au musée des sciences de Londres, visait à dénoncer l’omniprésence de la téléphonie mobile en projetant sa prochaine étape logique : faire que le téléphone fasse partie de nos corps. </p>

  479. 

  480. <p>C’était une simple blague qui a fonctionné au-delà des espérances des auteurs, puisque ce projet né d’une critique de la communication mobile ou des perspectives de communication distantes comme celles qu’exploraient alors le spécialiste de cybernétique <a href="https://fr.wikipedia.org/wiki/Kevin_Warwick">Kevin Warwick</a> en s’implantant une puce électronique dans la peau pour déverrouiller la porte de son laboratoire à distance. L’implant dentaire a fait la une du <em>Times</em> en 2002 qualifié d’innovation la plus cool de l’année. En fait, souligne Auger, le fait que ce soit une blague est passé complètement inaperçu. Les journalistes voulaient l’histoire que racontait cette proposition. Nombre de spécialistes leur ont écrit pour leur proposer de travailler avec eux et améliorer leur concept, mais bien peu voyaient la critique que le projet voulait réaliser des implications de la technologie sur nos vies. </p>

  481. 

  482. <p>Deux projets qui montrent que le dogme du progrès semble résister à toutes les critiques et se présente toujours comme un accomplissement nouveau, quand bien même ce ne serait pas le cas. Bref, qu’il n’est pas si simple de faire une critique de la technologie par la technologie. </p>

  483. 

  484. <h2>La contrainte des moyens et des fins</h2>

  485. 

  486. <p>La seconde contrainte qui pèse sur le design aujourd’hui est les moyens et les fins. Le philosophe des technologies, <a href="https://en.wikipedia.org/wiki/Albert_Borgmann">Alfred Borgmann</a> parle de paradigme de l’appareil. Pour lui, les choses sont inséparables de leur contexte. Nous nous engageons et interagissons avec eux selon leurs modalités. À l’inverse, les dispositifs, nous déchargent des contextes, parce que les technologies avancées qui les sous-tendent sont invisibles ou masquées. Borgman distinguait ainsi le foyer d’une cheminée d’un système de chauffage central qui peut pourtant se présenter sous une apparence assez proche, comme dans le cas d’une cheminée au gaz. Or, si dans le premier cas le contrôle du foyer est transparent et dépend entièrement de l’utilisateur, dans le second cas, l’utilisateur ne voit pas l’infrastructure de tuyaux qui amène le gaz et les flammes jusqu’à son semblant de cheminée. Les designers comme les utilisateurs sont devenus obsédés par les fins, par des produits léchés, renfermant des systèmes techniques cachés de plus en plus opaques. Les systèmes techniques sont devenus des boîtes noires, à l’image du thermostat Nest, dépourvus même du moindre bouton. Les objets désormais satisfont nos besoins le plus efficacement possibles via des solutions techniques sophistiquées qui nous sont complètement invisibles. </p>

  487. 

  488. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/opensourcevaccuumLynch-200x300.jpg" alt="L'aspirateur open source de Tom Lynch" title="L'aspirateur open source de Tom Lynch" class="alignright size-medium wp-image-31774" hspace="6" vspace="6" srcset="http://www.internetactu.net/wp-content/uploads/2018/05/opensourcevaccuumLynch-200x300.jpg 200w, http://www.internetactu.net/wp-content/uploads/2018/05/opensourcevaccuumLynch-768x1152.jpg 768w, http://www.internetactu.net/wp-content/uploads/2018/05/opensourcevaccuumLynch-683x1024.jpg 683w, http://www.internetactu.net/wp-content/uploads/2018/05/opensourcevaccuumLynch.jpg 1000w" sizes="(max-width: 200px) 100vw, 200px"/>Ce mouvement a plusieurs conséquences. Il nous enlève de la compétence. Mais également, comme le soulignait dès 1968 le philosophe <a href="https://fr.wikipedia.org/wiki/Jean_Baudrillard">Jean Baudrillard</a> dans <em><a href="https://amzn.to/2FHLOo8">Le système des objets</a></em>, il déresponsabilise :  <em>« L’automatisme équivaut à une fermeture, à une sorte d’autosuffisance fonctionnelle qui exile l’homme dans l’irresponsabilité du simple spectateur »</em>. L’automatisation nous pousse à l’apathie. Supprimer la contrainte des fins et des moyens invite donc le concepteur à dépasser les solutions obligées, à rendre le fonctionnement visible, à réengager l’utilisateur en l’invitant à mieux se reconnecter avec les produits, à l’exemple de <a href="https://github.com/unknowndomain/Open-Source-Vacuum-Cleaner/wiki/Introduction">l’aspirateur open source</a> imaginé par le designer <a href="http://tomlynch.co.uk">Tom Lynch</a>. Le problème est que de telles propositions viennent s’opposer à des propositions qui ne sont pas nécessairement plus fonctionnelles, mais qui sont bien plus désirables pour le consommateur, à l’image du célèbre aspirateur Dyson. L’aspirateur de Lynch a d’innombrables qualités : il fonctionne à partir de matériau de récupération, peut être réparé facilement et les utilisateurs peuvent contribuer à son amélioration. Mais pour l’instant, dans cette compétition entre ces deux visions, force est de constater que l’une l’emporte bien plus que l’autre. Pour Auger, cela signifie qu’il faut introduire dans cette contrainte des fins et des moyens, une question qui est pour l’instant encore largement laissée de côté : celle du désir. Or susciter du désir est assurément une fonction du designer. La fonctionnalité ne suffit pas. Son rôle est aussi de créer des objets désirables. </p>

  489. 

  490. <h2>Dépasser les limites de la fabrication</h2>

  491. 

  492. <p><em>« Tout ressemble à un clou pour qui ne possède qu’un marteau »</em>, disait le psychologue <a href="https://fr.wikipedia.org/wiki/Abraham_Maslow">Abraham Maslow</a>. Aujourd’hui, on pourrait paraphraser cette maxime par <em>« Tout ressemble à du code pour qui possède un ordinateur »</em>… Telle est la loi de l’instrumentation, qui nous fait croire que tout est désormais soluble dans les imprimantes 3D et les outils de découpe numérique… Or, effectivement, ironise le designer, tous les objets qu’on fabrique avec une découpe laser se ressemblent. <em>« Ce que nous pouvons faire est toujours limité par les options des outils que nous utilisons »</em>. Cela ne veut pas dire qu’il ne faut pas les utiliser, mais qu’il est nécessaire de compléter ce qu’ils permettent d’autres compétences, plutôt que les utiliser pour eux-mêmes. </p>

  493. 

  494. <p>En 2015, James Auger <a href="http://www.auger-loizeau.com/projects/cuckoo">a réinterprété le Coucou suisse</a>, mais cette fois-ci, il a voulu tout réaliser par lui-même, pièce par pièce. Bon, il n’a pas tout réalisé lui-même réellement, mais… si on souhaite vraiment faire quelque chose, il faut sortir de sa zone de confort et se remettre à l’établi pour faire et pour apprendre. </p>

  495. 

  496. <h2>Dépasser les contraintes infrastructurelles</h2>

  497. 

  498. <p>Le design est également contraint par les limites d’évolution des produits eux-mêmes. La plupart des évolutions sont plus souvent incrémentales, évolutives, comme le souligne l’évolution des gammes de voitures produites par Ford entre 1896 et 1968. Les technologies proposent des itérations à partir de lignées de produits… Ainsi, même le dernier modèle de la Google, Car demeure une proposition dans les contraintes de ce qu’est ou de ce que peut ou doit être une voiture. La nature itérative de la technologie réduit l’imagination du designer et agit comme une contrainte forte. Les 7 versions de l’iPhone produites sont assez proches les unes des autres, chacune proposant des petites améliorations par rapport aux précédentes versions, plus puissantes, plus efficaces… plus chères aussi. Ce constat montre qu’il est difficile de proposer autre chose, de penser en dehors du cadre, de supprimer la contrainte propre au produit et à son histoire. </p>

  499. 

  500. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/augerisophone-300x225.jpg" alt="L'Iso-Phone de Auger et Loizeau" title="L'Iso-Phone de Auger et Loizeau" class="alignleft size-medium wp-image-31775" hspace="6" vspace="6" srcset="http://www.internetactu.net/wp-content/uploads/2018/05/augerisophone-300x225.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/05/augerisophone.jpg 600w" sizes="(max-width: 300px) 100vw, 300px"/>James Auger évoque alors un de ses projets de 2003, l’<a href="http://www.auger-loizeau.com/projects/isophone">Iso-Phone</a> (<a href="https://vimeo.com/7140102">vidéo</a>). L’idée ici était de proposer un autre rapport à la télécommunication que ceux que nous proposent nos outils téléphoniques, dans un contexte de privation de la sensibilité. Le dispositif visait à se concentrer sur l’expérience d’être en communication avec quelqu’un en éliminant tout ce qui vient la perturber, d’où cette proposition de faire un échange téléphonique depuis une piscine, via des casques qui coupent toute distraction avec la réalité. De recontextualiser la conversation, de l’extraire de tout contexte social… Ici, l’enjeu n’était pas d’agir sur la qualité de la transmission ou la miniaturisation des objets de télécommunication, mais de tenter de proposer une expérience de communication différente, pour regarder en quoi cela peut transformer la façon dont on parle aux gens. </p>

  501. 

  502. <p>Repousser les contraintes qu’imposent les infrastructures mène bien sûr jusqu’aux projets les plus récents que développe le designer, notamment ceux relatifs à l’énergie. </p>

  503. 

  504. <p>Notre système énergétique repose sur une puissante infrastructure faite de centrales, de réseaux de distribution et de prises électriques sur lesquels tous les produits doivent se brancher. Tous les produits que l’on conçoit doivent ainsi être munis d’une prise électrique pour se brancher au réseau électrique. Et cette contrainte est une contrainte sur laquelle le designer n’a pas la main, car il n’a pas accès, ne peut pas changer la façon dont son produit est alimenté. <em>« Tous les produits se terminent par une prise électrique ! J’ai voulu réfléchir à développer une autre relation à l’énergie, dans la façon même dont le produit opère »</em>. </p>

  505. 

  506. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/augerafterlife01-300x225.jpg" alt="Afterlife" title="Afterlife" class="alignright size-medium wp-image-31776" hspace="6" vspace="6" srcset="http://www.internetactu.net/wp-content/uploads/2018/05/augerafterlife01-300x225.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/05/augerafterlife01.jpg 600w" sizes="(max-width: 300px) 100vw, 300px"/>Entre 2001 et 2013, avec Jimmy Loizeau, James Auger a plusieurs fois questionné notre rapport à l’énergie via le <a href="http://www.auger-loizeau.com/projects/afterlife">projet Afterlife</a>. L’idée était d’interroger la relation à ce qu’on devient après notre mort. Plutôt que de transformer les choses en appareils, l’idée ici était de transformer les appareils en chose, pour prendre le contre-pied de ce que disait Alfred Borgmann. Ce projet spéculatif visait à transformer les corps des défunts en pile électrique, de générer de l’électricité depuis la matière organique, de créer des piles permettant d’utiliser l’énergie que pourrait produire la décomposition du cadavre d’un proche. <em>« J’aimais bien l’idée qu’on puisse faire quelque chose d’utile de moi après ma mort »</em>, s’amuse le designer. Lors de <a href="https://www.moma.org/interactives/exhibitions/2008/elasticmind/">l’exposition Design on Elastic Mind</a>, la proposition n’a pourtant pas été bien reçue, notamment parce qu’elle présentait les choses de manière un peu crue, sous la forme d’un cercueil pour récupérer l’énergie produite par la décomposition des corps. Les designers ont demandé aux gens ce qu’ils voudraient que leurs proches fassent des piles que leurs décompositions produiraient. L’un des participants a suggéré que ses piles puissent alimenter une télécommande de télévision qui mettrait automatiquement une chaîne avec des émissions de nature, le genre de programmes que sa famille n’aimait pas trop. Pour lui, c’était un moyen pour signifier encore à ses proches quelque chose de sa nature, de son caractère, qui pouvait s’imposer aux autres… </p>

  507. 

  508. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/augermadere-150x150.jpg" alt="Madere" title="Madere" class="alignleft size-thumbnail wp-image-31777" hspace="6" vspace="6"/>Repenser les contraintes peut aller plus loin encore, à l’image de <a href="http://crapfutures.tumblr.com/tagged/gravity-battery">la Newton Machine</a> (<a href="https://vimeo.com/201859288">vidéo</a>) sur laquelle il a travaillé depuis Madère où il était installé jusqu’à très récemment. Madère est une île volcanique, très accidentée, très ensoleillée et ventée. C’est une île où l’utilisation d’énergie renouvelable est possible : on y trouve d’ailleurs des éoliennes et des fermes solaires. Mais, comme souvent avec l’énergie renouvelable, la question du stockage énergétique est compliquée. D’où l’idée d’exploiter le paysage de Madère, avec ses grandes falaises verticales, pour imaginer une batterie qui stockerait l’énergie en utilisant les atouts de la topographie même de l’ile. C’est l’idée qui a donné naissance à la pile à gravité. </p>

  509. 

  510. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/crap-futures.png" alt="la batterie à gravité" title="la batterie à gravité" class="alignright size-full wp-image-31778" hspace="6" vspace="6"/>Le principe est assez simple une masse (dans la première version, une grosse bonbonne d’eau) suspendue à un câble produit de l’énergie par la gravité et produit de l’énergie via un transformateur. L’électricité produite est utilisée pour alimenter un tourne-disque. La bonbonne est relevée en journée par l’énergie produite par un panneau solaire et descend en soirée en utilisant l’énergie ainsi stockée. C’est un moyen de stocker l’énergie solaire simplement, mécaniquement. Le dispositif permet de voir concrètement les effets de sa consommation énergétique : comme quand la bonbonne descend plus rapidement si on augmenter le volume de la musique. Ce POC, cette preuve de concept fonctionnelle a depuis été améliorée. La première version fonctionnait bien, mais ne permettait pas de stocker beaucoup d’énergie et nécessitait d’assembler beaucoup de compétences pour être réalisée. Une autre version utilise un vieux moteur de moto et <a href="https://newtonmachine.m-iti.org/index.php/Introducing_the_Newton_Machine">les modalités de réalisation ont été documentées et simplifiées pour pouvoir être mieux reproduites et partagées</a>. Lors d’une fête de la science en Écosse, la machine a pu être construite en quelques heures avec l’aide d’un mécanicien pour alimenter un clavier électronique et jouer de la musique en soirée. L’enjeu, estime Auger, est d’utiliser des compétences locales, d’en faire un levier de coopération et de construction communautaire. L’idée est aussi d’adapter le principe à d’autres spécificités locales. Pour une exposition à Barcelone, Auger a travaillé à rendre le prototype plus désirable, en utilisant du bois de récupération, la roche volcanique de Madère… en construisant un objet que les gens voudraient acheter. <a href="http://crapfutures.tumblr.com/post/172033736894/time-reconstrained-part-1">Cela a donné la lampe à gravité</a> : une lampe qui offre de la lumière pendant une heure, une lumière qui s’abaisse petit à petit pour montrer que l’énergie se raréfie, comme un moyen de montrer d’une manière tangible le temps qui passe et son lien avec la consommation d’énergie. </p>

  511. 

  512. <p><img src="http://www.internetactu.net/wp-content/uploads/2018/05/augergravitylamp-300x200.jpg" alt="La lampe à gravité" title="La lampe à gravité" class="alignleft size-medium wp-image-31779" hspace="6" vspace="6" srcset="http://www.internetactu.net/wp-content/uploads/2018/05/augergravitylamp-300x200.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/05/augergravitylamp.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"/>Comme il le souligne dans son billet qui présente la lampe à gravité, en citant le poète et essayiste paysan <a href="https://fr.wikipedia.org/wiki/Wendell_Berry">Wendell Berry</a> : <em>« Nous avons supposé au cours des cinq cents dernières années, que la nature n’est qu’une réserve de «matières premières» et que nous ne pouvions posséder en toute sécurité en les utilisant. Cette appropriation avec l’augmentation de nos moyens technologiques a toujours impliqué moins de révérence ou de respect, moins de gratitude, moins de connaissances locales et moins de compétences. Nos manières d’utiliser ces ressources se sont éloignées de nos anciennes tentatives d’imiter les processus naturels et ressemblent de plus à un terrible extractivisme. »</em> Nous vivons un moment de luxe, de confort incroyable, énergétiquement parlant, rappelle James Auger. </p>

  513. 

  514. <blockquote><p>« Mais ce que nous avons aujourd’hui, personne ne l’aura à nouveau. Nous privons les générations futures de ressources et d’un environnement propre et stable. Un kilo de charbon fournit environ 8 kWh d’énergie, ce qui est extrêmement efficace, si l’on ne prend pas en compte les centaines de millions d’années qu’il a fallu à ce charbon pour se former. Cette quantité de temps, elle, est consommée d’un coup, en un instant, par une simple pression sur un bouton. Or, si l’on prend en compte ce temps, les combustibles fossiles fournissent une efficacité et un rendement extrêmement faible. Si on remet le temps dans l’équation, une batterie à gravité devient bien plus puissante qu’un bout de charbon ».</p></blockquote>

  515. 

  516. <p>C’est l’enjeu des projets de James Auger, rendre notre consommation énergétique visible, tangible, temps réel. La Newton Machine n’est pas conçue pour être une solution instantanée aux problèmes énergétiques mondiaux, concède le designer, mais elle rappelle que notre relation quotidienne et actuelle à l’énergie est une <em>« illusion insoutenable »</em>. Alors que la diminution des ressources naturelles nous pousse à inventer toujours de nouvelles solutions d’extraction, la pile à gravité nous invite à une nouvelle relation à l’énergie, plus responsable. La banalité de la prise électrique et des interrupteurs nous masquent les infrastructures d’exploitation et la destruction environnementale que nous avons mises en place, et que nous utilisons sans nous rendre compte de leur impact. </p>

  517. 

  518. <p><em>« Le design influence le désir. Si dans le passé, le design a été utilisé pour encourager la consommation, pour rendre les biens de consommation désirables, nous devons à l’avenir faire appel au design pour lutter contre nos désirs. »</em> Nous devons ajuster la portée de notre consommation. Reconstruire le design, re-contraindre le design, c’est reconstruire et re-contraindre le temps. </p>

  519. 

  520. <p>Et Auger de conclure en invitant les designers à contester les structures de pouvoir qui exploitent le potentiel du design. Il faut utiliser le design pour inverser ce qu’affirmait le banquier Paul Mazur de Lehman Brothers en 1927 quand il proclamait que les désirs de l’homme doivent éclipser ses besoins. C’est l’inverse dont nous avons besoin. Il nous faut travailler à trouver des moyens désirables pour satisfaire nos besoins. </p>

  521. 

  522. <p>Hubert Guillaud</p>

  523.   </article>

  524. </section>

  525. 

  526. 

  527. <nav id="jumpto">

  528.   <p>

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

  530.     <a href="http://www.internetactu.net/2018/05/07/re-contraindre-le-design/">Source originale</a> |

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

  532.   </p>

  533. </nav>

  534. 

  535. <footer>

  536.   <div>

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

  538.     <p>

  539.       Bonjour/Hi!

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

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

  542.     </p>

  543.     <p>

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

  545.     </p>

  546.     

  547.     <p>

  548.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  565.     </p>

  566.     <p>

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

  568.     </p>

  569.     <p>

  570.       Je ne traque pas ta navigation mais mon

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

  572.       conserve des logs d’accès.

  573.     </p>

  574.   </div>

  575. </footer>

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

  577.   ;(_ => {

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

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

  580.       e.preventDefault()

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

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

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

  584.     })

  585.   })()

  586. </script>