davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
224 提交
1 分支
目录树: f8f4c58548
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'f8f4c58548'
${ noResults }
larlet-fr-david-cache/cache/9e92a5ac171038de1c58a2ab90e.../index.html

index.html 35KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638 
  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>Syndication mon amour (archive) — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

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

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

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

  31.   <link rel="canonical" href="https://openweb.eu.org/articles/syndication-mon-amour">

  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.   Syndication mon amour (archive)

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

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://openweb.eu.org/articles/syndication-mon-amour">Source originale du contenu</a></h3>

  463.     <h2>Le besoin</h2>

  464. 

  465. <p>Partons du principe que tous les jours, vous naviguez sur des sites Internet. Pour cela, vous utilisez généralement un navigateur Web, comme Internet Explorer, Firefox, Chrome ou Safari. Lors de votre première visite sur un site, vous découvrez les contenus et services proposés. Formidable. Maintenant, laissons passer plusieurs jours et imaginons que vous ressentiez le besoin de revenir sur ce site. L’une des questions qui va se poser le plus fréquemment est « Quelles sont les nouveautés ? ». Vous allez donc chercher une rubrique quoi de neuf ou directement chercher les nouveaux contenus, les nouveaux produits, les nouvelles actualités, etc.</p>

  466. 

  467. <p>Maintenant, plaçons-nous dans une autre situation : et si vous deviez faire ceci pour plusieurs sites. Quelques exemples :</p>

  468. 

  469. <ul class="spip"><li> Surveiller les nouvelles petites annonces qui sont publiées sur plusieurs sites pour un produit donné,</li><li> suivre les news publiées sur différents organismes de presse,</li><li> suivre les derniers posts d’un ou plusieurs blogs,</li><li> surveiller l’activité d’un ou de plusieurs concurrents,</li><li> veiller sur des ressources et magazines professionnels ou pas,</li><li> agréger sur votre poste de travail,</li><li>  …</li></ul>

  470. 

  471. <p><strong>Comment mener à bien ces différentes tâches ?</strong></p>

  472. 

  473. <p>La première solution consiste à aller voir tous ces sites, et pour chacun de ces sites, regarder si une nouveauté a été publiée. Même si ces nouveautés sont faciles à trouver, vous risquez d’y passer pas mal de temps, et surtout, pendant tout ce temps, il faudra que vous soyez connecté.</p>

  474. 

  475. <p>Dans le cas contraire il vous faudra avoir autant d’onglets ouverts dans votre navigateur que de ressources à consulter pour une utilisation hors ligne. Heureusement il existe différentes solutions, dont une qui nous intéresse particulièrement : <strong>la syndication de contenus Web</strong>.</p>

  476. 

  477. <h2>De quoi s’agit t-il ?</h2>

  478. 

  479. <p>Pour un producteur de contenus, la syndication de contenu Web consiste à mettre à disposition un flux d’information contenant tout ou partie des contenus proposés. En pratique, à chaque nouvelle publication de contenu, un petit fichier au format <abbr title="Really Simple Syndication" lang="en" xml:lang="en">RSS</abbr> ou Atom sera mis à jour sur le serveur web. Ce fichier est mis à disposition sur les serveurs web et il devient lisible depuis l’extérieur. L’un de ses grands avantages est qu’il est structuré et qu’il est donc lisible par des logiciels.</p>

  480. 

  481. <p>Cette technologie n’est pas nouvelle, et Openweb vous en avait déjà montré les bases il y a 8 ans déjà :</p>

  482. 

  483. <p>Note : selon Wikipedia en français, la syndication de contenu Web est une forme de syndication dans laquelle une partie d’un site est accessible depuis d’autres sites. Cela est possible en y ajoutant une licence accordée à ses utilisateurs. Bien souvent, la syndication consiste à mettre à disposition un flux <abbr title="Really Simple Syndication" lang="en" xml:lang="en">RSS</abbr> avec l’en-tête du contenu récemment ajouté au site Web (par exemple, la dernière nouvelle (news en anglais) ou le dernier message (post en anglais) du forum.</p>

  484. 

  485. <p>Bien, c’est peut-être encore un peu abstrait, il est temps d’aller regarder un flux de syndication en vrai.</p>

  486. 

  487. <ol class="spip"><li> Dans le navigateur Firefox, choisissez dans le menu Affichage &gt; Barres de menus &gt; Personnaliser</li><li> Dans la liste d’icônes qui apparaissent, choisissez l’icône « S’abonner » et placez-la à côté de votre barre d’adresse.</li><li> À partir de maintenant, lorsque votre navigateur détectera un flux de syndication, il vous affichera ce bouton en mode activé</li><li> Si vous n’y êtes pas encore, rendez-vous à l’adresse <a href="http://openweb.eu.org" class="spip_url spip_out auto" rel="nofollow external">http://openweb.eu.org</a> et vous verrez que c’est le cas, grâce au code ci-dessous :</li></ol>

  488. 

  489. <pre>

  490. &lt;link rel="alternate" type="application/rss+xml" title="Syndiquer tout le site" href="http://openweb.eu.org/?page=backend" /&gt;

  491. </pre>

  492. 

  493. <p>Regardons un fichier de syndication, au hasard voici le principal flux de syndication d’Openweb (<a href="http://openweb.eu.org/?page=backend" class="spip_out" rel="external">http://openweb.eu.org/?page=backend</a>).</p>

  494. 

  495. <p>Ce fichier contient des items, correspondant aux derniers articles. Les plus curieux d’entre vous peuvent accéder au code du fichier (<abbr title="Really Simple Syndication" lang="en" xml:lang="en">RSS</abbr> en l’occurrence).</p>

  496. 

  497. <h2>Comment consulter le fichier ?</h2>

  498. 

  499. <p>À tout moment, il est possible d’accéder  à ce fichier depuis votre machine et afficher les informations qu’il contient.</p>

  500. 

  501. <p>Voici ce que cela donne, par exemple sous Thunderbird :

  502. <br/><a href="http://openweb.eu.org/IMG/jpg/syndication-thunderbird.jpg"><img src="http://openweb.eu.org/IMG/jpg/syndication-thunderbirdl.jpg" alt="Syndication sous Thunderbird (en image)"/></a></p>

  503. 

  504. <p>À ce propos, il faut maintenant se demander où afficher ces contenus. Il existe de nombreuses options :</p>

  505. 

  506. <ul class="spip"><li> Afficher des flux de syndication dans un logiciel installé sur votre poste, appelé <a href="http://fr.wikipedia.org/wiki/Agr%C3%A9gateur#Agr.C3.A9gation_en_local_.28logiciels.29" class="spip_out" rel="external">agrégateur de contenu</a>. Celui-ci peut :

  507. <ul class="spip"><li> être dédié spécifiquement à la lecteur de flux (exemple : Vienna)</li><li> être dédié à d’autres missions  (logiciel de mail ou navigateur web, qui vous servira alors d’agrégateur)</li></ul></li><li> Afficher un flux de syndication dans un service Web (Google Reader, Netvibes, voir d’<a href="http://fr.wikipedia.org/wiki/Agr%C3%A9gateur#Agr.C3.A9gation_en_ligne" class="spip_out" rel="external">autres services Web de syndication</a>)</li><li> Afficher un flux de syndication  dans une page ou un site Web (regardez l’agrégation de flux proposée par Openweb sur sa page d’accueil)</li><li> Afficher un flux de syndication sur un frigidaire. Et pourquoi pas, cela viendra peut-être ?</li></ul>

  508. 

  509. <p>Exercice : Imaginons maintenant que vous souhaitiez surveiller les actualités publiées sur plusieurs médias. Vous allez devoir tout d’abord vous abonner à chaque flux de syndication de chacun de ces sites, mais dès que cela sera fait, vous pourrez instantanément consulter l’ensemble des nouvelles informations disponibles sur votre poste de travail. En quelques secondes, vous aurez obtenu <strong>une vue d’ensemble des nouveaux contenus publiés sur de multiples sites</strong>. Les contenus disponibles contiennent généralement un titre, un résumé, et quelquefois le contenu intégral.  Si ce n’est pas le cas, vous devrez suivre un lien vers le site internet pour accéder aux contenus dans leur intégralité. Bien sûr, tout ce que vous aurez téléchargé sur votre poste deviendra disponible hors ligne, sans connexion. D’un point de vue de la productivité ou de la veille c’est une technologie redoutable. Une opération qui durait plusieurs dizaines de minutes et des centaines de clics devient possible en quelques secondes.</p>

  510. 

  511. <p>Ce n’est pas le seul avantage : <strong>la technologie de syndication est intrinsèquement accessible</strong>. Elle l’est au sens large, car un contenu devient disponible pour tous, mais aussi au sens de l’accessibilité aux personnes handicapées puisque l’opération met à disposition des contenus sous forme structurée et donc forcément au minimum lisibles par des machines.</p>

  512. 

  513. <p>La technologie est disponible, elle repose sur des formats ouverts, est largement répandue, relativement facile à déployer, et pourtant elle est en danger et peut-être en passe de s’éteindre. Voyons pourquoi.</p>

  514. 

  515. <h2>Le côté obscur</h2>

  516. 

  517. <p>La syndication semblait une technologie d’avenir et pourtant elle ne s’est pas développée aussi fortement qu’on aurait pu le penser. Existe-t-il des coupables ? Oui certainement et, vous allez voir, ils sont nombreux : c’est tout simplement <strong>nous tous</strong>.</p>

  518. 

  519. <h3>Les producteurs de contenus</h3>

  520. 

  521. <p>Mettez-vous à la place d’un producteur de contenus : un utilisateur équipé d’un agrégateur ne viendra pas systématiquement chercher les nouveautés sur son site. Il va tout d’abord regarder le titre, consulter un extrait et peut-être alors venir sur le site. Si le contenu de l’article est intégralement en place dans le flux de syndication, l’utilisateur n’aura pas forcément de raison de se rendre sur le site. Et cela n’est absolument pas neutre en termes d’audience, d’affichage de publicités, de nombre de pages vues. Or comme vous le savez, il est souvent onéreux de publier des contenus de qualité sur le web, et la rentabilité est un facteur décisif.</p>

  522. 

  523. <p>Il est donc nécessaire de pouvoir mesure l’audience correspondant aux vues hors site. Certains services existent mais d’une certaine manière, il y a une vraie perte de contrôle, un vrai lâcher-prise pour les créateurs de sites à proposer des flux de syndication.</p>

  524. 

  525. <p>Cette nécessité de lâcher-prise sur la forme est souvent perçue de façon négative, mais <strong>elle n’a pas que des inconvénients</strong> : certains visiteurs préfèrent consulter les contenus syndiqués qui permettent une consultation plus libre, et surtout aisément adaptable à leurs besoins. De plus, la cohérence des affichages des flux dans un agrégateur représente un réel gain de productivité. Dans ce cas, proposer des contenus syndiqués permet d’élargir son audience.</p>

  526. 

  527. <p>Pour finir, <strong>les producteurs de flux de syndication</strong>, même s’ils lâchent prise sur certains aspects, <strong>en sont et en restent les propriétaires</strong>, ce qui est moins évident sur des plateformes comme Facebook ou Twitter qui comme nous allons le voir plus loin ont tendance à les remplacer.</p>

  528. 

  529. <h3>Les navigateurs</h3>

  530. 

  531. <p>Les navigateurs, soucieux de simplifier au maximum leurs interfaces, ont décidé de supprimer les boutons signalant la détection d’un ou plusieurs flux, et la possibilité de s’abonner. Il faut savoir que pour les navigateurs, l’occupation de chaque pixel par une fonctionnalité représente un coût, une charge mentale supplémentaire pour les utilisateurs. En réalité, chaque bouton proposé à l’installation d’un navigateur va impacter l’apprentissage de la fonctionnalité qui lui correspond. Dans le cas d’une fonctionnalité un peu évoluée comme la syndication, laisser disponible ce bouton par défaut aurait été un acte militant pour le Web ouvert, et pour plusieurs raisons dont ce coût, ce n’est pas le choix qui a été fait.</p>

  532. 

  533. <p>Chrome a lancé le bal, Firefox a suivi, et c’est sans doute <strong>l’une des erreurs les plus funestes pour le Web ouvert au cours de ces dernières années</strong>. Vous l’avez vu, il existe des façons de remettre ces boutons en place, mais cela nécessite une action de la part de l’utilisateur.</p>

  534. 

  535. <h3>Les utilisateurs</h3>

  536. 

  537. <p>Oui, les utilisateurs n’ont pas forcément envie de s’abonner à cette technologie. L’approche qui consiste à télécharger les informations proposées dans des flux de syndication n’est pas si évidente. Consulter l’un des flux <abbr title="Really Simple Syndication" lang="en" xml:lang="en">RSS</abbr> du journal le Monde n’est pas équivalent à la consultation journalière du site du Monde. C’est sans doute la raison pour laquelle ce sont généralement les utilisateurs les mieux informés et les plus geeks qui utilisent cette technologie. Il est sans doute nécessaire de la démocratiser, nous verrons par la suite qu’il y a des approches pour faire cela intelligemment.</p>

  538. 

  539. <h3>Les services tiers</h3>

  540. 

  541. <p>Des services tiers comme Facebook et Twitter ont de plus en plus souvent remplacé les agrégateurs dans l’usage des internautes. Ces outils permettent de rassembler en un seul endroit des informations issues de très nombreuses sources. Elles ont cependant leur lot de problèmes : entre autres les formats sont propriétaires et les appels via des <abbr title="Application programming interface" lang="en" xml:lang="en">API</abbr> peuvent être refermés à tout moment ; c’est ce qui vient de se passer avec Twitter qui a décidé de <a href="http://www.lemonde.fr/technologies/article/2012/09/06/twitter-accelere-sa-fermeture-aux-developpeurs_1756694_651865.html" class="spip_out" rel="external">refermer les portes de l’écosystème qui l’a aidé à se développer</a>.</p>

  542. 

  543. <h2>La syndication n’est peut-être pas morte</h2>

  544. 

  545. <h3>Une technologie pour les utilisateurs</h3>

  546. 

  547. <p>Si vous aimez le web, vous devez aimer la syndication. Voici une technologie qui permet aux utilisateurs d’avoir la maîtrise de leur façon d’accéder aux contenus Web et qui permet d’accéder à l’information de manière efficace et rapide. C’est aussi une technologie qui rend les contenus accessibles au sens large et qui permet de faciliter leur reprise et leur référencement. En permettant aux utilisateurs de réaliser en quelques secondes des tâches qui pourraient prendre des heures (contrôler la présence de nouveaux contenus sur 50 sites par exemple), la syndication est un vrai outil d’amélioration de la productivité ; c’est également <strong>un fantastique outil de veille</strong>.</p>

  548. 

  549. <p><strong>La syndication est un pilier du web ouvert, efficient et durable</strong>. C’est une technologie qui est faite et pensée pour les utilisateurs ; pour un qualiticien, une technologie qui répond aux exigences des utilisateurs est forcément un atout concurrentiel pour les producteurs de contenus qui décident de véritablement se l’approprier.</p>

  550. 

  551. <h3>Encore un renversement de la pensée</h3>

  552. 

  553. <p>En revanche, les producteurs de contenus doivent apprendre à perdre une partie du contrôle qu’ils avaient sur la diffusion de leurs informations. En ce sens, la syndication est l’un des nombreux artefacts du renversement de paradigme imposé par le Web : les producteurs proposent, les utilisateurs disposent. Si vos contenus sont mauvais, personne ne s’abonnera à vos flux de syndication ; en revanche, si des milliers de personnes s’abonnent, vous trouverez le moyen de valoriser vos contenus, vous n’aurez que l’embarras du choix.</p>

  554. 

  555. <h3>Un véritable outil de management </h3>

  556. 

  557. <p>Nous avons parlé d’articles et de news, mais dès qu’une nouveauté se présente quelque part, il est possible d’en faire un flux : pourquoi ne serait-il pas possible de s’abonner aux dernières formations, aux dernières embauches effectuées dans votre entreprise, aux derniers bugs résolus sur votre application, aux dernières références de votre entreprise, aux derniers travaux effectués pour vos clients ? Les flux sont un moyen efficace pour afficher vos actualités partout où cela peut avoir une valeur ajoutée : sur vos profils professionnels, sur d’autres services connexes à votre activité : si vous mettez en ligne des présentations, des vidéos, etc. La seule limite est votre imagination.</p>

  558. 

  559. <p>Par exemple, un effet ô combien bénéfique de la syndication est de permettre d’<strong>alléger le client mail</strong> : au lieu de recevoir des centaines d’e-mails dont le traitement est extrêmement chronophage, les flux ont de nombreux atouts : non seulement, on a l’avantage d’avoir une unique source (là où un simple oubli de mise en copie d’un destinataire peut gripper le système), mais en plus cette source est bien plus légère que les e-mails classiques. Les économies en stockage, téléchargement et plus généralement en temps peuvent être fantastiques.</p>

  560. 

  561. <h3>Un outil pour la communication et la qualité Web</h3>

  562. 

  563. <p>Ce n’est pas tout, les flux contribuent à la sélection et à la diffusion de contenus sur vos sites. Ainsi, lorsque vous gérez vous-même un site grâce à un <abbr title="Content Management System" lang="en" xml:lang="en">CMS</abbr> (système de gestion de contenus), il existe de nombreux modules qui vous permettent de récupérer exactement ce qui vous intéresse et de l’afficher dans le cadre de votre site. Ce sera par exemple le flux d’un auteur, d’une rubrique ou d’un tag spécifique.<br class="autobr"/>

  564. Vous pouvez récupérer les flux pour alimenter votre site sur un sujet particulier (flux des actualités Google par exemple ou de votre Seenthis) rendant son contenu plus pertinent et vivant. Grâce au même mécanisme, votre propre flux de syndication est disponible pour être affiché dans d’autres sites, <strong>il génère également des liens entrants, du trafic et du référencement</strong>.</p>

  565. 

  566. <h3>Le combat continue</h3>

  567. 

  568. <p>Cela ne fait aucun doute, la syndication est utile et pratique. Pourtant, elle n’est pas aussi répandue qu’elle le devrait. Dans mes cours sur la qualité Web, si je m’aperçois que mes étudiants ne connaissent pas cette technologie et ne la pratiquent pas au quotidien, j’interromps mon cours, je mets en marche mon agrégateur, je fais une démonstration qui consiste à actualiser les 50 flux que je suis quotidiennement et j’explique à mes étudiants que le fait de ne pas utiliser une technologie de ce type pour la veille n’est pas une option.</p>

  569. 

  570. <p><strong>Un professionnel du Web sait travailler avec la syndication. Mieux, il ne devrait pas travailler sans. </strong></p>

  571. 

  572. <p>Il est peut-être temps de reprendre le flambeau de l’explication. Militons pour que nos navigateurs aient un bouton de syndication par défaut. Publions des articles, incitons nos utilisateurs à s’abonner à nos flux, remettons à la mode le logo de syndication. Bref, il est de nouveau temps de se battre pour que cette technologie ne tombe pas dans l’oubli au profit des flux proposés par des sociétés en mesure de les fermer à tout moment. À l’heure où les <abbr title="Application programming interface" lang="en" xml:lang="en">API</abbr> de Twitter se referment, sachez que ce que je décris est une réalité. Ce n’est pas une hypothèse : des entreprises comme Twitter limitent de plus en plus l’accès à leurs <abbr title="Application programming interface" lang="en" xml:lang="en">API</abbr>.</p>

  573. 

  574. <p>Pour les utilisateurs non professionnels, il faudra peut-être passer par une  appropriation de la syndication sans le dire. C’est ce qui se fait dans différentes applications mobiles, où les utilisateurs se contenteront  de profiter de la syndication sans jamais avoir à en prononcer le mot. Nous aurons alors un Web composé de flux invisibles. Pourquoi pas, après tout.</p>

  575.   </article>

  576. </section>

  577. 

  578. 

  579. <nav id="jumpto">

  580.   <p>

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

  582.     <a href="https://openweb.eu.org/articles/syndication-mon-amour">Source originale</a> |

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

  584.   </p>

  585. </nav>

  586. 

  587. <footer>

  588.   <div>

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

  590.     <p>

  591.       Bonjour/Hi!

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

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

  594.     </p>

  595.     <p>

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

  597.     </p>

  598.     

  599.     <p>

  600.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  617.     </p>

  618.     <p>

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

  620.     </p>

  621.     <p>

  622.       Je ne traque pas ta navigation mais mon

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

  624.       conserve des logs d’accès.

  625.     </p>

  626.   </div>

  627. </footer>

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

  629.   ;(_ => {

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

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

  632.       e.preventDefault()

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

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

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

  636.     })

  637.   })()

  638. </script>