davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Enseigner le Web — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://larlet.fr/david/blog/2016/enseigner-web/">
  <!-- SEO/Semantic metadata -->
  <meta name="description" content="Accompagne-moi pour faire ensemble." />
  <meta name="twitter:description" property="og:description" itemprop="description" content="Accompagne-moi pour faire ensemble." />
  <meta name="twitter:title" property="og:title" itemprop="name" content="Enseigner le Web" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:creator" content="@davidbgk" />
  <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2016/enseigner-web/" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2016/enseigner-web.jpg" />


<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1 class="single">
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Enseigner le Web
  <time>Publié le 26 mai 2016</time>
</h1>
<article class="single">
  <blockquote>
<p>Teaching will make you more humble, because it will painfully show you how limited your knowledge is. <strong>Teaching is the best way to learn.</strong> Only by testing your knowledge against others are you going to learn properly. This will also make you more respectful regarding other developers and other technologies; every language, no matter how humble or arcane, has its place within the <a href="http://canonical.org/~kragen/tao-of-programming.html">Tao of Programming</a> (<a href="/david/cache/25446bf1138b602543230e36ad47fbc8/">cache</a>), and only through teaching will you be able to feel it.</p>
<p><cite><em><a href="https://medium.com/@akosma/being-a-developer-after-40-3c5dd112210c">Being A Developer After 40</a></em> (<a href="/david/cache/35efdb34a267fe7bbcfd3d8eb3b88058/">cache</a>)</cite></p>
</blockquote>
<h2>Contexte</h2>
<p>Le titre est clairement pompeux, plus qu’enseigner le Web il s’agit d’un retour d’expérience sur ces deux dernières années où j’ai tenté de transmettre les concepts du Web et mes expériences  de développeur à une cinquantaine d’étudiants. Ces apprenants étaient alors en troisième année de licence dans le domaine du Web mais n’avaient pour la plupart jamais fait de programmation. Ayant eu beaucoup de confiance et de liberté de la part de la responsable de la licence, j’ai pu essayer des choses.</p>
<p>J’ai eu cette proposition un peu par hasard et par bouche à oreille suite au désistement d’un intervenant, un premier coup de fil mi-septembre et un premier cours mi-octobre. Cela m’a laissé <a href="/david/blog/2014/cours-iut-arles/">peu de temps pour préparer</a> quoi que ce soit ce qui s’est révélé être intéressant pour la suite. Il s’agissait initialement de faire une initiation à HTML/CSS et cela s’est étendu à JavaScript et PHP au cours de l’année. La seconde année, j’ai réussi à écarter PHP pour me focaliser sur le web mobile. Au final, cela a représenté 150 heures d’enseignement.</p>
<p>Détail qui n’en est pas un, les promotions étaient composées à 80% d’étudiantes. J’avais besoin de vérifier à titre personnel à quel moment cette tendance s’inversait dans les équipes de développement web et si les études pouvaient être en cause (réponse : non, il faut donc remettre en question ce qu’il se passe ensuite mais ce n’est pas l’objet de cet article).</p>
<h2>Attentes</h2>
<p>J’avais une contrainte <a href="/david/stream/2015/01/24/">d’espace et de temps</a> avec les créneaux horaires fixes et les salles de classe peu adaptées à l’accompagnement d’une acquisition de savoirs. J’avais aussi une contrainte au niveau des thématiques du contenu mais celle-ci était surtout guidée par mon expérience professionnelle. La responsable était consciente du décalage  actuel entre ce qui était enseigné et la réalité du marché ce qui me conférait une grande liberté autant sur le fond que sur la forme, ses attentes portaient sur la pertinence des savoirs transmis.</p>
<p>De mon côté, je voulais voir ce que j’étais capable de partager en ayant été complètement autodidacte dans le domaine. Je voulais pouvoir essayer des choses et l’introduction de l’agilité dans des cours me motivait. Je trouvais important de <a href="/david/pro/enseignement/">documenter ces expériences</a> afin de partager mes apprentissages et de constituer une mémoire de mon ressenti à ce moment là.</p>
<p>En ce qui concerne les étudiants, ils avaient vraiment du mal en début d’année à formuler leurs attentes qui se focalisaient beaucoup sur des technologies et/ou des connaissances superficielles. C’est assez déroutant au début et cela m’a fait réaliser à quel point <strong>l’apprentissage est guidé par le besoin, le rôle de l’enseignant devenant en quelque sorte de créer artificiellement ce besoin.</strong></p>
<p>Je retiens toutefois qu’ils souhaitaient globalement <a href="/david/blog/2014/cours-iut-bases/">devenir plus autonomes et améliorer la qualité de leurs productions</a> ce qui est encourageant !</p>
<h2>Valeurs</h2>
<blockquote>
<ul>
<li>rendre possible l’Autonomie</li>
<li>encourager la Bienveillance</li>
<li>éveiller la Curiosité.</li>
</ul>
<p><cite><em><a href="/david/stream/2015/04/20/">ABC de l’apprentissage</a></em></cite></p>
</blockquote>
<p>Je n’ai réussi à publier ces valeurs qu’à la fin de la première année et elles m’ont guidé lors de l’année scolaire suivante. Elles sont difficiles à mettre en pratique car elles sont assez éloignées de ce qui est mis en valeur lors d’un cursus scolaire.</p>
<p>Si le <em>motto</em> de Maria Montessori est « aide-moi à faire seul », j’ai essayé d’aller plus loin vu leur maturité et leur niveau de connaissances en allant vers le : <strong>Accompagne-moi pour faire ensemble.</strong></p>
<p>Cela signifie changer de paradigme en passant de la compétition à la collaboration, ce qui pose notamment certains problèmes en matière d’évaluation.</p>
<h2>Co-construction</h2>
<blockquote>
<p>A lot of what beginning programmers need isn’t just good learning materials, but confirmation that not knowing is normal.</p>
<p><cite><em><a href="https://twitter.com/WoodyZuill/status/734306510524850176">@hcatlin sur Twitter</a></em></cite></p>
</blockquote>
<p>Il était important pour moi que les étudiants soient acteurs dans l’acquisition de leurs savoirs. Autant dans l’expérimentation que dans les choix de la matière qu’ils souhaitaient travailler. J’essayais de <a href="/david/blog/2015/cours-iut-construction-collaborative/">lister avec eux les différents sujets que nous étions capables d’aborder</a> et nous établissions ensuite un ordre de priorité dans ces technologies/concepts.</p>
<p>C’était loin d’être évident car ils (on ?) avaient du mal à évaluer leur niveau collectif et l’inertie du groupe. Mais ce n’est pas grave, <a href="/david/blog/2015/cours-iut-comprendre-javascript/">on s’autorisait à se planter</a> comme lorsqu’on a voulu aborder Angular avant de comprendre JavaScript. D’autres fois, il était difficile pour moi de leur faire prendre conscience des bienfaits d’une bonne pratique car sa pertinence requerrait du temps de vie et de complexité. Tant pis, ils s’en rendront peut-être compte plus tard.</p>
<p>J’ai trouvé très intéressant de creuser avec eux le <em>pourquoi</em> de leurs choix. <strong>J’essayais dans la mesure du possible d’adopter une position de pair plus qu’une relation hiérarchique prof/élève.</strong> Je leur ai toujours dit que <a href="http://hintjens.com/blog:117">la somme de leurs savoirs et expériences dépassaient la mienne</a> (<a href="/david/cache/79171cb577782ed113a926daecfdb0d8/">cache</a>) de plusieurs ordres de grandeur. Sans compter leur puissance de recherche et de réflexion. J’ai réussi à leur démontrer cela plusieurs fois.</p>
<h2>Itérations</h2>
<p>Je suis souvent intervenu par demi-journées que je découpais en six moments :</p>
<ul>
<li>Un quart d’heure pour se remémorer ce que l’on avait fait la fois précédente et échanger sur nos veilles respectives ;</li>
<li>quatre sessions de 45 minutes sur lesquelles je reviendrai ensuite ;</li>
<li>un quart d’heure pour prendre du <em>feedback</em> sur ce cours et décider ensemble de ce que l’on va faire et améliorer la fois suivante.</li>
</ul>
<p>Les sessions étaient effectuées en groupe ou seul, avec plus ou moins de contraintes artificielles de ma part. Elles consistaient généralement en <a href="/david/blog/2015/cours-iut-exploration-collective/">un concept technique à travailler</a> avant une courte période théorique/magistrale pour mettre tout le monde au même niveau. Cette théorie pouvant être effectuée par un étudiant.</p>
<p><strong>L’avantage de procéder par itérations est de pouvoir expérimenter de très nombreuses choses en un temps réduit.</strong> La prise de risque devient bien moindre lorsqu’on sait qu’elle sera limitée dans le temps et collectivement améliorée lors de l’itération suivante.</p>
<p>Un autre avantage est d’introduire de la répétition favorisant l’apprentissage. L’introduction de légères variations sur un même exercice permet de voir la classe progresser par paliers au cours d’une même session.</p>
<h2>Agilité</h2>
<blockquote>
<ul>
<li>Prescriptive → Iterative</li>
<li>Content → Culture</li>
<li>Evaluation → Visible Feedback &amp; Reflection</li>
<li>Control → Trust</li>
<li>Competition → Collaboration</li>
</ul>
<p><cite><em><a href="http://www.agileineducation.org/">Agile In Education</a></em> (<a href="/david/cache/09d7711917aafdb9c5cef48050dabeb8/">cache</a>)</cite></p>
</blockquote>
<p>Tout ce travail itératif prend bien sûr ses sources dans les pratiques agiles et empreigne peut-être les élèves d’une autre culture. Une culture où l’échec est permis et où l’on essaye de travailler ensemble pour que l’intelligence collective du groupe fasse progresser chacun individuellement. Une culture où <a href="/david/blog/2016/agile-legacy/">la réaction est plus importante que la défense</a>.</p>
<p><strong>C’est un vrai défi car les apprenants manquent cruellement d’outils pour collaborer.</strong> J’aurais aimé prendre le temps de les initier à Kanban ou Git(hub) mais notre capacité à assimiler de nouvelles choses est limitée et je ne voulais pas introduire trop de nouvelles notions qui ne pouvaient qu’être survolées.</p>
<p>Aussi les <em>pratiques</em> agiles ont davantage été des <em>expérimentations</em> agiles. Il y avait l’inspiration bien sûr mais après cela tout était à découvrir ensemble car ces approches sont peu employées/documentées par ailleurs.</p>
<h2>Notation</h2>
<p>Je suis <a href="/david/blog/2014/cours-iut-evaluation-bilan/">contre les notations/classements</a> mais il s’agit d’une contrainte forte dans l’univers scolaire. Aussi j’ai essayé de mettre les étudiants dans des situations qui pourraient leur servir rapidement à travers des <a href="/david/blog/2015/cours-iut-candidature-spontanee/">candidatures spontanées</a>, des <a href="/david/blog/2015/critique-site/">critiques de sites</a> ou des compte-rendus <a href="/david/blog/2015/experimentations-techniques/">d’expérimentations techniques</a>. Les résultats étaient parfois assez surprenants et les discussions suivant ces exercices toujours passionnées.</p>
<p>Ils avaient globalement du mal à faire le lien entre ce qu’ils avaient appris/expérimenté et la valeur qu’ils pouvaient apporter à une entreprise, se contentant de faire des lettres/CV génériques pour arroser le plus de boîtes possibles (ils font un stage de fin d’année). J’ai essayé de leur montrer qu’une autre voie est possible en ciblant quelques entreprises dans lesquelles ils voulaient <em>vraiment</em> travailler et en personnalisant leur approche : audit de performance, problèmes de validité, d’ergonomie, d’accès mobile, etc.</p>
<p>Ici j’avais beaucoup de mal à être pertinent car je n’ai jamais eu à faire cette démarche de recherche d’emploi/stage donc il était difficile de les accompagner. J’ai plutôt essayé de me mettre dans la peau de quelqu’un d’expérimenté qui recevrait une telle candidature par exemple.</p>
<h2>Holisme</h2>
<p>Ce qui m’a cruellement manqué au cours de ces années c’est l’impression de faire partie d’un tout au sein d’une formation cohérente qui permet à chaque étudiant de s’accomplir dans sa singularité. Mettre en pratique l’agilité d’un côté et voir qu’à la session suivante ils ont de la gestion de projet des années 90 c’est dur. Expliquer les failles de sécurité et regarder ce qu’ils codent en PHP par ailleurs c’est flippant. <strong>Si la communication est difficile entre élèves, elle est catastrophique entre enseignants.</strong></p>
<p>Cela soulève tout un tas de problématiques sur la mise à jour des compétences, le financement de ces moments d’échanges, l’alignement dans les valeurs et les motivations, etc etc. Il y aurait beaucoup de choses à expérimenter dans ce domaine également. De la co-construction d’un programme cohérent à l’accompagnement d’étudiants dans leurs projets professionnels.</p>
<p>Peut-être aussi que cela demande de pouvoir suivre les étudiants pendant plusieurs années pour mieux les connaître et adapter les interventions en fonctions de leurs motivations.</p>
<h2>Confiance</h2>
<blockquote>
<p>Years later, when I did well in programming classes in high school and college, a part of me was dismissive of those results. Because of that initial experience programming, I was subconsciously held back by the fear of finding another brick wall concept that I wouldn’t be able to grasp. It’s taken a decade to reverse this thinking and stop having a fixed mindset about my engineering abilities, but it’s been worth the effort. Now, because I believe that I can grow as an engineer, I’m motivated to invest in myself. The intrinsic belief that I can get better keeps me confidently striving in my career for more responsibility and new challenges.</p>
<p><cite><em><a href="http://ashleynh.me/on-confidence/">On Confidence</a></em> (<a href="/david/cache/2d27064e915b27b1ce3ac3c5e88938e1/">cache</a>)</cite></p>
</blockquote>
<p>Établir un <a href="/david/blog/2016/apprentissage-autodepreciation/">climat de confiance</a> au sein d’une promotion est difficile. Les groupes sociaux se forment rapidement et ajouter la contrainte de les mélanger à celle de collaborer demande parfois un effort trop important. C’est compréhensible et c’est le genre de moments où je ne sais pas s’il faut forcer la diversité qu’ils retrouveront peut-être dans leur futur emploi (ce n’est pas mon cas donc c’est difficile à imposer…).</p>
<blockquote>
<p>A team is not a group of people that work together. A team is a group of people that trust each other.</p>
<p><cite><em><a href="https://twitter.com/simonsinek/status/534495244847689728">Simon Sinek sur Twitter</a></em></cite></p>
</blockquote>
<p>En revanche, j’ai toujours essayé d’encourager les réflexions et les échanges de la part de tous les apprenants. Parfois une simple remarque fait l’objet de l’itération suivante pour confirmer ou réfuter une hypothèse en groupe. Je ne voulais pas forcément qu’ils aient confiance les uns envers les autres mais qu’ils aient de l’attention pour les questionnement de leurs pairs.</p>
<p>J’ai aussi été surpris du <a href="/david/blog/2016/programmation-apprehension/">manque de confiance en eux</a> qu’ils pouvaient avoir vis-à-vis de la programmation, ce qui m’a fait beaucoup réfléchir aux abstractions possibles. Je suis encore en plein doute sur le sujet.</p>
<h2>Prise de recul</h2>
<blockquote>
<p>Le fait de donner des cours m’a permis de réaliser à quel point nos outils sont complexes et élitistes. L’expression japonaise 「灯台下暗し」 (tōdai moto kurashi) prendre du recul pour avoir de la lumière (littéralement : il fait sombre sous la lanterne) me semble appropriée, ce sont les étudiants qui sont arrivés avec leurs lanternes et ont commencé à me faire sérieusement douter. Je leurs suis extrêmement reconnaissant de m’avoir ouvert les yeux et d’avoir pu creuser ensemble quelques approches possibles pour simplifier l’apprentissage des briques du Web.</p>
<p><cite><em><a href="/david/blog/2016/simplicite-defaut/">Simplicité par défaut</a></em></cite></p>
</blockquote>
<p>Les cours ont clairement été moteurs dans ma réflexion sur <a href="/david/blog/2016/minimalisme-esthetique/">le minimalisme et l’esthétique</a> puis <a href="/david/blog/2016/simplicite-defaut/">la simplicité</a>. Le fait de transmettre permet de se remettre en question sur l’intérêt de perpétuer <a href="/david/blog/2015/cours-iut-frameworks-web/">certains concepts ou pratiques</a>. J’ai dû reprendre certaines lignes de code caractère par caractère pour vérifier leur bien-fondé.</p>
<p>Ce qui m’a amené à une approche dirigée par le validateur pour ce qui est du HTML par exemple. À partir de quel moment une page s’affiche dans un navigateur ? À partir de quel moment devient-elle valide ? Est-ce qu’il y a vraiment besoin de plus ? Etc.</p>
<p>J’ai aussi pu reprendre <a href="/david/blog/2016/javascript-zero/">JavaScript depuis zéro</a>, <a href="/david/blog/2015/javascript-abstraction/">questionner les abstractions</a> et bien <a href="/david/blog/2016/javascript-reduit/">creuser ES6/2015/Next</a> car je souhaitais leur enseigner le Web <a href="/david/blog/2015/css-positionnement/">d’aujourd’hui et demain</a> sans forcément leur mettre le fardeau de la rétro-compatibilité tout de suite.</p>
<h2>Contraintes spatiales</h2>
<blockquote>
<p>La salle de formation est une cellule eucaryote : un noyau contenant l’ADN-livres,  des ribosomes-élèves transformant l’information-ADN en connaissances-créations-protéines.</p>
<p><cite><em><a href="https://pedagogieagile.com/2014/11/09/une-classe-est-un-organisme-vivant/">D’une sélection artificielle à une sélection naturelle dans un écosystème complexe</a></em> (<a href="/david/cache/75253c8a0ff2ec14e6dc31b6475ba1d1/">cache</a>)</cite></p>
</blockquote>
<p>Là où Christian den Hartigh organise sa classe comme une cellule  eucaryote, il faut bien voir que les élèves de l’IUT sont par défaut dans une configuration qui leur fait regarder un écran qui est adossé au mur. Autant dire qu’ils me tournent tous le dos ! On fait mieux en matière d’échanges (et de position de travail) à la fois avec moi mais aussi et surtout avec les collègues.</p>
<p>Pour inverser la tendance et essayer de recréer un <em>centre</em> d’intérêt j’essayais au moins de prendre un moment pour qu’ils viennent présenter leur travail au groupe de manière répétée et interactive. J’ai aussi ré-agencé les postes de travail lorsque c’était possible, les salles ayant des machines qui sont généralement boudées (à juste titre vu les limitations) par les étudiants qui préfèrent amener leur propre ordinateur.</p>
<h2>Digital na(t)ives</h2>
<blockquote>
<p>Le niveau de votre classe est celui de la personne la plus faible techniquement. [Paraphrase]</p>
<p><cite><em><a href="https://medium.com/@mrjoelkemp/giving-better-code-reviews-16109e0fdd36">Giving better code reviews</a></em> (<a href="/david/cache/5544b85aba890be84b09b4c637c78bac/">cache</a>)</cite></p>
</blockquote>
<p>Les <a href="https://dattaz.fr/blog/?id=24">articles</a> (<a href="/david/cache/5982631c5a2215d8e13003df100616cb/">cache</a>) ne <a href="http://blog.howtommy.net/?d=2016/03/21/08/59/31-les-jeunes-et-linformatique">manquent pas</a> (<a href="/david/cache/557fb4a622c8e48d1fab7ce9c4979bf8/">cache</a>) pour rendre compte d’une génération qui utilise le Web comme de l’électroménager. J’ai malheureusement pu le vérifier également lors de mes interventions. Savoir enregistrer un fichier avec une autre extension que celle proposée par défaut ou un autre encoding n’est pas évident du tout. Jongler avec des navigateurs et des résolutions non plus. Taper certains caractères correctement peut même révéler quelques surprises…</p>
<p>La difficulté vient du grand écart de niveau qu’il y a entre les étudiants qui ont déjà des difficultés à savoir se servir d’un ordinateur et ceux qui font déjà des sites en auto-entrepreneurs !</p>
<p><strong>Attention toutefois, ceux qui arrivent avec un certain bagage technique vont potentiellement mettre plus de temps à oublier certaines mauvaises habitudes.</strong> Ou à essayer de comprendre certaines de leurs lignes de code qu’ils copient-collent depuis un moment et qui marchent. Le désapprentissage est parfois douloureux.</p>
<h2>Capitalisation</h2>
<blockquote>
<p>Teams are immutable. Every time someone leaves, or joins, you have a new team, not a changed team.</p>
<p><cite><em><a href="https://twitter.com/richardadalton/status/569275411508682752">Richard Adalton sur Twitter</a></em></cite></p>
</blockquote>
<p>Pour une classe, c’est pareil, sauf qu’il y a 25 personnes qui partent. Autant dire que la capitalisation est bien maigre d’une année sur l’autre et ça a probablement été l’une de mes erreurs de partir un peu trop confiant la seconde année. La confiance acquise aurait davantage dû me motiver à expérimenter plein de nouvelles choses plutôt que de reproduire certains <em>patterns</em> qui avaient <a href="/david/blog/2015/cours-iut-argumentation-technique/">bien fonctionné la première fois</a>.</p>
<p>Là où ça devient intéressant, c’est sur les différentes approches que j’ai pu tester.</p>
<h3>Mémoire</h3>
<blockquote>
<p>Misleading headlines notwithstanding, no one really has the slightest idea how the brain changes after we have learned to sing a song or recite a poem. But neither the song nor the poem has been ‘stored’ in it. The brain has simply changed in an orderly way that now allows us to sing the song or recite the poem under certain conditions. When called on to perform, neither the song nor the poem is in any sense ‘retrieved’ from anywhere in the brain, any more than my finger movements are ‘retrieved’ when I tap my finger on my desk. We simply sing or recite – no retrieval necessary.</p>
<p><cite><em><a href="https://aeon.co/essays/your-brain-does-not-process-information-and-it-is-not-a-computer">Your brain does not process information and it is not a computer</a></em> (<a href="/david/cache/3f0962e0cda596197c082311b6ce6e1b/">cache</a>)</cite></p>
</blockquote>
<p>La façon de retenir des informations est encore <a href="https://labmap.wordpress.com/2016/02/15/apprendre-a-apprendre-lecon-1-lart-de-la-memoire/">très difficile à comprendre</a> (<a href="/david/cache/2c0b37dca1fb11074b81ee96fd422938/">cache</a>). On dispose de quelques pistes via <a href="https://labmap.wordpress.com/2016/03/23/apprendre-a-apprendre-lecon-2-a-quoi-bon-discuter/">la discussion</a> (<a href="/david/cache/f2c191a905a63ef1e60cd6cc9e7cf53a/">cache</a>) ou <a href="https://labmap.wordpress.com/2016/05/09/apprendre-a-apprendre-lecon-3-jouer-pour-apprendre-ou-apprendre-pour-jouer/">le jeux</a> (<a href="/david/cache/f42c635e01df0b22ddfe324256b7ab03/">cache</a>) mais elles restent ténues. Ce constat est génial, il y a tout à tester !</p>
<p>Notre profession est particulière car on a le savoir technique à portée de clavier. Cela ne signifie pas que l’on sache l’exploiter pour autant ni en connaître toutes les applications pratiques mais c’est un bon début. Une fois que l’on considère que la technique est externalisée sur le web, il nous reste à assimiler les concepts pour assembler ces notions. Je pense que les mécanismes de mémorisation d’un développeur web sont très différents d’autres professions car il a affaire toute ses journées à des liens. Je me souviens bien souvent d’une chose que je sais pouvoir retrouver et cette simple croyance me suffit pour considérer cela comme une mémorisation. Il faudrait que je développe dans un futur billet.</p>
<h3>Jeux</h3>
<p>On a joué à <a href="http://flexboxfroggy.com/">Flexbox Froggy</a>, <a href="https://code.org/starwars">Starwars</a> ou <a href="http://www.flexboxdefense.com/">Flexbox Defense</a> qui ont été assez appréciés des étudiants. J’ai découvert plus tard <a href="http://pythontutor.com/">Python Tutor</a> qui n’est pas limité au langage Python. Une visualisation très intéressante de ce qu’il se produit au niveau de l’affectation des variables. Un bon candidat pour une prochaine expérience.</p>
<p>Pour des jeux que l’on qualifie de plus <em>sérieux</em>, j’ai tenté des <a href="/david/blog/2015/remember-future/">Remember the future</a> et je terminais régulièrement les cours — voir les itérations — par des rétrospectives pour identifier les points d’amélioration.</p>
<p>Après pour moi le Web est un <a href="/david/blog/2013/jouets-conviviaux/">jouet convivial</a> par excellence. Mais ce n’est pas forcément partagé :-).</p>
<h3>Disposition</h3>
<p>Toute ma démarche est de les faire passer de la chaise au tableau, de l’écoute passive au partage actif. Pour favoriser cela, il faut briser la barrière entre la position assise de l’apprenant et celle debout du sachant. J’ai tenté de les faire participer en inversant souvent les rôles : si tu prends ma place, je prends la tienne, physiquement. J’ai tenté de changer la disposition de la salle. J’ai fait des rétrospectives en étant tous debout, souvent en cercle.</p>
<p><strong>La simple disposition change souvent la façon de communiquer.</strong></p>
<p>Certains auront davantage d’aisance lorsque l’on passe des questions-réponses à la discussion libre. D’autres vont avoir besoin de plus de temps pour préparer une intervention construite. La prise de parole en public devient moins stressante lorsqu’on est en situation de confiance/bienveillance et la disposition des individus est importante pour faciliter cela.</p>
<h2>Communication</h2>
<blockquote>
<p>J’avais testé jadis des accompagnements sur Blog, Twitter, Facebook, mais je n’avais jamais été pleinement satisfait. J’ai conservé Facebook avec les élèves pour rester en relation avec les anciens, ceux qui le souhaitent, et les accompagner pour des aides ponctuelles, ou garder un simple contact.</p>
<p><cite><em><a href="https://pedagogieagile.com/2016/05/15/etendre-la-salle-de-classe-hors-des-murs-slack-pour-leducation-et-linstruction/">Etendre la salle de classe hors des murs : Slack pour l’éducation et l’instruction</a></em> (<a href="/david/cache/5f67a8b4263b837cd8492fcb0007af0c/">cache</a>)</cite></p>
</blockquote>
<p>Je regrette de ne pas avoir pris le temps d’introduire Slack ou équivalent comme canal de discussion car même en annonçant que je réponds aux mails en dehors des heures de cours j’ai eu très peu de questions.</p>
<p>J’avais par exemple introduit un <a href="/david/blog/2015/cours-iut-construction-collaborative/">temps de veille</a> qui était très apprécié la première année et qui n’a pas suscité la même appétence la seconde. Peut-être qu’un espace en ligne pour partager des liens eut été mieux accueilli plutôt que d’abandoner purement et simplement.</p>
<h2>Retours</h2>
<p>Les retours sont limités aux temps de cours et je n’ai malheureusement pas eu de mails une fois l’année terminée. C’est frustrant mais Christian m’expliquait avoir fait le deuil d’une quelconque impact une fois l’année écoulée. Il faut savoir se focaliser sur le présent et sur la relation qui se vit pendant les cours.</p>
<p>Il se trouve que j’ai du mal à lâcher prise là-dessus car j’ai besoin de ce <em>feedback</em> pour pouvoir m’adapter. Je n’ai jamais travaillé en agence et mes 3 mois en SSII sont bien éloignés aussi les conseils que j’ai pu leur donner sont potentiellement à côté de la plaque. Je ne veux surtout pas leur mettre mes propres œillères.</p>
<p><strong>J’aurais aussi aimé pouvoir suivre des étudiants sur plusieurs années pour répondre individuellement à leurs souhaits et construire quelque chose de cohérent ensemble.</strong></p>
<h2>Durée</h2>
<blockquote>
<p>Être en position de transmettre n’est pas une carrière mais un bref état transitoire.</p>
<p><cite><em><a href="/david/blog/2016/transmission-duree/">Transmission et durée</a></em></cite></p>
</blockquote>
<p>Je suis tiraillé sur cette partie, car d’un côté la classe change totalement d’une année sur l’autre et l’on peut apprendre de nouvelles choses à chaque cours. Mais de l’autre j’ai besoin d’avoir davantage d’inspirations d’une année sur l’autre pour avoir le sentiment de faire un accompagnement qui soit utile. <strong>Cela me fait penser au temps nécessaire entre deux conférences, je ne pourrais jamais faire plusieurs fois la même intervention.</strong> J’aurais l’impression de m’ennuyer et donc d’ennuyer le public. J’ai besoin de reconstruire une réflexion à chaque fois. De refaire le vide pour avoir l’espace de cuisiner de nouvelles idées.</p>
<p>Est-ce que j’aurais continué sans mon <a href="/david/blog/2016/dechirance-nationalite/">départ au Canada</a> ? J’ai du mal à répondre à cette question (tiens au passage, si vous avez envie de partager vos connaissances sur Arles, il y a une place qui se libère, contactez-moi :-)). Outre le temps que ça prend, l’enthousiasme des apprenants est un peu en dent de scie et c’est difficile à gérer et à s’en contenter.</p>
<p>D’un autre côté, j’ai toujours envie de ré-expérimenter dans d’autres contextes d’apprentissage.</p>
<h2>Conclusion</h2>
<blockquote>
<p>Je dirais que la plupart des expériences biographiques sont de ce type. La plupart du temps, nous allons là où le monde social nous aurait envoyés de toutes façons, mais nous y allons contents. C’est ce qu’on appelle la vocation. Il y a évidemment des exceptions, et elles sont très importantes : il suffit qu’il y en ait une seule pour que cela change tout – et c’est la liberté.</p>
<p><cite><em>Pierre Bourdieu</em></cite></p>
</blockquote>
<p>Je ne sais pas vraiment s’il y a une conclusion à cette expérience. J’avais soumis le sujet à <a href="http://www.paris-web.fr/2016/">ParisWeb</a> pour pouvoir en discuter avec davantage de personnes mais il n’a malheureusement pas été retenu. Ç’eut été l’occasion de débattre de ces problématiques car je sais que d’autres travailleurs du web font leurs propres expérimentations, peut-être qu’un espace d’échange dédié serait plus adapté. L’initiative <a href="http://traindrop.github.io/">TrainDrop</a> mériterait d’être étendue avec un espace de discussion pérenne pour échanger sur nos expériences, nos doutes et pourquoi pas aider de nouvelles personnes à se lancer.  Qui serait motivé ?</p>
<p><em>Je vais profiter d’être à <a href="https://sudweb.fr/2016/">SudWeb</a> pour insuffler un peu d’énergie dans le projet. <a href="/david/blog/2016/sudweb-2016/">Retour sur l’atelier</a></em>.</p>
</article>


  <figure class="image" property="schema:image">
    <img src="/static/david/blog/2016/enseigner-web.jpg" alt="" />
  </figure>


<nav id="jumpto">
  <p>
    <a rel=prev href="/david/blog/2016/consultation-offline/">← Consultation offline</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2016/sudweb-2016/">SudWeb 2016 →</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>

      <p>
        Les dernières publications hebdomadaires sont :
      </p>
      <ul class="with_columns">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      </ul>

    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>

  <script>
  /* Service workers */
  if (navigator.serviceWorker) {
    window.addEventListener('load', function () {
      var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
      function sendLinks (selector) {
        var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
          return link.getAttribute('href')
        })
        links.push(location.pathname)  // Put the current page in cache too.
        navigator.serviceWorker.controller.postMessage({ links: links })
      }
      navigator.serviceWorker.getRegistration()
        .then(function (registration) {
          if (!registration || !navigator.serviceWorker.controller) {
            return navigator.serviceWorker.register('/serviceworker.js')
              .then(navigator.serviceWorker.ready)
              .then(function () {
                console.log('[ServiceWorker] Ready to go!')
              })
              .catch(console.error.bind(console))
          } else {
            console.log('[ServiceWorker] Send links via registration')
            sendLinks(selector)
          }
        })
      navigator.serviceWorker.addEventListener('controllerchange', function () {
        console.log('[ServiceWorker] Send links via controller change')
        sendLinks(selector)
      })
      navigator.serviceWorker.addEventListener('message', function (event) {
        var link = document.querySelector('a[href="' + event.data.link + '"]')
        if (event.data.status && link) {
          link.style.backgroundColor = '#2d7474'
          link.style.color = '#f0f0ea'

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

        }
      })
    })
  } else {
    console.warn('[ServiceWorker] No cache for old browsers.')
  }
</script>