Convertir un jeu de squelettes en Zpip

  une demarche présentée pas à pas


ZPIP est une organisation de squelettes, encore plus modulaire que celle de la dist, qui permet d’organiser le design en minimisant les fichiers à écrire, et en mutualisant leur utilisation, ce qui permet en particulier de rajouter très facilement de nouveaux types de pages, donc de nouveaux squelettes unitaires à votre site, en gardant la simplicité de mise-à-jour du design.

C’est la démarche idéale pour partir d’une page-type HTML quelconque, que vous avez redéfinie à votre sauce, pour en écrire facilement un jeu de squelettes complets pour votre nouveau site.


 Les pré-requis

- quelques notions d’HTML (la syntaxe générale des balises HTML)
- connaitre le principe d’organisation des squelettes de SPIP (URL-page,squelette et Environnement d’un squelette)
- connaissance de la rubrique Zpip sur Contrib (en particulier typologie..)

Cahier des Charges
Vous avez trouvé un jeu de squelettes SPIP sur le Net, son apparence vous plait, et vous avez vérifié que ces fichiers (en particulier le design graphique) sont bien libres de droits [1] : vous partirez des fichiers .html récupérés.
La démarche serait la meme pour convertir un jeu de squelettes natif en Z.....

Outils
Vous aurez sans doute bâti votre panoplie de travail avec OUTILLAGE SPIP, et -par facilité, et sécurité- prévu de travailler d’abord sur une installation locale : INSTALLER SPIP...

Il vous faudra par exemple :
- un logiciel éditeur du type Notepad++ pour modifier les fichiers
- un logiciel SERVEUR Web LAMP/WAMP de type Easyphp ou WampServer pour faire des essais de votre squelette chez vous (installation locale)
- un logiciel de transfert FTP comme Filezilla pour mettre vos fichiers en ligne
- installer votre spip de travail en local (cela permet une modification-visualisation directe des squelettes [2]
et cela est quasi-indispensable pour travailler à partir d’un site déjà publié...


 La démarche

A partir de pages HTML reçues [3], le premier travail consiste à re-structurer les blocs dans les pages proposées.

On suppose que vous trouverez dans vos différentes maquettes de pages, une modélisation du type Les Gabarits/Layout de pages , telle que modélisée depuis longtemps déjà en partie dans la dist.

Une premiere page
Prenons une page typique du contenu du site, par exemple la page d’accueil : ce sera le sommaire en SPIP..
Vous identifiez donc des blocs de code, qui doivent remplir les zones de ./inclure/pied et ./inclure/entete : on supposera dans un premier temps que ces zones sont fixes dans toutes les pages...

Ces deux blocs de codes vont être extraits d’une page html correcte pour être simplement copié-collé dans deux fichiers nommés ./inclure/entete.html et ./inclure/pied.html ; leur positionnement sera reporté à l’indication donnée en feuille de style sur les deux identifieurs de blocs <div id=..> [4] , nommés respectivement... #entete et #pied !

Vous effectuerez la même démarche au niveau du code head de vos pages, à recopier dans un
./inclure/head.html.

En fait, si vous partiez d’un jeu de squelettes bâti autour de Squelettes de la "dist" d’origine, cela reviendra à extraire-ré-utiliser les trois noisettes déjà existantes dans ./inclure !

Normalement, il ne vous reste plus qu’à traiter la conversion en Z de chacun de vos contenus de pages de squelettes :
- commençons par nous intéresser au contenu du coeur de chaque page :
il faut pareillement extraire le contenu principal du squelette nommé xxx [5], à mettre dans un fichier squelette nommé ./contenu/page-xxx.html, et pareillement son positionnement sera défini par le CSS...

Les autres pages sont plus simples


 Améliorations de style

Comme rappelé par ailleurs, il existe aussi une typologie des styles CSS utilisés par SPIP dans Squelettes de la "dist" et dans Z, qu’il faut prendre en compte pour éviter des conflits avec vos sélecteurs CSS maison...


Merci de nous signaler les coquilles ou erreurs qui figureraient dans cette page.

[1Attention, le droit d’auteur et/ou le droit des marques s’applique complètement sur internet, comme le droit à/des images !!

[2C’est beaucoup plus rapide, et plus sur, si vous n’avez pas à dépendre des délais de transferts et cache FTP vers un serveur distant !

[3Ces fichiers HTML simples peuvent être enregistrés lors d’une navigation sur le net, ou bien générés par un sytèmes de mockup, la suite du processus est la même !

[4Que vous n’avez meme pas à écrire dans votre code, car ces blocs sont spécifiés dans le squelette automatique body.html fourni par le mécanisme Z..

[5Ce peut être sommaire, plan, etc.. : voir htaccess inopérant  ?


Liens visibles seulement pour les inscrits.

Article publié le 1er mars 2014, et actualisé en juillet 2016 .

Répondre à cet article