Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <!doctype html>
  2. <html lang=fr>
  3. <head>
  4. <!-- Always define the charset before the title -->
  5. <meta charset=utf-8>
  6. <title>Pérennité et stockage des liens — Biologeek — David Larlet</title>
  7. <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9. <!-- Fake favicon, to avoid extra request to the server -->
  10. <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  11. <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  12. <link rel="manifest" href="/manifest.json">
  13. <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  14. <noscript>
  15. <style type="text/css">
  16. /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
  17. body {
  18. font-family: 'EquityTextB', serif;
  19. }
  20. h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
  21. font-family: 'EquityCapsB', sans-serif;
  22. font-variant: normal;
  23. }
  24. </style>
  25. </noscript>
  26. <!-- Canonical URL for SEO purposes -->
  27. <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20070415-perennite-et-stockage-des-liens">
  28. </head>
  29. <body>
  30. <div>
  31. <header>
  32. <nav>
  33. <p>
  34. <small>
  35. Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
  36. </small>
  37. </p>
  38. </nav>
  39. </header>
  40. <section>
  41. <h1 property="schema:name">Pérennité et stockage des liens</h1>
  42. <article typeof="schema:BlogPosting">
  43. <div property="schema:articleBody">
  44. <img src="/static/david/biologeek/images/logos/blogmarks.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
  45. <p>Je viens de passer des heures à classer, trier, supprimer mes liens favoris (ou bookmarks). Hormis le constat que Firefox peut facilement prendre 2Go de ram, j'ai repris conscience de la nature éphémère du web. Je précise <em>re</em> car j'avais récemment fait un <a href="http://validator.w3.org/checklink">checklink</a> et j'avais été assez surpris de constater le nombre de liens morts après quelques mois/années seulement. Voici quelques idées à chaud en vue d'arriver à une solution pérenne.</p>
  46. <h2>Pérennité des liens</h2>
  47. <h3>Garder une copie du contenu en cache</h3>
  48. <p>C'est la base. La grande majorité des pages sont liées pour leur contenu et le poids du html associé n'est pas vraiment limitant donc pourquoi s'en priver&nbsp;? Lorsqu'un site ferme, c'est la copie en cache qui peut être proposée mais on en vient alors immédiatement au deuxième point&nbsp;:</p>
  49. <h3>Passer par des redirections</h3>
  50. <p>Je ne vois pas d'autre moyen (relativement simple) pour pouvoir choisir de rediriger vers le site en question ou vers la copie locale en cache si le site a fermé. Cette solution présente quand même un intérêt relativement limité pour le rédacteur qui doit préalablement enregistrer chaque lien qu'il souhaite faire...</p>
  51. <p>Bon ça casse aussi, en partie, le principe du web mais j'ai l'impression que c'est une solution de plus en plus adoptée.</p>
  52. <h2>Stockage des liens</h2>
  53. <h3>Pouvoir les partager</h3>
  54. <p>Le partage doit pouvoir être possible à deux niveaux&nbsp;:</p>
  55. <ul>
  56. <li>public/privé&nbsp;: il y a des liens que je souhaite partager et d'autres non&nbsp;;</li>
  57. <li>entre différents ordinateurs&nbsp;: j'utilise pour le moment <a href="http://www.foxmarks.com/">FoxMarks</a> mais je suis sûr qu'il peut y avoir plus simple/accessible (installer firefox + l'extension sur une machine extérieure c'est lourd).</li>
  58. </ul>
  59. <p>Je ne vois qu'une interface web permettant de cumuler ces deux avantages.</p>
  60. <h3>Facilement les alimenter et les classer</h3>
  61. <p>Il y a plusieurs types d'enregistrement d'un favori&nbsp;:</p>
  62. <ul>
  63. <li>il serait intéressant de pouvoir le faire via un petit raccourci JavaScript si c'est en ligne&nbsp;;</li>
  64. <li>la liste pourrait aussi être alimentée par un flux RSS, par exemple celui des billets favoris de mon compte Google Reader...</li>
  65. </ul>
  66. <p>Il faudrait pouvoir les classer intelligemment/sémantiquement mais on en vient toujours au même affrontement simplicité d'enregistrement vs. ajout de méta-données long et fastidieux. Les tags sont pour l'instant le compromis accepté par l'utilisateur mais il faudrait peut-être lui en demander plus&nbsp;?</p>
  67. <h2>Des idées&nbsp;?</h2>
  68. <p>Inutile de vous dire que ce que je suis en train de décrire s'inscrit dans mon <a href="https://larlet.fr/david/biologeek/archives/20070131-reve-de-geek/">rêve de geek</a> et j'espère pouvoir le mettre en application sur mon propre site (sinon <a href="http://www.blogmarks.net/">BlogMarks</a> serait bien sûr une solution toute trouvée).</p>
  69. <p>À ce sujet, le projet <a href="http://www.pimlico-project.org/">Pimlico</a> semble intéressant s'ils mettent en place une possibilité de synchronisation/consultation web.</p>
  70. <p>Bon avec tout ça ma <a href="https://larlet.fr/david/biologeek/archives/20070224-objectifs-et-motivations-de-la-refonte-de-ce-blog/">refonte</a> n'avance pas... enfin ça en fait peut-être partie si je décide d'implémenter une telle solution :-).</p>
  71. </div>
  72. </article>
  73. <footer>
  74. <h6 property="schema:datePublished">— 15/04/2007</h6>
  75. </footer>
  76. </section>
  77. <section>
  78. <div>
  79. <h3>Articles peut-être en rapport</h3>
  80. <ul>
  81. <li><a href="/david/biologeek/archives/20120131-resolutions-rediriger-economiser-et-debattre/" title="Accès à ★ Résolutions : rediriger, économiser et débattre">★ Résolutions : rediriger, économiser et débattre</a></li>
  82. <li><a href="/david/biologeek/archives/20110112-resolutions-decouvrir-concretiser-et-transmettre/" title="Accès à ★ Résolutions : découvrir, concrétiser et transmettre">★ Résolutions : découvrir, concrétiser et transmettre</a></li>
  83. <li><a href="/david/biologeek/archives/20101130-de-lopendata-au-linkeddata-exemple-de-nosdonneesfr/" title="Accès à ★ De l&#39;OpenData au LinkedData : exemple de nosdonnees.fr">★ De l&#39;OpenData au LinkedData : exemple de nosdonnees.fr</a></li>
  84. </ul>
  85. </div>
  86. </section>
  87. <section>
  88. <div id="comments">
  89. <h3>Commentaires</h3>
  90. <div class="comment" typeof="schema:UserComments">
  91. <p class="comment-meta">
  92. <span class="comment-author" property="schema:creator">Eric Daspet</span> le <span class="comment-date" property="schema:commentTime">15/04/2007</span> :
  93. </p>
  94. <div class="comment-content" property="schema:commentText">
  95. <p>&quot;&quot;&quot;rediriger vers le site en question ou vers la copie locale en cache si le site a fermé. Cette solution présente quand même un intérêt relativement limité pour le rédacteur qui doit préalablement enregistrer chaque lien qu'il souhaite faire...&quot;&quot;&quot;<br />
  96. <br />
  97. Heureusement tu es informaticien et tu connais javascript. Il t'es donc facile de :<br />
  98. <br />
  99. 1- Faire un javascript qui va analyser tous les liens au chargement de ta page HTML à toi. Quand les liens sont vers un site externe, tu ajoutes un gestionnaire sur l'événement de clic.<br />
  100. Ce gestionnaire fait un appel Ajax vers une page X à toi avec le lien en paramètre, et reçoit un information qui lui dit si le lien doit être réécrit pour pointer vers la page en cache au lieu de la page d'origine.<br />
  101. Si tu veux être smart tu peux même faire que ça ne réécrit jamais le lien vers la page en cache mais éventuellement vers une page d'erreur qui dit que la cible ne fonctionne plus et qu'on propose (avec un lien) une version en cache<br />
  102. <br />
  103. 2- Ta page X peut avoir le comportement suivant :<br />
  104. - si le lien demandé n'est pas encore connu, ou qu'il est réputé fonctionnel, on répond qu'il n'y a pas lieu de changer ce lien<br />
  105. - si le lien demandé est réputé en erreur, alors on renvoie l'adresse de la page mise en cache quelque part (chez toi ou sur web.archive.org par exemple)<br />
  106. <br />
  107. 3- Faire une moulinette qui analyse régulièrement les logs de ton script en (2) pour :<br />
  108. - télécharger un cache des pages que tu n'as toujours pas en cache (ou dont le cache est trop vieux)<br />
  109. - vérifier si les pages cibles mènent vers une 404 ou pas, et mettre à jour l'information en conséquence<br />
  110. <br />
  111. Au final :<br />
  112. - Ca doit être réalisable dans un temps assez réduit<br />
  113. - Tout est automatisable, sans intervention manuelle (pas de page à sauvegarder manuellement)<br />
  114. - Ca dégrade très bien si le javascript est désactivé ou si ton script au (2) est injoignable / hors service (puisqu'au pire c'est le lien réel qui reste)<br />
  115. - Ca te permet de basculer vers un cache externe ou unepage d'erreur spécifique si tu le souhaites<br />
  116. - Les liens restent les liens &quot;réels&quot; dans le code HTML, ce qui permet toujours aux gens de copier/coller le lien réel et qui ne t'oblige pas à faire réécrire dynamiquement tous tes liens par ton outil de publication.</p>
  117. </div>
  118. </div>
  119. <div class="comment" typeof="schema:UserComments">
  120. <p class="comment-meta">
  121. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">15/04/2007</span> :
  122. </p>
  123. <div class="comment-content" property="schema:commentText">
  124. <p>@Eric Daspet : ta solution est très intéressante et j'avais commencé à l'envisager. Le seul bémol que je pourrais trouver c'est pour les nom de domaine qui se font racheter (souvent par du pr0n) car le lien restant dans la page pour le référencement par exemple est le lien vers ce site là.<br />
  125. <br />
  126. Pour le rafraichissement du cache je le déconseille en automatique par contre car ça serait dommage d'écraser la bonne version par quelque chose qui n'a rien à voir (se baser sur les réponses peu prudent à mon avis).<br />
  127. <br />
  128. Mais sinon c'est très sexy :-). Il faut encore que j'y réfléchisse.</p>
  129. </div>
  130. </div>
  131. <div class="comment" typeof="schema:UserComments">
  132. <p class="comment-meta">
  133. <span class="comment-author" property="schema:creator">Mehdi Kabab</span> le <span class="comment-date" property="schema:commentTime">16/04/2007</span> :
  134. </p>
  135. <div class="comment-content" property="schema:commentText">
  136. <p>Sur la question du partage des liens entre différents ordinateurs, ainsi que sur la possibilité d'avoir une gestion d'accès privé/public, il existe le navigateur <a href="http://flock.com" title="http://flock.com" rel="nofollow">Flock</a> (basé sur Gecko). Ce dernier permet en effet de se conjuguer avec un service de social bookmarking tel que <a href="http://del.icio.us" title="http://del.icio.us" rel="nofollow">del.icio.us</a> ou encore <a href="http://www.shadows.com" title="http://www.shadows.com" rel="nofollow">Shadows</a>. En pratique cela revient à gérer ses bookmarks en ligne via son navigateur, ce qui est assez pratique. Il prendra prochainement en charge le service <a href="http://ma.gnolia.com/" title="http://ma.gnolia.com/" rel="nofollow">Ma.gnolia.com</a>.<br />
  137. <br />
  138. Petite note sur sa gestion des bookmarks : Flock gère des collections de tags et non pas des signets organisés dans des répertoires. Cela est assez déroutant au début (les habitudes ont la vie dure :-)) mais à l'utilisation se révèle être un choix plutôt judicieux. En effet, lorsque l'on vient à gérer plus de 2 Mo de bookmarks, il est facile de ne plus se souvenir de l'emplacement exact d'un signet et comme on les duplique rarement... Là, il suffit de définir plusieurs tags à un signet puis de chercher à l'atteindre via divers mots-clés. Au final, on est plus productif.</p>
  139. </div>
  140. </div>
  141. <div class="comment" typeof="schema:UserComments">
  142. <p class="comment-meta">
  143. <span class="comment-author" property="schema:creator">karl</span> le <span class="comment-date" property="schema:commentTime">29/04/2007</span> :
  144. </p>
  145. <div class="comment-content" property="schema:commentText">
  146. <p>Pour du contenu pérenne. ;)<br />
  147. <br />
  148. <a href="http://impressive.net/people/gerald/1999/01/http-archive/" title="http://impressive.net/people/gerald/1999/01/http-archive/" rel="nofollow">impressive.net/people/ger...</a><br />
  149. <br />
  150. </p>
  151. </div>
  152. </div>
  153. <div class="comment" typeof="schema:UserComments">
  154. <p class="comment-meta">
  155. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">29/04/2007</span> :
  156. </p>
  157. <div class="comment-content" property="schema:commentText">
  158. <p>Merci pour les liens.<br />
  159. <br />
  160. @Mehdi : depuis le temps qu'on me parle de Flock il faudra que j'essaye.<br />
  161. <br />
  162. @karl : intéressant, ça existe même en python : <a href="http://logicerror.com/archiverProxy" title="http://logicerror.com/archiverProxy" rel="nofollow">logicerror.com/archiverPr...</a></p>
  163. </div>
  164. </div>
  165. <div class="comment" typeof="schema:UserComments">
  166. <p class="comment-meta">
  167. <span class="comment-author" property="schema:creator">speedyop</span> le <span class="comment-date" property="schema:commentTime">03/05/2007</span> :
  168. </p>
  169. <div class="comment-content" property="schema:commentText">
  170. <p>j'utilise firefox + del.icio.us<br />
  171. + foxylicious = plugin pour synchroniser la barre de bookmark avec le compte del.icio.us<br />
  172. + del.icio.us extension : ajoute une icone pour facilement ouvrir la pop up d'ajout de lien </p>
  173. </div>
  174. </div>
  175. </div>
  176. </section>
  177. <footer>
  178. <nav>
  179. <p>
  180. <small>
  181. Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
  182. </small>
  183. </p>
  184. </nav>
  185. </footer>
  186. </div>
  187. <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  188. <script data-no-instant>InstantClick.init()</script>
  189. </body>
  190. </html>