Abbiamo già scritto una decina di articoli in questo tutorial e non abbiamo ancora creato l’home page!
Tenetelo bene a mente: non lo faremo adesso. L’home page del sito è, in effetti, la parte più difficile da realizzare graficamente, e l’interfaccia deve presentare le informazioni più importanti in maniera omogenea (né troppe, né troppo poche...). Prima di creare l’home page è necessario, quindi, sapere preventivamente tutti i tipi di informazioni presenti sul sito, e le diverse strutture di navigazione. Perciò l’home page si lascia alla fine...
Cominciamo sfruttando realmente le informazioni del nostro sito per creare delle "home page" alternative. I siti di videogiochi abbondano di queste pagine di riepilogo che presentano i giochi secondo diversi criteri: il calendario delle uscite, i voti migliori...
La tabella dei voti migliori
Creiamo una coppia di file per visualizzare l’elenco dei giochi migliori.
La pagina di chiamata sarà "voti.php3", e il suo contenuto è il seguente:
<?
$fond = "voti";
$delais = 24 * 3600;
include ("inc-public.php3");
?>
Ora possiamo cominciare a creare il modello, "voti.html":
<html>
<title>[#NOM_SITE_SPIP] I giochi migliori</title>
</head>
<body>
<blockquote>
<h2>I giochi migliori</h2>
<BOUCLE_voti(MOTS){type=Voto}{par titre}{inverse}>
<h1>#TITRE/10</h1>
</BOUCLE_voti>
</blockquote>
</body>
</html>
Abbiamo inserito un primo ciclo BOUCLE_voti, che mostra tutte le parole chiave di tipo "Voto" (cioè, "01", "02", ..., "10") in ordine decrescente ("10" in alto).
Visualizziamo il titolo degli articoli corrispondenti a ciascun voto (cioè gli articoli associati alla parola chiave ottenuta dal ciclo BOUCLE_voti):
<BOUCLE_voti(MOTS){type=Voto}{par titre}{inverse}>
<B_articoli>
<h1>#TITRE/10</h1>
<BOUCLE_articoli(ARTICLES){id_mot}{par date}{inverse}>
<li>#TITRE
</BOUCLE_articoli>
</BOUCLE_voti>
Unico dettaglio: la parola (il voto) è già visualizzata nel testo condizionale prima del ciclo BOUCLE_articoli. In tal modo, sono visualizzati solo i voti realmente attribuiti ad articoli.
Visualizziamo qui il titolo dell’articolo. Non è questo che ci interessa. Noi vogliamo far apparire:
- il titolo del gioco, cioè il titolo della rubrica che contiene l’articolo;
- la o le piattaforme sulle quali girano i giochi;
- la o le date di uscita del gioco.
Nulla di tanto complicato, abbiamo già creato queste operazioni su altre pagine (per la data di uscita ricopiamo direttamente ciò che abbiamo scritto per "article.html"):
<BOUCLE_voti(MOTS){type=Voto}{par titre}{inverse}>
<B_articoli>
<h1>#TITRE/10</h1>
<ul>
<BOUCLE_articoli(ARTICLES){id_mot}{par date}{inverse}>
<BOUCLE_rubrica_gioco(RUBRIQUES){id_rubrique}>
<li><b><a href="#URL_ARTICLE">#TITRE</a></b>
</BOUCLE_rubrica_gioco>
<BOUCLE_piattaforme_gioco(MOTS){id_article}>
#LOGO_MOT
</BOUCLE_piattaforme_gioco>
<BOUCLE_piatt2(MOTS){id_article}{type=Piattaforme}>
<BOUCLE_uscita(ARTICLES){id_rubrique}{titre_mot=Data_uscita}>
<BOUCLE_verifica_parola(ARTICLES){id_article}{id_mot}>
<br> Data di uscita
<BOUCLE_piattaforma_uscita(MOTS){id_article}{type=Piattaforme}{", "}>#TITRE</BOUCLE_piattaforma_uscita> :
[<b>(#DATE|affdate)</b>]
</BOUCLE_verifica_parola>
</BOUCLE_uscita>
</BOUCLE_piatt2>
</BOUCLE_articoli>
</ul>
</B_articoli>
</BOUCLE_voti>
Solo un piccolo dettagio: il segnaposto #URL_ARTICLE viene utilizzato in un ciclo di tipo RUBRIQUES, in modo da creare il link verso la pagina del test invece che su quella generica della rubrica del gioco. Questo uso di un elemento proprio agli ARTICLES è qui possibile, poiché l’#URL_ARTICLE viene creato a partire dalla variabile "id_article". Questo id_article è fornito dal ciclo BOUCLE_articoli, poi il ciclo BOUCLE_rubrica_gioco non lo modifica (poiché è un ciclo di RUBRIQUES). È lo stesso principio che permette di utilizzare "id_mot" nel ciclo BOUCLE_verifica_parola.
Ultimo problema da risolvere: questa pagina funziona bene al lancio del sito e durante le prove, con una decina di articoli ma, dopo un anno, quando il nostro sito avrà migliaia di articoli (almeno!), l’elenco sarà troppo lungo. In ogni caso, visualizzare indifferentemente giochi usciti da una settimana e giochi usciti da vari mesi non è molto utile: un gioco che un anno fa è stato votato "9/10" avrebbe sicuramente un voto più basso oggi. Introduciamo quindi un limite di tempo modificando il ciclo BOUCLE_articoli:
<BOUCLE_articoli(ARTICLES){id_mot}{age<90}{par date}{inverse}>
{age<90}, ovvero gli articoli pubblicati da meno di 3 mesi.
Il calendario delle uscite
Immancabile sulle pagine dei videogiochi è la pagina che indica le ultime uscite e quelle prossime.
La pagina di chiamata sarà "uscite.php3":
<?
$fond = "uscite";
$delais = 24 * 3600;
include ("inc-public.php3");
?>
Cominciamo il file "uscite.html" con:
<html>
<title>[#NOM_SITE_SPIP] Le uscite</title>
</head>
<body>
<blockquote>
<h2>Le prossime uscite</h2>
<BOUCLE_uscite(ARTICLES){titre_mot=Data_uscita}{par date}{age < 0}>
<p> #TITRE - [(#DATE|affdate)]
</BOUCLE_uscite>
</blockquote>
</body>
</html>
Il segnaposto #TITRE è quello dell’articolo che contiene la data di uscita; è un titolo fittizio utilizzato per comodità nell’area riservata. È necessario sostituirlo con il titolo del gioco, ovvero con il titolo della rubrica che contiene questo articolo. Sempre la stessa procedura. Vogliamo, inoltre, visualizzare il logo delle piattaforme a cui fa riferimento la data di uscita. Anche questo non è molto complicato.
<BOUCLE_uscite(ARTICLES){titre_mot=Data_uscita}{par date}{age < 0}>
<p>
<BOUCLE_rubrica_gioco(RUBRIQUES){id_rubrique}>
<b><a href="#URL_RUBRIQUE">#TITRE</a></b>
</BOUCLE_rubrica_gioco>
<BOUCLE_piattaforme_gioco(MOTS){id_article}>
#LOGO_MOT
</BOUCLE_piattaforme_gioco>
- [(#DATE|affdate)]
</BOUCLE_uscite>
In questo codice c’è un errore di navigazione importante: c’è sistematicamente un link verso la rubrica del gioco. Ora, e soprattutto per i giochi che non sono ancora usciti, è molto possibile che non vi sia alcuna informazione pubblicata su questo gioco, ad eccezione della sua data di uscita. Si rischia perciò di puntare verso una rubrica che non contiene informazioni.
Per tale motivo facciamo un’altra modifica, al fine di visualizzare non più un link verso la rubrica stessa ma verso ogni tipo di articolo.
Per ottenere una presentazione più condensata, cominciamo con il creare un’interfaccia a forma di righe e colonne (e, durante il passaggio, cancelliamo il link errato):
<B_uscite>
<table cellpadding="4">
<BOUCLE_uscite(ARTICLES){titre_mot=Data_uscita}{par date}{age < 0}>
<tr>
<BOUCLE_rubrica_gioco(RUBRIQUES){id_rubrique}>
<td><b>#TITRE</b></td>
</BOUCLE_rubrica_gioco>
<td align="center">
<BOUCLE_piattaforme_gioco(MOTS){id_article}>
#LOGO_MOT
</BOUCLE_piattaforme_gioco>
<//B_piattaforme_gioco>
</td>
<td>[(#DATE|affdate)]</td>
</tr>
</BOUCLE_uscite>
</table>
</B_uscite>
Questo codice non presenta grosse difficoltà. Spieghiamo rapidamente il posizionamento dei tag HTML della tabella.
- <table> e </table> vengono posti nel testo opzionale del ciclo BOUCLE_uscite; in tal modo, se l’elenco dei giochi di prossima uscita è vuoto si evita di visualizzare un <table></table> poco elegante.
- I tag <tr> e </tr> sono all’interno del ciclo BOUCLE_uscite, e inglobano tutto ciò che contiene; qui vengono create le righe della tabella.
- Nel ciclo BOUCLE_rubrica_gioco, mettiamo i tag <td> e </td> direttamente dentro il ciclo, intorno al segnaposto #TITRE. Sappiamo, infatti, che l’articolo è per forza dentro a una rubrica, quindi ci deve essere per forza una (e una sola) risposta al ciclo BOUCLE_rubrica_gioco (inutile mettere questi codici dentro il testo opzionale; e poiché ci sarà una sola risposta ci possiamo mettere dentro il ciclo).
- Il discorso è diverso per il ciclo BOUCLE_piattaforme_gioco: i tag <td align="center"> e </td> si trovano all’esterno del ciclo, e non sono nemmeno messi come testo opzionale. Infatti: (1) sono esterni al ciclo, poiché potrebbero esserci più piattaforme coinvolte da questa data di uscita (cioè, più parole chiave di piattaforme associate all’articolo); se avessimo messo questi tag all’interno del ciclo, come fatto in precedenza, la tabella perderebbe l’allineamento poiché si creerebbero delle "celle" supplementari ad ogni nuovo logo della parola chiave; (2) essi non vengono messi come testo opzionale perché non sono tag opzionali; se ci siamo dimenticati di indicare una piattaforma per la data di uscita, bisogna comunque creare questa "cella" di tabella, anche se vuota, per mantenere l’allineamento. Infine, abbiamo messo un nel testo opzionale alternativo: se non ci sono parole chiave di piattaforme associate alla data di uscita viene visualizzato questo spazio unificatore affinché la "cella" non sia vuota (in molti browser una cella vuota <td></td> viene visualizzata diversamente da una cella <td> </td>.
Adesso visualizziamo per ogni gioco l’elenco dei Test che riguardano questo gioco (lo inseriamo appena prima del tag </tr> finale della riga):
<td>
<B_test_gioco>
<b>Test:</b>
<BOUCLE_test_gioco(ARTICLES){id_rubrique}{titre_mot=test}>
<br><a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_test_gioco>
<//B_test_gioco>
</td>
Questo ciclo BOUCLE_test_gioco sfrutta dei metodi già spiegati.
Tuttavia, ciò non fa ancora al caso nostro: visualizziamo qui tutti i test, per tutte le piattaforme, mentre la nostra data di uscita non riguarda obbligatoriamente tutte le versioni del gioco (si potrebbe mostrare la data di uscita della versione Dreamcast, mentre abbiamo già pubblicato test per le versioni Playstation, Dreamcast, Window...).
Pertanto, vogliamo mostrare solo i test che riguardano le versioni che usciranno in quella data. Noi abbiamo già realizzato una procedura simile nella pagina "article.html" per visualizzare solo le date di uscita sulle stesse piattaforme dell’articolo mostrato (BOUCLE_piatt2). Con ciò abbiamo:
<td>
<BOUCLE_piatt2(MOTS){id_article}{type=Piattaforme}>
<BOUCLE_test_gioco(ARTICLES){id_rubrique}{titre_mot=test}>
<BOUCLE_verifica_parola(ARTICLES){id_article}{id_mot}>
<li><a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_verifica_parola>
</BOUCLE_test_gioco>
</BOUCLE_piatt2>
</td>
Il ciclo BOUCLE_piatt2 ottiene l’elenco delle piattaforme della data di uscita. Il ciclo BOUCLE_test_gioco recupera tutti i test del gioco della rubrica (indipendentemente dalla piattaforma). Il ciclo BOUCLE_verifica_parola verifica per ogni test ottenuto con BOUCLE_test_gioco che esso sia associato alla piattaforma trovata con BOUCLE_piatt2.
Per il momento abbiamo soppresso la visualizzazione di "Test:" nel testo condizionale per motivi di leggibilità. Diamo adesso il codice, che ricalca esattamente lo stesso principio, che permette di visualizzare questa indicazione (e pure il carattere ):
<td>
<B_piatt2>
<b>Test:</b>
<BOUCLE_piatt2(MOTS){id_article}{type=Piattaforme}><BOUCLE_test_gioco(ARTICLES){id_rubrique}{titre_mot=test}><BOUCLE_verifica_parola(ARTICLES){id_article}{id_mot}>
<li><a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_verifica_parola></BOUCLE_test_gioco></BOUCLE_piatt2>
<//B_piatt2>
</td>
Nota bene: i cicli BOUCLE_piatt2, BOUCLE_test_gioco e BOUCLE_verifica_parola sono "incollati", cioè non sono più separati da ritorni a capo né da spazi. In effetti, noi facciamo il test del "contenuto" del ciclo BOUCLE_piatt2 per sapere se visualizziamo l’indicazione "Test:" oppure il carattere (i testi condizionali). Se avessimo conservato i ritorni a capo o spazi tra i cicli, indipendentemente dal risultato di BOUCLE_test_gioco e di BOUCLE_verifica_parola, il ciclo BOUCLE_piatt2 sarebbe stato considerato avere un contenuto a causa della visualizzazionen di questi ritorni a capo.
Per visualizzare un elenco di anteprime, copiamo semplicemente questo codice modifcando il nome dei cicli e sostituendo titre_mot=test con titre_mot=anteprima:
<td>
<B_piatt3>
<b>Anteprime:</b>
<BOUCLE_piatt3(MOTS){id_article}{type=Piattaforme}><BOUCLE_anteprima_gioco(ARTICLES){id_rubrique}{titre_mot=anteprima}><BOUCLE_verifica_parola3(ARTICLES){id_article}{id_mot}>
<li><a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_verifica_parola3></BOUCLE_anteprima_gioco></BOUCLE_piatt3>
<//B_piatt3>
</td>
Aggiungiamo un ciclo per le "news" che riguardano il gioco. Qui, non ci preoccupiamo delle piattaforme, poiché tutte le news vengono mostrate in un’unica pagina. Quindi non visualizzeremo il titolo (#TITRE), ma direttamente la dicitura "Le news"; il link punta verso la pagina specifica che abbiamo creato per questo gioco. Da notare, infine, il vincolo {0,1} che permette di recuperare solo una "news" per creare un unico link.
<td>
<BOUCLE_news_gioco(ARTICLES){id_rubrique}{titre_mot=news}{0,1}>
<br><a href="news_gioco.php3?id_rubrique=#ID_RUBRIQUE">Le news</a>
</BOUCLE_news_gioco>
<//B_news_gioco>
</td>
Per essere esaurienti, si dovrebbe ripetere l’operazione con le soluzioni e i trucchi. Ma poiché si tratta di visualizzare un elenco di uscite, consideriamo che queste informazioni non sono pertinenti in questo caso. Sebbene, dal punto di vista tecnico, li si potrebbe visualizzare facilmente, facciamo una scelta editoriale: l’informazione non è interessante in questo contesto e sovraccaricherebbe l’interfaccia, quindi preferiamo non indicarla. (Ma se l’idea vi solletica, potete allenarvi integrandola da soli.)