davidbgk
/
larlet-fr-david-cache
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Släpp 0 Aktiviteter
A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
244 Incheckningar
1 Gren
Träd: 177f88d689
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från '177f88d689'
${ noResults }
larlet-fr-david-cache/cache/2e11d24bb65486075d08637d8c7.../index.html

index.html 35KB
Rå Blame Historik

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607 
  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>Cheveux longs et algos courts. (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="https://www.affordance.info/mon_weblog/2019/10/cheveux-longs-et-algos-courts-.html">

  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.   Cheveux longs et algos courts. (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="https://www.affordance.info/mon_weblog/2019/10/cheveux-longs-et-algos-courts-.html">Source originale du contenu</a></h3>

  463.     <p><strong>1966.</strong> Un chanteur aux cheveux longs, Antoine, <a href="https://fr.wikipedia.org/wiki/Les_%C3%89lucubrations_d%27Antoine" rel="noopener" target="_blank">explique que sa mère lui a dit d'aller les faire couper</a>. Lui veut mettre Johnny en cage à Medrano. Le Johnny en question, lui répond en enregistrant "<a href="https://fr.wikipedia.org/wiki/Cheveux_longs_et_id%C3%A9es_courtes" rel="noopener" target="_blank">Cheveux longs et idées courtes</a>".   </p>

  464. 

  465. <p><strong>2019.</strong> Instagram efface les photos de petits garçons torse nu <a href="https://www.buzzfeednews.com/article/laurenstrapagiel/long-haired-boys-instagram" rel="noopener" target="_blank">au motif qu'ils ont les cheveux longs</a>. Et que l'algorithme les identifie donc comme des petites filles. Et que des petites filles torse nu sur Instagram c'est interdit. Rapport à l'interdiction de montrer un téton féminin. Sur Instagram, sur Facebook, sur TumblR, bref, partout.   </p>

  466. 

  467. <p>Il y a une encyclopédie en 9 volumes à écrire sur l'histoire de la pilosité sur les internets et la manière dont elle façonne notre rapport au corps au travers des interdits mis en place dans le grand filtre de la pudibonderie que l'on désigne communément sous le nom de réseaux sociaux et dont Instagram est la métonymie parfaite.</p>

  468. 

  469. <p>Sur l'histoire des poils tout court (enfin de la pilosité, pas l'histoire des poils courts), vous avez déjà la remarquable <a href="https://www.arte.tv/fr/videos/RC-014204/poilorama/" rel="noopener" target="_blank">série "Poilorama" d'Arte</a>, et la certes plus aride mais non moins remarquable et beaucoup plus exhaustive <a href="https://journals.openedition.org/apparences/1248?lang=fr" rel="noopener" target="_blank">"Hair Studies" bibliographie de Jean Da Silva</a>, sous-titrée "<em>Pour une historiographie de la pilosité.</em>"</p>

  470. 

  471. <p>Du côté des internets donc, si tu es une femme, la vie est globalement un long fleuve pas si tranquille que ça mais <strong>à condition que tu sois épilée</strong>. Parce que sur les internets comme ailleurs, <a href="https://twitter.com/LarrereMathilde/status/1171837913245634560" rel="noopener" target="_blank">épilation féminine et domination masculine</a> sont les deux faces d'une même médaille. Fleuve pas si tranquille secoué de réguliers affluents polémiques ou militants, émancipateurs ou castrateurs, mais toujours <em>in fine</em> humainement arbitrés et algorithmiquement exécutés dans le sens du poil, qui est aussi celui de la norme sociale dominante dans les meetings du tea-party américain avec la double axiomatique suivante : "<em>Sois prude et tais-toi</em>" et "<em>Sois glabre et l'on te verra.</em>"   </p>

  472. 

  473. <p>Entre <a href="https://www.vice.com/fr/article/qv7435/on-a-discute-avec-des-jeunes-feministes-et-catholiques" rel="noopener" target="_blank">reconnaissance assumée de l'hirsutisme</a> (qui touche 6 à 10% des femmes), tentative de banalisation (body-positivisme) des poils sous les bras présentée comme une <a href="https://www.linternaute.com/humour/magazine/1235366-nouvelle-mode-sur-instagram-les-poils-sous-les-bras/" rel="noopener" target="_blank">"nouvelle mode" dès 2015 sur Instagram</a>, et le désormais <a href="http://groupe2.ifpjournalisme.fr/les-poils-saffichent-sur-les-reseaux-sociaux-avec-le-januhairy" rel="noopener" target="_blank">presqu'institutionnel défi du #Januhairy</a> consistant - pour les femmes toujours - à cesser de s'épiler en Janvier, la pilosité des corps féminins occupe une place tout à fait à part dans la capacité prescriptive et dans la tolérance normative des réseaux sociaux.</p>

  474. 

  475. <p>Et maintenant voici donc que la longueur des cheveux s'en mêle et s'emmêle puisqu'Instagram efface les photos de petits garçons torse nu <a href="https://www.buzzfeednews.com/article/laurenstrapagiel/long-haired-boys-instagram" rel="noopener" target="_blank">au motif qu'ils ont les cheveux longs</a> et que l'algorithme les identifie comme des petites filles. Et que des petites filles torse nu sur Instagram c'est interdit. Rapport à l'interdiction de montrer un téton féminin.  Comme je l'écrivais au début de cet article.</p>

  476. 

  477. <p>Mais revenons un instant sur le saut temporel qui nous mena de la longueur de cheveux des beatniks de 1966 (dont notre Antoine) à celle des petits garçons d'Instagram en 2019. </p>

  478. 

  479. <h2><strong>Hashtag Beatnik.</strong></h2>

  480. 

  481. <p>Que s'est-il passé en quarante-cinq ans pour qu'un stéréotype culturel devienne un marqueur algorithmique ?</p>

  482. 

  483. <p><br/><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4d8e277200b-pi"><img alt="Sub-buzz-1336-1569351248-1" class="asset  asset-image at-xid-6a00d8341c622e53ef0240a4d8e277200b img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4d8e277200b-500wi" title="Sub-buzz-1336-1569351248-1"/></a><br/><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4d8e279200b-pi"><img alt="Sub-buzz-1336-1569351248-1" class="asset  asset-image at-xid-6a00d8341c622e53ef0240a4d8e279200b img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4d8e279200b-500wi" title="Sub-buzz-1336-1569351248-1"/></a></p>

  484. 

  485. <p><em>Quarante trois ans séparent ces deux garçons et ces deux photos. <br/>Dans les deux cas leurs mères ont un problème avec leurs cheveux.</em><br/><br/><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4d8e268200b-pi"/></p>

  486. 

  487. <h2>La liberté a du poil sous les bras.</h2>

  488. 

  489. <p>Ceci n'est pas un slogan mais une réalité. Car oui, dans le tableau de Delacroix, la liberté guidant le peuple <a href="https://www.museumtv.art/artnews/articles/les-5-infos-sur-la-plus-celebre-des-oeuvres-revolutionnaires/" rel="noopener" target="_blank">avait du poil sous les bras</a>. Et les tétons apparents. Une double caractéristique qui serait aussi aujourd'hui une double peine algorithmique et sociale. La liberté guidant le peuple serait probablement aujourd'hui une pilo-résistante du #Januhairy et devrait essuyer les moqueries et les sarcasmes des contempteurs du body-positivisme. Mais son combat (la liberté quoi ...) ne passerait aucun filtre algorithmique d'aucune plateforme sociale en gardant ainsi découverts ces tétons libérateurs que l'on ne saurait voir puisqu'aucun filtre algorithmique conçu par un cerveau humain ne semble être capable de les tolérer.</p>

  490. 

  491. <h2><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4b45563200d-pi"><img alt="Ob_eece3a_liberte-guidant-le-peuple-haut" class="asset  asset-image at-xid-6a00d8341c622e53ef0240a4b45563200d img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4b45563200d-500wi" title="Ob_eece3a_liberte-guidant-le-peuple-haut"/></a><br/>Que conclure de toute cela ? Plusieurs choses.</h2>

  492. 

  493. <p><strong>Tout d'abord que les poils sont politiques</strong> et que la tolérance à la pilosité vire souvent à l'animosité. Comme disait l'autre, "<em>Vous n'avez pas le monopole du poil.</em>"</p>

  494. 

  495. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4d8e585200b-pi"><img alt="8589773" class="asset  asset-image at-xid-6a00d8341c622e53ef0240a4d8e585200b img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4d8e585200b-500wi" title="8589773"/></a></p>

  496. 

  497. <p><strong>Ensuite que le travail de ces réseaux que l'on dit sociaux est avant tout de produire de la norme</strong> et de faire en sorte que ladite norme satisfasse au modèle économique de régie publicitaire qui est le leur. Et que tout le reste n'est que littérature. </p>

  498. 

  499. <p>Or, à l'échelle d'une société, il existe plein de manières différentes de produire de la norme, de fabriquer des référents légitimes et d'en rendre d'autres illégitimes. La manière dont les réseaux sociaux fonctionnent aujourd'hui dès lors qu'ils ont à traiter de questions liées aux corps et à leur représentation dans l'espace public qu'ils circonscrivent au sein de leurs audiences plus ou moins captives, cette manière repose sur des effets de stigmatisation et de désignation (body shaming) qui hystérisent la visibilité de certains traits. Mais elle repose également de manière bien plus insidieuse, sournoise et, hélas efficace, sur notre besoin d'identification et d'appartenance sociale qui nous rend dociles à des effets d'invisibilisation toujours plus prégnants. Disparus les petits garçons torses nus aux cheveux longs.</p>

  500. 

  501. <p><strong>C'est pour cela que cette capacité des réseaux sociaux à produire de la norme doit être questionnée sans relâche</strong> si nous ne voulons pas vivre dans une société où <a href="https://www.buzzfeednews.com/article/laurenstrapagiel/long-haired-boys-instagram" rel="noopener" target="_blank">nous couperons les cheveux de nos garçons pour pouvoir continuer de poster des photos d'eux sur Instagram</a>, comme hier des femmes ont arrêté d'être seins nus sur les plages pour pouvoir continuer de poster et de partager leurs photos de vacances sur Facebook sans crainte de censure.</p>

  502. 

  503. <blockquote>

  504. <p>"D'immense machines à normaliser, à standardiser, s'affrontent et nous broient lentement, gentiment, presque sans heurt, remplaçant l'obtention de notre consentement par le miroir toujours flatteur de notre contentement. "<em>La vraie raison pour laquelle les femmes françaises ne se baignent plus seins nus</em>", <a href="https://www.theguardian.com/fashion/fashion-blog/2014/jul/28/real-reason-french-women-have-stopped-sunbathing-topless?CMP=fb_gu" rel="noopener" target="_blank">nous dit le Guardian</a>, n'a rien à voir avec les campagnes contre le cancer de la peau, mais elle est liée à une pudibonderie, à une pruderie typiquement nord-américaine. La raison ? Le traitement de la "pornographie" sur Facebook. Aller à la plage c'est nécessairement faire profiter ses amis de clichés enchanteurs nous voyant nous ébattre dans l'onde fraîche. Mais s'ébattre seins nus rend tout partage impossible, puisque Facebook censurera immédiatement les photos en question. <a href="https://affordance.typepad.com/mon_weblog/2010/05/la-boutique-contre-le-bazar.html" rel="noopener" target="_blank">Question d'hygiénisme boutiquier</a>."</p>

  505. </blockquote>

  506. 

  507. <p><a href="https://affordance.typepad.com/mon_weblog/2014/07/cest-le-web-a-lenvers.html" rel="noopener" target="_blank">Nous étions alors en 2014</a>. Facebook avait 10 ans, Rome remplaçait Sparte, déjà Napoléon pointait sous Bonaparte. </p>

  508. 

  509. <p>Se souvenir que <a href="https://www.affordance.info/mon_weblog/2019/06/lesbienne-raisonnable-quand-sapho-pas-sapho-pas-.html" rel="noopener" target="_blank">ce que nous tolérons indique ce que nous sommes vraiment</a>. </p>

  510. 

  511. <p><strong>Conclure également que le numérique</strong>, que les algorithmes, que les méthodes d'apprentissage dites "profondes" ou "machine" (Deep Learning), que tout cela <strong>est aussi une fracture et un mensonge</strong>. Une fracture abyssale entre la promesse à la fois irréaliste et totalitaire de tout voir, de tout scruter pour pouvoir tout prescrire en prétendant tout prédire, et l'évidence d'une bêtise artificielle disposant de sa propre loi de Moore. <strong>Car la croissance exponentielle des processeurs et des capacités de calcul va de pair avec la croissance exponentielle des taux de faux-positifs possibles</strong>. <a href="https://www.cbnews.fr/digital/image-google-fait-recherche-deepfake-46311" rel="noopener" target="_blank">Générer des faux pour mieux les détecter</a>. Pour savoir ce qui est vrai plutôt que vraisemblable. "<em>Hypocrite voyeur, vraisemblable mon frère</em>", aurait pu écrire <a href="https://poesie.webnet.fr/lesgrandsclassiques/Poemes/charles_baudelaire/au_lecteur" rel="noopener" target="_blank">Baudelaire dans le receuil "Les Fake du mal"</a>. Chercher le vrai tout en sachant que la recherche algorithmique de la véracité se heurte à d'innombrables faux positifs qui eux-mêmes se caractérisent par leur capacité calculée de vraisemblance, leur capacité à rentrer dans le schème calculatoire de la vraisemblance. </p>

  512. 

  513. <p>Pour le dire différemment, nous disposons de technologies capables de scanner et d'identifier en temps réel le visage de milliers de manifestants mais l'une des sociétés qui investit aujourd'hui le plus dans le domaine de l'intelligence artificielle, celle qui dispose d'une puissance de calcul absolument phénoménale et qui est également celle disposant de la plus grosse quantité de données personnelles jamais collectées à l'échelle de l'humanité et de l'informatique, cette société là est toujours incapable de faire la différence entre la photo d'un jeune garçon aux cheveux longs et celle d'une fille aux cheveux courts. Cette société là est toujours incapable de faire la différence entre un tableau de Courbet et un zoom de caméra chez Jacquie et Michel. </p>

  514. 

  515. <p><strong>Et que loin de s'en désoler il faut au contraire nous en féliciter</strong> car cette indigence de ce que l'on appelle artificiellement "intelligence", est le signe d'une résistance, <a href="https://affordance.typepad.com/mon_weblog/2011/12/le-mot-friction.html" rel="noopener" target="_blank">d'une friction</a>, d'un pli dans la repasse algorithmique, d'une fêlure, d'une erreur et donc d'une errance et donc d'un nouveau possible. Mais qu'il faut aussi bien sûr continuer de <strong>combattre non pas les algorithmes pour ce qu'ils <em>sont</em> mais leurs conditions et leur périmètre d'application pour ce qu'ils <em>font</em></strong>. </p>

  516. 

  517. <p>Se souvenir, d'ailleurs, à ce moment précis de notre raisonnement, "<em>qu'il n'y a pas d'algorithme. Juste la décision de quelqu'un d'autre</em>", comme l'écrivait Antonio Casilli dans la <a href="https://hal.archives-ouvertes.fr/hal-01625657/document" rel="noopener" target="_blank">préface</a> d'un <a href="https://cfeditions.com/geants/" rel="noopener" target="_blank">remarquable ouvrage</a> ;-)</p>

  518. 

  519. <p>Alors relire le texte de <a href="https://www.harvardmagazine.com/2000/01/code-is-law-html" rel="noopener" target="_blank">Lawrence Lessig paru en 2000, titré "Code Is Law"</a>, dans lequel on pouvait lire ceci : </p>

  520. 

  521. <blockquote>

  522. <p>"<em>Les choix concernant le code et le droit sont des choix de valeurs. Si c’est le code qui détermine nos valeurs, ne devons-nous pas intervenir dans le choix de ce code  ? Devons-nous nous préoccuper de la manière dont les valeurs émergent ici  ? (...) Le code régule. Il implémente – ou non – un certain nombre de valeurs. Il garantit certaines libertés, ou les empêche. Il protège la vie privée, ou promeut la surveillance. Des gens décident comment le code va se comporter. Des gens l’écrivent. La question n’est donc pas de savoir qui décidera de la manière dont le cyberespace est régulé  : ce seront les codeurs. La seule question est de savoir si nous aurons collectivement un rôle dans leur choix – et donc dans la manière dont ces valeurs sont garanties – ou si nous laisserons aux codeurs le soin de choisir nos valeurs à notre place.</em>" (<a href="https://framablog.org/2010/05/22/code-is-law-lessig/" rel="noopener" target="_blank">Traduction Framasoft</a>)</p>

  523. </blockquote>

  524. 

  525. <p>Se souvenir aussi, comme l'avait écrit et prédit William Gibson en 1894 dans son roman cyber-punk "Neuromancien", se souvenir de ce qu'est vraiment le cyberespace dans lequel les garçons, sur Instagram, ne doivent plus avoir les cheveux longs. Le cyberespace pour Gibson c'est : </p>

  526. 

  527. <blockquote>

  528. <p>"<em>une hallucination consensuelle vécue quotidiennement en toute légalité par des dizaines de millions d'opérateurs, dans tous les pays (...)</em>" </p>

  529. </blockquote>

  530. 

  531. <p>Et que ce qui pose aujourd'hui fondamentalement problème n'est pas la dimension hallucinatoire d'une réalité dans laquelle la représentation visuelle du téton est interdite à la moitié de l'humanité connectée ; ni d'ailleurs la dimension hallucinatoire d'une réalité où tout enfant de sexe masculin aux cheveux longs est assimilé aux interdits algorithmiques genrés réservés aux petites filles ; pas davantage la dimension hallucinatoire d'une réalité dans laquelle <a href="https://www.nextinpact.com/news/108241-plf-2020-selon-note-lrem-bercy-pourra-scruter-facebook-pour-debusquer-fraudeurs.htm" rel="noopener" target="_blank">le ministère des finances d'un état dit de droit se verra finalement bien "autorisé" à scruter la totalité de nos comptes sociaux</a> à la recherche de potentiels signes de fraude. Non.</p>

  532. 

  533. <p><strong>Ce n'est pas la dimension hallucinatoire de notre réalité qui pose problème. Mais la dimension consensuelle de cette hallucination collective. Et ce qu'elle dit de nos renoncements à l'aune de nos tolérances</strong>. Puisque <a href="https://www.affordance.info/mon_weblog/2019/06/lesbienne-raisonnable-quand-sapho-pas-sapho-pas-.html" rel="noopener" target="_blank">ce que nous tolérons indique ce que nous sommes vraiment</a>.    </p>

  534. 

  535. <p><strong>Ce qu'il faut retenir de l'histoire des garçons aux cheveux longs sur Instagram</strong>, c'est qu'une fois de plus "le numérique" oblige, <em>nous</em> oblige à renverser la charge de la preuve. C'est à nous de prouver que nos petits garçons aux cheveux longs ne sont pas des petites filles. C'est à nous de réclamer le droit de pouvoir poster des photos de petits garçons torses nus aux cheveux longs. C'est à nous de le faire après avoir pourtant nous-mêmes patiemment fourni à la plateforme et à ses algorithmes toutes les données, déclaratives et implicites, toutes les preuves, de qui nous étions, de ce que nous faisions et de ce que nous voulions, après que cette collecte et cette captation de données se soient faites au nom d'une plus grande fluidité, d'un plus grand ajustement à nos besoins, d'une meilleure prévisibilité de nos comportements elle-même supposée permettre une meilleur "utilisabilité" (<em>usability</em>) de la plateforme. Mais c'est au final toujours à nous de prouver encore et toujours à la plateforme que nous sommes bien ce que nous sommes. C'est nous qui nous trouvons en situation de réclamer, de quémander ce droit à être ce que nous sommes. Le droit de poster des photos de nos petits garçons aux cheveux longs. Et qui ont, eux aussi, des tétons.</p>

  536. 

  537. <p><em>Ma mère m'a dit, Antoine, fais-toi couper les cheveux,</em><br/><em>Je lui ai dit, ma mère, pour Insta si tu veux.</em></p>

  538. 

  539. <p>Oh Yeah.</p>

  540. 

  541. <p><span><strong>&lt;Mise à jour&gt;</strong></span> On me signale sur Twitter la magnifique <a href="http://www.artnet.com/artists/pierre-auguste-renoir/tête-de-petit-garçon-TehqHCL814r-t4Y0Yx_Gsw2" rel="noopener" target="_blank">"tête de petit garçon" de Renoir</a>. </p>

  542. 

  543. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4d90edc200b-pi"><img alt="Téléchargement" class="asset  asset-image at-xid-6a00d8341c622e53ef0240a4d90edc200b img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4d90edc200b-500wi" title="Téléchargement"/></a></p>

  544.   </article>

  545. </section>

  546. 

  547. 

  548. <nav id="jumpto">

  549.   <p>

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

  551.     <a href="https://www.affordance.info/mon_weblog/2019/10/cheveux-longs-et-algos-courts-.html">Source originale</a> |

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

  553.   </p>

  554. </nav>

  555. 

  556. <footer>

  557.   <div>

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

  559.     <p>

  560.       Bonjour/Hi!

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

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

  563.     </p>

  564.     <p>

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

  566.     </p>

  567.     

  568.     <p>

  569.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  586.     </p>

  587.     <p>

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

  589.     </p>

  590.     <p>

  591.       Je ne traque pas ta navigation mais mon

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

  593.       conserve des logs d’accès.

  594.     </p>

  595.   </div>

  596. </footer>

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

  598.   ;(_ => {

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

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

  601.       e.preventDefault()

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

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

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

  605.     })

  606.   })()

  607. </script>