GUI | CGI | CLI :
Interfacer le web et la ligne de commande
Timothée Goguely & Arthur Pons
Quand le code rencontre l’interface: hybrider les outils du design graphique
Plan
- Introduction : qui sommes nous
- Résumé de notre article pour la revue Azimut n°63
- CGI : brève histoire des débuts du web dynamique
- Interfacer le web et la ligne de commande
- Faire de la barre d’URL une CLI
- Étendre le concept d’amélioration progressive
- Favoriser la transparence et la mobilité entres les couches d’interfaces
- NUI-magick
- Conclusion
- Limites
- Ouvertures
- Bibliographie
Qui sommes-nous ?
Timothée Goguely
- designer et développeur web
- co-responsable du master Design Environnements numériques, Unistra
- culture et savoir-faire GUI (Graphical User Interface, interface graphique)
Arthur Pons
- informaticien
- doctorant CIFRE en sciences informatiques, Lyon 1, INSA Lyon et Commown
- culture et savoir-faire CLI (Command Line Interface, interface en ligne de commande)
http://bebou.netlib.re/ (sans
s après http)Dépasser le CLIvage : les interfaces graphiques et textuelles face à l’obsolescence logicielle
Quelles relations existent-il entre les interfaces en ligne de commande (CLI), les interfaces graphiques (GUI), et les enjeux liées à l’obsolescence logicielle ?
Postulat de départ : les CLI n’appartiennent pas à un passé révolu et méritent davantage d’intérêt de la part des concepteur·ices d’interfaces
- Les CLI sont-elles intrinsèquement plus durables, comparées au GUI ?
- Liens entre la « scriptabilité » des CLI (Cramer, 2007), leur capacité à faire émerger de fonctionnalités par combinaisons d’outils simples et modulaires (Kernighan, Pike, 1984), et leur effet sur la limitation de l’obsolescence logicielle.
- Les aspects purement techniques sont insuffisants pour analyser les liens entre interfaces et obsolescence logicielle : quels sont les aspets socio-culturels favorisant ou non cette obsolescence logicielle ? éthos de la stabilité vs éthos du changement
- L’omniprésence des GUI dans nos usages numériques aujourd’hui constitue de fait un monopole radical (Illich, 1973)
Au travers d’exemples, nous explorons comment dépasser le clivage historique existant entre GUI et CLI, en détournant et développant des outils, des savoirs et des pratiques qui mêlent les qualités respectives de ces deux grands paradigmes d’interfaces.
GUI
- manipulation directe
- découvrabilité
- (pré)visualisation
CLI
- scriptabilité
- modularité
- simplicité
Les approches les plus fructueuses en matière de logiciels libres consistent rarement à remplacer un gros outil propriétaire par un gros outil libre ; le plus souvent, on déploie une série de processus qui interagissent les uns avec les autres : un ensemble de briques emboîtables combinant Lego™ et Meccano™, maintenues ensemble par une orfèvrerie savante ou de larges morceaux de ruban adhésif. Peut-être inspirés par la « philosophie Unix », nous concevons des fabriques de publication, des systèmes malléables, des pipelines de mots, de signes et d’images. Face aux géants de la distribution de signes préformatés, nous misons sur la diversité des pratiques, sur l’archipélisation technologique, la collaboration ludique et l’exploration de perspectives inattendues.
Quelle serait une approche de conception qui encouragerait cette diversité ?
Quelles malléabilités et quels « rubans adhésifs » pouvons nous mobiliser pour créer de la complimentarité entre les GUI et les CLI en vue de favoriser la durabilité des outils et l’émancipation collective ?
Débuts du web
L’un des facteurs de succès du web a justement été de créer des interfaces permettant d’utiliser des systèmes d’informations pré-existants, et en particulier une technologie lui ayant permis très tôt d’interfacer les navigateurs graphiques côté client et des programmes en ligne de commande côté serveur.
CGI : Common Gateway Interface
Brève histoire des débuts du web dynamique
débuts web des plateformes
du web enshitifiées à l’IA
| |
------*---------|---------|----------|----------->
1990 2026
à la liste de diffusion www-talk (8 novembre 1991)
L’URL montre l’usage de CGI : https://bugzilla.mozilla.org/show_bug.cgi?id=1864170
débuts web des plateformes
du web enshitifiées à l’IA
| |
------*---------|---------|----------|-----------> 1. Timeline dominante
1990 \ 2026
CGI \--------------------------------------> 2. Timeline alternative
|
vous êtes
ici
2. diversité des pratiques, archipélisation technologique, ruban adhésif, encapacitation
Interfacer le web et la ligne de commande
Faire de la barre d’URL une CLI
http://bebou.netlib.re/cgi-bin/helloworld.cgi
echo Content-type: text/html
echo
printf "<p>Bonjour le monde, je suis le compte <em>%s</em> " "$(whoami)"
printf "et il est <time>%s</time></p>" "$(date +%Hh%M)"
#!/bin/sh
echo Content-type: text/plain
echo
echo CGI/1.0 test script report:
echo
echo argc is $#. argv is "$*".
echo
echo SERVER_SOFTWARE = $SERVER_SOFTWARE
echo SERVER_NAME = $SERVER_NAME
echo GATEWAY_INTERFACE = $GATEWAY_INTERFACE
echo SERVER_PROTOCOL = $SERVER_PROTOCOL
echo SERVER_PORT = $SERVER_PORT
echo REQUEST_METHOD = $REQUEST_METHOD
echo HTTP_ACCEPT = "$HTTP_ACCEPT"
echo PATH_INFO = "$PATH_INFO"
echo PATH_TRANSLATED = "$PATH_TRANSLATED"
echo SCRIPT_NAME = "$SCRIPT_NAME"
echo QUERY_STRING = "$QUERY_STRING"
echo REMOTE_HOST = $REMOTE_HOST
echo REMOTE_ADDR = $REMOTE_ADDR
echo REMOTE_USER = $REMOTE_USER
echo AUTH_TYPE = $AUTH_TYPE
echo CONTENT_TYPE = $CONTENT_TYPE
echo CONTENT_LENGTH = $CONTENT_LENGTH
https://github.com/vcgato29/ncsa-httpd/blob/master/cgi-bin/test-cgi
CGI/1.0 test script report:
argc is 0. argv is .
PATH = /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
SERVER_SOFTWARE = nginx/1.22.1
SERVER_NAME = bebou.netlib.re
GATEWAY_INTERFACE = CGI/1.1
SERVER_PROTOCOL = HTTP/1.1
SERVER_PORT = 80
REQUEST_METHOD = GET
HTTP_ACCEPT = text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
PATH_INFO =
PATH_TRANSLATED =
SCRIPT_NAME = /cgi-bin/test.cgi
QUERY_STRING =
REMOTE_HOST =
REMOTE_ADDR = 86.243.126.120
REMOTE_USER =
AUTH_TYPE =
CONTENT_TYPE =
CONTENT_LENGTH =
http://bebou.netlib.re/cgi-bin/test.cgi
http://bebou.netlib.re/cgi-bin/qr-small.cgi
/qr-small.cgi?text=abc → qrencode "abc" -s 15 -l H -o qr.pngÉtendre le concept d’amélioration progressive
Le progressive enhancement est une stratégie de conception de web design proposée en 2003 par Steven Champeon et Nick Finck, visant à donner la priorité à l’accessibilité du contenu par empilement de couches.
- Couche sémantique (HTML) : rend accessible le contenu et les fonctionnalités au plus grand nombre via un format balisé
- Couche visuelle (CSS) : ajoute la mise en forme via des feuilles de style
- Couche événementielle (JS) : ajoute des comportements avancés de façon non-obstrusive via des scripts exécutés côté client
- Couche serveur (scripts<>data) : rend accessible les données brutes via un format standard (txt, md, csv, tsv, json…) et les éventuels programmes exécutés côté serveur utiles à la création de ces données
http://bebou.netlib.re/synonymes.tsv
intéressant passionnant;23 attrayant;21 captivant;21 lucratif;18
intéressé cupide;31 avide;23 mercenaire;17 captivé;15
intéressement participation;7
intéresser concerner;31 se rapporter;18 avoir rapport;12 viser;10
intérêt gain;15 revenu;14 sollicitude;11 loyer;11
interface surface;6 jonction;4 limite;3 application;3
interfécondité hybridation;66
interférence interaction;25 superposition;14 perturbation;5 battement;4
interférer interagir;28 parasiter;25 perturber;16 dérégler;12
interfolier insérer;6
intérieur home;20 intime;18 dedans;17 intrinsèque;16
> synonyme interface
surface 6
jonction 4
limite 3
application 3
séparation 2
liaison 1
synonyme mothttp://bebou.netlib.re/cgi-bin/synonyme.cgi?mot=interface
pour cet outil de recherche de synonymes
Intérêts de cette pyramide :
- on peut y rentrer à n’importe quel niveau
- chaque couche repose sur la couche inférieure
- favorise la collaboration sur une même donnée ou un même outil avec l’interface de son choix, en fonction de ses envies et de ses contraintes, participant ainsi à une forme d’émancipation collective
Favoriser la transparence et la mobilité entres les couches d’interfaces
Question de design : comment les interfaces peuvent favoriser la découvrabilité des autres couches et la mobilité des utilisateurices entre celles-ci ?
Prototype : http://bebou.netlib.re/cgi-bin/pdf.cgi
pour cet outil de manipulation de PDF
pour utiliser
ghostscript en local sur sa propre machinePrototype : http://bebou.netlib.re/cgi-bin/pdf.cgi
NUI-magick
Une interface graphique nodale initialement conçue pour ImageMagick (logiciel libre de manipulation d’image datant de 1990), permettant de composer une suite de traitements d’image, puis de visualiser les commandes CLI correspondantes ou de les exécuter directementent.
En cours de développement par Martin Lemaire, Delyo Dobrev et Yvan Sraka.
Modifié par Arthur Pons, juin 2026.
pour NUI-magick
Limites
Faire du CGI : CGI plus dispo sur des serveurs web mutualisés chez les hébergeurs grand public, obligé de passer par des VPS, ou mieux, des petits serveurs maisons type bébou > nécessite que quelqu’un sache l’administrer, mais encourage la mutualisation et à l’entraide ! On peut mettre à disposition des scripts pour les copaines :)
La métaphore de la pyramide : la forme pyramidale ne rend ne rend pas compte de la taille de chaque couche.
Adresser la diversité des contextes : les méchanismes favorisant la mobilité type sol de verre ou escaliers, ne sont pleinement pertinents que dans la mesure où l’on prévoit toute la diversité des systèmes et des compétences des utilisateurices.
Limité à des besoins simples et situés : s’il est souhaitable à plusieurs égards de diminuer la quantité de délégation au profit de l’encapacitation en montrant davantage les coutures des services, l’approche risque de rapidement produire des résultats inintélégibles pour des besoins complexes. La surcharge d’info peut négativement impacter l’efficacité de l’encapacitation.
Ouvertures
- Réinvestir et revisiter des technologies « oubliées » pour répondre à des enjeux contemporains du design graphique et du web : pour s’émanciper collectivement du joug des outils propriétaires
- Concevoir des outils d’apprentissage transitoires, qui nous apprenent à nous en passer in fine (encapacitation)
- Explorer comment appliquer cette approche à des cas plus variés et des outils un peu plus ambitieux : convertisseurs et éditeurs en tous genres, générateurs d’images, de flux RSS, de sites statiques, de CMS, pour mieux en comprendre le fonctionnement et les limites
- Comment représenter ces escaliers/passerelles aux sein de nos interfaces ? IPour l’instant, c’est surtout de l’information textuelle affichée dans l’interface, mais il y a certainement d’autres éléments de signalétiques à imaginer.. Les personnes qui font de l’IHM dans la salle ?
Bibliographie
- SHNEIDERMAN Ben, « Direct Manipulation: A Step Beyond Programming Languages », Computer, 16(8), 1983
- KERNIGHAN Brian W., PIKE Rob, The Unix Programming Environment, 1984
- CHAMPEON Steve, Progressive Enhancement and the Future of Web Design, 2003
- CRAMER Florian, « $(echo echo) echo $(echo): Command Line Poetics », Considering your Tools, 2007
- SCHRIJVER Eric, « Hacker Culture and the Fear of WYSIWYG », 2014
- PIQUER-LOUIS Oriane, « Informatique et présentation de soi : la ligne de commande, une esthétique de l’efficacité ? Retour sur un mémoire de Master », 2018
- VAITHILINGAM, Priyan, GUO Philip, « Bespoke: Interactively Synthesizing Custom GUIs from Command-Line Applications By Demonstration », 2019
- PAYET Adrien, « La forme web hors de l’empire du script », Azimuts, n° 60, 2025
- MAUDET Nolwenn, « Délégation ou encapacitation », dans Culture du design numérique. Histoire des idées et enjeux contemporains, Éditions 2025, 2026
Merci
# Debian
sudo apt install qrencode feh
qrencode "http://arthur.bebou.netlib.re/gui-cgi-cli/" -s 15 -l H -o - | feh -
# macOS
brew install qrencode
qrencode "http://arthur.bebou.netlib.re/gui-cgi-cli/" -s 15 -l H -o qrcode.png
