davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 Commits
1 Branch
Tree: 5edc21ef71
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '5edc21ef71'
${ noResults }
larlet-fr-david/david/blog/2014/education-informatique/index.html

index.html 35KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848 
  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>Éducation et informatique — 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/2014/education-informatique/">

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

  31.   <meta name="description" content="Une fenêtre déshumanisée sur l’Humanité." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Une fenêtre déshumanisée sur l’Humanité." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Éducation et informatique" />

  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/2014/education-informatique/" />

  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/2014/education-informatique.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.   Éducation et informatique

  468.   <time>Publié le 23 juin 2014</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Moins les enfants regarderont les écrans, plus ils développeront leur imagination et leur créativité. Car les écrans contiennent en eux des histoires visuelles et sonores qui empêcheraient les enfants d’imaginer d’autres images et d’autres mondes possibles.</p>

  473. <p><cite><em><a href="http://pluzz.francetv.fr/videos/ecran_global_,103999434.html">Écran global</a></em>, reportage de Anne-Sophie Lévy-Chambon</cite></p>

  474. </blockquote>

  475. <p>Protéger son enfant des écrans s’avère être une tâche plus difficile que ce que j’imaginais. Le compteur en cumulé doit être aux alentours des 10-15 minutes après 7 mois, ce qui est plutôt dans la limite haute de ce que je m’étais fixé. Et lorsque je vois l’attrait qu’il a pour un écran dès qu’il en croise un, cela me conforte dans l’idée qu’il va falloir attendre qu’il soit en mesure de comprendre un peu ce qu’il y a derrière : <strong>une fenêtre déshumanisée sur l’Humanité.</strong></p>

  476. <p>On parle souvent de la limite des 3 ans pour qu’un enfant puisse regarder/interagir avec un écran sans être perturbé par l’absence de retour de sa part. On verra à ce moment là si mon <em>digital native</em> souhaite faire usage de ses doigts.</p>

  477. <blockquote>

  478. <p>L’élève sait que les équipements informatiques utilisent une information codée et il est initié au fonctionnement, au processus et aux règles des langages informatiques ; il est capable de réaliser de petites applications utilisant des algorithmes simples. </p>

  479. <p><cite><em><a href="/static/david/blog/Socle_commun_de_connaissances_competences_culture.pdf">Socle commun de connaissances, de compétences et de

  480. culture</a></em></cite></p>

  481. </blockquote>

  482. <p><a href="http://www.cynicalturtle.net/kame/">Damien B</a> et <a href="https://n.survol.fr/">Éric D.</a> discutaient ce soir de l’apprentissage du code en primaire sur Twitter. J’ai beaucoup de mal avec cette question car le code constitue une part non négligeable <a href="/david/blog/2014/manifeste-developpeur/">de mon quotidien</a> et <a href="/david/pro/">de mon métier</a>. Et si je trouve que la connaissance du Web devrait faire partie de <a href="/david/blog/2014/education-citoyenne-web/">l’éducation citoyenne</a>, je suis plus circonspect sur le développement en lui-même. En fait, il s’agit d’une problématique de cohérence. Soit on considère que le <em>codage</em> (sic) est une activité artisanale et dans ce cas il faudrait également enseigner <a href="/david/blog/2014/education-manuelle/">d’autres activités</a> comme le travail du bois en primaire (ce que <a href="/david/blog/2013/eduquer-joie/">certaines écoles alternatives</a> font — voir le reportage sus-cité). Soit on considère que <a href="/david/blog/2012/api-proletarisation/">l’industrialisation de l’informatique</a> est inévitable et dans ce cas là toute la question algorithmique simple devient inutile puisqu’il s’agira d’empiler les boîtes noires à un autre niveau. Il faut bien définir les objectifs que l’on se fixe avec cet apprentissage du code dès le primaire. Dans quelle mesure permet-il <cite>la poursuite d’études, la construction d’un avenir personnel et professionnel et préparer à l’exercice de la citoyenneté</cite> ? Tous bidouilleurs, soit, mais que nous laisse-t-on bidouiller par la suite ?</p>

  483. <p>Ce que je vois en filigrane de cette mutation est plus grave, c’est la mise sur un piédestal de ceux qui savent coder par pure incompréhension du changement de paradigme qui est en train de s’effectuer avec le numérique. Ou serait-ce pour pouvoir à terme alimenter plus facilement <a href="/david/blog/2014/talents-publicitaires/">les canons publicitaires</a> ? La question reste ouverte… jusqu’à la prochaine réforme.</p>

  484. </article>

  485. 

  486.   <section>

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

  488. 

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

  490.         <p>Je suis avec intérêt tes brèves, d’autant plus depuis que tu es père. Mon garçon à 3 ans et demi, et je suis passé par les mêmes réflexions.</p>

  491. <p>J’ai utilisé le dessin animé beaucoup plus que ce je pouvais imaginer, car sa mère a été très longuement et fréquemment absente, et nous rompions l’isolement (on vit loin de tout) avec l’image qui bouge. Il avait 1 an et demi lorsque j’ai commencé.</p>

  492. <p>On n’imagine pas la portée de cette nourriture chez un enfant. Elle se retrouve dans ses mots, ses jeux et est un révélateur de personnalité.

  493. Elle est aussi à l’instar du sucre une substance addictive.</p>

  494. <p>Ce qui me marque le plus dans l’interaction avec l’ordinateur (à la maison il n’y a qu’un portable, pas de tablette, pas de télé), c’est à quel point il a intégré l’immédiateté de l’information : il est sensible à la vitesse de chargement et à la pertinence de mes actions. L’instantanéité pourrait devenir une exigence et elle est induite par l’outil.</p>

  495. <p>Cela m’a poussé à étudier la question du numérique à l’école, et le sujet est très vaste. Je reste circonspect sur l’approche pédagogique de la culture informatique (tel que je la suis dans <a href="https://www.france-universite-numerique-mooc.fr/courses/ENSCachan/20003/Trimestre_2_2014/about">le MOOC eFan</a>).</p>

  496. <p>J’ai décidé de m’y impliquer afin que des développeurs participent au développement du numérique et non pas seulement des éditeurs d’application ou de plateformes (ENT) et des chercheurs.

  497. A titre d’information : aujourd’hui, ce que j’ai identifié de plus important est de mettre en place des outils pour les enseignants qui vont avoir besoin de beaucoup de bienveillance pour intégrer ce changement majeur (qui leur sera imposé). J’ai commencé à écrire <a href="http://edu.odev.fr/wiki/">les bases de cette réflexion</a>. Le travail est inachevé (j’ai du mal à inclure les références), mais donne mes lignes. La première étape sera une application de plus (sur les 190 référencées dans les académies !).</p>

  498. <p>Une fois ou deux par an nous essayons d’échapper à l’électricité une semaine ou deux et la force de ces moments équilibre pour l’instant l’attrait pour le portable, le téléphone et les dessins animés. Je suis convaincu que des propositions humaines fortes et la nourriture des espaces naturels permettent de relativiser l’importance des machines.</p>

  499.         <p><cite>Alain Vitry, le <a href="#comment-1">2014-06-24 à 03:53</a></cite></p>

  500.       </article>

  501. 

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

  503.         <p>De plus en plus, je me demande si à la place de la position de l’interdiction, on se replacer dans une position de l’équilibre. En consacrant autant de temps à un nombre d’activités diverses, on élargit le champ des possibles plutôt qu’en le limitant à l’une de nos obsessions. Mettons l’écran et l’informatique de côté, comment diversifier ton expérience du monde lorsque tu es fille d’ébéniste ou fils de professeur en littérature. Quelle est l’expérience du monde si tu ne vis qu’en ville et pas dans la forêt. Quelle est l’expérience si tu ne touches que des matières lisses et propres et pas la boue et l’écorce.</p>

  504.         <p><cite>Karl Dubost, le <a href="#comment-2">2014-09-16 à 04:56</a></cite></p>

  505.       </article>

  506. 

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

  508.         <blockquote>

  509. <p>En consacrant autant de temps à un nombre d’activités diverses, on élargit le champ des possibles plutôt qu’en le limitant à l’une de nos obsessions.</p>

  510. </blockquote>

  511. <p>Tout à fait. Chez nous, on n’interdit pas. On limite en expliquant que ça use un peu le cerveau alors qu’il y aurait plein d’autres choses à faire. Et on fait avec eux (promenades, découverte, photo, jeux de société). Enfin, quand on a le courage ;)</p>

  512.         <p><cite>Stéphane Deschamps, le <a href="#comment-3">2014-09-16 à 09:10</a></cite></p>

  513.       </article>

  514. 

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

  516.         <p>Chez nous, on projette des dessins animés via l’écran d’ordinateur, c’est le seul usage à partir de 2 ans. Nous restons auprès des enfants, si possible sur le canapé à côté d’eux.

  517. Nous n’avons pas de TV, du coup, on passe du temps à jouer aux cubes/voiture/poupées/Lego, à dessiner, à lire des histoires, à chanter.</p>

  518. <p>Je trouve <a href="http://www.express.be/business/fr/technology/pourquoi-steve-jobs-et-cie-ont-garde-leurs-enfants-eloigns-des-ipads/207897.htm">cet article sur l’Express</a>, qui continue, et je me suis permise de le coller dans le mail :</p>

  519. <blockquote>

  520. <p>Les dirigeants de la Silicon Valley transforment le monde en un environnement totalement technologique, mais se montrent comme parents particulièrement réticents à l’égard de ces applications innovantes, écrit Nick Bilton, journaliste spécialiste de la technologie auprès du journal américain The New York Times. Bilton a en effet constaté que l’élite de la Silicon Valley contrôle de manière stricte l’utilisation de la technologie par leurs enfants.</p>

  521. <p>« Le défunt Steve Jobs a admis à l’époque que ses enfants n’avaient jamais utilisé un iPad, un des grands &gt; succès d’Apple », explique Nick Bilton. Jobs faisait également remarquer aussi que l’utilisation de la &gt; technologie était particulièrement limitée dans sa maison.</p>

  522. <p>Plus tard, il est apparu que Jobs n’était pas une exception. Dans la famille de Evan Williams, un des &gt; fondateurs de Twitter, les enfants n’ont pas non plus de tablettes et en outre, la lecture de livres imprimés &gt; est encouragée. Chris Anderson, ancien rédacteur en chef du magazine de technologie Wired, a même admis qu’il &gt; ne tolérait pas d’écran d’ordinateur dans la chambre de ses enfants.</p>

  523. <p>« Nous avons constaté en premier les dangers de cette technologie et je ne veux pas que mes enfants puissent &gt; être confrontés à ces problèmes », a affirmé Anderson pour justifier ces restrictions.</p>

  524. <p>Bilton dit avoir constaté que la plupart des pionniers de la technologie limitent l’utilisation de gadgets &gt; comme les tablettes ou les smartphones par leurs enfants à 30 minutes par jour pendant la semaine, alors que &gt; d’autres ne tolèrent l’usage de la technologie que pendant le week-end.</p>

  525. <p>A partir de l’âge de dix ans, les enfants de ces pionniers peuvent, selon le journaliste, utiliser pour la &gt; plupart un ordinateur, mais uniquement pour leurs travaux scolaires.</p>

  526. <p>Hannah Rosin, journaliste auprès de The Atlantic, a constaté un phénomène similaire chez les concepteurs &gt; d’applications pour enfants. « Là aussi, il a semblé que le divertissement numérique est tabou pendant la &gt; semaine », dit-elle.</p>

  527. <p>Les restrictions par rapport à la technologie se reflètent aussi souvent selon les observateurs dans le choix &gt; des écoles que les entrepreneurs de Silicon Valley réservent à leurs enfants.</p>

  528. <p>Beaucoup de cadres d’entreprises de Google, Yahoo, Apple et eBay semblent en effet avoir inscrit leurs &gt; enfants à la Waldorf School dont la philosophie ne laisse aucune place à la technologie qui selon la &gt; direction, représente une menace pour la créativité, le comportement social et la concentration des élèves.</p>

  529. </blockquote>

  530.         <p><cite>Sarah Haim, le <a href="#comment-4">2014-09-19 à 14:35</a></cite></p>

  531.       </article>

  532. 

  533.   </section>

  534. 

  535. 

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

  537.     <img src="/static/david/blog/2014/education-informatique.jpg" alt="" />

  538.   </figure>

  539. 

  540. 

  541. 

  542. <nav id="jumpto">

  543.   <p>

  544.     <a rel=prev href="/david/blog/2014/ecriture-bonheur/">← Écriture et bonheur</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2014/lecture-joie/">Lecture et joie →</a>

  545.   </p>

  546. </nav>

  547. 

  548. <footer>

  549.   <div>

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

  551.     <p>

  552.       Bonjour/Hi!

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

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

  555.     </p>

  556.     <p>

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

  558.     </p>

  559. 

  560.       <p>

  561.         Les dernières publications hebdomadaires sont :

  562.       </p>

  563.       <ul class="with_columns">

  564. 

  565.           <li>

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

  567.           </li>

  568. 

  569.           <li>

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

  571.           </li>

  572. 

  573.           <li>

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

  575.           </li>

  576. 

  577.           <li>

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

  579.           </li>

  580. 

  581.           <li>

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

  583.           </li>

  584. 

  585.           <li>

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

  587.           </li>

  588. 

  589.           <li>

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

  591.           </li>

  592. 

  593.           <li>

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

  595.           </li>

  596. 

  597.           <li>

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

  599.           </li>

  600. 

  601.           <li>

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

  603.           </li>

  604. 

  605.           <li>

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

  607.           </li>

  608. 

  609.           <li>

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

  611.           </li>

  612. 

  613.           <li>

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

  615.           </li>

  616. 

  617.           <li>

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

  619.           </li>

  620. 

  621.           <li>

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

  623.           </li>

  624. 

  625.           <li>

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

  627.           </li>

  628. 

  629.           <li>

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

  631.           </li>

  632. 

  633.           <li>

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

  635.           </li>

  636. 

  637.           <li>

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

  639.           </li>

  640. 

  641.           <li>

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

  643.           </li>

  644. 

  645.           <li>

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

  647.           </li>

  648. 

  649.           <li>

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

  651.           </li>

  652. 

  653.           <li>

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

  655.           </li>

  656. 

  657.           <li>

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

  659.           </li>

  660. 

  661.           <li>

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

  663.           </li>

  664. 

  665.           <li>

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

  667.           </li>

  668. 

  669.           <li>

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

  671.           </li>

  672. 

  673.           <li>

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

  675.           </li>

  676. 

  677.           <li>

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

  679.           </li>

  680. 

  681.           <li>

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

  683.           </li>

  684. 

  685.           <li>

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

  687.           </li>

  688. 

  689.           <li>

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

  691.           </li>

  692. 

  693.           <li>

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

  695.           </li>

  696. 

  697.           <li>

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

  699.           </li>

  700. 

  701.           <li>

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

  703.           </li>

  704. 

  705.           <li>

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

  707.           </li>

  708. 

  709.           <li>

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

  711.           </li>

  712. 

  713.           <li>

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

  715.           </li>

  716. 

  717.           <li>

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

  719.           </li>

  720. 

  721.           <li>

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

  723.           </li>

  724. 

  725.           <li>

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

  727.           </li>

  728. 

  729.           <li>

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

  731.           </li>

  732. 

  733.           <li>

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

  735.           </li>

  736. 

  737.           <li>

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

  739.           </li>

  740. 

  741.           <li>

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

  743.           </li>

  744. 

  745.           <li>

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

  747.           </li>

  748. 

  749.           <li>

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

  751.           </li>

  752. 

  753.           <li>

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

  755.           </li>

  756. 

  757.           <li>

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

  759.           </li>

  760. 

  761.       </ul>

  762. 

  763.     <p>

  764.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  781.     </p>

  782.     <p>

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

  784.     </p>

  785.     <p>

  786.       Je ne traque pas ta navigation mais mon

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

  788.       conserve des logs d’accès.

  789.     </p>

  790.   </div>

  791. </footer>

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

  793.   ;(_ => {

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

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

  796.       e.preventDefault()

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

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

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

  800.     })

  801.   })()

  802. </script>

  803. 

  804.   <script>

  805.   /* Service workers */

  806.   if (navigator.serviceWorker) {

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

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

  809.       function sendLinks (selector) {

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

  811.           return link.getAttribute('href')

  812.         })

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

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

  815.       }

  816.       navigator.serviceWorker.getRegistration()

  817.         .then(function (registration) {

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

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

  820.               .then(navigator.serviceWorker.ready)

  821.               .then(function () {

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

  823.               })

  824.               .catch(console.error.bind(console))

  825.           } else {

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

  827.             sendLinks(selector)

  828.           }

  829.         })

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

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

  832.         sendLinks(selector)

  833.       })

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

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

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

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

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

  839. 

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

  841. 

  842.         }

  843.       })

  844.     })

  845.   } else {

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

  847.   }

  848. </script>