davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Les dix enseignements d’un an de Décodeurs (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://makingof.blog.lemonde.fr/2015/04/21/les-dix-enseignements-dun-an-de-decodeurs/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Les dix enseignements d’un an de Décodeurs (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://makingof.blog.lemonde.fr/2015/04/21/les-dix-enseignements-dun-an-de-decodeurs/">Source originale du contenu</a></h3>
    <p><img class="alignnone" src="http://s2.lemde.fr/image/2015/03/10/534x267/4590944_3_390b_pour-leur-premier-anniversaire-les-decodeurs_8e11109c65308daca131d22b0a0f216c.png" alt=""/></p>

<p>Il y a un peu plus d’un an, le 10 mars 2014, nous lancions la rubrique « Les Décodeurs » sur LeMonde.fr, dédiée à un travail sur les  données, le contexte, les vérifications. Saluée par les uns, contestée par d’autres, notre méthodologie a – souvent nous l’espérons – permis de belles réalisations éditoriales. Avec parfois des déceptions. Surtout, nous avons beaucoup expérimenté. Et on s’est bien amusés, j’avoue.</p>

<p>En fait, je voulais ici partager un retour d’expérience : comment on déploie une cellule et une pratique quotidienne en « data ». Et lister les quelques idées et bonnes pratiques qui émergent au bout d’un an.</p>

<h2><b>1. Vérifier, expliquer, montrer, écouter</b></h2>

<p>Le point de départ de la réflexion autour des Décodeurs est simple : les questions que se pose l’audience ne sont pas celles que se posent les journalistes. Nous manipulons chaque jour une information faite d’éléments techniques, de notions complexes, de subtilités. Ne pas les expliquer, ne pas les questionner, ne pas les définir, c’est laisser subsister erreurs d’interprétation, clichés, voire rumeurs ou intox. Et ne pas écouter son audience, une plus grande erreur encore. En un an, nous avons fait des dizaines de sujets inspirés par des questions ou des réactions d’internautes, qui ont rencontré une audience massive.</p>

<p>Le travail des décodeurs, ce n’est plus seulement de chercher et de diffuser l’information. L’information, en 2015, elle coule naturellement. La plupart des ados  ne lisent pas la presse, ne regardent pas le JT, mais ils connaissent généralement les grandes actus du jour, ne serait-ce que via les réseaux sociaux. Et si on n’est plus maîtres de la diffusion de l’info ni de sa production, on peut rester ceux qui la vérifient, la valident, l’explicitent, la rendent accessible. C’est cela, l'« explainatory journalism », avant d’être des papiers à graphes. C’est revenir aux faits. Et lutter contre les clichés, les intox, les idées reçues, les mensonges.</p>

<p>&gt;&gt; <a href="http://www.lemonde.fr/les-decodeurs/article/2015/03/10/40-legendes-urbaines-idees-recues-et-canulars-decodes_4590072_4355770.html">En voici 40 exemples</a></p>

<h2><b>2. Oui, on peut utiliser la data au quotidien</b></h2>

<p>Une autre leçon de cette année, c’est qu’on peut avoir une approche du datajournalisme qui ne se limite pas aux « grosses » productions interactives. Je n’ai rien contre ces productions, au contraire, nous en faisons régulièrement. C’est parfois bluffant, souvent extrêmement intéressant, mais long à produire, encore trop souvent peu compatible avec les mobiles, et parfois difficile d’accès pour un public non initié.</p>

<p>On peut aussi utiliser la donnée et les graphes de manière plus simple, avec des outils qui permettent de produire très rapidement une courbe, une carte, un treemap (c’est <a href="https://medium.com/r/?url=http%3A%2F%2Fwww.lemonde.fr%2Fles-decodeurs%2Fbreve%2F2015%2F04%2F15%2Fle-detail-des-4-milliards-d-euros-de-nouvelles-economies_4616249_4355770.html">ceci</a>) même, qui souvent résument rapidement des points complexes à expliquer en texte. Et qui sont produits au rythme d’un site d’info en continu, et réutilisables pour d’autres articles.</p>

<p>Ce qui n’empêche pas de développer également des productions plus ambitieuses régulièrement. Si je me lance dans le catalogue de toutes celles dont je suis fier on ne va jamais finir ce billet, donc allez voir <a href="http://www.lemonde.fr/les-decodeurs/article/2014/12/31/des-chiffres-et-des-images-l-annee-2014-en-12-datavisualisations_4539835_4355770.html">ce « best of » de nos dataviz. </a></p>

<h2><b>3. Du texte au tableur</b></h2>

<p>Utiliser et penser en données, en tableaux, plutôt qu’en texte et en récit, donnent de nouvelles perspectives, que ce soit pour de grands papiers qui survolent un phénomène avec des chiffres, pour enrichir un reportage, ou pour concevoir des applications, des outils interactifs, etc. Le datajournalisme, et plus largement ce que les technologies peuvent amener à l’information, ce ne sont pas seulement des outils de plus, c’est une nouvelle manière de penser un sujet.</p>

<p>La donnée n’est pas forcément externe. On peut évidemment exploiter des jeux de données existants, mais on peut aussi en créer. Par exemple, en se mettant à plusieurs pour vérifier (à l’aide d’un fichier des élus notamment), s<a href="https://medium.com/r/?url=http%3A%2F%2Fwww.lemonde.fr%2Fles-decodeurs%2Farticle%2F2015%2F03%2F12%2Fle-fn-champion-du-cumul-de-fonctions-chez-ses-assistants-parlementaires_4592395_4355770.html">i les 234 assistants parlementaires d’eurodéputés ont d’autres mandats ou fonctions dans le parti.</a> Et en utilisant du « scraping » pour récupérer la liste desdits assistants eurodéputés sur le site du parlement. La data, c’est aussi ça, c’est par exemple le cœur de l’enquête sur les SwissLeaks : utiliser des listes, classer, ordonner, recouper, vérifier la donnée.</p>

<h2><b>4. Ne pas être un “lab”</b></h2>

<p>Ne pas être un « lab » coupé de la production quotidienne nous a aussi beaucoup apporté : nous avons dû construire des méthodes pour produire au quotidien, en étant sur les temporalités d’un site d’info et des réseaux sociaux. Ce qui nous a poussés au pragmatisme, à essayer d’être malins et efficaces, quitte à faire des choses moins spectaculaires.</p>

<p>Evidemment, pour revenir sur l’exemple précédent, scanner les profils de 234 personnes prend du temps. De même, rédiger très rapidement un papier de contexte pour éclairer un événement est difficile tout seul. C’est là où travailler en équipe, sur des outils collaboratifs, se répartir les parties du papier ou les lignes du tableur à remplir, pendant que les « vrais » codeurs du pôle montent la dataviz, permet d’avancer plus vite.</p>

<p>Dès lors qu’on joue avec du code, on doit réfléchir à la compatibilité avec le CMS, avec le site, avec le mobile. On se retrouve également en première ligne pour définir le déploiement de données localisées sur des « pages résultats » électorales, et pour réfléchir à d’autres questions plus globales. Bref, ne peut pas se cloîtrer dans sa rédaction : il faut discuter avec les développeurs, les administrateurs, les équipes mobile.</p>

<h2><b>5. « Non, je n’enrichirai pas ton papier avec ‘trois graphes vite faits »</b></h2>

<p>Etre un service web qui se distingue par ses formats et non par ses domaines de couverture dans un journal organisé en rubriques n’est pas toujours aisé. Ce qui peut donner lieu à des collaborations qui aboutissent à des productions géniales, mais aussi à des incompréhensions.</p>

<p>Et si cette collaboration  est nécessaire, entre services thématiques et services spécialisés par format, elle ne doit pas conduire à faire des Décodeurs, une équipe qui ne serait qu’au service des autres journalistes de la maison. Si on veut vraiment changer ses pratiques et utiliser le plein potentiel du datajournalisme, il est essentiel de ne pas brider la création, de ne pas constituer d’équipes de « techniciens » qui se contenteraient d’illustrer ou d’enrichir des papiers produits ailleurs.</p>

<h2><b>6. Des licornes et des ninjas</b></h2>

<p>La « licorne » est assez tendance en ce début 2015. L’expression désigne ces profils hybrides indispensables au datajournalisme, de journalistes sachant (bien) coder ou de développeurs qui se sont mis au journalisme. Nous avons la chance d’avoir eu trois licornes (l’une s’est échappée chez la concurrence, mais une autre arrive) capables de concrétiser des idées, de construire avec du code.</p>

<p>Et ils ont la chance de travailler avec des rédacteurs solides et sérieux, qui savent vérifier, croiser, expliquer rapidement et simplement des choses complexes, trouver les bons angles, les bonnes idées, et utiliser nos outils pour enrichir leurs productions avec des graphes. Et qui, en un an, ont énormément progressé en matière de tableurs et de traitement de données, mais aussi dans leur manière d’approcher l’information.</p>

<p>Bref, filons la métaphore équine : effectivement il faut des licornes. Mais il ne faut surtout pas que la totalité de l’innovation repose sur leurs seules encolures : une licorne peut former son équipe et l’aider à se faire pousser une corne elle aussi.</p>

<p>Une partie de l’équipe des Décodeurs est tournante, et vient de la rédac web pour apporter des connaissances plus spécialisées sur un domaine de l’actu. Un autre poste nous permet de bénéficier d’un membre de l’infographie du journal, qui nous apporte des compétences en graphisme. Et ces deux postes peuvent pratiquer sur nos outils et s’y former.</p>

<h2><b>7. Réutiliser le code, recycler les contenus</b></h2>

<p>Autre concept à creuser encore : le recyclage. Votre dataviz est superbe, elle a pris trois jours à deux personnes, c’est bien. Mais si son code peut ensuite être réutilisé rapidement pour une autre production, c’est mieux.</p>

<p>La logique peut s’appliquer aux articles : Les infos de votre papier « pédago » qui vous a pris la journée sur les minima sociaux ont toutes les chances de rester valides la prochaine fois que ce sujet reviendra dans l’actu. Dès lors, pourquoi tout réécrire, alors que vous avez déjà les bases ? On tente de plus en plus de recourir à ce principe : fabriquer non plus du « one shot » à usage unique, mais des contenus réutilisables d’une manière ou d’une autre. Et parvenir à faire ce que<a href="http://www.vox.com/cardstacks"> Vox.com a </a>mis en place : constituer de collections de notions pérennes et réutilisables.</p>

<h2><b>8. Fabriquer des outils, pas seulement des articles</b></h2>

<p>Après l’info en flux, l’info en stocks ? Le concept est à creuser. Cela nous a en tout cas amenés à réfléchir aux moyens de faire savoir au reste de la rédaction web quels articles ou autres éléments (vidéos, cartes, graphes, widgest, etc…) réutilisables sont disponibles sur tel ou tel thème. Et on a donc monté un wiki interne.</p>

<p>Dans la même logique, nous avons rapidement vu les limites de l’utilisation d’outils externes pour construire nos graphes. Et donc nous nous sommes attelés à la construction d’un outil interne, qui nous sert aujourd’hui à produire l’essentiel de nos « petits » graphes.</p>

<p>On retombe sur cette logique du recyclage : on peut paraphraser Lao-Tseu : fais une dataviz à un journaliste et il s’en servira une fois ; fabrique-lui un outil pour faire des graphes, apprends-lui à s’en servir et il en mettra tous les jours dans ses papiers.</p>

<p>Autre application de ce précepte : l’info, ce n’est pas qu’un article, ni qu’un graphique. C’est aussi aujourd’hui un jeu, une application interactive, une « calculette »… On peut faire participer le lecteur, l’impliquer dans l’info, lui faire comprendre par exemple la notion de classe moyenne en fonction de son revenu à lui. Bref, l’article n’est aujourd’hui qu’une option parmi d’autres.</p>

<h2><b>9. Essayer sans s’arrêter</b></h2>

<p>En un an, nous n’avons cessé de tenter de nouvelles approches, d’essayer d’autres formats, d’autres modes d’organisation, d’autres productions. Le paysage médiatique bouge trop vite pour se figer dans une méthode et une manière de faire. Il faut rester attentifs, trouver les bonnes idées ailleurs et se les approprier intelligemment, faire évoluer le projet en fonction des attentes, des retours, de l’organisation plus globale du site et du journal.</p>

<p>Et surtout essayer. Bien des fois, nous nous sommes cassé les dents sur des sujets ou des enquêtes, pour des soucis de méthodologie, de traitement, de fichiers. D’autres fois, nous avons tenté des angles « décalés », qui nous ont valu critiques ou moqueries. Mais à chaque fois, on en a tiré quelque chose, une méthode nouvelle, une formule de calcul qu’on ne connaissait pas, ou une leçon pour la prochaine tentative. Difficile de faire des choses innovantes sans cette part d’expérimentation, voire de déchet. Qui n’en est pas totalement, donc.</p>

<h2><b>10. Et maintenant ? </b></h2>

<p>Nous attaquons donc la saison 2. Avec un peu plus d’assurance, évidemment, et avec pas mal d’idées et d’ambitions, de développements en cours. Notamment celle d’aller beaucoup plus loin en matière d’utilisation, mais aussi de collecte, de stockage, de traitement automatique des données.</p>

<p>Les projets sont nombreux – mobile, présidentielle, déploiements en matière de data, dialogue avec l’audience – et avec eux les réflexions qui les accompagnent Ce pôle pose plein de questions à différents niveaux, que ce soit dans la production éditoriale ou sur son positionnement dans de la rédaction. Et, se poser des questions, pour un média, ce n’est jamais un mal.</p>

<p><strong>Samuel Laurent</strong>, responsable des Décodeurs</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://makingof.blog.lemonde.fr/2015/04/21/les-dix-enseignements-dun-an-de-decodeurs/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>