BBComposer : Manuel d'utilisation du BBComposer

Manuel d'utilisation

Ce manuel vous permet une bonne prise en main du BBComposer. En le lisant entièrement, vous maîtriserez toutes les subtilités relatives à l'utilisation du BBComposer.

Introduction
Fonctions sémantiques (XHTML)
Fonctions stylistiques (CSS)
Options

I. Introduction

Le BBComposer permet une édition intuitive des XBBCodes, du XHTML, de la syntaxe Wiki et des BBCodes. Pour activer le composeur, il faut, en premier lieu se rendre sur une page contenant un formulaire dont l'un des champs est un champ multiligne (textarea) destiné à contenir l'un de ces quatre langages. A cet endroit, cliquez avec le bouton droit de la souris dans le champ que vous souhaitez éditer, sélectionnez BBComposer et indiquez le type de langage utilisé par le champs. Pour le savoir contactez l'administrateur du site.

Un nouvel onglet s'ouvre ou le champ multiligne disparaît (selon les préférences choisies dans les options). C'est à partir de ce moment que vous allez pouvoir commencer la saisie du contenu de votre site. Une fois l'édition terminée, il vous suffit de cliquer sur le bouton mode édition afin de revenir au formulaire normal et valider les informations saisies.

II. Fonctions sémantiques

Saisie du contenu

La fonctionnalité première du BBComposer est de vous permettre de saisir le contenu de votre site Internet. Il s'agit de la première étape. En effet, nous vous conseillons de ne mettre en forme le document que dans un second temps et de commencer par la saisie au kilomètre du texte. Vous remarquerez qu'en tapant sur la touche Entrée, un nouveau bloc est créé. Pour aller à la ligne sans créer de nouveau bloc, cliquez sur le bouton Saut de ligne de la barre d'outils ou sur les touches Shift + Entrée de votre clavier.

Vous remarquerez que le texte que vous tapez est mis en forme différemment que sur votre propre site Internet. Ne vous en souciez pas, une fois les modifications enregistrées, vous verrez que le texte sera automatiquement mis en forme aux couleurs de votre site.

Qualification des blocs

Pour l'instant, la totalité du texte se trouve dans des paragraphes. Or, un texte est bien plus complexe que cela, il peut contenir des titres, ou encore, des listes. Pour ajouter ce type de blocs, deux solutions s'offrent à vous.

La première, sélectionner un bloc, et le transformer en un bloc de votre choix grâce à la barre d'outil ; titres (1,2, 3, 4, 5, 6), listes (numérotées, simples ou de définitions), texte préformaté (pour les lignes de code) et adresse.
La seconde, s'assurer qu'aucun bloc n'est sélectionné et cliquer directement sur le type de bloc que vous souhaitez insérer et il apparaîtra à la fin de votre document.

Petites astuces :

Pour naviguer de bloc à bloc, vous pouvez utiliser les touches Ctrl + Flèche Haut et Ctrl + Flèche Bas.
Pour créer augmenter le retrait d'une liste (listes imbriquées), placez le curseur sur un item et faîtes Tab. Pour diminuer son retrait, faîte Shift + Tab.

Groupement des blocs

Comme vous pourrez le constater, il existe des blocs d'un type particulier car il peuvent englober les blocs que nous avons listé plus haut.

Ces blocs sont appelés super-blocs. Parmi eux, on peut citer la citation longue, la division stylistique, les marqueurs d'insertion et de suppression.

Pour appliquer ces super-blocs à un ou plusieurs blocs, il suffit de les sélectionner et de cliquer sur le bouton correspondant. Pour les supprimer, choisissez les blocs que vous souhaitez retirer et cliquez à nouveau sur le bouton.

La citation longue: Ce bouton doit être utilisé lorsque vous citez le contenu d'une oeuvre, d'une autre page ou simplement d'un message dans un forum.
La division stylistique: Celle-ci permet de regrouper plusieurs blocs afin de leur appliquer des styles ou une langue.
Les marqueurs d'ajout ou d'insertion: Permettent de spécifier qu'un contenu a été ajouté ou supprimé.

Mise en forme du texte

Enfin, afin de donner de la plus value à votre page, vous pouvez utiliser les boutons de qualification sémantique. Pour ce faire, vous devez sélectionner le texte que vous voulez qualifier et cliquer sur l'un des boutons de la barre d'outil. Voici leur signification :

Important, emphase: Ces boutons permettent de signifier qu'une phrase ou un mot est important. Emphase marquant une simple emphase et important une plus forte insistance.
Citation: Sert à insérer une citation. Exemple : Comment allez vous ?
Référence: Pour citer un auteur ou un ouvrage. Exemple : Le Parfum de Patrick Süskind.
Acronyme: S'utilise lorsque vous souhaitez montrer la signification d'un sigle. Exemple : PAO.
Abréviation: Une abréviation qui ne peut pas être cataloguée comme un acronyme. Exemple : C'est une belle photo !
L'intérêt de cette valorisation est qu'elle permet de spécifier aux robots qu'il s'agit d'une abréviation et non d'une faute d'orthographe qui pourrait faire baisser la popularité de votre site.
Exposant et indices: Comme leur nom l'indique, ils permettent de mettre un texte en exposant ou en indice. Exemple :
La somme des termes d'une suite arithmétique au rang n s'écrit : U_n = U₀ + q * n
La dérivée de xⁿ est nx^n-1.
Clavier: Permet de marquer un texte à saisir au clavier.
Exemple : Pour valider le formulaire, cliquez sur Entrée.
Variable: Pour marquer un mot comme étant une variable d'un programme.
Supprimé, inséré: Permet de signifier qu'un texte a été ~~supprimé~~ ou inséré. Ces boutons sont mixtes (peuvent être en ligne ou alors contenir des blocs si vous sélectionnez du texte dans plus d'un bloc).
Ancre: Ce bouton sert à donner un nom à une partie du document pour pouvoir l'utiliser ensuite dans un lien. Par exemple, ce lien pointe vers le titre de cette définition. Pour le créer, j'ai ajouté une ancre nommée ancre au titre, et dans le lien, j'ai saisi cette adresse #ancre.
Marqueur stylistique: Il permet de définir une zone du texte pour vous permettre d'appliquer des styles sur ce dernier (voir fonctions stylistiques).
Lien: Ce bouton permet de créer un lien vers un autre site. Attention à saisir la bonne adresse, le mieux est de la vérifier et de la copier/coller.
Images: Permet l'insertion d'une image dans votre site. N'oubliez pas de remplir le texte alternatif qui permet aux personnes qui n'ont pas la possibilité de la voir (web mobile, handicapés visuels...) de comprendre ce qu'elle contient.
Bloc de citation: Cette balise permet, en sélectionnant un ou plusieurs blocs, de créer un bloc de citation.
Bloc stylistique: Un bloc stylistique permet d'appliquer des styles ou un langage à un ou plusieurs blocs.

Annulation

Pour annuler une mise en forme, il vous suffit de placer le curseur à l'endroit d'une mise en forme et de cliquer sur le bouton correspondant pour la faire disparaître.

III. Fonctions stylistiques

Le BBComposer permet aussi d'éditer un document de façon stylistique grâce aux CSS. Pour cela, une barre latérale est disponible dans Outils>CSS. N'oubliez pas de sélectionner l'élément que vous souhaitez modifier avant de faire des modifications et de cliquer sur Appliquer pour les rendre effectives. Pour ôter tous les styles d'un élément, le bouton ôter est tout indiqué.

Textes

Attention ! Ces styles ne doivent pas remplacer l'utilisation des balises sémantiques ! Il s'agit simplement d'apporter un peu plus de gaité à vos textes.

Couleur

En cliquant sur le rectangle, vous pouvez choisir une couleur pour le texte. Rouge, par exemple !

Police

Vous pouvez saisir le nom d'une de vos polices préférées pour le bloc sélectionné ou la choisir dans la liste. Verdana, par exemple, est disponible sur de nombreux systèmes.

Taille

Saisissez la taille que vous souhaitez donner aux textes. Ils peuvent être défini en plusieurs unités différentes : em, px. O.9em par exemple.

Epaisseur

L'épaisseur de vos textes. Malheureusement, les navigateurs supportent assez peu toutes les options possibles...

Style

Un texte en italique en un clic. L'oblique ne fonctionne pas sur tous les navigateurs.

Décoration

Vous pouvez choisir une décoration pour vos textes, souligné par exemple.

Transformation

Vous pouvez transformer les lettres d'un texte. Tout en majuscule !

Extension

Cette propriété est inutile car aucun navigateur ne la reconnait pour le moment.

Variante

Permet de créer un effet petites majuscules pour les textes.

Alignement

Centrer un texte peut-être utile !

Libérer l'espace

Bart Simpson Permet de spécifier qu'un bloc ne doit s'afficher qu'après avoir libéré l'espace.

Par exemple, ce paragraphe ne s'affiche qu'après la fin de l'image représentant Bart Simpson.

Plus

Ce sont des paramètres d'édition avancée que vous n'utiliserez pas souvent. Sauter cette partie du manuel.

Taille d'ajustement

Permet de définir le rendu souhaité pour la police de caractère afin que, si elle n'est pas disponible, elle soit remplacée par une autre de même type.

Hauteur de ligne

Comme son nom l'indique, cette propriété permet d'ajuster la hauteur de ligne.

Alinéa

Cela peut servir si vous voulez créer un retrait pour la première ligne d'un paragraphe. Ici, 150px ce qui est utile pour illustrer son utilisation, mais pas très beau...

Espacement des mots

La taille de l'espace entre chaque mot.

Espacement des lettres

Même chose, entre chaque lettre.

Espaces blancs

Mode de rendu des espaces blancs.

Ombres

Permet de créer un effet d'ombre, mais pas encore supporté par les navigateurs.

Direction et orientation bidirectionnelle

Propriétés relatives à certaines langues comme l'arabe.

Disposition

Ces valeurs permettent de fixer la disposition des blocs. Elles peuvent être saisies en px et %.

Marges internes

Comme le titre l'indique, il s'agit de définir la marge entre la bordure du bloc et le contenu du bloc. Ici, c'est 1px partout !

Marges externes

Même chose que plus haut, mais à l'extérieur de la bordure. Ici, c'est 10% à gauche et à droite.

Apparence

Relookez vos blocs pour interpeler vos visiteurs !

Arrière plan

Changez la couleur d'arrière plan et voyez la vie en rose !

Bordure

Une bordure sympa peut être créée en mixant toutes les options possibles. Certains styles de bordure ne sont pas supportés par Internet Explorer 6...

IV. Options

Les options du BBComposer vous permettent d'adapter le BBComposer à votre gout.

Options générales

Adresse de votre site Internet: Cette option est explicite, l'utilité de la renseigner est de faire fonctionner les URL relatives dès lors que celles-cis seront supportées.
Chemin de la feuille de Style: Il s'agit de l'URL d'une feuille de style CSS qui servira à donner au BBComposer l'apparence de votre site.
Navigation: Vous pouvez choisir la destination des liens ouverts par le BBComposer, comme par exemple, la page de validation.

Barre d'outils

Toujours afficher la barre d'outils: Si vous désélectionnez cette option, la barre d'outil ne s'affichera qu'en mode édition.
Masquer les boutons inutilisables: Cache les boutons inutilisables avec le langage sélectionné.
Entrer en mode d'édition automatiquement: Cette option permet au BBComposer d'entrer en mode d'édition suite à la détection d'un champs enregistré.
Se souvenir du champs sélectionné: Si vous sélectionnez cette option, vous n'aurez pas à cliquer droit de nouveau pour entrer en mode édition. Le bouton mode édition de la barre d'outils sera suffisant.
Toujours activer la vérification orthographique: Permet d'activer la vérification orthographique même si elle est désactivée dans les options générales de Firefox (attention, cette fonction nécessite l'installation d'un dictionnaire pour Firefox ainsi qu'une version supérieure ou égale à Firefox 2).
Ouvrir la barre latérale en mode édition: Cette option permet d'ouvrir une barre latérale appropriée au langage sélectionné au passage en mode édition.
Affichage: Vous pouvez choisir d'éditer le contenu d'un champs dans un nouvel onglet ou directement dans le formulaire.

Editeur

Adresses de l'éditeur: Ce sont les adresses locales et distantes utilisées pour l'affichage de l'éditeur. En cliquant sur toujours utiliser l'adresse locale, vous forcer le BBComposer à utiliser l'adresse locale (confidentialité). Néanmoins, l'affichage de l'éditeur directement dans la page Web ne permet pas d'utiliser une adresse locale (blocage évident de sécurité de Firefox).
Dimensions du cadre: Cette option permet de spécifier une taille pour l'affichage de l'éditeur dans une page Web.

Langage

Langage d'édition par défaut: Comme son nom l'indique, cette option permet de choisir le langage utilisé par défaut. Vous pouvez choisir de toujours revenir à ce langage en dé-sélectionnant l'option se souvenir du langage sélectionné.
Options du XHTML: Vous pouvez choisir d'indenter le code XHTML. Pour l'instant, cette option ne fonctionne pas encore parfaitement. Par contre, la création d'entitées HTML pour les caractères non ASCII fonctionne très bien.

Téléchargements/Réponse

Il s'agit des réglages nécessaires au téléchargement d'images sur un serveur distant. Reportez-vous aux consignes de configuration spécifiées par l'entité qui vous fournis cette fonctionnalité.

Le BBComposer fonctionne par défaut sur un serveur qui ne peut vous garantir la pérennité de vos téléchargements.

Avancé

Délai de la sauvegarde automatique: Cette option permet de spécifier en millisecondes, le délai entre chaque sauvegarde.
Contenu par défaut de l'éditeur: Ce contenu par défaut doit être en HTML. Il peut être vide si vous le souhaitez.

Champs

Ce tableaux contient les champs enregistrés pour la détection automatique. Ce sont quatre valeurs séparées par des points d'exclamation. Par exemple :
(.*)blogger.com(.*)!^textarea$!xhtml!textarea

La première valeur est l'adresse du site (chaîne ou expression régulière), la seconde, la valeur de l'attribut id, la troisième, le langage (xhtml, xbbcode, mediawiki, bbcode etc...) et enfin, le dernier, la cible de l'éditeur (tab ou textarea).