Exemple de création de tuto

Auteur :nardo26

Description

Ce tuto a été réalisé selon les principes que je vais vous expliquer ci-dessous...

Vous devez commencer en récupérant le fichier ci-dessous. C'est le squelette de votre tuto.

Nous allons voir ensemble comme rédiger un tuto à partir de ce fichier.

L'entête

L'entête est très important. Il est composé de quatre lignes qui permettent d'identifier et de déclarer votre tuto à la page d'intro (le sommaire). Sans elles, votre tuto n'apparaitra pas !.

Je rappelle : Ces infos n'apparaitrons pas dans votre tuto mais elles sont indispensables pour son identification.

Le titre du tuto: <meta name="description" content="Titre du tuto"/>
Le nom de l'auteur qui a rédigé le tuto (vous !) <meta name="author" content="votre pseudo"/>
Le niveau de difficulté. Vous avez 3 possibilités : debutant, moyen, confirme.
Il faut bien respecter cette écriture, pas de majuscules ni d'accents sinon l'affichage ne sera pas correct dans le sommaire.
<meta name="niveau" content="debutant"/>
La section:
<meta name="section" content="Mathematique"/>

Le titre de la fenêtre du navigateur:

Ce titre doit être écrit entre les balises <title>. C'est le texte qui apparaitra dans l'onglet de votre navigateur.

Exemple:

<title>Tuto-Panoramic</title>

Nous avons fini de paramétrer notre tuto. Pour le contenu entre les balises <style> nous y reviendrons plus tard...

Rédaction

Les titres

Les titres sont définis grace à la balise <hx> (le 'x' répresente le niveau hierarchique

<h1>1er niveau</h1>

<h2>2ème niveau</h2>

<h3>3ème niveau</h3>

...

Les paragraphes

Les paragraphes sont délimités par la balise <p>

Exemple:

<p>L’objectif de ce tutoriel est de montrer la méthode à adopter pour réaliser un programme avec Panoramic en tirant tous les avantages de l’environnement Windows.</p>
<p>Pour cela, nous allons réaliser un programme effectuant des traitements sur des nombres et des textes, avec une interface visuelle agréable, plusieurs boutons cliquables, un menu d’application, entre autres.</p>
<p>Nous allons procéder étape par étape, avec des explications détaillées à chaque niveau, et un code source Panoramic évoluant en conséquence, jusqu'au programme complet.</p>

Donnera ceci :

L’objectif de ce tutoriel est de montrer la méthode à adopter pour réaliser un programme avec Panoramic en tirant tous les avantages de l’environnement Windows.

Pour cela, nous allons réaliser un programme effectuant des traitements sur des nombres et des textes, avec une interface visuelle agréable, plusieurs boutons cliquables, un menu d’application, entre autres.

Nous allons procéder étape par étape, avec des explications détaillées à chaque niveau, et un code source Panoramic évoluant en conséquence, jusqu'au programme complet.

Les blocs sources

La fonction insertCode()vous permet d'insérer du code source dans votre tuto.
Trois paramètres sont nécessaire:

Syntaxe :

insertCode('MonTitre','MonFichier'); /* affiche le code avec le bouton "Afficher/Cacher" */
insertCode('MonTitre','MonFichier',FALSE); /* le code ne peut pas être "replié" */

Les paramètres:

insertCode('Titre','Fichier',Bouton) : ce paramètre ajoute un titre au code source. Vous pouvez mettre une chaine vide '' si vous n'en voulez pas.
insertCode('Titre','Fichier',Bouton) : C'est le nom du fichier à insérer. (Attention les majuscules et minuscules sont importantes)
insertCode('Titre','Fichier',Bouton) : Il indique si le code peut être "replié" (valeur:TRUE) ou non (valeur:FALSE). Ce paramètre est optionnel. Par défaut il est à TRUE.

Par exemple, pour afficher le code présent dans ce tuto (voir en bas du tuto), j'ai écris ceci:

<?php insertCode('Le source de cette page','tuto5.php');?>

Les cadres

Pour faire un cadre et mettre du texte dedans rien de plus simple : <div class="cadre w50">votre texte</div>

exemple pour un cadre de 50% de largeur.

pour un cadre de 60% vous mettez 'w60', pour 80% 'w80', etc...

Pour finir...