davidbgk
/
larlet-fr-david-cache
ウォッチ 1
スター 0
フォーク 0
コード リリース 0 アクティビティ
A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
224 コミット
1 ブランチ
ツリー: f8f4c58548
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'f8f4c58548' から
${ noResults }
larlet-fr-david-cache/cache/75c259bed30f5a31bf42e01f5d1.../index.html

index.html 31KB
Raw Blame 履歴

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607 
  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>Let’s Move Beyond Open Data Portals (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="https://medium.com/civic-technology/rethinking-data-portals-30b66f00585d">

  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.   Let’s Move Beyond Open Data Portals (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="https://medium.com/civic-technology/rethinking-data-portals-30b66f00585d">Source originale du contenu</a></h3>

  463.     <h4 name="5511" id="5511" class="graf--h4 graf--first"><strong class="markup--strong markup--h4-strong">Trend one. We’re moving from data to delivery.</strong></h4>

  464. 

  465. <p name="3d29" id="3d29" class="graf--p graf-after--h4">Let’s step back to about 2008. Many good government organizations were working on opening up data: lot’s of <a href="https://en.wikipedia.org/wiki/Freedom_of_Information_Act_%28United_States%29" data-href="https://en.wikipedia.org/wiki/Freedom_of_Information_Act_%28United_States%29" class="markup--anchor markup--p-anchor" rel="nofollow">FOIA</a> requests (which now I’ve had to deal with…), data scraping, etc. The premise: more <em class="markup--em markup--p-em">data</em> and more <em class="markup--em markup--p-em">transparency,</em> and so<em class="markup--em markup--p-em"> </em>better <em class="markup--em markup--p-em">accountability</em> and better <em class="markup--em markup--p-em">governance</em>.</p>

  466. 

  467. <p name="9505" id="9505" class="graf--p graf-after--p">That was 2008. Things started to change a little bit. Then we started to move into this idea of civic engagement, using technology for engagement. I’ll be honest: I haven’t seen too many of these platforms — <a href="http://nycchangebyus.tumblr.com/" data-href="http://nycchangebyus.tumblr.com/" class="markup--anchor markup--p-anchor" rel="nofollow">Change by Us</a>, IdeaScale, or even Google Moderator , etc — succeed; most have failed.</p>

  468. 

  469. <p name="76f9" id="76f9" class="graf--p graf-after--p">That was step two. Now I think we’re finally moving into this area of digital transformation, of using technology to actually change the way we do service delivery. Taking processes that were before offline and information that was before on paper, online and machine readable.</p>

  470. 

  471. <p name="5dfd" id="5dfd" class="graf--p graf-after--p"><a href="https://medium.com/@abhinemani/open-data-civic-engagement-and-delivery-28b990f321ce#.h1446cvnr" data-href="https://medium.com/@abhinemani/open-data-civic-engagement-and-delivery-28b990f321ce#.h1446cvnr" class="markup--anchor markup--p-anchor">The interesting thing about that is actually that leads to <em class="markup--em markup--p-em">better data.</em></a></p>

  472. 

  473. <blockquote name="2355" id="2355" class="graf--pullquote pullquote graf-after--p">Right now it takes 16 months to get official police records from the state,<strong class="markup--strong markup--pullquote-strong"> 16 months,</strong> because we have to send <em class="markup--em markup--pullquote-em">paper forms</em> to the state, they transcribe them and then send them back. The backlog is mind-numbing.</blockquote>

  474. 

  475. <p name="d9e5" id="d9e5" class="graf--p graf-after--pullquote">That’s not the right way to handle data — open or otherwise. Instead, a digital first strategy — eg no paper forms, just iPhones or iPads in the field — would lead to immediately accessible and usable (and hopefully open) data.</p>

  476. 

  477. <p name="b170" id="b170" class="graf--p graf-after--p">That’s trend one, is <em class="markup--em markup--p-em">this movement from </em><a href="https://medium.com/@abhinemani/open-data-civic-engagement-and-delivery-28b990f321ce#.h1446cvnr" data-href="https://medium.com/@abhinemani/open-data-civic-engagement-and-delivery-28b990f321ce#.h1446cvnr" class="markup--anchor markup--p-anchor"><em class="markup--em markup--p-em">data to services</em></a><em class="markup--em markup--p-em">.</em></p>

  478. 

  479. <h4 name="9723" id="9723" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Trend two is from one app to many apps</strong>.</h4>

  480. 

  481. <p name="6540" id="6540" class="graf--p graf-after--figure">A rather perceptive venture capitalist named <a href="http://allthingsd.com/20130529/mary-meekers-2013-internet-trends-deck-the-full-video/" data-href="http://allthingsd.com/20130529/mary-meekers-2013-internet-trends-deck-the-full-video/" class="markup--anchor markup--p-anchor" rel="nofollow">Mary Meeker</a> pens a must-read every year on internet trends. Recently, she noted that “<em class="markup--em markup--p-em">the web is splintering</em>.” Instead of just having one app to do everything, you in fact have multiple apps.</p>

  482. 

  483. <p name="b7ef" id="b7ef" class="graf--p graf-after--p">A good example of this is Foursquare. Beforehand you’d do everything in one app. Now there’s Foursquare and Swarm. Facebook has Messenger as a separate app. Google has like 17 different apps. You’re seeing this shift from just one specific application that does everything to many different applications designed for a particular experience.</p>

  484. 

  485. <blockquote name="fe29" id="fe29" class="graf--pullquote pullquote graf-after--p"><em class="markup--em markup--pullquote-em">Focus on a single, specific, and meaningful user experience, and build a beautiful interface simply for that.</em></blockquote>

  486. 

  487. <p name="73dd" id="73dd" class="graf--p graf-after--pullquote">That’s trend two.</p>

  488. 

  489. <h4 name="17e9" id="17e9" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Trend three is this notion of an architecture participation.</strong></h4>

  490. 

  491. <p name="100c" id="100c" class="graf--p graf-after--h4">What I like about this idea is that when you create web applications and create user experiences, you build the opportunity to get people to do more. You can up-sell them. We all know this. You see it every day when you go to Amazon or in a grocery store. Either when you’re checking out online or offline, you’re asked to pick up some else: a related book or a little bit of candy or a magazine (that you probably don’t need). They’re <em class="markup--em markup--p-em">up-selling</em> you. They’re asking you to do more.</p>

  492. 

  493. <p name="6990" id="6990" class="graf--p graf-after--p">There’s no reason we couldn’t apply this same strategy to government engagement and services. <a href="https://medium.com/civic-technology/government-is-what-you-make-of-it-d836a6a9353d" data-href="https://medium.com/civic-technology/government-is-what-you-make-of-it-d836a6a9353d" class="markup--anchor markup--p-anchor">Indeed it’s already happening</a>. What this requires, though, is thinking less about a specific, sole engagement with an user, but instead about a string of related, though distinct interactions, architected to maximize participation. <a href="https://medium.com/civic-technology/government-is-what-you-make-of-it-d836a6a9353d" data-href="https://medium.com/civic-technology/government-is-what-you-make-of-it-d836a6a9353d" class="markup--anchor markup--p-anchor"><em class="markup--em markup--p-em">It’s about erecting architectures of participation</em></a><em class="markup--em markup--p-em">.</em></p>

  494. 

  495. <h3 name="dbc0" id="dbc0" class="graf--h3 graf-after--p">Bringing it together</h3>

  496. 

  497. <ol class="postList"><li name="d884" id="d884" class="graf--li graf-after--h3">You’re seeing a movement from <em class="markup--em markup--li-em">data to delivery</em>.</li><li name="e5eb" id="e5eb" class="graf--li graf-after--li">You’re seeing the <em class="markup--em markup--li-em">web start to splinter </em>towards single-purpose apps.</li><li name="7d13" id="7d13" class="graf--li graf-after--li">You’re starting to see levels of engagement increasing through <em class="markup--em markup--li-em">architectures of participation</em>.</li></ol>

  498. 

  499. <p name="11c1" id="11c1" class="graf--p graf-after--li">Now you’re thinking, “Abhi, weren’t you going to be tell me that we should abandon data portals? Services, splintering apps, architectures…? What gives?”</p>

  500. 

  501. <blockquote name="2398" id="2398" class="graf--pullquote pullquote graf-after--p">At the core of all three trends is one basic notion: the web is moving away from building for one-size-fits-all towards designing for to-each-his/her-own — towards user-centric design. And we must do so for open data.</blockquote>

  502. 

  503. <p name="9ce4" id="9ce4" class="graf--p graf-after--pullquote">That’s the core notion here: a shift away from building <em class="markup--em markup--p-em">portals</em> towards designing for <em class="markup--em markup--p-em">people</em>, away from <em class="markup--em markup--p-em">unified</em> <em class="markup--em markup--p-em">platforms</em> and more towards <em class="markup--em markup--p-em">user-centric design</em>.</p>

  504. 

  505. <p name="698e" id="698e" class="graf--p graf-after--p">Then what do we do with data?</p>

  506. 

  507. <h4 name="fbf1" id="fbf1" class="graf--h4 graf-after--p">First and foremost I think you have to go where people are.</h4>

  508. 

  509. <p name="170c" id="170c" class="graf--p graf-after--h4">If you’ve every been to LA before — or even not — you may know that traffic is a <em class="markup--em markup--p-em">little</em> bit of a problem there. Just a bit. (That’s why I gave up my car.)</p>

  510. 

  511. <p name="d8c5" id="d8c5" class="graf--p graf-after--p">The city, as we all know, has information about street closures, public events — all the planned activities that’ll likely gum traffic. <strong class="markup--strong markup--p-strong">Well, beforehand we kept all the data to ourselves. </strong>Indeed, all this data was available on our GIS Hub, but sadly most of the city staff didn’t even know that — let alone the regular citizen. Fortunately, we eventually found it…</p>

  512. 

  513. <p name="f627" id="f627" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Now we actually give that directly to Waze, </strong>so they can reroute people dynamically. Indeed, this is a good open data story — taking the data to where people are —but there’s something more interesting: it’s a two-way street.</p>

  514. 

  515. <blockquote name="f56d" id="f56d" class="graf--pullquote pullquote graf-after--p">Not only does Waze now share pothole and road condition data it collects regularly through its app, they went one step further. They began to proactively collect and share data in the interest public safety.</blockquote>

  516. 

  517. <p name="03eb" id="03eb" class="graf--p graf-after--pullquote">Waze is giving the city data in return. Any time there’s a kidnapping or a hit and run, Waze will tell the users, saying, “This just happened. Do you have any intel/info?” Any time that there’s a kidnapping on Wilshire, Waze will actually ping you and say, “Hey, do you know what’s going on? Have you seen anybody? Do you know what’s happening?” Users can, in-app, report sightings directly, and immediately that data is sent to the LAPD. The news reported it as, “A Gift for Law Enforcement.”</p>

  518. 

  519. <h4 name="ffb0" id="ffb0" class="graf--h4 graf-after--figure">Two, I think we have to start thinking about data as content.</h4>

  520. 

  521. <p name="a59a" id="a59a" class="graf--p graf-after--h4">Anyone want to guess what the most popular data set for the City of Los Angeles is?</p>

  522. 

  523. <p name="9c90" id="9c90" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Immigration workshops</strong>.</p>

  524. 

  525. <p name="af44" id="af44" class="graf--p graf-after--figure">We collected information on accredited immigration workshops, and published it on the data portal; then we embedded that data <em class="markup--em markup--p-em">on the mayor’s website — </em>a website far, far more popular than data.lacity.org.</p>

  526. 

  527. <p name="17f7" id="17f7" class="graf--p graf-after--p">That’s moving data from the fringes into the center, from a niche site to the homepage. Naturally, there are political and organizational dynamics to work through — the IT or data organization often does not control digital content or strategy. But it’s a fight worth having. If we say as cities that open data matters, then it should matter enough to be featured across the city’s digital presence. <em class="markup--em markup--p-em">Open data ought to merit a few pixels off the portal.</em></p>

  528. 

  529. <h4 name="d236" id="d236" class="graf--h4 graf-after--p">Finally you have to take data offline.</h4>

  530. 

  531. <p name="d0d9" id="d0d9" class="graf--p graf-after--h4">An interesting thing that I learned when I was in LA is that there was a lot of interesting groups doing interesting work, but separately, even though they shared a common goal: using technology to serve the city they all loved. And to do so, using open civic data. But these efforts were too often disconnected. (Indeed, I found myself having the same conversation with different community leaders multiple times a week.)</p>

  532. 

  533. <p name="9ba9" id="9ba9" class="graf--p graf-after--p">What we decided to do there was very deeply commit to actually bringing these groups together, having them all start to talk to each other. We launched a program called #TechLA. We’ve had the biggest hackathon, two years in a row. The idea was that actually just by building a brand, just this identity, #TechLA, it actually helped these different groups come together in a way that they couldn’t have done on their own. That’s one of the core responsibilities and opportunities that we have as government officials, is that we actually can build a tent, we can actually have people come together.</p>

  534. 

  535. <blockquote name="614d" id="614d" class="graf--pullquote pullquote graf-after--p">And you can then take the data off of the portal, and put it directly into the hands of developers.</blockquote>

  536. 

  537. <p name="2235" id="2235" class="graf--p graf-after--pullquote">Here’s an example from the #TechLA event last year:</p>

  538. 

  539. <p name="ca6c" id="ca6c" class="graf--p graf-after--figure">They built an app that helped people find homeless shelters, and all the kids were in high school. You’re seeing people do really remarkable and special things.</p>

  540. 

  541. <p name="14f3" id="14f3" class="graf--p graf-after--p">I’m sure we can talk on and on about hackathons and app competitions and how to make those great. Those aren’t sustainable. You can have one great event. You can have another great event. Then what happens after that? People go home. They go back to their lives. The hard question is, how do you create staying power? How do you get people to come together on and on? How do you create infrastructure that lets people actually do meaningful work in an ongoing way?</p>

  542. 

  543. <p name="5b99" id="5b99" class="graf--p graf-after--figure graf--last">We built an organization specifically designed for this purpose in LA. It’s called <a href="http://Compiler.LA" data-href="http://Compiler.LA" class="markup--anchor markup--p-anchor" rel="nofollow">Compiler.LA</a>, a for-profit that actually works on civic issues, but t<em class="markup--em markup--p-em">hey commit a percentage of all of their revenue back to the community to build the civic tech ecosystem. </em>They’ll get contracts from foundations, from cities, and then they use part of that money to then go back and help build the civic tech community. That to me is the kind of staying power that we need to have.</p>

  544.   </article>

  545. </section>

  546. 

  547. 

  548. <nav id="jumpto">

  549.   <p>

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

  551.     <a href="https://medium.com/civic-technology/rethinking-data-portals-30b66f00585d">Source originale</a> |

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

  553.   </p>

  554. </nav>

  555. 

  556. <footer>

  557.   <div>

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

  559.     <p>

  560.       Bonjour/Hi!

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

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

  563.     </p>

  564.     <p>

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

  566.     </p>

  567.     

  568.     <p>

  569.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  586.     </p>

  587.     <p>

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

  589.     </p>

  590.     <p>

  591.       Je ne traque pas ta navigation mais mon

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

  593.       conserve des logs d’accès.

  594.     </p>

  595.   </div>

  596. </footer>

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

  598.   ;(_ => {

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

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

  601.       e.preventDefault()

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

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

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

  605.     })

  606.   })()

  607. </script>