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.
30 Commits
1 Branch
Tree: 78ab58b3bb
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '78ab58b3bb'
${ noResults }
larlet-fr-david/david/blog/2014/education-manuelle/index.html

index.html 35KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804 
  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 manuelle — 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-manuelle/">

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

  31.   <meta name="description" content="Quelle part d’inné pourrait l’amener à emprunter les chemins non balisés de sa singularité ?" />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Quelle part d’inné pourrait l’amener à emprunter les chemins non balisés de sa singularité ?" />

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

  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-manuelle/" />

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

  468.   <time>Publié le 31 janvier 2014</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Le changement de logique ne peut se réaliser sans que l’on revoie de fond en comble l’éducation des enfants. Celle qui prévaut aujourd’hui est déterminée et inspirée par les priorités de l’idéologie marchande et financière, et l’abandon passif à une caste enseignante. On sait de plus en plus l’importance que revêtent la conception, la gestation et la façon de mettre au monde un enfant. Trêve d’hypocrisie : ce que tout le monde appelle « éducation » est une machine à fabriquer des soldats de la pseudo-économie, et non de futurs êtres humains accomplis, capables de penser, de critiquer, de créer, de maîtriser et de gérer leurs émotions, ainsi que de ce que nous appelons spiritualité ; « éduquer » peut alors se résumer à déformer pour formater et rendre conforme. Le malaise grandissant de toute jeunesse condamnée au naufrage est dès lors que le système ne peut l’intégrer ou la prendre en charge témoigne de cette aliénation. L’équation qui a prévalu, en particulier lors des Trente Glorieuses, selon laquelle faire de bonnes études donnait une qualification garante d’un salaire ne fonctionne plus dans la société de la croissance illimitée. Alors, pourquoi s’obstiner dans cette option déjà obsolète ?</p>

  473. <p>Dans le nouveau paradigme, il faut être en priorité attentif à l’enfant, en développant une pédagogie de l’être qui permette avant toute chose de le faire naître à lui-même, c’est-à-dire de l’aider à révéler sa personnalité unique, ses talents propres, pour répondre à la vocation que lui inspire sa présence au monde et à la société. C’est le doter d’une cohérence intérieure qui lui donnera le sentiment d’être à sa véritable place dans la diversité du monde. Pour que cette naissance à soi-même advienne réellement, il est indispensable d’abolir ce terrible climat de compétition qui donne à l’enfant l’impression que le monde est une arène, physique et psychique, produisant de l’angoisse d’échouer au détriment de l’enthousiasme d’apprendre.</p>

  474. <p>La prépondérance donnée à l’intellect au détriment de l’intelligence des mains, auxquelles nous devons pourtant notre évolution, est une catastrophe qui fait de nous des infirmes sans que nous en ayons conscience ; elle a créé une sorte de hiérarchie arbitraire offrant aux concepts la clé d’un processus décisionnel que l’expérience tangible ne peut valider. Le rapport concret à la nature est également indispensable, car c’est à elle que l’enfant doit la vie, toute son existence durant ; tirer parti d’un principe vital sans le connaître est une lacune fondamentale.</p>

  475. <p>L’éducation doit restaurer la complémentarité des aptitudes. Les établissements éducatifs devraient tous proposer de la terre à cultiver, des ateliers d’initiation manuelle, artistique… Des jardins biologiques permettraient de faire l’expérience tangible des lois intangibles du vivant : la fécondité de la terre, sa générosité à nous offrir les aliments qui nous font vivre, le mystère et la beauté des phénomènes qui régissent l’immense complexité de ce que nous appelons écologie. L’école doit être également le lieu privilégié de l’initiation à la complémentarité féminin/masculin et, bien entendu, celui d’une éducation à la sobriété peut-être décisive pour la vie entière. Car l’enfant, ignorant tout, en amont, du processus de production des biens dont il use abondamment dans la civilisation de la surabondance, ainsi que du devenir des déchets qu’il induit en aval, en est réduit à une stricte, et triste, fonction de petit consommateur gaspilleur. Il est inconscient de sa participation à l’outrance collective des nantis et des privilèges sans joie, alors que tant d’enfants vivent dans des pays où le quotidien est fait de frugalité — quand ce n’est pas de misère. Paradoxalement, j’ai souvent observé dans les yeux de ces derniers une étincelle encore ardente, comme lorsque l’espérance demeure vivante en dépit de tout. L’initiation à la modération est source de joie, car elle rend plus accessible la satisfaction, abolissant la frustration que produit le toujours-plus, entretenue en permanence par une publicité au talent pernicieux, dont tous les enfants devraient être protégés. Cette prise en otage produit des enfants blasés, désabusés, et, avec le « tout, tout de suite », c’en est fini de ce désir auquel la patience donne tant de saveur et de valeur. Dans le même ordre d’idées, on constate que l’industrie du jouet participe à l’ingérence de l’adulte dans l’imaginaire de l’enfant. Saturé d’outils ludiques prêts à la consommation, celui-ci est détourné de cette capacité naturelle commune à tous les enfants du monde de créer par eux-mêmes, et avec une fraîcheur incomparable, les objets nécessaires à leur amusement. Cette créativité, ennoblie de leur candeur, participerait très fortement à la sobriété par le fait qu’elle rend inutile la prolifération extravagante d’objets dont la fabrication est très dispendieuse en matières premières, souvent dérivées du pétrole, en énergie, en pollution, en recyclage, etc. Par ailleurs, on ne peut que déplorer le nombre de plus en plus exorbitant de jouets qui véhiculent des symboles pernicieux et pervers de la société contemporaine. Ils instillent dans des âmes innocentes les toxines de toutes les turpitudes : violence, meurtre, pornographie, etc. Il est du devoir urgent des Etats, et des parents, d’édicter des règles strictes pour protéger l’enfant, si vulnérable et manipulable, de toutes les convoitises qui portent atteinte à son intégrité. Il ne s’agit pas de traiter cette question avec un moralisme ou un manichéisme de circonstance, mais de donner à des faits objectifs des réponses objectives, qui doivent être apportées par les adultes, responsables du devenir des générations que la vie leur a confiées. Il ne suffit pas de se demander : « Quelle planète laisserons-nous à nos enfants ? » ; il faut également se poser la question : « Quels enfants laisserons-nous à notre planète ? »</p>

  476. <p><cite><em>Vers la sobriété heureuse</em>, Pierre Rabhi.</cite></p>

  477. </blockquote>

  478. <p>Je m’interroge beaucoup sur l’<em>éducation manuelle</em> que je pourrais partager avec mon fils sachant le peu de savoir-faire que j’ai dans ce domaine. Comment <em>faciliter</em> sa découverte d’activités que je n’ai pas moi-même pratiquées ? Dans quelle mesure est-ce que l’on peut découvrir <em>ensemble</em> de nouvelles pratiques ? Comment attiser sa <em>curiosité</em> sur un domaine qui ne m’a pas déjà attiré ? <strong>Quelle part d’inné pourrait l’amener à emprunter les chemins non balisés de sa singularité ?</strong></p>

  479. <p>Il y a bien des écoles <a href="http://www.lesamanins.com/ecole">« permettant aux enfants d’apprendre à vivre ensemble »</a> et qui doivent inclure l’agroécologie dans leur enseignement vu le lieu mais elles sont très rares. Il y a la famille ou les amis mais on reste dans des cercles relativement fermés. Il y a le Web mais ça reste trop théorique. Il y a les stages mais il faut avoir un certain âge. Il reste les camps/colonies/centres aérés qui sont peut-être la manière la plus simple de découvrir un nouveau domaine de manière candide. En voyez-vous d’autres ?</p>

  480. </article>

  481. 

  482.   <section>

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

  484.     

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

  486.         <p>Je me permets de partager mon expérience sur une forme d’éducation manuelle que j’ai reçu et transmise à mon fils. La règle est simple : il n’y a pas d’age pour faire du bricolage !</p>

  487. <p>Depuis qu’il sait à peu près marcher, il participe à sa façon à tous les travaux de bricolage / montage. Lorsqu’il a fallu enlever le lit de bébé et installer un "lit de grand", c’est mon fils qui me tenait les montants (légers) pendant que je les vissais. C’était une toute petite participation, mais il était présent dans la pièce et faisait des choses. Et ça, ce sont des expériences qui marquent : il a monté son lit de grand lui-même.</p>

  488. <p>Un peu plus grand, on a eu à monter son armoire à vêtements. Il m’a tenu les montants, trié et préparé les vis. J’ai aussi une petite visseuse (plus petite que le modèle classique) que j’ai utilisé : je mettait la vis en place, la visseuse dans l’axe et c’est lui qui appuyait sur le bouton. Il faut voir sa fierté quand il a présenté l’armoire à ses grands-parents !</p>

  489. <p>Lorsque nous avons repeint sa chambre, il avait un petit rouleau et a largement participé à la peinture à sa hauteur. Quand on a fait des placards sous combles, c’est lui qui a peint le fond des placards, ce qui nous a évité un peu de cassage de dos.</p>

  490. <p>Pour enlever du papier peint, à 3 ans, c’est lui qui mouillait le papier peint avec une éponge chaude (pas de décolleuse, pas de dissoucolle, l’éponge chaude marche très bien) avant que je ne l’enlève avec le couteau. Maintenant qu’il a presque 5 ans, il fait l’éponge chaude et il a un petit couteau à enduire pour gratter le papier-peint, donc il faut réellement la tâche en entier tout seul.</p>

  491. <p>Il a aussi apprivoisé l’escabeau en me voyant monter dessus. Je l’ai encouragé, en le tenant et en respectant les règles de sécurité bien sur. Mais maintenant qu’il a 5 ans, il monte sur le petit escabeau pour m’aider dans le bricolage : il peint plus haut, il nettoie plus haut.</p>

  492. <p>Ca continue aussi sur d’autres tâches : quand je transporte mes stères de bois au fond du jardin, il a droit a des tours sur la brouette au dessus du tas de bois ou à vide. C’est lui qui range aussi les bûches qui sont très légères.</p>

  493. <p>La clé dans tout cela, c’est vraiment d’inclure l’enfant dans les activités. Il faut trouver la façon d’adapter l’activité à son age et à ses capacités, ou de faire une activité connexe. Bien sûr, le résultat peut varier d’un enfant à l’autre : j’ai la chance d’avoir un modèle plutôt calme et concentré, donc je peux relacher un peu mon attention pendant que je bricole. </p>

  494. <p>On crée l’environnement favorable : il a des vêtements de bricolage exprès, qu’on s’est pas géné pour peindre à diverses occasions ( c’est tellement rare de pouvoir salir ses vêtements sans souci ) ! Quand il en avait marre de faire de la peinture avec nous, on lui a proposé de dessiner sur le papier peint qu’on allait enlever, ce qu’il l’a bien fait rire. Il y a des fois aussi où il a monté ses jeux de bricolages, et il jouait à bricoler dans la pièce à côté de la mienne.</p>

  495. <p>Bien sûr, ce n’est pas toujours facile : ça veut dire qu’il faut que je reste attentif à ce qu’il fait tout en faisant mon bricolage à moi. J’avance donc moins vite et c’est plus fatiguant. Quand il me saoule de question alors que je galère sur un problème, c’est dur de rester calme. En fin de journée, je ne tiens plus et demande à ma femme de le garder. Dès qu’il y a une activité présentant un danger, il doit absolument s’éloigner mais n’est pas toujours d’accord. Mais bon, ça, c’est la vie avec les enfants.</p>

  496. <p>Globalement, ça se passe très bien. Dès que je dis que je vais bricoler, il est le premier à enfiler ses vêtements de bricolage et ravi de cette activité à partager avec Papa, ou Papa et Maman. Même quand il ne participe pas activement, il est content de me regarder et  me poser des (centaines de) questions. </p>

  497. <p>Voilà pour ma petite expérience de Papa...</p>

  498.         <p><cite>Philippe Fremy, le <a href="#comment-1">2014-02-05 à 14:20</a></cite></p>

  499.       </article>

  500.     

  501.   </section>

  502. 

  503. 

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

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

  506.   </figure>

  507. 

  508. 

  509. 

  510. <nav id="jumpto">

  511.   <p>

  512.     <a rel=prev href="/david/blog/2014/diversion-numerique/">← Diversion numérique</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2014/refonte-2014/">Refonte 2014 →</a>

  513.   </p>

  514. </nav>

  515. 

  516. <footer>

  517.   <div>

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

  519.     <p>

  520.       Bonjour/Hi!

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

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

  523.     </p>

  524.     <p>

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

  526.     </p>

  527.     

  528.       <p>

  529.         Les dernières publications hebdomadaires sont :

  530.       </p>

  531.       <ul class="with_columns">

  532.         

  533.           <li>

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

  535.           </li>

  536.         

  537.           <li>

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

  539.           </li>

  540.         

  541.           <li>

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

  543.           </li>

  544.         

  545.           <li>

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

  547.           </li>

  548.         

  549.           <li>

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

  551.           </li>

  552.         

  553.           <li>

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

  555.           </li>

  556.         

  557.           <li>

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

  559.           </li>

  560.         

  561.           <li>

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

  563.           </li>

  564.         

  565.           <li>

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

  567.           </li>

  568.         

  569.           <li>

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

  571.           </li>

  572.         

  573.           <li>

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

  575.           </li>

  576.         

  577.           <li>

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

  579.           </li>

  580.         

  581.           <li>

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

  583.           </li>

  584.         

  585.           <li>

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

  587.           </li>

  588.         

  589.           <li>

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

  591.           </li>

  592.         

  593.           <li>

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

  595.           </li>

  596.         

  597.           <li>

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

  599.           </li>

  600.         

  601.           <li>

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

  603.           </li>

  604.         

  605.           <li>

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

  607.           </li>

  608.         

  609.           <li>

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

  611.           </li>

  612.         

  613.           <li>

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

  615.           </li>

  616.         

  617.           <li>

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

  619.           </li>

  620.         

  621.           <li>

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

  623.           </li>

  624.         

  625.           <li>

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

  627.           </li>

  628.         

  629.           <li>

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

  631.           </li>

  632.         

  633.           <li>

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

  635.           </li>

  636.         

  637.           <li>

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

  639.           </li>

  640.         

  641.           <li>

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

  643.           </li>

  644.         

  645.           <li>

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

  647.           </li>

  648.         

  649.           <li>

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

  651.           </li>

  652.         

  653.           <li>

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

  655.           </li>

  656.         

  657.           <li>

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

  659.           </li>

  660.         

  661.           <li>

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

  663.           </li>

  664.         

  665.           <li>

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

  667.           </li>

  668.         

  669.           <li>

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

  671.           </li>

  672.         

  673.           <li>

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

  675.           </li>

  676.         

  677.           <li>

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

  679.           </li>

  680.         

  681.           <li>

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

  683.           </li>

  684.         

  685.           <li>

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

  687.           </li>

  688.         

  689.           <li>

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

  691.           </li>

  692.         

  693.           <li>

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

  695.           </li>

  696.         

  697.           <li>

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

  699.           </li>

  700.         

  701.           <li>

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

  703.           </li>

  704.         

  705.           <li>

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

  707.           </li>

  708.         

  709.           <li>

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

  711.           </li>

  712.         

  713.           <li>

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

  715.           </li>

  716.         

  717.       </ul>

  718.     

  719.     <p>

  720.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  737.     </p>

  738.     <p>

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

  740.     </p>

  741.     <p>

  742.       Je ne traque pas ta navigation mais mon

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

  744.       conserve des logs d’accès.

  745.     </p>

  746.   </div>

  747. </footer>

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

  749.   ;(_ => {

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

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

  752.       e.preventDefault()

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

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

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

  756.     })

  757.   })()

  758. </script>

  759. 

  760.   <script>

  761.   /* Service workers */

  762.   if (navigator.serviceWorker) {

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

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

  765.       function sendLinks (selector) {

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

  767.           return link.getAttribute('href')

  768.         })

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

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

  771.       }

  772.       navigator.serviceWorker.getRegistration()

  773.         .then(function (registration) {

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

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

  776.               .then(navigator.serviceWorker.ready)

  777.               .then(function () {

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

  779.               })

  780.               .catch(console.error.bind(console))

  781.           } else {

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

  783.             sendLinks(selector)

  784.           }

  785.         })

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

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

  788.         sendLinks(selector)

  789.       })

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

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

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

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

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

  795.           

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

  797.           

  798.         }

  799.       })

  800.     })

  801.   } else {

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

  803.   }

  804. </script>