BBComposer : Manuel d'utilisation du BBComposer

http://bbcomposer.elitwork.com/manuel.html

BBComposer : Manuel d'utilisation du BBComposer

Manuel Questions

Manuel d'utilisation
Ce manuel vous permet une bonne prise en main du BBComposer. En le lisant entirement, vous matriserez toutes les subtilits relatives l'utilisation du BBComposer. 1. 2. 3. 4. Introduction Fonctions smantiques (XHTML) Fonctions stylistiques (CSS) Options

I. Introduction
Le BBComposer permet une dition intuitive des XBBCodes (XHTML Compatible Bulletin Board Codes), du XHTML (eXtensible Content Management System), de la syntaxe Wiki et des BBCodes (Bulletin Board Codes). 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, slectionnez 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 disparat (selon les prfrences 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 termine, il vous suffit de cliquer sur le bouton mode dition afin de revenir au formulaire normal et valider les informations saisies.

II. Fonctions smantiques

Saisie du contenu
La fonctionnalit premire du BBComposer est de vous permettre de saisir le contenu de votre site Internet. Il s'agit de la premire 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 kilomtre du texte. Vous remarquerez qu'en tapant sur la touche Entre, un nouveau bloc est cr. Pour aller la ligne sans crer de nouveau bloc, cliquez sur le bouton ? Saut de ligne ? de la barre d'outils ou sur les touches Shift + Entre de votre clavier. Vous remarquerez que le texte que vous tapez est mis en forme diffremment que sur votre propre site Internet. Ne vous en souciez pas, une fois les modifications enregistres, 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.

1 sur 7

28/04/07 15:08

BBComposer : Manuel d'utilisation du BBComposer

http://bbcomposer.elitwork.com/manuel.html

La premire, slectionner un bloc, et le transformer en un bloc de votre choix grce la barre d'outil ; titres (1,2, 3, 4, 5, 6), listes (numrotes, simples ou de dfinitions), texte prformat (pour les lignes de code) et adresse. La seconde, s'assurer qu'aucun bloc n'est slectionn et cliquer directement sur le type de bloc que vous souhaitez insrer et il apparatra la fin de votre document. Petites astuces : Pour naviguer de bloc bloc, vous pouvez utiliser les touches Ctrl + Flche Haut et Ctrl + Flche Bas. Pour crer augmenter le retrait d'une liste (listes imbriques), placez le curseur sur un item et fates Tab. Pour diminuer son retrait, fate 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 appels 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 slectionner 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 spcifier 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 smantique. Pour ce faire, vous devez slectionner 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 insrer une citation. Exemple : ? Comment allez vous ? ? Rfrence Pour citer un auteur ou un ouvrage. Exemple : Le Parfum de Patrick Sskind. Acronyme S'utilise lorsque vous souhaitez montrer la signification d'un sigle. Exemple : PAO (Publication Assiste par Ordinateur). Abrviation Une abrviation qui ne peut pas tre catalogue comme un acronyme. Exemple : C'est une belle photo ! L'intrt de cette valorisation est qu'elle permet de spcifier aux robots qu'il s'agit d'une abrviation 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 arithmtique au rang n s'crit : Un = U0 + q * n La drive de xn est nxn-1. Clavier Permet de marquer un texte saisir au clavier.

2 sur 7

28/04/07 15:08

BBComposer : Manuel d'utilisation du BBComposer

http://bbcomposer.elitwork.com/manuel.html

Exemple : Pour valider le formulaire, cliquez sur Entre. Variable Pour marquer un mot comme tant une variable d'un programme. Supprim, insr Permet de signifier qu'un texte a t supprim ou [ins]insr[/ins]. Ces boutons sont mixtes (peuvent tre en ligne ou alors contenir des blocs si vous slectionnez 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 dfinition. Pour le crer, j'ai ajout une ancre nomme ? ancre ? au titre, et dans le lien, j'ai saisi cette adresse ? #ancre ?. Marqueur stylistique Il permet de dfinir une zone du texte pour vous permettre d'appliquer des styles sur ce dernier (voir fonctions stylistiques). Lien Ce bouton permet de crer un lien vers un autre site. Attention saisir la bonne adresse, le mieux est de la vrifier 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, handicaps visuels...) de comprendre ce qu'elle contient. Bloc de citation Cette balise permet, en slectionnant un ou plusieurs blocs, de crer 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 disparatre.

III. Fonctions stylistiques

Le BBComposer permet aussi d'diter un document de faon stylistique grce aux CSS (Cascading Style Sheets). Pour cela, une barre latrale est disponible dans ? Outils>CSS ?. N'oubliez pas de slectionner l'lment 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 lment, le bouton ? ter ? est tout indiqu.

Textes
Attention ! Ces styles ne doivent pas remplacer l'utilisation des balises smantiques ! 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 prfres pour le bloc slectionn ou la choisir dans la liste. Verdana, par exemple, est disponible sur de nombreux systmes.

Taille
Saisissez la taille que vous souhaitez donner aux textes. Ils peuvent tre dfini en plusieurs units

3 sur 7

28/04/07 15:08

BBComposer : Manuel d'utilisation du BBComposer

diffrentes : em, px. O.9em par exemple.

http://bbcomposer.elitwork.com/manuel.html

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.

Dcoration
Vous pouvez choisir une dcoration pour vos textes, soulign par exemple.

Transformation
VOUS POUVEZ TRANSFORMER LES LETTRES D'UN TEXTE. TOUT EN MAJUSCULE !

Extension
Cette proprit est inutile car aucun navigateur ne la reconnait pour le moment.

Variante
PERMET DE CRER UN EFFET PETITES MAJUSCULES POUR LES TEXTES.

Alignement
Centrer un texte peut-tre utile !

Librer l'espace
Permet de spcifier qu'un bloc ne doit s'afficher qu'aprs avoir libr l'espace.

Par exemple, ce paragraphe ne s'affiche qu'aprs la fin de l'image reprsentant Bart Simpson.

Plus
Ce sont des paramtres d'dition avance que vous n'utiliserez pas souvent. Sauter cette partie du manuel.

Taille d'ajustement
Permet de dfinir le rendu souhait pour la police de caractre afin que, si elle n'est pas

4 sur 7

28/04/07 15:08

BBComposer : Manuel d'utilisation du BBComposer disponible, elle soit remplace par une autre de mme type.

http://bbcomposer.elitwork.com/manuel.html

Hauteur de ligne
Comme son nom l'indique, cette proprit permet d'ajuster la hauteur de ligne.

Alina
Cela peut servir si vous voulez crer un retrait pour la premire ligne d'un paragraphe. Ici, 150px ce qui est utile pour illustrer son utilisation, mais pas trs beau...

Espacement des mots

La taille de l'espace entre chaque mot.

Espacement des lettres

Mme chose, entre chaque lettre.

Espaces blancs
Mode de rendu des espaces blancs.

Ombres
Permet de crer un effet d'ombre, mais pas encore support par les navigateurs.

Direction et orientation bidirectionnelle

Proprits 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 dfinir la marge entre la bordure du bloc et le contenu du bloc. Ici, c'est 1px partout !

Marges externes
Mme chose que plus haut, mais l'extrieur de la bordure. Ici, c'est 10% gauche et droite.

Apparence

5 sur 7

28/04/07 15:08

BBComposer : Manuel d'utilisation du BBComposer Relookez vos blocs pour interpeler vos visiteurs !

http://bbcomposer.elitwork.com/manuel.html

Arrire plan
Changez la couleur d'arrire plan et voyez la vie en rose !

Bordure
Une bordure sympa peut tre cre en mixant toutes les options possibles. Certains styles de bordure ne sont pas supports par Internet Explorer 6...

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

Options gnrales
Adresse de votre site Internet Cette option est explicite, l'utilit de la renseigner est de faire fonctionner les URL relatives ds lors que celles-cis seront supportes. 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 dslectionnez cette option, la barre d'outil ne s'affichera qu'en mode dition. Masquer les boutons inutilisables Cache les boutons inutilisables avec le langage slectionn. Entrer en mode d'dition automatiquement Cette option permet au BBComposer d'entrer en mode d'dition suite la dtection d'un champs enregistr. Se souvenir du champs slectionn Si vous slectionnez 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 vrification orthographique Permet d'activer la vrification orthographique mme si elle est dsactive dans les options gnrales de Firefox (attention, cette fonction ncessite l'installation d'un dictionnaire pour Firefox ainsi qu'une version suprieure ou gale Firefox 2). Ouvrir la barre latrale en mode dition Cette option permet d'ouvrir une barre latrale approprie au langage slectionn 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 utilises pour l'affichage de l'diteur. En cliquant sur toujours utiliser l'adresse locale, vous forcer le BBComposer utiliser l'adresse locale (confidentialit). Nanmoins, l'affichage de l'diteur directement dans la page Web ne permet

6 sur 7

28/04/07 15:08

BBComposer : Manuel d'utilisation du BBComposer

http://bbcomposer.elitwork.com/manuel.html

pas d'utiliser une adresse locale (blocage vident de scurit de Firefox). Dimensions du cadre Cette option permet de spcifier une taille pour l'affichage de l'diteur dans une page Web.

Langage
Langage d'dition par dfaut Comme son nom l'indique, cette option permet de choisir le langage utilis par dfaut. Vous pouvez choisir de toujours revenir ce langage en d-slectionnant l'option se souvenir du langage slectionn. Options du XHTML Vous pouvez choisir d'indenter le code XHTML. Pour l'instant, cette option ne fonctionne pas encore parfaitement. Par contre, la cration d'entites HTML pour les caractres non ASCII fonctionne trs bien.

Tlchargements/Rponse
Il s'agit des rglages ncessaires au tlchargement d'images sur un serveur distant. Reportez-vous aux consignes de configuration spcifies par l'entit qui vous fournis cette fonctionnalit. Le BBComposer fonctionne par dfaut sur un serveur qui ne peut vous garantir la prennit de vos tlchargements.

Avanc
Dlai de la sauvegarde automatique Cette option permet de spcifier en millisecondes, le dlai entre chaque sauvegarde. Contenu par dfaut de l'diteur Ce contenu par dfaut doit tre en HTML. Il peut tre vide si vous le souhaitez.

Champs
Ce tableaux contient les champs enregistrs pour la dtection automatique. Ce sont quatre valeurs spares par des points d'exclamation. Par exemple :
(.*)blogger.com(.*)!^textarea$!xhtml!textarea

La premire valeur est l'adresse du site (chane ou expression rgulire), la seconde, la valeur de l'attribut id, la troisime, le langage (xhtml, xbbcode, mediawiki, bbcode etc...) et enfin, le dernier, la cible de l'diteur (tab ou textarea).

7 sur 7

28/04/07 15:08