« Guide de création » : différence entre les versions

De 21Wiki
Aucun résumé des modifications
Balises : Révocation manuelle Éditeur visuel
(Ajout tips Timeline)
Balise : Éditeur de wikicode 2017
Ligne 376 : Ligne 376 :


== Ajout d'une timeline ==
== Ajout d'une timeline ==
<span style="color:red;font-weight:bold;"> /!\ Utiliser modification du Wikicode pour modifier une timeline</span>
Une timeline s'insère entre balises <code>graph</code> au format json.  
Une timeline s'insère entre balises <code>graph</code> au format json.  
Le langage utilisé est Vega 2.
La structure utilisée est Vegas2
Il est possible de tester des rendus en local avant publication grâce à l'éditeur Vega : https://vega.github.io/vega-editor/?mode=vega.
Il est possible de tester des rendus en local avant publication grâce à l'éditeur Vega : https://vega.github.io/vega-editor/?mode=vega.


Ligne 435 : Ligne 437 :
* <code>axes</code> : légende de la timeline
* <code>axes</code> : légende de la timeline


<br>
<span style="color:red;font-weight:bold;">Attention:
'''Les dates''': Elles ont toutes sous le format <code> "AAAA-MM-DD"</code> avec les doubles quotes autour
'''Les retours à la lignes''': Json se présente sur ce format <code> { "clef1":valeur,  "clef2": valeur} </code> Il est encadré d'acolades et chaque fin de ligne est marquée par une virgule sauf la derniere.
''' Le texte''': Toujours encadré de doubles quotes <code> "Voici un exemple" </code>
'''Donnée manquante''' S'il vous manques des données (par exemple un membre n'a pas encore quitté de gang) mettre la valeur à <code>  "membre_end": null, </code> un null indique que la donnée est vide, il est aussi possible de mettre "" pour une date ou du text
<br>
<br>
<br>
<br>

Version du 9 octobre 2022 à 16:07


Introduction

Bienvenue à toi, nouvel arrivant sur le wiki, plein d'entrain et de bonne volonté.

Avant toute chose, il y a 2 choses à comprendre si tu souhaites procéder à des modifications sur le wiki :

Premièrement, tu feras des erreurs.

Exemple 1

Deuxièmement, ça n'a aucune importance.

Chaque modification qui est faite sur le wiki passe par la modération, agissant pour toi comme un filet de sécurité, vérifiant et corrigeant si nécessaire.

Exemple 2

En cas de doute persistant sur une modification, tu peux poser toutes tes questions sur notre discord.

La plupart des modifications passeront par l'éditeur visuel, en cliquant sur modifier (Exemple 1) mais certaines doivent passer par le wikicode, en cliquant sur "modifier le wikicode". Toutefois vous pouvez passer de l'un à l'autre directement en cours de modification. (Exemple 2)



Création de page personnage

Où trouver le bouton modèle ?
Où trouver le bouton catégorie ?


1) Taper dans la barre de recherche le nom du personnage (Attention à respecter l'orthographe exacte (Majuscules, accents et tirets..)

2) Cliquer sur le nom en rouge proposé en création de page

3) Insérer > Modèle > "Personnage RP"

4) Ajouter les informations possédées dans l'Infobox puis "Appliquer les modifications"

5) Copier la mise en page standard des pages personnages (disponible ici, cliquer sur "modifier le wikicode" pour plus de simplicité) et ajouter les informations possédées

6) Ajouter la catégorie "Personnage"

7) Ouvrir la page "Personnages" regroupant la liste de tout les personnages

8) Ajouter le personnage à la liste (Attention à respecter l'ordre alphabétique)

9) Link le nom du personnage à sa page (Sélectionner le nom du personnage , Ctrl + K)

Résultat final









Création de page de gang

La proposition de création


1) Taper dans la barre de recherche le nom exact du gang (Attention aux majuscules, accents et tirets..)

2) Cliquer sur le nom en rouge proposé en création de page

3) Insérer > Modèle > " Infobox Gang "

4) Ajouter les informations possédées dans l'Infobox puis "Appliquer les modifications"

5) Aller dans les catégories et ajouter la catégorie " Gang " , puis ajouter une catégorie avec le nom du gang, ceci proposera la création d'une catégorie qui sera affichée en rouge

6) Cliquer sur la page et revenir à la ligne , Paragraphe > Titre de section > " Organisation ". Cette section sert à inscrire les différents membres du gang, ainsi que leurs rôles (Chef de gang, bras droit, simple membre..)

7) Revenir à la ligne, Paragraphe > Titre de section > "Histoire". Cette section sert à garder une trace de l'histoire du gang de 2 façons, la première étant l'histoire écrite du gang et de son évolution, la 2ème une infobox historique est disponible pour garder certains types d'informations précises (Ancien quartier, ancien business..) Insérer > Modèle > " Gang - Anciennes informations " puis enregistrer la page.

Nouvelle catégorie

8) Une fois la page enregistrée et validée par la modération, la catégorie nouvellement créée sera affichée en rouge dans l'un des menus déroulants sur le coté de la page. Cliquez sur celle-ci, mettez un espace puis enregistrez. La catégorie sera ainsi créée. (Si la modération n'a pas encore validé vos modifications précédentes, cela n'empêche pas de continuer les prochaines étapes.)

9) Aller sur la page "Gangs Criminels" , puis cliquer sur modifier.

10) Ajouter le nouveau gang dans la section lui correspondant (Gang reconnu par le cartel , groupes criminels..)

11) Link le nom du gang ajouté, Sélectionner le nom du gang > Ctrl + K > cliquer sur la page proposée (Si la page proposée s'affiche en rouge, revoir l'orthographe du gang. Attention aux majuscules/accents/tirets ! Si l'orthographe est bonne après vérification, la modération n'a tout simplement pas encore validée la page du gang en question.)

Création de page entreprise

1) Taper dans la barre de recherche le nom exact de l'entreprise (Attention aux majuscules, accents et tirets..)

2) Cliquer sur le nom en rouge proposé en création de page

3) Aller dans les catégories et ajouter la catégorie " Entreprise " , puis ajouter une catégorie avec le nom de l'entreprise, ceci proposera la création d'une catégorie qui sera affichée en rouge

4) Insérer > Modèle > " Infobox Entreprise "

5) Ajouter les informations possédées dans l'Infobox puis "Appliquer les modifications"

6) Cliquer sur la page et revenir à la ligne , Paragraphe > Titre de section > " Organisation ". Cette section sert à inscrire les différents membres de l'entreprise, ainsi que leurs rôles (Patrons, employés, ou un rôle spécifique comme Journaliste/Livreur..)

7) Revenir à la ligne, Paragraphe > Titre de section > "Histoire". Cette section sert à garder une trace de l'histoire et de l'évolution de l'entreprise, ainsi potentiellement que de la répartition des parts à une date donnée.

8) Une fois la page enregistrée et validée par la modération, la catégorie nouvellement créée sera affichée en rouge dans l'un des menus déroulants sur le coté de la page. Cliquez sur celle-ci, mettez un espace puis enregistrez. La catégorie sera ainsi créée. (Si la modération n'a pas encore validé vos modifications précédentes, cela n'empêche pas de continuer les prochaines étapes.)

9) Aller sur la page "Entreprises" , puis cliquer sur modifier.

10) Ajouter la nouvelle entreprise dans la section lui correspondant (Entreprises , auto-entreprises..)

11) Link le nom de l'entreprise ajoutée, Sélectionner le nom du gang > Ctrl + K > cliquer sur la page proposée (Si la page proposée s'affiche en rouge, revoir l'orthographe de l'entreprise. Attention aux majuscules/accents/tirets ! Si l'orthographe est bonne après vérification, la modération n'a tout simplement pas encore validée la page de l'entreprise en question.)

Ajouter ou modifier le métier d'un personnage

L'infobox


1) Aller sur la page du personnage > Modifier > Cliquer sur l'infobox

2) Si un métier est déjà présent, le copier/coller dans "Ancien métier"

3) Ajouter le métier actuel en utilisant la balise " [[Nom de l'entreprise/gang/service]] Rôle dans l'entreprise "

4) Ajouter la catégorie correspondante au métier ajouté

5) Modifier la page de l'entreprise/gang/service précédent en ajoutant le personnage dans "anciens employés/membres" et en le retirant des employés/membres actuels

6) Ajouter le personnage sur la page de la nouvelle entreprise/gang/service




Ajouter une photo à un personnage ou un logo de gang/entreprise

Exemple 1
Exemple 2

1) Cliquer sur " Téléverser un fichier" dans un des menus déroulants sur le coté de la page (Exemple 1)

Pour la suite, un tuto est disponible sur cette page.

Une fois le tuto fini , copier/coller le nom en dessous de la photo (Exemple 2)

2) Ouvrir la page du personnage/gang/entreprise > Modifier > Ouvrir l'infobox

3) Coller le nom de la photo dans le champ " Image1 " (Exemple 3)

Exemple 3














Mettre plusieurs photos de profil pour un seul personnage

Exemple 1


Un personnage, pendant son histoire, peut faire évoluer son apparence. Comment choisir laquelle mettre sur le wiki ? Vous n'avez pas à le faire.

Plusieurs photos de profil peuvent être affichées, comme sur cette page.

1) Ouvrir la page du personnage > Modifier > Ouvrir l'infobox

2) Dans le champ " image1 ", insérez cette balise (Exemple 1)  :

<gallery>

Image:Nomdel'image1.jpg|Image 1

Image:Nomdel'image2.jpg|Image 2     

</gallery>

Ajout du lien d'un stream sur la page d'un personnage

1) Aller sur la page du personnage > Modifier > Infobox

2) Utiliser la balise [LienDuStream NomDuStreamer] dans le champ "Joué par.."

3) Ajouter la catégorie au nom exact du streamer, ceci affichera la catégorie en rouge si le streamer n'a jamais été ajouté précédemment

Où mettre le lien du stream pour link ?

4) Une fois la modification enregistrée et validée par la modération, si la catégorie est nouvelle, elle sera affichée dans l'un des menus sur le coté de la page en rouge. Cliquer dessus, mettre un simple espace dans la page, et enregistrer. La catégorie sera maintenant créée.

5) Ouvrir la page "Liste des streamers" > Modifier

6) Ajouter le streamer (Attention à l'ordre alphabétique) en linkant le nom du streamer (Ctrl + K > Site externe > Mettre le lien du stream) , puis ajouter le nom de son personnage (Linké également avec Ctrl + K > 21 Wiki) et enfin son métier ou statut actuel (En cas de nouvel arrivant par exemple)

Modifier une page personnage en cas de départ de l'île/de mort

Exemple 1


1) Aller sur la page du personnage > Modifier

2) Ouvrir l'infobox

3) Dans le champ " Statut " , indiquer le départ/la mort du personnage (Exemples : Reparti sur le continent, Mort en Europe, Tué par X..)

4) En cas de décès lié avec un autre personnage ou un gang, vous pouvez link le nom du personnage/du gang en utilisant la balise [[NomExactDuPersonnage]] (Exemple 1)

Exemple 2

5) Ouvrir la page

"Personnages" qui liste les personnages du serveur > Modifier

6) Ajouter une des deux emotes suivantes selon le statut du personnage (Exemple 2) :

⚰️ Mort

✈️ A quitté la ville

Un simple copier/coller de l'emote à coté du nom du personnage est suffisant.




Autres informations de l'infobox

Les autres informations demandant des link sont celles-ci :

Association et anciennes associations : Réutiliser le format " [[NomExactDeL'Association]] Rôle dans l'association ". Puis mettre à jour la page de l'association en ajoutant le nom du personnage en le linkant ( Sélectionner le nom du personnage une fois écrit puis Ctrl + K )

Parenté : Concerne les couples et liens familiaux. Réutiliser le format " [[NomExactDuPersonnage]] Nature du lien entre les personnages ". Puis faire la même chose sur la page de l'autre personnage concerné.

Les autres informations que celles-ci ou celles détaillées précédemment ne nécessitent pas de balises.

Ajouter une image dans le texte d'une page (Hors infobox)

Glisser/Déposer l'image sur la partie haute
Description à écrire

1) Aller sur la page > Modifier

2) Insérer > Images et médias

Si c'est une image inédite sur le wiki, vous allez devoir la téléverser.

3) Glisser/Déposer l'image dans le cadre prévu

4) Ajouter la description de l'image

5) Ajouter la légende de l'image. Le texte écrit ici sera affiché juste en dessous de l'image.

6) Le placement de l'image souhaité. Cliquez sur "Avancé" et faites votre choix.

7) Une fois l'image insérée dans le texte, vous pourrez la déplacer sur la verticale selon votre souhait.

Placement de l'image


L'emplacement du texte affiché.















Ajout d'un spoiler

Comment ca se présente dans le wikicode ?

1) Aller sur la page souhaitée > Modifier le wikicode

2) Ajouter la balise {{#spoiler:hide=hide_message| TexteDuSpoiler }} à l'endroit souhaité

Le résultat donné est ceci :


Attention : la balise peut parfois avoir un peu de mal. Faire un petit F5 si jamais elle ne s'affiche pas bien. Si le problème persiste, vérifier l'écriture de la balise.


Ajout d'onglets

Exemple 1

1) Ouvrir la page concernée > Modifier le wikicode

Les onglets doivent être contenus entre les balises <tabs> (Exemple 1)

A chaque ajout d'onglet, ajouter une balise <tab name="NomDeL'Onglet">TexteDeL'Onglet.</tab>

L'exemple 1 tel qu'il est donne ce résultat :




<tabs> <tab name="NomTexte1">test1.</tab> <tab name="NomTexte2">test2.</tab> <tab name="NomTexte3">test3.</tab> <tab name="NomTexte4">test4.</tab> </tabs>

Attention : Faire un petit F5 si jamais les onglets s'affichent mal. Si le problème persiste, vérifier l'écriture dans le wikicode.

Ajouter un tableau

Exemple 1
Exemple 2


1) Aller sur la page concernée > Modifier > Insérer > Tableau (Exemple 1)

2) Les options de lignes et de colonnes (Exemple 2)

Les flèches sur le coté et sur le haut du tableau servent à dérouler le menu visible dans l'exemple 2

Exemple 3

Quand vous insérez un tableau, la première ligne reste sélectionnée et l'écriture sera automatiquement en gras. Si vous ne souhaitez pas cela, supprimez la ligne.

"Insérer au dessus/en dessous" > Sers à insérer une nouvelle ligne/colonne

"Déplacer au dessus/en dessous" > Sers à déplacer la ligne/colonne

Exemple 4

3) Vous pouvez fusionner les cellules du tableau entres elles, pour mettre le tableau au format souhaité. (Exemple 3)

4) Dans ce même menu, vous pouvez aller dans les propriétés (Exemple 4)

Légende : Permet de mettre une description/présentation du tableau au dessus de celui-ci

Repliable : Permet de cacher le tableau (afficher/masquer)

Initialement replié : Le tableau sera automatiquement masqué.




Corriger le nom d'une page contenant une erreur

Où trouver "Pages liées" ?

1) Aller sur la page contenant une erreur

2) Dans un des menus déroulants sur les cotés de la page, ouvrir "pages liées" dans un nouvel onglet

Où trouver "Renommer" ?

3) Retourner sur la page d'origine contenant une faute, puis cliquer sur "renommer" se trouvant dans un des menus sur le coté de la page.

Menu pour renommer la page

4) Procéder à la correction sur la page "renommer"

5) Revenir sur la page ouverte à l'étape 2, puis procéder à la correction de chacun des liens situés dans d'autres pages, menant vers l'ancienne page. Bon courage. Vous êtes un héros.











Créer de l'espace dans un texte

Exemple 1
Exemple 2 montrant l'utilisation de la balise

Parfois, le texte sur une page s'affiche mal, et un retour à la ligne avec la touche espace n'a aucun effet comme dans l'exemple 1.

1) Aller sur la page > Modifier le wikicode

2) Ajouter une ou plusieurs balises <br> à chaque ligne nécessitant un espace (Exemple 2)

3) Répeter l'opération jusqu'à ce que la mise en page vous convienne. (Exemple 3)

Exemple 3












Ajout d'une timeline

/!\ Utiliser modification du Wikicode pour modifier une timeline

Une timeline s'insère entre balises graph au format json. La structure utilisée est Vegas2 Il est possible de tester des rendus en local avant publication grâce à l'éditeur Vega : https://vega.github.io/vega-editor/?mode=vega.

On retrouve 6 attributs de premier niveau :

width et height : dimensions de la timeline en pixel. Jusqu'à présent la largeur est standard entre toutes les timelines et la hauteur peut être adaptée selon le nombre de membres dans la timeline.

data : liste de toutes les informations qui sont affichés dans la timeline, réparties en 4 blocs. les champs name et format ne sont pas à modifier.

  • membres : un membre se définit avec 5 champs
{ 
  "label": "miguel", // identifiant du membre (doit être unique)
  "nom": "Miguel Rodriguez", // nom complet (espaces, guillemets, accents sont possibles)
  "membre_start": "2021-05-11", // date d'entrée dans le groupe (format année-mois-jour)
  "membre_end": "2021-10-30", // date de sortie du groupe (format année-mois-jour, à mettre à la date du jour si le membre est toujours là)
  "status": "" // possibilité d'ajouter un émoji à la fin de la ligne pour expliciter le départ du groupe (décès, départ de l'île, retour à la vie civile, ...)
}
  • seconds
{
  "label": "haylie", // identifiant du second (cf. liste des membres)
  "second_start": "2021-05-11", // début du rôle de second (format année-mois-jour)
  "second_end": "2021-06-08" // fin du rôle de second (format année-mois-jour)
}
  • chefs
{
  "label": "miguel", // identifiant du chef (cf. liste des membres)
  "chef_start": "2021-05-11", // début du rôle de chef (format année-mois-jour)
  "chef_end": "2021-10-30" // fin du rôle de chef (format année-mois-jour)
}
  • events
{
  "name": "27/05 - Méthamphétamine", // légende de l'évènement
  "date": "2021-05-27", // date de l'évènement (format année-mois-jour)
  "y": -20 // offset vertical (en pixel) à appliquer, à modifier quand plusieurs évènements sont proches et que le texte se chevauche
}


marks : les différents éléments affichés dans la timeline.

  • pour les évènements (normalement pas besoin de modifier)
    • un bloc rect pour le trait
    • un bloc text pour la légende.
  • pour les membres
    • 3 blocs rect pour le trait (membre, second, chef). C'est ici qu'on peut choisir la couleur du trait en modifiant la valeur hexadécimale dans "properties -> fill -> value")
    • un bloc text pour la légende.


Les champs suivants n'ont en général pas besoin d'être modifiés :

  • scales : propriété des axes de la timeline
  • axes : légende de la timeline


Attention:

Les dates: Elles ont toutes sous le format "AAAA-MM-DD" avec les doubles quotes autour

Les retours à la lignes: Json se présente sur ce format { "clef1":valeur, "clef2": valeur} Il est encadré d'acolades et chaque fin de ligne est marquée par une virgule sauf la derniere.

Le texte: Toujours encadré de doubles quotes "Voici un exemple"

Donnée manquante S'il vous manques des données (par exemple un membre n'a pas encore quitté de gang) mettre la valeur à "membre_end": null, un null indique que la donnée est vide, il est aussi possible de mettre "" pour une date ou du text


Ajout de lien(s) dans une image

La surface de l’image peut comporter une ou plusieurs zones cliquables (de formes diverses et paramétrables) qui renvoient chacune vers une page différente, grâce au balise <imagemap>. Le « i » qui assure le lien vers la page de description de l’image peut alors être insérer dans l'angle voulu, bien qu'il ne soit pas obligatoire.

  • Syntaxe générale
<imagemap>
Fichier:Nom de l’image|taille de l’image(enPx)|texte de remplacement
poly position-du-lien-1 [[lien-1]]
rect position-du-lien-2 [[lien-2]]
circle position-du-lien-3 [[lien-3]]
desc position-de-la-description
</imagemap>

On peut mettre en forme les images de la même manière qu'un image "classique" en précisant dans la ligne Fichier: en ajoutant le positionnement (left,right ou center) ou les propriétés de l'image (comme thumb).

  • Les différentes formes paramétrables


rect
Pour former un rectangle. Les paramètres sont les coordonnées de l’angle haut-droite, vers l’angle bas-gauche, suivies par un lien entre crochets (Exemple1)
circle
Pour former un cercle. Les deux premiers paramètres définissent le centre, le troisième concerne le rayon du cercle, suivis par un lien entre crochets (Exemple1)
poly
Pour former un polygone. Les coordonnées de tous les sommets sont données, suivies par un lien entre crochets (Exemple2)
desc
Spécifie la location de l’icône bleu, avec un « i » qui assure le lien vers la page de description de l’image. Cette fonction est désactivé pour les vignettes. Peut prendre les valeurs :
Image1: Comment trouver les coordonnées des points.

top-right (haut à droite),
bottom-right (bas à droite),
bottom-left(bas à gauche),
top-left (haut à gauche),
none (aucune description).

Comment trouver les coordonnées

/!\ Les coordonnées sont celles de l'image source en taille réelle
Le plus simple pour trouver les coordonnées de points sur une image est de l'ouvrir en taille réelle avec un logiciel de retouche d’image qui indique les coordonnées du pointeur (Image1), en nombre de pixels. Il n’y a alors plus qu’à les noter.


Exemple

Syntaxe Rendu

Exemple1
Pour le cercle :
1 correspond à la coordonnée en abscisse
2 correspond à la coordonnée en ordonnée
3 correspond au rayon du cercle voulu
1:168px | 2:246px | 3:78px

Pour le rectangle :
1:852px | 2:352px | 3:1104px | 4:675px

Ce qui donne :

<imagemap>
Fichier: Rect and circle.png|500px|Image tuto
circle 168 382 78 [[Mike Ashman]]
rect 852 352 1104 675 [[Isaac Cathardo]]
desc bottom-right
</imagemap>
Image tutoMike AshmanIsaac Cathardo
Image tuto
Exemple2

Pour le polygone :
1:351 | 2:615 | 3:420 | 4:405

Selon le même principe, on peut donc faire tous les sommets :

5:615 376 | 6:598 690 | 7:382 684

Ce qui donne :

<imagemap>
Fichier: polygonetuto.png|thumb|500px|Tutoriel pour polygone
poly 351 615 420 405 615 376 598 690 382 684 [[Pablo Luján Arteaga]]
desc none
</imagemap>
Pablo Luján Arteaga
Tutoriel pour polygone