Guide Forum FFF (v4)

Auteur : Titi-fr

Auteur : Titi
Contributeurs : Leya, Giss, Lemon, Perf

Déjà 10 mois que la V4 nous a été livrée par nos Développeurs FFF, avec cette nouvelle interface pour écrire dans le forum (pour les articles et les news aussi.)

Pour les curieux, il s'agit de TinyMCE, qui est un éditeur de texte HTML en "WYSIWYG" (What You See Is What You Get).
Un peu plus moderne qu'avant, plus complet mais aussi plus "complexe".

J'ai pensé à cet article, début décembre, après une question d'Alex "Comment faire un lien sur le forum ?", et une explication donnée par Leya/Neo/Nico, etc.

Nous allons voir les fonctions essentielles de cette barre de mise en forme, pour vous aider dans l'écriture de vos pavés messages.

Mais d'abord, un aperçu de cette barre, pour ceux qui n'ont pas encore remarqué qu'elle existe (honte à eux ! :-) )



Cliquez sur le menu ci-dessous pour un accès direct :

1. Simple mise en forme (gras, italique, etc.)
2. Les Styles prédéfinis
3. Copier/Coller
4. Les liens
5. Les images
6. Autres : annuler une action, effacer un format, le bouton HTML, etc..


Note : cet article est un peu long. Normal ! c'est un peu comme un guide d'utilisation. Vous pouvez le lire d'un bout à l'autre, ou directement vous référencer à la partie qui vous intéresse.

 

 

 

 

1. La mise en forme

 

 

Facile, normalement tout le monde connait :
B pour Gras (Bold en anglais).
I pour Italique.  
U pour Souligné (Underligned).
Le ABC barré pour... barrer le texte. Smile

Vous sélectionnez le texte voulu (un mot, une phrase, un paragraphe), vous cliquez sur le bouton, et c'est mis en forme.

A coté, ce sont les boutons pour   

aligner à gauche,

pour centrer,

pour aligner à droite

et pour justifier le texte sélectionné.

(Ces mises en forme marchent aussi avec des raccourcis comme CTRL + B pour le gras. Et les raccourcis habituels sur Mac)

(Retour en haut) retour en haut

 

 

 

 

2. Les styles prédéfinis

 



Lemon et les autres développeurs FFF ont codé pour qu'on n'ait besoin que de la boite Styles, pour nous simplifier la vie.

un/une FFF : "Mais à quoi ça sert ?"
Titi : "Cela permet de mettre en forme ton texte, et d'être sûr que ce sera affiché correctement dans toutes les parties du site FFF, avec le skin Starcraft, comme le skin Dofus. Dans le forum, les articles, ou les news."

("skin" = "peau" en anglais = thème. Cela correspond à l'habillage graphique des pages webs. Sur notre site FFF, il y a un skin par section.)

En cliquant sur la flèche de Styles, il y a plusieurs choix dans le menu déroulant :

- pour un gros titre (Titre 1), c'est en général le titre d'une news, ou pour mettre une grosse info sur le forum.

- un titre moyen (Titre2), c'est pour faire un sous-titre. (ou aussi sur le forum, si on ne veut pas faire trop gros avec le style Titre 1)

- un texte mis en valeur avec "Highlight", (= "surligner". C'est une couleur choisie pour bien ressortir sur chaque skin de section.)

- et les styles de couleurs : le Rouge, Vert, Bleu, etc.. et surtout JAUNE canari.

- les "quote 1" et "quote 2" ne sont pas cencés être utilisé manuellement, donc on les oublie.
(Ils sont utilisés de façon automatique quand on clique "citer" sur un message du forum.)
- Même chose pour les "only" qui ne sont pas à utiliser.

Rappel important : Ces styles sont à utiliser en priorité, car ils sont fait pour bien ressortir sur tous les skins (qu'on soit sur la partie SC2, Ikariam, Dofus, etc.). Pareil pour les couleurs, Lemon y a pensé, et le jaune serait remplacé par une autre couleur, si on avait un skin avec fond jaune. (Cela a été vérifié sur ce topic du forum)

Vous pouvez utiliser le reste pour les polices de caractères et autres tailles, mais ce n'est pas recommandé, car vous n'êtes pas sûr que ça sortira bien sur tous les skins du site FFF (actuels et futurs).
Même remarque pour les couleurs personnalisées. C'est à éviter !

(Retour en haut) retour en haut

 

 

 

3. Copier/Coller

 

 

Couper/Copier/Coller : tout le monde connait. (ça marche aussi avec les raccourcis habituels CTRL + X / C / V. Et les raccourcis sur Mac.)

Et il y a 2 autres boutons :
- avec le T : "Coller en texte seul" (le Plain Text). Cela fera perdre toute mise en forme. C'est pratique, pour coller un texte d'un autre forum, avec plein de couleurs et de styles que vous ne voulez pas garder.
De cette façon, vous ne copier que le texte, et vous pouvez alors appliquer les styles prédéfinis. (voir partie 2)
- avec le W : "Coller à partir de Word". C'est à éviter, comme expliqué dans le paragraphe précédent. Il vaut mieux utiliser les styles prédéfinis.

Note : l'utilisation du clic droit, pour copier/coller, est désactivée sur Firefox, pour des raisons de protection du contenu, contre des scripts malveillants.

(Retour en haut) retour en haut

 

 

 

 

4. Les liens

 

 

On arrive dans les nouveautés, des trucs plus "puissants" : les liens vers des pages web, vers des topics du forum, etc.

Note : les liens ont un style prédéfini (comme pour le titre 1, la couleur rouge, etc.. qu'on a vu dans la partie 2.). C'est fait exprès, pour que les liens ressortent correctement dans les différentes parties de notre site FFF, avec chaque skin.

Ces boutons sont grisés par défaut. Il faut sélectionner du texte ou une image pour pouvoir créer un lien.

On commence par le bouton au milieu : le maillon cassé. C'est pour effacer/annuler un lien.
Vous cliquez sur le lien non désiré, puis sur ce bouton "Unlink". Et le lien est supprimé.

Le premier bouton, en forme de maillons de chaine : "Insert/Edit link" :
"Non non, on ne va rien "insérer" dans notre Link.. hé hé.." :-D (Nd Giss : "et pourquoi pas ?!")
On va juste créer un lien, ou éditer un lien existant.

S'ouvre alors un Popup, pour définir le lien:

 

 

Voyons le premier onglet "General" (le reste est moins utilisé)

Link URL : c'est ici que vous copierez le http://www.xxx.fr (l'adresse de la page web, ou du fichier, etc.)

Anchors : voir ci-dessous.

Target : ça permet de choisir comment s'ouvrira le lien. Par défaut c'est "in this windows" = ça remplacera donc la page actuelle.
Il est utile de choisir "Open in new window", pour   les cas où vous donnez un lien externe, et pour éviter de perdre le fil de la discussion sur la page du visiteur. La fonction "Open in parent windows/frame" convient très bien aussi, elle a l'avantage d'ouvrir un autre onglet et de ne pas relancer une fenêtre de navigation.

Par exemple, dans ce guide, quand je fais une référence au forum, le lien que vous cliquez va ouvrir une nouvelle fenêtre. En fermant cette fenêtre (ou cet onglet), vous serez toujours au même points du guide d'utilisation.
Sur le forum, cela permet de donner le lien d'un autre site, et de garder le lecteur sur notre forum (une fois qu'elle/il a lu l'autre site web.)

Title : c'est pour donner un titre à votre lien.
Par exemple, en survolant ce lien, le titre apparaitra.
Je l'utilise peu, car le lecteur clique directement sur le lien. Mais cela peut donner une info, sur une image, si on veut.

Class : c'est pour changer du style par défaut ("--not set--"), vers un autre style prédéfini.
Par exemple, au lieu de faire un  lien "normal",, je veux qu'il soit en rouge ou qu'il soit en forme de sous-titre 2.
C'est peu utilisé. En général, vous laisserez par défaut.

 

Pour valider le lien, il faut cliquer sur "Insert".Pour annuler, cliquez sur "Cancel" ou fermer la fenêtre pop-up.

J'ai gardé Anchors pour la fin. C'est le bouton de droite, en forme d'ancre.
Ce sont des ancres, auxquelles on se réfère. (Comme un navire est raccroché à son ancre, un lien peut pointer vers une "ancre" sur une page web.). Ce sont des liens internes à une page.

Pour utiliser les ancres,
- il faut d'abord définir l'ancre dans votre page. Pour cela, placez votre curseur à l'endroit voulu puis cliquez sur le bouton "Anchors".
- Un pop-up s'ouvre pour demander le nom de cette ancre. Mettez quelque chose de simple à comprendre. (J'ai utilisé 1, 2, 3. Mais on pourrait mettre "partie 4" ou "Les liens".)
Ce nom sera gardé en mémoire, et pourra être ajouté à votre lien, par la suite.
Validez par "Insert".
- Puis, vous pouvez créer votre lien, en sélectionnant le texte voulu (un mot, une phrase, etc.) et en cliquant sur le bouton "Insert Link".
- Le pop-up s'ouvre, comme on l'a vu précédemment et vous pouvez alors choisir vers quelle ancre le lien va pointer. Validez avec le bouton "Insert".
- Prévisualisez votre message et testez votre lien "interne".

Exemples :
Dans ce guide que vous lisez, j'ai fait un menu tout au début. En cliquand sur les liens 1 / 2 / etc., ça n'ouvre pas une nouvelle page, mais ça défile directement à la section de notre article.
Si vous regardez le premier lien du menu, il pointe vers "http://ikariam.fight-for-fun.com/article.html#1" (= vers l'ancre #1 de la page web "article.htm")

Cela permet aussi de pointer directement sur un endroit précis d'une page existante : par exemple, sur le forum officiel d'ikariam, on peut pointer directement au message #26 de ce topic.
Si on met juste la page, on sera dirigé vers le haut de la page en question. (Ces ancres sont automatiquement définies sur le forum d'ikariam, pour chaque message posté.)

(Retour en haut) retour en haut

 

 

 

 

5. Les images

C'est le petit bouton en forme d'abre :

Il y a un pop up qui s'ouvre, et l'onglet "General"

Image de Insert/edit image



où vous pouvez spécifier
- l'URL de l'image : c'est l'adresse web où est située cette image
- la description de l'image. (Si l'image n'est pas affichée sur un navigateur, l'utilisateur pourra lire la description, par exemple pour un non-voyant utilisant un afficheur en braille)
- et le titre de l'image (visible en survol comme ci-dessous).

En cliquant dans le cadre de "Preview" (prévisualisation), vous pouvez directement vérifier que c'est la bonne image que vous allez insérer.

Validez sur le bouton "Update".
(Si vous n'avez pas mis de description, un message d'alerte en anglais s'affiche et vous devrez cliquer "OK" pour confirmer.)

Recommandation IMPORTANTE : hébergez vos images en tant que fichiers sur le site FFF (dans la partie "Mon profil", puis l'onglet "Mes fichiers"). Cela s'affichera plus vite pour les lecteurs FFF.
Et en plus, il y a le redimensionnement automatique, pour que ça rentre dans la largeur du forum !

 

 

Et surtout, vous y aurez directement accès dans votre boite "Mes Fichiers" sur la gauche.

A ce moment, un simple glisser-déposer permet d'insérer votre image dans votre texte ! Super simple !!

Enfin....pas aussi simple qu'on le croit...
Il faut penser à ajouter votre image, avant d'écrire votre texte, pour que ce soit disponible en glisser-déposer.

Ou alors, pendant que vous écrivez votre texte, il faut ouvrir une nouvelle fenêtre, ajouter votre image à vos fichiers, faire un "Prévisualiser" de votre texte du forum qui rafraichira votre boite "Mes Fichiers", et alors vous pourrez faire le glisser-déposer.

Cela ne marche qu'avec les images au format .jpg  .png  et .gif
(le .jpeg n'est pas reconnu par ce module, et le .bmp est à éviter)

 

 

 

 

(Si vous voulez plus de 10 images affichées, vous pouvez changer dans "Mon profil" l'onglet "Mes préférences", à la ligne "Nombre d'images de Mes Fichiers". Cela ne sert à rien d'en mettre 30, car la trentième sera tout en bas, difficile à aller chercher)

 

Il est bien sûr possible d'insérer des images prises ailleurs sur le web. (Mais ce n'est pas recommandé.) Pour cela, il faut copier l'URL de l'image.

Dans l'onglet "Appearance" (apparence), il peut être utile de changer la taille de votre image, si celle-ci fait 2000 pixels de large et déborde un max sur le forum.
N'oubliez pas de cliquer "Constrain proportions" = garder les proportions de l'image.

 

 

Encore plus simple, vous pouvez diminuer la taille directement dans l'interface en utilisant les coins de l'image (après un simple clic sur l'image, qui fera apparaitre la bordure, avec les points de redimensionnement).

 

En redimensionnant par les coins, cela garde les proportions de votre image.

 

 

 

 

 

 

En utilisant les autres points, cela étire l'image.

 

 

 

Note : Vous pouvez bien sûr copier l'emplacement du fichier, qui est donné dans l'onglet "Mes fichiers".

 

 


Le système est assez malin pour comprendre que "/files/myfiles/boite-mes-fichiers.jpg" provient du site FFF, et pour l'interpréter correctement, comme ci-dessous.

 

 

 

Pour les images, vous pouvez bien sûr les mettre à droite, à gauche, etc.  avec les boutons déjà présentés :

[IMAGE]image à gauche (et texte à droite)

image au centre

[IMAGE]

image à droite (et texte à gauche) ..........................................................[IMAGE]

 

 

 

 

 

 

Et vous pouvez avoir le texte des 2 cotés [IMAGE] en cliquant sur choisissant de "justifier".

(Note de Titi : dur de trouver un screen de War3 avec ces floodeurs entropiens !) (Nd Giss : on ne flood pas, on informe !)

Mais cela ne met qu'une seule ligne à côté de l'image.
Pour mettre l'image en plein milieu du texte, toujours dans l'onglet "Appearance", vous pouvez changer l'alignement ("Alignment").

"Left" pour mettre l'image à gauche

[IMAGE]fffffffffffffffffffffffff
fffffffffffffffff
ffffffffffff
ffffffff

Et "Right" pour mettre l'image à droite

 

 

[IMAGE]fff
fffff
ffffff
fffffffff
ffffffffff

 

(Retour en haut) retour en haut

 

 

 

 

6. Autres

Annuler une action : il y a le bouton "Undo" = annuler la dernière action.
ça marche aussi très bien avec le raccourci habituel CTRL+Z (et autre raccourci de Mac)

Effacer un format : c'est la petite gomme "Remove Formatting"
Cela permet d'effacer la mise en forme, ou la couleur d'un texte que vous aviez copié.
(C'est un peu capricieux, quelquefois.)

Le bouton HTML : pour les amoureux du code, comme notre Alex. ;-)
Cela ouvre un pop up, avec le code html de ce que vous écriviez.

code html



ça ne sert à rien, puisqu'on a dit au tout début que TinyMCE est un éditeur de texte WYSIWYG. Mais c'est bôôô pour certains...

Et dans certains cas particuliers, ça me dépanne bien.
Par exemple, j'ai cité un message du forum. Mais je veux écrire un mot au dessus.
Si je le fait directement, ça me garde le style "quote1", et mon texte va être grisé (de la même couleur que la citation".)
Même en cliquant sur "Remove Format", la gomme gomme gomme , ça ne l'enlève pas.
La seule astuce que j'ai trouvée, c'est d'aller dans le code HTML, au tout début en haut, j'ajoute un mot et je clique "Update".
Je retrouve le mot ajouté, sans mise en forme, et je peux continuer à écrire.

(Retour en haut) retour en haut

 

 

Il y a encore plein d'autres choses à découvrir (les tableaux, les calques, les indentations,etc.). Ce sera peut être pour un prochain guide pour les "experts" FFFs.

N'hésitez pas à poser vos questions sur ce topic du forum. (Nous mettrons à jour ce guide, au fur et à mesure.)

S'il reste de petites erreurs ou des fautes de frappes, envoyez moi un MP et je corrigerai. Merci.



Titi,
23 juin 2011.

(Article "pensé" en décembre,  commencé en janvier, terminé en mai juin.... pfiouu..)
Merci aux Auteurs FFF qui m'ont aidé pour la relecture et l'amélioration.

Commentaire de tyrranus :Jeudi 30 Juin 2011 - 13:21)

GG Titi ! Et un merci aux contributeurs ;)

Commentaire de Titi-fr :Jeudi 30 Juin 2011 - 13:25)

Merci Lemon pour la publi.

Encore merci aux contributeurs. Vous imaginez bien que c'était un peu long à relire et à corriger.

Mais je pense que ça valait le coup.

 

N'oubliez pas, si vous avez des questions, c'est par ici sur le forum.

Commentaire de Giss :Samedi 23 Juillet 2011 - 09:24)

Je rêve ! 56 lectures et que 2 commentaires. Vous pourriez dire merci ! je suis sûr que vous vous servez de cet article ! :P

Commentaire de leyaelle :Samedi 23 Juillet 2011 - 11:55)

Merciiiiiiiiii TIti Wink

Commentaire de alexscott :Dimanche 24 Juillet 2011 - 02:02)

cet article est surtout génial pour faire de beaux articles en fait :P

Commentaire de dejune :Dimanche 24 Juillet 2011 - 10:50)

gg titi :)

Commentaire de Meinteil :Dimanche 24 Juillet 2011 - 11:07)

Merci Titi, merci aux contributeurs aussi!

Il m'a fallu un bon bout de temps pour lire l'article quand même ^^" une fois fini je peux dire qu'il est bien clair et joliment illustré! Bravo Titi!

Commentaire de alexscott :Jeudi 25 Octobre 2012 - 11:18)

up pour mister X ;)

Commentaire de Im_a_Player :Jeudi 25 Octobre 2012 - 12:42)

tien je l'avais jamais vue cet article ^^ he be bien jouer titi ^^

Commentaire de Overdrink :Jeudi 25 Octobre 2012 - 19:13)

ah ouai bien joué je l'avais pas vue non plus. Bien complet en tout cas :p

Commentaire de Mister X :Jeudi 25 Octobre 2012 - 20:56)

Merci !!!!!!!!!!!!!!!!!!!

Commentaire de Mister X :Jeudi 25 Octobre 2012 - 21:38)

Merci !!!!!!!!!!!!!!!!!!!

Commentaire de Scourgette :Dimanche 25 Août 2013 - 23:11)

gg

Commentaire de Giss :Lundi 26 Août 2013 - 08:54)

vive le bot qui remonte un vieux topic qui pointe sur cet article  ^^

Quand je disais qu'il faut faire de la pub pour les articles qu'on publie ici ! ;)

Commentaire de Titi-fr :Lundi 26 Août 2013 - 10:10)

Merci le bot.

 

Publié juin 2011, les infos semblent encore valables pour l'interface actuel.