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

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620 
  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>Et si nous fossilisions nos données ? (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://strabic.fr/Et-si-nous-fossilisions-nos-donnees">

  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.   Et si nous fossilisions nos données ? (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://strabic.fr/Et-si-nous-fossilisions-nos-donnees">Source originale du contenu</a></h3>

  463.     <div class="chapo"><p>Que ce soit à la surface d’un disque dur ou dans la mémoire d’un serveur web, nos données semblent volatiles et désincarnées. Est-il possible d’imaginer des entités qui représentent ces données à la fois visuellement et de façon physique ? C’est à cette question que se sont attelés les participants du workshop proposé par <a href="http://www.stereolux.org" class="spip_out" rel="external">Stereolux</a> et mené par le <a href="http://www.chevalvert.fr" class="spip_out" rel="external">studio Chevalvert</a> en mars dernier.</p></div>

  464. 

  465. <p>Durant trois jours, les participants (des étudiants de DSAA en design graphique, des artistes, des designers) ont dû concevoir, développer et “fossiliser” un système graphique à partir de données issues de capteurs (son, chaleur, pouls, etc.) ou d’une source extérieure. Le passage entre le bit et l’atome peut s’apparenter au processus de fossilisation d’un organisme vivant. Cette empreinte matérielle témoigne de l’évolution d’un signe graphique au contact des capteurs et cela pour des centaines d’années.</p>

  466. 

  467. <p>La variété des projets présentés ci-dessous témoigne de la subjectivité de chaque participant face à ses données et son processus de fossilisation.</p>

  468. 

  469. <p><br class="autobr"/>

  470. </p>

  471. 

  472. <p><span class="spip_document_6531 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-4_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  473. <span class="spip_document_6532 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-3_14.56.05.jpg" alt=""/></span></p>

  474. 

  475. <p>« L’idée initiale ne pouvant être réalisée pour des raison de sécurité (corrompre la surface d’un disque vinyle au moyen d’une gravure au laser), la proposition a ainsi changé de support passant du vinyle au plexiglas. J’ai repris la forme de la spirale pour représenter l’amplitude sonore d’un titre et la première découpe ratée a mis en évidence l’élasticité du matériau qui est alors exploitée pour mettre en volume l’ensemble des titres d’un album. »</p>

  476. 

  477. <p><br class="autobr"/>

  478. </p>

  479. 

  480. <p><span class="spip_document_6552 spip_documents"><img src="http://strabic.fr/IMG/jpg/_1040482.jpg" alt=""/></span><br class="autobr"/>

  481. <span class="spip_document_6536 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-36_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  482. <span class="spip_document_6533 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-37_14.56.05.jpg" alt=""/></span></p>

  483. 

  484. <p>« Pour mon projet, j’ai demandé à plusieurs participants du workshop de se soumettre à une série d’expérimentations liées à la mesure de leurs corps. Chaque expérimentation a eu lieu 10 fois. Les valeurs captées ont été représentées et superposées les unes sur les autres de manière à afficher une moyenne générale. Le premier test consistait à souffler le plus fort possible sur le capteur de flexion. Le second à pincer le capteur de pression entre son index et son pouce également le plus fort possible. Enfin, le dernier, à utiliser son souffle pour faire monter le plus haut possible le capteur d’humidité en 5 secondes. <br class="autobr"/>

  485. Les résultats de ces expériences ont ensuite été fossilisés dans des paysages filaires grâce à des programmes très spécifiques sur du plexiglas opaque noir. Ils témoignent des capacités et des efforts fournis par ces personnes à un moment précis. Celui-ci est inscrit au bas de chaque fossile. »</p>

  486. 

  487. <p><br class="autobr"/>

  488. </p>

  489. 

  490. <p><span class="spip_document_6537 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-26_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  491. <span class="spip_document_6553 spip_documents"><img src="http://strabic.fr/IMG/jpg/2016-04-18-1.jpg" alt=""/></span><br class="autobr"/>

  492. <span class="spip_document_6554 spip_documents"><img src="http://strabic.fr/IMG/jpg/2016-04-18.jpg" alt=""/></span></p>

  493. 

  494. <p>« Dans un espace donné, les variations du son et de la lumière sont importantes. C’est ce que j’ai voulu montrer et tester durant ce workshop. Chaque élément représente une minute, la courbe simple la variation de la lumière et les ondulations le son. Ces modules nous présentent "la vie" sonore et lumineuse à un instant T du lieu. Découpés dans du plexiglas, ils permettent de jouer avec la lumière et de se superposer. Empilés, il reflètent une journée entière et donnent une idée globale de l’activité. Utiliser ce principe dans une rue, un quartier ou une ville pourrait donner des paysages de vie à contempler ou à interpréter. »</p>

  495. 

  496. <p><br class="autobr"/>

  497. </p>

  498. 

  499. <p><span class="spip_document_6556 spip_documents"><img src="http://strabic.fr/IMG/jpg/p1130914.jpg" alt=""/></span><br class="autobr"/>

  500. <span class="spip_document_6550 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-7_14.56.05.jpg" alt=""/></span></p>

  501. 

  502. <p>« <i>Jouer La Pluie</i> est un projet de data visualisation de la pluie dans l’estuaire de la Loire. Il propose de donner à l’objet numérique une nouvelle matière, via deux trames réalisées à partir de points et d’ellipses. Il s’agit de retrouver une matérialité, une sensualité dans la visualisation de ces données, non seulement dans la création d’un objet physique et, avant cela, à l’écran. »</p>

  503. 

  504. <p><br class="autobr"/>

  505. </p>

  506. 

  507. <p><span class="spip_document_6557 spip_documents"><img src="http://strabic.fr/IMG/jpg/img_8751.jpg" alt=""/></span><br class="autobr"/>

  508. <span class="spip_document_6540 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-40_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  509. <span class="spip_document_6541 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-41_14.56.05.jpg" alt=""/></span></p>

  510. 

  511. <p>« Ce projet découle d’une approche expérimentale de la matière, mêlant génération de motifs et impression laser. L’esthétique minérale de cette impression m’a menée à inventer une narration autour de l’évolution de la surface de l’Arctique en produisant plusieurs représentations de l’évolution de celle-ci entre 2006 et 2015. »</p>

  512. 

  513. <p><br class="autobr"/>

  514. </p>

  515. 

  516. <p><span class="spip_document_6542 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-6_14.56.05.jpg" alt=""/></span></p>

  517. 

  518. <p>« J’ai cherché à créer une promenade dans la ville de Nantes où des symboles, de petits totems, viendraient indiquer un parcours à la manière des balises des sentiers de randonnée, des inukshuks ainsi que du travail de Mathieu Lehanneur, <a href="http://www.mathieulehanneur.fr/projet.php?projet=87" class="spip_out" rel="external"><i>l’Âge du monde</i></a>. Créer des représentations graphiques à partir de données de promeneurs (km, calories, temps de la promenade, géolocalisation, etc.). »</p>

  519. 

  520. <p><br class="autobr"/>

  521. </p>

  522. 

  523. <div class="marginalia"> <div class="marginalia__body">

  524. <p><span><strong>Andréa Dumont <br/>et Adam Duwyn</strong></span></p>

  525. </div></div>

  526. 

  527. <p><span class="spip_document_6545 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-25_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  528. <span class="spip_document_6544 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-10_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  529. <span class="spip_document_6555 spip_documents"><img src="http://strabic.fr/IMG/jpg/ad_stereosignes_19.jpg" alt=""/></span></p>

  530. 

  531. <p>« Le Passage du Gois est une chaussée submersible située dans la baie de Bourgneuf. Il relie l’île de Noirmoutier au continent, en Vendée. Les horaires où le passage est possible, lorsque la marée est au plus bas, sont disponibles sur un site internet. Nous avons voulu donner à ces données – horaires de passage (jours et minutes) du Gois – une forme circulaire. La forme à l’intérieur du cercle est composée par les coefficients de marée correspondants aux dates données. La composition finale représente la data visualisation des horaires de passage possible lors du mois de mars. L’idée est de reproduire ce schéma sur les 12 mois de l’année. »</p>

  532. 

  533. <p><br class="autobr"/>

  534. </p>

  535. 

  536. <div class="marginalia"> <div class="marginalia__body">

  537. <p><span><strong>Estelle Joly et <br/>Anaëlle Couëllan</strong></span></p>

  538. </div></div>

  539. 

  540. <p><span class="spip_document_6534 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-12_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  541. <span class="spip_document_6546 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-1_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  542. <span class="spip_document_6543 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-16_14.56.05.jpg" alt=""/></span></p>

  543. 

  544. <p>« Notre travail s’est focalisé sur le capteur de pression et l’influence des données récoltées sur la génération d’une forme. La transposition de la pression exercée par les doigts sur le capteur durant un court instant se matérialise par une série de strates graphiques. Une fois gravées, ces strates acquièrent des qualités tactiles, physiques et digitales (terme à comprendre ici dans sa définition anatomique, liée au doigt). »</p>

  545. 

  546. <p><br class="autobr"/>

  547. </p>

  548. 

  549. <p><span class="spip_document_6547 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-18_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  550. <span class="spip_document_6549 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-23_14.56.05.jpg" alt=""/></span><br class="autobr"/>

  551. <span class="spip_document_6548 spip_documents"><img src="http://strabic.fr/IMG/jpg/chevalvert-stereosignes-20_14.56.05.jpg" alt=""/></span></p>

  552. 

  553. <p>« Issu d’un précédent projet permettant de générer un motif, ce projet est le résultat d’un début de prototypage. Les données des capteurs influencent ici la géométrie des motifs. Un travail a été entrepris sur le rapport entre matière industrielle (plexiglas) et une matière organique (bois). »</p>

  554. 

  555. <p><br class="autobr"/>

  556. </p>

  557.   </article>

  558. </section>

  559. 

  560. 

  561. <nav id="jumpto">

  562.   <p>

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

  564.     <a href="http://strabic.fr/Et-si-nous-fossilisions-nos-donnees">Source originale</a> |

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

  566.   </p>

  567. </nav>

  568. 

  569. <footer>

  570.   <div>

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

  572.     <p>

  573.       Bonjour/Hi!

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

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

  576.     </p>

  577.     <p>

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

  579.     </p>

  580.     

  581.     <p>

  582.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  599.     </p>

  600.     <p>

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

  602.     </p>

  603.     <p>

  604.       Je ne traque pas ta navigation mais mon

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

  606.       conserve des logs d’accès.

  607.     </p>

  608.   </div>

  609. </footer>

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

  611.   ;(_ => {

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

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

  614.       e.preventDefault()

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

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

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

  618.     })

  619.   })()

  620. </script>