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

Guide d’utilisation

Ce thread comprendra une table des matières
Résumé

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.

Ce thread comprendra une table des matières
1 « J'aime »
Guides réalisé par Tyler (iunctis.fr)

##Guide d’utilisation de FMStories


Discourse est un forum qui offre beaucoup de possibilités ; de la mise en forme à l’intégration de média en passant par les options poussées et les raccourcis clavier, tout est fait pour se sentir à l’aise. Mais comme pour toutes les nouvelles choses, il faut un temps d’adaptation et d’apprentisage, c’est pour cela que Tyler (Iunctis) a créer ce guide, pour vous aider à prendre en main cet outil qu’est Discourse afin de profiter pleinement de FMStories.

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

2. Astuces du forum

3. Réglages des préférences



## PREMIÈRE PARTIE : L'ÉDITEUR DE TEXTE

##**Codes de mise en forme _(markdown, html, bbcode)_**

Com&Talk et Discourse en général utilisent plusieurs types de langages de mise en forme. Cela va du langage Markdown (utilisé sur reddit par exemple), html (langage principal des sites internet) ou les BBcodes (des forums anciennes générations comme phpBB, IPB, etc.).

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]


## Titres, sous-titres, tailles du texte
  • 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]


## Alignement, positionnement
  • 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


## Fonctions plus complexes
  • 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



##**Ajouter une image dans votre message**

##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.



##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 :



##**Ajouter une vidéo**

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



##**Ouvrir un sondage**

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]
  • Option 1
  • Option 2
  • Option 3

0 votant


##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]
  • Option 1
  • Option 2
  • Option 3

0 votant


##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]

[poll name=nombres type=number min=1 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 :

[poll public=true]

  • Option 1
  • Option 2[/poll]

## Centrer un sondage

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>

[poll name=centrer type=number min=1 max=10][/poll]

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




##Créer un sommaire

Sur Com & Talk, on aime parfois créer des sujets très denses, avec une présentation détaillée et ordonnée. Avec Discourse, il est possible de créer un sommaire au sein même d’un message pour permettre de vous amener à un endroit précis. Façon répertoire, sommaire ou pour chapitrer un récit, vous pouvez adapter cette fonction appelée ancrage en html de toutes les façons que vous souhaitez.

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 :



# SECONDE PARTIE : ASTUCES DU FORUM

##**Tout savoir sur les mentions**


## Mention individuelles
Sur Com&Talk, il est possible de faire une mention à un membre pour attirer son attention. Avec une simple mention @Tyler ou @Potaval, le membre concerné recevra une notification.

## Mention de groupes
De manière similaire, il est possible de faire une mention groupée pour éviter d’interpeller plusieurs personnes concernées une à une. Avec une simple mention @Admin ou @Staff, chaque membre du groupe concerné recevra une notification.
Nous avons mis à profit cette option pour faciliter le travail des gestionnaires de pronostics ou fantasy diverses. Par exemple, en participant à la Fantasy League de Tennis, Matthe utilise la mention @Tennis, et chaque membre du groupe recevra une notification, comme s’il avait été mentionné individuellement.


##**Désépingler un sujet**

Dans la liste des messages récents et dans certaines rubriques, il y a des sujets épinglés. Pour une mise en avant temporaire ou définitive de sujets importants, ils resteront en permanence tout en haut de cette liste.
Vous pouvez à votre guise désépingler ces sujets s’ils ne sont pas importants pour vous ou si la disposition vous convient mieux sans.

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



##**Lien rapide vers une catégorie**

Autre fonction méconnue, le hashtag catégorie peut s’avérer pratique pour éviter des allers-retours sur le forum pour donner un lien vers une rubrique.
Si dans un sujet quelconque, vous êtes amenés à mentionner une rubrique, il vous suffit de faire un hashtag # et avec le menu contextuel, vous pourrez facilement trouver la rubrique à partager. Par exemple, si je veux vous envoyer vers la rubrique jeux vidéo du forum, au lieu d’aller faire un copier-coller du lien de la rubrique, je peux faire ça : #jeuxvideo
Note : le hashtag est aussi utilisé pour une mise en forme du texte, ainsi le hashtag de catégorie ne peut fonctionner en tout début de ligne, faites un espace puis le hashtag.


##**Choisir l'extrait d'un sujet**

Lorsque l’on met un sujet en épingle ou qu’on fait un lien vers un autre sujet du forum, il y a un texte qui accompagne cette action. Par défaut, ce sont les premiers caractères d’un sujet. Sur Discourse, il est possible de choisir quel texte sera mis en avant. Pour nos topic live foot, on donne en général les affiches du jour, pour une série, cela peut être le synopsis.

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



##**Navigation rapide sans la page des catégories**

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.


# TROISIÈME PARTIE : RÉGLAGES DES PRÉFÉRENCES

##**Accéder aux préférences**

Les préférences permettent de personnaliser votre profil, ajouter un fond d’écran à votre carte d’utilisateur ou votre profil et aussi régler des options.

Pour y accéder c’est très simple, ouvrez le menu où apparaît votre avatar et allez dans les Préférences.

Je ne reviens pas en détails sur les premières options, elles sont plutôt claires. Vous pouvez changer votre pseudo dans les premiers jours après votre inscription, au-delà, il faudra contacter @Groot pour le faire. Cela permet de ne pas trop déstabiliser les autres utilisateurs. Sachez cependant qu’une fois votre pseudo changé, les anciennes mentions @ Votre Pseudo ne fonctionneront plus.



##**Avatars et fonds d'écran**

  • 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.



##**Courriels**

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.
La troisième option, vous permet de ne pas recevoir de mails lorsque vous êtes sur le site, elle est intéressante car les mails sont généralement faits pour se rappeler de consulter le forum, ou vous rappeler d’un message que vous avez suivi, mais si vous êtes présents en direct pour le suivre, ils sont inutiles. Activer cette option permet déjà de limiter l’envoi de mails par notre application, mais soulage aussi votre boîte mail.


##**Autres options**

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.



##**Catégories**

Vous pouvez enfin surveiller les sujets d'une catégories (vous recevrez une notification à chaque message posté sur les sujets de cette catégorie), les suivre (les nouveaux messages seront considérés comme non lus, même sans avoir ouvert le sujet), masquer une vous ne vous intéresse pas (ils n'apparaîtront pas dans le listing des sujets Récents).

Si vous souhaitez changer de pseudo il suffit de contacter @Groot par messagerie privée.

Il vous faut alors indiquer le pseudo que vous souhaitez obtenir. S’il est libre, la modification sera faite au plus vite. Vos anciennes notifications seront “cassées” donc nous demandons de ne pas effectuer de changements de pseudos trop fréquents.

Guides réalisé par Tyler (iunctis.fr)

##**Faire un tableau**

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 :


1 « J'aime »

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!

1 « J'aime »

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!

3 « J'aime »

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

1 « J'aime »