Cimitero:Aiuto:Manuale/Creazione template: differenze tra le versioni

rimozione template decorativi obsoleti
m (→‎Template da NON creare: tolto carattere assurdo)
(rimozione template decorativi obsoleti)
 
(31 versioni intermedie di 7 utenti non mostrate)
Riga 4:
 
E così vorresti imparare a creare dei template? Tu? Con quella faccia?<br />
VabbèVabbe', oggi sono generoso e proverò ad abbassarmi al tuo livello spiegandoti '''le basi'''. Se sei un minimo meno pirla di quel che sembri, imparerai alla svelta. Ma d'altronde, se quelli che bazzicano 'sto sito fossero abbastanza svegli, non ci sarebbe bisogno di questa guida...
 
==Prima di iniziare==
Riga 11:
Esempio pratico: consideriamo il [[Template:Paranormale]]. Se in una pagina scrivo:
<nowiki>{{Paranormale}}</nowiki>
il contenuto del t.template comparirà su questa pagina, così:
{{Paranormale}}
 
=== [[:categoria:template|Categorie di template]] ===
Line 18 ⟶ 17:
* '''Template parametrici.''' Contengono codice che si adatta per ogni pagina. In particolare abbiamo le categorie di template [[:categoria:Utility templates|di sistema]], [[:categoria:template di servizio|di servizio]], [[:categoria:template di collegamento|di collegamento]] e [[:categoria:template citazione|di citazione]]
* '''[[:categoria:Template di sezione|Template di navigazione]].''' Raggruppano tutte le pagine di un certo tipo.
* '''Template di abbellimento.''' [[:categoria:Template galleggianti|T.Template galleggianti]], [[:categoria:template di paragrafo|di paragrafo]] e [[:categoria:template decorativi|decorativi]].
* '''[[:categoria:template di avviso|Avvisi]].''' Segnalano un problema relativo alla pagina, e generalmente inseriscono una categoria di manutenzione nell'articolo in cui vengono piazzati.
 
=== Tipologie di template ===
Quando creerai il tuo template Wikia (non noi!) ti farà apparire un rompicoglionissimo avviso di scegliere una '''tipologia'''. Non c'entra un cazzo con le categorie, è solo un modo per far capire ai server '''come visualizzare il template in versione mobile''', una cosa fondamentale per non imputtanare l'uso del sito con dispositivi manovrati a ditate. Se non scegli una tipologia corretta gli articoli saranno una schifezza da leggere in mobile, quindi studiati [[Aiuto:Tipologie di template]] e scegli bene.
 
=== Cosa non è un template ===
Un riquadro non è un template.<br />
Aspetta, forse non è chiaro, te lo ripeto.<br />
<big><{{Dimensione|150%|{{Allinea|center>|Un riquadro '''non è''' un template</center></big>}}}}
 
Sicuro di aver capito? No, non posso fidarmi, devo essere certo che ti entri in testa.<br /><{{Allinea|center>|
Un riquadro '''non è''' un template<br />
Un riquadro '''non è''' un template<br />
Un riquadro '''non è''' un template<br />
Line 37 ⟶ 38:
Un riquadro '''non è''' un template<br />
Un riquadro '''non è''' un template<br />
Un riquadro '''non è''' un template<br />}}
</center>
 
Mmm no, mi sa che non hai ancora capito. Meglio se ti faccio un esempio.
Line 43 ⟶ 44:
{{quote|{{Template|Quote}} è un template, ma '''non è un riquadro'''}}
 
{| classstyle="expansion"width: width="100%"; align="center" style="background-color: #FFFFFF; color: #000000; border: 1px solid #000000; text-align: left; margin-bottom: 0px; margin-top: 0px; padding-right: 4px; padding-left: 4px;"
|Questo è un riquadro, ma '''non è un template'''. Non lo è perché il codice che lo genera si trova in questa stessa pagina, non in una pagina separata ''Template:Vattelapesca''.
|}
Line 50 ⟶ 51:
 
=== Template da NON creare ===
;Riquadri che devono apparire su un solo articolo: <big>{{Dimensione|150%|In questo caso '''scrivi il codice del riquadro nella pagina stessa.'''</big>}}
;Riquadri per la propria pagina utente: come sopra.
;Avvisi: Abbiamo già decine di template di avviso:, se hai un'idea per uno nuovo, parlane prima con gli altri utenti per assicurarti che ce ne sia davvero bisogno. Nel 99,999% dei casi si può ricorrere ai template già esistenti (ad esempio {{Template|Restauro}} ) oppure - meglio ancora - alle pagine di discussione. E comunque, <u>è molto più apprezzato chi si dà da fare in prima persona</u>, rispetto a chi piazza template a destra e a manca evitando di sporcarsi le manine.
;Template per sfottere/minacciare i niubbi: Basta! Ce ne sono a trigliaia!
;Doppioni di template già esistenti: Per ovvi motivi
;Template che violano le [[Linee guida]]: Ad es.esempio template autocelebrativi, o pieni di bestemmie, o collegati ad articoli che a loro volta violano le linee guida.
 
===Esperimenti===
Line 61 ⟶ 62:
 
== Codice dei template ==
Come già detto, il sistema integra il codice del template nelle pagine in cui è incluso. Questo può portare a degli inconvenienti: sovrapposizioni, sovraccarichi, bug ecc. Per questo è bene fare attenzione quando si scrive il codice di un template. ComunquePer nonulteriori èinformazioni difficile, in una pagina, lasciare degli spazi tra un template e l'altro con il tag <tt><nowiki><br /></nowiki></tt>, o meglio ancora <tt><nowiki><brleggi [[{{FULLPAGENAME}}#clear="all"></nowiki></tt>|qui]].
 
=== <{{tt>|noinclude</tt>}} e <{{tt>|includeonly</tt>}} ===
* Il codice compreso tra '''<{{tt>|<nowiki><noinclude></nowiki></tt>}}''' e '''<{{tt>|<nowiki></noinclude></nowiki></tt>}}''' compare nella <u>pagina</u> del template (es: ''Template:Lallallà'') ma non in tutte quelle pagine che lo richiamano. Viene utilizzato generalmente per contenere una descrizione del t.template, una spiegazione del suo utilizzo e una '''[[:categoria:template|categoria]]''': quest'ultima è fondamentale e '''va <u>sempre</u> inserita''', con il codice
'''<nowiki><noinclude>{{</nowiki>catCat|''Nome categoria''}}<nowiki></noinclude></nowiki>'''
* ''includeonly'' funziona esattamente al contrario: il codice compreso tra '''<{{tt>|<nowiki><includeonly></nowiki></tt>}}''' e '''<{{tt>|<nowiki></includeonly></nowiki></tt>}}''' compare in tutte le pagine che richiamano il template ma non nella <u>pagina</u> del t.template stesso. Questo tag si utilizza per quei template che aggiungono delle categorie agli articoli in cui vengono richiamati (es: {{Template|Scadenza}}), per evitare che anche i t.template stessi vengano inclusi in quelle categorie.
 
=== Parametri ===
<nowiki>{{pappappero|</nowiki>'''''valore 1''|a=''valore a''|''valore 2'''''}}
In questo esempio il template viene evocato con tre parametri, di cui uno nominale ("a"). Nel codice del t.template, questi parametri verranno richiamati con i nomi <{{tt>|<nowiki>{{{1|}}}</nowiki></tt>}}, <{{tt>|<nowiki>{{{a|}}}</nowiki></tt>}} e <{{tt>|<nowiki>{{{2|}}}</nowiki></tt>}}.
 
Esempio: supponiamo che ''Template:Pappappero'' contenga il codice
<nowiki>::<big>''Meglio [[{{{1|}}}|{{{a|}}}]] oggi, che {{{2|}}} {{{3|domani}}}.</big>''
<noinclude>{{catCat|template citazione}}</noinclude></nowiki>
Una chiamata
<nowiki>{{pappappero|a=un ''uovo''|uomo|una '''[[Paris Hilton|gallina]]'''}}</nowiki>
produrrà
::<big>''Meglio [[uomo|un ''uovo'']] oggi, che una '''[[Paris Hilton|gallina]]''' domani.</big>''
Come puoi notare
# i parametri sono normale testo wiki con normale formattazione wiki (come il 2).
# può essere specificato un valore predefinito che compaia nel caso che il parametro non venga chiamato (es: il valore predefinito di <{{tt>|<nowiki>{{{3|}}}</nowiki></tt>}} è 'domani').
# nella chiamata del template i parametri nominali possono essere inseriti in qualsiasi ordine, mentre quelli numerici vanno inseriti in ordine numerico<ref>Però anche i parametri numerici possono essere chiamati in un ordine casuale con la sintassi ''1=..., 2=... ecc''</ref>.
 
Se nel template scrivi {{tt|<nowiki>{{{</nowiki>''parametro''}}}}}, il parametro è da inserire obbligatoriamente, altrimenti si vedrà la scritta {{tt|<nowiki>{{{parametro}}}</nowiki>}} all'interno del template. Se invece scrivi {{tt|<nowiki>{{{</nowiki>''parametro''{{!}}}}}}}, il parametro è opzionale, quindi compare solo se viene specificato. Infine, come già detto, se scrivi {{tt|<nowiki>{{{</nowiki>''parametro''{{!}}''valore di default''}}}}} se non viene specificato nulla viene usato il valore di default. '''Pensa bene a quando usare uno dei tre casi!'''
 
=== Variabili e funzioni parser ===
{|class="wikitable"
!style="width: 30%;"|Funzione!!Spiegazione
!|Spiegazione
|-
!|<nowiki>{{PAGENAME}}</nowiki>
||Il titolo della pagina: {{PAGENAME}}.
|-
!|<nowiki>{{FULLPAGENAME}}</nowiki>
||Il nome completo della pagina: {{FULLPAGENAME}}.
|-
!|<nowiki>{{TALKPAGENAME}}</nowiki>
||La discussione della pagina: {{TALKPAGENAME}}.
|-
||'''<nowiki>{{fullurl:</nowiki> ''Pagina'' &#124;action=edit}}'''||Un link alla modifica della pagina 'Pagina' (che può anche essere <nowiki>{{FULLPAGENAME}} o {{TALKPAGENAME}}</nowiki>)
||Un link alla modifica della pagina 'Pagina' (che può anche essere <nowiki>{{FULLPAGENAME}} o {{TALKPAGENAME}}</nowiki>)
|-
||'''<nowiki>{{lc:</nowiki> '''''Testo a Caso''''' }}'''<br />
'''<nowiki>{{uc:</nowiki> '''''Testo a Caso''''' }}'''<br />
'''<nowiki>{{lcfirst:</nowiki> '''''Testo a Caso''''' }}'''<br />
'''<nowiki>{{ucfirst:</nowiki> '''''testo a Caso''''' }}'''
||testo a caso (tutto il testo diventa in minuscolo)<br />
TESTO A CASO (tutto il testo diventa in maiuscolo)<br />
testo a Caso (la prima lettera diventa minuscola)<br />
Testo a Caso (la prima lettera diventa maiuscola)
|-
||'''<nowiki>{{#if:</nowiki>''' ''<nowiki>{{{1|}}} |</nowiki> ''&#124;&nbsp;''A''&nbsp;&#124;&nbsp; <nowiki>|</nowiki>''B'''''}}'''
||Se il parametro 1 ha un valore non nullo compare il testo 'A', altrimenti il testo 'B'.
|-
||'''<nowiki>{{#ifeq:</nowiki>''' ''<nowiki>{{NAMESPACE}} </nowiki>'' &#124;&nbsp;&#124;&nbsp;<nowiki>||</nowiki>''A''&nbsp;&#124;<nowiki>|</nowiki>''<nowiki> {{</nowiki>B}}'' '''}}'''
||Se il namespace della pagina è nullo (cioè è un articolo) compare il testo 'A', altrimenti viene chiamato il template 'B'.
|-
||'''<nowiki>{{#switch: </nowiki>'''''<nowiki>{{ucfirstlc: {{{nazione|}}} }}</nowiki>''<br />
&#124;&nbsp;<nowiki>|</nowiki>''Italiaitalia=Italiano''<br />
&#124;&nbsp;<nowiki>|</nowiki>''Germaniagermania=''<br />
&#124;&nbsp;<nowiki>|</nowiki>''Austriaaustria=Tedesco''<br />
&#124;&nbsp;<nowiki>|</nowiki>'''#default=''' ''Altre lingue'' '''}}'''
||Restituisce un valore a seconda del parametro 'nazione' ("Italiano" per "Italia", "Tedesco" per "Germania" e "Austria", "Altre lingue" per altri valori). Notare che il parametro viene passato attraverso <nowiki>{{ucfirstlc}}</nowiki>, in modo da poter ricevere qualsiasi combinazione di maiuscole e minuscole.
|}
 
Line 129 ⟶ 134:
 
== Riquadri ==
<div style="width: 70%; margin-left: auto; margin-right: auto; border: 3px dashed black; font-size: 120%; padding: 2px; text-align: center;">'''NB.''' Esiste già un comodo e completo template per creare dei riquadri: si chiama appunto {{Template|Riquadro}}. Utilizza il codice grezzo solo se non puoi ottenere un risultato equivalente con quel template.</div>
Se hai intenzione di creare molti template, ti consiglio di aggiungere il pulsante "box" [[Immagine:Button box.png]] al tuo editor in modo da generare rapidamente un codice base di partenza. Vedi '''[[Aiuto:Preferenze]]''' per sapere come fare.
 
Se hai intenzione di creare molti template, ti consiglio di aggiungere il pulsante "box" [[ImmagineFile:Button box.png]] al tuo editor in modo da generare rapidamente un codice base di partenza. Vedi '''[[Aiuto:Preferenze]]''' per sapere come fare.
 
=== Generale ===
Solitamente i riquadri (detti anche box) vengono generati con il markup delle '''tabelle''', per cui ti invito fortemente a leggere anche la '''[[Aiuto:Formattazione avanzata#Tabelle|guida delle tabelle]]'''.<br />
Il codice generico per una tabella è
<nowiki>{|</nowiki>''parametri''
Line 145 ⟶ 152:
|}
 
{{Dimensione|150%|Ricorda che le tabelle servono per tabulare dati!|div}}
Per strutturare dei template, è preferibile usare il template {{Template|Riquadro}} o il sistema spiegato qui sotto.
 
 
Un'altra sintassi per creare dei riquadri si basa sul tag <{{tt>|<nowiki><div></nowiki></tt>}}. Il codice base, in questo caso, sarà
<nowiki><div</nowiki> ''parametri''>
''contenuto''
<nowiki></div></nowiki>
"div" è consigliato per fare i riquadri a scatole cinesi (l'uno dentro l'altro), in quanto le tabelle possono dare problemi di visualizzazione.
 
I parametri delle tabelle e di "div" sono pressappoco gli stessi, e a loro volta sono praticamente identici a quelli dei fogli di stile. Per cui, se te li vuoi smaronare tutti leggiti una guida ai cssCSS come [http://css.html.it/guide/leggi/2/guida-css-di-base/ questa], oppure dai un'occhiata ai codici dei template già esistenti. Qui troverai solo l'essenziale.
 
La sintassi di tutti i parametri è <code>'''parametro = "valore"'''</code>. È da notare che <u>nessun parametro è obbligatorio</u>.
 
=== <{{tt>align</tt>|style}} ===
Se si utilizza una tabella, gestisce la '''posizione del riquadro sull'asse orizzontale'''; se si utilizza "div", imposta l''''allineamento del testo'''. Sintassi:
::<code>align="''left/center/right''"</code>
 
=== <tt>width</tt> ===
Dà la '''larghezza del riquadro'''. Può essere una percentuale riferita alla larghezza della pagina oppure una dimensione assoluta, in pixel (es. <code>"120px"</code>). Se non viene specificata, viene generata in automatico in base all'ampiezza del testo.<br />
Questo parametro non funziona con "div": in questo caso si deve usare [[{{FULLPAGENAME}}#width_2|<code>style="width: ;"</code>]].
 
=== <tt>style</tt> ===
Ecco il segreto di tutta la magia: ''style'' raggruppa un numero abominevole di attributi che definiscono l'aspetto del riquadro fin nei minimi dettagli. La sintassi di ''style'' è:
'''style="'''attributo1''':'''valore''';''' attributo2''':'''valore''';''' ....'''"'''
 
==== backgroundAllineamento orizzontale ====
Per gestire la posizione '''a destra o a sinistra''' si utilizza l'attributo <code>'''''float:''' left/right''</code><br />
Determina il '''colore di sfondo'''. In questo attributo, come in tutti quelli relativi ai colori, possono essere utilizzati sia i nomi standard (es: <code>background: red;</code>) sia i codici RGB (es: <code>background: #d0d0f0;</code>). Per saperne di più consulta la [[Aiuto:Colori|guida apposita]].
Invece per posizionare il riquadro '''al centro''' useremo la sintassi
margin: 0.5em auto;
(vedi anche <code>[[{{FULLPAGENAME}}#margin|margin]]</code>)
Con "div" non funziona se non si specifica una larghezza con <code>[[{{FULLPAGENAME}}#width|width]]</code>.
 
==== ''background-color'' ====
Determina il '''colore di sfondo'''. In questo attributo, come in tutti quelli relativi ai colori, possono essere utilizzati sia i nomi standard (es: <code>background-color: red;</code>) sia i codici RGB (es: <code>background-color: #d0d0f0;</code>). Per saperne di più consulta la [[Aiuto:Colori|guida apposita]].
 
==== ''color'' ====
Definisce il '''colore del testo'''. Questo parametro però <u>non influenza i collegamenti</u>, a meno che non si utilizzi la class ''link-inherit-color'', in questo modo:
<nowiki><div</nowiki> class="NavContentlink-inherit-color" style="color: ...">
In alternativa, per modificare il colore di un singolo collegamento, usa il template {{Template|Colore}}.
 
==== ''font-size'' ====
Modifica la dimensione del testo. Può avere valori in pixel, empt o(sconsigliato), em, in percentuale, valori relativi "larger" e "smaller" o valori assoluti come "small" o "x-large".
 
==== ''border'' ====
Gestisce i '''bordi'''. ''border'' ha 3 proprietà: spessore, stile e colore. Lo <u>spessore</u> può essere espresso in pixel o in .em, oppure con una parola- chiave (''thin'', ''medium'', ''thick''); lo <u>stile</u> può essere uno tra:
{|style="width: auto; margin: 0.5em auto; border-spacing: 6px;"
{|align="center" cellspacing="6"
|style="border: solid;"|solid
|style="border: dotted;"|dotted
|style="border: dashed;"|dashed
|style="border: double;"|double
|style="border: ridge;"|ridge
|style="border: groove;"|groove
|style="border: inset;"|inset
|style="border: outset;"|outset
|none
|}
Esempi:
<nowiki>style="... border: 2px solid #0000dd0000DD; ..."
style=" ... border: 0.25em outset blue; ..."
style=" ... border: thin dashed maroon; ..."</nowiki>
 
==== ''text-align'' ====
Imposta l'l’'''allineamento orizzontale del testocontenuto all'interno del riquadro''' <u>sia nelle tabelle che in "div"</u>: da non confondere con <code>[[{{FULLPAGENAME}}#alignfloat|alignfloat]]</code> che invece sposta l'intero riquadro. I valori sono sempre ''left/center/right''.
 
==== ''width'' ====
Dà la '''larghezza del riquadro'''. Può essere una percentuale riferita alla larghezza della pagina oppure una dimensione assoluta, in pixel (es. <code>"120px"</code>). Se non viene specificata, viene generata in automatico in base all'ampiezza del testo.<br />:
Da non confondere con il <u>parametro</u> <code>[[{{FULLPAGENAME}}#width|width]]</code>. Se si usa "div", questo attributo determina la larghezza del riquadro; in una tabella può essere utilizzato per modificare la larghezza di una singola cella.
* la tabella avrà una larghezza automatica in base al contenuto
* il ''div'' avrà una larghezza del 100%. Per far sì che la dimensione sia calcolata in automatico bisogna dare a ''width'' valore ''auto''.
 
==== ''height'' ====
Il corrispondente verticale di ''width''.
 
==== ''margin'' ====
Imposta la '''distanza tra il bordo del riquadro e gli elementi all'esterno''' nella pagina. Generalmente è espresso in pixel (es: <code>margin: 4px;</code>) o in em (es: <code>margin: 0.5em;</code>). Puoi anche specificare separatamente i margini per ciascun lato, scrivendo <code>margin-top: ... ; margin-bottom: ... ; margin-left: ... ; margin-right: ... ;</code>
<code>margin: 0.5em;</code>). Puoi anche specificare separatamente i margini per ciascun lato, scrivendo <code>margin-top: ... ; margin-bottom: ... ; margin-left: ... ; margin-right: ... ;</code>
 
==== ''padding'' ====
Imposta la '''distanza tra il bordo del riquadro e il contenuto all'interno'''. Funziona esattamente come ''margin''.
 
==== ''clear'' ====
Se noti che il template ha la tendenza a sovrapporsi con delle immagini o con altri template, puoi inserire ''clear: both;'', in modo da evitare che oggetti fluttuanti (ovvero che hanno la proprietà <code>[[{{FULLPAGENAME}}#Allineamento_orizzontale|float]]</code> impostata) si sovrappongano. Altri valori possono essere <code>left</code> e <code>right</code>, che impediscono rispettivamente la presenza di oggetti fluttuanti a sinistra e a destra.<br />
{{Dimensione|130%|'''Evita'''}} il più possibile l'uso di <nowiki><br style="clear: both;" /></nowiki>, o peggio ancora <nowiki><br clear="all" /></nowiki>, poiché lo scopo del tag <nowiki><br /></nowiki> è mandare a capo una riga, non separare due riquadri.
 
=== Classi ===
Le classi contengono delle impostazioni preformate, e talvolta delle funzionalità avanzate scritte in javascript. Per attivarle si utilizza il parametro <{{tt>|1=class="''nomeclasse1 nomeclasse2''"</tt>. La classe standard per i template è "expansion", che però al momento non è ancora attiva}}.<ref>Le classi disponibili su Nonciclopedia si trovano in [[Mediawiki:Common.css]] e in [[Mediawiki:Monobook.css]].</ref>
 
==== radius ====
La classe "radius" permette di generare delle caselle dai margini arrotondati, come questa:
<div class="expansion radius" alignstyle="text-align: center"; style="border: 3px solid green;">Codice: <code><nowiki><div class="expansion radius" alignstyle="text-align: center"; style="border: 3px solid green;"></nowiki></code></div>
 
== Template di navigazione e template a scomparsa==
I template di navigazione sono essenzialmente dei riquadri che contengono dei collegamenti alle stesse pagine in cui sono inclusi (fungono da indice). Molti di essi sono "a scomparsa", cioè visualizzano il loro contenuto solo se vengono attivati da un click.
 
Ci sono due modi per creare dei t.template a scomparsa:
# utilizzare il template {{Template|Cassetto}}
# aggiungere la class "collapsible" alla tabella:
# scrivere il codice grezzo:
<nowiki>{|<div /nowiki>'''class="NavFramecollapsible"''' style=".....">
'''{{colore|#f00|!}} Titolo della tabella''' (unica cosa visibile quando è collassata)
<div class="NavHead"</nowiki> style="...">'''Titolo'''</div>
'''{{colore|#f00|&#124;-}}'''
<nowiki><div class="NavContent" style="...">
|.....
</nowiki>'''Contenuto'''
|}
</div></div>
 
 
== Template galleggianti ==
Sono template che si posizionano sullo schermo in modo indipendente rispetto al resto della pagina, e non scorrono con essa ("galleggiano"). Vanno creati '''con molta cautela''' e senza esagerare, o possono risultare estremamente fastidiosi. Il codice grezzo per crearli è:
<nowiki><div style="position: fixed; right: ...px; bottom: ...px; overflow: visible;">
[[ImmagineFile:...]]
<div style="position:absolute; right: ...px; bottom:...px; overflow: hidden">Testo
</div>
</div>
Line 249 ⟶ 264:
 
== Note ==
 
{{legginote}}
{{Note}}
<references/>
 
 
{{tutorial}}
[[Categoria:Aiuto]]