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 !
|
||||
|
||||
## 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
|
||||
|
||||
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
|
||||
[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
|
||||
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
|
||||
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 à
|
||||
chaque fois qu'on pousse des modification dans le dépot par l'outil
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<main>
|
||||
<nav class="blog">
|
||||
<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>
|
||||
</nav>
|
||||
</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