Variations sur la dist : des clefs pour personnaliser son site

Une rubrique d’exemples pour mieux comprendre comment personnaliser les squelettes proposés par défaut avec SPIP 1.9.

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].

Variation sur la dist - exemple
source : peupleloup.info

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.

Variation sur la dist - exemple

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 !

Le chantier « Fraichdist »

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 »

Notes

[1Le moyen le plus pratique est de partir de copies de fichiers de la dist pour vos personnalisations à placer dans votre dossier « squelettes »

[2A propos de la courbe d’apprentissage de SPIP, voir ce message historique d’ARNO, un des créateurs de SPIP, sur la liste spip-dev (à remettre dans le contexte de l’époque bien sûr). Voir aussi l’analyse fort pertinente de diala

[3Pour illustration le squelette 2007 de SPIP-Contrib est développé ainsi petit à petit à partir de la dist

[4La difficulté, pour qui débute à vouloir faire son site, est que beaucoup de notions nouvelles sont en jeux, qui dépassent d’ailleurs souvent le seul cadre de SPIP, et concernent autant le fond que la forme : analyse de ses besoins propres, créer et structurer le contenu, notions d’ergonomie de graphisme ou de mise en page, contraintes techniques spécifiques au web, animation éditoriale, maîtrise des outils, hébergement, etc ... aussi il est important de faciliter ce contact autant que faire ce peut, mais sans créer pour autant de situation bloquantes pour l’avenir

Discussion

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

  • 7

    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

    • Joseph TUX

      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

      view style informations - Ctrl+Maj+Y

      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

    • Julien Falconnet

      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.

    • Julien Falconnet

      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.

    • Julien Falconnet

      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

    • Joseph Tux

      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,

      • w => encadre le degré de conteneur supérieur ( conteneur du conteneur )
      • n => retour au niveau précédent
        • Dans le coin du conteneur : le marqueur ( « p » ou « div, class : text_introduction » par exemple )
      • v = view source : montre le source correspondant à la selection (dans un cadre et non dans une ligne comme le fait web developper )

      D’autres commandes ( H = help affiche ou cache le menu ) sont utiles pour tester ses modifications ( avec l’éditeur css ) :

      • r= remove : supprime la sélection
      • i= isolate : supprime tout sauf la sélection ( utile pour imprimer par exemple )
      • b= black-and-white,
      • c=colorize,
      • p=paste,
      • u=undo
      • q= quitte Aardvark, mais laisse la fenêtre de code ouverte.
      • etc..

      Léger, rapide, simple et parfaitement lisible pour un mal_voyant comme moi !

    Répondre à ce message

  • lukilooke

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom