A place to cache linked articles (think custom and personal wayback machine)
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.

index.html 33KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556
  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>Les pratiques collaboratives dans l'éducation (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. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.paristechreview.com/2015/03/12/education-collaborative/#.VhNyRWlFBxt.twitter">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Les pratiques collaboratives dans l'éducation (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.paristechreview.com/2015/03/12/education-collaborative/#.VhNyRWlFBxt.twitter">Source originale du contenu</a></h3>
  445. <div id="postFullContent">
  446. <p><b>ParisTech Review – Nos systèmes éducatifs sont-ils toujours adaptés à un monde qui change à une vitesse sans cesse plus grande, qui est de moins en moins vertical et hiérarchique et de plus en plus horizontal et collaboratif ? </b></p>
  447. <p><b>François Taddei – </b>Nos systèmes éducatifs sont fondés sur la résolution de problèmes classiques. Typiquement, pour entrer dans une grande école, il faut passer des concours qui consistent pour l’essentiel à résoudre des problèmes ordinaires. Or il y a d’autres formes d’intelligence, comme la résolution de nouveaux problèmes. Par exemple, dans les start-up, les hackerspace ou encore les communautés d’informaticiens, les participants sont jugés sur leur capacité à faire quelque chose que les autres n’avaient pas fait jusque-là, ce qui est très différent de faire la même chose que d’autres ont déjà fait mais plus vite. La troisième forme d’intelligence, encore supérieure aux deux autres, est la capacité à définir soi-même un problème. Ainsi, ceux qui ont conçu Amazon ont redéfini ce qu’est un libraire.</p>
  448. <p>Le problème avec la première forme d’intelligence (la résolution de problèmes classiques), c’est que les machines savent l’appliquer. Elles connaissent la solution aux problèmes classiques, s’améliorent de jour en jour et sont même capables de les implémenter dans des contextes toujours différents. Par exemple, les machines savent aujourd’hui <a href="http://www.paristechreview.com/2014/06/19/serie-robotique-1-automobile-sans-conducteur/">conduire des voitures</a>. Il y a donc tout un tas de métiers qui sont en train d’être remplacés, des métiers manuels mais aussi des métiers comme les analystes financiers, qui pouvaient représenter un haut niveau d’études et de salaire. Ainsi selon une <a href="http://www.oxfordmartin.ox.ac.uk/downloads/academic/The_Future_of_Employment.pdf">étude récente de l’Université d’Oxford</a>, 47% des emplois aux États-Unis ont le risque d’être automatisés dans les dix ou vingt prochaines années. Donc si l’on est seulement capable de résoudre des problèmes classiques, on risque d’être remplacé par une machine ! Il faut que le système éducatif change, car dans le monde actuel nous avons besoin de gens créatifs et innovants qui savent travailler en collectif.</p>
  449. <p><b>Pourquoi est-il si important d’apprendre à travailler en collectif ? </b></p>
  450. <p>Nous sommes confrontés dans le monde entier à des problèmes qu’on ne sait pas résoudre. Il faut donc développer les différentes formes d’intelligence et apprendre à coopérer pour faire des choses qu’on ne saurait pas faire individuellement. Typiquement, les entreprises embauchent des profils différents et complémentaires, qui peuvent ensemble faire des choses qu’aucun d’entre eux ne pourrait faire seul. Il est donc fondamental d’apprendre à travailler de manière collaborative le plus tôt possible, d’autant qu’on apprend beaucoup les uns des autres. Plus, on est formé à écouter et à prendre en compte des avis différents, plus on a de chance de façonner un produit ou un service que des gens différents vont aimer. Si l’on pense dans une seule et unique dimension, on aura peut-être une solution parfaite dans cette dimension là mais avec tout un tas d’effets secondaires ou négatifs dans d’autres dimensions. Si dès le départ, on a impliqué des gens de mondes différents, avec des modes de pensées différents, on va optimiser le résultat de manière multidimensionnelle. Comme la réalité est multidimensionnelle, il y a plus de chances d’arriver à quelque chose qui fonctionne dans le monde réel.</p>
  451. <p>Il est particulièrement intéressant de voir que l’Organisation de coopération et de développement économiques (OCDE) va commencer à mesurer la <a href="http://www.oecd.org/pisa/pisaproducts/Draft%20PISA%202015%20Collaborative%20Problem%20Solving%20Framework%20.pdf">résolution collaborative de problèmes</a> à partir de 2015 dans le cadre de son programme PISA. Nous allons vite voir que certains pays sont meilleurs que d’autres dans le développement de pratiques collaboratives et l’accompagnement des jeunes dans leur questionnement. Ce débat va enfin apparaître dans le grand public car jusqu’à maintenant il a du mal à percer au-delà de certains parents et de certains enseignants.</p>
  452. <p><b>Que préconisez-vous pour développer les pratiques collaboratives dans les systèmes éducatifs? </b></p>
  453. <p>Il y a des modèles historiques et actuels, qui se rejoignent sur un certain nombre d’invariants. Parmi les modèles historiques, il y a Socrate – qui préconise le questionnement, le dialogue et l’accompagnement – et Alexander von Humboldt, le père des universités modernes. Selon lui, l’université doit être un lieu où l’on est libre d’apprendre, libre d’enseigner et libre de faire de la recherche. Il a également affirmé que l’enseignant ne doit pas simplement transmettre des savoirs mais être un mentor qui accompagne les projets des étudiants. Ainsi, l’enseignant ne doit pas être là pour leur dire ce qu’ils <i>doivent faire</i> mais pour les accompagner dans ce qu’ils <i>souhaitent faire</i>. On retrouve cette philosophie au Massachusetts Institute of Technology (MIT) et dans d’autres grandes universités de recherche américaines mais très peu en Europe continentale. Le questionnement socratique et la vision de Humboldt ont des principes communs qui sont le dialogue, le mentorat et l’accompagnement, le tout dans un certain cadre de liberté. De nos jours, il existe différents lieux bâtis sur ces principes.</p>
  454. <p>Par exemple, je reviens de Petnica, en Serbie, où ces méthodes sont appliquées à des lycéens avec beaucoup de succès. Là-bas, tout a démarré il y a trente ans par une réunion de quelques étudiants et de quelques professeurs pendant l’été, une sorte de <i>summer camp</i>. Aujourd’hui, il y a un internat de 200 places, un laboratoire de physique avec des lasers partout, un laboratoire de biologie avec un microscope confocal, un laboratoire d’informatique où il y a un super calculateur donné par le CERN (Organisation Européenne pour la Recherche Nucléaire), un fab-lab, etc. Tout est à disposition des lycéens. Ils peuvent y passer des périodes de 15 jours et y revenir plusieurs fois, ce qui leur permet de poser un problème, de faire une expérience, de repartir chez eux, de continuer leur questionnement, de revenir, de re-tester leurs hypothèses et ainsi de progresser par itération. Les plus futés de ces gamins sont invités à devenir des mentors pour les générations suivantes. 30.000 jeunes ont ainsi été formés en 30 ans. Il est d’ailleurs intéressant de noter que 50% des jeunes serbes qui ont publié dans Nature &amp; Science ont été formés à Petnica et que les actuels ministres des Finances et de l’Éducation nationale serbes sont passés par ce lieu.</p>
  455. <p>Autre exemple, celui du collège-lycée Catts Pressoir en Haïti, où des élèves ont été invités à chercher des problèmes et les ramener pour y trouver une solution collectivement. Le système de feux de signalisation devant chez eux était cassé depuis longtemps à cause du tremblement de terre et n’avait pas été réparé. Les gamins ont donc souhaité le réparer. Ils ont finalement trouvé une solution moins coûteuse que la solution initiale et l’ont proposé aux services publics. Dans ce même lycée, des élèves ont inventé un système de téléphonie portable interne afin de pouvoir s’envoyer des SMS entre eux sans payer de l’argent aux opérateurs de téléphonie mobile.</p>
  456. <p>À chaque fois, le principe est le même : on permet aux apprenants de se questionner, de faire des choses ensemble et par eux-mêmes, l’enseignant jouant surtout le rôle de mentor. Nous nous sommes demandés si ces méthodes collaboratives pouvaient être appliquées en primaire. Après tout, pourquoi les enfants ne sont-ils pas plus souvent invités à travailler de cette façon s’ils en sont capables ? En fait, c’est surtout une question d’environnement et de capacité des adultes à accompagner les enfants dans leur questionnement. Souvent, quand un gamin pose des questions, il épuise ses parents, puis son environnement et finit par épuiser sa curiosité par manque de capacité à trouver des interlocuteurs qui l’accompagnent dans sa démarche. Ce sont donc les adultes qui encadrent les enfants qu’il faut former. Dans le cadre de notre projet au <a href="http://cri-paris.org/">Centre de recherche interdisciplinaire</a>, qui concerne quarante classes, nous avons donc formé des doctorants qui accompagnent les enfants dans leur questionnement.</p>
  457. <p>Pour résumer, il se réinvente dans différents lieux ce que, pour moi, Humboldt a le mieux formulé, qui est cette liberté d’apprendre, d’enseigner, de faire de la recherche et cette possibilité d’avoir des mentors pour avancer. Humboldt l’avait pensé pour les étudiants universitaires mais ce sont les mêmes principes qui sont appliqués aux lycéens en Serbie et que nous essayons d’appliquer à des élèves du primaire. A chaque fois, cela fonctionne sur l’horizontalité, la coopération, l’échange, le raffinement des hypothèses et des idées par le débat et par l’expérimentation.</p>
  458. <p><a href="http://www.paristechreview.com/wp-content/uploads/2015/03/colaro.jpg"><img class="alignnone size-full wp-image-9843" alt="colaro" src="http://www.paristechreview.com/wp-content/uploads/2015/03/colaro.jpg" width="627" height="352"/></a></p>
  459. <p><b>Cette démarche scientifique convient-elle à tous? </b></p>
  460. <p>La psychologue Alison Gopnik, qui enseigne à l’université de Berkeley, <a href="http://www.ted.com/talks/alison_gopnik_what_do_babies_think?language=fr">explique</a> que nous sommes tous nés chercheurs, que les plus jeunes bébés sont déjà capables d’observer le monde, d’en être surpris, d’en tirer des hypothèses, d’expérimenter, de faire des erreurs puis d’apprendre de leurs erreurs, de réviser leurs hypothèses de manière dynamique et d’attirer l’attention des autres sur ce qu’ils ont fait. Ces composantes sont justement les composantes essentielles de la démarche scientifique. La créativité n’est pas seulement l’affaire de quelques génies qui reçoivent la visite d’une muse pendant la nuit. Tout le monde est né chercheur et créatif, mais sans pratique ces compétences s’éteignent. La créativité est un processus qui s’étudie, s’accompagne, s’encourage et s’apprend : tout comme on s’améliore à chaque fois qu’on fait un revers au tennis, on devient de plus en créatif à mesure qu’on a l’occasion d’exercer sa créativité.</p>
  461. <p>L’important est de savoir passer du questionnement naïf au questionnement scientifique. En poussant à l’extrême le questionnement scientifique, on parvient très vite aux frontières de la connaissance. Par exemple, quand on demande pourquoi l’eau mouille, un bon physicien sait répondre. Si on demande le pourquoi de cette réponse, un très bon physicien pourra l’expliquer. Mais au troisième ou quatrième niveau de ce questionnement en chaîne, le Prix Nobel sèche et plus personne ne sait répondre. Quand ils se rendent compte qu’ils sont au niveau des frontières de la connaissance, les enfants sont beaucoup plus motivés. Ils ne vont pas résoudre à eux seuls des problèmes complexes mais ils sont déjà contents d’être là et ça les motive énormément pour apprendre ce qui est déjà connu et pour essayer d’aller plus loin.</p>
  462. <p><b>La coopération et la collaboration sont-elles forcément à mettre en opposition avec la compétition et la sélection? Y a-t-il une voie médiane à trouver? </b></p>
  463. <p>Je pense que la coopération est bien meilleure que la compétition. Aujourd’hui, les systèmes scolaires sont essentiellement basés sur la compétition. En France par exemple, on cherche à sélectionner une élite au détriment des autres alors que la coopération a bien plus d’avantages. Il y a toutefois un modèle intermédiaire qui semble marcher relativement bien : la « coopétition ». Il s’agit de créer des équipes et de les mettre en compétition. C’est vrai dans le foot mais également dans des compétitions étudiantes. De prime abord, je n’aurais pas forcément cru que cela marcherait mais j’ai vu des étudiants devenir champions du monde de biologie synthétique au MIT parce qu’ils avaient été motivés par ce type de coopétition.</p>
  464. <p>Le plus important dans ces formes de coopétition comme celle du MIT est que tous les étudiants doivent documenter en temps réel tout ce qu’ils font. Ces informations sont donc disponibles pour les autres, tout particulièrement pour les étudiants d’une année sur l’autre qui peuvent s’en servir pour aller toujours plus loin. C’est la création de ce que j’appelle des “écosystèmes d’apprentissage coopératif et d’innovation” : à chaque fois que quelqu’un a appris quelque chose, quelqu’un d’autre va pouvoir apprendre cette même chose plus facilement ; à chaque fois que quelqu’un a innové dans une dimension, quelqu’un d’autre va pouvoir innover dans la même dimension plus facilement. Ainsi, le but de la coopétition n’est pas de refaire toujours la même épreuve toujours plus vite, comme c’est le cas de la compétition, mais d’aller toujours plus loin. Il ne s’agit pas de faire une course de 100 mètres chaque année mais de gravir de nouvelles montagnes. Je ne suis pas sûr que ce modèle réussisse à tout le monde mais je pense que la coopétition est déjà mieux que la compétition classique.</p>
  465. <p><b>En quoi le numérique change-t-il la donne? </b></p>
  466. <p>L’avantage est qu’il n’est pas très coûteux de créer avec le numérique. Aujourd’hui avec le numérique, on a le droit à l’erreur, ce qui est fondamental pour la créativité. Le numérique permet aussi la copie, c’est-à-dire la récupération des fichiers créés par d’autres qu’il est ensuite possible de modifier, pour faire des mutations et des recombinaisons. En tant que biologiste, je peux vous assurer que les mutations et les recombinaisons sont les moteurs de l’évolution ! Le numérique permet donc de s’inspirer de ce que les autres ont fait pour aller plus loin. C’est ainsi qu’émerge la création collective : on utilise différents regards, différentes approches et on atteint des niveaux inconnus auparavant.</p>
  467. <p><b>Auriez-vous des exemples de la puissance de cette création et cette intelligence collectives ? </b></p>
  468. <p>L’encyclopédie collective en ligne <a href="http://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal">Wikipédia</a> est un peu l’exemple classique. Dans le domaine de la programmation, on peut signaler <a href="https://github.com/">GitHub</a> : ce sont des millions de codeurs qui échangent des millions de programmes, de manière collective. Les sites web <a href="http://mathoverflow.net/">MathOverflow</a> ou <a href="http://www.physicsoverflow.org/">PhysicsOverflow</a> permettent de poser des questions et d’offrir des réponses collectives à ces questions. Il y a un système de vote pour faire ressortir les meilleures questions et les meilleures réponses afin qu’émerge, non pas une version unique comme sur Wikipédia mais un nuage de solutions. Cela met en évidence la réputation des solutions et la réputation des gens qui ont contribué à ces solutions. Certains mettent d’ailleurs sur leur CV le nombre de points obtenus sur ces plates-formes. Même les génies ont parfois besoin d’un collectif pour avancer. Ainsi, Timothy Gowers, un professeur à Cambridge qui a reçu la médaille Fields (considérée comme le prix Nobel des Mathématiques), a avoué sur son <a href="http://gowers.wordpress.com/">blog</a> qu’il séchait sur un problème de maths. Cela faisait deux ans qu’il n’y arrivait pas et en trois mois son problème a été résolu grâce aux contributions qu’il a reçues !</p>
  469. <p>Ces dernières années, on observe l’émergence de formes ludiques de création collective. Par exemple, le jeu <a href="http://fold.it/portal/">Fold-it</a> a été créé pour essayer d’avancer sur le problème du repliement des protéines, qui est très complexe. Toutes les connaissances de la physique-chimie ont été incorporées dans le jeu sous la forme des règles du jeu. Des joueurs ont ensuite été invités à replier des protéines en respectant ces règles et en utilisant leurs capacités à voir en 3D et à être créatif. Certains joueurs ont ainsi été capables de résoudre des problèmes que ni les biochimistes ni les supercalculateurs n’avaient su résoudre ! C’est un exemple qui montre la supériorité de l’intelligence collective quand elle est canalisée, car les équipes collectives sont souvent plus performantes que les joueurs individuels.</p>
  470. </div>
  471. </article>
  472. </section>
  473. <nav id="jumpto">
  474. <p>
  475. <a href="/david/blog/">Accueil du blog</a> |
  476. <a href="http://www.paristechreview.com/2015/03/12/education-collaborative/#.VhNyRWlFBxt.twitter">Source originale</a> |
  477. <a href="/david/stream/2019/">Accueil du flux</a>
  478. </p>
  479. </nav>
  480. <footer>
  481. <div>
  482. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  483. <p>
  484. Bonjour/Hi!
  485. 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>
  486. 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>).
  487. </p>
  488. <p>
  489. 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>.
  490. </p>
  491. <p>
  492. Voici quelques articles choisis :
  493. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  494. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  495. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  496. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  497. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  498. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  499. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  500. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  501. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  502. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  503. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  504. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  505. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  506. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  507. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  508. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  509. </p>
  510. <p>
  511. 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>.
  512. </p>
  513. <p>
  514. Je ne traque pas ta navigation mais mon
  515. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  516. conserve des logs d’accès.
  517. </p>
  518. </div>
  519. </footer>
  520. <script type="text/javascript">
  521. ;(_ => {
  522. const jumper = document.getElementById('jumper')
  523. jumper.addEventListener('click', e => {
  524. e.preventDefault()
  525. const anchor = e.target.getAttribute('href')
  526. const targetEl = document.getElementById(anchor.substring(1))
  527. targetEl.scrollIntoView({behavior: 'smooth'})
  528. })
  529. })()
  530. </script>