A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Notre accompagnement (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://updr.fr/notre-accompagnement/">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>Notre accompagnement</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://updr.fr/notre-accompagnement/" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-06-20
  72. </p>
  73. </nav>
  74. <hr>
  75. <figure class="wp-block-image aligncenter size-full is-resized"><img fetchpriority="high" decoding="async" src="https://updr.fr/wp-content/uploads/2023/02/blacklivesmatter.png" alt="" class="wp-image-69" srcset="https://updr.fr/wp-content/uploads/2023/02/blacklivesmatter.png 1500w, https://updr.fr/wp-content/uploads/2023/02/blacklivesmatter-300x200.png 300w, https://updr.fr/wp-content/uploads/2023/02/blacklivesmatter-1024x683.png 1024w, https://updr.fr/wp-content/uploads/2023/02/blacklivesmatter-768x512.png 768w" sizes="(max-width: 690px) 100vw, 690px"></figure>
  76. <p>Tu es une personne engagée, ou membre d’un collectif engagé, et tu souhaites développer ton indépendance numérique au travers d’un site web ? Nous pouvons t’accompagner. Voilà ce que nous pouvons te proposer :</p>
  77. <ul>
  78. <li><strong>Un audit de tes besoins : </strong>quel site web, pour partager quoi, avec quel outil ? Ces questions, on se les pose très souvent, et on peut te faire bénéficier de cette expérience.</li>
  79. <li><strong>Un hébergement et un suivi technique de ton site :</strong> en gros on te met en place le site dont tu as besoin, avec l’outil le plus adapté (<a href="https://wordpress.com/fr/">WordPress</a>, <a href="https://www.dokuwiki.org/dokuwiki">Dokuwiki</a>, <a href="https://yeswiki.pro">Yeswiki</a>, <a href="https://getgrav.org/">Grav</a>, <a href="https://gohugo.io/">Hugo</a>, etc). Ensuite, on le bichonne, on le personnalise un peu, on le met à jour, on évite les cyberattaques, toussa toussa.</li>
  80. <li><strong>Un hébergement et un suivi technique de ton podcast</strong> : avec un outil libre et éthique : <a href="https://castopod.org/">Castopod</a>.</li>
  81. <li><strong><strong>Une formation à la prise en main de ton site</strong> : </strong>nous te rendons autonome pour que tu puisses alimenter ton site en contenus bien sûr, mais aussi pour le mettre à jour et l’arroser régulièrement comme une jolie petite plante.</li>
  82. <li><strong>Une aide à la structuration de ton site :</strong> créer un site web, c’est à la fois simple et compliqué. Par où commencer ? Quelle organisation du contenu ? Nous pouvons te faire profiter de notre expérience.</li>
  83. <li><strong>Une aide à la valorisation de tes contenus</strong> : créer c’est bien, mais communiquer reste un passage souvent obligé. Nous te proposons de t’offrir notre expérience d’une communication sans compromis sur les valeurs (réseaux sociaux, newsletter, etc.).</li>
  84. <li><strong>Un accompagnement sur tout le reste :</strong> les questions juridiques (RGPD, mentions légales), les questions éthiques (être ou ne pas être… sur Tik Tok ?), les questions économiques (comment gagner de l’argent grâce à mon contenu ?).</li>
  85. </ul>
  86. <h2 class="wp-block-heading">Nos engagements</h2>
  87. <p><strong>Tu auras ton propre bout de web !</strong> Fondamentalement, notre objectif est de te permettre d’avoir ton petit bout de web à toi, sur lequel tu seras indépendant, responsable, et en maîtrise de tes contenus.</p>
  88. <p><strong>Tu seras accompagné, mais autonome !</strong> Notre mission, c’est de t’accompagner, et de te rendre autonome sur ton site, avec tes contenus.</p>
  89. <p><strong>Tu seras libre !</strong> Tu peux décider de changer d’outils, de passer par un autre hébergeur que le nôtre, de nous quitter à tout moment. Nous garantissons un maximum d’interopérabilité, sauvegardes, ouverture. Nous prônons et n’utilisons que des <a href="https://fr.wikipedia.org/wiki/Logiciel_libre">logiciels et services libres</a>.</p>
  90. <h2 class="wp-block-heading">Nos limites</h2>
  91. <p>Si notre accompagnement stratégique est fondamentalement sur mesure, notre accompagnement technique ne l’est pas. Tes besoins doivent être donc limités, voire minimalistes pour que nous puissions sereinement héberger et éditer ton site.</p>
  92. <p>Nous ne sommes pas des professionnels de l’hébergement. Il peut donc y avoir des ratés, des mises hors service, un site inaccessible. Nous nous engageons à faire de notre mieux, mais pas à faire aussi bien que les mastodontes du marché. La bienveillance et la confiance respectives sont indispensables dans notre partenariat.</p>
  93. <p><em>Note : Si nos limites te posent problème ou si tes besoins sont supérieurs à ce que nous proposons, tu trouveras sans doute ton bonheur parmi l’un des <a href="https://www.chatons.org/">CHATONS</a> (Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires). On peut en discuter.</em></p>
  94. <h2 class="wp-block-heading">Combien ça coûte ?</h2>
  95. <p>Nous pratiquons le <a href="https://david.mercereau.info/ma-pratique-du-prix-libre-et-conscient/">prix libre et conscient</a>. Nous serons transparents sur ce que nous coûte ton accompagnement et te proposerons ensuite de contribuer à la hauteur de tes capacités et de tes besoins. L’objectif ici est d’être radicalement abordables.</p>
  96. <h2 class="wp-block-heading">Intéressé⋅e ?</h2>
  97. <p>Contacte-nous à <strong>bonjour [arobase] updr [point] fr</strong></p>
  98. </article>
  99. <hr>
  100. <footer>
  101. <p>
  102. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  103. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  104. </svg> Accueil</a> •
  105. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  106. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  107. </svg> Suivre</a> •
  108. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  109. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  110. </svg> Pro</a> •
  111. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  112. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  113. </svg> Email</a> •
  114. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  116. </svg> Légal</abbr>
  117. </p>
  118. <template id="theme-selector">
  119. <form>
  120. <fieldset>
  121. <legend><svg class="icon icon-brightness-contrast">
  122. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  123. </svg> Thème</legend>
  124. <label>
  125. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  126. </label>
  127. <label>
  128. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  129. </label>
  130. <label>
  131. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  132. </label>
  133. </fieldset>
  134. </form>
  135. </template>
  136. </footer>
  137. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  138. <script>
  139. function loadThemeForm(templateName) {
  140. const themeSelectorTemplate = document.querySelector(templateName)
  141. const form = themeSelectorTemplate.content.firstElementChild
  142. themeSelectorTemplate.replaceWith(form)
  143. form.addEventListener('change', (e) => {
  144. const chosenColorScheme = e.target.value
  145. localStorage.setItem('theme', chosenColorScheme)
  146. toggleTheme(chosenColorScheme)
  147. })
  148. const selectedTheme = localStorage.getItem('theme')
  149. if (selectedTheme && selectedTheme !== 'undefined') {
  150. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  151. }
  152. }
  153. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  154. window.addEventListener('load', () => {
  155. let hasDarkRules = false
  156. for (const styleSheet of Array.from(document.styleSheets)) {
  157. let mediaRules = []
  158. for (const cssRule of styleSheet.cssRules) {
  159. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  160. continue
  161. }
  162. // WARNING: Safari does not have/supports `conditionText`.
  163. if (cssRule.conditionText) {
  164. if (cssRule.conditionText !== prefersColorSchemeDark) {
  165. continue
  166. }
  167. } else {
  168. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  169. continue
  170. }
  171. }
  172. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  173. }
  174. // WARNING: do not try to insert a Rule to a styleSheet you are
  175. // currently iterating on, otherwise the browser will be stuck
  176. // in a infinite loop…
  177. for (const mediaRule of mediaRules) {
  178. styleSheet.insertRule(mediaRule.cssText)
  179. hasDarkRules = true
  180. }
  181. }
  182. if (hasDarkRules) {
  183. loadThemeForm('#theme-selector')
  184. }
  185. })
  186. </script>
  187. </body>
  188. </html>