davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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.
244 Commits
1 Branch
Tree: f16aada5e3
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'f16aada5e3'
${ noResults }
larlet-fr-david/david/blog/2013/initiative-scopyleft/index.html

index.html 31KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822 
  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>L’initiative scopyleft — 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/initiative-scopyleft/">

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

  31.   <meta name="description" content="Une aventure éthique, sociale et humaine." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Une aventure éthique, sociale et humaine." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="L’initiative scopyleft" />

  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/initiative-scopyleft/" />

  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.   L’initiative scopyleft

  468.   <time>Publié le 1 septembre 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <p><em>Article initialement publié dans la Revue Française de Service Social « la crise et ses répercussions sur le travail social », parution trimestrielle-septembre 2013-numéro 250 avec pour titre « L’initiative scopyleft : une aventure éthique, sociale et humaine » et <a href="/david/blog/2014/rapatriement-articles/">rapatrié depuis sur cet espace</a>.</em></p>

  472. <h2>Un bilan amer</h2>

  473. <p><a href="http://scopyleft.fr/">Scopyleft</a>, c’est avant tout l’histoire d’une rencontre. La rencontre de quatre professionnels du Web qui, après avoir essayé le salariat, se sont mis à leur compte durant plusieurs années et ont fait le bilan amer de s’y sentir inadaptés. Amer, car l’organisation hiérarchique du monde du travail traditionnel ne leur convenait pas : les rapports conflictuels pour étendre le pouvoir politique de chacun au sein de l’entreprise étant à l’origine d’un stress inutile et anxiogène. Amer également, car leurs expériences respectives en tant qu’indépendants ne se sont pas révélées être concluantes (même si profitables) : la nécessité de passer par une prestation subie et avilissante ne permet pas toujours d’entretenir une relation de collaboration saine et amène à travailler sur des projets dont l’utilité n’est pas toujours avérée.</p>

  474. <p>Travailler seul pose également le problème de la montée en compétence sur le long terme sans que la viabilité de la structure ne soit mise en péril. De même, travailler en tant qu’indépendant permet difficilement d’avoir du soutien en cas de coup dur — ou de coup de fatigue — et tend à isoler socialement de ses pairs. Ce statut amène à se poser aussi des questions d’ordre moral et éthique qui sont difficiles à résoudre en étant seul ; et les décisions, une fois prises, peuvent être difficiles à tenir et à maintenir dans leur mise en œuvre.</p>

  475. <p>Persuadés qu’une alternative existe et animés par la volonté de faire des projets utiles et intéressants en associant leurs points de vue et compétences respectives, ils décident de se mettre en quête d’un nouveau statut, ensemble.</p>

  476. <h2>Un cadre de travail pérenne</h2>

  477. <p>Ils découvrent le statut de société coopérative et participative (SCOP) qui semble répondre à leurs attentes :</p>

  478. <ul>

  479. <li>des statuts qui favorisent la pérennité de la structure au détriment du profit et de la spéculation, l’obligation d’une réserve financière qui couvre les coups durs ;</li>

  480. <li>une égalité au sein des salariés avec le principe « 1 homme = 1 voix », chacun détenant une et une seule voix ;</li>

  481. <li>des valeurs encourageant la prééminence de la personne humaine, la démocratie, l’émancipation, la solidarité et le partage.</li>

  482. </ul>

  483. <p>Le fait d’être inscrit sur la liste interministérielle des SCOP offre certains allègements fiscaux permettant de mener à bien des projets qui ne seraient pas forcément viables autrement.</p>

  484. <p>En parallèle de la création administrative de la SCOP, ils commencent à réfléchir aux valeurs internes qui vont l’animer.</p>

  485. <h2>Une quête de valeurs</h2>

  486. <p>Négligeant dans un premier temps le <em>business model</em> prédictif à court terme, ils décident de s’aligner au niveau des valeurs qui vont constituer un cap à long terme. C’est un travail qui a nécessité plusieurs mois de réflexions et de discussions.</p>

  487. <p>Au terme de ce travail, ils se sont accordés sur cette phrase fondatrice :</p>

  488. <blockquote>

  489. <p>Travailler entre Humains, sur des projets éthiques et intéressants, tout en privilégiant le bien-être et le plaisir de chacun.</p>

  490. </blockquote>

  491. <p>Un manifeste propre à la coopérative a été rédigé pour préciser les valeurs retenues en parallèle de cette maxime (honnêteté intellectuelle, courage, respect, partage et bien-être). Ces valeurs ont également été insérées en préambule des statuts de la société.</p>

  492. <p>Comme le rappelle Brigitte Bouquet dans le numéro 247 de <em>La revue française du droit social</em>, « mener une relation et une intervention éthique de qualité n’est pas simple et nécessite notamment de maîtriser les tensions qui existent entre l’éthique de conviction, l’éthique de responsabilité et l’éthique de discussion ». Il n’y a que dans la pratique que ces valeurs pourront être vérifiées lorsqu’elles seront confrontées à des cas concrets qui viennent flirter avec les limites théoriques.</p>

  493. <h2>Une émulation vers l’excellence</h2>

  494. <p>Après quelques semaines à travailler ensemble, nos quatre aventuriers réalisent que le travail à plusieurs, en coopération, implique de s’accorder également sur la qualité du travail que l’on fournit ; cela les conduit à entamer la rédaction d’un livre blanc établissant des critères de qualité internes.</p>

  495. <p>L’aspect démocratique de la SCOP se trouve être très responsabilisant ; les engagements pris mettent en jeu la santé de l’entreprise mais aussi la confiance au sein de l’équipe de manière quotidienne. Ils se poussent à sortir de leurs zones de confort respectives pour avancer ensemble au service d’un projet commun.</p>

  496. <p>En contrepartie, les échanges au cours de ces remises en question sont extrêmement enrichissants. Ils sont source d’inspiration et de curiosité pour mieux comprendre les autres dans leur façon de penser et de communiquer. Cette aventure se révèle être avant tout de nature humaine.</p>

  497. <h2>Une coopération ouverte</h2>

  498. <p>Scopyleft n’est pas un regroupement d’indépendants mais une réelle volonté de <strong>créer une équipe pluri-compétente qui partage des valeurs pour créer de la valeur.</strong></p>

  499. <p>Néanmoins, une équipe de quatre personnes peut difficilement être aujourd’hui capable de regrouper l’ensemble des compétences nécessaires à la réalisation d’un produit Web complet. Conscients de ce fait, trois axes ont été pris pour pallier ces limites :</p>

  500. <ul>

  501. <li><em>s’enrichir d’externes</em> : en invitant le plus souvent possible des personnes de différents horizons et en initiant un mouvement de <em>compagnonnage du développement Web</em> — initiative visant à réaliser des échanges inter-entreprises ;</li>

  502. <li><em>partager les compétences</em> : en participant aux conférences et en proposant de partager notre expérience et notre expertise dans les domaines du Web ;</li>

  503. <li><em>faciliter les relations</em> : en organisant des événements regroupant des pairs qui vont être à même de collaborer et d’échanger comme les <em>scopycamps</em>.</li>

  504. </ul>

  505. <h2>Un partage exemplaire</h2>

  506. <p>L’une de nos valeurs est <em>la transparence</em>, nous souhaitons montrer qu’une alternative au mode de travail traditionnel est possible en affichant nos réussites, nos échecs et nos doutes.</p>

  507. <p>La structure administrative n’ayant été créée que fin 2012, il est difficile d’avoir le recul nécessaire pour tirer la moindre conclusion sur cette expérience autant d’un point de vue économique que relationnel.</p>

  508. <p>Néanmoins, nous essayons de montrer une voie et de définir un nouveau <em>framework</em> pour le travail en diffusant les documents administratifs, les outils et les méthodologies qui nous ont été nécessaires afin de faciliter d’autres initiatives similaires à la notre. La distribution de notre travail est un objectif important dans le cadre de cette exemplarité.</p>

  509. <h2>Une alternative à la crise ?</h2>

  510. <p>Dans un contexte de crise systémique (économique, sociale, environnementale, culturelle et finalement de civilisation) qui montre les limites de l’approche hiérarchique et centralisée aussi bien au niveau de l’entreprise que des ressources énergétiques — voir les propositions de Jeremy Rifkin à ce sujet — la création d’une coopérative est une voie alternative qui pourrait porter ses fruits : <strong>ceux de la liberté et de la dignité.</strong></p>

  511. </article>

  512. 

  513. 

  514. 

  515. 

  516. <nav id="jumpto">

  517.   <p>

  518.     <a rel=prev href="/david/blog/2013/piolets-hommes/">← Des piolets et des hommes</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/mont-blanc/">Mont-Blanc →</a>

  519.   </p>

  520. </nav>

  521. 

  522. <footer>

  523.   <div>

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

  525.     <p>

  526.       Bonjour/Hi!

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

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

  529.     </p>

  530.     <p>

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

  532.     </p>

  533. 

  534.       <p>

  535.         Les dernières publications hebdomadaires sont :

  536.       </p>

  537.       <ul class="with_columns">

  538. 

  539.           <li>

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

  541.           </li>

  542. 

  543.           <li>

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

  545.           </li>

  546. 

  547.           <li>

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

  549.           </li>

  550. 

  551.           <li>

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

  553.           </li>

  554. 

  555.           <li>

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

  557.           </li>

  558. 

  559.           <li>

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

  561.           </li>

  562. 

  563.           <li>

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

  565.           </li>

  566. 

  567.           <li>

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

  569.           </li>

  570. 

  571.           <li>

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

  573.           </li>

  574. 

  575.           <li>

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

  577.           </li>

  578. 

  579.           <li>

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

  581.           </li>

  582. 

  583.           <li>

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

  585.           </li>

  586. 

  587.           <li>

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

  589.           </li>

  590. 

  591.           <li>

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

  593.           </li>

  594. 

  595.           <li>

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

  597.           </li>

  598. 

  599.           <li>

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

  601.           </li>

  602. 

  603.           <li>

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

  605.           </li>

  606. 

  607.           <li>

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

  609.           </li>

  610. 

  611.           <li>

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

  613.           </li>

  614. 

  615.           <li>

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

  617.           </li>

  618. 

  619.           <li>

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

  621.           </li>

  622. 

  623.           <li>

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

  625.           </li>

  626. 

  627.           <li>

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

  629.           </li>

  630. 

  631.           <li>

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

  633.           </li>

  634. 

  635.           <li>

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

  637.           </li>

  638. 

  639.           <li>

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

  641.           </li>

  642. 

  643.           <li>

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

  645.           </li>

  646. 

  647.           <li>

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

  649.           </li>

  650. 

  651.           <li>

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

  653.           </li>

  654. 

  655.           <li>

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

  657.           </li>

  658. 

  659.           <li>

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

  661.           </li>

  662. 

  663.           <li>

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

  665.           </li>

  666. 

  667.           <li>

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

  669.           </li>

  670. 

  671.           <li>

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

  673.           </li>

  674. 

  675.           <li>

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

  677.           </li>

  678. 

  679.           <li>

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

  681.           </li>

  682. 

  683.           <li>

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

  685.           </li>

  686. 

  687.           <li>

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

  689.           </li>

  690. 

  691.           <li>

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

  693.           </li>

  694. 

  695.           <li>

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

  697.           </li>

  698. 

  699.           <li>

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

  701.           </li>

  702. 

  703.           <li>

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

  705.           </li>

  706. 

  707.           <li>

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

  709.           </li>

  710. 

  711.           <li>

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

  713.           </li>

  714. 

  715.           <li>

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

  717.           </li>

  718. 

  719.           <li>

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

  721.           </li>

  722. 

  723.           <li>

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

  725.           </li>

  726. 

  727.           <li>

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

  729.           </li>

  730. 

  731.           <li>

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

  733.           </li>

  734. 

  735.       </ul>

  736. 

  737.     <p>

  738.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  755.     </p>

  756.     <p>

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

  758.     </p>

  759.     <p>

  760.       Je ne traque pas ta navigation mais mon

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

  762.       conserve des logs d’accès.

  763.     </p>

  764.   </div>

  765. </footer>

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

  767.   ;(_ => {

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

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

  770.       e.preventDefault()

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

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

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

  774.     })

  775.   })()

  776. </script>

  777. 

  778.   <script>

  779.   /* Service workers */

  780.   if (navigator.serviceWorker) {

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

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

  783.       function sendLinks (selector) {

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

  785.           return link.getAttribute('href')

  786.         })

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

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

  789.       }

  790.       navigator.serviceWorker.getRegistration()

  791.         .then(function (registration) {

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

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

  794.               .then(navigator.serviceWorker.ready)

  795.               .then(function () {

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

  797.               })

  798.               .catch(console.error.bind(console))

  799.           } else {

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

  801.             sendLinks(selector)

  802.           }

  803.         })

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

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

  806.         sendLinks(selector)

  807.       })

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

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

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

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

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

  813. 

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

  815. 

  816.         }

  817.       })

  818.     })

  819.   } else {

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

  821.   }

  822. </script>