FANDOM


Alors tout d'abord, la question essentielle avant de commencer est: quels sont les différents langages utilisés pour programmer sur un wikia ?

Présentation des langages utilisés

Wikitext

Le premier, tout contributeur vétéran le connais, au moins de vu si ce n'est de nom: c'est le Wikitext. Mais qu'est ce donc que cela ? Le Wikitext est une forme simplifié du HTML pour être facilement utilisés sur un wiki. Vous devez l'avoir déjà utilisé quand vous faites un lien [[file:image.png]] ou quand vous créez un tableau par exemple {| class="wikitable" .... Celui-ci est alors directement utilisable sur une page lorsque vous éditez en mode source et vous permet entre autre de mettre en page votre contenu.
A savoir que vous pouvez également directement utiliser le HTML sur la page en même temps que le Wikitext, mais certaine balise sont cependant bloqués comme la balise <a> et <img> .

Lua

Ensuite viennent plusieurs autre langage qui ne pourront pas être appliqués directement sur la page du wiki, mais appelés extérieurement via certaines pages spéciales. Parmi eux, même si peu utilisé, il y a le Lua.
Ce langage permet de créer des Modules, qui peuvent être appelés dans une page à l'instar des Modèles. Cependant contrairement à eux qui sont écrits en Wikitext et ne permettent donc globalement que de la mise en page, le Lua permet d’exécuter des codes bien plus complexes et profond. Exemple: Module:Monster_List_(Filter)

La manière dont on les appelle dans une page est également un peu complexe et n'est pas forcément très intuitive:

{{#invoke: Module test|main
|Arg 1 = Blabla
|Arg 2 = Blablabla
}}

C'est d'ailleurs cette façon peu intuitive et compliqué de les appeler qui fait que les modules sont si peu utilisés, au détriment des script en JavaScript sur lesquels on reviendra tout à l'heure.

Voir Le Wikitext pour les nuls pour en savoir plus.

CSS

Ensuite vient l'un des acteurs majeurs du wikia, le CSS. Ce dernier est exclusivement utilisé pour permettre un peu de dynamisme dans les pages, en changeant la couleur quand on passe la souris sur un tableau par exemple. Le CSS marche avec ce qu'on appelle des "StyleSheet", c'est à dire qu'on définit des paramètres comme la couleur, la taille de la police d'un cadre qui s'applique sur un "Sélecteur CSS", qui agira comme encre sur les éléments de la page. Ainsi les éléments visé par ce sélecteur verront leur paramètre changer en fonction de ce qui est inscrit sur le stylesheet. Normalement le CSS marche en symbiose avec le HTML, mais j'expliquerais avec du Wikitext ici pour simplifier.

Voir Le CSS pour les nuls pour en savoir plus.

JavaScript

Le dernier langage utilisé est le JavaScript, utilisé principalement pour créer des événements sur des pages, tel que afficher une image si tel bouton est cliqué. Tout comme le Lua, c'est un langage algorithmique et non de présentation comme le HTML ou le CSS. Cependant, un peu comme le CSS, le code ne peut pas être appelé depuis la page directement mais en utilisant des sortes d'accroches qui cibleront indirectement le contenu à cibler.
Pour cela, on utilise majoritairement JQuery pour sélectionner un élément d'une page, comme un tableau, et changer ses paramètre. Mais le JS peut faire bien plus. Contrairement au CSS qui ne peut que changer un contenu pré-existant, le JS peut quant à lui ajouter du contenu sur une page, après le chargement du script, ce qui le rend tout particulièrement puissant, et plus pratique à utiliser que le Lua.

Mise en place des script

Après ce cours en abrégé, c'est bon on peut se dire qu'on a toutes les clefs en main pour pouvoir commencer non ? Mais ... il reste une petite question qui reste en suspense... Où dois-je alors écrire les script en JS et CSS si ce n'est pas sur la page elle-même ? Eheh, on va voir ça tout de suite.

Architecture du wikia

Pour commencer, voilà un petit cours simplifié sur l'architecture des pages dans wikia. Ce qu'il faut savoir c'est que chaque page, que ce soit un fil de forum ou un modèle, possède à chaque fois un nom de domaine qui les catégorise. Ainsi, une page lambda aura le n° de domaine 0, tandis que qu'un fichier aura par exemple le n° de domaine 6.
Cela vous semble très abstrait pour l'instant et pas forcément très concret mais vous allez voir par la suite. Par soucis de lisibilité et de facilité, on a nommé ensuite ces noms de domaine pour qu'ils puissent être facilement reconnaissables; vous devrez d'ailleurs les définir en tant que préfixe lorsque vous créez une page. Eh oui, vous l'aurez compris, ce sont les préfixe type "Modèle:" quand vous créez une page de modèle ou "File:" lorsque vous souhaitez accéder à une image. D'ailleurs, les pages de contenus normales n'auront pas de préfixe par soucis de facilité.

Mais pourquoi je vous raconte ça allez-vous me dire, ça n'a rien à voir avec le CSS ou je sais pas quoi si ?
En effet pas directement, mais cela vous permet de comprendre que le wikia est divisé en de nombreuses catégorie de page identifiées par ces noms de domaine. L'un d'eux va nous intéresser tout particulièrement, le nom de domaine "MediaWiki".
Les pages MediaWiki contiennent tout le contenu, le code et les paramètre tels que les messages système qui ne sont pas censé être visible par le commun des mortel. Même si tout le monde peut y accéder, seul les admin peuvent les modifier par mesure de sécurité. Et je pense que vous avez devinez: c'est sur ces mêmes pages que l'on va placer notre code JS ou CSS !

Modifications globales et locales

Cependant, avant de vous lancer, sachez qu'il y a plusieurs moyens de placer du code sur un wikia, ou plutôt plusieurs echelles à laquelle ces modifications pourront être visibles.

Tout d'abord, la modification sur tout le site. Ainsi, un code placé sur une des pages ci-dessous va affecter tout le wikia et être visible par tout ses utilisateurs. Il existe plusieurs pages possible (liste non exhaustive, seulement pour nos besoins) :

  • MediaWiki:Common.js: common.js va permettre de placer des script écrit en JavaScript (d'où le suffixe .js)
  • MediaWiki:Common.css: common.css lui, va vous permettre d'écrire vos stylesheet en css
  • MediaWiki:ImportJS: Page un petit peu spéciale qui permet d'indiquer quel page JS du wiki (toute page finissant par .js) doit être chargé, ou quelle page JS d'un autre doit être chargé. Vous n'en aurez pas forcément l’utilité.

Ensuite viennent les modifications qui n'affecteront que vous, que ce soit sur le wiki actuelle ou tout les wiki:

Étape de validation du code

Grâce aux nombreuses possibilités de personnalisation offertes par le JavaScript, afin d'éviter que le wikia soit modifié trop profondément, chaque nouveau script en JavaScript (sur les pages cités plus haut donc) subissent une période de vérification par le staff de Fandom. Attention toutefois, cela ne se fait que sur les script qui touchent tous les utilisateurs d'un wiki, le JS personnel peut être modifié à volonté.

Ainsi, une fois que vous avez validé les modifications d'un page de JS, vous devez cliquer sur le bouton "soumettre à la vérification" à coté, sur la colonne de droite. Pendant un certains temps, la page aura donc bien validé les modifications mais il faudra attendre que le staff vérifié et approuve le code pour qu'il soit mis en service sur le wiki. Vous pouvez tout de même cliquer sur "Activer le mode test" pour tester cette version sans que le code ai été vérifié (seulement visible par vous).

Tester les codes plus facilement

Vous en conviendrez, devoir à chaque modifier votre page de JS ou CSS et rafraichir la page pour constater que vous avez un petit bug est assez fastidieux est pas forcément très réjouissant. Néanmoins, ce n'est pas une fatalité et je vais donc vous donnez quelques bonnes pratiques pour vous permettre de gagner en efficacité.

Outils de développement

Sur la plupart des navigateurs, il existe un outil appelé "outils de développement" qui va vous permettre de modifier directement le contenu de la page sans devoir rafraichir la page. Bien sûr les modifications ne sont pas enregistré et fermer la page annulera tout. Néanmoins, cette outil à l'avantage d'analyser le code source de la page et d'y effectuer quelques modifications pour faire divers test. La forme reste globalement la même mais il peut y avoir certaines différences selon le navigateur que vous utilisez:

  • Firefox: Ctrl + Maj + I
  • Chrome: Ctrl + Maj + I
  • Edge: F12

Vous pouvez bien sûr également y accéder en farfouillant dans les options.