Créer et Personnaliser simplement un template 3 colonnes fluide sous Yacs

Au cours de ce tutoriel, nous apprendrons comment mettre sur pied et personnaliser un template Yacs 3 colonnes fluide. Par colonnes fluides, nous entendons le fait que le contenu de la page, organisé dans des colonnes (les colonnes sont créées à partir de balises div en CSS), aura la possibilité de s'adapter à la largeur de page du navigateur web. La taille des colonnes, ainsi que leur conteu, est alors proportionnelle à la largeur de l'écran et de la fenêtre du navigateur web de l'internaute.

Pour y parvenir, nous aurons besoin de différents outils de travail.

Afin de mener à bien notre projet, il est nécessaire, mais pas indispensable d'avoir des notions de base en HTML, CSS et PHP.

Nous aurons aussi besoin d'un éditeur de texte, de préférence un éditeur de codes (HTML, CSS et PHP en l'occurence) permettant la coloration syntaxique selon les langages utilisés.

Enfin, afin de pouvoir tester en local avant de mettre en ligne le résultat final, et pour des raisons de performance, nous aurons besoin d'un serveur local PHP.

Ce tutoriel a été réalisé sous Linux/Ubuntu 9.04; l'éditeur de texte utilisé est Geany, et le serveur local PHP est XAMPP.

La structure(?) et l'orientation au niveau du design sous Yacs actuellement ne permet(tent) pas la création d'un skin "à partir de zéro". La conséquence directe est celle de devoir absolument passer par un skin déjà existant pour arriver à ses fins si l'on veut créer une identité visuelle sous Yacs. Une procédure automatique de "dérivation d'un skin" existant intégrée à Yacs permet d'avoir, de manière automatisée, un nouveau skin que l'on peut modifier à loisir sans pour autant modifier celui de base.

Bien que ce choix soit discuttable (le problème a par exemple été soulevé dans l'article (Standardisation des skins Yacs), il serait juste de remarquer que celà permet d'avoir, en principe, une base de travail robuste, solide et éprouvée (bien-sûr, ceci n'est vrai que si le skin qu'on a choisi comme modèle pour dérivation l'est, ce qui est généralement le cas en ce qui conçerne les skins intégrés en natif sous Yacs, ou proposés dans la communauté).

Vous pouvez avoir des informations supplémentaires sur le design sous Yacs en visitant la page : création d'une identité visuelle sous Yacs du site de la communauté de Yacs.

Ce que nous allons essayer de faire dans ce tutoriel, c'est de créer un skin "presque" à partir de zéro, en choisissant soi-même quelle sera la structure du template de notre skin.

En effet, la procédure de dérivation nous "impose" un template à utiliser, et les plus grandes modifications apportées pour personnaliser le skin ainsi dérivé se font dans le fichier de styles CSS correspondant.

Les thèmes visuels proposés en natif dans Yacs ayant chacun leur particularité et ne partageant pas la même organisation de base nous choisirons pour la suite de ce tutoriel le skin Skeleton intégré au noyau de Yacs, et le skin Yacs 2007 pour le style de la troisième colonne. A noter que le skin digital (intégré en natif au package Yacs) aurait aussi bien pu faire l'affaire (je l'ai d'ailleurs utilisé la première fois que j'ai utilisé cette méthode), ainsi que tout autre skin composé de trois colonnes, mais qui devraient être des colonnes fluides s'adaptant à la largeur totale de l'écran afin de ne pas avoir à modifier énormément le code.

La première étape, qui nous semble la plus importante de notre processus de création d'identité visuelle, est celle du choix de ce que nous appellerons le layout statique de base. Par layout, nous entendons présentation, et ici présentation générale d'une page de notre site web.

Le choix de ce layout de base doit porter sur un template CSS+XHTML d'une page web, que vous pouvez obtenir sur différents sites qui en proposent de gratuits ou payants. Vous pouvez aussi bien-sûr en créer un, si vous avez des notions en CSS et XHTML qui vous permettent de créer un page web statique.

Veillez à choisir un template valide CSS 2+ et XHTML 1+.

Ainsi donc, il suffit d'avoir à disposition un template XHTML (conforme à la norme XHTML 1.0 strict ou supérieur strict) ou CSS (conforme à la norme CSS 2.0 ou supérieur).

Le template en question peut être constitué d'un ou de deux fichiers : un fichier pour les CSS, et l'autre pour le HTML. Dans le cas d'un template constitué d'un seul fichier, les styles CSS sont directement intégrés à l'en-tête du fichier en question entre les balises <style> ... </style>.

Notre layout statique de base sera donc constitué des deux fichiers, l'un .html (.htm) et l'autre .css.

Vous devez vérifier que le layout ainsi obtenu fonctionne correctement et est valide XHTML Strict et CSS 2 ou supérieur. Aussi, effectuez tous les ajustements organisationnels et visuels que vous désirez afin d'obtenir le rendu qui vous satisfait.

Une fois ceci fait, nous pouvons passer à l'étape suivante.

Afin de rendre le layout de base compatible à Yacs, nous devons effectuer différentes opérations, parmi lesquelles :

2.1. Transformation du fichier .html (ou .htm) en .php

2.2. Utilisation des variables de templates de Yacs

Si toutes les étapes du paragraphe 2 ont été effectuées avec succès, l'intégration du layout de base dans Yacs devrait se dérouler sans véritables difficultés.

En effet, le fichier PHP obtenu dans le paragraphe 2, bien que pas encore totalement compatible avec  Yacs, nous permettra de générer deux fichiers essentiels : template.php et nom_du_skin.css comme suit.

• Tout d'abord. sauvegarder les fichiers template.php  et nom_du_skin.css du skin obtenu par dérivation du skin Skeleton. En faire des copies dans le même dossier et les renommer par exemple _0_template.php et _0_nom_du_skin.css. Yacs ;
• Renommer le fichier .php obtenu à partir du template HTML, en template.php;
• Renommer le fichier .css obtenu à partir du template HTML en nom_du_skin.css.

Nous pouvons passer à la suite.

Il est important de faire attention à cette étape préliminaire.

Nous supposons que votre serveur PHP local est actif et que l'accès aux pages se fait à travers lui.

Des erreurs PHP seront affichées si vous essayez d'accéder à votre site Yacs local : les Headers de Yacs n'ont en effet pas encore été indiqués dans le nouveau fichier template.php

2.1. Génération du fichier template.php de base

La mise en place d'un fichier template.php valide à Yacs n'est en principe pas très difficile.

Ce qu'il est important de garder à l'esprit, c'est que Yacs utilise ses propres variables pour la déclaration d'un template.

En dehors de la déclaration des Headers, les variables (il est plus adapté de parler en termes de fonctions PHP) qui nous intéressent sont :

1. Page::body() : pour la déclaration du début du corps de document HTML (balise <body>) et initialisations diverses inhérantes à Yacs ;
2. Page::tabs() pour la déclaration des onglets de la barre de navigation (menu en onglets des sections principales du site);
3. Page::bread_crumbs() pour la déclaration de la fonction permettant d'afficher un arbre de liens de l'endroit où on se trouve (Généralement placé en dessous de la barre de navigation ou directement au dessus du titre de la page courante);
4. Page::content() pour la déclaration et l'affichage du contenu de la page courante et associées, ou contenu principal;
5. Page::side() pour la déclaration et l'affichage du contenu de la colonne de gauche (Panneau de côté);
6. Page::extra_panel() pour la déclaration et l'affichage du contenu de la colonne de droite (Panneau extra);
7. Page::footer() pour la déclaration et l'affichage du contenu du pied de page.

Le template est à présent presque prêt. Au tour de la présentation avec les CSS

2.2. Gnénération du fichier nom_du_skin.css de base

2.3. Ajout des styles supplémentaires au fichier .css

La mise en place des styles devrait se faire sans trop de heurts.

En effet, dans les étapes précédentes, le fichier qui avait été renommé nom_du_skin.css était déjà conforme à nos attentes de base. Nous n'avons fait que changer son nom pour qu'il soit conforme au nommage dans Yacs.

Nous rappelons que nom_du_skin, qui est le nom choisi pour notre skin, doit aussi être celui du dossier contenant les fichiers du skin, et nom_du_skin.css est ainsi la feuille de style principale associée au skin.

Nous avons donc à présent un skin de base qui devrait fonctionner correctement.

Le template et la présentation sont à présents prêts. Il ne reste plus qu'à essayer.

Le skin obtenu dans l'étape précédente peut et devrait être optimisé.

En effet, le travail qui a été fait apermis d'utiliser la structure en cascades des CSS pour écraser les attributs de style qui ne nous convenaient pas, en redéfinissant les attributs sans se préoccuper des définitions précédentes.

Pour une feuille de styles plus propre, il est donc nécessaire de  parcourir la feuiile de style obtenue à la recherche d'attributs redondants, afin de les regrouper.

Il serait préférable de distinguer dans le fichier CSS, les deux régions entre la feuille de style issue du template HTML, de celle importée d'une autre feuille de style de YACS.

La mise à jour du skin obtenu est aisée, et quelque peu automatique.

En effet, pour un skin valide CSS 2+ et XHTML 1+, il n'y a pas besoin de mise à jour.

Néanmoins, si la structure du noyau de Yacs change au niveau de la présentation, il suffira juste de suivre à nouveau la procédure mentionnée en se basant cette fois-ci sur l'ancien skin personnalisé.

En principe, les modifications en cas de mise à jour majeure du noyau de Yacs au niveau de la présention, ne devrait porter que sur les variables : la structure XHTML associée au template HTML de base ne devrait pas changer.

La méthode exposée permet, à partir d'un simple template HTML, de créer aisément une identité visuelle.

De plus, le skin hybrid_3col de base joint comme ressource additionnelle, est hautement personnalisable et pourrait servir de base de travail, car il est valide XHTML 1.0 strict, XHTML 1.1, CSS 2.1 et CSS 3. Aussi, hybrid_3col est compatible iPod et iPod Touch ainsi que PALM, avec navigateur Safari ; est compatible avec pratiquement tous les navigateurs tant sous Windows, Mac que Linux.

Nous avons au cours de ce tutoriel exploré comment créer et personnaliser simplement une identité visuelle pour le CMS YACS, à partir d'un template HTML valide.

Nous avons essayé d'activer au niveau des CSS le plus de variables possibles afin de permettre de mettre en exergue les différentes possibilités offertes.

La procédure aurait été plus si une page de la documentation de YACS permettait d'avoir un rapide apperçu des différentes variables PHP et CSS qui contribuent à la présentation sous YACS.

Ce tutoriel ne saurait être la seule méthode pour arriver au but fixé, et nous espérons qu'il sera utile pour tous.