logo du site

Timituto,le site de tutoriaux de A à Z

logo du site

Comment créer un tutoriel

Info


crée par : webmaster
Le :03/03/2010

Avancement :70%

Bonjour,

Vous arrivez sur ce site, vous voulez partager vos connaissances mais vous ne savez pas comment vous y prendre?
Nous allons justement voir ici comment créer un tutoriel !


I- Créer un tutoriel

Pour créer un tutoriel,il vous suffit de cliquer sur le lien "Tutoriels".

Ensuite, sélectionnez un des thèmes qui s'affichent, ce qui fera apparaître les rubriques de ce thème.

Ensuite, la liste des tutoriels apparaît. Ensuite,cliquez sur le bouton http://timituto.free.fr/images/crea-tuto.gif pour créer un nouveau tutoriel.

Pourquoi ce fameux bouton n'apparaît pas?



Il faut être connecté sur le site pour avoir le droit de créer un tuto. Cependant, il n'y a pas moyen de créer un tutorial dans la rubrique "Site timituto", qui est réservée aux administrateurs ;)

II- L'interface de création de tutoriel

Lorsque vous cliquez sur le bouton "Crée un tuto", vous vous retrouvez devant cette page:

Cliquez sur l'image pour la voir

La première zone en haut (juste en-dessous de "Audio" pour mon cas) contiendra le titre de votre tutoriel.

Ensuite vous avez plusieurs catégories: "Intro du tutoriel", qui contiendra l'introduction du tutoriel, "tutoriel", qui sera le tutoriel en lui-même, et "conclusion" qui contiendra la conclusion du tutoriel ;)

Pour modifier une de ces parties, vous devrez cliquer sur le lien "Afficher" (mais ça je pense que vous vous en doutiez déjà :p )

III- Le BBCode supporté

Timituto a un support pour certaines balises BBCode.
Les balises BBCode supportées actuellement sont :
- [ b][/b] Pour mettre le texte en Gras.
- [ i][/i] Pour mettre le texte en Italique.
- [ u][/u] Pour mettre le texte en Souligné.
- [ s][/s] Pour Barré le texte.
- [ color=couleur][/color] pour changer la couleur du texte.(couleur peut etre un nom de couleur en anglais ou une couleur exadecimal : #FFFFFF en autre)
- [ overline=couleur][/overline] Pour changer la couleur de fond du texte.(fonctionne pareil que [ color=][/color])
- [ size=taille] Pour changer la taille du texte. (taille peut prendre comme valeur : ttpetit, tpetit, petit, gros, tgros et enfin ttgros)
- [ img][/img] pour inserer une image.
Pour insérer une image avec la balise "[ img]", il faut mettre l'url de l'image entre ces balises comme cela : [ img]http://adresse.de.mon.image.jpg[/img].

Pour insérer un lien il y a deux solutions :
- [ url]http://timituto.free.fr/[/url] qui affichera un lien ayant pour texte et pour cible l'adresse du lien Exemple : http://timituto.free.fr/
- [ url=http://timituto.free.fr/]Timituto[/url] qui affichera un lien ayant pour adresse celle que vous avez donnez, et pour texte le texte entre les balises. Exemple : Timituto

Pour insérer un email il y a aussi deux solutions :
- [ email]adresse de l'email[/email]qui affichera un lien ayant pour texte et pour cible l'adresse de l'email Exemple : timituto@free.fr
- [ email=adresse de l'email]texte du lien[/email] qui affichera un lien ayant pour adresse donné, et pour texte le texte entre les balises. Exemple : Contacter Timituto

Timituto supporte aussi son propre système de code.

Les balises supportées actuellement sont:
- [titre ] permettant d'afficher un titre
- [left ] permettant d'afficher un texte à gauche
- [center ] permettant de centrer un texte
- [right ] permettant d'afficher un texte à droite
- [qst ] permettant d'insérer une question. Exemple:

la question à poser

- [att ] permettant d'insérer quelque chose à mettre en valeur Exemple:

Faites attention à ceci!

- [err ] permettant d'insérer quelque chose qui ne va pas. Exemple:

Les chiens font des chats

- [inf ] permettant d'insérer une information. Exemple:

Timituto vous explique tout de A à Z

Il est aussi possible d'insérer du code, la balise "[code]" est faite pour ça. Pour l'utiliser, faites: [ code=langage_choisi].
Par exemple [ code=c] void main()
{
printf("Hello world!");
}[/code]
donnera :
Code : c
  1. void main()
  2. {
  3. printf("Hello world!");
  4. }

A noter que comme pour le BBCode, les balises ouvertes doivent être fermées.
Affin de montrer les balise disponible j'ai rajouter un espace dans les balise pour éviter quelle sois prisent pour du BBCode.

il ne faut pas mettre d'espace dans les balise,
sinon celle-ci ne seront pas interprété et par conséquent, affichera le BBCode en plaint milieu du tutoriel.

Pour éviter les erreur de BBCode, il y a un aperçu en dessous du champ de texte pour visionner le tutoriel et voir ainsi les erreur.


Les attributs des balises BBCode (Paramètres facultatif)
Vous vous demandez comment modifier la taille d'une image ? comment afficher un texte au passage de la souris sur un lien ?
Rassurez vous ce n'est pas très compliqué.

Pour ajouter un texte au passage de la souris, il faut ajouter l'attribut : title à la balise souhaité elle fonctionne comme sa : title=votre texte.
elle peut être utiliser QUE dans les ballises URL,EMAIL et IMG, par exemple :
[ url=http://timituto.free.fr/ title=votre texte.]Timituto[/url] donnera :
Timituto

Pour modifier les dimentions de l'image il y a deux attributs width (pour modifier la taille en largeur) et height (pour modifier la taille en hauteur).
Par exemple : [ img width=100 height=100]http://timituto.free.fr/tutoriels/images/2/dj.gif[/img] donnera :
http://timituto.free.fr/tutoriels/images/2/dj.gif

Si vous mettez un seul attribut, l'image gardera les mêmes proportions, par exemple si on a une image de 200 en hauteur par 150 en largeur et qu'on mais height=100 alor l'image serra de 100 en hauteur par
75 en largeur ect...
Ici pour l'exemple si dessus j'aurais put utiliser que un seul attribut !


Conclusion

J'espère que grâce à tutoriel, vous aurez compris comment créer un tutoriel sur ce site.

bas de la page

compatible Mozilla firefoxPour le bon fonctionnement du site, il est conseillé d'utiliser Mozilla Firefox.incompatible internet explorer

© 2009 Valid XHTML 1.1 CSS Valide !

Haut de la Page