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 :)
Posted by DarkoNeko sur lundi 29 mars 2010
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 :)
Posted in les coulisses de Wikipédia | Tagué: wikimedia france | Leave a Comment »
Posted by DarkoNeko sur vendredi 26 mars 2010
…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)
Posted in actualités, les coulisses de Wikipédia | Tagué: user experience, vector, wiki, wikipédia, Wikipedia Usability Initiative | 2 Comments »
Posted by DarkoNeko sur jeudi 25 mars 2010
…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…
Posted in divers | Tagué: apparence, skin, style, theme wordpress | 5 Comments »
Posted by DarkoNeko sur dimanche 21 mars 2010
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) :
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.
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.
Posted in les coulisses de Wikipédia | Tagué: edition, ergnomie, wikimedia foundation, wikipédia, Wikipedia Usability Initiative | 6 Comments »
Posted by DarkoNeko sur vendredi 12 mars 2010
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 :
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; }
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;
}
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…
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)
Et vous, quels autres liens ajouteriez vous ?
Posted in Personnalisons Wikipédia | Tagué: Cascade Style Sheet, CSS, customisation, javascript, js, mediawiki, personnalisation, wiki, wikipédia | 3 Comments »
Posted by DarkoNeko sur mercredi 10 mars 2010
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 :
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)
/* 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.
Posted in Personnalisons Wikipédia | Tagué: Cascade Style Sheet, CSS, javascript, js, mediawiki, personnalisation, wikimedia, wikipédia | 1 Comment »
Posted by DarkoNeko sur lundi 8 mars 2010
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.
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;
}
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
}
}
Posted in Personnalisons Wikipédia | Tagué: Cascade Style Sheet, CSS, javascript, js, mediawiki, personnalisation, wikimedia, wikipédia | 9 Comments »
Posted by DarkoNeko sur jeudi 4 mars 2010
Quelques news, des remarques ayant ou pas un rapport avec la wikisphère
Posted in actualités, les coulisses de Wikipédia | Tagué: chili, google, séisme, user-agent, wikimedia foundation | 7 Comments »