Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 45KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886
  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>Travail en transition — 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. <!-- Canonical URL for SEO purposes -->
  28. <link rel="canonical" href="https://larlet.fr/david/blog/2015/travail-transition/">
  29. <!-- SEO/Semantic metadata -->
  30. <meta name="description" content="Ce qui nous distingue fondamentalement des robots est notre capacité à rêver." />
  31. <meta name="twitter:description" property="og:description" itemprop="description" content="Ce qui nous distingue fondamentalement des robots est notre capacité à rêver." />
  32. <meta name="twitter:title" property="og:title" itemprop="name" content="Travail en transition" />
  33. <meta name="twitter:card" content="summary" />
  34. <meta name="twitter:creator" content="@davidbgk" />
  35. <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2015/travail-transition/" />
  36. <meta property="og:type" content="article" />
  37. <meta property="og:site_name" content="David Larlet (@davidbgk)" />
  38. <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2015/travail-transition.jpg" />
  39. <style>
  40. /* http://meyerweb.com/eric/tools/css/reset/ */
  41. html, body, div, span,
  42. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  43. a, abbr, address, big, cite, code,
  44. del, dfn, em, img, ins,
  45. small, strike, strong, tt, var,
  46. dl, dt, dd, ol, ul, li,
  47. fieldset, form, label, legend,
  48. table, caption, tbody, tfoot, thead, tr, th, td,
  49. article, aside, canvas, details, embed,
  50. figure, figcaption, footer, header, hgroup,
  51. menu, nav, output, ruby, section, summary,
  52. time, mark, audio, video {
  53. margin: 0;
  54. padding: 0;
  55. border: 0;
  56. font-size: 100%;
  57. font: inherit;
  58. vertical-align: baseline;
  59. }
  60. /* HTML5 display-role reset for older browsers */
  61. article, aside, details, figcaption, figure,
  62. footer, header, hgroup, menu, nav, section { display: block; }
  63. body { line-height: 1; }
  64. blockquote, q { quotes: none; }
  65. blockquote:before, blockquote:after,
  66. q:before, q:after {
  67. content: '';
  68. content: none;
  69. }
  70. table {
  71. border-collapse: collapse;
  72. border-spacing: 0;
  73. }
  74. /* http://practicaltypography.com/equity.html */
  75. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  76. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: normal;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  89. font-weight: 300;
  90. font-style: italic;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'EquityTextB';
  95. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  96. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  97. font-weight: 700;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. @font-face {
  102. font-family: 'ConcourseT3';
  103. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  104. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  105. font-weight: 300;
  106. font-style: normal;
  107. font-display: swap;
  108. }
  109. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  110. body {
  111. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  112. font-family: "EquityTextB", Palatino, serif;
  113. background-color: #f0f0ea;
  114. color: #07486c;
  115. font-kerning: normal;
  116. -moz-osx-font-smoothing: grayscale;
  117. -webkit-font-smoothing: subpixel-antialiased;
  118. text-rendering: optimizeLegibility;
  119. font-variant-ligatures: common-ligatures contextual;
  120. font-feature-settings: "kern", "liga", "clig", "calt";
  121. }
  122. pre, code, kbd, samp, var, tt {
  123. font-family: 'TriplicateT4c', monospace;
  124. }
  125. em {
  126. font-style: italic;
  127. color: #323a45;
  128. }
  129. strong {
  130. font-weight: bold;
  131. color: black;
  132. }
  133. nav {
  134. background-color: #323a45;
  135. color: #f0f0ea;
  136. display: flex;
  137. justify-content: space-around;
  138. padding: 1rem .5rem;
  139. }
  140. nav:last-child {
  141. border-bottom: 1vh solid #2d7474;
  142. }
  143. nav a {
  144. color: #f0f0ea;
  145. }
  146. nav abbr {
  147. border-bottom: 1px dotted white;
  148. }
  149. h1 {
  150. border-top: 1vh solid #2d7474;
  151. border-bottom: .2vh dotted #2d7474;
  152. background-color: #e3e1e1;
  153. color: #323a45;
  154. text-align: center;
  155. padding: 5rem 0 4rem 0;
  156. width: 100%;
  157. font-family: 'ConcourseT3';
  158. display: flex;
  159. flex-direction: column;
  160. }
  161. h1.single {
  162. padding-bottom: 10rem;
  163. }
  164. h1 span {
  165. position: absolute;
  166. top: 1vh;
  167. left: 20%;
  168. line-height: 0;
  169. }
  170. h1 span a {
  171. line-height: 1.7;
  172. padding: 1rem 1.2rem .6rem 1.2rem;
  173. border-radius: 0 0 6% 6%;
  174. background: #2d7474;
  175. font-size: 1.3rem;
  176. color: white;
  177. text-decoration: none;
  178. }
  179. h2 {
  180. margin: 4rem 0 1rem;
  181. border-top: .2vh solid #2d7474;
  182. padding-top: 1vh;
  183. }
  184. h3 {
  185. text-align: center;
  186. margin: 3rem 0 .75em;
  187. }
  188. hr {
  189. height: .4rem;
  190. width: .4rem;
  191. border-radius: .4rem;
  192. background: #07486c;
  193. margin: 2.5rem auto;
  194. }
  195. time {
  196. display: bloc;
  197. margin-left: 0 !important;
  198. }
  199. ul, ol {
  200. margin: 2rem;
  201. }
  202. ul {
  203. list-style-type: square;
  204. }
  205. a {
  206. text-decoration-skip-ink: auto;
  207. text-decoration-thickness: 0.05em;
  208. text-underline-offset: 0.09em;
  209. }
  210. article {
  211. max-width: 50rem;
  212. display: flex;
  213. flex-direction: column;
  214. margin: 2rem auto;
  215. }
  216. article.single {
  217. border-top: .2vh dotted #2d7474;
  218. margin: -6rem auto 1rem auto;
  219. background: #f0f0ea;
  220. padding: 2rem;
  221. }
  222. article p:last-child {
  223. margin-bottom: 1rem;
  224. }
  225. p {
  226. padding: 0 .5rem;
  227. margin-left: 3rem;
  228. }
  229. p + p,
  230. figure + p {
  231. margin-top: 2rem;
  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. figure {
  249. border-top: .2vh solid #2d7474;
  250. background-color: #e3e1e1;
  251. text-align: center;
  252. padding: 1.5rem 0;
  253. margin: 1rem 0 0;
  254. font-size: 1.5rem;
  255. width: 100%;
  256. }
  257. figure img {
  258. max-width: 250px;
  259. max-height: 250px;
  260. border: .5vw solid #323a45;
  261. padding: 1px;
  262. }
  263. figcaption {
  264. padding: 1rem;
  265. line-height: 1.4;
  266. }
  267. aside {
  268. display: flex;
  269. flex-direction: column;
  270. background-color: #e3e1e1;
  271. padding: 1rem 0;
  272. border-bottom: .2vh solid #07486c;
  273. }
  274. aside p {
  275. max-width: 50rem;
  276. margin: 0 auto;
  277. }
  278. /* https://fvsch.com/code/css-locks/ */
  279. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  280. font-size: 1rem;
  281. line-height: calc( 1.5em + 0.2 * 1rem );
  282. }
  283. h1 {
  284. font-size: 1.9rem;
  285. line-height: calc( 1.2em + 0.2 * 1rem );
  286. }
  287. h2 {
  288. font-size: 1.6rem;
  289. line-height: calc( 1.3em + 0.2 * 1rem );
  290. }
  291. h3 {
  292. font-size: 1.35rem;
  293. line-height: calc( 1.4em + 0.2 * 1rem );
  294. }
  295. @media (min-width: 20em) {
  296. /* The (100vw - 20rem) / (50 - 20) part
  297. resolves to 0-1rem, depending on the
  298. viewport width (between 20em and 50em). */
  299. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  300. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  301. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  302. margin-left: 0;
  303. }
  304. h1 {
  305. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. h2 {
  309. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  310. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  311. }
  312. h3 {
  313. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  314. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  315. }
  316. }
  317. @media (min-width: 50em) {
  318. /* The right part of the addition *must* be a
  319. rem value. In this example we *could* change
  320. the whole declaration to font-size:2.5rem,
  321. but if our baseline value was not expressed
  322. in rem we would have to use calc. */
  323. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  324. font-size: calc( 1rem + .6 * 1rem );
  325. line-height: 1.5em;
  326. }
  327. p, li, pre, details {
  328. margin-left: 3rem;
  329. }
  330. h1 {
  331. font-size: calc( 1.9rem + 1.5 * 1rem );
  332. line-height: 1.2em;
  333. }
  334. h2 {
  335. font-size: calc( 1.5rem + 1.5 * 1rem );
  336. line-height: 1.3em;
  337. }
  338. h3 {
  339. font-size: calc( 1.35rem + 1.5 * 1rem );
  340. line-height: 1.4em;
  341. }
  342. figure img {
  343. max-width: 500px;
  344. max-height: 500px;
  345. }
  346. }
  347. figure.unsquared {
  348. margin-bottom: 1.5rem;
  349. }
  350. figure.unsquared img {
  351. height: inherit;
  352. }
  353. @media print {
  354. body { font-size: 100%; }
  355. a:after { content: " (" attr(href) ")"; }
  356. a, a:link, a:visited, a:after {
  357. text-decoration: underline;
  358. text-shadow: none !important;
  359. background-image: none !important;
  360. background: white;
  361. color: black;
  362. }
  363. abbr[title] { border-bottom: 0; }
  364. abbr[title]:after { content: " (" attr(title) ")"; }
  365. img { page-break-inside: avoid; }
  366. @page { margin: 2cm .5cm; }
  367. h1, h2, h3 { page-break-after: avoid; }
  368. p3 { orphans: 3; widows: 3; }
  369. img {
  370. max-width: 250px !important;
  371. max-height: 250px !important;
  372. }
  373. nav, aside { display: none; }
  374. }
  375. ul.with_columns {
  376. column-count: 1;
  377. }
  378. @media (min-width: 20em) {
  379. ul.with_columns {
  380. column-count: 2;
  381. }
  382. }
  383. @media (min-width: 50em) {
  384. ul.with_columns {
  385. column-count: 3;
  386. }
  387. }
  388. ul.with_two_columns {
  389. column-count: 1;
  390. }
  391. @media (min-width: 20em) {
  392. ul.with_two_columns {
  393. column-count: 1;
  394. }
  395. }
  396. @media (min-width: 50em) {
  397. ul.with_two_columns {
  398. column-count: 2;
  399. }
  400. }
  401. .gallery {
  402. display: flex;
  403. flex-wrap: wrap;
  404. justify-content: space-around;
  405. }
  406. .gallery figure img {
  407. margin-left: 1rem;
  408. margin-right: 1rem;
  409. }
  410. .gallery figure figcaption {
  411. font-family: 'ConcourseT3'
  412. }
  413. footer {
  414. font-family: 'ConcourseT3';
  415. display: flex;
  416. flex-direction: column;
  417. border-top: 3px solid white;
  418. padding: 4rem 0;
  419. background-color: #07486c;
  420. color: white;
  421. }
  422. footer > * {
  423. max-width: 50rem;
  424. margin: 0 auto;
  425. }
  426. footer a {
  427. color: #f1c40f;
  428. }
  429. footer .avatar {
  430. width: 200px;
  431. height: 200px;
  432. border-radius: 50%;
  433. float: left;
  434. -webkit-shape-outside: circle();
  435. shape-outside: circle();
  436. margin-right: 2rem;
  437. padding: 2px 5px 5px 2px;
  438. background: white;
  439. border-left: 1px solid #f1c40f;
  440. border-top: 1px solid #f1c40f;
  441. border-right: 5px solid #f1c40f;
  442. border-bottom: 5px solid #f1c40f;
  443. }
  444. </style>
  445. <h1 class="single">
  446. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  447. Travail en transition
  448. <time>Publié le 26 juin 2015</time>
  449. </h1>
  450. <article class="single">
  451. <blockquote>
  452. <p>« L’emploi est mort, vive le travail ! » <a href="http://www.culturemobile.net/visions/bernard-stiegler-emploi-est-mort-vive-travail">nous dit</a> le philosophe Bernard Stiegler. Pourquoi le système pyramidal vacille ? Pourquoi notre rapport au travail évolue ? Pourquoi le nomadisme collaboratif ? Quelle est l’importance du numérique dans tout ça ? On n’a pas forcément les réponses mais on a fait des expériences. Et on aime bien partager :-)</p>
  453. </blockquote>
  454. <p><em>Voici un compte-rendu de la keynote écrit à 4 mains que l’on a donné avec Stéphane lors de <a href="http://e1-conference.com/">la conférence E1</a> à Toulon.</em></p>
  455. <p>Est-ce que je suis en train de travailler ? Est-ce que j’étais en train de travailler cette nuit en résolvant un bug ? Est-ce que j’étais en train de travailler sous la douche en préparant cette introduction ? Est-ce que <em>vous</em> êtes en train de travailler en assistant à cette conférence ? Est-ce que <em>vous</em> étiez en train de travailler ce weekend en réfléchissant à la réponse d’un mail professionnel ? Le travail ne consiste plus à être employé pendant 35 heures par semaine mais devient beaucoup plus perméable et fait partie intégrante de nos vies. Le numérique a participé à l’accélération de ce processus, au moins pour les métiers demandant de la créativité.</p>
  456. <p>Afin de s’émanciper de ce nouveau rapport au temps, nous avons créé <a href="https://fr.wikipedia.org/wiki/Soci%C3%A9t%C3%A9_coop%C3%A9rative_et_participative">une SCOP</a> il y a 3 ans. Une SCOP est une société coopérative dont tous les employés sont généralement associés et ont le même poids dans les décisions de l’entreprise. C’est une déclinaison démocratique de l’entreprise qui permet de remettre l’humain — et non le capital — au centre. Oubliés les RTT, vacances, weekends ou jours fériés, on se fait suffisamment confiance pour savoir que chacun utilise son temps pour le bien commun qu’est notre cadre de travail. <strong>C’est faire le choix de ne plus subir la perméabilité du travail mais de s’adapter à ce nouveau mode de vie.</strong> En sachant écouter son corps pour rester dans un rythme soutenable, en apprenant à combiner les intérêts de chacun.</p>
  457. <p>Une fois la question du temps réglée (ou du moins considérée), restait celle de l’espace. « Vous êtes où ? » est souvent la première question que je pose en visioconférence avec mes collègues et elle n’est pas anodine. Elle me rappelle le « Tu es où ? » de la découverte des téléphones portables désormais caduque. Elle traduit la découverte d’une nouvelle pratique.</p>
  458. <p>Nous avons monté <a href="http://scopyleft.fr">scopyleft</a> à Clapiers petit village péri-urbain au Nord de Montpellier. Au milieu des pins en regardant les écureuils, on a testé le slow-working permanent dans un endroit de vie professionnel et familial. Pas de cloison entre le boulot et la vie personnelle. Ma fille, les clients, nos pairs, le Go, les post-it®, les repas, des ateliers techniques, de la musique et des confs-call.</p>
  459. <p>En décembre, le lieu pouvait se stabiliser comme tiers-lieu ou disparaitre. On a lancé une pièce… on a quitté le campement.</p>
  460. <p><em>Ma nouvelle question préférée : « Où me poser pour tapoter ? »</em></p>
  461. <p>Depuis janvier, avec cette petite question, 57 lieux ouverts dans 8 villes qui n’ont révélées qu’une petite partie de leurs secrets - Montpellier, Toulon, Marseille, Barcelone, Bordeaux, Arles, Nantes, Paris.</p>
  462. <p>Une nouvelle ville ça commence souvent un dimanche après midi. On débarque à Bordeaux par exemple et assez vite on se demande « Où tapoter ? ». Les premiers endroits sont classiques : la brasserie des Arts, le Starbuck au dernier étage de la Fnac. Le lendemain c’est la traditionnelle visite des coworkings.</p>
  463. <p>Journée abhorrée, je le fais juste pour vérifier une hypothèse : « Les coworkings d’aujourd’hui sont les cybercafés d’hier, des endroits qui ne répondent pas vraiment aux besoins qu’ils pointent ». Je n’aime pas le côté guilde, l’entre-soi, et la volonté en filigrane de reproduire l’ambiance des bureaux.</p>
  464. <p>À partir du 3ème jour ça devient vivifiant, les endroits insolites se laissent approcher : le garage moderne une ressourcerie et garage automobile coopératif, le CAPT musée d’Art contemporain, la société philomatique, l’Asile un ancien sex-shop reconverti en tiers-lieu qui abrite, pêle-mêle un tailleur de pierre, un graffeur de toile photoluminescente, un light-painter.</p>
  465. <p>En vrac, d’autres endroits approchés : une maison de retraite (très pratiques le dimanche), les tennis de la Jalade et ses cours en terre battue, le jardin des plantes de Toulouse, Anglas, un camping bio sur les bords de l’Hérault.</p>
  466. <p>Certains de ces lieux sont référencés sur le site d’Antoine Vernois : <a href="http://www.devfriendlyplaces.net/">devfriendlyplaces.net</a></p>
  467. <p>Dire non à quelque chose, c’est dire oui à plein d’autres choses. En quittant les bureaux, de nouveaux patterns sont apparus, avec Lilian Ricaud, un autre tapoteur itinérant, nous commençons à les référencer.</p>
  468. <p>Ouvrir un lieu :</p>
  469. <ol>
  470. <li>Est-ce que je peux visiter ?</li>
  471. <li>Est-ce que je peux tapoter ?</li>
  472. <li>Est-ce que je peux utiliser le wifi ?</li>
  473. <li>Est-ce que je peux revenir ?</li>
  474. <li>Et avec d’autres tapoteurs ?</li>
  475. </ol>
  476. <p>Différentes pratiques :</p>
  477. <ul>
  478. <li>Marche créative : Pour approfondir un sujet, à deux on démarre par une ballade exploratoire, et quand un endroit nous parle, on s’arrête pour converger.</li>
  479. <li>Formation itinérante : On utilise cette pratique pour casser le format des interventions. Ballade en ville ou expédition dans des grottes, ça change des formations statiques, volatiles et mentorées.</li>
  480. <li>Tiers-lieu éphémère : À la manière des ready-made, on déclare un lieu comme co-working. Cette année, nous avons organisé DevOpenSud sur ce modèle. On a loué deux gites pendant quatre jours en haute-ariège, pour travailler, échanger et jouer.</li>
  481. </ul>
  482. <p>En ce moment, dans scopyleft, nous sommes trois. Celui que vous ne voyez pas, est celui qui vous regarde de Sardaigne. Vincent n’est pas là car il pratique l’itinérance un peu partout dans le monde.</p>
  483. <p>La courbe du chômage augmente, inexorablement et malgré toutes les promesses vaines des politiques. Et c’est finalement une bonne chose, c’est même un objectif en soi si on y réfléchit bien. <strong>L’automatisation met fin au plein emploi et c’est une excellente nouvelle pour l’humanité : enfin le moment de s’absoudre des tâches répétitives, usantes, dégradantes.</strong> Elle a eu lieu dans l’agronomie puis l’industrie et elle se répand aujourd’hui dans les services. Elle est bénéfique sous réserve d’avoir une activité et un niveau de vie décents bien sûr. L’une des solutions pourrait être le <em>Revenu de Base</em> qui fournirait à tout un chacun une base de <a href="https://fr.wikipedia.org/wiki/Revenu_de_base">revenu universel et inconditionnel</a>. Cela ouvre la porte à une multitude de métiers créatifs et épanouissants qui créent de la valeur, mais différente de celle des robots. Il s’agit ici d’un choix politique dont tous les citoyens doivent prendre conscience pour consentir à une solution commune.</p>
  484. <p>La réduction du temps de travail passera probablement par un modèle proche de l’intermittence. Des créations ponctuelles, potentiellement périodiques, qui regroupent des compétences et des savoirs-faire pour accomplir une tâche. Le milieu des développeurs est peut-être le premier à adopter des pratiques qui permettent une telle organisation du travail. Est-il possible de passer à l’échelle ? Si nous devenons tous intermittents, à quelle stabilité se raccrocher pour faire des projets sur le long terme ? Ne plus « faire carrière » mais être en accord avec ses convictions du moment ?</p>
  485. <p>Notre modèle économique est totalement exploratoire. Nous essayons de combiner bien-être, projets utiles et survie économique. Le tout en ne renonçant pas à notre éthique. Cela passe par de la formation, de la stratégie, de l’expertise, de l’accompagnement, du développement spécifique, de la co-construction de produits, de la prise de risque. C’est instable par nature et c’est ce qui nous permet d’avoir une longueur d’avance. C’est aussi ce qui nous éloigne de toute forme d’automatisation possible. Les métiers du numérique sont en avance dans ce domaine, nous avons le pouvoir d’automatiser les tâches qui nous semblent répétitives et de les partager. C’est une chance car cela nous permet de montrer l’exemple à d’autres secteurs : l’<em>Open-Source</em> et les <em>biens communs</em> permettent de focaliser notre attention sur ce qui apporte réellement de la valeur tout en donnant un sens au surcoût ponctuel de la production de ces outils avec une maintenance et une gouvernance partagées.</p>
  486. <p>L’observatoire du travail nous indique que 30% des taches répétitives disparaissent tous les ans.</p>
  487. <p><em>La pratique du covoiturage est un bon laboratoire pour vérifier ce genre de marqueur.</em></p>
  488. <p>Pour qualifier les tâches qui ne sont pas répétitives, j’essaye de les passer au filtre d’un « et si… » - « Et si j’essayais avec un rond ? Ou en forçant le trait ? Et si j’enlevais les pieds ? ».</p>
  489. <p>C’est apparement un petit détail, mais c’est le détail qui tue. Lorsque les tâches à réaliser sont créatives, le Command &amp; Control est contre-productif.</p>
  490. <p><em>Dans un contexte de « et si… », le nouveau manager ne doit plus gêner ses équipes, il laisse son rôle de difficultateur et endosse celui de faciliteur.</em></p>
  491. <p>C’est intéressant d’observer les jeunes organisations utiliser naturellement des pratiques adaptées. Ça pourrait même devenir une activité : l’éthologie des nouveaux barbares.</p>
  492. <p>Certaines de ces jeunes organisations ont naturellement ré-interrogé le code du travail : plus d’horaires cadrées, plus de lien de subordination, pas de feuille de mission, des entretiens annuels hebdomadaires, les prises de décisions stratégiques confiées à l’équipe.</p>
  493. <p>On peut également s’amuser à écouter les signaux faibles. Déranger un « et si… » pendant qu’il expérimente, c’est risqué. Il ne retrouvera peut-être jamais la sonde qu’il vient de jeter dans l’espace. Combien de petit prince sont mort avec cette phrase fatale : « Est-ce que je peux t’interrompre » ?</p>
  494. <p>Beaucoup des pratiques et outils collaboratifs répondent aux questions posées par l’écoute de ces signaux faibles : Kanban, Slack, les Innovations Games, Trello, Running Lean, l’Impact Mapping, le Story Mapping.</p>
  495. <p>D’un autre côté, nous sommes dans une période grise ou les temps modernes de Chaplin se superposent à un nouveau paradigme encore inexploré. Cela produit parfois de jolis précipités.</p>
  496. <p>Si ça n’aggravait pas la souffrance au travail, ce serait assez amusant d’observer ces malformations collaboratives :</p>
  497. <ul>
  498. <li>Les grands groupes qui s’encombrent avec l’Agilité en détournant l’invitation pour se concentrer presque exclusivement sur la vélocité ou sur les indicateurs en perdant des heures à jouer au planning poker.</li>
  499. <li>Les incubateurs institutionnels qui maltraitent l’innovation en orientant les porteurs vers la pratique du pitch, les prédictions à trois ans et la séduction par hypnose des investisseurs.</li>
  500. </ul>
  501. <p>Ces couacs devraient peu à peu se ringardiser, les anciennes recettes fonctionnant un peu moins bien dans les contextes émergents : un nouveau genre de Darwinisme collaboratif.</p>
  502. <p>Un médiateur numérique expliquait, par exemple, que les fonctionnaires étaient passés maître dans l’art du contournement des process. Quand la hiérarchie est trop pesante, ils pratiquent la grève du zèle. Ils appliquent les process à la lettre pour bloquer leur administration.</p>
  503. <p>Cette nouvelle façon de travailler remet en cause l’éducation. Quels enseignements sont adaptés à une telle forme d’activité ? Sûrement pas l’actuel qui transforme nos enfants en petits robots assis à des bureaux pour effectuer de manière isolée des tâches répétitives. Qui encourage la compétition et l’accumulation de savoirs sans intérêt pour le monde de demain. Au contraire, <strong>il s’agit de laisser la pleine expression à leur créativité et à leur collaboration, d’expérimenter pour acquérir les concepts.</strong> Les écoles dites alternatives — bien qu’élitistes — font des propositions dans ce domaine. Nous n’avons pas besoin de réformes mais d’une refonte en profondeur.</p>
  504. <p>Je donne actuellement des <a href="/david/pro/enseignement/">cours à l’IUT d’Arles</a> et il est affligeant de constater la faible initiative qu’il y a chez les étudiants en 3e année de licence. Ils ont été formatés toute leur scolarité par cette relation élève-professeur, apprenant-sachant qui leur ôte toute curiosité. C’est terrible car seuls quelques uns arrivent à aller au-delà de ce rapport pour gagner en autonomie, exceptionnellement en groupe. J’ai essayé plusieurs pratiques issues de l’agilité pour essayer de les rendre acteurs de leur acquisition de savoirs. Les résultats obtenus au cours de cette première année n’ont pas été concluants mais cela m’a donné des pistes pour l’année prochaine et l’expérience se poursuit.</p>
  505. <p>Si l’on va plus loin, cela remet en cause le système pyramidal actuel pour aller vers un graphe de relations, à l’image du Web. L’entreprise passe d’un modèle hiérarchique et permanent à un regroupement égalitaire et ponctuel. L’administration passe d’un modèle centralisé et impersonnel à un modèle distribué et adapté. Les relations de pouvoir cèdent place aux affinités et motivations communes. Les hiérarchies ne sont aujourd’hui conservées que par crainte d’une trop importante partie de la population en inactivité.</p>
  506. <p>Les approches Agiles préconisent que l’équipe travaille dans le même lieu. C’est idéal, mais c’est une contrainte qui risque de ne pas rester réaliste. Explorer de nouvelles pratiques devrait nous aider à trouver des solutions pour mieux collaborer à distance.</p>
  507. <p>Les grands groupes patinent dans une mayonnaise Agile, ce n’est pas très grave, j’entends Darwin : « qu’ils disparaissent ! » Plus inquiétantes sont les jeunes sociétés boulimiques, elles ont bien compris l’intérêt des pratiques collaboratives, et facilitent la vie de leurs stagiaires auto-entrepreneurs.</p>
  508. <p>Prendre le temps de décoder les mutations du travail, devrait aider à sortir du mode Shadock, en vérifiant que nos pratiques ne sont pas issues de vilaines croyances réflexes.</p>
  509. <p>L’écosystème des communautés de pratiques collaboratives nous donnent des opportunités inédites pour amorcer et explorer nos idées sans faire appel aux acteurs de l’économie cynique et suicidaire. Mais là je sors du cadre…</p>
  510. <p>Qu’allons-nous faire de tout ce temps libre ? Cette question n’est pas anodine car l’inactivité fait peur. Or la fin du plein emploi ne signifie pas la fin de l’activité, bien au contraire. Demandez aux retraités autour de vous, l’activité dépend de votre vitalité et de vos aspirations. Ce temps permettra peut-être à chacun de réfléchir aux motivations qui l’anime, à sa place dans le monde et parmi ses semblables.</p>
  511. <p><strong>Ce qui nous distingue fondamentalement des robots est notre capacité à rêver.</strong> Même si certains sentiments peuvent être déterminés de manière algorithmique en se basant sur suffisamment de données, le rêve est ce qui nous permet de nous projeter et ce qui fait finalement de nous des humains. Le numérique nous offre la possibilité de partager nos rêves et de se fédérer facilement autour de projets innovants et de valeurs communes.</p>
  512. <p>Je rêve d’un monde qui nous permette de concrétiser nos rêves. D’un travail qui combine épanouissement, créativité et respect. <em>La transition est là, de quoi rêvez-vous pour résoudre vos problèmes ?</em></p>
  513. </article>
  514. <section>
  515. <h3>Discussion suite à l’article :</h3>
  516. <article id="comment-1" class="comment">
  517. <p>Je n’adhère pas à tout, en particulier à la prémisse de la perméabilité entre travail et temps perso (le premier paragraphe de ton article). J’ai toujours pris soin de bien séparer travail et vie privée, quand ce soit dans ma thèse et maintenant dans ma vie active. Ce n’est bien sûr pas imperméable (cas "le matin sous la douche", avec jeu de mot). Mais je fais cette séparation par presque objectivité : j’ai constaté que j’étais beaucoup plus efficace au boulot si j’avais du temps différent pour "m’aérer le cerveau" et me déconnecter des problèmes du travail. Pour mieux y revenir ensuite.</p>
  518. <p>Autre interrogation : et la stabilité ? Je suis probablement super conservateur, mais j’aime la stabilité. Un travail un peu routinier n’est pas forcément négatif car il me libère du temps et de la liberté pour de "l’à côté", du "autre chose" (associatif, réflexion, ...).</p>
  519. <p>Sur le revenu universel : je suis à fond pour. Mais je me suis toujours demandé comment on l’intégrerait à notre économie actuelle où la plupart des acteurs (loueurs immobilier par exemple) augmenterait juste leur prix pour se le mettre dans la poche. Il m’a toujours semblé y avoir une hypothèse irréalisable du style "à comportement constant des acteurs économiques".</p>
  520. <p><cite>David Mentre, le <a href="#comment-1">2015-06-26 à 18:51:42</a></cite></p>
  521. </article>
  522. <article id="comment-2" class="comment">
  523. <blockquote>
  524. <p>Je n’adhère pas à tout, en particulier à la prémisse de la perméabilité entre travail et temps perso (le premier paragraphe de ton article). J’ai toujours pris soin de bien séparer travail et vie privée, quand ce soit dans ma thèse et maintenant dans ma vie active. Ce n’est bien sûr pas imperméable (cas "le matin sous la douche", avec jeu de mot). Mais je fais cette séparation par presque objectivité : j’ai constaté que j’étais beaucoup plus efficace au boulot si j’avais du temps différent pour "m’aérer le cerveau" et me déconnecter des problèmes du travail. Pour mieux y revenir ensuite.</p>
  525. </blockquote>
  526. <p>En parlant de perméabilité, je n’exclue pas la temporalité du processus de réflexion. On a besoin d’intermittence dans nos activités pour prendre le temps de se ressourcer. Ce qui me semble illusoire par contre c’est de croire que l’on peut cloisonner cela sur les 35 heures d’un emploi, après chacun a sa propre expérience et ses propres mécanismes pour se protéger ou embrasser le changement.</p>
  527. <blockquote>
  528. <p>Autre interrogation : et la stabilité ? Je suis probablement super conservateur, mais j’aime la stabilité. Un travail un peu routinier n’est pas forcément négatif car il me libère du temps et de la liberté pour de "l’à côté", du "autre chose" (associatif, réflexion, …).</p>
  529. </blockquote>
  530. <p>Si un robot faisait ce travail routinier, est-ce que tu n’aurais pas davantage de temps pour cet « à côté » ? Probablement pas dans un premier temps car cela demande de mettre en place de nouvelles routines. Tout le monde a du temps, sa répartition est une question de priorités, l’automatisation permet de faire baisser certaines priorités.</p>
  531. <blockquote>
  532. <p>Sur le revenu universel : je suis à fond pour. Mais je me suis toujours demandé comment on l’intégrerait à notre économie actuelle où la plupart des acteurs (loueurs immobilier par exemple) augmenterait juste leur prix pour se le mettre dans la poche. Il m’a toujours semblé y avoir une hypothèse irréalisable du style "à comportement constant des acteurs économiques ».</p>
  533. </blockquote>
  534. <p>Pour moi le « toutes choses égales par ailleurs » ne tient pas pour une telle transition dans un monde complexe. Le revenu universel demande de repenser le travail mais aussi la propriété et la politique. Cela peut se faire progressivement ou brutalement, dans les deux cas cela demande une capacité d’adaptation importante.</p>
  535. <p>J’ai tendance à penser qu’un transition courte favorise le citoyen en le protégeant d’une lente <a href="http://www.monde-diplomatique.fr/2014/08/MOROZOV/50714">Uberisation de la société</a> et en le poussant à réfléchir à la notion de bien commun qui dépasse désormais les frontières d’un État.</p>
  536. <p><cite>David Larlet, le <a href="#comment-2">2015-07-01 à 08:52:04</a></cite></p>
  537. </article>
  538. <article id="comment-3" class="comment">
  539. <p>En transition vers quoi ? </p>
  540. <p>On se dirige dans nos métiers lentement vers une fin du salariat tel que nous le connaissions depuis quelques générations. Avant que le travail ne continue de disparaître pour de bon, certains prennent les devants et <a href="https://medium.com/backchannel/what-i-learned-when-i-gave-up-the-9-to-5-873a48d78a59">en profitent pendant qu’il en est encore temps</a>.</p>
  541. <p>La vie rêvée. Jusqu’à quand ?</p>
  542. <p>Des travailleurs indépendants nomades, des structures modulaires, j’ai l’impression que ça concerne pour le moment une minorité de personnes. L’apanache de quelques privilégiés qu’on érige en modèle. La flexibilité c’est bien aussi pour les entreprises. Tout le monde semble gagnant. C’est presque trop beau pour être vrai. Merci Internet.</p>
  543. <p>Les autres corps de métier suivront-ils ?</p>
  544. <p><cite>Frank Taillandier, le <a href="#comment-3">2015-07-12 à 14:23:41</a></cite></p>
  545. </article>
  546. </section>
  547. <figure class="image" property="schema:image">
  548. <img src="/static/david/blog/2015/travail-transition.jpg" alt="" />
  549. </figure>
  550. <nav id="jumpto">
  551. <p>
  552. <a rel=prev href="/david/blog/2015/formation-js-avance/">← Formation JS Avancé</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2015/coconstruction-ao/">Co-construction d’Appel d’Offre →</a>
  553. </p>
  554. </nav>
  555. <footer>
  556. <div>
  557. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  558. <p>
  559. Bonjour/Hi!
  560. 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>
  561. 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>).
  562. </p>
  563. <p>
  564. 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>.
  565. </p>
  566. <p>
  567. Les dernières publications hebdomadaires sont :
  568. </p>
  569. <ul class="with_columns">
  570. <li>
  571. <a href="/david/stream/2019/12/31/">Merci</a>
  572. </li>
  573. <li>
  574. <a href="/david/stream/2019/12/27/">Intemporels</a>
  575. </li>
  576. <li>
  577. <a href="/david/stream/2019/12/24/">Outils</a>
  578. </li>
  579. <li>
  580. <a href="/david/stream/2019/12/17/">Origines</a>
  581. </li>
  582. <li>
  583. <a href="/david/stream/2019/12/10/">Publier</a>
  584. </li>
  585. <li>
  586. <a href="/david/stream/2019/12/03/">En forêt</a>
  587. </li>
  588. <li>
  589. <a href="/david/stream/2019/11/26/">Ecocentric</a>
  590. </li>
  591. <li>
  592. <a href="/david/stream/2019/11/19/">Se livrer</a>
  593. </li>
  594. <li>
  595. <a href="/david/stream/2019/11/12/">Dépendances</a>
  596. </li>
  597. <li>
  598. <a href="/david/stream/2019/11/05/">Positif</a>
  599. </li>
  600. <li>
  601. <a href="/david/stream/2019/10/29/">Dettes</a>
  602. </li>
  603. <li>
  604. <a href="/david/stream/2019/10/22/">Privilèges</a>
  605. </li>
  606. <li>
  607. <a href="/david/stream/2019/10/15/">Discrétion</a>
  608. </li>
  609. <li>
  610. <a href="/david/stream/2019/10/08/">Désespérance</a>
  611. </li>
  612. <li>
  613. <a href="/david/stream/2019/10/01/">Présent</a>
  614. </li>
  615. <li>
  616. <a href="/david/stream/2019/09/24/">Manifester</a>
  617. </li>
  618. <li>
  619. <a href="/david/stream/2019/09/17/">Arpenter</a>
  620. </li>
  621. <li>
  622. <a href="/david/stream/2019/09/10/">Nostalgie</a>
  623. </li>
  624. <li>
  625. <a href="/david/stream/2019/09/03/">Déconstruire</a>
  626. </li>
  627. <li>
  628. <a href="/david/stream/2019/08/27/">Documenter</a>
  629. </li>
  630. <li>
  631. <a href="/david/stream/2019/08/20/">Frustration</a>
  632. </li>
  633. <li>
  634. <a href="/david/stream/2019/08/13/">Holisme</a>
  635. </li>
  636. <li>
  637. <a href="/david/stream/2019/08/06/">1%</a>
  638. </li>
  639. <li>
  640. <a href="/david/stream/2019/07/30/">Exemplarité</a>
  641. </li>
  642. <li>
  643. <a href="/david/stream/2019/07/23/">Timelines</a>
  644. </li>
  645. <li>
  646. <a href="/david/stream/2019/07/16/">Écoute</a>
  647. </li>
  648. <li>
  649. <a href="/david/stream/2019/07/02/">Anxiété</a>
  650. </li>
  651. <li>
  652. <a href="/david/stream/2019/06/21/">À lier</a>
  653. </li>
  654. <li>
  655. <a href="/david/stream/2019/06/14/">Pauvreté</a>
  656. </li>
  657. <li>
  658. <a href="/david/stream/2019/06/07/">Amateur</a>
  659. </li>
  660. <li>
  661. <a href="/david/stream/2019/05/31/">Pollution</a>
  662. </li>
  663. <li>
  664. <a href="/david/stream/2019/05/24/">Apaisement</a>
  665. </li>
  666. <li>
  667. <a href="/david/stream/2019/05/10/">Folie</a>
  668. </li>
  669. <li>
  670. <a href="/david/stream/2019/05/03/">Sympathie</a>
  671. </li>
  672. <li>
  673. <a href="/david/stream/2019/04/12/">Péremption</a>
  674. </li>
  675. <li>
  676. <a href="/david/stream/2019/04/05/">Définitions</a>
  677. </li>
  678. <li>
  679. <a href="/david/stream/2019/03/29/">Acceptation</a>
  680. </li>
  681. <li>
  682. <a href="/david/stream/2019/03/22/">Dissonance</a>
  683. </li>
  684. <li>
  685. <a href="/david/stream/2019/03/15/">Reconnaissance</a>
  686. </li>
  687. <li>
  688. <a href="/david/stream/2019/03/08/">Lecture</a>
  689. </li>
  690. <li>
  691. <a href="/david/stream/2019/03/01/">Journaux</a>
  692. </li>
  693. <li>
  694. <a href="/david/stream/2019/02/22/">Écriture</a>
  695. </li>
  696. <li>
  697. <a href="/david/stream/2019/02/15/">Kyriarchie</a>
  698. </li>
  699. <li>
  700. <a href="/david/stream/2019/02/08/">Mots-serrures</a>
  701. </li>
  702. <li>
  703. <a href="/david/stream/2019/02/01/">Sans voie</a>
  704. </li>
  705. <li>
  706. <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
  707. </li>
  708. <li>
  709. <a href="/david/stream/2019/01/18/">Agilité</a>
  710. </li>
  711. <li>
  712. <a href="/david/stream/2019/01/11/">Métaphores</a>
  713. </li>
  714. <li>
  715. <a href="/david/stream/2019/01/04/">Balbutiements</a>
  716. </li>
  717. </ul>
  718. <p>
  719. Voici quelques articles choisis :
  720. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  721. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  722. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  723. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  724. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  725. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  726. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  727. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  728. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  729. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  730. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  731. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  732. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  733. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  734. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  735. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  736. </p>
  737. <p>
  738. 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>.
  739. </p>
  740. <p>
  741. Je ne traque pas ta navigation mais mon
  742. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  743. conserve des logs d’accès.
  744. </p>
  745. </div>
  746. </footer>
  747. <script type="text/javascript">
  748. ;(_ => {
  749. const jumper = document.getElementById('jumper')
  750. jumper.addEventListener('click', e => {
  751. e.preventDefault()
  752. const anchor = e.target.getAttribute('href')
  753. const targetEl = document.getElementById(anchor.substring(1))
  754. targetEl.scrollIntoView({behavior: 'smooth'})
  755. })
  756. })()
  757. </script>
  758. <script>
  759. /* Service workers */
  760. if (navigator.serviceWorker) {
  761. window.addEventListener('load', function () {
  762. var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
  763. function sendLinks (selector) {
  764. var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
  765. return link.getAttribute('href')
  766. })
  767. links.push(location.pathname) // Put the current page in cache too.
  768. navigator.serviceWorker.controller.postMessage({ links: links })
  769. }
  770. navigator.serviceWorker.getRegistration()
  771. .then(function (registration) {
  772. if (!registration || !navigator.serviceWorker.controller) {
  773. return navigator.serviceWorker.register('/serviceworker.js')
  774. .then(navigator.serviceWorker.ready)
  775. .then(function () {
  776. console.log('[ServiceWorker] Ready to go!')
  777. })
  778. .catch(console.error.bind(console))
  779. } else {
  780. console.log('[ServiceWorker] Send links via registration')
  781. sendLinks(selector)
  782. }
  783. })
  784. navigator.serviceWorker.addEventListener('controllerchange', function () {
  785. console.log('[ServiceWorker] Send links via controller change')
  786. sendLinks(selector)
  787. })
  788. navigator.serviceWorker.addEventListener('message', function (event) {
  789. var link = document.querySelector('a[href="' + event.data.link + '"]')
  790. if (event.data.status && link) {
  791. link.style.backgroundColor = '#2d7474'
  792. link.style.color = '#f0f0ea'
  793. link.setAttribute('title', 'En cache pour consultation sans connexion')
  794. }
  795. })
  796. })
  797. } else {
  798. console.warn('[ServiceWorker] No cache for old browsers.')
  799. }
  800. </script>