davidbgk
/
larlet-fr-david-cache
Observar 1
Favorito 0
Fork 0
Código Versões 0 Atividade
A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
245 Commits
1 Branch
Tag: 1037d816d9
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 1037d816d9
${ noResults }
larlet-fr-david-cache/cache/809e97b3effb20ed40d395f7acf.../index.html

index.html 37KB
Original Anotar Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702 
  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>Pourquoi il faut des licornes dans les rédactions (et ce qu’on peut faire avec) (archive) — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

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

  31.   <link rel="canonical" href="http://dansmonlabo.com/2015/04/15/pourquoi-il-faut-embaucher-des-licornes-dans-les-redactions-et-ce-quon-peut-faire-avec-561/">

  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.   Pourquoi il faut des licornes dans les rédactions (et ce qu’on peut faire avec) (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://dansmonlabo.com/2015/04/15/pourquoi-il-faut-embaucher-des-licornes-dans-les-redactions-et-ce-quon-peut-faire-avec-561/">Source originale du contenu</a></h3>

  463.     <figure id="attachment_572" class="wp-caption alignnone"><a href="http://dansmonlabo.com/wp-content/uploads/2015/04/licorne_yosuke_muroya.jpg"><img class="size-large wp-image-572" src="http://dansmonlabo.com/wp-content/uploads/2015/04/licorne_yosuke_muroya-1024x768.jpg" alt="Une licorne sur un laptop (Yosuke Muroya/Flickr/CC-NC)"/></a><figcaption class="wp-caption-text">Une licorne sur un laptop (Yosuke Muroya/Flickr/<span class="caps">CC-NC</span>)</figcaption></figure>

  464. 

  465. <p>A en croire le joli panel réuni à l’hôtel Brufani lors de la première journée du <a href="http://journalismfestival.com/" target="_blank">Festival international de journalisme</a> de Pérouse, les rédactions doivent d’urgence embaucher des « licornes » afin de mieux innover sur les supports numériques et de réussir leur mutation.</p>

  466. 

  467. <p>Ces « licornes », ce sont les journalistes ayant des compétences de développement ou, inversement, des développeurs aimant travailler sur l’actualité. Comme l’animal mythologique, ces profils sont rares et donc précieux au sein d’un effectif.</p>

  468. 

  469. <p>C’est le constat dressé par les intervenants <a href="http://www.journalismfestival.com/programme/2015/the-unicorns-of-the-newsroom" target="_blank">de ce débat</a> :</p>

  470. 

  471. <ul>

  472. <li> <a href="https://twitter.com/mrjohncrowley" target="_blank">John Crowley</a>, <em>digital editor</em> pour le <em><a href="www.wsj.com/europe" target="_blank">Wall Street Journal</a></em> en Europe ;</li>

  473. <li><a href="https://twitter.com/jacqui" target="_blank">Jacqui Maher</a>, « licorne » actuellement chez <em><a href="http://www.bbc.co.uk/news" target="_blank"><span class="caps">BBC</span> News</a></em> après être passé au <em>New York Times </em> ;</li>

  474. <li><a href="http://aronpilhofer.com/" target="_blank">Aron Pilhofer</a>, <em>executive editor of digital</em> au <em><a href="http://guardian.co.uk" target="_blank">Guardian</a>, </em>lui aussi ex du quotidien new-yorkais et par ailleurs cofondateur de <a href="http://aronpilhofer.com/" target="_blank">Hacks/Hackers</a> ;</li>

  475. <li><a href="https://twitter.com/GarrettGoodman" target="_blank">Garret Goodman</a>, du site de création de vidéos <a href="http://www.wochit.com/" target="_blank">Wochit,</a> qui animait les échanges.</li>

  476. </ul>

  477. 

  478. <p>Voici une retranscription de ce qui s’est raconté, <em>modulo</em> quelques ellipses et reformulations de mon fait – d’avance, mille excuses si j’ai déformé un propos ou raté une idée importante.</p>

  479. 

  480. <p><strong>Jacqui Maher. </strong>Je suis du Queens, à New York, et quand j’étais jeune je voulais être poétesse. Heureusement pour moi, avant d’entrer à la la fac, j’ai commencé à traîner avec un groupe de hackers. J’avais 15 ans, et c’est un âge où on trouve ce type de personnes plutôt cool, mais j’aimais aussi leurs idées et leur façon de voir le monde.</p>

  481. 

  482. <p>Vers 1999, la Hearst Corporation a lancé un « studio interactif » que j’ai rejoins. J’ai notamment fait un <span class="caps">CMS</span> <em>[</em>content managing system,<em> service qui permet de gérer les contenus publiés par un site web, ndlr]</em> pour <em>Popular Mechanics</em> <em>[une revue scientifique américaine, ndlr]</em> mais aussi des quiz pour <em>Cosmopolitan</em>.</p>

  483. 

  484. <h2>« Je suis passée par Friendster en Californie et un hôpital au Malawi »</h2>

  485. 

  486. <p>Il était un peu trop tôt pour tout ça, et le studio a fini par fermer. J’ai travaillé un temps en Californie, pour des start-ups comme <a href="http://fr.wikipedia.org/wiki/Friendster" target="_blank">Friendster</a>, un réseau social que les plus jeunes d’entre vous ne connaissent sans doute pas. J’ai trouvé intéressant de voir comment on pouvait mettre au point une technologie pour résoudre un problème, en l’occurence permettre aux gens de retrouver leurs amis.</p>

  487. 

  488. <p>J’ai ensuite voyagé en Afrique, j’ai travaillé pour une <span class="caps">ONG</span> de lutte contre le sida au Malawi. J’ai fini par rentrer à New York. Un ami avait trouvé un job dans une nouvelle équipe que le <em>New York Times </em>constituait. J’ai passé un entretien et j’ai fini pas être embauchée un an plus tard.</p>

  489. 

  490. <p>J’y ai notamment travaillé sur un outil mis en ligne après le tremblement de terre à Haïti pour aider les gens qui cherchaient des nouvelles de leur proches, en collaboration avec Google et la Croix Rouge.</p>

  491. 

  492. <p>J’ai globalement trouvé le travail au sein d’une rédaction très gratifiant, comparé à ce qu’on fait dans une start-up ou une <span class="caps">ONG</span>.</p>

  493. 

  494. <p>Mais j’ai fini par déménager à Londres pour rejoindre mon compagnon et travailler pour la <span class="caps">BBC</span>. Je travaille notamment sur la couverture des élections et sur des outils de narration interactive.</p>

  495. 

  496. <p><strong>Aron Pilhofer. </strong>J’ai un parcours très classique, avant de commencer à m’intéresser aux données, au datajournalisme. C’est une spécialité qui peut se décliner de beaucoup de façons, et ce n’est pas forcément quelque chose de si nouveau.</p>

  497. 

  498. <p>Ce qui est de nouveau en revanche, c’est la capacité qu’on a désormais d’utiliser les données pour créer des récits qui ont une forme non traditionnelle. On est en train de voir apparaître de nouveaux formats.</p>

  499. 

  500. <p>Prenez la mode pour l’<em>explanatory journalism</em> <em>[le journalisme pédagogique, que pratiquent aussi les <a href="http://www.lemonde.fr/les-decodeurs/" target="_blank">Décodeurs</a> du Monde, ndlr] </em> : pour moi, les meilleurs dans ce domaine, c’est la rubrique <a href="http://www.nytimes.com/upshot/" target="_blank">Upshot</a> du <em>New York Times, </em>parce qu’ils ne se contentent pas du texte mais travaillent aussi beaucoup sur le visuel.</p>

  501. 

  502. <h2>« Ce n’est pas compliqué, mais sans licorne vous ne pourrez pas le faire »</h2>

  503. 

  504. <p>Mais pour faire ça, il faut des journalistes ayant des compétences en développement, sinon, vous serez incapables de produire ce genre de contenu.</p>

  505. 

  506. <p>Prenez le projet <a href="http://www.theguardian.com/commentisfree/ng-interactive/2015/mar/24/immigrants-in-their-own-words-100-stories" target="_blank"><em>Immigrants in Their Own Words,</em></a> du <em>Guardian</em>. On a voulu que les immigrants prennent eux-mêmes la parole, alors que leur histoire est toujours racontée par d’autres.</p>

  507. 

  508. <p>Le résultat est plutôt basique : des textes et des images, le tout créé entièrement par les lecteurs du <em>Guardian</em> eux-mêmes.</p>

  509. 

  510. <p>Ça a l’air simple, mais ça met en œuvre pas mal de choses en coulisses. Il vous faut un <span class="caps">CMS</span> qui va gérer le cas où il y a une image avec le texte et celui où il n’y en a pas, mais aussi gérer le cas où l’image est au format portrait et celui où elle au format paysage.</p>

  511. 

  512. <p>Et tant qu’à faire, vous voulez que tout ça soit dans un gabarit qu’on puisse réutiliser plus tard.</p>

  513. 

  514. <p>Au final, rien de très compliqué, mais si vous n’avez pas une licorne dans votre rédaction, vous ne pourrez pas le faire.</p>

  515. 

  516. <p>La page qu’on a mise en ligne pour s<a href="http://www.theguardian.com/politics/ng-interactive/2015/feb/27/guardian-poll-projection" target="_blank">uivre tous les sondages publiés</a> avant les élections en Grande-Bretagne vise à aider nos lecteurs à aborder une problématique qui peut sembler simple, mais qui est infiniment complexe si on va dans le détail.</p>

  517. 

  518. <p>On produit des synthèses graphiques de toutes les études d’opinion et de leur évolution dans le temps, et on montre les basculements qui sont en train de s’opérer circonscription par circonscription.</p>

  519. 

  520. <p>C’est un problème technologique, c’est un problème de design, et c’est un problème de journalisme.</p>

  521. 

  522. <p><strong>Jacqui Maher. </strong>J’ai travaillé pour un journal papier et je travaille désormais pour une radio. Dans les deux cas, le fait d’avoir à s’occuper d’un autre mode de diffusion que le numérique est un handicap, bien sûr.</p>

  523. 

  524. <p>Mais à la <span class="caps">BBC</span> je trouve les gens globalement plus à l’aise avec la technologie, notamment parce que c’est une structure où les ingénieurs ont toujours joué un rôle important, au fil des innovations de la radio et de la télévision.</p>

  525. 

  526. <p><strong>John Crowley.</strong>  Il y a un vrai changement en cours, on est en train de passer d’un traitement de l’information principalement centré sur le texte à quelque chose davantage fondé sur le visuel et les interactions.</p>

  527. 

  528. <p>La <span class="caps">BBC</span> a publié <a href="http://www.bbc.com/news/world-middle-east-32057601" target="_blank">Syrian Journey</a>, une sorte de jeu plaçant l’internaute dans la peau d’un réfugié syrien tentant de rejoindre l’Europe — dans beaucoup de cas, le voyage se termine par la mort.</p>

  529. 

  530. <p>Elle a été critiquée, certains ont trouvé malsain le fait de prendre une actualité tragique pour en faire quelque chose de ludique. L’idée que dans l’avenir, l’actualité sera jouée plutôt qu’elle sera lue peut être difficile à accepter pour beaucoup d’entre nous.</p>

  531. 

  532. <p>Pourtant, le jeu vidéo est pratiqué par une part grandissante de la population. Et désormais, c’est le principal concurrent des médias, puisqu’on peut consacrer son temps passé dans le métro le matin à l’un ou à l’autre, sur son smartphone.</p>

  533. 

  534. <h2>« Hé, mon article est prêt, tu peux ajouter une illustration ? » Ben non.</h2>

  535. 

  536. <p>Pour produire ce type de contenus, là encore, il faudra des licornes.</p>

  537. 

  538. <p>Mais il faut savoir travailler avec elles. Par exemple, ce qui ne marche pas, c’est de produire un article et ensuite de leur demander : « Hé, tu peux pas ajouter une illustration ? » Il faut les associer dès le départ au travail sur l’article.</p>

  539. 

  540. <p>Il faut aussi que les licornes apprennent à mieux communiquer sur leur travail. Par exemple, j’ai demandé à nos employés qui travaillent sur le visuel partout dans le monde d’envoyer un e-mail à l’équipe à chaque fois qu’elles mettaient quelque chose en ligne, pour expliquer ce qui a été fait et comment ça a été fait.</p>

  541. 

  542. <p>Le <em>Wall Street Journal </em>embauche des développeurs, mais il y a encore parfois un sentiment que ce sont des personnes extérieures à la rédaction, qu’il y a « eux » et qu’il y a « nous ».</p>

  543. 

  544. <p>Ça me rappelle ce que j’ai vécu il y a quelques années, au <em>Daily Telegraph, </em>quand la direction avait fait venir  <em>« quelqu’un d’Internet »</em>  au sein de la rédaction papier. Certains de ses membres avaient dit : « Mais qu’est-ce que “quelqu’un d’Internet” peut bien nous apprendre ? »</p>

  545. 

  546. <p>Encore aujourd’hui, la production de datavisualisations ne colle pas toujours au mode de fonctionnement d’une rédaction, notamment au niveau des critères d’évaluation : pour un rédacteur classique, être un bon journaliste c’est écrire bien, sortir des scoops. C’est aussi cette culture qui est en train de changer.</p>

  547. 

  548. <p>J’ai travaillé pendant six mois sur <em><a href="http://online.wsj.com/ww1/" target="_blank">100 Years Legacies</a>,</em> collection de cent histoires sur la Première Guerre mondiale. Il y a assez de textes pour un petit livre, mais on ne peut pas le deviner sur la page d’accueil, c’est très fragmenté. On utilise dedans plein de petits modules interactifs, et chaque histoire peut être partagée séparément sur les réseaux sociaux.</p>

  549. 

  550. <p>On y a passé six mois et on a voulu capitaliser sur ce travail, du coup on a repris ce format après la mort de Robin Williams, pour multiplier les angles sur cet acteur.</p>

  551. 

  552. <h2>« Des outils pour l’équipe, pas seulement des contenus pour les lecteurs »</h2>

  553. 

  554. <p>Enfin, nos licornes ne produisent pas que des choses destinées au lecteur, mais aussi des outils pour l’équipe, par exemple un petit module qui permet de générer une carte de situation en quelques secondes.</p>

  555. 

  556. <p><strong>Jacqui Maher. </strong> C’est variable mais c’est une grosse partie de mon travail en ce moment. Par exemple, je trouve ça motivant de travailler sur des outils destinés aux journalistes d’investigation, il y a beaucoup à faire dans ce domaine.</p>

  557. 

  558. <p>J’aime ce qu’on peut faire avec le code, mais je n’aime pas l’utiliser sans avoir un but concret, juste pour optimiser un algorithme par exemple. Pour nos besoins, pas besoin d’être dans la programmation <em>hardcore</em>.</p>

  559. 

  560. <p><strong>John Crowley. </strong>Pour filer la métaphore avec la licorne, je dirais qu’il ne faut pas essayer d’attraper un profil de ce type, plutôt le laisser venir.</p>

  561. 

  562. <p>Ce ne sont pas des gens qui veulent un boulot classique, chaque jour de 9 heures à 18 heures. Ils veulent changer les choses. Il faut aussi qu’ils tiennent bien la pression, parfois un développement doit être fait dans la journée, il faut avoir une dose de réflexes journalistiques.</p>

  563. 

  564. <p><strong>Jacqui Maher. </strong> C’est vrai que les <em>deadline</em> sont plus dures à gérer dans les rédactions que dans les entreprises technologiques comme Google, même si là-bas aussi il y a des délais à tenir.</p>

  565. 

  566. <p><em>[…]</em></p>

  567. 

  568. <p><strong>Aron Pilhofer. </strong> Le <em>New York Times</em> ne met pas souvent ses productions en <em>open source</em> parce que la plupart du temps, ce qui est produit n’a pas les caractéristiques d’un projet <em>open source,</em> ce n’est pas quelque chose que d’autres peuvent facilement décliner.</p>

  569. 

  570. <h2>« L’<em>open source</em>, la règle au <em>Guardian</em>, l’exception au <em>New York Times </em> »</h2>

  571. 

  572. <p>Le <em>Guardian</em> a une approche différente, à cause de la volonté affichée pratiquer l’<em><a href="http://www.theguardian.com/media/open-journalism" target="_blank">open journalism</a></em> : on peut dire qu’il pratique l’ouverture par défaut, alors que pour le <em>New York Times</em> ce sera l’exception.</p>

  573. 

  574. <p>Ce n’est pas une critique, d’ailleurs certains projets que le <em>Guardian</em> met <a href="https://github.com/guardian" target="_blank">sur Github</a> <em>[plateforme permettant de publier un programme et de le faire évoluer, ndlr]</em> ne sont jamais utilisés par quelqu’un d’extérieur au <em>Guardian</em>.</p>

  575. 

  576. <p>Cela dit, je me rends compte grâce à cette conférence qu’on travaille sur un outil de cartographie simplifié, en même temps que le <em>Wall Street Journal</em> et se concerter, c’est un peu idiot.</p>

  577. 

  578. <p><em>[…]</em></p>

  579. 

  580. <p><strong>John Crowley. </strong>C’est vrai que notre façon de travailler peut sembler difficilement durable d’un point de vue économique, d’autant que certains projets, comme celui qu’on a fait sur les archives de la Premiere League<em> [le championnat de foot anglais, ndlr],</em> n’ont pas marché.</p>

  581. 

  582. <p>Le jour où on a lancé <em>100 Years Legacies,</em> je peux vous dire que j’ai serré les fesses, mais heureusement on a fait 3 millions de pages vues avec…</p>

  583. 

  584. <p><strong>Aron Pilhofer. </strong> C’est un vrai problème. A la base, il faut qu’il y ait une envie personnelle, et un soutien de la hiérarchie. Et après, il faut des gens pour le faire.</p>

  585. 

  586. <p>La bonne nouvelle, c’est qu’il y a aujourd’hui un nombre incroyable d’endroits où se former ou apprendre des outils. D’ailleurs, ces derniers se modernisent et sont plus faciles à prendre en main.</p>

  587. 

  588. <p>Je me souviens de l’époque où je recevais un coup de fil à minuit : « Hé, le truc qu’on a publié est planté, on fait quoi ? » Ce n’est plus comme ça aujourd’hui.</p>

  589. 

  590. <p>Nous, on travaille beaucoup avec <a href="http://www.google.com/sheets/about/" target="_blank">Google Sheets </a><em>[des feuilles de calcul qui contiennent les textes et nombres utilisés dans une infographie ou un mini-site, ndlr] </em>pour gérer le contenu de nos productions, ça évite une complexité supplémentaire à gérer.</p>

  591. 

  592. <p>Beaucoup de gens avec qui je bosse viennent du service informatique, ils aiment travailler avec la rédaction sur des projets qui ont plus de sens pour eux que chercher à optimiser le chargement d’une partie du site.</p>

  593. 

  594. <p>Allez voir des gens avec des autocollants sur leur laptop qui parlent de trucs comme <a href="https://okfn.org/" target="_blank">l’Open Knowledge Foundation</a> <em>[association militant pour la culture libre et l’</em>open data<em>, ndlr]</em>. Je suis sérieux ! Allez dans les conventions, partez à la rencontre de ces univers.</p>

  595. 

  596. <h2>« Si votre rédacteur en chef est enthousiaste, il trouvera un peu d’argent »</h2>

  597. 

  598. <p>Si vous arrivez à enthousiasmer votre rédacteur en chef, ça marchera, il trouvera un peu d’argent coincé au fond d’un fauteuil pour prendre un <em>freelance</em>. Ensuite, cet enthousiasme se diffusera à l’ensemble de la rédaction, et puis vous avancerez pas à pas.</p>

  599. 

  600. <p>La chance que vous avez, c’est qu’il y a énormément de choses disponibles en <em>open source</em> : chaque ligne de code <a href="https://github.com/propublica" target="_blank">produite par Pro Publica</a> <em>[fondation américain finançant des investigations d’intérêt public, ndlr] </em>ou encore les outils du <a href="http://knightlab.northwestern.edu/" target="_blank">Knightlab</a> <em>[laboratoire de la Knight Foundation, basée dans l’université Northwestern, ndlr]</em>.</p>

  601. 

  602. <p><em>[…]</em></p>

  603. 

  604. <p><strong>Aron Pilhofer. </strong>Je ne connais pas la taille du marché du travail pour les licornes… Mais on ne leur demande pas que de faire des petits graphiques, l’idée c’est d’innover avec eux, d’affronter les évolutions en cours, y compris du point de vue du <em>business model.</em></p>

  605. 

  606. <p>Je sais cependant que ce marché est infiniment plus grand qu’il y a dix ans,et qu’il va continuer à grandir très vite. Aujourd’hui, je serais incapable nommer toutes les équipes qui travaillent comme nous aux Etats-Unis, alors qu’à l’époque, on les comptait sur les doigts d’une seule main.</p>

  607. 

  608. <p><em>[…]</em></p>

  609. 

  610. <p><strong>Aron Pilhofer. </strong>Mon obsession du moment, c’est de donner une meilleure visibilité aux contenus que nous produisons</p>

  611. 

  612. <p>Quand on travaille longtemps sur un projet, on est déçus si l’équipe chargée de composer la page d’accueil ne l’aime pas trop et le vire rapidement. Dès le début du projet, il faut se poser la question : « Est-ce que nos lecteurs vont aimer ? Est-ce que les éditeurs de la page d’accueil vont le mettre en valeur ? » Si la réponse est « peut-être », alors il y a un problème.</p>

  613. 

  614. <p>Il faut aussi se focaliser sur les autres accès possibles au contenu. Par exemple, notre équipe chargée des réseaux sociaux nous a fait refaire entièrement le sondage qu’on publie chaque année avant les Oscars. D’un année sur l’autre, l’audience s’est retrouvée décuplée ! Même chose quand on l’a rendu accessible sur les mobiles.</p>

  615. 

  616. <h2>« Même un journaliste <em>old school</em> peut s’enthousiasmer pour une datavisualisation »</h2>

  617. 

  618. <p>Il faut que tout le monde monte à bord, que ça fasse partie du traitement global de l’actualité proposé par le média, et que ce ne soit pas la dernière roue du carrosse. Sinon, c’est mort.</p>

  619. 

  620. <p>Mais on se rend compte que même un journaliste plutôt <em>old school</em> peut s’enthousiasmer pour ces nouvelles façons de raconter des histoires.</p>

  621. 

  622. <p><em>[…]</em></p>

  623. 

  624. <p><strong>John Crowley. </strong>On s’est donné le principe de demander aussi souvent que possible à nos lecteurs si nous avons raté quelque chose sur un sujet donné. C’est devenu un réflexe.</p>

  625. 

  626. <p><em>[…]</em></p>

  627. 

  628. <p><span><strong>Aron Pilhofer. </strong>On fait énormément de tests, on travaille sur l’expérience utilisateur, on organise des focus groupes, on lance des enquêtes.</span></p>

  629. 

  630. <p><span>Traiter une élection, on pourrait croire que les journalistes savent déjà faire. Pourtant, nos tests montrent que ce n’est pas le cas.</span></p>

  631. 

  632. <p><span>Mais le journalisme reste peu adapté à un travail par itérations, on peut le faire à la marge seulement. Ce qu’on fait est trop périssable, ce n’est pas comme un produit qu’on fait évoluer peu à peu dans le temps.</span></p>

  633. 

  634. <p><em>[…]</em></p>

  635. 

  636. <p><strong>Jacqui Maher. </strong> C’est vrai que c’est important de mesurer la réponse des utilisateurs, c’est une habitude que j’ai prise dans les start ups. Mais est-ce que ça veut dire qu’il faut abandonner un sujet s’il est peu lu ? C’est une question compliquée.</p>

  637. 

  638. <p><strong>Aron Pilhofer. </strong> Il faut tester, tester et encore tester, même si ça ne vous garantit pas le succès : vous allez vous planter au moins aussi souvent que vous allez réussir. L’idée c’est que votre boss ne le remarque pas trop.</p>

  639.   </article>

  640. </section>

  641. 

  642. 

  643. <nav id="jumpto">

  644.   <p>

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

  646.     <a href="http://dansmonlabo.com/2015/04/15/pourquoi-il-faut-embaucher-des-licornes-dans-les-redactions-et-ce-quon-peut-faire-avec-561/">Source originale</a> |

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

  648.   </p>

  649. </nav>

  650. 

  651. <footer>

  652.   <div>

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

  654.     <p>

  655.       Bonjour/Hi!

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

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

  658.     </p>

  659.     <p>

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

  661.     </p>

  662.     

  663.     <p>

  664.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  681.     </p>

  682.     <p>

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

  684.     </p>

  685.     <p>

  686.       Je ne traque pas ta navigation mais mon

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

  688.       conserve des logs d’accès.

  689.     </p>

  690.   </div>

  691. </footer>

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

  693.   ;(_ => {

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

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

  696.       e.preventDefault()

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

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

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

  700.     })

  701.   })()

  702. </script>