Actu gardenbreizh

Aujourd’hui, l’éditeur de messages du forum (c’est-à-dire la fenêtre dotée d’une barre d’outils dans laquelle vous composez vos messages) vient de subir un sérieux lifting. La première raison concerne la sécurisation du serveur qui héberge gardenbreizh. La quasi-totalité des services offerts par gardenbreizh est développée “maison", le code de ces applications étant généralement modifié progressivement, au fil des erreurs détectées ou des nouveaux besoins. L’éditeur de messages, lui, fait partie des quelques “bouts de codes” développés par des éditeurs tiers, et qui sont simplement paramétrés, testés et intégrés pour les besoins de gardenbreizh. Cela faisait longtemps (depuis 2006) que cet éditeur de messages n’avait pas fait l’objet d’une grosse mise à jour. Le risque, avec un code vieillissant et non mis à jour, est d’offrir aux méchants pirates et autres hackeurs un certains nombre de failles faciles par lesquelles passer pour compromettre le site tout entier (et ce genre de chose arrive extrêmement souvent. On n’a jamais eu encore de grosse intrusion, juste une petite incartade d’un “script kiddie” (petit plaisantin pirate en herbe, ayant une préférence pour les scripts d’attaques tout faits et ne possédant pas forcément de grosses connaissances) courant 2006 via un script de statistiques. Ladite incartade n’étant pas allée plus loin qu’une tentative (avortée) de récupération de quelques mots de passe. Bon, je m’égare, mais l’idée est surtout qu’il était temps de mettre à jour le code de ce fameux éditeur de messages ! C’est donc ce soir chose faite. Mais comme c’était l’occasion de repenser un peu l’utilisation de cet outil, cette intervention aura également été l’occasion de rajouter quelques fonctionnalités, qui vont être évoquées dans la suite de ce billet.

Figure 1 - Aspect de la nouvelle zone de saisie de l’éditeur de messages. On retrouve les principales icônes qui étaient déjà disponibles dans la version précédente.

Suite:

Pour résumer, cet éditeur est développé dans un langage (le Javascript) qui est envoyé depuis gardenbreizh à votre navigateur, et qui s’exécute localement sur ce dernier. La façon dont l’application s’exécute dépend donc intimement du navigateur Web que vous utilisez ! En conséquence de quoi, les fonctionnalités de l’outil peuvent varier selon que vous utilisez Internet Explorer de Microsoft, Firefox de la Fondation Mozilla, Safari d’Apple, Chrome de Google, Opera de Opera Software, etc. En pratique, il existe quelques petites différences de comportement, nous y reviendrons plus tard. Mais cet éditeur a été testé assez longuement sur 3 navigateurs différents (Internet Explorer 8, Firefox 3.6, Chrome 4) pour permettre d’offrir l’interface la plus unifiée possible.

Passons à un bref descriptif des outils disponibles, avec pour la figure suivante, de gauche à droite :

Figure 2 - La première partie des icônes disponibles

1. B - (bold) : pour passer le texte sélectionné en gras.
2. I - (Italic) : pour passer le texte sélectionné en italique.
3. U - (Underline) : pour souligner le texte sélectionné.
4. X₂ - (nouveauté) : pour facilement passer le texte sélectionné en indice. Vous aviez toujours rêvé d’écrire dans les forums H₂O ou NH₄ ? Voilà.
5. X² - (nouveauté) : pour toujours aussi facilement passer le texte en exposant. A vous les m² ou les km³.
6. (Nouveauté) : Fonction permettant de basculer le copier/coller en mode normal (par défaut) ou en mode texte. Par défaut, le mode normal (qui était en vigueur également dans l’ancienne version de l’éditeur) permet de coller du HTML directement dans la fenêtre de composition du message. Pratique, mais on n’a souvent pas besoin du style associé à un texte. C’est d’ailleurs parfois gênant. Pour ne récupérer que le texte, il suffit de cliquer une fois sur cette icône, qui va rester activée jusqu’à ce que vous cliquiez dessus à nouveau. Pendant ce temps, tout ce que vous collerez dans la fenêtre de composition ne sera que du texte.
7. (Nouveauté) : Fonction de copier/coller depuis une application Microsoft Word. Cette icône se comporte exactement comme son nom le suggère. Sélectionnez et copiez un texte sous Word, cliquez sur l’icône. Il suffit de coller le texte dans la fenêtre qui s’affiche alors, et de valider. Le texte est alors collé en HTML, mais en récupérant au plus près les styles de Word, et en élaguant les styles incompatibles ou inutiles.
8. Alignement à gauche : Comme précédemment, permet d’aligner à gauche un paragraphe (qu’il s’agisse de texte ou d’une image).
9. Alignement centré : Comme précédemment, mais l’alignement est cette fois-ci au centre. Fonctionne comme dans la version précédente.
10. Bouton d’indentation à droite d’un paragraphe. En gros, pour décaler à droite un paragraphe.
11. Bouton d’indentation à gauche d’un paragraphe. La même chose, mais dans l’autre sens.

La partie suivante de la barre des icônes, de gauche à droite, présente les icônes suivantes, qui existaient déjà toutes dans la version précédente de l’éditeur :

Figure 3 - La deuxième partie des icônes disponibles

1. Le bouton de création de liens. Copiez éventuellement l’adresse Web (=l’URL) que vous souhaitez insérez, sélectionnez ensuite le texte qui servira de texte cliquable qui renverra sur l’URL en question. Ensuite, cliquez sur ce bouton. Une petite fenêtre apparaîtra, dans laquelle vous pourrez coller l’URL que vous avez copié (vous pouvez évidemment saisir l’adresse en question au clavier !).
2. Le bouton pour supprimer un lien. Cliquez sur un texte qui pointe sur un site Web (=un texte cliquable). Ensuite, cliquez sur ce bouton. Vous verrez que le lien sera supprimé, et le texte ne sera donc plus cliquable.
3. Insertion d’une image du Web. Copiez éventuellement l’adresse d’une image vue sur le Web (=l’URL). Attention, il s’agit de l’adresse exacte de l’image, et non pas de la page HTML qui l’héberge. Ensuite, placez le curseur dans votre éditeur des messages là où vous souhaitez insérer l’image, puis cliquez sur ce bouton. Une fenêtre apparaîtra, dans laquelle vous pourrez coller l’adresse de l’image (là encore, il est évidemment possible de saisir l’adresse en question au clavier).
4. Insertion d’une image de votre galerie photo. Ce bouton suppose que vous avez préalablement téléchargé une ou plusieurs de vos photos sur votre galerie personnelle, sur gardenbreizh. Pour insérer une de vos photos, il suffit de placer le curseur dans votre éditeur des messages là ou vous souhaitez insérer l’image, puis de cliquer sur ce bouton. Une fenêtre apparaîtra, où vous pourrez visualiser des vignettes des photos de votre galerie, et sélectionner la photo que vous souhaitez afficher dans votre message.
5. Bouton de citation d’un message précédent. Ce bouton n’est utile que si vous composez une réponse à un message dans un fil de discussion existant. Dans ce cas, vous pouvez utiliser ce bouton pour sélectionner le texte d’un intervenant précédent du fil de discussion, sous la forme d’une citation, que vous pourrez insérer dans votre message.
6. Bouton d’insertion d’une émoticône. Placez le curseur où vous souhaitez dans votre éditeur de messages puis cliquez sur ce bouton. Vous pourrez sélectionner et insérer l’émoticône de votre choix.
7. Bouton de mise en couleur d’un texte sélectionné. Sélectionnez un texte, puis cliquez sur ce bouton. Vous pourrez colorer le texte à votre convenance.

Enfin, dernière partie :

En vous souhaitant de prendre plaisir à l’utilisation de cet éditeur. Je reviendrai dans des billets à venir sur des astuces d’utilisation, notamment en ce qui concerne la disposition des images.