Tenim ja un lloc molt estructurat des de l’espai privat i amb nombrosos articles publicats. És el moment de començar a crear la nostra primera plantilla.
Molts webmestres comencen a treballar aquesta etapa des d’una plantilla estàndard, de la que van modificant petites parts.
Nosaltres, per hàbit i per necessitats d’aquest tutorial, construirem les plantilles a partir d’un document totalment buit. Etapa a etapa, els diferents bucles seran afegides, despres finalment la interfície gràfica (al començament del codi HTML extremadament simple, la construcció gràfica amb taules serà afegida en últim terme). Aquest mètode presenta diversos avantatges:
- això permet comprendre perfectament la construcció durant el desenvolupament d’una pàgina: quin bucle depén de quin altre, etc.;
- inicialment podem prescindir dels elements d’interfície gràfica, és més senzill alhora de vore la jerarquia de les informacions sobre la pàgina; així la interfície gràfica se desprén d’ella d’una manera més coherent;
- el codi HTML generat sovint és més clar: les redundàncies són menys nombroses (defecte freqüent del copiar-pegar del codi HMLT).
Al codi que ve a continuació, usarem per tant un codi HTML molt senzill (senyalem que no hi ha cap taula). La creació d’una interfície gràfica més elaborada, al final del procés, s’ha deixat a l’elecció personal del lector.
Voluntàriament, construirem el codi etapa per etapa. Per evitar pàgines inacabables, quan enriquim un bucle que ja existeix, no rescriurem la pàgina íntegrament, només la part que ens interessa. Per a no perdre’ns, ens referirem sovint al nom dels bucles ja existents.
La pàgina de base
Comencem doncs amb un fitxer "article.html" verge.
Extremadament simple, té la mínima estructura d’un article, sense cap element de navegació:
<html>
<title>[#NOM_SITE_SPIP]
<BOUCLE_titre(ARTICLES){id_article}>#TITRE</BOUCLE_titre></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>
Fàcil:
- l’etiqueta BOUCLE_titre permet d’afegir el títol l’article al encapçalament de la pàgina;
- la BOUCLE_principale conté tota la pàgina; aquesta etiqueta permet situar totes les altres bucles a l’interior de l’article seleccionat.
Recuperar les informacions sobre l’execució
La plantilla d’abans seria una bona base per una webzine estàndard (tota la informació necessària està a l’article), però al nostre cas, una informació vital no es troba pas a dins de l’article: quina és la seua execució?
En efecte, hem decidit que el títol de l’execució no estiga dins de l’article, sino dins de la secció que conté a aquest article. Ens podríem acontentar amb el bucle HIERARCHIE, però preferim ací prendre l’hàbit que esdevindrà sistemàtic als nostres exemples: cal passar l’article a la seua secció per recuperar el nom de l’execució. (Aquest és el mateix principi per recuperar el logo); amb la diferència que l’etiqueta #LOGO_RUBRIQUE_ARTICLE fa automàticament aquesta operació.)
Aquesta serà doncs una constant en aquesta web: els bucles ARTICLES contenen sovint un bucle RUBRIQUES permeten de "remuntar de cop", és a dir, recuperar el títol de l’execució. Aquest serà el cas de les pàgines de seccions, això com també el cas de les pàgines de resum.
Reprenem el començament del codi, ben al començament de l’etiqueta BOUCLE_principale:
<BOUCLE_principale(ARTICLES){id_article}>
<BOUCLE_rubrique(RUBRIQUES){id_rubrique}>
<h1>#TITRE</h1>
</BOUCLE_rubrique>
...
Adoneu-vos que el #TITRE de la secció es presenta amb la mida màxima (h1); lògic, ja que aquest és el títol de l’execució. El títol de la secció, que normalment és solament un element de navegació en la pàgina web, és ací la informació principal de l’article.
A fi d’obtenir un esbós de navegació, afegirem la jerarquia. Anem a començar aquesta jerarquia des de la secció que conté la subsecció actual, perquè allò que ens interessa és la llista de categories d’execucions (i ja coneixem el nom de la darrera subsecció- el títol de l’execució). Ens situem a l’interior de l’etiqueta BOUCLE_rubrique, afegim una BOUCLE_rub_parent (que permet "remuntar d’un bot" dins de la jerarquia), i a partir d’allà demanem la jerarquia:
<BOUCLE_rubrique(RUBRIQUES){id_rubrique}>
<BOUCLE_rub_parent(RUBRIQUES){id_enfant}>
<BOUCLE_hierarchie(HIERARCHIE){id_rubrique}{" : "}>
<a href="#URL_RUBRIQUE">#TITRE</a>
</BOUCLE_hierarchie>
</BOUCLE_rub_parent>
<h1>#TITRE</h1>
</BOUCLE_rubrique>
Deixant aquesta pàgina "article.html" a un costat. Res complex pel moment. Cal gestionar de les paraules clau i els enllaços entre els articles d’una mateixa secció (és a dir, que tracten del mateix tema).
Un detall que cal tindre en consideració: es necessari tornar a la secció que conté l’article per obtindre el títol de l’execució i si és necessari cal "remuntar d’un bot" (la secció que conté la secció que conté l’execució) abans de començar la jerarquia.