davidbgk
/
larlet-fr-david
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
719 коммитов
1 ветка
Дерево: a5e9f8b1ff
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'a5e9f8b1ff'
${ noResults }
larlet-fr-david/david/blog/2013/communautes-jargon/index.html

index.html 29KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828 
  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>Communautés et jargon — 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/communautes-jargon/">

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

  31.   <meta name="description" content="Définir des outils et des cérémoniaux de communication au sein d’une équipe permet de faciliter la compréhension du projet par l’ensemble des personnes impliquées." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Définir des outils et des cérémoniaux de communication au sein d’une équipe permet de faciliter la compréhension du projet par l’ensemble des personnes impliquées." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Communautés et jargon" />

  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/communautes-jargon/" />

  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.   Communautés et jargon

  468.   <time>Publié le 3 février 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>— Le PO a écrit des US pourries, impossible de valider le DoD !<br />

  473. — C’était timeboxé, on n’a pas eu le temps de détailler le backlog avec le SM, ça ressortira lors du ROTI…</p>

  474. </blockquote>

  475. <p>Je reviens des Agile Games France où j’ai passé 2 journées intéressantes dans une communauté qui m’est relativement étrangère. Suffisamment en tout cas pour me rendre compte à quel point le simple vocabulaire peut exclure le néophyte assez rapidement. Je prends la communauté agile mais j’ai bien conscience que n’importe quelle communauté a son propre jargon qui la différencie, qui l’identifie, qui sert de liant entre ses membres : <strong>on parle la même langue, on peut partager la même culture.</strong></p>

  476. <p>Je parlais récemment du <a href="/david/blog/2013/ddd-python/">Domain Driven Design</a> qui a réglé le problème avec le <em>language ubiquitaire</em> — un glossaire métier partagé au sein de l’équipe —qui pourrait être mis en place dans les communautés. Encore faut-il vouloir intégrer de nouvelles personnes dans le groupe, ce qui n’est pas évident pour tous les membres et ce quelle que soit la communauté. Il est très intéressant d’identifier les mêmes <em>patterns</em> et les mêmes interrogations dans des communautés totalement différentes quant au rapports entre individus ou à la gestion de <a href="https://larlet.fr/david/thoughts/#communities">la croissance d’une communauté</a>. <em>Il y aurait beaucoup à écrire au sujet de l’éthologie humaine.</em></p>

  477. <p>En discutant lors du retour de cela avec <a href="http://vinyll.github.com/">Vincent</a> et Stéphane dans la voiture, on évoquait la possibilité de créer un glossaire métier dans nos projets avec <a href="http://scopyleft.fr">scopyleft</a> combinant notre vocabulaire avec celui du client et présentant un triple intérêt :</p>

  478. <ul>

  479. <li>la compréhension du métier en lui-même par l’équipe ;</li>

  480. <li>la compréhension de la concrétisation technique du produit par le client ;</li>

  481. <li>la compréhension par un nouvel arrivant sur le projet des termes clé employés pour décrire et être capable d’enrichir le projet.</li>

  482. </ul>

  483. <p>Partagez-vous un vocabulaire commun avec vos interlocuteurs lors de vos projets web ? Si non, est-ce la source d’incompréhensions récurrentes ?</p>

  484. <blockquote>

  485. <p>If in doubt that I communicated, I communicate again. Most issues in business occur because of simple miscommunications or the lack of communications.</p>

  486. <p><cite>Fabian Geyrhalter, <em><a href="http://www.raintoday.com/library/articles/just-say-no-and-other-lessons-learned-from-running-an-agency/">Just Say No, and Other Lessons Learned from Running an Agency</a></em></p>

  487. </blockquote>

  488. <p><strong>Définir des outils et des cérémoniaux de communication au sein d’une équipe permet de faciliter la compréhension du projet par l’ensemble des personnes impliquées.</strong></p>

  489. </article>

  490. 

  491.   <section>

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

  493. 

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

  495.         <p>Une idée que j’avais eue (mais jamais mise en place) lorsque olivier et moi étions à Pheromone était de définir un guide du métier de l’agence et du vocabulaire utilisé. Un petit guide auquel le client pourrait se référer pour savoir où il en était dans le processus qu’est-ce que cela signifait, etc. </p>

  496. <p>L’enjeu est que de nombreux conflits se définissent autour d’une incompréhension des désirs et des enjeux. Quand les attentes et la façon de les communiquer sont mal posées, on passe plus de temps à tenter de traduire que de résoudre les vrais problèmes.</p>

  497. <p>Au sein d’une équipe, cela fonctionne aussi. Un nouvel employé au W3C se retrouve avec un tour guidé du guidebook par <em>une</em> personne de l’équipe. Communication de la culture, qui sert ensuite de tuteur, pour la première année. </p>

  498. <p>Cependant ne pas oublier des particularités culturelles intéressantes. Au Japon entre le maître et l’élève pour l’artisanat, il n’y a pratiquement pas de communications verbales, d’instructions explicites. L’élève regarde le maître pendant des heures afin de comprendre le langage corporel et donc comprendre la technique de fabrication. On apprend par le geste et non les mots. Ce qui est une autre forme de protocole.</p>

  499.         <p><cite>Karl Dubost, le <a href="#comment-1">2013-02-04 à 00:22</a></cite></p>

  500.       </article>

  501. 

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

  503.         <p>Pour la communication en équipe, il y a un outil intéressant (en bordure

  504. de l’agilité): les "core protocoles" <a href="https://sites.google.com/site/coreprotocols/">[0]</a> et <a href="http://www.infoq.com/interviews/gray-core-protocols">[1]</a>. C’est une suite d’outil

  505. et de règle pour améliorer la communication en équipe. Ce qui est très

  506. très intéressant, c’est le "Protocol Check" et "Intention Check" qui

  507. sont des outil permettant d’apprendre en faisant, en posant des

  508. questions. Ces deux éléments permette de se mettre dans la posture du

  509. "quelque chose m’échappe pour comprendre la situation", puis on peut

  510. poser la question, les personnes autour sont "sensibilisé" du fait de la

  511. posture annoncé.</p>

  512. <p>Je n’ai personnellement pas eu l’occasion de tester ces mécanismes, mais

  513. j’ai l’impression que ce sont des outils bien pratique.</p>

  514.         <p><cite>Yannick François, le <a href="#comment-2">2013-02-04 à 07:53</a></cite></p>

  515.       </article>

  516. 

  517.   </section>

  518. 

  519. 

  520. 

  521. 

  522. <nav id="jumpto">

  523.   <p>

  524.     <a rel=prev href="/david/blog/2013/ecriture-navigateurs/">← Écriture et navigateurs</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/conferences-auto-organisation/">Conférences et auto-organisation →</a>

  525.   </p>

  526. </nav>

  527. 

  528. <footer>

  529.   <div>

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

  531.     <p>

  532.       Bonjour/Hi!

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

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

  535.     </p>

  536.     <p>

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

  538.     </p>

  539. 

  540.       <p>

  541.         Les dernières publications hebdomadaires sont :

  542.       </p>

  543.       <ul class="with_columns">

  544. 

  545.           <li>

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

  547.           </li>

  548. 

  549.           <li>

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

  551.           </li>

  552. 

  553.           <li>

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

  555.           </li>

  556. 

  557.           <li>

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

  559.           </li>

  560. 

  561.           <li>

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

  563.           </li>

  564. 

  565.           <li>

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

  567.           </li>

  568. 

  569.           <li>

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

  571.           </li>

  572. 

  573.           <li>

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

  575.           </li>

  576. 

  577.           <li>

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

  579.           </li>

  580. 

  581.           <li>

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

  583.           </li>

  584. 

  585.           <li>

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

  587.           </li>

  588. 

  589.           <li>

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

  591.           </li>

  592. 

  593.           <li>

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

  595.           </li>

  596. 

  597.           <li>

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

  599.           </li>

  600. 

  601.           <li>

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

  603.           </li>

  604. 

  605.           <li>

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

  607.           </li>

  608. 

  609.           <li>

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

  611.           </li>

  612. 

  613.           <li>

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

  615.           </li>

  616. 

  617.           <li>

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

  619.           </li>

  620. 

  621.           <li>

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

  623.           </li>

  624. 

  625.           <li>

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

  627.           </li>

  628. 

  629.           <li>

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

  631.           </li>

  632. 

  633.           <li>

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

  635.           </li>

  636. 

  637.           <li>

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

  639.           </li>

  640. 

  641.           <li>

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

  643.           </li>

  644. 

  645.           <li>

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

  647.           </li>

  648. 

  649.           <li>

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

  651.           </li>

  652. 

  653.           <li>

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

  655.           </li>

  656. 

  657.           <li>

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

  659.           </li>

  660. 

  661.           <li>

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

  663.           </li>

  664. 

  665.           <li>

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

  667.           </li>

  668. 

  669.           <li>

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

  671.           </li>

  672. 

  673.           <li>

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

  675.           </li>

  676. 

  677.           <li>

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

  679.           </li>

  680. 

  681.           <li>

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

  683.           </li>

  684. 

  685.           <li>

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

  687.           </li>

  688. 

  689.           <li>

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

  691.           </li>

  692. 

  693.           <li>

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

  695.           </li>

  696. 

  697.           <li>

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

  699.           </li>

  700. 

  701.           <li>

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

  703.           </li>

  704. 

  705.           <li>

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

  707.           </li>

  708. 

  709.           <li>

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

  711.           </li>

  712. 

  713.           <li>

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

  715.           </li>

  716. 

  717.           <li>

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

  719.           </li>

  720. 

  721.           <li>

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

  723.           </li>

  724. 

  725.           <li>

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

  727.           </li>

  728. 

  729.           <li>

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

  731.           </li>

  732. 

  733.           <li>

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

  735.           </li>

  736. 

  737.           <li>

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

  739.           </li>

  740. 

  741.       </ul>

  742. 

  743.     <p>

  744.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  761.     </p>

  762.     <p>

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

  764.     </p>

  765.     <p>

  766.       Je ne traque pas ta navigation mais mon

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

  768.       conserve des logs d’accès.

  769.     </p>

  770.   </div>

  771. </footer>

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

  773.   ;(_ => {

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

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

  776.       e.preventDefault()

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

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

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

  780.     })

  781.   })()

  782. </script>

  783. 

  784.   <script>

  785.   /* Service workers */

  786.   if (navigator.serviceWorker) {

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

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

  789.       function sendLinks (selector) {

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

  791.           return link.getAttribute('href')

  792.         })

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

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

  795.       }

  796.       navigator.serviceWorker.getRegistration()

  797.         .then(function (registration) {

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

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

  800.               .then(navigator.serviceWorker.ready)

  801.               .then(function () {

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

  803.               })

  804.               .catch(console.error.bind(console))

  805.           } else {

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

  807.             sendLinks(selector)

  808.           }

  809.         })

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

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

  812.         sendLinks(selector)

  813.       })

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

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

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

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

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

  819. 

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

  821. 

  822.         }

  823.       })

  824.     })

  825.   } else {

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

  827.   }

  828. </script>