feat(content): added much content

layouts/title-image.vue

@@ -10,6 +10,10 @@ const props = defineProps({
     type: String,
     default: '3fr 2fr'
   },
+  textAlign: {
+    type: String,
+    default: 'start'
+  },
   imageAlign: {
     type: String,
     default: 'center'
@@ -33,6 +37,7 @@ const image = imageSrc(props.image)
 <style scoped>
 .grid {
   grid-template-columns: v-bind(ratio);
+  align-items: v-bind(textAlign);
 }
 .image {
   block-size: 100%;

package.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@shikijs/transformers": "^1.24.2",
     "@slidev/cli": "^0.50.0-beta.11",
+    "playwright-chromium": "^1.49.1",
     "prettier": "3.4.2",
     "prettier-plugin-slidev": "^1.0.5"
   },

pages/eco.md

@@ -1,6 +1,132 @@
 ---
 layout: title-image
-image: brumm.avif
+image: moutain.jpg
+text-align: center
 ---
 
 # <span class="highlight">Sobriété</span> et performances
+
+Utiliser uniquement ce dont on a besoin.
+
+<!--
+Autant en terme de fonctionnalités que de ressources.
+Exemple T-shirt
+-->
+
+---
+layout: title-image
+image: pinky.jpg
+---
+
+# Contexte et législation
+
+- Il n'y a pas (encore) de cadre légal
+- Il existe un référentiel officiel&nbsp;: le [Référentiel général d'écoconception de services numériques](https://www.arcep.fr/mes-demarches-et-services/entreprises/fiches-pratiques/referentiel-general-ecoconception-services-numeriques.html) (RGESN) géré par l'ARCOM
+- Le RGESN se base en grande partie sur les [115 bonnes pratiques](https://collectif.greenit.fr/ecoconception-web/115-bonnes-pratiques-eco-conception_web.html) du collectif Green-IT.
+
+---
+layout: fact
+---
+
+# Sobriété
+
+<div v-click>tout simplement.</div>
+
+---
+layout: title-image
+image: monkey.jpg
+---
+
+# Idées reçues
+
+- ça fait des [sites moches…](https://lowww.directory/)
+- &laquo;&nbsp;On me bride ma créativité ALED !&nbsp;&raquo;
+- la direction/le client ne veut pas
+- on ne génère pas d'engagement qui [levrage les K€](https://www.instagram.com/reel/C9KqdlAI-OQ/) pour convertir les KPI 🤯
+- c'est cher
+
+<!--
+on appelle ça des contraintes, les contraintes stimulent la créativité.
+avez-vous demandé et informé ?
+OSKOUR
+interface simplifiée = interface plus facile/rapide à designer et développer.
+-->
+
+---
+layout: title-image
+image: 'brumm.avif'
+---
+
+# Performances
+
+## Leviers
+
+- Images
+  - dimensionner correctement
+  - compression et conversion (webp, avif)
+- Vidéos
+  - compression et conversion (webm, av1, h265, vp9)
+- Fonts
+  - compression et conversion (woff2)
+  - subsetting
+- Code source
+  - minification
+  - compression (gzip, brotli)
+
+<!--
+squoosh et/ou plugin WP
+-->
+
+---
+layout: auto-grid
+columns: 2
+---
+
+# Sécurité
+
+::content::
+
+<div>
+
+## Le strict minimum&nbsp;:
+
+- certificat TLS
+- pare feu
+- permissions
+- mots de passe forts
+- authentification à deux facteurs
+
+## Wordpress
+
+- mises à jour régulières
+- qualité des plugins
+- qualité des thèmes
+- ne pas modifier un réglages inconnu
+- ne pas exécuter du code non compris
+
+</div>
+
+<div>
+
+## Pour aller plus loin&nbsp;:
+
+- gestionnaire de mots de passe
+- outils et services hors <abbr title="Google Amazon Facebook Apple Microsofta">GAFAM</abbr>
+- [filigraner](https://filigrane.beta.gouv.fr/) ses documents
+- méfiance partout, confiance nulle-part
+
+![](/images/2fa.jpg)
+
+</div>
+
+<!--
+De nombreux réglages sont déjà activés. À vous de ne pas faire n'importe quoi avec le backoffice.
+-->
+
+---
+layout: end
+class: text-center
+hideInToc: true
+---
+
+À+ 🤙

slides.md

@@ -1,7 +1,7 @@
 ---
 author: Nicolas Arduin
 download: true
-exportFilename: intriduction-accessibilite-numerique
+exportFilename: introduction-accessibilite-numerique
 lineNumbers: true
 remoteAssets: true
 htmlAttrs:
@@ -45,6 +45,13 @@ layout: bullets
 
 <Toc maxDepth="1"></Toc>
 
+<style>
+	:deep(li) {
+		font-size: var(--size--1);
+		margin-block-start: var(--space-3xs);
+	}
+</style>
+
 ---
 layout: content
 ---
@@ -59,13 +66,13 @@ Tim Berners-Lee, Directeur du <abbr title="World Wide Web Consortium">W3C</abbr>
 
 > “&nbsp;L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.&nbsp;”
 
-Access 42
+Access42
 
 </div>
 
 <div v-click>
 
-> <span lang="en">The W3C vision is that the Web and related technologies are accessible so that all people with disabilities around the globe can participate equally in the digital world.</span>
+> La vision du W3C est que le Web et les technologies connexes soient accessibles afin que toutes les personnes handicapées du monde entier puissent participer au monde numérique sur un pied d'égalité.
 
 <abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Web Accessibility Initiative">WAI</abbr>
 
@@ -77,15 +84,15 @@ layout: content
 
 # Législation
 
-**Obligation actuelle :**
+**Obligation actuelle&nbsp;:**
 
-- les personnes morales de droit public
-- les personnes morales délégataires d’une mission de service public
-- les entreprises privées dont le chiffre d’affaires est supérieur à 250 millions d’euros
+- les personnes morales de droit public&nbsp;;
+- les personnes morales délégataires d’une mission de service public&nbsp;;
+- les entreprises privées dont le chiffre d’affaires est supérieur à 250 millions d’euros.
 
 <div v-click>
 
-**À partir de Juin 2025 :**
+**À partir de Juin 2025&nbsp;:**
 
 > Les entreprises employant moins de dix personnes qui fournissent des services et dont le chiffre d'affaires annuel n'excède pas deux millions d'euros.
 
@@ -93,7 +100,7 @@ layout: content
 
 > Tous les sites et plateformes de commerce électronique doivent être accessibles pour les nouveaux services à partir de 2025 et pour l’existant à partir de 2030.
 
-Plus de détails dans [cet article d'Access 42](https://access42.net/transposition-directive-europeenne-ue-2019-882-accessibilite-produits-services/)
+Plus de détails dans [cet article d'Access42](https://access42.net/transposition-directive-europeenne-ue-2019-882-accessibilite-produits-services/)
 
 </div>
 
@@ -133,7 +140,7 @@ hideInToc: true
 ---
 layout: auto-grid
 columns: 2
-rows: 250px
+rows: 220px
 ---
 
 # Exemples de <span class="highlight">technologies d'assistance</span>
@@ -151,7 +158,7 @@ layout: content
 
 # &#8203;1. Éléments <span class="highlight">HTML sémantiques</span>
 
-````md magic-move {lines: false}
+````md magic-move {lines: true}
 ```html
 <body>
   <div class="header">
@@ -172,7 +179,7 @@ layout: content
 </body>
 ```
 
-```html
+```html{*|2,10|3,9|4-8|11,17|13,16|18,20|*}
 <body>
   <header>
     <nav>
@@ -450,11 +457,12 @@ ratio: 1fr 1fr
 
 ---
 layout: quote
+hideInToc: true
 ---
 
 ::quote::
 
-# <span class="highlight">Rien n'est accessible</span> à tout le monde. Par conséquent, <span class="highlight">tout ce que vous ajoutez</span> à votre interface ne peut que la rendre <span class="highlight">moins accessible.</span> La simplicité <span class="highlight">(sobriété)</span> est le seule remède.
+# <span class="highlight">Rien n'est accessible</span> à tout le monde. Par conséquent, <span class="highlight">tout ce que vous ajoutez</span> à votre interface ne peut que la rendre <span class="highlight">moins accessible.</span> La simplicité <span class="highlight">(sobriété)</span> est le seul remède.
 
 ::default::
 

styles/base.css

@@ -38,6 +38,16 @@ body {
   color: var(--color-dark-blue);
 }
 
+@media print {
+  body {
+    text-wrap: initial;
+  }
+  :is(h1, h2, h3, h4, .h2, .h3, .h4) {
+    max-inline-size: initial;
+    text-wrap: initial;
+  }
+}
+
 h2,
 .h2 {
   font-size: var(--size-3);