feat: add draft article

src/_pages/blog/article/integration_video.md

@@ -0,0 +1,94 @@
+---
+title: Intégrer une vidéo sur une page Web
+description: Intégrer au mieux une vidéo sur une page Web en prenant en compte les aspects éco-conception, accessibilité et éthique.
+date: 2022-11-25
+tags:
+  - écoconception
+  - accessibilité
+  - éthique
+authors:
+  - Nicolas DOBY
+draft: true
+layout: article.njk
+---
+
+
+margaux.escande
+16:24
+donner un exemple de truc relou
+
+poser la problématique principale : environnemental / accessibilité numérique
+
+poser les sous problématique : Gafam
+
+l'usage des vidéos explose : tik tok ...
+
+expliquer ce qui peut être fait d'un point de vue métier / technique et à quel moment une vidéo fait sens
+
+## Introduction
+
+Chiffre du poids des vidéos
+
+Google / auto hébergement
+
+Bannir l'autoplay
+
+Rendre accessible
+
+Afficher la durée, le poids
+
+Encoder sur un format standard
+
+Limiter le poids, 720p max
+
+Exemple https://couleur-science.eu/ qui explique des phon
+
+## Conseils
+
+Pour un tuto technique, bannissez le format vidéo. Rien de plus frustrant de voir un tutoriel expliquant une technologie, un framework, .. sous forme de vidéo.
+La plupart du temps, le code source n'est pas disponible.
+
+Rien de mieux que de présenter un tutoriel avec des explications ponctuées d'exemples de code au format textuel !
+
+## Se passer de Google
+
+Indépendance face aux GAFAM,
+
+Vidéo peut être supprimée,
+
+le lecteur ajoute une surcouche non nécessaire
+
+Si vous avez besoin Peertube vs. lecteur HTML5
+
+https://www.youtube.com/watch?v=dQw4w9WgXcQ
+
+
+## Rendre une vidéo accessible
+
+Ajouter une transcription :
+```html
+<figure>
+  <video aria-describedby="transcription" preload="metadata" poster="/videos/video1_poster.jpg" width="620">
+    <source src="/videos/video1.mp4" type="video/mp4">
+    <p>Votre navigateur ne prend pas en charge les vidéos HTML5. <a href="/videos/video1.mp4">un lien pour télécharger la vidéo</a>.</p>
+  </video>
+  <figcaption>
+    <details>
+      <summary>Afficher la transcription</summary>
+      <div id="transcription">
+        <p>
+          - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad commodi, dolorum incidunt laudantium, mollitia
+            nihil nisi obcaecati porro quaerat, quam quas quidem quis quos recusandae repellendus reprehenderit suscipit temporibus vitae?
+        </p>
+        <p>
+          - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus earum neque tempore? A ab animi dolorum ea eos, fuga, hic numquam
+          obcaecati perferendis reiciendis sapiente vero vitae voluptatem. Iusto, natus?
+        </p>
+      </div>
+    </details>
+  </figcaption>
+</figure>
+```
+
+
+

src/_pages/blog/article/test.md

@@ -1,28 +0,0 @@
----
-title: "Test"
-description: "test"
-date: 2022-11-25
-tags:
-  - test
-  - test2
-  - test3
-authors:
-  - John Doe
-draft: true
-layout: article.njk
----
-
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deleniti eius, eveniet fugit magni provident
-  vel? Corporis deserunt doloribus ducimus hic iusto nemo neque perspiciatis qui sit totam! Culpa, saepe!
-
-Accusamus consectetur consequatur cupiditate est neque nisi pariatur possimus quisquam quod ratione. Atque dolorem
-  eius excepturi explicabo, illo, inventore ipsam laborum maxime molestias nisi omnis possimus sequi temporibus ut vero.
-
-Accusantium aspernatur beatae commodi corporis, delectus dolore earum et explicabo illo illum ipsa ipsam iste magni
-  maiores minus neque omnis quis rem rerum sapiente sed ullam unde velit vitae voluptatum?
-
-Atque, deserunt enim itaque laborum libero magnam minus pariatur quam, reiciendis repellat suscipit velit. Ad
-  aliquam debitis dolores fuga harum libero minus quaerat quam sequi velit! Recusandae rem, voluptatibus. Possimus?
-
-Amet id itaque numquam obcaecati rem! Mollitia nostrum numquam quod. Aperiam assumenda, delectus dolor fuga fugiat,
-  iste maxime neque pariatur porro provident quaerat vitae voluptas? Dolorem quia quo tempore voluptatem.