davidbgk
/
larlet-fr-david-cache
Volgen 1
Ster 0
Vork 0
Code Publicaties 0 Activiteit
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 Commits
1 Branch
Tree: 2e4d51a7b7
Branches Labels
${ item.name }
Maak branch ${ searchTerm }
van '2e4d51a7b7'
${ noResults }
larlet-fr-david-cache/cache/716fa695ec02d2a382911aaa73f.../index.html

index.html 28KB
Ruw Blame Geschiedenis

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627 
  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>Domo Arigato, Mr. Roboto, Tell us Your Secret (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://ia.net/topics/domo-arigato-mr-roboto-tell-us-your-secret/">

  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.   Domo Arigato, Mr. Roboto, Tell us Your Secret (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://ia.net/topics/domo-arigato-mr-roboto-tell-us-your-secret/">Source originale du contenu</a></h3>

  463.     <figure class="text__image-full-width"><img src="http://ia.net/wp-content/uploads/2018/01/Twitter-Optimized-Bot-Tweet-Mobile.png" alt="Twitter Bot Optimized"/></figure>

  464. 

  465. <p><strong>Everybody that has an interest in influencing public opinion will happily pay a handful of Dollars to amplify their voices. Governments, political groups, corporations, traders, and just simple plain trolls will continue to shout through bot armies—as long as it is so cheap. Bots are cheaper than buying ad space, less risky than a network of spies, more efficient and less prone to failure than creating 50 fake accounts by hand. If bots could be identified and tagged, the fake news industry would suffer a heavy blow. Here is how we can make this happen.</strong></p>

  466. 

  467. <p>Did Russia tamper with the US election? Of course. It’s so easy. Why wouldn’t they? And so have the Chinese, 4chan, the Republicans and the Democrats. Of course, Net Neutrality opponents send in bots to make themselves appear like they matter. The weapons industry, the oil industry, finance, tobacco, and the top 1%… Everybody that is unpopular but has the means will jump on the opportunity to make themselves heard.</p>

  468. 

  469. <p>If you are not part of the powerful minority trying to appear democratically relevant, you probably agree that Information Technology has a bot problem. It’s not just the Russians that engage in the manipulation of public discourse. Everybody that wants to amplify their propaganda uses bots. It’s time to put an end to it. Science fiction author Isaac Asimov has defined <a href="http://addsdonna.com/old-website/ADDS_DONNA/Science_Fiction_files/2_Asimov_Reason.pdf">three rules for Robots</a>:</p>

  470. 

  471. <blockquote><p>

  472. 1–A robot may not injure a human being or, through inaction, allow a human being to come to harm.<br/>

  473. 2–A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.<br/>

  474. 3–A robot must protect its own existence as long as such protection does not conflict with the First or Second Laws.

  475. </p></blockquote>

  476. 

  477. <p>Today, information robots are hidden behind a screen, programmed to make us believe they are humans. This calls for a fourth rule. Popular culture has a great answer for that: <a href="https://www.youtube.com/watch?v=uc6f_2nPSX8">“どうもありがとうミスターロボット, 秘密を知りたい.”</a> It’s slightly encoded in Japanese. It says: “Thank you robot, we want to know your secret.” What secret?</p>

  478. 

  479. <blockquote><p>

  480. The time has come at last (secret, secret I’ve got a secret)<br/>

  481. To throw away this mask (secret, secret I’ve got a secret)<br/>

  482. Now everyone can see (secret, secret I’ve got a secret)<br/>

  483. My true identity…

  484. </p></blockquote>

  485. 

  486. <p>To make sure that robots follow the first three rules, we need to make sure whom we are interacting with: Robots must be identifiable.</p>

  487. 

  488. <h2>Facebook vs Twitter</h2>

  489. 

  490. <p>Bots are not only a problem on social media and they are not the only problem we have with Social Media. But social media has taken a center stage in filtering news and forming public opinion and within social media, bots are a core amplifier that needs to be addressed first.</p>

  491. 

  492. <p>Facebook recognized that they play a role in forming public opinion. They reacted by announcing they plan on <a href="https://ia.net/topics/news-from-facebook/">throttling down content from news organizations</a>. Their <a href="https://twitter.com/iA/status/954471768906969088">plan</a> is to vet and rate news through the same logic that has gotten them in trouble in the first place: <a href="https://www.buzzfeed.com/alexkantrowitz/this-is-facebooks-news-survey?utm_term=.iokO7QK1B#.ftrezKVLr">“let the people decide”</a>. Do you hear that crackling noise? That’s 4chan logging into Facebook, waiting to vote.</p>

  493. 

  494. <figure class="text__image-full-width"><img src="http://ia.net/wp-content/uploads/2018/01/bots_grey.png" alt="On the Internet no one knows that you're a bot."/></figure>

  495. 

  496. <p>While Facebook tries to patch their spam holes and tries to shirk its political responsibility for future catastrophes, Twitter <a href="https://blog.twitter.com/official/en_us/topics/company/2018/2016-election-update.html">addressed the bot problem head-on</a>. They have just banned 58’000 accounts they supposed are Russian bots and informed their user base that some of the accounts they had followed were Russian bots.</p>

  497. 

  498. <p>Some have ridiculed Twitter for the false positives they got. And, as so often, the old “Who decides?” “What if they punish the wrong ones?” “The hackers will just get smarter” camps have thrown their same fatalist clichés at those who decide to take responsibility. Luckily, Google doesnt’ treat SEO like a lost fight.</p>

  499. 

  500. <p>Here is a heavy dose of practical philosophy for you: You know who decides? Those who take responsibility. And those who decide and take responsibility shape their destiny. For those who wait and see other people will decide. This is a moment where Twitter can make precious ground over a seemingly invincible Facebook.</p>

  501. 

  502. <h2>Checkmark for bots?</h2>

  503. 

  504. <p>So far, Twitter for focussed on <em>Russian</em> bots. All bots should be marked. Political bots, commercial bots, financial bots, troll bots, fun bots, help bots, sexbots, religious bots, good bad, angry, sad and scientific bots. We need to know who is talking to us and whom we are talking to. How?</p>

  505. 

  506. <p>Twitter has a checkmark for confirmed accounts. How about a checkmark for bots? It’s not hard to do. On today’s Twitter, humans, bots, and feeds look identical. Adding a checkmark for bots and give them a different, robotic typography could do wonders. With this machine-like font and a checkmark, they would stand out, and machines and humans would become discernible:</p>

  507. 

  508. <figure class="text__image-full-width"><img src="http://ia.net/wp-content/uploads/2018/01/Twitter-Bot-Optimized.png" alt="Twitter Bot Optimized"/></figure>

  509. 

  510. <p>In addition to a simple identification Bot-or-Not, Twitter should offer detailed information to why it assumes a bot is a bot and a human is human. It should encourage bots, humans and feeds to self-identify:</p>

  511. 

  512. <figure class="text__image-full-width"><img src="http://ia.net/wp-content/uploads/2018/01/Twitter-Optimized-Detail-View.png"/></figure>

  513. 

  514. <p>As you can see in these sketches, there are a series of identification factors needed to automatically verify an account as being human. It is understood that any automated security can be <a href="https://www.youtube.com/watch?v=fsF7enQY8uI">cheated</a>.</p>

  515. 

  516. <h2>Make Spamming Expensive</h2>

  517. 

  518. <p>The idea here is not to make cheating impossible. The idea is to make cheating expensive. Programming an army of bots in a system without checks and balances is economically interesting. It happens because it is cheap.</p>

  519. 

  520. <p>If you have to build mechanical devices that enter information, your cost per spam will go up exponentially. If you use very cheap human labor in combination with so-called persona software, sadly, you may still be in an economically viable range. But the likeliness of human error increases. Low-paid humans that are employed to manipulate information make mistakes. Humans increase the risk of a leak. And, compared to machine run bot armies, humans will always be far more expensive.</p>

  521. 

  522. <p>Stricter guidelines for bots will not only make it more expensive to post. It will also become more expensive when you get caught. Running a bot that pretends to be human should result in termination of the account and in restrictions for and exposure of people running these accounts. Cheating has to hurt. It has to be risky enough so cheaters get nervous and make mistakes.</p>

  523. 

  524. <h2>How to Spot a Bot</h2>

  525. 

  526. <p>From this relatively simple logic “make bots recognizable”, you can derive a series of checks and balances that make spamming, not impossible, but expensive. There are many ways machines can imitate us, but at some point machines imitating us become more expensive than humans cheating. Here are some requirements that will increase the cost of spamming:</p>

  527. 

  528. <ol>

  529. <li><strong>Require that information was entered by hand:</strong> a) Measure if human touch is used on touch devices. b) Check how long it takes to type a message. c) Take into account how many corrections were needed to complete the message. d) Measure organic movement while editing. If done properly, it can get very expensive in terms of time and infrastructure to cheat the system.

  530. </li>

  531. <li>

  532. <p><strong>Require that tweets are posted by hand:</strong> Check if a Tweet was posted automatically or by hand. Offer a possibility to proof the authenticity through fingerprint, face or iris scanning. Posts don’t need to be fingerprinted every time. Once in a while is enough.</p>

  533. </li>

  534. <li>

  535. <p><strong>Check for humane time metrics:</strong> Humans need sleep. Humans have physical limits to how much they can post within a certain time span.</p>

  536. </li>

  537. <li>

  538. <p><strong>Check for human error:</strong> Humans make mistakes and delete tweets. Some bots post-and-delete-post-and-delete so they look more humane. A simple tweeted vs deleted measure can serve as a guide whether an account is in the human or robotic range.</p>

  539. </li>

  540. <li>

  541. <p><strong>Linguistic patterns:</strong> Humans have peculiar quirks when they speak. Your language is as unique as a fingerprint. Language processing is quite advanced these days. It is mostly used to fool us, but it can as well be used to add additional hurdles for those who abuse technology.</p>

  542. </li>

  543. <li>

  544. <p><strong>Social Control:</strong> A feedback button offers the opportunity for human intervention in case a bot slips through the crack of auto-detection or an account gets falsely accused. The feedback process must be cleverly designed so it is even more expensive to game than the regular posting process.</p>

  545. </li>

  546. <li>

  547. <p><strong>Technical Fingerprinting:</strong> Twitter has your IP-number, your device ID and tons of analytics data. The same machinery using your personal data to sell you soap and toasters can be used to assess the likeliness of an account being a bot. Users that buy things are less likely to be bots. And if they buy things to appear more credible, good, then the price for spamming goes up.</p>

  548. </li>

  549. </ol>

  550. 

  551. <p>This is a draft made in 10 years and an afternoon. Some of these measures can be implemented in a couple of days, others will take time. It’s is a quick draft as a present from us to Twitter. There is lots of room for improvement. The list is incomplete and we have no doubt that the Twitter design team will do a much better job than we do at this.</p>

  552. 

  553. <h2>Conclusion</h2>

  554. 

  555. <p>In order to make sure that robots serve us and not the other way around, we need to make sure that we know when we talk to robots and when they talk to us. Asimov’s three laws don’t make sense if we cannot discern human from robot. Identifying robots will kill a core amplifier of spam on social media and elsewhere.</p>

  556. 

  557. <p>We know that Twitter design reads our blog and we hope that the Twitter leadership will appreciate the intention of this post. Moreover, we hope that they dare to mark bots even though their active user numbers might go down significantly. We believe that the earthquake that a sudden marking of all bots will cause will have a deep impact not just on Twitter but on all social media. The long-term effect will be an increase in trust. If this is done correctly, it will trigger a lot of bot and feed accounts to self-identify.</p>

  558. 

  559. <p>It is understood that bots are not only a problem on social media and they are not the only problem we have with Social Media, but they are a cheap amplifier of many issues we have today. Getting rid of them will mark a precarious blow for the tricksters and criminals that are trying to mess with our minds and lives and our future.</p>

  560. 

  561. <p>For those who didn’t know: The illustration is our riff on Peter Steiner’s Internet-famous <a href="https://en.wikipedia.org/wiki/On_the_Internet,_nobody_knows_you're_a_dog">cartoon</a> from <em>The New Yorker</em> on July 5th, 1993.</p>

  562. 

  563. <p><img src="http://ia.net/wp-content/uploads/2018/01/boy_grey.png" alt="On the Internet no one knows you are not 1000 bots"/></p>

  564.   </article>

  565. </section>

  566. 

  567. 

  568. <nav id="jumpto">

  569.   <p>

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

  571.     <a href="https://ia.net/topics/domo-arigato-mr-roboto-tell-us-your-secret/">Source originale</a> |

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

  573.   </p>

  574. </nav>

  575. 

  576. <footer>

  577.   <div>

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

  579.     <p>

  580.       Bonjour/Hi!

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

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

  583.     </p>

  584.     <p>

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

  586.     </p>

  587.     

  588.     <p>

  589.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  606.     </p>

  607.     <p>

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

  609.     </p>

  610.     <p>

  611.       Je ne traque pas ta navigation mais mon

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

  613.       conserve des logs d’accès.

  614.     </p>

  615.   </div>

  616. </footer>

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

  618.   ;(_ => {

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

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

  621.       e.preventDefault()

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

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

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

  625.     })

  626.   })()

  627. </script>