Quoi de neuf ?

Bienvenue sur Psychonaut.fr !

En vous enregistrant, vous pourrez discuter de psychotropes, écrire vos meilleurs trip-reports et mieux connaitre la communauté

Je m'inscris!

Tuto mise en forme : vidéos et autres balises BB

CastlesMadeOfSand

Holofractale de l'hypervérité
Inscrit
15 Juin 2011
Messages
1 861
(5tr4t0 speaking)
Note initiale : ce texte est le fruit du travail de départ de CastlesMadeOfSand, qui a eu la très bonne idée de créer ce topic sur l'ancienne plate-forme. J'ai ensuite ajouté le contenu permettant d'utiliser au mieux la nouvelle version du forum ceci étant dû à la migration de psychonaut de phpBB vers Vbulletin (où dans cette dernière les balises sont différentes).

1. Qu'est-ce que le BBcode ?


Le BBcode est un très bon outil pour des posts agréables à lire, très complet mais nécessite une certaine familiarisation avant de bien maîtriser les balises.
Pour faire de la mise en page, l'idée des balises est la suivante :
On ouvre une balise pour indiquer le début de la mise en forme [x]
On ferme la balise pour indiquer la fin de la mise en page [/x]
x = à remplacer par l'indicateur de mise en forme voulue.

Exemple :
Pour mettre un bout de texte en gras c'est pas compliqué :
HTML Code:

Pour mettre un bout de texte en gras c'est pas compliqué

Il est intéressant de noter que vous pouvez appliquer plusieurs balises à une même expression et que le cas échéant l'ordre de celles-ci n'a aucune importance, par exemple vous pouvez "écrire ceci" de deux manières différentes, soit en écrivant HTML Code:

"écrire ceci"
, soit en écrivant HTML Code:

"écrire ceci"
, l'exception étant la balise elle même, point que je développerai plus tard.


2. Balises actuellement disponibles et fonctionnement de celles-ci :


Dans un souci d'exhaustivité, j'ai essayé de réunir toutes les informations qui me paraissaient utiles, à savoir les différentes balises que vous pourrez utiliser lorsque vous posterez des messages; il est à noter que certaines de ces balises ne sont disponibles que dans l'éditeur avancé, auquel vous pouvez accéder en cliquant sur le bouton qui se trouve sur la boîte de dialogue de la réponse rapide, à la fin du dernier post de chaque page.
Voici ci-dessous les différentes balises en interface graphique telles qu'elles apparaissent dans l'éditeur avancé.
6083d1338615117-tuto-mise-en-forme-vid%E9os-et-autres-balises-bb-bbcode-vbulletin.jpg


Pour les décrire, l'ordre sera de gauche à droite en commençant par la première ligne :



  • Active ou désactive la vue du message dans l'éditeur tel qu'il apparaîtra une fois posté
  • Remets les paramètres de l'éditeur par défaut (si vous aviez sélectionné du gras et/ou de l'italique, etc)
  • Permet de copier le message que vous tapez tout en conservant son intégrité (taille du texte, gras, ...)
  • Permet de coller du texte à partir d'un document Word en conservant également son intégrité
  • Font : permet de choisir la police de caractère, et oui c'est désormais chose possible !
  • Size : Détermine la taille des caractères
  • Permet de choisir la couleur du texte
  • Ouvre le menu des smileys
  • Permet d'ouvrir le gestionnaire/importateur de fichiers ( :!: Pas d'importations photos avec ça par contre, il y a une balise dédiée :p)
    et le screenshot qui va avec :

6084d1338615174-tuto-mise-en-forme-vid%E9os-et-autres-balises-bb-gestionnaire-fichiers.jpg




  • Permet d'annuler la dernière action effectuée
  • Permet de restaurer une action annulée


Seconde ligne :



  • Écrit en gras
  • Écrit en italique
  • Souligne ce que vous tapez
  • Aligne le texte à gauche (par défaut)
    [*=center]Centre le texte. Ex : ce texte est centré
    [*=right]Aligne le texte à droite. Ex : ce texte est à droite
  • Permet d'établir un système de puces numérotées
  • Permet d'établir un système de puces standard (ce que j'utilise actuellement)
  • Enlève une sous-puce voire la puce entière s'il n'en existe qu'une sur la ligne
  • Ajoute une sous-puce
    • ex : comme ceci
  • Permet d'inclure un lien hypertexte contenu dans une expression que vous aurez tapé, il vous suffit pour ceci de sélectionner le(s) mot(s) qui servira de conteneur -ce que le lecteur lira, de cliquer sur cet icône et de rentrer l'URL dans la boîte de dialogue pour ensuite confirmer.
  • Permet de retirer un lien hypertexte que vous avez préalablement mis dans votre texte (pour ceci il suffit simplement de sélectionné l'expression dans lequel le lien était contenu puis de cliquer sur ladite icône)
  • Permet d'insérer une image, soit par URL, soit par importation directe depuis votre ordinateur, et comme une image parle mieux qu'un long discours :


6085d1338615267-tuto-mise-en-forme-vid%E9os-et-autres-balises-bb-gestionnaire-images.jpg



  • Permet d'insérer une vidéo. Pour ce faire, rien de plus simple : cliquez sur l'icône et entrez l'adresse URL de votre vidéo puis cliquez sur OK. Et en plus ça gère Dailymotion (et youtube évidemment) mais également d'autres hébergeurs que je ne connaissait pas.
  • Permet de citer, peut s'utiliser de plusieurs manières :
    • Soit vous sélectionnez le texte à citer et cliquez sur cette icône, mais le nom de l'auteur n'apparaîtra pas. ex : Je suis un panda
    • Vous pouvez également encadrer le texte à citer avec la balise , X étant le nom de la personne, site, etc. Dans ce cas vous obtiendrez
      quote_icon.png
      Originally Posted by panda
      Je suis un panda
    • Et, si vous voulez passer pour un maître de la quote, vous pouvez également obtenir l'identifiant du post à citer (pour ce faire, cliquez sur "répondre en citant" sur le post de l'intéressé, vous obtiendrez dans l'éditeur quelque chose comme ça : , où X est la personne/site à citer et Y est l'identifiant du post.
      Cette dernière solution, bien que plus complexe, permet d'obtenir en prime un lien vers le post. En voici le résultat :
      quote_icon.png
      Originally Posted by 5tr4t0
      Je suis un panda.
  • Permet d'ajouter le BBcode
    Code:
    , bon personnellement je  n'ai pas trouvé d'autre utilisation à ce  BBcode que d'expliquer comment  se servir des autres balises, du fait  que si la balise  encadre votre  texte déjà balisé avec du gras ou autre  chose cela affiche les BBcodes  utilisés. ex : [HTML][B][I]J'écris en gras et en italique comme ceci[/I][/B] 
    [*]Permet  de se servir du langage HTML (il se peut que j'aie  volontairement  désactivé cette fonction du fait de s potentielle  dangerosité, tout du  moins avant que le forum ne soit parfaitement  configuré -mais le plus  gros est derrière nous^^) 
    [*]Permet d'utiliser du langage php (que j'ai peut-être également désactivé...). 
    [/LIST]
    
    
    [B]Troisième et dernière ligne :[/B] 
    
    
    
    [LIST]
    [*]Permet de créer un tableau (cette fonction pourra à terme prendre tout son sens sur le forum, j'en suis déjà tout excité) 
    [*]Permet de régler les propriétés du tableau (nombres de lignes, de colonnes, etc) 
    [*]Supprime le tableau 
    [*]Insère une ligne avant la première préexistante 
    [*]Insère une ligne après la dernière préexistante 
    [*]Supprime la ligne sur laquelle vous êtes placé 
    [*]Insère une colonne avant la première préexistante 
    [*]Insère une colonne après la dernière préexistante 
    [*]Supprime la colonne sur laquelle votre marqueur est placé 
    [*]Permet d'écrire en indice. Ex : CO[SUB]2[/SUB] 
    [*]Permet d'écrire en exposant. Ex : H[SUP]+[/SUP] (ces deux dernières fonctions vont être notamment pratiques pour écrire des formules chimiques^^) 
    [*]Insère une ligne horizontale, très pratique pour séparer un TR en plusieurs étapes distinctes, par exemple. :thumbsup: 
    [/LIST]
    
    
    
    Sur ce, j'espère que ces conseils ont été assez clairs, j'avoue avoir pioché des information sur [url=http://forum.vbulletin-fr.org/misc.php?do=bbcode]cette page[/url] que je vous invite à consulter si des doutes subsistent.
    
    
    [SIZE=6][U]3. Remarques d'ordre générales[/U][/SIZE]
    
    Contrairement à phpBB (pour les nouveaux, derrière cet acronyme se cache   l'ancienne plateforme de forum que l'on a utilisé jusqu'au début du   mois de mai 2012), dont l'ergonomie et l'intuitivité était correctes,   mais qui n'offrait cependant pas autant de fonctionnalités que   Vbulletin, ce dernier a l'avantage d'être totalement interfacé, ce qui   permet un gain de temps substantiel mais surtout une maniabilité qui   peut fluidifier le dialogue dans cette communauté.
    Après les explications précédentes,  je pense que vous n'aurez que  rarement recours à la frappe manuelle  des balises. Cependant, les plus  utiles ne sont pas très difficiles à  retenir et si jamais un problème  venait à survenir sur votre  PC/Mac/whatever (ex : les icônes ne  s'affichent plus), savoir écrire un  texte en gras ne vous prendrait que  quelques secondes de plus, aussi  je vous conseille de retenir les 2-3  balises que vous êtes le plus  susceptibles d'utiliser, mais après vous  êtes libres de vous en foutre  complètement :D.
    
    Bon, pour résumer, faire un post encore plus agréable à lire ne requiert que très peu de manipulations :
    1. On sélectionne le texte à mettre en forme
    2. On appuie sur le bouton qui va bien
    3. On vérifie en cliquant sur "Aperçu"
    => L'aperçu est un truc super puissant qui vous permet  de voir ce   que ça donne avant de poster des trucs tout bizarres. Si  jamais on peut   toujours Editer un message qu'on a posté pour ré-ajuster  des trucs.
    (T'as un bouton "EDIT" sur tes messages, t'as vu ?)
    
    Allez, postez bien !                         
    [/INDENT]
 
Haut