Un Nouveau Forum > Bienvenue, FAQ et infos

🧰 TUTORIEL Le BBCODE, c'est quoi ? BBCODE pour les nuls !

(1/1)

Coccinelle:
Le BBCODE, c'est quoi ? BBCODE pour les nuls !

[bb]

Tout les membres du forum auront remarquĂ© que, par dĂ©faut, la saisie d'un message se fait comme si on Ă©tait sur un simple Ă©diteur de texte, c'est Ă  dire sans aucune apparente possibilitĂ© de mise en page : pas de gras, pas d'italique, pas de couleur... Bref, rien Ă  voir avec un joli traitement de texte comme Word oĂč une simple sĂ©lection de texte Ă  la souris permet de formater le texte Ă  volontĂ©, et surtout, oĂč le rĂ©sultat se voit tout de suite. Cela peut donc dĂ©concerter et mĂȘme donner l'impression que ce forum appartient Ă  l'Ăąge de pierre de l'informatique.

Si vous faites partie de ces coccinautes perplexes, c'est parfait, car ce petit article a été rédigé pour vous. Il est écrit pour expliquer comment mettre en page votre texte alors que rien ne semble prévu pour, et surtout pourquoi « l'ùge de pierre » a parfois du bon ;) .

Ce tutoriel est donc expliqué simplement, il va à l'essentiel, est pratique, et a pour but de faire de vous un pro du... BBCODE !

BBCODE ::) ? C'est quoi ce truc ?

Quand Ă  la fin du siĂšcle dernier les forums informatiques ont commencĂ© Ă  fleurir sur internet, le besoin de colorer un peu les messages s'est vite imposĂ©. On savait dĂ©jĂ  le faire pour les pages web, mĂȘme qu'un langage de mise en forme avait Ă©tait crĂ©Ă© pour cela, avec un joli petit nom : le HTML (acronyme de HyperText Markup Language). Une idĂ©e simple et ingĂ©nieuse : une page HTML c'est du pur texte, mais les parties auxquelles on souhaite appliquer une mise en forme particuliĂšre sont entourĂ©es par un chevron entrant  <> et un chevron sortant  </> . On appelle ça des balises. Il suffit ensuite d'insĂ©rer au sein des balises un code textuel indiquant la nature de la mise Ă  forme Ă  appliquer. Par exemple, pour mettre un texte en italique, on rajoute bĂȘtement la lettre i.

Voici un exemple :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous<i>Ceci est un texte en italique</i>
--- Fin du code ---
donne : Ceci est un texte en italique

Rien de sorcier donc. Seulement voilà, il y a un hic : insérer du code HTML dans le corps d'un message sur un forum peut poser de sérieux problÚme de sécurité, car le HTML, ce n'est pas juste une histoire d'italique et ou de jolies couleurs. Donc on a inventé un langage de mise en forme similaire, mais volontairement limité. Et c'est comme ça qu'est né le langage de mise en forme BBCODE.

BBCODE signifie  Bulletin Board Code, « bulletin board » Ă©tant le surnom anglais des forums de discussion. Sa diffĂ©rence la plus flagrante par rapport au HTML, est que ce ne sont pas des chevrons qui sont utilisĂ©s pour les balises, mais des crochets :  [] et  [/] . C'est d'ailleurs Ă  cela qu'on reconnaĂźt du premier coup d’Ɠil qu'un texte est du BBCODE et non du HTML.

Ainsi, en BBCODE, notre exemple précédent devient :

Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[i]Ceci est un texte en italique[/i]
--- Fin du code ---

Sur un clavier français, on obtient les crochets avec les touches Alt-Gr-5 pour   [   et Alt-Gr-) pour   ]  . Pourquoi tant de complications ? C'est que sur un clavier anglais, les crochets sont accessibles sans combinaison de touches, et comme le BBCODE est une crĂ©ation anglo-saxonne... Les Français n'avaient qu'Ă  ĂȘtre plus rapides ;D !

Le BBCODE diffĂšre aussi du HTML par ces points :

✅ Si le langage est Ă  la base limitĂ©, il est plus explicite et convivial que le HTML.
✅ Il ne rĂ©pond pas Ă  des normes prĂ©cises, mĂȘme s'il existe une convention pour les balises les plus courantes, sinon d'un forum Ă  l'autre ça deviendrait ingĂ©rable (gras, italique, alignement, insertion d'une image...).
✅ L'absence de normalisation oblige l'utilisateur à s'adapter à chaque forum : une balise peut fonctionner sur un forum et pas un autre.
✅ Cette absence de normalisation fait aussi qu'un administrateur de forum peut crĂ©er une foule de BBCODE originaux, alors que le HTML est figĂ©, car normalisĂ©.

Pourquoi utiliser du BBCODE plutĂŽt que la WYSIWYG ?

Sur ce forum (comme sur beaucoup d'autres), il est bien entendu possible de rédiger ses messages comme on le fait avec un traitement de texte : il suffit de sélectionner une portion de texte, de lui appliquer une mise en forme particuliÚre, et le résultat est visuel et immédiat. Seulement voilà, si le WYSIWYG (What You See Is What You Get, vous obtenez ce que vous voyez) peut dépanner... :

✅ ... Le BBCODE peut Ă©voluer en fonction de ses propres besoins, avec la crĂ©ation de balises personnalisĂ©es.
✅ ... Le BBCODE permet de structurer sa mise en page.
✅ ... Le BBCODE permet avec une simple balise de formater des paragraphes entiers (comme des styles).
✅ ... Surtout : vous pouvez sauvegarder votre texte en BBCODE dans un simple fichier texte pour une utilisation future sur un autre forum (moyennant peut-ĂȘtre adaptation pour les balises non conventionnelles).
 
Comment utiliser le BBCODE sur ce forum ?

Pour bien utiliser le BBCODE, gardez Ă  l'esprit ces petites choses

✅ Le BBCODE, ce n'est que du texte, donc copiez-coller Ă  volontĂ©, vous ne risquez pas de faire des bĂȘtises. Utilisez souvent la fonction PrĂ©visualiser pour voir ce que donne votre prose.
✅ Toute balise ouverte doit ĂȘtre fermĂ©e :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[b]mauvais
[b]bon[/b]
--- Fin du code ---
✅ Ne croisez jamais les balises. Lorsque des balises sont imbriquĂ©es, elles doivent ĂȘtre fermĂ©es dans le bon ordre :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[b][i]mauvais[/b][/i]
[b][i]bon[/i][/b]
--- Fin du code ---
✅ Une balise peut parfois avoir un attribut, dont la valeur est prĂ©cĂ©dĂ©e du Ă©gal  = .

Exemple 1 :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[color=red]J'Ă©cris en rouge[/color]
--- Fin du code ---
donne : J'Ă©cris en rouge
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[color=#008800]J'Ă©cris en vert foncĂ©[/color]
--- Fin du code ---
donne : J'écris en vert foncé

Exemple 2 :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[picw=240]http://cocci10.fredisland.net/modules/images/COCCIKIT.png[/picw]
--- Fin du code ---
donne une image forcée à 240 pixels de large :
(picw est une balise spéciale de ce forum, ainsi que d'autres que vous pourrez tester à volonté.)

Exemple 3 -  Une URL peut s'Ă©crire de deux façons:
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vousSans titre : [url]http://cocci10.fredisland.net/fofo[/url]
Avec titre : [url=http://cocci10.fredisland.net/fofo]Le forum Cocci 10[/url]
--- Fin du code ---
Donnent :
Sans titre :  Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous
Avec titre : Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous

Utilisation

Vous avez donc compris que toute portion de texte que vous souhaitez formater doit ĂȘtre entourĂ©e de balises BBCODE.

Les boutons en haut de l'Ă©diteur vous permettent d'insĂ©rer directement ces balises plutĂŽt qu'avoir Ă  les apprendre par cƓur pour ensuite les saisir au clavier avec tous les risques d'erreur que cela comporte. Sachez simplement que :
✅ Si vous n'avez sĂ©lectionnĂ© aucun texte et que vous cliquez sur un bouton BBCODE, les balises seront insĂ©rĂ©es telles quelles Ă  l'emplacement du curseur. À vous ensuite d'insĂ©rer Ă  l'intĂ©rieur votre texte (usez et abusez du copier-coller que je vous dis !).
Exemple avec la balise IMG :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[img][/img]
--- Fin du code ---
✅ Si vous cliquez sur un bouton BBCODE aprĂšs avoir sĂ©lectionnĂ© du texte, les balises seront insĂ©rĂ©es de part et d'autre de la sĂ©lection.
Exemple avec la mĂȘme balise IMG une fois que l'url de l'image est sĂ©lectionnĂ©e :
Code: Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous[img]http://cocci10.fredisland.net/modules/images/COCCIKIT.png[/img]
--- Fin du code ---
✅ Une petite exception pour les binettes : ce ne sont pas du BBCODE, mais elles sont apparentĂ©es. Elles ne comportent toutefois pas de balises.
✅ Si vous laissez quelques instant le pointeur de votre souris par-dessus un bouton BBCODE, une petite infobulle d'aide s'affiche.


Voilà, vous savez tout. À vous de jouer avec le BBCODE !

Pour conclure, je vous invite à consulter cette page qui vous parle des BBCODE cachés du forum :
Les visiteurs ne peuvent voir les liens. Enregistrez-vous ou connectez-vous

Exercice

À vous de plancher ;) :

Cocci 10, c'est vraiment cool !

Navigation

[0] Index des messages

Utiliser la version classique
Powered by Advanced Topic Prefix Pro
Powered by SMFPacks Advanced Attachments Uploader Mod
Powered by SMFPacks Emoji Picker Mod