A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 30KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742
  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>Introspection professionnelle : valeurs et raison d’être (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://next.marienfressinaud.fr/introspection-professionnelle-valeurs-et-raison-detre.html">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Introspection professionnelle : valeurs et raison d’être (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://next.marienfressinaud.fr/introspection-professionnelle-valeurs-et-raison-detre.html">Source originale du contenu</a></h3>
  445. <p>Comme je le disais dans <a href="http://next.marienfressinaud.fr/boop-une-introduction.html">un précédent article</a>, la
  446. fin de cette année 2018 est pour moi l’occasion de reposer à plat mes
  447. motivations professionnelles. Si j’ai décidé de quitter mon emploi chez
  448. <a href="http://sogilis.com">Sogilis</a> afin de tracer ma propre route, c’est pour
  449. différentes raisons parmi lesquelles :</p>
  450. <ul>
  451. <li>le sens que je ne trouvais pas à mon travail ;</li>
  452. <li>des problèmes sociétaux qui me parlent de plus en plus (ex. urgence
  453. climatique, fractures sociale et démocratique) ;</li>
  454. <li>mon implication dans <a href="https://framasoft.org">Framasoft</a> qui m’a fait réaliser
  455. la dimension politique qui sous-tend le développement logiciel ;</li>
  456. <li><a href="http://www.mcpaccard.com/">des</a> <a href="http://www.maiwann.net/">rencontres</a>
  457. <a href="https://estcequecestdutravail.xyz/">multiples</a> qui m’ont aidé à envisager
  458. mon travail sous un autre angle ;</li>
  459. <li>de nombreuses discussions avec des amis proches qui n’ont fait que renforcer
  460. mes choix.</li>
  461. </ul>
  462. <p>J’envisage aujourd’hui le travail que je peux fournir uniquement à travers un
  463. prisme politique (au sens d’engagement). Les logiciels que je conçois ont un
  464. impact sur les personnes qui les utilisent, <strong>il est important pour moi qu’ils
  465. fonctionnent à leur service et non pas contre eux</strong>.</p>
  466. <p>C’est ce genre de réflexions que j’aimerais arriver à faire transparaître sur
  467. mon site. Le but est de le transformer en « vitrine » professionnelle en
  468. mettant en avant mes valeurs, mon mode de fonctionnement, mes compétences, etc.
  469. Mais avant d’entamer cette refonte, je souhaite passer par une phase de
  470. réflexions plus approfondie.</p>
  471. <h2>Le design de soi, ou l’introspection professionnelle</h2>
  472. <p>J’ai découvert le concept de « <strong>design de soi</strong> » il y a un peu plus d’un an
  473. grâce à <a href="http://www.mcpaccard.com/">Marie-Cécile Paccard</a> lorsque je l’ai
  474. contactée par rapport à <a href="https://lessy.io">Lessy</a>. Le but est d’effectuer un
  475. travail de recherche afin de mieux connaître ses aspirations et de mieux
  476. communiquer en conséquence. Vous pouvez en apprendre plus dans <a href="https://speakerdeck.com/mcpaccard/se-reinventer-et-etre-soi-a-lere-du-numerique">sa présentation</a>
  477. ou via <a href="https://marieguillaumet.com/design-de-soi-paris-web-2015/">la présentation de Marie Guillaumet</a>
  478. qui en a parlé lors de l’évènement <a href="https://www.paris-web.fr/">Paris Web</a> 2015.</p>
  479. <p>J’étais personnellement un peu dubitatif sur ce que pouvait m’apporter
  480. concrètement une telle démarche. Je me suis toutefois prêté au jeu pour Lessy
  481. et le fait de voir émerger le contenu aussi naturellement pour la page
  482. d’accueil et les éléments destinés à la communauté m’a encouragé à retenter
  483. l’expérience sur moi-même (en le documentant, cette fois-ci !)</p>
  484. <p>Sur le sens toutefois, je suis peu à l’aise avec l’expression « design de
  485. soi ». D’une part, le mot « design » continue de véhiculer une confusion avec
  486. le graphisme ; d’autre part, et de façon plus ennuyante, même en prenant le
  487. mot dans son sens de « conception », ce n’est pas tellement l’objet de la
  488. démarche. Cela pourrait en effet laisser penser que le « design de soi » vise à
  489. créer (concevoir) une nouvelle personne qui ne correspond pas forcément à
  490. l’ancienne. Or, je crois que le but est de tirer des traits qui nous
  491. correspondent, à la manière d’un caricaturiste qui cherche à représenter une
  492. personne à travers quelques caractéristiques qui ressortent. Dans la suite de
  493. ma série d’articles, je troquerai donc l’expression par celle d’introspection
  494. professionnelle. Dans mon cas, le but est bien d’<strong>identifier les traits de ma
  495. personnalité</strong> sur lesquels je souhaite communiquer dans un cadre
  496. professionnel.</p>
  497. <p>Pour cela, je vais procéder en plusieurs étapes qui devraient me permettre de
  498. créer le contenu du site :</p>
  499. <ol>
  500. <li>définition de <strong>mes valeurs</strong> ;</li>
  501. <li>définition de <strong>ma raison d’être</strong> ;</li>
  502. <li>définition de <strong>mes compétences</strong> ;</li>
  503. <li>établissement d’<strong>un objectif</strong> personnel (c’est-à-dire comment j’honore ma
  504. raison d’être) ;</li>
  505. <li>définition de mes moyens de <strong>communication</strong> ;</li>
  506. <li>conception de <strong>l’architecture du site</strong>.</li>
  507. </ol>
  508. <p>Le dernier point me permettra d’organiser les différents éléments qui auront
  509. émergé lors des phases précédentes et potentiellement d’en faire émerger de
  510. nouveaux.</p>
  511. <p>Les deux premiers points sont traités dans la suite de cet article.</p>
  512. <h2>Des valeurs pour guider mes choix</h2>
  513. <p>J’ai en vérité entamé la première phase, celle de la définition de mes valeurs,
  514. il y a plusieurs mois. Je souhaitais voir comment la perception que j’avais de
  515. moi-même évoluait dans le temps, identifier les éléments qui revenaient,
  516. comprendre pourquoi je n’étais pas à l’aise avec d’autres, etc. À titre
  517. d’exemple, je n’ai pas conservé l’« éthique » dans mes valeurs car ça ne
  518. signifiait pas grand chose pour moi : tout le monde possède une éthique sans
  519. pour autant placer la même chose derrière. Revendiquer avoir une éthique est
  520. nécessairement perçu à travers un prisme différent selon les personnes avec qui
  521. j’intéragis.</p>
  522. <p>À l’éthique, j’ai préféré le terme <strong>d’intégrité</strong>. Affirmer son intégrité
  523. permet de garder un cap et de faciliter la définition de ses priorités. Par
  524. exemple, j’ai comme conviction que les licences libres ainsi que le respect de
  525. la vie privée sont des conditions <em>sine qua non</em> pour qu’un logiciel soit
  526. réellement au service de ses utilisateurs et utilisatrices (c’est-à-dire qu’il
  527. fasse bien ce qu’on lui demande, sans malveillance). Vous ne me verrez donc pas
  528. demain accepter une mission qui ne respecte pas ces conditions parce qu’elle
  529. est mieux payée qu’une autre. Cette notion d’intégrité sera par la suite
  530. <strong>complétée par un manifeste</strong> qui détaillera mieux mes engagements.</p>
  531. <p><strong>Le respect</strong> dans mes échanges ou envers les utilisatrices et utilisateurs
  532. d’un logiciel m’apparaît ensuite nécessaire à toute relation. Rester à
  533. l’écoute, savoir exprimer ses sentiments, considérer la personne en face sur un
  534. pied d’égalité ; je n’imagine pas d’autre manière de fonctionner pour tirer le
  535. meilleur de mes échanges. D’un point de vue technique cela signifie aussi, pour
  536. moi, considérer les techniques d’expérience utilisateur et d’accessibilité
  537. comme intrinsèques à un projet, pas seulement comme des ajouts selon un budget
  538. sur lequel je n’ai pas la main. À l’inverse, d’un point de vue global, cela
  539. signifie prendre aussi en compte les externalités de ce que je développe : hors
  540. de question de développer un outil qui nuirait encore un peu plus à
  541. l’environnement par exemple.</p>
  542. <p>Enfin, <strong>la transmission</strong> doit faire partie de chaque processus de création.
  543. Après avoir lu un peu autour du <a href="https://ressources.osons.cc/?PetitPrecisDeCompostabiliteDesprojets">concept de
  544. compostabilité</a>
  545. en septembre (via la super présentation de <a href="https://marges.clairezuliani.com/good_job/2018/05/27/melange-cultures-professionnelles.html">Claire Zuliani à Sud
  546. Web</a>),
  547. j’ai mieux réalisé la finitude de notre présence au sein d’un groupe.
  548. Transmettre mes connaissances et mes compétences m’est alors apparu comme bien
  549. plus essentiel pour ne plus être un rouage « indispensable » sans lequel rien
  550. ne fonctionne. Mécaniquement, j’ai le sentiment que cela pousse aussi à plus
  551. d’humilité. Nous devenons uniques non pas par nos compétences techniques mais
  552. par notre vécu.</p>
  553. <p>En me limitant à trois valeurs, je me suis forcé à creuser toujours plus ce qui
  554. compte vraiment pour moi. J’ai écarté plusieurs points qui me tenaient à cœur
  555. mais que je n’arrivais pas à définir correctement (notamment le principe de
  556. remise en question). Ces valeurs sont évidemment fluctuantes : il s’agit d’un
  557. travail sur moi-même à un instant T et je m’attends à redéfinir leur contour
  558. dans le futur. En revanche, <strong>je ne pense pas m’en départir à moins de changer
  559. fondamentalement la personne que je suis</strong>.</p>
  560. <h2>Une raison d’être pour comprendre où je vais</h2>
  561. <p>Se trouver une raison d’être n’est pas la chose la plus évidente à faire. C’est
  562. pourtant une question qui me taraude depuis un moment car elle questionne sur
  563. le sens que l’on souhaite donner à sa vie. Lorsque j’ai pris une année
  564. sabbatique en 2015, c’est quelque chose qui m’a travaillé sans que je n’y
  565. trouve une réponse qui me convenait.</p>
  566. <p>Ces derniers mois ont toutefois été plus efficaces, au point que j’arrive à la
  567. résumer en une courte phrase : <strong>concevoir les outils dont la société aura
  568. besoin demain</strong>. Pour comprendre cette raison d’être, il me paraît important de
  569. bien définir ce dont je parle.</p>
  570. <p>Tout d’abord, lorsque je parle de « concevoir [des] outils », je fais le choix
  571. conscient de ne pas utiliser le terme de « développer ». Pour moi, <strong>un
  572. logiciel n’est pas une fin en soi</strong>. Il y a avant tout une phase d’acquisition
  573. des besoins et de réflexion qui peut notamment mener à la conclusion qu’un
  574. outil informatique ne serait pas une bonne solution. Cela implique aussi que je
  575. dois étendre mes compétences au delà de la technique informatique, en acquérant
  576. notamment plus de compétences liées à l’expérience utilisateur. Je dispose pour
  577. cela de précieuses ressources, notamment deux articles de Raphaël
  578. Yharrassarry : « <a href="https://blocnotes.iergo.fr/articles/competences-ux-et-modele-en-t/">Compétences <abbr>UX</abbr> et modèle en T</a> »
  579. et « <a href="https://blocnotes.iergo.fr/articles/se-former-en-ux-design/">Se former en <abbr>UX</abbr> Design ?</a> ».</p>
  580. <p>Ensuite, lorsque je parle de « demain », j’y cache derrière la notion de
  581. « <a href="https://fr.wikipedia.org/wiki/Collapsologie">collapsologie</a> » (ou
  582. d’effondrement). Je ne me suis pas encore énormément penché sur le sujet, mais
  583. il revient régulièrement dans les discussions qui m’entourent. Je ressens dans
  584. mes échanges <strong>une notion d’urgence et d’inévitabilité d’une société en
  585. mutation profonde</strong>. La question n’est pas forcément de savoir « quand ?»,
  586. encore moins « si ? », mais plutôt « comment ?». À quoi ressembleront nos
  587. sociétés dites « modernes » dans un monde où les catastrophes écologiques
  588. prédominent, où la faune et la flore fondent comme neige au soleil et où les
  589. mouvements migratoires s’accélèrent ? Et si l’on se prenait en main pour
  590. imaginer nous-mêmes ce monde de demain et l’accompagner en douceur ? Il existe
  591. trois axes que j’ai identifié et dans lesquels j’aimerais m’investir :</p>
  592. <ol>
  593. <li>accompagner l’inévitable désastre écologique ;</li>
  594. <li>aider les populations en lutte pour affirmer leur légitimité aux yeux du
  595. reste de la société ;</li>
  596. <li>repenser nos espaces démocratiques et l’expression du pouvoir.</li>
  597. </ol>
  598. <p>Vaste programme que celui-là, j’ignore encore quelles formes peuvent prendre
  599. mes actions dans chacun de ces domaines mais je ne me fais pas de soucis pour
  600. savoir identifier les missions qui entreront en résonance avec ces sujets.</p>
  601. <p>Enfin, le tout fait référence à ce qui se produit dans la sphère technologique
  602. depuis des années : les outils qui sont conçus n’émanent pas de réels besoins
  603. mais le deviennent une fois bien installés. <span lang="en">Apple</span> est
  604. notamment championne dans ce domaine, imposant avec brio et comme évidentes des
  605. technologies comme le <span lang="en">smartphone</span> ou la tablette. On peut
  606. toutefois questionner leurs répercussions sur notre société comme une
  607. accoutumance à l’instantanéité ou une addiction aux écrans difficiles à jauger.
  608. C’est le fameux « <a href="https://fr.wikipedia.org/wiki/Temps_de_cerveau_humain_disponible">temps de cerveau humain disponible</a> »
  609. qui est attaqué ici. En vérité, <strong>le futur de nos sociétés est aujourd’hui
  610. dessiné par des sociétés commerciales</strong> qui souhaitent avant tout vendre leurs
  611. produits plutôt que de réfléchir au bien commun ; cela me gêne tout
  612. particulièrement.</p>
  613. <h2>Une conclusion partielle pour préparer une suite plus concrète</h2>
  614. <p>Ce premier article était un peu abstrait : je n’ai abordé ici que des sujets
  615. qui me serviront de base pour construire le futur contenu du site. Cet article
  616. m’est apparu un peu pompeux à plusieurs reprises lors de sa rédaction, mais je
  617. crois que le résultat est avant tout un travail honnête sur mes aspirations et
  618. me permettra réellement d’affirmer ma manière de travailler avec d’autres
  619. personnes.</p>
  620. <p>Je crois ces engagements indispensables dans nos sociétés toujours plus
  621. numériques, où nous perdons peu à peu la main sur nos données et leur
  622. traitement. Je suis partisan de réinsuffler plus d’échanges humains et une
  623. vision positive dans nos vies numériques, et donc nos vies tout court.</p>
  624. <p>Cet article a une saveure particulière pour moi car j’ai réussi à y condenser
  625. toutes les réflexions que je mène depuis plusieurs mois ; réflexions notamment
  626. alimentées par mes échanges au sein de <a href="https://framasoft.org/">Framasoft</a> qui
  627. est, pour une bonne partie, à l’origine des graines qui commencent à germer sur
  628. ce site.</p>
  629. <p>Le prochain article devrait aborder des sujets un peu plus concrets et mener
  630. notamment à la rédaction de contenu qui apparaîtra par la suite sur le site.</p>
  631. </article>
  632. </section>
  633. <nav id="jumpto">
  634. <p>
  635. <a href="/david/blog/">Accueil du blog</a> |
  636. <a href="http://next.marienfressinaud.fr/introspection-professionnelle-valeurs-et-raison-detre.html">Source originale</a> |
  637. <a href="/david/stream/2019/">Accueil du flux</a>
  638. </p>
  639. </nav>
  640. <footer>
  641. <div>
  642. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  643. <p>
  644. Bonjour/Hi!
  645. 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>
  646. 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>).
  647. </p>
  648. <p>
  649. 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>.
  650. </p>
  651. <p>
  652. Voici quelques articles choisis :
  653. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  654. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  655. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  656. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  657. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  658. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  659. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  660. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  661. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  662. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  663. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  664. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  665. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  666. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  667. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  668. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  669. </p>
  670. <p>
  671. 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>.
  672. </p>
  673. <p>
  674. Je ne traque pas ta navigation mais mon
  675. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  676. conserve des logs d’accès.
  677. </p>
  678. </div>
  679. </footer>
  680. <script type="text/javascript">
  681. ;(_ => {
  682. const jumper = document.getElementById('jumper')
  683. jumper.addEventListener('click', e => {
  684. e.preventDefault()
  685. const anchor = e.target.getAttribute('href')
  686. const targetEl = document.getElementById(anchor.substring(1))
  687. targetEl.scrollIntoView({behavior: 'smooth'})
  688. })
  689. })()
  690. </script>