davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
210 提交
1 分支
目录树: d902697713
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'd902697713'
${ noResults }
larlet-fr-david-cache/cache/066bf62d8c62ec4474548112114.../index.html

index.html 31KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658 
  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>Thoughts On Workshop Design (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

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

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

  31.   <link rel="canonical" href="http://blog.fabled.net/sfpc,learning,workshop/thoughts-on-workshop-design">

  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.   Thoughts On Workshop Design (archive)

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

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://blog.fabled.net/sfpc,learning,workshop/thoughts-on-workshop-design">Source originale du contenu</a></h3>

  463.     <p>Yesterday I got to participate in a workshop called <strong>Distributed Web of Care</strong>, hosted by <a href="http://rhizome.org/">Rhizome</a> that took place at the <a href="https://www.newmuseum.org/">New Museum of Contemporary Art</a> in New York City.  I am sharing about it because it was an interesting hybrid of a workshop/talk and I learned a lot from its facilitation and my experience of it, both in the lead-up and on the day itself.</p>

  464. 

  465. <h2 id="distributed-web-of-care">Distributed Web of Care</h2>

  466. 

  467. <p>The subject was ostensibly the Distributed Web, and we looked at two organizations active in that space: <a href="https://ipfs.io/">IPFS</a> and <a href="https://datproject.org/">The Dat Project</a>. The deeper focus of the day, however, was how can we look at a distributed communication structure/protocol as an opportunity to rethink the current Internet in which centralized corporations/governments/states control our data (and our pathways to and through that data).</p>

  468. 

  469. <p>By examining the way that the distributed web works, and contrasting <a href="https://github.com/ipfs/specs/tree/master/merkledag#thin-waist-of-data-structures">its protocols</a> with our <a href="https://www.youtube.com/watch?v=uXumm52oBMo">current ones</a>, are we able to imagine networks and interactions where people care for one another and are able to care for our own data? At the very least, by visualizing current centralized protocols, and “grounding <em>The Cloud</em>” in its infrastructural and facebook-amazon-google-centered reality, it gives participants a way of understanding, at a high level, what’s going on when we use our apps.</p>

  470. 

  471. <p>While caring for each other through a network might sound naïve—<em>of course there will be bad actors, and simply humans being humans!</em>—thinking about technology protocols in the context of what kind of interactions they enable, and what kinds of mitigations would need to be in place for their particular weaknesses is a valuable exercise. It highlights the values you want to bring to a space and in doing so affords a level of imaginative agency that we often don’t apply to the technologies that shape us.</p>

  472. 

  473. <h2 id="pre-workshop">Pre-workshop</h2>

  474. 

  475. <p>The workshop was led and organized by <a href="http://taeyoonchoi.com/">Taeyoon Choi</a>, who is one of my teachers and the co-founder of the <a href="http://sfpc.io">School of Poetic Computation</a>.  Taeyoon organized the workshop, wrote the majority of content, and stood up the structural frame of the presentation.  He did the organizing in a very collaborative and open fashion, and I’m going to discuss those effects here.</p>

  476. 

  477. <p>He invited a group of students and collaborators to participate in a series of discussions both in-person and in an email thread and shared online document.  He asked each participant what their vision was for the future of the Internet, as well as how they would like to contribute on Saturday.</p>

  478. 

  479. <p>When I didn’t have a specific idea for my contribution, Taeyoon asked me to elaborate on a story I’m working on which frames the technological underpinnings of <a href="https://en.wikipedia.org/wiki/Blockchain">the blockchain</a> as a letter to a non-technical girlfriend of mine, with a specific focus on how <a href="https://en.wikipedia.org/wiki/Merkle_tree">Merkle</a> works.  This was welcome because it gave me guidance for how to participate in a space that I hadn’t designed and conceptualized.  Other students had discussions they wanted to initiate, or were also asked to take a technical aspect of the current or distributed web architecture and elaborate upon it.</p>

  480. 

  481. <p>The discussions were interesting because Taeyoon had gathered people into a group who didn’t previously all know one another. I got to meet some folks who are working on <a href="https://newcomputers.group/">The New Computers Group</a> and <a href="https://nycmesh.net/">NYC Mesh</a>, both of which were new to me, and also hear about issues that are top-of-mind for my fellow students, including:</p>

  482. 

  483. <ul>

  484.   <li>How/will a diversity of networks emerge over time such that they’re not all routed through the U.S.?</li>

  485.   <li>How/will trust be established in distributed environments?</li>

  486.   <li>What happens with fake identities when cloning your online presence becomes so easy?</li>

  487. </ul>

  488. 

  489. <p>There was a casual feel in the collaboration: rather than creating a space of <em>Productivity Stress</em>, the planning and preparation had an emergent feel.  This was notably different from recent preparations for talks that I’ve done, which have felt high-pressure, time-intensive and isolating.  For the workshop presentation, I contributed three slides on Merkle, which I will share in a separate post.</p>

  490. 

  491. <p>Takeaway: Collaboration is more instructive, thought-provoking, and time-wise easier than working alone!</p>

  492. 

  493. <h2 id="day-of">Day-Of</h2>

  494. 

  495. <p>I arrived at the New Museum at 9:30 AM. It was a beautiful blue-sky sunny day and I got to walk across the Lower East Side. We were led into a beautiful auditorium in the museum with a helpful staff.</p>

  496. 

  497. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/empty-room.jpg" alt="Empty Room" title="Empty Auditorium"/> <img src="http://blog.fabled.net/assets/img/sfpc/week5/stage.jpg" alt="Presentation Stage" title="Presentation Stage"/></p>

  498. 

  499. <p>Taeyoon had brought string and stickers for the interactive portion of the workshop in which people would physically model the Internet in various forms (centralized, de-centralized, distributed).</p>

  500. 

  501. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/supplies.jpg" alt="Supplies for the distributed web" title="Supplies for the distributed web"/></p>

  502. 

  503. <p>A few of us wondered if the different color strings and dots were intended to represent different concepts (e.g. “Use a blue string for a distributed connection, a pink one if you’re a host, etc”) but he wanted to keep it informal. This was a smart decision because later when people were participating, focus could be on the interaction and not strain around remembering a rule-set.</p>

  504. 

  505. <p>We started by “activating” one of the walls by putting a network up. Look how beautiful the simple colorful strings and dots look on the white wall.</p>

  506. 

  507. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/wall-network.jpg" alt="Wall Network" title="Wall Network"/></p>

  508. 

  509. <p>And then we practiced an interaction where three of us played out the data-flow of a centralized, and a distributed network.</p>

  510. 

  511. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/network-practice.png" alt="Practice" title="Practice"/></p>

  512. 

  513. <h2 id="workshop">Workshop</h2>

  514. 

  515. <p>When the workshop started, Taeyoon took to the stage and began the presentation. The first part was more lecture-style, the second part was an interactive exercise with the audience.  He started by presenting the Code of Conduct for the workshop and then reading it out loud.  My first thought was, “this is a lot to read for a 90 minute workshop”: it took up a few slides and was a lot of text.</p>

  516. 

  517. <p>When he was done, he acknowledged that while that might be a lot to read, in the context of the idea of setting up distributed networks <strong>of Care</strong>, it is important to start with centering the community guidelines <strong>around the practices of Care</strong>.  I hadn’t thought of this and was moved by how this act of reading, as well as the act of taking the time to let it be heard, dovetailed with the purpose of the workshop.  Given that a Code of Conduct is a document that is often left for an individual to find for themselves if they want to (or more often, if they <em>need to</em>), rather than centered equally for everyone, I found the reading  to be a powerful act.</p>

  518. 

  519. <p>In addition to reading the Code of Conduct for our workshop, he linked to a set of community guidlines put out by the <a href="http://yellowjacketscollective.com/">Yellow Jackets Collective</a>.  I am sharing them here for contemptation, as I myself like the bluntness of the language and ideas (e.g. <em>No White Nonsense</em>) and the clarity of some definitions (specifically that of  <em>Toxic Masculinity</em>):</p>

  520. 

  521. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/yjc-1.png" alt="YJC Community Conduct Part 1" title="YJC Community Conduct 1"/>

  522. <img src="http://blog.fabled.net/assets/img/sfpc/week5/yjc-2.png" alt="YJC Community Conduct Part 2" title="YJC Community Conduct 2"/></p>

  523. 

  524. <p>During the presentation, Taeyoon presented ideas and then had individuals come up on stage to speak about the parts of work they had prepared. Below are <a href="https://celltowertrees-sfpc.tumblr.com/">Kelly</a>, Callil, <a href="https://medium.com/@jsteinbrechr/">Hans</a> and <a href="http://nabilhassein.github.io/about/">Nabil</a>:</p>

  525. 

  526. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/kelly.jpg" alt="Kelly" title="Kelly"/>

  527. <img src="http://blog.fabled.net/assets/img/sfpc/week5/callil.jpg" alt="Callil" title="Kelly"/>

  528. <img src="http://blog.fabled.net/assets/img/sfpc/week5/hans.jpg" alt="Hans" title="Kelly"/>

  529. <img src="http://blog.fabled.net/assets/img/sfpc/week5/nabil.jpg" alt="Nabil" title="Nabil"/></p>

  530. 

  531. <p>This presentation style shared the stage and broke up the singularity of the presentation with different voices and discussions. As one of my classmates <a href="https://medium.com/@apyrchla">Agnes</a> pointed out afterwards, a stage can be problematic in establishing a singular authority, and this was a nice way to maintain a coherent workshop structure without going overboard on the “one singular authority” aspect of the experience. In addition, it differed from a panel in that it was a short series of facilitated conversations.</p>

  532. 

  533. <h2 id="the-interactive-portion">The Interactive Portion</h2>

  534. 

  535. <p>After the speaking part of the presentation was done, a few of us did a small demonstration on stage with strings and stickers, enacting the data-flow of a shared google doc through Google itself. I got to play the part of Google (and made the character choice to have Google be only 5’2”, in order to humanize it):</p>

  536. 

  537. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/playing-google.png" alt="Us playing Google" title="Playing Google"/></p>

  538. 

  539. <p>We touched on issues including:</p>

  540. 

  541. <ul>

  542.   <li>Ownership, e.g. the application provider storing copies of your data</li>

  543.   <li>How/are people severed from their data if the application provider goes offline?</li>

  544.   <li>The redundancies of all information-flow going through a central provider</li>

  545. </ul>

  546. 

  547. <p>We then “cut” some of those connections, with a scissors, and re-formed as a distributed network, identifying behaviors such as:</p>

  548. 

  549. <ul>

  550.   <li>The fact that each node would have a complete copy of the data</li>

  551.   <li>The central hub is not always the shortest connection point between nodes</li>

  552.   <li>What does it mean for data survival/archival when data is distributed?</li>

  553. </ul>

  554. 

  555. <p>Visualizing these data flows, even when clumsily enacted, puts shapes to concepts that may have been to this point either abstractions or not thought of: It’s very different seeing a ‘dot’ of data being passed down long paths to arrive at its destination than to think about something more poetic-sounding but ethereal, e.g. <em>data traveling in the cloud</em>.</p>

  556. 

  557. <p>Next, the audience was invited into the floor area and assembled themselves into networks of different configurations.</p>

  558. 

  559. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/taeyoon-group.jpg" alt="Taeyoon with Group" title="Small Group"/></p>

  560. 

  561. <p>This was a fun session, and made easier by the informality and low-tech aspect of the tools. Once people assembled, configurations changed, people tried things like sending a <em>Like</em> or a <em>Smiley</em> across the network.</p>

  562. 

  563. <p>The first portion of this was network-assembly and data-transfer, the second portion was to have three pre-determined actors—Facebook, The State, and The Government—intervene in the existing networks and reconfigure them for their own interests.  So, after a few minutes of self-organizing, the larger actors entered. The picture on the right, below, represents Facebook as a central data collection point.  On the left, the groups kneeled, to show the subordinate agency of their networks when under the control of a government.</p>

  564. 

  565. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/facebook.jpg" alt="Facebook Group" title="Facebook"/>

  566. <img src="http://blog.fabled.net/assets/img/sfpc/week5/kneeling-group-2.jpg" alt="Kneeling Group" title="Kneeling Group"/></p>

  567. 

  568. <h2 id="workshop-thoughts">Workshop Thoughts</h2>

  569. 

  570. <p>I enjoyed all aspects of this workshop, and it was notable because a lot of the times, events that appear fun and well-put-together in public are a result of high-stress behind-the-scenes work. (Perhaps Tayoon was very stressed, though if so it was not apparent, but I think for the rest of us the work was a healthy size). Because of this, I gave a lot of thought to what in the design of the workshop made it successful as a participant and, I believe, for the audience.</p>

  571. 

  572. <p>Some of the questions I’m taking away for future organizing include:</p>

  573. 

  574. <ul>

  575.   <li>How can you support the workshop topic in the design of the workshop itself? For example, this workshop shared the stage, established guidelines of a safe community, and created loose networks of expertise. This fit with its joint topics of caring for others, and distributing information.</li>

  576.   <li>For technical demonstrations for a less-technical audience, leaving out some of of the technically granularity can paint a clearer picture, but talking about what specifics to enact/leave-out beforehand will clarify the interactions/intents for the performers.</li>

  577.   <li>Low-tech tools for play are valuable because the interactions are emphasized over the correctness of the interactions.</li>

  578.   <li>“Activating” the space in advance in whatever way fits the workshop makes it an interesting space when people enter (in our case, decorating the wall with a network of strings and dots).</li>

  579.   <li>Building a workshop out of a diverse group of voices is stronger than coming from only one voice, or perspective</li>

  580.   <li>Human-scale helps when talking about technology.</li>

  581.   <li>Collaborate when putting together a workshop: rely on other voices to provide expertise or elaboration  you don’t have. This will be more informative and less stress to build.</li>

  582. </ul>

  583. 

  584. <h2 id="connect-the-dots">Connect The Dots</h2>

  585. 

  586. <p>I took a few pictures of folks at the end, with all the different “dots” on their shirts that represented the “data” they’d collected as well as whether or not they were a node. I think it’s an interesting artifact of our usually “invisible” dabbling in <em>The Cloud</em>.</p>

  587. 

  588. <p>Enjoy!</p>

  589. 

  590. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/ailladi-dots.jpg" alt="Ailladi Dots" title="Dots"/>

  591. <img src="http://blog.fabled.net/assets/img/sfpc/week5/callil-dots.jpg" alt="Callil Dots" title="Dots"/></p>

  592. 

  593. <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/person-1.jpg" alt="Person 1 Dots" title="Dots"/>

  594. <img src="http://blog.fabled.net/assets/img/sfpc/week5/person-2.jpg" alt="Person 2 Dots" title="Dots"/></p>

  595.   </article>

  596. </section>

  597. 

  598. 

  599. <nav id="jumpto">

  600.   <p>

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

  602.     <a href="http://blog.fabled.net/sfpc,learning,workshop/thoughts-on-workshop-design">Source originale</a> |

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

  604.   </p>

  605. </nav>

  606. 

  607. <footer>

  608.   <div>

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

  610.     <p>

  611.       Bonjour/Hi!

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

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

  614.     </p>

  615.     <p>

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

  617.     </p>

  618.     

  619.     <p>

  620.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  637.     </p>

  638.     <p>

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

  640.     </p>

  641.     <p>

  642.       Je ne traque pas ta navigation mais mon

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

  644.       conserve des logs d’accès.

  645.     </p>

  646.   </div>

  647. </footer>

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

  649.   ;(_ => {

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

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

  652.       e.preventDefault()

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

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

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

  656.     })

  657.   })()

  658. </script>