Darkoneko's Weblog

Yesterday, today, and no future / time waits for no one

Archive for novembre 2009

Mini concours de personnalisation de sommaire

Posted by DarkoNeko sur dimanche 29 novembre 2009

Chalutations,

Suite à mon billet « Personnalisons Wikipédia : le sommaire« , je lance un mini-concours de personnalisations : il n’y a rien à gagner, si ce n’est le plaisir de partager son code et de le voir réutilisé ! :)

Donc, j’invite chacun à faire son propre design de sommaire, et poster dans la zone commentaire du présent billet un lien vers une capture d’écran du résultat (par exemple uploadée sur imageShack)+un lien vers votre monobook.css/vector.css. Une personne peut poster plusieurs designs, pour peu qu’ils soient notablement différents.

Le « mini concours » ouvre aujourd’hui (29 novembre) et se terminera dans 2 semaines (le 12 décembre 2009 au soir), suite à quoi je posterais une compilation de vos différentes œuvres. Je suis disponible sur IRC et ma page de discussion pour répondre à vos éventuelles questions et vous aider à débugger un peu si nécessaire.

Wikimédiens, à vos claviers !

Publicités

Posted in Personnalisons Wikipédia | Tagué: , , , , , , , | 6 Comments »

le Tropenmuseum rend 35.000 images disponibles pour commons

Posted by DarkoNeko sur jeudi 26 novembre 2009

Suite à une réunion avec plusieurs Wikimédiens, le Tropenmuseum (un musée ethnographique d’Amsterdam) à rendu disponibles à l’upload sur Commons environ 35.000 images d’indonésie.

Cette collaboration entre le Tropenmuseum et Wikimedia Netherlands est la 2eme en date, une mise à disposition similaire de 2.100 images du Suriname ayant eu lieu en août 2009.

Il y a fort à parier que ça n’est que le début d’une longue série :)

(source)

Posted in actualités, les coulisses de Wikipédia | Tagué: , , , , , , , | 4 Comments »

Wikimedia Conference Japan 2009

Posted by DarkoNeko sur dimanche 22 novembre 2009

la Wikimedia Conference Japan 2009, organisée par des volontaires wikimédiens locaux,  a lieu en ce 22 novembre 2009  au sein du campus Hongô de l’Université de Tôkyô. Il s’agit de la toute premère conférence Wikimedia au Japon.

Vous trouverez une description générale sur cette page, et plus de détails sur leur wiki (le tout en anglais)

Posted in actualités, les coulisses de Wikipédia | Tagué: , , , , , , , , | 1 Comment »

Personnalisons Wikipédia : le sommaire

Posted by DarkoNeko sur samedi 21 novembre 2009

Ce billet fait partie de la série « Personnalisons Wikipédia« . La personnalisation du jour vous permettra de rendre toutes ces pages trop sérieuses un poil plus rigolotes (ou pas) en modifiant la tronche de leur sommaire à l’aide de quelques lignes de CSS.

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

Partie HTML

Le code d’un sommaire ressemble à ça (l’exemple est pris sur la page du bulletin des admins, pour les titres de section) :


<table id="toc" class="toc">
[...]
<ul>
	<li class="toclevel-1 tocsection-1">
		<a href="#(semaine)"><span class="tocnumber">(numérotation)</span> <span class="toctext">(semaine)</span></a>
		<ul>
			<li class="toclevel-2 tocsection-2">
				[..lien section jour, identique a celui des semaines ci dessus..]
				<ul>
					<li class="toclevel-3 tocsection-3">[..lien section titre..]</li>
					<li class="toclevel-3 tocsection-4 ">[..lien section titre..]</li>
					<li class="toclevel-3 tocsection-5">[..lien section titre..]</li>
				</ul>
			</li>
			<li class="toclevel-2 tocsection-6">
				[..lien section jour..]
				<ul>
					<li class="toclevel-3 tocsection-7">[..lien section titre..]</li>
					<li class="toclevel-3 tocsection-8">[..lien section titre..]</li>
				</ul>
			</li>
			[...]
		</ul>
	</li>
</ul>
</table>

Les deux choses importantes à retenir sont :

  • Chaque niveau du sommaire à une classe dédiée (toclevel-X ). C’est là dessus que se basera notre code CSS.
  • Les niveaux sont imbriqués (niveau 2 contenu dans le 1, 3 dans le 2, etc), ce qui signifie que si on ne précise pas le contraire, un code affecté au niveau 2 affectera par défaut tous les niveaux 3 à 6  qu’il contient

Le code CSS

Vous connaissez déjà le gros de la syntaxe utilisée car elle a déjà été expliquée dans mes précédents billets (si vous ne les avez pas lu, c’est le moment :). Les quelques éléments nouveaux seront détaillés en /* commentaires */ dans le code.

Le bout de code ci dessous donnera un style « météo » à l’ensemble des sommaires. J’expliquerais plus bas comment limiter son action à seulement certains d’entre eux (par exemple, uniquement le bistro, ou uniquement l’espace wikipédia: )

Initialement, je comptais faire un style plus ensoleillé… mais pas moyen de trouver une icone potable de chapeaux mexicains. Donc tant pis, les icones météo feront l’affaire. De toute manière, ça n’est qu’un exemple, le but étant que vous ayez la curiosité de modifier/adapter  le code à votre sauce ensuite (soyons fous et optimistes…)


/* sommaires, "météo mode"
   les modifications sont faites sur le lien (a) plutôt que sur la ligne (li) afin que l'icône soit cliquable.
 */

/* effacer la numérotation du sommaire, car elle va m'embêter pour la suite */
.tocnumber {
	display:none;
}

/* grande font, bleu foncé, avec un soleil à gauche */
.toclevel-1 a {
	color:#007;
	font-size:160%;

	background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Crystal_sun.png/25px-Crystal_sun.png') no-repeat scroll left bottom;
	padding-left:29px; /* décaler le texte sur la droite pour laisser de la place a l'icône */
}

/* font un peu moins grande, bleu standard, icône nuageuse à sa gauche */
.toclevel-2 a {
	font-size:130%;
	color:#00F;

	background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Cloudy01.svg/20px-Cloudy01.svg.png') no-repeat scroll left bottom;
	padding-left:24px;
}

/* font taille normal, bleu plus clair, icône orage */
.toclevel-3 a {
	font-size:100%;
	color:#55F;

	background:transparent url('http://upload.wikimedia.org/wikipedia/commons/c/cf/Weather_lightning.png') no-repeat scroll left bottom;
	padding-left:19px;
}

/* font plus petite, bleu encore un peu plus clair, pas d'icône (car serait trop petite pour être reconnaissable) */
.toclevel-4 a {
	font-size:80%;
	color:#99F;

	background:none; /* pas d'image de fond (l'icône sur la gauche), il faut le spécifier sinon celle du niveau 3 s'affichera */
	/* je laisse le padding-left hérité du niveau supérieur pour que le décalage soit cohérent avec les niveaux d'au dessus */}

Le résultat

Pour vous donner une meilleure idée de l’impact, j’ai aussi fait une capture des sommaires du BA et du bistro avec ce thème, c’est cliquable et c’est ci dessous. Moins lugubre tout de suite, non ?

Limiter la portée du code

Maintenant, vous n’avez probablement pas envie que ce code soit actif sur absolument toutes les pages, et souhaitez le limiter a un/des namespace(s) ou des pages en particuliers.

Je veux dire, ce style rend bien pour les pages qui ont une arborescence sur plusieurs niveaux, mais pour une page ou ça n’est pas le cas, ça ressemble plutôt à ça, que je trouve moche :

Pour ce faire, nous allons nous servir d’une série de classes que MediaWiki affecte à chaque page. Par exemple, le Bulletin des administrateurs (avec ma config) possède celles ci :


<body class="mediawiki ltr ns-4 ns-subject page-Wikipédia_Bulletin_des_administrateurs skin-monobook">

(je saute celles que je ne connais/comprend pas)

  • « ltr » indique que nous sommes dans un mode « left to right » (en opposition, par exemple, à l’arabe qui se lis en rtl, de droite à gauche)
  • « ns-4 » est l’identifiant du namespace de la page (ici wikipédia: )
  • « page-Wikipédia_Bulletin_des_administrateurs » est un identifiant unique (ou presque) de la page
  • « skin-monobook« , comme son nom l’indique, spécifie que j’utilise le skin « monobook » pour visualiser la page. Les utilisateurs d’Açai/Babaco verront à la place « skin-vector« .

Les deux qui nous intéressent sont celui qui indique le namespace et celui qui est unique à la page.

Mettons que je veuille limiter la portée du code au namespace wikipédia: . Au lieu de

.toclevel-1 a {

il suffit de mettre

.ns-4 .toclevel-1 a {

Et si je veux limiter sa portée au BA et au bistro, le code devient

.page-Wikipédia_Bulletin_des_administrateurs .toclevel-1 a, .page-Wikipédia_Le_Bistro .toclevel-1 a  {

Et voila le travail !

Posted in Personnalisons Wikipédia | Tagué: , , , , , , | 3 Comments »

Wikipédia : Fundraiser 2009

Posted by DarkoNeko sur jeudi 19 novembre 2009

Wikipédia : Fundraiser 2009Pour ceux qui auraient loupé les bandeaux en haut de toutes les pages de Wikipédia, Wikibooks, Wiktionary… c’est reparti pour un tour : la campagne anuelle  de fundraising  de la Wikimedia Foundation a débutée voici quelques jours. Cette campagne, je le rappelle, a pour but de remplir les comptes de la WMF afin qu’elle puisse payer les serveurs, la bande passante, ses employés, et un certain nombre d’autres trucs.

Le thème de cette année est « la pérennité de Wikipédia ». Ca n’a pas l’air de plaire du tout à une partie des contributeurs, mais ça tombe bien, ça n’est pas eux mais les simples visiteurs qui sont visés par ces bandeaux :) Je laisse le soin à d’autres bloggeurs de polémiquer/s’exprimer sur le sujet ; pour ma part, je me contenterais de fournir des liens pour ceux qui souhaitent regarder tout ça de plus près :

  • Special:FundraiserStatistics, mon préféré, affiche un graphe journalier en barre, avec en prime une comparaison avec les fundraisers des années précédentes (2007 en bleu, 2008 en vert, 2009 en rouge)
  • Special:ContributionTrackingStatistics, pour finir, affiche des statistiques sur le succès des différents bandeaux (nombre de donations en cliquant sur chaque, et montant total). Ces statistiques permettront, au fur et à mesure que la campagne de donation avance, de privilégier l’affichage de ceux qui ont le plus de succès.

voili, amusez vous bien.

Posted in actualités, les coulisses de Wikipédia | Tagué: , , , , , , , , , | 2 Comments »

Nouveau membre à l’Advisory Board de la WMF (2)

Posted by DarkoNeko sur jeudi 19 novembre 2009

Je parlais tantôt du fait que Craig Newmark avait rejoint l’Advisory Board de la Wikimedia Foundation, mais j’ai apparement loupé l’arrivée d’un autre membre, Domas Mituzas.

Domas (user:Midom) aide depuis longtemps à la maintenance des serveurs de la WMF (notamment base de données), et a été membre du Board of Trustees entre janvier 2008 et août 2009.  Côté CV, il a travaillé pendant 4 ans pour MySQL et viens d’entrer dans le staff de Facebook.

Posted in les coulisses de Wikipédia | Tagué: , , , , , , | 2 Comments »

Nouveau membre à l’Advisory Board de la WMF

Posted by DarkoNeko sur samedi 14 novembre 2009

L’Advisory Board de la Wikimedia Foundation s’est adjoint les services d’un nouveau membre : Craig Newmark ; Craig est notamment connu pour avoir créé Craigslist, un site de petites annonces qui est aussi le 8eme site le plus visité aux USA.

Créé début 2007, l »advisory board est un rassemblement d’experts qui ont accepté de consacrer bénévolement du temps à la WMF dans leur spécialité  (technologique, juridique, organisationnelle, etc.) en tant que conseiller.

(source: TechCrunch)

Posted in actualités, les coulisses de Wikipédia | Tagué: , , , , , , | 3 Comments »

Personnalisons Wikipédia : raccourcis clavier en mode édition

Posted by DarkoNeko sur dimanche 1 novembre 2009

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

La plupart des logiciels WYSIWYG permettent de modifier l’apparence d’un texte (mise en gras, italique, souligné, etc) à l’aide de raccourcis clavier (respectivement ctrl+b, ctrl+i, ctrl+u, …) La personnalisation d’aujourd’hui vous permettra de créer des raccourcis clavier en JavaScript afin d’avoir des facilités similaires lors de vos éditions sur Wikipédia

Introduction

(ceux qui ne s’intéressent pas aux explications peuvent passer directement au code complet, à la fin du billet)

Le code du jour fait appel à la notion d’évènement, pour lesquels vous trouverez plus d’informations sur Wikibooks. Les évènements qui nous intéressent ici sont ceux qui nous permettront de savoir quand l’utilisateur appuie sur une certaine combinaison de toucher sur le claviers, et sont au nombre de deux :

  • « appui sur une touche du clavier » (onkeydown)
  • « relachement d’une touche du clavier » (onkeyup).

Ces deux évènements permettent d’accéder en interne à un code correspondant à la touche qui viens d’être appuyée ou relachée.

Histoire de nous faciliter la vie, MediaWiki possède déjà une fonction JavaScript permettant de modifier un texte sélectionne comme l’on veux. Cette fonction est par exemple utilisée lorsque vous cliquez sur un des boutons au dessus (la barre de menu) ou en dessous (les listes de caractères spéciaux), en mode édition.

Cette fonction est insertTags(). Elle prend 3 paramètres, qui sont respectivement :

  • les caractères à ajouter avant la sélection
  • Les caractères  à ajouter après la sélection
  • Le texte par défaut,  s’il n’y avait pas de texte séléctionné.

Exemple pour mettre un texte en souligné :


 insertTags('<u>', '</u>', 'souligné');

Note : Le code n’a été, pour l’instant, testé que sous Firefox 3.0 et 3.5.4. N’hésitez pas à me donner un feedback sur le bon fonctionnement (ou non) sur d’autres versions et navigateurs.

Note2 : il faut savoir que les raccourcis défini en javascripts seront prioritaires sur ceux du logiciel (du moins avec firefox)

Passons au code…

Conteneur

Histoire d’être un minimum propre, notre code sera, comme pour les autres de mes billets, encapsulé dans une fonction


function keyboardShortcuts() {
  // le code sera ici
}

 

Utilisation des évènements

La méthode pour définir une action (= l’appel à une fonction) sur les évènements qui nous intéresse est la suivante :


  document.onkeyup = function(e) { //l'user relâche une touche
    //code à executer
  }

  document.onkeydown = function(e){  //l'user appuie sur une touche
    //code à executer
  }

Problématique de la double touche

Problème : nous avons besoin de savoir lorsque l’utilisateur appuie à la fois sur « ctrl » et une lettre. Or, l’événement de base ne permet de le faire que pour une seule touche à la fois
Solution : créer une variable qui sait si ctrl est actuellement appuyé ou non


  var isCtrl = false; //la touche commence "non enfoncée"

  //l'evenement "onkeyup" est appelé à chaque fois qu'une touche est relachée.
  document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;  //l'user relâche la touche ctrl (qui a le code 17). La variable passe a False
  }

  //l'evenement "onkeydown" est appelé à chaque fois qu'une touche est pressée.
  document.onkeydown=function(e){
    if(e.which == 17) { //l'user appuie sur la touche ctrl. La variable passe a True
      isCtrl=true;
    }
  }

Gestion des actions en elle-même

J’ai géré ci dessous 5 raccourcis :

  • ctrl+b, pour mettre un texte en gras
  • ctrl+i, pour mettre un texte en italique
  • ctrl+l (L minuscule), pour faire un lien interne
  • ctrl+m pour mettre le texte entre {{ }} et faire un modèle
  • ctrl+u, pour souligner un texte

D’autres sont ajoutables à volonté, attention juste à ne pas utiliser des lettre dont vous vous servez souvent en édition pour vos raccourci (par exemple ctrl+x/c/V pour couper/copier/coller)

(sera mis dans la fonction d’onKeyDown)


    if( isCtrl == true ) {
       switch (e.which) { //quelle touche a été enfoncée ?
  	  case 66: //b
            insertTags("'''", "'''", 'gras');
            return false
	    break;
	  case 73: //i
            insertTags("''", "''", 'italique');
            return false
	    break;
          case 76: // l
            insertTags('[[', ']]', 'lien interne');
            return false
	    break;
          case 77: // m
            insertTags('{{', '}}', 'modèle');
            return false
	    break;
	  case 85: //u
            insertTags('<u>','</u>', 'souligné');
            return false
	    break
       }
     }

Résultat final

Pour les flemmards et ceux qui ont peur d’en oublier un morceau, le code complet ci dessous; recopiable tel quel :


function keyboardShortcuts() {

  var isCtrl = false;

  document.onkeyup=function(e) { //l'user relâche la touche ctrl. La variable passe a False
    if(e.which == 17) isCtrl=false;
  }

  document.onkeydown=function(e){
    if(e.which == 17) { //l'user appuie sur la touche ctrl. La variable passe a True
      isCtrl=true;
      return;
    }

    //gestion des ctrl+lettre que l'on veux ajouter.
    if( isCtrl == true ) {
       switch (e.which) { //quelle touche a été enfoncée ?
  	  case 66: //b
	    insertTags("'''", "'''", 'gras');
            return false
	    break;
	  case 73: //i
	    insertTags("''", "''", 'italique');
            return false
	    break;
          case 76: // l
	    insertTags('[[', ']]', 'lien interne');
            return false
	    break;
          case 77: // m
	    insertTags('{{', '}}', 'modèle');
            return false
	    break;
	  case 85: //u
	    insertTags('<u>', '</u>', 'souligné');
            return false
	    break
       }
     }
  }
  return true
}

//la fonction qui gère tous les appel de fonctions (du moins dans mes divers billets :)
//!\ CELA VEUX DIRE QU'IL FAUT FUSIONNER AVEC LA FONCTION main() EXISTANTE, SI VOUS EN AVEZ UNE /!\
function main() {
  // [...  autres fonctions  ... ]

   if (wgAction == "edit" || wgAction == "submit")  { //à n'appeller que si en mode edition, sinon c'est inutile
      keyboardShortcuts()
   }
}

addOnloadHook(main)

Et Voili ! Comme d’habitude, n’oubliez pas de forcer le rafraichissement du monobook (ou vector) après avoir sauvegardé.

Source : Ce billet sur Lixya.org ; et un merci à Phe pour le coup de main :)

Edit : retiré un « ] » qui trainait au milieu du code – forcement, ça marche mieux maintenant – désolé :(

Posted in Personnalisons Wikipédia | Tagué: , , , , , , | 2 Comments »