Utilisateur:GôTô/Monobook

Cette page est une introduction aux possibilités offertes par les fichiers monobook.js (JavaScript) et monobook.css (Cascading Style Sheets, feuilles de style en cascade).

Comment ça marche

Introduction

Tout d'abord, les modifications qu'apportent ces fichiers ne sont prises en compte qu'en sélectionnant l'apparence MonoBook dans les préférences (apparence par défaut). Le fichier monobook.js n'est pris en compte que si vous disposez d'un navigateur supportant le JavaScript, où ce langage de script a été activé (cas par défaut des navigateurs récents).

Le principe est le suivant: votre navigateur reçoit ces deux fichiers et les stocke (pour éviter de les récupérer à chaque connection au site). Ces deux pages sont ensuite consultées dans certains cas, pour :

1. des paramètres d'apparence/affichage (feuille de style, monobook.css)
2. exécuter du code JavaScript (monobook.js)

Il existe un fichier monobook.js et un fichier monobook.css communs à tous les utilisateurs du site: MediaWiki:Monobook.js et MediaWiki:Monobook.css ; chaque utilisateur enregistré peut créer son propre fichier monobook.js et son propre fichier monobook.css: les miens sont Utilisateur:GôTô/monobook.js et Utilisateur:GôTô/monobook.css (attention à la casse). Les premiers ne sont modifiables que par les administrateurs et s'appliquent à chacun des utilisateurs ; les seconds sont modifiables par les administrateurs et bien sûr par l'utilisateur concerné, et ne s'appliquent que pour lui. Chaque utilisateur peut ainsi personnaliser son Wikipédia.

Note : Les deux monobook.js et les deux monobook.css sont utilisés simultanément. Inutile donc de reprendre du contenu de MediaWiki:Monobook.js ou de MediaWiki:Monobook.css dans vos propres fichiers.

Pages HTML

En vous connectant sur une page, votre navigateur reçoit le code HTML de la page, ainsi que divers fichiers (feuilles de style, fichiers de script, images, etc.). Il interprète alors le fichier HTML, qui contient principalement du texte et des données de mise en page (type d'objet¹, placement, couleurs, visibilité, etc.). Certaines données de mise en page sont, pour des raisons de commodité et de lisibilité, stockées dans d'autres fichiers, les feuilles de style. Le code HTML contient également des appels de fonctions, qui doivent être lancés sur certains évènements: clic sur un lien/bouton/autre, fin de chargement de la page, prise/perte de focus d'un objet, appui sur une touche, passage du curseur de la souris, etc.

Ce que l'on peut faire

Feuille de style

Les fichiers CSS permettent de (re)définir le rendu d'un ou plusieurs objets¹ (alignement, visibilité, taille, couleur). On peut définir des propriétés² applicables à trois champs de portée :

1. Un type d'objet
2. Une classe
3. Un objet possédant un certain identifiant

Il est possible des mélanger ces méthodes pour affiner le champ d'application.

Exemples :

• Type d'objet: h3 { border-bottom: dotted 1px #000000; }
  

Tous les objets de type h3 (titre de niveau 3) auront une bordure du bas pointillée de taille 1 px et de couleur #000000 (noir).

• Classe : .classe1 { border-bottom: dotted 1px #000000; }
  

Tous les objets de classe classe1 auront une bordure du bas pointillée de taille 1 px et de couleur #000000 (noir).

• Identifiant : #id1 { border-bottom: dotted 1px #000000; }
  

Tous les objets portant l'identifiant id1 auront une bordure du bas pointillée de taille 1 px et de couleur #000000 (noir).

• Mélange : div.egy_calendrier#cadre { background: #FFFFFF; }

Les objets de type div, de classe egy_calendrier et d'identifiant cadre auront du blanc comme couleur de fond.

• Autre mélange : #cadre div { display: none; }

Les objets de type div appartenant à des objets d'identifiant cadre ne seront pas affichés.

JavaScript

Via le JavaScript, il est possible d'exécuter des actions sur les objets¹ d'une page HTML : modifications des propriétés² (identifiant, classe, taille, etc.), ajout de nouveaux objets (nouveaux liens, nouveaux boutons, nouvelles images, etc.). Grâce à AJAX, il est également possible de faire des requêtes Http. Par exemple on peut, sans changer de page, charger des données se trouvant sur une page quelconque (sur Wikipédia ou ailleurs).

On peut distinguer le code séparé dans des fonctions du code écrit en dehors de fonctions. Ce dernier est exécuté dès le chargement de la page, alors que le code situé dans des fonctions n'est exécuté que lors de l'appel de ces fonctions, appel qui peut être placé sur un évènement, ou dans du code hors fonction. Il faut d'ailleurs être prudent du code placé en dehors de fonctions, car il est exécuté avant la fin du chargement de la page. Cela signifie qu'à ce niveau là, les objets de la page ne sont pas encore chargés. C'est pour cela que l'on utilise des fonctions, que l'on appelle une fois le chargement de la page terminé (via la fonction addOnloadHook).

Ce que l'on ne peut pas faire

Il faut bien avoir conscience que les fichiers monobook n'entrent en jeu qu'une fois la page téléchargée par votre navigateur. Cela signifie qu'on n'intervient pas sur les serveurs, mais seulement sur l'ordinateur de l'utilisateur. Ainsi, impossible d'accéder directement à la base de données et d'y faire des requêtes. Mais il est techniquement possible d'écrire un script qui modifie des pages. Une autre conséquence est que, quoi que l'on fasse avec le Javascript, on n'améliorera pas le temps de téléchargement de la page.

Mise en place

Les fichiers monobook.css et monobook.js se complètent, et n'ont pas nécessairement besoin l'un de l'autre. Certaines modifications peuvent être faites en utilisant l'un, l'autre ou les deux, et pour des questions de vitesses, je ne peux que vous conseiller d'utiliser le css dans ces cas là.

monobook.css : Usage

Tout commence par la création de votre fichier (page) Utilisateur:Chocoholic/monobook.css. Ensuite, il faut savoir ce que vous voulez modifier.

• S'il s'agit d'un type d'objet¹, rien de plus facile, il suffit d'écrire dans votre fichier: nom_objet { propriété1: valeur1; propriété2: valeur2; } Pour connaître les différents objets HTML et leurs propriétés², voyez la section Voir aussi.

• S'il s'agit d'objets créés ou modifier via le monobook.js, vous avez le choix. Soit vous leur mettez une classe, soit un identifiant particulier grâce au JavaScript (enfin, sauf si vous souhaitez vous compliquer la vie..). Ensuite, vous faites comme plus haut :)

• Dans les autres cas, il va falloir mettre les mains dans le cambouis. Ehhh oui ! Si vous voulez modifier les propriétés de certains objets en particulier, il va vous falloir mettre le grappin dessus. M'enfin, c'est pas si compliqué, il faut juste ne pas se laisser impressionner par un code source. Cliquer donc dans votre navigateur bouton droit sur la page où on va chercher l'objet, et dans le menu contextuel sélectionnez Voir le code source (ou HTML, ou autre). Une nouvelle page s'ouvre, n'ayez pas peur, c'est juste du code ! Lancer une recherche (CTRL+F en général) sur ce qui vous intéresse (un morceau de texte proche ou inclut dans l'objet que vous voulez modifier). Ensuite, une fois l'objet trouvé, repérez soit son identité (id), soit sa classe (class), et vous n'avez plus qu'à écrire votre CSS.

Notes de syntaxe css :

1. Vous pouvez aller à la ligne, rajouter des espaces et des tabulations comme il vous chante.
2. Le « ; » n'est nécessaire que pour séparer deux propriétés (inutile donc quand on n'a qu'une propriété, ainsi que pour la dernière quand on en a plusieurs).

Important ! Si du code CSS n'est pas correct, il est tout simplement ignoré

monobook.js : Démarche générale

1^re étape

Il est difficile d'agir sur des objets¹ lorsqu'ils n'ont pas encore été chargés. Par conséquent, on utilise généralement une fonction addOnloadHook. addOnloadHook(nom_fonction) permet d'ajouter la fonction nom_fonction aux appels lorsque l'évènement load ou onload de l'objet window est lancé, c'est-à-dire lorsque l'objet principal de la page est chargé. Il convient donc d'ajouter le code addOnloadHook(nom_fonction) hors fonctions pour qu'il soit exécuté dès que possible. La fonction nom_fonction sera appelé quand la page sera chargée. addOnloadHook se trouve actuellement dans MediaWiki:Monobook.js, inutile donc de la mettre dans votre fichier.

2^e étape

On se rend compte à l'usage qu'il y a peu de code que l'on souhaite voir exécuté pour chaque page. Le début de notre fonction va donc chercher à savoir les conditions sont réunis pour que l'on exécute le reste de la fonction (pour éviter les erreurs et ne pas perdre de temps).

Il faut commencer par analyser quelle particularité a notre page: titre (oui oui, les pages ont un titre, dans la barre de votre navigateur), présence de certains éléments.

Ensuite, on cherche si le titre de la page correspond, ou si l'élément est présent. Si ce n'est pas le cas, on sort de la fonction (return).

3^e étape et fin

À partir de là on fait ce que l'on a à faire. Ajout ou modification d'objet(s)¹.

Ça ne marche pas...

Ça marche pas ? Dommage !

Non mais ça marche vraiment pas !

Bon, puisque vous insistez...

• Si vous êtes sur mozilla, vous avez dans vos Outils une console JavaScript. Elle vous donnera les erreurs.
• Sur Internet Explorer, en cas d'erreur vous aurez un panneau jaune dans le coin en bas à gauche. Double-cliquez dessus.

Si vous avez toujours des problèmes, dommage ! demandez de l'aide (à Dake, Anakin, GôTô, etc., ou sur le bistro par exemple)

Données utiles

Obtenir un objet¹

Deux manières :

1. Utiliser la méthode³ getElementById de l'objet document: var a = document.getElementById("p-navigation")
2. Utiliser la méthode getElementsByTagName d'un objet: var divs = a.getElementsByTagName("div") qui renvoie un tableau d'objet et obtenir l'objet recherché.

Créer un objet

Deux manières :

1. Utiliser la fonction createElement("type_objet") de l'objet document : var all = document.createElement("input")
2. Écrire en brut le texte dans une variable, et utiliser la propriété² innerHTML disponible sur de nombreux objets: newLiCom.innerHTML = "<a id=\"pt-userpageCommons\" href=\"http://commons.wikimedia.org/wiki/User:GôTô\">commons</a>". Il faut au préalable obtenir cet objet, ou le créer lui aussi.

Ajouter un objet

Deux manières :

1. Voir ci-dessus
2. Utiliser la méthode³ insertBefore de l'objet que l'on veut comme père: parent.insertBefore(node, referenceNode)

Propriétés² utiles

JavaScript

accesskey

Permet de définir, sur certains objet, un raccourci d'accès. En mettant accesskey=1 ou accesskey="1" sur un bouton, il sera possible d'utiliser le bouton sans cliquer dessus mais en appuyant sur ALT+1.

title

Permet de définir un titre, utilisé comme infobulle.

style

Permet de définir des propriétés css. Syntaxe: style="propriété1: valeur1; propriété2: valeur2". Les valeurs s'entrent sans guillemets ni quotes ; il est possible d'ajouter des accolades.

Feuille de style

display

Mettez cette propriété à none pour faire disparaître (complètement) un objet. Mettez la propriété à inline pour le faire apparaître.

visibility

À ne pas confondre avec display. Les valeurs sont visible ou hidden. La différence avec le display est que l'espace occupé par l'objet est toujours visible, exemple:

Div avec display: inline et visibility: visible:

aa

Div avec visibility: hidden:

aa

Div avec display: none:

aa

On voit que l'espace est reservé dans le deuxième cas, même si le div n'est pas visible.

Conseils

1. Ajouter le texte /* <pre><nowiki> */ en haut de vos monobook et /* </nowiki></pre> */ en bas vous évitera des problèmes d'affichage (c'est mieux quand c'est lisible sans éditer).
2. Dans la mesure du possible, utilisez la prévisualisation
3. Soyez curieux et n'hésitez pas à regarder comment c'est chez les autres

Vocabulaire

Méthode

On entend par méthode d'un objet une fonction qui appartient à un objet. On peut donc aussi parler de fonction (terme moins précis). La méthode d'un objet est accessible par nomObj.method(). Une méthode peut admettre un, plusieurs ou aucun paramètre.

Objet

Un Objet ici réfère à toute entité que l'on peut trouver sur une page web. Il peut s'agir d'objets visibles (lien hypertexte, image, bouton, titre, boîte de texte, tableau, case d'un tableau, ligne d'un tableau, etc.) ou d'objets invisibles (div, paragraphe, retour à la ligne br, balise d'alignement center, balise d'italique, de gras, de caractère font, span, etc.). Pour connaître les objets d'une page, il vous faut l'éditer (clic droit et option Voir le code source ou HTML) et regarder les balises HTML. Vous trouverez l'ensemble des types d'objets ainsi que leurs propriétés et leurs méthodes dans les liens de références ci-dessous.

Propriété

Une propriété est une caractéristique d'un objet. Il peut s'agir de la largeur, la longueur, la couleur, la position, la police, du cadre, de la visibilité, du lien web associé, du titre, du raccourci, etc. Les propriétés sont accessibles par nomObj.propriété en javascript.

Voir aussi

• Sites de référence :
  • (en) MSDN, microsoft.
    Attention, ce site est fait pour la programmation sur Internet Explorer. Il existe des incompatibilités entre navigateurs.
  • (en) w3schools

• Programmation sous mozilla :
  • (en) Site officiel