davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
396 коммитов
1 ветка
Дерево: f82e56a712
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'f82e56a712'
${ noResults }
larlet-fr-david-cache/cache/4568871f2df349c5815a931e197.../index.html

index.html 28KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633 
  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>Et si demain on ne prenait plus l'avion ? (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.linkedin.com/pulse/et-si-demain-ne-prenait-plus-lavion-audrey-blanchard">

  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.   Et si demain on ne prenait plus l'avion ? (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.linkedin.com/pulse/et-si-demain-ne-prenait-plus-lavion-audrey-blanchard">Source originale du contenu</a></h3>

  463.     <p>Il n’y a pas un jour sans que je me pose la question de notre futur à nous humains, du futur de la biodiversité, du futur de la planète…</p>

  464. 

  465. <p><a href="https://www.ipcc.ch/reports/" target="_blank" rel="nofollow noopener">Le rapport du GIEC </a>n’est plus alarmant, il est terrorisant. Pendant ce temps, la forêt amazonienne brûle, nous assistons à la sixième extinction de masse de la biodiversité, il n’y aura bientôt plus suffisamment <a href="https://www.la-croix.com/Sciences-et-ethique/Environnement/Le-declin-insectes-pollinisateurs-suscite-linquietude-2019-09-25-1201049797" target="_blank" rel="nofollow noopener">d’insectes pollinisateurs</a> pour maintenir une flore suffisante à notre survie et pendant ce temps-là, on essaye d’inventer des drones pour remplacer les abeilles…</p>

  466. 

  467. <p>Suite à de nombreux allers-retours en avion ces derniers mois, j’ai commencé à développer le syndrome “<a href="https://www.lemonde.fr/planete/article/2019/04/02/climat-la-honte-de-voler-gagne-du-terrain-chez-les-suedois_5444664_3244.html" target="_blank" rel="nofollow noopener">Flygskam</a>”, ce sentiment de honte à l’idée des conséquences liées à l’impact écologique de mon vol à venir.</p>

  468. 

  469. <p>J’en ai parlé autour de moi et je me suis aperçue que je n’étais pas seule. J’ai même noté quelques citations qui m’ont beaucoup marquée:</p>

  470. 

  471. <blockquote>“Ca fait quelques mois que je me dis que j’arrache la planète dès que je prends l’avion.” <em>Une amie d’enfance (28 ans)</em></blockquote>

  472. 

  473. <blockquote>“Avec le boulot, je fais trop d’allers retours en avion, là j’ai deux semaines de vacances je peux prendre un jour de voyage pour rentrer.” <em>Une collègue (26 ans)</em></blockquote>

  474. 

  475. <blockquote>“Je suis en phase de transition écologique personnelle, et un groupe d’amis me propose d’aller en week-end à Marrakech car ils viennent d’ouvrir une ligne pas chère. Je ne peux plus, ce n’est plus possible.” <em>Patrick M. (37 ans)</em></blockquote>

  476. 

  477. <p>Je suis designer dans une agence qui s’appelle <a href="https://www.haigo.fr/" target="_blank" rel="nofollow noopener">Haigo</a>, et nous aimons travailler sur des projets qui ont de l’impact au delà des simples écrans, produits ou services, mais aussi sur <a href="https://www.youtube.com/watch?v=xKxgbAqbzdo" target="_blank">tout l’écosystème</a>. On a donc décidé de travailler sur un projet pendant 5 jours autour de cette problématique liée aux trajets en avion. En s’extrayant des polémiques, de “l’aquoibonisme” et de toutes ces bonnes raisons qui font qu’on ne fait rien.</p>

  478. 

  479. <h2>Et si demain, on ne prenait plus que le train ?</h2>

  480. 

  481. <p>On ne va certainement pas changer le monde en 5 jours, mais on va déjà essayer d’amener notre pierre à l’édifice.</p>

  482. 

  483. <h3>Je rêve d’aller à Copenhague pour quelques jours.</h3>

  484. 

  485. <p>Aujourd’hui, <a href="https://www.rome2rio.com/map/17-Rue-du-4-septembre-75002-Paris-France/Copenhagen" target="_blank" rel="nofollow noopener">Rome2rio</a> m’indique que je vais mettre 5 heures porte à porte en avion, contre 15 heures en train. Il faut que j’accepte de tripler mon temps de trajet.</p>

  486. 

  487. <h3>On a trouvé 7 idées de solution qui pourront nous faire sauter le pas.</h3>

  488. 

  489. <p>On est bien conscient que des projets similaires sont peut-être déjà disponibles ou en cours de développement à la SNCF, Trainline et consorts. On ne les a cependant pas trouvés pendant nos recherches. N’hésitez pas à nous dire si vous connaissez des initiatives qui correspondent aux idées suivantes: </p>

  490. 

  491. <h2><br/></h2>

  492. 

  493. <h2>1. Connaître l’impact de nos trajets en avion</h2>

  494. 

  495. <p>Demain, je veux être interpellée lorsque je recherche machinalement un trajet sur un site comparateur de vols. Je veux me rendre compte de l’impact environnemental de mon choix par défaut, mon choix de confort, et être à un clic du trajet alternatif en train.</p>

  496. 

  497. <p><strong>💡 Un plug-in détecte ma recherche sur les comparateurs de vols et me redirige vers un trajet alternatif en train.</strong></p>

  498. 

  499. <p><br/></p>

  500. 

  501. <h2>2. Comparer plus justement les différentes options</h2>

  502. 

  503. <p>Je veux avoir plus d’éléments de comparaison entre un trajet en avion et son équivalent ferroviaire afin de prendre ma décision.</p>

  504. 

  505. <p>Un temps de trajet d’avion ne se résume pas au temps de vol et devrait comprendre le trajet vers l’aéroport, le temps d’attente avant d’embarquer, le temps d’attente des potentiels bagages, le trajet de l’aéroport à la ville de destination…</p>

  506. 

  507. <p>Je voudrais idéalement être tenue au courant des frais cachés de mon trajet en avion : prix des transports en commun et taxis pour rejoindre le centre-ville, tarif du parking pour ma voiture à l’aéroport…</p>

  508. 

  509. <p><strong>💡Les différentes options de voyage peuvent être comparées en fonction du temps réel de trajet et des émissions de CO₂.</strong></p>

  510. 

  511. <p><strong>💡Lorsque c’est possible, une option “aventure” est proposée et liste des idées de transports originaux (kayak, bateau à voile, vélo…).</strong></p>

  512. 

  513. <h3><br/></h3>

  514. 

  515. <h2>3. Penser le trajet comme un voyage</h2>

  516. 

  517. <p>Je veux me rendre compte de la distance que je vais parcourir et comprendre les régions que je vais traverser. Je veux pouvoir me réjouir à l’avance des paysages visibles depuis la fenêtre et des villes que je vais découvrir pendant mes correspondances.</p>

  518. 

  519. <p><strong>💡La plateforme liste les sites historiques et paysages remarquables visibles sur mon trajet.</strong></p>

  520. 

  521. <h2><br/></h2>

  522. 

  523. <h2>4. Profiter au mieux du spectacle par la fenêtre</h2>

  524. 

  525. <p>Quitte à passer des heures dans le train, autant avoir la meilleure place possible. Je veux savoir comment me placer pour rendre mon voyage le plus scénique possible.</p>

  526. 

  527. <p><strong>💡 La plateforme recommande la meilleure place dans le train pour profiter des lieux traversés et propose une galerie de photos.</strong></p>

  528. 

  529. <h2><br/></h2>

  530. 

  531. <h2>5. Rester connecté pendant le voyage</h2>

  532. 

  533. <p>Je veux pouvoir savoir à tout moment la progression de mon voyage. Lorsque mon train va traverser une zone sans réception, je veux en être avertie pour m’organiser au mieux <em>(i.e. vite télécharger le Google Doc sur lequel je travaille depuis des heures).</em></p>

  534. 

  535. <p><strong>💡Le mode hors connexion est possible en téléchargeant la carte du trajet au préalable.</strong></p>

  536. 

  537. <p><strong>💡Visualisation de l’état du réseau sur le trajet et notifications.</strong></p>

  538. 

  539. <h2><br/></h2>

  540. 

  541. <h2>6. Explorer de nouvelles villes pendant les correspondances</h2>

  542. 

  543. <p>Mon trajet en train me fait passer par les villes de Düsseldorf et Hambourg que je ne connais pas. En avion, je ne serais jamais sortie de l’aéroport pendant ma correspondance. En train, j’arrive en plein coeur de la ville. Je veux en profiter au maximum et savoir où manger, boire un café et quels quartiers visiter.</p>

  544. 

  545. <p>Je pourrais également paramétrer le temps que je veux passer dans chaque ville de correspondance et la plateforme me proposera de nouveaux horaires. </p>

  546. 

  547. <p><strong>💡Liste de recommandations de lieux à visiter, cafés et restaurants dans un périmètre de 5 et 15 minutes de marche.</strong></p>

  548. 

  549. <p><strong>💡Timing en direct du temps de correspondance restant et état du train suivant.</strong></p>

  550. 

  551. <h3><br/></h3>

  552. 

  553. <h2>7. Profiter et se laisser inspirer par le voyage</h2>

  554. 

  555. <p>Je veux en savoir plus sur l’itinéraire que j’emprunte, les villes et paysages que je traverse. Je veux profiter de ce temps long pour apprendre de nouvelles choses, me laisser inspirer par les histoires qui ont façonné ces régions.</p>

  556. 

  557. <p><strong>💡Du contenu sur les lieux traversés est sourcé et rendu disponible pendant le voyage depuis l’application (images, articles, podcasts, documentaires…)</strong></p>

  558. 

  559. <p><strong>💡Des playlists spécifiques aux lieux visités sont disponibles pour en apprendre plus sur la scène musicale locale.</strong></p>

  560. 

  561. <p><strong>Il nous a fallu seulement 5 jours pour concevoir plusieurs morceaux de solutions qui pourraient changer nos habitudes de voyage pour un impact plus positif sur l’environnement. </strong></p>

  562. 

  563. <p><strong>Ce n’est pas parfait, ça manque de recherche utilisateur, de temps, de partenaires techniques, mais c’est un point de départ.</strong></p>

  564. 

  565. <p><strong>On veut que ces idées dépassent le stade de prototype pour réellement impacter nos trajets. Alors la SNCF, Trainline, on en parle ? </strong></p>

  566. 

  567. <h3>Ressources inspirantes sur le sujet :  </h3>

  568. 

  569. <ul><li>✅ <a href="https://edition.cnn.com/interactive/2019/04/specials/climate-change-solutions-quiz/?fbclid=IwAR26WNHapQKirt2Svy6HZFisOygBP9lbE1bQbvUxz6ZKA-oAUY5EKZ-DVmw" target="_blank" rel="nofollow noopener">The most effective ways to curb climate change might surprise you</a> par <a href="https://www.cnn.com/profiles/drew-kann" target="_blank" rel="nofollow noopener">Drew Kann</a>, Will Houp, <a href="https://www.cnn.com/profiles/judson-jones" target="_blank" rel="nofollow noopener">Judson Jones</a>, and <a href="https://www.cnn.com/profiles/sean-okey" target="_blank" rel="nofollow noopener">Sean O’Key</a></li><li>✊ <a href="https://westayontheground.blogspot.com/" target="_blank" rel="nofollow noopener">We Stay on the Ground</a>, <a href="http://flightfree.ca/" target="_blank" rel="nofollow noopener">Flightfree.ca</a>, les campagnes anti-avions</li><li>📰 <a href="https://www.independent.co.uk/travel/news-and-advice/flygskam-anti-flying-flight-shaming-sweden-greta-thornberg-environment-air-travel-train-brag-a8945196.html" target="_blank" rel="nofollow noopener">Flygskam: What is the flight-shaming environmental movement that’s sweeping Europe?</a> par Helen Coffey </li><li>📰 <a href="https://www.outsideonline.com/2396495/flygskam-stop-traveling-by-plane" target="_blank" rel="nofollow noopener">The case for ditching air travel</a> par<strong> </strong>Leanna First-Arai</li><li>📰 <a href="https://www.theguardian.com/travel/2019/may/22/could-you-give-up-flying-meet-the-no-plane-pioneers" target="_blank" rel="nofollow noopener">Could you give up flying? Meet the no-plane pioneers</a> par Emine Saner</li><li>🎒<a href="https://www.chilowe.com/accueil/" target="_blank" rel="nofollow noopener">Chilowé</a> et <a href="https://www.lesothers.com/" target="_blank" rel="nofollow noopener">Les Others</a> pour apprendre à voyager autrement</li><li>✏️ <a href="https://www.kickstarter.com/projects/ninacosford/the-trans-siberian-railway" target="_blank" rel="nofollow noopener">The Trans-Siberian Railway</a>, le joli livre illustré du voyage en trans-sibérien de Nina Cosford</li><li>🎥 Pour ceux qui veulent voyager dans la cabine du conducteur : <a href="https://www.youtube.com/watch?v=zomZywCAPTA" target="_blank">à travers le Monténégro</a>, <a href="https://www.youtube.com/watch?v=Y53k5YCL93c" target="_blank">pareil mais dans l’autre sens et en hiver</a>, <a href="https://www.youtube.com/watch?v=3CjoHETBq6U" target="_blank">dans les montagnes autrichiennes</a>, <a href="https://www.youtube.com/watch?v=RQ-wKU-KhaA" target="_blank">en Suisse</a>, <a href="https://www.youtube.com/watch?v=2rXFUOpVhac" target="_blank">grimper la Rhune au Pays Basque</a>, e<a href="https://www.youtube.com/watch?v=xisVS_DKpJg" target="_blank">ntre Bergen et Oslo</a>…</li></ul>

  570.   </article>

  571. </section>

  572. 

  573. 

  574. <nav id="jumpto">

  575.   <p>

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

  577.     <a href="https://www.linkedin.com/pulse/et-si-demain-ne-prenait-plus-lavion-audrey-blanchard">Source originale</a> |

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

  579.   </p>

  580. </nav>

  581. 

  582. <footer>

  583.   <div>

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

  585.     <p>

  586.       Bonjour/Hi!

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

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

  589.     </p>

  590.     <p>

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

  592.     </p>

  593.     

  594.     <p>

  595.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  612.     </p>

  613.     <p>

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

  615.     </p>

  616.     <p>

  617.       Je ne traque pas ta navigation mais mon

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

  619.       conserve des logs d’accès.

  620.     </p>

  621.   </div>

  622. </footer>

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

  624.   ;(_ => {

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

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

  627.       e.preventDefault()

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

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

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

  631.     })

  632.   })()

  633. </script>