davidbgk
/
larlet-fr-david
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
100 Commits
1 Branch
Struktur: 09ceb349c0
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „09ceb349c0“
${ noResults }
larlet-fr-david/david/blog/2014/dos-posture/index.html

index.html 27KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803 
  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>Dos et posture — 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.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2014/dos-posture/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Si vous avez mal entre les omoplates, vous souffrez peut-être du même problème." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Si vous avez mal entre les omoplates, vous souffrez peut-être du même problème." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Dos et posture" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2014/dos-posture/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2014/dos-posture.jpg" />

  41. 

  42. 

  43. <style>

  44. /* http://meyerweb.com/eric/tools/css/reset/ */

  45. html, body, div, span,

  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  47. a, abbr, address, big, cite, code,

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

  50. dl, dt, dd, ol, ul, li,

  51. fieldset, form, label, legend,

  52. table, caption, tbody, tfoot, thead, tr, th, td,

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

  55. menu, nav, output, ruby, section, summary,

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

  64. /* HTML5 display-role reset for older browsers */

  65. article, aside, details, figcaption, figure,

  66. footer, header, hgroup, menu, nav, section { display: block; }

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

  79. /* http://practicaltypography.com/equity.html */

  80. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  81. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  82. @font-face {

  83.   font-family: 'EquityTextB';

  84.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  85.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

  92.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  93.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

  100.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  101.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

  109.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  110.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

  117. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  118. body {

  119.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  120.   font-family: "EquityTextB", Palatino, serif;

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

  124.   -moz-osx-font-smoothing: grayscale;

  125.   -webkit-font-smoothing: subpixel-antialiased;

  126.   text-rendering: optimizeLegibility;

  127.   font-variant-ligatures: common-ligatures contextual;

  128.   font-feature-settings: "kern", "liga", "clig", "calt";

  129. }

  130. pre, code, kbd, samp, var, tt {

  131.   font-family: 'TriplicateT4c', monospace;

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

  149.     border-bottom: 1vh solid #2d7474;

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

  159.   border-top: 1vh solid #2d7474;

  160.   border-bottom: .2vh dotted #2d7474;

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

  181.       padding: 1rem 1.2rem .6rem 1.2rem;

  182.       border-radius: 0 0 6% 6%;

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

  190.   border-top: .2vh solid #2d7474;

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

  215.   text-decoration-skip-ink: auto;

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

  226.     border-top: .2vh dotted #2d7474;

  227.     margin: -6rem auto 1rem auto;

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

  245.   border-left: .5vw solid #2d7474;

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

  260.   border-top: .2vh solid #2d7474;

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

  271.     border: .5vw solid #323a45;

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

  283.   border-bottom: .2vh solid #07486c;

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

  290. /* https://fvsch.com/code/css-locks/ */

  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  292.   font-size: 1rem;

  293.   line-height: calc( 1.5em + 0.2 * 1rem );

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

  297.   line-height: calc( 1.2em + 0.2 * 1rem );

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

  301.   line-height: calc( 1.3em + 0.2 * 1rem );

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

  305.   line-height: calc( 1.4em + 0.2 * 1rem );

  306. }

  307. @media (min-width: 20em) {

  308.   /* The (100vw - 20rem) / (50 - 20) part

  309.      resolves to 0-1rem, depending on the

  310.      viewport width (between 20em and 50em). */

  311.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  312.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  313.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  314.     margin-left: 0;

  315.   }

  316.   h1 {

  317.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  318.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  319.   }

  320.   h2 {

  321.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  322.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  323.   }

  324.   h3 {

  325.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  326.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  327.   }

  328. }

  329. @media (min-width: 50em) {

  330.   /* The right part of the addition *must* be a

  331.      rem value. In this example we *could* change

  332.      the whole declaration to font-size:2.5rem,

  333.      but if our baseline value was not expressed

  334.      in rem we would have to use calc. */

  335.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  336.     font-size: calc( 1rem + .6 * 1rem );

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

  343.     font-size: calc( 1.9rem + 1.5 * 1rem );

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

  347.     font-size: calc( 1.5rem + 1.5 * 1rem );

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

  351.     font-size: calc( 1.35rem + 1.5 * 1rem );

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

  370.   body { font-size: 100%; }

  371.   a:after { content: " (" attr(href) ")"; }

  372.   a, a:link, a:visited, a:after {

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

  379.   abbr[title] { border-bottom: 0; }

  380.   abbr[title]:after { content: " (" attr(title) ")"; }

  381.   img { page-break-inside: avoid; }

  382.   @page { margin: 2cm .5cm; }

  383.   h1, h2, h3 { page-break-after: avoid; }

  384.   p3 { orphans: 3; widows: 3; }

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

  395. @media (min-width: 20em) {

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

  400. @media (min-width: 50em) {

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

  408. @media (min-width: 20em) {

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

  413. @media (min-width: 50em) {

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

  453.     -webkit-shape-outside: circle();

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

  458.     border-left: 1px solid #f1c40f;

  459.     border-top: 1px solid #f1c40f;

  460.     border-right: 5px solid #f1c40f;

  461.     border-bottom: 5px solid #f1c40f;

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

  466.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  467.   Dos et posture

  468.   <time>Publié le 28 novembre 2014</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Il existe un lien entre la typographie web et les maux de dos ; il suffit de composer votre texte en petits caractères et vous inviterez naturellement le lecteur à se pencher sur son écran pour les lire. Quoiqu’on en dise, le premier réflexe d’un lecteur ne sera pas de grossir le texte par des moyens techniques. Son premier réflexe sera d’ajuster sa posture, se rapprocher, sans même en avoir conscience.</p>

  473. <p>[…]</p>

  474. <p>Si vous pensez que cela est mineur, c’est que vous n’avez pas (encore ?) de <em>véritables</em> problèmes de dos, que vous récupérez rapidement des fatigues occasionnées par ces sollicitations répétées, ou que vous ne mesurez pas encore ce que ces micro-ajustements de posture peuvent occasionner insidieusement au terme de plusieurs heures, semaines, mois, années, de pratique (moi oui, c’est pour cela que je vous en parle).</p>

  475. <p><cite><em><a href="http://emmanuel.clement.free.fr/blog/index.php/post/2014/10/18/Typographie-et-mal-de-dos">Typographie et mal de dos</a></em></cite></p>

  476. </blockquote>

  477. <p>J’ai découvert récemment que j’avais tout comme Emmanuel des problèmes de dos occasionnés par la combinaison d’un déséquilibre du bassin et d’une mauvaise posture. Si le premier est quasi-inné vu qu’il proviendrait d’un siège décomplété, le second est dû aux 10 dernières années passées sur un ordinateur portable (dont les 5 dernières sur un 11 pouces…). Même en diversifiant les positions, le dos en pâtit. Si vous ajoutez à cela le port régulier d’un petit bonhomme de 10kg et l’apprentissage de nouveaux sports de manière intensive vous obtenez une colonne vertébrale qui fait pâlir mon ostéopathe.</p>

  478. <p><strong>Si vous avez mal entre les omoplates, vous souffrez peut-être du même problème.</strong> Depuis que j’y fais attention, je me rends compte qu’il y a un nombre assez important de geeks qui ont cette posture un peu voûtée. Quelques conseils pour retrouver une bonne posture :</p>

  479. <ul>

  480. <li>adaptez votre poste de travail, et pas uniquement physiquement avec un grand écran bien positionné : augmentez la taille de police de vos applications pour avoir l’impression d’être poussé par l’écran (je vous assure que c’est perturbant au début mais ça marche, j’en suis à 18/20px) ;</li>

  481. <li>ayez l’impression d’avoir une ventouse/un grappin/ce-qui-vous-fait-kiffer sur l’arrière du sommet du crâne qui vous tire en permanence pendant les 66 prochains jours (c’est le temps nécessaire pour prendre une habitude posturale) : au début doucement car vos muscles ne sont plus suffisamment développés pour avoir la bonne posture ;</li>

  482. <li>si vous avez la chance d’avoir <a href="/david/thoughts/#sleeping">un lit électrique</a>, adaptez-le à la position qui vous semble la moins inconfortable mais qui vous étire progressivement le dos quand même, ça serait dommage de rester voûté la nuit ;</li>

  483. <li>travaillez la souplesse de vos épaules et ne pratiquez pas d’activités qui désalignent votre colonne (mauvaise position en natation par exemple).</li>

  484. </ul>

  485. <p><em>Au passage si vous n’utilisez pas <a href="https://justgetflux.com/">f.lux</a> ou équivalent c’est bien dommage pour vos yeux. De même si vous ne pouvez pas régler la luminosité de votre écran rapidement et régulièrement.</em></p>

  486. <p>Pour ce qui est du bassin, il s’agit avant tout de prendre de nouvelles habitudes : croisement de pieds, de jambes, positionnement sur une seule jambe à l’attente, couché sur un bras, etc doivent maintenant s’effectuer sur le côté qui vous semble le moins naturel. Bien s’étirer pour ouvrir le bassin et pratiquer le <a href="http://bitehype.com/screw-your-standing-desk-how-about-squatting/">squatting</a> est un plus même si vous n’êtes pas assez souple pour tenir tout seul.</p>

  487. <p>Dernier conseil si vous devez porter une charge lourde sur le côté : <em>gainez</em>.</p>

  488. </article>

  489. 

  490. 

  491.   <figure class="image" property="schema:image">

  492.     <img src="/static/david/blog/2014/dos-posture.jpg" alt="" />

  493.   </figure>

  494. 

  495. 

  496. 

  497. <nav id="jumpto">

  498.   <p>

  499.     <a rel=prev href="/david/blog/2014/cours-iut-responsive-documentation/">← Cours IUT : Responsive et Documentation</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2014/cours-iut-javascript-jquery/">Cours IUT : Javascript et jQuery →</a>

  500.   </p>

  501. </nav>

  502. 

  503. <footer>

  504.   <div>

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

  506.     <p>

  507.       Bonjour/Hi!

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

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

  510.     </p>

  511.     <p>

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

  513.     </p>

  514. 

  515.       <p>

  516.         Les dernières publications hebdomadaires sont :

  517.       </p>

  518.       <ul class="with_columns">

  519. 

  520.           <li>

  521.             <a href="/david/stream/2019/12/31/">Merci</a>

  522.           </li>

  523. 

  524.           <li>

  525.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  526.           </li>

  527. 

  528.           <li>

  529.             <a href="/david/stream/2019/12/24/">Outils</a>

  530.           </li>

  531. 

  532.           <li>

  533.             <a href="/david/stream/2019/12/17/">Origines</a>

  534.           </li>

  535. 

  536.           <li>

  537.             <a href="/david/stream/2019/12/10/">Publier</a>

  538.           </li>

  539. 

  540.           <li>

  541.             <a href="/david/stream/2019/12/03/">En forêt</a>

  542.           </li>

  543. 

  544.           <li>

  545.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  546.           </li>

  547. 

  548.           <li>

  549.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  550.           </li>

  551. 

  552.           <li>

  553.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  554.           </li>

  555. 

  556.           <li>

  557.             <a href="/david/stream/2019/11/05/">Positif</a>

  558.           </li>

  559. 

  560.           <li>

  561.             <a href="/david/stream/2019/10/29/">Dettes</a>

  562.           </li>

  563. 

  564.           <li>

  565.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  566.           </li>

  567. 

  568.           <li>

  569.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  570.           </li>

  571. 

  572.           <li>

  573.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  574.           </li>

  575. 

  576.           <li>

  577.             <a href="/david/stream/2019/10/01/">Présent</a>

  578.           </li>

  579. 

  580.           <li>

  581.             <a href="/david/stream/2019/09/24/">Manifester</a>

  582.           </li>

  583. 

  584.           <li>

  585.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  586.           </li>

  587. 

  588.           <li>

  589.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  590.           </li>

  591. 

  592.           <li>

  593.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  594.           </li>

  595. 

  596.           <li>

  597.             <a href="/david/stream/2019/08/27/">Documenter</a>

  598.           </li>

  599. 

  600.           <li>

  601.             <a href="/david/stream/2019/08/20/">Frustration</a>

  602.           </li>

  603. 

  604.           <li>

  605.             <a href="/david/stream/2019/08/13/">Holisme</a>

  606.           </li>

  607. 

  608.           <li>

  609.             <a href="/david/stream/2019/08/06/">1%</a>

  610.           </li>

  611. 

  612.           <li>

  613.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  614.           </li>

  615. 

  616.           <li>

  617.             <a href="/david/stream/2019/07/23/">Timelines</a>

  618.           </li>

  619. 

  620.           <li>

  621.             <a href="/david/stream/2019/07/16/">Écoute</a>

  622.           </li>

  623. 

  624.           <li>

  625.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  626.           </li>

  627. 

  628.           <li>

  629.             <a href="/david/stream/2019/06/21/">À lier</a>

  630.           </li>

  631. 

  632.           <li>

  633.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  634.           </li>

  635. 

  636.           <li>

  637.             <a href="/david/stream/2019/06/07/">Amateur</a>

  638.           </li>

  639. 

  640.           <li>

  641.             <a href="/david/stream/2019/05/31/">Pollution</a>

  642.           </li>

  643. 

  644.           <li>

  645.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  646.           </li>

  647. 

  648.           <li>

  649.             <a href="/david/stream/2019/05/10/">Folie</a>

  650.           </li>

  651. 

  652.           <li>

  653.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  654.           </li>

  655. 

  656.           <li>

  657.             <a href="/david/stream/2019/04/12/">Péremption</a>

  658.           </li>

  659. 

  660.           <li>

  661.             <a href="/david/stream/2019/04/05/">Définitions</a>

  662.           </li>

  663. 

  664.           <li>

  665.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  666.           </li>

  667. 

  668.           <li>

  669.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  670.           </li>

  671. 

  672.           <li>

  673.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  674.           </li>

  675. 

  676.           <li>

  677.             <a href="/david/stream/2019/03/08/">Lecture</a>

  678.           </li>

  679. 

  680.           <li>

  681.             <a href="/david/stream/2019/03/01/">Journaux</a>

  682.           </li>

  683. 

  684.           <li>

  685.             <a href="/david/stream/2019/02/22/">Écriture</a>

  686.           </li>

  687. 

  688.           <li>

  689.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  690.           </li>

  691. 

  692.           <li>

  693.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  694.           </li>

  695. 

  696.           <li>

  697.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  698.           </li>

  699. 

  700.           <li>

  701.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  702.           </li>

  703. 

  704.           <li>

  705.             <a href="/david/stream/2019/01/18/">Agilité</a>

  706.           </li>

  707. 

  708.           <li>

  709.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  710.           </li>

  711. 

  712.           <li>

  713.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  714.           </li>

  715. 

  716.       </ul>

  717. 

  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. 

  759.   <script>

  760.   /* Service workers */

  761.   if (navigator.serviceWorker) {

  762.     window.addEventListener('load', function () {

  763.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  764.       function sendLinks (selector) {

  765.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  766.           return link.getAttribute('href')

  767.         })

  768.         links.push(location.pathname)  // Put the current page in cache too.

  769.         navigator.serviceWorker.controller.postMessage({ links: links })

  770.       }

  771.       navigator.serviceWorker.getRegistration()

  772.         .then(function (registration) {

  773.           if (!registration || !navigator.serviceWorker.controller) {

  774.             return navigator.serviceWorker.register('/serviceworker.js')

  775.               .then(navigator.serviceWorker.ready)

  776.               .then(function () {

  777.                 console.log('[ServiceWorker] Ready to go!')

  778.               })

  779.               .catch(console.error.bind(console))

  780.           } else {

  781.             console.log('[ServiceWorker] Send links via registration')

  782.             sendLinks(selector)

  783.           }

  784.         })

  785.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  786.         console.log('[ServiceWorker] Send links via controller change')

  787.         sendLinks(selector)

  788.       })

  789.       navigator.serviceWorker.addEventListener('message', function (event) {

  790.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  791.         if (event.data.status && link) {

  792.           link.style.backgroundColor = '#2d7474'

  793.           link.style.color = '#f0f0ea'

  794. 

  795.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  796. 

  797.         }

  798.       })

  799.     })

  800.   } else {

  801.     console.warn('[ServiceWorker] No cache for old browsers.')

  802.   }

  803. </script>