Alguns sumaris alternatius

Portem ja una bona colla d’articles en aquest tutorial i no hem fet encara el sumari!

Atenció: encara no ens hi posarem. El sumari general del lloc Web és, de fet, la part més difícil de fer gràficament, i la interfície ha de mostrar les informacions més importants de forma coherent (ni poca ni massa...). Abans de crear el sumari, és necessari conèixer tots els tipus d’informació que hi haurà al lloc Web, i les diferents estructures de navegació. Per tant, el sumari general és la tasca final...

Apa, comencem per treballar les informacions del nostre lloc Web per crear uns «sumaris» alternatius. Efectivament, els llocs de jocs de vídeo estan plens d’aquestes pàgines de recapitulació que presenten els jocs a partir de diferents criteris: el calendari de sortides, els que tenen millor puntuació...

La taula de les millors puntuacions

Creem un parell de fitxers per mostrar la llista dels millors jocs.

La pàgina que crida serà «notes.php3» i el seu contingut és:

<?php
$fond = "notes";
$delais = 24 * 3600;

include ("inc-public.php3");
?>

Ara ja podem començar l’esquelet, «notes.html»:

<html>
<title>[#NOM_SITE_SPIP] Els millors jocs</title>
</head>

<body>
<blockquote>

<h2>Els millors jocs</h2>

<BOUCLE_notes(MOTS){type=Note}{par titre}{inverse}>
<h1>#TITRE/10</h1>

</BOUCLE_notes>

</blockquote>
</body>
</html>

Hem instal·lat un primer BOUCLE_notes, que mostra totes les paraules clau del tipus «Note» (és a dir, «01», «02», ..., «10») per ordre invers («10» a dalt de tot de la llista).

Mostrem el títol dels articles corresponents a cada nota (és a dir, els articles associats a la paraula clau retornada pel BOUCLE_notes):

<BOUCLE_notes(MOTS){type=Note}{par titre}{inverse}>

	<B_articles>
	<h1>#TITRE/10</h1>

	<BOUCLE_articles(ARTICLES){id_mot}{par date}{inverse}>
		<li>#TITRE
	</BOUCLE_articles>

</BOUCLE_notes>

La única subtilesa: la paraula (la nota) es mostra a partir d’ara en el text condicional abans del BOUCLE_articles. D’aquesta manera, només es mostraran les notes que han estat realment atribuïdes a articles.

Publiquem aquí el títol de l’article. No és pas això el que ens interessa. Volem publicar:
-  el títol del joc, és a dir, el títol de la secció que conté l’article;
-  la (les) màquina(es) en les que corren aquests jocs;
-  la (les) data(es) de sortida del joc.

No és pas complicat. Aquestes operacions ja les hem fet en altres pàgines (per la data de sortida, tornem a copiar directament allò que ja hem desenvolupat a «article.html»):

<BOUCLE_notes(MOTS){type=Note}{par titre}{inverse}>

	<B_articles>
	<h1>#TITRE/10</h1>
	<ul>

	<BOUCLE_articles(ARTICLES){id_mot}{par date}{inverse}>
		<BOUCLE_rubrique_jeu(RUBRIQUES){id_rubrique}>
		<li><b><a href="#URL_ARTICLE">#TITRE</a></b>
		</BOUCLE_rubrique_jeu>
		<BOUCLE_machines_jeu(MOTS){id_article}>
		#LOGO_MOT
		</BOUCLE_machines_jeu>
		<BOUCLE_mac2(MOTS){id_article}{type=Machines}>
			<BOUCLE_sortie(ARTICLES){id_rubrique}{titre_mot=Date_sortie}>
			<BOUCLE_verifier_mot(ARTICLES){id_article}{id_mot}>
			<br> Data de sortida
				<BOUCLE_machine_sortie(MOTS){id_article}{type=Machines}{", "}>#TITRE</BOUCLE_machine_sortie> :
			[<b>(#DATE|affdate)</b>]
			</BOUCLE_verifier_mot>
			</BOUCLE_sortie>
		</BOUCLE_mac2>
		
	</BOUCLE_articles>
	</ul>
	</B_articles>

</BOUCLE_notes>

Només una petita subtilesa: l’etiqueta #URL_ARTICLE s’utilitza en un bucle del tipus RUBRIQUES, per tal de crear un enllaç cap a la pàgina de proves més que cap a la pàgina general de la secció del joc. Aquesta utilització d’un element propi dels ARTICLES és possible aquí, ja que l’#URL_ARTICLE es realitza a partir de la variable «id_article». Aquest id_article és proporcionat pel BOUCLE_articles, després el BOUCLE_rubrique_jeu no el modifica (ja que es tracta d’un bucle de RUBRIQUES). És el mateix principi que permet utilitzar «id_mot» en el BOUCLE_verifier_mot.

Últim problema a gestionar: aquesta pàgina funciona bé en el moment d’iniciar un lloc Web o durant les verificacions, però quan el vostre lloc tindrà un any i molts milers de jocs de proves (com a mínim!), la llista serà massa llarga. De tota manera, mostrar indiferentment els jocs sortits fa una setmana i els jocs que han sortit fa mesos no té massa interès: un joc que tenia una puntuació «9/10» fa un any, tindria una nota pitjor si se’l puntués actualment. Haurem d’introduir, per tant, una limitació de temps modificant el BOUCLE_articles:

	<BOUCLE_articles(ARTICLES){id_mot}{age<90}{par date}{inverse}>

{age<90}, és a dir els articles publicats els darrers 3 mesos.

El calendari de les sortides

La pàgina que indica les sortides recents i les properes sortides resulta Ineludible a les pàgines de jocs de vídeo.

La pàgina de crida serà «sortides.php3»:

<?
$fond = "sortides";
$delais = 24 * 3600;

include ("inc-public.php3");
?>

Comencem el fitxer «sorties.html» d’aquesta manera:

<html>
<title>[#NOM_SITE_SPIP] Les sortides</title>
</head>

<body>
<blockquote>

<h2>Les següents sorties</h2>

<BOUCLE_sorties(ARTICLES){titre_mot=Date_sortie}{par date}{age < 0}>
<p> #TITRE - [(#DATE|affdate)]
</BOUCLE_sorties>

</blockquote>
</body>
</html>

El #TITRE és el del article que conté la data de sortida; és un títol enganyós utilitzat per comoditat a l’espai privat. Hem de substituir-lo pel títol del joc, és a dir el títol de la secció que conté aquest article. Sempre el mateix procés. Volem, a més, mostrar el logotip de les màquines a les que es fa referència en aquesta sortida. Tampoc aquí serà complicat.

<BOUCLE_sorties(ARTICLES){titre_mot=Date_sortie}{par date}{age < 0}>
<p> 
	<BOUCLE_rubrique_jeu(RUBRIQUES){id_rubrique}>
		<b><a href="#URL_RUBRIQUE">#TITRE</a></b>
	</BOUCLE_rubrique_jeu>
	
	<BOUCLE_machines_jeu(MOTS){id_article}>
	#LOGO_MOT
	</BOUCLE_machines_jeu>

	 - [(#DATE|affdate)]
</BOUCLE_sorties>

Aquí hi ha un defecte de navegació important: hi ha sistemàticament un enllaç cap a la secció del joc. Ara bé, i sobretot pels jocs que no han sortit encara, és possible que no tinguem cap informació publicada referent a aquest joc, excepte la data de sortida. Llavors correm el risc d’apuntar cap a una secció que no mostri cap informació.

Per tant, modifiquem aquest codi per tal de mostrar no només un enllaç cap a la mateixa secció, sinó també cap a cada tipus d’articles.

Amb la finalitat d’obtenir una presentació una mica més abreujada, comencem per crear una interfície en forma de línies i columnes (i de passada, suprimim l’enllaç incorrecte):

<B_sorties>
<table cellpadding="4">
<BOUCLE_sorties(ARTICLES){titre_mot=Date_sortie}{par date}{age < 0}>
<tr>
	
	<BOUCLE_rubrique_jeu(RUBRIQUES){id_rubrique}>
		<td><b>#TITRE</b></td>
	</BOUCLE_rubrique_jeu>

	<td align="center">
	<BOUCLE_machines_jeu(MOTS){id_article}>
	#LOGO_MOT
	</BOUCLE_machines_jeu>
	&nbsp;
	<//B_machines_jeu>
	</td>

	 <td>[(#DATE|affdate)]</td>
</tr>
</BOUCLE_sorties>
</table>
</B_sorties>

Aquest codi no presenta grans dificultats. Expliquem ràpidament el posicionament de les etiquetes de la taula.

-  <table> i </table> es situen en text opcional del BOUCLE_sorties; d’aquesta manera, si la llista de jocs que han de venir està buida, s’evita mostrar un <table></table> poc elegant.

-  Els <tr> i </tr> es troben a l’interior del BOUCLE_sorties, i engloben la totalitat del seu contingut; es tracta aquí de crear les línies de la taula.

-  Al BOUCLE_rubrique_jeu, hi col·loquem els <td> i </td> directament en el bucle, a l’entorn del #TITRE. Trobant-se l’article obligatòriament en una secció, sabem que, en efecte, tindrà necessàriament una (i només una) resposta en BOUCLE_rubrique_jeu (inútil de situar aquests codis a dins del text opcional; i com que només tindrà una resposta, es pot situar a l’interior del bucle).

-  És diferent pel BOUCLE_machines_jeu: els <td align="center"> i </td> estan a l’exterior del bucle, i tampoc no estan situats en codi opcional. En efecte: (1) estan a l’exterior del bucle, ja que hi pot haver moltes màquines relacionades per aquesta data de sortida (és a dir, diverses paraules clau de màquines associades a l’article); si haguéssim situat aquestes etiquetes a l’interior del bucle, com anteriorment, la taula hauria perdut la seva alineació, ja que es crearien «caixes» suplementàries a cada nou logotip de paraula clau; (2) no estan col·locats en un text opcional, ja que no són etiquetes opcionals; si s’ha oblidat d’indicar una màquina per la data de sortida, haurem de crear de seguida aquesta «caixa» de la taula, certament buida, per mantenir l’alineament. Finalment, hem situat un &nbsp; en text opcional alternatiu: si no hi ha paraula clau de màquina associada a la data de sortida, es mostra aquest espai indivisible per tal que la «caixa» tingui un contingut (en nombrosos navegadors, una caixa <td></td> no es mostra de la mateixa manera que una caixa <td>&nbsp;</td>.

Ara mostrarem per a cada joc la llista dels Tests que fan referència a aquest joc (inserim això just abans del </tr> final de la línia):

	<td>
	<B_tests_jeu>
	<b>Test :</b>
	<BOUCLE_tests_jeu(ARTICLES){id_rubrique}{titre_mot=test}>
		<br><a href="#URL_ARTICLE">#TITRE</a>
	</BOUCLE_tests_jeu>
	&nbsp;
	<//B_tests_jeu>
	</td>

Aquest BOUCLE_tests_jeu utilitza mètodes que ja s’han explicat.

No obstant, això no ens convé encara: mostrem aquí tots els tests, per totes les màquines, mentre que la nostra data de sortida no fa referència forçosament a totes les versions del joc (podem mostrar aquí la data de sortida de la versió Dreamcast, mentre que ja han estat publicats alguns tests per a les versions Playstation, Dreamcast, Window...).

Per tant, només volem mostrar els tests que fan referència a les versions relacionades amb aquesta data de sortida. Ja hem realitzats processos semblants a la pàgina «article.html» per tal de mostrar només les dates de sortida a les mateixes màquines que l’article mostrat (BOUCLE_mac2). Això dóna:

	<td>
	<BOUCLE_mac2(MOTS){id_article}{type=Machines}>

		<BOUCLE_tests_jeu(ARTICLES){id_rubrique}{titre_mot=test}>
		<BOUCLE_verifier_mot(ARTICLES){id_article}{id_mot}>
			<li><a href="#URL_ARTICLE">#TITRE</a>
		</BOUCLE_verifier_mot>
		</BOUCLE_tests_jeu>

	</BOUCLE_mac2>
	&nbsp;	
	</td>

El BOUCLE_mac2 recupera la llista de màquines de la data de sortida. El BOUCLE_tests_jeu recupera el conjunt dels tests de joc de la secció (totes les màquines confoses). El BOUCLE_verifier_mot verifica per a cada test recuperat en BOUCLE_tests_jeu si està associat a la màquina recuperada per BOUCLE_mac2.

De moment hem suprimit la publicació de «Tests:» en text condicional per raons de lectura. Heus aquí el codi, exactament a partir del mateix principi, que permet mostrar aquesta indicació (així com el &nbsp;):

	<td>
	<B_mac2>
	<b>Tests :</b>
		<BOUCLE_mac2(MOTS){id_article}{type=Machines}><BOUCLE_tests_jeu(ARTICLES){id_rubrique}{titre_mot=test}><BOUCLE_verifier_mot(ARTICLES){id_article}{id_mot}>
			<li><a href="#URL_ARTICLE">#TITRE</a>
		</BOUCLE_verifier_mot></BOUCLE_tests_jeu></BOUCLE_mac2>
	&nbsp;
	<//B_mac2>	
	</td>

Fixeu-vos-hi bé: els BOUCLE_mac2, BOUCLE_tests_jeu i BOUCLE_verifier_mot estan «enganxats», és a dir que no estan separats per retorns a la línia ni per espais. En efecte, provem el «contingut» del BOUCLE_mac2 per saber si mostrem la indicació «Proves» o el &nbsp; (els texts condicionals). Si haguéssim conservat els retorns a la línia o els espais en blanc entre els bucles, qualsevol que fos el resultat de BOUCLE_tests_jeu i de BOUCLE_verifier_mot, el BOUCLE_mac2 hauria estat considerat com si tingués un contingut per culpa de la publicació d’aquests retorns de carro.

Per mostrar una llista de vistes prèvies, duplicarem simplement aquest codi, modificant el nom dels bucles i substituint titre_mot=test per titre_mot=preview:

		<td>
	<B_mac3>
	<b>Previews :</b>
	<BOUCLE_mac3(MOTS){id_article}{type=Machines}><BOUCLE_preview_jeu(ARTICLES){id_rubrique}{titre_mot=preview}><BOUCLE_verifier_mot3(ARTICLES){id_article}{id_mot}>
			<li><a href="#URL_ARTICLE">#TITRE</a>
		</BOUCLE_verifier_mot3></BOUCLE_preview_jeu></BOUCLE_mac3>
	&nbsp;
	<//B_mac3>	
	</td>

Finalment, afegim un bucle per les «notícies» que fan referència a aquest joc. Aquí no ens hem de preocupar de les màquines, ja que totes les notícies es publiquen en una sola pàgina. No publicarem pas el #TITRE, sinó directament la menció «Les novetats»; l’enllaç apunta cap a la pàgina específica que hem creat per aquest joc. Fixeu-vos finalment en la restricció {0,1} que permet recuperar només una única «notícia» per tal de crear un enllaç únic.

	<td>
	<BOUCLE_news_jeu(ARTICLES){id_rubrique}{titre_mot=news}{0,1}>
		<br><a href="news_jeu.php3?id_rubrique=#ID_RUBRIQUE">Les notícies</a>
	</BOUCLE_news_jeu>
	&nbsp;
	<//B_news_jeu>
	</td>

Per ser exhaustius, faria falta tornar a començar l’operació amb les Solucions i les Astúcies. Però com que aquí es tracta de publicar una llista de sortides, considerem que aquestes no són aquí pertinents. Encara que, tècnicament, es poden publicar fàcilment, fem una elecció editorial: la informació no és interessant aquí i sobrecarregaria la interfície, per tant preferim no mostrar-la. (Però si això us diverteix, podeu entrenar-vos integrant-les vosaltres mateixos.)

Autor merce Publié le : Mis à jour : 21/03/23

Traductions : عربي, català, français, italiano