Pour obtenir exactement ce que l’on souhaitait initialement, nous allons devoir travailler sur de nouveaux fichiers.

Internationalisation des termes utilisés

SPIP est fort pratique et vous permet de créer un site multilingue. Mais si les termes utilisés dans vos squelettes sont écrits directement dans la langue de Molière cela posera des problèmes lorsque vous afficherez vos articles anglais ou hongrois.

Pour cela, des termes génériques ont été utilisés dans les squelettes. Ils se présentent sous la forme suivante <:mon_mot_a_traduire:>.

Certains mots existent déjà dans SPIP (Configuration/Gestion des langues/Fichiers de langues) et il convient d’utiliser ceux-là en priorité car ils bénéficient de leurs traductions dans un sacré paquet de langues.

Mais, et c’est notre cas, il existe des situations où nous avons besoin d’augmenter ce fichier de langues. Nous allons faire cela en ajoutant un fichier local_fr.php dans notre répertoire de squelettes (/squelettes/local_fr.php).

S’approprier les formulaires

Les deux formulaires utilisés dans la page sommaire présentent des inconvénients. Ils ne sont pas adaptés pour être contraints à tenir dans une colonne de 260 pixels de large.

Il va donc falloir les modifier.

Pour cela, nous allons créer un répertoire /squelettes/formulaires dans lequel nous allons coller les fichiers /dist/formulaires/inscription.html et /dist/formulaires/recherche.html.

Pour le formulaire de recherche nous allons complètement le modifier pour utiliser le moteur de Google (cela diminue un peu la charge du serveur et augmente le référencement des pages du site sur ce moteur de recherche).

Pour cela nous avons besoin d’ajouter une image au répertoire /squelettes/images :

et le code du fichier /squelettes/recherche.html sera le suivant :

[(#REM) formulaire utilisant google en lieu et place du moteur de recherche interne]
<div class="formulaire_spip formulaire_recherche">
<a name="formulaire_recherche" id="formulaire_recherche"></a>
<form method="get" action="http://www.google.fr/custom"
class="formrecherche">
<div>
<input class="formrecherche" type="text" name="q" onfocus="if
(this.value=='<:info_rechercher:>...') this.value=''" maxlength="255"
value="<:info_rechercher:>..." />


<input class="formrechercheimage" name="image" type="image" title="<:sur_web:>&nbsp;: #NOM_SITE_SPIP"
alt="OK" src="#URL_SITE_SPIP/#CHEMIN{images/ok.gif}"  />


<input type="hidden" name="sitesearch" value="#URL_SITE_SPIP"
checked="checked" />
<input type="hidden" name="client" value="pub-1611007635145671" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="hidden" name="oe" value="ISO-8859-1" />
<input type="hidden" name="cof"
value="GALT:#008000;GL:1;DIV:#DDEEAA;VLC:663399;AH:center;BGC:FFFFFF;LBGC:AABB44;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:[(#LOGO_SITE_SPIP||hauteur)];LW:[(#LOGO_SITE_SPIP||largeur)];L:[#URL_SITE_SPIP/IMG/(#LOGO_SITE_SPIP|fichier)];S:http://;LP:1;FORID:1;"
/>
<input type="hidden" name="hl" value="fr" />
</div>
</form>
</div>

Pour le formulaire inscription.html, nous allons juste diminuer la taille des champs de saisie de manière à ce que ces derniers ne dépassent plus de la page :

Amélioration de l’affichage du menu des Rubriques

Le simple affichage des rubriques du site ne nous satisfait pas. Nous voulons extraire une des rubriques pour qu’elle figure en fin de liste. De plus, nous voulons ajouter des liens à cette liste, liens qui ne sont pas des rubriques du site mais des renvois vers le forum phpBB ou vers des pages d’aide à la navigation qui n’existent pas encore (mais qui seront créées dans un prochain tutoriel).

Nous allons donc modifier les boucles et les affichages de la page /squelettes/inc-biorubriques.html :

Personnalisation du pied de page

Nous modifions le pied de page (/squelettes/inc-biopied.html) de manière à afficher toute une liste de lien-images. Les images sont placées dans la rubrique /squelettes/images et le fichier inc-biopied.html modifié comme suit :

Note : nous avons décidé d’intégrer les balises ’div id="pied"’ directement dans le fichier /squelettes/inc-biopied.html ; nous avons donc retiré ces mêmes balises du fichier /squelettes/sommaire.html :

Ajout de la publicité pour OpenOffice.org

Le site de "Biotechno pour les Profs" présente la particularité de ne proposer au téléchargement quasiement que des fichiers OpenDocument.

Une publicité en page d’accueil aiguillant les visiteurs vers le téléchargement de la suite bureautique OpenOffice.org est donc prévu.

Il suffit d’ajouter ce code au fichier /squelettes/sommaire.html :

<div id="droite">
[(#REM) Menu de navigation par rubriques ]
<INCLURE{fond=inc-biorubriques}>
[(#REM) Telecharger OOo ]
<div id="telecharger_ooo">
<h2><:telecharger_ooo:></h2>
<ul>
<li id="linux"><a href="http://fr.openoffice.org/about-downloads.html">Linux</a></li>
<li id="mac"><a href="http://fr.openoffice.org/about-downloads.html">Macintosh</a></li>
<li id="windows"><a href="http://fr.openoffice.org/about-downloads.html">Windows</a></li>
</ul>
</div> [(#REM) fin div id="telecharger_ooo"]
[(#REM) Inscription au site ]
#FORMULAIRE_INSCRIPTION
</div>[(#REM) fin div id="droite"]

La validation du code XHTML

Avant de pouvoir passer au design proprement dit (avec la personnalisation des fichiers CSS) nous devons nous assurer qu’aucune erreur de syntaxe n’est présente dans le code.

Nous utilisons pour cela le validateur de la W3C :
http://validator.w3.org/

Si vous travaillez en local vous pouvez copier le code de votre page (le code produit par SPIP) dans le validateur "by File Upload". Une extension de Firefox : Offline Page Validator permet de faire la même chose qu’expliqué juste avant, mais d’un seul clic.

Une fois que notre squelette est complètement débuggé et complètement conforme à la norme XHTML 1.0 strict nous pouvons passer au tutoriel suivant...