davidbgk
/
larlet-fr-david
關注 1
收藏 0
複製 0
程式碼 版本發佈 0 活動
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.
314 提交
1 分支
目錄樹: 678452af50
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 '678452af50'
${ noResults }
larlet-fr-david/david/blog/2015/experimentations-techniques/index.html

index.html 29KB
原始文件 Blame 歷史記錄

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818 
  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>Expérimentations techniques — 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/2015/experimentations-techniques/">

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

  31.   <meta name="description" content="L’objectif de l’exercice est de les faire gagner en autonomie, mais ensemble." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="L’objectif de l’exercice est de les faire gagner en autonomie, mais ensemble." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Expérimentations techniques" />

  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/2015/experimentations-techniques/" />

  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/blog/2015/experimentations-techniques.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.   Expérimentations techniques

  468.   <time>Publié le 19 octobre 2015</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Last but certainly not least, you should write about what you learn. There are so many good reasons to do this, but perhaps the best reason is it forces you to understand the topic better. If you can’t explain how something works, there’s a decent chance you don’t really understand it yourself. And oftentimes you don’t realize you don’t understand it until you try writing it down.</p>

  473. <p>In my experience, writing, giving talks, and creating demos has been one of the best ways to force myself to dive in and fully understand something, inside and out. Even if no one ever reads what you write, the process of doing it is more than worth it.</p>

  474. <p><cite><em><a href="http://philipwalton.com/articles/how-to-become-a-great-front-end-engineer/">How to Become a Great Front-End Engineer</a></em> (<a href="/david/cache/4d600e85879d0f0522a8b79b4ecea92f/">cache</a>)</cite></p>

  475. </blockquote>

  476. <p>On a démarré une séquence <a href="/david/pro/enseignement/">à l’IUT</a> de quatre semaines en demi-groupe la matin et classe entière l’après-midi. L’occasion d’expérimenter sur les sujets techniques qu’ils choisissent en groupes de trois ou quatre le matin et de restituer leurs trouvailles l’après-midi devant leurs collègues pour échanger. Pour l’instant, on en est à deux itérations par groupe le matin. Je leur demande d’orienter leur discussion selon ces quatre axes :</p>

  477. <ul>

  478. <li>ce qu’ils ont réussi à faire ;</li>

  479. <li>ce qu’ils n’ont pas réussi à faire ;</li>

  480. <li>ce qu’ils ont acquis suite à ce travail ;</li>

  481. <li>ce qu’ils vont changer pour s’améliorer.</li>

  482. </ul>

  483. <p><strong>L’objectif de l’exercice est de les faire progresser en autonomie, mais ensemble.</strong> De leur faire prendre conscience qu’ils vont devoir faire ce travail par eux-même et bien souvent tout seuls par la suite. Leur permettre de gagner en maturité sur des restitutions techniques dédiées aux équipes internes en allant pourquoi pas vers des échanges externes type conférences ou écritures. Leur apprendre à se répartir les tâches plutôt que de bosser seuls dans leurs coins.</p>

  484. <p>Cela me permet également de voir ce par quoi est-ce qu’ils sont motivés pour la suite des cours, pour l’instant ils ont exploré :</p>

  485. <ul>

  486. <li>transitions CSS</li>

  487. <li>menu sur image</li>

  488. <li>parallax</li>

  489. <li>menu déroulant</li>

  490. <li>grille Bootstrap</li>

  491. <li>slideshow avec sprites</li>

  492. <li>animations CSS</li>

  493. <li>animations au hover</li>

  494. </ul>

  495. <blockquote>

  496. <p>l’enseignant ne doit pas simplement transmettre des savoirs mais être un mentor qui accompagne les projets des étudiants. Ainsi, l’enseignant ne doit pas être là pour leur dire ce qu’ils <em>doivent faire</em> mais pour les accompagner dans ce qu’ils <em>souhaitent faire</em>.</p>

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

  498. <p>Je pense que la coopération est bien meilleure que la compétition. Aujourd’hui, les systèmes scolaires sont essentiellement basés sur la compétition. En France par exemple, on cherche à sélectionner une élite au détriment des autres alors que la coopération a bien plus d’avantages. Il y a toutefois un modèle intermédiaire qui semble marcher relativement bien : la « coopétition ». Il s’agit de créer des équipes et de les mettre en compétition. C’est vrai dans le foot mais également dans des compétitions étudiantes. De prime abord, je n’aurais pas forcément cru que cela marcherait mais j’ai vu des étudiants devenir champions du monde de biologie synthétique au MIT parce qu’ils avaient été motivés par ce type de coopétition.</p>

  499. <p>Le plus important dans ces formes de coopétition comme celle du MIT est que tous les étudiants doivent documenter en temps réel tout ce qu’ils font. Ces informations sont donc disponibles pour les autres, tout particulièrement pour les étudiants d’une année sur l’autre qui peuvent s’en servir pour aller toujours plus loin. C’est la création de ce que j’appelle des “écosystèmes d’apprentissage coopératif et d’innovation” : à chaque fois que quelqu’un a appris quelque chose, quelqu’un d’autre va pouvoir apprendre cette même chose plus facilement ; à chaque fois que quelqu’un a innové dans une dimension, quelqu’un d’autre va pouvoir innover dans la même dimension plus facilement. Ainsi, le but de la coopétition n’est pas de refaire toujours la même épreuve toujours plus vite, comme c’est le cas de la compétition, mais d’aller toujours plus loin. Il ne s’agit pas de faire une course de 100 mètres chaque année mais de gravir de nouvelles montagnes. Je ne suis pas sûr que ce modèle réussisse à tout le monde mais je pense que la coopétition est déjà mieux que la compétition classique.</p>

  500. <p><cite><em><a href="http://www.paristechreview.com/2015/03/12/education-collaborative/">Les pratiques collaboratives dans l’éducation</a></em> (<a href="/david/cache/4544ff4caa2be5d5f93000acff35df28/">cache</a>)</cite></p>

  501. </blockquote>

  502. <p>Autre règle que j’ai mis en pratique : les étudiants peuvent choisir le même thème qu’un groupe précédent auquel cas ils <em>peuvent</em> reprendre leur travail. Aucun groupe n’a pour l’instant choisi cette option. C’est dommage car cela posait les problématiques de transmission de sources et de documentation qui sont capitales dans notre profession. Nouvelle suggestion : qu’une des personnes du groupe précédent intègre le nouveau groupe pour transmission. Amélioration itérative pour tous :-).</p>

  503. </article>

  504. 

  505. 

  506.   <figure class="image" property="schema:image">

  507.     <img src="/static/david/blog/2015/experimentations-techniques.jpg" alt="" />

  508.   </figure>

  509. 

  510. 

  511. 

  512. <nav id="jumpto">

  513.   <p>

  514.     <a rel=prev href="/david/blog/2015/onoto-voyage/">← Onoto et voyage</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2015/pairmutation-travail/">La pairmutation du travail →</a>

  515.   </p>

  516. </nav>

  517. 

  518. <footer>

  519.   <div>

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

  521.     <p>

  522.       Bonjour/Hi!

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

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

  525.     </p>

  526.     <p>

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

  528.     </p>

  529. 

  530.       <p>

  531.         Les dernières publications hebdomadaires sont :

  532.       </p>

  533.       <ul class="with_columns">

  534. 

  535.           <li>

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

  537.           </li>

  538. 

  539.           <li>

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

  541.           </li>

  542. 

  543.           <li>

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

  545.           </li>

  546. 

  547.           <li>

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

  549.           </li>

  550. 

  551.           <li>

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

  553.           </li>

  554. 

  555.           <li>

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

  557.           </li>

  558. 

  559.           <li>

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

  561.           </li>

  562. 

  563.           <li>

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

  565.           </li>

  566. 

  567.           <li>

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

  569.           </li>

  570. 

  571.           <li>

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

  573.           </li>

  574. 

  575.           <li>

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

  577.           </li>

  578. 

  579.           <li>

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

  581.           </li>

  582. 

  583.           <li>

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

  585.           </li>

  586. 

  587.           <li>

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

  589.           </li>

  590. 

  591.           <li>

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

  593.           </li>

  594. 

  595.           <li>

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

  597.           </li>

  598. 

  599.           <li>

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

  601.           </li>

  602. 

  603.           <li>

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

  605.           </li>

  606. 

  607.           <li>

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

  609.           </li>

  610. 

  611.           <li>

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

  613.           </li>

  614. 

  615.           <li>

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

  617.           </li>

  618. 

  619.           <li>

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

  621.           </li>

  622. 

  623.           <li>

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

  625.           </li>

  626. 

  627.           <li>

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

  629.           </li>

  630. 

  631.           <li>

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

  633.           </li>

  634. 

  635.           <li>

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

  637.           </li>

  638. 

  639.           <li>

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

  641.           </li>

  642. 

  643.           <li>

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

  645.           </li>

  646. 

  647.           <li>

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

  649.           </li>

  650. 

  651.           <li>

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

  653.           </li>

  654. 

  655.           <li>

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

  657.           </li>

  658. 

  659.           <li>

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

  661.           </li>

  662. 

  663.           <li>

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

  665.           </li>

  666. 

  667.           <li>

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

  669.           </li>

  670. 

  671.           <li>

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

  673.           </li>

  674. 

  675.           <li>

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

  677.           </li>

  678. 

  679.           <li>

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

  681.           </li>

  682. 

  683.           <li>

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

  685.           </li>

  686. 

  687.           <li>

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

  689.           </li>

  690. 

  691.           <li>

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

  693.           </li>

  694. 

  695.           <li>

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

  697.           </li>

  698. 

  699.           <li>

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

  701.           </li>

  702. 

  703.           <li>

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

  705.           </li>

  706. 

  707.           <li>

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

  709.           </li>

  710. 

  711.           <li>

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

  713.           </li>

  714. 

  715.           <li>

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

  717.           </li>

  718. 

  719.           <li>

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

  721.           </li>

  722. 

  723.           <li>

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

  725.           </li>

  726. 

  727.           <li>

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

  729.           </li>

  730. 

  731.       </ul>

  732. 

  733.     <p>

  734.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  751.     </p>

  752.     <p>

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

  754.     </p>

  755.     <p>

  756.       Je ne traque pas ta navigation mais mon

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

  758.       conserve des logs d’accès.

  759.     </p>

  760.   </div>

  761. </footer>

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

  763.   ;(_ => {

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

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

  766.       e.preventDefault()

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

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

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

  770.     })

  771.   })()

  772. </script>

  773. 

  774.   <script>

  775.   /* Service workers */

  776.   if (navigator.serviceWorker) {

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

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

  779.       function sendLinks (selector) {

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

  781.           return link.getAttribute('href')

  782.         })

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

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

  785.       }

  786.       navigator.serviceWorker.getRegistration()

  787.         .then(function (registration) {

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

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

  790.               .then(navigator.serviceWorker.ready)

  791.               .then(function () {

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

  793.               })

  794.               .catch(console.error.bind(console))

  795.           } else {

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

  797.             sendLinks(selector)

  798.           }

  799.         })

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

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

  802.         sendLinks(selector)

  803.       })

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

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

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

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

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

  809. 

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

  811. 

  812.         }

  813.       })

  814.     })

  815.   } else {

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

  817.   }

  818. </script>