Elucubrations d'un canard

Envie d'acquérir la citoyenneté Canard en écrivant un article sur le blog ? Si vous êtes prêt à vous lancer dans l'aventure, ce petit guide technique vous donnera quelques astuces d'édition.

Tout d'abord, descendez tout en bas de la page et cliquez sur Zone Admin. Entrez votre login et mot de passe. Puis, une fois entré chez les dieux de la mare, rendez-vous dans le menu de gauche et cliquez sur Nouvel article.

1. Catégorie et mots-clés

Commencez par aller dans la partie de droite et attribuez à votre article un Emplacement en cochant l'une des cases existantes. Ces cases correspondent aux Catégories (visibles sur la page publiée en haut à droite). Si aucune catégorie ne convient, vous pouvez utiliser le champ Nouvelle catégorie et ensuite cocher la case une fois qu'elle est créée. En tout cas, essayez de ne pas laisser l'article non classé, car plus tard vous oublierez probablement ;)

Renseignez également, si vous le pouvez, un ou plusieurs Mot clés.

2. Le chapô

Prêtez bien attention au Titre de la page et à la partie Chapô. En effet, ce sont les éléments visibles depuis la page d'accueil et qui serviront donc d'accroche pour de potentiels lecteurs. Pas forcément besoin d'en faire des tonnes : personnellement, j'apprécie une vignette accompagnée d'un court texte qui expose clairement le sujet. L'essentiel c'est de viser juste ^^

Lorsqu'on clique sur le lien En savoir plus…, on arrive sur un article dont en réalité, on en a déjà lu une partie. J'ai mis au point deux outils pour faciliter la reprise de lecture à ce moment-là.

Si votre chapô est court - 1 paragraphe tout au plus - vous pouvez créer un petit flash facilitant le repérage visuel.

▶ Flash de repérage :
Sélectionnez le dernier groupe de mots de la partie Chapô (ce que le lecteur vient de lire).
Cliquez sur le bouton Styles > Sélectionnez Marqueur.
Le fond vous apparaît en jaune fluo dans l'éditeur, mais il y aura une petite animation sur la vraie page.

Toutefois si votre chapô est assez long, le coup du marqueur ne marchera pas. Le mot concerné sera peut-être trop bas sur la page, et donc non visible. Relire tout le début serait fastidieux, on va donc se propulser dans l'article directement au bon endroit, à la fin du chapô.

▶ Enchaîner directement sur la suite de l'article :
Mettez-vous à la fin du Chapô dans l'éditeur > Cliquez sur le bouton Ancre représentant un drapeau (n°11) > Entrez comme nom : scroll
Lorsque la page s'ouvrira, il y aura un défilement depuis le haut de page, pour faire bien comprendre que l'on avance dans l'article.

En revanche, si votre chapô est court - 1 ou 2 phrases - svp ne faites pas ça, le résultat est plutôt agaçant.

3. La typographie :

▶ Le retour chariot :
Pour passer à la ligne sans faire de saut de ligne.
Appuyez sur les touches Maj + Entrée
Un <br /> apparaît dans le code source.

▶ L'espace insécable :
Appuyez sur les touches Ctrl + Espace
Un   apparaît dans le code source.
Rappelons qu'en typographie française, l'espace insécable est à insérer devant les signes suivants : deux points (:), point d'exclamation (!), point d'interrogation (?). Cela ne sera pas nécessaire pour les guillemets, j'y viens.

▶ Les guillemets :
J'ai fait une petite personnalisation pour que vous puissiez mettre des guillemets français au lieu des bêtes guillemets droits du clavier. L'espace insécable est automatiquement insérée.
Sélectionnez votre texte > Bouton Styles > Sélectionnez Guillemets
Pour enlever les guillemets, c'est le même chemin, et on désélectionne le style.

De manière générale, le bouton Styles vous offre de nombreuses options, par exemple le style Titre5 qui est utilisé dans cet article pour les titres numérotés, ou l'espacement Alinéa qui est similaire mais sans titre.

4. Images originales et miniatures :

Toute image déposée dans la section Médias du menu de gauche génère automatiquement une miniature d'une hauteur de 100 pixels.

La miniature porte le même nom que le fichier original, suivi du doux suffixe .tb (comme thumb).

J'ai choisi de ne pas redimensionner par défaut les images originales. Alors si vous déposez un truc monstrueux directement issu d'un appareil photo (*peur*), n'utilisez pas le glisser-déposer dans Médias. Faites appel au bouton Ajouter fichiers en haut et utilisez la réduction de taille proposée par le gestionnaire de médias (2000x1000 dans le menu de gauche).

5. Faire une vignette :

▶ Solution rapide et moche, une image d'accroche, juste pour la page d'accueil :
Vous pouvez utiliser le champ Image d'accroche sous l'éditeur, avec son petit bouton + pour choisir une miniature. L'image apparaîtra bien sur la page d'accueil, mais pas dans l'article lui-même. On ne pourra pas non plus mettre de lien dessus. Cette méthode est vraiment très rudimentaire.

Je propose donc une autre solution, créer réellement une jolie vignette alignée sur la gauche.

▶ Charger une miniature :
Cliquez dans l'éditeur sur le bouton Image représentant un paysage (n°12) > Parcourir le serveur > Choisissez une miniature (un fichier dont le nom finit en tb)

▶ Définir comme vignette :
Sélectionnez l'image > Bouton Styles > Sélectionnez Vignette gauche
Autre solution :
Clic-droit sur la miniature > Propriétés > Avancé > Classes CSS : left
(ou directement dans l'onglet Propriétés, lors de la création de la miniature)

▶ Créer un lien vers l'original :
Clic-droit sur la miniature > Propriétés > Lien > Parcourir le serveur > Choisissez l'image originale
(ou directement dans l'onglet Lien, lors de la création de la miniature)
Lors d'un clic sur la vignette, une majestueuse animation de zoom fera apparaître l'image de grande taille.

▶ Pour que l'image de grande taille ait un titre lors du zoom :
Clic-droit sur la miniature > Modifier le lien > Avancé > Infobulle (title) : Le titre que vous voulez
Attention, il faut renseigner le title du lien, et non celui de l'image elle-même.

6. Mini-galerie et options de zoom :

Toutes les miniatures ayant une hauteur de 100px, elles pourront donc toutes s'aligner proprement sur un axe horizontal. Comme les proportions des images originales sont respectées (pas de déformation ou crop), la largeur de chaque miniature peut varier.

▶ Pour que les miniatures ne soient pas collées entre elles et aient un petit cadre comme ci-dessus :
Sélectionnez l'image > Bouton Styles > Sélectionnez Collection
Autre solution :
Clic-droit sur la miniature > Propriétés > Avancé > Classes CSS : collection
(ou directement dans Propriétés, lors de la création de la miniature)

Quand on zoome, les images qui sont dans le même article font partie de la même galerie. Il est possible de passer de l'une à l'autre avec des flèches de défilement.

▶ Si nécessaire, on peut faire un réglage plus fin des galeries. Avec le module Zoombox modifié par mes soins, toutes les images avec lien se voient attribuer par défaut la galerie zgallery0. Il est possible de choisir une autre galerie avec zgallery+autre valeur, ou bien d'exclure l'image de toute galerie avec nogallery (comme ici les 2 premières images de l'article).
On renseigne la valeur choisie en tant que classe du lien de l'image.
Clic-droit sur l'image > Editer le lien > Avancé > Classe CSS : zgallery1 / nogallery

7. Insérer une vidéo Youtube :

Quand on utilise le bouton d'incorporation d'un média, l'éditeur pond un code atroce, valable pour tous les sites de vidéos, mais particulièrement lourd et lent. En plus, la fenêtre de vidéo n'est pas affichée dans ses proportions natives, elle est déformée.

J'ai donc élaboré un petit code maison pour réaliser facilement l'insertion de vidéos Youtube.

▶ Vidéo Youtube, à intégrer au code source :
Bouton Source en haut à droite > Déplacez-vous au bon endroit > Ajoutez cette ligne :

La partie en rouge est à changer en fonction de l'URL sur Youtube.

NB : soyez conscient qu'en insérant une vidéo Youtube directement dans un article, vous permettrez à Google de savoir, en temps réel, qui consulte la page - et ce, même s'il n'y a aucun visionnage. Cela explique pourquoi je n'ai pas inséré ici de vidéo pour l'exemple. Personnellement, je me contenterai, si possible, d'un simple lien vers la page Youtube concernée.

EDIT : j'ai trouvé une solution pour éviter totalement l'espionnage par Google en insérant une vidéo Youtube, il suffit d'utiliser Invidious en mode proxy. C''est une interface alternative en open-source, il existe plusieurs instances comme invidious.fdn.fr, invidious.snopyta.org ou encore iteroni.com.

Ca donne :