davidbgk
/
larlet-fr-david
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
288 Révisions
1 Branche
Aborescence: 215e169fba
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '215e169fba'
${ noResults }
larlet-fr-david/david/blog/2013/opendata-citoyennete/index.html

index.html 27KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790 
  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>OpenData et citoyenneté — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

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

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2013/opendata-citoyennete/">

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

  31.   <meta name="description" content="De la même manière que l’Open-Source est de la solidarité entre développeurs, l’OpenData est de la solidarité entre acteurs de la puissance publique." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="De la même manière que l’Open-Source est de la solidarité entre développeurs, l’OpenData est de la solidarité entre acteurs de la puissance publique." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="OpenData et citoyenneté" />

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

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

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2013/opendata-citoyennete/" />

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

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

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/david-larlet-avatar-thumbnail.jpg" />

  41. 

  42. 

  43. <style>

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

  45. html, body, div, span,

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

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

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

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

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

  51. fieldset, form, label, legend,

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

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

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

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

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

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

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

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

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

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

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   OpenData et citoyenneté

  468.   <time>Publié le 27 décembre 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Rien de nouveau sous le soleil. L’innovation s’emballe parfois et on emballe tout avec et ... on trébuche. Exercice critique de notre complice es pop-up, Philippe Gargov. L’open data est devenue la tarte à la crème du numérique urbain, d’accord. En fait, nous sommes bien en-deça des services et des urbanités que la donnée peut produire, et ... très en retard sur cette promesse. Mille fois d’accord avec Jérôme Denis : "on aurait tort de penser que nous sommes sur une feuille blanche." c’est d’ailleurs un péché congénital pour le numérique en général.</p>

  473. <p><cite><a href="http://www.groupechronos.org/blog/heurs-et-malheurs-de-l-open-data"><em>Heurs et malheurs de l’open data</em></a></cite></p>

  474. </blockquote>

  475. <p>De la même manière que l’<a href="/david/blog/2013/open-source-solidarite/">Open-Source est de la solidarité entre développeurs</a>, <strong>l’OpenData est de la solidarité entre acteurs de la puissance publique.</strong> (Enfin !) arriver à échanger des données entre différentes institutions d’un même pays. Pas plus. Ses défenseurs aimeraient que cela se transforme en quelque chose de plus grand avec une implication citoyenne et le parallèle avec le Logiciel Libre est assez intéressant là-dessus mais on en est assez loin. Pourquoi ? Après tout l’OpenData devrait raviver le citoyen qui sommeille (parfois profondément) en chacun de nous.</p>

  476. <p>Premièrement, l’angle d’attaque est assez mauvais. <strong>Vouloir impliquer le citoyen en lui imposant de la matière première est une erreur stratégique qui restreint sa créativité.</strong> Ceci est confortable pour les institutions — et les politiques qui s’en servent pour orienter les débats — mais c’est contre-productif dans l’optique d’une réappropriation de sa citoyenneté. <a href="/david/blog/2013/confort-convivialite/">Le politique doit agir en facilitateur</a> et être à l’écoute du citoyen pour lui fournir les outils et les données <em>dont il a besoin</em>. Il faut se concentrer sur le fait de faire émerger ces besoins qui doivent anticiper la libération d’une quelconque donnée — qu’elle soit publique ou privée.</p>

  477. <p>D’un point de vue économique ensuite, passer par des <em>hackathons</em>, des <em>startup weekends</em> et autres <em>concours</em> ne mènera à rien. Il faudrait au contraire que des entreprises ayant une vision à moyen terme puissent créer de la valeur à partir de ces données. J’évoquais par exemple <a href="http://www.christian-faure.net/2009/03/14/la-proletarisation-dans-les-societes-informatiques/#comment-20895">il y a 5 ans chez Christian</a> l’idée d’avoir des Société de Services en Données Libres (SSDL) comme il a pu en exister pour le logiciel libre. <strong>Cela implique d’avoir du dialogue entre ces entreprises et les institutions sus-citées.</strong> Cela implique aussi d’avoir des aides pour ces entreprises aux statuts particuliers qui vont faire le lien entre le citoyen et les données. Le <em>citoyen-développeur</em> est une utopie qui a la vie dure.</p>

  478. <p>Enfin, il y a une réflexion à mener sur l’utilité des données actuellement libérées quitte à calculer leur <a href="https://en.wikipedia.org/wiki/Social_Return_on_Investment">retour sur investissement social</a> pour acter d’un échec et aller de l’avant avec d’autres méthodes. <a href="/david/blog/2013/opendata-culture/">Des outils qui soient adaptés au Web.</a> <strong>Une vision qui soit co-construite avec le citoyen.</strong> L’innovation ne viendra pas forcément du résultat produit mais de la collaboration qui devrait émerger entre les différents acteurs.</p>

  479. </article>

  480. 

  481. 

  482. 

  483. 

  484. <nav id="jumpto">

  485.   <p>

  486.     <a rel=prev href="/david/blog/2013/graphes-discussions/">← Graphes et discussions</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/emotions-angoisses/">Emotions et angoisses →</a>

  487.   </p>

  488. </nav>

  489. 

  490. <footer>

  491.   <div>

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

  493.     <p>

  494.       Bonjour/Hi!

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

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

  497.     </p>

  498.     <p>

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

  500.     </p>

  501. 

  502.       <p>

  503.         Les dernières publications hebdomadaires sont :

  504.       </p>

  505.       <ul class="with_columns">

  506. 

  507.           <li>

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

  509.           </li>

  510. 

  511.           <li>

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

  513.           </li>

  514. 

  515.           <li>

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

  517.           </li>

  518. 

  519.           <li>

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

  521.           </li>

  522. 

  523.           <li>

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

  525.           </li>

  526. 

  527.           <li>

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

  529.           </li>

  530. 

  531.           <li>

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

  533.           </li>

  534. 

  535.           <li>

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

  537.           </li>

  538. 

  539.           <li>

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

  541.           </li>

  542. 

  543.           <li>

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

  545.           </li>

  546. 

  547.           <li>

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

  549.           </li>

  550. 

  551.           <li>

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

  553.           </li>

  554. 

  555.           <li>

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

  557.           </li>

  558. 

  559.           <li>

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

  561.           </li>

  562. 

  563.           <li>

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

  565.           </li>

  566. 

  567.           <li>

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

  569.           </li>

  570. 

  571.           <li>

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

  573.           </li>

  574. 

  575.           <li>

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

  577.           </li>

  578. 

  579.           <li>

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

  581.           </li>

  582. 

  583.           <li>

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

  585.           </li>

  586. 

  587.           <li>

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

  589.           </li>

  590. 

  591.           <li>

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

  593.           </li>

  594. 

  595.           <li>

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

  597.           </li>

  598. 

  599.           <li>

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

  601.           </li>

  602. 

  603.           <li>

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

  605.           </li>

  606. 

  607.           <li>

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

  609.           </li>

  610. 

  611.           <li>

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

  613.           </li>

  614. 

  615.           <li>

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

  617.           </li>

  618. 

  619.           <li>

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

  621.           </li>

  622. 

  623.           <li>

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

  625.           </li>

  626. 

  627.           <li>

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

  629.           </li>

  630. 

  631.           <li>

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

  633.           </li>

  634. 

  635.           <li>

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

  637.           </li>

  638. 

  639.           <li>

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

  641.           </li>

  642. 

  643.           <li>

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

  645.           </li>

  646. 

  647.           <li>

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

  649.           </li>

  650. 

  651.           <li>

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

  653.           </li>

  654. 

  655.           <li>

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

  657.           </li>

  658. 

  659.           <li>

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

  661.           </li>

  662. 

  663.           <li>

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

  665.           </li>

  666. 

  667.           <li>

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

  669.           </li>

  670. 

  671.           <li>

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

  673.           </li>

  674. 

  675.           <li>

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

  677.           </li>

  678. 

  679.           <li>

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

  681.           </li>

  682. 

  683.           <li>

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

  685.           </li>

  686. 

  687.           <li>

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

  689.           </li>

  690. 

  691.           <li>

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

  693.           </li>

  694. 

  695.           <li>

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

  697.           </li>

  698. 

  699.           <li>

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

  701.           </li>

  702. 

  703.       </ul>

  704. 

  705.     <p>

  706.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  723.     </p>

  724.     <p>

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

  726.     </p>

  727.     <p>

  728.       Je ne traque pas ta navigation mais mon

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

  730.       conserve des logs d’accès.

  731.     </p>

  732.   </div>

  733. </footer>

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

  735.   ;(_ => {

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

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

  738.       e.preventDefault()

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

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

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

  742.     })

  743.   })()

  744. </script>

  745. 

  746.   <script>

  747.   /* Service workers */

  748.   if (navigator.serviceWorker) {

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

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

  751.       function sendLinks (selector) {

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

  753.           return link.getAttribute('href')

  754.         })

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

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

  757.       }

  758.       navigator.serviceWorker.getRegistration()

  759.         .then(function (registration) {

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

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

  762.               .then(navigator.serviceWorker.ready)

  763.               .then(function () {

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

  765.               })

  766.               .catch(console.error.bind(console))

  767.           } else {

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

  769.             sendLinks(selector)

  770.           }

  771.         })

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

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

  774.         sendLinks(selector)

  775.       })

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

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

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

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

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

  781. 

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

  783. 

  784.         }

  785.       })

  786.     })

  787.   } else {

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

  789.   }

  790. </script>