User:Kiara/The Web Club
The Web Club is a project that started on Mastodon. For now it is mostly a discussion around how to teach web languages the easiest way. The discussion is done in French in a Signal group. It involves Julien Taquet, Julien Bidoret, Timothée Goguely, Joachim Robert, Marie Verdeil and me. Most of this page is probably going to be written in French
Club de web, le début
Groupe de réflexion autour des manières d'enseigner la programmation web (HTML/CSS).
Discussion Signal (en Français)
Résumé des idées
- [21-11-2024]
- La diversité des sites (de profs) pour apprendre à coder est une bonne chose
- Est-ce qu'un effort collectif pour créer une ressource (un site) à destination des personnes hors écoles d'arts et de design (les associations, les petites structures, les indépendants) ne serait pas intéressant à imaginer ?
- Une solution d'aiguillage entre les différentes ressources disponibles plutôt qu'une nouvelle ressource supplémentaire ? Cela permettrait de pointer vers la bonne approche selon le besoin de la personne / du collectif
- Quelle est la meilleure approche pour apprendre HTML/CSS à des novices ? Une mise en commun et un partage de nos expériences respectives seraient un super point de départ
- La question de la traduction collaborative de HTML for people en français
- HTML for people pourrait effectivement être traduit, mais l’approche qui y est développée ne me semble pas “universelle”. Par ex: c’est une approche très narrative ; il faut vouloir lire un récit
- Constat : l'approche "récit" est diversement appréciée par mes étudiant⋅es [Julien B.], dont certain⋅es préfèrent :
- les contenus plus techniques et synthétiques,
- des exemples à exploiter/s’approprier,
- des approches “gamifiées” (séquences, exercices progressifs et succès pour passer à la suite)
- des logiques davantage portées sur le “pourquoi” que sur le “comment”
- [09-01-2025]
- L'importance d'identifier et de déclarer sa cible lorsque l'on propose un "tuto" pour faire son site personnel
- (Re)créer un rendez-vous de code collaboratif : en visio, pour coder ensemble sur nos projets persos, échanger, s'entraider. Idée inspirée des Sundaysites
Ressources liées
Sur ce wiki
Ma page de ressources pour apprendre le code (non exhaustive)
Vrac mentionné dans le fil de discussion
- [Proposées par Julien T.]
https://scribouilli.org/
https://www.wired.com/story/html-is-actually-a-programming-language-fight-me/
- [Proposées par Julien B.]
- [Proposées par Joachim]
https://blog.professeurjoachim.com/billet/2024-12-11-bon-tu-veux-te-faire-ton-site-web
- [Proposées par Timothée]
https://henry.codes/writing/how-to-make-a-website/ (sujet à débats autour de l'importance de préciser sa cible)
https://32bit.cafe/ et https://csszengarden.com/
https://www.are.na/timothee-goguely/making-your-website (groupement de ressources de Timothée)
- [Proposées par Raphaël Bastide, hors discussion]
https://jenseign.com/ Benoit Wimart
http://pratiques-algorithmiques.net/ Jeff Guez
http://site.sarahgarcin.com/web-frugal/#introduction
https://netnet.studio/ Nick Briz
https://ateliers.esad-pyrenees.fr/web/
https://handmade-web.net/ Aidan Quinlan
https://curlybraces.be/ Lionel Maes
http://pca.louiseveillard.com/web-basics.php
https://designforthe.net/index.html Mindy Seu
Documenter les expériences d'enseignement
GeoProject, Carré d'Art de Nîmes
Le contexte : 3 ateliers d'initiation à l'écriture créative et au CSS-Print à travers le projet GeoProject, porté par Alexandre Simonet au Carré d'Art (octobre-décembre 2023).
L'atelier accueille une large variété de publics, allant des élèves d'écoles primaires aux retraité·es, en passant par des jeunes réfugiés et des amateurices.
L'atelier auquel j'ai participé sur 3 séances s'est fait avec un groupe de jeunes réfugié·es. Leur maîtrise du Français parlé était assez diverse mais largement suffisante pour les besoins de l'atelier. Cependant, l'écrit était un peu plus délicat. Là où le planning prévoyait de plonger dans la partie code dès le deuxième atelier, ces limitations ont créé une impossibilité. Nous avons pu évoquer le code, montrer un peu ce qu'il permet et l'intérêt de l'utiliser, mais aucune introduction pratique n'a pu être faite.
L'une des participantes avait une très bonne maîtrise de la langue et comprenait aussi très vite comment l'atelier était structuré et comment s'approprier l'outil de mise en pages. Malheureusement, elle avançait trop vite par rapport au reste du groupe et n'a pas pu bénéficier de cette découverte du code, ce à quoi elle était très enthousiaste. Nous avons pu lui expliquer quelques toutes petites choses mais rien de suffisant pour qu'elle puisse pratiquer seule...
Ce qui est intéressant ici, c'est donc de voir effectivement la nécessité de proposer une variété d'outils et ressources permettant à chacun·e de se les approprer suivant ses besoins/envies/rythme d'apprentissage.
Workshop auto-initié à XPUB
La structure d'enseignement de XPUB est effectivement tournée vers l'expérimentation. En ce sens, les activités liées au code sont assez ciblées : des ressources sont mises à dispositions (API par exemple) et l'idée est de s'approprier cette technique/technologie spécifique pour un usage assez précis sur le moment. De ce fait, on a plongé très vite (et sans prendre la température de l'eau) dans l'écriture de scripts (JS) sans aucune introduction ni à HTML, ni à CSS...ni à JavaScript.
Une certaine frustration et des questions se sont élévées, ce qui nous a menées, avec Kim, à organiser un workshop de 3h (8 nov. 2024) pour poser les bases de HTML et CSS. Une page dédiée au workshop (en Anglais) est disponible ici.
On s'est longuement posé la question du contenu : est-ce qu'on impose un fond, est-ce qu'on laisse champ libre complet sur la page web à réaliser ? Finalement, en discutant, on a opté pour le choix 1. Nous avons donc imposé le contenu d'une page wikipédia créée dans le cadre de notre formation ; une page wiki contient des éléments de base intéressants : titres, paragraphes, liens, listes, images, éléments audio,... Cela a permis de poser des bases claires et communes, de ne pas se perdre dans les diverses intentions de chacun·e et d'observer la diversité des interprétations possibles tout en ayant un contenu privilégié (et pas encore une énième landing page de restaurant).
En utilisant le tableau à craies pour schématiser l'imbrication des éléments HTML (à la manière de Laurel Schwulst), il a suffit d'une très succinte introduction à ce que sont ces langages et ce qu'ils permettent pour que les 2h suivantes soient dédiées à la pratique.
Bien sûr, il y a eu des questions sur comment faire ceci ou cela, des bugs, mais globalement je n'avais jamais vu une introduction au dev web se passer si simplement et fluidement.
Mettre des boîtes dans des boîtes, c'est très efficace, merci Laurel.