404

Désolé
On dirait que vous êtes perdu, il n'y a rien ici...

Il n'y a pas de résultat pour cette recherche

89 résultats de recherche (8 résultats par page - 12 pages)

  • AIPE - Association Intercommunale Petite Enfance — 04 12 2025

    Site vitrine pour l'Association Intercommunale Petite Enfance de Moirans

    realisations aipe-association-intercommunale-petite-enfance /realisations/aipe/

    Introduction

    Il y a déjà cinq mois, j'ai commencé la réalisation du site vitrine de l'AIPE (Association Intercommunale Petite Enfance) de Moirans.

    C’est un projet purement bénévole, dans l’optique de créer un site simple, épuré et facile à mettre à jour, mais aussi adapté à leurs besoins : joli, moderne et accessible. Un travail destiné à prolonger leur rebranding.

    Rebranding et cohérence visuelle

    Ils sont passés par Passerelles & Compétences pour la création de leur logo et de leur charte graphique.

    Le site doit donc reprendre ces éléments afin de conserver une cohérence visuelle.

    Je me permets toutefois quelques déclinaisons pour répondre à certaines contraintes, notamment en matière de contrastes pour garantir une bonne accessibilité.

    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.

    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.

    Logo fournis par l'AIPE en .png non transparent
    Vectorisation du logo et déclinaisons en format horizontal
    Séparation des éléments du logo pour diverses utilisations

    Pages

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

    Page d'accueil, rpe et actibébé sur ordinateur
    Page d'accueil, rpe version mobile
  • Pensine — 29 10 2025

    Enregistrement de Marque-pages sur GitHub

    recueil pensine /recueil/pensine/

    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 !

  • Le sou des écoles — 08 10 2025

    Affiche réalisés pour le sou des écoles de mon village.

    realisations le-sou-des-ecoles /realisations/sou-des-ecoles/

    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

    Flyer distribué aux parent d'élèves pour annoncer les prochainne événements organisés par le sou des écoles

    Boum Halloween — 8 octobre 2025

    Affiche d'entrée de la boum Halloween avec le prix d'entrée et les gourmandises offertes
    Pencarte pour signaler la caisse
    Menu de la buvette
  • Gérer plusieurs comptes GitHub avec des clés SSH sur Windows — 20 07 2025

    Configurer plusieurs clés SSH pour gérer plusieurs comptes GitHub sans conflit et sécuriser l'accès au code

    recueil gerer-plusieurs-comptes-github-avec-des-cles-ssh-sur-windows /recueil/gerer-plusieurs-comptes-github-avec-des-cles-ssh/

    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

  • Liste de suggestions accessible — 18 03 2025

    Illustration de l'utilisation de la balise HTML5 <datalist>

    recueil liste-de-suggestions-accessible /recueil/datalist/

    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

  • Allegretto — 17 01 2024

    Application de gestion de planning d'occupation

    realisations allegretto /realisations/allegretto/

    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

    Le logo est une vectorisation du logo dessiné par mon grand-père.

    UI Design

    Version 2 — 17/01/2024

    Sass de connexion
    • 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
    Tableau de bord des séjours
    Administration des utilisateurs
    Tableau de bord des séjours sur smartphone
    Administration des utilisateurs sur smartphone

    Version 1 — 22/009/2022

    Sass de connexion
    • 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
    Tableau de bord des séjours
    Administration des utilisateurs
  • Gulp V4 : compiler Sass et les fichiers JS — 06 06 2023

    Configuration de Sass, JS et BrowserSync avec Gulp V4

    recueil gulp-v4-:-compiler-sass-et-les-fichiers-js /recueil/gulp/
    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
  • Mode sombre et mode claire — 02 06 2023

    Mettre correctement en place un mode sombre/clair aussi appeler dark/light mode ou mode nuit/jour

    recueil mode-sombre-et-mode-claire /recueil/mode-sombre-et-mode-claire/

    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

Retour en haut