Formulaire:Tutoriel : Différence entre versions

@@ Ligne 3 : / Ligne 3 : @@
 <div class="container">
 <div class="new-tutorial-page">
-{{#ifanon:<div class="alert alert-warning" role="alert"><strong>Oups !</strong> Vous n'avez pas la permission de créer un tutoriel car vous n'êtes pas connecté. [[Special:UserLogin/signup|Créer un compte]] ou [[Special:UserLogin|connectez-vous]].</div>
+{{#ifanon:<div class="alert alert-warning" role="alert"><strong>Oups !</strong> Vous n'avez pas la permission de créer un tutoriel car vous n'êtes pas connecté. [[Special:UserLogin/signup|Créez un compte]] ou [[Special:UserLogin|connectez-vous]].</div>
 </div>
 </div>
@@ Ligne 16 : / Ligne 16 : @@
 <div class="row">
 <div class="col-md-4 col-sm-4 col-xs-12">
-[[Wikifab:Indispensable|<span class="contribute-block">
+[[Wikifab:Premiers_pas|<span class="contribute-block">
 <span class="glyphicon glyphicon-thumbs-up icon-contribute" aria-hidden="true"></span>
 <span class="contribute-block-title">Premiers pas</span>
@@ Ligne 23 : / Ligne 23 : @@
 </div>
 <div class="col-md-4 col-sm-4 col-xs-12">
-[[Page en construction|<span class="contribute-block">
+[[Réussir_vos_photos_de_tutoriels|<span class="contribute-block">
 <span class="glyphicon glyphicon-camera icon-contribute" aria-hidden="true"></span>
 <span class="contribute-block-title">Prendre des photos</span>
@@ Ligne 52 : / Ligne 52 : @@
 <div class="col-md-2 col-sm-2 col-xs-12 edit-form-title">Catégorie(s)</div>
 <div class="col-md-10 col-sm-10 col-xs-12">{{{field|Area|mandatory|class=form-checkbox}}}</div>
+</div>
+<div class="row table-edit-form">
+<div class="col-md-2 col-sm-2 col-xs-12 edit-form-title">Mot(s)-clé(s)</div>
+<div class="col-md-10 col-sm-10 col-xs-12 custom-tooltip">{{{field|Tags|class=form-tokens|input type=tokens|size=}}} {{#info:Entrez 4 à 5 mots clés pour décrire votre tutoriel (séparez chaque mot clé par une virgule).}}</div>
 </div>
 <div class="row table-edit-form">
@@ Ligne 72 : / Ligne 76 : @@
 </div>
 <div class="col-md-4 col-sm-4 col-xs-12 col-pic-detail">
-{{{field|Main_Picture|default=|uploadable|size=25|class=form-picture|image preview}}}
+<div class="msuploadContainer">
+{{{field|Main_Picture|uploadable|size=25|class=form-picture|image preview}}}
+{{{field|Main_Picture_annotation|input type=editableImage|target=Main_Picture}}}
 {{{end template}}}
+</div>
 </div>
 </div>
@@ Ligne 87 : / Ligne 94 : @@
 <div class="material-tool-list row">
 <div class="col-md-6 col-sm-6 col-xs-12"><div class="edit-step-title">Liste des matériaux</div>
-{{{field|Material|input type=textarea|rows=8|placeholder=Listez les matériaux nécessaires à la réalisation de votre tutoriel.
+{{{field|Material|input type=textarea|rows=8|class=form-textarea|placeholder=Listez les matériaux nécessaires à la réalisation de votre tutoriel.
 Privilégiez les puces (bullet points). Pour activer une puce, entrez le symbole étoile (*) au début de chaque ligne.
 L'utilisation de noms commerciaux (marques) n'est autorisé que si la réalisation de votre tutoriel n'est possible qu'avec le produit de la marque en question.}}}
 <div class="hrContentMinor-2"></div>
 <div class="edit-step-title">Liste des outils</div>
-{{{field|Tools|input type=textarea|rows=8|placeholder=Listez les outils nécessaires à la réalisation de votre tutoriel.
+{{{field|Tools|input type=textarea|rows=8|class=form-textarea|placeholder=Listez les outils nécessaires à la réalisation de votre tutoriel.
 Privilégiez les puces (bullet points). Pour activer une puce, entrez le symbole étoile (*) au début de chaque ligne.
 Utilisez le nom générique de l'outil et ne citez pas de noms commerciaux (marques).}}}
 </div>
-<div class="col-md-6 col-sm-6 col-xs-12 col-pic-step">
+<div class="col-md-6 col-sm-6 col-xs-12">
+<div class="col-pic-step msuploadContainer">
 {{{field|Step_Picture_00|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_00_annotation|input type=editableImage|target=Step_Picture_00}}}
 <p class="upload-instructions">Votre image sera visible après l'enregistrement de la page.</p>
 <div class="btn btn-primary" type="button" data-toggle="collapse-next"  aria-expanded="false" >+ Ajouter des photos </div>
 <div class="collapse" id="collapseExample">
 <div class="well add-more-pics">
-<span>2ème photo : </span>{{{field|Step_Picture_01|size=32|class=form-picture|default=|uploadable}}}
+<span>2ème photo : </span>{{{field|Step_Picture_01|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_01_annotation|input type=editableImage|target=Step_Picture_01}}}
-<span>3ème photo : </span>{{{field|Step_Picture_02|size=32|class=form-picture|default=|uploadable}}}
+<span>3ème photo : </span>{{{field|Step_Picture_02|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_02_annotation|input type=editableImage|target=Step_Picture_02}}}
-<span>4ème photo : </span>{{{field|Step_Picture_03|size=32|class=form-picture|default=|uploadable}}}
+<span>4ème photo : </span>{{{field|Step_Picture_03|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_03_annotation|input type=editableImage|target=Step_Picture_03}}}
-<span>5ème photo : </span>{{{field|Step_Picture_04|size=32|class=form-picture|default=|uploadable}}}
+<span>5ème photo : </span>{{{field|Step_Picture_04|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_04_annotation|input type=editableImage|target=Step_Picture_04}}}
-<span>6ème photo : </span>{{{field|Step_Picture_05|size=32|class=form-picture|default=|uploadable}}}{{{end template}}}
+<span>6ème photo : </span>{{{field|Step_Picture_05|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_05_annotation|input type=editableImage|target=Step_Picture_05}}}
+</div>
 </div>
 </div>
@@ Ligne 118 : / Ligne 133 : @@
   Fichiers=
 <div class="alert alert-info" role="alert">Hébergez vos fichiers sur la plateforme de gestion de fichiers de votre choix (telles que Github ou Bitbucket) ou uploadez vos fichiers sur Wikifab.</div>
-<div class="file-subtitle">Ajoutez les liens vers les plateformes sur lesquelles vos fichiers sont hébergés <span class="label label-info">Recommandé</span> :</div>
+<div class="row">
-<div class="add-attachments">{{{field|ExternalAttachmentsLinks|holds template}}}</div>
+<div class="col-md-6 col-sm-6 col-xs-12 box-file-form">
-<hr>
+<div class="file-subtitle">Ajoutez un lien vers le site sur lequel votre fichier est hébergé</div>
-<div class="file-subtitle">Uploadez vos fichiers :</div>
+<div class="add-attachments">{{{field|ExternalAttachmentsLinks|holds template}}}</div></div>
+<div class="col-md-6 col-sm-6 col-xs-12 box-file-form">
+<div class="file-subtitle">Uploadez vos fichiers sur Wikifab</div>
 <div class="add-attachments add-attachments-upload">{{{field|Tuto_Attachments|holds template}}}</div>
+</div>
 </tabber>
 </div>
 {{{end template}}}
-{{{for template|ExternalAttachmentsLinks|multiple|embed in field=Materials[ExternalAttachmentsLinks]}}}{{{field|ExternalAttachmentsLinks|input type=text}}}{{{end template}}}
+{{{for template|ExternalAttachmentsLinks|multiple|maximum instances=10|add button text=+ Ajouter un lien|embed in field=Materials[ExternalAttachmentsLinks]}}}{{{field|ExternalAttachmentsLinks|input type=text}}}{{{end template}}}
-{{{for template|Tuto_Attachments|multiple|embed in field=Materials[Tuto_Attachments]}}}{{{field|Attachment|default=|uploadable}}}{{{end template}}}
+{{{for template|Tuto_Attachments|multiple|maximum instances=30|add button text=+ Ajouter un fichier|embed in field=Materials[Tuto_Attachments]}}}{{{field|Attachment|default=|uploadable}}}{{{end template}}}
 <div class="bg-halfsquare-separator-2"></div>
 {{{for template|Separator}}}<br>{{{end template}}}
-{{{for template|Tuto Step|multiple|minimum instances=1|maximum instances=100|add button text=+ Ajouter une étape}}}
+{{{for template|Tuto Step|multiple|minimum instances=1|maximum instances=400|add button text=+ Ajouter une étape}}}
 <div class="row">
 <div class="col-md-6 col-sm-6 col-xs-12">
 <div class="row">
-<div class="col-md-3 col-sm-4 col-xs-12 edit-step-title">Titre :</div>
+<div class="col-md-12 col-sm-12 col-xs-12">{{{field|Step_Title|input type=text|class=form-text form-step-title|placeholder=Titre de l'étape|size=50}}}</div>
-<div class="col-md-9 col-sm-8 col-xs-12">{{{field|Step_Title|input type=text|class=form-text|placeholder=Titre de l'étape|size=50}}}</div>
 </div>
 <div class="row">
-<div class="col-md-12 col-sm-12 col-xs-12"><p class="step-instruction-title">Instructions à suivre pour réaliser l'étape :</p></div>
 <div class="col-md-12 col-sm-12 col-xs-12">{{{field|Step_Content|input type=textarea|rows=16|class=form-textarea|placeholder=Ecrivez ici les instructions à suivre pour réaliser l'étape.
 Privilégiez les textes courts et les listes par puces (bullet points). Pour activer un bullet points, entrez le symbole étoile (*) au début de chaque ligne.
 L'utilisation de nom commerciaux (marques, etc.) est interdite.}}}</div>
-<div class="col-md-12 col-sm-12 col-xs-12">
-<p class="help-text"><span class="glyphicon glyphicon-question-sign"></span> Apprendre à <span class="style-instructions-text" data-toggle="modal" data-target="#myModal">mettre en forme</span> le texte et <span class="style-instructions-text" data-toggle="modal" data-target="#ModalLink">insérer des liens</span>.</p>
 </div>
 </div>
-</div>
+<div class="col-md-6 col-sm-6 col-xs-12">
-<div class="col-md-6 col-sm-6 col-xs-12 col-pic-step">
+<div class="col-pic-step msuploadContainer">
 {{{field|Step_Picture_00|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_00_annotation|input type=editableImage|target=Step_Picture_00}}}
 <p class="upload-instructions">Votre image sera visible après l'enregistrement de la page.</p>
 <div class="btn btn-primary" type="button" data-toggle="collapse-next"  aria-expanded="false" >+ Ajouter des photos </div>
 <div class="collapse" id="collapseExample">
 <div class="well add-more-pics">
-<span>2ème photo : </span>{{{field|Step_Picture_01|size=32|class=form-picture|default=|uploadable}}}
+<span>2ème photo : </span>{{{field|Step_Picture_01|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_01_annotation|input type=editableImage|target=Step_Picture_01}}}
-<span>3ème photo : </span>{{{field|Step_Picture_02|size=32|class=form-picture|default=|uploadable}}}
+<span>3ème photo : </span>{{{field|Step_Picture_02|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_02_annotation|input type=editableImage|target=Step_Picture_02}}}
-<span>4ème photo : </span>{{{field|Step_Picture_03|size=32|class=form-picture|default=|uploadable}}}
+<span>4ème photo : </span>{{{field|Step_Picture_03|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_03_annotation|input type=editableImage|target=Step_Picture_03}}}
-<span>5ème photo : </span>{{{field|Step_Picture_04|size=32|class=form-picture|default=|uploadable}}}
+<span>5ème photo : </span>{{{field|Step_Picture_04|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_04_annotation|input type=editableImage|target=Step_Picture_04}}}
-<span>6ème photo : </span>{{{field|Step_Picture_05|size=32|class=form-picture|default=|uploadable}}}
+<span>6ème photo : </span>{{{field|Step_Picture_05|size=32|class=form-picture|default=|uploadable|image preview}}}
+{{{field|Step_Picture_05_annotation|input type=editableImage|target=Step_Picture_05}}}
 </div>
 </div>
-<div>
 </div>
 </div>
 </div>
-<div class="hrContentMinor"></div>
+<div class="hrContentMinor"></div>{{{end template}}}
-{{{end template}}}
 <div class="bg-halfsquare-separator-3"></div>
 <div class="notes-ref">
 <h2>Notes et références</h2>
 {{{for template|Notes}}}
-{{{field|Notes|input type=textarea|rows=5|maxlength=5000|placeholder=Entrez ici les notes et références du tutoriel.}}}<p class="help-text"><span class="glyphicon glyphicon-question-sign"></span> Apprendre à <span class="style-instructions-text" data-toggle="modal" data-target="#ModalRef">insérer des références</span>.</p>
+{{{field|Notes|input type=textarea|rows=5|maxlength=5000|class=form-textarea|placeholder=Entrez ici les notes et références du tutoriel.}}}
 {{{end template}}}
+[[Catégorie:Tutoriels]]
 </div>
-<div class="saving-menu">
+<div class="saving-menu">{{{standard input|save}}} {{{standard input|save and continue}}} {{{standard input|cancel}}}  {{{standard input|watch}}} <span class="status-checkbox">{{{for template|Tuto_Status}}}{{{field|Complete}}}{{{end template}}}</span></div>
-<div class="container">
-{{{standard input|save}}} {{{standard input|save and continue}}} {{{standard input|cancel}}}  {{{standard input|watch}}}
-</div>
-</div>
 </includeonly>
@@ Ligne 230 : / Ligne 245 : @@
          <tr>
            <td>Interdire une action</td>
-           <td>[[Fichier:Icon-popup-04.jpg]]</td>
+           <td>[[Fichier:Icon-popup-04.jpg|link=]]</td>
            <td><pre>{{Dont|Text=Voici un exemple}}</pre></td>
          </tr>
          <tr>
            <td>Prévenir d'un danger<br>Solliciter l'attention</td>
-           <td>[[Fichier:Icon-popup-01.jpg]]</td>
+           <td>[[Fichier:Icon-popup-01.jpg|link=]]</td>
            <td><pre>{{Caution|Text=Voici un exemple}}</pre></td>
          </tr>
          <tr>
            <td>Inviter à la mémorisation</td>
-           <td>[[Fichier:Icon-popup-05.jpg]]</td>
+           <td>[[Fichier:Icon-popup-05.jpg|link=]]</td>
            <td><pre>{{Pin|Text=Voici un exemple}}</pre></td>
          </tr>
          <tr>
            <td>Donner une information complémentaire</td>
-           <td>[[Fichier:Icon-popup-03.jpg]]</td>
+           <td>[[Fichier:Icon-popup-03.jpg|link=]]</td>
            <td><pre>{{Info|Text=Voici un exemple}}</pre></td>
          </tr>
          <tr>
            <td>Donner des idées</td>
-           <td>[[Fichier:Icon-popup-02.jpg]]</td>
+           <td>[[Fichier:Icon-popup-02.jpg|link=]]</td>
            <td><pre>{{Idea|Text=Voici un exemple}}</pre></td>
          </tr>
@@ Ligne 307 : / Ligne 322 : @@
 <tr>
 <td>Lien externe</td>
-<td><pre>http://google.com</pre></td>
+<td><pre>http://wikipedia.org</pre></td>
-<td>http://google.com</td>
+<td>http://wikipedia.org</td>
 </tr>
 <tr>
 <td>Lien externe avec un intitulé différent</td>
-<td><pre>[http://google.com Lien vers Google]</pre></td>
+<td><pre>[http://wikipedia.org Lien vers Wikipedia]</pre></td>
-<td>[http://google.com Lien vers Google]</td>
+<td>[http://wikipedia.org Lien vers Wikipedia]</td>
 </tr>
 </table>

Version actuelle datée du 12 juin 2017 à 11:27

Oups ! Vous n'avez pas la permission de créer un tutoriel car vous n'êtes pas connecté. Créez un compte ou connectez-vous.

Mettre en forme le texte×

Description	Résultat	Saisie
Bullet points	Ceci est un bullet point	* à insérer en début de phrase
Texte en gras	Ceci est un texte en gras	'''Ceci est un texte en gras'''
Texte en italique	Ceci est un texte en italic	''Ceci est un texte en italic''
Texte barré	~~Texte barré~~	<s>Texte barré</s>
Souligner du texte	Texte souligné	<u>Texte souligné</u>

Insérer des pastilles d'aide à la réalisation du tutoriel

Description	Résultat	Saisie
Interdire une action		{{Dont\|Text=Voici un exemple}}
Prévenir d'un danger Solliciter l'attention		{{Caution\|Text=Voici un exemple}}
Inviter à la mémorisation		{{Pin\|Text=Voici un exemple}}
Donner une information complémentaire		{{Info\|Text=Voici un exemple}}
Donner des idées		{{Idea\|Text=Voici un exemple}}

Description des licences autorisées sur Wikifab

Attribution Recommandé

Cette licence permet aux autres de distribuer, remixer, arranger, et adapter votre œuvre, même à des fins commerciales, tant qu’on vous accorde le mérite de la création originale en citant votre nom. C’est le contrat le plus souple proposé. Recommandé pour la diffusion et l’utilisation maximales d’œuvres licenciées sous CC.

Voir le Résumé Explicatif | Voir le Code Juridique

Attribution - Partage dans les Mêmes Conditions

Cette licence permet aux autres de remixer, arranger, et adapter votre œuvre, même à des fins commerciales, tant qu’on vous accorde le mérite en citant votre nom et qu’on diffuse les nouvelles créations selon des conditions identiques. Cette licence est souvent comparée aux licences de logiciels libres, “open source” ou “copyleft”. Toutes les nouvelles œuvres basées sur les vôtres auront la même licence, et toute œuvre dérivée pourra être utilisée même à des fins commerciales. C’est la licence utilisée par Wikipédia.

Voir le Résumé Explicatif | Voir le Code Juridique

Pourquoi ne proposer que ces deux licences ? Quel est mon intérêt à distribuer mon tutoriel sous une licence open-source ? Retrouvez notre vision et vos réactions concernant les licences sur cette page.

Insérez un lien dans votre tutoriel

Description	Vous tapez	Vous obtenez
Lien interne	[[Accueil]]	Accueil
Lien interne avec un intitulé différent	[[Accueil\|Lien vers la page d'accueil]]	Lien vers la page d'accueil
Lien externe	http://wikipedia.org	http://wikipedia.org
Lien externe avec un intitulé différent	[http://wikipedia.org Lien vers Wikipedia]	Lien vers Wikipedia

Vous tapez	Vous obtenez
* Je me suis inspiré du [[Mölkky\|tutoriel Molky réalisé par Auguste&Claire]] que je trouve très bien fait	* Je me suis inspiré du tutoriel Molky réalisé par Auguste&Claire que je trouve très bien fait.
* Pour décaper un meuble vernis, je me suis inspiré de ce [https://www.youtube.com/watch?v=6034yubI7CI\|tutoriel vidéo réalisé par Minute Déco].	* Pour décaper un meuble vernis, je me suis inspiré de ce vidéo réalisé par Minute Déco.

Vous tapez

Vous obtenez

* Je me suis inspiré du [[Mölkky|tutoriel Molky réalisé par Auguste&Claire]] que je trouve très bien fait

* Je me suis inspiré du tutoriel Molky réalisé par Auguste&Claire que je trouve très bien fait.

* Pour décaper un meuble vernis, je me suis inspiré de ce [https://www.youtube.com/watch?v=6034yubI7CI|tutoriel vidéo réalisé par Minute Déco].

* Pour décaper un meuble vernis, je me suis inspiré de ce vidéo réalisé par Minute Déco.

Comment choisir le nom de votre tutoriel

Dans un souci d'homogénéité et d'optimisation de la recherche, nous vous demandons de prendre le temps de réfléchir au nom de votre tutoriel. Voici nos recommandations :

1. Si votre tutoriel concerne la fabrication d'un objet :

1.1 Entrez directement le nom de l'objet. Ne précédez pas le nom de l'objet par un article défini (le, la, les) et indéfini (un, une, des).

A faire : Tabouret en bois
A ne PAS faire : Un tabouret en bois

1.2 Ne commencez pas le nom de votre tutoriel par les verbes "Fabriquer" ou "Créer". Le verbe n'apporte pas d'information au lecteur puisqu'il recherche une création et il sait déjà qu'il s'apprête à fabriquer ou créer quelque chose.

A faire : Tabouret en bois
A ne PAS faire : Fabriquer un tabouret en bois

1.3 Spécifiez les matériaux utilisés afin de qualifier le tutoriel le mieux possible.

Préférez : Tabouret d’appoint en bois de chêne et en béton ciré
Plutot que : Tabouret en bois

2. Si votre tutoriel concerne une technique :

2.1 Démarrez toujours par le verbe qui décrit la technique à l'infinitif.

Préférez : Poncer une planche
Plutôt que : Poncez une planche

2.2 Ne commencez pas le nom de votre tutoriel par le verbe "Apprendre" car cela n'apporte pas d'information au lecteur qui sait déjà qu'il s'apprête à apprendre une technique.

Préférez : Poncer une planche de chaîne
Plutôt que : Apprendre à poncer une planche de chaîne

3. Si votre tutoriel concerne une réparation :

3.1 Démarrez toujours par le verbe qui décrit l'opération de la réparation (évitez le verbe "Réparer" car il est trop généraliste) et mettez le l'infinitif.

Préférez : Remplacer le tambourt de la machine à lavée
Plutôt que : Réparer le tambourt de la machine à lavée

3.2 Indiquez toujours le modèle du produit que vous réparez.