Salut les agrumes !
Un peu de contexte
Il y a de cela près de dix ans, je suis allé au Japon, et j’avais fait un site pour diffuser mes photos de voyage.
Sauf que voilà : ça fait presque dix ans que le site était là en l’état, dans son jus, ce qui me posait de plus en plus de problèmes :
- C’était l’un des derniers sites actifs sur ce nom de domaine et surtout sur ce serveur ;
- Ledit serveur a vu son prix trop monter ces derniers mois ;
- C’était un site en PHP (en fait un script qui m’a permis d’ajouter des photos au fur et à mesure du voyage) or je n’ai plus PHP sur mes serveurs actuels (et pas envie de maintenir la compatibilité de l’horreur du script historique) ;
- Il n’y avait pas de HTTPS et pas de moyen d’en mettre sans payer beaucoup trop cher ;
- Le design n’était plus adapté ni aux écrans actuels, ni aux mobiles ;
- Je ne supportais plus le rendu des photos (le rendu par défaut des outils de l’époque, très contrasté et surtout saturé à mort).
J’ai donc décidé de refaire le site. À la base je pensais à reprendre la structure que j’avais faite pour mon site sur mon voyage en Corée, mais ça posait plusieurs problèmes :
- Bootstrap (il est hors de question que je touche encore à cette chose) ;
- Ça signifierait perdre toute mes URLs ou faire un gros boulot de correspondance à la main ;
Or, ça reste un site de photos de vacances pour un voyage que j’ai fait il y a une dizaine d’années, rien qui vaille que j’y passe des semaines. Et quitte à y passer du temps, je préférais le passer sur le cœur du site, à savoir : retravailler le rendu des photos.
Les contraintes étaient donc, dans l’ordre :
- Sortir une version utilisable sur des appareils modernes du site ;
- Sans y passer trop de temps (ça n’est qu’une reprise d’un site de photos de vacances vieux de dix ans après tout) ;
- Avec les images mieux rendues (contraste, colorimétrie, et aussi taille puisque jusqu’ici les miniatures étaient vraiment petites et les « grands fromats » plafonnaient à 2000 px sur le plus grand côté).
La solution
Je suis donc parti sur un projet en Quarkus + Kotlin, dont le code est objectivement immonde : les données sont rangées dans des séries d’enum géantes. Mais en réalité ça a plein d’avantages de mon point de vue :
- J’ai pu créer les enums en transformant les scripts d’origine à coup d’expressions régulières, ce qui m’a éviter de longues heures de travail rébarbatif et sujet à erreurs ;
- C’est des technologies que je maitrise très bien et que je sais héberger ;
- La consommation et les performances sont plus que satisfaisantes ;
- C’était très pratique et très simple à développer et débugger.
On ajoute à ça un coup de CSS moderne, et ça roule ! Pour la petite histoire, le fond gris neutre et la bordure blanc pur autour des images sont là pour donner un référentiel aux images et éviter de perturber l’œil avec un fond trop sombre (qui rendrait les images trop claires par contraste), trop clair (idem dans l’autre sens, problème que j’ai eu sur mon site précédent), ou coloré (qui donnerait une impression de dominance dans l’image).
À ce sujet, le CSS a fait d’énormes progrès ces dernières années. À moins de vouloir supporter de véritables antiquités, on peut faire de façon simple, directe et compréhensible des designs responsives sans avoir à sortir des frameworks abscons qui demandent de transformer le HTML en soupe de balise <div>, en déluge de classes qui paraphrasent du CSS, voire les deux. Là j’ai principalement créé un HTML à peu près sémantique, collé le CSS qui correspondait à ce que je voulais faire, et le rendu était presque immédiatement ce que je désirais, avec très peu d’ajustements (surtout une poignée de classes pour indiquer quel sous-élément doit aller où dans la grille). À noter que j’ai utilisé https://html5boilerplate.com un peu par réflexe, sans grande conviction quant à son utilité réelle.
Le résultat
Le résultat est visible à l’adresse suivante :
Un vent de liberté
Le code du site lui-même est libre, sous licence MIT. Mais surtout, toutes les images sont libres, sous licence Creative Commons Attribution 4.0 (CC BY 4.0). Parce que, pourquoi pas ?
Avantages et limites du site
Normalement le site est compatible tous navigateurs modernes et toutes tailles d’écrans.
Par contre, il a les inconvénient d’être ce qu’il est, à savoir un remplacement à l’identique d’un site vieux de dix ans. Ça veut dire que le contenu lui-même n’a pas changé. En fait, c’est tellement un remplacement à l’identique que chaque URL de l’ancien site, images comprises, renvoie sur une présentation modernisée d’exactement le même contenu.
Dans les problèmes potentiels connus, le principal est l’absence totale de prise en compte de l’accessiblité (en particulier les textes alternatifs, beaucoup trop longs à faire vue la masse d’images qu’il y a). On peut noter aussi l’absence de format d’image plus moderne que le JPEG (à la fois pour des raisons de compatibilité des anciennes URLs et de boulot que ça demandait) et d’images multi-résolutions pour gérer les différentes densités ou résolutions d’affichage. Il n’y a pas non plus de méta-données pour le partage sur les réseaux sociaux (d’une manière générale : il n’y a aucune nouvelle donnée ou méta-donnée par rapport à la version d’origine). Enfin, le re-traitement des images s’est fait par lots, donc si en général le rendu est meilleur qu’avant, il se peut qu’il y ait des images avec un résultat bizarre qui ait échappé à mon contrôle.
J’aimerais beaucoup corriger tout ça, mais très honnêtement j’ai beaucoup trop d’autres choses plus prioritaires à faire, donc ça attendra – sans doute éternellement. Surtout que je sais que si je mets le nez là-dedans, je vais reprendre mon choix d’images, à peu près tous les textes… et que j’en aurais pour des mois.
J’espère quand même que ça vous plaira !
