Le nécessaire pour la présentation aux journées de l'écoconception 2025 - retour accueil
git clone git://bebou.netlib.re/jour-eco-2025
Log | Files | Refs |
prez.slides (14068B)
1
2
3
4
5
6
7
8
9
10 # ································
11 # : Y'a-t-il quelque chose après :
12 # : l'écoconception web ? 🍂 :
13 # ································
14
15
16
17 › Qui sommes-nous
18
19 ┌────────┐
20 │ Arthur │
21 └────────┘
22 Informaticien de formation
23 Milieu universitaire au service de la recheche
24
25 ┌─────────────────────┐
26 │ Derek (Pikselkraft) │
27 └─────────────────────┘
28
29 Designer et développeur web en indépendant
30 Écoconception et accessibilité web, numérique convivial.
31
32 Membres de Katzele 😸🖥
33 └───────────────────────┘
34
35 › Une précédente présentation
36
37 Semaine Européenne du Numérique Responsable 2023 (Strasbourg)
38
39 https://numerique-responsable.strasbourg.eu/article/vidc3a9o-5-convivialisons-l-accc3a8s-au-infos-pratiques-d-alsace-1
40
41 curl -Ls http://bebou.netlib.re/piscine-couleur.term
42
43
44
45 silent ! feh -F zero.webp bebou.jpeg› La machine de présentation
46
47 Légende : deux photos un peu moches d'un raspberry 3b
48 et d'un raspberry zero W 1. Le 3b est sur le
49 point de tomber à la renverse.
50
51 +-------------------------------------+
52 |() 2############################40 ()|
53 | 1############################39 |
54 +--------+ +-------+ \/ ## RUN|
55 |Micro SD| | Soc | ()() ## RCA|
56 +--------+ +-------+ () |
57 |()+----+ +---+ +---+ ()|
58 +--|HDMI|--------------|USB|--|USB|---+
59 +----+ +---+ +---+
60
61
62
63 › Quizz
64
65 Faisons un petit quizz à propos de la machine
66
67 firefox "https://app.wooclap.com/auth/login?lang=fr"
68 epiphany "https://app.wooclap.com/auth/login?lang=fr"
69 luakit "https://app.wooclap.com/auth/login?lang=fr"
70 netsurf "https://app.wooclap.com/auth/login?lang=fr"
71
72
73 › Frustrant non ?
74
75 Généralement c'est là que l'obsolescence logicielle
76 vous pousse à acheter un nouvel ordi.
77
78
79 › Comment résoudre ce problème
80
81 Trois potentiels coupables :
82
83 1. L'OS
84 2. le navigateur
85 3. l'application web
86 › A qui la faute ?
87
88 L'OS :
89
90 A priori ça va, il tourne
91
92
93 › A qui la faute ?
94
95 L'OS :
96
97 A priori ça va, il tourne
98
99 Le navigateur :
100
101 Un énorme truc en soit, presque un OS dans un OS
102
103
104 › Ou alors ?
105
106 L'application :
107
108 21 requêtes
109 11,84 Mo / 3,58 Mo transférés
110 1258 éléments dans le DOM
111
112 Meilleures perfs que ce à quoi je m'attendais
113 Quasi inaccessible avec mauvaise co
114 Accessible uniquement en HTTPS
115
116 › Une histoire à grepper des logs
117
118 Septembre 2022, un homme cherche à sonder sa communauté.
119 Il n'a pas d'outil pour, "juste" un serveur web
120
121 "N'ayant pas le temps de créer ou utiliser un outils de sondage, je vous
122 propose un "sondage par log": merci de construire (dans votre navigateur
123 ou avec curl) l'adresse suivante (qui répondra 404 et c'est normal).
124
125 https://people.u-strasbg.fr/surveydistro/devlog2209/N,P,D,F,H,X,O,E"
126
127 › Génial
128
129 1. On profite de l'ubiquité du web plutôt que de se battre contre - pas de
130 "Teste cet outil c'est super mais il te faut un terminal et d'ailleurs
131 est-ce que t'as linux ?"
132 2. Mais on ne requiert des utilisateurices que le strict minimum. Il est
133 possible pour une part immense des machines de créer et envoyer une
134 requête HTTP. La barrière d'entrée en puissance de calcul et en
135 logicielle est très très faible.
136 3. On ne requiert de la personne qui a créé le questionnaire "uniquement" un
137 serveur web qui créé des logs et de quoi les parser.
138 4. L'idée est tellement simple que la diversité des implémentations peut être
139 très grande. L'outil pour répondre peut aller de la requête écrite à la
140 main pipée dans un netcat à la barre url de Chrome.
141
142 › L'entourloupe
143
144
145 T'arrivais pas à me faire sortir du navigateur pour
146 que je pratique la ligne de commande donc t'as mis
147 la ligne de commande dans mon navigateur ?
148
149 - Un ami très lucide
150
151
152 › qcm
153
154 code : http://git.bebou.netlib.re/qcm/file/README.html
155 article (en fait le readme) : http://arthur.bebou.netlib.re/qcm/index.html
156
157 Pour résumer :
158
159 Un script à "installer" sur le serveur web
160 Qui lit des questionnaires écrits dans un certain format (du texte)
161 Ecoute en continue les logs du serveur et affiche les résultats
162 Fonctionne sous openbsd, macos et à priori n'importe quel linux
163 Nécessite un environnement POSIX et stdbuf
164
165 › qcm
166
167 code : http://git.bebou.netlib.re/qcm/file/README.html
168 article (en fait le readme) : http://arthur.bebou.netlib.re/qcm/index.html
169
170 Pour résumer :
171
172 Un script à "installer" sur le serveur web
173 Qui lit des questionnaires écrits dans un certain format (du texte)
174 Ecoute en continue les logs du serveur et affiche les résultats
175 Fonctionne sous openbsd, macos et à priori n'importe quel linux
176 Nécessite un environnement POSIX et stdbuf
177 Que des choses déjà installées par défaut
178 sur la très grande majorité des linux
179 stdbuf : 2009
180
181
182
183
184 › Et si on testait ?
185
186 < questionnaire ssh mbb 'cat > q'
187 ssh mbb '< q qcm -i joeco -g'
188
189 ssh mbb 'writeqcm | qcm'
190
191
192 silent ! feh -F 1Ghz-?.webp› Une idée de ce que ça représente
193
194 Légende : Un screenshot d'un article publié par Wired datant
195 de 2000 et documentant la sortie du premier processeur
196 cadencé à plus de 1GHz. On y lit que presque personne
197 n'a besoin d'une rapidité aussi froudroyante.
198
199
200
201
202
203 › Est-ce que le rasp zero W v1.1 est obsolète ?
204
205 Matériellement non
206 Culturemment non ?
207
208 › Est-ce que le rasp zero W v1.1 est obsolète ?
209
210 Matériellement non
211 Culturemment non ?
212
213 Logiciellement, ça dépend
214
215
216 › Pourquoi ssh ?
217
218 Pour que la personne qui l'utilise ait le
219 minimum de choses à installer sur son pc
220
221 › Pourquoi ssh ?
222
223 Pour que la personne qui l'utilise ait le
224 minimum de choses à installer sur son pc
225
226 Reproduire ce que les personnes qui fournissent
227 des services trouvent alléchant dans le web :
228
229 Pas d'installation sur les clients
230 Gestion des majs plus simples
231 ...
232
233
234
235 › En gros
236
237 "C'est accessible en SSH, t'as juste à ouvrir ton terminal"
238
239 est le nouveau
240
241 "C'est accesible sur le site, t'as juste à ouvrir ton navigateur"
242
243
244 › Pas une idée nouvelle
245
246 créer un compte :
247 ssh pico.sh
248
249 poster un pastebin :
250 ssh mbb 'cat q' | ssh pastes.sh
251
252
253 › Des exemples plus vieux/encore plus simples
254
255 "en fait avant on disait 'telnet all the things !'"
256
257 telnet : 1973
258 telnet mapscii.me
259
260 nc bebou.netlib.re 2222
261
262 › Est-ce la fin du design numérique ☹ ?
263
264 Les possibilités sont réduites.
265
266 On pense aux univers retro (ASCII art),
267 emojis (standard unicode), emoticon ¯\_( ͡° ͜ʖ ͡°)_/¯
268
269 Hors de l'utilisation de SSH, il existe des navigateurs textuels (w3m, lynx).
270 → un compromis entre le web et le terminal.
271
272 w3m https://journee-ecoconception-numerique.fr/programme
273
274 › Est-ce la fin du design numérique ☹ ?
275
276 Attention aux contraintes techniques :
277 w3m https://adelfaure.net/
278 → génial.
279 w3m https://deuxfleurs.fr/
280 → génial aussi, mais les animations sont déjà une limite.
281 w3m https://fr.wikipedia.org/wiki/%C3%89coconception
282 → fonctionne, mais la navigation se complique.
283
284 › Est-ce la fin du design numérique ☹ ?
285
286 Exemple de tests techniques pour faire « cohabiter » les deux mondes :
287
288 w3m http://pikselkraft.bebou.netlib.re/
289 firefox http://pikselkraft.bebou.netlib.re/
290
291 Comme souvent en design, il est préférable de penser
292 l'identité pour les différents supports directement.
293
294 › Un champ graphique à explorer
295
296 Il est possible de faire des interfaces en SSH,
297 mais elles restent limitées.
298
299 Ce type de service est avant tout pensé pour le terminal.
300
301 Acheter du café ☕
302 ssh terminal.shop
303 (guide sur https://www.terminal.shop)
304
305 Accéder à un site gopher :
306 ssh kiosk@bitreich.org
307
308 › Un champ graphique à explorer
309
310 Il existe des outils pour créer des interfaces et des effets : charm.sh
311 → Ils ne sont pas toujours en accord
312 avec l'esprit de simplicité technique (Silicon Valley, Go).
313
314 D'autres outils à explorer (plus simple) :
315 https://github.com/termbox/termbox2
316
317 › La personnalisation du terminal
318
319 Il existe de nombreux émulateurs de terminaux qui offrent
320 des options de fonctionnalités et d'affichages diverses.
321
322 Prise en compte d'un plus grand nombre de couleurs,
323 de typographies plus modernes, même des images.
324
325 Tout comme le navigateur qui offre un contrôle
326 sur le design aux utilisateurs.
327
328 › Et l'accessibilité ♿
329
330 ⚠ La contrainte la plus importante.
331
332 Les outils d'accessibilité sont plus souvent compatibles avec Windows.
333
334 Pour un contenu simple, un terminal peut-être accessible
335 pour la lecture et l'édition de contenu (avec des réglages).
336
337 Mais la variété des configurations et des usages spécifiques (navigation, éditions riches)
338 limitent rapidement l'accessibilité.
339
340 › Et l'accessibilité ♿
341
342 Les interfaces textuelles « améliorées » ne sont pas prévues
343 pour l'accessibilité contrairement aux interfaces web (en théorie).
344
345 Comme le logiciel libre, il y a un manque d'investissement sur ce point (idem pour le design).
346 → mais il y a des initiatives dans ce sens (https://arn-fai.net/)
347
348 › Et l'accessibilité ♿
349
350 C'est le cas de cette présentation !
351 → même si nous pouvons facilement convertir le format.
352
353 En général, des formats simples permettent
354 de proposer des versions alternatives plus simplement.
355 Tout en offrant plus de contrôle pour convertir les contenus.
356
357 › Est-ce vraiment crédible pour les usagers ?
358
359 Sans une éducation populaire, le terminal et le libre en général
360 ne seront pas accessibles au plus grand nombre.
361
362 ⚠ Tout comme le libre, ce n'est pas une réponse à tous les problèmes du numérique.
363
364 Seule une organisation sociale (en dehors du numérique) peut permettre
365 aux usagers de découvrir ces services.
366
367 › Une autre approche possible
368
369 - Repenser les services numériques à petite échelle :
370 - décentralisation (jean-cloud.net, deuxfleurs.fr, scani.fr),
371 - ordinateur post-personnel.
372
373 - Ancrer localement dans des lieux :
374 comme le modèle des maisons du numérique ou les bibliothèques ⌂
375
376 - Lieu d'échanges et de pédagogies.
377
378 › Dépasser le design numérique
379
380 En plus des explorations graphiques :
381
382 - Travail sur l'accompagnement des usages et usagers.
383
384 › Dépasser le design numérique
385
386 En plus des explorations graphiques :
387
388 - La simplicité permet d'avoir un profil plus multidisciplinaire pour intervenir sur :
389 - les interactions serveurs en plus des interfaces,
390 - la matérialité 💻:
391 - les machines (mini salles serveurs, refroidissement, autres matériaux),
392 - l'énergie ⚡
393 - le recyclage ♺
394
395 › Est-ce la fin de l'écoconception web ?
396
397 Approche plus radicale
398 → préserver le matériel.
399
400 Une simplification technique
401 → après un apprentissage.
402
403 Réduction des dépendances
404 → une compréhension globale
405 ≠ opposition à la complexité du navigateur
406
407 Cette approche est peu perméable au greenwashing (pas impossible)
408
409 › Une philosophie pour construire des services complémentaires
410
411 Le propos n'est pas de remplacer toutes les service webs avec des services ssh.
412
413 Diversifier les interfaces et les technologies pour les rendre plus facile d'accès et plus résilientes.
414
415 Suggestion de conduite de projet pour la création d'un service :
416
417 1. Un service minimum et résilient. Partir sans à priori sur les
418 outils à mobiliser pour le créer.
419 2. Si besoin , créer des fonctionnalités et interfaces plus complexes sans
420 que cela se fasse au détriment des versions plus simples
421
422 › Une philosophie pour construire des services complémentaires
423
424 Avoir déjà les fonctionnalités et interfaces essentielles en production
425 permet de se poser la question du besoin de manière plus équilibrée
426 puisque l'on pourra plus facilement opposer aux demandes le fait
427 que l'on a déjà quelque chose qui fonctionne.
428
429 › Une philosophie pour construire des services complémentaires
430
431 Le web et l'informatique en général restent des outils
432 pour consommer des données (majoritairement textuelles).
433
434 Si c'est bien fait ça ne représente (presque) pas de développement en plus.
435
436 Force des formats ouverts (txt, md).
437
438 Actuellement ce lien est nécessaire pour assurer un accès accessible aux services.
439
440 › Un gain pour les concepteurs
441
442 Cette façon de concevoir amène les créateurs d'outils numérique
443 à changer leurs habitudes (en design et développement).
444
445 Ce type de service est une très bonne façon de découvrir les opportunités
446 offertes par la ligne de commande :
447 - remplacement d'outils pour le développement (frameworks, gestionnaires de paquets, etc.),
448 - remplacement d'outils d'administration et gestion,
449 - forte réduction des dépendances (et dépenses €).
450
451 › Synthèse
452
453 Un champ de recherche :
454 - une démarche très expérimentale et peu développée,
455 - que ce soit des enjeux en design, en accessibilité ou de formation,
456 - des possibilités importantes avec des paliers techniques moindres (≠ complexité navigateur web).
457 → il s'agit des premières étapes.
458
459 › Synthèse
460
461 Comment le mettre en pratique :
462 - mise en place dans les outils de conception,
463 - cohabitation version réduite (TUI) et web (accessibilité),
464 - développer la pédagogie, la documentation et les démonstrations,
465 - faire évoluer les interfaces et les services dédiés au TUI,
466 - proposer des solutions indépendantes si elles sont pertinentes.
467
468 › Des personnes en discutent
469
470 Les slides : ssh guest@bebou.netlib.re -p1459
471
472 Le concept :
473 https://shazow.net/posts/ssh-how-does-it-even/
474 https://ploum.net/2024-07-21-memoire-commune-numerique.html#soustitre-2
475
476 L'accessibilité :
477 https://www.eklhad.net/philosophy_fr.html
478 https://arn-fai.net/fr/blog/shell-accessible
479
480 Des exemples :
481 - pair programming
482 https://hamvocke.com/blog/remote-pair-programming-with-tmux/
483 - jeux TUI ou dans un univers TUI
484 https://github.com/phyver/GameShell
485 https://adarkroom.doublespeakgames.com/
486 https://www.cavesofqud.com/