davidbgk
/
larlet-fr-david
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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.
288 Révisions
1 Branche
Aborescence: 215e169fba
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '215e169fba'
${ noResults }
larlet-fr-david/david/blog/2013/bapteme-numerique/index.html

index.html 30KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829 
  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>Baptême numérique — 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/2013/bapteme-numerique/">

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

  31.   <meta name="description" content="Comment gérer l’identité numérique de son enfant ?" />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Comment gérer l’identité numérique de son enfant ?" />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Baptême numérique" />

  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/2013/bapteme-numerique/" />

  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/david-larlet-avatar-thumbnail.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.   Baptême numérique

  468.   <time>Publié le 7 décembre 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>L’apprentissage commence très tôt, dès la première enfance. Volontairement ou pas, les siens le modèlent, le façonnent, lui inculquent des croyances familiales, des rites, des attitudes, des conventions, la langue maternelle bien sûr, et puis des frayeurs, des aspirations, des préjugés, des rancœurs, ainsi que divers sentiments d’appartenance comme de non-appartenance.</p>

  473. <p>Et très tôt aussi, à la maison comme à l’école ou dans la rue voisine, surviennent les premières égratignures. Les autres lui font sentir, par leurs paroles, par leurs regards, qu’il est pauvre, ou boiteux, ou petit de taille, ou « haut-sur-pattes », ou basané, ou trop blond, ou circoncis, ou non circoncis, ou orphelin — ces innombrables différences, minimes ou majeures, qui tracent les contours de chaque personnalité, forgent les comportements, les opinions, les craintes, les ambitions, qui souvent s’avèrent éminemment formatrices mais qui parfois blessent pour toujours.</p>

  474. <p><cite><em>Les identités meurtrières</em>, Amin Maalouf</cite></p>

  475. </blockquote>

  476. <p><strong>Comment gérer l’identité numérique de son enfant ?</strong> Quelles protections mettre en place pour qu’il puisse jouir de son image le moment venu ? <em>Quelle part d’intimité numérique lui préserver ?</em></p>

  477. <p>Je me pose ces questions alors qu’il semble de plus en plus habituel de <em>live-tweeter</em> son accouchement ou de poster sur <em>Facebook</em> les premières mensurations. Je me pose ces questions alors qu’il n’y a plus suffisamment de respect au sein même de la famille pour ne pas diffuser des photos numériques car cela est devenu monnaie courante. Et je ne trouve de réponses que dans l’approche de certaines églises chrétiennes de procéder à un <em>baptême</em> puis à une <em>confirmation</em> lorsque l’enfant est en âge de faire ce choix. Je suis ouvert à toute autre piste non religieuse.</p>

  478. <p>La réponse est peut-être démesurée mais la dérive actuelle me semble malsaine pour la construction de l’identité de mon fils, à peine né le voilà soumis au regard du global, de l’archivable et du traçable. Certaines expériences doivent rester à l’échelle des proches pour créer un univers « familial », qu’est-ce qu’un proche si ce n’est quelqu’un avec qui on a partagé des choses ? En rendant publics ces moments on détruit ces relations fortes, ce vécu commun, cette <em>culture</em>. On détruit une part de ce qu’il est et de ce qu’il deviendra en accélérant une rencontre.</p>

  479. <p><strong>J’ai envie que mon fils soit libre de choisir son appartenance à des communautés.</strong> Et qu’il interagisse avec elles de son propre gré. En étant accompagné s’il le souhaite. En faisant ses propres expériences aussi. <em>J’ai envie qu’il puisse prendre le temps de découvrir ce nouveau lieu lorsqu’il se sentira prêt.</em></p>

  480. </article>

  481. 

  482.   <section>

  483.     <h3>Discussion suite à l’article :</h3>

  484. 

  485.       <article id="comment-1" class="comment">

  486.         <p>Ayant plus ou moins la même réflexion, nous avons fait le choix d’un blog auto-hébergé, en demandant aux robots de ne pas passer, via un robots.txt contenant "Disallow: /" et nous avons diffuser l’url qu’aux proches. Le but étant de simplifier l’usage pour nos proches.

  487. Si jamais nous avons de plus, nous mettrons un login / mot de passe.</p>

  488. <p>On se pose maintenant la question de quand arrêter le blog, en se disant qu’il s’arrêtera tout seul quand nous ne prendrons plus le temps de faire des photos de Mael régulièrement (le blog ne sert qu’a publié des photos dans 99% des cas).</p>

  489.         <p><cite>Guillaume Bec, le <a href="#comment-1">2013-12-07 à 13:30</a></cite></p>

  490.       </article>

  491. 

  492.       <article id="comment-2" class="comment">

  493.         <p>Question difficile.

  494. Puisque de toutes façons, nous faisons un choix pour l’enfant et cela fait partie du processus. Mon impression spontanée dans les circonstances actuelles (qui ne seront pas celles du futur) est de ne rien dévoiler si ce n’est par des canaux d’informations opaques ou intimes. </p>

  495. <p>Il y a ensuite une question de volume de ce que l’on partage. C’est déjà le cas avec ma génération et la généralisation de la photographie à bas prix (oui avant le numérique ;) ). Est-ce des souvenirs ou est-ce l’apprentissage de la photographie que l’on a si souvent vu ? Et se souvient on des moments photographiés parce qu’il y en avait peu ? Est-ce que dans une abondance d’images en flux continu, finalement, on ne se souvient plus des images et on se refocalise sur le souvenir ?</p>

  496. <p>Et toutes nos questions, nos chateaux de carte philosophiques sont bien fragiles en face de la réalité du quotidien et de ses petits yeux neufs qui chamboulent le monde. Difficile tout cela :) Improvisation (au sens du jazz) est peut-être le terme juste.</p>

  497.         <p><cite>Karl Dubost, le <a href="#comment-2">2013-12-07 à 13:45</a></cite></p>

  498.       </article>

  499. 

  500.       <article id="comment-3" class="comment">

  501.         <p>Alors, avec ma moitié on en a parlé avant que ma fille naisse et la décision a été toute simple. Elle décidera elle-même de la vie numérique qu’elle voudra avoir. Pas question que par nos choix, on lui ’pourrisse’ sa vie future en publiant quelque chose qu’elle n’aurait pas voulu que l’on publie si elle avait pu donner son avis.</p>

  502. <p>Donc en attendant qu’elle puisse décider de sa vie numérique, on utilise le principe de précaution. C’est à dire qu’on ne publie quasiment rien (il y a quelques entorses à la règle comme la photo que j’ai pu utiliser lors d’une de mes confs). . Aucune photos. A peine quelque petite tranche de vie ou citation parfois, sur twitter, mais c’est tout.</p>

  503. <p>Pour envoyer des photos aux proches éloignés, un dossier dropbox ou des emails.</p>

  504. <p>Et on a fait passer la consigne de notre volonté de ne pas voir de photos publiées. ( Et c’est plutôt pas mal respecté, chanceux nous sommes).</p>

  505.         <p><cite>Mrjmad, le <a href="#comment-3">2013-12-14 à 20:52</a></cite></p>

  506.       </article>

  507. 

  508.       <article id="comment-4" class="comment">

  509.         <blockquote>

  510. <p>J’ai envie que mon fils soit libre de choisir son appartenance à des communautés</p>

  511. </blockquote>

  512. <p>C’est un vœu pieu. Cette illusion du libre-arbitre est une croyance très répandue, d’un autre côté on ne peut demander à un enfant de porter la responsabilité de choix qu’il n’est pas en mesure de faire.</p>

  513. <p>Ton fils, tout comme toi, sera que tu le veuilles ou non influencé par son entourage, vos comportements, le rôle des parents n’est jamais neutre. C’est d’ailleurs toi qui choisit déjà pour lui tous les jours. Il n’a pas choisi de naître, ni son prénom, ni son nom, son sexe, etc.</p>

  514. <p>C’est d’après l’éducation qu’il aura reçu et la(les) culture(s) dans lesquelles il aura baigné qu’il ira vers "ses" choix.</p>

  515.         <p><cite>Frank Taillandier, le <a href="#comment-4">2013-12-15 à 23:41</a></cite></p>

  516.       </article>

  517. 

  518.   </section>

  519. 

  520. 

  521. 

  522. 

  523. <nav id="jumpto">

  524.   <p>

  525.     <a rel=prev href="/david/blog/2013/voir-enfant/">← Voir un enfant</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/open-source-solidarite/">Open-Source et solidarité →</a>

  526.   </p>

  527. </nav>

  528. 

  529. <footer>

  530.   <div>

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

  532.     <p>

  533.       Bonjour/Hi!

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

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

  536.     </p>

  537.     <p>

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

  539.     </p>

  540. 

  541.       <p>

  542.         Les dernières publications hebdomadaires sont :

  543.       </p>

  544.       <ul class="with_columns">

  545. 

  546.           <li>

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

  548.           </li>

  549. 

  550.           <li>

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

  552.           </li>

  553. 

  554.           <li>

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

  556.           </li>

  557. 

  558.           <li>

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

  560.           </li>

  561. 

  562.           <li>

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

  564.           </li>

  565. 

  566.           <li>

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

  568.           </li>

  569. 

  570.           <li>

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

  572.           </li>

  573. 

  574.           <li>

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

  576.           </li>

  577. 

  578.           <li>

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

  580.           </li>

  581. 

  582.           <li>

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

  584.           </li>

  585. 

  586.           <li>

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

  588.           </li>

  589. 

  590.           <li>

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

  592.           </li>

  593. 

  594.           <li>

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

  596.           </li>

  597. 

  598.           <li>

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

  600.           </li>

  601. 

  602.           <li>

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

  604.           </li>

  605. 

  606.           <li>

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

  608.           </li>

  609. 

  610.           <li>

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

  612.           </li>

  613. 

  614.           <li>

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

  616.           </li>

  617. 

  618.           <li>

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

  620.           </li>

  621. 

  622.           <li>

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

  624.           </li>

  625. 

  626.           <li>

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

  628.           </li>

  629. 

  630.           <li>

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

  632.           </li>

  633. 

  634.           <li>

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

  636.           </li>

  637. 

  638.           <li>

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

  640.           </li>

  641. 

  642.           <li>

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

  644.           </li>

  645. 

  646.           <li>

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

  648.           </li>

  649. 

  650.           <li>

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

  652.           </li>

  653. 

  654.           <li>

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

  656.           </li>

  657. 

  658.           <li>

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

  660.           </li>

  661. 

  662.           <li>

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

  664.           </li>

  665. 

  666.           <li>

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

  668.           </li>

  669. 

  670.           <li>

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

  672.           </li>

  673. 

  674.           <li>

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

  676.           </li>

  677. 

  678.           <li>

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

  680.           </li>

  681. 

  682.           <li>

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

  684.           </li>

  685. 

  686.           <li>

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

  688.           </li>

  689. 

  690.           <li>

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

  692.           </li>

  693. 

  694.           <li>

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

  696.           </li>

  697. 

  698.           <li>

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

  700.           </li>

  701. 

  702.           <li>

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

  704.           </li>

  705. 

  706.           <li>

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

  708.           </li>

  709. 

  710.           <li>

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

  712.           </li>

  713. 

  714.           <li>

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

  716.           </li>

  717. 

  718.           <li>

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

  720.           </li>

  721. 

  722.           <li>

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

  724.           </li>

  725. 

  726.           <li>

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

  728.           </li>

  729. 

  730.           <li>

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

  732.           </li>

  733. 

  734.           <li>

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

  736.           </li>

  737. 

  738.           <li>

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

  740.           </li>

  741. 

  742.       </ul>

  743. 

  744.     <p>

  745.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  762.     </p>

  763.     <p>

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

  765.     </p>

  766.     <p>

  767.       Je ne traque pas ta navigation mais mon

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

  769.       conserve des logs d’accès.

  770.     </p>

  771.   </div>

  772. </footer>

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

  774.   ;(_ => {

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

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

  777.       e.preventDefault()

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

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

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

  781.     })

  782.   })()

  783. </script>

  784. 

  785.   <script>

  786.   /* Service workers */

  787.   if (navigator.serviceWorker) {

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

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

  790.       function sendLinks (selector) {

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

  792.           return link.getAttribute('href')

  793.         })

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

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

  796.       }

  797.       navigator.serviceWorker.getRegistration()

  798.         .then(function (registration) {

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

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

  801.               .then(navigator.serviceWorker.ready)

  802.               .then(function () {

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

  804.               })

  805.               .catch(console.error.bind(console))

  806.           } else {

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

  808.             sendLinks(selector)

  809.           }

  810.         })

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

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

  813.         sendLinks(selector)

  814.       })

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

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

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

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

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

  820. 

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

  822. 

  823.         }

  824.       })

  825.     })

  826.   } else {

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

  828.   }

  829. </script>