Undead Geekies
Salut à toi, Ô geek !
Notre petite communauté t'ouvre ses portes et te souhaite la bienvenue !

[Astuce] Bien utiliser le BBC Code sur le forum

Aller en bas

Cette astuce est :

100% 100% 
[ 5 ]
0% 0% 
[ 0 ]
0% 0% 
[ 0 ]
0% 0% 
[ 0 ]
 
Total des votes : 5

[Astuce] Bien utiliser le BBC Code sur le forum

Message par Melgrin_le_nain le Lun 16 Mai - 21:42

Je me permet ce petit sujet pour faire un point sur la mise en forme sur le forum. Le contenu de ce sujet a été rédigé par un utilisateur du forum Galaxys-team.fr du nom d'Obiseb. Je récupère et j'adapte à ce forum Wink

Vous avez tous (ou presque) déjà utilisé ou au moins vu les bouton au dessus de la fenêtre de saisie des message (pas pour les réponses rapides, l'autre la vrai, la lente ^^), mais je vais approfondir un tout petit peu pour ceux qui voudrais faire un tuto ou quelque chose du genre mais pas uniquement.
Le langage utilisé par le forum est le bbcode qui ressemble beaucoup au html pour ceux qui connaissent.

1/ les marqueurs avec bouton
2/ les autres possibilités de mise en forme
3/ trucs et astuces pour faire vos tuto


1/ Les marqueurs avec bouton


Mise en gras :
Il suffit de sélectionner votre texte et d'appuyer sur le premier bouton : B

exemple
Code:
[b]exemple[/b]

Italique : Il suffit de sélectionner votre texte et d'appuyer sur le bouton : i

exemple
Code:
[i]exemple[/i]

Souligné : Il suffit de sélectionner votre texte et d'appuyer sur le bouton : u

exemple
Code:
[u]exemple[/u]


Citation : En lisant un message il suffit de cliquer sur le bouton "Citer" correspondant et une réponse sera crée incluant le message. Si vous cliquer sur le bouton "Citer", la citation viens se rajouter au message en cours de rédaction. Il est possible également d'utiliser ce marqueur manuellement pour faire une cicattion extérieur par exemple.... le bouton Quote est là pour cela. Attention aux " " de part et d'autre du nom ils sont indispendables.

Obiseb a écrit:exemple
Code:
[quote="Obiseb"]exemple[/quote]

Code : Pour insérer du code dans vos message en tant que texte sans qu'il s'exécute le bouton Code est là pour cela. Il permet également de mettre en valeur le code dans une mise en forme différente du texte pour une meilleur visibilité.

Code:
exemple
Code:
[code]exemple[/code]

Listes : On peut même faire des liste. Pour cela il suffit de mettre chaque élément après une étoile entre crochet et le tout entre 2 marqueur liste. Si on utilise liste = 1 on a des numéro auto devant les différents élements, liste=a on a des lettres. Si je suis pas clair regarder les exemples il le seront plus que moi


  • patati
  • patata
  • non rien

Code:
[list]
[*]patati
[*]patata
[*]non rien
[/list]

  1. patati
  2. patata
  3. non rien

Code:
[list=1]
[*]patati
[*]patata
[*]non rien
[/list]

  1. patati
  2. patata
  3. non rien

Code:
[list=a]
[*]patati
[*]patata
[*]non rien
[/list]

Images : Pour insérer un image il suffit de mettre le liens entre des marqueur "img" grace au bouton du meme nom.


Code:
[img]http://i21.servimg.com/u/f21/14/41/58/29/geek10.jpg[/img]

Liens URL : Pour mettre un liens plusieurs solution soit on colle le liens simplement (éventuellement entre des marqueur "url", mais cela ne change pas grand chose), soit on souhaite mettre un text sur lequel on clique pour y accéder... il suffit de mettre le titre entre les marquer url en indiquant le liens dans le premier avec un = comme dans l'exemple ci dessous. Le bouton URL mettra les marqueur url et /url de part et d'autre de votre section.

exemple
Code:
[url=http://galaxys-team.fr/index.php]exemple[/url]

Taille de la police : Comme la plupart du temps on sélectionne le texte et on choisit dans le nemu déroulant la taille de texte que l'on désire parmis les 5 choix proposés de très petit (7) à très grand(24), la taille normale par défaut correspondant à 12. On peut bien entendu utiliser le menu pour mettre le marqueur et en modifier la valeur comme on le souhaite à la main ensuite.

exemple
Code:
[size=7]exemple[/size]

Couleur de la police : Comme d'hab, on sélectionne on clique sur couleur de la police on choisit et le marqueur apparait. La valeur de la couleur peut être changé à la main comme pour tout les paramètres entre crochet (FFFFFF= noir, 000000=blanc). On peut également indiquer directement le nom de la couleur ... en anglais.
exemple
Code:
[color=#FF00FF]exemple[/color]
exemple
Code:
[color=red]exemple[/color]

Hide : Permet de cacher le texte aux non membres.
Texte caché, vous devez vous enregistrer pour le voir.
Code:
[hide]exemple[/hide]

Spoiler : Permet de cacher un texte au chargement de la page. Il peut être affiché sur simple clic.
Spoiler:
Harry Potter est homosexuel

Code:
[spoiler]exemple[/spoiler]

WoW : Permet de linker un item de l'armurerie de World of Warcraft.
Pour cela, récupérez le numéro de l'item sur la page de description. Ici, l'item est sur la page http://eu.battle.net/wow/fr/item/65017
[wow]65017[/wow]

Code:
[wow]65017[/wow]


Vidéo youtube : Simple d'usage il suffit de mettre le numéro de la vidéo youtube, l'erreur courante étant de mettre l'adresse complète (pas besoin du "https://www.youtube.com/watch?v=").


Code:
[flash(425,350)]http://www.youtube.com/v/W6d-6hgPmy8[/flash]


Dernière édition par Melgrin_le_nain le Mar 17 Mai - 6:57, édité 8 fois (Raison : Complément d'info / ajout du sondage)
avatar
Melgrin_le_nain
Undead-geekies-Master of the dead
Undead-geekies-Master of the dead

Taux de Megeeklorien : 855
Messages : 721
Date d'inscription : 13/03/2011
Localisation : Forgefer

Geek passeport
Mode actuel: Samuraï
Code Genegeek: Computer Geek

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Astuce] Bien utiliser le BBC Code sur le forum

Message par Melgrin_le_nain le Lun 16 Mai - 21:43

2/ les autres possibilités de mise en forme


Barrer : Pour barrer un texte lorsque si édite pour rectifier une erreur mais que l'on souhaite garde la trace pour permettre la compréhension des autres messages il suffit de d'utiliser le marqueur S.

exemple

Code:
[strike]exemple[/strike]


Tableaux Le forum nous permet de faire des tableaux pour mieux présenter certaines informations

Je vais commencer par un exemple le plus simple possible (même s'il est moche) :

ZZZTitre 1Titre 2
Ligne 1122
Ligne 23334444

Code:

[table ]
[tr ] [td ]ZZZ[/td] [td ]Titre 1[/td] [td ]Titre 2[/td][/tr]
[tr ] [td ]Ligne 1  [/td] [td ]1[/td] [td ]22[/td][/tr]
[tr ] [td ]Ligne 2  [/td] [td ]333[/td] [td ]4444[/td][/tr]
[/table]

On utilise 3 marqueurs (attention j'utile pour mes explication des <> au lieu des [ ] pour ne pas que ca devient un tableau) :

  • <table > qui annonce le début du tableau, et [/table] la fin
  • <tr > et </tr> dellimite chaque ligne
  • <td > et </td> entoure le contenu de chaque cellule à l'intérieur des ligne

Les espaces après "table", "td" et "tr" à l'intérieur des crochets sont insdispensable, le code sera recopié tel quel sans être transformé sans ces espaces.


Voici un exemple avec un peu plus de mise en forme :
ZZZTitre 1Titre 2
Ligne 1122
Ligne 23334444

Code:

[table border=5 cellspacing=10 width=280 height=160]
[tr ][td align=center]ZZZ[/td][td align=center]Titre 1[/td][td align=center]Titre 2[/td][/tr]
[tr ][td align=left]Ligne 1[/td][td align=right]1[/td][td align=right]22[/td][/tr]
[tr ][td align=left]Ligne 2[/td][td align=right]333[/td][td align=right]4444[/td][/tr]
[/table]

Signification des différents paramètres :

  • border : taille en pixel des bordures
  • cellspacing : espacement des cellules
  • width : largeur
  • height : hauteur
  • align : alignement (pour les colonnes sont possible, center, right, left )



Dernière édition par Melgrin_le_nain le Lun 16 Mai - 21:49, édité 3 fois
avatar
Melgrin_le_nain
Undead-geekies-Master of the dead
Undead-geekies-Master of the dead

Taux de Megeeklorien : 855
Messages : 721
Date d'inscription : 13/03/2011
Localisation : Forgefer

Geek passeport
Mode actuel: Samuraï
Code Genegeek: Computer Geek

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Astuce] Bien utiliser le BBC Code sur le forum

Message par Melgrin_le_nain le Lun 16 Mai - 21:43

3/ Trucs et astuces pour vos tuto et autres messages


Pour tester votre mise en page n'hésitez pas à utiliser le bouton Prévisualisation.


Si vous voulez faire un tuto et que vous n'avez pas le temps de finir mais que vous ne souhaitez pas tout perdre il suffit d'utiliser le bouton Sauvegarder. Vous retrouverez ensuite votre message dans vos brouillons via le panneau d'utilisateur (en haut à gauche). Vous aurez 2 possibilité éditer le brouillon pour le consulter et le modifier, et le charger comme un nouveau message pour pouvoir le mettre en ligne. Si vous le charger vous pourrez le modifier avant l'envoi (ce qui supprime le brouillon) ou le sauvegarder comme un nouveau brouillon.

Pour faire une copie d'écran :

  • Le plus simple est d'utiliser la touche Imprime Ecran, qui met dans le presse-papier le contenu du bureau.
  • Pour les applications plein écran qui n'acceptent pas cela, vous devrez passer par un logiciel tiers et configurer un raccourci clavier


Héberger la copie d'écran : vous pouvez simplement la partager depuis la galerie vers Picasa ou dropbox par exemple et ensuite utiliser un lien privé sans accès à vos galerie pour le forum. Picasa permet de modifier directement en ligne grâce à un bouton modifier lié à picnik (vous pourrez rogner, faire pivoter redimensionner etc ...). Ensuite il n'y a plus qu'a mettre le liens dans un marqueur "img". Le redimensionnement des images est plus que recommandé pour conserver quelque chose de lisibles par tous et éviter d'alourdir le poids de la page pour ceux qui consulte le forum depuis leur téléphone, ou sur un petit écran.


notez que vous pouvez faire un lien sur une image en cumulant les balises IMG et URL :

Code:
[url=http://undeadgeekies.1fr1.net/][img]http://i21.servimg.com/u/f21/14/41/58/29/geek10.jpg[/img][/url]
avatar
Melgrin_le_nain
Undead-geekies-Master of the dead
Undead-geekies-Master of the dead

Taux de Megeeklorien : 855
Messages : 721
Date d'inscription : 13/03/2011
Localisation : Forgefer

Geek passeport
Mode actuel: Samuraï
Code Genegeek: Computer Geek

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Astuce] Bien utiliser le BBC Code sur le forum

Message par Melgrin_le_nain le Mar 17 Mai - 2:36

4/ Balise Bonus

On termine avec la balise "spécial Léo' " (référence à sa fiche de personnage Wink )



Désolé, c'était plus fort que moi...
avatar
Melgrin_le_nain
Undead-geekies-Master of the dead
Undead-geekies-Master of the dead

Taux de Megeeklorien : 855
Messages : 721
Date d'inscription : 13/03/2011
Localisation : Forgefer

Geek passeport
Mode actuel: Samuraï
Code Genegeek: Computer Geek

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Astuce] Bien utiliser le BBC Code sur le forum

Message par Léo' le Mar 17 Mai - 3:35

Melgrin_le_nain a écrit:On termine avec la balise "spécial Léo' " (référence à sa fiche de personnage Wink )

J'en ai un autre, un peu dans ce goût là :


D'ailleurs pour la peine, j'ai créé une section "tatouages geek".
avatar
Léo'
Admin
Admin

Taux de Megeeklorien : 698
Messages : 327
Date d'inscription : 15/04/2010
Age : 29
Localisation : Nantes

Geek passeport
Mode actuel: Geek
Code Genegeek: Geek Girl

Voir le profil de l'utilisateur http://mad-smile.blogspot.com/

Revenir en haut Aller en bas

Re: [Astuce] Bien utiliser le BBC Code sur le forum

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum