davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
314 提交
1 分支
目录树: e9ef5f47dd
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'e9ef5f47dd'
${ noResults }
larlet-fr-david-cache/cache/2d910e60d573355890413361600.../index.html

index.html 32KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613 
  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>Debord(er) la carte (archive) — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

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

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

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

  31.   <link rel="canonical" href="http://strabic.fr/Debord-er-la-carte">

  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.   Debord(er) la carte (archive)

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

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://strabic.fr/Debord-er-la-carte">Source originale du contenu</a></h3>

  463.     <div class="chapo"><p>"Une carte du monde ne faisant pas mention du royaume d’Utopie ne mérite même pas un coup d’œil, car elle laisse à l’écart le seul pays où l’humanité finit toujours par aborder." Oscar Wilde, <i>L’Âme humaine et le socialisme</i>, 1891.</p></div>

  464. 

  465. <p>Fondateur de l’Internationale Situationniste (I.S.), mouvement d’avant-garde fondé en 1957 et dissous en 1972, Guy Debord aimait les cartes et les plans. Plans de Paris, plans de bataille, carte du Tendre et cartes d’état major. Poète, cinéaste, théoricien marxiste et stratège révolutionnaire, Guy Debord était aussi un grand marcheur et un excellent buveur, deux qualités essentielles pour prétendre à la dérive. Enfant terrible de la promenade baudelairienne, des vagabondages de Thomas de Quincey à Londres et des surréalistes à Paris, la dérive consiste à marcher sans but dans la ville, à s’y laisser aller aux sollicitations du milieu. Ça a l’air fastoche comme ça, mais il y faut beaucoup d’application. "Les difficultés de la dérive sont celles de la liberté"<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb1" class="spip_note" rel="footnote" title="&quot;Théorie de la dérive&quot;, Les Lèvres Nues, n° 9, novembre 1956." id="nh1">1</a>]</span><span class="csfoo htmlb"/>. Tout concourt en effet à diriger les pas urbains. Il ne s’agit pas pour autant de marcher au hasard, mais de suivre le "relief psychogéographique", d’explorer les "unités d’ambiances" ou "plaques tournantes" et d’en rendre éventuellement compte par la fabrication de plans plus ou moins élaborés, les fameuses cartes psychogéographiques.</p>

  466. 

  467. <p><span class="csfoo htmla"/><span class="spip_document_1023 spip_documents">

  468. <img src="http://strabic.fr/IMG/jpg/image1.jpg" alt=""/></span><span class="csfoo htmlb"/></p>

  469. 

  470. <p><span>Guy Debord, <i>Guide psychogéographique de Paris, Discours sur les passions de l’amour, pentes psychogéographiques de la dérive et localisation d’unités d’ambiance</i>, dépliant édité par le Bauhaus Situationniste, imprimé chez Permild &amp; Rosengreen, Copenhague, mai 1957.</span></p>

  471. 

  472. <p><q>La fabrication de cartes psychogéographiques […] peu[t] contribuer à éclairer certains déplacements d’un caractère non certes de gratuité, mais de parfaite insoumission aux sollicitations habituelles.<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb2" class="spip_note" rel="footnote" title="In &quot;Introduction à une critique de la géographie urbaine&quot;, Les Lèvres Nues, n° (...)" id="nh2">2</a>]</span><span class="csfoo htmlb"/></q></p>

  473. 

  474. <p>Magnifiquement pratiquées par Ivan Chtcheglov, aka Gilles Ivain, puis, avec plus ou moins de bonheur, par les situationnistes Ralph Rumney (fondateur et unique membre du Comité psychogéographique de Londres) et Abdelhafid Khatib, dérive et psychogéographie sont deux éléments essentiels de l’arsenal situ tel que le présente le tract <i>Nouveau théâtre d’opération dans la culture</i>. La dimension stratégique de ces pratiques est explicite tant par le titre du tract  – théâtre d’opération –, que par la carte d’état major ou le schéma des pratiques situationnistes qui l’illustrent.</p>

  475. 

  476. <p><span class="csfoo htmla"/><span class="spip_document_1024 spip_documents">

  477. <img src="http://strabic.fr/IMG/jpg/Image2.jpg" alt=""/></span><span class="csfoo htmlb"/></p>

  478. 

  479. <p><span>Section française de l’Internationale Situationniste, <i>Nouveau théâtre d’opérations dans la culture</i>, tract, janvier 1958.</span></p>

  480. 

  481. <p>La psychogéographie est donc d’abord affaire d’insoumission. Dans ces cartes se heurtent objectivité apparente du plan et expérience subjective de la ville. Ces cartes sont des détournements<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb3" class="spip_note" rel="footnote" title="&quot;Mode d’emploi du détournement&quot;, Les Lèvres Nues, n° 8, mai 1956." id="nh3">3</a>]</span><span class="csfoo htmlb"/> situationnistes. Le sujet dérivant détourne l’espace urbain de sa fonction première – orienter les foules ; le cartographe psychogéographique détourne la carte officielle pour lui faire dire ce qu’elle cache – la fragmentation de l’espace urbain. Il s’agit donc de faire la critique des espaces réel, représenté et vécu, par l’introduction de la subjectivité là où on ne l’attendait pas, là où on n’en voulait pas : dans la ville, dans la carte.</p>

  482. 

  483. <p><strong>Et aujourd’hui ? Qu’en est-il de ces pratiques ?</strong></p>

  484. 

  485. <p>Dérive et psychogéographie ont leurs embaumeurs : on a ainsi vu le <a href="http://www.104.fr/#/fr/" class="spip_out" rel="external">104</a> et la <a href="http://www.aubervilliers.fr/" class="spip_out" rel="external">Mairie d’Aubervilliers</a> organiser annuellement des "dérives" en autocar<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb4" class="spip_note" rel="footnote" title="http://synesthesie.com/PDF/CP-balad..." id="nh4">4</a>]</span><span class="csfoo htmlb"/> (sic !) avec passage par le "Village de l’innovation" où le dériveur téléguidé est "invité" à admirer "robots humanoïdes, objets communicants, plate-forme 3D de réalité augmentée…", afin de "découvrir et comprendre la société vers laquelle la technologie nous fait évoluer !"<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb5" class="spip_note" rel="footnote" title="http://www.futur-en-seine.fr/fiche/..." id="nh5">5</a>]</span><span class="csfoo htmlb"/></p>

  486. 

  487. <p><strong>On imagine Debord ravi…</strong></p>

  488. 

  489. <p>… et on songe à la flopée d’applications pour <i>smartphones</i> qui se revendiquent plus ou moins explicitement du situationnisme et proposent des dérives urbaines en réalité augmentée. Dans <i>Situationist</i>, par exemple, "the first Marxist iPhone app" (sic !), il s’agit "d’interagir" avec le premier quidam similairement équipé de ladite application sur son smartphone, en lui lançant un "défi" pré-enregistré et signalé aux terminaux téléphoniques activés à proximité. Petit florilège : "compliment me on my haircut", "let me inspect the content of your bag for bombs and such", "ask me what I think of the war"<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb6" class="spip_note" rel="footnote" title="http://situationistapp.com/" id="nh6">6</a>]</span><span class="csfoo htmlb"/>.</p>

  490. 

  491. <p><strong>C’est Marx qui doit être content…</strong></p>

  492. 

  493. <p><span class="csfoo htmla"/><span class="spip_document_1025 spip_documents">

  494. <img src="http://strabic.fr/IMG/jpg/image3.jpg" alt=""/></span><span class="csfoo htmlb"/></p>

  495. 

  496. <p><span>Capture d’écran du site de l’application “<i>Situationist</i>”. On notera que l’application a été bannie de l’<i>Apple Store</i>, pour des <a href="http://benrik.co.uk/content/" class="spip_out" rel="external">raisons</a> qui n’ont rien à voir, comme on s’en doute, avec l’orthodoxie situationniste.</span></p>

  497. 

  498. <p>Matthieu Duperrex, passionnant rédacteur du site <a href="http://www.urbain-trop-urbain.fr/" class="spip_out" rel="external"><i>Urbain, trop urbain</i></a> a ainsi courageusement tenté de prendre au sérieux ces bâtards situationnistes<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb7" class="spip_note" rel="footnote" title="http://owni.fr/2011/06/20/pratiquer..." id="nh7">7</a>]</span><span class="csfoo htmlb"/>. Quoiqu’indulgent – trop peut-être –, il en pointe les limites au regard notamment des objectifs révolutionnaires assignés par Debord et ses camarades aux pratiques situationnistes. On peine à croire en effet que ces applications, fondées sur la géolocalisation et la communication entre objets – téléphones, satellites –, puissent alimenter la subversion.</p>

  499. 

  500. <p>Si ces applications ont quelque chose de situationniste, c’est plutôt dans la capacité de leur usage pauvre à révéler la pauvreté de nos conditions urbaines, ou, pour reprendre le terme de Günther Anders, notre schyzotopie<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb8" class="spip_note" rel="footnote" title="Voir L’Obsolescence de l’homme, tome 2, Sur la destruction de la vie à (...)" id="nh8">8</a>]</span><span class="csfoo htmlb"/>. Bref, on se fait royalement chier ou on flippe.</p>

  501. 

  502. <p><q>Pourquoi tant d’héritiers illégitimes – mous du genou, si vous préférez – de la psychogéographie ?</q></p>

  503. 

  504. <p>On pourrait avancer que le recours à la figuration cartographique de la subjectivité, de la part de Debord, constituait sinon une erreur tactique, du moins l’expression "artistique" – et donc, en toute logique situationniste, limitée, partielle – d’une intention révolutionnaire qui se voyait par là occultée. En se cartographiant, la subjectivité croit détourner la technique, mais elle risque tout autant, utilisant son langage, d’être récupérée par elle. C’est tout le problème que résume Daniel de Zeeuw dans un article consacré aux rapports entre <i>data visualisation</i> et le <i>cognitive mapping</i> de Fredric Jameson<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb9" class="spip_note" rel="footnote" title="http://mastersofmedia.hum.uva.nl/20... et Frederic Jameson, &quot;Cognitive (...)" id="nh9">9</a>]</span><span class="csfoo htmlb"/>.</p>

  505. 

  506. <p>Mais Debord aimait les cartes. Outre ses plans psychogéographiques, il a par exemple cartographié sa vie de lecteur en reportant sur une mappemonde ses auteurs favoris<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb10" class="spip_note" rel="footnote" title="Guy Debord, Œuvres, Quarto, Gallimard, 2004, p.1290-1291" id="nh10">10</a>]</span><span class="csfoo htmlb"/>, ou schématisé comme sur un plan de bataille "les ennemis de l’I.S. et leurs relations en 1962"<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb11" class="spip_note" rel="footnote" title="Guy Debord, Œuvres, Quarto, Gallimard, 2004, p.610" id="nh11">11</a>]</span><span class="csfoo htmlb"/>.</p>

  507. 

  508. <p><span class="csfoo htmla"/><span class="spip_document_1026 spip_documents">

  509. <img src="http://strabic.fr/IMG/jpg/image4.jpg" alt=""/></span><span class="csfoo htmlb"/></p>

  510. 

  511. <p><span>À gauche : “Géographie littéraire” de Guy Debord, manuscrit sur carte géographique, années 1970. À droite : ”Les ennemis de l’IS et leurs relations, ceci en 1962” par Guy Debord.</span></p>

  512. 

  513. <p>Passionné de stratégie, il a surtout imaginé avec son épouse Alice Becker-Ho, un fascinant Jeu de la Guerre où échec et poker se rencontrent sur un plateau de jeu militaire.</p>

  514. 

  515. <p><span class="csfoo htmla"/><span class="spip_document_1027 spip_documents">

  516. <img src="http://strabic.fr/IMG/jpg/image5.jpg" alt=""/></span><span class="csfoo htmlb"/><br class="autobr"/>

  517. <span class="csfoo htmla"/><span class="spip_document_1028 spip_documents">

  518. <img src="http://strabic.fr/IMG/jpg/image6.jpg" alt=""/></span><span class="csfoo htmlb"/></p>

  519. 

  520. <p><span>En haut : Schéma de départ et mouvements principaux de la partie à l’origine du livre <i>Le “Jeu de la Guerre”, Relevé des positions successives de toutes les forces au cours d’une partie,</i> Alice Becker-Ho et Guy Debord, Paris, éditions Gérard Lébovici, 1987. En bas : Alice et Guy Debord jouant au “<i>Jeu de la guerre</i>”, août 1987 (photo © Jeanne Cornet).</span></p>

  521. 

  522. <p>Cette dernière œuvre cartographique permet de reconsidérer la dérive et la psychogéographie non pas tant selon la traditionnelle filiation littéraire et esthétique mentionnée plus haut, mais en fonction d’objectifs stratégiques : comme outils préparatoires à la guérilla urbaine.</p>

  523. 

  524. <p>À quoi sert en effet d’explorer la ville, d’en découvrir les recoins, les raccourcis, les percées et les détours, sinon pour pouvoir au besoin y déjouer le pouvoir ? L’objectif n’est donc pas tant de projeter sa subjectivité dans la ville ou sur une carte, mais d’apprendre à connaître la ville comme un sujet, de faire de la ville une alliée. Le grand détournement de la ville, un autre nom pour l’insurrection urbaine ? Alors que la psychogéographie semblait oubliée après le tournant radical politique de l’Internationale Situationniste au début des années 1960, on en retrouve la trace dans un document inédit : l’ordre du jour de la 7<sup class="typo_exposants">e</sup> conférence de l’I.S. à Paris mentionne en effet la mise au point d’une "ligne d’orientation générale préalable à une psychogéographie insurrectionnelle de Paris"<span class="csfoo htmla"/><span class="spip_note_ref"> [<a href="#nb12" class="spip_note" rel="footnote" title="Fonds Guy Debord, département des manuscrits, BnF, NAF28603 - CV, &quot;Ordre du (...)" id="nh12">12</a>]</span><span class="csfoo htmlb"/>.</p>

  525. 

  526. <p>"La principale difficulté de la dérive est la liberté" écrivait Debord, mais la principale difficulté de la vie urbaine en général n’est-elle pas celle, précisément, de la liberté ? Le territoire de la ville s’est vu par exemple, en l’espace de quelques années, quadrillé par des caméras de vidéosurveillance. On s’y trouve partout comme dans un panoptique invisible.</p>

  527. 

  528. <p>La critique de ces dispositifs émane de groupes formés dès le milieu des années 1990, tels les <a href="http://www.notbored.org/the-scp.html" class="spip_out" rel="external"><i>Surveillance Camera Players</i></a> à New York, ou le collectif <a href="http://souriez.info/" class="spip_out" rel="external">Souriez, vous êtes filmés</a> en France. Leur répertoire d’action : manifestes, visites guidées pour familiariser ceux qui sont surveillés avec ceux qui les surveillent, performances loufoques devant les caméras à destination des employés chargés de leur visionnage. Ils produisent et diffusent aussi des cartes indiquant l’emplacement des caméras dans la ville.</p>

  529. 

  530. <p><span class="csfoo htmla"/><span class="spip_document_1029 spip_documents">

  531. <img src="http://strabic.fr/IMG/jpg/image7.jpg" alt=""/></span><span class="csfoo htmlb"/></p>

  532. 

  533. <p><span><i>Surveillance Camera Players, Times Square CCTV Cameras</i>, 2005.</span></p>

  534. 

  535. <p>Il s’agit de fournir des armes pour éviter au sujet d’y être systématiquement repéré – et d’offrir ainsi, en creux, la possibilité pour les individus d’échapper à leur "cartographication". En somme, une anti-cartographie de la subjectivité. Le fascinant ouvrage <a href="http://www.an-atlas.com/contents/iaa_iaa.html" class="spip_out" rel="external"><i>An Atlas of Radical Cartography</i></a> présente ainsi les cartes de l’<i>Institute for Applied Autonomy</i> qui dressent des itinéraires de moindre surveillance à travers Manhattan.</p>

  536. 

  537. <p><span class="csfoo htmla"/><span class="spip_document_1030 spip_documents">

  538. <img src="http://strabic.fr/IMG/jpg/image8.jpg" alt=""/></span><span class="csfoo htmlb"/></p>

  539. 

  540. <p><span><i>Institute for Applied Autonomy with Site-R, Routes of Least Surveillance</i>, Manhattan, NYC, 2001/2007.</span></p>

  541. 

  542. <p>Mais ce faisant, ces groupes fournissent aussi aux "surveilleurs" d’excellentes synthèses cartographiques pour évaluer le parc de caméras privées et publiques déjà en place, et envisager ainsi son accroissement rationnel. Producteur de contenu, le cartographe ne sait jamais entre les mains de qui ses cartes vont tomber.</p>

  543. 

  544. <p><span class="csfoo htmla"/><span class="spip_document_1038 spip_documents">

  545. <img src="http://strabic.fr/IMG/jpg/image9.jpg" alt=""/></span><span class="csfoo htmlb"/></p>

  546. 

  547. <p><span>Vidéogrammes tirés de <i>Elle cause plus... elle flingue</i>, 1972.</span></p>

  548. 

  549. <p>Bref, il faudrait pouvoir sortir de la carte.<br/>Ou ne jamais cesser de les détourner.</p>

  550.   </article>

  551. </section>

  552. 

  553. 

  554. <nav id="jumpto">

  555.   <p>

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

  557.     <a href="http://strabic.fr/Debord-er-la-carte">Source originale</a> |

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

  559.   </p>

  560. </nav>

  561. 

  562. <footer>

  563.   <div>

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

  565.     <p>

  566.       Bonjour/Hi!

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

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

  569.     </p>

  570.     <p>

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

  572.     </p>

  573.     

  574.     <p>

  575.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  592.     </p>

  593.     <p>

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

  595.     </p>

  596.     <p>

  597.       Je ne traque pas ta navigation mais mon

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

  599.       conserve des logs d’accès.

  600.     </p>

  601.   </div>

  602. </footer>

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

  604.   ;(_ => {

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

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

  607.       e.preventDefault()

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

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

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

  611.     })

  612.   })()

  613. </script>