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.

index.html 12KB

4 년 전
4 년 전
4 년 전
4 년 전
4 년 전
4 년 전
4 년 전
4 년 전
4 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>How to Fake a Traffic Jam on Google Maps (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://www.vice.com/en_us/article/9393w7/this-man-created-traffic-jams-on-google-maps-using-a-red-wagon-full-of-phones">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>How to Fake a Traffic Jam on Google Maps</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://www.vice.com/en_us/article/9393w7/this-man-created-traffic-jams-on-google-maps-using-a-red-wagon-full-of-phones" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p> Artist Simon Wreckert walked the streets of Berlin tugging a red wagon behind him. Wherever he went, Google Maps showed a congested traffic jam. People using Google Maps would see a thick red line indicating congestion on the road, even when there was no traffic at all. Each and every one of those 99 phones had Google Maps open, giving the virtual illusion that the roads were jam packed.</p>
  69. <p><p> “By transporting the smartphones in the street I’m able to generate virtual traffic which will navigate cars on another route,” Wreckert told Motherboard in a Twitter DM. “Ironically that can generate a real traffic jam somewhere else in the city.”</p>
  70. <p>Wreckert told Motherboard that he did the hack/art installation to get people to think about the space we give to cars in public life and the data we rely on everyday. </p>
  71. <p> “Isn’t it crazy [how] much space is used by a car in a city compared to the usage?” he said. “The hack shows us what is possible with this technology and who we rely on.”</p>
  72. <p> To pull off the trick, Wreckert rented 99 smartphones, all of them Android devices, and purchased 99 sims cards for them online. He said he’d spend an hour or two on each spot, walking back and forth on the street to generate a traffic jam. “My subjective feeling was that even this short time was already enough to change the traffic in the street,” he said.</p>
  73. <p> “‘The map is not the territory ... but another version of reality,’ Wreckert said, quoting semanticist Alfred Korzybski, one of William S. Burroughs’ biggest influences. “Data is always translated to what they might be presented. The images, lists, graphs, and maps that represent those data are all interpretations, and there is no such thing as neutral data. Data is always collected for a specific purpose, by a combination of people, technology, money, commerce, and government.”</p><div class="article__media"><picture class="article__image"><source media="(max-width: 25em)" srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-srcset="https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=400:*, https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=600:* 2x"><source media="(max-width: 40.625em)" srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-srcset="https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=650:*, https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=975:* 2x"><source media="(max-width: 53.125em)" srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-srcset="https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=850:*, https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=1275:* 2x"><source media="(max-width: 65.625em)" srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-srcset="https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=1050:*, https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=1575:* 2x"><source media="(min-width: 65.625em)" srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-srcset="https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=1050:*, https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png?resize=1575:* 2x"><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="1580744367101-Screen-Shot-2020-02-03-at-103747-AM" class="col-12-xs" data-src="https://video-images.vice.com/_uncategorized/1580744367101-Screen-Shot-2020-02-03-at-103747-AM.png"/></source></source></source></source></source></picture><p class="article__image-caption">Image: Simon Wreckert</p></div> <p> The maps are their own territory, their own objective reality, not just a reflection of the real world but a branch of it. Wreckert was showing us all how data and maps can affect the world they’re meant to chart. “Maps have the potential as an instrument of power,” he said. “They substitute political and military power in a way that represents the state borders between territories and they can repeat, legitimate, and construct the differences of classes and social self-understandings.” </p>
  74. <p> Data is not objective and the maps themselves have biases. Showing how the data can be hacked and manipulated is like pointing out the Emperor has no clothes. </p>
  75. <p> “In this process it is pointing out the fact that we are highly focused on the data and tent to see them as objective, unambiguous, and interpretation free,” Wreckert said. “In doing so, a blindness arises against the processes that data generates and the assumption that numbers speak for themselves. Not only the collection of data provides an interpretative scope, but also computing processes allows further interpretations.” </p>
  76. <p> “Thus data are viewed as the world itself, forgetting that the numbers are only representing a model of the world,” he said.</p></p>
  77. </main>
  78. </article>
  79. <hr>
  80. <footer>
  81. <p>
  82. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  83. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  84. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  85. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  86. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  87. </p>
  88. <template id="theme-selector">
  89. <form>
  90. <fieldset>
  91. <legend>Thème</legend>
  92. <label>
  93. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  94. </label>
  95. <label>
  96. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  97. </label>
  98. <label>
  99. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  100. </label>
  101. </fieldset>
  102. </form>
  103. </template>
  104. </footer>
  105. <script type="text/javascript">
  106. function loadThemeForm(templateName) {
  107. const themeSelectorTemplate = document.querySelector(templateName)
  108. const form = themeSelectorTemplate.content.firstElementChild
  109. themeSelectorTemplate.replaceWith(form)
  110. form.addEventListener('change', (e) => {
  111. const chosenColorScheme = e.target.value
  112. localStorage.setItem('theme', chosenColorScheme)
  113. toggleTheme(chosenColorScheme)
  114. })
  115. const selectedTheme = localStorage.getItem('theme')
  116. if (selectedTheme && selectedTheme !== 'undefined') {
  117. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  118. }
  119. }
  120. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  121. window.addEventListener('load', () => {
  122. let hasDarkRules = false
  123. for (const styleSheet of Array.from(document.styleSheets)) {
  124. let mediaRules = []
  125. for (const cssRule of styleSheet.cssRules) {
  126. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  127. continue
  128. }
  129. // WARNING: Safari does not have/supports `conditionText`.
  130. if (cssRule.conditionText) {
  131. if (cssRule.conditionText !== prefersColorSchemeDark) {
  132. continue
  133. }
  134. } else {
  135. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  136. continue
  137. }
  138. }
  139. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  140. }
  141. // WARNING: do not try to insert a Rule to a styleSheet you are
  142. // currently iterating on, otherwise the browser will be stuck
  143. // in a infinite loop…
  144. for (const mediaRule of mediaRules) {
  145. styleSheet.insertRule(mediaRule.cssText)
  146. hasDarkRules = true
  147. }
  148. }
  149. if (hasDarkRules) {
  150. loadThemeForm('#theme-selector')
  151. }
  152. })
  153. </script>
  154. </body>
  155. </html>