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.
288 Commits
1 Branch
Tree: 215e169fba
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '215e169fba'
${ noResults }
larlet-fr-david/david/blog/2013/outils-conviviaux/index.html

index.html 31KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858 
  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>Outils conviviaux — 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/outils-conviviaux/">

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

  31.   <meta name="description" content="À la recherche d’outils numériques conviviaux conformes à la vision d’Illich." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="À la recherche d’outils numériques conviviaux conformes à la vision d’Illich." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Outils conviviaux" />

  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/outils-conviviaux/" />

  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.   Outils conviviaux

  468.   <time>Publié le 13 juin 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <p>Nous avons récemment déjeuné avec les personnes s'occupant d'<a href="http://outils-reseaux.org/">Outils-Réseaux</a> dans les locaux de <a href="http://scopyleft.fr">scopyleft</a> (d'ailleurs, si vous passez dans le coin de Montpellier/Clapiers n'hésitez pas à venir nous voir) qui nous ont parlé des <strong>outils conviviaux</strong> introduits par <a href="https://fr.wikipedia.org/wiki/Ivan_Illich">Ivan Illich</a> :</p>

  472. <blockquote>

  473. <p>Illich définit alors trois critères indispensables pour qu'une instrumentation ou une institution soit considérée comme juste ou conviviale :</p>

  474. <ul>

  475. <li>elle ne doit pas dégrader l'autonomie personnelle en se rendant indispensable</li>

  476. <li>elle ne suscite ni esclave, ni maître</li>

  477. <li>elle élargit le rayon d'action personnel</li>

  478. </ul>

  479. <p><cite><em>Critères de convivialité</em>, <a href="https://fr.wikipedia.org/wiki/Outil_convivial#Crit.C3.A8res_de_convivialit.C3.A9">sur Wikipédia</a>.</cite></p>

  480. </blockquote>

  481. <p>Lorsque l'on applique ces critères à l'informatique, <strong>on se rend compte du chemin qu'il reste à faire pour obtenir des outils numériques conviviaux.</strong> Cela m'a amené à penser à l'utilisation des <em>frameworks</em> comme outils d'industrialisation à l'origine d'une hiérarchisation entre ceux qui connaissent le langage et ceux qui connaissent les méta-outils associés au langage. On en arrive à une hiérarchie entre développeurs avant même de pouvoir rendre ces outils accessibles au grand public.</p>

  482. <blockquote>

  483. <p>Permettre à nos outils de communiquer localement sans passer par un réseau distant à des propriétés sociales intéressantes :</p>

  484. <ul>

  485. <li>Interactions physiques couplées à l'interaction du réseau local</li>

  486. <li>Renforcement du contrat social</li>

  487. <li>Augmentation de l'opacité vis à vis des infrastructures distantes</li>

  488. </ul>

  489. <p><cite><em><a href="http://www.la-grange.net/2013/04/02/edition-locale">L'édition en intimité sur un réseau local</a></em>, Karl Dubost</cite></p>

  490. </blockquote>

  491. <p>Pour un projet que l'on a en interne, j'ai pas mal réfléchi à la simplicité extrême que pouvait prendre une application et j'en suis arrivé à la solution conviviale suivante :</p>

  492. <ul>

  493. <li>un seul fichier <code>HTML</code> à transmettre à l'utilisateur final contenant les css/js/html non minifiés et commentés, celui-ci doit être capable de le modifier ;</li>

  494. <li>un espace de stockage local pour avoir du cache en situation de déconnexion ou si les données ne sont pas destinées à être échangées/publiées ;</li>

  495. <li>une centralisation des données via une <code>API</code> (par exemple <a href="http://webd.is/">webdis</a>) en attendant d'avoir une solution de pair-à-pair efficace pour synchroniser les données entre plusieurs personnes ;</li>

  496. <li>la possibilité d'exporter les données dans un format lisible et traitable.</li>

  497. </ul>

  498. <p><strong>Est-ce que vous avez des exemples d'applications web conviviales ?</strong></p>

  499. </article>

  500. 

  501.   <section>

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

  503. 

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

  505.         <p>Tu définis quatre critères pour pouvoir qualifier un outil de convivial.

  506. Le premier est qu’il soit disponible sous la forme d’un unique fichier

  507. non minifié.  Cette dernière contrainte me fait un peu tiquer.  Pour de

  508. basses questions de performances, l’outil pourrait gagner à avoir son

  509. source minifié.  Est-ce que, comme pour un logiciel dont on distribue le

  510. code source et la version compilée, un outil pourrait être convivial

  511. s’il est disponible sous la forme d’un fichier unique minifié et sous la

  512. forme de plusieurs fichiers sources, lisibles et commentés ?</p>

  513. <p>Le troisième critère est la centralisation des données. Ce critère ne

  514. pourrait-il pas être alternatif avec la possibilité d’exporter les

  515. données ? En effet, offrir une possibilité de synchroniser plusieurs

  516. instances de l’outil via un serveur impose de se lier à une solution

  517. serveur. Le partage de données via import / export, certes moins

  518. pratique, offre à mon humble avis, plus de liberté aux utilisateurs.</p>

  519. <p>Dernier point, le plus important, proposes-tu une certification « outil

  520. certifié convivial par <code>david</code>bgk` », à apposer sur mon application si

  521. j’arrive à remplir tes critères ? Comme les regrettés badges « Valid

  522. XHTML 1.0 »</p>

  523.         <p><cite>Clochix, le <a href="#comment-1">2013-12-20 à 11:07</a></cite></p>

  524.       </article>

  525. 

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

  527.         <blockquote>

  528. <p>Tu définis quatre critères pour pouvoir qualifier un outil de convivial. Le premier est qu’il soit disponible sous la forme d’un unique fichier non minifié. Cette dernière contrainte me fait un peu tiquer. Pour de basses questions de performances, l’outil pourrait gagner à avoir son source minifié.</p>

  529. </blockquote>

  530. <p>Je ne vois pas très bien la contrainte des performances sur un environnement local, en quoi la taille du code risque d'influer sur le chargement de la page ? Ou alors tu parles d'autres performances ? Dommage de perdre la possibilité de voir la source instantanément depuis son navigateur lors d'une inspection du code par exemple.</p>

  531. <blockquote>

  532. <p>Est-ce que, comme pour un logiciel dont on distribue le code source et la version compilée, un outil pourrait être convivial s’il est disponible sous la forme d’un fichier unique minifié et sous la forme de plusieurs fichiers sources, lisibles et commentés ?</p>

  533. </blockquote>

  534. <p>Ce que je pourrais comprendre par contre c'est la flexibilité lors du développement d'avoir le fichier éclaté afin de pouvoir bénéficier de la coloration syntaxique ou d'outils externes. J'ai peur que cela introduise de la complexité par contre, le fait de tout avoir dans le même fichier peut être un indicateur de la taille à ne pas dépasser avant de devenir incompréhensible pour autrui.</p>

  535. <blockquote>

  536. <p>Le troisième critère est la centralisation des données. Ce critère ne pourrait-il pas être alternatif avec la possibilité d’exporter les données ? En effet, offrir une possibilité de synchroniser plusieurs instances de l’outil via un serveur impose de se lier à une solution serveur. Le partage de données via import / export, certes moins pratique, offre à mon humble avis, plus de liberté aux utilisateurs.</p>

  537. </blockquote>

  538. <p>En effet cela pourrait être une alternative tout à fait valable en attendant du pair à pair, j'ai l'impression que l'on n'est plus très loin d'une solution envisageable <a href="http://simplewebrtc.com/">à base de WebRTC</a>.</p>

  539. <blockquote>

  540. <p>Dernier point, le plus important, proposes-tu une certification « outil certifié convivial par <code>david</code>bgk` », à apposer sur mon application si j’arrive à remplir tes critères ? Comme les regrettés badges « Valid XHTML 1.0 »</p>

  541. </blockquote>

  542. <p>Haha, bien sûr avec un lien vers mon validateur et/ou mieux une formation obligatoire qui permet à des tiers d'être certifiés/certifiants moyennant finances. Le tout <a href="https://github.com/landondyer/kasm/blob/master/LICENSE">sous licence ABRMS</a> bien évidemment.</p>

  543. <p>Blague à part, cette définition est vivante, n'hésite pas à l'enrichir de tes propres critères. Pour moi <a href="http://esquisses.clochix.net/2013/12/19/mdnhub/">MDNHub</a> se rapproche beaucoup de ce que j'avais en tête pour définir une application conviviale et sa taille me semble suffisamment raisonnable pour ne pas avoir à la minifier.</p>

  544.         <p><cite>David Larlet, le <a href="#comment-2">2013-12-20 à 17:10</a></cite></p>

  545.       </article>

  546. 

  547.   </section>

  548. 

  549. 

  550. 

  551. 

  552. <nav id="jumpto">

  553.   <p>

  554.     <a rel=prev href="/david/blog/2013/quete-sens/">← Une quête de sens</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/conferences-conviviales/">Conférences conviviales →</a>

  555.   </p>

  556. </nav>

  557. 

  558. <footer>

  559.   <div>

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

  561.     <p>

  562.       Bonjour/Hi!

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

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

  565.     </p>

  566.     <p>

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

  568.     </p>

  569. 

  570.       <p>

  571.         Les dernières publications hebdomadaires sont :

  572.       </p>

  573.       <ul class="with_columns">

  574. 

  575.           <li>

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

  577.           </li>

  578. 

  579.           <li>

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

  581.           </li>

  582. 

  583.           <li>

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

  585.           </li>

  586. 

  587.           <li>

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

  589.           </li>

  590. 

  591.           <li>

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

  593.           </li>

  594. 

  595.           <li>

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

  597.           </li>

  598. 

  599.           <li>

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

  601.           </li>

  602. 

  603.           <li>

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

  605.           </li>

  606. 

  607.           <li>

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

  609.           </li>

  610. 

  611.           <li>

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

  613.           </li>

  614. 

  615.           <li>

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

  617.           </li>

  618. 

  619.           <li>

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

  621.           </li>

  622. 

  623.           <li>

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

  625.           </li>

  626. 

  627.           <li>

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

  629.           </li>

  630. 

  631.           <li>

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

  633.           </li>

  634. 

  635.           <li>

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

  637.           </li>

  638. 

  639.           <li>

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

  641.           </li>

  642. 

  643.           <li>

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

  645.           </li>

  646. 

  647.           <li>

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

  649.           </li>

  650. 

  651.           <li>

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

  653.           </li>

  654. 

  655.           <li>

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

  657.           </li>

  658. 

  659.           <li>

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

  661.           </li>

  662. 

  663.           <li>

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

  665.           </li>

  666. 

  667.           <li>

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

  669.           </li>

  670. 

  671.           <li>

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

  673.           </li>

  674. 

  675.           <li>

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

  677.           </li>

  678. 

  679.           <li>

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

  681.           </li>

  682. 

  683.           <li>

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

  685.           </li>

  686. 

  687.           <li>

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

  689.           </li>

  690. 

  691.           <li>

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

  693.           </li>

  694. 

  695.           <li>

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

  697.           </li>

  698. 

  699.           <li>

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

  701.           </li>

  702. 

  703.           <li>

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

  705.           </li>

  706. 

  707.           <li>

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

  709.           </li>

  710. 

  711.           <li>

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

  713.           </li>

  714. 

  715.           <li>

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

  717.           </li>

  718. 

  719.           <li>

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

  721.           </li>

  722. 

  723.           <li>

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

  725.           </li>

  726. 

  727.           <li>

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

  729.           </li>

  730. 

  731.           <li>

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

  733.           </li>

  734. 

  735.           <li>

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

  737.           </li>

  738. 

  739.           <li>

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

  741.           </li>

  742. 

  743.           <li>

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

  745.           </li>

  746. 

  747.           <li>

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

  749.           </li>

  750. 

  751.           <li>

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

  753.           </li>

  754. 

  755.           <li>

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

  757.           </li>

  758. 

  759.           <li>

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

  761.           </li>

  762. 

  763.           <li>

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

  765.           </li>

  766. 

  767.           <li>

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

  769.           </li>

  770. 

  771.       </ul>

  772. 

  773.     <p>

  774.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  791.     </p>

  792.     <p>

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

  794.     </p>

  795.     <p>

  796.       Je ne traque pas ta navigation mais mon

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

  798.       conserve des logs d’accès.

  799.     </p>

  800.   </div>

  801. </footer>

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

  803.   ;(_ => {

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

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

  806.       e.preventDefault()

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

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

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

  810.     })

  811.   })()

  812. </script>

  813. 

  814.   <script>

  815.   /* Service workers */

  816.   if (navigator.serviceWorker) {

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

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

  819.       function sendLinks (selector) {

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

  821.           return link.getAttribute('href')

  822.         })

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

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

  825.       }

  826.       navigator.serviceWorker.getRegistration()

  827.         .then(function (registration) {

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

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

  830.               .then(navigator.serviceWorker.ready)

  831.               .then(function () {

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

  833.               })

  834.               .catch(console.error.bind(console))

  835.           } else {

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

  837.             sendLinks(selector)

  838.           }

  839.         })

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

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

  842.         sendLinks(selector)

  843.       })

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

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

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

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

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

  849. 

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

  851. 

  852.         }

  853.       })

  854.     })

  855.   } else {

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

  857.   }

  858. </script>