Lavori WIKI - Template

Da Wiki - ForgottenWorld.

Mediawiki ha un concetto molto ampio di Template, possono essere piccole tabelle illustrative come questo esempio, strumenti per segnalare avvisi e comunicazioni come questo esempio e vere e proprie porzioni di pagine.


E' buona norma creare il template in una pagina con nome Template: Nometemplate e chiamare i suoi relativi blocchi interni Template: nometemplate/nomeblocco. Esempio: Template: Paginaprincipale --> Template: Paginaprincipale/Articoli

I nomi sono considerati Key-sensitive, fare quindi attenzione alle maiuscole!

Per inserire un template in una pagina usare il seguente codice {{nome template}}

Sistema a template

Uno dei problemi maggiori che si possono avere in wiki, in termini di indicizzazione, sono le pagine parallele o troppo simili in stile indice o elenco di contenuti. Le figure di moderazione difficilmente riescono a seguire decentemente una wiki attiva e la natura aperta della wiki che permette a tutti di poter fare quasi tutto tende a creare nel tempo pagine non aggiornate, abbandonate o obsolete. Per questo motivo è vivamente consigliato usare gli indici di categoria o template per pagine di questo genere.
I template, essendo inseribili in più pagine, permettono modifiche uniche al posto di modifiche singole pagina per pagina.

Caratteristiche dei Template

I template possono essere composti da semplice testo o un misto di HTML, CSS e tag wiki. Una funziona molto importante che eredita la pagina in cui viene inserito il template sono le caratteristiche stesse del template, quindi se Template:Pippo è categorizzata tramite la Category:PaginePippo la pagina stessa erediterà questa categoria. Sistema molto utile per tenere traccia delle pagine WIP di FW. Tramite il tag wiki noinclude è possibile decidere cosa importare nel template e cosa rendere solo leggibile, utile per semplici istruzioni all uso.
Purtroppo la wiki supporta solo in parte l HTML e varia da versione a versione, non resta che procedere a tentativi. Al contrario il CSS non dovrebbe creare problemi. Ultima caratteristica di rilievo riguardante i template è la possibilità di includere template dentro altri template permettendo di creare un codice più pulito e meno ripetitivo o unire più contenuti in un sola pagina.

Guida alla creazione di un template

Vedremo ora passo per passo l'elaborazione di un template mediamente complesso. E' richiesto un minimo di comprensione logica di Html, CSS e tag wiki. Di seguito sono elencanti pagine o siti con documentazione:

Tag e Sorgente

Un primo passo piuttosto ovvio è la distinzione tra il tag usato per richiamarlo {{Nometemplate}} e il codice sorgente utilizzato per definirlo


{|
|
|-
|
|-
|
|}


Meno ovvia è la possibilità di inserire dati nel tag che verranno poi rappresentati nel template. La wiki segue l'ordine di inserimento nel caso non trova una corrispondenza, è vivamente consigliato utilizzare la stessa parola nel tag e nel codice per rendere più semplice futuri lavori.

 {{Nometemplate|Datodainserire}} 

 {|  
 | {{{Datodainserire}}} 
 |} 

Nel caso di più dati da inserire è bene passare alla forma elencata:

{{NOMETEMPLATE 
|Dato1= 
|Dato2= 
|Dato3= 
}}

{|
| {{{Dato1}}} {{{Dato3}}} {{{Dato2}}}
|}

Layout

E' letteralmente la forma che si vuole dare al template in termini di righe e colonne, in questo tutorial vedremo la via più semplice e utilizzata. Esistono pochi semplici simboli da utilizzare:

  • {| : Tag di apertura del template.
  • |} : Tag di chiusura del template.
  • | : Tag di contenuto, in base allo stile può essere una riga o una cella della riga.
  • |- : Tag nuova riga, corrisponde al <br /> nel HTML, non deve avere contenuti.
  • {{{Dato}}} : Tag di variabile, utilizzato per inserire i dati nel template.

Quindi:

{| Apriamo il template, con la possibilità di definire lo stile generico
|-Andiamo a capo
| {{{Dato1}}} Inseriamo il priamo dato nella prima riga disponibile, con la possibilità di definire lo stile
|-Andiamo a capo
| {{{Dato2}}} {{{Dato3}}}Creiamo una riga con due dati da inserire, con la possibilità di definire lo stile per ogni dato
|-Andiamo a capo
| {{{Dato4}}} Leggi sotto
| {{{Dato5}}} Leggi sotto
| {{{Dato6}}} Tramite lo stile possiamo usare una stessa riga per creare più celle più dati
|} Chiudiamo il template

Esempio Layout

 
{|
|-
| colspan="3" align="center" | Dato1
|-
| colspan="2" align="center" | Dato2 & Dato3
|-
| colspan="1" align="center" | Dato4
| colspan="1" align="center" | Dato5
| colspan="1" align="center" | Dato6
|}
Dato1
Dato2 & Dato3
Dato4 Dato5 Dato6
 
{|
|-
| style="width: 100%; text-align: center;" | Dato1
|-
| style="width: 100%; text-align: center;" | Dato2 & Dato3
|-
| style="float: left; text-align: center;" | Dato4
| style="float: left; text-align: center;" | Dato5
| style="float: right; text-align: center;" | Dato6
|}


Dato1
Dato2 & Dato3
Dato4 Dato5 Dato6

Stile

Lo stile o CSS è tutto ciò che definisce forme, dimensioni, colori, spazi e testi. Nell'esempio precedente è stato inserito un minimo di stile per posizionare i testi, in questo capitolo vedremo di creare un esempio più elaborato. Ci risulterebbe complesso spiegare il CSS in questa unica pagina per questo motivo vi rimandiamo alla documentazione linkata prima.

Esempio Template

  • Creiamo il contenitore: Iniziamo a creare un contenitore, essendo una guida verranno usati colori comprensibili a prima vista nel codice.
 
{| style="width:50%; margin-bottom:.5em; border:3px solid red; border-radius:15px; text-align:center; font-size:120%; background:orange;"
|
|}
 


  • Prima riga:Aggiungiamo un piccolo Header come prima riga del nostro template.
 
{| style="width:50%; padding: 5px; border:3px solid red; border-radius:15px; text-align:center; font-size:120%; background:orange;"
|-
| style="width:40%; border:1px solid green; color:white; text-align:center; font-size:120%; background:grey" | Nome personaggio
|-
|}
 
Nome personaggio


  • Dati:Inseriamo i dati che poi saranno da variare in base al codice di compilazione
{| style="width:50%; padding: 5px; border:3px solid red; border-radius:15px; text-align:center; font-size:120%; background:orange;"
|-
| style="width:40%; border:1px solid green; color:white; text-align:center; font-size:120%; background:grey" | Nome personaggio
|-
| style="width:40%; color:black; text-align:left; font-size:80%; background:Transparent" | Fisico:
|-
| style="width:40%; | <span style="color:black; font-size:80%;">Peso:</span> <span style="color:white; font-size:120%; background:orange">90Kg</span> <span style="color:black; font-size:80%;">Altezza:</span> <span style="color:white; font-size:120%; background:orange">190Cm</span> <span style="color:black; font-size:80%;">Segni:</span> <span style="color:white; font-size:120%; background:orange">Cicatrice</span>
|}
Nome personaggio
Fisico:
Peso: 90Kg Altezza: 190Cm Segni: Cicatrice


{| style="width:50%; padding: 5px; border:3px solid red; border-radius:15px; text-align:center; font-size:120%; background:orange;"
|-
| style="width:40%; border:1px solid green; color:white; text-align:center; font-size:120%; background:grey" | Nome personaggio
|-
| style="width:40%; color:black; text-align:left; font-size:80%; background:Transparent" | Fisico:
|-
| style="width:40%; | <span style="color:black; font-size:80%;">Peso:</span> <span style="color:white; font-size:120%; background:orange">90Kg</span> <span style="color:black; font-size:80%;">Altezza:</span> <span style="color:white; font-size:120%; background:orange">190Cm</span> <span style="color:black; font-size:80%;">Segni:</span> <span style="color:white; font-size:120%; background:orange">Cicatrice</span>
|-
| style="width:40%; color:black; text-align:center; font-size:100%; background:yellow; border-bottom:2px solid red" | Abilità: 
|- 
| style="width:40%; | <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> </div> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> </div>
|-
|}
Nome personaggio
Fisico:
Peso: 90Kg Altezza: 190Cm Segni: Cicatrice
Abilità:
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%


{| style="width:50%; padding: 5px; border:3px solid red; border-radius:15px; text-align:center; font-size:120%; background:orange;"
|-
| style="width:40%; border:1px solid green; color:white; text-align:center; font-size:120%; background:grey" | Nome personaggio
|-
| style="width:40%; color:black; text-align:left; font-size:80%; background:Transparent" | Fisico:
|-
| style="width:40%; | <span style="color:black; font-size:80%;">Peso:</span> <span style="color:white; font-size:120%; background:orange">90Kg</span> <span style="color:black; font-size:80%;">Altezza:</span> <span style="color:white; font-size:120%; background:orange">190Cm</span> <span style="color:black; font-size:80%;">Segni:</span> <span style="color:white; font-size:120%; background:orange">Cicatrice</span>
|-
| style="width:40%; color:black; text-align:center; font-size:100%; background:yellow; border-bottom:2px solid red" | Abilità: 
|- 
| style="width:40%; | <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> </div> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> </div>
|-
| style="width:40%; border-top: 1px solid violet;" | <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 100%; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 50%; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 10%; ">90%</span> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 5px;">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 10px; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 50px;">90%</span> </div> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 100px; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 50px; whith:50px; height:50px;">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; padding: 2px; border:1px solid green; border-radius: 50px;">90%</span> </div>
|-
|}
Nome personaggio
Fisico:
Peso: 90Kg Altezza: 190Cm Segni: Cicatrice
Abilità:
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%
  • Dati variabili: Ora ci rimane solo di rendere i dati variabili in base al template da compilare. Come detto sopra il template sarà da salvare in un pagina con url finale Template:Nometemplate. Volendo sostituire il nome personaggio e alcune caratteristiche di fisico e abilità generiamo il format:
{{{Nometemplate
|Nomepersonaggio=
|Peso=
|Altezza=
|Segni=
|For=
|Des=
|Cos=
}}}

Andiamo poi nel codice sorgente a sostituire il testo definito con le variabili, in questo modo {{{variabile}}}:

{| style="width:50%; padding: 5px; border:3px solid red; border-radius:15px; text-align:center; font-size:120%; background:orange;"
|-
| style="width:40%; border:1px solid green; color:white; text-align:center; font-size:120%; background:grey" | {{{Nomepersonaggio}}}
|-
| style="width:40%; color:black; text-align:left; font-size:80%; background:Transparent" | Fisico:
|-
| style="width:40%; | <span style="color:black; font-size:80%;">Peso:</span> <span style="color:white; font-size:120%; background:orange">{{{Peso}}}</span> <span style="color:black; font-size:80%;">Altezza:</span> <span style="color:white; font-size:120%; background:orange">{{{Altezza}}}</span> <span style="color:black; font-size:80%;">Segni:</span> <span style="color:white; font-size:120%; background:orange">{{{Segni}}}</span>
|-
| style="width:40%; color:black; text-align:center; font-size:100%; background:yellow; border-bottom:2px solid red" | Abilità: 
|- 
| style="width:40%; | <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">{{{For}}}</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">{{{Des}}}</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">{{{Cos}}}</span> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> </div> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; ">90%</span> </div>
|-
| style="width:40%; border-top: 1px solid violet;" | <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 100%; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 50%; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 10%; ">90%</span> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 5px;">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 10px; ">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 50px;">90%</span> </div> <div> <span style="color:black; font-size:80%;">For:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 100px; ">90%</span> <span style="color:black; font-size:80%;">Des:</span> <span style="color:green; font-size:120%; background:white; border:1px solid green; border-radius: 50px; whith:50px; height:50px;">90%</span><span style="color:black; font-size:80%;">Cos:</span> <span style="color:green; font-size:120%; background:white; padding: 2px; border:1px solid green; border-radius: 50px;">90%</span> </div>
|-
|}
{{{Nomepersonaggio}}}
Fisico:
Peso: {{{Peso}}} Altezza: {{{Altezza}}} Segni: {{{Segni}}}
Abilità:
For: {{{For}}} Des: {{{Des}}}Cos: {{{Cos}}}
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%
For: 90% Des: 90%Cos: 90%

Esempio due

Esempio di Template impostato sulla destra della pagina contenente dati di un generico personaggio. In questo esempio vedremo effetti creati tramite i transclusion e css. Questo template rappresenta anche il primo esempio di template contenente altri template.

provaprovaprova
prova
Informazioni Basilari
Allineamento prova
Sesso prova
Razza prova
Archetipi prova
Classi prova
Divinità venerate prova
Dati Biografici
Nome completo prova
Soprannomi prova
Titoli prova
Nazionalità prova
Dinastia prova
Residenze prova
Residenze precedenti prova
Età prova
Padre prova
Madre prova
Coniugi prova
Amanti prova
Figli prova
Nascita prova, prova
Morte prova, prova
Luogo di sepoltura prova
Note prova

Esempio Tre

Prova 1
Prova 2
Prova 3
titolo
sottotitolo
bla bla bla bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla

Transclusion

La wiki, tramite "parole speciali", permette l'inclusione di template o di altre funzioni, ecco le guide:

Pagine correlate