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 33KB

4 jaren geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744
  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>Vos email en votre possession (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. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.controle-tes-donnees.net/outils/Nom_de_domaine.html">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Vos email en votre possession (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.controle-tes-donnees.net/outils/Nom_de_domaine.html">Source originale du contenu</a></h3>
  445. <div id="1">
  446. <h2>1. Pourquoi ne pas utiliser Gmail ou autres services «&nbsp;gratuits&nbsp;»&nbsp;?</h2>
  447. Pour être rentables, la plupart des services de mail gratuits proposent de la publicité à leurs utilisateurs. Pour proposer des publicités adaptées à leurs envies et besoins, ils peuvent analyser la correspondance de leurs utilisateurs.
  448. Ainsi, <a href="http://www.theguardian.com/technology/2013/aug/14/google-gmail-users-privacy-email-lawsuit">Google a admis</a> [EN] analyser les messages envoyés et reçus sur les comptes Gmail, même s'ils ont été envoyés par des adresses autres que Gmail.
  449. Nous allons vous proposer des services mails payants. Étant payants, ces services n'ont pas à vous proposer de la publicité pour être rentables.
  450. Ceci nous offre une certaine garantie quant au respect de la confidentialité de notre correspondance. En effet, s'il était appris que ces services analysaient eux aussi nos messages, leurs clients les quitteraient pour leur préférer des services gratuits. De plus, ces services garderont vos messages sur le territoire européen, échappant ainsi aux services de renseignement étrangers pouvant accéder aux messages hébergés sur leur territoire, telle que la NSA avec PRISM
  451. </div>
  452. <div id="2">
  453. <h2>2. Louer une boîte de messagerie</h2>
  454. Pour avoir notre propre boîte de messagerie, nous allons louer un nom de domaine, ce qui est l'alternative la plus simple aux services gratuits. Cela peut vous paraître être une solution complexe, réservée aux techniciens, mais absolument pas. Si avez déjà effectué un achat sur un site Internet, vous avez les compétences pour le faire.
  455. <h3>Pourquoi louer un nom de domaine&nbsp;?</h3>
  456. Un nom de domaine est ce que nous utilisons généralement pour accéder aux sites Internet. Pour ce site, c'est «&nbsp;controle-tes-donnees.net&nbsp;».
  457. Précisément, un nom de domaine est un ensemble de caractères associés à une adresse IP. L'adresse IP est une suite de chiffres donnée à un ordinateur afin de le distinguer de tous les autres ordinateurs connectés à Internet. L'adresse IP de notre site est 91.194.60.89. Mais cette suite de chiffre ne serait pas simple à partager. C'est pourquoi nous l'avons associée à un nom de domaine.
  458. Ce qui nous intéresse, ici, c'est qu'un nom de domaine peut aussi être associé à une boîte de messagerie. Le nom de domaine « exemple.fr » nous permettrait par exemple d'utiliser l'adresse «&nbsp;contact@exemple.fr&nbsp;».
  459. Néanmoins, on ne peut pas choisir n'importe quel nom de domaine. Autrement, plusieurs adresses IP pourraient être associées au même nom, et le système ne fonctionnerait plus. Ainsi, la mission de répartir les noms de domaine a été confiée à certaines entreprises, dont les services sont payants. Leurs coûts restent toutefois modestes.
  460. De plus, en louant un nom de domaine, un petit espace est généralement aussi prêté pour héberger des mails. Et c'est justement cette espace que nous allons utiliser pour stocker les vôtres.
  461. La location d'un nom de domaine est la seconde étape pour garder le contrôle de votre correspondance. La première, c'est le chiffrement, abordé sur <a href="http://www.controle-tes-donnees.net/outils/GnuPG.html">plus tôt sur ce site</a>.
  462. <h3>Où louer un nom de domaine ?</h3>
  463. Nous allons vous proposer l'offre d'entrée des deux principaux fournisseurs de noms de domaine français : Gandi et OVH.
  464. L'<a href="#3">offre de Gandi</a> coûte environ 14€ par an, pour cinq boîtes mail partageant un espace total de 1Go. Les membres d'une famille, d'une très petite entreprise ou d'un groupe d'amis peuvent ainsi partager un même nom de domaine en utilisant cinq boîtes et adresses distinctes.
  465. L'<a href="#4">offre d'OVH</a> ne coûte environ que 8€ par an, mais ne propose qu'une seule boîte mail de 2 Go (ce qui permet normalement à une personne de conserver au moins une année de correspondance active sans effacer aucun message).
  466. </div>
  467. <div id="3">
  468. <h2>3. Louer un nom de domaine chez Gandi</h2>
  469. Si vous souhaitez choisir l'offre de Gandi, rendez-vous sur <a href="https://www.gandi.net/">cette page</a>.
  470. Indiquez le mot que vous souhaitez avoir comme nom de domaine. Ce mot peut contenir des chiffres ou des tirets ( <em>-</em> ou <em>_</em> ), mais pas d'espace, les accents étant déconseillés.
  471. <img src="http://www.controle-tes-donnees.net/img/Gandi_1.png" style="margin:0 auto; border:1px solid black; display:block;">
  472. Ce mot sera la base de votre future adresse. Par exemple, en choisissant «&nbsp;reclaimyourdata&nbsp;», nous obtiendrons plus tard une adresse mail qui pourra être «&nbsp;contact@reclaimyourdata.eu&nbsp;».
  473. Une solution intéressante peut être de choisir votre propre nom de famille. Ainsi, vous pourriez avoir au final une adresse de type «&nbsp;prenom@nom.fr&nbsp;».
  474. Quand vous avez choisis votre mot, cliquez sur <em>Go</em>.
  475. Sur cette nouvelle page, cochez le nom de domaine qui vous convient, en fonction de son extension&nbsp;: <em>.fr</em>, <em>.com</em>, <em>.net</em>, <em>.eu</em>, etc.
  476. <img src="http://www.controle-tes-donnees.net/img/Gandi_2.png" style="margin:0 auto; border:1px solid black; display:block;">
  477. Il n'y a aucune différence fondamentale entre différentes extensions, si ce n'est éventuellement leur prix, qui est ici exprimé en HT par an.
  478. Votre choix fait, remontez en haut de la page et cliquez sur <em>Commander</em>.
  479. <img src="http://www.controle-tes-donnees.net/img/Gandi_3.png" style="margin:0 auto; border:1px solid black; display:block;">
  480. Créez un nouveau compte Gandi si vous n'en avez pas déjà un.
  481. Renseignez les informations qui vous sont demandées. Pour <em>Protection de vos données</em>, choisissez <em>Oui</em> pour éviter que vos informations personnelles, comme le numéro de téléphone et l'adresse que vous avez indiqués, n'apparaissent sur la fiche publique de votre nom de domaine.
  482. Lorsque vous avez fini, passez au paiement.
  483. Une fois le paiement réalisé et que vous êtes revenu sur le site de Gandi, cliquez sur <em>Accéder à votre compte</em>.
  484. <h3>Créer une boîte mail associée à mon nouveau nom de domaine Gandi</h3>
  485. La nouvelle page s'étant ouverte vous indique que la création de votre nom de domaine est en attente. Toutefois, vous pouvez déjà vous rendre dans l'onglet <em>Service > Domaine</em> et y cliquer sur votre nom de domaine.
  486. <img src="http://www.controle-tes-donnees.net/img/Gandi_4.png" style="margin:0 auto; border:1px solid black; display:block;">
  487. Dans le cadre à droite de cette nouvelle fenêtre, en face de <em>Boîtes mail</em>, cliquez sur <em>Gérer</em>.
  488. <img src="http://www.controle-tes-donnees.net/img/Gandi_5.png" style="margin:0 auto; border:1px solid black; display:block;">
  489. Un peu plus bas sur cette nouvelle page, sous la partie <em>Liste des boîtes mail</em>, qui devrait être vide, cliquez en bas à droite sur <em>Créer</em>.
  490. En laissant coché <em>Boîte mail</em>, choisissez le préfixe que vous souhaitez associer à votre nom de domaine. Ensemble, ce préfixe et le nom de domaine constitueront votre adresse mail complète.
  491. Si vous avez choisi votre propre nom de famille en tant que nom de domaine, c'est le moment d'entrer votre prénom. Dans l'exemple illustré ci-dessous, nous avons choisi comme préfixe «&nbsp;contact&nbsp;» et notre future adresse sera alors «&nbsp;contact@reclaimyourdata.eu&nbsp;».
  492. <img src="http://www.controle-tes-donnees.net/img/Gandi_6.png" style="margin:0 auto; border:1px solid black; display:block;">
  493. Choisissez ensuite un mot de passe pour votre future adresse.
  494. Plus bas, vous pouvez choisir un alias, qui sera un préfixe alternatif à partir duquel vos correspondants pourront vous contacter sur cette boîte mail. Cela peut par exemple être le diminutif de votre prénom. Il s'agit simplement de nommer la même boîte de plusieurs façons.
  495. Replissez les autres informations demandées et validez.
  496. Félicitations, vous disposez maintenant de votre propre boîte mail.
  497. <h3>Utiliser ma boîte mail Gandi</h3>
  498. Vous pouvez accéder à votre boîte mail en ligne, depuis n'importe quel navigateur ou ordinateur, à partir de <a href="https://webmail.gandi.net">cette page</a>, en entrant votre adresse et le mot de passe que vous lui avez donné.
  499. Si vous souhaitez y accéder à partir de Thunderbird (ce que nous vous conseillons, afin de pouvoir <a href="http://www.controle-tes-donnees.net/outils/GnuPG.html">chiffrer vos messages</a>, notamment), créez un nouveau compte dans Thunderbird depuis <em>Fichier > Nouveau > Compte courrier existant...</em>.
  500. <img src="http://www.controle-tes-donnees.net/img/Thunderbird_1.png" style="margin:0 auto; border:1px solid black; display:block; width:90%;">
  501. Entrez alors votre nom, tel que vous souhaitez qu'il apparaisse auprès de vos correspondants, votre adresse Gandi et le mot de passe que vous lui avez associé.
  502. Après avoir cliquer sur <em>Continuer</em>, cliquez sur <em>Configuration manuelle</em>.
  503. Pour serveur entrant, renseignez :<ul>
  504. <li><em>IMAP</em> ;</li>
  505. <li>Nom d'hôte du serveur : <em>mail.gandi.net</em> ;</li>
  506. <li>Port : <em>993</em> ;</li>
  507. <li>SSL : <em>SSL/TLS</em>.</li></ul>Pour serveur sortant, renseignez :<ul>
  508. <li><em>SMTP</em> ;</li>
  509. <li>Nom d'hôte du serveur : <em>mail.gandi.net</em> ;</li>
  510. <li>Port : <em>465</em> ;</li>
  511. <li>SSL : <em>SSL/TLS</em>.</li></ul>Pour identifiant, renseignez votre adresse.
  512. <img src="http://www.controle-tes-donnees.net/img/Gandi_7.png" style="margin:0 auto; border:1px solid black; display:block;">
  513. Si vous avez associé plusieurs boîtes mails à votre nom de domaine (dans l'offre que nous avons abordée ici, vous pouvez en créé jusqu'à cinq partageant un espace total de 1Go), vous pouvez télécharger automatiquement vos messages sur votre ordinateur afin d'éviter que votre espace de stockage ne soit trop souvent saturé. Ainsi, lorsque vous consulterez vos messages, ils seront automatiquement supprimés de votre boîte Gandi pour n'être conservés que sur votre propre disque dur.
  514. Pour ce faire, sélectionnez simplement <em>POP</em> en face de <em>serveur entrant</em> lors de l'étape précédente de création d'un nouveau compte sur Thunderbird.
  515. </div>
  516. <div id="4">
  517. <h2>4. Louer un nom de domaine chez OVH</h2>
  518. Si vous souhaitez choisir l'offre de OVH, rendez-vous sur <a href="https://www.ovh.com/fr/domaines/">cette page</a>.
  519. D'abord, dans la colonne sur votre gauche, choisissez l'extension de votre futur nom de domaine&nbsp;: <em>.fr</em>, <em>.com</em>, <em>.net</em>, etc.
  520. <img src="http://www.controle-tes-donnees.net/img/DOMAINES_ACCUEIL_OVH.png" style="margin:0 auto; border:1px solid black; display:block;">
  521. Cliquez sur celle qui vous convient le mieux. Il n'y a aucune différence fondamentale entre différentes extensions, si ce n'est éventuellement leur prix, qui est ici exprimé en HT par an.
  522. Sur la page suivante, vous pouvez maintenant proposer un nom de domaine à louer.
  523. <img src="http://www.controle-tes-donnees.net/img/DISPO_NDD.png" style="margin:0 auto; border:1px solid black; display:block;">
  524. Ce sera le nom associé à votre future adresse. Par exemple, en prenant «&nbsp;.net&nbsp;» en extension et en choisissant «&nbsp;monnomdedomaine&nbsp;» comme nom, nous pourrions plus tard obtenir une adresse de type «&nbsp;contact@monnomdedomaine.net&nbsp;».
  525. Une solution intéressante peut être de choisir votre propre nom de famille comme nom de domaine, s'il est disponible. Ainsi, vous pourriez avoir au final une adresse de type «&nbsp;prenom@nom.fr&nbsp;».
  526. Cliquez sur <em>GO</em>.
  527. La disponibilité du nom de domaine que vous demandez est alors vérifiée. S'il n'est pas disponible, c'est que quelqu'un l'a déjà pris&nbsp;: à vous d'en changer, en modifiant par exemple son extension.
  528. Si le nom est disponible, cliquez sur <em>Continuer</em>, en bas à droite de la page.
  529. La page suivante vous propose plusieurs options dont nous n'aurons pas besoin dans notre cas d’hébergement mail. Nous vous laissons ainsi en évaluer la pertinence par vous-même.
  530. En l’occurrence le <em>DNS classique</em> (à cocher) et l'offre <em>Gold</em> nous suffiront amplement, sans engendrer de frais supplémentaires.
  531. <img src="http://www.controle-tes-donnees.net/img/OFFRE_DNS.png" style="margin:0 auto; border:1px solid black; display:block;">
  532. Cliquez sur <em>Choisir</em> en face de l'offre souhaitée pour passer à la suite.
  533. Vous devez maintenant choisir votre type d'hébergement.
  534. Sélectionnez l'hébergement perso <em>Start 10M/Mailplan</em> pour un email personnel avec un seul compte et une boîte mail de 2Go. Cela vous suffira largement pour une utilisation quotidienne de votre boîte mail.
  535. <img src="http://www.controle-tes-donnees.net/img/HEBERGEMENT.png" style="margin:0 auto; border:1px solid black; display:block;">
  536. Les autres choix présents ne sont utiles qu'en cas de multi-compte mail (pour partager votre nom de domaine avec votre famille ou vos amis, par exemple) ou encore pour créer un site web, ce qui n'est pas ce que nous cherchons à faire ici.
  537. Sélectionnez votre type d'hébergement avec <em>Choisir</em>, en face de l'offre qui vous intéresse.
  538. Vous voici devant le total de votre commande. À vous de créer votre nouveau compte client pour effectuer le paiement.
  539. Vous recevrez alors vos identifiants à l'adresse email que vous avez indiqué à OVH plus tôt. Ces identifiants vous permettront d'accéder à l'Interface Manager de votre nouveau nom de domaine. Généralement, cela prend moins de 24 heures.
  540. <h3>Créer une boîte mail associée à mon nouveau nom de domaine OVH</h3>
  541. Votre nouveau compte OVH activé, connectez vous à votre <a href="https://www.ovh.com/managerv3/">Interface Manager</a> grâce à vos identifiants.
  542. Une fois connecté, cliquer sur votre nom de domaine, dans la colonne de gauche.
  543. <img src="http://www.controle-tes-donnees.net/img/ACCUEILCOMPTE.png" style="margin:0 auto; border:1px solid black; display:block;">
  544. Dans la page suivante cliquez sur <em>Emails</em>.
  545. <img src="http://www.controle-tes-donnees.net/img/RECAP_NDD.png" style="margin:0 auto; border:1px solid black; display:block;">
  546. Continuez en cliquant sur le bouton <em>Création adresse Mail</em>.
  547. Sur cette nouvelle page, choisissez le préfixe que vous souhaitez associer à votre nom de domaine. Ensemble, ce préfixe et le nom de domaine constitueront votre adresse mail complète. Si vous avez choisis d'utiliser votre propre nom de famille comme nom de domaine, c'est le moment de rentrer votre prénom.
  548. Une fois le préfixe renseigné et un mot de passe lui ayant été associé, des informations vous sont données sur les serveurs entrant et sortant correspondants à votre nouvelle adresse mail. Ces informations vous permettront notamment de consulter votre boîte mail depuis Thunderbird. Sauvegardez-les quelque part.
  549. Félicitations, vous avez maintenant votre propre boîte mail OVH.
  550. <h3>Utiliser ma nouvelle adresse OVH</h3>
  551. Si vous souhaitez accéder à votre boîte mail en ligne, depuis n'importe que navigateur ou ordinateur, rendez-vous <a href="https://ssl0.ovh.net/fr/">sur cette page</a>. Vous aurez plusieurs interfaces de proposées pour cela. Nous vous recommandons Roundcube ou Horde qui sont libres.
  552. Si vous souhaitez envoyer et recevoir vos mails directement depuis votre ordinateur, vous pouvez utiliser Thunderbird (ce que nous vous recommandons afin, notamment, de pouvoir <a href="http://www.controle-tes-donnees.net/outils/GnuPG.html">chiffrer vos messages</a>). Pour cela, en créant un nouveau compte dans Thunderbird, il vous faudra renseigner les serveurs entrants et sortants ainsi que les ports qui vous ont été donnés plus tôt.
  553. Au cas où vous perdriez les informations concernant les serveurs entrant et sortant, vous pouvez utiliser celles-ci&nbsp;:
  554. Comme nom du serveur entrant&nbsp;: «&nbsp;pop3.&nbsp;» suivi de votre nom de domaine. Par exemple, «&nbsp;pop3.exemple.fr&nbsp;». Si cela ne semble pas fonctionner, vous pouvez directement utiliser le serveur d'OVH&nbsp;: «&nbsp;ns0.ovh.net&nbsp;». Pour le port entrant&nbsp;: 110.
  555. Comme nom du serveur sortant&nbsp;: «&nbsp;smtp.&nbsp;» suivi de votre nom de domaine. Par exemple «&nbsp;smtp.exemple.fr&nbsp;». À défaut, vous pouvez aussi utiliser le serveur d'OVH&nbsp;: «&nbsp;ns0.ovh.net&nbsp;». Pour le port sortant&nbsp;: 587 (au lieu de 25, car ce port est filtré chez de nombreux fournisseur d'accès à Internet).
  556. </div>
  557. </article>
  558. </section>
  559. <nav id="jumpto">
  560. <p>
  561. <a href="/david/blog/">Accueil du blog</a> |
  562. <a href="http://www.controle-tes-donnees.net/outils/Nom_de_domaine.html">Source originale</a> |
  563. <a href="/david/stream/2019/">Accueil du flux</a>
  564. </p>
  565. </nav>
  566. <footer>
  567. <div>
  568. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  569. <p>
  570. Bonjour/Hi!
  571. 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>
  572. 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>).
  573. </p>
  574. <p>
  575. 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>.
  576. </p>
  577. <p>
  578. Voici quelques articles choisis :
  579. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  580. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  581. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  582. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  583. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  584. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  585. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  586. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  587. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  588. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  589. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  590. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  591. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  592. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  593. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  594. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  595. </p>
  596. <p>
  597. 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>.
  598. </p>
  599. <p>
  600. Je ne traque pas ta navigation mais mon
  601. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  602. conserve des logs d’accès.
  603. </p>
  604. </div>
  605. </footer>
  606. <script type="text/javascript">
  607. ;(_ => {
  608. const jumper = document.getElementById('jumper')
  609. jumper.addEventListener('click', e => {
  610. e.preventDefault()
  611. const anchor = e.target.getAttribute('href')
  612. const targetEl = document.getElementById(anchor.substring(1))
  613. targetEl.scrollIntoView({behavior: 'smooth'})
  614. })
  615. })()
  616. </script>