davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
210 Révisions
1 Branche
Aborescence: d902697713
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'd902697713'
${ noResults }
larlet-fr-david-cache/cache/27ff70a282f3ea1b118a688daae.../index.html

index.html 46KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606 
  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>Les gamins ne savent pas utiliser les ordinateurs… Voici pourquoi ça devrait vous inquiéter. (archive) — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

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

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

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

  31.   <link rel="canonical" href="http://lunatopia.fr/blog/les-gamins-ne-savent-pas-utiliser-les-ordinateurs">

  32. 

  33. <style>

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

  35. html, body, div, span,

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

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

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

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

  41. fieldset, form, label, legend,

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

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

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

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

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

  55. article, aside, details, figcaption, figure,

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

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

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

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

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

  72. @font-face {

  73.   font-family: 'EquityTextB';

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

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

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

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

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

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

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

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

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

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

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

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

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

  108. body {

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

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

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

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

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

  116.   text-rendering: optimizeLegibility;

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

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

  119. }

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

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

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

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

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

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

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

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

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

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

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

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

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

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

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

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

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

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

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

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

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

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

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

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

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

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

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

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

  282.   font-size: 1rem;

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

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

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

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

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

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

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

  296. }

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

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

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

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

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

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

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

  304.     margin-left: 0;

  305.   }

  306.   h1 {

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

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

  309.   }

  310.   h2 {

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

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

  313.   }

  314.   h3 {

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

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

  317.   }

  318. }

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

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

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

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

  323.      but if our baseline value was not expressed

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

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

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

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

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

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

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

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

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

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

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

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

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

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

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

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

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

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

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

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

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

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

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

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

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

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

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

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

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

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

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

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

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

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

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

  452.   }

  453. </style>

  454. 

  455. <h1>

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

  457.   Les gamins ne savent pas utiliser les ordinateurs… Voici pourquoi ça devrait vous inquiéter. (archive)

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

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://lunatopia.fr/blog/les-gamins-ne-savent-pas-utiliser-les-ordinateurs">Source originale du contenu</a></h3>

  463.     <div>

  464. <p class="disclaimer">J’ai découvert hier soir (merci <a href="https://twitter.com/garfunk21">Garfunk</a>) un article passionnant, <a href="http://coding2learn.org/blog/2013/07/29/kids-cant-use-computers/" hreflang="en">Kids Can’t Use Computers… And This Is Why It Should Worry You</a>, que j’ai envie de partager autour de moi. Le soucis, c’est qu’une partie de mon entourage ne comprend pas assez bien l’anglais pour pouvoir en profiter. J’ai donc décidé, avec l’accord de l’auteur, de le traduire pour eux. Je ne suis pas une traductrice professionnelle, loin s’en faut, mais j’ai essayé de respecter au mieux le propos de Marc Scott. N’hésitez pas à <a href="mailto:luna@lunatopia.fr">me le signaler</a> si j’ai fait une faute, une erreur de traduction ou autre <img src="http://lunatopia.fr/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/></p>

  465. <p class="disclaimer mgt30">Un grand merci à tous ceux qui m’ont répondu pour mon problème de traduction, le sens de « General purpose computer » est bien un ordinateur grand public, généraliste, par opposition aux ordinateurs spécialisés.</p>

  466. <p><em><strong><abbr title="Too Long ; Didn't Read">TL;DR?</abbr></strong> Et pourquoi tu n’irais pas plutôt regarder une autre vidéo de 5 secondes d’un chat qui se coince la tête dans un rouleau de PQ ou la description en 140 caractères du plat qu’un de tes amis vient de fourrer dans sa bouche ? Ce billet n’est clairement pas pour toi.</em></p>

  467. <p>Le téléphone sonne dans mon bureau. C’est une des réceptionnistes de l’école qui m’explique qu’il y a un visiteur en bas qui a besoin d’accéder au réseau WiFi de l’école. iPad en main, je me rends à l’accueil où je trouve une femme d’une vingtaine d’années, assise avec son MacBook sur les genoux.</p>

  468. <p>Je souris et me présente en m’asseyant à côté d’elle. Elle me tend son MacBook silencieusement et son regard veut tout dire. <em>Répare mon ordi, le geek, et dépêche toi</em>. On me prend assez souvent pour un technicien pour que je reconnaisse l’expression.</p>

  469. <p>Je lui dis : « Je dois faire ça vite, je donne un cours dans 5 minutes. »<br/>

  470. « Vous enseignez ? »<br/>

  471. « C’est mon boulot, oui, je m’occupe du réseau de l’école en plus. »</p>

  472. <p>Elle me réévalue instantanément. Au lieu d’être un geek-puceau-tapoteur-de-clavier-associal anonyme, elle me voit maintenant comme un collègue. Pour les gens comme elle, les techniciens sont un mal nécessaire. Elle se contenterait bien de les ignorer et de se foutre d’eux dans leur dos, mais elle sait que quand elle aura un problème avec sa présentation PowerPoint, elle aura besoin d’un technicien, donc elle maintient le niveau de politesse minimal, quand bien même elle considère qu’ils sont <em>trop geek</em> pour interagir avec.</p>

  473. <p>Je regarde le MacBook. À l’époque, je n’avais aucune expérience avec OSX. Comme Jobs n’est pas complètement stupide, le symbole WiFi habituel est bien visible dans le coin supérieur droit de l’écran. Ça m’a pris quelques secondes pour connecter l’ordinateur au réseau.</p>

  474. <p>Je rends le MacBook à la femme qui lance Safari. « l’Internet ne marche pas. » dit-elle dédaigneusement.</p>

  475. <p>J’ai entendu cette phrase tellement souvent, par des étudiants ou des profs, que j’ai une réaction toute prête. Normalement, je sors mon téléphone, fais semblant de taper quelques chiffres, et, en le portant à mon oreille, je dis « <em>Oui, passez moi le bureau du président des États-Unis… NON NE ME METTEZ PAS EN ATTENTE, c’est une urgence… Allô, monsieur le président ? J’ai de bien mauvaises nouvelles, j’en ai peur. On vient de m’apprendre que l’Internet ne marche pas.</em> »</p>

  476. <p>Je ne pense pas que la jeune femme apprécie le sarcasme, donc j’attrape le MacBook pour paramétrer le proxy. Je n’ai aucune idée de comment ça se règle sous OSX. Le proxy est là pour s’assurer que les étudiants et les enseignants ne puissent pas accéder à du porno sur le réseau de l’école. Ça permet aussi de filtrer la violence, l’extrémisme, les jurons, les réseaux sociaux, l’alcool, la drogue, le hacking, les jeux et le streaming vidéo. Ironiquement, si vous deviez chercher sur Google « paramètres proxy OSX », les premiers résultats seraient tous bloqués parce que « proxy » est un mot filtré.</p>

  477. <p>Je lui demande avec espoir si elle sait où on peut paramétrer le proxy.</p>

  478. <p>Je n’obtiens pas de réponse. J’aurai aussi bien pu lui demander « <em>Pouvez-vous me dire comment réticuler des splines en utilisant un système de décodage hexagonal pour construire un GUI en VisualBasic et traquer une adresse IP ?</em> »</p>

  479. <p>Ça me prend environ 10 secondes de trouver et remplir les paramètres du proxy. Je lui rends son MacBook, et elle ferme puis rouvre Safari au lieu de juste rafraîchir la page. « Merci ». Tant de gratitude, ça fait chaud au cœur.</p>

  480. <p>Je suis sur le point de partir quand elle m’arrête. « PowerPoint ne marche pas. »</p>

  481. <p>Bon, ça ne vaut sûrement pas un appel au président des États-Unis. Je suis sûr qu’il s’intéresse aux affaires technologiques, mais la disparition du leader mondial de la présentation assistée par ordinateur serait certainement un soulagement pour lui. Au moins, la NSA arrêterait de pondre des diapositives mal foutues.</p>

  482. <p><img class="aligncenter size-full wp-image-124" src="http://lunatopia.fr/wp-content/uploads/2013/08/gamins_1.jpg" alt="new prism slide"/></p>

  483. <p>Je me rassieds et reprends possession du MacBook. Les slides qu’elle regardait contenaient une vidéo Youtube embarquée, et comme je l’ai mentionné, le streaming vidéo est bloqué. J’essaye de lui expliquer, ce à quoi elle rétorque que ça n’a aucune importance, vu que la vidéo est dans son PowerPoint, et qu’elle tourne depuis sa clé USB. Je n’essaye pas d’argumenter, j’ai mieux à faire de mon temps. À la place, je fais comme d’habitude quand j’aide des gens : <em>je fais en sorte que ça marche</em>. Grâce à la connexion 3G de mon iPad, je mets en place un hot-spot et je télécharge la vidéo Youtube en utilisant un site de téléchargement de vidéos populaire, puis j’intègre la vidéo, maintenant présente sur l’ordinateur, dans sa présentation.</p>

  484. <p>Pendant que je travaille sur sa présentation, la femme me demande « Qu’est-ce que vous enseignez ? »<br/>

  485. « L’informatique »<br/>

  486. « Ah… Je suppose que la plupart des gamins s’y connaissent mieux en informatique que les profs, de nos jours… »</p>

  487. <p>Si vous enseignez l’informatique, c’est une phrase que vous avez entendue un million, un milliard, epsilon zéro fois, aleph fois. Ok, j’exagère un peu, mais vous l’avez sûrement beaucoup entendue. Il y a des variantes de cette phrase, qui vantent toutes les grandes capacités technologiques des gamins d’aujourd’hui. Ma préférée vient des parents : « Oh Kevin aura sûrement de très bonnes notes en informatique, il passe son temps sur l’ordinateur à la maison ». On dirait que les parents s’imaginent qu’en passant des heures sur Facebook et Youtube tous les soirs, on peut acquérir, via une sorte d’osmose cybernétique, des connaissances en PHP, HTML, JavaScript et Haskell.</p>

  488. <p>Normalement, quand quelqu’un sort ce genre d’énormité, je me contente d’acquiescer et de sourire. Mais là, impossible de laisser passer. « Non, les gamins ne savent pas utiliser les ordinateurs. » (<em>et vous non plus</em> j’aurai pu rajouter).</p>

  489. <p>Elle a l’air surprise par mon démenti de ce qui est généralement considéré comme un truisme. Après tout, les ados ne sont-ils pas des « <span lang="en">digital natives</span> » ? Ils ont des ordinateurs portables, et des tablettes, et des consoles, et des smartphones… Ils sont forcément la partie de la population la plus à l’aise avec la technologie ! La cloche sonne et j’ai vraiment un cours à donner, donc je n’ai pas le temps de lui expliquer ma théorie sur le pourquoi de l’incapacité des gamins à utiliser les ordinateurs. Elle lira peut-être mon blog.</p>

  490. <p>En vérité, les gamins ne savent pas utiliser les ordinateurs de manière générale, et il en est de même pour la majorité des adultes que je connais. Il y a très peu d’individus que je considère comme experts en technologie à l’école. Il s’agit en gros des gens qui ont entre 30 et 55 ans et qui ont possédé un ordinateur durant la majeure partie de leur vie d’adultes. Bien sûr, il y a des exceptions parmi les profs et les étudiants. Il y a toujours quelques gamins dans la masse qui se sont frottés à la programmation ou au développement web, ou qui savent démonter un ordinateur, remplacer la carte mère et réinstaller leur système d’exploitation. Il y a souvent quelques profs, souvent de maths ou de sciences, en dehors de la tranche d’âge que j’ai cité qui sont férus d’informatique et qui ne sont battus par leurs ordinateurs portables que parce qu’ils n’ont pas d’accès administrateur, mais ce sont des cas isolés.</p>

  491. <p>Avant de rentrer dans le vif du sujet, je suppose que je devrais définir ce que j’entends par « ne savent pas utiliser un ordinateur ». En étant administrateur réseau et prof, je suis souvent en première ligne quand un enseignant ou un élève a des problèmes avec un ordinateur ou autre équipement. Comme mon technicien en chef aime à dire : « <em>Le problème se situe généralement au niveau de l’interface chaise-clavier</em>« . Voici quelques exemples des problèmes que je rencontre assez régulièrement.</p>

  492. <p><em>Un lycéen m’apporte son ordinateur portable et m’explique qu’il est très lent et n’arrête pas de s’éteindre. Le portable crie littéralement, les ventilateurs tournent à fond et il est brûlant. Je lance le gestionnaire de tâches, et je vois que le processeur tourne à 100% alors que le seul programme lancé est µTorrent (qui, au passage, est en train de partager environ 200 fichiers). Je regarde la liste des processus en train de tourner, et j’en trouve plein, qui monopolisent le processeur et la RAM. Je ne peux pas en couper un seul. Je demande « Quel antivirus tu utilises ? » et me fait répondre qu’il n’aime pas utiliser un antivirus parce qu’il a entendu que ça ralentirait son ordinateur. Je lui rend son portable et lui dit qu’il est vérolé. Il me demande quoi faire, je suggère de réinstaller Windows. Il me regarde sans comprendre. Il ne sait pas utiliser un ordinateur</em></p>

  493. <p><em>Une gamine lève la main pendant une leçon. « Mon ordinateur ne veut pas démarrer », dit-elle avec l’air désespéré de celle qui a tout tenté. Je m’approche et allume le moniteur, qui laisse apparaître l’écran de connexion de Windows. Elle ne sait pas utiliser un ordinateur.</em></p>

  494. <p><em>Une enseignante m’apporte son ordinateur portable de l’école. « Cette saleté ne veut pas se connecter à Internet ! » rage-t-elle, comme si c’était ma faute. « J’avais des tonnes de boulot à faire hier soir, et impossible de me connecter. Même mon mari a essayé, et il est doué avec les ordinateurs. » Je lui prends l’ordinateur coupable des mains, enclenche le bouton poussoir sur le côté de l’ordinateur qui contrôle le WiFi, et lui rends le portable. Ni elle ni son mari ne savent utiliser un ordinateur.</em></p>

  495. <p><em>Un gamin frappe à mon bureau pour se plaindre qu’il ne peut pas se connecter. « Tu as oublié ton mot de passe ? » Il affirme que non. « Tu as quoi comme message d’erreur ? » Il hausse les épaules. Je le regarde taper son nom d’utilisateur et son mot de passe. Un message apparaît, mais le gamin clique sur OK tellement vite que je n’ai rien le temps de lire. Il recommence 3 fois, comme si l’ordinateur allait soudainement changer d’avis et le laisser se connecter. Au 3ème essai j’ai le temps de saisir une partie du message. Je me penche derrière l’ordinateur et rebranche le câble réseau. Il ne sait pas utiliser un ordinateur.</em></p>

  496. <p><em>Une prof m’apporte son tout nouvel iPhone, qui remplace le précédent, cassé. Elle a perdu tous ses contacts, ce qui l’ennuie beaucoup. Je lui demande s’il lui est déjà arrivé de connecter son iPhone à son ordinateur, mais elle n’en a aucune idée. Je lui demande d’apporter son ordinateur en plus de l’iPhone. Quand elle s’exécute le lendemain, je restaure son téléphone depuis la sauvegarde qui se trouve sur son ordinateur. Elle retrouve ses contacts et ses photos. Elle est contente. Elle ne sait pas utiliser un ordinateur.</em></p>

  497. <p><em>Un prof appelle mon bureau pour se plaindre que son ordinateur « n’a pas d’internet ». Je me rend dans sa classe. Il me dit que l’internet était là hier, mais qu’aujourd’hui il a disparu. Son bureau est une magnifique mosaïque d’icônes Microsoft Office en vrac. J’essaye rapidement de lui expliquer qu’il ne faut pas stocker ses fichiers sur le bureau parce qu’ils ne sont pas sauvegardés par le serveur, mais il s’en moque, il veut juste qu’on lui rende son internet. J’ouvre le menu démarrer, je clique sur Internet Explorer, qui se lance avec sa page d’accueil. Il m’explique que l’Internet était sur son bureau, mais que maintenant il n’y est plus. Je ferme IE, survole le bureau et fini par trouver le petit ‘e’ bleu perdu au milieu des icônes Excel et PowerPoint. Je lui montre. Il me désigne un autre endroit sur l’écran, m’indiquant que c’est là qu’il se trouvait. Je remets l’icône à son ancien emplacement. Il est content. Il ne sait pas utiliser un ordinateur.</em></p>

  498. <p><em>Un gamin lève la main. Il me dit qu’il a un virus sur son ordinateur. Je regarde son écran. Dans son navigateur, on peut voir une fenêtre de dialogue de Windows XP l’avertissant que son PC est infecté et lui offrant un assortiment d’outils anti-malware. Sa machine tourne sous Windows 7. Je ferme l’onglet. Il ne sait pas utiliser un ordinateur.</em></p>

  499. <p>Ne pas savoir utiliser un ordinateur est acceptable si vous avez plus de 25 ans. Certaines personnes en sont même bizarrement fières. Par contre, la croyance populaire comme quoi toute personne de moins de 18 est un magicien de l’informatique est tout simplement fausse. Ils savent utiliser certains logiciels, particulièrement des applications web. Ils savent utiliser Facebook et Twitter. Ils peuvent utiliser YouTube et Pinterest. Ils savent même utiliser Word et PowerPoint et Excel. Par contre, demandez-leur de réinstaller un système d’exploitation et ils sont perdus. Demandez-leur de changer leur disque dur ou leur mémoire vive et ils font une crise d’angoisse. Demandez-leur ce que veut dire https et pourquoi c’est important, et ils vous regarderont comme si vous leur aviez parlé Klingon.</p>

  500. <p>Ils cliquent sur « OK » sans lire les messages des boîtes de dialogue. Ils choisissent des mots de passe comme « azerty1234″. Ils éteignent l’ordinateur en appuyant sur le bouton power jusqu’à ce que l’écran devienne noir. Ils quittent une pièce en laissant leurs comptes connectés. Si un programme met du temps à réagir, ils cliquent sur le même bouton jusqu’à le faire crasher.</p>

  501. <p>Comment a-t-on pu en arriver là ? Comment une génération peut-elle avoir accès à autant de technologie et savoir aussi mal s’en servir ?</p>

  502. <h2>les Parents</h2>

  503. <p>Je me suis planté, et je suis sûr que c’est également le cas de beaucoup d’entre vous. Quand nous avons acheté une XBox, ça a été Techno-Papa à la rescousse. J’ai joyeusement dépatouillé la jungle de câbles et créé des profils pour tout le monde. Quand le MacBook de mon fils a été infecté par le virus FlashBack, TechnoPapa est venu à sa rescousse. J’ai regardé quelques guides en ligne, puis j’ai maltraité le terminal jusqu’à m’être débarrassé des indésirables. Quand nous avons acheté un Raspberry Pi familial, TechnoPapa est venu à la rescousse. J’ai tout mis en place, paramétré, installé, puis j’ai attendu fièrement, me demandant pourquoi personne ne voulait s’en servir à part moi. Durant toute leur vie, j’ai fait les choses pour eux. J’ai monté le nouveau matériel, installé les nouveaux logiciels, et servi de réparateur à chaque problème. Résultat ? J’ai une famille d’illettrés technologiques.</p>

  504. <h2>L’école</h2>

  505. <p>Quand il est devenu évident que les ordinateurs allaient avoir de l’importance, le gouvernement du Royaume-Uni a reconnu qu’il pourrait être intéressant d’enseigner l’informatique à l’école. Étant une bande d’illettrés technologiques, les politiciens et leurs conseillers se sont tournés vers l’industrie pour demander ce qu’il fallait inclure à ce nouveau programme. A cette époque, la seule industrie, c’était Microsoft et son monopole. <strong>&lt;sarcasme&gt;</strong> Microsoft a énormément réfléchi à ce qui devrait être inclus dans le programme, et après mûre réflexion, ils ont indiqué que les étudiants devraient apprendre à utiliser les suites bureautiques. <strong>&lt;/sarcasme&gt;</strong> C’est ainsi que le programme est né. <strong>&lt;sarcasme&gt;</strong> Naturellement, les écoles ont longtemps cherché quelle suite bureautique utiliser pour l’enseignement, et ont fini par se décider pour Microsoft Office. <strong>&lt;/sarcasme&gt;</strong>. C’est pourquoi, depuis 2000, les écoles offrent des compétences Microsoft à leurs étudiants. (des compétences Adobe ont été introduites un peu plus tard).</p>

  506. <p>Mais le programme n’est pas notre seule erreur. L’infrastructure réseau des écoles du Royaume-Uni est tout autant à blâmer. Nous avons imité les réseaux d’entreprises, empêchant les étudiants et les professeurs d’accéder aux paramètres système, à la ligne de commande, et en réclamant des droits d’administration pour faire à peu près n’importe quoi. Ils sont assis devant un ordinateur à usage général et n’ont pas la possibilité de faire de l’informatique générale. On les laisse accéder à quelques applications, et c’est tout. Les ordinateurs ont accès à Internet à travers des serveurs proxy qui filtrent à peu près tout ce qui est moins mièvre que Wikipédia, et la plupart des écoles ajoutent une couche de filtrage supplémentaire, pour finir avec uniquement une liste de « sites acceptables ».</p>

  507. <h2>Windows et OSX</h2>

  508. <p>Mon premier ordinateur était un ESCOM P100 avec Windows 3.1. Mon deuxième était un Packard Bell avec Windows 95. Mon troisième était un « sur mesure » avec Windows XP. Mon quatrième était un portable Acer avec Windows 7. Maintenant, j’utilise un MacBook Pro avec OSX (ou Ubuntu parfois, en fonction de mon humeur et de mon niveau de paranoïa). Windows 7 a tout changé pour moi. Pour la première fois, j’ai installé un système d’exploitation et je n’ai absolument rien eu à configurer. Même un prof de sport aurait pu y arriver.</p>

  509. <p>Windows 7 (je déteste Windows 8, mais c’est une autre histoire) et Mac OSX sont de très bons systèmes d’exploitation. Ils sont faciles à utiliser, ne demandent presque pas de configuration, incluent ou fournissent un accès facile à tous les pilotes dont on pourrait avoir besoin… en résumé, « ils fonctionnent ». C’est fantastique que tout le monde, du plus petit des enfants au plus vieux des grand-parents, puisse maintenant utiliser un ordinateur avec absolument aucune connaissance technique, mais c’est aussi une catastrophe. Avant, ça n’était pas comme ça. Utiliser un système d’exploitation était dur. Quand il y avait un problème, il fallait se remonter les manches et mettre les mains dans le cambouis pour tout réparer. Vous appreniez à gérer les systèmes de fichiers, les clés de registres et les pilotes pour votre matériel. Ca n’est plus le cas.</p>

  510. <p>Je suppose qu’un jour on dira la même chose pour la conduite. Il y aura toujours des geeks des voitures qui construiront des voitures en kit et passeront leurs journées à mesurer leurs compétences de conducteur pendant que nous, nous nous laisserions tranquillement balader par Google dans des petites bulles.</p>

  511. <h2>Les téléphones portables</h2>

  512. <p>Le mobile a tué la compétence technique. Nous transportons tous des ordinateurs qui prétendent qu’ils sont des téléphones portables ou des tablettes. La majorité des gens ne pensent même par à leur smartphone comme à un ordinateur. C’est un appareil qui permet d’aller rapidement sur Google. C’est un appareil qui nous permet de prendre des photos et de les poster sur Facebook. C’est un appareil qui nous permet de jouer à des jeux et de poster nos scores sur Twitter. C’est un appareil qui bloque complètement ses fichiers système (ou nous les cache). C’est un appareil sur lequel on peut uniquement installer des applications via un store régulé. C’est un appareil dont on ne peut pas modifier ou remplacer le matériel, et qui sera obsolète d’ici un an ou deux. C’est un appareil qui est à peu près aussi proche de l’ordinateur généraliste que ce jouet Fisher Price que j’avais à 3 ans.</p>

  513. <p class="center"><img src="/img/blog/gamins_2.jpg" alt="Jouet téléphone en plastique"/></p>

  514. <p>Voilà où on en est. Illustrons mon propos avec quelques statistiques. S’il y a 20 ans, 5% d’entre nous avaient un ordinateur chez eux, on pouvait garantir que 95% de ces possesseurs d’ordinateurs étaient des « lettrés informatiques ». Maintenant, admettons qu’actuellement 95% d’entre nous possèdent un ordinateur, je suppose que 5% des possesseurs sont des « lettrés informatiques ».</p>

  515. <p>C’est effrayant, et je suis sûr que les vraies statistiques sont plus effrayantes encore. C’est quelque chose dont nous devrions tous nous soucier.</p>

  516. <p>Pourquoi ?</p>

  517. <p>La technologie affecte beaucoup plus nos vies qu’auparavant. Nos ordinateurs nous donnent accès à la nourriture que nous mangeons et aux vêtements que nous portons. Nos ordinateurs nous permettent de travailler, de nous sociabiliser et de nous divertir. Nos ordinateurs nous donnent accès à nos banques, nos services. Nos ordinateurs permettent à des criminels de nous atteindre, de nous voler nos données, notre argent, nos identités. Nos ordinateurs sont maintenant utilisés par nos gouvernements pour surveiller nos communications, nos comportements, nos secrets. Cory Doctorow le formule mieux que moi quand il dit :</p>

  518. <p class="center citation citationLong">

  519.     <span>Il n’y a pas d’avions, juste des ordinateurs qui volent. Il n’y a pas de voitures, juste des ordinateurs dans lesquels on s’assied. Il n’y a pas d’aides auditives, juste des ordinateurs que nous mettons dans nos oreilles.</span>

  520. </p>

  521. <p>Le « Summer of Surveillance » m’inquiète.</p>

  522. <p class="center">

  523. 

  524. </p>

  525. <p>Le lundi après qu’on ait commencé à parler des révélations de <a href="http://en.wikipedia.org/wiki/PRISM_%28surveillance_program%29" hreflang="en">Snowden</a>, je suis allé à l’école et la plupart de mes collègues et étudiants n’avaient pas entendu parler du scandale ou s’ils étaient au courant s’en moquaient. Alors que je m’occupais de <a href="http://coding2learn.org/blog/2013/06/08/its-our-own-fault-dot-dot-dot-deal-with-it/" hreflang="en">supprimer mes comptes en ligne</a> et de sécuriser mes machines, mes amis m’ont traité de paranoïaque, et ont enchaîné les blagues sur les chapeaux en aluminium. Ma famille a haussé les épaules et cité le célèbre « si t’as rien à cacher, t’as rien à craindre ». Et là, sorti de nulle part, voilà que Cameron annonce que les FAI vont commencer à filtrer Internet. Ce qui est présenté comme un « filtre à porno » filtrera en réalité bien plus que du porno, selon <a href="https://www.openrightsgroup.org/blog/2013/sleepwalking-into-censorship" hreflang="en">les recherches de l’Open Rights Group</a>. Comme si ça ne suffisait pas, la conseillère en chef de Cameron sur ce sujet s’est fait <a href="http://order-order.com/2013/07/23/claire-perrys-website-hacked-by-porn-prankers/" hreflang="en">hacker son site</a> et a prouvé l’étendue de <a href="http://www.bbc.co.uk/news/technology-23437473" hreflang="en">son illettrisme technique.</a></p>

  526. <p>C’est aujourd’hui que se créent les politiciens, les fonctionnaires, les officiers de police, les profs, les journalistes et les patrons de demain. Ces gens ne savent pas utiliser les ordinateurs, et pourtant ils vont créer des lois concernant les ordinateurs, faire appliquer des lois concernant les ordinateurs, apprendre aux jeunes à utiliser les ordinateurs, parler des ordinateurs dans les médias et faire du lobbying à propos des ordinateurs. Pensez-vous que cette situation soit acceptable ? David Cameron me dit que le filtrage d’Internet est une bonne chose. William Hague me dit que je n’ai rien à craindre du GCHQ (service de renseignements électronique du gouvernement britannique). J’ai une question pour ces gens :</p>

  527. <p><em>Sans consulter Wikipédia, sauriez-vous me dire la différence entre Internet, le World Wide Web, un navigateur et un moteur de recherche ?</em></p>

  528. <p>Si vous n’en êtes pas capable, alors vous n’avez aucun droit de prendre des décisions qui affectent ces technologies. Essayez. Vos amis connaissent la différence ? Et vous ?</p>

  529. <h2>Tout arranger</h2>

  530. <h3>Les parents</h3>

  531. <p>Arrêtez de mâcher le travail de vos enfants. Vous passez des heures et des heures à leur apprendre à aller au pot quand ils sont enfants parce que savoir utiliser des toilettes est une compétente indispensable dans la société moderne. Vous devez faire la même chose avec la technologie. Achetez-leur un ordinateur, mais si les choses tournent mal, laissez-les le réparer. Achetez-leur un smartphone, donnez leur 10€ de budget sur la logithèque et laissez-les découvrir pourquoi le système de logithèque fermée est une mauvaise chose. Quand nous apprenons à nos enfants à faire du vélo, à un moment il faut enlever les roulettes. Une idée : quand ils atteignent onze ans, donnez leur un fichier texte avec 10.000 clés WPA2 et dites leur que la vraie est cachée dans le lot. Vous allez voir qu’il ne leur faudra pas longtemps pour découvrir Python ou Bash.</p>

  532. <h3>Les écoles</h3>

  533. <p>Au Royaume-Uni, on s’approche d’une solution. J’ai une relation amour/haine avec le gouvernement, mais j’aime sincèrement ce qu’il est en train de faire avec l’enseignement de l’informatique. Il faut juste s’assurer que les académies jouent le jeu et ne profitent pas des réformes pour économiser de l’argent.</p>

  534. <p>On pourrait faire plus. On ferait mieux d’apprendre aux gamins à ne pas installer de malware que de bloquer les machines pour que ça soit physiquement impossible. On ferait mieux d’apprendre aux gamins à naviguer de façon sécurisée que de filtrer leur internet. Google et Facebook donnent aux gamins qui trouvent des failles de sécurité dans leurs systèmes de l’argent. Les gamins qui font de même avec les systèmes de leur école sont exclus. Normal ?</p>

  535. <h3>Windows et OSX</h3>

  536. <p>UTILISEZ LINUX. Ok, c’est pas toujours pratique, mais la plupart des distributions Linux vous apprennent à utiliser un ordinateur. Tout le monde devrait s’y frotter au moins une fois dans sa vie. Si vous n’avez pas l’intention d’utiliser Linux et que vous êtes sous OSX faites un tour dans le terminal, c’est vraiment amusant et vous aurez l’impression d’être un hacker, tout comme avec la ligne de commande ou le PowerShell de Windows.</p>

  537. <h3>Les téléphones portables</h3>

  538. <p>Question piège. iOS est une cause perdue, à moins de jailbreaker, et Android n’est pas tellement mieux. J’utilise Ubuntu-Touch, et ça a ses avantages. Au moins, vous avez l’impression que votre téléphone vous appartient. Ok, je ne peux pas utiliser la 3G, ça plante quand j’essaye d’appeler et mon téléphone est tellement chaud dans la poche de ma veste qu’il me sert de radiateur d’appoint, mais il y a du potentiel !</p>

  539. <h2>Conclusion</h2>

  540. <p>Ce n’est pas un nouveau phénomène, c’est déjà arrivé auparavant. Il y a une centaine d’années, si vous étiez assez chanceux pour posséder une voiture, vous saviez probablement comment la réparer. Les gens savaient au moins comment vérifier les niveaux d’huile, changer les pneus ou vérifier le moteur. Pendant la majeure partie de ma vie d’adulte, j’ai possédé une voiture, et elles sont un vrai mystère pour moi. Ce qui fait que je dépends des vendeurs pour me dire quelle voiture acheter, des mécaniciens pour me dire ce qui ne va pas et réparer, et avec les progrès de la technologie, je deviens même dépendant de la navigation par satellite. Je doute que mon fils de 5 ans ait besoin d’apprendre à conduire un jour. Sa voiture le fera pour lui. Quand il aura besoin de la faire réparer, il sera redirigé vers le mécanicien qui aura le plus investi dans la pub en ligne. Quand il aura envie de faire une pause repas, il sera redirigé vers le fast-food qui aura le plus investi dans la pub en ligne. Quand il aura besoin de faire le plein de cristaux de Dilithium, il sera redirigé vers la station service qui aura le plus investi dans la pub en ligne.</p>

  541. <p>Je veux que les gens qui aideront à façonner notre société dans le futur comprennent les technologies qui aideront à façonner notre société dans le futur. Pour que ça arrive, nous devons inverser la tendance qui voit l’augmentation de l’illettrisme technologique. Nous devons agir ensemble, en tant que parents, en tant que profs, en tant que responsables. Construisons une génération de hackers. Qui est avec moi ?</p>

  542. </div>

  543.   </article>

  544. </section>

  545. 

  546. 

  547. <nav id="jumpto">

  548.   <p>

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

  550.     <a href="http://lunatopia.fr/blog/les-gamins-ne-savent-pas-utiliser-les-ordinateurs">Source originale</a> |

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

  552.   </p>

  553. </nav>

  554. 

  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.     

  567.     <p>

  568.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  585.     </p>

  586.     <p>

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

  588.     </p>

  589.     <p>

  590.       Je ne traque pas ta navigation mais mon

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

  592.       conserve des logs d’accès.

  593.     </p>

  594.   </div>

  595. </footer>

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

  597.   ;(_ => {

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

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

  600.       e.preventDefault()

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

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

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

  604.     })

  605.   })()

  606. </script>