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.
397 Révisions
1 Branche
Aborescence: 8117a1624c
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '8117a1624c'
${ noResults }
larlet-fr-david-cache/cache/d907fe7b98ad8d369ff23d0f864.../index.html

index.html 35KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534 
  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>Sudweb 2018, test de format : Casper et les pratiques collaboratives (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://xavcc.github.io/casper-sudweb-2018/">

  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.   Sudweb 2018, test de format : Casper et les pratiques collaboratives (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://xavcc.github.io/casper-sudweb-2018/">Source originale du contenu</a></h3>

  463.     <p>SudWeb 2018 était la 8ème édition de « La conférence Web surtout Humaine » dont le format et lieu d’occurence sont remis à zéro chaque année. Cette édition eut donc cours à Anduze dans le Gard avec une journée de conférences et une journée au format forum ouvert. Une importance considérable fut également donnée aux temps <em>non-programmés</em> comme illustré dans <a href="https://xavcc.github.io/tissage-sudweb">cet article</a>.</p>

  464. 

  465. <p><p>Pour cette édition, nous avions décidé, Julia Barbelane, Érick Gardin (tous deux de la thym Sudweb) et moi, de proposer et tester un format différent d’une conférence classique afin d’illustrer au mieux le postulat proposé sur les pratiques collaboratives et l’apprentissage. Nous avons tenté de nous écarter d’une intervention descendante d’une unique personne <em>sachante</em> diffusant de l’information à un auditoire statique pour aller vers un essai de collaboration pair à pair, pendant une partie au moins de la séance, entre le public et la personne intervenante.</p> <p>Voici nos humbles lignes de recette que nous invitons à copier, réutiliser, modifier, tester, contribuer (le fichier source est accessible <a href="https://github.com/XavCC/xavcc.github.io/blob/master/_posts/2018-05-30-casper-sudweb-2018.md">ici via github</a>, car ce format est sous licence libre Creative Commons By SA 4.0 Julia Barbelane, Érick Gardin, Xavier Coadic.</p> <h4 id="table-des-contenus">Table des contenus</h4> <ol> <li><a href="#intention">Intention</a></li> <li><a href="#objectifs">Objectifs</a></li> <li><a href="#articulation-de-la-séance">Articulation de la séance</a></li> <li><a href="#description-du-cercle-samoan-adapté">Description du cercle Samoan adapté</a>  </li> <li><a href="#conclusion-de-la-séance">Conclusion de la séance</a></li> <li><a href="#texte-de-conclusion-prononcé-à-sudweb-2018">Texte de conclusion prononcé à SudWeb 2018</a></li> <li><a href="#remerciements">Remerciements</a></li> <li><a href="#notes-supplménetaires">Notes supplémentaires</a></li> </ol> <h2 id="intention">Intention</h2> <p>Nous avons pris le parti de tenter de transmettre des savoir-faire et des savoir-être à un public tout en invitant ce public à participer activement à l’expérience et au vécu collectif lors d’une séance initialement programmée comme une conférence au format classique.</p> <p>Ceci visait à donner exemples et corps au postulat qu’être quasi-invisible dans des communautés de pratiques collaboratives permet d’apprendre beaucoup de compétences, de se protéger soi-même et d’autres personnes, de partager de nombreux acquis et bien d’autres valeurs.</p> <p>C’est également une volonté d’expérimenter lors de ce sudweb un prototype de format d’intervention et de participation plus dynamique et plus productif qu’un discours éclair à une seule personne sur scène face à un groupe désirant apprendre et/ou pratiquer.</p> <h2 id="objectifs">Objectifs</h2> <ol> <li>Vivre une expérience collective</li> <li>Mettre en place les circonstances et conditions de rencontre entre les personnes présentes (soir suivant l’atelier, forum ouvert du lendemain, Etc.)</li> <li>Transformer cette expérience en acquisition de savoir-faire et savoir-être</li> </ol> <h2 id="articulation-de-la-séance">Articulation de la séance</h2> <ol> <li>Introduction par la personne intervenante</li> <li>Cercle Samoan adapté pour vécu d’expérience Casper <ul> <li>6 à 12 personnes</li> <li>Sercle Samoan adapté placé au centre de l’assemblée présente</li> <li><strong>20 minutes</strong> de cercle <ul> <li>le Cercle Samoan expérimente le test avec la personne intervenante incluse dans la ronde</li> <li>Le public note en silence les conditons et circonstances d’apprentissage du cercle samoan</li> </ul> </li> </ul> </li> </ol> <p><img src="/assets/images/samoan-circle.png" alt=""/></p> <figcaption class="caption">Illustration de Cercle Samoan classique, enviescolaire.fr | licence CC BY</figcaption> <ol> <li>Improvisation de l’intervenant⋅e : <strong>10 minutes</strong> <ul> <li>Rappel au public : Conservez vos observations et notes pour l’après séance.</li> <li>l’intervenant⋅e rebondit sur ce qui vient d’être vécu lors du cercle, ex : « J’ai observé cela à l’instant, ça me rappelle… » <ul> <li>Pour donner plus de profondeur au processus d’acquisition de savoir-faire et savoir-être</li> <li>Pour illustrer avec des potentiels plus impactants</li> </ul> </li> </ul> </li> <li>Oral de retour d’expérience : <strong>15 minutes</strong> <ul> <li>Explication du processus</li> <li>Intérêts de ce processus</li> <li>Questionnements, doutes et limites</li> </ul> </li> <li>Séance de questions : <strong>10 minutes</strong></li> </ol>

  466. <h2 id="description-du-cercle-samoan-adapté">Description du Cercle Samoan adapté</h2> <p>Au départ le Sercle Samoan est une méthode de débat visant au plus simplement à permettre à chacun d’intervenir volontairement sans en ressentir l’obligation ; d’écouter les arguments ou les idées de l’autre ; d’éveiller l’esprit critique sur les questions liées au changement climatique ; permettre aux timides de ne pas s’exprimer, limiter les bavardages et bruits parasistes.</p> <div class="side-by-side"> <div class="toleft"> <img class="image" src="/assets/images/2-Concentric-circles.png" alt="Alt Text"/> <figcaption class="caption">Figuration du cerlce samoan classique</figcaption> </div> <div class="toright"> <p>Les personnes du premier cercle se faisant face, les personnes du public regardant également vers le centre des cercles concentriques. Le débat en Cercle Samoan se déroule en deux parties : la première est le débat proprement dit, la deuxième est une évaluation de cette technique par le groupe lui-même. Puis, reconstituer un seul et grand cercle pour permettre aux participant⋅e⋅s d’échanger sur la méthode du Cercle Samoan et ce indépendamment du sujet qui a été débattu. Pendant une dizaine de minutes, chacun est invité à s’exprimer librement sur l’expérience vécue pour au final valider collectivement l’idée d’utiliser et de pratiquer à nouveau cette méthode</p> </div> </div> <p>Dans notre adaptation du Cercle Samoan, l’objectif est de s’approcher lors de la première partie de la séance, le plus possible de ce système collectif :</p> <p><img src="/assets/images/processus.jpg" alt=""/></p> <p>La table samoane adaptée sera donc :</p> <ul> <li>composée de 6 à 12 personnes</li> <li>placée durant la durée du test à l’emplacement où l’intervenant⋅e devait se tenir pour la conférence</li> <li>Les participant⋅e⋅s sont non pas face à face mais épaule contre épaule le regard tourné vers l’extérieur du cercle afin de pas (trop) voir des caractéristiques physiques des autres membres de la ronde samoane.</li> <li>La personne prévue à l’origine pour la conférence peut pariciper au cercle samoan adapté à condition de se mettre sur un pied d’égalité avec les autres individus</li> </ul> <h3 id="objectifs-du-cercle">Objectifs du cercle</h3> <ul> <li>Créer des interactions entre les personnes du public</li> <li>Sortir de la posture conférence descendante d’une personne vers une groupe</li> <li>Montrer que le groupe est tout aussi légitime sur le sujet abordé</li> <li>Illustrer le postulat de l’intervention et le thème choisi par une preuve par la démonstration en direct</li> <li>Inciter aux rencontres et échanges en groupe après la séance</li> </ul> <h3 id="déroulé-du-cercle-adpaté">Déroulé du cercle adpaté</h3> <p>Le cercle samoan est initialment une ronde dans laquelle les personnes en présence sont assises face à face, telle que pouvant regarder vers l’intérieur du cercle. Le public entoure le cercle samoan pouvant également regarder vers le centre des deux cercles concentriques.</p> <p>Dans le test que nous avons effectué à sudweb 2018, nous avons renversé la configuration du cercle samoan en installant les personne de la première ronde dos à dos, permettant ainsi de regarder vers l’extérieur et vers le public, visant ainsi à pseudo-anomyser (Casper) chaque participant⋅e à cette ronde.</p> <p>Le public, lui, entoure ce premier cercle regardant ainsi le déroulé de ce cercle et se trouvant en condition de réception à niveau de l’information orale et non-orale.</p> <p>Appel par l’intervenant⋅e de 6 à 12 personnes volontaires pour venir participer à l’expérience en expliquant les contraintes que cela implique (contact physique, captation vidéo), et en expliquant qu’elles et ils vont être actrices et acteurs d’une expérience de processus de transmission de savoir, être ou faire, en étant presque invisibles les unes et uns par rapport aux autres.</p> <p>Appel à l’assemblée de prendre attention particulière et notes par observations silencieuses, des circonstances et conditions et petites choses qui permettent cette transmission de savoir-faire et savoir-être durant le cercle.</p> <p>Si une personne désire quitter le cercle samoan elle le peut à tout à moment et ainsi une autre personne pourra prendre sa place.</p> <p>Si une personne désire faire l’experience les yeux fermés, elle a le droit.</p> <p>La première question posée aux personnes dcu cercle :</p> <blockquote> <p>« <em>Qu’avez-vous appris comme savoir faire ou savoir être dernièrement ? Je parle là bien de savoir et non simplement d’une information acquise, c’est à dire que ce savoir est passé par l’observation, l’hyptohése, le test ou prototypage, le resultat, l’interpretation, la conclusion ou confrontation.</em> »</p> </blockquote> <p>Petit tour des acquis récents à voix haute, l’intervenant⋅e prend notes de ce qui est évoqué.</p> <p>Ensuite,</p> <blockquote> <p>« <em>Qui désire essayer de transmettre ce qu’il a appris en essayant de le faire reproduire ou comprendre pourquoi il a appris aux membres du groupe en les guidant sans bouger de sa place ?</em>»</p> </blockquote> <p>Il s’agira de faciliter au mieux la où les personnes qui tenteront l’expérience, y compris en fournissant si besoin aux personnes du cercle feuille, stylo, ordinateur (session invité of course), truc à assembler, ficelle, pour tenter de suivre les instructions de celle ou de celui qui tente de transmettre son acquis.</p> <p>Le fait de ne pas se voir face à face pour les personnes du cercle pousse chacune à des efforts de pédagogie, d’ingéniosité, d’attention et d’intention, de bientraitance, envers les autres.</p> <p>Le cercle extérieur, par son silence, est en posture privilégiée pour relever les circonstances et conditions qui sont très difficilement remarquables par les membres du cercle adapté du fait de l’intensité du vécu émotionnel.</p> <p>Pour les respect du timing, en plus du timer présent dans la salle, une aide extérieure serait précieuse pour aider la personne intervenante qui se retrouve ici à passer de conférencière à facilitatrice.</p> <p>À la fin de ce premier temps, ne pas oublier les remerciements aux participant⋅e⋅s, et d’expliquer que les observations et notes par l’assemblée doivent être conservées précieusement pour la fin de l’intervention. Inviter les personnes du cercle adapté à rejoindre leur place.</p> <p>Il est temps d’effectuer la reprise des notes sur “les savoirs acquis récemment par ces personnes et comment ou surtout pourquoi ils et elles ont appris quelque chose”, afin de rebondir en (pseudo) improvisation sur différentes expériences Casper vécues. Un moment gesticulé, qui peut être inspiré de la méthode conférence gesticulée, visant des retours d’expériences vécues par l’intervenant⋅e en rebondissant ce qui vient d’être testé pour appuyer, ex : « J’ai observé cela à l’instant, ça me rappelle… »</p> <ul> <li>Explication du protocole, exemple Casper lors de SudWeb 2018</li> <li>Intérêts de ce protocole, exemple Casper lors de SudWeb 2018</li> <li>Questionnements, doutes et limites</li> </ul>

  467. <h2 id="conclusion-de-la-séance">Conclusion de la séance</h2> <blockquote> <p><em>Lien vers la vidéo de la séance</em> : <a href="https://vimeo.com/272441064">https://vimeo.com/272441064</a></p> </blockquote> <p>Il s’agit du moment le plus formel de cette recette expérimentale ; dans ce sens il nous a semblé justifié et intéressant de conclure par un texte plus travaillé et didactique permettant au public de cerner avec de nouveaux horizons le postulat de départ et le thème de la séance.</p> <p>Tentons de privilégier un oral scénique, certes, mais pouvant chercher la soutenance du propos amont bien plus que viser un discours promotionnel.</p> <p>Bien qu’il est libre à chaque personne d’improviser plus ou moins largement cette partie finale, dans le cadre de sudweb nous avons pris le parti d’écrire un texte qui nous sert, ci-dessous, d’exemple illustrant notre intention de format ainsi que de retranscription de la séance vécue.</p>

  468. <h2 id="texte-de-conclusion-prononcé-à-sudweb-2018">Texte de conclusion prononcé à SudWeb 2018</h2> <p>« Ce que je tente, par ce court instant d’expérience collective, de vous faire passer par le vécu est un aperçu d’un processus ou protocole que j’appelle Casper.</p> <p>En reprenant les exemples de pratiques collaboratives dans des communautés diverses que je viens vous citer, j’ai rapidement cultivé le sentiment qu’être quasi invisible ; après tout presque tout le monde connaît Casper mais personne ne sait qui est la personne sous le drap blanc ; permet un confort situationnel, relationnel, les libertés de faire et d’apprendre. Cela évite d’une certaine manière d’être jugé pour ce que l’on parait et d’être apprécié et reconnu pour ce que l’on fait et comment l’on se comporte dans ces processus de transmission et de production, de production de savoir ou autre production.</p> <p>Je crois sincèrement que si j’ai pu avoir autant de choses à apprendre c’est par ce processus Casper, mais surtout autant de moments incroyables à vivre. Car par ce protocole, je ne venais pas empiéter sur l’intimité d’une personne ou sur la culture propre à un petit groupe de persone.</p> <p>Mais j’avoue volontiers que plus on partage plus on apprend. Reste à savoir ce que partage un Casper.</p> <p>Finalement, en biodesign, informatique, écologie, sécurité des communications…, si le “comment” l’on apprend est important, si le contenu de ce que l’on apprend est important, je conserve la postulat Platonicien que c’est le “Pourquoi” l’on apprend qui est d’importance primordiale et que c’est bien souvent ce “pourquoi” que nous cernons avec difficulté et approximation.</p> <p>C’est aussi pour cela, que je vous invite dès ce soir ou demain pendant le forum ouvert à venir à la rencontre des personnes qui ont fait cette séance avec vos observations pour échanger avec elles et confronter vos informations. Qui sait, peut-être que cela créera une configuration sociale particulière où se produit une rencontre entre des entités individuées qui s’engagent intentionnellement à la conception d’une représentation commune, c’est-à-dire à responsabilité partagée (c’est la définition scientifique du tiers-lieu que j’empreinte au Dr en sociologie Antoine Burret). Prolongeant ainsi ensemble cette réflexion et expérience Casper.</p> <p>Pour ce qui est d’un gentil fantôme qui partage aussi lorsqu’il apprend, peut-être que cela se situe dans les racines de son drap qui masque une partie tout du moins de ses fragilités, protégeant également par pudeur autrui, laissant ainsi cours à une volonté profonde de sincérité et d’abnégation. Est-ce cela se dévouer à un idéal collectivement avant de servir nos miroirs aux vanités tout en se nourrissant des savoirs et moments profondément humains ? C’est bien là une des questions que je vous pose. Une abnégation peut vous prendre jusqu’aux tripes et au cœur je l’avoue et je vous mets en garde.</p> <p>Il y a évidemment des limites à ce processus ou ce protocole. Dont la première serait qu’être une sorte de fantôme dans des instants d’humanité intense peut mener à des rapports impersonnels, en apparence certainement. Une situation particulière qui peut destabiliser les autres personnes, et même dans le pire des cas heurter une ou plusieurs personnes qui auraient l’impression d’être dans un rapport de partage déséquilibré ou non respectueux de certaines conventions sociales actuelles. Il faudra alors, en posture de Casper, faire appel à toutes ces ressources propres d’intelligence collective pour éviter ces ressentiments. Apprendre et transmettre ne sont pas actes égoïstes qui ne satisferaient qu’à l’exigence d’une seule personne.</p> <p>Apprendre à apprendre en permanence et contribuer à un commun, pas uniquement un idéal commun, mais à des ressources libres entretenues et cultivées par des communautés, avec leurs règles auto-éditées, transparentes et fédérées avec d’autres instances paires. Des ressources comme la connaissance libre, la science libre, le logiciel libre, l’eau, la biodiversité… Chercher à se détacher de l’égo (autant que faire se peut) pour proposer de nouvelles productions plus adaptées et soutenables, c’est cela qui m’amène aujourd’hui à vous proposer de creuser ou de déconstruire ensemble le protocole Casper. Dans un monde qui glisse à grande vitesse vers l’hyper données de l’intime, avec des industries qui surfent sur des vagues de personnification à l’extrême, face aux postures de star auto proclamée, ce processus Casper peut aussi être un immense bol d’oxygène.</p> <p>Ainsi, pour conclure ces quelques minutes ensemble et vous inviter aux rencontres ce soir ou demain afin d’approfondir ces fameuses circonstances et conditions évoquées auparavant, je ferais une paraphrase du serment du jeu de paume</p> <blockquote> <p>« <em>Faisons ici et maintenant le serment de nous rencontrer et de nous réunir sans se juger à l’apparence et ce à chaque fois que les circonstances l’exigent ; et de nous séparer que lorsque nous aurons transmis à autrui un savoir-faire et un savoir-être renforçant les libertés et la diversité de toutes et tous</em> » ?</p> </blockquote>

  469. <h2 id="remerciements">Remerciements</h2> <ul> <li>Julia Barbelane et Érick Gardin pour avoir co-conçu ce format</li> <li>La thym SudWeb pour permettre à ces temps d’exister</li> <li><a href="https://github.com/borisschapira">Boris Schapira</a>, <a href="https://github.com/Julia-barbelane">Julia</a>, <a href="https://github.com/Mily1000V">Mily1000V</a> pour les corrections à cette page</li> <li>Toutes les personnes croisées à SudWeb 2018</li> </ul>

  470. <h2 id="notes-supplémentaires">Notes supplémentaires</h2> <p>J’ai également écrit sur des moments <em>off</em> de partages et de sujets lors de sudweb 2018, ces notes vous sont accessibles <a href="https://xavcc.github.io/tissage-sudweb">ici</a></p></p>

  471.   </article>

  472. </section>

  473. 

  474. 

  475. <nav id="jumpto">

  476.   <p>

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

  478.     <a href="https://xavcc.github.io/casper-sudweb-2018/">Source originale</a> |

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

  480.   </p>

  481. </nav>

  482. 

  483. <footer>

  484.   <div>

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

  486.     <p>

  487.       Bonjour/Hi!

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

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

  490.     </p>

  491.     <p>

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

  493.     </p>

  494.     

  495.     <p>

  496.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  513.     </p>

  514.     <p>

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

  516.     </p>

  517.     <p>

  518.       Je ne traque pas ta navigation mais mon

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

  520.       conserve des logs d’accès.

  521.     </p>

  522.   </div>

  523. </footer>

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

  525.   ;(_ => {

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

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

  528.       e.preventDefault()

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

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

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

  532.     })

  533.   })()

  534. </script>