Sommaire
Salut les moules !
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 Renard au Japon
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), comme promis il y a trois ans (le temps passe beaucoup trop vite). 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 !
Ce journal, placé sous licence CC BY 4.0, est une adaptation de ce post de forum.
# dynamique
Posté par Psychofox (Mastodon) . Évalué à 10.
Je suis étonné du choix de ne pas faire un site statique pour du contenu qui ne va pas changer.
D'un point de vue pérenité, fiabilité, sécurité et environnemental ça me parait plus approprié
[^] # Re: dynamique
Posté par Dring . Évalué à 5.
D’ailleurs vraie question : est-ce que Quarkus+Kotlin d’un point de vue environnemental c’est lieux que PHP ? Comme ça tourne sur des machines différentes j’imagine que c’est compliqué de comparer.
[^] # Re: dynamique
Posté par SpaceFox (site web personnel, Mastodon) . Évalué à 5. Dernière modification le 14 février 2023 à 09:04.
En fait c’est d’abord et avant tout une question de temps : reprendre le site à l’identique mais en 100 % statique, c’était trop de boulot, et donc ça n’aurait jamais été fait.
En terme de pérennité et de sûreté, c’est sûr que le site statique gagne.
En terme d’impact environnemental, je ne prendrais pas les paris sur le cycle de vie complet de cette version du site. Pourquoi ? Parce que la version dynamique actuelle ne consomme à peu près rien selon les standards modernes : moins de 50 Mo de RAM sur un serveur qui en a 8 Go, un temps de génération des pages infime – je me demande même si la négociation TLS et le chiffrement HTTPS ne consomment pas plus que la génération de la page (dont les images, largement plus grosses que le HTML). C’est un site qui n’aura pas des millions de vues ; pas sûr que tout ce qu’il surconsomme sur sa durée de vie soit plus grand que toute l’énergie (électrique) que j’aurais dépensé sur mon PC fixe à développer une version statique.
Par contre je me rends compte qu’il y a un défaut de configuration sur les fichiers HTTP et CSS dont le cache navigateur n’est pas activé alors qu’il devrait l’être.
PS : Quarkus + Kotlin vs PHP, à fonctionnel et machine identique, je pense que Quarkus + Kotlin gagnent, parce que la JVM (HotSpot) est très optimisée une fois qu’elle a passé le compilateur JIT partout. Le PHP moderne est bien mieux que celui d’il y a 10 ans, mais je ne crois pas qu’il le soit à ce point.
La connaissance libre : https://zestedesavoir.com
[^] # Re: dynamique
Posté par Zatalyz (site web personnel) . Évalué à 7.
Il m'est déjà arrivé d'archiver des vieux sites en statique grâce à… wget. C'est bourrin, pas forcément très propre, mais ça permet de passer à du html/css et donc de virer les vieux php, sans demander non plus trop de temps pour y mettre en place.
Ça n'est pas forcément une solution à adopter partout, hein ; ici ce que tu as fait fonctionne très bien et en plus cela t'as permis de revoir un peu le thème, c'est carrément plus élégant comme solution. Mais parfois ça permet de laisser un site en ligne tout en virant tout l'aspect dynamique qui peut poser souci quand on ne maintient plus, le tout sans y perdre trop de temps. Si l'astuce peut servir à d'autres…
[^] # Re: dynamique
Posté par SpaceFox (site web personnel, Mastodon) . Évalué à 2.
C’est pas con tiens.
Je m’étais aussi demandé s’il n’y avait pas moyen de demander à Quarkus de générer les fichiers sur disque au lieu de les générer à la volée ; comme j’ai des données dans des
enumj’ai la garantie de passer sur toutes les pages. Mais c’était pas trivial de ce que j’ai vu, et j’ai pas eu le courage de creuser.La connaissance libre : https://zestedesavoir.com
# Et pourquoi pas un truc comme o2switch
Posté par Christophe B. (site web personnel) . Évalué à 3.
Sincèrement
même si vous prenez cela pour de la pub , je recommande o2switch comme hébergeur
Pour des petits sites dans le style que tu décris cela te couterait pas grand chose
d'ailleurs ils n'ont qu'une seule offre : https://www.o2switch.fr/hebergement-illimite/
Sauf si tu as un trafic de ouf cela convient très bien pour pas mal de choses.
Les limites sont celles de CPANEL mais cela permet de faire beaucoup de trucs.
Je ne suis pas un spécialiste de l’hébergement Web, mais j'ai trouvé mon bonheur pour 90€ / an
si je me souviens bien.
Et en plus le support est sympa, même quand on lui demande des conneries :)
[^] # Re: Et pourquoi pas un truc comme alwaysdata
Posté par alberic89 🐧 . Évalué à 3.
Personnellement, j'utilise alwaysdata quand je dois faire des petits trucs sympas.
Tu as droit de créer autant de compte gratuit que tu veux avec un seul profil, sans jamais sortir la CB.
Chaque petit compte a droit à 100 Mo d'espace disque, avec une adresse en xxx.alwaysdata.net. Bien sûr, si tu as déjà un nom domaine enregistré, tu peux l'utiliser, ils fournissent même un hébergement DNS gratuit illimité.
Le support est également très agréable et réactif.
L'informatique n'est pas une science exacte, on n'est jamais à l'abri d'un succès
[^] # Re: Et pourquoi pas un truc comme alwaysdata
Posté par Christophe B. (site web personnel) . Évalué à 3.
Oui je connais
C'est vrai que c'est limité mais cela permet de se faire la main.
Tu peu apprendre pour pas cher :)
Content de savoir que cela existe toujours, parce que cela fait quelques années maintenant
Merci pour l'info
[^] # Re: Et pourquoi pas un truc comme alwaysdata
Posté par Gil Cot ✔ (site web personnel, Mastodon) . Évalué à 2.
J'ai utilisé il y a quelques années et je ne savais pas que ça existait toujours. Est-ce qu'il faut toujours être « actif » dans une certaine période pour que le compte gratuit ne soit pas suspendu ?
“It is seldom that liberty of any kind is lost all at once.” ― David Hume
[^] # Re: Et pourquoi pas un truc comme alwaysdata
Posté par alberic89 🐧 . Évalué à 1.
Oui, mais il suffit de se connecter à son compte administrateur. En général, ils t'envoient un mail quelques semaines avant de suspendre ton compte.
L'informatique n'est pas une science exacte, on n'est jamais à l'abri d'un succès
[^] # Re: Et pourquoi pas un truc comme alwaysdata
Posté par alberic89 🐧 . Évalué à 2.
Rectification : tu n'as droit qu'à un seul compte gratuit. Je viens de me faire taper sur les doigts.
L'informatique n'est pas une science exacte, on n'est jamais à l'abri d'un succès
# C'est vertical
Posté par Glandos . Évalué à 3.
Moi, le design me va, sauf que ma molette se meurt.
Y a des bandes des 352px (images horizontales) et 576px (images verticales) de chaque côté. On pourrait presque mettre trois images (verticales) côte à côte. C'est dommage :)
[^] # Re: C'est vertical
Posté par SpaceFox (site web personnel, Mastodon) . Évalué à 4.
Je sais, mais les données font que c’est compliqué : en gros chaque page « raconte une histoire » (vite fait, hein), donc si on perds la linéarité ça devient incompréhensible ou alors totalement contre-intuitif (obligation de remonter en haut de la page pour avoir la suite).
J’ai pas de « bonne solution » ici pour les écrans larges, hélas (et j’ai développé ça sur un 27" en 2560 x 1440, donc avec beaucoup d’espace mort de chaque côté).
La connaissance libre : https://zestedesavoir.com
# Clarté des légendes
Posté par skia . Évalué à 6.
Très sympa et agréable à lire, j'aime bien.
Le seul truc qui m'a gêné, c'est les légendes pile à mi-chemin entre deux images: des fois on sait plus à quelle image se rapporte la légende, puisque l'usage est parfois de légender en dessous, et parfois, comme toi, au dessus. Rapprocher la légende de l'image à laquelle elle se rapporte aiderait à la clarté au premier coup d'œil.
# Bien le site
Posté par Christophe B. (site web personnel) . Évalué à 3.
Bonjour,
J'aime bien ton site pour le contenu, sacré voyage, en plus le japon cela doit être comme une autre planète pour nous autres Européens/ Français.
Merci pour ton site.
Sinon je vais faire un peu de la pub pour mon frère qui est passionné par la photo et lui utilise KOKEN mais apparemment le produit s'est arrêtée.
Dommage j'aimais bien l'ergonomie
Son site : http://www.anacamptis.fr/
Un exemple de ses photos que j'adore … http://galerie.anacamptis.fr/Galerie_album_photos/album/Favorites/index.html#IMG_a1824.jpg
# Sympa
Posté par arnauld . Évalué à 2.
Ton voyage et ces photos, je regarde, je regarde… J'aime regarder les photos.
arnauld
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.