davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
314 коммитов
1 ветка
Дерево: e9ef5f47dd
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'e9ef5f47dd'
${ noResults }
larlet-fr-david-cache/cache/54df7403f9eba01e22ed50dd3d3.../index.html

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555 
  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>Enseigner et tenir un journal de bord (archive) — 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.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://www.lettresvives.org/2019/01/24/enseigner-et-tenir-un-journal-de-bord/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Enseigner et tenir un journal de bord (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://www.lettresvives.org/2019/01/24/enseigner-et-tenir-un-journal-de-bord/">Source originale du contenu</a></h3>

  463.     <p align="JUSTIFY"><span><span><i><img class="size-medium wp-image-419 alignright" src="http://www.lettresvives.org/wp-content/uploads/2019/01/journal01-300x200.jpg" alt="" srcset="http://www.lettresvives.org/wp-content/uploads/2019/01/journal01-300x200.jpg 300w, http://www.lettresvives.org/wp-content/uploads/2019/01/journal01-768x512.jpg 768w, http://www.lettresvives.org/wp-content/uploads/2019/01/journal01-225x150.jpg 225w, http://www.lettresvives.org/wp-content/uploads/2019/01/journal01.jpg 960w" sizes="(max-width: 300px) 100vw, 300px"/>Face à l'urgence du quotidien et à la pression incessante des injonctions venant de tous les côtés, le journal de bord, ou journal pédagogique, constitue selon nous un levier de réflexion, de prise de recul et de d'évolution professionnelle et personnelle puissant, que chacun·e, nous pratiquons de manière différente. </i></span></span></p>

  464. 

  465. <p align="JUSTIFY"><span><span><i>C'est pourquoi nous avons choisi de le présenter à travers plusieurs articles constitués de réflexions théoriques, de récits d'écriture, de prises de distance également. Ces textes peuvent être collectifs ou non.</i></span></span></p>

  466. 

  467. <p align="JUSTIFY"><span><span><i>Voici le premier d'entre eux. Il vise à présenter le journal pédagogique (ou journal de bord) et à expliquer en quoi il peut nous aider à surmonter la frustration ou le sentiment d'impuissance que nous avons tout·tes déjà ressentis face à certaines situations en classe ou dans nos établissements.</i></span></span></p>

  468. 

  469. <h1 align="JUSTIFY"><span><span><span><u><b>Le journal pédagogique : un outil d’autoformation permanente </b></u></span></span></span></h1>

  470. 

  471. <p align="JUSTIFY"><span><span><span>Je me suis inspirée du journal institutionnel impliqué, « <i>une technique ethnographique de recherche sur la relation qu’une personne ou un groupe de personnes entretiennent avec une institution » </i>(1)<i> </i>. Le courant de l’analyse institutionnelle utilise le journal comme un outil de l’observation participante. Il s’agit d’un mode de recueil de données et une méthode d’élaboration progressive d’un objet de recherche, mais aussi un outil de changement personnel et social, dans la mesure où il aide à l’analyse des pratiques professionnelles à partir d’observations psychosociologiques et pédagogiques. R. Hess a d’ailleurs beaucoup œuvré pour faire rentrer l’activité d’auto-observation comme élément de la pratique enseignante ou éducative au moment de la création des IUFM. Ce type d’action-réflexion suppose l’implication personnelle de l’enseignant qui « observe » ses pensées, ses sentiments et émotions, ses croyances, ses projets, ses connaissances, sa propre histoire, dans le but d’être plus conscient de son mode de rapport à soi-même, aux autres, à la classe, au monde. L’auto-observation systématique pour comprendre les faits aux niveaux affectif, idéologique et organisationnel permet d’analyser en quoi notre façon d’être et d’agir en classe est dépendante de nos autres groupes d’appartenance, ce qui fait dire à R. Hess et G. Weigand que « <i>la manière de vivre dans l'ici et maintenant est surdéterminé par ce que l’on est ailleurs </i>» (2). Il est nécessaire, dans les rapports aux élèves, de prendre en compte de multiples dimensions : identité de la personne, celle de l’élève et celle de l’enseignant, dynamique de l’interaction entre les personnes, dynamique du groupe, organisation de l’établissement, institution, place de la relation pédagogique dans le champ des rapports sociaux. </span></span></span></p>

  472. 

  473. <p align="JUSTIFY"><span><span><span> Un enseignant ne peut faire l’économie ni de la réflexivité sur ses tâches professionnelles, ni d’un travail sur soi, particulièrement quand il a la prétention de contribuer à la construction d’une société plus juste et libre, sans pouvoir. Friedrich Liebling, psychologue libertaire, a beaucoup insisté sur la nécessité de ce travail sur soi pour qui se prétend libertaire : </span></span></span></p>

  474. 

  475. <p align="JUSTIFY"><span><span><span>« <i>[le futur humaniste] peut professer la non-violence, une attitude libertaire, mais il ne l’a pas véritablement. Il peut en parler pendant des heures, il peut donner des cours et des conférences à ce sujet […] mais ses actes vont le trahir : dans la vie de couple, dans l’éducation de ses propres enfants, dans une situation de crise </i>». Le « <i>comportement de l’être humain est fonction de l’affectif </i>[…] <i>l’homme nouveau ne naît pas, même dans le cas le plus favorable, d’une situation révolutionnaire</i>» (3). </span></span></span></p>

  476. 

  477. <p align="JUSTIFY"><span><span><span>Dans notre société, la plupart des personnes souffrent de la peur, laquelle engendre la méfiance, donc la difficulté de coopérer. Le point de départ des principes de Liebling est le suivant : « <i>de part sa nature, l’être humain est capable de s’organiser paisiblement avec ses congénères. Mais pour le faire, il lui faut une éducation qui corresponde à sa nature et dans laquelle le sentiment communautaire est renforcé et stimulé </i>». Il s’agit donc, d’abord, pour les éducateurs, de cesser de transmettre une conception de l’être humain qui engendre l’aliénation d’individus qui doivent cacher leurs sentiments, leurs opinions, leur désobéissance, de peur d’être rejetés. </span></span></span></p>

  478. 

  479. <p align="JUSTIFY"><span><span><span>Un enseignant devant sans cesse improviser, ce n’est qu’a posteriori qu’il peut se permettre d’analyser si ses actes et ses choix sont conformes à ses principes. R. Hess va dans le même sens lorsqu’il dit : « <i>nous n’avons pas de prise sur l’instant ni sur les situations (imprévisibles) sinon en développant un sens de l’improvisation permettant de faire face à cet imprévu </i>» (4). Le journal permet de « <i>choisir consciemment sa route, sans être esclave de ses impulsions ou pulsions </i>» (5)</span></span></span></p>

  480. 

  481. <p align="JUSTIFY"><span><span><span>Le journal permet de passer du « <i>vécu au conçu </i>» (6), de glisser « <i>d’une écriture expérientielle à une écriture théorique </i>». Il donne la possibilité « <i>d’entrer dans plusieurs phases d’appropriation de de distanciation des savoirs, par le biais du passage d’une écriture pour soi à une écriture pour les autres </i>». C’est le lieu de la confrontation à ses doutes, à ses questionnements, à son implication : « <i>le journal montre comment l’auteur s’organise dans sa pratique, comment il prépare son travail, quelles sont ses "stratégies techniques", etc. Il raconte souvent ce qui l’amène à prendre une décision donnée dans une situation donnée. Cette dimension est très utile pour aider l’auteur à conscientiser son rapport au métier </i>» (7). </span></span></span></p>

  482. 

  483. <p align="RIGHT"><span><span><span>Magda Chmela </span></span></span></p>

  484. 

  485. <p align="JUSTIFY"><span><span><span>(1) HESS R., <i>Le lycée au jour le jour</i>, Meridiens-Klincksieck, 1989 </span></span></span><br/>

  486. <span><span><span>(2) WEIGAND G. et HESS R., <i>La relation pédagogique</i>, Anthropos, 2007 </span></span></span><br/>

  487. <span><span><span>(3) FELLAY G., <i>Friedrich Liebling : psychologue libertaire</i>, Atelier de Création Libertaire, 2004</span></span></span><br/>

  488. <span><span><span>(4) HESS R., <i>Le lycée au jour le jour</i>, Meridiens-Klincksieck, 1989 </span></span></span><br/>

  489. <span><span><span>(5) Ibid.</span></span></span><br/>

  490. <span><span><span>(6) WEIGAND G., HESS R., <i>La relation pédagogique</i>, Anthropos, 2007 </span></span></span><br/>

  491. <span><span><span><span>(7) ZABALZA BERAZA M., MONTERO MESA M. L., ALVAREZ NUNEZ Q., </span><span><i>Un outil de formation professionnelle : le journal de l’élève-maître</i></span><span>, Recherche et Formation n°9, 1991 : http://ife.ens-lyon.fr/publications/edition-electronique/recherche-et-formation/RR009.pdf </span> </span></span></span></p>

  492.   </article>

  493. </section>

  494. 

  495. 

  496. <nav id="jumpto">

  497.   <p>

  498.     <a href="/david/blog/">Accueil du blog</a> |

  499.     <a href="http://www.lettresvives.org/2019/01/24/enseigner-et-tenir-un-journal-de-bord/">Source originale</a> |

  500.     <a href="/david/stream/2019/">Accueil du flux</a>

  501.   </p>

  502. </nav>

  503. 

  504. <footer>

  505.   <div>

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

  507.     <p>

  508.       Bonjour/Hi!

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

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

  511.     </p>

  512.     <p>

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

  514.     </p>

  515.     

  516.     <p>

  517.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  534.     </p>

  535.     <p>

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

  537.     </p>

  538.     <p>

  539.       Je ne traque pas ta navigation mais mon

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

  541.       conserve des logs d’accès.

  542.     </p>

  543.   </div>

  544. </footer>

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

  546.   ;(_ => {

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

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

  549.       e.preventDefault()

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

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

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

  553.     })

  554.   })()

  555. </script>