Yes, we can – ajouts et correctifs

J’ai posté sur le blog de Wikimedia France une version complétée et un peu corrigée de mon billet « Interface de Wikipédia : yes, we can » , sous le titre « changement d’habillage sur l’ensemble des projets » .

Je vous encourage à aller lire :)

Interface de Wikipédia : yes, we can

…yes, change is coming! (ceci est une référence bidon au titre Obamaesque du billet du Wikimedia Technical Blog sur le sujet)

Le 5 avril prochain, l’ensemble des wikis de la Wikimedia Foundation va changer d’habillage, passant de l’actuel « monobook » vers celui développé par la Wikipedia Usability Initiative (dont je parlais dimanche), nommé « vector« .

Cela ne se limitera pas à mettre vector par défaut pour les nouveaux comptes (comme c’est déjà le cas sur quelques wikis), car ils semblent vouloir aussi passer tous les utilisateurs ayant gardé monobook sous vector. Même s’il sera indiqué comment retourner sous monobook, ça fait un peu forcé. J’entends les gens râler d’ici.

Voir aussi (en anglais)

• Wikimedia gets ready for some big changes sur Wikimedia Blog
• Usability Update: Introducing Dialogs aussi sur Wikimedia Blog

C’est le printemps

…j’ai été pris d’une envie soudaine de tenter d’autres apparences pour mon blog, donc voici.

J’espère que vous ne trouverez pas ça trop moche :)

Edit : finalement non. Je viens de m’apercevoir que le nouveau thème affuble une majuscule à chaque mot du titre. La « majusculisation » à outrance m’agace déjà suffisamment sur le wiki pour que je n’ai pas en plus à la supporter ici…

Wikipédia, édition améliorée

la Wikipedia Usability Initiative est un groupe de travail de la Wikimedia Foundation créé suite à un grant de la Stanton Foundation. Il a pour but d’améliorer le système d’édition, et le rendre plus simple d’utilisation pour les personnes n’étant pas nées avec un clavier d’ordinateur entre les mains. Ce groupe de travail, initialement prévu pour une durée fixe (6 mois je crois), a récemment été rendu permanent grâce au très bons résultats de la dernière levée de fond  et aux 2 millions de dollars donnés par une fondation liée à Google.

Je suis tombé  sur une de leurs versions de travail, voici ce que ça donne pour le moment (n’oubliez pas que ça n’est que ma vue partielle de la chose – il y a probablement des trucs auquel je n’ai pas fait attention, ou qui ne sont pas visible sur cette version ci)  :

description

1 – liste des sections, permet d’aller à la section concernée en cliquant dessus (toutefois, je pense qu’il reste plus pratique d’aller éditer directement la section plutôt que la page entière)

1b – cliquer sur « hide contents » permet -contrairement à ce que son nom indique :) mais c’est un détail- de masquer la barre de droite.

2 – « prévisualiser » et « voir mes modifications » sont maintenant gérés en AJAX, ce qui veux dire sans rechargement de la page (ça ne semble toutefois pas opérationnel pour le moment).

3 – cliquer sur « advanced », « special characters » ou « help » affichent un sous-menu en dessous du menu de base. Sur la capture, le sous-menu « advanced » est affiché.

4 – le texte est plus grand. C’est pratique pour ceux qui n’ont pas une si bonne vue (comme moi…)

5 – last but not least, les modèles comportant des paramètres sont maintenant encapsulés.

• cliquer sur le bord gauche du modèle encapsulé l’affiche en mode brut (éditable tel quel)

• cliquer sur son bord droit affiche une interface dédiée pour l’édition de ses paramètres

pas mal du tout, je trouve cependant que ça rend la lecture plus compliquée pour des modèles comme {{convert}}, comme cela bouffe un morceau de la phrase.

Personnalisons Wikipédia : la barre du haut

Ce billet fait partie de la série « Personnalisons Wikipédia ». La personnalisation du jour vous permettra de changer la tronche de la barre en haut à droite.
Je commencerais doucement avec des modifications esthétiques simples  (en CSS), puis ce sera au tour de l’ajout d’icônes (toujours en CSS), pour finir sur la modification du texte des liens et l’ajout d’autres liens dans la barre (en JavaScript).

Histoire d’avoir une base de travail « propre » (mon compte principal étant très customisé), je me servirais ici d’un compte « user:Pelote de laine », donc ne soyez pas surpris du nom affiché dans la barre sur les exemples :)

Au moment ou j’écris ces lignes, la version par défaut de la barre du haut, avec le skin monobook, ressemble à ça :

Jouons un peu avec le CSS (monobook.css ou vector.css)

Pour commencer, voici quelques exemples de changement d’apparence. C’est juste pour vous donner une idée de ce qui peut être fait, donc c’est très hétéroclite ; n’hésitez pas à réutiliser les bouts qui vous plaisent :)  Lors de vos tests, pas besoin de sauvegarder votre monobook, un simple « prévisualiser » suffit pour jauger le résultat.

/* virer le lien "essayer la béta" */
li#pt-optin-try {
   display:none!important;
}

/* lien discussion : espace plus grand entre chaque lettre */
li#pt-mytalk a {
   letter-spacing:2px;
}

/* préférences : en italique */
li#pt-preferences a {
   font-style:italic;
}

/* liste de suivi : en petites majuscules */
li#pt-watchlist a {
   font-variant:small-caps;
}

/* contributions : barré */
li#pt-mycontris a {
   text-decoration:line-through ;
}

/* déconnexion : en rouge et gras */
li#pt-logout a {
   font-weight:bold;
   color:red;
}

Résultat :

Ajouter des icônes (toujours monobook.css ou vector.css)

Repartons de zéro (ou presque, je garde le bout supprimant le lien « essayer la beta »), et ajoutons cette fois des « icônes » à gauche de certains liens.

Chaque icône, étant attachée au node « a » et non au node « li », fait partie intégrante du lien et est donc cliquable.

/* boc de biere à gauche du lien vers ma page de discussions */
li#pt-mytalk a {
  /* mettre une image de fond (l'icône) au node "a", tout à gauche */
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/d/da/2piva.png/15px-2piva.png') no-repeat scroll left top;
  /* décaler le texte sur la droite (d'environ la largeur de l'image) pour que les deux ne se chevauchent pas */
  padding-left:17px;
}

/* une roue crantée à gauche des prefs */
li#pt-preferences a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Crystal_Clear_app_kservices.png/15px-Crystal_Clear_app_kservices.png') no-repeat scroll left top;
  padding-left:17px;
}

/* une loupe à gauche de la liste de suivi */
li#pt-watchlist a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Searchtool_right.svg/15px-Searchtool_right.svg.png') no-repeat scroll left top;
  padding-left:17px;
}

/* un crayon à gauche de la liste de contributions */
li#pt-mycontris a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Emblem-pen-new.svg/13px-Emblem-pen-new.svg.png') no-repeat scroll left top;
  padding-left:15px;
}

Résultat :

changer le texte, ajouter des liens (monobook.js ou vector.js)

Passons maintenant à la partie JavaScript (pour les étourdis, ça veux dire « ne collez pas le code ci dessous dans votre monobook.css, ça ne marchera pas ») . Nous allons ajouter des liens…

• vers votre monobook perso  : « js » et « css » (remplacez « monobook » par « vector » dans les liens au besoin, et adaptez si vous utilisez secure.wikimedia.org)

• vers vos logs

Et tant qu’on y est, modifions le texte des liens existants.

Le principe utilisé est le même que dans cet autre billet de personnalisation ainsi que celui ci, je ne m’étendrais donc pas trop sur son fonctionnement

importScript('Utilisateur:Darkoneko/divers.js') // si vous ne l'avez pas déjà

function customizeTopBar() {
   var logout = document.getElementById("pt-logout")
   if (!logout) return
   var topBarUl = logout.parentNode

   var mytalk = document.getElementById('pt-mytalk');
   //ajouter "js" a gauche de discussion. La variable "wgUserName" contient le nom de l'utilisateur en cours.
   topBarUl.insertBefore( createLiAdressNode('/wiki/user:'+wgUserName+'/'+skin+'.js', 'js'), mytalk)

   //ajouter "css" a gauche de discussion, donc il sera entre "js" et "discut'"
   topBarUl.insertBefore( createLiAdressNode('/wiki/user:'+wgUserName+'/'+skin+'.css', 'css'), mytalk)

   //changer le texte pour "Page de discussion"
   mytalk.getElementsByTagName("a")[0].firstChild.nodeValue = "discut' "

   //changer le texte pour "Préférences"
   document.getElementById('pt-preferences').getElementsByTagName("a")[0].firstChild.nodeValue = "prefs"

   //changer le texte pour "Liste de suivi"
   document.getElementById('pt-watchlist').getElementsByTagName("a")[0].firstChild.nodeValue = "watchlist"

   //changer le texte pour "Contributions"
   document.getElementById('pt-mycontris').getElementsByTagName("a")[0].firstChild.nodeValue = "contribs"

   //ajouter "log" a gauche de déconnexion
   topBarUl.insertBefore( createLiAdressNode('/w/index.php?title=Special:Journal&user='+wgUserName, 'log'), logout )

   //changer le texte pour "Déconnexion"
   logout.getElementsByTagName("a")[0].firstChild.nodeValue = "X"
}
addOnloadHook(customizeTopBar)

Résultat :

Et vous, quels autres liens ajouteriez vous ?

Personnalisons Wikipédia : enrouler/dérouler des sections v2

Ce billet fait partie de la série « Personnalisons Wikipédia ».

Vous trouverez ci dessous une mise à jour du code de mon précédent billet, Personnalisons Wikipédia : enrouler/dérouler des sections, qui vous permet de masquer ou réafficher des sections de pages de Wikipédia en cliquant sur leur titre.

Les améliorations sont les suivantes :

• Au lieu d’encoder directement un display:none/display:block , le script fait maintenant appel à la classe CSS « hidden » pour masquer les textes, afin d’éviter des problèmes d’affichage lors du dépliage (un modèle s’affichant sur toute la largeur de la page au lieu d’une largeur fixe, par exemple). 2 mini fonctions sont dédiées à cette tâche.

• le bug faisant afficher un bout de code an dessous du sommaire lors d’un dépliage a été résolu.

• lorsque vous repliez une sous-section, puis repliez/dépliez sa section parente, cette sous section restera repliée jusqu’à ce que vous cliquiez spécifiquement sur son titre (auparavant, lorsque l’on dépliait une section, tout son contenu était déplié, peu importe que des sous-sections aient été indépendamment repliées)

• La section ne se replie plus lorsque vous cliquez sur le « modifier » à droite du titre de cele-ci.

Comme d’habitude, le script a surtout été testé avec firefox 3.x et marche au moins aussi avec Safari (pas de garantie pour IE ou chrome, prévenez moi si vous rencontrez un problème dessus)

Nouveau code pour la partie JavaScript (monobook.js ou vector.js)

/* ajoute une classe à un element */
function addClass(elem,classe) {
  elem.className += " "+classe;
}

/* enlève la premiere occurence du nom d'une classe d'un element */
function removeClass(elem,classe) {
    var reg = new RegExp('(\\s|^)'+classe+'(\\s|$)');
    elem.className=elem.className.replace(reg,' '); //ne replace que la premiere occurence (comme ça les hide imbriqués restent en hide ^^)
}

/* Cette fonction ajoute un "onclick" sur chaque titre, qui lancera un appel à toogleTitle() lors d'un clic sur ceux ci */
function ImplementToogleOnclick() {
   for( var titleLevel = 1 ; titleLevel <= 6 ; titleLevel++) { //tous les h1, h2 ... h6
      var titleList = document.getElementsByTagName('h' + titleLevel)
      var nb = titleList.length
      for( var a = 0 ; a < nb ; a++) {
          titleList[a].setAttribute('onclick', "toogleTitle(this)");
      }
   }
  //pour que ça ne se replie pas quand on clique sur un bouton modifier, on annule l'event au niveau du lien
  var editLinkList = document.getElementsByClassName('editsection')
  nb = editLinkList.length
  for( a = 0 ; a < nb ; a++) {
     editLinkList[a].setAttribute('onclick', "event.cancelBubble=true;");
  }
}
addOnloadHook(ImplementToogleOnclick)

/* Cette fonction, quand invoquée, fait disparaitre ou réaparaitre le contenu placé sous un titre jusqu'au prochain titre de niveau egal ou supérieur
(= un h3 s'arrete au prochain h2 ou h3 mais continuera s'il rencontre un h4 ou h5) */
function toogleTitle(p_this) {
  var titre_niveau = p_this.nodeName.substring(1,2) //le x de hx (1 de h1, etc.)

  //construction de l'expression reguliere permettant le trouver le prochain titre de niveau égal ou supérieur
  var stopMatch = "(h1"
  for(var niveau = 2 ; niveau <= titre_niveau ; niveau++)  {
    stopMatch += "|h" + niveau
  }
  stopMatch += ")"
  regex_stopMatch = new RegExp(stopMatch, "i" )

  var nextSiblingNode = p_this.nextSibling

  if( p_this.className != "neko_toogle_cache"  ) { // il faut replier
    p_this.className = "neko_toogle_cache"  //on ajoute une classe au titre pour savoir s'il est en mode replié

    while( nextSiblingNode ) {
       if( nextSiblingNode.nodeName.match(regex_stopMatch) ) break; //on a atteint le titre "bloquant" suivant = stop
       if( nextSiblingNode.style && nextSiblingNode.nodeName != 'SCRIPT' ) addClass(nextSiblingNode, "hidden") //ne pas affecter les nodes texte ni script
       nextSiblingNode = nextSiblingNode.nextSibling //on passe au voisin suivant
    }
  } else { //il faut déplier
    p_this.className = ""

    while( nextSiblingNode ) {
       if( nextSiblingNode.nodeName.match(regex_stopMatch) ) break;
       if( nextSiblingNode.style && nextSiblingNode.nodeName != 'SCRIPT' ) removeClass(nextSiblingNode, "hidden")
       nextSiblingNode = nextSiblingNode.nextSibling
    }
  }
}

voili.

Personnalisons Wikipédia : enrouler/dérouler des sections

Ce billet fait partie de la série « Personnalisons Wikipédia ».  Avez vous déjà rêvé de pouvoir plier/déplier des sections entières du bistro ou d’un article quelconque de notre belle Wikipédia  ? Grâce à la personnalisation d’aujourd’hui, c’est maintenant possible juste en cliquant sur le titre de la section.

Exemple par l’image, prise sur le bistro du jour  :

(faites pas attention à la couleur de fond grise, c’est un de mes autres test CSS)

*clic* sur « Le bistro/7 mars 2010 » => enroulé avec toutes ses sous-sections !

un autre clic dessus pour le re-dérouler.

Si le titre est un lien,  alors cliquez à droite du texte, ça marche aussi.

Malheureusement, il se trouve que j’ai totalement la flemme d’expliquer comment fonctionne la partie javascript (en plus, il y a un bout assez compliqué) ; donc je me contenterais de vous fournir le code :)

Comme d’habitude, le code est à insérer dans votre sous page monobook ou vector selon le skin MediaWiki  que vous utilisez.

Partie à mettre dans votre monobook.css (ou vector.css)

Ce petit bout de CSS est la raison de la colorisation différente (+ mise en italique) des titres repliés dans l’image ci dessus. « neko_toogle_cache » est le nom de la classe CSS que le code javascript donne aux titres repliés, pour pouvoir savoir qu’ils sont repliés et qu’ils faut « déplier » en cas de nouveau clic sur le titre.

/* couleur des titres dont la section est cachée par la fonction toogle */
.neko_toogle_cache {
  color:#333;
  font-style:italic;
}

Partie à mettre dans votre monobook.js (ou vector.js)

Pas d’explication détaillée pour cette partie là, désolé (juste les commentaires du code). Peut être plus tard, je vous promet rien :)

/* Cette fonction ajoute un "onclick" sur chaque titre, qui lancera un appel à toogleTitle() lors d'un clic sur ceux ci */
function ImplementToogleOnclick() {

   for( var titleLevel = 1 ; titleLevel < 7 ; titleLevel++) {
      var titleList = document.getElementsByTagName('h' + titleLevel)
      var nb = titleList.length
      for( var b = 0 ; b < nb ; b++) {
          titleList[b].setAttribute('onclick', "toogleTitle(this)");
      }
   }
}
addOnloadHook(ImplementToogleOnclick)

/* Cette fonction, quand invoquée, fait disparaitre ou réaparaitre le contenu placé sous un titre jusqu'au prochain titre de niveau egal ou supérieur
(= un h3 s'arrete au prochain h2 ou h3 mais continuera s'il rencontre un h4 ou h5) */
function toogleTitle(p_this) {
  var p_niveau = p_this.nodeName.substring(1,2) //le 1 de h1 (ou 2 de h2, etc.)

  //construction de l'expression reguliere permettant le trouver le prochain titre de niveau égal ou supérieur
  var stopMatch = "(h1"
  for(var a = 2 ; a <= p_niveau ; a++)  {
    stopMatch += "|h"+a
  }
  stopMatch += ")"
  reg = new RegExp(stopMatch, "i" )

  //on ajoute une classe (neko_toogle_cache) au titre pour savoir s'il est en mode replié
  if( p_this.className != "neko_toogle_cache") { //il faut  replier
     p_this.className = "neko_toogle_cache"
     var display_to_put = "none"
  } else { //il faut faire déplier
     p_this.className = ""
     var display_to_put = "block"
  }

  var nextSiblingNode = p_this.nextSibling

  while( nextSiblingNode ) {
     if(  nextSiblingNode.nodeName.match(reg) ) break; //on a atteint le titre "bloquant" suivant = stop

     if( nextSiblingNode.style) { //certains nodes sont des nodes texte et n'ont pas de style.
        nextSiblingNode.style.display = display_to_put
        if( nextSiblingNode.className = "neko_toogle_cache") nextSiblingNode.className = "" // x
     }
     nextSiblingNode = nextSiblingNode.nextSibling //on passe au voisin suivant
  }
}

News et remarques diverses

Quelques news, des remarques ayant ou pas un rapport avec la wikisphère

• Depuis le 16 février 2010, avoir un user-agent est obligatoire pour tout logiciel (navigateur et autre) voulant accéder aux wikis de la Wikimedia Foundation (WMF). Le but est de limiter et repérer plus facilement les outils automatiques pillant sans vergogne les pages de Wikipédia (sites miroirs en temps réel notamment) et consomment une part notable des ressources de nos pauvres serveurs – personnellement, je pensait que c’était déjà le cas, mais apparemment seuls les user-agent par défaut des principaux langages de programmation  (python, PHP, etc) étaient auparavant bloqués.

• Une fondation liée à Google a fait une donation de 2 millions de dollar US à la WMF, sans contrepartie ni demande particulière. J’ai lu plusieurs personnes disant que la WMF aurait du refuser le don, et je ne saurais trop leur recommander de redescendre sur terre.

• la version de MediaWiki sur les serveurs de la WMF sera prochainement passé de la 1.15 à la 1.16 . Contrairement à une idée répandue, cela fait un certain temps que les nouveautés de MediaWiki ne sont plus directement importées sur les serveurs de production des projets (a quelques exceptions et corrections de bug près)

Le saviez vous ?

• sur la Wikipédia en langue allemande, les candidats au poste administrateur ont seulement besoin de 2/3 des voix (66.67%) pour être élus.

• Aux USA, on risque 7 mois de prison pour un viol collectif, 18 pour un braquage, et 24 pour le « piratage » d’un film  (source). Certains ont des problèmes de priorité, on dirait.

• Le jour sidéral de notre planète à raccourci de 1.26 microsecondes suite au séisme chilien du 27 février dernier (source)

• Il reste des gens qui pensent que Wikipédia a un responsable unique et que c’est lui qui fait les mises à jour d’article  (si si)

Et ses derniers mots en tant que steward furent…

…« This proposal passes, but without the « Global blocks » related rights. »

Avant que d’aucuns paniquent -ou ne se réjouissent- , je suis toujours steward :) mais expliquons :

Du 1er au 31 janvier dernier s’est tenu un vote sur l’instauration d’un groupe de global sysop (voir ici pour le détail de la proposition en français et là pour la page de vote) qui s’est terminé avec une participation record de 1802 personnes, suite à quoi la page a été protégée. 1385 d’entre elles ont voté en faveur de la proposition – soit 76.9% en nombre brut. La limite théorique de passage est 80%, même si personne ne sais vraiment d’où elle est sortie (ça ne vous rappelle pas les élections admin sur frwiki ? :)

Un mois s’est écoulé, et le traitement de la proposition est toujours en attente. Les pro-pour et pro-contre veulent la traiter dans leur sens, mais ne peuvent pas de part leur implication ; les autres n’ont (et c’est compréhensible) pas la moindre envie de s’occuper de ce merdier.

Bref. Je dois dire qu’ayant eu d’autres préoccupations que meta dernièrement, je pensais que le machin était traité et passé depuis longtemps ; mais j’en ai ré-entendu parler au hasard d’une conversation sur IRC il y a quelques heures (me suis réveillé a 3h du mat, me demandez pas pourquoi). Bon bah, je suppose qu’il faut bien qu’un gentil bouc émissaire s’en occupe…

Après une lecture fastidieuse des différents votes (la plupart n’étant pas motivé, ça n’a pas été SI long heureusement), je remarque qu’une part notable des oppositions vient de l’idée de laisser à des non-stewards la possibilité de bloquer globalement un compte. Un petit ctrl+f pour récupérer les occurrences, et c’est parti mon wiki :

The following discussion is closed: This proposal passes, but without the « Global blocks » related rights.

---

This proposal’s raw rating is : 1385 / 1802 (76.9%).

One of the main points of concern about this proposal is the ability of global sysop to globally block accounts. (supports 39, 209, 422, 520 / opposes 5, 6, 13, 25, 50, 67, 77, 82, 89, 102, 148, 171, 180, 187, 217, 231, 242, 248, 252, 327, 331, 349, 387 ; plus all the people that voted « as per » them)

The proposal should have been closed a whole month ago. The most viable compromise seems to allow the proposal while removing this litigious bit.

so.

The Global Sysop proposal is accepted, with the following rights removed from it’s original formulation :

• Bypass global blocks (globalblock-exempt)
• Disable global blocks locally (globalblock-whitelist)
• Make global blocks (globalblock)
• Remove global blocks (globalunblock)

DarkoNeko 04:11, 1 March 2010 (UTC)

Donc voila, ça c’est fait.

J’attends maintenant que les 417 votants opposés à la proposition me tombent dessus. Mais dans une note plus positive, j’attends aussi que les 1385 votants en faveur de celle ci m’envoient des fleurs ou des chocolats :)

—

J’avais déjà du trancher un nœud gordien à la con d’ordre global l’an passé (sur la présence de Jimbo Wales dans le groupe des steward). Ce genre de trucs n’est pas particulièrement agréable à faire et j’aimerais  que ça ne devienne pas trop une habitude…