Wiki della Community
Advertisement

Gli infobox sono simili alle schede informative o ai riquadri laterali in una rivista e sono pensati per presentare un riassunto dell'argomento della pagina. Presentano i punti più importanti in un formato organizzato e di facile lettura. Gli infobox sono in genere realizzati usando dei template per mantenere omogeneità e coerenza all'interno di una community.

Fandom ha sviluppato un sistema codificato per creare gli infobox, chiamati infobox portatili, che consente di farli apparire in maniera corretta su tutti i dispositivi, come illustrato di seguito. Non ci sono cambiamenti sull'uso degli infobox in un articolo — ciò che cambia, invece, è il modo in cui sono scritti in una pagina di template. Fandom considera l'utilizzo degli infobox portatili come lo standard per le proprie community, sicuri e stabili per tutti gli utilizzi pratici comuni.

È stato creato anche uno strumento per la conversione degli infobox esistenti; maggiori informazioni su questo si trovano su Aiuto:Conversione infobox.

Link utili

Come aggiungere un infobox ad un articolo

Inserire un infobox portatile da VisualEditor

Puoi aggiungere un infobox a un articolo nello stesso modo in cui aggiungeresti qualsiasi altro template, sia attraverso l'utilizzo degli strumenti integrati dell'editor, sia attraverso la modalità sorgente dell'editor. Nel VisualEditor si può utilizzare l'opzione "Infobox" del menù "Inserisci".

Nel caso del codice sorgente, in genere puoi cominciare copiando la sintassi dalla documentazione del template (che normalmente si trova in fondo alla pagina del template), incollandola in un articolo e cambiando le parole dopo i segni di uguale per fornire le informazioni desiderate. Ad esempio:

{{Infobox personaggio
| titolo = Margherita
| immagine = Example.jpg
| didascalia = Margherita nel vento
| posizione = Fiore supremo
| età = 2 mesi
| stato = Attivo
| altezza = 13 centimetri
| peso = 20 grammi
}}

Con gli infobox portatili, ciò funziona allo stesso modo degli altri template. Tuttavia, la sintassi nella pagina di template è leggermente diversa, come vedremo di seguito.

Come creare un infobox

Tutorialinfobox.png

Per prima cosa, crea un nuovo template con il nome che preferisci. Per far questo, crea una pagina con titolo "Template:[nome di tua scelta]" (per esempio, Template:EsempioInfobox). Mentre in passato avresti usato tabelle e div, ora invece si usano i tag <infobox>. Iniziamo con un infobox 'stacked' (impilato) di base, con un titolo e un'immagine:

<infobox layout="stacked">
  <title source="nome">
     <default>{{PAGENAME}}</default>
  </title>
  <image source="immagine" />
</infobox>

Questo wikitext indicherà al tuo template di usare le variabili nome e immagine per gli elementi title e image. In aggiunta puoi usare il tag <default>, il cui valore sarà utilizzato quando un utente non specifica un nome/immagine/etc. nell'articolo.

A questo punto abbiamo solo bisogno di due altri campi contenenti informazioni aggiuntive. Cominciamo con il primo:

<data source="stagione"><label>Stagione(i)</label></data>

Dopo aver aggiunto un ultimo campo, con il codice prima e l'etichetta Prima apparizione, concludiamo in questo modo:

<infobox layout="stacked">
  <title source="nome"><default>{{PAGENAME}}</default></title>
  <image source="immagine" />
  <data source="stagione"><label>Stagione(i)</label></data>
  <data source="prima"><label>Prima apparizione</label></data>
</infobox>

Adesso possiamo usare il template in un articolo e creare un infobox funzionante:

{{EsempioInfobox
 |nome   = Eddard Stark
 |immagine  = eddard.jpg
 |stagione = [[Stagione 1|1]]
 |prima  = "[[L'inverno sta arrivando]]"
}}

Elementi nascosti

Ciascun campo o elemento senza un valore sarà automaticamente nascosto. Questo si applica a tutti i tag con l'eccezione dei gruppi che sono visualizzati forzatamente (vedi #Forzare tutti gli elementi del gruppo a comparire) e quei campi con una tag <default>. Quando tutti gli elementi sono vuoi, l'infobox stesso non viene mostrato. All'interno di una tag <image>, le immagini che non esistono non mostrano un "link rosso", ma la pagina del file apparirà in Speciale:FileRichiesti.

Come cambiare il layout di un infobox

Gli infobox che utilizzano questo tipo di codice hanno un design automatico basato sul tema personalizzato della tua community. Se una variabile è lasciata vuota, la riga corrispondente del template non comparirà (a meno che non si usi il tag <default>).

Opzioni di layout

Due opzioni alternative di layout sono disponibili per gli infobox:

Layout di default (tabella)
Le etichette sono mostrate a sinistra dei valori
<infobox>
   ...
</infobox>

Layout di default (tabella)

Layout "stacked" (impilato)
Le etichette sono mostrate sopra i valori
<infobox layout="stacked">
   ...
</infobox>

Layout "stacked" (impilato)

Temi personalizzati

Ci sono un po' di modi diversi per personalizzare il look dei tuoi infobox. È consigliato non mischiarli troppo dato che potrebbe diventare oscuro per altri che cercano di capire come vengono applicati gli stili.

  1. Lo schema di colori di default dipende dalla scelta di colori fatta nel Theme Designer; il colore complessivo dello sfondo sarà lo stesso della pagine di articolo, il titolo e le intestazioni avranno come sfondo il colore secondario, e il bordo sarà una versione semi-opaca del color secondario. (Ci sono altre dipendenze, ma sono oltre lo scopo di questa pagina di aiuto. Vedi la guida di conversione di FandomDesktop per i dettagli).
  2. Il controllo completo del tema degli infobox richiede di modificare il CSS locale della community. La classe portable-infobox può essere usata per selezionare tutti gli infobox sulla wiki, e usare gli attributi type, theme, o theme-source in un tag infobox permette di aggiungere classi che rendono più semplice personalizzare uno specifico tema infobox. Per maggiori informazioni su come usare questi attributi e personalizzare un infobox, incluse guide dettagliate, clicca su Aiuto:Infobox/CSS, oppure trova un esempio di stile e tema sulla Portability Hub.
    • L'attributo type è utilizzato per definire il tipo logico dell'infobox (come "personaggio" o "oggetto"). Tutti gli infobox dello stesso tipo ricevono la stessa classe CSS.
    • L'attributo theme è usato per ragggruppare gli infobox secondo il tema (come "stagione 1" o "Halloween"). Tutti gli infobox dello stesso tema ricevono la stessa classe CSS.
    • L'attributo theme-source ti permette di cambiare il tema dell'infobox a seconda di un parametro del template. Immagina di avere creature ispirate agli elementi dell'antica grecia. Il tema dell'infobox può essere modificato a seconda di cosa l'utente inserisca nel parametro elemento, per esempio Aria, Terra, Fuoco o Acqua.
  3. I colori del testo e dello sfondo delle intestazioni possono essere impostati per ciascuna istanza di un infobox usando il metodo descritto in colori secondari qui sotto. Questo metodo produce CSS in-line che sovrascrive tutti gli altri metodi ma è limitato soltanto ai titoli e alle intestazioni.

Colori secondari

I colori del titolo e delle intestazioni per testo e sfondo possono essere ulteriormente personalizzati per ogni infobox usando i parametri "accent-color". Come per theme-source, il colore usato è il valore del parametro del template indicato in accent-color-source (per gli sfondi) e accent-color-text-source (per il testo).

Per esempio: se il template infobox dichiara accent-color-source="bkg" e l'infobox nell'articolo dichiara bkg = #FFF, lo sfondo delle intestazioni e titoli sarà #FFF (il valore esadecimale per il bianco). I colori dichiarati in questo modo devono essere nel formato esadecimale #FFF o #FFFFFF o verranno ignorati.

I valori degli "accent-color" sovrascriveranno i colori impostati con "theme" o quelli predefiniti.

Questa modalità include anche un parametro per un colore predefinito, per cui usare accent-color-default="#FFF" imposta il colore per tutti i titoli e le intestazioni, mentre accent-color-text-default="#000000" funziona in maniera simile per il colore del testo, entrambi usano il formato esadecimale.

I colori di default possono anche essere specificati nel caso l'utente non inserisca nessun valore nel paramentro bkg, come nell'esempio sopra. Usare accent-color-default="#FFF" imposta il colore per tutti i titoli e gli sfondi delle intestazioni, e accent-color-text-default="#000000" funziona in un modo simile settando il colore del testo di default al nero.

Stili per elemento

I singoli elementi di un infobox possono includere marcatori nell'output HTML che permettono di essere individuati tramite selettori CSS noti come "data-attributes".

  • Tutti gli elementi di un infobox portatile che hanno un input tramite source sono ora renderizzati in HTML con il nome di quel parametri in un data-attribute, come ad esempio data-source="ATK". Questi ti permette di scrivere selettori CSS o come ad esempio .pi-item[data-source=ATK] per individuare e personalizzare singoli elementi. Usato in combinazione con type, questo dovrebbe eliminare la necessità della modalità di selezione tremite elemento-numero-tot-di-un-certo-tipo e aprire altre possibilità per il design e l'interattività.
  • Il nuovo attributo name permette la selezione esplicita di una elemento a prescindere che accetti un parametro di input o meno, inclusa l'identificazione di <title>, <group>, <data>, <header>, <image>, e <navigation>. In modo molto simile al data-attribute data-source, <data name="bar"> può essere selezionato come .pi-item[data-item-name=bar].

Come usare più immagini o video

Immagini in schede

Per usare più immagini nella stessa posizione in un infobox, puoi semplicemente aggiungere il tag <gallery> al parametro immagine.

{{Esempio
 |nome   = Eddard Stark
 |immagine  = <gallery>
Eddard 1.jpg|Primo piano
Eddard 2.jpg|Con un cavallo
Eddard 3.jpg|Sul trono
</gallery>
}}

Per maggiori informazioni su questa personalizzazione, vedi questa discussione (in inglese).

Per inserire un video in un infobox, usa semplicemente il tag <image> come faresti con un'immagine. Quando viene inserito un video invece di un'immagine, viene mostrata una miniatura con il pulsante play e l'informazione della durata; cliccando sul video si apre il lettore di video. Per inserire più video, aggiungi un nuovo tag <image> per ogni video.

Come raggruppare i dati

Esempio di ordine inusuale

Adesso che hai creato un semplice infobox, puoi imparare a usare le opzioni più avanzate. In questa sezione ti mostriamo come creare l'infobox che vedi a destra.

L'infobox inizia con tre campoi <data>, poi un unico campo <title> e un unico campo <image>. Come puoi vedere, il campo <title> non deve essere necessariamente il primo.

<infobox layout="stacked">
  <data source="prec"><label>Precedente</label></data>
  <data source="cont"><label>Contemporanea</label></data>
  <data source="prox"><label>Prossima</label></data>
  <title source="nome" />
  <image source="immagine" />
</infobox>

Raggruppare le informazioni con il tag group

Aggiungere un gruppo

Il tag <group> ti permette di raggruppare insieme diversi campi e di dare a ogni gruppo un titolo. Ricorda: i campi dichiarati a cui non è stato assegnato un valore non compariranno. Questa regola vale anche per i gruppi: se a nessuno dei campi (escluso il tag <header>) all'interno di un gruppo viene assegnato un valore, l'intero gruppo non comparirà.

<infobox layout="stacked">
  <data source="prec"><label>Precedente</label></data>
  <data source="cont"><label>Contemporanea</label></data>
  <data source="prox"><label>Prossima</label></data>
  <title source="nome" />
  <image source="immagine" />
  <group>
    <header>Dettagli</header>
    <data source="conflitto"><label>Conflitto</label></data>
    <data source="data"><label>Data</label></data>
    <data source="luogo"><label>Luogo</label></data>
    <data source="risultato"><label>Risultato</label></data>
  </group>
</infobox>

Layout orizzontale per i gruppi

Raggruppamento orizzontale

Invece del layout verticale, i gruppi possono avere un layout orizzontale in cui tutti i contenuti sono disposti l'uno accanto all'altro in una singola riga. Questo si può ottenere aggiungendo l'attributo layout="horizontal" al tag <group>.

<group layout="horizontal">
   ...
</group>

Layout intelligenti per i gruppi

Il layout "intelligente" è simile al layout orizzontale (che fornisce delle righe in una struttura rigida). Consente ai campi dati di un stesso gruppo di fluire da una riga all'altra. Quando il numero dei campi raggiunge un limite predefinito, il campo successivo sarà mostrato in una nuova riga sottostante. Gli elementi in una riga si adatteranno per occupare tutto lo spazio a disposizione.

Per usare il layout intelligente, aggiungi row-items="3" (o qualche altro numero che imposti il limite). Tutti gli elementi in un gruppo intelligente usano il layout orizzontale in maniera predefinita, per cui non è necessario aggiungere quell'attributo se si usano i gruppi intelligenti. Tuttavia è possibile mescolare campi di dati verticali e orizzontali aggiungendo l'attributo layout="default" ad uno specifico tag <data> per ritornare al formato verticale.

Per far in modo che un dato campo occupi più di un singolo spazio, usa l'attributo span="2" in un tag <data>, in modo simile a come funziona l'attributo colspan nelle colonne delle tabelle HTML.

<infobox>
  <title source="nome" />
  <image source="immagine" />
  <group row-items="3">
    <header>Dettagli</header>
    <data source="conflitto"><label>Conflitto</label></data>
    <data source="data"><label>Data</label></data>
    <data source="luogo"><label>Luogo</label></data>
    <data source="risultato" layout="default"><label>Risultato</label></data>
  </group>
</infobox>

Forzare tutti gli elementi del gruppo a comparire

Usando l'attributo show="incomplete", puoi forzare tutti gli elementi di un gruppo a comparire, anche quando sono vuoti, a meno che non siano tutti vuoti, nel qual caso il gruppo non compare per niente.

<group layout="horizontal" show="incomplete">
  <header>Combattenti/header>
  <data source="parte1" />
  <data source="parte2" />
</group>

Adesso combinando tutto questo otteniamo il codice finale del template:

L'infobox completo

<infobox layout="stacked">
  <data source="prec"><label>Precedente</label></data>
  <data source="cont"><label>Contemporanea</label></data>
  <data source="prox"><label>Prossima</label></data>
  <title source="nome" />
  <image source="immagine" />
  <group>
    <header>Dettagli</header>
    <data source="conflitto"><label>Conflitto</label></data>
    <data source="data"><label>Data</label></data>
    <data source="luogo"><label>Luogo</label></data>
    <data source="risultato"><label>Risultato</label></data>
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Combattenti</header>
    <data source="parte1" />
    <data source="parte2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Comandanti</header>
    <data source="comandanti1" />
    <data source="comandanti2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Forza</header>
    <data source="forza1" />
    <data source="forza2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Perdite</header>
    <data source="perdite1" />
    <data source="perdite2" />
  </group>
  <data source="civili"><label>Perdite civili</label></data>
</infobox>

Adesso possiamo usarlo in un articolo e il gioco è fatto:

{{Battaglia
 |prec        = [[Battaglia delle Isole Scudo]]
 |cont        = [[Saccheggio di Old Wyk]]
 |prox        = [[Saccheggio di Pyke]]
 |nome        = [[Saccheggio di Grande Wyk]]
 |immagine    = Ribe.jpg
 |conflitto   = [[Ribellione di Greyjoy]]
 |data        = 289 AL
 |luogo       = [[Grande Wyk]], [[Isole di Ferro]]
 |risultato   = vittoria di [[Casa Baratheon]]
 |parte1      = [[File:House-Greyjoy-heraldry.jpg|20px|link=Casa Greyjoy]] [[Casa Greyjoy]]
 |parte2      = [[File:Casa Baratheon.png|20px|link=Casa_Baratheon]] [[Casa Baratheon]]
 |comandanti1 = Sconosciuti
 |comandanti2 = Lord [[Stannis Baratheon]]
 |perdite1    = Sconosciute
 |perdite2    = Sconosciute
}}

Gruppi comprimibili

Gruppi comprimibili in azione

I gruppi possono essere resi comprimibili aggiungendo collapse="open" oppure collapse="closed" al tag <group>. Questo farà in modo che la riga del titolo del gruppo sia cliccabile (per espandere/mostrare e comprimere/nascondere il gruppo) e il gruppo verrà visualizzato rispettivamente espanso o compresso.

<group collapse="closed">
  <header>Apparizioni</header>
  <data source="film" />
  <data source="fumetti" />
</group>

Nota: un tag <header> non nullo deve essere il primo elemento dentro il tag <group> affinché questo codice funzioni.

Pannelli

Panels

PortableInfobox-Panel-Orc.gif

I campi di dati e i gruppi possono ora essere strutturati in pannelli a scheda che permettono maggiore flessibilità e una visualizzazione dei dati più intelligente su desktop e mobile. Ciascun <panel> — come figlio dell'elemento primario <infobox> — può essere etichettato (con <label>) e uno o più elementi <section> per costruire l'insieme delle schede. Ciascuno elemento che può essere altrimenti figlio di <infobox> può essere figlio di <section>. Questo dovrebbe ridurre la confusione e la necessità di gruppi di infobox sulle pagine e contemporaneamente si strutturano gli infobox in maniera più dinamica.

Il tag <section> rappresenta i contenuti di una scheda. Il pulsante cliccabile è rappresentato da un tag <label>. Le etichette ricadono sul loro indice di numeri se omesse; se tutte le schede all'interno di un pannello non sono etichetatte, vengono inserite nell'infobox come se fosseri gruppi.

<infobox>
  <title source="titolo">
    <default>{{PAGENAME}}</default>
  </title>
  <panel>
    <section>
      <label>5E</label>
      <data source="dim1">
        <label>Dimensioni</label></data>
      <data source="tipo1">
        <label>Tipo</label></data>
    </section>
    <section>
      <label>4E</label>
      <data source="origine2">
        <label>Origine</label></data>
      <data source="tipo2">
        <label>Tipo</label></data>
      <group>
        <header>Dettagli</header>
        <data source="input2">
          <label>Input</label></data>
        <data source="output2">
          <label>Output</label></data>
      </group>
    </section>
  </panel>
</infobox>

Opzioni avanzate

Formattazione

Se desideri aggiungere ulteriori informazioni ai tuoi dati – come aggiungerre alcune, categorie – o processare valori già inseriti, la formattazione dei campi ti permette di farlo.

  • Quando viene usato il tag <format>, la variabile fornita nell'attributo source= del tag <data> può essere processato o modificato tramite wikitext. Per questo scopo, il valore del parametro può essere ottenuto aggiungendo tre parentesi graffe; per esempio, {{{prezzo}}} che sfrutta source="prezzo", così come in altri template.
  • Se la variabile fornita in source= è vuota, il campo non viene mostrato a mano che i valori non siano forniti nel tag <default>.

Alcuni esempi di utilizzo:

  • Aggiungere testo extra: <format>${{{prezzo}}}</format>
  • Fornire un valore di default: <format>${{{prezzo}}}</format><default>Non in vendita</default>
  • Linkare ad una pagina: <format>[[{{{luogo}}}]]</format>
  • Linkare ad una categoria: <format>[[:Categoria:{{{tipo macchina}}}]]</format>
  • Categorizzare una pagina: <format>{{{tipo macchina}}}[[Categoria:{{{tipo macchina}}}]]</format>

Per esempio, possiamo inserire il template {{icona soldi}}:

<data source="prezzo">
  <label>Prezzo</label>
  <format>{{{prezzo}}} {{icona soldi}}</format>
</data>

L'effetto mostrato a destra può essere ottenuto con la seguente sintassi:

Campi con formattazione

<header>Prezzo di acquisto</header>
<data source="buyhaggle">
  <label>Prezzo con Haggling</label>
  <format>{{{buyh}}} {{icona soldi}}</format>
</data>
<data source="Compra">
  <label>Prezzo non scontato</label>
  <format>{{{buy}}} {{icona soldi}}</format>
</data>
<data source="Vendit>
  <label>Difficile da vendere</label>
  <format>{{{sell}}} {{icona soldi}}</format>
</data>
<data source="peso">
  <label>Peso</label>
  <format>{{{peso}}} {{icona soldi}}</format>
</data>

Funzioni parser

Le funzioni parser possono essere inserite in qualsiasi infobox. Tuttavia, i risultati vengono automaticamente nascosti se il parametro, il tag o il data source non contengono alcun testo.

<data source="livello">
  <label>Rank</label>
  <format>Orchi {{#switch:{{{livello}}}
              |1=peon
              |2=grunt
              |#default=(rank non riconosciuto)
              }}
  </format>
  <default>Orco (grado sconosciuto)</default>
</data>

Non avrebbe senso fare test per stringhe vuote nella definizione dello switch; ad esempio, |livello= , perché quello è già coperto dal tag <default>.

Esempi

Vedi anche

Aiuto aggiuntivo e feedback

Advertisement