Formation on Maxence Lagalle

Quoi de neuf côté Git ?

Wed, 28 Oct 2026 12:00:00 +0100

Git publie une version environ tous les trimestres. Cette page recense, sans prétendre à l’exhaustivité, les évolutions récentes les plus utiles pour les pratiques décrites dans cette formation. La référence complète reste constituée par les notes de version de chaque publication, disponibles sur le site officiel de Git.

Travaux pratiques : une calculatrice Java sous Git

Wed, 28 Oct 2026 12:00:00 +0100

Ces travaux pratiques vous font pratiquer Git et GitLab à travers un mini-projet : une calculatrice en Java, qui évolue au fil des exercices. Vous n’avez pas besoin de compiler le code Java : l’objectif est de manipuler Git, pas d’apprendre Java.

Avant de commencer

Objectifs pédagogiques

Maîtriser les commandes Git essentielles (init, add, commit, push, pull).
Gérer des branches et résoudre des conflits de fusion.
Travailler en équipe avec GitLab : merge requests, tickets, jalons, wiki.
Utiliser des techniques avancées : rebase, stash, cherry-pick, revert.

Matériel et organisation

Git installé (voir Premiers pas) et un terminal Unix : sous Windows, Git Bash.
Un compte gratuit sur gitlab.com, avec une clé SSH configurée.
Un éditeur de texte (Visual Studio Code, Notepad++, IntelliJ…).
Environ 6 heures en tout : 2 heures de lecture des pages de cours et 3 h 30 d’exercices, hors pauses.

Le TP est organisé en quatre blocs progressifs :

Travaux pratiques CSS 3 : mettre en forme le mini-site

Wed, 28 Oct 2026 12:00:00 +0100

Suite des travaux pratiques : vous partez de la page HTML terminée à l’exercice 7 (voir le TP HTML) et vous la mettez en forme avec CSS, de la charte graphique jusqu’au responsive design, sans jamais perdre de vue l’accessibilité. Si vous n’avez pas terminé la première partie, vous pouvez repartir du fichier index.html de l’annexe en bas de page.

Travaux pratiques HTML 5 : le mini-site d'une ville

Wed, 28 Oct 2026 12:00:00 +0100

Cette page rassemble les exercices du chapitre HTML. Vous allez construire pas à pas une page d’accueil complète, en appliquant chaque notion du cours. Chaque exercice est suivi de son corrigé, à ouvrir seulement après avoir essayé.

Mode d’emploi pour apprendre seul

Ces exercices ont été conçus pour un stage de deux journées, mais ils se pratiquent très bien en autonomie, à raison d’environ une journée de travail pour chacune des deux parties (HTML puis CSS).

Accessibilité et CSS : approfondissements et boîte à outils

Tue, 21 Jul 2026 12:00:00 +0200

10.1. CSS et accessibilité

Le focus visible

Les utilisateurs au clavier repèrent leur position grâce au contour de focus que le navigateur dessine autour de l’élément actif. Le supprimer (outline: none) sans le remplacer rend le site inutilisable au clavier. Pour le personnaliser :

a:focus-visible,
button:focus-visible {
 outline: 3px solid #1f4e79;
 outline-offset: 2px;
}

Respecter les préférences de l’utilisateur

Deux media queries adaptent la page aux réglages du système d’exploitation :

/* Réduire les animations pour les personnes sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
 * {
 animation: none;
 transition: none;
 }
}
 
/* Proposer un thème sombre */
@media (prefers-color-scheme: dark) {
 :root {
 --fond: #1a1a2e;
 --texte: #f0f0f0;
 }
}

Masquer sans exclure

display: none et visibility: hidden retirent un contenu de l’écran et des lecteurs d’écran. Pour un texte destiné aux seuls lecteurs d’écran (préciser le contexte d’un bouton-icône, par exemple), on utilise une classe utilitaire consacrée, dite « sr-only », qui masque visuellement sans retirer de l’arbre d’accessibilité :

Le web, les standards et l'accessibilité

Tue, 21 Jul 2026 12:00:00 +0200

1.1. Trois langages complémentaires

Une page web moderne repose sur trois langages aux rôles bien distincts :

HTML (HyperText Markup Language) décrit le contenu et sa structure : titres, paragraphes, images, liens, tableaux, formulaires…
CSS (Cascading Style Sheets) décrit la présentation : couleurs, polices, dimensions, positionnement des éléments.
JavaScript apporte l’interactivité : réaction aux actions de l’utilisateur, modification dynamique de la page. Il n’est pas traité dans cette formation.

Cette séparation des responsabilités est un principe fondamental : un document HTML doit rester compréhensible et utilisable même sans CSS ni JavaScript. C’est aussi la base de l’accessibilité et du référencement.

Responsive design : s'adapter à tous les écrans

Tue, 21 Jul 2026 12:00:00 +0200

9.1. Le principe

Plus de la moitié du trafic web mondial provient des téléphones. Le responsive design consiste à concevoir une page unique dont la mise en page s’adapte à la largeur de l’écran, plutôt que des sites séparés par appareil. Trois ingrédients : la balise meta viewport, des dimensions fluides, et les media queries.

9.2. La balise meta viewport

Sans instruction contraire, un navigateur mobile affiche la page comme sur un écran de bureau de ~980 px, puis dézoome. La balise suivante, à placer dans le <head> de toutes les pages, désactive ce comportement :

Tableaux et formulaires en HTML 5

Tue, 14 May 2024 18:00:00 +0100

Un tableau HTML sert à présenter des données tabulaires : des valeurs qui se lisent en croisant lignes et colonnes. Historiquement, les tableaux ont aussi été détournés pour faire de la mise en page ; cette pratique est aujourd’hui à proscrire absolument — c’est le rôle de CSS (Flexbox et Grid, chapitre 8).

4.1. Tableau simple

Un tableau est délimité par <table>. Chaque ligne est un <tr> (table row), qui contient des cellules de deux types : <th> (table header) pour les en-têtes et <td> (table data) pour les données. Une légende, fortement recommandée, s’ajoute avec <caption> en premier enfant de <table>.

Positionnement des éléments en CSS

Mon, 13 May 2024 12:00:00 +0100

8.1. Le flux normal

Par défaut, les éléments se positionnent « dans le flux » : les blocs s’empilent verticalement (leurs marges verticales fusionnant), les éléments en ligne s’enchaînent horizontalement avec renvoi à la ligne automatique. Toute mise en page consiste à organiser des exceptions maîtrisées à ce flux — et les outils modernes pour le faire sont Flexbox et Grid.

8.2. La propriété position

position change le mode de positionnement d’un élément ; le décalage se règle ensuite avec top, right, bottom et left :

Syntaxe CSS 3, sélecteurs et propriétés usuelles

Sun, 12 May 2024 21:00:00 +0100

6.1. Anatomie d’une feuille de style

Une feuille de style CSS se compose de règles. Chaque règle est introduite par un sélecteur, qui désigne les éléments HTML concernés, suivi d’un bloc de déclarations entre accolades. Une déclaration associe une propriété à une valeur et se termine par un point-virgule :

selecteur-1 {
 propriete-1: valeur;
 propriete-2: valeur;
}
 
selecteur-2 {
 propriete-3: valeur;
}

Les commentaires s’écrivent /* commentaire */. CSS repose sur deux mécanismes fondamentaux : l’héritage (un élément hérite de nombreuses propriétés de ses ancêtres, notamment celles liées au texte) et la cascade (des règles concurrentes sont départagées selon des critères de priorité, présentés en 6.4).

Principales balises HTML 5

Thu, 09 May 2024 21:15:00 +0100

Le standard définit plus d’une centaine de balises, mais un petit sous-ensemble couvre l’immense majorité des besoins. Ce chapitre présente les balises usuelles, en dehors des tableaux et formulaires qui font l’objet des chapitres 4 et 5.

3.1. Titres et hiérarchie

Les balises <h1> à <h6> définissent six niveaux de titres. Elles structurent le document comme le ferait le plan d’un rapport :

une page contient en principe un seul <h1>, qui annonce son sujet principal ;
les niveaux s’enchaînent sans saut : un <h3> ne doit apparaître que sous un <h2> ;
on ne choisit jamais un niveau de titre pour sa taille d’affichage — c’est le rôle de CSS.

Syntaxe HTML 5 et structure sémantique d'une page web

Tue, 07 May 2024 11:30:00 +0100

2.1. Une syntaxe héritée de XML

La syntaxe de HTML 5 est héritée de celle de XML, avec quelques assouplissements. Un document est un arbre composé de nœuds, définis au moyen de balises :

balise ouvrante : <noeud> ;
balise fermante : </noeud> ;
balise vide (auto-fermante) : <noeud/> — en HTML 5, la barre oblique finale est facultative (<img> et <img/> sont équivalents).

Un nœud texte s’insère entre une balise ouvrante et une balise fermante. Les balises peuvent être complétées d’attributs, sous forme de paires clé/valeur, chaque attribut étant unique à l’échelle d’une balise :

Flux de travail usuels

Sun, 16 Apr 2023 19:00:00 +0100

Un flux de travail (en anglais, workflow) est une façon standardisée d’organiser les branches d’un projet Git. Leur utilisation permet de bénéficier de méthodes éprouvées pour s’adapter à des modes usuels d’organisation et d’outils spécifiquement conçus pour leur prise en charge.

GitFlow

GitFlow est un flux de travail qui a été proposé par Vincent Driessen en 2010. Son objectif est de permettre en parallèle la maintenance d’une version de production et l’élaboration d’une version de développement.

Gérer un dépôt Git

Sun, 16 Apr 2023 19:00:00 +0100

Dépôt local

Un dépôt (ou “repository” en anglais) est l’endroit où Git stocke l’historique des versions d’un projet de développement. Il existe deux types de dépôts dans Git :

Un dépôt local est une copie du dépôt sur l’ordinateur local d’un développeur
Un dépôt distant est un dépôt hébergé sur un serveur distant, accessible via Internet.

Créer un dépôt local

Pour créer un dépôt local avec Git, il suffit de se positionner en ligne de commandes (via cd) dans un dossier à transformer en dépôt et d’utiliser la commande :

Introduction

Sun, 16 Apr 2023 19:00:00 +0100

Git a été créé par Linus Torvalds, le créateur du système d’exploitation Linux, en 2005. Il a été conçu pour être un VCS décentralisé, capable de gérer efficacement les grands projets open source tels que le développement du noyau Linux. Git a rapidement gagné en popularité auprès de la communauté du développement de logiciels en raison de sa rapidité, de sa facilité d’utilisation et de sa flexibilité.

Git, en tant que VCS décentralisé (ou distribué), permet à chaque développeur de disposer d’une copie complète de l’historique des modifications et du code source sur leur ordinateur. Ils peuvent dont travailler en mode déconnecté (sans accès à Internet ou à un serveur centralisé) et ont accès à toutes les versions du code source. Cela signifie qu’il n’y a pas de point unique de défaillance, car le référentiel de code est distribué sur plusieurs machines.

Introduction à GitLab CI

Sun, 16 Apr 2023 19:00:00 +0100

L’intégration continue (Continuous Integration, CI) est une pratique de développement logiciel qui consiste à tester et à construire automatiquement un projet chaque fois qu’un développeur soumet un changement dans le code source. Cette pratique vise à détecter rapidement les erreurs de code et à garantir que le code est fonctionnel et prêt à être déployé.

Un pipeline d’intégration continue est un processus automatisé qui permet de construire, tester et déployer un projet. Il s’agit d’une série d’étapes configurées pour être exécutées automatiquement par un runner lorsque des événements surviennent un dépôt (comme un commit).

Premiers pas

Sun, 16 Apr 2023 19:00:00 +0100

Installation de Git

Linux

Git est généralement installé directement dans la plupart des distributions Linux. Sinon, il est installable dans un terminal au travers du gestionnaire de paquets de la distribution :

Debian : sudo apt install git-all
Fedora : sudo dnf install git-all

macOS

Sur macOS Mavericks (10.9) ou ultérieur, Git est fourni au travers des Xcode Command Line Tools. Il suffit d’essayer de lancer Git dans un terminal via une commande comme git --version pour que macOS propose de l’installer avec d’autres outils de développement. Sinon, il est possible d’utiliser Homebrew via brew install git ou de télécharger l’installateur.

Travailler avec GitLab

Sun, 16 Apr 2023 19:00:00 +0100

Une forge logicielle est une plateforme web qui permet aux développeurs de gérer leur code source, de collaborer sur des projets de développement, de suivre les bugs et les problèmes, et de déployer des applications. Outre le suivi de version basé sur Git, les forges logicielles incluent des fonctionnalités comme la création de merge requests, la gestion de bugs, la documentation, la gestion des tâches, les tests automatisés et les déploiements continus.