:guide_fms: :fmslifebadge: Guide d'utilisation du forum

guideutilisationFMS1279×752 446 KB

Etant tous ou presque habitué à la structure traditionnels des forums il m’a pensé indispensable de vous faire un petit guide comment fonctionne FMStories. Le forum est basé sur le moteur Discourse, un outil puissant et fort personnalisable comme vous allez pouvoir le constater.

Avantages de Discourse

FMStories tourne sur Discourse, un forum nouvelle génération. voici les avantages de ce moteur :

• Pas de pages : c’est nouveau mais on s’y fait, on se prend même à aimer puisque l’on peux aisément trouver le sujet qui nous plait et naviguer de façon tout aussi clair dans l’interface.

Notifications : L’interface vous notifiera vos MP, les réponses à vos posts, les like que vous aurez obtenu.

Mentions : plus besoin des quotes il suffit désormais de taper @Groot et le membre est notifié de votre message.

Recherche :le système de recherche est relativement puissant et fonctionne aussi dans les messages privés.

Carte d’utilisateur : cliquez sur mon pseudo ou mon avatar, vous verrez ma carte d’utilisateur. Elle est personnalisable avec une image des infos et même les badges obtenus.

Badges : vous avez aimé les trophées sur consoles ? Et bien le principe est similaire, on aime mettre en avant votre participation. Si vous présentés plusieurs séries, films… ou si vous vous distinguez dans la communauté, vous recevrez des badges.

Écrire un message : lorsque vous tapez votre message, la fenêtre vous propose un aperçu en temps réel, afin d’avoir une idée précise de votre poste. De plus, vous pouvez continuer à naviguer sur le forum tout en écrivant votre message, que vous changiez de sujet ou consultiez un profil, la fenêtre d’écriture d’un message ne bouge pas.

##Guide d’utilisation de FMStories

##Sommaire.
1. L’éditeur de texte

• Codes de mise en forme (markdown, html, bbcode)
• Ajouter une image dans votre message
• Ajouter une vidéo
• Ouvrir un sondage
• Faire un tableau
• Créer un sommaire

2. Astuces du forum

• Tout savoir sur les mentions
• Désépingler un sujet
• Lien rapide vers une catégorie
• Choisir l’extrait d’un sujet
• Navigation rapide sans la page des catégories

3. Réglages des préférences

• Accéder aux préférences
• Avatars et fonds d’écran
• Courriels
• Autres options

Voici un listing des codes utilisables sur ce forum :

Fonctions basiques

• Mettre en gras

• **Texte** / __Texte__

• <b>Texte</b> / <strong>Texte</strong>

• [b]Texte[/b]

• Mettre en italique

• *Texte* / _Texte_

• <i>Texte</i>

• [i]Texte[/i]

• Souligner

• [u]Texte[/u]

• Barrer

• <s>Texte</s>

• [s]Texte[/s]

• Surligner

• [su]Texte[/su]

• Colorer un texte

• [color=red]Texte[/color] / [color=#FF3300]Texte[/color]

• <font color=red>Texte</font>

• Ajouter une URL

• [Titre du lien](lien)

• <a href="lien">Titre du lien</a>

• [url=lien]Titre du lien[/url]

• Ajouter une image

• Mettez le lien de l’image seul sur une ligne

• <img src="lien">

• [img]lien[/img]

• Barre horizontale

• ---------- / _________ (seul sur une ligne)

• <hr>

• Flouter un texte (fonctionne aussi pour les images)

• [spoiler]Texte[/spoiler]

• Balises titres (hiérarchisation) : pour aider au référencement, un système de hiérarchisation des titres a été mis en place sur Internet.

• <h1>Titre</h1> / # Titre pour le titre principal

• <h2>Titre</h2> / ## Titre pour le sous-titre ou les titres de chapitres

• <h3>Titre</h3> / ### Titre pour les sous-rubriques ou des titres mineurs.

• etc.

• Taille du texte

• [size=7]Texte[/size] taille maximale autorisée

• [size=6]Texte[/size]

• [size=5]Texte[/size]

• [size=4]Texte[/size]

• [size=3]Texte[/size]

• Texte de taille normale entre 2 et 3

• [size=2]Texte[/size]

• [small]Texte[/small] / [size=1]Texte[/size]

• Centrer

• <div align="center">Texte ou image</div>

• [center]Texte[/center]

• Aligner à droite

• <div align="right">Texte ou image</div>

• [right]Texte[/right]

• Justifier un texte

• <div align="justify">Texte ou image</div>

• [justify]Texte[/justify]

• Élément flottant (float) : permet de placer un élément à gauche ou à droite de votre paragraphe principal pour une meilleure utilisation de l’espace.

• [floatl]Texte ou image[/floatl] pour un élément placé à gauche

• [floatr]Texte ou image[/floatr] pour un élément placé à droite

• Cacher du texte

• <details><summary>Texte visible</summary>Texte caché</details>

• [details=Texte visible]Texte caché[/details]

• Redimensionner une image

• <img src="lien image" width="500" height="500" /> width correspond à la largeur en pixels, height à la hauteur, en pixels.

• Créer un ancrage

• [**Texte**](#Ancre) point d’ancrage 1

• <a name="Ancre"></a> destination de l’ancre

##Uploader une image

Rien de plus simple. Pour heberger une image et la partager, il vous suffit de cliquer sur le bonton “Joindre un fichier” et de vous laisser guider.

1475072738-border.png1396×84 4.82 KB

##L’intégration d’images déjà hébergées.

Il y a une multitude d’options pour intégrer une image chez nous si l’image est déjà hébergé ailleurs que sur notre site. Chacune à ses avantages et c’est plus ou moins compliqué. Je vais en expliquer deux ici, les plus simples.

Si vous souhaitez simplement partager une image, le plus simple est de copier le lien de cette image dans l’éditeur de texte, tout simplement. Pas besoin de balises. Nada !

La seconde option est tout aussi “basique”, elle est un peu pour les nostalgiques, il faut simplement trouver le bon bouton dans l’éditeur de texte afin d’ouvrir la balise. Le voila :

1475072808-border2.png1396×84 4.77 KB

L’intégration de médias.

Grace à notre moteur Discourse, nous avons la possibilité d’intégrer nativement des vidéos de formats différents. De Youtube à Dailymotion en passant par Vine, vous pouvez aussi intégrer directement des vidéos au format .mp4 et .webm, il y a beaucoup de possibilité. Le plus beau ? Il n’y a rien a faire, juste a copier le lien, c’est tout.

Pour Youtube, rien de plus simple le lien de la page suffit, mais pour d’autres hébergeurs, il est préférable de faire un clic droite directement sur la vidéo pour recuperer le lien grace à l’option ; Copier l’adresse de la vidéo

Exemple pour un lien Youtube :

https://www.youtube.com/watch?v=-BV3W5YL8lA

Il sera intégré comme ça sur Com&Talk :

Pour Dailymotion, plusieurs options, premierement avec le lien “classique” de l’url de la page :

http://www.dailymotion.com/video/x4v3bh8_les-animaux-fantastiques-bande-annonce-finale-vo-eddie-redmayne_shortfilms

Ou encore avec la méthode donnée plus haut. (clic droit sur la video)

https://www.dailymotion.com/cdn/H264-1280x720/video/x29dgv4.mp4?auth=1469534496-2688-jmm6skzp-1d0d1e8f5d80ef85854507d9c5aaa78b

https://www.dailymotion.com/cdn/H264-1280x720/video/x29dgv4.mp4?auth=1469534496-2688-jmm6skzp-1d0d1e8f5d80ef85854507d9c5aaa78b

Vine :

https://vine.co/v/eKJuwQMlVvZ

https://vine.co/v/eKJuwQMlVvZ

Vidéo .mp4 hébergée chez streamable.com :

https://cdn.streamable.com/video/mp4/ufxa.mp4

Créer un sondage sur Com & Talk n’est pas des plus intuitifs, mais comme vous allez le voir, les possibilités sont immenses !

Sondage simple

Le sondage de base par excellence. Plusieurs options, un choix à faire.

[poll]
- Option 1
- Option 2
- Option 3
[/poll]

##Sondage multiple

Vous pouvez créer un sondage à choix multiple, en définissant le nombre d’options minimum et maximum pour voter.

[poll type=multiple min=1 max=2]
- Option 1
- Option 2
- Option 3
[/poll]

##Sondage à nombres

Idéal pour noter un jeu, une série, un épisode, un joueur, ce sondage est intuitif et simple à utiliser.

[poll type=number min=0 max=10][/poll]

##Plusieurs sondages sur un même messages ?

Cela est possible, comme ce sujet le montre, mais dans ce cas il faudra rajouter une balise dans chaque sondage :

name=nomsondage

Exemple :

[poll name=episode1 type=number min=0 max=10][/poll]
[poll name=episode2 type=number min=0 max=10][/poll]

##Rendre les votes publics

Depuis juin 2016, Discourse offre la possibilité de rendre les votes publics. Pour cela il suffit d’ajouter le critère public=true dans votre sondage :

[poll public=true]
- Option 1
- Option 2[/poll]

Cela donne :

La balise centrer habituelle ne fonctionne pas, il va falloir passer par du code html.

<div align="center">

[poll type=number min=0 max=10][/poll]
</div>

NB : Vous pouvez remplacer center par right pour aligner à droite.

Pour des raisons logiques (il y a déjà un sommaire sur ce message) nous ne pouvons pas vous monter comment faire un sondage ici, mais le guide est disponible sur ce sujet :

Pour cela, rien de plus simple, il vous suffit de cliquer sur l’icône en forme d’épingle.

1475073326-border3.png1246×312 31.4 KB

Pour choisir un extrait, vous devez le mettre dans la balise suivante :

<span class='excerpt'></span>

Voici un exemple concret, dans ce sujet, j’ai mis le synopsis en avant :

http://comandtalk.fr/t/pikachu-pokemon/27

Vous êtes sans doute nombreux à utiliser ce menu mais il est toujours bon de le rappeler, s’il existe une page catégories qui rappelle les forums “classiques”, on dispose aussi d’un menu de navigation rapide pour accéder aux rubriques de votre choix. Que ce soit en ouvrant le menu hamburger ou le menu déroulant des catégories, vous accéderez rapidement aux sujets de votre choix.

• Avatar : trois options sont disponibles. Utiliser l’image générée par le forum (première lettre de votre pseudo devant un fond coloré), utiliser votre image Gravatar ou charger une image depuis votre PC. Pour une utilisation optimale, votre image doit avoir la même largeur et la même hauteur.. Si vous ne connaissez pas Gravatar, c’est un site utilisé par de nombreux blogs ou forums pour gérer un avatar. Une fois inscrits, chargez votre avatar, et il apparaîtra sur les sites compatibles.

• Arrière plan de profil : Cette image apparaît en en-tête de votre page de profil. Les dimensions varient en fonction des options que vous remplissez. Par défaut, la taille recommandée est de 1110 pixels de large, et 420 pixels de haut. Mais si vous remplissez beaucoup d’infos dans A propos de moi et vos séries, films, jeux préférés, il faudra une image plus grande en hauteur.

• Arrière plan de la carte d’utilisateur : Sur le forum, lorsque que vous cliquez sur un pseudo, une fenêtre s’ouvre, c’est la carte d’utilisateur. Vous pouvez utiliser une image de fond d’écran sur celle-ci. Les dimensions de base sont de 580 pixels de large, et 306 pixels de haut.

Les options suivantes sont des informations qui apparaîtront sur votre carte d’utilisateur et/ou votre profil. L’intitulé est clair.

Trois options sont disponibles à l’heure actuelle :

• Recevoir un mail lorsqu’on reçoit un message privé
• Recevoir un mail à chaque mention, citations ou réponse à un message
• Ne pas recevoir de mail lorsque je suis sur le site.

Voici d’autres options de réglages sur des thèmes variés. Nous vous conseillons ce réglages pour le suivi des sujets :

Cela permet, si vous le souhaitez, de suivre au mieux tous les sujets du forum, repérer les nouveaux sujets postés, ou avoir le compteur de messages non lus des sujets que vous avez déjà ouverts.

• Ouvrir tous les liens externes dans un nouvel onglet : au lieu de forcer la main, vous avez le choix, désactiver cette option permet d’avoir une navigation fluide sur un seul onglet, s’il y a un lien vers un autre site il s’ouvre dans la même fenêtre. Pratique sur mobiles notamment. En ouvrant dans de nouveaux onglets vous pouvez continuer votre lecture du sujet et regarder le lien plus tard, sur une autre fenêtre.

• Proposer la citation du texte surligné : en sélectionnant un bout de texte d’un message sur Com&Talk, il est possible d’avoir un bouton Citer qui apparaisse. Pratique pour citer un extrait sans avoir à citer tout un message, cette option fonctionnent évidemment bien mieux sur PC, si vous utilisez majoritairement tablette ou mobile, l’apparition de ce bouton peut s’avérer désagréable à l’utilisation.

• Faire apparaître le nombre de sujets récemment créés ou mis à jour sur l’icône navigateur : cette fonction n’est pas compatible avec tous les navigateurs. Dans votre navigateur, vous pourrez voir le nombre de sujets créés ou MAJ dans le titre de l’onglet.

• Ne pas se déplacer à mon nouveau message après avoir répondu : une fois que vous avez posté un message, vous êtes redirigez dessus, c’est pratique pour se relire, ou voir s’il n’y a pas un problème d’affichage. Cependant, comme vous le savez, vous pouvez écrire un message et continuer à naviguer sur le forum, visiter d’autres sujets, en activant cette option, vous pourrez écrire votre message, le poster, et continuer à lire sans être dérangé;

• Autoriser les autres utilisateurs à consulter les modifications de mes messages : lorsqu’un message est édité, le staff a généralement accès à un historique des modifications, vous pouvez choisir, ou non de donner la possibilité de consulter l’historique à tout le monde.

Il est possible de concevoir un tableau sur le forum, celui-ci doit être réalisé en HTML. Il doit être découpé en plusieurs balises :

• <table></table> indique que l’on créé un tableau. Tout le code doit être contenu dans ces balises

• <table><tr></tr></table> l’ajout de <tr> indique la création d’une ligne.

• <table><tr><td>1</td><td>2</td></tr></table> on y ajoute des colonnes à l’aide du code <td>. Ici on a une colonne 1, une colonne 2. Sur une ligne.

• Pour créer un tableau simple à deux lignes et deux colonnes on utilise ainsi le code : <table><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

• Il existe aussi un autre type de colonne pour les intitulés : <th></th> qui mettra automatiquement en gras le contenu de chaque colonne.

• Il faut noter que la mise en forme du texte ou l’ajout d’images dans le tableau doit se faire avec du code html. Ainsi pour mettre en gras vous devrez mettre votre texte entre les balises <b>Texte</b>, et les images avec le code <img src="lien"> (voir Codes de mise en forme (markdown, html, bbcode))

• Les tableaux sur Discourse n’acceptent pas l’intégralité des balises HTML existantes (pour des raisons de sécurité), ainsi, le rendu d’un tableau sur un véritable site en HTML ne sera pas identique au résultat sur ce forum.

• Vous pouvez centrer votre tableau en mettant l’intégralité de votre code entre les balises <div align="center">code</div>

Voici un exemple de tableau conçu par nos soins lors de l’Euro 2016 :

Rang	Équipe	Pts	J	G	N	P	Bp	Bc	Diff
1	France	7	3	2	1	0	4	1	+3
2	Suisse	5	3	1	2	0	2	1	+1
3	Albanie	3	3	1	0	2	1	3	-2
4	Roumanie	1	3	0	1	2	2	4	-2

Voici son code source :

<div align=center><table>
<tr>
<th>Rang</th>
<th>Équipe</th>
<th>Pts</th>
<th><span style="cursor:help;" title="Matchs joués">J</span></th>
<th><span style="cursor:help;" title="Matchs gagnés">G</span></th>
<th><span style="cursor:help;" title="Matchs nuls">N</span></th>
<th><span style="cursor:help;" title="Matchs perdus">P</span></th>
<th><span style="cursor:help;" title="Buts pour">Bp</span></th>
<th><span style="cursor:help;" title="Buts contre">Bc</span></th>
<th><span style="cursor:help;" title="Différence de buts">Diff</span></th></tr>
<tr>
<td><b>1</b></td>
<td><b><img src='/uploads/default/original/1X/4e11e7800ac0b56833074c28928137ee537ddbdd.png' height=20 width=20"> France</b></td>
<td><b>7</b></td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>0</td>
<td>4</td>
<td>1</td>
<td>+3</td>
</tr>
<tr>
<td><b>2</b></td>
<td><b><img src='/uploads/default/original/1X/3dfa0d255b3a085492dd09b461aa2588f0d6f7af.png' height=20 width=20> Suisse</b></td>
<td><b>5</b></td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>2</td>
<td>1</td>
<td>+1</td>
</tr>
<tr>
<td><b>3</b></td>
<td><b><img src='/uploads/default/original/1X/8a61c9ecd14139695f38db7132a1d65a32eb58b0.png' height=20 width=20> Albanie</b></td>
<td><b>3</b></td>
<td>3</td>
<td>1</td>
<td>0</td>
<td>2</td>
<td>1</td>
<td>3</td>
<td>-2</td>
</tr>
<tr>
<td><b>4</b></td>
<td><b><img src='/uploads/default/original/1X/28c8fa9d1c4d917002692ad4bfb1e258421789cd.png' height=20 width=20> Roumanie</b></td>
<td><b>1</b></td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>4</td>
<td>-2</td>
</tr>
</table></div>

Pour avoir plus de détails et de l’aide, vous trouverez des explications complètes sur le fonctionnement des tableaux en HTML :

• Tableaux en HTML sur W3CSchools
• Créer un tableau HTML en ligne

Si vous rencontrez des difficultés pour accéder au forum, pensez à aller voir sur notre Twitter : @fmsfrench
On communiquera par ce biais pour vous informer de l’avancée du rétablissement des services.

Bonne journée!

Record de visiteurs, de messages et de “J’aime” sur le forum et 200ème followers sur Twitter hier, bravo et merci à tous pour ce démarrage au dessus de nos espérances! Continuons ainsi!

La barre des 5000 messages est passée ce soir !!! Bravo et merci à tous pour votre participation
Prochaine étape, le 100ème membre Pour info, nous sommes 96
On offre un rang spécial pour le 100ème bien sur !