Merge pull request 'Ajoute un post sur le site web' (#2) from ajout-article-site-web into main
Reviewed-on: #2 Reviewed-by: naeya <naeya@noreply.localhost>
This commit is contained in:
commit
3170ba146e
3 changed files with 231 additions and 3 deletions
70
README.md
70
README.md
|
|
@ -2,13 +2,79 @@
|
||||||
|
|
||||||
# Le site web de la distorsion !
|
# Le site web de la distorsion !
|
||||||
|
|
||||||
|
## TODO
|
||||||
|
|
||||||
|
- Ecrire le contenu de la page présentation.
|
||||||
|
- Réparer la CI. Héberger nos propre runners ?
|
||||||
|
- Documenter l'édition du site à partir de l'interface web du dépot git.
|
||||||
|
Comment rajouter/enlever des évènements à venir ? Comment ajouter un billet
|
||||||
|
de blog ? Comment ajouter une feuille de style ?
|
||||||
|
|
||||||
## Site actuel
|
## Site actuel
|
||||||
|
|
||||||
Le site est super basique : c'est juste des fichiers statiques html, css et js
|
Le site est super basique : c'est juste des fichiers statiques html, css et js
|
||||||
servis depuis un bucket S3, hébergé chez les camarades de
|
servis depuis un bucket S3, hébergé chez les camarades de
|
||||||
[deuxfleurs](https://deuxfleurs.fr).
|
[deuxfleurs](https://deuxfleurs.fr).
|
||||||
|
|
||||||
### Test
|
## Edition
|
||||||
|
|
||||||
|
On choisit volontairement de s'imposer des contraintes techniques assez fortes
|
||||||
|
pour que le site reste le plus simple possible, et puisse servir de support
|
||||||
|
pour comprendre les technologies à la base du Web. On veille collectivement à
|
||||||
|
cette simplicité, ce qui implique le mode de fonctionnement suivant pour les
|
||||||
|
éditions du site :
|
||||||
|
|
||||||
|
- Pour les petites éditions de contenu, typiquement mettre à jour la liste des
|
||||||
|
évènement à venir : push dans la branche `main`.
|
||||||
|
- Pour tout le reste à priori, comme éditer la structure du site (header,
|
||||||
|
footer, CSS) ou ajouter des billets de blog, on fait les modifications dans
|
||||||
|
une branche séparée, et on ouvre une pull request.
|
||||||
|
|
||||||
|
## Choix techniques
|
||||||
|
|
||||||
|
On essaye de documenter ici les choix techniques qui ont fait l'objet de
|
||||||
|
débats, et qui sont peut être pas évidents.
|
||||||
|
|
||||||
|
### 2024/10/25: Gestion du contenu qui se répète
|
||||||
|
|
||||||
|
Les contenus qui se répète sont principalement les éléments `<head>`,
|
||||||
|
`<header>` et `<footer>` qui se retrouvent sur toutes les pages HTML. On a considéré les possibilités suivantes :
|
||||||
|
|
||||||
|
- Utiliser un générateur de site simple.
|
||||||
|
- Utiliser du Server Side Include (SSI) pour charger le serveur web d'ajouter
|
||||||
|
le contenu qui se répète.
|
||||||
|
- Ecrire un petit script bash qui ajoute le contenu commun avec des simples
|
||||||
|
`cat` et `sed`.
|
||||||
|
- Ecrire un petit script JavaScript qui ajoute le contenu commun dynamiquement
|
||||||
|
à toutes les pages.
|
||||||
|
|
||||||
|
Ces solutions ont toutes le désavantage de rendre le site plus "opaque". Les
|
||||||
|
fichiers que l'on voit dans le dépot ne sont plus directement ceux qui sont
|
||||||
|
servis au navigateur, ce qui ajoute une barrière supplémentaire à une personne
|
||||||
|
qui essaye de comprendre le site. Les deux dernières sont une pente glissante
|
||||||
|
vers la réécriture d'un générateur de site maison (ce qui n'est pas forcément
|
||||||
|
mal). Le SSI n'est pas vraiment une option tant que le site est hébergé chez
|
||||||
|
DeuxFleurs, car leur infrastructure ne le supporte pas.
|
||||||
|
|
||||||
|
On a donc décidé de répéter le contenu dans tous les fichiers. Si on écrit bien
|
||||||
|
les parties redondantes, elles ne devraient pas être modifiées très souvent.
|
||||||
|
Quand c'est le cas, on peut facilement comprendre la tâche à faire, et
|
||||||
|
éventuellement écrire un petit script bash simple pour réaliser cette tâche.
|
||||||
|
C'est l'occasion d'apprendre quelque chose ensemble.
|
||||||
|
|
||||||
|
Evidemment, c'est pas idéal comme situation. Y'a un risque que les parties qui
|
||||||
|
sont censées être communes finissent par se désynchroniser. On verra bien à
|
||||||
|
l'usage.
|
||||||
|
|
||||||
|
### 2024/10/25: Flex
|
||||||
|
|
||||||
|
Pour centrer le contenu sur toutes les pages dans le css par défaut, on a
|
||||||
|
décidé de transformer le `<body>` en un conteneur flex. Flex c'est un peu
|
||||||
|
compliqué (nous même on comprend pas bien comment ça marche) mais ça permet que
|
||||||
|
tous les nouveaux éléments ajoutés dans la page comme enfant du `<body>` soient
|
||||||
|
centrés, sans qu'il ne faille ajouter `margin: auto` dessus à chaque fois.
|
||||||
|
|
||||||
|
## Tester le site en local
|
||||||
|
|
||||||
Pour tester le site en local, il faut un serveur web local. L'une des options
|
Pour tester le site en local, il faut un serveur web local. L'une des options
|
||||||
les plus simples qui ne demande pas de configuration est d'utiliser celui qui
|
les plus simples qui ne demande pas de configuration est d'utiliser celui qui
|
||||||
|
|
@ -25,7 +91,7 @@ site, simplement ouvrir les fichiers html avec le navigateur va casser des
|
||||||
références (aux fichiers css par exemple, ou des liens). On a besoin de passer
|
références (aux fichiers css par exemple, ou des liens). On a besoin de passer
|
||||||
par un serveur web pour que le site ait une racine bien définie.
|
par un serveur web pour que le site ait une racine bien définie.
|
||||||
|
|
||||||
### Déploiement
|
## Déploiement
|
||||||
|
|
||||||
Si l'informatique marchait bien, le site serait automatiquement mis à jour à
|
Si l'informatique marchait bien, le site serait automatiquement mis à jour à
|
||||||
chaque fois qu'on pousse des modification dans le dépot par l'outil
|
chaque fois qu'on pousse des modification dans le dépot par l'outil
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
<main>
|
<main>
|
||||||
<nav class="blog">
|
<nav class="blog">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/blog/article-template.html">Template d'article</a></li>
|
<li><a href="/blog/2024-10-25_site_web.html">25/10/2024 : Le site de la Distorsion, pourquoi il est un peu cheum</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
162
site/blog/2024-10-25_site_web.html
Normal file
162
site/blog/2024-10-25_site_web.html
Normal file
|
|
@ -0,0 +1,162 @@
|
||||||
|
<!doctype html>
|
||||||
|
<!-- un jour, on pourrait ajouter miroir en .oignon -->
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>La Distorsion - Blog</title>
|
||||||
|
<link rel="icon" href="/img/favicon.svg" />
|
||||||
|
<link href="/css/default.css" rel="stylesheet" />
|
||||||
|
<script src="/js/styleswitcher.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>La Distorsion</h1>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="/index.html">maison</a></li>
|
||||||
|
<li><a href="/infos.html">infos pratiques</a></li>
|
||||||
|
<li><a href="/blog.html">blog</a></li>
|
||||||
|
<li>
|
||||||
|
<label for="styleswitcher">change de style :</label>
|
||||||
|
<select id="styleswitcher"></select>
|
||||||
|
<script>initStyleSelectElement()</script>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<h2>Pourquoi le site de la Distorsion il est un peu cheum</h2>
|
||||||
|
<p>Voilà, le site de la Distorsion est plus ou moins en place ! Petit
|
||||||
|
résumé des ambitions auxquel il essaye de répondre.</p>
|
||||||
|
<h3>Le web en 2024</h3>
|
||||||
|
<p>Un site web, au fond, c'est un ensemble de fichiers qui sont envoyés
|
||||||
|
par le serveur web au navigateur. Il y a des fichiers HTML, qui décrivent
|
||||||
|
le contenu des pages. Les fichiers CSS qui specifient comment le contenu
|
||||||
|
des pages doit être affiché. Et les fichiers JavaScript qui sont des
|
||||||
|
programmes que le navigateur exécute, typiquement pour animer ou rendre
|
||||||
|
dynamique des éléments sur la page web.</p>
|
||||||
|
<p>Y'a en gros deux types de sites webs. Les sites statiques, où tous les
|
||||||
|
fichiers sont écrits à l'avance, et le serveur web les envoie tels quels,
|
||||||
|
et les sites dynamique, où le serveur web récupère les fichiers à la
|
||||||
|
demande auprès d'un programme qui les génère à la volée. Les site
|
||||||
|
dynamiques permettent d'avoir des site qui changent selon ce qu'on y
|
||||||
|
fait, de sauvegarder des données des visiteur·euse·s etc... Pour la
|
||||||
|
Distorsion, on a juste besoin de présenter du contenu, donc un site
|
||||||
|
static fait très bien l'affaire et il nous reste donc à écrire l'ensemble
|
||||||
|
des fichiers qui constituent notre site.</p>
|
||||||
|
<p>En pratique, ça se fait plus vraiment d'écrire à la main ces
|
||||||
|
différents fichiers. Pour des gros sites complexes, ça devient vite
|
||||||
|
l'enfer : beaucoup du contenu se répète (par exemple les éléments communs
|
||||||
|
à toutes les pages comme les headers et les barres de navigation), les
|
||||||
|
liens entre les différentes pages doivent faire référence aux bons
|
||||||
|
fichiers dans l'arborescence (et il faut bien les garder à jour si on
|
||||||
|
déplace ou renomme un fichier) etc... Pour faire face à ça, tout un tas
|
||||||
|
de "frameworks" ou générateurs ont été développés. Ils permettent de
|
||||||
|
générer tous ces fichiers à partir d'une description du site écrite dans
|
||||||
|
un langage de programmation. Ca permet, par exemple, d'utiliser des
|
||||||
|
boucles pour générer des familles de pages qui se ressemblent, d'utiliser
|
||||||
|
des variables pour le contenu qui se répète et bien plus.</p>
|
||||||
|
<p>C'est bien pratique, mais ça masque la façon dont le site fonctionne,
|
||||||
|
et ça rend sa compréhension beaucoup plus difficile pour qui ne connait
|
||||||
|
pas le framework avec lequel il a été développé. Comme on ne comprend pas
|
||||||
|
/ ne voit pas ce qu'il se passe derrière les rideaux, on peut facilement
|
||||||
|
ne pas se rendre compte que le résultat est significativement plus
|
||||||
|
complexe, et souvent très inefficace. Au lieu d'envoyer juste les
|
||||||
|
fichiers nécessaires pour faire fonctionner le site par exemple, le
|
||||||
|
framework envoie généralement aussi tout un tas de fichiers annexes qui
|
||||||
|
forment l'échaffaudage sur lequel le site est construit.</p>
|
||||||
|
<p>"Populsés" par des frameworks très puissants (ça veut dire qui
|
||||||
|
permettent de faire des choses très complexes avec quelques instructions
|
||||||
|
simples) les sites webs modernes sont typiquement des mastodontes. Ils
|
||||||
|
envoient énormément de données au navigateur, lui demandent d'aller
|
||||||
|
chercher des données sur d'autres sites web (par exemple des réseaux
|
||||||
|
sociaux, ce qui permet de suivre les internautes à la trace), et lui font
|
||||||
|
exécuter des programmes JavaScript très gourmands en ressources de
|
||||||
|
calcul. Et en plus de ça, bien souvent, ils fonctionnent mal.</p>
|
||||||
|
<p>C'est vrai que tous ces outils facilitent la vie et permettent de
|
||||||
|
faire des choses impressionnantes sans trop se prendre la tête. Mais tout
|
||||||
|
objet technique charrie indissociablement son remède et son poison. Avec
|
||||||
|
la puissance des frameworks, vient l'aliénation : on ne comprend plus
|
||||||
|
comment son site fonctionne, on ne peut plus faire sans le framework. Un
|
||||||
|
des objectifs fondamentaux de la Distorsion, c'est de se réapproprier les
|
||||||
|
artefacts du monde technique et de préserver la possibilité de choisir.
|
||||||
|
On s'est donc donné plusieurs contraintes pour le site web.</p>
|
||||||
|
<h3>Des contraintes pour le site de la disto</h3>
|
||||||
|
<p>La première, c'était que l'appareillage technique du site soit le plus
|
||||||
|
simple possible. On voudrait qu'il nous permettre de comprendre des
|
||||||
|
choses plutôt que de nous enfermer dans un outil. On aimerait qu'il soit
|
||||||
|
possible pour les personnes qui se côtoient au hackerspace d'éditer le
|
||||||
|
site en comprenant au maximum ce qu'elle font, même avec très peu de
|
||||||
|
connaissances en informatique.</p>
|
||||||
|
<p>Dans la même veine, on aimerait que le site de la Distorsion puisse
|
||||||
|
servir de support pour comprendre comment fonctionnent les technologies
|
||||||
|
du web. C'est à dire qu'il soit suffisament simple pour qu'à l'issue
|
||||||
|
d'une discussion d'un heure ou deux, on puisse comprendre comment il
|
||||||
|
fonctionne. On aimerait pouvoir arriver au point où il n'y a pas "plus",
|
||||||
|
ou le roi est nu, où l'artefact technique est démystifié.</p>
|
||||||
|
<p>On aimerait aussi que le site consomme un minimum de ressource pour le
|
||||||
|
serveur qui l'héberge, et les machines de ses visiteur·euse·s. On veut
|
||||||
|
pouvoir faire tourner nos infrastructures sur des déchets de l'appareil
|
||||||
|
de production capitaliste pour ne plus exploiter des esclaves et défoncer
|
||||||
|
les écosystèmes.</p>
|
||||||
|
<h3>Un site artisanal</h3>
|
||||||
|
<p>On a donc décidé d'aller au plus simple : écrire avec nos petites
|
||||||
|
mains l'intégralité des fichiers de notre site. Les fichiers HTML qui
|
||||||
|
décrivent le contenu, les fichiers CSS qui rendent ce contenu stylé et un
|
||||||
|
tout petit peu de JavaScript.</p>
|
||||||
|
<p>Pour que le site nous encourage à apprendre, on a décidé de se donner
|
||||||
|
la possibilité d'avoir plusieurs CSS sur le site, qu'on puisse changer
|
||||||
|
tout moment avec un petit menu déroulant. Si tu veux expérimenter avec
|
||||||
|
les bases du web, tu peux donc écrire le CSS qui présentera à ta façon le
|
||||||
|
contenu du site de la Distorsion ლ(╹◡╹ლ) !</p>
|
||||||
|
<p>Enfin, on espère que l'ensemble est assez simple pour que des
|
||||||
|
personnes sans bagage informatique poussé puisse facilement éditer le
|
||||||
|
contenu du site (par exemple ajouter un post dans ce blog). Dans cette
|
||||||
|
optique, on va essayer de tenir à jour une documentation claire. C'est
|
||||||
|
pas une idée nouvelle, mais ça vaut bien la peine de le mentionner.</p>
|
||||||
|
<h3>Hébergement</h3>
|
||||||
|
<p>Le site est actuellement hébergé chez les camarades de <a
|
||||||
|
href="https://deuxfleurs.fr">DeuxFleurs</a>. Ca veut dire que c'est sur
|
||||||
|
une de leur machine que tourne le programme qui renvoie les fichiers de
|
||||||
|
notre site web quand on visite <a
|
||||||
|
href="distorsion.interhacker.space">distorsion.interhacker.space</a>. Le
|
||||||
|
programme en question, c'est <a
|
||||||
|
href="https://garagehq.deuxfleurs.fr">garage</a>, un de leur projets
|
||||||
|
trokouls. Hésitez pas à aller voir ce qu'iels font, c'est un des
|
||||||
|
collectifs qui s'intéresse de près aux enjeux politiques des techniques
|
||||||
|
qui nous entourent.</p>
|
||||||
|
<h3>On n'a pas sauvé l'informatique</h3>
|
||||||
|
<p>Idéalement, on voudrait se passer de JavaScript parce que ça rajoute
|
||||||
|
de la complexité, et que ça fonctionne pas dans le <a
|
||||||
|
href="https://www.torproject.org">navigateur Tor</a> avec les paramètres
|
||||||
|
de sécurité les plus stricts. Là, on a du faire un compromis : pour
|
||||||
|
pouvoir changer le CSS dynamiquement, on n'a pas trouvé plus simple qu'un
|
||||||
|
petit programme JavaScript.</p>
|
||||||
|
<p>Aussi, on peut se permettre de tout écrire à la main parce que notre
|
||||||
|
site est vraiment basique. Pour des sites plus complexes, on se serait
|
||||||
|
vite heurté·e·s aux problèmes qui ont justifié le développement des
|
||||||
|
frameworks et générateurs de site web. Il y a des tâches qui sont
|
||||||
|
essentiellement complexes, et donc pour lesquelles on ne peut pas faire
|
||||||
|
autrement. Mais il y aussi tout de même une marge de choix. On aurait pu
|
||||||
|
faire un site chiadé avec un visuel à la mode. En fait on l'avait fait
|
||||||
|
avant, mais on a finalement décidé que c'était pas ce qu'on voulait. On
|
||||||
|
pourrait avoir tout un tas de fonctionnalités en plus... mais finalement
|
||||||
|
on a un site, et il répond aux besoins qu'on avait.</p>
|
||||||
|
<p>Tout ça n'est qu'un début. On verra bien comment ça évolue et si on
|
||||||
|
est de retour sur un framework thermonucléaire dans 3 mois.</p>
|
||||||
|
<p>Et dans tous les cas, il faut garder en tête qu'elle est limitée, la
|
||||||
|
perspective émancipatrice d'un site artisanal qui tourne sur des machines
|
||||||
|
d'une complexité invraisemblable, construites avec le sang des mineurs
|
||||||
|
qui en ont extrait les matières premières, le futur des esclaves qui les
|
||||||
|
ont assemblées, et le jus des armées de cervelles aliénées qui les
|
||||||
|
rendent utilisables.</p>
|
||||||
|
<h3>Conclusion</h3>
|
||||||
|
<p>Il est pas si moche notre site; il a l'élégance des choses simples et
|
||||||
|
compréhensibles.</p>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p>Pour s'abonner à la liste mél, <a href="https://lebib.org/wws/subscribe/distorsion" target="_blank" ref="noreferrer" rel="noopener">c'est là</a>.</p>
|
||||||
|
<p>Pour nous contacter directement par mél : <a class="mel">distorsion (A) groupes.renater.fr</a></p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue