C’est quoi la « dist » ?
La dist
La « dist » est le jeu de squelettes par défaut proposé avec la distribution standard de SPIP. Volontairement d’apparence très sobre, ces squelettes sont en fait très riches en possibilités, en phase avec les derniers développements de SPIP (puisque la dist fait partie du Core de SPIP), très structurés au niveau du code, conformes aux standards du web, et souvent pédagogiques (les boucles de SPIP, les feuilles de style CSS, par exemple).
Pouvoir modifier progressivement
Une possibilité remarquable (et pas toujours bien comprise) c’est que du fait de dispositions du code de SPIP associées à cette dist, il est possible de personnaliser son site pour un effort raisonnable et progressif. Créez, s’il n’existe pas déjà, un répertoire dénommé très exactement « squelettes » à la racine de votre site, et glissez y les seuls éléments de squelettes que vous souhaitez modifier (par exemple votre bandeau de tête, ou votre feuille de style, ou sommaire.html, etc ...). SPIP comprendra tout seul qu’il doit prendre en compte ces éléments en priorité, et pour tout ce qui manque ira automatiquement piocher dans la dossier de la dist.
Le point « très » important qui en découle est que, si vous avez fait l’effort de respecter l’organisation de la dist (les conventions de noms, la structure des pages et des inclusions, etc ..) lors de vos adaptations [1], vous bénéficiez dès le départ d’un site à la fois complètement opérationnel et à la fois personnalisé, sans avoir à tout créer. Dès lors vous pourrez progressivement l’adapter au fur et à mesure de votre apprentissage et de la découverte de vos besoins, le tout bien sûr sans remettre en cause vos données (puisque celles-ci sont dans la base de données, séparées des informations de mise en forme).
Une courbe d’apprentissage progressive
C’est la notion de courbe d’apprentissage progressive chère aux développeurs de SPIP [2], qui demande certes un peu d’effort dès le départ, mais en contrepartie permet de maitriser son site, et évite ensuite les pics brutaux de compétences nécessaires qui peuvent bloquer toute évolution [3].
A propos des CSS de la dist
La documentation de référence offre tout ce qui est nécessaire pour personnaliser votre site à partir de la dist :
- l’adaptation des boucles : Boucles et balises : manuel de référence
- La documentation officielle pour l’adaptation de vos styles : Habillage graphique « Pour réaliser l’habillage de votre site, il est recommandé d’utiliser les feuilles de style CSS. Pas de panique, ces quelques pages permettront aux débutants de raccrocher les wagons... »
- Des compléments sur l’organisation des pages de la dist : Modèle de mise en page, Quelques lignes directrices..., À propos du style dans les formulaires de Spip
- les contributions de SPIP-Contrib bien sûr (dont le le contenu de la présente rubrique)
Il va de soi, qu’un minimum de compréhension de ce que sont les feuilles de style CSS est nécessaire, mais cela dépasse le seul cadre de SPIP
Variations sur la dist - Une rubrique d’exemples commentés
Cependant il faut avouer que pour un débutant (au web ou à SPIP) cette documentation, si elle n’est pas accompagnée, est un peu rude comme premier contact de par sa densité [4].
L’objectif de cette rubrique « Variations sur la dist » est justement de proposer des exemples commentés de tels travaux.
Cette rubrique étant avant tout destinée aux nouveaux venus, aussi l’approche sera le plus didactique possible. Il ne s’agit pas ici de refaire une documentation générale déjà existante par ailleurs (poser des liens dessus sera utile par contre), mais plutôt d’expliquer le pas à pas de certaines modifications apportée à la dist, et restant dans le cadre de celle-ci.
Pour en savoir plus
Des chantiers en germe
L’organisation de la dist porte aussi en germe d’autres évolutions, mais qui sortent du cadre de cet article. Exemple de recherche associée : le Plugin Sktheme, voir aussi Et maintenant ? rhabillons la dist !
Petit historique
Pour mémoire rappelons que la dist actuelle (juin 2007) est issue du projet « FraichDist ». Cette démarche illustre bien les apports possibles, et parfois imprévisibles au début, que l’on peut faire au projet SPIP. Quelques liens pour en savoir plus :
- le rappel historique d’ensemble : Bye-bye FraichDist !
- le logo du présent article est celui du projet « FraichDist »
Discussions par date d’activité
4 discussions
Bonjour,
juste pour signaler que ce site est lui aussi une variation de la dist. Tout a commencé sur la 1.9 et se poursuit dorénavent sur la 1.9.2d.
De nombreux plugins et quelques ajouts persos et manuelsplus tard, voilà le résultat.
D’ailleurs, je cherche une bonne âme qui voudrait bien m’aider à transformer le menu déroulant en plugin pour que tout le monde puisse en profiter...
Merci
Répondre à ce message
C’est juste histoire de signaler que la dist associé à SPIP 1.9.3 évolue fort bien en terme de graphisme (sans perdre ses qualités techniques bien au contraire). C’est visible dès à présent sur le site de Démo de SPIP en version SVN : http://demo.spip.org/svn/.
C’est donc un site déjà très présentable qui est dorénavant disponible dès l’installation. Cela renforce encore plus l’intérêt de l’option de personnaliser petit à petit son site sur ces bases.
@+ NicolasR
Répondre à ce message
Cette initiative m’intéresse, je sui moi-même très débutant sur SPIP, mais aussi en CSS.
Ne pourrait-on pas avoir un petit dessin indiquant quel type de bloc se trouve où sur les pages ?
Exemple : j’ai suivi le fil proposé, et je bute sur ce qu’est un contre-encart (et ce qu’est un encart).. Résultat : je suis incapable de comprendre la suite de cet article.
Le moteur de recherche de SPIP-Contrib donne 319 articles sur ce sujet ...
Merci.
Didier
je serai également preneur de la décomposition de la structure d’un site spip.
Tel fichier de /dist fait quoi
Il existe un plugin Firefox qui fait cela très bien : là où se trouve le curseur, l’élément est encadré et le code correspondant mis en évidence dans une fenêtre de code
Je ne sais plus lequel c’est mais la liste de mes plugins sur Firefox est la suivante :
Web developper
Xml developper
Greasemonkey
Firebug
Je crois que c’est l’un de ces 2 derniers : dans la barre de menu ajouté par ce plugin, un onglet « css » et une commande
ouvre une fenêtre affichant le code css, encadre l’élément sous le curseur, un clic affiche dans la fenêtre css le code correspondant dans la feuille de style
CTRL MAj Y c’est web developer (je peux plus m’en passer pour mes analyses de site web et je le recommande TRES fortement aux débutants CSS, ça vous fera gagner des semaines de lecture*).
Je suis justement en train, d’essayer de mettre mes doigts dans la structure de la dist, pour essayer de me faire une idée claire de son organisation, je fais des schémas mais sur papier pour l’instant. Si ça intéresse vraiment quelqu’un je peux essayer de les faire pour le net...
*Et essayez aussi le DOM inspector de Firefox, c’est le bonheur.
Je vous donne rapidement un résumé de mes découvertes :
Je pars du principe qu’on peut diviser le html généré par la partie publique en 2 parties :
- ce qui est écrit dans les squelette (partie statique des patrons)
- ce qui est générés, par exemple par les boucles (partie dynamique des patrons)
En effet quand on écrit un squelette on peut décider que le texte sera dans un < div class="masuperclassecss"> mais les paragraphaphes du texte en question seront générés par une boucle qui mettra chaque paragraphe dans un < p class="spip">, chaque lien sera au choix un < a ... class="spip_out"> ou un < a ... class="spip_in"> etc...
CSS :
spip_style.css : correspond au code généré par spip (sans doute le résultat des boucles ; hors squelette y compris DIST). Ce qui est défini dedans DOIT être défini pour avoir un affichage normalisé (on peut le redéfinir, mais faut que ce soit défini). Correspond à la partie dynamique.
habillage.css : correspond normalement à la partie squelette(statique), en pratique il redéfini quasiment tout ce qu’il y a dans spip_style. Comme il est appelé en dernier c’est lui qui a la priorité. Il définit en particulier tous les ids et classe de positionn-ement ( #entete, #contenu, # page, #pied,#encart,#contreencart etc..)
HTML :
J’ai trouvé 3 squelettes vraiment centraux : sommaire.html (la page d’accueil), rubrique .html (description d’une rubrique avec les liens vers les sous-rubriques et les articles), et article.html
Après il y en a plusieurs qui me semblent importants : plan.html (la page de plan du site), forum.html (pour les commentaires), site.html (pour les sites référencés).
Enfin, il y en a une foultitude de squelettes, j’en distinguerait 2 type :
- ceux qui correspondent à des pages que j’utilise pas (enfin je pense) dans mon site plutôt sommaire (mot.html, sommaire_texte.html etc).
- ceux qui sont fait pour être inclus dans d’autres squelette (en général ils commencent par inc-. Là aussi il y a ceux qui sont utilisés par mes pages (inc-entete, inc-head, inc-rubrique) et que je ne pense pas utiliser (inc-petition ?).
Le « problème » avec la richesse de spip et de son DIST, c’est que des pans entiers sont complètement ignorable avec une utilisation basique de SPIP (rubrique, article) et rentre en ligne de cause quand on se met à ajouter des morceaux (breves, site, calendrier). Donc si on a pas bien préparé son coup, on se retrouve avec un calendrier tout moche qu’il faut mettre en cohérence avec notre charte bien établie pour les parties simples.
En espérant avoir aidé un peu.
J’ai finalement mis en ligne un synthèse de mes notes sur la css de la dist. Il y a notamment des schémas de composition à jour sur la 1.9.2b.
Salut Julien
ton article est exactement une des choses ce que j’espérais voir apparaitre en lançant cette rubrique et cet article ... accepterais tu de le placer sur SPIP-Contrib (propose le dans la présente rubrique). Si oui je pense qu’il pourrait intéresser beaucoup de monde et trouver ainsi un écho large.
@+ NicolasR
Il y a aussi le pugin Firefox Aardvark, plus simple : de la même façon, le conteneur sous le curseur est encadré en rouge,
D’autres commandes ( H = help affiche ou cache le menu ) sont utiles pour tester ses modifications ( avec l’éditeur css ) :
Léger, rapide, simple et parfaitement lisible pour un mal_voyant comme moi !
Répondre à ce message
Je m’associe aux demandes précédentes sur la question de l’architecture générale du site et de la page sommaire...
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |