Nouveau portail: 4- les photos (effet lightbox)

L'effet "lightbox" permet en cliquant sur un lien (une image par exemple) d'ouvrir par dessus la fenêtre en cours une autre image au travers d'une petite animation sympa. J'ai installé dans mes programmes l'outil qui permet de le faire, mais il faut tout de même donner les adresses des photos lorsqu'on rédige son article. Voici comment procéder:

Commencez par créer 2 versions de la photo en question: une petite (pas plus de 300 pixels de large) qui sera insérée dans l'article et une plus grande (600 à 800 pixels) qui apparaîtra lorsque l'internaute cliquera sur la petite. Dans mon exemple, la petite photo s'appelle "fruit_small" et la grande "fruit_large".

Préparez votre billet et insérez la petite version de la photo comme je vous l'ai appris dans un article précédent. La balise "img" apparaît alors dans le texte (cliquer sur la petite copie d'écran ci-dessous pour l'ouvrir en plus grand dans une autre fenêtre).


C'est maintenant qu'il faut être attentif(ve)! Cliquez de nouveau sur l'icône d'insertion d'une image interne. Transférez la photo version grande taille, puis déplacez vous dans cette liste pour la retrouver, mais sans cliquer dessus. Vous voyez en dessous de la photo son nom en bleu souligné. Mettez la souris sur ce lien et faites un clic-droit dessus afin de faire apparaître le menu contextuel. Dans le menu contextuel, cliquez sur "Copier l'adresse du lien", puis refermez la fenêtre de vos images.

Par cette manipulation, vous venez de copier dans votre presse-papier l'adresse de la photo en grande taille, telle qu'elle est enregistrée chez mon hébergeur. Vous êtes revenu(e) dans l'éditeur du message. Sélectionnez l'ensemble de la balise "img", y compris les signes "inférieur" et "supérieur" qui la délimitent. Une fois la sélection effectuée, cliquez sur l'icône de création de lien.

La petite fenêtre de définition du lien s'ouvre et vous positionnez votre curseur à l'intérieur. Effectuez de nouveau un clic droit de la souris dans cette fenêtre et cliquez sur "Coller" dans le menu contextuel, ou simplement faites "Ctrl-v". Vous avez alors automatiquement copié l'adresse qui était dans le presse-papier, sans avoir jamais eu à la connaître réellement.

Faites [OK] une première fois, puis une deuxième fois lorsqu'on vous demande la langue de référence. Votre balise "img" qui définit la petite image insérée dans le texte est maintenant précédée de la balise "a" (ou balise d'ancre) qui renverra vers la grande photo en cas de clic, et suivie de la balise de fermeture "/a".

Si on en reste là , ce qui est toujours possible, le fait de cliquer sur la petite image ouvrira la grande à la place des articles du portail. Ça marche, mais ce n'est pas très sexy. Il faut maintenant franchir une dernière étape. A la fin de la balise "a", juste avant le signe "supérieur", remplacez hreflang="fr" par rel="lightbox" sans oublier les guillemets ni l'espace avant rel.


Et voilà, c'est fini et ça marche!

Nouveau portail: 3- les photos (l'habillage)

Par défaut, les photos sont présentées à gauche du texte que vous écrivez, le haut de la photo étant placé sur la même ligne que le mot où vous avez choisi de l'insérer. Je vous expliquerai plus tard comment changer ce positionnement relatif que l'on appelle l'habillage.

Nouveau portail: 2- les photos (la base)

Dans le principe, il n'y a pas de différence avec ce que vous (les filles surtout!) aviez coutume de pratiquer. Il faut:

1- préparer la photo
2- insérer la photo dans le texte

Voyons cela plus en détail:

1- Préparer la photo

Commencez par améliorer les couleurs, la lumière et le contraste avec des outils comme Irfanview, Picasa ou encore Photoscape, décrits dans l'excellent blog "Traitements de photos". Pensez à valoriser les sujets en procédant à un bon recadrage.

S'IL VOUS PLAIT, pensez ensuite à réduire la taille des photos insérées dans les blogs! Lorsque la photo sert à illustrer un article, ne dépassez pas 300 pixels de large. Vous pouvez aller jusqu'à 400 si cela permet de montrer un détail important. Exceptionnellement, si l'article n'est composé QUE de la photo, je vous autorise à aller jusqu'à 600 pixels de large... Si vous ne vous souvenez plus comment réduire la taille d'une photo, relisez cet article.

2- Insérer la photo dans le texte

Commencez comme dans l'article précédent: cliquez sur "Publier un article" tout en haut et à gauche du portail, puis identifiez-vous dans la page "dotclear" qui s'est ouverte. Cliquez sur "Nouveau billet" et commencez à le rédiger.


Une fois parvenu(e) à l'endroit où vous voulez mettre votre photo, cliquez sur le bouton d'insertion d'une image interne (par opposition à une image piquée sur une autre page du web!).


Une fenêtre s'ouvre pour gérer vos images. Commencez par cliquer sur le répertoire qui est à votre nom. Techniquement il n'y a aucune obligation à utiliser un répertoire plutôt qu'un autre, mais j'ai pensé que ce serait plus simple si tout était rangé soigneusement...

Vous pouvez réutiliser une photo qui existe déjà dans votre répertoire, mais en général vous voudrez utiliser une nouvelle photo.


Descendez sous les photos présentées (quand il y en a déjà...) et cherchez la rubrique "Transférer une image". Cliquez sur [Parcourir], ce qui vous permet de choisir sur votre ordinateur la photo que vous avez préparée à l'étape 1- citée en début de cet article. Cliquez ensuite sur [Envoyer], bien entendu.

Voilà, fermez la fenêtre: la photo préparée sur votre ordinateur est maintenant sur le serveur du portail. Cliquez de nouveau sur l'icône d'insertion d'image. La même fenêtre s'ouvre. Ouvrez de nouveau votre répertoire: votre photo est maintenant présente. Cliquez dessus. Le code d'insertion de la photo (balise "img") apparaît dans le texte. Si vous voulez que l'image soit mise à la ligne, après le paragraphe précédent, et avant le paragraphe suivant, pensez à ajouter des "retours chariot".


En cliquant sur [visualiser], vous observerez comment se place la photo au sein de l'article:


Continuez à rédiger votre texte et une fois votre billet terminé, n'oubliez pas de cliquer sur [enregistrer].

Nouveau portail: 1- le texte

Nous verrons dans un autre chapitre comment insérer des images. Commençons par le basique, c'est-à-dire la rédaction d'un article. Ce n'est pas compliqué si vous acceptez de lire ce mode d'emploi tranquillement.

Pour commencer, cliquez comme auparavant sur le lien Publier un article en haut et à gauche du portail.

Vous arrivez alors sur la page d'identifcation du gestionnaire du blog (j'ai installé DOTCLEAR).

Fournissez l'identifiant et le mot de passe que je vous ai envoyés par courrier électronique. Attention aux éventuelles majuscules, et ne mettez pas d'accent si je n'en ai pas mis.

Si vous voulez ne pas refaire tout ça à chaque fois, cochez la case "Se souvenir de moi", et après avoir cliqué sur [OK] acceptez que Firefox mémorise votre mot de passe.

La page suivante vous permet de faire plusieurs choses dans la gestion de vos billets. Contentons-nous du lien Nouveau billet, pour l'instant: cliquez-dessus.

Reconnaissez que jusque là il n'y a rien de mystérieux!

Voilà: maintenant vous êtes sur la page de création de votre billet. Ne vous occupez pas de tout ce que l'on vous y présente. Ne considérez que les zones 1 (le titre), 2 (le message), 3 (le "retour chariot"), 4 (la mise en forme), et 5 (l'enregistrement du billet).

Je ne reviens pas sur 1 et 2.

En revanche, je signale que ce n'est pas parce que vous ferez "Entrée" sur votre clavier que votre texte ira vraiment à la ligne. Il faut positionner le curseur à l'endroit voulu, et cliquer sur la touche de retour chariot (zone 3).

Dans la zone 5, vous pouvez demander à avoir un aperçu de votre article (touche [visualiser]) ou directement le publier par [enregistrer].

Je reviens sur la mise en forme du texte. Vous avez vu que la zone 4 vous propose de mettre en gras (Bold), en italique (Italic), en souligné (Underline), voire en barré (Strike).

Comme d'habitude, sélectionnez le texte à formater et cliquez sur le taritement à effectuer.

Ne vous étonnez pas! Des mots supplémentaires vont apparaître dans votre texte, entourés par les signes "inférieur" et "supérieur". C'est ce que l'on appelle des balises en langage html. Si vous cliquez sur [visualiser], vous verrez l'effet de ces balises.

Pensez bien à cliquer sur [enregistrer] à la fin!

Dans l'article suivant je vous expliquerai comment insérer des images...