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.
277 Комити
1 Грана
Дрво: e2553a71c2
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from 'e2553a71c2'
${ noResults }
larlet-fr-david-cache/cache/5879dbe8a66fc9acfecd9738dbc.../index.html

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595 
  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>Petit précis de compostabilité des projets (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://ressources.osons.cc/?PetitPrecisDeCompostabiliteDesprojets">

  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.   Petit précis de compostabilité des projets (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://ressources.osons.cc/?PetitPrecisDeCompostabiliteDesprojets">Source originale du contenu</a></h3>

  463.     <h2>La compostabilité : pour un écosystème de projets vivaces</h2>

  464. 

  465. <p><i>Emballages, meubles, téléphones, ordinateurs, gadgets... chaque objet qui nous entoure est consommateur de ressources naturelles. Le temps où nos créations donnaient lieu à des déchets capables de se décomposer est maintenant loin derrière nous. Problème : lorsque l'on produit des objets trop complexes pour se recomposer d'eux-mêmes, nous accumulons une dette technique qu'il nous faudra un jour assumer.<br/>

  466. <br/>

  467. Pour limiter l'impact et le nombre de ces déchets, de nombreuses solutions se développent et une multitude d'expérimentations sont en cours : mouvement zéro déchet, bacs à compost, repair cafés, ressourceries, etc. <br/>

  468. <br/>

  469. Qu'en est-il lorsque l'on aborde une autre des productions humaines, omniprésente à l'ère du numérique : celle des connaissances ? La seconde vie des idées, de l'immatériel, de nos projets reste un impensé alors même qu'ils sont le fruit de notre énergie vitale, ressource irremplaçable s'il en est. <br/>

  470. <br/>

  471. <b>Mais alors, à quoi ressemblerait une ressourcerie des idées ? Ce texte propose une réponse exploratoire à travers la notion de « compostabilité » développée par Laurent Marseault.</b></i><b/>

  472. <figure class="attached_file center"><a href="https://ressources.osons.cc/files/PetitPrecisDeCompostabiliteDesprojets_piano_20180224210025_20180224210305.jpg"><img class="img-responsive" src="https://ressources.osons.cc/files/PetitPrecisDeCompostabiliteDesprojets_piano_20180224210025_20180224210305.jpg" alt="image piano.jpg (0.2MB)"/></a><figcaption>piano en berry - cc by sa - Romain Lalande</figcaption></figure><p>

  473. Parce qu'elle part de l'observation de la nature et qu'elle vise à en étendre les enseignements à tous nos projets, cette petite allégorie s'adresse à tous. . . pourvu d'être capable d'un peu d'abstraction !

  474. </p><h3>Ce qui vit est compostable</h3>

  475. <p>

  476. Nous vivons sur une planète vivante (et donc limitée) qui obéit au moins à </p><b>deux règles fondamentales</b><p> :</p>

  477. <p></p><ul>

  478. <li>1. <b>Tout n'est que poussières d'étoiles</b> : la matière qui constitue toute chose est composée de petits atomes, fabriqués au moment du Bing Bang il y a 13 milliard d'années ;</li>

  479. <li>2. <b>La nature se réorganise en permanence</b> : chaque brique qui compose chaque chose se décompose à un moment donné, puis va se réassembler pour redonner de la matière.</li>

  480. </ul></p>

  481. <p>

  482. Partant de ce principe, toute chose vivante est nécessairement compostable. Une feuille peut s'envoler sur 200km, se décomposer puis se recomposer sous l'effet de petits organismes qui recréent du vivant ; le vivant porte ainsi en lui les conditions de sa propre compostabilité.

  483. </p>

  484. 

  485. <p>

  486. Parlons de nous et faisons l'hypothèse qu'en tant qu'êtres humains vivants nous soyons mortels. Convenons qu'il est alors possible qu'en tant qu'individu, qu'en tant que bénévole ou qu'en tant que salarié l'aventure s'arrête un jour.  Pour chaque projet auquel nous contribuons le constat est le même : un concours de circonstances a provoqué le début d'un processus qui tend invariablement à s'éteindre.

  487. </p>

  488. 

  489. <p>

  490. C'est cette mort programmée et inéluctable qui doit nous pousser à travailler très en amont sur les conditions de compostabilité des projets. . . au risque de fabriquer des agrégats qui ne puissent se recomposer ! C'est là tout l'enjeu du principe de compostabilité  : préparer la mort des projets et permettre à chacune de leurs composantes de se réassembler à d'autres endroits et potentiellement avec d'autres personnes.

  491. 

  492. </p>

  493. 

  494. <h3>Partager sincèrement pour pouvoir re-composer</h3>

  495. 

  496. <p>

  497. Bien souvent, on ne réfléchit pas à la compostabilité des projets lors de leur conception (quels éléments méritent d'être réutilisés, sous quelle forme, où les mettre à disposition,...). Même lorsque l'on décide de rendre disponible ces ressources auprès des autres, cela ne suffit généralement pas à leur assurer une seconde vie. Il faut dès lors réfléchir à la meilleure méthode pour permettre à la matière produite (les contenus, les données, l'expérience due à nos échecs et réussites,...) d'être réutilisée indépendamment de tout contexte d'usage.

  498. </p>

  499. 

  500. <p>

  501. Si l'on souhaite continuer à vivre sur une planète vivante il faut incontestablement respecter les règles fondamentales du vivant. Si l'on accepte de fabriquer petit à petit des organisations humaines non-compostables, nous acceptons de facto la création de matière inerte, non utilisable voire polluante à l'échelle de l'existence humaine. </p>

  502. 

  503. <p><b>Utiliser notre énergie vitale pour produire des éléments qui ne vivent pas au-delà de nous-même, ce serait alors se couper du vivant</b><p>.</p>

  504. <p></p><p></p>

  505. <p>Prenons pour exemple un grand mouvement d'éducation populaire, qui relève un défi impressionnant avec la création de son MOOC (cours collectif en ligne) sur la gouvernance partagée qui totalise 26 000 inscrits en 2015. De nombreux contenus vidéos sont alors placées sous des licences qui en permettent légalement la réutilisation une fois la formation terminée (CC BY SA).  Malheureusement ces contenus sont trop contextualisés et ne peuvent pas servir d'autres usages. Trop d'éléments de contenus liés au MOOC ne permettent pas de bien profiter de la vidéo en dehors de ce cadre. Toute l'énergie investie dans la création de ces ressources est donc perdue puisque le partage est « légal » (grâce aux licences) mais pas « sincère » (du fait de la contextualisation des contenus).</p>

  506. <p></p><p></p>

  507. <p>Il aurait fallu séparer dès le montage les éléments propres à l'organisation du cours en ligne de ceux traitant simplement du sujet. A l'instar de l'adage « écrire pour être lu », une ressource sincèrement mise à disposition est « partagée pour être utilisée » !</p>

  508. <p></p><figure class="attached_file center"><a href="https://ressources.osons.cc/files/PetitPrecisDeCompostabiliteDesprojets_800pxHgnAgregat_sol_dactiviteLPR_20180224211441_20180224212025.jpg"><img class="img-responsive" src="https://ressources.osons.cc/files/PetitPrecisDeCompostabiliteDesprojets_800pxHgnAgregat_sol_dactiviteLPR_20180224211441_20180224212025.jpg" alt="image 800pxHgnAgregat_sol_dactiviteLPR.jpg (0.2MB)"/></a><figcaption>Agrégat de sol archéologique - vue au microscope - cc by sa - NATON Henri-Georges</figcaption></figure>

  509. <h3>Le vivant commence là où la mort se prépare</h3></p>

  510. <p>

  511. Une fois assimilée, la compostabilité des projets permet d'envisager très en amont nos actions et de développer des automatismes fertiles. </p>

  512. 

  513. <p><b>C'est une manière de se dire «  ce que je crée va mourir, je vais mourir, alors comment faire pour que cette énergie que je pose là puisse être utilisée par tout le monde ? »</b><p>. Se poser cette question, c'est préparer la mort des projets. Pas dans le sens d'un délire paranoïaque et morbide, mais en prenant conscience que notre seule contribution au monde, c'est ce que nous aurons réussi à sincèrement partager.

  514. </p><p>

  515. En écho, le risque d'une mort non-préparée, c'est de s'obliger à continuer à agir, à vivre des expériences, à rassembler des choses, à agréger, sans jamais prendre le temps de penser la transmission de cet héritage. On crée alors une chimère, un projet que l'on va sans cesse persister à nourrir sans jamais en remettre en question le sens et sans accepter qu'il ne s'arrête. Il est donc indispensable de ritualiser le traitement de ce que l'on souhaite transmettre au jour le jour pour s'autoriser à mettre fin à un projet au moment opportun.  Capitaliser ses ressources permet d'accepter la fin d'un projet pour redémarrer ailleurs ou différemment sur des bases déjà acquises. C'est aussi permettre en temps réel à ce qui est expérimenté quelque part et jugé efficace d'être répliqué ailleurs.

  516. </p><p>

  517. Instaurer une périodicité minimale de rendez-vous et y intégrer des temps de capitalisation (de mise en forme partageable) des productions est indispensable. Ce cycle peut ensuite se répéter indéfiniment ou ne se réaliser qu'une fois, il suffit à rendre réutilisable par soi et par d'autre l'intégralité de l'énergie investie. La mise en place de cycles récurrents permet aussi d'assurer la vie du projet : la durée de ce cycle correspond à la fréquence minimale de rencontres nécessaires à la vitalité du projet. En dessous de ce seuil, le projet ne peut survivre et c'est le signal qu'il faut y mettre fin - ce qui n'est pas si grave si tout ce qui a été produit est réutilisable immédiatement par tous !</p>

  518. <p></p><b><i>De la compostabilité, il faut donc retenir trois choses : <br/>

  519. </i></b>

  520. <ul>

  521. <li><b><i>1. elle se pense et se prépare très en amont, </i></b></li>

  522. <li><b><i>2. elle permet de mettre fin aux projets lorsque nécessaire tout en leur assurant un nouveau départ,</i></b></li>

  523. <li><b><i>3. elle nécessite le partage sincère de l'ensemble des ressources produites. </i></b></li>

  524. </ul>

  525. <b><i>

  526. Rendre son projet compostable, c'est fertiliser les idées en les partageant et tendre vers des organisations plus vivantes, vivaces et vivables.</i></b></p>

  527. <p><b>Crédits - Licence</b></p>

  528. <p><i>Contenu placé sous licence CC by SA, <br/>

  529. Contenus agrégés par Romain Lalande sur la base d'un récit-concept de Laurent Marseault, agrémenté d'échanges fertiles au sein du réseau francophone des Communs, de VECAM et de Remix the Commons. <br/>

  530. Nourri des expérimentations menées par le collectif Animacoop et Outils-Réseaux depuis 15 ans. <br/>

  531. Un grand merci à Maïa Dereva et Sarah Gaucher pour leurs relectures attentionnées.</i></p>

  532.   </article>

  533. </section>

  534. 

  535. 

  536. <nav id="jumpto">

  537.   <p>

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

  539.     <a href="https://ressources.osons.cc/?PetitPrecisDeCompostabiliteDesprojets">Source originale</a> |

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

  541.   </p>

  542. </nav>

  543. 

  544. <footer>

  545.   <div>

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

  547.     <p>

  548.       Bonjour/Hi!

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

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

  551.     </p>

  552.     <p>

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

  554.     </p>

  555.     

  556.     <p>

  557.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  574.     </p>

  575.     <p>

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

  577.     </p>

  578.     <p>

  579.       Je ne traque pas ta navigation mais mon

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

  581.       conserve des logs d’accès.

  582.     </p>

  583.   </div>

  584. </footer>

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

  586.   ;(_ => {

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

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

  589.       e.preventDefault()

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

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

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

  593.     })

  594.   })()

  595. </script>