davidbgk
/
larlet-fr-david
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
636 提交
1 分支
目录树: e60e68acd5
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'e60e68acd5'
${ noResults }
larlet-fr-david/david/blog/2013/autoritaire-cooperatif/index.html

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835 
  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>Autoritaire ou coopératif — 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.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2013/autoritaire-cooperatif/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Mieux vaut allumer une bougie que maudire l’obscurité." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Mieux vaut allumer une bougie que maudire l’obscurité." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Autoritaire ou coopératif" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2013/autoritaire-cooperatif/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/david-larlet-avatar-thumbnail.jpg" />

  41. 

  42. 

  43. <style>

  44. /* http://meyerweb.com/eric/tools/css/reset/ */

  45. html, body, div, span,

  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  47. a, abbr, address, big, cite, code,

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

  50. dl, dt, dd, ol, ul, li,

  51. fieldset, form, label, legend,

  52. table, caption, tbody, tfoot, thead, tr, th, td,

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

  55. menu, nav, output, ruby, section, summary,

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

  64. /* HTML5 display-role reset for older browsers */

  65. article, aside, details, figcaption, figure,

  66. footer, header, hgroup, menu, nav, section { display: block; }

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

  79. /* http://practicaltypography.com/equity.html */

  80. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  81. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  82. @font-face {

  83.   font-family: 'EquityTextB';

  84.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  85.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

  92.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  93.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

  100.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  101.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

  109.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  110.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

  117. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  118. body {

  119.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  120.   font-family: "EquityTextB", Palatino, serif;

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

  124.   -moz-osx-font-smoothing: grayscale;

  125.   -webkit-font-smoothing: subpixel-antialiased;

  126.   text-rendering: optimizeLegibility;

  127.   font-variant-ligatures: common-ligatures contextual;

  128.   font-feature-settings: "kern", "liga", "clig", "calt";

  129. }

  130. pre, code, kbd, samp, var, tt {

  131.   font-family: 'TriplicateT4c', monospace;

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

  149.     border-bottom: 1vh solid #2d7474;

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

  159.   border-top: 1vh solid #2d7474;

  160.   border-bottom: .2vh dotted #2d7474;

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

  181.       padding: 1rem 1.2rem .6rem 1.2rem;

  182.       border-radius: 0 0 6% 6%;

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

  190.   border-top: .2vh solid #2d7474;

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

  215.   text-decoration-skip-ink: auto;

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

  226.     border-top: .2vh dotted #2d7474;

  227.     margin: -6rem auto 1rem auto;

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

  245.   border-left: .5vw solid #2d7474;

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

  260.   border-top: .2vh solid #2d7474;

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

  271.     border: .5vw solid #323a45;

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

  283.   border-bottom: .2vh solid #07486c;

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

  290. /* https://fvsch.com/code/css-locks/ */

  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  292.   font-size: 1rem;

  293.   line-height: calc( 1.5em + 0.2 * 1rem );

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

  297.   line-height: calc( 1.2em + 0.2 * 1rem );

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

  301.   line-height: calc( 1.3em + 0.2 * 1rem );

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

  305.   line-height: calc( 1.4em + 0.2 * 1rem );

  306. }

  307. @media (min-width: 20em) {

  308.   /* The (100vw - 20rem) / (50 - 20) part

  309.      resolves to 0-1rem, depending on the

  310.      viewport width (between 20em and 50em). */

  311.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  312.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  313.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  314.     margin-left: 0;

  315.   }

  316.   h1 {

  317.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  318.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  319.   }

  320.   h2 {

  321.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  322.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  323.   }

  324.   h3 {

  325.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  326.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  327.   }

  328. }

  329. @media (min-width: 50em) {

  330.   /* The right part of the addition *must* be a

  331.      rem value. In this example we *could* change

  332.      the whole declaration to font-size:2.5rem,

  333.      but if our baseline value was not expressed

  334.      in rem we would have to use calc. */

  335.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  336.     font-size: calc( 1rem + .6 * 1rem );

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

  343.     font-size: calc( 1.9rem + 1.5 * 1rem );

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

  347.     font-size: calc( 1.5rem + 1.5 * 1rem );

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

  351.     font-size: calc( 1.35rem + 1.5 * 1rem );

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

  370.   body { font-size: 100%; }

  371.   a:after { content: " (" attr(href) ")"; }

  372.   a, a:link, a:visited, a:after {

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

  379.   abbr[title] { border-bottom: 0; }

  380.   abbr[title]:after { content: " (" attr(title) ")"; }

  381.   img { page-break-inside: avoid; }

  382.   @page { margin: 2cm .5cm; }

  383.   h1, h2, h3 { page-break-after: avoid; }

  384.   p3 { orphans: 3; widows: 3; }

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

  395. @media (min-width: 20em) {

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

  400. @media (min-width: 50em) {

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

  408. @media (min-width: 20em) {

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

  413. @media (min-width: 50em) {

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

  453.     -webkit-shape-outside: circle();

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

  458.     border-left: 1px solid #f1c40f;

  459.     border-top: 1px solid #f1c40f;

  460.     border-right: 5px solid #f1c40f;

  461.     border-bottom: 5px solid #f1c40f;

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

  466.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  467.   Autoritaire ou coopératif

  468.   <time>Publié le 3 mars 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Il ne s’agit plus du tout de cela, mais bien plutôt d’un <strong>choix entre la centralisation ou la distribution, le choix entre un système autoritaire ou un système coopératif.</strong></p>

  473. <p>[…]</p>

  474. <p>Il y a un <strong>changement dans le paradigme du pouvoir</strong>. Le pouvoir du haut vers le bas, le pouvoir centralisé. La nouvelle génération a une vision complètement différente. La génération Internet ne pense pas entre gauche et droite. Ils ne pensent pas capitalisme ou socialisme. Ces mots ne sont même plus inscrits dans leur vocabulaire. Quand un jeune de la génération internet juge un comportement politique, il pose la question de la manière suivante, que ce soit à un gouvernement, une entreprise, un parti politique ou une école : est-ce que cette institution se comporte de façon centralisée, patriarcale, du haut vers le bas, propriétaire, fermée ? Ou est-ce que cette institution se conduit de façon distributive, collaborative, ouverte, transparente avec des pouvoirs latéraux.</p>

  475. <p><cite>Jeremy Rifkin retranscrit par Pascal Gaillard <em><a href="http://www.pascal-gaillard.fr/?p=873">Du pouvoir vertical au pouvoir latéral…</a></em></cite></p>

  476. </blockquote>

  477. <p>Dans la théorie, je trouve cela évident. Maintenant lorsqu’il s’agit de le mettre en pratique je deviens sceptique en observant les difficultés que l’on peut déjà avoir à 4 pour changer ce <em>paradigme du pouvoir</em> en étant tous pleinement convaincus de son intérêt. Pour en arriver à affecter la culture et la civilisation comme Jeremy Rifkin l’ambitionne, il va falloir à mon avis énormément de temps (et d’éducation). <em>Or, on manque justement de temps.</em> Et encore, ce n’est pas une mutation mais une création dans notre cas, ce qui s’avère plus facile :</p>

  478. <blockquote>

  479. <p><strong>Rachel</strong>: <em>GitHub started out flat from the get go. Do you think that in a more traditional structure, people can transition to and ‘go flat’?</em></p>

  480. <p><strong>Steve</strong>: I think it would be difficult to do unless you have a buy-in from everyone on the team. If we had twelve managers and wanted to go flat, we’d have to be like, “So you guys, I don’t know what you’re going to do now. We don’t really need you anymore—.” I don’t know how you’d handle that as a company [laughing].</p>

  481. <p><cite><em><a href="http://www.ngenworks.com/blog/steve-smith-on-optimizing-for-happiness">Steve Smith On Optimizing For Happiness</a></em></cite></p>

  482. </blockquote>

  483. <p>D’un autre côté, j’ai l’impression que les choses bougent au niveau de la coopération dans l’entreprise. Peut-être est-ce le <a href="/david/blog/2013/developpeurs-creatifs/">prisme déformant de mon centre d’intérêt</a> qui me fait découvrir des entreprises et les personnes qui les animent comme <a href="http://ninja-squad.com/">Ninja Squad</a> ou <a href="http://www.lateral-thoughts.com/">Lateral Thoughts</a> mais <em>il est vraiment encourageant de découvrir que cet épiphénomène n’en est peut-être pas un</em> :</p>

  484. <blockquote>

  485. <p>Toute entreprise, en tant que système humain organisé autour d’un objectif commun, répond à ces lois relationnelles du vivant qui régissent autant l’infiniment petit que l’infiniment grand. Ainsi, <strong>la capacité d’équilibre et d’évolution de l’entreprise repose fondamentalement sur la fluidité de l’information qui circule et la qualité des interactions humaines qu’elle génère</strong>.</p>

  486. <p>En outre, et à l’inverse des hiérarchies de contrôle habituelles des sociétés où la règle descend du haut, il s’avère scientifiquement que <strong>l’ordre et le changement (homéostasie et évolution) s’élèvent du bas vers le haut</strong> : le système s’autogénère à partir d’une <strong>coopération spontanément adaptative</strong> entre ses parties, pour un bénéfice général.</p>

  487. <p>[…]</p>

  488. <p>Il lui faut  pour cela, en premier lieu, respecter et s’appuyer sur le ressort fondamental de l’être humain, qui constitue sa liberté et sa dignité : <strong>s’accomplir individuellement, dans et par l’interaction humaine, au service d’une cause co-construite qui transcende ses besoins égotiques pour servir positivement son système d’appartenance (l’humanité).</strong></p>

  489. <p><cite>Pascal Gaillard, <em><a href="http://www.pascal-gaillard.fr/?p=940">Kosmos (3) : un management résolument horizontal</a></em></cite></p>

  490. </blockquote>

  491. <p>Je vous invite à lire l’intégralité des articles relatifs à la création de cette entreprise (série non terminée) :</p>

  492. <ul>

  493. <li><a href="http://www.pascal-gaillard.fr/?p=927">Kosmos (1): une vision évolutive et des valeurs positives</a></li>

  494. <li><a href="http://www.pascal-gaillard.fr/?p=938">Kosmos (2): une recherche d’utilité sociale des solutions</a></li>

  495. <li><a href="http://www.pascal-gaillard.fr/?p=940">Kosmos (3): un management résolument horizontal</a></li>

  496. <li><a href="http://www.pascal-gaillard.fr/?p=970">Kosmos (4) : des collaborateurs autonomes, créatifs et solidaires</a></li>

  497. </ul>

  498. <p>Il faudra que j’arrive à écrire ce type d’articles relatifs à <a href="http://scopyleft.fr">scopyleft</a> lorsque j’aurai un peu plus de recul. Mon marque-page actuel est celui d’<a href="https://www.amnesty.org/">Amnesty International</a> sur lequel est inscrit :</p>

  499. <blockquote>

  500. <p><strong>Mieux vaut allumer une bougie que maudire l’obscurité.</strong></p>

  501. </blockquote>

  502. </article>

  503. 

  504.   <section>

  505.     <h3>Discussion suite à l’article :</h3>

  506. 

  507.       <article id="comment-1" class="comment">

  508.         <p>Pour toutes ces entreprises qui servent de modèles, l’élément « suspect » est l’âge de ces entreprises, leur rentabilité (aka indépendance), l’âge de leurs participants et le nombre d’employés. Le travail coopératif n’a pas débuté aujourd’hui. Les années 70 ont eu aussi leur lot d’expérimentations. Et bien sûr avant aussi par cycle de sociétés où une masse critique de gens commençait à suffoquer. </p>

  509. <p>Je ne dis pas qu’il ne faut pas tenter la réalisation mais que c’est un très long de chemin, celui d’une vie. Et comme tu le dis s’engager à vie à plusieurs dans des choix qui sont en résistance au système, ce n’est pas simple.</p>

  510. <p>GitHub qui vante les mérites d’une hiérarchie plate a reçu de l’argent de VC pour <a href="http://www.wired.com/wiredenterprise/2012/07/github100m/">100 millions de dollars</a></p>

  511. <p>Pas simple, mais bon à réaliser.</p>

  512. <p>Ah aussi <a href="http://ourworld.unu.edu/en/enough-is-enough/">Enough is Enough: A path to true prosperity</a></p>

  513.         <p><cite>Karl Dubost, le <a href="#comment-1">2013-03-03 à 12:54</a></cite></p>

  514.       </article>

  515. 

  516.       <article id="comment-2" class="comment">

  517.         <p>La lecture de ton article me suggère deux remarques à chaud que voici.</p>

  518. <p>Je ne sais pas si tu le suis, mais la question de l’un et du multiple est l’un des sinon le point central du cours de Bernard Stiegler de cette année consacré à La République de Platon (il est disponible sur <a href="http://pharmakon.fr/wordpress/">pharmakon.fr</a>). Je pense qu’au vu de tes réflexions, tu devrais le trouver très parlant. Tout l’art du compromis entre bottom-up et top-down est d’articuler la diversité avec l’unité venant d’un objectif commun.</p>

  519. <p>De même ce problème d’organisation au sein d’une entreprise me fait penser à la question du couplage fonctionnel dans les architectures logicielles.</p>

  520. <p>Le couplage fonctionnel peut se définir comme l’ensemble des hypothèses devant être partagé entre les entités interagissantes. Les exigences en matière de couplage faible ne sont pas les mêmes aux niveaux des objets, des composants et des services. Ces différents niveaux de couplage entraînent des différences dans leur pouvoir expressif, la nature des interactions et leurs capacités à s’adresser à un large public.</p>

  521.         <p><cite>Benjamin Cogrel, le <a href="#comment-2">2013-03-23 à 18:11</a></cite></p>

  522.       </article>

  523. 

  524.   </section>

  525. 

  526. 

  527. 

  528. 

  529. <nav id="jumpto">

  530.   <p>

  531.     <a rel=prev href="/david/blog/2013/airplay-freebox/">← AirPlay et Freebox</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/diete-information/">Diète d’information →</a>

  532.   </p>

  533. </nav>

  534. 

  535. <footer>

  536.   <div>

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

  538.     <p>

  539.       Bonjour/Hi!

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

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

  542.     </p>

  543.     <p>

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

  545.     </p>

  546. 

  547.       <p>

  548.         Les dernières publications hebdomadaires sont :

  549.       </p>

  550.       <ul class="with_columns">

  551. 

  552.           <li>

  553.             <a href="/david/stream/2019/12/31/">Merci</a>

  554.           </li>

  555. 

  556.           <li>

  557.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  558.           </li>

  559. 

  560.           <li>

  561.             <a href="/david/stream/2019/12/24/">Outils</a>

  562.           </li>

  563. 

  564.           <li>

  565.             <a href="/david/stream/2019/12/17/">Origines</a>

  566.           </li>

  567. 

  568.           <li>

  569.             <a href="/david/stream/2019/12/10/">Publier</a>

  570.           </li>

  571. 

  572.           <li>

  573.             <a href="/david/stream/2019/12/03/">En forêt</a>

  574.           </li>

  575. 

  576.           <li>

  577.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  578.           </li>

  579. 

  580.           <li>

  581.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  582.           </li>

  583. 

  584.           <li>

  585.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  586.           </li>

  587. 

  588.           <li>

  589.             <a href="/david/stream/2019/11/05/">Positif</a>

  590.           </li>

  591. 

  592.           <li>

  593.             <a href="/david/stream/2019/10/29/">Dettes</a>

  594.           </li>

  595. 

  596.           <li>

  597.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  598.           </li>

  599. 

  600.           <li>

  601.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  602.           </li>

  603. 

  604.           <li>

  605.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  606.           </li>

  607. 

  608.           <li>

  609.             <a href="/david/stream/2019/10/01/">Présent</a>

  610.           </li>

  611. 

  612.           <li>

  613.             <a href="/david/stream/2019/09/24/">Manifester</a>

  614.           </li>

  615. 

  616.           <li>

  617.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  618.           </li>

  619. 

  620.           <li>

  621.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  622.           </li>

  623. 

  624.           <li>

  625.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  626.           </li>

  627. 

  628.           <li>

  629.             <a href="/david/stream/2019/08/27/">Documenter</a>

  630.           </li>

  631. 

  632.           <li>

  633.             <a href="/david/stream/2019/08/20/">Frustration</a>

  634.           </li>

  635. 

  636.           <li>

  637.             <a href="/david/stream/2019/08/13/">Holisme</a>

  638.           </li>

  639. 

  640.           <li>

  641.             <a href="/david/stream/2019/08/06/">1%</a>

  642.           </li>

  643. 

  644.           <li>

  645.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  646.           </li>

  647. 

  648.           <li>

  649.             <a href="/david/stream/2019/07/23/">Timelines</a>

  650.           </li>

  651. 

  652.           <li>

  653.             <a href="/david/stream/2019/07/16/">Écoute</a>

  654.           </li>

  655. 

  656.           <li>

  657.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  658.           </li>

  659. 

  660.           <li>

  661.             <a href="/david/stream/2019/06/21/">À lier</a>

  662.           </li>

  663. 

  664.           <li>

  665.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  666.           </li>

  667. 

  668.           <li>

  669.             <a href="/david/stream/2019/06/07/">Amateur</a>

  670.           </li>

  671. 

  672.           <li>

  673.             <a href="/david/stream/2019/05/31/">Pollution</a>

  674.           </li>

  675. 

  676.           <li>

  677.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  678.           </li>

  679. 

  680.           <li>

  681.             <a href="/david/stream/2019/05/10/">Folie</a>

  682.           </li>

  683. 

  684.           <li>

  685.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  686.           </li>

  687. 

  688.           <li>

  689.             <a href="/david/stream/2019/04/12/">Péremption</a>

  690.           </li>

  691. 

  692.           <li>

  693.             <a href="/david/stream/2019/04/05/">Définitions</a>

  694.           </li>

  695. 

  696.           <li>

  697.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  698.           </li>

  699. 

  700.           <li>

  701.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  702.           </li>

  703. 

  704.           <li>

  705.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  706.           </li>

  707. 

  708.           <li>

  709.             <a href="/david/stream/2019/03/08/">Lecture</a>

  710.           </li>

  711. 

  712.           <li>

  713.             <a href="/david/stream/2019/03/01/">Journaux</a>

  714.           </li>

  715. 

  716.           <li>

  717.             <a href="/david/stream/2019/02/22/">Écriture</a>

  718.           </li>

  719. 

  720.           <li>

  721.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  722.           </li>

  723. 

  724.           <li>

  725.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  726.           </li>

  727. 

  728.           <li>

  729.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  730.           </li>

  731. 

  732.           <li>

  733.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  734.           </li>

  735. 

  736.           <li>

  737.             <a href="/david/stream/2019/01/18/">Agilité</a>

  738.           </li>

  739. 

  740.           <li>

  741.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  742.           </li>

  743. 

  744.           <li>

  745.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  746.           </li>

  747. 

  748.       </ul>

  749. 

  750.     <p>

  751.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  768.     </p>

  769.     <p>

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

  771.     </p>

  772.     <p>

  773.       Je ne traque pas ta navigation mais mon

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

  775.       conserve des logs d’accès.

  776.     </p>

  777.   </div>

  778. </footer>

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

  780.   ;(_ => {

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

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

  783.       e.preventDefault()

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

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

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

  787.     })

  788.   })()

  789. </script>

  790. 

  791.   <script>

  792.   /* Service workers */

  793.   if (navigator.serviceWorker) {

  794.     window.addEventListener('load', function () {

  795.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  796.       function sendLinks (selector) {

  797.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  798.           return link.getAttribute('href')

  799.         })

  800.         links.push(location.pathname)  // Put the current page in cache too.

  801.         navigator.serviceWorker.controller.postMessage({ links: links })

  802.       }

  803.       navigator.serviceWorker.getRegistration()

  804.         .then(function (registration) {

  805.           if (!registration || !navigator.serviceWorker.controller) {

  806.             return navigator.serviceWorker.register('/serviceworker.js')

  807.               .then(navigator.serviceWorker.ready)

  808.               .then(function () {

  809.                 console.log('[ServiceWorker] Ready to go!')

  810.               })

  811.               .catch(console.error.bind(console))

  812.           } else {

  813.             console.log('[ServiceWorker] Send links via registration')

  814.             sendLinks(selector)

  815.           }

  816.         })

  817.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  818.         console.log('[ServiceWorker] Send links via controller change')

  819.         sendLinks(selector)

  820.       })

  821.       navigator.serviceWorker.addEventListener('message', function (event) {

  822.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  823.         if (event.data.status && link) {

  824.           link.style.backgroundColor = '#2d7474'

  825.           link.style.color = '#f0f0ea'

  826. 

  827.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  828. 

  829.         }

  830.       })

  831.     })

  832.   } else {

  833.     console.warn('[ServiceWorker] No cache for old browsers.')

  834.   }

  835. </script>