The git repo behind my blog.

elyseefr-accessibilite-et-cloud-souverain.html 10.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="HandheldFriendly" content="True" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <meta name="robots" content="index, follow" />
  9. <link href='https://phyks.me/theme/stylesheet/fonts.css' rel='stylesheet' type='text/css'>
  10. <link rel="stylesheet" type="text/css" href="https://phyks.me/theme/stylesheet/style.min.css">
  11. <link rel="stylesheet" type="text/css" href="https://phyks.me/theme/pygments/monokai.min.css">
  12. <link rel="stylesheet" type="text/css" href="https://phyks.me/theme/font-awesome/css/font-awesome.min.css">
  13. <link href="https://phyks.me/feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="Phyks' blog Atom">
  14. <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
  15. <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
  16. <!-- Chrome, Firefox OS and Opera -->
  17. <meta name="theme-color" content="#333">
  18. <!-- Windows Phone -->
  19. <meta name="msapplication-navbutton-color" content="#333">
  20. <!-- iOS Safari -->
  21. <meta name="apple-mobile-web-app-capable" content="yes">
  22. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  23. <!-- Microsoft EDGE -->
  24. <meta name="msapplication-TileColor" content="#333">
  25. <meta name="author" content="Phyks" />
  26. <meta name="description" content="Vous avez sûrement déjà vu un site officiel sur l’IVG utiliser Google Analytics, ce qui n’est pas sans poser quelques problèmes d’anonymat et de confidentialité, un cloud souverain mais vous n’avez sûrement pas encore vu le site de l’Élysée (en tout cas, moi je ne …" />
  27. <meta name="keywords" content="">
  28. <meta property="og:site_name" content="Phyks' blog"/>
  29. <meta property="og:title" content="Élysée.fr… accessibilité et cloud souverain"/>
  30. <meta property="og:description" content="Vous avez sûrement déjà vu un site officiel sur l’IVG utiliser Google Analytics, ce qui n’est pas sans poser quelques problèmes d’anonymat et de confidentialité, un cloud souverain mais vous n’avez sûrement pas encore vu le site de l’Élysée (en tout cas, moi je ne …"/>
  31. <meta property="og:locale" content="en_US.UTF-8"/>
  32. <meta property="og:url" content="https://phyks.me/2014/04/elyseefr-accessibilite-et-cloud-souverain.html"/>
  33. <meta property="og:type" content="article"/>
  34. <meta property="article:published_time" content="2014-04-29 20:30:00+02:00"/>
  35. <meta property="article:modified_time" content=""/>
  36. <meta property="article:author" content="https://phyks.me/author/phyks.html">
  37. <meta property="article:section" content="Web"/>
  38. <meta property="og:image" content="/images/profile.png">
  39. <title>Phyks' blog &ndash; Élysée.fr… accessibilité et cloud souverain</title>
  40. </head>
  41. <body>
  42. <aside>
  43. <div>
  44. <a href="https://phyks.me">
  45. <img src="/images/profile.png" alt="Phyks" title="Phyks">
  46. </a>
  47. <h1><a href="https://phyks.me">Phyks</a></h1>
  48. <p>I write about dev, FOSS, DIY and more, in French and English.</p>
  49. <ul class="social">
  50. <li><a class="sc-rss" href="feeds/all.atom.xml" target="_blank"><i class="fa fa-rss"></i></a></li>
  51. <li><a class="sc-envelope-o" href="mailto:phyks+blog@phyks.me" target="_blank"><i class="fa fa-envelope-o"></i></a></li>
  52. <li><a class="sc-github" href="http://github.com/phyks/" target="_blank"><i class="fa fa-github"></i></a></li>
  53. <li><a class="sc-gitlab" href="https://git.phyks.me/phyks" target="_blank"><i class="fa fa-gitlab"></i></a></li>
  54. </ul>
  55. </div>
  56. </aside>
  57. <main>
  58. <nav>
  59. <a href="https://phyks.me">Home</a>
  60. <a href="https://links.phyks.me">Bookmarks</a>
  61. <a href="/pages/hosted-tools.html">Tools</a>
  62. <a href="/archives.html">Archives</a>
  63. <a href="/pages/memo-autohebergement.html">Autohébergement</a>
  64. <a href="https://phyks.me/feeds/all.atom.xml">Atom</a>
  65. </nav>
  66. <article class="single">
  67. <header>
  68. <h1 id="elyseefr-accessibilite-et-cloud-souverain">Élysée.fr… accessibilité et cloud&nbsp;souverain</h1>
  69. <p>
  70. Posted on 29 April 2014 in <a href="https://phyks.me/category/web.html">Web</a>
  71. &#8226; 3 min read
  72. </p>
  73. </header>
  74. <div>
  75. <p>Vous avez sûrement déjà vu <a href="http://reflets.info/fic2014-ces-administrations-francaises-qui-livrent-ce-que-vous-avez-de-plus-intime-a-des-tiers-google-xiti/">un site officiel sur l&#8217;<span class="caps">IVG</span> utiliser Google
  76. Analytics</a>,
  77. ce qui n&#8217;est pas sans poser quelques problèmes d&#8217;anonymat et de
  78. confidentialité, un <a href="http://reflets.info/?s=cloud+souverain">cloud
  79. souverain</a> mais vous n&#8217;avez
  80. sûrement pas encore vu le <a href="http://www.elysee.fr/">site de l&#8217;Élysée</a> (en
  81. tout cas, moi je ne l&#8217;avais jamais vu il y a encore quelques jours)&nbsp;!</p>
  82. <p>Mais hier, je suis tombé sur <a href="http://blog.webatou.info/post/sur-twitter-les-popins">cet
  83. article</a> sur <a href="http://blog.webatou.info">le
  84. blog webatou</a> qui reportait des popins sur le
  85. site de l&#8217;Élysée, comportement assez étonnant pour un site officiel, qui
  86. <a href="http://www.elysee.fr/accessibilite/">vante son accessibilité</a> (mais
  87. non, il n&#8217;y a bien sûr aucun <em>popin</em> sur cette page…), qui fait appel à
  88. <a href="http://blog.temesis.com/post/2012/12/19/Elysee-site-plus-accessible-avec-temesis">une
  89. société</a>
  90. (dont on n&#8217;ose même pas imaginer la facture) pour améliorer son
  91. accessibilité. Ok, <a href="http://blog.barbayellow.com/2007/09/30/laccessibilite-selon-lelyseefr/">elle n&#8217;était pas
  92. parfaite</a>,
  93. mais c&#8217;était déjà&nbsp;ça.</p>
  94. <p>Mais alors, que leur a-t-il pris de mettre un énorme <em>popin</em> pour “les
  95. suivre sur Facebook” (sérieusement, la présidence est tellement en
  96. manque de reconnaissance, qu&#8217;il lui faut des <em>likes</em> sur Facebook&nbsp;?).
  97. Pas de problèmes, je clos le popin. Prochain chargement, la même chose
  98. pour Twitter&nbsp;! Je ferme encore, prochain rechargement, la même chose
  99. pour la newsletter. Je suis <strong>assez grand</strong> pour savoir où je veux vous
  100. suivre tout seul, pas besoin de <strong>3</strong> <em>popins</em>&nbsp;!</p>
  101. <p>Du coup, je me suis penché un peu plus sur le site, et je suis juste
  102. consterné… On passera sur l&#8217;enveloppe en haut de page qui n&#8217;a rien à
  103. voir avec un quelconque contact, mais permet juste de s&#8217;abonner à la
  104. newsletter, on passera sur les mêmes pages qui sont liées à N endroits
  105. différents sur le site, avec un texte différent à chaque fois, idéal
  106. pour perdre le visiteur (mais bon, c&#8217;est une <a href="http://lehollandaisvolant.net/?d=2014/03/04/14/09/35-pourquoi-les-sites-des-services-publics-sont-ils-tous-aussi-pourris">spécialité des services
  107. publics
  108. apparemment</a>)…
  109. Non, ce qui m&#8217;a inquiété, c&#8217;est l&#8217;origine du petit script JavaScript
  110. responsable du <em>popin</em>.</p>
  111. <p>Pas de problèmes, on recharge la page en activant la console de Firefox,
  112. et on découvre qu&#8217;il n&#8217;y a pas moins de 15 scripts différents chargés
  113. (totalisant un poids voisin de 900ko (oui oui, <strong>900ko</strong> soit trois fois
  114. plus que l&#8217;image la plus lourde de la page, mais #ToutVaBien), ce qui
  115. est finalement dans la moyenne des pages webs actuelles avec leur
  116. tendance à cracher du JavaScript à la pelle) dont <strong>un seul hébergé sur
  117. le serveur de l&#8217;élysée</strong>.</p>
  118. <p>Oui oui, vous avez bien lu, sur le site de l&#8217;Élysée, il y a <strong>14</strong>
  119. scripts (soit 93% des scripts) qui viennent d&#8217;un serveur externe
  120. (Facebook, google <span class="caps">API</span>, Twitter, Typekit et readspeaker). Et je ne parle
  121. que des javascripts, pas des images et des <span class="caps">CSS</span> (qui finalement sont
  122. presque tous chez l&#8217;Élysée pour le coup). Ça veut donc dire qu&#8217;au moins
  123. 4 grandes entreprises américaines peuvent inclure un peu ce qu&#8217;elles
  124. veulent sur la page de l&#8217;Élysée. Joli&nbsp;!</p>
  125. <p>Enfin, on notera que le seul contact que j&#8217;ai pu trouver pour l&#8217;équipe
  126. responsable du site de l&#8217;Élysée était une adresse postale à l&#8217;Élysée,
  127. pratique à l&#8217;heure où envoyer un e-mail n&#8217;a jamais été aussi simple et&nbsp;rapide.</p>
  128. <p><span class="caps">P.S.</span>(disclaimer)&nbsp;: Pour tous ceux qui chercheront à relever tous les
  129. problèmes d&#8217;accessibilité sur mon blog, je sais qu&#8217;il est loin d&#8217;être
  130. parfait, et il faudra que je m&#8217;en occupe quand j&#8217;aurai 5 minutes. Sauf
  131. que dans un cas on parle d&#8217;un blog personnel, n&#8217;ayant aucune prétention
  132. particulière, et dans l&#8217;autre cas on parle d&#8217;un site <strong>institutionnel</strong>
  133. qui se prétend modèle&nbsp;d&#8217;accessibilité…</p>
  134. </div>
  135. <div class="tag-cloud">
  136. <p>
  137. </p>
  138. </div>
  139. </article>
  140. <footer>
  141. <p>
  142. &copy; 2017 - This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>
  143. </p>
  144. <p>Powered by <a href="http://getpelican.com" target="_blank">Pelican</a> - <a href="https://github.com/alexandrevicenzi/flex" target="_blank">Flex</a> theme by <a href="http://alexandrevicenzi.com" target="_blank">Alexandre Vicenzi</a></p><p>
  145. <a rel="license"
  146. href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
  147. target="_blank">
  148. <img alt="Creative Commons License"
  149. title="Creative Commons License"
  150. style="border-width:0"
  151. src="https://phyks.me/theme/img/cc/by-nc-sa.png"
  152. width="80"
  153. height="15"/>
  154. </a>
  155. </p> </footer>
  156. </main>
  157. <script type="application/ld+json">
  158. {
  159. "@context" : "http://schema.org",
  160. "@type" : "Blog",
  161. "name": " Phyks' blog ",
  162. "url" : "https://phyks.me",
  163. "image": "/images/profile.png",
  164. "description": "I write about dev, FOSS, DIY and more, in French and English."
  165. }
  166. </script>
  167. </body>
  168. </html>