Ajout des styles de SPIP

Maintenant que la structure du squelette est définie (HTML et CSS) on peut s’atteler à construire le HTML des premières pages du squelette ainsi que leurs styles. Comme il est inutile de réinventer la roue, on va s’inspirer des styles déjà définis par le squelette Zpip-dist v2 qui n’est malheureusement plus supporté au profit de Spipr-dist.

On insère donc dans le fichier inclure/head.html les lignes suivantes :

On place les fichiers correspondants dans le dossier css/ du squelette Z-Gala. En fait, si spip.comment.css et spip.petition.css proviennent bien tous deux de Zpip-dist v2, les autres ont subis quelques modifications mineures et proviennent d’un package dérivé concocté par b_b. spip.css contient les styles associés au code généré par SPIP. Pour les autres styles, le nom des fichiers est suffisamment explicite pour comprendre de quoi il s’agit.

Choisir une police de base

Pour un site web le choix de la police est essentielle comme l’explique Tetue dans son article Stop Arial 11px !. En suivant les conseils de l’article j’ai choisi la police Lucida Grande en ajoutant la ligne suivante dans le fichier css/fonts.less qui était resté vide jusqu’alors et qui produira le fichier CSS de même nom.

En rafraichissant la page on peut voir la nouvelle police à l’œuvre. Pour l’impression, j’ai choisi la police Helvetica de base.

Ajouter une barre principale de navigation horizontale

Structure classique des sites web, la barre principale de navigation horizontale du squelette Z-Gala est incluse sous le « header ». Comme d’autres menus que nous définirons par la suite, j’ai décidé d’utiliser le plugin Menus pour ma barre de navigation principale afin de pouvoir accueillir un contenu simplement configurable.

Pour ce faire, étant donné que cette barre est affichée sur l’ensemble des pages et n’a pas vocation à s’adapter à la page affichée, on ajoute l’inclusion d’un bloc « non Z » dans le « body » : inclure/nav.html. L’inclusion est englobée dans une balise <nav> de classes .navbar et .hornav et d’id navbar comme suit :

On crée l’inclusion inclure/navbar.html qui appelle une autre inclusion, celle du plugin Menus sachant que nous avons choisi l’identifiant navbar pour la barre principale de navigation. On obtient donc le code suivant :

Pour obtenir la liste des secteurs du site et le lien d’accueil comme je le souhaite pour l’instant, il faut créer le menu d’identifiant navbar avec deux entrées, l’une pour le lien accueil et l’autre pour la liste des rubriques limitée aux secteurs.

Les styles utilisés (.hornav, .menu, .menu-items, .item) sont définis dans le fichier css/spip.list.css car la barre est fondée sur une structure de liste non ordonnée. Quelques styles supplémentaires dans css/theme.css sont néanmoins nécessaires afin de décorer la barre plus précisément. On peut alors rafraichir la page pour voir le résultat.

Utiliser les balises HTML5

Comme le HTML5 commence à être correctement supporté par les différents navigateurs, nous allons utiliser les nouvelles balises pour créer nos pages. Quoi de mieux pour commencer que le fichier body.html et sa structure de blocs.

HTML5 propose des nouvelles balises de type sectioning content et grouping content qui sont à même de préciser la sémantique des blocs du « body ». Ces balises sont :

• <header> et <footer> que l’on va utiliser pour les blocs de même nom de notre « body » ;
• <nav> pour encapsuler la barre principale de navigation du site ;
• <main> pour définir le bloc de contenu principal de la page, soit tous les blocs hors « header » et « footer » (cette balise est toujours unique dans la page) ;
• <aside> pour encapsuler nos blocs « aside » et « extra ».

J’ai donc choisi de structurer le nouveau body.html comme suit, ce qui me semble assez logique mais reste uniquement une interprétation personnelle :

A l’occasion, j’ai remarqué aussi que le fichier reset.css de TinyTypo ne contient pas la balise <main>. Il faut donc la rajouter, ce qui fait un fork de plus pour TinyTypo.

L’utilisation des balises <nav>, <aside>, <footer> et <header> ne se limite pas au seul « body » et peut être étendue au sein des contenus des blocs eux-mêmes, ce que nous utiliserons par la suite. En outre, nous serons aussi amenés à utiliser d’autres balises HTML5 structurantes comme <article>, <section>, <figure> et <figcaption>.

Plusieurs articles permettent de se faire une idée de l’utilisation de ces nouvelles balises. Néanmoins, chacun devra se faire sa propre opinion car les articles ne se rejoignent pas tous sur l’utilisation précise de ces balises :

• HTML5 se dévoile,
• Éléments HTML5 de structure,
• W3C HTML 5.2.

Améliorer le Fil d’Ariane

A ce stade, le fil d’Ariane du squelette Z-Gala est matérialisé uniquement par le fichier breadcrumb/dist.html au contenu statique qui s’applique à l’ensemble des pages qui ne possèdent pas un fil d’Ariane spécifique. Nous allons pour l’instant se focaliser sur ce fichier uniquement en lui donnant un contenu générique et dynamique.

Le squelette Spipr-dist possède un tel fichier dont le contenu peut être réutilisé tel quel. Ce fichier fait appel à une inclusion breadcrumb/inc-objet.html qui calcule la hiérarchie à afficher quand la page en cours d’affichage est celle d’un objet au sens de SPIP. Il est donc nécessaire de copier aussi ce fichier dans le squelette Z-Gala.

On notera que contrairement à Bootstrap sur lequel s’appuie le squelette Spipr-dist, le séparateur des éléments du fil d’Ariane est inscrit dans le HTML et non dans le CSS en utilisant le sélecteur ::before. Néanmoins, comme le caractère séparateur est inclus dans une balise <span> de classe .divider il sera possible de le styler mais pas de le changer via une variable LESS.

Il ne reste plus qu’à rajouter des styles dans le fichier LESS less/breadcrumb.less ainsi que les variables associées dans less/var_breadcrumb.less et on peut afficher le nouveau Fil d’Ariane – sans intérêt – pour la page d’accueil. Il faudra se poser la question plus tard si on conserve un fichier LESS séparé pour la structure du fil d’Ariane ou si l’on regroupe tout dans less/theme.less comme pour les autres blocs.

Structurer la page sommaire

Pour l’instant, le but est de créer un sommaire simple composé entre autres choses de la liste des articles récents. La question est quelle structure HTML5 sied le plus à ce sommaire ? J’ai beau naviguer sur le web fébrilement pendant des heures, il est difficile de se faire une vraie conviction comme pour le « body ». J’ai donc opté pour un sommaire dont la structure s’inspire de celle du site de romy.tetue.net, à savoir, un bloc de présentation du site, une sélection d’articles du site et un bloc avec les derniers éléments récents du site comme les articles et les commentaires. La structure HTML5 est faite d’une section par bloc.

Le fichier content/sommaire.html contient l’appel à 4 inclusions, une pour chaque élément précédemment cité, le tout inclus dans une balise <section> :

• inclure/inc-bienvenue.html
• inclure/inc-vedette.html
• liste/articles_resume.html
• liste/forums_resume.html

Pour les inclusions « bienvenue » et « vedette » nous allons utiliser l’objet sélection du plugin Sélection Editoriale afin d’éviter l’utilisation des mots-clés. Il faudra donc ajouter le plugin dans les <necessite> du paquet.xml. Pour les résumés d’articles on utilise l’inclusion existante dans Z-Core. Seule la liste des commentaires restera vide ou du moins juste remplie avec un titre.

Enfin, comme le fil d’Ariane pour le sommaire n’apporte rien, je le supprime en créant un fichier breadcrumb/sommaire.html vide. On voit ainsi l’intérêt d’avoir fait du fil d’Ariane un bloc Z.

Ajouter la page article

Comme pour la page sommaire, je vais créer une page article rapidement en recopiant celle de Spipr-dist, sans modifier les ni les styles ni le contenu sauf ce qui concerne les pétitions. Le but est juste de créer cette page afin d’avoir le loisir de naviguer dans le site.

Nous reviendrons dans une étape ultérieure sur cette page afin d’affiner et de simplifier le HTML et les classes CSS. Le plus important pour cette page c’est qu’il est nécessaire de créer un fichier article.html à la racine car on veut passer des paramètres spécifiques qui ne sont pas fournis par Z-Core (voir le fichier page.html). Comme on peut le voir ci-après, la page article voit son environnement enrichi avec l’identifiant de la rubrique et celui du secteur.

Il suffit dès lors de recopier et modifier légèrement comme précisé plus haut le fichier content/article.html de Spipr-dist dans le dossier homonyme de Z-Gala.

Ajouter la page rubrique

Comme pour la page article, je vais créer une page rubrique rapidement en recopiant celle de Spipr-dist, sans modifier les ni les styles ni le contenu sauf ce qui concerne les brèves et les sites. Le but est juste de créer cette page afin d’avoir le loisir de naviguer dans le site.

Nous reviendrons dans une étape ultérieure sur cette page afin d’affiner et de simplifier le HTML et les classes CSS. Le plus important pour cette page c’est qu’il est nécessaire de créer un fichier rubrique.html à la racine car on veut passer des paramètres spécifiques qui ne sont pas fournis par Z-Core (voir le fichier page.html). Comme on peut le voir ci-après, la page rubrique voit son environnement enrichi avec l’identifiant du secteur.

Il suffit dès lors de recopier et modifier légèrement comme précisé plus haut le fichier content/rubrique.html de Spipr-dist dans le dossier homonyme de Z-Gala.

Conclusion

A l’issue de cette étape, nous avons un squelette qui permet d’afficher des objets standard de SPIP avec une typographie adéquate. Les styles ne sont pas finalisés pour toutes les inclusions des pages sommaire, article et rubrique et l’on s’appuie encore sur des inclusions de Z-Core ou de la Dist mais nous y reviendrons dans une étape ultérieure de finition.