A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Rétro-confinement (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="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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>
  31. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="http://www.aubryconseil.com/post/Retro-confinement">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Rétro-confinement</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="http://www.aubryconseil.com/post/Retro-confinement" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <div class="post-excerpt"><blockquote><p>Si on ne profite pas de cette situation incroyable pour changer, c’est gâcher une crise</p></blockquote>
  69. <p>C'est Bruno Latour, un philosophe et sociologue, qui a inspiré ce billet.</p></div>
  70. <div class="post-content"><p>Il vient de publier un article dans AOC Media : <a href="http://www.bruno-latour.fr/fr/actuelles_notes.html">Imaginer les gestes-barrières contre le retour à la production d’avant-crise</a>.</p>
  71. <p>À la fin de l'article (et aussi à part) on trouve un questionnaire, ou plutôt une aide à l'auto-description, ou encore mieux un outil de discernement.</p>
  72. <p>Bruno Latour propose donc 6 questions à se poser pour ne pas revenir à la même situation qu'avant le confinement.
  73. Cela s'adresse à un large public. Avec <a href="https://twitter.com/jpboignard">Jean-Pascal</a>, comme nous baignons dans l'agilité, nous avons pensé que cela pourrait être inclus dans une rétrospective spéciale.</p>
  74. <p>Une rétrospective post-confinement, mais à faire pendant qu'on est confinés.</p>
  75. <p>Jean-Pascal a eu l'idée de faire une carte à la façon impact mapping pour faciliter le questionnement.</p>
  76. <p>Nous avons collaboré sur Miro pour produire la carte.</p>
  77. <h4>La carte des activités à suspendre et des activités à reprendre</h4>
  78. <p><a href="http://www.aubryconseil.com/blog/public/images/confinement/mapLatour.png"><img src="http://www.aubryconseil.com/blog/public/images/confinement/mapLatour.png" alt=""/></a></p>
  79. <p>On y trouve les 6 questions, légèrement adaptées au contexte, et placées près des éléments de la carte.</p>
  80. <p>Ensuite, nous avons réalisé un descriptif de ce qui pourrait être un atelier mené par des équipes pendant une rétrospective, dérivé des 6 questions de Bruno Latour.</p>
  81. <h4>Le déroulé de la rétro-confinement</h4>
  82. <p><em>Une <a href="http://www.aubryconseil.com/post/Les-activites-de-la-retrospective">rétrospective passe par 5 étapes</a>, les deux premières (mise en confiance et collecte des informations sur le passé) sont menées avant de passer à cet atelier rétro-confinement.</em></p>
  83. <p>Ensuite voici comment cela pourrait se dérouler :</p>
  84. <p>(À mener pendant le confinement, donc avec les membres de l'équipe à distance. Le propos ici n'est pas de parler des outils, Miro en est un possible)</p>
  85. <ol>
  86. <li>demander à chacun une réflexion individuelle pour élaborer 2 listes : une pour les activités à ne pas reprendre (stop) et une pour les activités suspendues à reprendre (start) ; pour chaque activité réfléchir au pourquoi et au qui est impacté.</li>
  87. <li>mettre en commun les 2 listes à partir de ce que chacun·e aura trouvé, supprimer les doublons</li>
  88. <li>pour chacune des 2 listes (stop, start) prioriser les activités (par exemple avec un dot voting); ne conserver que les 3 premières activités <em>stop</em> et les 3 premières <em>start</em></li>
  89. <li>pour chacune les approfondir en petits groupes selon le modèle ci-dessus, en ajoutant le comment (les impacts sur d'autres activités) et le quoi (quelles mesures prendre, quelles actions lancer)</li>
  90. <li>faire une restitution collective ; on devrait se retrouver avec une fresque de 6 activités et leurs attributs, plus des liens entre les activités</li>
  91. <li>dans la liste des mesures/actions préconisées (collectées dans le quoi) ne conserver que celles pour lesquelles l'équipe a le pouvoir ou l'influence pour les mettre en œuvre ; les prioriser ; prendre les plus prioritaires et se donner un objectif pour une date</li>
  92. </ol>
  93. <p>Cet exercice est l'occasion de réfléchir au sens. D'aller plus loin qu'une rétrospective classique, axée sur la façon de faire, pour contester, pourquoi pas, ce qui est produit par l'équipe.</p>
  94. <p>Nous allons expérimenter. Vos retours nous intéressent.</p>
  95. <p><em>À propos de Bruno Latour, je vous conseille d'écouter l'excellent <a href="https://www.franceinter.fr/emissions/l-invite-de-8h20-le-grand-entretien/l-invite-de-8h20-le-grand-entretien-03-avril-2020#ReflechissonsPourEtreMoinsCons">podcast de son passage à la matinale de France Inter</a></em></p></div>
  96. </main>
  97. </article>
  98. <hr>
  99. <footer>
  100. <p>
  101. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  102. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  103. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  104. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  105. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  106. </p>
  107. <template id="theme-selector">
  108. <form>
  109. <fieldset>
  110. <legend>Thème</legend>
  111. <label>
  112. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  113. </label>
  114. <label>
  115. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  116. </label>
  117. <label>
  118. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  119. </label>
  120. </fieldset>
  121. </form>
  122. </template>
  123. </footer>
  124. <script type="text/javascript">
  125. function loadThemeForm(templateName) {
  126. const themeSelectorTemplate = document.querySelector(templateName)
  127. const form = themeSelectorTemplate.content.firstElementChild
  128. themeSelectorTemplate.replaceWith(form)
  129. form.addEventListener('change', (e) => {
  130. const chosenColorScheme = e.target.value
  131. localStorage.setItem('theme', chosenColorScheme)
  132. toggleTheme(chosenColorScheme)
  133. })
  134. const selectedTheme = localStorage.getItem('theme')
  135. if (selectedTheme && selectedTheme !== 'undefined') {
  136. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  137. }
  138. }
  139. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  140. window.addEventListener('load', () => {
  141. let hasDarkRules = false
  142. for (const styleSheet of Array.from(document.styleSheets)) {
  143. let mediaRules = []
  144. for (const cssRule of styleSheet.cssRules) {
  145. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  146. continue
  147. }
  148. // WARNING: Safari does not have/supports `conditionText`.
  149. if (cssRule.conditionText) {
  150. if (cssRule.conditionText !== prefersColorSchemeDark) {
  151. continue
  152. }
  153. } else {
  154. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  155. continue
  156. }
  157. }
  158. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  159. }
  160. // WARNING: do not try to insert a Rule to a styleSheet you are
  161. // currently iterating on, otherwise the browser will be stuck
  162. // in a infinite loop…
  163. for (const mediaRule of mediaRules) {
  164. styleSheet.insertRule(mediaRule.cssText)
  165. hasDarkRules = true
  166. }
  167. }
  168. if (hasDarkRules) {
  169. loadThemeForm('#theme-selector')
  170. }
  171. })
  172. </script>
  173. </body>
  174. </html>