Design et site SPIP

  Comment prévoir de construire son site


SPIP apporte une base de travail robuste pour construire n’importe quel site, en distinguant particulièrement les trois aspects de :
- interface de gestion du contenu en back-office privé
- présentation des informations par des boucles organisées dans les squelettes
- design et apparence graphique isolée en pur CSS/HTML

Comment mieux comprendre la mise en oeuvre de ce troisième point, qui évite de devoir plonger dans les entrailles du CMS, en se limitant a écrire purement des pages HTML....


La question est simple : comment se fait
l’organisation du design d’un site à l’aide de css dans spip ?

Et la réponse : En fait tu fais ce que tu veux.
on fait le design puis spip interviendra après !

Toute la présentation des pages publiques du site est faite en simple html !

Spip propose une base de départ, structurée en pages de squelettes, avec une organisation css (plusieurs fichiers, au final compactés si besoin). Mais rien n’oblige à les utiliser. [1]
L’exemple pédagogique actuel -un fichier html principal par maquette de page-type-, qui sert le plus souvent de support à tout nouveau projet de débutant, est squelettes-dist/ : tout y est, html, css, img de maquette, etc.
En gros il suffit de créer un dossier ./squelettes et de surcharger (modifier en copiant un fichier se trouvant dans Squelettes de la "dist") : voir comment MODIFIER un JEU INITIAL de SQUELETTES.

Il faut commencer par comprendre la correspondance entre les informations à afficher, et les noms des pages gérées par La construction des URL pour identifier Quel squelette modifier ?, ce qui est plus facile sur un site Web déjà rempli : ensuite SPIP propose un outil interne &var_mode=inclure, vite indispensable au Webmestre débutant, étendu par le plugin SkelEditor..
Plus précisément, s’il y a un os dans un squelette, le webmestre SPIP utilise les outils d’aide au debuggage de SPIP.

Spip est très souple et il est possible de pratiquement tout surcharger ou partir de zéro. Il faudra certainement quand même apprendre un peu le principe des boucles, balises et critères de la terminologie. Mais le faire à partir d’un design déjà maquetté en html est très facile, et ce qui est bien, c’est que l’on manipule que du fichier html. Pas ou peu de php. Accessible à n’importe qui, même aux graphistes ;)

La démarche d’un professionnel

Reprenons les étapes comme proposées par un professionnel du Web :

  1. Maquette image : validée auprès du client (images et wireframes si besoin)
  2. Création de d’un prototype html (permet de peaufiner les css, régler les problèmes de compatibilité de navigateurs etc..
  3. Préparation de l’architecture interne à SPIP pour générer ces maquettes html (rubriques / articles / création d’un nouvel objet éditorial via La Fabrique / requêtes spéciales via la boucle DATA / etc..)
  4. Remplissage d’un contenu propre au site (arborescence des rubriques, textes, logos et photos)
  5. Creation du jeu de squelettes SPIP à partir des pages prototypées html (à noter qu’il faut avoir anticipé dans la maquette html le risque de collision des styles css maison et de ceux de spip) : il suffit alors de remplacer les textes des pages prototypées par des boucles et balises SPIP

A chaque étape un objectif précis, donc c’est plus simple à contrôler.

Vous pouvez disposer d’une organisation Zpip ou Z, Zcore et Thèmes plus performante pour vos travaux : Passer à Zpip (pratique).
Si le site a une architecture classiques entete+contenu central+colonne(s)+pied de page, utilisation de z-core comme framework de création des templates.
Si tu manques de temps (budget réduit, soyons clair), alors il faut utiliser un squelette par défaut (et bien le connaitre pour aller vite) alors z-dist et SPIPr sont d’excellents départs car ils sont basés sur un framework de type layoutgala très souple

SPIP permet vraiment de générer n’importe quel rendu, et d’en changer uniquement avec les CSS [2] il faut en profiter !!


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

[1Il est parfaitement possible de s’en affranchir et construire le site différemment.

[2Connaissez-vous CSS Zen Garden ?


Liens visibles seulement pour les inscrits.

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

Répondre à cet article