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.
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.
Ouvrez l’image qui va servir de support à votre futur meme. Je choisis ici “The Most Interesting Man in the World”.
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 :
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:
Vérifiez que la couleur de premier plan sélectionnée est bien sur Noir.
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 :
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.
Résultat :
Et voilà, vous venez de créer votre propre meme avec GIMP !
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 gifsicle
et on RTFM :
man gifsicle
Optimisation des PNG
Pour optimiser les fichiers GIF, il suffit de lancer :
gifsicle --batch -O3 *.gif
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.
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.
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!
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.
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:
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).
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).
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.
-n permet de simuler l’optimisation. -t permet de calculer l’espace gagné
Résultat :
Average compression (2730 files): 0.95% (452k)
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 !
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';
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.
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.
Il y a quelques semaines, je vous ai parlé du plugin GIMP “Enregistrer pour le Web” qui permet d’obtenir le meilleur ratio qualité/poids pour vos images.
Et bien sachez qu’il existe une petite application qui permet d’automatiser la compression d’images JPEG et PNG sans perte de qualité et en un seul clic : Trimage Image Compressor, qui utilise optipng, advpng et jpegoptim, suivant le type du fichier.
Installation
L’installation est très simple, il suffit d’ajouter le dépôt PPA de l’application et de lancer l’installation :
Il m’est arrivé plusieurs fois de ne pas pouvoir afficher une image en arrière-plan (background image) en CSS et cela tout simplement parce que le code CSS doit être écrit dans un certain ordre, notamment lorsque l’on utilise la syntaxe courte.
Solution : du code CSS ordonné
Alors voilà : imaginons que nous voulons créer une DIV ayant pour identifiant “banner”. Nous voulons que cette DIV affiche l’image background.png.
Il faut commencer par mettre l’URL de l’image entre guillements puis la position horizontale, ensuite la position verticale et enfin la répétition de l’image ou non.
Exemple en utilisant la propriété background (short-hand syntax) :
#banner {
background:url("background.png") center top no-repeat;
}
