« Utilisateur:Jd/Skin bépo » : différence entre les versions

Dernière version du 13 février 2010 à 04:14

Le thème (skin, template, …) bepo est une skin pour le logiciel MediaWiki, en vue d'une utilisation sur bepo.fr spécifiquement. Elle a été créée à l'occasion de la sortie de la version 1.0 de la disposition clavier.

Basée à l'origine sur le thème Cavendish, dépassé techniquement, la skin finale a été synchronisée avec la dernière version de Monobook (skin officielle de MediaWiki). Elle fait un large usage de jQuery pour créer, entre autre, des effets d'animation et de transparence et adapter les dimensions du site selon le contenu et la résolution écran. À ma connaissance, l'ensemble fonctionne dans tous les navigateurs modernes et se « dégrade » correctement en l'absence de JavaScript.

Pour les hack3rs, les feuilles de styles (ne pas oublier MediaWiki:Bepo.css et MediaWiki:Common.css, qui sont dynamiques) sont à parcourir avec le fichier jquery-enhancements.js ouvert, ce dernier contenant les divers hooks jQuery créés par mes soins. Le fichier principal est /dvorak/bepo.fr-web/htdocs/wiki/skins/Bepo.php (ftp).

TODO

d'autres bannières pour l'en-tête
contrôle de tous les modèles, certains sont cassés
ce qui est mentionné dans la section Avertissements

Avertissements

Un certain nombre de petits bugs subsistent en raison de particularités liées au thème actuel, Monobook. Ils ne pourront être résolus que lorsque le thème par défaut sera « Bepo ».

Des polices anormalement petites par-ci par-là. Essentiellement lié à des modèles qui déclarent en durs des styles non modifiables par une CSS externe (pas de classe ou d'identifiant définis). À terme, il faudra externaliser ces styles via des classes et ids, et les gérer par MediaWiki:Monobook.css, MediaWiki:Common.css et les CSS du thème Bepo. Je l'ai fait pour quelques modèles (exemple, {{touche}}).

`jquery-enhancements.js` : utilisation et astuces

Ne pas afficher le titre d'une page

La fonction bepo_DeleteTitles() permet de masquer le titre de niveau h1 de certaines pages. C'est notamment le cas de l'accueil et de la page principale d'installation. Les pages concernées sont indiquées dans Pages sans titre, à raison d'un titre par ligne. Commentaires autorisés, mais pas de formatage !

Tooltips sur les liens du dock

Le dock (barre supérieure) peut recevoir des liens pour lesquels sont affichés des tooltips (infobulles) avec l'aide de la librairie qTip. La déclaration se fait dans /skins/bepo.php, en respectant une certaine structure munie d'identifiant et de classes génériques. Ces tooltips étant des div standard, elles peuvent contenir tout type de contenu valide.

La structure type pour les tooltips du dock est la suivante :

<li id="trigger-[nom du trigger]">
  <a href="#" class="trigger" title="xxx">Mon trigger</a>
  <div class="tooltipContent">
    ... contenu du tooltip
  </div>
</li>

Dans la pratique, on a par exemple :

<li id="trigger-forum">
  <a href="http://forum.bepo.fr" class="trigger" title="Forum">forum</a>
  <div class="tooltipContent">
    <h2>forum de discussion</h2>
    le lieu principal d'échange – notez qu'il existe également une <a href="Communauté">liste de diffusion</a> !
  </div>
</li>

Dans le cas général, le trigger peut être n'importe de quel type, donc pas nécessairement un lien dans un item de liste comme j'ai fait ici : il suffit qu'il porte la classe trigger (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée à sa suite par un élément de classe tooltipContent. La portion de code jQuery associée à tout cela est à la fonction bepo_DockTooltips().

Évidemment, la technique peut-être mise à profit ailleurs que dans le dock ; mais il faudra faire attention aux identifiants et sans doute écrire un nouveau hook jQuery — peut-être en rationalisant le style associé (cf. la doc officielle) pour éviter de retaper grosso modo deux fois la même chose.

@@ Ligne 1 : / Ligne 1 : @@
-''Quelques notes sur la skin bépo (<code>[http://bepo.fr/wiki/skins/bepo/ /skins/bepo/]</code>).''
+{{intro|Le thème (''skin'', ''template'', …) {{c|[http://bepo.fr/wiki/skins/bepo/ bepo]}} est une skin pour le logiciel MediaWiki, en vue d'une utilisation sur bepo.fr spécifiquement. Elle a été créée à l'occasion de la sortie de la version 1.0 de la disposition clavier.}}
-'''BUG Internet Explorer''' : plus de jQuery pour le moment sous IE, debug en cours. Donne une idée du résultat sans JavaScript...
+Basée à l'origine sur le thème Cavendish, dépassé techniquement, la skin finale a été synchronisée avec la dernière version de Monobook (skin officielle de MediaWiki). Elle fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence et adapter les dimensions du site selon le contenu et la résolution écran. À ma connaissance, l'ensemble fonctionne dans tous les navigateurs modernes et se « dégrade » correctement en l'absence de JavaScript.
-----
+Pour les ''hack3rs'', les [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont à parcourir avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js jquery-enhancements.js] ouvert, ce dernier contenant les divers ''hooks'' jQuery créés par mes soins. Le fichier principal est {{c|/dvorak/bepo.fr-web/htdocs/wiki/skins/Bepo.php}} (ftp).
-Basée à l'origine sur le thème Cavendish (Mozilla Wiki), la skin finale a été synchronisée avec les fonctionnalités de la dernière version de Monobook (skin officielle de MediaWiki) et fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence. Les [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont donc à étudier en lien avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js jquery-enhancements.js], qui contient les divers ''hooks'' JavaScript créés par mes soins. Normalement, l'ensemble fonctionne dans les navigateurs modernes et se dégrade correctement en l'absence de JavaScript.
 == TODO ==
@@ Ligne 23 : / Ligne 21 : @@
 === Ne pas afficher le titre d'une page ===
-La fonction commentée par ''delete some specific titles'' permet de déclarer certaines pages pour lesquelles le titre de niveau <code>h1</code> ne doit pas apparaître. C'est notamment le cas de l'accueil et de la page principale d'installation.
+La fonction {{c|bepo_DeleteTitles()}} permet de masquer le titre de niveau <code>h1</code> de certaines pages. C'est notamment le cas de l'accueil et de la page principale d'installation. Les pages concernées sont indiquées dans [[Pages sans titre]], à raison d'un titre par ligne. Commentaires autorisés, mais pas de formatage !
 === ''Tooltips'' sur les liens du dock ===
-Le dock (barre supérieure) peut recevoir des liens pour lesquels sont affichés des ''tooltips'' (infobulles) avec la librairie [http://craigsworks.com/projects/qtip/ qTip]. La déclaration se fait dans <code>/skins/bepo.php</code>, en respectant une certaine structure munie d'identifiant et de classes génériques. Les ''tooltips'' étant des <code>div</code> standard, elles peuvent contenir tout type de contenu valide.
+Le dock (barre supérieure) peut recevoir des liens pour lesquels sont affichés des ''tooltips'' (infobulles) avec l'aide de la librairie [http://craigsworks.com/projects/qtip/ qTip]. La déclaration se fait dans {{c|/skins/bepo.php}}, en respectant une certaine structure munie d'identifiant et de classes génériques. Ces ''tooltips'' étant des {{c|div}} standard, elles peuvent contenir tout type de contenu valide.
-La structure type est la suivante :
+La structure type pour les tooltips du dock est la suivante :
 <source lang="html4strict">
@@ Ligne 40 : / Ligne 38 : @@
 </source>
-Le ''trigger'' peut en fait être n'importe de quel type, et pas forcément dans un item de liste : il suffit qu'il est la classe <code>trigger</code> (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée à sa suite par un élément de classe <code>tooltipContent</code>. La portion de code jQuery associée est à la section ''tooltips -- using the qTip library
+Dans la pratique, on a par exemple :
-''.
+<source lang="html4strict">
+<li id="trigger-forum">
+  <a href="http://forum.bepo.fr" class="trigger" title="Forum">forum</a>
+  <div class="tooltipContent">
+    <h2>forum de discussion</h2>
+    le lieu principal d'échange – notez qu'il existe également une <a href="Communauté">liste de diffusion</a> !
+  </div>
+</li>
+</source>
+Dans le cas général, le ''trigger'' peut être n'importe de quel type, donc pas nécessairement un lien dans un item de liste comme j'ai fait ici : il suffit qu'il porte la classe  {{c|trigger}} (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée ''à sa suite'' par un élément de classe {{c|tooltipContent}}. La portion de code jQuery associée à tout cela est à la fonction {{c|bepo_DockTooltips()}}.
-Évidemment, la technique peut-être mise à profit ailleurs que dans le dock, mais il faudra faire attention aux identifiants et écrire un nouveau ''hook'' jQuery, peut-être en rationalisant le style associé (cf. la doc officielle).
+Évidemment, la technique peut-être mise à profit ailleurs que dans le dock ; mais il faudra faire attention aux identifiants et sans doute écrire un nouveau ''hook'' jQuery — peut-être en rationalisant le style associé (cf. la doc officielle) pour éviter de retaper ''grosso modo'' deux fois la même chose.