Greboca  

LinuxFr.org : les journaux  -  Un site libre pour de l’art libre : Un Renard en Corée

 -  6 février - 

Sommaire

Salut tout le monde,

Un besoin

En revenant de voyage cet automne, je me suis demandé : comment vais‑je diffuser mes photos de voyage ?

Il y a la solution classique qui consiste à passer par des galeries tierces, mais cette solution ne me satisfaisait pas. D’une part, à cause des CGU à rallonge, d’autre part, parce que j’ai déjà un serveur en capacité d’héberger tout ça. Quand ça n’est pas les galeries de réseaux sociaux qui fusillent les images en les compressant à mort et en s’attribuant trop de droits sur les images. Le classique « je mets tout dans un ZIP et les gens se débrouillent » n’est vraiment pas pratique.

Alors, pourquoi pas me faire un site ? D’autant plus que ça pourrait très bien être un site statique, il n’y a pas besoin de quoi que ce soit de dynamique pour ce genre d’utilisation, et si je peux m’éviter de gérer et maintenir un serveur applicatif, ça m’arrange…

Sauf que… j’ai quand même un joli paquet de photos (408, pour être exact), et j’aimerais bien que mon site affiche des métadonnées liées à ces photos, alors comment faire ?

Dans les entrailles du site

Comment rendre un site dynamique, mais pas trop ?

En fait, j’ai besoin d’extraire les informations pour générer le site, et pas après – une fois le site généré, plus besoin de dynamisme.

J’ai donc créé un script Kotlin pour aller lire toutes les métadonnées utiles de mes photos et les ranger dans un joli CSV. J’ai enrichi le CSV à la main avec des tags, titres, descriptions, etc. Et j’ai fait un deuxième script Kotlin pour gérer les templates de pages à partir du CSV. Et c’est parti !

Du coup, y’a quoi dans ce site ?

J’ai pris Hugo, un moteur de site statique que j’avais déjà utilisé un peu avant. Les fichiers correspondant aux images étaient générés via du code Kotlin (merci aux gens qui écrivent des bibliothèques de lecture de données EXIF). Il ne restait plus qu’à faire un design pour présenter ça, et là j’ai aucune honte à dire que j’ai massivement utilisé Bootstrap parce que, bon, je ne suis clairement pas webdesigner, et le CSS me donne des boutons. L’outil d’audit de Chromium m’a aidé à corriger pas mal de coquilles aussi. Selon lui, le site est plutôt accessible et analysable par les moteurs.

Ah, et qui dit voyage, dit destinations, donc j’ai utilisé OpenStreetMap pour afficher diverses cartes.

Tout ça donne un paquet de code sous licence MIT et disponible sur GitHub. N’hésitez pas à vous en servir (voire à me suggérer des améliorations) !

Quant à l’hébergement, c’est facile, c’est un site statique. Donc, un serveur HTTP (nginx), un coup de certbot pour gérer le HTTPS, et ça fonctionne. :)

Des choix et des contraintes

Déjà, j’imagine qu’il y avait d’autres solutions, des générateurs de galeries ou que sais‑je. Mais ça me permettait de faire des tests un peu poussés avec Hugo, notamment de voir à quel point on pouvait générer des fichiers pour un générateur de site.

J’ai remarqué sur le tard que les taxonomies d’Hugo dont je me sers pour faire les classements n’ont visiblement pas de moyen simple de faire des liens vers « les valeurs précédente et suivante dans la catégorie » (ex : quand on visite par lieux, afficher le lieu précédent ou suivant). Et comme j’ai déjà explosé le budget temps que je m’étais alloué pour ce site, ça restera en l’état ; même si la navigation n’est pas optimale.

Quant aux effets sur les tuiles de la page d’accueil, j’ai fait un peu ce que j’ai pu pour conserver des titres lisibles, même si je ne suis pas 100 % convaincu du résultat.

Un coup d’optimisation – et une réflexion sur WebP

Toutes les images du site à charger « à la volée » (donc les miniatures et les images des galeries) sont optimisées avec jpgoptim (et mine de rien, ça peut faire gagner pas mal sans perte de qualité). On ne devrait pas mettre d’image (hors ressources à télécharger) sur un site Internet ou dans une application mobile qui ne soit pas passée par l’un de ces outils. De mémoire, les miniatures et les grandes images des galeries sont en qualité 90 sans EXIF, et les grandes versions à télécharger sont en qualité 95 avec EXIF.

Sur une suggestion de l’outil d’audit de Chrome, j’ai ajouté du WebP pour les miniatures et les images de la galerie – mais pas pour les images à télécharger. Ce qui permet effectivement une réduction des données à télécharger, mais apporte deux inconvénients :

  1. on doit garder une double gestion parce que Safari ne gère toujours pas le WebP ;
  2. la qualité par défaut (75) est franchement limite pour les miniatures, et massacre les grandes versions dès qu’il y a des dégradés (typiquement cette photo est une horreur à compresser, JPEG comme WebP).

J’ai dû monter les qualités, à 85 pour les miniatures (ce qui fait gagner quand même pas mal) et à 95 pour les grandes images (ce qui fait gagner 20 % environ). J’ai l’impression que les images standard, sans dégradé ni détails trop précis, passent plutôt bien, mais dès qu’il y a des à‑plats, des dégradés ou des détails fins, le format perd de son intérêt.

Tu as parlé d’art libre, non ?

Oui, parce que toutes les photos et textes du site sont sous licence CC BY 4.0, parce que… pourquoi pas ?

Tout ça est à voir ici : Un Renard en Corée.

J’avais même pour projet de diffuser les fichiers RAW, mais ça implique que je trouve moyen de téléverser et d’héberger plus de 20 Go de données, sachant que je n’ai pas la fibre à domicile… (le téléversement des 6 Go du site, avec toutes les photos en haute qualité, m’a déjà pris plus de 12 heures).

Et maintenant ?

Pour commencer, il y a sans doute du peaufinage à faire et si je trouve une solution, diffuser les fichiers RAW.

La seconde étape, c’est de réutiliser tout ça pour refaire le site de mon précédent voyage au Japon… Peut‑être même que j’y retravaillerai les photos.


Ce journal, placé sous licence CC BY 4.0, est une adaptation de ce post de forum et des réponses associées.

Commentaires : voir le flux atom ouvrir dans le navigateur

par SpaceFox

LinuxFr.org : les journaux

LinuxFr.org : Journaux

Utiliser Vim avec Android, un tuto avec de belles images

 -  28 janvier - 

Installation de Vim Si vous n’avez pas déjà l’excellent Termux, installez‑le. Depuis Termux, lancez pkg install vim Le plus facile est fait. (...)


Le nouveau Firefox pour Android en pré-finale

 -  17 janvier - 

Plus intuitif, plus protecteur et plus mieux, y'a un nouveau Firefox pour Android. Vous allez pouvoir le tester en nightly. Deux choses sont (...)


HSTR remplace history dans le shell

 -  16 janvier - 

Dans mon terminal history affiche les commandes Bash tapées précédemment. Pratique avec des pipes et combiné avec less et grep. Y'a mieux : avec HSTR (...)


Auto-Hébergement avec HomeBox

 -  Décembre 2019 - 

Sommaire Installation du système Fonctionnalités emails Calendrier et carnet d'adresses Autres fonctionnalités optionnelles Développement À venir (...)


Sortie de citop 0.1.0 : Suivi des pipelines de CI en ligne de commande

 -  Décembre 2019 - 

Chers linuxiens, Je souhaite vous faire part de la sortie de la première version de citop: https://github.com/nbedos/citop Il s'agit d'un (...)