Vediamo insieme come creare un buon infobox

Benvenuti all'evento "Vediamo insieme come creare un buon infobox"! Questo blog è pensato per essere allo stesso tempo un riepilogo e un approfondimento (potete leggere le istruzioni dettagliate di quello che abbiamo visto in diretta) dell'omonimo evento tenuto il 6 dicembre 2022: potete consultarlo come tutorial guidato passo per passo o per rivedere passaggi su cui siete in dubbio.

Parte 1: le basi[]

In questa prima parte, vedremo come creare, modificare e usare un infobox.

Che cosa sono gli infobox?[]

Gli infobox sono schede informative che presentano un riassunto dell'argomento della pagina e ne mostrano i punti più importanti in un formato semplice e chiaro.

Per approfondire l'argomento, potete consultare la pagina Aiuto:Infobox e le sue sottopagine Aiuto:Infobox/CSS, Aiuto:Infobox/Modifica e Aiuto:Infobox/Tag.

Gli infobox sono in genere realizzati usando dei template per mantenere omogeneità e coerenza all'interno di una community. Potreste anche scrivere i codici degli infobox direttamente nelle pagine ma ciò è fortemente sconsigliato perché diventerebbe più complicato per i nuovi utenti, sarebbe più facile commettere errori e soprattutto si rischierebbe di perdere l'identità della wiki se ogni pagina avesse un infobox diverso con parametri e stili diversi. Per questo, è sempre bene creare i vostri infobox nel namespace Template:, permettendovi così di poterli utilizzare più facilmente negli articoli.

Quando fondate una wiki, trovate già alcuni infobox predefiniti nella Categoria:Infobox (precedentemente, era Categoria:Template sinottici): Template:Profilo album, Template:Profilo episodio, Template:Profilo evento, Template:Profilo libro, Template:Profilo luogo, Template:Profilo missione, Template:Profilo oggetto, Template:Profilo personaggio. Essi sono un buon punto di partenza perché rappresentano i principali tipi di articoli di cui potreste avere bisogno: starà a voi modificarli, eliminarli o crearne di nuovi a seconda delle esigenze della vostra wiki. Come vedete, c'è anche una convenzione per il nome di un infobox: namespace "Template:", "Profilo" e il nome generico del tipo di pagina su cui verrà utilizzato. Non è un errore usare altri standard ma questo è utilizzato sulla maggior parte delle wiki italiane e adottarlo nella vostra aiuterà quegli utenti che contribuiscono su più wiki, oltre alla comodità di avere un nome subito intuibile e facile da ricercare; sconsigliamo di usare nomi inglesi o incomprensibili (quindi cercate di evitare "Infobox Char" o "Ciaopippo" come nomi di infobox).

Infobox portatili[]

Noi vedremo solo gli infobox portatili, che sono lo standard di Fandom. Gli infobox portatili offrono diversi vantaggi: i dati vengono visualizzati correttamente su ogni dispositivo (desktop o mobile), sono scritti in un codice subito traducibile in HTML, quindi si caricano più velocemente e vengono riconosciuti da tutti i browser (che non devono processare e tradurre codici strani o incoerenti rischiando di perdere informazioni e rallentare il caricamente delle pagine), sono predisposti alla personalizzazione tramite CSS (come vedremo in seguito), migliorano il SEO delle pagine e quindi delle wiki, dunque appaiono più facilmente e più in alto nelle ricerche online, infine sono più semplici da comprendere e quindi modificare anche per chi non ha molta esperienza.

Gli infobox non portatili, ovvero template marcati come infobox (la tipologia è indicata in alto a sinistra nella pagina Template:) ma che non sono compatibili con tutti i dispositivi, sono elencati nella pagina "Speciale:NonportableInfoboxes".

Come creare un infobox[]

Innanzitutto, quand'è che ci serve un nuovo infobox? Quando vogliamo creare una pagina ma nessuno degli infobox già presenti nella wiki è adatto a quel soggetto. Qui entra in gioco la convenzione che abbiamo citato prima: cerchiamo l'infobox che ci serve tramite la barra di ricerca (ad esempio, "Template:Profilo evento" se la pagina che vogliamo creare è a proposito di un certo evento) e, se non lo troviamo, visitiamo Categoria:Infobox o Categoria:Template sinottici; se non esiste questa categoria, consultiamo la generica Categoria:Template per cercare la categoria degli infobox e quindi l'infobox particolare che ci serve. Se non troviamo quello che ci serve, andiamo a crearlo.

InfoboxBuiler[]

Il metodo più semplice per creare un infobox (specialmente per chi è alle prime armi o non ha molta esperienza cogli infobox) è Speciale:InfoboxBuilder. In questa pagina speciale, clicchiamo su "[Template infobox senza titolo]" e dichiariamo il titolo dell'infobox ("Profilo gruppo" nel nostro caso). Notate che, se dichiarate un nome già in uso, InfoboxBuilder non vi farà cliccare su "OK" e vi apparirà il messaggio di errore "Questo nome è già utilizzato" in rosso. In alternativa, anziché passare per la pagina Speciale:InfoboxBuilder, andremo direttamente all'url in cui vogliamo creare il nostro template: andiamo dunque sulla pagina "Template:Profilo gruppo" e clicchiamo su "CREA SORGENTE", così si aprirà un pop-up in cui dovremo scegliere la tipologia del template, ovvero "Infobox"; una volta selezionata la tipologia, clicchiamo su "SALVA" e ci ritroveremo nella pagina "Speciale:InfoboxBuilder/Template:Profilo_gruppo". Entrambi i metodi portano allo stesso risultato: le uniche differenze sono l'url e la presenza del namespace nel "proto-infobox" azzurro che vediamo in InfoboxBuilder ma ci daranno lo stesso infobox una volta che l'avremo salvato.

Se cliccassimo subito su "PUBBLICA", ci ritroveremmo un template di infobox con cinque parametri di default: uno per il titolo, uno per l'immagine, uno per la didascalia dell'immagine e due generici per i dati. Noi però vogliamo personalizzare il nostro infobox.

Iniziamo dunque dal titolo: cliccando "Nome articolo", potremo scegliere se utilizzare il nome della pagina come titolo di default oppure no (potremo successivamente sceglierne un altro in entrambi i casi, solo che, non selezionando questa opzione, l'infobox sarà privo di titolo ogni volta che non ne specificheremo uno nell'apposito parametro).

Subito sotto, avremo il campo dell'immagine (non modificabile in InfoboxBuilder) e due parametri, di cui vogliamo cambiare l'etichetta (di nuovo, andremo a cliccare sulle due righe e a cambiare le due etichette di default "Etichetta" con quelli che ci servono, ovvero "Leader" e "Affiliazioni" nel nostro caso); notate che i nomi delle etichette iniziano con una lettera maiuscola. In InfoboxBuilder, potremo anche aggiungere ulteriori elementi: altri titoli, altre immagini, altri parametri e le intestazioni di sezione. Potremo anche cambiare l'ordine di questi elementi semplicemente trascinandoli (clicchiamo, teniamo premuto e spostiamo dove vogliamo) o eliminarli cliccando sull'icona del cestino visualizzabile accanto all'elemento selezionato.

Notate che le sezioni appena citate non vengono create di default ma ci torneranno utili, specialmente per infobox più lunghi; andiamo quindi a modificare il titolo della sezione, cliccandoci come fatto prima e sostituendo "Intestazione della sezione" col titolo che ci serve (un generico "Informazioni" va più che bene ma scegliete quello che meglio indica il tema della sezione ed evitate di avere due sezioni con lo stesso titolo). Possiamo anche selezionare l'opzione "Comprimibile", che permetterà di espandere (aprire) e comprimere (chiudere) la nostra sezione: quando è compressa, si vede solo il titolo e le righe sotto di essa sono nascoste; quando è espansa, si vedono anche le righe sotto (mostreremo visivamente questa caratteristica una volta salvato e utilizzato il nostro infobox).

Una volta ottenuto il risultato che volevamo, possiamo salvare cliccando "PUBBLICA". Come possiamo vedere dall'"Esempio di utilizzo", abbiamo ora un infobox coi parametri "title1", "image1", "caption1", "leader" e "affiliazioni" (se non avessimo specificato un'etichetta, vedremmo anche "row1"). Notate che non abbiamo scelto noi i parametri ma sono stati creati automaticamente: titoli, immagini e didascalie hanno i parametri di default di InfoboxBuilder, mentre gli altri sono ottenuti dalle etichette che abbiamo scelto noi, ovvero sono le stesse parole delle rispettive etichette ma con l'iniziale minuscola.

Codice sorgente[]

Ora che abbiamo creato il nostro infobox di base con IndoboxBuilder, andiamo a vederne il codice: apriamo dunque l'editor sorgente del template. Questo potrebbe sembrare difficile a prima vista ma permette di personalizzare maggiormente il nostro infobox. Ovviamente, avremmo potuto anche scrivere tutto il codice da zero o fare copia-incolla da uno già esistente senza passare da InfoboxBuilder.

Parametri[]

Prima di analizzare i tag, guardiamo i parametri. Noterete che InfoboxBuilder ha creato "title1", "image1" e "caption1", (incluso eventualmente "row1" e i loro corrispettivi con numeri progressivi come "title2", "image2", "caption2", "row2" e così via). Abbiamo però detto che i nomi degli infobox dovrebbero essere in italiano e comprensibili: vale lo stesso per i parametri. Dovremmo quindi cambiarli (cosa che si può fare solo nell'editor sorgente) con "titolo" per il titolo, "immagine" per l'immagine, "didascalia" per la didascalia (solo se serve / si vuole, spesso la si omette). Per aggiungere altri parametri, ci basterà fare copia-incolla di uno già esistente e modificare come occorre.

Da notare che, di solito, usiamo nomi semplici e minuscoli ("coinvolti", "periodo", "prima") come parametri e gli stessi nomi ma con l'iniziale maiuscola o qualcosa di più specifico e magari due punti : come etichette ("Coinvolti:", "Periodo:", "Prima apparizione:"); l'importante è che si capisca il senso, che corrispondano all'utilizzo che volete farne e che non siano eccessivamente lunghi (quindi cercate di evitare parametri come "p" e "cicciopaffuto" o etichette come "Info" e "Periodo storico in cui il gruppo ha agito").

Tag[]

Guardiamo i tag nel codice sorgente (essi si rifanno ad XML ma non servono conoscenze approfondite di questo o altri linguaggi di markup/programmazione): questi sono i principali, ne vedremo altri nella seconda parte insieme alle altre opzioni avanzate.

Il tag <infobox> contiene tutti gli altri e delimita l'ambito dell'infobox, quindi il codice che crea il nostro infobox è incluso tra <infobox> e </infobox>.

Al suo interno, troveremo i tag <title>, <image>, <header>, <data> e <group>. Nella seconda parte dell'evento, vedremo anche i suoi attributi e i tag <panel> e <navigation>.

Il tag <title> indica il titolo dell'infobox. Al suo interno, potremo trovare i tag <default> e <format> (che vedremo nella seconda parte) e l'attributo source=; solo <default> può essere aggiunto con InfoboxBuilder.

source= serve a indicare il parametro che useremo per specificare il titolo (tipicamente, source="titolo", che permette di indicare il titolo che vorrete nel parametro "titolo"). <default> serve per aggiungere un titolo di default (tipicamente <default>{{PAGENAME}}</default>) che garantirà all'infobox un titolo anche quando non ne specificate uno nell'articolo in cui lo userete. Notate che <title> senza source= vi impedisce di specificare un titolo poi nell'articolo, quindi dovrete averne uno di default per evitare un infobox senza titolo. Se non volete un titolo di default, potete anche inserire <title source="titolo"/> (notate la barra alla fine) al posto di <title source="titolo"></title> (usare l'una o l'altra opzione è indifferente).

Il tag <image> viene utilizzato per inserire immagini (o gif o video) all'interno di un infobox. Può essere personalizzato e stilizzato solo utilizzando i CSS e non può essere ridimensionato manualmente. Le immagini sono normalizzate, in modo tale che [[File:Esempio.png]] e Esempio.png (forma standard e consigliata) facciano la stessa cosa. È ovviamente possibile passare più immagini utilizzando una galleria (lo stesso tag <gallery> che usate nel testo normale). Al suo interno, potremo trovare i tag <default> e <caption> e l'attributo source=.

source= serve a indicare il parametro che useremo per specificare il nome del file (nel nostro esempio, source="immagine"). <default> serve per aggiungere un'immagine di default che apparirà quando non ne specificherete una nell'articolo (come il classico segnaposto <default>Nessuna immagine.png</default>).

Il tag <caption> può essere utilizzato solo all'interno del tag <image>. Al suo interno, potremo trovare i tag <default> e <format> (che vedremo nella seconda parte) e l'attributo source=.

source= serve a indicare il parametro che useremo per specificare la didascalia (tipicamente, source="didascalia", che permette di indicare il titolo che vorrete nel parametro "didascalia"). <default> serve per aggiungere una didascalia di default.

Il tag <data> indica i vari dati che inseriremo nell'infobox. Al suo interno, potremo trovare i tag <default>, <label> e <format> (che vedremo nella seconda parte) e l'attributo source=.

source= serve a indicare il parametro che useremo per specificare il valore del dato (nel nostro esempio, source="leader" e source="affiliazioni"). <label> contiene l'etichetta (nel nostro esempio, <label>Leader:</label> e <label>Affiliazioni:</label>); notate che le etichette accettano wikitesto, garantendo una maggiore personalizzazione (come vedremo nella seconda parte); se non specificate un'etichetta col tag <label>, il valore che inserirete nel parametro all'interno dell'articolo occuperà l'intera riga perché non ci sarà un'etichetta. <default> serve per aggiungere un valore di default che apparirà quando non ne specificherete uno nell'articolo.

Il tag <group> viene utilizzato per le sezioni, che raggruppano i campi dei valori e, facoltativamente, accetta un'intestazione per ciascun gruppo. Una sezione non verrà visualizzata (incluse eventuali intestazioni) se tutti i campi sono vuoti. Al suo interno, potremo trovare i tag <data>, <header>, <image>, <title> e <group> e l'attributo collapse=. Nella seconda parte dell'evento, vedremo anche i suoi possibili tag <panel> e <navigation> e gli attributi show=, layout= e row-items=.

<header> indica l'intestazione della sezione (ad esempio, <header>Informazioni</header>). collapse= indica le sezioni comprimibili e può essere impostato come open o closed: "open" indica che la sezione sarà espansa di default, mentre "closed" indica che è compressa di default (si sconsiglia quest'ultima opzione per motivi di comodità per gli utenti ma potreste volere impostare a "closed" le sezioni che contengono particolari spoiler); potete ovviamente avere sia sezioni espanse che sezioni compresse e soprattutto ricordate che l'opzione di comprimibilità ha effetto solo se c'è un'intestazione <header>, altrimenti non fa nulla.

Documentazione[]

Subito sotto il codice vero e proprio dell'infobox, troveremo la documentazione con un esempio di utilizzo del codice da inserire nelle pagine (tutti i parametri sono compilati col valore "Esempio") e un elenco dei parametri per i dati. È sempre bene avere una documentazione nei template per chiarirne la funzione, i vari parametri e i casi d'uso. Se la create in una sottopagina, come "Template:Profilo gruppo/doc", potrete includerla in "Template:Profilo gruppo" tramite il classico Template:Documentazione (se l'avete) con <noinclude>{{Documentazione}}</noinclude>.

Se invece la create direttamente nella pagina dell'infobox (come fa InfoboxBuilder), avrete tendenzialmente questa struttura:

I tag <noinclude> e </noinclude> conterranno tutta la documentazione, che apparirà nella pagina "Template:Profilo gruppo" ma non verrà inclusa negli articoli in cui l'infobox verrà utilizzato.
I tag <pre> e </pre> conterranno l'esempio di utilizzo (meglio ancora se solo il codice da copiare negli articoli, ovvero senza riempire i campi dei parametri con "Esempio"); se volete, potrebbe essere utile inserire sia il codice puro che l'esempio di utilizzo. È buona norma indentare questi codici nel seguente modo per facilitarne la consultazione e l'utilizzo:

{{Profilo gruppo
| titolo          = 
| immagine  = 
| leader        = 
| affiliazioni  = 
}}

<templatedata> e </templatedata> conterranno l'elenco dei parametri con la relativa descrizione in "description", il tipo di dato in "type", se è obbligatorio o meno in "required", se è suggerito in "suggested" (se volete approfondire, vi rimandiamo alla relativa pagina di MediaWiki); se avete seguito la procedura e le convenzioni consigliate, non dovreste avere bisogno di questa parte.
Se volete aggiungere altro, come consigli o linee guida, potete farlo in qualsiasi punto tra i tag <noinclude> e </noinclude>.

Categorizzare l'infobox[]

Ovviamente, dovremo anche categorizzare l'infobox ottenuto con [[Categoria:Infobox]] (o [[Categoria:Template sinottici]] o qualsiasi categoria utilizzata per gli infobox nella wiki). Attenzione: inseriremo la categoria subito prima di </noinclude> o comunque tra <noinclude> e </noinclude> perché altrimenti tale categoria verrebbe applicata sia all'infobox che alle pagine in cui lo useremo.

Come utilizzare un infobox in una pagina[]

Ora che il nostro infobox è pronto, passiamo al motivo per cui stiamo creando un infobox: utilizzarlo in una pagina. Andiamo quindi all'articolo in cui vogliamo aggiungere il nostro infobox (nel nostro esempio, useremo una generica pagina "Gruppo di test").

Editor visuale[]

Per usare l'editor visuale, clicchiamo su "MODIFICA" se è l'editor predefinito nelle nostre preferenze, altrimenti su "VisualEditor" nel menù a tendina alla sua destra o aggiungendo "?veaction=edit" alla fine dell'url.

Clicchiamo su "INSERISCI" e poi su "Infobox", quindi scegliamo quello che vogliamo usare (nel nostro esempio "Profilo gruppo") e riempiamo i campi "nome", "immagine", etc nel pop-up visualizzato; in fondo ad esso, possiamo scegliere di inserire ulteriori informazioni (come parametri saltati nell'elenco precedente perché l'infobox è troppo lungo; se invece inseriamo un parametro che non esiste nel template, verrà inserito nel codice della pagina ma non farà nulla proprio perché non esiste).

Una volta compilati tutti i campi (o anche solo alcuni: non è vietato lasciarne di vuoti), clicchiamo su "APPLICA" e, se il resto della pagina ci va bene, su "SALVA". Nota: l'editor visuale inserisce il codice tutto sulla stessa riga (a meno che non andiamo a capo noi quando compiliamo i campi) e ignora totalmente i campi vuoti:

{{Profilo_gruppo|titolo=Gruppo di Test|immagine=Gruppo di Test.png|didascalia=immagine del gruppo|leader=[[Test (personaggio)|Test]]|affiliazioni=* [[Marina Militare]];
* [[C6]]}}

.

Editor sorgente[]

Per usare l'editor sorgente, clicchiamo su "MODIFICA" se è l'editor predefinito nelle nostre preferenze, altrimenti su "Modifica sorgente" nel menù a tendina alla sua destra o aggiungendo "?action=edit" alla fine dell'url.

Copiamo dunque il codice che abbiamo inserito nella documentazione (quello tra i tag <pre> e </pre>) e lo incolliamo nell'articolo. Compiliamo i campi dei parametri ("titolo", "immagine", etc) e poi, se il resto della pagina ci va bene, clicchiamo su "SALVA MODIFICHE". Nota: l'editor sorgente lascia il codice come l'avete inserito, inclusi campi vuoti e indentazione:

{{Profilo gruppo
| titolo     = Gruppo di Test
| immagine   = Gruppo di Test.png
| didascalia = immagine del gruppo
| leader     = [[Test (personaggio)|Test]]
| prima      = 
}}

.

Una nota per quanto riguarda le immagini: se vogliamo inserire una galleria anziché un'immagine singola, possiamo farlo come faremmo normalmente nel testo

<gallery>
Test prima.png|Prima
Test dopo.png|Dopo
</gallery>

esattamente come faremmo per un'immagine sola, in entrambi gli editor. Possiamo aggiungere quante immagini vogliamo purché le lasciamo su righe diverse e diamo una didascalia a ognuna; sconsigliamo però di inserirne troppe e di usare didascalie troppo lunghe.

Consigli[]

Cercate di avere sempre almeno il titolo, l'immagine e un paio di dati (come prima apparizione, nome originale o altri dati facilmente reperibili) per non far sembrare vuoto l'infobox: in questo modo, potrete garantire un aspetto migliore anche alle pagine che trattano argomenti con poche informazioni.
Usate un'immagine di default (come il segnaposto "Nessuna immagine.png") così non ci saranno pagine senza immagini anche se non ce ne sono per quel soggetto (come un personaggio che è stato solo menzionato una volta e non è mai apparso di persona).
Cercate di usare immagini quadrate o più lunghe in orizzontale perché le immagini più verticali occupano più spazio nella pagina e potrebbero fare slittare i dati dell'infobox troppo in basso; il problema principale è la skin mobile perché le immagini troppo verticali vengono tagliate.
Se usate una galleria anziché un'immagine singola, cercate di metterci immagini con dimensioni simili per mantenere un aspetto più coerente (la posizione dei dati sottostanti si adatta alle dimensioni dell'immagine selezionata).
Scegliete parametri significativi per l'argomento della vostra wiki e che pensate di utilizzare qualche volta: avere un parametro "poteri" se tutti i personaggi sono liceali qualunque non è molto utile; se molti dei personaggi sono criminali con una taglia sulla testa, è una buona idea avere un parametro "taglia"; avere i parametri "parenti paterni" e "parenti materni" potrebbe essere utile se ci sono molti legami famigliari intricati che sarebbe difficile rendere al meglio col generico "parenti".
Se ci sono molti parametri, è bene tenerli in un ordine coerente e dividerli in più sezioni (una per le caratteristiche fisiche, una per le relazioni interpersonali, una per le apparizioni nei vari media, etc).

Parte 2: opzioni avanzate[]

In questa seconda parte, vedremo alcune opzioni avanzate per personalizzare e stilizzare un infobox.

Documentazione[]

Come abbiamo detto nella prima parte, la documentazione è sempre consigliata per i template e lo è particolarmente per quelli che contengono meccanismi non subito intuibili e restrizioni di qualche tipo: una buona documentazione per un infobox dovrebbe esplicitare, oltre al codice da incollare negli articoli e all'eventuale esempio, un elenco dei suoi parametri, dei loro comportamenti e delle loro restrizioni (in generale, è sempre meglio dire troppo che troppo poco in una documentazione e l'importante è che sia chiara sugli eventuali vincoli).

Se la documentazione diventa troppo lunga, può essere una buona idea tenerla in un template di documentazione (tipicamente, la documentazione di "Template:Profilo personaggio" sarà in "Template:Profilo personaggio/doc", quindi una sua sottopagina). In questo caso, per visualizzare la documentazione nella pagina dell'infobox, ci basterà richiamarla (sempre tra i tag <noinclude> e </noinclude>) con {{Documentazione}} (template presente di default in tutte le wiki) o semplicemente {{Profilo personaggio/doc}} (a seconda di come abbiamo scritto la documentazione stessa; i due metodi sono indifferenti).

parametri	restrizioni e codice

Tag[]

Riprendiamo la nostra analisi dei tag nel codice sorgente: questa volta, vedremo quelli non indispensabili per un infobox di base ma particolarmente utili per personalizzarne l'aspetto e la struttura.

Il tag <infobox> offre delle personalizzazioni importanti che vedremo dopo nella sezione dedicata ai CSS.

Il tag <format> serve a formattare gli stili di titoli <title>, dati <data> e didascalie <caption> e ovviamente accetta il wikitesto, garantendo un'ampia varietà di stilizzazioni diverse. Notate che i tag <label>, <default> e <navigation> (che vedremo tra poco) accettano già il wikitesto e quindi non hanno bisogno di <format>, infatti capita molto spesso di avere un <default> e un <format> che hanno la stessa struttura.

Il tag <group>, oltre a quanto già detto, può contenere i tag <panel> e <navigation> e gli attributi layout=, show= e row-items=.

layout= accetta i valori default e horizontal; layout="default" non fa nulla e quindi può essere omesso; layout="horizontal" dispone le celle <data> della sezione in orizzontale, ovvero le visualizza una accanto all'altra anziché una sotto l'altra (in questo caso, l'etichetta è sopra al valore del dato anziché alla sua sinistra).
show= accetta i valori default e incomplete; show="default" non fa nulla e quindi può essere omesso; show="incomplete" obbliga la sezione a visualizzare anche le sue celle relative ai dati non compilati se ce n'è almeno uno che lo è (ricordate che, come detto nella prima parte, una sezione non verrà visualizzata se tutti i campi sono vuoti). Notate che capita spesso di avere la combinazione layout="horizontal" show="incomplete" perché crea una sezione orizzontale le cui celle vengono sempre mostrate coerentemente così da non perdere la struttura uniforme tra le pagine che utilizzano l'infobox.
row-items= accetta valori numerici e trasforma la sezione in un "gruppo/sezione intelligente" ("smart group") che copre X colonne (ad esempio, row-items="4" disporrà le celle in 4 colonne). I gruppi intelligenti dispongono le proprie celle di dati (i tag <data>) orizzontalmente e passano automaticamente ad un nuova riga quando quella corrente supera il limite X. Le celle sono allungate per coprire tutto lo spazio possibile dell'ultima riga.

Questi gruppi intelligenti meritano una nota a parte per quanto riguarda i loro dati: i tag <data> al loro interno, oltre a quanto abbiamo già detto, possono contenere l'attributo span=, il cui valore indica il numero di colonne che coprirà quella cella (ad esempio, span="2" permetterà alla sua cella <data> di occupare due colonne anziché una).

Il tag <navigation> serve a creare una sorta di sezione composta da una sola riga, ovvero il suo contenuto viene visualizzato senza intestazioni o etichette: accetta il wikitesto e viene generalmente utilizzato per la navigazione verso altre pagine, come una categoria o una sottopagina (eventualmente anche a un sito esterno ufficiale). Un suo utilizzo tipico è <navigation>[[{{PAGENAME}}/Storia]] - [[{{PAGENAME}}/Galleria]]</navigation> o <navigation>[[:Categoria:Immagini di {{PAGENAME}}|Galleria]]</navigation>. Notate che può essere inserito all'interno di una sezione <group> tranne quando questa è orizzontale (ovvero contiene layout="horizontal").

Il tag <panel> è utilizzato per creare un'interfaccia con più schede alternative in un'area dell'infobox, dove ciascuna scheda è all'interno di un tag <section>. Al suo interno, possiamo trovare un'eventuale intestazione <header> e appunto le schede <section> (da notare che in genere se ne hanno almeno due perché un <panel> con una sola scheda <section> è inutile e tanto varrebbe utilizzare una normale sezione <group>).

Il tag <section> rappresenta il contenuto di una scheda del <panel>. L'etichetta cliccabile è rappresentata da un tag <label>; se omesse, le etichette hanno un valore di default che è il loro indice numerico che parte da zero (quindi la prima scheda sarà etichettata 0, la seconda 1, la terza 2 e così via); se tutte le schede <section> di un pannello <panel> sono prive di etichette <label>, saranno disposte verticalmente. Al suo interno, oltre a <data> e <label>, potremo trovare titoli <title>, immagini <image>, sotto-sezioni <group>, intestazioni <header> e navigazioni <navigation>. Ricordate che i tag <section> possono essere inseriti solo tra <panel> e </panel>; non c'è un limite prestabilito al numero di <section> all'interno di un <panel> ma cercate comunque di non inserirne troppi, eventualmente potete anche dividerli in due <panel> a seconda del caso. Il loro utilizzo più tipico è mostrare dati alternativi tra media diversi (come manga e anime, romanzi e film, etc).

Esempi[]

Vediamo alcuni esempi pratici di formattazione e utilizzo dei tag appena descritti.

Il tag <format> è quello che garantisce il più ampio spettri di possibilità di personalizzazione e stilizzazione.

<title source="titolo">
        <default><div style="border:1px solid;">{{PAGENAME}}</div></default>
        <format><div style="border:1px solid;">{{{titolo}}}{{DISPLAYTITLE:{{{titolo}}}}}</div></format>
    </title>

andrà a creare un bordo intorno al titolo (sia con titoli scelto da noi, sia con titolo di default),

<data source="alias">
<format><small>{{{alias}}}</small></format>
</data>

rimpicciolirà il testo con cui compileremo il parametro "alias",

<data source="risveglio">
            <label><small>Risveglio:</small></label>
            <format>{{{risveglio}}}[[Categoria:Risvegliati]]</format>
        </data>

inserirà la pagina nella categoria "Risvegliati" se compiliamo il campo del parametro "risveglio",

<data source="posseduto">
			<label><small>Posseduto/a:</small></label>
			<format>{{#ifeq: {{{posseduto}}} | sì | [[Possessione|Sì]] | No }}</format>
		</data>

visualizza "Sì" che collega alla pagina sulla possessione se compiliamo il campo del parametro "posseduto" con "sì"/"Sì", altrimenti (di default) visualizza un semplice "No".

<data source="arma">
            <label><small>Arma:</small></label>
            <format>{{#switch: {{{arma|}}}
            | spada = [[Spade]][[Categoria:Spadaccini]]
            | balestra = [[Balestre]][[Categoria:Balestrieri]]
            | #default = {{{arma}}}[[Categoria:Armati]]
}}</format>
	</data>

visualizza "Spade" o "Balestre" come dato del parametro con tanto di link alla generica pagina che tratta quel tipo di arma e inserisce la pagina corrente nella relativa categoria (in questo caso, stiamo simulando una wiki in cui spade e balestre sono gli unici tipi di armi che hanno una pagina che ne parla in generale e una categoria dedicata), altrimenti inserisce la pagina corrente nella categoria generica "Armati" e visualizza semplicemente quello che abbiamo inserito nel campo (se il campo è lasciato vuoto, non vedremo la sua riga e la pagina non verrà categorizzata).

<data source="arma">
            <label><small>Arma:</small></label>
            <default>[[Categoria:Disarmati]]</default>
            <format>{{#switch: {{{arma|}}}
            | spada = [[Spade]][[Categoria:Spadaccini]]
            | balestra = [[Balestre]][[Categoria:Balestrieri]]
            | #default = {{{arma}}}[[Categoria:Armati]]
}}</format>
	</data>

segue l'esempio di prima ma in più c'è un valore di default per quando il campo è lasciato vuoto, caso in cui la pagina verrà categorizzata nella Categoria:Disarmati seguendo il caso di default. ATTENZIONE: il caso di default del tag <data> e il caso di default dello switch sono cose diverse.

Possiamo formattare anche le etichette:

<label><small>Alias:</small></label>

rimpicciolirà la sola etichetta "Alias:".

Possiamo inserire dei campi in una stessa riga invece che uno sotto l'altro creando una sezione orizzontale con <group layout="horizontal"> o forzare una sezione (orizzontale o verticale) a mostrare anche i campi vuoti con <group show="incomplete">; possiamo anche eliminare un'etichetta (come abbiamo già visto prima) e inserirne una "falsa" nel campo che di fatto sarà parte del testo e si comporterà come tale ma sembrerà un'etichetta (questa opzione può risultare utile nelle sezioni orizzontali perché visivamente più gradevole).

<group layout="horizontal" show="incomplete">
    <header><center>Reincarnazioni</center></header>
		<data source="precedente">
			<format><small>Precedente:<br/>{{{precedente}}}</small></format>
		</data>
		<data source="successiva">
			<format><small>Successiva:<br/>{{{successiva}}}</small></format>
		</data>
    </group>

Questo esempio (usato anche per le navigazioni di capitoli ed episodi con "precedente" e "successivo") mostra due campi sulla stessa riga.

Possiamo anche inserire una sezione all'interno di un'altra sezione, creando di fatto una sotto-sezione; le sotto-sezioni si comprimono quando comprimiamo la sezione che le contiene.

    <group collapse="open"><header>Bio</header>
        <group layout="horizontal" show="incomplete">
            <data source="specie">
                <format><small>Specie:<br>{{{specie}}}</small></format>
            </data>
            <data source="stato">
                <format><small>Stato:<br>{{{stato}}}</small></format>
            </data>
        </group>
        <group layout="horizontal" show="incomplete">
            <data source="universo">
                <format><small>Universo:<br>{{{universo}}}</small></format>
            </data>
            <data source="residenza">
                <format><small>Residenza:<br>{{{residenza}}}</small></format>
            </data>
        </group>
    </group>

Questo è un esempio in cui abbiamo una sezione comprimibile che contiene due sotto-sezioni orizzontali.

Possiamo anche sfruttare i tag <tabber> per aggiungere una galleria di immagini con più opzioni di personalizzazioni: questa operazione non sarà nel campo dell'immagine vera e propria (il tag <image>) ma sarà il campo di un parametro con una sezione orizzontale i cui dati sono appunto immagini.

<group layout="horizontal">
		<data source="dimensioni stemma">
			<default><tabber>
|-|stemma 1=
[[File:{{{stemma 1|Stemma neutro.png}}}|50px]]
|-|stemma 2=
[[File:{{{stemma 2|Stemma neutro.png}}}|50px]]
</tabber></default>
			<format><tabber>
|-|stemma 1=
[[File:{{{stemma 1|Stemma neutro.png}}}|{{{dimensioni stemma|50}}}px]]
|-|stemma 2=
[[File:{{{stemma 2|Stemma neutro.png}}}|{{{dimensioni stemma|50}}}px]]
</tabber></format>
	</data>
	</group>

Questo esempio crea appunto una "falsa galleria"; in generale, sconsigliamo di usare questa opzione per sostituire l'immagine ma potrebbe tornare utile ad esempio per aggiungere delle icone di qualche tipo. Notate che l'abbiamo fatta dipendere dal parametro "dimensioni stemma", quindi ci serve un valore di default per quando tale parametro è vuoto ma vogliamo comunque la falsa galleria.

Possiamo dividere una parte dell'infobox in sezioni alternative: si tratta di creare un tabber che ci permetterà di scegliere quale "versione" di quella sezione visualizzare. Quando ad esempio abbiamo un infobox che contiene informazioni di un manga e del relativo anime, possiamo ricorrere ai tag <panel>, <section> e <label> (il panel contiene le section, ogni section ha una label; non c'è un limite preciso al numero di section e panel ma è sempre opportuno non esagerare).

    <panel>
    <section>
      <label>Manga</label>
        <data source="capitoli">
            <label>Capitoli:</label>
        </data>
        <data source="volumi">
            <label>Volumi:</label>
        </data>
    </section>
    <section>
      <label>Anime</label>
        <data source="episodi">
            <label>Episodi:</label>
        </data>
        <data source="stagioni">
            <label>Stagioni:</label>
        </data>
    </section>
    </panel>

Questo esempio mostrerà un tabber nel nostro infobox che ci permetterà di scegliere tra "Manga" e "Anime" e visualizzare dunque le loro sezioni.

Possiamo inoltre aggiungere una navigazione col tag <navigation> per collegare altre pagine o siti.

<navigation>[https://community.fandom.com/it Sito ufficiale]</navigation>
<navigation>{{{sito|[https://community.fandom.com/it Sito ufficiale]}}}</navigation>
<navigation><center>[[:Categoria:Immagini di {{{titolo|{{PAGENAME}}}}}]]</center></navigation>

Questi esempi mostrano come collegare sempre lo stesso sito, come collegare un sito a scelta (con caso di default) e come collegare una pagina o categoria interna alla wiki.

Infobox e CSS[]

Tutti gli infobox di una wiki ne seguono il tema per stabilire i propri colori. Possiamo però cambiarli andando ad aggiungere alcune stilizzazioni nel tag <infobox>. Esso accetta gli attributi theme=, theme-source=, type=, accent-color-source=, accent-color-default=, accent-color-text-source=, accent-color-text-default=, layout=.

theme= indica il nome del tema da applicare, modificabile con la classe CSS .pi-theme-NOMETEMA (dove NOMETEMA è il valore con cui settiamo theme=: ad esempio, theme="personaggio" richiamerà la classe .pi-theme-personaggio). Non sovrascrive theme-source o type.
theme-source= indica il parametro dell'infobox che sceglierà il tema da applicare. Quindi il valore che inseriremo nel parametro stabilito sarà il nostro NOMETEMA (ad esempio, l'attributo theme-source="schema" nella pagina del template e il parametro schema=personaggio nell'articolo in cui usiamo quel template utilizzeranno il tema salvato nella classe .pi-theme-personaggio).
type= indica il nome del tipo da applicare, modificabile con la classe CSS .type-NOMETEMA (dove NOMETEMA è il valore con cui settiamo type=: ad esempio, type="personaggio" richiamerà la classe .type-personaggio). L'unica differenza sostanziale tra theme= e type= è il nome della classe CSS richiamata.
Notate che theme=, theme-source= e type= non si sovrascrivono a vicenda: in caso di conflitti, prevarrà la classe CSS inserita dopo nella pagina MediaWiki:Common.css o MediaWiki:Fandomdesktop.css (quindi .pi-theme-personaggio sovrascrive .type-personaggio se è stata scritta più in basso ma viene sovrascritta se è stata scritta più in alto).

accent-color-source= indica il nome del parametro in cui specificare il colore per lo sfondo di titoli e intestazioni dell'infobox.
accent-color-default= indica il colore di default per lo sfondo di titoli e intestazioni dell'infobox. Accetta codici colore esadecimali da 3 o 6 cifre (come #f00 o #ff0000).
accent-color-text-source= indica il nome del parametro in cui specificare il colore per il testo di titoli e intestazioni dell'infobox.
accent-color-text-default= indica il colore di default per il testo di titoli e intestazioni dell'infobox. Accetta codici colore esadecimali da 3 o 6 cifre (come #f00 o #ff0000).
layout= indica la struttura dell'infobox e accetta i valori default e stacked: layout="default" non fa nulla e può essere omesso; layout="stacked" visualizzerà le etichette sopra i relativi dati anziché alla loro sinistra (similmente alle "false etichette" che abbiamo visto in precedenza).

CSS[]

Oltre alle due appena viste, le classi CSS principalmente coinvolte nella personalizzazione degli infobox sono: .portable-infobox (tutto l'infobox), .pi-item (tutti gli elementi dell'infobox), .pi-title (titolo), .pi-header (intestazioni), .pi-navigation (navigazioni), .pi-group (sezioni), .pi-data (dati), .pi-data-value (valori dei dati), .pi-data-label (etichette), .pi-image (immagini), .pi-caption (didascalie), .pi-image-collection (gallerie), .pi-background (sfondo generale), .pi-secondary-background (sfondo di titoli e intestazioni), .pi-font (font generale), .pi-secondary-font (font di titoli, etichette e navigazioni).

Vediamo dunque alcuni semplici esempi (trovate già indicato tra commenti /* e */ a che cosa servono i codici).

/* tutto l'infobox */
.portable-infobox {
	width: 300px; /* larghezza dell'infobox */
	background-color: #ff0000; /* sfondo dell'infobox */
	border: 1px solid yellow; /* bordo dell'infobox */
	margin: 0 0 0.5em 1em; /* margine tra gli elementi dell'infobox */
}

.pi-item {
	border-bottom: 1px solid #0000ff; /* bordo inferiore degli elementi */
}

.portable-infobox .pi-border-color {
    border-color: yellow; /* colore bordi tra elementi */
}

/* colori di titoli e intestazioni */
.pi-title, .pi-header {
	background-color: yellow; /* sfondo di titoli e intestazioni */
	color: orange; /* testo di titoli e intestazioni */
}

/* colori dei link nei dati */
.pi-data a:link {
	color: white;
	background: black;
}

/* colori dei link a pagine inesistenti nei dati */
.pi-data a.new:link {
	color: blue;
	background: yellow;
}

/* colore della freccia cliccabile per espandere/comprimente le sezioni */
.portable-infobox .pi-collapse .pi-header:first-child::after {
	border-color: blue;
}

/* titoli e intestazioni */
.pi-title, .pi-header, .portable-infobox .pi-collapse .pi-header {
	padding: 1px; /* distanza dai bordi sopra e sotto */
	box-shadow: /* sfumatura intorno */
		inset 0 0 0 1px yellow,
		inset 0 0 0 2px orange;
}

/* rimozione didascalia */
.portable-infobox .pi-caption {
	display: none;
}

/* tab galleria al centro */
/* ATTENZIONE: questo si applica a tutti i tab, non solo a quelli negli infobox (non dovrebbe recarvi problemi perché già sapete che i <tabber> sono da evitare nei testi degli articoli) */
.mw-parser-output .wds-tabs {
    justify-content: center;
}

/* tab galleria in basso */
.portable-infobox .pi-image-collection {
	display: flex;
	flex-direction: column-reverse;
}

/* etichette delle informazioni */
.pi-data-label {
	background-color: yellow; /* colore di sfondo */
	flex-basis: 110px; /* distanza dal valore */
	padding: 5px 0px 5px 5px; /* distanza intorno */
}

/* liste puntate */
.portable-infobox .pi-data-value ul {
	list-style-type: none; /* rimuove il punto a sinistra */
	margin-left: 0em; /* rimuove lo spazio a sinistra */
}

/* dati (sezioni verticali) */
.portable-infobox .pi-data {
	background-color: #ff0000;
	color: #00ff00;
	padding: 0px; /* distanze dagli altri elementi */
}
.portable-infobox .pi-data-value {
	font-size: 12px; /* dimensioni testo */
	padding: 5px;
}

/* dati (sezioni orizontali) */
.portable-infobox .pi-horizontal-group-item {
	background-color: #ff0000;
	color: #00ff00;
	font-weight: bold; /* testo in grassetto */
	font-size: 14px;
	padding: 10px;
}

/* note (tra tag <ref> e </ref>) */
.portable-infobox .reference {
	font-size: 8px;
}

Consigli[]

Se personalizzate i colori dei vostri infobox, tenete a mente sia il tema chiaro che il tema scuro della wiki: l'infobox deve vedersi bene in entrambi i temi.
Ricordate che è legittimo copia-incollare i codici di altre wiki finché citate la fonte e gli autori.
All'interno dell'editor sorgente degli infobox, quando inserite un tag di apertura, verrà inserito automaticamente il suo tag di chiusura (ad esempio, se scrivete "<data>", apparirà anche "</data>" subito dopo): fate attenzione a non riscrivere lo stesso tag di chiusura, eventualmente cancellate subito quello automatico. Notate che non accade quando copia-incollate un tag o modificate un tag già esistente ma solo quando digitate >.
L'editor sorgente degli infobox vi segnala quando c'è un problema nel codice tramite un simbolo accanto al numero della riga in question: una x in un quadrato rosso indica gli errori gravi, un ! in un triangolo giallo indica un errore potenzialmente trascurabile o semplicemente una cattiva pratica, una i indica un'annotazione che potete anche ignorare. Queste segnalazioni sono conteggiate in basso a sinistra subito sotto la finestra di modifica e sopra "Oggetto:" e, cliccando su queste icone, potrete raggiungere direttamente le righe incriminate e navigare tra esse. L'ideale è risolvere questi problemi e salvare l'infobox solo quando i contatori sono a 0.
Cercate di ricontrollare sempre i codici degli infobox e i CSS quando li salvate.
All'interno dell'editor sorgente degli infobox, può tornarvi utile la ricerca testuale (CTRL + F), il cui pop-up vi permette di navigare più comodamente all'interno del codice degli infobox più lunghi ma anche di sostituire parole o porzioni di codice.
Per visualizzare gli effetti dei vostri codici CSS in tempo reale senza applicarli all'intera wiki (o anche per controllare se li avete applicati correttamente), potrebbe tornarvi utile lo script PortableCSSPad della Dev Wiki.

Conclusione[]

Se non ci sono altre domande, possiamo concludere questo evento: se doveste avete altre domande in seguito, non esitate a contattarmi. Vi ringrazio per la partecipazione/visione e vi auguro un buon proseguimento e soprattutto spero che questo breve tutorial vi sia stato almeno un po' d'aiuto!

KuroUrufu

International Wiki Representative

KuroUrufu, attivo su Fandom dal 2015, helper dal 2017 e IWR dal 2022.
Tizio qualsiasi da metà dicembre 2023.

Visualizza Profilo

Vuoi restare aggiornato sulle ultime funzionalità rilasciate e sulle novità di Fandom?
Clicca qui per seguire il blog dello staff di Fandom.
Clicca qui per iscriverti alla newsletter via email From the Desk of Community.

Vuoi poter comunicare in tempo reale con gli altri utenti e con lo staff?
Unisciti al nostro server Discord ufficiale per utenti registrati!