davidbgk
/
larlet-fr-david
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
473 Commits
1 Branch
Struktur: 36ba1be3cf
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „36ba1be3cf“
${ noResults }
larlet-fr-david/david/blog/2017/donnees-communs/index.html

index.html 35KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831 
  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>Des données aux communs — 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/2017/donnees-communs/">

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

  31.   <meta name="description" content="La libération d’une donnée est un lâcher-prise progressif." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="La libération d’une donnée est un lâcher-prise progressif." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Des données aux communs" />

  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/2017/donnees-communs/" />

  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/blog/2017/donnees-communs.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.   Des données aux communs

  468.   <time>Publié le 8 mars 2017</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Le numérique auquel nous aspirons est différent. Il ne menace ni l’économie, ni l’environnement, ni la démocratie, ni la culture. Il permet au contraire de renouveler ces domaines dans leurs fondements par une perspective centrée sur l’humain. Il protège nos libertés tout en nous donnant des moyens puissants d’exercer nos droits. Il ne concentre pas de nouveaux pouvoirs ainsi que les ressources entre les mains d’un petit nombre. Il contribue plutôt à redistribuer équitablement les pouvoirs et les richesses d’une manière durable. Il pose que nous sommes tous égaux et interdépendants, il vise à restaurer notre relation au monde et en prendre soin dans une démocratie inclusive.</p>

  473. <p>Ce numérique auquel nous aspirons est un commun, une ressource partagée par les communautés qui se mobilisent et s’organisent pour la produire, la créer, la protéger, la valoriser au bénéfice de toutes et de tous. Ce numérique existe et prospère. Pour des communautés engagées dans le partage des savoirs co-créés, ces pratiques issues du modèle des communaux trouvent, par l’entremise du numérique, un territoire qui n’aura jamais été aussi vaste. Le domaine public, les logiciels libres sont des exemples de communs de la connaissance, de communs numériques, qui sont vitaux pour le travail, l’éducation, la science, la culture, la liberté d’expression aujourd’hui. De surcroit, ce numérique constitue la dorsale d’une économie collaborative en plein essor mobilisant les ressources, le talent et l’énergie des citoyen.ne.s dans la concrétisation de projets inédits et porteurs.</p>

  474. <p>Nous aspirons à voir ce numérique humaniste reconnu et soutenu.</p>

  475. <p><cite><em><a href="http://www.savoirscom1.info/2017/03/savoirscom1-salue-la-declaration-des-communs-numeriques-au-quebec/">SavoirsCom1 salue la « Déclaration des communs numériques » au Québec</a></em> (<a href="/david/cache/d99b422f8d9c986fc88ad37da8af084d/">cache</a>)</cite></p>

  476. </blockquote>

  477. <p><em>Ceci est un résumé de mon intervention à <a href="https://confoo.ca">Confoo</a>, il s’agit même d’une suite de <a href="/david/blog/2016/opendata-liens-casses/">ce que j’ai pu partager l’année dernière autour de l’OpenData</a>. Le déroulé était ponctué de fragments de Python que je n’ai pas reproduits ici mais que vous pourrez retrouver <a href="/david/talks/#35">sur le support</a>.</em></p>

  478. <h2>1. Données ouvertes</h2>

  479. <p><a href="http://www.data.gouv.fr/fr/">Data.gouv.fr</a> est la plateforme ouverte des données publiques françaises. Il s’agit d’un moyen de publier ses données brutes et de consulter celles des autres. Elle s’adresse aussi bien aux ministères et collectivités publiques qu’aux citoyens ou aux entreprises et associations. Elle est ouverte à tous et la modération se fait a posteriori. Elle est gratuite et tous les développements sont publiés en open-source. D’autres pays réutilisent le code de la plateforme.</p>

  480. <p>Je participe à son évolution depuis bientôt deux ans.</p>

  481. <h2>2. Données exploitables</h2>

  482. <p>La publication des données n’est que la première étape d’un long processus d’appropriation par les personnes intéressées. Un format de fichier propriétaire ou un encoding non spécifié et cela devient plus compliqué de plonger le nez dedans. Une archive corrompue ou un site inaccessible et l’on arrive rapidement à une frustration ainsi qu’une perte de confiance qui seront difficiles à aller récupérer.</p>

  483. <p>Les discussions permettent aujourd’hui d’exprimer ces freins de la part des consommateur potentiels et d’engager une discussion avec les producteurs de la donnée.</p>

  484. <h2>3. Données compréhensibles</h2>

  485. <p>Une fois le fichier ouvert, il s’agit de comprendre ce qu’il y a dedans. C’est loin d’être intuitif dans la majorité des cas s’il n’y a pas une documentation exhaustive associée à la donnée. La description des jeux de données et de leurs ressources permet à ceux qui soumettent leurs données de préciser à quoi correspondent les termes métier par exemple ou les intitulés de colonnes peu explicites.</p>

  486. <p>Il est parfois pertinent de proposer une <a href="https://pachevalier.github.io/documentation_sirene/">interface simplifiée</a> à une documentation PDF de plusieurs centaines de pages.</p>

  487. <h2>4. Données interopérables</h2>

  488. <p>Même documentées, certaines données sont difficiles à appréhender du fait de leur complexité ou de leur taille. Retraiter cette donnée brute en aval est ce que j’ai tenté de faire avec <a href="https://github.com/etalab/geohisto/">GeoHisto</a> pour le <a href="https://www.insee.fr/fr/information/2114819#titre-bloc-10">diff du Code Officiel Géographique</a> de l’INSEE ou avec <a href="https://github.com/etalab/sirene">Ulysse</a> pour traiter le <a href="https://www.data.gouv.fr/fr/datasets/base-sirene-des-entreprises-et-de-leurs-etablissements-siren-siret/">fichier volumineux du SIRENE</a>.</p>

  489. <p>Il ne s’agit aucunement de remplacer les données initialement publiées mais de proposer des outils et éventuellement leurs résultats pour être à même de les exploiter plus rapidement.</p>

  490. <h2>5. Données requêtables</h2>

  491. <p>Par exemple, l’une des problématiques à laquelle nous sommes confrontés est de pouvoir découper des fichiers CSV à la volée en fonction de certains paramètres. Un petit <a href="https://github.com/etalab/secateur">sécateur</a> nous permettrait de réaliser ceci de manière asynchrone et de proposer des liens vers des sous-ensembles propres à des territoires par exemple.</p>

  492. <p>Lorsque le fichier est trop volumineux, il est possible de <a href="https://github.com/etalab/sirene#tools">fournir les outils</a> pour réaliser cela de manière relativement performante.</p>

  493. <h2>6. Données conviviales</h2>

  494. <p>Parfois le simple fait de <a href="https://github.com/etalab/geohisto/blob/master/exports/towns/towns_head.csv">proposer un sous-ensemble</a> des données générées facilite leur représentation et donc leur compréhension. C’est une suite de petits détails qui semblent insignifiants mais qui une fois mis bout à bout montrent que vous prenez soin de vos données et de leurs utilisateurs potentiels.</p>

  495. <p>Encore une fois, la <a href="https://github.com/etalab/geohisto/tree/master/exports/towns#history-of-towns">documentation est critique</a> pour encourager l’adoption et la réutilisation. Fournir des exemples de réutilisations réalisés ou imaginés peut également aider. Expliquer ce qui ne peut pas être fait avec est encore mieux en documentant par exemple les précédentes tentatives qui ont échouées. De même qu’il peut être pertinent de décrire la façon dont les données sources sont générées pour en comprendre les contraintes.</p>

  496. <h2>7. Données résilientes</h2>

  497. <p>La rapidité avec laquelle la Maison Blanche a <a href="https://twitter.com/denormalize/status/831581871230193664">vidé son portail</a> opendata <a href="https://www.meritalk.com/articles/white-house-open-data-disappears-transparency-donald-trump-sunlight-foundation/">soulève forcément des questions</a> (<a href="/david/cache/0a5a968deddfd30e2fbaf8ac8c2c98d5/">cache</a>) lorsqu’on a en charge un tel portail dans un pays qui pourrait prochainement devenir tout aussi totalitaire. L’hébergement des données en utilisant un outil décentralisé comme <code>git</code> permet de les répliquer (et de les enrichir) à l’infini tout en conservant l’historique des modifications apportées.</p>

  498. <p>Il y aurait beaucoup à faire à partir de <a href="https://git-lfs.github.com/">git-lfs</a> ou <a href="https://datproject.org/">dat</a> par exemple. Je ne suis pas loin de prendre le temps de faire ça en tant que citoyen <a href="https://www.data.gouv.fr/fr/apidoc/">à partir de l’API</a>.</p>

  499. <h2>8. Données pérennes</h2>

  500. <p>Les problématiques liées à l’historique sont intéressantes car l’on peut distinguer les versions de la donnée brute et celles des sujets qu’elle traite. Je me suis par exemple focalisé sur ce second point avec <a href="https://github.com/etalab/geohisto">GeoHisto</a> et l’évolution des communes ainsi qu’avec l’<a href="https://github.com/etalab/sirene#dealing-with-history-optional">historique des entreprises</a> du fichier SIRENE. Il s’agit d’un angle d’attaque qui se focalise sur une exploitation particulière des données, celle de travailler sur des versions/diffs pour une commune ou une entreprise précise.</p>

  501. <p>Dans le <a href="https://github.com/etalab/geohisto/tree/master/exports/counties">cas des départements</a>, cela m’a permis de revoir mon Histoire d’une manière pratique et assez ludique.</p>

  502. <h2>9. Gouvernance ouverte</h2>

  503. <p>Il ne s’agit pas de s’en tenir à publier des données et à les rendre utilisables mais d’être à l’écoute de la communauté des réutilisateurs pour l’améliorer. Aussi bien dans le fond que dans la forme, il est difficile de savoir <em>a priori</em> ce qui va être pertinent pour un type de données. Prendre en compte les retours dans une boucle de rétro-action vertueuse constitue le graal de la donnée ouverte.</p>

  504. <p>Avoir un lieu d’expression et de décision qui soit documenté et ouvert à tous permet de fédérer une communauté autour d’un besoin et d’itérer, aussi bien sur le plan technique que politique.</p>

  505. <h2>10. Biens communs</h2>

  506. <p>Au même titre que la libération du code, au début on souhaite garder le contrôle et nombreux sont les projets open-source qui ne dépassent pas cette étape. Puis l’on s’ouvre à l’autre, à ses différences de points de vues et d’expériences et on prend le temps de l’écouter pour améliorer le produit. Et enfin on s’en remet à l’intelligence collective de la communauté pour continuer d’avancer et alors seulement la résultante prend vie.</p>

  507. <p><strong>La libération d’une donnée est un lâcher-prise progressif.</strong></p>

  508. <p>Un bien ne peut se transformer en commun sans que son initiateur dépasse son propre ego et accepte les divergences de la communauté qui vient itérativement polliniser cette production.</p>

  509. <h2>Administration ?</h2>

  510. <p>Le rôle de l’État dans cette démarche n’est plus d’administrer mais de mettre en relation des personnes autour de la donnée pour faciliter la production d’externalités positives. La finalité n’étant pas le <em>bien</em> commun en lui-même mais le <em>faire</em> en commun qui nous permet de <em>vivre</em> en commun.</p>

  511. <blockquote>

  512. <p>Je pense pour ma part que nous pouvons opposer à ces deux options un État qui serait au service des communs, où les communs seraient le moyen de créer de la valeur pour les citoyens. Cet État serait centré sur les citoyens, son rôle serait de faciliter et de responsabiliser ; il serait au service des citoyens et c’est ainsi qu’il se percevrait.</p>

  513. <p><cite><em><a href="http://www.greeneuropeanjournal.eu/confrontation-constructive-ou-tension-constructive-letat-et-les-communs/">Confrontation Constructive ou Tension Constructive - l’État et les Communs</a></em> (<a href="/david/cache/2ec56f6dca4493e4dbd463332ef518aa/">cache</a>)</cite></p>

  514. </blockquote>

  515. <p><em>Il y avait une dizaine de personnes durant la session et voici <a href="/static/david/blog/donnees-communs-retours.pdf">les retours</a> proposés par Confoo dans l’heure qui suit (!) par email.</em></p>

  516. </article>

  517. 

  518. 

  519.   <figure class="image" property="schema:image">

  520.     <img src="/static/david/blog/2017/donnees-communs.jpg" alt="" />

  521.   </figure>

  522. 

  523. 

  524. 

  525. <nav id="jumpto">

  526.   <p>

  527.     <a rel=prev href="/david/blog/2017/web-developer/">← Web developer</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2017/micro-cultures-governance/">Micro-cultures and governance →</a>

  528.   </p>

  529. </nav>

  530. 

  531. <footer>

  532.   <div>

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

  534.     <p>

  535.       Bonjour/Hi!

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

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

  538.     </p>

  539.     <p>

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

  541.     </p>

  542. 

  543.       <p>

  544.         Les dernières publications hebdomadaires sont :

  545.       </p>

  546.       <ul class="with_columns">

  547. 

  548.           <li>

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

  550.           </li>

  551. 

  552.           <li>

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

  554.           </li>

  555. 

  556.           <li>

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

  558.           </li>

  559. 

  560.           <li>

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

  562.           </li>

  563. 

  564.           <li>

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

  566.           </li>

  567. 

  568.           <li>

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

  570.           </li>

  571. 

  572.           <li>

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

  574.           </li>

  575. 

  576.           <li>

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

  578.           </li>

  579. 

  580.           <li>

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

  582.           </li>

  583. 

  584.           <li>

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

  586.           </li>

  587. 

  588.           <li>

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

  590.           </li>

  591. 

  592.           <li>

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

  594.           </li>

  595. 

  596.           <li>

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

  598.           </li>

  599. 

  600.           <li>

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

  602.           </li>

  603. 

  604.           <li>

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

  606.           </li>

  607. 

  608.           <li>

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

  610.           </li>

  611. 

  612.           <li>

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

  614.           </li>

  615. 

  616.           <li>

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

  618.           </li>

  619. 

  620.           <li>

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

  622.           </li>

  623. 

  624.           <li>

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

  626.           </li>

  627. 

  628.           <li>

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

  630.           </li>

  631. 

  632.           <li>

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

  634.           </li>

  635. 

  636.           <li>

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

  638.           </li>

  639. 

  640.           <li>

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

  642.           </li>

  643. 

  644.           <li>

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

  646.           </li>

  647. 

  648.           <li>

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

  650.           </li>

  651. 

  652.           <li>

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

  654.           </li>

  655. 

  656.           <li>

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

  658.           </li>

  659. 

  660.           <li>

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

  662.           </li>

  663. 

  664.           <li>

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

  666.           </li>

  667. 

  668.           <li>

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

  670.           </li>

  671. 

  672.           <li>

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

  674.           </li>

  675. 

  676.           <li>

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

  678.           </li>

  679. 

  680.           <li>

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

  682.           </li>

  683. 

  684.           <li>

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

  686.           </li>

  687. 

  688.           <li>

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

  690.           </li>

  691. 

  692.           <li>

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

  694.           </li>

  695. 

  696.           <li>

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

  698.           </li>

  699. 

  700.           <li>

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

  702.           </li>

  703. 

  704.           <li>

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

  706.           </li>

  707. 

  708.           <li>

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

  710.           </li>

  711. 

  712.           <li>

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

  714.           </li>

  715. 

  716.           <li>

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

  718.           </li>

  719. 

  720.           <li>

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

  722.           </li>

  723. 

  724.           <li>

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

  726.           </li>

  727. 

  728.           <li>

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

  730.           </li>

  731. 

  732.           <li>

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

  734.           </li>

  735. 

  736.           <li>

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

  738.           </li>

  739. 

  740.           <li>

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

  742.           </li>

  743. 

  744.       </ul>

  745. 

  746.     <p>

  747.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  764.     </p>

  765.     <p>

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

  767.     </p>

  768.     <p>

  769.       Je ne traque pas ta navigation mais mon

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

  771.       conserve des logs d’accès.

  772.     </p>

  773.   </div>

  774. </footer>

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

  776.   ;(_ => {

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

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

  779.       e.preventDefault()

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

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

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

  783.     })

  784.   })()

  785. </script>

  786. 

  787.   <script>

  788.   /* Service workers */

  789.   if (navigator.serviceWorker) {

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

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

  792.       function sendLinks (selector) {

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

  794.           return link.getAttribute('href')

  795.         })

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

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

  798.       }

  799.       navigator.serviceWorker.getRegistration()

  800.         .then(function (registration) {

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

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

  803.               .then(navigator.serviceWorker.ready)

  804.               .then(function () {

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

  806.               })

  807.               .catch(console.error.bind(console))

  808.           } else {

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

  810.             sendLinks(selector)

  811.           }

  812.         })

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

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

  815.         sendLinks(selector)

  816.       })

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

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

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

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

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

  822. 

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

  824. 

  825.         }

  826.       })

  827.     })

  828.   } else {

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

  830.   }

  831. </script>