davidbgk
/
larlet-fr-david-cache
Прати 1
Волим 0
Креирај огранак 0
Код Издања 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 Комити
1 Грана
Дрво: c4928481e7
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from 'c4928481e7'
${ noResults }
larlet-fr-david-cache/cache/6c481577ef6b895c3c25e5b01ed.../index.html

index.html 41KB
Датотека Blame Историја

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583 
  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>Médias, plateformes sociales et citoyenneté (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://www.internetactu.net/2019/04/09/medias-plateformes-sociales-et-citoyennete/">

  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.   Médias, plateformes sociales et citoyenneté (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://www.internetactu.net/2019/04/09/medias-plateformes-sociales-et-citoyennete/">Source originale du contenu</a></h3>

  463.     <p>Le chercheur <a href="http://www.ethanzuckerman.com/blog/about-me/">Ethan Zuckerman</a> (<a href="http://www.ethanzuckerman.com/blog/">blog</a>, <a href="https://twitter.com/ethanz">@ethanz</a>), directeur du <a href="http://civic.mit.edu/">Centre pour les médias civiques au MIT</a> (<a href="https://twitter.com/civicMIT">@civicMIT</a>), publiait il y a peu avec plusieurs collègues <a href="https://www.cjr.org/analysis/christchurch-shooting-media-coverage.php">une étude</a> sur la manière dont les médias ont rendu compte de l’attentat de Christchurch en Nouvelle-Zélande. </p>

  464. 

  465. <h2>Face aux pratiques terroristes faut-il défendre des principes antijournalistiques ?</h2>

  466. 

  467. <p>Les travaux d’Ethan Zuckerman (<a href="http://www.internetactu.net/search/Ethan+Zuckerman">dont nous avons souvent parlé sur InternetActu.net</a>) s’intéressent beaucoup à la relation entre les médias et la citoyenneté. C’est également le cas de cette étude qui a regardé la manière dont la presse anglo-saxonne a rendu compte de l’attentat et comment il a été perçu. Pour réaliser cette étude, les chercheurs se sont basés sur un outil construit par le MIT et le <a href="https://cyber.harvard.edu/">Berkman Klein Center for Internet &amp; Society</a> de l’université Harvard : <a href="https://mediacloud.org/">Media Cloud</a>. Cet outil est une plateforme open source qui agrège des contenus provenant d’une grande variété de médias et permet une analyse de liens, d’audiences et de partages des articles sur Facebook et Twitter. L’outil permet d’analyser, pour un sujet particulier, les sources les plus partagées, sa couverture média dans le temps et selon différents médias. </p>

  468. 

  469. <p>À partir de l’étude de la couverture média de l’attentat de Christchurch, les chercheurs ont produit notamment des recommandations, en tension avec <a href="https://fr.wikipedia.org/wiki/QQOQCCP">les principes mêmes du journalisme</a> (principes qui consistent à préciser notamment <em>« qui a fait quoi, où, quand et pourquoi ? »</em>). Ainsi, les chercheurs recommandent aux médias, dans des cas d’actes terroristes, de ne pas publier le nom du terroriste, de ne pas publier ou lier vers les sources où le terroriste promeut ou explique ses raisons, de ne pas publier le lien ou le nom de ses revendications, de ne pas décrire ni détailler l’idéologie du tueur, ni de mèmes qui s’y réfèrent… Des recommandations qui suivent en grandes parties les lignes directrices émises par l’organisation de défense des médias <a href="https://nonotoriety.com/">No Notoriety</a>. </p>

  470. 

  471. <p>Nombre de médias n’ont bien sûr pas respecté ces règles : de grands médias américains et britanniques ont nommé le forum fréquenté par le tireur de Christchurch et beaucoup ont discuté des idées qu’il y avait exprimées. Seules 14 % des publications américaines ont rapporté le nom du tireur, alors que seulement 30 % des publications britanniques ont ignoré cette recommandation. 45 % des histoires les plus partagées sur Facebook incluait son nom et 25 % donnaient des informations sur son idéologie. Le problème, soulignent les chercheurs, c’est que le nom, la mention des forums où il s’est exprimé ou le fait d’indiquer des mots-clefs est particulièrement dangereux, car ils permettent aux lecteurs de chercher ces références : introduire des mots-clefs spécifiques, voire obscurs, confère aux terroristes une grande visibilité sur ces mots-clefs dans les moteurs de recherche (<a href="http://www.internetactu.net/2018/06/06/de-quelle-education-aux-medias-avons-nous-besoin/">danah boyd et Francesca Tripodi exprimaient les mêmes réticences</a> sur ces questions). <em>« Ces expressions inhabituelles exploitent ce qu’on appelle des « espaces vides de données » »</em> (<em><a href="https://datasociety.net/output/data-voids-where-missing-data-can-easily-be-exploited/">data voids</a></em>) : que terroristes, complotistes ou polémistes et leurs partisans vont utiliser pour créer de la visibilité sur des mots-clefs pour recruter des lecteurs et de nouveaux partisans. <em>« Comprendre qu’un assassin de ce type cherche consciemment à manipuler les médias pour amplifier ses convictions crée un défi de taille pour les salles de presse »</em>, rappelle Zuckerman. Si les journaux peuvent apprendre à ne pas donner le nom d’un terroriste, reste que ne pas détailler ses motivations peut-être plus difficiles.  </p>

  472. 

  473. <p>L’étude pointe du doigt plusieurs médias, comme le <em>Sun</em> et le <em>Daily Mail</em> britanniques, dont les articles sur le sujet ont été parmi les plus partagés sur FB, alors que leurs contenus violaient ces directives et étaient parmi ceux qui donnaient le plus d’indices aux lecteurs pour retrouver des contenus. Mais l’édition américaine du <em>Guardian</em> ou la <em>BBC</em> n’ont pas fait beaucoup mieux que les tabloïds. Si moins de 20 % du total des articles publiés en langue anglaise mentionnait le nom du tireur, 47 % des 98 articles partagés plus de 50 000 fois sur FB mentionnait son nom. Les histoires les plus partagés sur FB étaient également plus susceptibles de citer le nom du tireur, les forums où il avait publié ses avis et ses inspirateurs. </p>

  474. 

  475. <p><img src="http://www.internetactu.net/wp-content/uploads/2019/04/NZ-Shooting-2-Topic-Mapper-Media-Cloud-986x1024.png" alt="" class="aligncenter size-large wp-image-34206" srcset="http://www.internetactu.net/wp-content/uploads/2019/04/NZ-Shooting-2-Topic-Mapper-Media-Cloud-986x1024.png 986w, http://www.internetactu.net/wp-content/uploads/2019/04/NZ-Shooting-2-Topic-Mapper-Media-Cloud-289x300.png 289w, http://www.internetactu.net/wp-content/uploads/2019/04/NZ-Shooting-2-Topic-Mapper-Media-Cloud-768x797.png 768w, http://www.internetactu.net/wp-content/uploads/2019/04/NZ-Shooting-2-Topic-Mapper-Media-Cloud.png 1257w" sizes="(max-width: 986px) 100vw, 986px"/><br/>

  476. <em>Image : capture d’écran <a href="https://topics.mediacloud.org/#/topics/3016/summary">de résultats d’études autour de la fusillade de Christchurch via MediaCloud</a>.</em></p>

  477. 

  478. <h2>Mieux mesurer le pouvoir des médias et des plateformes</h2>

  479. 

  480. <p><img src="http://www.internetactu.net/wp-content/uploads/2019/04/zuckerman-300x262.png" alt="Ethan Zuckerman à l'école de journalisme de Sciences Po photographié par Dominique Cardon" title="Ethan Zuckerman à l'école de journalisme de Sciences Po photographié par Dominique Cardon" class="alignright size-medium wp-image-34211" srcset="http://www.internetactu.net/wp-content/uploads/2019/04/zuckerman-300x262.png 300w, http://www.internetactu.net/wp-content/uploads/2019/04/zuckerman.png 595w" sizes="(max-width: 300px) 100vw, 300px"/>Accueilli il y a peu à l’école de journalisme de Sciences Po, Ethan Zuckerman est revenu sur cette étude et l’a complété. Pour lui, expliquait-il, il est essentiel de mieux mesurer le pouvoir des médias dans ce monde en réseaux. Aux États-Unis, la violence policière notamment à l’encontre des noirs est l’un des grands problèmes de société. Plusieurs médias se sont intéressés au phénomène en tentant de documenter cette violence pour la rendre visible, comme <a href="https://www.theguardian.com/us-news/ng-interactive/2015/jun/01/the-counted-police-killings-us-database">le compteur du <em>Guardian</em></a> ou <a href="https://www.washingtonpost.com/graphics/2018/national/police-shootings-2018/?utm_term=.88eb485f141b">celui du <em>Washington Post</em></a> ou d’association citoyennes comme <a href="https://mappingpoliceviolence.org/">Mapping police violence</a>. Le problème bien souvent c’est que les gens tués par la police sont loin d’être tous identifiés. Nombre d’entre eux ne reçoivent même pas l’attention d’un article de presse ! Comme il l’expliquait dans une de ses conférences (<a href="http://opentranscripts.org/transcript/using-data-create-social-change/">voir sa transcription</a>) en évoquant des travaux menés avec <a href="https://natematias.com/">Nathan Matias</a> (<a href="https://twitter.com/natematias">@natematias</a>), les chercheurs ont utilisé MediaCloud pour souligner qu’avant le drame de <a href="https://fr.wikipedia.org/wiki/Affaire_Michael_Brown">Michael Brown</a> en 2014 et les émeutes de Fergusson, les noirs désarmés tués par la police ne recevaient la plupart du temps aucune couverture presse. Depuis la mort de Michael Brown, le nombre d’articles sur ce type de victime n’a pas nécessairement bondi, il demeure assez faible, par contre depuis, les articles qui évoquent ce genre d’affaires font bien plus souvent qu’avant référence à des histoires du même type, comme à celle de Michael Brown. Relier une histoire individuelle à une autre est un moyen pour les journalistes d’intégrer une information à une histoire plus vaste, à des phénomènes plus globaux. </p>

  481. 

  482. <p>Si depuis 2014 les médias américains couvrent avec plus de vigilance les violences policières, les biais de traitements de la presse demeurent nombreux, estime Ethan Zuckerman en montrant comment les médias américains ont classé l’information relative à <a href="https://fr.wikipedia.org/wiki/%C3%89pid%C3%A9mie_de_maladie_%C3%A0_virus_Ebola_en_Afrique_de_l%27Ouest">l’épidémie Ebola</a>, s’intéressant bien plus au décès d’un homme dans un hôpital du Texas qu’à la pandémie qui touchait l’Afrique de l’Ouest.  </p>

  483. 

  484. <p><img src="http://www.internetactu.net/wp-content/uploads/2019/04/networkpropaganda-199x300.jpeg" alt="" class="alignright size-medium wp-image-34214" srcset="http://www.internetactu.net/wp-content/uploads/2019/04/networkpropaganda-199x300.jpeg 199w, http://www.internetactu.net/wp-content/uploads/2019/04/networkpropaganda.jpeg 364w" sizes="(max-width: 199px) 100vw, 199px"/>Il est revenu également <a href="https://www.cjr.org/analysis/breitbart-media-trump-harvard-study.php">sur l’étude</a> cosignée avec son collègue <a href="https://cyber.harvard.edu/people/ybenkler">Yochai Benkler</a> (<a href="https://twitter.com/ybenkler">@ybenkler</a>) professeur à l’école de droit de Harvard et co-directeur du <a href="https://cyber.harvard.edu/">Berkman Klein Center pour l’internet et la société à Harvard</a>. <a href="https://cyber.harvard.edu/publications/2017/08/mediacloud">Cette étude de référence</a> – qui a donné lieu à un livre de référence également signé Yochaï Benkler, <a href="https://cyber.harvard.edu/people/rfaris">Robert Faris</a> et <a href="https://cyber.harvard.edu/people/hroberts&gt;« Hal Roberts&lt;/a&gt;, &lt;em&gt;&lt;a href=" http:="">Network, Propaganda, Manipulation, Disinformation and Radicalization in American Politics</a> (Oxford University Press, 2018, non traduit) – s’est intéressée à des millions de partages d’articles publiés entre avril 2015 et les élections présidentielles américaines de 2016. L’étude pointe deux aspects préoccupants des échanges en ligne : la polarisation des échanges et plus encore leur asymétrie. Les chercheurs soulignaient notamment que la désinformation provenant de médias partisans de la droite radicale et extrémiste américaine (comme Breitbart) est renforcée par leur isolement du journalisme traditionnel et leur capacité à exploiter les médias sociaux pour relayer leur propagande. Pour ces chercheurs, l’asymétrie des schémas d’information montre que nous ne sommes pas tant dans des bulles de filtres technologiques, mais confrontés à des dynamiques politiques différentes. Le fait que ces modèles d’attention asymétriques soient similaires sur Twitter ou Facebook suggère que les choix humains, idéologiques ou politiques auraient plus d’impacts que les algorithmes des plateformes techniques. <a href="https://shorensteincenter.org/benkler/">Comme le soulignait Yochaï Benkler</a>, cette asymétrie suggère que nous sommes face à un phénomène politique plus que technologique, <em>« qui utilise les avantages de la technologie pour franchir les barrières traditionnelles et créer son propre écosystème médiatique »</em>.</p>

  485. 

  486. <p><img src="http://www.internetactu.net/wp-content/uploads/2019/04/Twitter-Image-1-800x548.jpg" alt="" class="aligncenter size-full wp-image-34207" srcset="http://www.internetactu.net/wp-content/uploads/2019/04/Twitter-Image-1-800x548.jpg 800w, http://www.internetactu.net/wp-content/uploads/2019/04/Twitter-Image-1-800x548-300x206.jpg 300w, http://www.internetactu.net/wp-content/uploads/2019/04/Twitter-Image-1-800x548-768x526.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"/><br/>

  487. <img src="http://www.internetactu.net/wp-content/uploads/2019/04/Facebook-Image-1-800x527.jpg" alt="" class="aligncenter size-full wp-image-34208" srcset="http://www.internetactu.net/wp-content/uploads/2019/04/Facebook-Image-1-800x527.jpg 800w, http://www.internetactu.net/wp-content/uploads/2019/04/Facebook-Image-1-800x527-300x198.jpg 300w, http://www.internetactu.net/wp-content/uploads/2019/04/Facebook-Image-1-800x527-768x506.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"/><br/>

  488. <em>Image : En haut, sources médiatiques partagées sur Twitter pendant l’élection présidentielle américaine (nœuds proportionnels aux partages Twitter). En bas, sources médiatiques partagées sur Twitter pendant l’élection (nœuds proportionnels aux partages Facebook). Les nœuds sont dimensionnés en fonction de la fréquence à laquelle ils ont été partagés sur Twitter (Fig. 1) ou sur Facebook (Fig. 2). L’emplacement des nœuds est déterminé par le fait que deux sites ont été partagés par le même utilisateur Twitter ou FB le même jour, ce qui représente la mesure dans laquelle deux sites attirent des audiences similaires. Les couleurs attribuées à un site sur la carte reflètent la part des histoires de ce site qui ont été tweetées ou partagées par les utilisateurs qui ont également retweeté Clinton ou Trump pendant les élections. Ces couleurs reflètent donc les habitudes d’attention du public et non l’analyse du contenu des sites. Les sites bleu foncé attirent l’attention selon un ratio d’au moins 4:1 des adeptes de Clinton ; sites rouges 4:1 adeptes de Trump. Les sites verts sont retweetés plus ou moins également par les adeptes de chaque candidat. Les sites bleu clair attirent 3:2 adeptes de Clinton, et le rose dessine 3:2 adeptes de Trump.</em></p>

  489. 

  490. <p>Cette étude également repose sur MediaCloud, rappelle Zuckerman, qui souligne que si l’outil est fort pour traiter de l’information écrite sur un web relativement ouvert, l’outil a encore bien des écueils : notamment il ne permet pas l’analyse d’image ou de vidéos, pointe les partages de liens sur les médias sociaux, mais pas le reste (les réactions, les commentaires…) et pour l’instant est essentiellement anglocentré. Pour prolonger ce travail, outre d’innombrables collaborations avec des institutions et des médias pour analyser d’autres langues ou d’autres corpus, Zuckerman signale le lancement prochain de l’International Hate Observatory Project et du Provenance Project. L’idée de ces programmes est de regarder comment les idées se diffusent des forums les plus atypiques de l’internet à des sites d’info partisans avant d’être repris par des médias généralistes. La grande difficulté pourtant demeure d’arriver à étudier FB et Twitter : sans collaboration avec ces plateformes, les chercheurs peinent à obtenir les données d’études dont ils ont besoin. Et cela s’annonce pire avec les messageries de groupes chiffrées comme WhatsApp… Sans collaboration de ces entreprises avec les chercheurs, comment comprendrons-nous ce qu’il s’y passe ?  </p>

  491. 

  492. <h2>De nouveaux médias pour un monde en réseau</h2>

  493. 

  494. <p>Les médias ont longtemps eu un modèle de distribution assez simple. Ils produisaient, distribuaient et trouvaient leurs audiences, selon un modèle très classique de diffuseur, explique Ethan Zuckerman <a href="https://medium.com/trust-media-and-democracy/we-know-the-news-is-in-crisis-5d1c4fbf7691">en faisant référence à un de ses toujours excellents billets de blog</a>. Dans cet écosystème, l’information éclaire notre participation à la vie publique. <em>« Le journalisme tire son pouvoir de la prise de conscience que le public est aussi citoyen »</em>. Le numérique a bouleversé cet écosystème. Si la production de contenu n’est plus un problème, si la distribution ne coûte plus rien non plus, les sites d’information la maîtrisent beaucoup moins bien qu’avant, notamment du fait des grandes plateformes sociales. Sans compter que l’audience est entrée dans la boucle. <em>« Dans l’écosystème médiatique contemporain, les citoyens disposent d’un nouvel ensemble d’options allant au-delà du vote ou de la manifestation. »</em> Ils peuvent amplifier un contenu, y réagir… ce qui leur donne plus d’influence sur l’agenda des médias… Ils ne sont plus l’audience passive sur laquelle on déversait des contenus. Au contraire, l’amplification est devenue éminemment politique. Sans compter qu’ils peuvent désormais produire des médias ou des formes médiatiques (comme le #hastag) qui amplifient les médias. Ces nouvelles dynamiques transforment considérablement le schéma originel. </p>

  495. 

  496. <p><img src="http://www.internetactu.net/wp-content/uploads/2019/04/Brodcastmodel-300x225.png" alt="" class="alignleft size-medium wp-image-34209" srcset="http://www.internetactu.net/wp-content/uploads/2019/04/Brodcastmodel-300x225.png 300w, http://www.internetactu.net/wp-content/uploads/2019/04/Brodcastmodel-768x576.png 768w, http://www.internetactu.net/wp-content/uploads/2019/04/Brodcastmodel.png 800w" sizes="(max-width: 300px) 100vw, 300px"/> <img src="http://www.internetactu.net/wp-content/uploads/2019/04/Plateformsmodels-300x225.png" alt="" class="alignleft size-medium wp-image-34210" srcset="http://www.internetactu.net/wp-content/uploads/2019/04/Plateformsmodels-300x225.png 300w, http://www.internetactu.net/wp-content/uploads/2019/04/Plateformsmodels-768x576.png 768w, http://www.internetactu.net/wp-content/uploads/2019/04/Plateformsmodels.png 800w" sizes="(max-width: 300px) 100vw, 300px"/><br/>

  497. <em>Image : la simplicité du modèle de diffusion classique des médias comparé à la complexité de l’écosystème numérique avec ses bugs et ses mauvais acteurs. </em></p>

  498. 

  499. <p>La grande difficulté désormais, estime Zuckerman, c’est la découverte ! Comment gagner de l’attention dans des systèmes où des <em>« courtiers de l’attention »</em> (FB, Twitter, Google notamment) gèrent cette découverte ? </p>

  500. 

  501. <p>Ces nouvelles dynamiques posent plusieurs problèmes, explique le chercheur. Le premier est économique. Le fait de détacher la distribution de la production tue le business modèle des médias et du journalisme : ce sont les modalités de découverte qui accaparent désormais l’attention et les revenus. <em>« La démocratie exige non seulement un journalisme de qualité, mais également un auditoire de citoyens »</em>, rappelle-t-il. Le problème n’est pas seulement la question de payer pour l’information, pour qu’un journaliste décortique par exemple les possibles abus locaux cachés dans un procès verbal de délibérations municipales, mais bien également que cette histoire puisse atteindre les moteurs attentionnels. </p>

  502. 

  503. <p>Zuckerman dénonce la nature addictive des technologies, mais il souligne également que cet écosystème a généré l’apparition de « mauvais » acteurs, qui sont entrés dans le jeu pour s’accaparer audiences ou revenus, en ciblant les points vulnérables de l’écosystème, via des bots, des « darks ads », le harcèlement, le trolling, et bien sûr la production industrielle de désinformation. </p>

  504. 

  505. <p>Au final, ces modèles ont produit d’innombrables bugs (chambres d’échos, polarisation, effets de foules, développement d’informations conspirationnistes, filtrage algorithmique, innombrables problèmes de modération, de contrôle, de censure…). Et tous ces problèmes s’imbriquent entre médias, réseaux sociaux et participation civique et sont interreliés les uns les autres. Ce qui signifie, explique Zuckerman, que pour améliorer les choses, il y a besoin d’un travail commun entre médias, plateformes et citoyens. Mais surtout, insiste-t-il dans son article, nous avons besoin d’autres plateformes. </p>

  506. 

  507. <p>Dans son livre, <em>Pourquoi la démocratie a besoin d’une presse détestable</em> (<em>Why Democracies Need an Unlovable Press</em>, 2008, Polity Press, non traduit), le professeur en journalisme <a href="https://en.wikipedia.org/wiki/Michael_Schudson">Michael Schudson</a> expliquait que l’un des rôles des médias était d’améliorer la démocratie. En s’inspirant de ce constat, Ethan Zuckerman a écrit <a href="https://medium.com/trust-media-and-democracy/six-or-seven-things-social-media-can-do-for-democracy-66cee083b91a">un article</a> pour inviter les médias sociaux eux aussi à s’intéresser à la démocratie et à la favoriser. Zuckerman rappelle que les médias sociaux ont un rôle d’information à prendre au sérieux, notamment quand ils parviennent à toucher les gens les plus éloignés de l’information ou à leur apporter des informations qui les concernent. Ils permettent d’amplifier les informations et les enjeux. Ils peuvent être des outils pour la connexion et la solidarité. Ils peuvent être des espaces de mobilisation et pourraient être aussi des espaces de délibération et de débat et des outils pour nous montrer une diversité de points de vue. Et surtout, insiste Zuckerman, ils pourraient également devenir des modèles d’espaces gouvernés démocratiquement. C’est pour l’instant loin d’être le cas, mais le chercheur pointe les efforts de Reddit en la matière où, certaines communautés (pas toutes, beaucoup des forums de Reddit sont gangrénés par les discours racistes et haineux…), ont expérimenté et mis en place des principes de gouvernance participatifs originaux pour maximiser les discussions constructives (voir notamment <a href="https://civilservant.io/moderation_experiment_r_science_rule_posting.html">le travail</a> mené par Nathan Matias via <a href="https://civilservant.io/">Civil Servant</a>). </p>

  508. 

  509. <p>Bien sûr, les réseaux sociaux sont loin de promouvoir toutes ces fonctions – certainement parce que certains de ces objectifs sont incompatibles avec leurs modèles économiques : la polarisation politique et les insultes génèrent plus de pages vues que la délibération ou la promotion de la diversité. </p>

  510. 

  511. <p>Pour Zuckerman, cette impasse possible montre qu’il nous faut inventer d’autres médias sociaux. <em>« Mon objectif en proposant ces orientations que les médias sociaux pourraient adopter pour la démocratie est double. Alors que nous exigeons que Facebook, Twitter et d’autres fassent mieux, nous devons savoir ce que nous demandons. Je veux que Facebook soit plus respectueux de mes informations personnelles, plus dédié à m’aider à communiquer avec mes amis que de me vendre aux annonceurs, mais je veux aussi qu’ils réfléchissent au but des objectifs démocratiques qu’ils espèrent atteindre. Deuxièmement, je ne crois pas que nous devrions avoir un ou deux réseaux de médias sociaux. Mon espoir est un monde où nous pourrions avoir des dizaines de réseaux sociaux interopérables centrés sur différents buts et objectifs. »</em></p>

  512. 

  513. <p>À Sciences Po, Zuckerman va plus loin. Il rappelle brièvement l’histoire des médias publics et comment les questions de régulation ont amené à créer des chaînes de télévision et de radio publique. Aux États-Unis, gouvernements et fondations ont décidé alors de construire « autre chose », d’autres médias selon d’autres principes et valeurs. Avons-nous besoin de médias sociaux publics ? De plateformes en communs ? Certainement ! </p>

  514. 

  515. <p>Zuckerman esquisse trop rapidement quelques principes clefs pour ces réseaux à venir : <em>« la pluralité comme but, l’intérêt public comme esprit et la participation comme mode de gouvernance »</em>. Pour lui, les réseaux sociaux dont nous avons besoin doivent reposer sur une modalité de gouvernance plus démocratique, doivent favoriser la pluralité et le débat, et doivent avoir un objectif favorisant le bien public. Bien évidemment, la force de Zuckerman, c’est qu’il a un modèle à montrer comme preuve de concept : <a href="https://gobo.social/">Gobo</a> (<a href="http://www.internetactu.net/2017/12/14/parametrer-notre-bulle-de-filtre/">dont nous avions déjà longuement parlé</a>). Certes, comme nous le disions déjà, Gobo est imparfait, mais il nous montre que d’autres modalités de fonctionnement sociales sont possibles et qu’une attente pour plus de diversité d’interaction est nécessaire et possible. </p>

  516. 

  517. <p>Comme nous le soulignions <a href="http://www.internetactu.net/2019/01/15/retro-design-de-lattention-depasser-le-temps/">dans nos constats sur la question attentionnelle</a> en pointant la toxicité de certaines architectures sociales proéminentes, l’enjeu de produire d’autres formes d’échanges, d’autres modalités d’interactions et d’autres formes attentionnelles demeure entière. À l’heure où nos outils sociaux se concentrent sur quelques grands services, il est plus que nécessaire de rouvrir les possibles ! </p>

  518. 

  519. <p>Hubert Guillaud</p>

  520.   </article>

  521. </section>

  522. 

  523. 

  524. <nav id="jumpto">

  525.   <p>

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

  527.     <a href="http://www.internetactu.net/2019/04/09/medias-plateformes-sociales-et-citoyennete/">Source originale</a> |

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

  529.   </p>

  530. </nav>

  531. 

  532. <footer>

  533.   <div>

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

  535.     <p>

  536.       Bonjour/Hi!

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

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

  539.     </p>

  540.     <p>

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

  542.     </p>

  543.     

  544.     <p>

  545.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  562.     </p>

  563.     <p>

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

  565.     </p>

  566.     <p>

  567.       Je ne traque pas ta navigation mais mon

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

  569.       conserve des logs d’accès.

  570.     </p>

  571.   </div>

  572. </footer>

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

  574.   ;(_ => {

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

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

  577.       e.preventDefault()

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

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

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

  581.     })

  582.   })()

  583. </script>