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

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

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