4. Rédigez votre tutoriel

Vous rédigerez votre tutoriel directement depuis l’interface de Living Tuts.

a. Connectez-vous avec vos identifiants

Sur le site, dans la colonne de droite ou tout en bas dans le pied de page (footer), vous avez un module concernant votre compte. Si vous n’êtes pas connecté, il vous invitera à  le faire, vous n’avez qu’à  entrer vos informations de connexion (identifiant et mot de passe).

Une fois que cela est effectué, 3 liens vous sont présentés. Cliquez sur le premier (Tableau de bord ou Dashboard). Vous voilà  dans la zone d’administration du site.

b. Rendez-vous dans Articles > Ajouter

A gauche est situé un menu vertical. En cliquant ou en déroulant le lien Articles apparaîtra un sous-menu (toujours dans ce menu de gauche sous Articles).

Vous n’avez plus qu’à  cliquer sur Ajouter. Vous atterrissez à  présent sur une nouvelle page où vous pourrez écrire votre tutoriel.

Des sauvegardes régulières s’effectuent automatiquement et vous pouvez quitter cette page et revenir dessus autant que vous le voulez. Une fois la rédaction de votre tutoriel terminé, vous pourrez cliquer sur le bouton Soumettre à  la publication et attendre qu’un administrateur relise et valide votre tutoriel.

c. La rédaction via l’éditeur de texte

Sur cette page se présente à  vous plusieurs éléments.

  • Le bloc de titre en haut : choisissez un titre pertinent et accrocheur.
  • En dessous, l’éditeur de texte : c’est ici que tout se passe. Semblable à  la plupart des éditeurs de texte, vous pourrez écrire votre tutoriel, y ajouter des images, vidéos ou sliders et le mettre en page. Pour plus d’informations sur celui-ci, référez-vous à  l’étape suivante.
  • A droite, vous pouvez ajouter des sliders, aussi appelés « SlideDecks » semblables à  celui sur la page d’accueil. Référez-vous à  une étape un peu plus loin pour savoir comment les utiliser et à  quel moment.
  • A droite en dessus se situe un bloc très important nommé Publier. Vous avez principalement 3 boutons : Enregistrer brouillon (pour enregistrer votre brouillon et sachez qu’en plus de ce bouton, des sauvegardes automatiques sont effectuées très souvent), Prévisualiser (pour avoir un aperçu de ce à  quoi ressemblera le tutoriel une fois publié sur le site, seul vous pouvez voir cette page). Enfin le très important Soumettre à  la publication qui vous permet, lorsque vous avez terminé, de prévenir un administrateur qu’il peut relire et publier votre tutoriel. Attention : si vous cliquez sur ce bouton et qu’un administrateur a publié votre tutoriel, vous ne pourrez plus le modifier !
  • Le reste est décrit dans la partie « e. Informations à  rentrer ».

d. Fonctionnement de l’éditeur de texte

Pour écrire des titres à  l’intérieur du tutoriel (exemple : 1. Idée de départ, 2. Méthodologie, etc…), écrivez votre titre dans l’éditeur de texte sur une nouvelle ligne, sélectionnez-le et allez dans le menu déroulant Format > Titre 2.

NB. Ne vous inquiétez pas si les polices d’affichages sont différentes de celles présentes sur le site, ne vous en préoccupez pas. Cela sera automatiquement mis en page une fois sur le site.

Attention : Votre tutoriel doit obligatoirement commencer par l’insertion d’une image du résultat final du tutoriel d’une taille de 666*220 px. Voyez plus loin comment insérer une image.

Pour écrire des astuces tout au long de votre tutoriel, vous êtes prié de respecter la charte graphique du site. Sélectionnez le texte de votre astuce, mettez-le en italique et de couleur bleue (cf screenshot ci-dessous).

NB. Si vous avez un doute ou qu’un détail vous gêne, ne vous cassez pas la tête. Une fois soumis, un administrateur viendra de toute façon relire et terminer la mise en page de votre tutoriel pour plus de cohérence tout au long du site. Ne vous étonnez pas de voir quelques modifications minimes de mise en page une fois le tutoriel en ligne sur le site.

NB2. Si vous constatez que vos sauts de ligne ont disparus, ne vous alarmez pas car c’est normal ! Le site ré-encode automatiquement ce que l’utilisateur écrit et n’oubliez pas que nous repassons toujours derrière vous pour fignoler.

Pour insérer des images dans le tutoriel cliquez sur le premier bouton après « Envoyer/Insérer » tout en haut de l’éditeur de texte (cf screenshot).

NB. Cela peut prendre plusieurs secondes de chargement. Une fenêtre va s’ouvrir et vous pourrez alors choisir via le menu à  onglets d’insérer des images depuis votre ordinateur, depuis le web ou depuis la bibliothèque.

  • Depuis votre ordinateur : par défaut, vous êtes dans cette section, vous n’avez qu’à  cliquer sur le bouton Parcourir et sélectionner depuis votre disque dur une ou plusieurs photos à  uploader. L’une après l’autre, elle vont se télécharger sur le serveur de Living Tuts. Attention : veillez à  bien attendre la fin du téléchargement de toutes les images avant de fermer cette boîte de dialogue ou vous pourrez les ré-uploader.
  • Depuis le web : vous pouvez copier/coller directement l’URL d’une image puis l’ajouter dans cette section.
  • Depuis la bibliothèque : par défaut, la bibliothèque est vide. En revanche, une fois que vous avez ajouté des images à  l’article depuis votre ordinateur, vous pouvez aller dans la bibliothèque pour les retrouver et les insérer.

NB. Toutes les images uploadées doivent être en 72dpi RGB (c’est le format par défaut). Veillez à  redimensionner vos images pour ne pas dépasser un poids de 800 ko et une largeur de 1600 px maximum. L’idéal pour les images illustrant les étapes (donc pas l’illustration finale) est de 666px mais cela peut être plus si nécessaire, toujours dans les limites citées.

NB2. De préférence, veillez à  toujours ajouter une description à  votre image (champ alt= »" en HTML).

Pour faire un lien vers un site web, il suffit de sélectionner votre texte qui servira de lien et de cliquer sur l’icône en forme de chaîne. Ensuite vous pouvez marquer le lien et la description dans la fenêtre qui s’ouvre. Cliquez sur OK.

Pour uploader une vidéo et l’insérer dans le tutoriel, nous vous invitons à  lire la partie 5 intitulée « dans le cas d’un tutoriel vidéo »

e. Informations à  rentrer

En plus du tutoriel à  écrire, vous devez rentrer quelques informations supplémentaires :

La catégorie : Choisissez la catégorie la plus pertinente pour votre tutoriel. Pour cela, toujours sur la page de rédaction du tutoriel, dans la colonne de droite se trouve un module de Catégories, il suffit juste de cocher celle qui vous semble cohérente.

Les tags (optionnel mais recommandé) : Vous pouvez également rentrer des tags (Mots-clefs) correspondant à  votre tutoriel (exemple : « concept art » ou « jQuery »). Ceux-ci se trouvent sous le bloc des catégories, il suffit de taper votre mot-clef et de cliquer sur Ajouter. Il est possible que ce mot-clef existe déjà  et soit dans la liste des mots-clefs les plus populaires, sélectionnez-le alors à  cet endroit.

La miniature de l’article : Ceci est très important. Il faut en effet que vous uploadiez aussi la miniature de votre article qui apparaîtra sur la page d’accueil de Living Tuts. Toujours sur cette même page, tout en bas se trouve un bloc nommé « Post Thumbnail Options ». C’est donc ici que vous devez choisir une miniature à  uploader depuis votre ordinateur en cliquant sur Parcourir ou Browse, puis valider.

Infos sur le tutoriel : temps, programme et difficulté. Tout ce que vous avez à  faire est de noter au début de votre tutoriel ces informations. Nous nous occuperons de les mettre en place convenablement pour vous sur le site.

f. Pour mettre en forme de code (HTML, PHP, AS3, etc…)

Un « code highlighter » a été mis en place afin de différencier le code sur le site du texte normal. Pour cela il vous faut cliquer sur l’onglet HTML de l’éditeur de texte (à  droite des boutons). Une fois ici, il vous suffit d’écrire ceci :

[code lang= »php »]

votrecode

[/code]

Bien sûr, à  vous de mettre le bon langage après la balise « lang » (ici du PHP). Si vous prévisualisez votre article, le code sera différencié et coloré. Encore une fois, si vous rencontrez des difficultés, contactez-nous.


5. Dans le cas d’un tutoriel vidéo (screencasting)

6. Informations et Conseils pour rédiger un tutoriel