Ancora sulle icone Interwiki

In un precedente articolo abbiamo discusso a proposito delle icone personalizzate aggiunte ai link interwiki per distinguerli da quelli interni (senza icona) e da quelli esterni (dotati dell’icona azzurra con la freccia, standard per MediaWiki)

Il passo successivo mi smebrava quello di personalizzare le singole icone permettendo di differenziare, per esempio, i link alla Wikipedia, da quelli verso Memory Alpha.
La cosa logica da fare mi sembrava quella di utilizzare classi specifiche per ogni sito, ma purtroppo questo non è possibile out-of-the-box in quanto l’unica classe aggiunta ai link interwiki è la . extiw .
Dopo una breve analisi del codice che genera i tag, ho proposto una modifica in modo da aggiungere una ulteriore classe formata dal prefisso “iw-” e dal nome della Wiki oggetto del link.

La modifica è archiviata su Gerrit ed è stata discussa su Phabricator, ma purtroppo è stata respinta.
L’amministratore che ha sollevato obiezioni, tuttavia, mi ha indicato anche un interessante metodo per raggiungere lo stesso scopo usando i cosiddetti Attribute Selectors come spiegato per esempio qui
sulla Mozilla Developer Network

Quindi ho aggiunto

.extiw[href*="memory-alpha"] {
    background-position: center right;
    background-repeat: no-repeat;
    background-image: url(https://vignette.wikia.nocookie.net/memoryalpha/images/6/64/Favicon.ico/revision/latest?cb=20080612103849&path-prefix=en);
    background-image: -o-linear-gradient(transparent,transparent),url(https://vignette.wikia.nocookie.net/memoryalpha/images/6/64/Favicon.ico/revision/latest?cb=20080612103849&path-prefix=en);
    background-size: 12px;
    padding-right: 13px;

che, come vedete, è solo una piccola modifica rispetto al CSS “standard” dell’interwiki.
Questo frammento di codice istruisce il layout engine a selezionare i tag con la classe
. extiw contemporaneamente contenti href che puntano a un dominio contenente la stringa memory-alpha .

Tutti gli hyperlink che puntano al sito di Memory Alpha soddisfano questi risultati e vengono quindi resi di conseguenza, come mostrato nell’esempio qui a fianco, catturato dalla scheda dell’episodio
What’s Past Is Prologue

Icona Interwiki

I link interwiki permettono di effettuare collegamenti fra voci appartenenti a wiki diverse usando però la sintassi propria di un collegamento interno – usando un prefisso.
Per fare un esempio pratico, il link [[:wikipedia:it:Via Lattea|Via Lattea]] crea un collegamento da wikiTrek direttamente alla Wikipedia, senza usare tutto lo URI e sopratutto senza doversi preoccupare di dover aggiornare il link nel caso la voce fosse spostata a un indirizzo diverso.

Il link appare a tutti gli effetti come un collegamento all’interno della stessa wiki. Io avrei preferito però che gli interwiki venissero identificati da una icona in modo da distinguerli sia dai link esterni (quelli per cui si specifica lo URL), ma anche da quelli prettamente interni.

Dopo un po’ di indagini, trovo che la classe CSS che determina il comportamento dei link interwiki si chiama, effettivamente in maniera logica, .extiw. Effettuo quindi una aggiunta al foglio di stile MediaWiki:Common.css aggiungendo questo codice:

1
2
3
4
5
6
7
8
.extiw {
background-position: center right;
background-repeat: no-repeat;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c1/Mediawiki_logo_sunflower.svg);
background-image: -o-linear-gradient(transparent,transparent),url(https://upload.wikimedia.org/wikipedia/commons/c/c1/Mediawiki_logo_sunflower.svg);
background-size: 12px;
padding-right: 13px;
}

Con questo codice aggiungo una icona a destra del link della dimensione di 12 pixel, faccio poi un padding di 13 pixel per distanziare una eventuale parola che seguisse il link.

Esempio di un Interwiki link con l'icona personalizzata

In questo caso specifico ho deciso di usare il logo di Mediawiki che forse è poco gradevole, ma rappresenta bene il concetto di interconnessione fra vari siti basati su MediaWiki.

Due licenze sono peggio di una

Questo articolo è work in progress e soggetto ad aggiornamento al progredire della discussione nella mailing list del progetto

Free e open source sono parole ormai diventate ubique nel mondo dell’IT. Parlare ormai di informazione libera è un argomento di discussione comune.
Come spesso accade le cose non sono semplici come potrebbero sembrare.

Prima di tutto una premessa: HyperTrek e tutti i suoi predecessori sono sempre state piattaforme studiate por essere prima di tutto a disposizione di tutti e poi anche collaborative.

HyperTrek rilascia i propri testi con la licenza GNU Free Documentation License .
WikiTrek rilascia i testi originali tramite licenza Creative Commons Attribution-ShareAlike 4.0.
Le ragioni per preferire la CC SA-BY rispetto alla GFDL sono squisitamente pratiche (la prima è una Free Cultural License a tutti gli effetti) e si possono leggere, tra gli altri luoghi,  sul sito di Creative Commons e in questo essay su Wikipedia in questo essay su Wikipedia.

Le licenze vengono mostrate visualmente con due icone (estendere il post discutendo di https://www.mediawiki.org/wiki/Manual:$wgFooterIcons) visualizzate qui sotto

Capture.PNG

con relativo link che punta a https://www.lucamauri.net/wikitrek/index.php?title=WikiTrek:Informazioni.

Astronavi regolari

Nella migrazione delle schede delle Astronavi da HyperTrek una delle sfide è stata esportare la maggior parte delle informazioni da poter categorizzare in forma breve nel relativo infobox.

Molti dei dati possono essere estratti dalle sezioni come potete vedere dallo screenshot qui sotto

sezioniastro.PNG

altre invece devono essere estratte in qualche modo dai dati esistenti.

Oggi mi sono dedicato a uno di queste estrazioni perchè volevo poter categorizzare la nave per il suo tiponumero di registro: nell’esempio della USS Odyssey qui sopra, volevo essere in grado di determinare che il suo registro di flotta fosse lo NCC (il registro standard delle navi di serie della Flotta Stellare) e che il relativo numero di registro fosse 71832.

Per estrarre queste informazioni ho usato le regular expression – già trattate in altra sede – per risparmiare codice e tempo nella scrittura.

Il pattern sottostante la RegEx è il seguente:

1
/(ncc|nx)\D?(\d*) /gi

la cui spiegazione è semplice:

  • (ncc|nx)
    trova il gruppo di testo che inizia per NCC o NX
  • \D?
    trova un singolo carattere non numerico, di conseguenza identifica un eventuale spazio o trattino che separi la sigla dal numero
  • (\d*)
    trova una stringa di cifre di lunghezza arbitraria
  • /gi
    il modificatore Global restituisce tutti i matches senza fermarsi al primo
    il modificatore Insensitive ignora maiuscole e minuscole

Con poche righe di codice questa regex permette di estrarre le sigle NX o NCC e il relativo numero per l’inserimento nell’InfoBox:

sezioniastrowiki.PNG

Un esempio funzionante è disponibile su RegEx101 all’indirizzo https://regex101.com/r/2omAw3

Elenchi puntati in WordPress

Il tema di WordPress standard TwentySeventeen è molto semplice e facilmente leggibile.
L’ho scelto per questo blog in attesa di qualcosa di meglio, se e quando verrà in futuro.

Una cosa però con non mi piace di questo tema è che i punti degli elenchi vengono visualizzati al di fuori del blocco di testo.
Non mi piace questa caratteristica perché a mio avviso rende meno leggibile gli elenchi puntati che invece dovrebbero semplificare il flusso del testo.

Una soluzione facile a questo problema è aggiungere un piccolo frammento di codice nel CSS personalizzato

1
2
3
.entry-content li {
    list-style-position: inside;
}

Questo allinea il punto al blocco di testo e indenta il contenuto.

Tuttavia si presenta un secondo problema: dalla seconda riga di testo in poi, in ogni punto, il testo è allineato al punto non alla prima riga.
Di nuovo, rende meno leggibile il testo ed è anche brutto a vedersi.
La soluzione definitiva è riportare tutti punti all’esterno, in modo che tutte le righe del testo di ogni singolo punto siano allineate, e poi spostare l’intero elenco puntato a destra.

1
2
3
4
5
.entry-content li {
    list-style-position: outside;
    padding-left: 10px;
    margin-left:20px;
}

Playing Side

La Sidebar di un sito basato su MediaWiki è un luogo interessante dove aggiungere informazioni importanti.
Nel mio caso, l’idea era di aggiungere qualche link a risorse esterne relative a Wikitrek ma che non fossero incorporate nella wiki vera e propria.
Mi sembrava quindi una buona idea aggiungere una sezione apposita nella sidebar.

Una breve ricerca su internet mi ha portato alla pagina dove trovare tutte le informazioni per personalizzarla.
È bastato quindi aggiungere poche righe di testo a https://wikitrek.org/index.php/MediaWiki:Sidebar per ottenere il risultato voluto. In particolare, si tratta di aggiungere elementi a un elenco puntato facendo precedere il sito al nome:

1
2
3
4
5
* Link Esterni
** https://blog.wikitrek.org | Blog di WikiTrek
** https://wikitrek.slack.com | Gruppo di collaborazione WikiTrek su Slack
** https://www.facebook.com/wikitrek | Pagina Facebook
** https://twitter.com/wikitrekorg | Account Twitter

Il risultato era pratico, ma a mio avviso poco gradevole esteticamente.
Mi sarebbe piaciuto per esempio aggiungere le icone dei relativi siti a sinistra del collegamento, non solo per rendere la barra più bella ma anche per facilitare la navigazione potendo identificare la destinazione del link con un colpo d’occhio.

Qualche tentativo di inserire le immagini direttamente nel testo della pagina ha dato esito negativo. Ho pensato quindi di effettuare una modifica nel CSS per ottenere il risultato.
Di nuovo, una breve ricerca in internet mi ha indicato la strada: per ogni elemento della Sidebar, il motore di MediaWiki genera un ID univoco basato sul testo della etichetta, quindi è stato facile effettuare una modifica come questa:

1
2
3
4
5
6
7
8
9
li#n-Account-Twitter {
background-image: url(//abs.twimg.com/favicons/favicon.ico);
background-size: 16px;
background-position: top left; background-repeat: no-repeat;
}

li#n-Account-Twitter a {
padding-left: 20px;
}

Per ottenere un risultato non solo funzionale, ma anche più bello da vedere.

esterni

Pubblica utilità

Penso vi farà piacere sapere che questo progetto, anche in fase iniziale, ha
già fruttato un risultato utile.
Avrete forse notato che nella pagina principale usiamo l’estensione
https://www.mediawiki.org/wiki/Extension:RecentPages per mostrare l’elenco
delle pagine aggiunte di recente.

Qualche giorno fa ho notato che l’estensione aveva smesso di funzionare con
un Fatal Error.
Dopo una breve ricerca, mi sono reso conto che l’estensione
tentava di usare una chiamata alla funzioni di MW deprecata da qualche
versione e rimossa appunto nell’ultimo aggiornamento.
Una volta identificato l’errore, ho potuto eliminarlo semplicemente
rimuovendo una riga di codice (evidentemente legacy e rimasta per qualche
ragione) e l’ho testato con successo nella copia di prova online di WikiTrek.

Fatta questa verifica, ho indagato su come segnalare il problema e la
soluzione: fortunatamente l’estensione è pubblicata tramite GitHub e quindi
il passo è stato breve per un fork, una modifica e un commithttps://github.com/Inclumedia/RecentPages/pull/4

In meno di un ora il proprietario del progetto ha accetto la mia modifica,
ha fatto un merge e io ho potuto eliminare il fork.
Quindi, grazie al lavoro su WikiTrek, già abbiamo dato un contributo alla
comunità

In conclusione due note:

  • ogni volta che c’è di mezzo Star Trek e un gruppo di Geek, succede
    qualcosa di utile
  • cito (senza permesso) da Luigi «Che figata GitHub!»