167 lines
10 KiB
HTML
167 lines
10 KiB
HTML
<!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 <a href="https://distorsion.interhacker.space">site de la
|
||
Distorsion</a> 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>
|
||
<p>L'intégralité du code qui forme ce site web est disponible sur <a
|
||
href="https://git.deuxfleurs.fr/distorsion/distorsion.interhacker.space">ce
|
||
dépôt git</a>.</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>
|
||
<p>Pour chopper le code du site, <a href="https://git.deuxfleurs.fr/distorsion/distorsion.interhacker.space">c'est là</a>.</p>
|
||
</footer>
|
||
</body>
|
||
</html>
|