Site web avec GitHub Pages
| Projet | Durée | Difficulté | Âge |
|---|---|---|---|
| JediTrack | ~3h | Avancé | 14-18 ans |
Matériel
- 1 ordinateur pour 2 jeunes
- Connexion internet stable
- Projecteur pour les démonstrations
- Support visuel avec les étapes clés et le logo sur une clé USB
Introduction
Dans le contexte actuel où les jeunes s'engagent de plus en plus dans des projets de science citoyenne - qu'il s'agisse de campagnes de relève environnementale, d'inventaires de biodiversité, de cartographie participative ou de monitoring de pollution - la documentation et la valorisation de leurs actions deviennent essentielles. Cet atelier de création de site web avec Github Pages permet de transformer des observations de terrain en communication professionnelle accessible à tous.
Github est une plateforme collaborative utilisée par des millions de personnes dans le monde pour héberger et partager des projets. Pensez-y comme un Google Drive spécialement conçu pour les projets web et le code. C'est gratuit, open source, et utilisé aussi bien par des étudiants que par des grandes entreprises ou des associations.
Github Pages est un service de Github qui transforme automatiquement vos fichiers en un site web accessible sur internet. Concrètement : vous écrivez du texte simple, et Github Pages le convertit en site professionnel avec une adresse du type nom-du-projet.github.io.
Pourquoi c'est parfait pour les jeunes ?
- 100% gratuit et sans publicité
- Aucune connaissance en programmation requise
- Hébergement permanent et fiable
- Contrôle total sur le contenu (pas d'algorithme, pas de censure)
- Apprentissage valorisable : Github est utilisé dans le monde professionnel
- Philosophie open source : parfait pour des projets de science ouverte
L'utilisation de Github Pages présente de nombreux avantages : gratuit, open source, permettant le partage de données ouvertes et contribuant à la transparence des actions citoyennes. Que votre projet s'inscrive dans le cadre de Jedi-Track, d'un programme environnemental local, ou de toute autre initiative de science participative, cette approche reste pertinente et adaptable.
- Citoyenneté active : Les jeunes deviennent acteurs de leur communication, documentent leurs campagnes de relève environnementale et partagent leurs découvertes avec la communauté.
- Compétences STEAM : Développement de compétences numériques concrètes et valorisables sur le marché du travail, sans barrière technique.
- Autonomisation : Les jeunes gèrent eux-mêmes la visibilité de leurs projets de science citoyenne.
- Impact local : Création d'une vitrine pour présenter leurs données et actions aux décideurs locaux.
- Innovation dans l'animation : Utilisation créative du numérique pour valoriser l'engagement des jeunes.
L'utilisation de Github Pages s'aligne avec la philosophie éco-créative : un outil gratuit, open source, qui permet de partager les données collectées et de contribuer à la transparence des actions environnementales locales.
Idées de projets jeunesse avec Github Pages
| Format "Détectives urbains" (1 semaine - enquête de quartier) - 11-16 ans | Format "Patrimoine de proximité" (2 semaines - projet culturel) - 8-15 ans | Format "Observatoire environnemental" (1 mois - projet scientifique) - 12-18 ans | Format "Atlas des bizarreries urbaines" (5 jours - documentation insolite) - 13-17 ans |
|---|---|---|---|
| "Enquêteurs du quotidien" | "Mémoire vivante du territoire" | "Éco-scientifiques" | "Chroniqueurs de l'étrange quotidien" |
| Jour 1 : Formation Github Pages et création de la structure du site d'enquête par équipes thématiques Jour 2-3 : Exploration terrain avec collecte systématique de photos et témoignages, premières publications de "carnets de terrain" en ligne Jour 4 : Rédaction collaborative et mise en ligne des analyses par secteur Jour 5 : Finalisation du site avec recommandations et présentation publique aux acteurs locaux via le site projeté | Semaine 1 : Rencontres avec les anciens et collecte d'histoires, création des premières pages "témoignages" et "archives photos" sur le site Semaine 2 : Documentation enrichie avec cartes interactives intégrées, création de parcours patrimoniaux virtuels, publication du site pour la restitution intergénérationnelle | Semaine 1 : Formation aux protocoles et création du "laboratoire en ligne" avec pages méthodes et outils Semaine 2-3 : Publication quotidienne des observations (tableaux de données, photos d'espèces, graphiques d'évolution) sur le blog intégré Semaine 4 : Synthèse avec dashboard interactif et page de propositions d'aménagement pour les services techniques | Jour 1 : Formation express Github Pages et création du "Musée virtuel des curiosités" - structure du site avec catégories loufoques Jour 2-3 : Safari urbain et publication en temps réel des trouvailles avec photos et théories farfelues sur le blog Jour 4 : Compilation du "Guide alternatif du quartier" avec carte interactive des bizarreries intégrée Jour 5 : Vernissage numérique avec présentation du site aux habitants et vote pour la curiosité de l'année |
| Structure du site : Page d'accueil avec carte des problèmes, Blog des découvertes quotidiennes, Galerie photos avant/après, Page "Solutions proposées", Formulaire de contact habitants | Structure du site : Timeline historique interactive, Médiathèque (photos, audios, vidéos), Pages par époque ou thème, Parcours de visite virtuels, Livre d'or numérique | Structure du site : Dashboard de données en temps réel, Encyclopédie des espèces locales, Graphiques et visualisations, Protocoles scientifiques détaillés, Espace contributeur | Structure du site : Catalogue des bizarreries classées, Blog des théories loufoques, Carte interactive des curiosités, Système de vote et commentaires, Hall of Fame de l'insolite |
Travail préparatoire
Matériel nécessaire
- 1 ordinateur pour 2 jeunes
- Connexion internet stable
- Projecteur pour les démonstrations
- Support visuel avec les étapes clés et le logo sur une clé usb
Préparation technique
- Préparer un template incluant :
- Logo et charte graphique du projet
- Structure type pour documenter une campagne de relève
- Exemples de données environnementales
- Rassembler des photos des actions précédentes des jeunes
- Préparer des liens vers les plateformes open data utilisées
Préparation pédagogique
- Lister les campagnes de relève déjà réalisées à documenter
- Identifier les données collectées à valoriser
- Préparer des exemples de sites de projets de science citoyenne inspirants
- Anticiper le lien avec la présentation aux décideurs locaux
Déroulé de l'activité
Phase 1 : Introduction
Objectif : Connecter l'atelier aux valeurs du projet et créer l'engagement
Accroche et mise en contexte
Pour démarrer l'atelier de manière dynamique, commencez par projeter une photo "avant/après" d'une action de science citoyenne réussie dans le quartier. Cette image concrète permet d'ancrer immédiatement les jeunes dans la réalité de leur impact. Posez alors la question d'ouverture : "Comment faire savoir au monde entier ce qu'on fait pour notre quartier ?" Cette interrogation ouvre naturellement sur la nécessité de communiquer et valoriser leur travail.
Rappelez le chemin parcouru ensemble : "Vous avez collecté des données, mené des campagnes de relève, identifié des problèmes environnementaux... maintenant on passe à l'étape valorisation !" Cette transition permet de situer l'atelier dans la continuité logique de leur engagement. Puis, créez l'enthousiasme avec ce message d'empowerment : "Aujourd'hui, vous allez créer VOTRE espace sur internet. Un site professionnel, gratuit, que vous contrôlez à 100%, pour montrer que les jeunes sont des acteurs du changement."
Exemples inspirants et discussion
La présentation d'exemples concrets est essentielle pour donner aux jeunes une vision claire de ce qu'ils vont accomplir. Montrez d'abord un site de projet de science citoyenne jeunesse réussi, idéalement issu d'un autre pays participant à Erasmus+, pour créer ce sentiment d'appartenance à un mouvement plus large. Enchaînez avec une initiative locale qui a réellement influencé une décision municipale grâce à ses données, pour démontrer l'impact potentiel de leur travail. Terminez par le site exemple que vous avez préparé, qui servira de référence tout au long de l'atelier.
Après chaque exemple, engagez la discussion avec des questions précises. Demandez "Qu'est-ce qui rend ces sites efficaces ?" et guidez la réflexion vers les éléments clés : la clarté du message, l'utilisation de photos parlantes, la présentation rigoureuse des données, l'aspect professionnel. Interrogez-les sur leur public cible : "À qui voulez-vous montrer vos actions ?" Les réponses varieront probablement entre habitants du quartier, élus locaux, autres jeunes, partenaires du projet ou médias. Cette diversité est une richesse à souligner. Questionnez également sur l'attractivité : "Qu'est-ce qui vous donne envie de cliquer sur un site ?" pour les amener à réfléchir à l'importance du titre accrocheur, du visuel de qualité et de la promesse d'information utile.
Connexion avec leur vécu
C'est le moment de faire le pont entre l'outil numérique et leur expérience terrain. Proposez un exercice participatif que vous pouvez appeler "Notre inventaire de fierté". Sur un tableau ou un paperboard, construisez collectivement la mémoire du groupe. Commencez par rappeler ensemble toutes les campagnes réalisées, en laissant les jeunes raconter spontanément leurs souvenirs. Notez les types de données collectées, le nombre de relevés effectués, les méthodes utilisées. Cette reconstruction collective valorise leur travail scientifique.
Identifiez ensemble les victoires, même petites, qui montrent que leur action a déjà eu un impact. Peut-être qu'un espace vert a été mieux entretenu suite à leurs observations, ou qu'un problème de déchets a été résolu. Encouragez-les aussi à partager leurs meilleurs moments, les photos marquantes, les anecdotes qui font sourire. Tout ce matériel constitue la matière première de leur futur site.
Une fois cette richesse mise en évidence, créez la transition vers le numérique : "Tout ça existe mais reste invisible pour le moment. Aujourd'hui, on va créer la vitrine de votre engagement. Imaginez la scène : un élu qui cherche des informations sur le quartier tombe sur VOTRE site avec VOS données et VOS solutions. Imaginez un autre groupe de jeunes en Allemagne ou en Espagne qui découvre vos méthodes et s'en inspire !"
Démonstration éclair du résultat final
Montrez maintenant le site exemple en naviguant dedans de manière fluide et enthousiaste. Sur la page d'accueil, soulignez : "Regardez, en deux secondes on comprend qui vous êtes et ce que vous faites. C'est ça la force d'un bon site : le message est immédiat." Passez à la page de données en expliquant : "Vos mesures sur le terrain deviennent ici des preuves scientifiques. Ce n'est plus juste des chiffres dans un cahier, c'est une documentation rigoureuse accessible à tous."
Sur la page des solutions proposées, insistez : "Vos propositions sont présentées comme celles d'experts. Parce que c'est ce que vous êtes : des experts de votre quartier." Montrez ensuite le site sur votre téléphone pour démontrer que "C'est accessible partout, par tous. Vos grands-parents peuvent le voir sur leur tablette, vos amis sur leur téléphone, les élus sur leur ordinateur de bureau."
Face à l'aspect professionnel du résultat, anticipez les inquiétudes : "Ça paraît super pro et compliqué à faire ? En réalité, vous allez simplement écrire comme dans Word, et ça devient automatiquement un site. Pas de code compliqué, pas de design à créer, juste vos idées et vos données que vous allez organiser. Le système fait le reste du travail pour vous."
Projection dans l'impact
Aidez les jeunes à se projeter concrètement dans l'utilisation de leur futur site. Racontez des scénarios réalistes : "Dès la semaine prochaine, vous pourrez envoyer le lien à vos parents, vos amis, vos professeurs. Ils verront enfin concrètement tout ce que vous faites dans le projet." Continuez avec des situations variées : "À la prochaine réunion de quartier, au lieu de juste parler, vous sortez une tablette et vous montrez directement votre site aux habitants. L'impact est immédiat, les gens comprennent que vous êtes sérieux et organisés."
Évoquez le moment clé : "Pour la présentation aux élus que vous préparez, votre site devient votre meilleur support visuel. Plus besoin de PowerPoint, tout est là, actualisé, professionnel." N'oubliez pas la dimension européenne : "D'autres groupes en Europe pourront découvrir vos méthodes, s'inspirer de vos campagnes, peut-être même vous contacter pour échanger."
Pour créer l'engagement personnel, faites un tour de table rapide en demandant à chacun : "Quelle est LA chose que vous avez vraiment envie de montrer sur votre site ?" Notez précieusement ces réponses, vous pourrez y faire référence pendant l'atelier pour maintenir la motivation et personnaliser votre accompagnement.
Cadrage et objectifs de la séance
Clarifiez maintenant ce qui va se passer concrètement. Expliquez que dans les deux heures qui viennent, chacun va créer son compte sur Github, une plateforme utilisée par des millions de développeurs professionnels dans le monde, mais qui reste accessible aux débutants. Ils vont publier leur première page visible sur internet, un moment toujours magique quand on le vit pour la première fois. Ils apprendront le "markdown", qui sonne technique mais qui est en réalité un langage d'écriture super simple, plus facile que Word. Ils structureront leur site avec leurs vraies données et photos issues de leurs campagnes. Et surtout, ils repartiront avec un site en ligne et la capacité de le faire évoluer en autonomie.
Posez le cadre bienveillant de l'atelier : "On avance ensemble, personne n'est laissé derrière. C'est ça l'esprit Tech for Good : l'intelligence collective." Encouragez l'entraide : "Si vous finissez en avance, vous aidez votre voisin. C'est comme ça qu'on devient plus forts ensemble." Rassurez sur les questions : "Il n'y a aucune question bête. Si vous vous posez une question, trois autres personnes se la posent sûrement aussi." Normalisez l'erreur : "On va tester, se tromper, recommencer. C'est exactement comme ça qu'on devient expert. Même les pros font des erreurs tous les jours."
Terminez cette introduction par une transition énergique vers la pratique : "Alors, êtes-vous prêts à devenir les communicants digitaux ? Prêts à montrer au monde ce dont les jeunes sont capables ? Parfait, on y va ! Première étape : créer votre espace sur le web mondial !"
Phase 2 : Création des comptes - Devenir Tech for Good
Objectif : S'approprier les outils numériques de manière citoyenne
Introduction à Github et ses valeurs
Avant de se lancer dans la technique, prenez un moment pour expliquer ce qu'est Github et pourquoi cet outil s'aligne parfaitement avec les valeurs Tech for Good. Commencez par cette analogie simple : "Github, c'est comme un immense laboratoire collaboratif où des millions de personnes dans le monde partagent leurs projets pour améliorer la société. C'est gratuit, ouvert à tous, et transparent - exactement comme vos données environnementales."
Expliquez que Github héberge des projets qui changent le monde, depuis les applications qui aident à surveiller la déforestation jusqu'aux outils qui permettent de cartographier les zones de pollution. En créant leur compte aujourd'hui, les jeunes rejoignent cette communauté mondiale de créateurs engagés. Rassurez-les aussi : "Même si Github est utilisé par des professionnels, des entreprises comme Microsoft ou Google, il a été conçu pour être accessible. Des étudiants, des associations, des citoyens comme vous l'utilisent tous les jours pour leurs projets."
Création du compte Github ensemble
Projetez votre écran et guidez pas à pas la création du premier compte, en expliquant chaque étape pour démystifier le processus. Demandez aux jeunes d'ouvrir leur navigateur et d'aller sur github.com. Expliquez que le choix du nom d'utilisateur est important : "Choisissez un nom que vous pourrez garder longtemps, quelque chose de professionnel comme votre nom-prenom. C'est votre identité numérique dans le monde de la tech for good."
Pendant qu'ils remplissent le formulaire, rappelez l'importance de l'adresse email : "Utilisez une adresse que vous consultez régulièrement. C'est par là que Github vous enverra les notifications importantes sur votre site." Une fois les comptes créés, prenez le temps de faire valider l'email à chacun. C'est souvent ici que certains jeunes rencontrent des difficultés - l'email peut arriver dans les spams ou ils peuvent avoir oublié leur mot de passe de messagerie. Accompagnez-les individuellement si nécessaire, c'est un moment important.
Célébrez cette première étape : "Félicitations ! Vous venez de rejoindre une communauté de 100 millions de développeurs et créateurs dans le monde. Votre aventure numérique commence vraiment maintenant."
Création du dépôt
Le repository ou dépôt, c'est le coeur du dispositif. Expliquez-le simplement : "Un repository, qu'on appelle souvent 'repo', c'est votre dossier de projet personnel sur internet. C'est là que vous allez ranger tous les fichiers de votre site, vos textes, vos images, vos données."
Montrez comment créer un nouveau repository en cliquant sur le bouton vert "New" ou "Nouveau". Le nom du repository est crucial, expliquez pourquoi : "Pour que votre site fonctionne automatiquement, le nom doit suivre une règle précise. Si votre nom d'utilisateur est marie-martin, votre repository doit s'appeler marie-martin.github.io. C'est cette formule magique qui transforme votre dossier en un site web."
Pour les jeunes qui travaillent sur un quartier spécifique, vous pouvez suggérer une variante : "Si vous préférez, vous pouvez nommer votre repository campagne-[nom-du-quartier].github.io, comme campagne-lapalice.github.io. L'important est que ça se termine par .github.io." Assurez-vous que la case "Public" est bien cochée et expliquez pourquoi : "Public, ça veut dire que votre site sera visible par tous. C'est le but ! Vos données environnementales doivent être accessibles pour avoir un impact."
Validez que chacun a bien coché "Add a README file" ou "Ajouter un fichier README". Ce détail évite des complications pour la suite. Une fois les repositories créés, faites une pause pour vérifier que tout le monde est au même niveau.
Activation de Github Pages
C'est le moment où le projet devient concret. Guidez-les vers les paramètres (Settings) de leur repository. L'interface peut sembler intimidante avec toutes ses options, alors rassurez : "Il y a beaucoup d'options ici, mais nous on va juste toucher à une seule chose. Descendez jusqu'à trouver 'Pages' dans le menu de gauche."
Dans la section Pages, montrez-leur comment sélectionner "Deploy from a branch" (Déployer depuis une branche) si ce n'est pas déjà fait, puis choisir "main" comme branche, et "root" comme dossier. Expliquez avec des mots simples : "Ce qu'on fait là, c'est qu'on dit à Github : 'Prends tous les fichiers de mon dossier principal et transforme-les en site web'. C'est automatique, Github fait tout le travail pour nous."
Après avoir sauvegardé, l'attente commence. Prévenez-les : "Github a besoin de quelques minutes pour construire votre site. C'est normal, il prépare tout pour que ce soit accessible dans le monde entier. Pendant ce temps, on va commencer à créer du contenu." Cette attente est un bon moment pour faire une mini-pause, permettre aux jeunes de discuter entre eux de ce qu'ils veulent mettre sur leur site, ou pour rattraper ceux qui auraient pris du retard.
Premier contenu
Le fichier README.md est déjà créé, il faut maintenant le transformer en vraie page d'accueil. Expliquez le concept : "README, ça veut dire 'lisez-moi' en anglais. C'est traditionnellement le premier fichier qu'on regarde dans un projet. Pour votre site, il va devenir automatiquement votre page d'accueil."
Montrez comment éditer le fichier en cliquant sur le petit crayon. La première fois qu'ils voient l'éditeur, certains jeunes peuvent être déstabilisés. Rassurez-les : "Vous voyez, c'est comme un traitement de texte très simple. Pas de menus compliqués, juste un espace pour écrire."
Guidez-les pour créer leur premier contenu structuré. Commencez simple mais significatif : "On va écrire ensemble les premières lignes de votre site. Tapez d'abord un dièse, un espace, puis le nom de votre projet." Montrez l'exemple : # Projet Jedi-Track La Palice. Expliquez que ce dièse transforme le texte en grand titre.
Continuez avec les informations essentielles. "Maintenant, sautez une ligne et écrivez deux dièses, un espace, puis 'Notre mission'." Encouragez-les à écrire une phrase personnelle sur leur objectif environnemental local. Par exemple : "Nous sommes 12 jeunes engagés pour améliorer la qualité de l'air dans le quartier Belleville."
Ajoutez une section sur le quartier concerné : "Écrivez maintenant pourquoi votre quartier est important pour vous. Qu'est-ce qui le rend unique ? Quels sont ses défis environnementaux ?" Cette personnalisation est cruciale pour l'appropriation du projet.
Avant de sauvegarder, montrez-leur l'onglet "Preview" : "Regardez la magie ! Vous voyez comment votre texte simple devient une belle page web formatée ?" Pour sauvegarder, expliquez l'importance du message de commit : "Dans la case en bas, écrivez ce que vous avez fait, par exemple 'Première version de ma page d'accueil'. C'est comme un journal de bord de votre projet."
Vérification et célébration
Retournez dans Settings > Pages pour récupérer l'adresse du site. Elle devrait maintenant apparaître en vert avec un message de succès. C'est un moment fort : "Voilà votre adresse web ! Copiez-la, collez-la dans un nouvel onglet... et découvrez votre site en ligne !"
Quand les premiers sites apparaissent, l'excitation est palpable. Encouragez le partage : "Qui veut montrer son site sur le grand écran ?" Prenez le temps de visiter plusieurs sites ensemble, de féliciter chaque jeune. Certains sites peuvent mettre plus de temps à apparaître, rassurez ceux qui attendent encore : "Github peut prendre jusqu'à 10 minutes parfois, c'est normal. Pendant ce temps, vous pouvez déjà continuer à améliorer votre contenu."
Concluez cette phase par une mise en perspective : "En moins d'une heure, vous avez créé votre présence sur le web mondial. Votre site est maintenant accessible depuis n'importe quel ordinateur, tablette ou téléphone dans le monde. C'est ça le pouvoir du numérique citoyen : des outils professionnels gratuits au service de votre engagement pour le quartier."
Phase 3 : Markdown et données scientifiques
Objectif : Apprendre à présenter des données de science citoyenne
Démystifier le markdown
Le markdown peut sembler technique de prime abord, mais c'est en réalité l'outil parfait pour des jeunes qui veulent se concentrer sur leur contenu plutôt que sur la mise en forme. Commencez par cette explication rassurante : "Le markdown, c'est comme écrire un SMS avec quelques astuces simples qui rendent votre texte lisible. Pas besoin de cliquer sur des boutons comme dans Word, vous écrivez directement comme si vous utilisiez un éditeur de texte et la mise en forme se fait toute seule."
Montrez-leur que le markdown a été inventé pour être intuitif. Par exemple, pour mettre en gras, on entoure le texte d'étoiles, comme si on voulait le faire briller. Pour créer une liste, on met juste des tirets, comme quand on prend des notes rapides. Cette simplicité n'est pas un hasard : "Le markdown a été créé pour que les professionnels puissent documenter leurs travaux sans perdre de temps avec la mise en forme. Parfait pour vos données de science citoyenne !"
Distribuez votre "antisèche markdown" en expliquant : "Gardez cette feuille à côté de vous. Au début, vous allez y jeter un oeil souvent, mais dans une heure, vous n'en aurez plus besoin. C'est comme apprendre à faire du vélo, une fois que c'est acquis, c'est pour la vie."
Apprendre en faisant
Retournez dans l'éditeur Github de votre fichier README.md. C'est le moment d'enrichir leur page d'accueil tout en apprenant. Commencez par les titres, qui structurent toute page web : "On a déjà vu qu'un dièse fait un grand titre. Deux dièses font un titre moyen, trois dièses un sous-titre. C'est comme les niveaux dans un plan de dissertation, mais en plus simple."
Proposez-leur d'ajouter une nouvelle section à leur page. Guidez-les : "Après votre mission, ajoutez deux dièses, espace, puis écrivez 'Nos dernières actions'. En dessous, racontez votre dernière campagne de relève." Pendant qu'ils écrivent, circulez pour voir leurs contenus et encouragez la créativité dans les formulations.
Introduisez maintenant le gras et l'italique, essentiels pour faire ressortir l'information importante. "Dans votre texte, choisissez le mot ou la phrase la plus importante. Entourez-la de deux étoiles de chaque côté." Montrez l'exemple : **12 points de mesure analysés**. Expliquez l'usage : "Le gras, c'est pour les chiffres clés, les résultats importants, ce que vous voulez que les gens retiennent."
Pour l'italique, suggérez un usage différent : "Une seule étoile de chaque côté met en italique. C'est parfait pour les citations, les noms scientifiques, ou pour nuancer quelque chose." Par exemple : *Première campagne réalisée en conditions hivernales*. Ces petites variations donnent du rythme à leur texte.
Les listes sont particulièrement utiles pour structurer l'information. Montrez-leur comment créer une liste de leurs actions : "Pour faire une liste, c'est ultra simple. Sautez une ligne, puis commencez chaque élément par un tiret et un espace." Proposez un exemple concret lié à leurs activités :
Nos outils de mesure :
- Thermomètre digital pour la température de l'eau
- Bandelettes pH pour l'acidité
- Application mobile pour géolocaliser les mesures
Présenter des données
C'est ici que l'atelier prend tout son sens pour accompagner une campagne de mesure citoyenne. Les jeunes vont apprendre à présenter leurs données de manière professionnelle. Introduisez les tableaux avec enthousiasme : "Maintenant, on va faire quelque chose d'impressionnant. Vous allez créer des tableaux de données comme dans les vraies publications scientifiques."
Commencez par un tableau simple mais réel, basé sur leurs campagnes. Montrez la structure au tableau : "Les barres verticales séparent les colonnes, les tirets créent la ligne d'en-tête. C'est un peu comme dessiner un tableau avec des caractères." Guidez-les pas à pas :
| Date | Lieu de mesure | Type | Résultat |
|------|----------------|------|----------|
| 15/09/2024 | Entrée du parc | Qualité air | Bon |
| 15/09/2024 | Près de l'école | Bruit | 75 dB |
| 22/09/2024 | Bord de rivière | pH eau | 7.2 |
Pendant qu'ils créent leur tableau, expliquez l'importance de cette présentation : "Un tableau bien fait, c'est de la crédibilité instantanée. Quand un élu ou un journaliste voit vos données présentées comme ça, il comprend immédiatement que vous êtes rigoureux." Encouragez-les à utiliser leurs vraies données, même si elles sont peu nombreuses pour l'instant.
Montrez-leur aussi comment ajouter des liens vers des ressources externes : "Si vous avez uploadé vos données sur une plateforme open data, c'est simple." La syntaxe est intuitive : [Texte du lien](adresse-web). Par exemple : [Voir toutes nos données](https://donnees-ouvertes.fr/jedi-track-lapalice).
Pour les images, particulièrement importantes dans leur travail de terrain, expliquez : "Vos photos de campagne sont précieuses. Pour les intégrer, c'est presque comme un lien, mais avec un point d'exclamation devant." Montrez la structure : . Insistez sur l'importance de la description : "Cette description est importante. Elle explique ce qu'on voit sur la photo, et elle permet aux personnes malvoyantes de comprendre votre contenu avec leurs lecteurs d'écran."
Exercice pratique guidé
Maintenant que les bases sont acquises, proposez un exercice concret qui combine tous les éléments. "On va créer ensemble une section complète 'Notre dernière campagne de relève'. Ça va être LA section qui montre votre professionnalisme."
Guidez-les dans la structure, en les laissant personnaliser le contenu :
D'abord le titre de section : "Commencez par deux dièses et écrivez 'Notre dernière campagne de relève du [date]'."
Puis un paragraphe d'introduction : "Décrivez en deux phrases où vous étiez, combien vous étiez, quel était l'objectif." Encouragez-les à utiliser le gras pour les éléments importants comme le nombre de participants ou de mesures effectuées.
Ensuite une liste des mesures réalisées : "Faites une liste avec des tirets de tout ce que vous avez mesuré ou observé ce jour-là."
Puis leur tableau de données : "Maintenant, créez un petit tableau avec 3-4 de vos mesures les plus intéressantes."
Enfin, une conclusion avec un lien : "Terminez par une phrase qui dit ce que vous allez faire de ces données, avec un lien vers vos prochaines actions ou vers vos partenaires."
Pendant cet exercice, circulez activement entre les jeunes. Certains vont avoir des idées créatives, d'autres vont bloquer sur la syntaxe. C'est normal et c'est le moment parfait pour l'entraide : "Si vous avez fini, regardez ce que fait votre voisin et aidez-le. Expliquer aux autres, c'est la meilleure façon d'apprendre."
Pour vous aider, voici un exemple complet pouvant être produit par les jeunes :
# Campagne de relève - [Nom du quartier]
## Projet Jedi-Track 2024-2025
### Notre mission
Améliorer la qualité de vie dans notre quartier
### Nos données collectées
| Date | Lieu | Mesure | Valeur |
|------|------|--------|--------|
| 15/09 | Parc | Qualité air | Bonne |
### Nos actions
- Installation de nichoirs
- Cartographie participative
### Photos de terrain
### Données ouvertes
[Accéder à nos données sur la plateforme](lien)
Visualisation et ajustements
Une fois que tous ont créé leur section, c'est le moment de voir le résultat. "Sauvegardez votre travail avec un message de commit comme 'Ajout de notre dernière campagne'. Maintenant, retournez sur votre site et actualisez la page."
La transformation du markdown en page web formatée est toujours un moment magique. Les tableaux apparaissent avec des bordures, les titres sont bien hiérarchisés, les liens sont cliquables. Célébrez ces réussites : "Regardez ce que vous avez créé ! Des données de terrain présentées de manière professionnelle, accessibles au monde entier."
Si certains éléments ne s'affichent pas correctement, c'est l'occasion d'apprendre le debugging : "Si quelque chose ne marche pas, c'est souvent un petit détail. Un espace oublié, une étoile en trop. Regardons ensemble." Ces moments de résolution de problème sont précieux pour développer leur autonomie.
Concluez cette phase par une projection : "Maintenant que vous maîtrisez le markdown, vous pouvez documenter toutes vos futures campagnes. À chaque sortie terrain, vous ajoutez vos données. Dans six mois, votre site sera une vraie base de données citoyenne de votre quartier. C'est ça, être un scientifique citoyen : transformer l'observation en action, et l'action en changement."
Phase 4 : Construction du site portfolio de science citoyenne
Objectif : Créer un portfolio de science citoyenne
C'est maintenant le coeur de l'atelier, le moment où les jeunes vont transformer leurs apprentissages en un véritable site web structuré. Cette phase d'une heure est cruciale car elle permet de passer de l'exercice technique à la création d'un outil de communication réel pour leur projet. L'objectif n'est pas seulement de créer des pages, mais de construire une vitrine cohérente et professionnelle de leur engagement citoyen.
Avant de commencer, rappelez aux jeunes qu'ils vont maintenant créer plusieurs pages interconnectées. Expliquez-leur : "Jusqu'ici, on a travaillé sur votre page d'accueil. Maintenant, on va construire un vrai site avec plusieurs sections. Chaque page aura son rôle : présenter l'équipe, documenter les campagnes, montrer l'impact, inviter à participer. C'est comme construire une maison : on a fait les fondations, maintenant on ajoute les pièces."
Il est important de les rassurer sur le processus : "On va créer ces pages une par une, ensemble. Vous allez voir, c'est exactement la même méthode que pour le README, mais cette fois on crée de nouveaux fichiers. À la fin de cette heure, vous aurez un site complet que vous pourrez montrer avec fierté."
Structure suggérée pour un site portfolio de science citoyenne :
Page d'accueil (_pages/index.md)
- Présentation de l'équipe
- Mission environnementale du groupe
- Carte du quartier étudié
Page "Nos campagnes" (_pages/campagnes.md)
- Documentation des relèves effectuées
- Données collectées (tableaux, graphiques)
- Méthodologie utilisée
Page "Impact local" (_pages/impact.md)
- Problèmes identifiés
- Solutions proposées
- Présentations aux décideurs
Page "Rejoignez-nous" (_pages/rejoignez-nous.md)
- Comment participer aux prochaines campagnes
- Calendrier des actions
- Contact et réseaux sociaux
Maintenant que les jeunes ont créé leur site avec plusieurs pages, il est temps de prendre du recul et d'apprécier le travail accompli. Cette construction d'une heure représente bien plus qu'un simple exercice technique : ils ont créé un outil de changement social, une plateforme pour faire entendre leur voix et valoriser leur engagement environnemental.
Prenez un moment pour contextualiser leur accomplissement : "Regardez ce que vous venez de créer en une heure ! Un site professionnel avec quatre pages, des données structurées, des appels à l'action. Ce site n'est pas juste une vitrine, c'est un outil de mobilisation citoyenne. Quand vous le mettrez à jour après chaque campagne, il deviendra la mémoire vivante de votre action pour le quartier."
Insistez sur la dimension évolutive de leur création : "Ce site n'est pas figé. C'est un organisme vivant qui va grandir avec votre projet. À chaque nouvelle campagne, vous ajoutez des données. À chaque victoire, vous documentez l'impact. À chaque nouveau membre, l'équipe s'enrichit. Dans six mois, ce site sera dix fois plus riche qu'aujourd'hui."
Connectez également leur travail à la dimension européenne du projet : "N'oubliez pas que votre site fait maintenant partie d'un réseau. D'autres jeunes en France et en Europe peuvent découvrir vos méthodes, s'inspirer de vos actions. Vous n'êtes plus isolés dans votre quartier, vous faites partie d'un mouvement de jeunes citoyens scientifiques qui agissent pour l'environnement."
Terminez cette phase par une projection concrète : "La semaine prochaine, vous pourrez déjà utiliser ce site. Pour présenter le projet à vos parents, pour recruter de nouveaux participants, pour montrer votre sérieux aux partenaires locaux. C'est votre carte de visite professionnelle, votre preuve que les jeunes sont des acteurs sérieux du changement environnemental."
Pour gagner du temps, vous pouvez proposer aux jeunes de partir du template suivant :
https://github.com/jedi-track/template_site_web
Phase 5 : Publication et valorisation
Objectif : Finaliser et célébrer
Cette dernière phase de l'atelier est à la fois technique et émotionnelle. C'est le moment où le travail individuel devient collectif, où les efforts se transforment en fierté partagée. Après plus de deux heures d'apprentissage et de création, les jeunes vont maintenant découvrir leurs sites mutuellement et comprendre qu'ils font partie d'un mouvement plus large. Cette phase de valorisation est essentielle pour ancrer l'expérience positive et donner envie de continuer.
Commencez par créer une atmosphère de finalisation positive : "Nous arrivons au moment le plus gratifiant de l'atelier. Vous avez travaillé dur, appris de nouvelles compétences, créé du contenu de qualité. Maintenant, on va s'assurer que tout fonctionne parfaitement et surtout, on va célébrer vos créations ensemble."
Il est important de normaliser les différents rythmes de travail : "Certains ont peut-être quatre pages complètes, d'autres deux ou trois. C'est parfait ! L'important n'est pas la quantité mais le fait d'avoir créé VOTRE espace sur internet. Chaque site est unique, comme chaque groupe est unique dans son quartier."
- Vérification : Tous les sites sont en ligne et fonctionnels
- Présentation : Chaque groupe présente son site comme aux décideurs locaux
- Interconnexion : Création d'une page commune listant tous les sites
- Planification : Comment mettre à jour après chaque campagne
- Célébration : Photo de groupe avec les sites projetés !
Cette phase de clôture marque non pas une fin, mais un commencement. Les jeunes repartent avec bien plus qu'un site web : ils ont acquis une compétence numérique valorisable, un outil de communication pour leur engagement citoyen, et surtout la confiance en leur capacité à maîtriser des outils professionnels.
Concluez sur la dimension transformatrice de l'expérience : "En trois heures, vous êtes passés de 'je ne sais pas créer de site' à 'j'ai mon site en ligne que je peux faire évoluer'. C'est une transformation remarquable ! Vous avez prouvé que les outils numériques ne sont pas réservés aux experts, mais accessibles à tous les citoyens engagés."
Rappelez la continuité du projet : "Ce site, c'est votre journal de bord numérique pour toute la durée du projet. À chaque campagne de relève, vous avez maintenant le réflexe : on collecte les données, on les analyse, et on les publie sur notre site. C'est comme ça qu'on construit une documentation scientifique citoyenne solide qui peut vraiment influencer les décisions locales."
Créez un moment de reconnaissance collective : "Prenons un moment pour apprécier ce que vous avez accompli. Vous n'êtes plus seulement des jeunes qui observent leur quartier, vous êtes des scientifiques citoyens avec une plateforme de communication professionnelle. Vos parents, vos professeurs, les élus locaux vont être impressionnés. Et ils ont raison de l'être !"
Terminez par une ouverture sur l'avenir et l'entraide continue : "L'aventure ne fait que commencer. Vous avez maintenant un super pouvoir : celui de publier vos idées et vos données sur internet. Utilisez-le bien ! Continuez à vous entraider, partagez vos découvertes dans le groupe, et n'hésitez jamais à demander de l'aide. Le réseau Tech for Good, c'est aussi ça : une communauté qui apprend et grandit ensemble. Maintenant, qui veut être le premier à nous montrer son site sur le grand écran ?"
Checklist animateur
Avant l'atelier
- Matériel informatique vérifié
- Template prêt
- Photos et données des campagnes précédentes rassemblées
- Logo et charte graphique disponibles
- Liste des participants avec autorisation parentale
- Lien avec le planning des campagnes établi
Pendant l'atelier
- Esprit Tech for Good transmis (éco-créatif, citoyen actif, tech for good)
- Tous les sites créés et en ligne
- Au moins une page de données par site
- Photos de l'atelier pour la communication
- Liste des URLs compilée
Après l'atelier
- Sites ajoutés à la plateforme Jedi-Track
- Formation au maintien du site planifiée
- Prochaine mise à jour avec une nouvelle campagne
- Retours envoyés aux partenaires du projet
- Valorisation sur les réseaux du projet
Conseils pour une mise en oeuvre réussie
Ancrer dans la mission environnementale
- Toujours relier au projet global d'amélioration du quartier
- Montrer comment le site amplifie l'impact de leurs actions
- Valoriser le caractère scientifique et citoyen de leur démarche
Favoriser l'intelligence collective
- Encourager le travail en équipe sur les contenus
- Organiser des revues entre pairs des sites
- Créer une émulation positive entre les groupes
- Utiliser les compétences diverses : photo, écriture, data
Développer l'esprit critique
- Questionner la présentation des données : clarté, honnêteté
- Réfléchir à l'audience cible : habitants, élus, partenaires
- Discuter de l'impact souhaité de la communication
Assurer la pérennité
- Intégrer la mise à jour dans le rituel post-campagne
- Créer un calendrier éditorial lié aux actions
- Designer des responsables communication tournants
- Prévoir la transmission aux nouvelles cohortes
Points de vigilance spécifiques
- Open Data : Expliquer les licences libres et le partage de données
- Données personnelles : RGPD et protection des mineurs
- Qualité scientifique : Rigueur dans la présentation des données
- Accessibilité : Sites utilisables par tous (contraste, descriptions)
- Multilinguisme : Penser aux versions en anglais pour Erasmus+
Valorisation et reconnaissance
- Prévoir une présentation officielle aux partenaires locaux
- Organiser un événement de lancement des sites
- Créer des badges numériques de compétences acquises
- Intégrer dans le portfolio Erasmus+ des jeunes
Conclusion
Cette fiche pratique vous a guidé à travers un atelier qui va bien au-delà de la simple création technique d'un site web. En trois heures, vous permettez aux jeunes de franchir une étape décisive dans leur parcours de citoyen scientifique : passer de l'action locale à la communication globale, de la collecte de données à leur valorisation publique, de l'engagement personnel à la mobilisation collective.
L'atelier Github Pages incarne parfaitement les trois piliers de l'identité Jedi-Track. Les jeunes deviennent éco-créatifs en transformant leurs observations de terrain en contenus web structurés. Ils affirment leur rôle de citoyens actifs en créant une plateforme pour interpeller les décideurs et mobiliser leur communauté. Ils s'approprient la Tech for Good en utilisant des outils professionnels open source au service de l'intérêt général.
Au-delà des compétences techniques acquises - maîtrise du markdown, gestion de repository, publication web - les jeunes développent des capacités essentielles pour leur avenir. Ils apprennent à structurer leur pensée, à présenter des données de manière rigoureuse, à communiquer efficacement sur leurs actions. Ces compétences STEAM ne sont pas abstraites : elles sont immédiatement appliquées à leur projet de transformation du quartier, donnant du sens et de la motivation à l'apprentissage.
L'impact de cet atelier se mesure aussi dans la durée. Le site créé devient un outil permanent du groupe, un journal de bord numérique qui documente mois après mois leur contribution à l'amélioration de la qualité de vie locale.
En menant cet atelier, vous contribuez à un mouvement européen plus large. Les sites créés par vos jeunes pourront inspirer d'autres groupes en France et dans les pays partenaires. Vous participez à la construction d'un réseau de jeunes scientifiques citoyens qui prouvent, données à l'appui et sites web à l'appui, que la jeunesse est une force de transformation positive pour nos territoires.
Antisèche Markdown
Les essentiels du markdown - Votre guide de référence rapide
Cette fiche est à imprimer et distribuer aux jeunes pendant l'atelier. Elle leur permet d'avoir sous les yeux les principales commandes markdown avec des exemples concrets liés à leurs activités de science citoyenne.
Les titres - Pour structurer votre site
# Titre principal (très grand)
## Titre de section (grand)
### Sous-titre (moyen)
#### Petit titre (petit)
Exemple concret :
# Projet Jedi-Track La Palice
## Nos campagnes de relève
### Campagne du 15 septembre 2024
#### Mesures de qualité de l'air
Mise en forme du texte - Pour faire ressortir l'important
**Texte en gras** → Pour les informations importantes
*Texte en italique* → Pour les précisions, citations
***Gras et italique*** → Pour les points critiques
~~Texte barré~~ → Pour montrer ce qui a changé
Les listes - Pour organiser vos informations
Liste simple :
- Premier élément
- Deuxième élément
- Troisième élément
Liste numérotée :
1. Première étape
2. Deuxième étape
3. Troisième étape
Les tableaux - Pour présenter vos données scientifiques
| Colonne 1 | Colonne 2 | Colonne 3 |
|-----------|-----------|-----------|
| Donnée 1 | Donnée 2 | Donnée 3 |
| Donnée 4 | Donnée 5 | Donnée 6 |
Exemple concret avec vos mesures :
| Date | Lieu | Température | CO2 (ppm) |
|------------|-----------------|-------------|-----------|
| 15/09/2024 | Entrée du parc | 22°C | 380 |
| 15/09/2024 | Rue de l'école | 24°C | 420 |
| 22/09/2024 | Place centrale | 19°C | 390 |
Les liens - Pour connecter vos ressources
[Texte du lien](https://adresse-web.com)
Exemples concrets :
[Nos données sur la plateforme open data](https://data.gouv.fr/jeditrack)
[Site principal Jedi-Track](https://jedi-track.eu)
[Contactez-nous](mailto:jeditrack.belleville@gmail.com)
Les images - Pour illustrer vos actions
Exemple concret :
Astuce : La description est importante ! Elle apparaît si l'image ne charge pas et aide les personnes malvoyantes.
Les citations - Pour rapporter des témoignages
> Ceci est une citation
> Sur plusieurs lignes si besoin
Exemple concret :
> "Grâce aux données des jeunes, nous avons pu identifier
> les zones prioritaires pour l'installation de capteurs permanents."
> - Adjoint au maire chargé de l'environnement
Éléments avancés - Pour aller plus loin
Ligne de séparation :
---
Code (pour vos scripts de traitement de données) :
`code en ligne`
Case à cocher (pour vos to-do lists) :
- [x] Campagne de septembre terminée
- [x] Données uploadées
- [ ] Présentation aux élus prévue
Conseils pour bien démarrer
- Commencez simple : Titres, gras, et listes suffisent pour une belle page
- Prévisualisez souvent : Utilisez l'onglet "Preview" pour voir le résultat
- Sauvegardez régulièrement : Faites des commits avec des messages clairs
- Testez et expérimentez : Le markdown est fait pour être intuitif !
Références
Documentation pour Github Pages
- Documentation complète Github Pages : https://docs.github.com/fr/pages
- Tutoriel débutant Github : https://github.com/skills/introduction-to-github
- Guide markdown de Github : https://guides.github.com/features/mastering-markdown/
- Thèmes Jekyll pour Github Pages : https://github.com/topics/jekyll-theme
Tutoriels markdown
- Guide markdown : https://www.markdownguide.org/
- Markdown interactif : https://www.markdowntutorial.com/fr/
- Editeur markdown en ligne : https://stackedit.io/
Outils de visualisation
- uMap (cartes collaboratives) : https://umap.openstreetmap.fr/
- Datawrapper (graphiques) : https://www.datawrapper.de/
- Flourish (visualisations) : https://flourish.studio/
- Timeline JS (frises chronologiques) : https://timeline.knightlab.com/
Ressources open data
- data.gouv.fr : https://www.data.gouv.fr/
- Portail européen de données : https://data.europa.eu/fr
Inspiration - exemples de projets jeunesse
- Safecast (monitoring citoyen) : https://safecast.org/
- Surfrider Foundation (protection océans) : https://surfrider.eu/
- Globe Program (observations environnementales par les écoles) : https://www.globe.gov/
- eBird Young Birders (ornithologie jeunesse) : https://ebird.org/about/for-young-birders
- Plastic Pirates (monitoring pollution plastique en Europe) : https://www.plastic-pirates.eu/fr
- City Nature Challenge (inventaire biodiversité urbaine) : https://citynaturechallenge.org/
Cette fiche fait partie du projet JediTrack, financé par le programme Erasmus+. Contenu sous licence CC BY-SA 4.0.