mirror of
https://git.librezo.fr/Librezo/website.git
synced 2025-10-31 13:55:30 +01:00
49 lines
2.2 KiB
Markdown
49 lines
2.2 KiB
Markdown
# Nouveau site web de Librezo
|
|
|
|
[voir le rendu](http://librezo.txmn.tk)
|
|
|
|
## Utilisation
|
|
|
|
[Installez Zola](https://getzola.org)
|
|
|
|
```bash
|
|
# tester en local
|
|
zola serve
|
|
|
|
# compiler en démo publique
|
|
LIBREZO_WEBSITE=dev zola build
|
|
|
|
# compiler en prod
|
|
zola build
|
|
```
|
|
|
|
## Contribution
|
|
|
|
Le site devrait respecter les points suivants.
|
|
|
|
Note : il n'est pas nécessaire de s'y conformer immédiatement en faisant une MR. La relecture de MR est là pour ça.
|
|
|
|
* **Validité**
|
|
* Testez votre code avec [le validateur du W3C](https://validator.w3.org).
|
|
* **Accessibilité et Responsive**
|
|
* Testez votre code avec [le validateur WAVE](https://wave.webaim.org).
|
|
* Suivez les recommandations d'accessibilité du [W3C](https://www.w3.org/WAI/) et du [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility).
|
|
* Toutes les fonctionnalités doivent être accessibles au clavier exclusivement (tab, flèches, entrée, espace). Essayez éventuellement avec un lecteur d'écran comme [Orca](https://wiki.gnome.org/Projects/Orca) (Linux), [NVDA](https://www.nvaccess.org/) (Windows) ou TalkBack (Android).
|
|
* Les images doivent être optionnelles.
|
|
* JavaScript doit être optionnel.
|
|
* Les modes clair et sombres doivent être utilisables. (sous Firefox, CTRL+Maj+i puis icônes Soleil et Lune)
|
|
* Testez la page avec différentes tailles d'écran. (sous Firefox, CTRL+Maj+m)
|
|
* Testez la page avec des simulateurs de daltonisme. (sous Firefox, CTRL+Maj+i puis onglet Accessibilité)
|
|
* **Performance**
|
|
* Limitez l'utilisation de frameworks.
|
|
* Compressez bien les images. [YOGA Image Optimizer](https://yoga.flozz.org/) peut être utile.
|
|
* Réduisez les requêtes externes.
|
|
* Évitez les animations en continu et les lectures automatiques.
|
|
* **Style de code**
|
|
* Respectez l'indentation.
|
|
* La convention de nommages des `id` et `class` est hiérarchique, avec les niveaux de hiérarchie séparés par des tirets `-`. Les underscores `_` marquent un espace mais pas un niveau hiérarchique.
|
|
Exemple : `header-menu-button` serait un bouton du menu de l'entête.
|
|
* **Légalité**
|
|
* Respectez le RGPD et la loi Informatique et Libertés.
|
|
* Sauf exception, n'utilisez que des œuvres et formats libres, et respectez leur licence. (images, polices, bibliothèques)
|