davidbgk
/
larlet-fr-david
ウォッチ 1
スター 0
フォーク 0
コード リリース 0 アクティビティ
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
244 コミット
1 ブランチ
ツリー: f16aada5e3
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'f16aada5e3' から
${ noResults }
larlet-fr-david/david/blog/2013/open-source-solidarite/index.html

index.html 30KB
Raw Blame 履歴

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850 
  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>Open-Source et solidarité — 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/open-source-solidarite/">

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

  31.   <meta name="description" content="L’Open-Source c’est de la solidarité entre développeurs. Pas plus." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="L’Open-Source c’est de la solidarité entre développeurs. Pas plus." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Open-Source et solidarité" />

  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/open-source-solidarite/" />

  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.   Open-Source et solidarité

  468.   <time>Publié le 10 décembre 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <p>Je suis de plus en plus mal à l’aise avec le terme d’<em>Open-Source</em>. J’ai l’impression que l’on souhaite lui faire porter des valeurs qui sont très périphériques au fait de rendre du code source disponible. <strong>Pour moi l’Open-Source c’est de la solidarité entre développeurs.</strong> Pas plus. On peut y voir un nouveau modèle contributif qui va révolutionner la société ou le futur de nos interactions en pair à pair mais il ne faut pas oublier qu’il s’agit <em>juste</em> de solidarité entre personnes d’une <em>même</em> profession. Si l’on trouve tout cela exceptionnel c’est parce que la solidarité est de moins en moins présente dans nos relations quotidiennes (surtout professionnelles).</p>

  472. <p>La solidarité nécessite de la communication et de la coopération pour pouvoir être effective mais ce sont des effets de bord. Elle conduit même à des rencontres et à des liens très forts avec le sentiment d’œuvrer pour quelque chose d’utile. <em>Mais ça reste de la solidarité entre développeurs.</em> Il n’y a pas de notion d’utilité sociale ou de plus grand dessein véhiculé par l’<em>Open-Source</em>. Et d’ailleurs ses effets dans ce cadre là sont minimes. En revanche, certaines sociétés exploitent à merveille cette solidarité sous couvert d’<em>Open-Source</em>. Pas forcément avec des objectifs humanistes…</p>

  473. <p>Vous pouvez être fier(e) de faire de l’<em>Open-Source</em>, il s’agit de filer un coup de main à un pair, de co-apprendre et de mutualiser (ce qui est déjà pas mal). Mais vous n’êtes pas en train de sauver le monde pour autant :-).</p>

  474. </article>

  475. 

  476.   <section>

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

  478. 

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

  480.         <p>Ma vision, biaisée par la fréquentation trop assidue de Github, est que l’Open Source, ce n’est même pas forcément de la solidarité entre développeurs. Avec Github, j’ai l’impression de voir de plus en plus de code ouvert, mais sans aucune volonté altruiste :</p>

  481. <ul>

  482. <li>

  483. <p>l’ouverture par accident. Github est un outil très puissant pour

  484.   développer. Nombre de développeurs l’adoptent donc pour de petits

  485.   projets personnels. Des projets qui auparavant n’auraient jamais

  486.   quitté leur disque dur mais qui, du fait de l’ouverture par défaut de

  487.   Github, se retrouvent le code à l’air. Avec éventuellement une

  488.   licence depuis que Github a ajouté cette option à la création d’un

  489.   projet. Le code est ouvert, mais accidentellement ;</p>

  490. </li>

  491. <li>

  492. <p>l’ouverture exhibitionniste. Github n’est pas un CV à lui tout seul,

  493.   mais dans certains de nos métiers il fait clairement pour moi figure

  494.   de portfolio. Y publier du code est un moyen de montrer ce que l’on

  495.   sait faire. Nulle solidarité ici.</p>

  496. </li>

  497. </ul>

  498. <p>La solidarité est, en théorie, plus à aller chercher du côté du Mouvement du Logiciel Libre, dont la devise est justement « Liberté, égalité, <em>fraternité</em> ». Le LL se veut un mouvement philosophique / politique, souhaite changer le monde. C’est du moins la volonté de ses apôtres. Pas sûr qu’elle soit partagée par tous les disciples.</p>

  499. <p>Euh, et sinon, tu voulais dire quoi ? J’ai l’impression qu’il manque un contexte à ton billet, que tu réponds à quelque chose que j’ai loupé.</p>

  500.         <p><cite>Clochix, le <a href="#comment-1">2013-12-10 à 21:40</a></cite></p>

  501.       </article>

  502. 

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

  504.         <p>est-ce que tu différencies « Open Source » et « Libre » ?

  505. Est-ce que le Libre porte des valeurs différentes pour toi ? (ne serait-ce que parce qu’il n’y a pas que du code libre, mais aussi des œuvres musicales ou graphiques, etc.)</p>

  506.         <p><cite>Pierre Equoy, le <a href="#comment-2">2013-12-11 à 05:25</a></cite></p>

  507.       </article>

  508. 

  509.       <article id="comment-3" class="comment">

  510.         <blockquote>

  511. <p>Euh, et sinon, tu voulais dire quoi ? J’ai l’impression qu’il manque un contexte à ton billet, que tu réponds à quelque chose que j’ai loupé.</p>

  512. </blockquote>

  513. <p>Oui, je vais ajouter un peu de contexte. C’est suite à une discussion en interne chez scopyleft au sujet de la définition d’utilité qui était différente pour chacun de nous, notamment sur l’Open-Source.</p>

  514. <blockquote>

  515. <p>est-ce que tu différencies « Open Source » et « Libre » ?

  516. Est-ce que le Libre porte des valeurs différentes pour toi ? (ne serait-ce que parce qu’il n’y a pas que du code libre, mais aussi des œuvres musicales ou graphiques, etc.)</p>

  517. </blockquote>

  518. <p>Oui je différencie les deux, le Libre étant beaucoup plus appliqué et véhiculant d’autres valeurs. Il est intéressant de remarquer que Richard Stallman <a href="https://www.gnu.org/philosophy/open-source-misses-the-point.fr.html">fait longuement la distinction également</a> :</p>

  519. <blockquote>

  520. <p>L’open source est une méthodologie de développement ; le logiciel libre est un mouvement de société.</p>

  521. </blockquote>

  522. <p>J’aurais dû lire cet article avant d’écrire mon billet.</p>

  523.         <p><cite>David Larlet, le <a href="#comment-3">2013-12-13 à 01:00</a></cite></p>

  524.       </article>

  525. 

  526.       <article id="comment-4" class="comment">

  527.         <p>Alors si tu parles uniquement d’Open Source, je suis d’accord avec toi. Si tu cherches de l’utilité sociale, une volonté de réformer / transformer la société, il faut plutôt aller du coté du Libre (le logiciel libre n’étant alors qu’une des facette du mouvement du libre, même si c’est actuellement celle la plus connu).</p>

  528. <p>Je pourrais continuer à disserter sur le fait que le mouvement libre porte aussi une vrai critique de tout ce qui est droit de la propriété intellectuelle (principe qui est tout de même actuellement au cœur de toute notre société). A parler de la volonté de changer la relation entre valeur et propriété. A expliquer que les ’pouvoirs’ offert aux utilisateurs/consommateurs/spectateurs/utilisateurs, ont pour conséquence de pouvoir d’impliquer les gens, de revenir dans une démarche du faire. ( ce qui donne parfois une re-implication des gens dans la vie de la cité, l’associatif, une possibilité de se mobiliser rapidement, etc).</p>

  529. <p>Je préfère <a href="http://lepassagerclandestin.fr/fileadmin/assets/catalog/essais/Utopie_logiciel_libre__Broca__Le_passager_clandestin.pdf">vous donner un lien</a> (ici il faut comprendre utopie dans le sens utopie concrète, quelque chose qui n’est pas encore là mais qui pourrait bien arriver).</p>

  530. <p>Bonus, le bouquin est en licence Creative Commons CC-By-NC-ND et vous pouvez donc le lire juste en le téléchargeant si vous ne voulez pas l’acheter.</p>

  531.         <p><cite>Mrjmad, le <a href="#comment-4">2013-12-14 à 20:33</a></cite></p>

  532.       </article>

  533. 

  534.       <article id="comment-5" class="comment">

  535.         <p>Cet article a été mentionné dans : <a href="http://open-time.net/post/2013/12/11/Aujourd-hui-pignocher">http://open-time.net/post/2013/12/11/Aujourd-hui-pignocher</a>.</p>

  536.         <p><cite>Webmention, le <a href="#comment-5">2013-12-18 à 13:42</a></cite></p>

  537.       </article>

  538. 

  539.   </section>

  540. 

  541. 

  542. 

  543. 

  544. <nav id="jumpto">

  545.   <p>

  546.     <a rel=prev href="/david/blog/2013/bapteme-numerique/">← Baptême numérique</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/tiers-lieux/">Tiers Lieux →</a>

  547.   </p>

  548. </nav>

  549. 

  550. <footer>

  551.   <div>

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

  553.     <p>

  554.       Bonjour/Hi!

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

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

  557.     </p>

  558.     <p>

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

  560.     </p>

  561. 

  562.       <p>

  563.         Les dernières publications hebdomadaires sont :

  564.       </p>

  565.       <ul class="with_columns">

  566. 

  567.           <li>

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

  569.           </li>

  570. 

  571.           <li>

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

  573.           </li>

  574. 

  575.           <li>

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

  577.           </li>

  578. 

  579.           <li>

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

  581.           </li>

  582. 

  583.           <li>

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

  585.           </li>

  586. 

  587.           <li>

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

  589.           </li>

  590. 

  591.           <li>

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

  593.           </li>

  594. 

  595.           <li>

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

  597.           </li>

  598. 

  599.           <li>

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

  601.           </li>

  602. 

  603.           <li>

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

  605.           </li>

  606. 

  607.           <li>

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

  609.           </li>

  610. 

  611.           <li>

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

  613.           </li>

  614. 

  615.           <li>

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

  617.           </li>

  618. 

  619.           <li>

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

  621.           </li>

  622. 

  623.           <li>

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

  625.           </li>

  626. 

  627.           <li>

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

  629.           </li>

  630. 

  631.           <li>

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

  633.           </li>

  634. 

  635.           <li>

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

  637.           </li>

  638. 

  639.           <li>

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

  641.           </li>

  642. 

  643.           <li>

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

  645.           </li>

  646. 

  647.           <li>

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

  649.           </li>

  650. 

  651.           <li>

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

  653.           </li>

  654. 

  655.           <li>

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

  657.           </li>

  658. 

  659.           <li>

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

  661.           </li>

  662. 

  663.           <li>

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

  665.           </li>

  666. 

  667.           <li>

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

  669.           </li>

  670. 

  671.           <li>

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

  673.           </li>

  674. 

  675.           <li>

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

  677.           </li>

  678. 

  679.           <li>

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

  681.           </li>

  682. 

  683.           <li>

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

  685.           </li>

  686. 

  687.           <li>

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

  689.           </li>

  690. 

  691.           <li>

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

  693.           </li>

  694. 

  695.           <li>

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

  697.           </li>

  698. 

  699.           <li>

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

  701.           </li>

  702. 

  703.           <li>

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

  705.           </li>

  706. 

  707.           <li>

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

  709.           </li>

  710. 

  711.           <li>

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

  713.           </li>

  714. 

  715.           <li>

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

  717.           </li>

  718. 

  719.           <li>

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

  721.           </li>

  722. 

  723.           <li>

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

  725.           </li>

  726. 

  727.           <li>

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

  729.           </li>

  730. 

  731.           <li>

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

  733.           </li>

  734. 

  735.           <li>

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

  737.           </li>

  738. 

  739.           <li>

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

  741.           </li>

  742. 

  743.           <li>

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

  745.           </li>

  746. 

  747.           <li>

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

  749.           </li>

  750. 

  751.           <li>

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

  753.           </li>

  754. 

  755.           <li>

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

  757.           </li>

  758. 

  759.           <li>

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

  761.           </li>

  762. 

  763.       </ul>

  764. 

  765.     <p>

  766.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  783.     </p>

  784.     <p>

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

  786.     </p>

  787.     <p>

  788.       Je ne traque pas ta navigation mais mon

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

  790.       conserve des logs d’accès.

  791.     </p>

  792.   </div>

  793. </footer>

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

  795.   ;(_ => {

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

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

  798.       e.preventDefault()

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

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

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

  802.     })

  803.   })()

  804. </script>

  805. 

  806.   <script>

  807.   /* Service workers */

  808.   if (navigator.serviceWorker) {

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

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

  811.       function sendLinks (selector) {

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

  813.           return link.getAttribute('href')

  814.         })

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

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

  817.       }

  818.       navigator.serviceWorker.getRegistration()

  819.         .then(function (registration) {

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

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

  822.               .then(navigator.serviceWorker.ready)

  823.               .then(function () {

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

  825.               })

  826.               .catch(console.error.bind(console))

  827.           } else {

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

  829.             sendLinks(selector)

  830.           }

  831.         })

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

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

  834.         sendLinks(selector)

  835.       })

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

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

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

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

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

  841. 

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

  843. 

  844.         }

  845.       })

  846.     })

  847.   } else {

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

  849.   }

  850. </script>