La grafouillette (tutoriel en image)

Dernière édition par Patdam le 17 Nov 2006 à 22:04; édité 3 fois

Salut à tous

J'ai découvert depuis peu un logiciel fort sympathique et utile pour les" forumeurs" : La Grafouillette.
En effet il permet de mettre son message en forme, ou d'insérer des liens avant de le poster sur le forum et tout cela à l'aide de quelques coups de cliques, comme dans un traitement de texte traditionnel.

Je vais essayer de faire une série de tutos en images pour vous aider à le prendre en main.

Pour commencer vous trouverez ce logiciel sur ce site et profitez en pour lire les quelques explications.

Donc première leçon, comment mettre du texte en forme sur un forum.

1) Vous ouvrez la Grafouillette (Cliquer sur l'image pour l'agrandir)

2) vous tapez votre texte :

Blabla blabla bla bla bla

3) Pour le mettre en forme, c'est à dire changer de couleur, de police, de grosseur etc , il faut sélectionner le texte ou la partie du texte que l'on veut modifier comme dans n'importe quel traitement de texte

4) Vous faites Edition Code magique ou vous cliquez sur l'icône de la baguette magique bleue

Cette fenêtre s'ouvre. (Cliquer sur l'image pour l'agrandir)

Il y a plusieurs moyens d'obtenir le même résultat pour le texte, je vous décris la façon dont je procède, à vous d'affiner la votre.
Donc une fois le texte sélectionné, il suffit de cliquer sur l'icône désirée (Gras, Italique, ou sur les petits carrés de couleur, etc...) pour la mise en forme du texte.
Des balises encadreront le texte sélectionné mais seront visibles uniquement dans la grafouillette et disparaîtront sur le forum.

Blabla BlaBla blabla blabla

Blabla bla bla [font=Comic Sans MS]bla bla[/font]

Vous remarquerez que cette fenêtre comporte trois onglets nous avons utilisé celui du BBCode Magique, je vous laisse découvrir la Boîte aux Smilies

, il suffit de cliquer sur un Smilie et il apparaît

sous forme de balise dans la Grafouillette et en image sur le message du forum.

Quand à l'onglet Rapide Ligne,

Il suffit de lire l'explication en 3 étapes, de la suivre et de coller votre texte à l'endroit voulu sur votre message.

C'est une méthode plus rapide si l'on a une idée précise de la façon dont on veut que le texte apparaisse .

Enfin quand vos transformations de texte sont terminées, il ne reste plus qu'a coller tout ça dans votre message sur le forum.

Pour cela cliquez sur la barre nommée Clic Magique en bas de la fenêtre de la grafouillette, elle sert à copier l'intégralité de votre texte d'un simple clic. Elle remplace les quatre manips suivantes :
1 Clic droit
2 Tout sélectionner
3 Re clic droit
4 Copier

c'est long tout ça n'est ce pas ?

Et maintenant rendez vous dans votre message sur le forum et vous n'avez plus qu'à faire coller

Pensez à corriger les fautes avant d'envoyer

Oups j'ai oublié un truc important, il y a possibilité d'enregistrer votre message sur le disque dur de façon à le reprendre plus tard. C'est comme cela que je procède pour créer ce tuto car ça prend du temps

Deuxième leçon, comment incorporer un lien sur une page web dans votre te texte.

1) Ouvrez la Grafouillette

2) Ouvrez dans votre navigateur la page web dont vous désirez mettre le lien dans votre post.

3) Copiez l'adresse de cette page depuis la barre d'adresse de votre navigateur. De préférence, faites un clic droit sur l'adresse et faites copier comme ça vous êtes sur de ne pas en oublier un bout (certaines adresses sont très longues et sortent du cadre).

4) Dans la Grafouillette, tapez votre texte en vous arrêtant au niveau du mot (ou groupe de mots) auquel vous voulez incorporer le lien :
Exemple Regardes le tutoriel à

5) Cliquez sur Edition Hyperliens faciles ou sur l'icone représantant les deux anneaux .

6) Selectionnez l'onglet Hperlien vers page web et finissez votre phrase dans la case de l'étape 1:
Exemple cet endroit

7) Cliquez sur le bouton Etape 3 qui s'activera lorsque le pointeur de votre souris passera dessus.

Retounez à votre texte dans la grafouillette et positionnez votre pointeur à l'endroit ou vous voulez incorporer le lien, ici, après la lettre à de notre exemple n°1 et faites clic droit coller
.

9) Et voilà le tour est joué, il ne vous reste plus qu'à cliquez sur la barre Clic Magique en bas de la fenêtre, de retourner sur votre forum préféré et clic droit coller. Ici je vous conseille de faire une prévisualisation afin de vérifier que le lien fonctionne et ensuite envoyez

Pendant que vous y êtes regardez les autres onglets de la fenêtre Hyperliens faciles, je ne les ai pas encore étudié mais il semble que le principe est le même.

Troisième leçon, comment insérer une image sur le forum en passant par la Grafouillette

1) Ouvrez la grafouillette.

2) Ouvrez le site ImageShack ici

3) Cochez upload : file et sélectionnez votre image sur votre disque dur à l'aide du bouton Parcourir

4) Cochez la case remove size/resolution bar from thumbnail? et cliquez sur le bouton host it !

Une nouvelle page s'ouvre et affiche une vignette de votre image

5) Sélectionnez la ligne Thumbnail for forums (1), qui permet d'afficher une image réduite dans le message et en cliquant dessus, on accède à l'image en taille réelle, ceci pour convenir à toute les résolutions d'écran. Copier la (clic droit de la souris)

6) Retournez dans la Grafouillette et faites coller à l'endroit ou vous désirez placer l'image
Un lien apparaît tel celui ci :

Là deux cas apparaissent :

1 vous copiez le contenu de votre grafouillette et vous le collez sur votre forum. Vous faites une prévisualisation et vous constatez que votre texte et votre image sont comme vous le désirez. Tout est ok vous pouvez envoyer

2 Idem, vous copiez collez, mais lors de la prévisualisation, vous constatez que votre texte est ok mais à la place de l'image, se trouve un lien (qui ouvre une page où votre image est renvoyée).
Cela m'est déjà arrivé, je ne sais pas l'expliquer car c'est aléatoire, mais j'ai trouvé la parade :
Pour que l'image apparaisse directement dans le forum, sans passer par le lien, il faut qu'elle soit encadrée par ces deux balises [IMG] et à la fin [/IMG]. Or vous voyez sur la capture d'écran juste au dessus qu'en plus de ces deux balises, il y en a deux supplémentaires qui concernent le site Imageshack. Il suffit donc de les effacer et le tour est joué.

Pour ma part, j'ai pris l'habitude de les effacer systématiquement, ça m'évite une prévisualisation pour rien

A signaler que cette manip pour insérer une image par l'intermédiaire du site Imageshack, fonctionne aussi depuis le forum, sans passer par la Grafouillette.

Edit du 15 Août 2006
Pour gagner du temps vous pouvez éviter de passer par le site d'ImageShak et ainsi éviter la pub, en utilisant ImageShackert (voir téléchargement et tuto ici)

Quatrième leçon, comment utiliser la ligne jaune

Je compare cette ligne jaune à un bloc de post it. Vous savez, ces petits pense-bête qu'on colle de partout dans la maison ( et même sur l'écran du pc). Eh bien voilà l'utilité de cette ligne jaune, elle permet de prendre des notes pendant que vous surfer à la recherche d'info pour dépanner un forumeur en détresse, et cela en même temps que vous rédigez votre réponse dans la grafouillette.
Voici la façon dont je l'emploie :

1) Ouvrez la grafouillette.

2) Faites Edition Lancer la ligne jaune ou cliquer sur l'icône représentant une barre jaune dans la barre d'outils
Quelle que soit la dimension de la fenêtre de la grafouillette, vous verrez une ligne jaune dans le bas de votre écran.
Observez en bas à gauche, dans la fenêtre de la grafouillette, le petit carré rouge.

3) Cliquez dans la ligne jaune (en bas de l'écran). Un curseur apparaît, tapez du texte est observez à nouveau le petit carré rouge. Il clignote et vous indique le nombre de lignes que vous avez saisi.
Maintenant tapez sur la touche Entrée du clavier pour revenir à la ligne comme dans n'importe quel traitement de texte. Vous constatez que dans la ligne jaune, votre texte à disparu, mais il n'est pas effacé pour autant : Tapez un nouveau texte, et regardez de nouveau le carré qui clignote, il vous indique maintenant 2, c'est le nombre de ligne que contient votre ligne jaune. Tapez encore quelques lignes et ensuite cliquez sur le carré jaune qui clignote. Un nouvelle fenêtre s'ouvre permettant de visualiser toutes vos notes. Cliquez sur la croix en haut à droite pour retrouver la ligne en bas de l'écran.

4) Utilisez le menu contextuel : positionnez votre curseur sur la ligne jaune et faites un clic droit. Là je vous laisse lire le menu, et essayer les différentes propositions.

5) Autre possibilité :
Vous êtes sur un site à la recherche d'info, vous trouver un passage intéressant, vous pouvez le copier et le coller dans la ligne jaune exactement comme dans un traitement de texte. Vous continuez votre lecture, vous copiez d'autres passages, vous notez quelques remarques perso et tout cela en surfant sans changer continuellement de fenêtres puisque tout est sous vos yeux à l'écran. Ensuite vous ouvrez la fenêtre de la ligne jaune et vous mettez toutes vos notes en bon ordre dans le tableau de la grafouillette en utilisant le menu contextuel (clic droit de la souris). Si vous êtes pressés et n'avez pas le temps de finir, vous pouvez sauvegarder le contenu de la ligne jaune lorsque vous fermez la grafouillette et tout reprendre plus tard. Les notes sauvegardées réapparaîtront à l'ouverture de celle ci, en bas du tableau de la Grafouillette après le texte que vous avez sauvegardé en quittant. Il suffit de les sélectionner, de faire couper
, et ensuite coller dans la ligne jaune pour les retrouver et reprendre votre travail là ou vous l'avez laissé.

Ce sont les principales fonctions de la ligne jaune que j'utilise, mais je suis sûr que ce ne sont pas les seuls. Alors faites comme moi testez et écrivez vos découvertes.

Cinquième leçon, comment récupérer une image Gif, sur un site et l'afficher sur le forum

Sur certains sites spécialisés dans les avatars, smileys et autres images Gif comme ce site sympathique en autre, il suffit de cliquer sur l'image et de copier le code à coller qui s'affiche en bas de la page de ce site et de le coller directement dans votre post.

Sur d'autre, il y a une petite manip à faire :

1) Faites un clic droit sur l'image Gif que vous voulez récupérer :

A) Pour les utilisateurs de Firefox, faites copier l'adresse de l'image

B) Pour les utilisateurs de Internet Exploreur, faites Propriété, puis dans la fenêtre qui s'ouvre, faites un clic droit sur l'adresse URL et faites Sélectionner tout et copier

2) Dans la Grafouillette, faites coller

Une adresse telle celle ci apparaît : http://yves.marsal.free.fr/atoutgifs/transport/yhelic05.gif
Pour l'instant, si vous cliquez dessus, une page s'ouvre dans votre navigateur et vous pouvez voir votre image, mais celle ci ne s'affiche pas directement sur le forum au milieu de votre texte. C'est uniquement un lien vers l'image.
Pour que l'image s'affiche directement dans le forum, il faut lui ajouter des balises (C'est le langage html mais je n'en sais pas plus ).

3) Ouvrez la fenêtre code magique ( icône baguette magique bleue).
Sélectionnez l'adresse si dessus et cliquez sur le bouton Insérez une IMAGE Web
Vous remarquerez que votre adresse est maintenant entourer de deux balises [img] avant l'adresse et sans espace et [/img] après l'adresse et toujours sans espace. comme ceci :

[img] http://yves.marsal.free.fr/atoutgifs/transport/yhelic05.gif [/img]

ATTENTION Dans l'exemple ci dessus, j'ai volontairement inséré un espace avant et après l'adresse sinon vous ne verriez pas le lien dans ce tuto mais directement l'image comme ceci

(lien sans les espaces)

4) Copiez le contenu de votre Grafouillette, collez le dans votre post sur le forum et le tour est joué

A savoir Si vous n'êtes pas passé par la Grafouillette, vous pouvez quand même afficher votre image Gif en tapant vous même au clavier les balises encadrant l'adresse de votre image. De même sur notre forum, dans votre post, vous cliquez sur le bouton img, vous collez votre adresse et vous cliquez une deuxième fois sur le bouton img (qui apparaît maintenant avec un *) pour fermer la balise, et le résultat est le même.

@+

Actualités

Forum gratuit

Forum de support