Jules Verne assis à un bureau avec un globe et des livres de Jules Verne répartis dessus.

Jules Verne et ses illustrateurs : une collaboration unique

  1. Le Voyage Imaginaire : l’exploration des mondes
  2. La structure narrative des 7 voyages de Sindbad le Marin
  3. Sindbad : la rhétorique de la vraisemblance
  4. Le Merveilleux, le Fantastique, et le Mythe dans Sindbad le Marin
  5. Jules Verne : Voyages au Cœur de l’Extraordinaire
  6. L’impact de l’illustration dans l’imaginaire vernien
  7. Géodésiques de la Terre et du Ciel
  8. Jules Verne et ses illustrateurs : une collaboration unique
  9. Jules Verne : les légendes sous les images
  10. Voyage au Centre de la Terre et Monde Perdu

Avec leurs noms réunis, on pourrait composer une sorte de comptine :

Riou, de Neuville, Féret, Montaut,
Marie, Philippoteaux, Benett, Meyer
Froelich, Beaurepaire, Lavallée, Schuler
Bayard, sans oublier Hildebrand, Barbant, Pannemaker
Tous trois graveurs de ces Messieurs.

Aucun nom important, dira-t-on. Grandville était mort avant que n’ait paru, en 1865, la première édition, chez Hetzel bien entendu, de Cinq semaines en ballon (illustrations par MM. Riou et de Montaut. Gr. in-8°). Ni Gavarni, ni Gustave Doré. Au premier était réservé quelque élégant carrousel de costumes, au second les Contes drôlatiques de Balzac. On les voit mal, tous les deux, illustrer Jules Verne. Gavarni eut trop de charme, Doré trop de personnalité. Ils auraient fait une œuvre parallèle à celle de Jules Verne, ils se seraient laissé égarer par un texte qui, après tout, ne demandait qu’à être servi fidèlement.

L’Imagination au service de la science

Les artistes, dont l’auteur avait besoin, devaient lui être dévoués, lire ses livres avec la crédulité et la ferveur de la jeunesse. Ce n’étaient pas des qualités si répandues, ni non plus faciles à exiger de dessinateurs trop en vogue, bien que les illustrateurs de Jules Verne ne fussent pas, loin de là, des inconnus, mais enfin, ils ne pensaient pas qu’il leur était nécessaire d’ajouter un peu plus d’imagination, d’invraisemblances à un texte déjà rempli de richesses et de sous-entendus, à une réalité émerveillée qui n’avait rien à voir avec le fantastique, contrairement à ce que l’on pense. Le douanier Rousseau avait certainement la même imagination ingénue quand il peignait la forêt vierge, comme existait préfiguré l’univers de Jules Verne.

Lire la suite

avif logo rgb

Recréer les fichiers AVIF corrompus

Cela fait une paire de fois que les images au format AVIF ne s’affichent pas sur SkyMinds et aujourd’hui, on règle le problème une bonne fois pour toute.

Concrètement, à chaque fois que j’uploade une image dans la bibliothèque de média de WordPress, plusieurs images sont créés: les miniatures bien sûr mais aussi un jeu d’images au format WEBP et au format AVIF. Tout se fait de manière automatique avec ShortPixel lors de l’upload.

Or, dernièrement certaines images ne s’affichent plus. Si on retire la source AVIF du DOM du document, le WEBP s’affiche bien, tout comme l’image originale en PNG ou JPG. C’est donc au niveau de la compression AVIF que cela coince.

Procédure de debug

Configuration NginX

Si vous vous souvenez bien, j’ai dans ma configuration NginX des directives pour donner la précédence aux formats AVIF et WEBP sur toutes mes images. Cela permet de servir en priorité les fichiers images aux formats les plus récents, avec un fallback sur les formats plus anciens (JPG, PNG notamment).

J’ai passé la configuration au peigne fin et il n’y a pas de problème à ce niveau. Les fichiers AVIF sont bien servis, le problème se trouve plus au niveau de l’encodage des fichiers.

Tester les images affectées

Lorsque je visionne un article avec une image affectée par le bug, elle ne saffiche pas mais apparait comme une image cassée. Lorsque l’on ouvre l’image dans un nouvel onglet, on obtient l’erreur suivante: “the image cannot be displayed because it contains errors“.

Je ne connais pas le nom des images affectées ni leur nombre (cela inclut aussi les miniatures) donc le plus simple est de dresser la liste des fichiers AVIF sur le site. Ensuite, je veux inspecter chaque image pour vérifier qu’elles possèdent bien les entêtes et bits nécessaires à leur bon affichage.

Commençons par installer les outils nécessaires pour examiner les fichiers AVIF:

apt install libavif-bin libavif13

On lance un test sur un fichier problématique:

avifdec /home/www/example/wp-content/uploads/2021/05/the-handmaids-tale-june-nick.avif /dev/null Code language: JavaScript (javascript)

et voici le résultat:

Decoding with AV1 codec 'dav1d' (1 worker thread), please wait... 
ERROR: Failed to parse image: BMFF parsing failed 
Diagnostics: * Box[meta] does not have a Box[hdlr] as its first child boxCode language: JavaScript (javascript)

L’erreur (“ERROR: Failed to parse image: BMFF parsing failed”), suggère que le fichier est en effet soit corrompu, soit incompatible donc nous allons le recréer.

Un script bash pour recréer tous les fichiers AVIF corrompus

Il est évident que nous n’allons pas tester tous les fichiers un par un. Maintenant que nous avons pu tester un fichier, nous allons créer une boucle pour tester tous les fichiers qui ont été uploadés sur le site : si le fichier est corrompu, nous allons le recréer, sinon on passe au suivant.

Lire la suite

CSS: superposer du texte lisible sur une image de fond photo

CSS: superposer du texte lisible sur une image de fond

Il est souvent utile de pouvoir placer du texte sur une image de fond, de manière à ce que l’on puisse lire le texte facilement et distinguer l’image. C’est ce que j’utilise sur le blog pour les images d’illustration des articles.

Nous allons donc superposer du texte lisible sur une image de fond en utilisant uniquement du code HTML et CSS, ce qui nous donne ceci:

Voici une planche à voile

Une image de planche à voile se trouve derrière ce texte.

Vous souhaitez accomplir la même chose? Voici comment faire.

Lire la suite

GIMP : tutoriel pour créer un meme photo 3

GIMP : tutoriel pour créer un meme

Qu’est-ce qu’un meme ?

Un mème ou « meme », qui se prononce [mi:m] en anglais, décrit un élément ou un phénomène repris et décliné en masse sur internet.

Origine du mot “meme”

Le terme de « mème » a été proposé pour la première fois par Richard Dawkins dans Le Gène égoïste (1976) par déformation du terme mimesis (« imitation », en grec ancien) par analogie avec le mot gène. Selon Dawkins, dans le domaine mental, les mèmes sont des réplicateurs, comparables à ce titre aux gènes, mais responsables de l’évolution de certains comportements animaux et des cultures.

Formes du meme

Dans sa forme la plus sommaire, un mème internet est une idée simple propagée à travers le web. Cette idée peut prendre la forme d’un hyperlien, d’une vidéo, d’un site internet, d’un hashtag, d’un personnage récurrent ou simplement d’une phrase ou d’un mot. Ce mème peut être propagé par plusieurs personnes par le biais de réseaux sociaux, de blogs, de messageries instantanées, d’actualité, et autres services internet.

L’élément humoristique est un facteur très important pour les mèmes. Une communication décalée par rapport à un contexte en combinaison avec des images, est bien souvent la base des mèmes sur internet. L’imitation entre pairs induit implicitement une compétition créative pour se faire remarquer et générer collectivement le buzz. Commercialement, ils sont utilisés en tant que marketing viral, aperçus comme publicités de masse.

Créer un meme sous GIMP

La création d’un meme tient surtout du texte que l’on va apposer sur notre image. C’est un texte en lettres capitales blanches avec un contour blanc, pour respecter le code du meme.Nous allons donc utiliser la police d’écriture Impact, en blanc, avec un contour noir pour respecter le code du meme.

  1. Ouvrez l’image qui va servir de support à votre futur meme. Je choisis ici “The Most Interesting Man in the World”.
  2. Cliquez sur l’icône Texte et entrez votre punchline, écrite avec la police de caractère Impact, en blanc. Ajustez la taille de la police selon la longueur de votre punchline :
    GIMP : tutoriel pour créer un meme photo
  3. Ensuite, faîtes un clic droit sur le calque texte et sélectionnez Alpha vers sélection qui se trouve en bas de la liste:
    GIMP : tutoriel pour créer un meme photo 1
  4. Vérifiez que la couleur de premier plan sélectionnée est bien sur Noir.
  5. Sélectionnez maintenant le menu Edition > Tracer la sélection. Sur la page d’options, cochez Ligne de tracé, Couleur pleine et Anti-crénelage. Choisissez l’épaisseur du trait en pixel qui convient, 1 pixel ou plus selon la taille de la police :
    GIMP : tutoriel pour créer un meme photo 2
  6. Validez : votre texte blanc devrait maintenant avoir une bordure noire !

Il ne vous reste plus qu’à répéter l’opération pour la seconde ligne de texte (si besoin) et enregistrer votre meme tout neuf.

GIMP : tutoriel pour créer un meme photo 3

Résultat :

Et voilà, vous venez de créer votre propre meme avec GIMP !

hourglass

Serveur dédié : optimiser toutes les images GIF avec GIFsicle

Après avoir vu comment optimiser les fichiers JPG et PNG sur le serveur, voici comment optimiser les fichiers GIF.

hourglass

Comme dans le tutoriel précédent, nous allons optimiser toutes nos images d’un seul coup, de manière à charger nos pages plus rapidement et à consommer moins de bande passante.

Pour optimiser les fichiers GIF, j’ai choisi GIFsicle.

L’installation et la compression de vos répertoires d’images prend à peine quelques minutes.

Installation de GIFsicle

On installe le paquet :

apt-get install gifsicleCode language: JavaScript (javascript)

et on RTFM :

man gifsicle

Optimisation des PNG

Pour optimiser les fichiers GIF, il suffit de lancer :

gifsicle --batch -O3 *.gifCode language: CSS (css)

L’argument --batch permet de gérer plusieurs fichiers et -O3 permet la meilleure optimisation possible, en essayant plusieurs combinaisons de compression pour trouver le ratio le plus intéressant.

Lire la suite

Serveur dédié : passer WordPress en HTTPS (TLS/SSL) photo

Serveur dédié : passer WordPress en HTTPS (TLS/SSL)

Vous avez sauté le pas et avez validé votre nom de domaine avec un certificat TLS/SSL. Très bien ! Voyons comment passer WordPress sur la version sécurisée de votre site.

Il existe des plugins WordPress entièrement dédiés à SSL pour rediriger vers les pages sécurisées mais on peut très bien faire sans, avec un peu d’huile de coude.

Le tutoriel est pour Debian et WordPress tourne sous Apache chez moi. Cela prend moins d’une heure pour configurer l’essentiel mais il est probable que vous ayez des petites corrections (thèmes, plugins) pour que tout soit servi en https.

Le but est de tout (oui, absolument tout!) servir via la connexion sécurisée.

Étape 1 : configurer Apache

On édite notre fichier de configuration :

nano /etc/apache2/sites-available/www.skyminds.net

et voici ce que garde pour VirtualHost *:80 :

ServerName www.skyminds.net
ServerAlias skyminds.net
DocumentRoot /home/skyminds/public_html/
Redirect 301 / https://www.skyminds.net/Code language: JavaScript (javascript)

La directive ServerName est nécessaire. Ensuite, une simple redirection renvoie toutes les requêtes du port 80 vers le port 443, sécurisé. Même pas besoin de mod_rewrite!

Lire la suite

WordPress : héberger les images sur un sous-domaine photo 1

WordPress : héberger les images sur un sous-domaine

Cela fait des années que je parle d’héberger les images du site sur un sous-domaine mais j’ai toujours remis cela à plus tard.

Je pensais que la configuration me prendrait un temps infini mais au final cela ne m’aura pris qu’un peu de réflexion et quelques minutes pour tout finaliser.

Le plus long aura été d’écrire ce tutoriel!

Aujourd’hui, c’est chose faite : les images des articles du site sont donc placées sur un sous-domaine pour des raisons de performances.

subdomains

Voici donc un petit tutoriel qui détaille toutes les étapes. Cela prend environ 20 minutes.

Principe de fonctionnement

Les fichiers du site sont présentement servis par Apache. Le domaine est skyminds.net et nous allons créer un sous-domaine, qui est en fait un répertoire au niveau de l’arborescence du site, qui contiendra toutes les images de nos articles.

Par défaut, WordPress place tous les fichiers uploadés via l’interface d’administration dans /wp-content/uploads.

Nous allons donc créer un sous-domaine (static.skyminds.net) qui pointera vers le répertoire /wp-content/uploads.

L’intérêt est que nous n’avons pas à copier ou à déplacer de fichiers. Cela permet aussi de revenir à une installation plus classique à tout moment, sans intervention majeure.

Une fois ce VirtualHost créé, il ne reste plus qu’à modifier les options de WordPress pour les futurs articles et changer les anciennes URI des images dans les anciens articles. P

our finir, nous redirigerons les anciennes URI vers les nouvelles via .htaccess.

Etape 1 : on crée le sous-domaine sur le serveur Apache

Commençons par créer un nouveau VirtualHost pour notre sous-domaine:

nano /etc/apache2/sites-available/static.skyminds.netCode language: JavaScript (javascript)

et ajoutons-y ceci :

ServerAdmin webmaster@localhost
DocumentRoot /home/skyminds/public_html/wp-content/uploads
ServerName static.skyminds.net
ErrorLog /var/log/apache2/www-error.log

        
          AllowOverride None
          RequestHeader unset Cookie
          Header unset Set-Cookie
          Options FollowSymLinks
          Order allow,deny
          Allow from allCode language: JavaScript (javascript)

Plusieurs choses sont importantes à noter dans ce fichier de configuration Apache:

  • DocumentRoot pointe vers le répertoire /home/skyminds/public_html/wp-content/uploads
  • on retire tous les cookies servis par static.skyminds.net

Pas de cookies, pas de soucis et un site qui gagne en rapidité !

Lire la suite

403-error

Des images qui renvoient une erreur 403

Aujourd’hui, j’édite un ancien article et le prévisualise pour voir les changements : je m’aperçois alors que l’image de l’article ne s’affiche plus.

Ni une ni deux, je sors mon terminal et tente de récupérer l’image avec wget. Erreur 403. Je vérifie la configuration Apache et Varnish, rien à signaler (et surtout rien n’avait été modifié).

Je vérifie alors le fichier via FTP : il se trouve qu’il ne possédait pas les bons droits!

Evidemment, avec un chmod 600, cela ne risque pas de s’afficher… Les autres images, celles qui s’affichaient bien et renvoyaient un code 200, étaient bien chmodées en 644.

Solution : CHMOD

Il faut donc chmoder l’ensemble des fichiers du répertoires, 640 pour les images ce sera parfait :

find /home/public_html/wp-content/uploads -type f -exec chmod 640 {} \;

et pour les répertoires, 750 c’est correct :

find /home/public_html/wp-content/uploads -type d -exec chmod 750 {} \;

Notez la différence de syntaxe : on utilise f pour les fichiers (files) et d pour les répertoires (directory).

hourglass

Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim

Je classe volontairement cet article dans la série Serveur dédié, étant donné que nous allons utiliser la ligne de commande exclusivement. Si vous souhaitez faire la même chose sur votre machine personnelle, il vous suffit d’utiliser Trimage (qui en plus possède une GUI).

hourglass

Si vous possédez un site, blog ou une galerie d’images, il peut être très intéressant d’optimiser toutes vos images d’un seul coup et ce, de manière lossless : chargement plus rapide des pages et moindre consommation de bande passante.

Sous Linux, il existe plusieurs programmes pour le faire. Personnellement, j’ai choisi OptiPNG (pour optimiser les PNG) et JpegOptim (pour optimiser les JPG).

L’installation et la compression de vos répertoires d’images prend à peine quelques minutes.

Installation d’OptiPNG et JpegOptim

On installe nos deux paquets :

apt-get install jpegoptim optipngCode language: JavaScript (javascript)

et on RTFM :

man jpegoptim

et

man optipng

Optimisation des JPG

On navigue dans notre répertoire images et on fait une estimation des gains. Avant de commencer, vérifiez que vous avez la dernière version de jpegoptim et installez manuellement la dernière version des dépôts Sid.

Commençons par les JPG :

jpegoptim -n -t *.jpgCode language: CSS (css)

-n permet de simuler l’optimisation.
-t permet de calculer l’espace gagné

Résultat :

Average compression (2730 files): 0.95% (452k)Code language: CSS (css)

Cela peut sembler peu mais je compresse toutes mes images avant de les mettre sur le web. Visiblement, quelques unes sont passées au travers du filet !

Lire la suite

WordPress : des images qui ont perdu leur chemin photo

WordPress : des images qui ont perdu leur chemin

Problème : chemin erroné pour certaines images

lost-sign

En allant faire un tour sur Google Search Console, je me suis aperçu qu’il y a avait des erreurs sur la page Si je pouvais (vraiment) choisir ma voiture… et effectivement, les images ne s’affichaient pas!

Après vérification, il se trouve que le chemin des images était totalement inexistant : c’était un mélange d’URL publique et de chemin privé, donc aucun moyen que les images d’affichent comme il faut avec le chemin privé. Et bien sûr, on ne peut pas éditer le chemin des fichiers depuis WordPress.

Solution : MySQL

En faisant une petite requête sur la table postmeta, je me suis aperçu que ce n’était pas le seul article touché. J’ai donc purement et simplement supprimé le chemin privé dans la table, via une requête SQL :

Query:

UPDATE wp_postmeta SET meta_value = replace(meta_value, '/home/public_html/images/', '') WHERE meta_key='_wp_attached_file';Code language: JavaScript (javascript)

Résultat : 173 rows affected.

Ah oui quand même, 173 enregistrements affectés, cela fait quand même quelques dizaines d’articles sur lesquels les images ne s’affichaient pas. Je n’ai aucune explication à ce phénomène, d’autant que certains de ces articles ont plusieurs années. Sûrement une mauvaise configuration de ma part à un moment donné, je suppose.

Enfin, tout cela pour dire que garder un oeil sur GWT, cela peut être utile pour débugger aussi.

Une carte visuelle et sémantique de la langue anglaise photo

Langue anglaise : carte visuelle et sémantique

Un groupe de chercheurs du Massachusetts Institute of Technology (MIT) et de la New York University (NYU) ont créé une carte interactive de la langue anglaise en utilisant plus de 7,5 millions d’images trouvées sur internet.

Ces images sont triées selon les relations sémantiques entre les mot et, selon les chercheurs, ce projet explore “la relation entre les similarités visuelles et sémantiques”.

Voici ce que cela donne au final :

Chaque pixel de l’image est relatif à un des 53 464 noms communs et représente environ 140 images, donnant les caractéristiques visuelles de chaque mot : cela peut être une image précise, un résumé, une définition. La liste des noms vient de Wordnet.

C’est assez génial je trouve : essayez la carte.