Introduction

Rebranding et cohérence visuelle

Déroulé de la réalisation

1. Rendez-vous en présentiel pour discuter de leurs besoins, établir le plan du site, déterminer les pages nécessaires et définir les grandes lignes du contenu.
2. Création de la maquette sur Figma, intégrant les premiers éléments de la charte web.
3. Présentation et validation de la maquette.
4. Création d’un document textuel partagé pour récupérer le contenu de chaque page, ainsi qu’un dossier partagé pour les médias.
5. Configuration du projet sous Eleventy, du dépôt GitHub, du déploiement automatique sur Netlify et mise en place sur le domaine qu’ils ont acheté.
   Note : Il me semble avoir correctement créé le dépôt GitHub sous leur nom, mais je ne comprends pas pourquoi mes commits ne remontent pas dans mon historique personnel, alors qu’ils apparaissent bien dans le dépôt AIPE. Mystère…
6. Livraison des pages en production de manière cachée (accessibles uniquement via leurs URL, avec les robots configurés en no-index et no-follow) au fur et à mesure de leur réalisation, avec retours et ajustements.

Avancement du projet

Le site avançait bien, mais l’approche des vacances de Noël a ralenti la cadence.

Logo

Fun fact Morbid fact : Le graphiste ayant réalisé le logo est décédé, emportant avec lui les sources du fichier.
J’ai donc dû vectoriser le logo à partir d’une image fournie par l’AIPE.

Pages

Quelques captures d’écran du site en cours de réalisation :

Il y a deux ans, j’ai entrepris la création d’un outil de gestion de marque-pages en ligne, nommé Pensine, inspiré par l’univers de Harry Potter.

Le but était de créer un gestionnaire de marque-pages dont les données sont stockées dans un fichier JSON, et une API en PHP permettait de les manipuler.

Pour une raison que j’ai oubliée, j’ai mis le projet en pause. Je l’ai repris en mai 2025, en repartant de zéro avec une nouvelle version, cette fois en vanilla JS sous forme d’extension Chrome. Plus d’infos sur Pensine V2

J’ai de nouveau mis le projet en pause à cause d’une fonctionnalité qui m’était essentielle : permettre de faire des captures d’écran des pages web afin d’avoir un aperçu visuel des marque-pages.
Malheureusement, il s’avère que l’API permettant cela n’existe pas sur les navigateurs mobiles.

Mon projet, visant à utiliser uniquement des services gratuits, m’a conduit à de nombreuses recherches, mais rien de concluant pour le moment.
Ma seule piste consiste à ajouter une fonctionnalité sur desktop, permettant de générer les captures d’écran manquantes pour tous les marque-pages enregistrés dans Pensine.

À suivre !

Soutenir les projets éducatifs et culturels

Le sou des écoles est une association locale qui organise diverses manifestations dans le but de récolter des fonds qui serviront à financer tout ou partie de projets à vocation pédagogique et/ou culturelle initiés par l'équipe enseignante de l'école auquel elle est rattachée.

Réalisation

Agendas — 16 octobre 2025

Boum Halloween — 8 octobre 2025

• Introduction
• Avant de commencer : nettoyage recommandé
• Dans PowerShell
• Créer un fichier de configuration SSH
• Coté VS Code

Introduction

Git ne permet pas de gérer plusieurs comptes GitHub nativement, car il utilise une seule configuration par défaut.

Avant de commencer : nettoyage recommandé

Supprimer les identifiants GitHub enregistrés évite les conflits et garantit une configuration multi-comptes propre et efficace.

Effacer les identifiants GitHub (sans terminal)

1. Menu Démarrer
2. Panneau de configuration
3. Comptes d’utilisateurs
4. Gestionnaire d’identifiants
5. onglet Information d'identification windows
6. Trouve les entrées liées à GitHub (ex : git:https://github.com) et clique sur Supprimer

Dans PowerShell

Utiliser PowerShell en mode administrateur

1. Ferme PowerShell s’il est déjà ouvert
2. Clique sur le bouton Démarrer et tape PowerShell
3. Clique droit sur Windows PowerShell puis sélectionne "Exécuter en tant qu’administrateur"

Générer une clé SSH

ssh-keygen -t ed25519

La réponse suivante s’affiche

Enter file in which to save the key (C:\Users\pierr\.ssh\id_ed25519):

Copier le contenu entre parenthèses en personnalisant la chaîne de caractères après id_
Exemple : C:\Users\pierr\.ssh\id_pro

La réponse suivante s’affiche

Enter passphrase (empty for no passphrase):

laisse vide

Enter same passphrase again:

deux fois

La réponse suivante s’affiche

Your identification has been saved in C:\Users\pierr\.ssh\id_pro

Service SSH Agent

Activer le service

1. Appuie sur Windows + R, tape services.msc et valide
2. Cherche OpenSSH Authentication Agent.
3. Clique droit puis "Propriétés"
4. Change le Type de démarrage en Manuel ou Automatique
5. Clique sur Appliquer
6. Clique Démarrer
7. Clique OK

Démarrer le service

Démarre le service et le configure pour qu’il puisse être lancé à la demande:

Get-Service ssh-agent | Set-Service -StartupType Manual
Start-Service ssh-agent

vérifier que le service est bien lancé

Get-Service ssh-agent

Ajouter la clé SSH

Toujours dans PowerShell :

ssh-add C:\Users\pierr\.ssh\id_pro

Pour vérifier que la clé est bien chargée :

ssh-add -l

Tester la configuration

ssh -T github-pro

Créer un fichier de configuration SSH

Dans C:\Users\pierr\.ssh\, ajoute un fichier config sans extension

# pro github account
Host github-pro
HostName github.com
User git
PreferredAuthentications publickey
IdentityFile C:\Users\pierr\.ssh\id_pro

# perso github account
Host github-perso
HostName github.com
User git
PreferredAuthentications publickey
IdentityFile C:\Users\pierr\.ssh\id_perso

• Host: alias que tu utiliseras dans tes commandes Git ou SSH
• IdentityFilechemin vers ta clé privée
• Usergénéralement git pour GitHub

Coté VS Code

Configurer le compte Git pour chaque projet

Dans le terminal intégré de VS Code (dans le dossier de chaque projet), tu peux définir l’utilisateur Git spécifique :

git config user.name "NomUtilisateurGitHub"
git config user.email "email@github.com"

Ces réglages ne s’appliquent qu’au dépôt actuel grâce à l’option locale (--local est implicite si tu ne mets rien).

Ajouter la clé publique à GitHub

1. Copie le contenu de la clé publique, dans PowerShell :

   cat ~/.ssh/id_pro.pub

2. puis sur GitHub

   1. GitHub
   2. Settings
   3. SSH and GPG keys
   4. New SSH key
   5. Donne un nom
   6. Colle la clé
   7. clique sur Add SSH key

Modifier l’URL du remote

Si tu veux que le projet utilise une clé SSH spécifique (via ton fichier ~/.ssh/config), il faut modifier l’URL du dépôt distant :

git remote set-url origin git@github-pro:utilisateur/repo.git

Tu peux vérifier l’URL actuelle avec :

git remote -v

Configurer l’identité Git locale

Dans le dossier du projet, configure le nom et l’email associés au bon compte :

git config user.name "TonNomGitHub"
git config user.email "ton_email@exemple.com"

Ces réglages sont locaux au projet, donc ils n’affecteront pas tes autres dépôts.

Vérifie que ça fonctionne avec

git config user.name
git config user.email

Pusher sur GitHub via le terminal

Une fois les comptes et clés SSH configurés, le code doit être envoyé via le terminal avec git push

Introduction

L'élément HTML <datalist> contient un ensemble d'éléments <option> qui représentent les valeurs possibles pour d'autres contrôles.
Nativement accessible, plus besoin de librairie JavaScript pour faire une liste de suggestions si vous êtes prêt à faire une croix sur la personnalisation graphique.
J'ajoute un petit script pour les lecteurs d'écran afin de faciliter son usage.

Code

<label for="ice-cream-choice">Choose a flavor:</label>
<input 
       list="ice-cream-flavors" 
       id="ice-cream-choice" 
       name="ice-cream-choice" 
       autocomplete="off"
       />
<p id="suggestions-help" role="status" aria-live="polite" class="visually-hidden"></p>

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Chocolate White"></option>
  <option value="Dark Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

const inputField = document.getElementById("ice-cream-choice");
const datalist = document.getElementById("ice-cream-flavors");
const help = document.getElementById("suggestions-help");

function hasCommonSubstring(str1, str2) {
  return str1.includes(str2) || str2.includes(str1);
}

inputField.addEventListener("input", () => {
  let value = inputField.value;
  let options = datalist.options;
  let suggestionsCount  = 0;

  for (let i = 0; i < options.length; i++) {
    if (
      hasCommonSubstring(value.toLowerCase(), options[i].value.toLowerCase())
    ) {
      suggestionsCount++;
    }
  }
  if (suggestionsCount > 0 && suggestionsCount < options.length ) {
    help.textContent=`There are ${suggestionsCount} suggestions. Use the up and down arrows to browse.`;
  }
});

Rendu

Projet de calendrier décentralisé pour la gestion d'une résidence familiale

• Pas d'inscription : seule la personne ajoutée par l'admin on l'accès à l'outil
• Le mot de passe créé par l'utilisateur est sécurisé et indéchiffrable
• Les utilisateurs sont regroupés par famille
• L'ajout d'une demande de séjour se fait par famille, un mail de notification est envoyé
• Un membre donne son accord au nom de sa famille
• Les séjours en attendent de validation sont en gris sur le calendrier et passe en vert quand tout le monde est ok

Sources : https://github.com/pierretl/allegretto

UI Design

Version 2 — 17/01/2024

• Ajout du parcours mot de passe oublié
• Redesign du site
• Refonte UX de l'interface
• Amélioration de l'affichage sur mobbile
• Affiche la liste uniquement si le séjour concerne la famille de l'utilisateur
• Personnalise la couleur de la date du jour
• Les séjours dons la date de départ est passé s'affiche sur un fond gris

Version 1 — 22/009/2022

• Pas d'inscription : seule la personne ajoutée par l'admin on l'accès à l'outil
• Le mot de passe créé par l'utilisateur est sécurisé et indéchiffrable
• Les utilisateurs sont regroupés par famille
• L'ajout d'une demande de séjour se fait par famille, un mail de notification est envoyé
• Un membre donne son accord au nom de sa famille
• Les séjours en attendent de validation sont en gris sur le calendrier et passe en vert quand tout le monde est ok

1. Vérifier que vous avez Node.js

   node -v

   puis de npm avec

   npm -v

   Sinon télécharger et installer Node.js

2. Installer gulp

   npm install gulp-cli -g

   gulp -v pour connaitre la version installer

3. Initialiser un nouveau projet

   npm init -y

   Un fichier package.json

   est créer

4. Installation de ce qui est nécessaire

   npm install --save-dev gulp gulp-sass browser-sync gulp-autoprefixer gulp-clean-css gulp-sourcemaps gulp-mode gulp-concat gulp-rename gulp-uglify

5. Créer le fichier gulpfile.js à la racine du projet

   const gulp =  require('gulp');
   const sass = require('gulp-sass')(require('sass'));
   const prefix = require('gulp-autoprefixer');
   const minify = require('gulp-clean-css');
   const sourcemaps = require('gulp-sourcemaps');
   const mode = require('gulp-mode')();
   const browserSync = require('browser-sync').create();
   const concat = require('gulp-concat');
   const rename = require('gulp-rename');
   const uglify = require('gulp-uglify');
   
   
   // compilation des styles CSS
   function styles(){
       // Emplacement des fichiers .scss
       return gulp.src('./_scss/style.scss')
       // Source map
           .pipe(mode.development( sourcemaps.init() ))
       // Passer ces fichiers au compilateur + si erreur affiche les log
           .pipe(sass().on('error', sass.logError))
       // Préfixer automatiquement les propriétés nécessaire
           .pipe(prefix('last 2 versions'))
       // Minifier
           .pipe(minify())
       // Source map
           .pipe(mode.development( sourcemaps.write() ))
       // Emplacement du fichier .css généré
           .pipe(gulp.dest('./style/'))
       // changements de flux pour tous les navigateurs
           .pipe(mode.development( browserSync.stream() ));
   }
   
   // compilation des scripts JavaScript
   function scriptJs(){
       return gulp.src('./js/*.js')
           .pipe(concat('script.js'))
           .pipe(rename({suffix: '.min'}))
           .pipe(uglify())
           .pipe(gulp.dest('./'))
           .pipe(mode.development( browserSync.stream() ));
   }
   
   // watch
   function watch() {
       browserSync.init({
           server: {
               baseDir: './'
           }
       });
       gulp.watch('./_scss/**/*.scss', styles);
       gulp.watch('./*.html').on('change', browserSync.reload);
       gulp.watch('./js/**/*.js', scriptJs);
   }
   
   // Compilation des styles pour la prod
   function buildScss(){
       // Emplacement des fichiers .scss
       return gulp.src('./_scss/style.scss')
       // Passer ces fichiers au compilateur + si erreur affiche les log
           .pipe(sass().on('error', sass.logError))
       // Préfixer automatiquement les propriétés nécessaire
           .pipe(prefix('last 2 versions'))
       // Minifier
           .pipe(minify())
       // Emplacement du fichier .css généré
           .pipe(gulp.dest('./style/'));
   }
   
   
   exports.watch = watch;
   exports.build = gulp.series(buildScss, scriptJs);

6. gulp build pour la production
   gulp watch pour la dev

• CSS
• JavaScript
• Démonstration
  • Basculer en mode sombre
  • Mode sombre par défaut

CSS

1. Utiliser les propriétés personnalisées (custom properties en anglais) pour gérer vos couleurs
   Donné un nom fonctionnel ou plus simplement numérote vos couleurs !

   body {
       background:var(--color1);
       color:var(--color2);
   }

2. Créer le thème par défaut dans :root

   Mode clair par défaut

   :root {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
   }

   Mode sombre par défaut

   :root {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
   }

3. Définissez le jeu de couleurs du navigateur avec la propriété color-scheme ;

   Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.

   Mode clair par défaut

   :root {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
       color-scheme: only light;
   }

   La valeur only sert à désactiver le remplacement de couleur du mode nuit du moteur de rendu Blink

   Mode sombre par défaut

   :root {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
       color-scheme: dark;
   
   }

4. Créé le thème équivalent pour l'autre mode

   Mode clair par défaut

   .dark {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
       color-scheme: dark;
   }

   Mode sombre par défaut

   .light {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
       color-scheme: only light;
   }

JavaScript

1. let root = document.querySelector(":root");

2. Détecter la préférence de l'utilisateur

   Mode clair par défaut

   if (
       window.matchMedia &&
       window.matchMedia("(prefers-color-scheme: dark)").matches
   ) {
       root.classList.toggle("dark");
   }

   Mode sombre par défaut

   Comme dans la grande majorité des cas, le thème clair n'est pas demandé (car par défaut), je conserve le thème sombre du site

3. Détecter le changement de préférence utilisateur

   Mode clair par défaut

   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
       if(e.matches) {
           root.classList.add("dark");
       } else {
           root.classList.remove("dark");
       }
   });

   Mode sombre par défaut

   Pas de détection non plus

4. Basculer de mode à tout instant en une action

   Mode clair par défaut

   document.querySelector("button").addEventListener("click", () => {
       event.preventDefault();
       root.classList.toggle("dark");
   });

   Mode sombre par défaut

   document.querySelector("button").addEventListener("click", () => {
       event.preventDefault();
       root.classList.toggle("light");
   });

5. Je recommande de sauvegarder dans le localStorage tout changement de mode afin de pouvoir le configurer lors de la prochaine visite

Démonstration

Basculer en mode sombre

Mode sombre par défaut