Outils pour utilisateurs

Outils du site


fr:tutorial:tutorial01

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
fr:tutorial:tutorial01 [2016/08/31 12:46]
Nicolas Ronvel [Making a choice]
fr:tutorial:tutorial01 [2018/06/06 10:13] (Version actuelle)
Nicolas Ronvel [Code complet du Template]
Ligne 1: Ligne 1:
-FIXME **Cette page n'est pas encore traduite entièrement. Merci de terminer la traduction**\\ //​(supprimez ce paragraphe une fois la traduction terminée)//​ 
- 
 <WRAP center round tip 60%> <WRAP center round tip 60%>
 **Attention** - Tout en suivant ce tutorial, il se pourrait que vos modifications de template ne soient parfois pas prises en compte. Dans ce cas, commencez par vérifier l'​intégrité de votre code de template, au format JSON, avec par exemple un outil comme [[http://​jsonlint.com/​|Json Validator]]. Peut-être qu'un caractère spécial est manquant ou en trop ? Cet outil vous aidera à trouver ce genre d'​erreur. **Attention** - Tout en suivant ce tutorial, il se pourrait que vos modifications de template ne soient parfois pas prises en compte. Dans ce cas, commencez par vérifier l'​intégrité de votre code de template, au format JSON, avec par exemple un outil comme [[http://​jsonlint.com/​|Json Validator]]. Peut-être qu'un caractère spécial est manquant ou en trop ? Cet outil vous aidera à trouver ce genre d'​erreur.
Ligne 23: Ligne 21:
   "​styles":​ [   "​styles":​ [
     {     {
 +      "​key":​ "​default",​
 +      "​name":​ "​Default",​
       "​fields":​ [       "​fields":​ [
         { "​name":​ "​name",​ "​label":​ "​Name",​ "​default":​ "​Nobbla " }         { "​name":​ "​name",​ "​label":​ "​Name",​ "​default":​ "​Nobbla " }
Ligne 33: Ligne 33:
       "​canvasHeight":​ 750       "​canvasHeight":​ 750
     }     }
-  ]+  ]
 +  "​description":​  
 +  { 
 +    "​description":​ "​Template for Blood Bowl's Starplayers,​ with the V3 design",​ 
 +    "​title":"​Blood Bowl Classic Starplayer",​ 
 +    "​credits":​ "by Nicolas Ronvel",​ 
 +    "​key":​ "​bb-starplayers-v3",​ 
 +    "​url":​ "​https://​github.com/​Gulix/​geckos/"​ 
 +  }
 } }
 </​code>​ </​code>​
Ligne 138: Ligne 146:
 Remarquez qu'il n'y pas de hauteur (''​height''​) de définie pour les TextBox. C'est parce qu'​elles s'​ajustent automatiquement en fonction de la quantité de texte fournie. Remarquez qu'il n'y pas de hauteur (''​height''​) de définie pour les TextBox. C'est parce qu'​elles s'​ajustent automatiquement en fonction de la quantité de texte fournie.
  
-Nowlet's think of our fields for the player'​s attributes ​: **Movement**,​ **Strength**,​ **Agility** & **Armour**. ​We could use a **text input** fieldbut then the user could put an Agility ​value of "​XX", ​which is meaninglessWe'll opt instead for a [[..:​template:​choice_input|dropdown menu]], with only the existing and accepted values proposed.+Maintenantréfléchissons à notre champs pour les attributs des Champions ​: **Movement**,​ **Strength**,​ **Agility** & **Armour** ​(nous utiliserons les termes en anglais pour coller avec l'​article original et le code original, en version anglaise)On pourrait utiliser un **champ de texte**, mais cela permettrait aux utilisateurs de mettre, par exemple, une Agility ​à "​XX", ​ce qui est incohérentPlutôt que cette voie, nous allons partir sur [[..:​template:​choice_input|listes déroulantes]], qui ne proposeront que des valeurs acceptables.
  
-First, go back to the ''​fields'' ​section of the template. ​Add four **options ​fields**. For eachwe define the options ​that the user will be able to selectEach option ​has value and a textThe text is (for now) only used as a way to display the options.+Revenons à la section ​''​fields'' ​du template. ​Ajoutons-y 4  ​**champs d'options**. ​Pour chacun d'euxnous y définissons les options ​accessibles par l'​utilisateurChaque ​option a une valeur et un texteLe texte est utilisé pour afficher les options ​et récupérer leur contenu.
  
 <code javascript>​ <code javascript>​
Ligne 192: Ligne 200:
 </​code>​ </​code>​
  
-Edit your template ​code, apply the modifications, ​and let's see what changed on our cardOn the left partunder the previous ​**Name** ​field, 4 new fields appears : that's our **options** fields ​!+Modifiez en conséquence le code de votre templateappliquez ces modifications ​dans l'​éditeuret voyons ce que cela a changé sur notre carteDans la partie à gauchesous le champ **Name**, ​on trouve maintenant notre champs d'​options !
  
-{{:​en:​tutorial:​01_ui04.png?​500|Our new fields}}+{{:​en:​tutorial:​01_ui04.png?​500|Nos champs d'​options !}}
  
-Nowlike we did previously, we'll add four new **Textboxes** ​in our ''​canvasFields'' ​sectionThose elements will have a **text** property set with the variables ​that are generated by our optionsWe'll use for that the text of the ''​value'' ​property, accessible via the variable ''​$myVariable''​. ​See the [[..:​template:​choice_input|documentation]] ​for more informations ​on variables ​generated by those fields.+Comme précédemmentnous allons ajouter 4 **Textboxes** ​dans la section ​''​canvasFields''​. ​Ces éléments renseigneront leur propriété ''​text''​ avec les variables ​générées par les listes déroulantesNous utiliserons le texte de la propriété ​''​value'',​ accessible via la variable ''​$myVariable''​. ​Consultez la [[..:​template:​choice_input|documentation]] ​pour plus d'informations ​sur les variables ​générées par ces champs.
  
-We use again **textboxes**, with an adjustment of the color and the sizeHere is the added code, the first line being one already existing for you to know where to paste this code :+Nos **textbox** vont être ajustées au niveau de la taille et de la couleurVoici le code à ajouterla première ligne existant déjà et servant de point de repère ​:
  
 <code javascript>​ <code javascript>​
Ligne 208: Ligne 216:
 </​code>​ </​code>​
  
-We've now got an editable cardand when we change ​the value of one of our fields (Strength to 5for example), it is reflected on the image. ​But some fields are still missing. Now, let's illustrate our card !+Notre carte est maintenant éditableet chaque fois qu'une valeur ​change, ​l'image générée change en conséquenceIl est temps de passer à l'illustration ​! 
 +===== Photo d'​identité =====
  
-===== Mug Shot =====+Notre Champion a besoin d'une photo / illustration pour être correctement identifié. Pour cela, nous utiliserons un [[..:​template:​image_input|Champ Image]]. Ce type de champ permet à l'​utilisateur de charger une image pour chaque carte, image qui sera ensuite utilisée dans l'​image de la carte.
  
-Our Star Player need a photo / illustration to be correctly identified. For this purposewe'll use an [[..:template:​image_input|Image field]]. This type of field allows the user to load an image for each card, image that can then be used on the card+Actuellementle **Champ Image** est plutôt basique. ​[[https://​github.com/​Gulix/​geckos/​issues/​37|Des évolutions sont programmées]]. En attendant le développement de celles-cil'​utilisateur doit s'​assurer que le ratio de l'image qu'il charge correspond au ratio du cadre dans lequel ​on va l'​utiliser. Sinon, l'​image sera étirée.
  
-Right now, the **Image input** control is pretty basic. But it's [[https://​github.com/​Gulix/​geckos/​issues/​37|planned to evolve]]. Until completion of this Issue, the user has to ensure his image file corresponds,​ in ratio, to the image frame on the card. Or the image will be stretched. +Pour ajouter un **Champ Image**, ​ajoutons juste cette ligne à la section ​''​fields'' ​du template :
- +
-To add the **Image ​input** fieldjust add this line to the ''​fields'' ​part of the template :+
  
 <code javascript>​ <code javascript>​
Ligne 222: Ligne 229:
 </​code>​ </​code>​
  
-This field will generate a **$portray** ​variablewhich will contain the image in the form of a DataUrl (remember ​?). Just what we need to add an image to our canvas :+Ce champ génèrera une variable ​**$portray**, ​qui contiendra l'image sous forme de DataUrl (ça ne vous rappelle rien ?). Juste ce dont on a besoin pour notre canvas :
  
 <code javascript>​ <code javascript>​
Ligne 228: Ligne 235:
 </​code>​ </​code>​
  
-Apply those modifications to your template, ​and thenlook ...+Modifiez votre template, ​appliquez les modificationset admirez !
  
-{{:​en:​tutorial:​01_ui05.png?​500|Nobbla's Mug Shot}}+{{:​en:​tutorial:​01_ui05.png?​500|Nobbla ​en chair et en os !}}
  
-===== Do you have the skills ? =====+===== Bilan de compétences ​=====
  
-Three fields are still missing. Let's start with the easier one.+Trois champs manquent encore à l'appel. Commençons avec le plus aisé.
  
-==== Cost ====+==== Coût ====
  
-Each Star Player requires a certain ​amount of Gold Pieces to be recruited. Let's add an input field that will appear in the bottom of the cardThe editable field :+Chaque Champion nécessite un certain ​montant de Pièces d'Or pour être recrutéAjoutons un champ de texte pour renseigner cette valeur, qui apparaîtra en bas de la carte. 
 + 
 +Dans la partie ''​fields'' ​:
  
 <code javascript>​ <code javascript>​
Ligne 244: Ligne 253:
 </​code>​ </​code>​
  
-And the canvas field :+Dans la partie ''​canvasFields'' ​:
  
 <code javascript>​ <code javascript>​
Ligne 250: Ligne 259:
 </​code>​ </​code>​
  
-One new thing here is the use of the ''​fontStyle'' ​property in the canvas field. It sets the text to italicPretty easy to understand.+Première nouveauté, l'​utilisation de ''​fontStyle'' ​pour indiquer que le texte sera affiché en italiqueRien de bien compliqué là-dedans.
  
-The other thing is the use of an [[en:​template:​advanced_string_variables|Advanced String ​Variable]] ​with ''​$cost$ GP''​. ​It helps us build a more intelligent stringby always adding ​GP (Gold Pieces) ​to the cost string the user will useOf courseit could cause some issues ​(a Free star player ​?). But, again with a translated ​template ​in mindwe could easily change this value on the template. Or change the currency (SP for Silver Pieces ?).+Autre nouveauté, l'​utilisation d'​une ​[[en:​template:​advanced_string_variables|Variable ​de chaîne Avancée]] avec ''​$cost$ GP''​. ​Cela permet de construire une chaîne plus intelligenteen ajoutant ​GP (pour Gold Pieces) ​après le coût indiqué par l'​utilisateurBien sûrcela peut entraîner quelques soucis ​(un Champion gratuit ​?). Mais dans le cadre d'une traduction de template, ​cette valeur sera modifiée facilement
  
-==== Multilines ​====+==== A la ligne ====
  
-The next input field will be a new one the  ​[[..:​template:​multiline_text_input|Multiline Text Input]] fieldIt works like the classic ​**Text input** fieldbut allows the user to add line-breaksWe'll add two fields :+Nos prochains champs vont utiliser un nouveau type de champ le [[..:​template:​multiline_text_input|Champ de texte multiligne]]. Cela fonctionne comme un **Champ Texte** classiquemais l'​utilisateur peut y saisir des sauts de ligneAjoutons deux champs à notre section ''​fields''​ du template ​:
  
 <code javascript>​ <code javascript>​
Ligne 263: Ligne 272:
 </​code>​ </​code>​
  
-We now add two more **textboxes** that will be linked to these two fields ​:+Puis ajoutons les deux **textbox** correspondantes dans ''​canvasFields'' ​:
  
 <code javascript>​ <code javascript>​
Ligne 270: Ligne 279:
 </​code>​ </​code>​
  
-Those fields use an automatic wrapping method : lines that are too long are broken to be displayed on several linesAnd the user can still control when the line-breaks occur by setting them himself.+Ces champs utilisent un bornage automatique. Si le texte venait à être trop long pour la largeur spécifiée,​ un saut à la ligne automatique est ajoutéLes sauts de lignes de l'​utilisateur,​ saisis dans le champ éditable, sont évidemment pris en compte également. 
 +===== Et, c'est tout ? =====
  
-===== That's it ? =====+Pour ce tutoriel, oui, c'est tout. Vous disposez là d'un template fonctionnel pour vos cartes de Champions. Je vous encourage bien sûr à créer vos propres templates à l'aide de ce tutoriel et de cette base. Un espace de partage pour les templates est envisagé pour le futur, et la page de démo hébergera par défaut plusieurs templates ([[https://​github.com/​Gulix/​geckos/​issues/​30|cette évolution]] doit d'​abord être terminée).
  
-For this tutorialyesthat's it. You know have a functional template that allows you to get Star Player cards. Of coursewith the help of this tutorial, I encourage you to create your own template for your own needs. I will soon open a place to share the templates, and the demo page will host various templates (when [[https://​github.com/​Gulix/​geckos/​issues/​30|this issue]] is completed).+Si vous avez un souci avec ce tutorielou avec le logicieln'hésitez pas à demander de l'aidevia la création d'​un ​[[https://​github.com/​Gulix/​geckos/​issues/​new|ticket d'​incident]], ou via un message sur un forum où Geckos est présenté.
  
-If you have any trouble with this tutorial or the software, feel free to ask me for help, via the creation of an [[https://​github.com/​Gulix/​geckos/​issues/​new|Issue]],​ or via a message on a forum in which I'll participate. +===== Code complet du Template ​=====
- +
-===== Full code of the template ​=====+
  
 <code javascript template01-code.json>​ <code javascript template01-code.json>​
Ligne 284: Ligne 292:
     "​styles":​ [     "​styles":​ [
         {         {
 +            "​key":​ "​default",​
 +            "​name":​ "​Default",​
             "​fields":​ [             "​fields":​ [
                 { "​name":​ "​name",​ "​label":​ "​Name",​ "​default":​ "​Nobbla"​ },                 { "​name":​ "​name",​ "​label":​ "​Name",​ "​default":​ "​Nobbla"​ },
Ligne 358: Ligne 368:
             "​canvasHeight":​ 750             "​canvasHeight":​ 750
         }         }
-    ]+    ]
 +    "​description":​  
 +    { 
 +      "​description":​ "​Template for Blood Bowl's Starplayers,​ with the V3 design",​ 
 +      "​title":"​Blood Bowl Classic Starplayer",​ 
 +      "​credits":​ "by Nicolas Ronvel",​ 
 +      "​key":​ "​bb-starplayers-v3",​ 
 +      "​url":​ "​https://​github.com/​Gulix/​geckos/"​ 
 +    }
 } }
 </​code>​ </​code>​
fr/tutorial/tutorial01.1472640401.txt.gz · Dernière modification: 2016/08/31 12:46 par Nicolas Ronvel