feat: add draft article

pull/6/head
Nicolas Doby 2022-11-25 16:02:24 +01:00
parent bef7af2d08
commit c1327242f9
2 changed files with 94 additions and 28 deletions

View File

@ -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>
```

View File

@ -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.