feat(talks): Paris-Web 2024

source/_posts/2024/paris-web.md

@@ -0,0 +1,33 @@
+---
+title: Appuyez sur Entrée pour envoyer ce message
+lang: fr
+date: 2024-09-26
+event:
+  name: Paris-Web
+  location: Paris
+  duration: 30
+  url: https://www.paris-web.fr/2024/conference/appuyez-sur-entree-pour-envoyer-ce-message
+cover:
+video:
+category: [Featured]
+slides:
+  - file: 00-title.md
+  - file: 05-me-situer.md
+  - file: 09-plan.md
+  - file: 20-enveloppe.md
+  - file: 30-transport.md
+  - file: 50-infrastructure.md
+  - file: 70-impact.md
+  - file: 90-conclure.md
+---
+
+En pressant la touche Entrée, le message est parti se dupliquer dans tes courriels. Que s'est-il passé, de mon clavier jusque ton écran ?
+
+S'envoyer un e-mail prend au plus quelques secondes. C'est une commodité. Et pourtant ça en traverse des pans de société. On les oublie tellement il y en a, tellement c'est commode que ça tourne 24/7.
+
+Géopolitique d'un e-mail — des protocoles employés, couches réseaux traversées, câbles sous-marins parcourus, matériaux fondus, logiciels empilés, électronique assemblée, électricité acheminée, propriété privée notariée.
+
+Géopolitique d'une commodité, pour quelques mots échangés, pour te demander comment tu allais, qu'adviennent ces octets si de battre ton cœur s'est arrêté si ce message tu ne pourras le consulter s'il reste enfoui à jamais tant qu'il y aura de l'électricité.
+
+Ça sera un peu poétique, un peu politique, et j'espère, très expli-pratique.
+

source/_posts/2024/paris-web/slides/00-title.md

@@ -0,0 +1,29 @@
+
+<!-- .slide: data-background="images/serre-des-comilles.jpg" data-state="background-dark" -->
+
+
+# Appuyez sur Entrée pour envoyer ce message
+
+26 septembre 2024 — [Paris-Web][]\
+[thom4.net/talks/2024/paris-web](/talks/2024/paris-web/)
+
+
+[Paris-Web]: https://www.paris-web.fr/2024/conference/appuyez-sur-entree-pour-envoyer-ce-message
+
+
+@@@
+
+<!-- .slide: data-background="images/serre-des-comilles.jpg" -->
+
+~~~~
+
+Vous connaissez la lecture de paysage ?
+
+Cette pratique où on tente de distinguer les éléments, par contraste, par distance pour _voir_, _comprendre_, _interpréter_ et _apprendre_.
+
+Par exemple dans cette photo, on distingue une piste, des arbres encore verts et un couvert végétal très sec. On le sait grâce à sa couleur jaunie. On ressent cette sécheresse. On aperçoit une citerne au deuxième plan. Ele est remplie de 20K litres d'eau, destinée aux pompiers en cas d'incendie. Pompiers qui interviennent grâce aux pistes qu'on voit également à l'écran — les Défenses de Forêt Contre les Incendies (DFCI).
+
+Bref, pourquoi je vous parle de lecture de paysage alors qu'on n'est pas là pour ça ?\
+Parce que je vais m'inspirer de ce cheminement de pensée.
+
+Pour expliquer quoi ?

source/_posts/2024/paris-web/slides/05-me-situer.md

@@ -0,0 +1,9 @@
+<!-- .slide: data-background="../mixit/images/massif-saou.jpg" data-state="background-dark" -->
+
+## 👋🏻 Salut c'est *Thomas*
+
+Développeur Web\
+salarié indépendant en <abbr title="Coopérative d'Activité et d'Emploi">CAE</abbr>\
+📍 Crest
+
+[thom4.net](https://thom4.net) • [détour.studio](https://détour.studio)

source/_posts/2024/paris-web/slides/09-plan.md

@@ -0,0 +1,22 @@
+<span>486 000+</span><!-- .element: class="r-fit-text" style="margin-top: 0" -->
+emails auront été envoyés pendant cette présentation\
+([chiffres France 2011, Contactlab](https://www.arobase.org/actu/chiffres-email.htm))
+
+~~~~
+
+Basé sur 1,4 milliards emails envoyés quotidiennement en France, hors-spam.
+Le spam compte pour au moins la moitié des émissions de courriels.
+
+À multiplier par 237 pour un chiffre mondial.
+
+Source 2011, Contactlab : https://www.arobase.org/actu/chiffres-email.htm
+
+@@@
+
+<!-- .slide: data-background="images/serre-des-comilles.jpg"  data-state="background-dark" -->
+
+# Les paysages qu'on va traverser ensemble
+
+[🔎 contenu d'un courriel](#/enveloppe)<!-- .element: class="fragment" -->\
+[☎️ transmission de courriel](#/transport)<!-- .element: class="fragment" -->\
+[📬 transport des données](#/infrastructure)<!-- .element: class="fragment" -->\

source/_posts/2024/paris-web/slides/20-enveloppe.md

@@ -0,0 +1,131 @@
+<!-- .slide: data-background="images/serre-des-comilles.jpg"  data-state="background-dark" id="enveloppe" -->
+
+# 🔎 Qu'est-ce qu'il y a dans l'enveloppe ?
+
+(biologie d'un courriel)
+
+@@@
+
+<!-- .slide: data-background="images/email-ui.png" data-background-size="60%"  -->
+
+@@@
+
+<!-- .slide: data-background="images/email-ui-show-raw.png" data-background-size="60%"  -->
+
+
+@@@
+
+<!-- .slide: data-background="images/email-raw.png" data-background-size="60%"  -->
+
+@@@
+
+## Un courriel,<br> c'est _que_ du texte
+
+@@@
+
+## Un courriel,<br> c'est un _courrier_ <span>électronique</span><!-- .element: class="fragment "-->
+
+@@@
+
+<!-- .slide: data-background="images/email-courrier.png" data-background-size="contain" -->
+
+
+@@@
+
+## Donc des entêtes
+
+@@@
+
+<!-- .slide: data-background="images/email-entete.png" -->
+
+@@@
+
+## Donc des pages _délimitées_
+
+@@@
+
+<!-- .slide: data-background="images/email-delimiteurs.png" data-background-size="contain" -->
+
+@@@
+
+<!-- .slide: data-background="images/email-delimiteurs-html.png" data-background-size="contain" -->
+
+@@@
+
+## Donc des éléments _encodés_ / _à décoder_
+
+<span class="fragment">(c'est-à-dire, des _images_, de l'_audio_, des _vidéos_)</span>
+
+<span class="fragment">(et… y compris le _texte_ !)</span>
+
+@@@
+
+<!-- .slide: data-background="images/email-unicode.png" data-background-size="contain" -->
+
+@@@
+
+<!-- .slide: data-background="images/unicode-e-accent.png" data-background-size="contain" -->
+
+
+@@@
+
+<!-- .slide: data-background="images/bibliotheque-index.jpg" data-background-size="contain" -->
+
+~~~~
+
+https://fr.wikipedia.org/wiki/Catalogue_de_biblioth%C3%A8que#/media/Fichier:Manchester_Central_Library,_March_2010_(4467481691).jpg
+
+@@@
+
+<!-- .slide: data-background="images/unicode-a.png" data-background-size="contain" -->
+
+@@@
+
+<!-- .slide: data-background="images/unicode-ponctuations-chelou.png" data-background-size="contain" -->
+
+@@@
+
+<!-- .slide: data-background="images/unicode-cherokee.png" data-background-size="contain" -->
+
+~~~~
+
+https://fr.wikipedia.org/wiki/Syllabaire_cherokee
+
+
+@@@
+
+<!-- .slide: data-background="images/unicode-emoji.png" data-background-size="contain" -->
+
+
+@@@
+
+<!-- .slide: data-background="images/email-image.png" data-background-size="contain" -->
+
+@@@
+
+![](images/base64-decode.png)
+
+@@@
+
+<!-- .slide: data-background="images/png-file-format.svg" data-background-size="contain" -->
+
+~~~~
+
+https://www.nayuki.io/page/png-file-chunk-inspector
+
+@@@
+
+
+<!-- .slide: data-background="images/partition.png" data-background-size="contain" -->
+
+~~~~
+
+https://www.mamie-note.fr/cours/le-mode-mineur/les-limites-du-mode-majeur/
+
+@@@
+
+# Le _point commun_ de tous ces éléments ?
+
+C'est standardisé ou open source.
+
+([HTML](https://html.spec.whatwg.org/), [PNG](https://www.rfc-editor.org/info/rfc2083), [Base64](https://www.rfc-editor.org/info/rfc4648), [Internet Message Format](https://www.ietf.org/info/rfc2822), [Unicode/UTF-8](https://www.rfc-editor.org/info/rfc2279))

source/_posts/2024/paris-web/slides/30-transport.md

@@ -0,0 +1,102 @@
+<!-- .slide: data-background="images/serre-des-comilles.jpg"  data-state="background-dark" id="transport" -->
+
+# ☎️ Comment se parlent les machines ?
+
+(elles se cherchent et communiquent)
+
+@@@
+
+## Comme un… _courrier_
+
+@@@
+
+## `[email protected]`
+
+_test_ : destinataire\
+_@_ : chez\
+_example.com_ : serveur
+
+
+@@@
+
+## `[email protected]`
+
+_test_ : destinataire\
+_@_ : chez\
+_example.com_ : ~~serveur~~ foyer numérique
+
+@@@
+
+# Atteindre le foyer numérique
+
+(trouver l'adresse à partir du nom)
+
+
+@@@
+
+<!-- .slide: data-background="images/dns-root.png" -->
+
+@@@
+
+<!-- .slide: data-background="images/base-adresse.png" data-background-size="contain" -->
+
+
+@@@
+
+<!-- .slide: data-background="images/dns-records.png" data-background-size="contain" -->
+
+@@@
+
+<!-- .slide: data-background="images/annuaire.png" data-background-size="contain" -->
+
+@@@
+
+# Trouver un itinéraire
+
+(vous passerez par `154.54.6.222` puis `154.54.6.217` avant d'arriver en `154.54.83.73`)
+
+@@@
+
+<!-- .slide: data-background="images/traceroute-seattle-paris.png" -->
+
+@@@
+
+<!-- .slide: data-background="images/traceroute-grenoble-paris.png" -->
+
+
+
+@@@
+
+# Dialogue entre machines
+
+<span class="fragment">salut, c'est [email protected]</span><span class="fragment">, j'ai une lettre pour [email protected], je peux ?</span><span class="fragment"> Tiens, la voilà.</span>
+
+@@@
+
+```smtp
+S: MAIL FROM:<[email protected]>
+R: 250 OK
+
+S: RCPT TO:<[email protected]>
+R: 250 OK
+
+S: DATA
+R: 354 Start mail input; end with <CRLF>.<CRLF>
+S: Title: Bravo, votre sujet pour Paris Web est retenu
+S: … … …
+S: <CRLF>.<CRLF>
+R: 250 OK
+```
+
+~~~~
+
+http://www.iprelax.fr/smtp/821-3.php
+
+@@@
+
+# Le _point commun_ de tous ces éléments ?
+
+C'est standardisé ou open source.
+
+([BGP](https://datatracker.ietf.org/doc/html/rfc4271), [DNS](https://datatracker.ietf.org/doc/html/rfc1035), [SMTP](https://www.rfc-editor.org/info/rfc2821), [IMAP](https://www.rfc-editor.org/info/rfc2060), [TCP/IP](https://datatracker.ietf.org/doc/html/rfc9293), [iana.org](https://www.iana.org/))
+