Oramai abbiamo un sito molto strutturato dall’area riservata e numerosi articoli pubblicati. È il momento di cimentarsi nella creazione del primo modello.
Molti webmaster cominciano questa fase lavorando a partire da un modello di layout standard, che modificano pian piano.
Per quel che ci riguarda, non solo per le necessità di questo tutorial, ma anche per abitudine, costruiremo i modelli a partire da un documento completamente vuoto. Passo dopo passo, aggiungeremo i vari cicli poi, infine, l’interfaccia grafica (partendo da un codice HTML estremamente semplice, solo all’ultimo aggiungeremo una grafica con tabelle). Questo metodo presenta numerosi vantaggi:
- permette di comprendere bene lo sforzo intellettuale necessario a sviluppare una pagina: quale ciclo dipende da quale ciclo, ecc.;
- poiché inizialmente non vi sono elementi grafici è più semplice comprendere la struttura gerarchica delle informazioni sulla pagina; inoltre, l’interfaccia grafica si sviluppa da questa gerarchia in maniera più coerente;
- il codice HTML generato è spesso molto più chiaro: le ridondanze sono meno numerose (errore frequente di copia-incolla del codice HTML).
Nei paragrafi che seguono utilizzeremo quindi un codice HTML molto semplice (soprattutto senza nessuna tabella). La creazione di una interfaccia grafica più elaborata, al termine del processo, è lasciata all’ingegno del lettore.
Costruiremo il codice passo dopo passo, volontariamente. Al fine di evitare pagine interminabili, quando affineremo un ciclo esistente non riprodurremo la pagina per intero, ma solo la parte che ci interessa. Per orientarsi faremo riferimento al nome dei cicli già presenti.
La pagina di base
Cominciamo con un file "article.html" vergine.
Estremamente semplice, questa è la struttura essenziale di un articolo, senza nessun elemento di navigazione:
<html>
<title>[#NOM_SITE_SPIP]
<BOUCLE_titolo(ARTICLES){id_article}>#TITRE</BOUCLE_titolo></title>
</head>
<body>
<blockquote>
<BOUCLE_principale(ARTICLES){id_article}>
[<h3>(#SURTITRE)</h3]
<h2>#TITRE</h2>
[<h3>(#SOUSTITRE)</h3>]
[(#DATE|affdate)]
[(#LOGO_ARTICLE_RUBRIQUE|right)]
[<b>(#CHAPO|justifier)</b>]
[(#TEXTE|justifier)]
[<p align="right" align='justify'>(#LESAUTEURS)]
[<hr>(#PS)]
[<hr>(#NOTES)]
</BOUCLE_principale>
</blockquote>
</body>
</html>
Facile:
- il ciclo BOUCLE_titolo permette di visualizzare il titolo dell’articolo nell’intestazione della pagina;
- il ciclo BOUCLE_principale contiene l’intera pagina; permette di posizionare tutti gli altri cicli all’interno dell’articolo selezionato.
Recuperare le informazioni sul gioco
Il modello precedente sarebbe una buona base per una webzine standard (tutte le informazioni necessarie sono nell’articolo) ma, nel nostro caso, una informazione vitale non è nell’articolo: di quale gioco si tratta?
In effetti, abbiamo deciso che il titolo del gioco non era nell’articolo, ma nella rubrica che contiene quell’articolo. Ci potremmo accontentare del ciclo HIERARCHIE, ma preferiamo prendere un’abitudine che ritornerà sistematicamente nei nostri esempi: è necessario passare dall’articolo alla sua rubrica per recuperare il nome del gioco. (È lo stesso principio per recuperare il logo; tranne che per la differenza che il segnaposto #LOGO_RUBRIQUE_ARTICLE effettua questa operazione automaticamente.)
Ciò sarà quindi una costante in questo sito: i cicli ARTICLES contengono spesso un ciclo RUBRIQUES che permetta di "salire di un livello", cioè di recuperare il titolo del gioco. Ciò avverrà per le pagine delle rubriche come pure per la pagina di sommario
Riprendiamo l’inizio del codice, appena prima del ciclo BOUCLE_principale:
<BOUCLE_principale(ARTICLES){id_article}>
<BOUCLE_rubrica(RUBRIQUES){id_rubrique}>
<h1>#TITRE</h1>
</BOUCLE_rubrica>
...
Notare che il #TITRE della rubrica viene visualizzato con la grandezza massima (h1); logico, poiché è il titolo del gioco. Il titolo della rubrica, che solitamente è un elemento di navigazione nel sito, qui è l’informazione principale dell’articolo.
Al fine di ottenere un abbozzo di navigazione mostriamo la struttura gerarchica. Facciamo iniziare questa linea gerarchica dalla rubrica che contiene la sotto-rubrica attuale, poiché quel che ci interessa è l’elenco delle categorie dei giochi (e noi sappiamo già qual è il nome dell’ultima sotto-rubrica - il titolo del gioco). Ci mettiamo quindi all’interno del ciclo BOUCLE_rubrica, aggiungiamo un ciclo BOUCLE_rub_parent (che permette ancora di "salire di un livello" nella gerarchia), e da lì noi chiediamo la gerarchia, ovvero il percorso:
<BOUCLE_rubrica(RUBRIQUES){id_rubrique}>
<BOUCLE_rub_parent(RUBRIQUES){id_enfant}>
<BOUCLE_gerarchia(HIERARCHIE){id_rubrique}{": "}>
<a href="#URL_RUBRIQUE">#TITRE</a>
</BOUCLE_gerarchia>
</BOUCLE_rub_parent>
<h1>#TITRE</h1>
</BOUCLE_rubrica>
Lasciamo questa pagina "article.html" così com’è. Nulla di complicato per il momento. Manca la gestione delle parole chiave e i link tra gli articoli della stessa rubrica (cioè, di quelli che parlano del medesimo gioco).
Unica accortezza: è necessario risalire alla rubrica che contiene l’articolo per ottenere il titolo del gioco, ed è necessario risalire di un altro "livello" (la rubrica che contiene la rubrica che contiene il gioco) prima di dare inizio alla linea gerarchica.