À propos de ce site web

J'ai adoré réaliser ce site web de A à Z de mes propres mains.

Sommaire présentation tout public

• Pour le plaisir ;
• Un site ex nihilo ;
• Les déjà-vu ;
• Les nouveautés ;
• Vos suggestions.

Voir aussi Le coin des experts.

Pour le plaisir

J'ai réalisé ce projet pour le plaisir du faire et l'amour du travail bien fait qui guident chacun de mes pas.

J'espère que vous prendrez autant de plaisir à le parcourir que j'en ai eu à le mitonner pour vous.

Ce projet me sert à m'assurer que je maîtrise les technologies qu'il utilise. Cela peut m'être utile pour intervenir sur des codes ou pour diriger des prestataires web pour vous.

Vous trouverez ici du contenu pour vous aider à comprendre ce que je peux vous apporter.

Mais c'est d'abord et avant tout un grand plaisir pour moi de me consacrer à ce genre de réalisation.

Un site ex-nihilo

J'ai créé ce site web de toute pièce, ex-nihilo, ligne après ligne, étape après étape.

Dans le projet 1 ¹, je me limite à des méthodes procédurales « à l'ancienne » et je n'utilise que les langages HTML, PHP, CSS et JavaScript natifs.

Sur ce projet-ci ², j'utilise des méthodes bien plus modernes de développement web. J'en dis un peu plus dans Le coin des experts.

Les déjà-vu

Ces idées sont déjà mises en place dans le projet 1. ¹

Présentation adaptative

Il s'agit d'une approche de conception des pages qui s'adapte à l'espace disponible dans la fenêtre du navigateur web. En anglais, on parle de « fluid design ».

Je privilégie une approche totalement adaptative ³ qui s'adapte graduellement à l'espace que vous allouez au site sur votre écran.

Vous pouvez d'ailleurs vous amuser à changer les dimensions de la fenêtre de votre navigateur pour observer ce que cela produit.

J'utilise encore quelques points de bascule ⁴, mais je m'efforce de les réduire au minimum.

J'ai choisi de vous proposer des polices d'affichage de grande taille et d'utiliser le plus d'espace possible sur vos écrans lorsque la résolution le permet. Cela fatigue moins vos yeux et me semble beaucoup plus pertinent.

Gestion des thèmes

Les thèmes des pages que vous parcourez sont gérés dynamiquement :

• un tirage au sort du thème est effectué à chaque chargement de page ;
• les pages sont rafraîchies périodiquement
  • sauf si vous verrouillez le thème ou
  • si vous êtes dans le formulaire contact, pour éviter de vous interrompre pendant votre saisie.

Vous pouvez

• changer le thème sur la page en cours autant de fois que vous le souhaitez.
• verrouiller un thème pour visualiser toutes les pages avec ce thème.

Si vous conservez les données de sites sur votre machine, vos préférences seront appliquées lors de votre prochaine visite et les suivantes.

La question à un million d'euros

À votre avis, quel est la signification de ces thèmes que vous pouvez changer ou verrouiller ?

Les nouveautés

Ce projet comporte des nouveautés par rapport au projet précédent. ¹ En voici quelques-unes.

Langues

Le site est multilingue : il est proposé en français et en anglais. Les liens sont préfixés respectivement fr/ et en/ puis nommés dans la langue choisie. Tous les contenus sont traduits sur le site web comme dans les courriels qui vous sont envoyés.

Si vous vous rendez pour la première fois sur l'adresse racine du site web, il essaie de détecter vos préférences linguistiques et vous oriente vers votre langue si elle est disponible, ou vers la version française.

Masquer le pied-de-page

Vous pouvez masquer le pied-de-page grâce au bouton avec la croix à droite de l'écran. Pour réafficher le pied-de-page, il vous suffit de cliquer sur ce même bouton, quand il affiche un œil.

Cela libère de l'espace dans l'écran. Il est par exemple pertinent de le faire après avoir choisi votre thème préféré et l'avoir verrouillé.

Modes clair et sombre

Le site propose une gestion du mode d'affichage : clair ou sombre.

L'outil tient compte des préférences de votre navigateur web et vous propose un bouton commutateur (en haut à droite).

Test de validation

Le test de validation anti-robots (alias captcha) proposé dans le formulaire contact est une création personnelle.

Très léger, il fonctionne en HTML / CSS purs (sans JavaScript).

L'ensemble de mon site web fonctionne à 100 % sur mon serveur, sans aucun contenu tiers. C'est bien sûr le cas de ce test de validation.
Voir Conditions d'utilisation pour plus d'informations.

Stockage local

Vos préférences sont sauvegardées pour votre retour si vous n'effacez pas le stockage local :

• l'état du thème (verrouillé ou non) ;
• le thème ;
• le mode d'affichage (clair ou sombre)  et
• la langue (via la dernière page visitée).

Ces données sont stockées sur votre machine et gérées par votre navigateur web dans ce qu'on appelle le « stockage local » ou « stockage côté client ⁵ ».

Vos suggestions

Si vous avez des suggestions d'amélioration ou si vous voyez quelque-chose qui mérite mon attention, merci de me le signaler. Si nous ne nous connaissons pas encore, vous pouvez vous servir du formulaire contact même si, officiellement, il n'est pas là pour cela. 😉

Au plaisir,

Marc JESTIN
https://marcjestin.fr

---

Le coin des experts

Parlons un peu des technologies, outils et méthodes utilisés dans ce projet de site web.

• Le cœur du site web ;
• Outils pour le développement ;
• Intégration continue / développement continu (CI/CD) ;
• Documentation ;
• Notes périphériques ;

Le cœur du site web

Par « le cœur du site web », j'entends les concepts, technologies et outils qui servent à faire tourner le site en lui-même.

Concepts généraux

Ce projet se sert abondamment de :

• Programmation orientée objet,
• Chargeur automatique (autoloader),
• Injections de dépendances,
• Factories,
• Conteneur de services,
• Attributs de données,
• Routeur,
• Internationalisation des contenus et des URLs,
• Un langage « riche » pour les styles,
• une gestion dynamique des contenus,
  • avec un moteur de modèles et
  • un convertisseur (parser),
• etc.

Les langages utilisés par le site web une fois compilé sont bien sûr HTML, PHP, JavaScript ⁶ et CSS.

Librairies PHP

J'ai utilisé des librairies composer pour les fondamentaux PHP. La plupart proviennent de Symfony. C'est le cas du gestionnaire de session et du routeur, par exemple.

Pour ne pas tout faire avec des outils sourcés Symfony, le conteneur d'injection de dépendances est PHP-DI.

Le convertisseur (parser) Markdown enrichi vers HTML est league/commonmark. ⁷

Langage de composition des pages web

Je me sers de Twig, également issu de l'écosystème Symfony.

Langage de définition des styles

J'utilise SCSS avec quelques variables, maps et mixins.

Outils pour le développement

Git, ce fidèle compagnon, ne me quitte jamais. Quelle sérénité de savoir qu'on peut à tout moment retrouver une chose qu'on a écrite ou revenir à un état stable et fonctionnel de notre code pour repartir de plus bel à la recherche du Graal !

Côté outils Javascript, Dart Sass et Vite sont de la partie.

Mailpit est mon ami pour les simulations d'envois de messages.

Intégration continue / développement continu (CI/CD)

J'ai écrit un script JavaScript pour automatiser le traitement et le transfert des éléments du site depuis le projet développement vers le projet de pré-production.

C'est à partir du projet de pré-production, une fois validé, que j'installe le site de production chez mon hébergeur, toujours avec des scripts (bash cette fois).

Documentation

Je n'entreprends plus de projet sans intégrer une démarche de documentation.

Tous ceux qui connaissent le développement savent à quel point c'est un investissement important.

Cela prend du temps, mais c'est une condition sine qua non pour bien vivre la maintenance du code et ses évolutions futures. C'est également utile pour mieux conceptualiser et mémoriser ce que nous faisons.

Pour la documentation automatique des classes, je me sers de phpdocumentation/shim.

Pour la documentation que je rédige, j'utilise TeX / LaTeX. C'est le seul outil qui m'apporte tout ce dont j'ai besoin pour réaliser une documentation de bonne qualité et durable.

L'incontournable paquet minted me sert à insérer des extraits de code. Il utilise Pygments qui fournit la coloration syntaxique.

J'utilise LuaLaTeX pour utiliser mes codes Lua. Ces codes me servent pour personnaliser des éléments de présentation et pour générer certains contenus (listes de fichiers, horodatages, comptages, etc.).

Notes périphériques

Mon fidèle wiki personnel sous DokuWiki ne me quitte plus.

J'y prends des notes chronologiques d'un côté, je mets à jour ma base de connaissances et de savoir-faire de l'autre.

Quand on a goûté à la plupart de ces outils, je crois qu'il devient difficile de revenir en arrière…

Au plaisir,

Marc JESTIN
https://marcjestin.fr