Gettiamo la “anchor”

I cosiddetti anchors sono link che indirizzano a parti diverse di una singola pagina, non a una pagina diversa.
Facciamo un esmpio pratico partendo dalla pagina di analisi dei teaser di TNG su HyperTrek: https://hypertrek.info/index.php/tngteaser
Prendiamo il link

1
<a href="/index.php/terminologia#teaser" target="_top">teaser</a>

Questo punta alla pagina Terminologia direttamente alla posizione identificata da

1
<a name="teaser"></a>Parte

Come vedete la proprietà href punta all’ancora con il simbolo # mentre la definizione è fatta nel tag  tramite la proprietà name.

Purtroppo questo metodo non può essere usato in MediaWiki, come spiegato dettagliatamente qui.
Lo stesso meccanismo però può essere applicato tramite la proprietà id che può essere applicata a una grande varietà di tag. In questo caso particolare, usiamo un tag inline, ovvero l’utilissimo .

Ecco quindi che alla pagina https://wikitrek.org/index.php/Teaser troviamo un link molto simile a quello originale di HT

1
<a title="Terminologia" href="/index.php/Terminologia#teaser">teaser</a>

Mentre la ancora nella pagina di destinazione è molto diversa:

1
<span id="teaser">Parte</span>

Ma il risultato è il medesimo.

Sotto il cofano questa modifica è effettuata usando una combinazione di regular expressions insieme allo HTML Agility Pack.

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;
}

Immagini, ci siamo

Dopo mesi a spaccarmi la testa e infinite discussioni con il creatore della libreria che JARVIS usa per manipolare la Wiki, ho trovato il problema che impediva il caricamento delle immagini.

Inutile dire che era di una stupidità estrema e che si risolveva meno di 5 secondi, capendo dove bisognava guardare.

Ad ogni modo, negli scorsi giorni ho importato tutte le immagini da HT e ci ho giocato un po’.
Come prima cosa le ho importate brutalmente lasciando fare tutto alla wiki. Il risultato era funzionale, ma molte informazioni andavano perse. Sono quindi passato a scrivere dinamicamente anche la pagina che MediaWiki mostra quando si accede all’immagine.

Vedete per esempio sul sito di test il file File:Specie!vulcan-deserto.jpg
Qualche annotazione:

  • ignorate il fatto che ci siano molte versioni identiche della stessa immagine.
    Deriva dal fatto che ho fatto prove su prove senza curarmi di cancellare perché in questa fase non ha senso.
    Sul sito definitivo ovviamente questo non accadrà.
  • Il nome dell’immagine in WikiTrek è generata concatenando in nome della sottocartella di HT con il nome dell’immagine, sostituendo la barra dritta con un punto esclamativo.
    Nella sezione “Dettagli” ci sono indicati il nome nuovo e quello vecchio.
  • La parte di Licenza è ancora tutta da scrivere.
    Demanderei la cosa a un template, ma vorrei sentire i vostri suggerimenti.
  • La sezione HyperTrek riporta la data di scaricamento e lo URI originale.
    Poi in due sottocapitoli ho copiato la Descrizione e lo ImageTag.
  • Le immagini non sono visibili in tutte le relative pagine perché devo rielaborarle, potete vedere qualche esempio, sempre sul sito di test, nelle pagine T’Pol e The Naked Now.

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

Giochiamo con gli UL

Da pochi giorni, i campi e i valori relativi agli episodi sono tutti inseriti in parametri singoli del Template:BoxEpisodio : questo è semanticamente più corretto rispetto alla versione originale dove tutto era elencato in elenchi puntati.

MediaWiki però non ammette campi multipli nello stesso template, di conseguenza si verificava un problema nel caso, per esempio, di due sceneggiatori nello stesso episodio.
La soluzione è stata usare un elenco puntato all’interno dello stesso campo: in questa maniera con un campo solo è possibile visualizzare più di un dato in maniera strutturata.

L’estetica però lasciva a desiderare, guardate questo esempio tratto da Shadows of P’Jem

Avendo però usato un UL è stato possibile facilmente creare una presentazione più gradevole tramite CSS.
Ecco come abbiamo fatto.

Per prima cosa tutto il Template:BoxEpisodio è stato racchiuso in un div con uno specifico ID, dopodiché tutti i campi sono stati inseriti in un ulteriore DIV con una classe specifica.
Il relativo CSS è stato modificato così:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.campi ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}

.campi li{
display: inline;
}

.campi li + li:before {
content: " · ";
font-weight: bold;
}

Le proprietà list-style-type: none; e display: inline; fanno sì che le voci dell’elenco siano tutte sulla stessa riga e senza segno grafico.
Invece content: " · "; aggiunge un punto di separazione tra le voci dell’elenco.
Il risultato è un più gradevole

Aggiunta estensione CodeColorer

Questo blog permette ora la formattazione del codice usando l’estensione CodeColorer.

Per inserire un codice, usare la sintassi

[cc lang="linguaggio"]
codice
[/cc]

Per il codice inline usare invece

[cci lang="linguaggio"]codice[/cci]

La pagina principale del progetto è qui https://wordpress.org/plugins/codecolorer mentre i dettagli e gli esempio di uso sono visibili alla pagina https://kpumuk.info/projects/wordpress-plugins/codecolorer/

And the sky’s the limit

Questo è un crosspost su SiamoGeek e sul blog di WikiTrek.
Articolo aggiornato il 2017-11-12.

Senza senza essere un supereroe dei fumetti o del cinema, anche per le persone normali esistono avventure che durano una vita.
L’avventura più antica che io ricordi è di essere un Trekker: letteralmente non ricordo un momento della vita in cui non sia stato appassionato della serie TV e, di conseguenza, dello spazio, della tecnologia e dell’esplorazione.
Una avventura, connessa a questa passione, che ho vissuto per molti anni è stata collaborare con un bel gruppo di fan a un progetto che si chiama HyperTrek (e che, nella sua lunga storia, si è chiamato in tanti altri modi).

L’anno scorso Luigi ha scritto un post a proposito di HyperTrek che a prima vista poteva sembrare innocuo, ma che ha piantato un paletto nel cuore di molti di noi con la frase

È assai difficile che nell’immediato futuro HyperTrek venga aggiornato con regolarità.

Per me – e forse anche per altri – questa è suonata come una vera e propria  wake-up call: il segnale che era arrivato il momento di prendere per mano il progetto e non lasciarlo morire.

Per quanto l’ultima incarnazione di HT – HyperTrek NG – fosse un sistema sofisticato e ben organizzato, la sua gestione era diventata poco pratica. Modifiche segnalate nelle mailing list da un nutrito gruppo di persone finivano per ricadere su un singolo. Modifiche tutte poi da gestire a mano singolarmente nel sistema autore di HT.
La mancanza di una serie TV nell’ultimo decennio e la sorte incerta delle ultime incarnazioni cinematografiche hanno anche facilitato una certa disaffezione verso Star Trek in generale.
Queste sono tutte ragioni che hanno portato al lento abbandono di HT: così questa che era la risorsa definitiva su Star Trek in Italiano resta un monumento a un grande lavoro fatto nel passato.
Un monumento rimasto fermo a qualche anno fa, purtroppo.

Il messaggio di Luigi e l’avvicinarsi della nuova serie Star Trek Discovery mi hanno spinto a fare almeno un tentativo di ridare vita a questo progetto.
Rispolverando quindi una idea più volte proposta e mai andata in porto per varie ragioni, ho pensato di avviare un progetto di conversione di HT verso una wiki. Un sito simile alla celeberrima Wikipedia, basato sul suo stesso software open-source, MediaWiki.
Questo progetto è partito circa un anno fa e sta producendo da qualche tempo risultati interessanti. Vista la partenza di Star Trek Discovery, abbiamo deciso di rivelare al pubblico questo nuovo progetto che si chiama WikiTrek.

La ragione di questo progetto è fare un tentativo di creare una piattaforma più collaborativa in cui le persone si prendano carico di analizzare la produzione artistica di Star Trek, riportare le informazioni interessanti sulla Wiki e gestire ogni segnalazione dall’inizio alla fine.
Ripeto, è un tentativo: WikiTrek non è meglio né peggio di HyperTrek in senso assoluto.
È un esperimento.

WikiTrek avrà sia contenuti importati da HyperTrek sia contenuti originali che la comunità – si spera ampia – vorrà apportarvi.
Quindi, tutto quello che esiste in HyperTrek un giorno non molto lontano verrà trasportato automaticamente verso WikiTrek, mentre tutte le informazioni nuove (una su tutte, le schede degli episodi di DSC) andranno create a mano.

Cosa potete fare voi per la vostra Wiki, state chiedendo?
Fondamentalmente due cose: contribuire al progetto di conversione automatico da HyperTrek e contribuire con contenuti originali a WikiTrek direttamente.
Fate riferimento alla pagina Come si collabora per dettagli su questi due attività.
Tenete presente che WikiTrek è tutto un work-in-progress e che, non solo resta molto lavoro da fare, ma anche c’è molto lavoro da organizzare!

Ringraziare qui tutti sarebbe irrealistico: rimandiamo la questione a data da destinarsi e a una pagina apposita.

Per il momento invito tutti i Trekker a precipitarsi su WikiTrek e a contribuire.

If I have seen further, it is by standing on the shoulders of giants.

– John of Salisbury

Aggiornamenti 2017-07-23

Negli ultimi due fine settimana, tanto lavoro, ma pochi risultati visibili:

  • Ho iniziato ad affrontare le immagini: ho fatto una buona parte del lavoro dal lato database, ma le immagini in sé sono complicate da trattare. Avevo intenzione di scaricare tutte le immagini da HT e ricaricarle in WT, ma qualcosa non funziona nell’apposita routine nella libreria DotNetWikiBot. Ancora devo capire se sbaglio io o se mi sono imbattuto in un bug. In sostanza, nulla di fatto dal lato utente.
  • Ho spostato i Riferimenti a siti della HyperAlliance nel capitolo “Collegamenti Esterni”
  • Iniziato una bozza di un template simile al NAV della Wikipedia da aggiungere alle pagine delle due cronologie. Si tratta di una bozza molto bozza: sul sito di test vedete Template:NavCronologia