deploy: b6befb6

2024/paris-web/index.html

@@ -63,12 +63,13 @@
           <textarea data-template>
 <!-- .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/)
 
+[zotero.org/groups/5025104/collections/ZLPY5WLF](https://www.zotero.org/groups/5025104/collections/ZLPY5WLF)
+
 
 [Paris-Web]: https://www.paris-web.fr/2024/conference/appuyez-sur-entree-pour-envoyer-ce-message
 
@@ -79,16 +80,21 @@
 
 ~~~~
 
-Vous connaissez la lecture de paysage ?
+Nous avons trois points commun :
+
+- celui d'être réuni·e dans cette salle parce qu'on a reçu les infos logistiques par email
+- celui de regarder une photo de vacances de l'autre rigolo sur scène alors qu'en ce moment on tente courageusement d'esquiver les averses
+- et aussi celui, en regardant la même image, de penser à des choses différentes
 
-Cette pratique où on tente de distinguer les éléments, par contraste, par distance pour _voir_, _comprendre_, _interpréter_ et _apprendre_.
+Ça vous parle la lecture de paysage ?
 
-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).
+Cette pratique où on tente de distinguer les éléments visibles et invisibles, par contraste, par distance, par taille, pour _voir_, _comprendre_, _interpréter_ et _apprendre_.
 
-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.
+Si on est en capacité de voir, on peut remarquer des différences de couleurs : des arbres verts, des herbes jaunes car sèches, un sommet pierreux ; peut-être du schiste.
+Une autre personne pourrait être à même d'identifier la variété des chênes ou du couvert végétal.
+Une autre pourrait compléter en nommant la citerne, sa capacité de stockage 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).
 
-Pour expliquer quoi ?
+Bref, pour relier le tout et revenir à notre point de départ, nous allons suivre le trajet d'un email, le suivre à la trace depuis notre appareil électronique jusqu'à celui de sæ destinataire. En utilisant le principe de lecture de paysage, et plutôt des métaphores que des explications techniques.
 </textarea>
         </section>
 
@@ -100,11 +106,11 @@
 
 ## 👋🏻 Salut c'est *Thomas*
 
-Développeur Web\
-salarié indépendant en <abbr title="Coopérative d'Activité et d'Emploi">CAE</abbr>\
-📍 Crest
+🧢 Développeur Web\
+🛠️ salarié indépendant en <abbr title="Coopérative d'Activité et d'Emploi">CAE</abbr>\
+📍 [Crest](https://www.openstreetmap.org/relation/84754) (vallée de la Drôme)
 
-[thom4.net](https://thom4.net) • [détour.studio](https://détour.studio)
+✍🏻 [thom4.net](https://thom4.net) • [détour.studio](https://détour.studio)
 </textarea>
         </section>
 
@@ -113,7 +119,7 @@
           data-separator-vertical="\n@@@\n"
           data-markdown>
           <textarea data-template><span>486 000+</span><!-- .element: class="r-fit-text" style="margin-top: 0" -->
-emails auront été envoyés pendant cette présentation\
+emails envoyés pendant la durée de cette présentation\
 ([chiffres France 2011, Contactlab](https://www.arobase.org/actu/chiffres-email.htm))
 
 ~~~~
@@ -131,9 +137,9 @@
 
 # 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" -->\
+🔎 [contenu d'un courriel](#/enveloppe)\
+☎️ [transmission de courriel](#/transport)\
+📬 [transport des données](#/infrastructure)
 </textarea>
         </section>
 
@@ -143,7 +149,7 @@
           data-markdown>
           <textarea data-template><!-- .slide: data-background="images/serre-des-comilles.jpg"  data-state="background-dark" id="enveloppe" -->
 
-# 🔎 Qu'est-ce qu'il y a dans l'enveloppe ?
+# 🔎 Qu'est-ce qu'il y a<br> dans l'enveloppe ?
 
 (biologie d'un courriel)
 
@@ -166,7 +172,7 @@
 
 @@@
 
-## Un courriel,<br> c'est un _courrier_ <span>électronique</span><!-- .element: class="fragment "-->
+## Un courriel,<br>c'est — littéralement —<br>un _courrier_ électronique
 
 @@@
 
@@ -197,9 +203,9 @@
 
 ## 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">(c'est-à-dire des _images_, de l'_audio_, des _vidéos_)</span>
 
-<span class="fragment">(et… y compris le _texte_ !)</span>
+<span class="fragment">(y compris le _texte_ !)</span>
 
 @@@
 
@@ -287,7 +293,7 @@
 
 @@@
 
-## Comme un… _courrier_
+## Comme du _courrier_ postal
 
 @@@
 
@@ -306,6 +312,12 @@
 _@_ : chez\
 _example.com_ : ~~serveur~~ foyer numérique
 
+<small>(parce que dans un même foyer il peut y avoir plusieurs serveurs)</small>
+
+~~~~
+
+C'est un peu le principe des boîtes aux lettres dans un immeuble. Chaque boîte étant un serveur.
+
 @@@
 
 # Atteindre le foyer numérique
@@ -332,9 +344,9 @@
 
 @@@
 
-# Trouver un itinéraire
+# Logistique d'acheminement
 
-(vous passerez par `154.54.6.222` puis `154.54.6.217` avant d'arriver en `154.54.83.73`)
+(vous tournerez en direction de `154.54.6.222` puis `154.54.6.217` avant d'arriver en `154.54.83.73`)
 
 @@@
 
@@ -400,15 +412,15 @@
 
 @@@
 
-## Fournisseur d'accès
+## Fournisseur d'accès (<abbr title="Fournisseur d'Accès à Internet">FAI</abbr>)
 
-(raccordement à son réseau connecté à un réseau connecté à un autre réseau…)
+(raccordement à son réseau, qui est connecté à un autre réseau lui-même connecté à encore un autre réseau…)
 
 @@@
 
 ## Boucle locale
 
-(accrochez vos ceintures)
+(du chemin à la départementale)
 
 @@@
 
@@ -425,6 +437,8 @@
 
 ## Concentrateur réseau local (_hub_)
 
+(de la départementale à la nationale)
+
 @@@
 
 <!-- .slide: data-background="images/infra-nra-crest.jpg" -->
@@ -437,7 +451,7 @@
 
 ## Point d'échange Internet
 
-(nœud de raccordement nationaux)
+(entrée sur l'autoroute)
 
 @@@
 
@@ -642,6 +656,8 @@
           <textarea data-template><!-- .slide: data-background="images/serre-des-comilles.jpg" data-state="background-dark" -->
 
 ## 🙏🏻 Merci pour la balade
+
+[zotero.org/groups/5025104/collections/ZLPY5WLF](https://www.zotero.org/groups/5025104/collections/ZLPY5WLF)
 </textarea>
         </section>
 

2024/paris-web/slides/00-title.html

@@ -2,17 +2,23 @@
 <h1 id="Appuyez-sur-Entree-pour-envoyer-ce-message"><a class="header-anchor" href="#Appuyez-sur-Entree-pour-envoyer-ce-message">§</a>Appuyez sur Entrée pour envoyer ce message</h1>
 <p>26 septembre 2024 — <a href="https://www.paris-web.fr/2024/conference/appuyez-sur-entree-pour-envoyer-ce-message">Paris-Web</a><br>
 <a href="/talks/2024/paris-web/">thom4.net/talks/2024/paris-web</a></p>
+<p><a href="https://www.zotero.org/groups/5025104/collections/ZLPY5WLF">zotero.org/groups/5025104/collections/ZLPY5WLF</a></p>
 <p>@@@</p>
 <!-- .slide: data-background="images/serre-des-comilles.jpg" -->
 <pre><code>
-Vous connaissez la lecture de paysage ?
+Nous avons trois points commun :
 
-Cette pratique où on tente de distinguer les éléments, par contraste, par distance pour _voir_, _comprendre_, _interpréter_ et _apprendre_.
+- celui d'être réuni·e dans cette salle parce qu'on a reçu les infos logistiques par email
+- celui de regarder une photo de vacances de l'autre rigolo sur scène alors qu'en ce moment on tente courageusement d'esquiver les averses
+- et aussi celui, en regardant la même image, de penser à des choses différentes
 
-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).
+Ça vous parle la lecture de paysage ?
 
-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.
+Cette pratique où on tente de distinguer les éléments visibles et invisibles, par contraste, par distance, par taille, pour _voir_, _comprendre_, _interpréter_ et _apprendre_.
 
-Pour expliquer quoi ?
+Si on est en capacité de voir, on peut remarquer des différences de couleurs : des arbres verts, des herbes jaunes car sèches, un sommet pierreux ; peut-être du schiste.
+Une autre personne pourrait être à même d'identifier la variété des chênes ou du couvert végétal.
+Une autre pourrait compléter en nommant la citerne, sa capacité de stockage 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, pour relier le tout et revenir à notre point de départ, nous allons suivre le trajet d'un email, le suivre à la trace depuis notre appareil électronique jusqu'à celui de sæ destinataire. En utilisant le principe de lecture de paysage, et plutôt des métaphores que des explications techniques.
 </code></pre>

2024/paris-web/slides/05-me-situer.html

@@ -1,6 +1,6 @@
 <!-- .slide: data-background="../mixit/images/massif-saou.jpg" data-state="background-dark" -->
 <h2 id="👋🏻-Salut-c’est-Thomas"><a class="header-anchor" href="#👋🏻-Salut-c’est-Thomas">§</a>👋🏻 Salut c’est <em>Thomas</em></h2>
-<p>Développeur Web<br>
-salarié indépendant en <abbr title="Coopérative d'Activité et d'Emploi">CAE</abbr><br>
-📍 Crest</p>
-<p><a href="https://thom4.net">thom4.net</a> • <a href="https://xn--dtour-bsa.studio">détour.studio</a></p>
+<p>🧢 Développeur Web<br>
+🛠️ salarié indépendant en <abbr title="Coopérative d'Activité et d'Emploi">CAE</abbr><br>
+📍 <a href="https://www.openstreetmap.org/relation/84754">Crest</a> (vallée de la Drôme)</p>
+<p>✍🏻 <a href="https://thom4.net">thom4.net</a> • <a href="https://xn--dtour-bsa.studio">détour.studio</a></p>

2024/paris-web/slides/09-plan.html

@@ -1,5 +1,5 @@
 <p><span>486 000+</span><!-- .element: class="r-fit-text" style="margin-top: 0" --><br>
-emails auront été envoyés pendant cette présentation<br>
+emails envoyés pendant la durée de cette présentation<br>
 (<a href="https://www.arobase.org/actu/chiffres-email.htm">chiffres France 2011, Contactlab</a>)</p>
 <pre><code>
 Basé sur 1,4 milliards emails envoyés quotidiennement en France, hors-spam.
@@ -15,7 +15,7 @@
 
 # Les paysages qu'on va traverser ensemble
 
-[🔎 contenu d'un courriel](#/enveloppe)&lt;!-- .element: class=&quot;fragment&quot; --&gt;\
-[☎️ transmission de courriel](#/transport)&lt;!-- .element: class=&quot;fragment&quot; --&gt;\
-[📬 transport des données](#/infrastructure)&lt;!-- .element: class=&quot;fragment&quot; --&gt;\
+🔎 [contenu d'un courriel](#/enveloppe)\
+☎️ [transmission de courriel](#/transport)\
+📬 [transport des données](#/infrastructure)
 </code></pre>

2024/paris-web/slides/20-enveloppe.html

@@ -1,5 +1,5 @@
 <!-- .slide: data-background="images/serre-des-comilles.jpg"  data-state="background-dark" id="enveloppe" -->
-<h1 id="🔎-Qu’est-ce-qu’il-y-a-dans-l’enveloppe"><a class="header-anchor" href="#🔎-Qu’est-ce-qu’il-y-a-dans-l’enveloppe">§</a>🔎 Qu’est-ce qu’il y a dans l’enveloppe ?</h1>
+<h1 id="🔎-Qu’est-ce-qu’il-y-a-br-dans-l’enveloppe"><a class="header-anchor" href="#🔎-Qu’est-ce-qu’il-y-a-br-dans-l’enveloppe">§</a>🔎 Qu’est-ce qu’il y a<br> dans l’enveloppe ?</h1>
 <p>(biologie d’un courriel)</p>
 <p>@@@</p>
 <!-- .slide: data-background="images/email-ui.png" data-background-size="60%"  -->
@@ -10,7 +10,7 @@ <h1 id="🔎-Qu’est-ce-qu’il-y-a-dans-l’enveloppe"><a class="header-anchor
 <p>@@@</p>
 <h2 id="Un-courriel-br-c’est-que-du-texte"><a class="header-anchor" href="#Un-courriel-br-c’est-que-du-texte">§</a>Un courriel,<br> c’est <em>que</em> du texte</h2>
 <p>@@@</p>
-<h2 id="Un-courriel-br-c’est-un-courrier-span-electronique-span-element-class-fragment"><a class="header-anchor" href="#Un-courriel-br-c’est-un-courrier-span-electronique-span-element-class-fragment">§</a>Un courriel,<br> c’est un <em>courrier</em> <span>électronique</span><!-- .element: class="fragment "--></h2>
+<h2 id="Un-courriel-br-c’est-—-litteralement-—-br-un-courrier-electronique"><a class="header-anchor" href="#Un-courriel-br-c’est-—-litteralement-—-br-un-courrier-electronique">§</a>Un courriel,<br>c’est — littéralement —<br>un <em>courrier</em> électronique</h2>
 <p>@@@</p>
 <!-- .slide: data-background="images/email-courrier.png" data-background-size="contain" -->
 <p>@@@</p>
@@ -25,8 +25,8 @@ <h2 id="Donc-des-pages-delimitees"><a class="header-anchor" href="#Donc-des-page
 <!-- .slide: data-background="images/email-delimiteurs-html.png" data-background-size="contain" -->
 <p>@@@</p>
 <h2 id="Donc-des-elements-encodes-a-decoder"><a class="header-anchor" href="#Donc-des-elements-encodes-a-decoder">§</a>Donc des éléments <em>encodés</em> / <em>à décoder</em></h2>
-<p><span class="fragment">(c’est-à-dire, des <em>images</em>, de l’<em>audio</em>, des <em>vidéos</em>)</span></p>
-<p><span class="fragment">(et… y compris le <em>texte</em> !)</span></p>
+<p><span class="fragment">(c’est-à-dire des <em>images</em>, de l’<em>audio</em>, des <em>vidéos</em>)</span></p>
+<p><span class="fragment">(y compris le <em>texte</em> !)</span></p>
 <p>@@@</p>
 <!-- .slide: data-background="images/email-unicode.png" data-background-size="contain" -->
 <p>@@@</p>

2024/paris-web/slides/30-transport.html

@@ -2,7 +2,7 @@
 <h1 id="☎️-Comment-se-parlent-les-machines"><a class="header-anchor" href="#☎️-Comment-se-parlent-les-machines">§</a>☎️ Comment se parlent les machines ?</h1>
 <p>(elles se cherchent et communiquent)</p>
 <p>@@@</p>
-<h2 id="Comme-un…-courrier"><a class="header-anchor" href="#Comme-un…-courrier">§</a>Comme un… <em>courrier</em></h2>
+<h2 id="Comme-du-courrier-postal"><a class="header-anchor" href="#Comme-du-courrier-postal">§</a>Comme du <em>courrier</em> postal</h2>
 <p>@@@</p>
 <h2 id="test-example-com"><a class="header-anchor" href="#test-example-com">§</a><code>[email protected]</code></h2>
 <p><em>test</em> : destinataire<br>
@@ -13,29 +13,60 @@ <h2 id="test-example-com-v2"><a class="header-anchor" href="#test-example-com-v2
 <p><em>test</em> : destinataire<br>
 <em>@</em> : chez<br>
 <em><a href="http://example.com">example.com</a></em> : <s>serveur</s> foyer numérique</p>
-<p>@@@</p>
-<h1 id="Atteindre-le-foyer-numerique"><a class="header-anchor" href="#Atteindre-le-foyer-numerique">§</a>Atteindre le foyer numérique</h1>
-<p>(trouver l’adresse à partir du nom)</p>
-<p>@@@</p>
-<!-- .slide: data-background="images/dns-root.png" -->
-<p>@@@</p>
-<!-- .slide: data-background="images/base-adresse.png" data-background-size="contain" -->
-<p>@@@</p>
-<!-- .slide: data-background="images/dns-records.png" data-background-size="contain" -->
-<p>@@@</p>
-<!-- .slide: data-background="images/annuaire.png" data-background-size="contain" -->
-<p>@@@</p>
-<h1 id="Trouver-un-itineraire"><a class="header-anchor" href="#Trouver-un-itineraire">§</a>Trouver un itinéraire</h1>
-<p>(vous passerez par <code>154.54.6.222</code> puis <code>154.54.6.217</code> avant d’arriver en <code>154.54.83.73</code>)</p>
-<p>@@@</p>
-<!-- .slide: data-background="images/traceroute-seattle-paris.png" -->
-<p>@@@</p>
-<!-- .slide: data-background="images/traceroute-grenoble-paris.png" -->
-<p>@@@</p>
-<h1 id="Dialogue-entre-machines"><a class="header-anchor" href="#Dialogue-entre-machines">§</a>Dialogue entre machines</h1>
-<p><span class="fragment">salut, c’est <a href="mailto:[email protected]">[email protected]</a></span><span class="fragment">, j’ai une lettre pour <a href="mailto:[email protected]">[email protected]</a>, je peux ?</span><span class="fragment"> Tiens, la voilà.</span></p>
-<p>@@@</p>
-<pre><code class="language-smtp">S: MAIL FROM:&lt;[email protected]&gt;
+<p><small>(parce que dans un même foyer il peut y avoir plusieurs serveurs)</small></p>
+<pre><code>
+C'est un peu le principe des boîtes aux lettres dans un immeuble. Chaque boîte étant un serveur.
+
+@@@
+
+# Atteindre le foyer numérique
+
+(trouver l'adresse à partir du nom)
+
+
+@@@
+
+&lt;!-- .slide: data-background=&quot;images/dns-root.png&quot; --&gt;
+
+@@@
+
+&lt;!-- .slide: data-background=&quot;images/base-adresse.png&quot; data-background-size=&quot;contain&quot; --&gt;
+
+
+@@@
+
+&lt;!-- .slide: data-background=&quot;images/dns-records.png&quot; data-background-size=&quot;contain&quot; --&gt;
+
+@@@
+
+&lt;!-- .slide: data-background=&quot;images/annuaire.png&quot; data-background-size=&quot;contain&quot; --&gt;
+
+@@@
+
+# Logistique d'acheminement
+
+(vous tournerez en direction de `154.54.6.222` puis `154.54.6.217` avant d'arriver en `154.54.83.73`)
+
+@@@
+
+&lt;!-- .slide: data-background=&quot;images/traceroute-seattle-paris.png&quot; --&gt;
+
+@@@
+
+&lt;!-- .slide: data-background=&quot;images/traceroute-grenoble-paris.png&quot; --&gt;
+
+
+
+@@@
+
+# Dialogue entre machines
+
+&lt;span class=&quot;fragment&quot;&gt;salut, c'est [email protected]&lt;/span&gt;&lt;span class=&quot;fragment&quot;&gt;, j'ai une lettre pour [email protected], je peux ?&lt;/span&gt;&lt;span class=&quot;fragment&quot;&gt; Tiens, la voilà.&lt;/span&gt;
+
+@@@
+
+```smtp
+S: MAIL FROM:&lt;[email protected]&gt;
 R: 250 OK
 
 S: RCPT TO:&lt;[email protected]&gt;
@@ -47,16 +78,11 @@ <h1 id="Dialogue-entre-machines"><a class="header-anchor" href="#Dialogue-entre-
 S: … … …
 S: &lt;CRLF&gt;.&lt;CRLF&gt;
 R: 250 OK
-</code></pre>
-<pre><code>
-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/))
+```
 
 </code></pre>
+<p><a href="http://www.iprelax.fr/smtp/821-3.php">http://www.iprelax.fr/smtp/821-3.php</a></p>
+<p>@@@</p>
+<h1 id="Le-point-commun-de-tous-ces-elements"><a class="header-anchor" href="#Le-point-commun-de-tous-ces-elements">§</a>Le <em>point commun</em> de tous ces éléments ?</h1>
+<p>C’est standardisé ou open source.</p>
+<p>(<a href="https://datatracker.ietf.org/doc/html/rfc4271">BGP</a>, <a href="https://datatracker.ietf.org/doc/html/rfc1035">DNS</a>, <a href="https://www.rfc-editor.org/info/rfc2821">SMTP</a>, <a href="https://www.rfc-editor.org/info/rfc2060">IMAP</a>, <a href="https://datatracker.ietf.org/doc/html/rfc9293">TCP/IP</a>, <a href="https://www.iana.org/">iana.org</a>)</p>