davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
249 Révisions
1 Branche
Aborescence: 17f244ae89
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '17f244ae89'
${ noResults }
larlet-fr-david-cache/cache/5f67a8b4263b837cd8492fcb000.../index.html

index.html 24KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581 
  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>Etendre la salle de classe hors des murs : Slack pour l’éducation et l’instruction (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="https://pedagogieagile.com/2016/05/15/etendre-la-salle-de-classe-hors-des-murs-slack-pour-leducation-et-linstruction/">

  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.   Etendre la salle de classe hors des murs : Slack pour l’éducation et l’instruction (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="https://pedagogieagile.com/2016/05/15/etendre-la-salle-de-classe-hors-des-murs-slack-pour-leducation-et-linstruction/">Source originale du contenu</a></h3>

  463.     <p>En classe, les élèves ont le droit d’utiliser leur <a href="https://pedagogieagile.com/2013/09/12/pour-quelles-raisons-jautorise-les-eleves-a-utiliser-en-classe-leur-smartphone-ou-ipod-ou-eventuellement-tablette/" target="_blank">smartphone</a> pour des besoins pédagogiques. Cependant, je me suis souvent demandé comment étendre les cours hors des murs de la salle de classe, pouvoir prolonger l’esprit d’aide, de collaboration et de coopération au-delà des frontières du collège. De plus, je ne donne que très peu de travail à la maison car :</p>

  464. 

  465. <ul>

  466. <li>Je considère que les expérimentations se font en classe car je ne peux aider les élèves lorsqu’ils sont chez eux, ou très peu d’enfants ont des parents qui peuvent leur donner des conseils</li>

  467. <li>De très nombreux élèves (parfois 70%) ne font rien chez eux, ne lisent pas le texte demandé, ou n’apprennent pas les mots suggérés, ou ne préparent pas le <a href="https://pedagogieagile.com/2015/07/15/1682/" target="_blank">sujet</a> de rédaction, soit par manque d’envie ou d’aide.</li>

  468. </ul>

  469. 

  470. <p>Ce double défi a toujours été une contrainte, et il me fallait trouver une solution.</p>

  471. 

  472. <p>J’avais testé jadis des accompagnements sur Blog, Twitter, Facebook, mais je n’avais jamais été pleinement satisfait. J’ai conservé Facebook avec les élèves pour rester en relation avec les anciens, ceux qui le souhaitent, et les accompagner pour des aides ponctuelles, ou garder un simple contact.</p>

  473. 

  474. <p><strong>Emergence </strong></p>

  475. 

  476. <p>J’ai découvert il y a une semaine l’application <a href="https://slack.com" target="_blank">Slack</a>, <a href="http://www.journaldunet.com/solutions/saas-logiciel/tutoriel-slack/" target="_blank">une application de collaboration</a> utilisée aussi dans <a href="http://www.blogdumoderateur.com/slack-communiquer-equipe/" target="_blank">l’Agilité</a>. C’est une application très simple, bien plus plus souple et efficace que Twitter ou que Liberscol (l’espace administratif du collège) par exemple. Elle répond complètement à ce que j’attendais pour pouvoir continuer à construire chez les élèves un état d’esprit d’entraide, ce qui ne va pas de soi. Elle va pouvoir compléter et accompagner toutes les expériences faites en salle de classe. J’espère également pouvoir relancer les expérimentations à la maison par l’intermédiaire de cette application.</p>

  477. 

  478. <p>Aussitôt après avoir découvert Slack, j’en parle aux élèves. Ils ont l’air enthousiastes.</p>

  479. 

  480. <p><a href="https://pedagogieagile.files.wordpress.com/2016/05/0-png.jpeg"><img class="aligncenter size-medium wp-image-1878" src="https://pedagogieagile.files.wordpress.com/2016/05/0-png.jpeg?w=300&amp;h=135" alt="logoslack.png"/></a></p>

  481. 

  482. <p>Je teste donc cette application pendant ces deux mois de fin d’année avec les élèves des classes de <em>3ème</em> et <em>4ème</em>, soit 54 élèves. Je souhaite être efficace dès la rentrée 2016. En effet, j’envisage d’utiliser Slack toute l’année 2016-2017 en <em>3ème</em>, et éventuellement en <em>4ème</em> s’ils en sont capables. Je n’inclus pas les enfants de <em>5ème</em>, à mon avis trop jeunes.</p>

  483. 

  484. <p>Pour les élèves de <em>3ème</em>, je tente des accompagnements et des révisions pour le Brevet et pour l’Histoire des Arts. Pour les élèves de <em>4ème</em>, je teste le prolongement des cours en dehors de l’espace physique de la casse. Nous restons ainsi entre nous, comme dans la salle 120, même si cette fois, les parents peuvent jeter un oeil sur les discussions pédagogiques.</p>

  485. 

  486. <div data-shortcode="caption" id="attachment_1871" class="wp-caption aligncenter"><a href="https://pedagogieagile.files.wordpress.com/2016/05/slack3c2b0.png"><img class="size-large wp-image-1871" src="https://pedagogieagile.files.wordpress.com/2016/05/slack3c2b0.png?w=529&amp;h=705" alt="Test d'une discussion et #zones pédagogiques (à gauche)"/></a><p class="wp-caption-text">Test d’une discussion et #zones pédagogiques (à gauche)</p></div>

  487. 

  488. <p>Slack est une application en anglais. Seuls les élèves invités par mail peuvent s’inscrire sur la Team classe. Nous sommes donc entre nous. Passé l’inscription toutes les discussions se déroulent en français. Comme sur tous les réseaux sociaux, l’application présente une page sur laquelle tous les élèves peuvent intervenir.  Ensuite, je décide d’ouvrir des sujets de discussions par l’écriture en fonction du programme : #dictée, #rédaction imagination, #rédaction réflexion, #participe passé, etc…</p>

  489. 

  490. <p>L’intérêt est de recréer l’ambiance de la salle de classe et que chaque élève puisse retrouver rapidement les informations qui l’intéressent ou être aidé en dehors des murs de la salle de classe.</p>

  491. 

  492. <p>De plus :</p>

  493. 

  494. <ul>

  495. <li>Si un élève pose une question sur un cours, une notion ou un exercice, tous les autres élèves peuvent lui répondre.</li>

  496. <li>Si un élève est absent, n’importe quel autre élève (ou moi) peut photographier son cours dans son cahier et le diffuser.</li>

  497. <li>Si je pose une question, tous les élèves peuvent répondre.</li>

  498. <li>Je peux demander à chaque élève de recopier son interprétation d’un texte littéraire. Tout le monde peut ainsi rapidement s’enrichir du point de vue des autres.</li>

  499. </ul>

  500. 

  501. <p><a href="https://pedagogieagile.files.wordpress.com/2016/05/slack1.png"><img class="size-large wp-image-1870" src="https://pedagogieagile.files.wordpress.com/2016/05/slack1.png?w=529&amp;h=705" alt="Test d'un sondage"/></a></p>

  502. 

  503. <p>Test d’un sondage</p>

  504. 

  505. <p>Je propose aux élèves d’utiliser Slack chez eux, sur leur smartphone, sur leur ordinateur ou tablette.</p>

  506. 

  507. <p>Je leur propose également de l’utiliser en classe pour le cours de français ou pendant une évaluation pour revoir certaines notions qu’ils ne connaissent pas encore par coeur ; une manière de retrouver des informations rapidement et les utiliser pour résoudre un problème. Ils peuvent également, lorsqu’ils sont en groupe en classe, utiliser cette application pour partager des informations en temps réel, si le réseau le permet.</p>

  508. 

  509. <p>Le but de cette extension de la salle de classe par l’intermédiaire de cette application est d’augmenter les interactions, et que ces interactions puissent accompagner le développement sensoriel, émotionnel et cognitif de chaque élève.</p>

  510. 

  511. <div data-shortcode="caption" id="attachment_1882" class="wp-caption aligncenter"><a href="https://pedagogieagile.files.wordpress.com/2016/05/doublemolc3a9culeslack.png"><img class="size-large wp-image-1882" src="https://pedagogieagile.files.wordpress.com/2016/05/doublemolc3a9culeslack.png?w=529&amp;h=705" alt="importer des images et les utiliser hors connexion"/></a><p class="wp-caption-text">importer des images et les utiliser hors connexion</p></div>

  512. 

  513. <p>Pour cette première expérience, en une semaine, très peu d’élèves se sont inscrits même s’ils ont montré de l’intérêt ou de l’enthousiasme. Ainsi, pour le moment, 4 élèves en <em>4ème</em> et 7 élèves en <em>3ème </em>sont présents dans les équipes.</p>

  514. 

  515. <p>Ces jeunes enfants de « la génération z » ou « génération alpha » ne sont pas encore au fait du potentiel du numérique.</p>

  516. 

  517. <p>(à suivre…)</p>

  518.   </article>

  519. </section>

  520. 

  521. 

  522. <nav id="jumpto">

  523.   <p>

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

  525.     <a href="https://pedagogieagile.com/2016/05/15/etendre-la-salle-de-classe-hors-des-murs-slack-pour-leducation-et-linstruction/">Source originale</a> |

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

  527.   </p>

  528. </nav>

  529. 

  530. <footer>

  531.   <div>

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

  533.     <p>

  534.       Bonjour/Hi!

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

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

  537.     </p>

  538.     <p>

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

  540.     </p>

  541.     

  542.     <p>

  543.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  560.     </p>

  561.     <p>

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

  563.     </p>

  564.     <p>

  565.       Je ne traque pas ta navigation mais mon

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

  567.       conserve des logs d’accès.

  568.     </p>

  569.   </div>

  570. </footer>

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

  572.   ;(_ => {

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

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

  575.       e.preventDefault()

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

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

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

  579.     })

  580.   })()

  581. </script>