Difference between revisions of "Form:Tutoriel"

Latest revision as of 10:24, 17 June 2017

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

@@ Line 16: / Line 16: @@
 <div class="row">
 <div class="col-md-4 col-sm-4 col-xs-12">
-[[Wikifab:Indispensable|<span class="contribute-block">
+[https://help.dokit.io/ <span class="contribute-block"><span class="glyphicon glyphicon-thumbs-up icon-contribute" aria-hidden="true"></span><span class="contribute-block-title">Premiers pas</span><span>Quelques conseils en une page<br>pour bien démarrer</span></span>]
-<span class="glyphicon glyphicon-thumbs-up icon-contribute" aria-hidden="true"></span>
-<span class="contribute-block-title">Premiers pas</span>
-<span>Quelques conseils en une page<br>pour bien commencer</span>
-</span>]]
 </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>
@@ Line 30: / Line 26: @@
 </div>
 <div class="col-md-4 col-sm-4 col-xs-12">
-[[Wikifab:Aide|<span class="contribute-block">
+[https://help.dokit.io/ <span class="contribute-block"><span class="glyphicon glyphicon-book icon-contribute" aria-hidden="true"></span><span class="contribute-block-title">L'aide complète</span><span>Pour tout savoir sur la plateforme<br>et son fonctionnement</span></span>]
-<span class="glyphicon glyphicon-book icon-contribute" aria-hidden="true"></span>
-<span class="contribute-block-title">L'aide complète</span>
-<span>Pour tout savoir sur wikifab<br>et son fonctionnement</span>
-</span>]]
 </div>
 </div>
@@ Line 54: / Line 46: @@
 </div>
 <div class="row table-edit-form">
-<div class="col-md-2 col-sm-2 col-xs-12 edit-form-title">Catégorie(s)</div>
+<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">{{{field|Categories|input type=tree|top category=Tutoriels|height=106px|width=100%|hideroot|list}}}</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">
@@ Line 75: / Line 67: @@
 </div>
 </div>
-<div class="col-md-4 col-sm-4 col-xs-12 col-pic-detail msuploadContainer">
+<div class="col-md-4 col-sm-4 col-xs-12 col-pic-detail">
+<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>
@@ Line 92: / Line 86: @@
 <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 msuploadContainer">
+<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}}}
@@ Line 108: / Line 103: @@
 <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>
@@ Line 128: / Line 124: @@
 |-|
   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="alert alert-info" role="alert">Ajoutez un lien vers l'endroit ou vos fichiers sont hébergés ou stockez vos fichiers directement sur la plateforme.</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="col-md-6 col-sm-6 col-xs-12 box-file-form">
+<div class="file-subtitle">Uploadez vos fichiers sur la plateforme</div>
+<div class="add-attachments add-attachments-upload">{{{field|Tuto_Attachments|holds template}}}</div></div>
+<div class="col-md-6 col-sm-6 col-xs-12 box-file-form">
+<div class="file-subtitle">Ajoutez un lien vers le site sur lequel votre fichier est hébergé</div>
 <div class="add-attachments">{{{field|ExternalAttachmentsLinks|holds template}}}</div>
-<hr>
+</div>
-<div class="file-subtitle">Uploadez vos fichiers :</div>
-<div class="add-attachments add-attachments-upload">{{{field|Tuto_Attachments|holds template}}}</div>
 </tabber>
 </div>
@@ Line 141: / Line 140: @@
 <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 msuploadContainer">
+<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}}}
@@ Line 165: / Line 160: @@
 <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}}} <span class="status-checkbox">{{{for template|Tuto_Status}}}{{{field|Complete}}}{{{end template}}}</span>
-</div>
-</div>
 </includeonly>
-<div class="modal fade wfform" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-<div class="modal-dialog">
-<div class="modal-content">
-<div class="modal-body">
-<p class="modal-subtitle">Mettre en forme le texte<span class="close" data-dismiss="modal" aria-hidden="true">&times;</span></p>
-<table class="table table-bordered">
-        <tr>
-          <th>Description</th>
-          <th>Résultat</th>
-          <th>Saisie</th>
-        </tr>
-        <tr>
-          <td>Bullet points</td>
-          <td><ul><li>Ceci est un bullet point</li></ul></td>
-          <td><div style="width:36px; float:left; margin-right:10px"><pre>*</pre></div> à insérer en début de phrase</td>
-        </tr>
-        <tr>
-          <td>Texte en gras</td>
-          <td>'''Ceci est un texte en gras'''</td>
-          <td><pre>'''Ceci est un texte en gras'''</pre></td>
-        </tr>
-        <tr>
-          <td>Texte en italique</td>
-          <td>''Ceci est un texte en italic''</td>
-          <td><pre>''Ceci est un texte en italic''</pre></td>
-        </tr>
-        <tr>
-          <td>Texte barré</td>
-          <td><s>Texte barré</s></td>
-          <td><pre><s>Texte barré</s></pre></td>
-        </tr>
-        <tr>
-          <td>Souligner du texte</td>
-          <td><u>Texte souligné</u></td>
-          <td><pre><u>Texte souligné</u></pre></td>
-        </tr>
-    </table>
-<p class="modal-subtitle">Insérer des pastilles d'aide à la réalisation du tutoriel</p>
-<table class="table table-bordered">
-        <tr>
-          <th>Description</th>
-          <th>Résultat</th>
-          <th>Saisie</th>
-        </tr>
-        <tr>
-          <td>Interdire une action</td>
-          <td>[[Fichier:Icon-popup-04.jpg]]</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><pre>{{Caution|Text=Voici un exemple}}</pre></td>
-        </tr>
-        <tr>
-          <td>Inviter à la mémorisation</td>
-          <td>[[Fichier:Icon-popup-05.jpg]]</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><pre>{{Info|Text=Voici un exemple}}</pre></td>
-        </tr>
-        <tr>
-          <td>Donner des idées</td>
-          <td>[[Fichier:Icon-popup-02.jpg]]</td>
-          <td><pre>{{Idea|Text=Voici un exemple}}</pre></td>
-        </tr>
-    </table>
-</div>
-</div>
-</div>
-</div>
 <div class="modal fade wfform" id="ModalCreativeCommons" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
@@ Line 280: / Line 195: @@
 <div class="modal-content">
 <div class="modal-header">
-<span class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></span><h4 class="modal-title">Description des licences autorisées sur Wikifab</h4>
+<span class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></span><h4 class="modal-title">Description des licences proposées</h4>
 </div>
 <div class="modal-body">
 <div class="row">
 <div class="col-md-12 col-sm-12 col-xs-12">
-[[Fichier:CC-BY.png]]<span class="cc-modal-subtitle">Attribution <span class="label label-success">Recommandé</span></span>
+<span class="cc-modal-subtitle">Attribution <span class="label label-success">Recommandé</span></span>
 <p>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. </p>
 <p>[http://creativecommons.org/licenses/by/4.0/ Voir le Résumé Explicatif] | [http://creativecommons.org/licenses/by/4.0/legalcode Voir le Code Juridique]</p>
 <br>
-[[Fichier:CC-BY-SA.png]]<span class="cc-modal-subtitle">Attribution - Partage dans les Mêmes Conditions</span>
+<span class="cc-modal-subtitle">Attribution - Partage dans les Mêmes Conditions</span>
 <p>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.</p>
 <p>[http://creativecommons.org/licenses/by-sa/4.0/ Voir le Résumé Explicatif] | [http://creativecommons.org/licenses/by-sa/4.0/legalcode Voir le Code Juridique]</p>
-<hr>
-<p>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 [http://discuter.wikifab.org/t/sous-quelle-licence-mon-tutoriel-est-il-publie/13/1 cette page].</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="modal fade wfform" id="ModalLink" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-<div class="modal-dialog">
-<div class="modal-content">
-<div class="modal-header">
-<span class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></span><p class="modal-title">Insérez un lien dans votre tutoriel</p></div>
-<div class="modal-body"><table class="table table-bordered">
-        <tr>
-          <th>Description</th>
-          <th>Vous tapez</th>
-          <th>Vous obtenez</th>
-        </tr>
-        <tr>
-          <td>Lien interne</td>
-          <td><pre>[[Accueil]]</pre></td>
-          <td>[[Accueil]]</td>
-        </tr>
-        <tr>
-          <td>Lien interne avec un intitulé différent</td>
-          <td><pre>[[Accueil|Lien vers la page d'accueil]]</pre></td>
-          <td>[[Accueil|Lien vers la page d'accueil]]</td>
-        </tr>
-<tr>
-<td>Lien externe</td>
-<td><pre>http://google.com</pre></td>
-<td>http://google.com</td>
-</tr>
-<tr>
-<td>Lien externe avec un intitulé différent</td>
-<td><pre>[http://google.com Lien vers Google]</pre></td>
-<td>[http://google.com Lien vers Google]</td>
-</tr>
-</table>
 </div>
 </div>
-</div>
-</div>
-<div class="modal fade wfform-2" id="ModalRef" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-<div class="modal-dialog">
-<div class="modal-content">
-<div class="modal-body"><table class="table table-bordered">
-<tr>
-<th>Vous tapez</th>
-<th>Vous obtenez</th>
-</tr>
-<tr>
-<td><pre>* Je me suis inspiré du [[Mölkky|tutoriel Molky réalisé par Auguste&Claire]] que je trouve très bien fait</pre></td>
-<td>* Je me suis inspiré du [[Mölkky|tutoriel Molky réalisé par Auguste&Claire]] que je trouve très bien fait.</td>
-</tr>
-<tr>
-<td><pre>* 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].</pre></td>
-<td>* 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].</td>
-</tr>
-</table>
 </div>
 </div>
@@ Line 364: / Line 218: @@
 <div class="modal-content">
 <div class="modal-header">
-<h4 class="modal-title" id="myModalLabel">Comment choisir le nom de votre tutoriel</h4>
+<span class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></span>
+<h4 class="modal-title" id="myModalLabel">Comment choisir le nom de votre tutoriel ?</h4>
 </div>
 <div class="modal-body">