SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Outils pour squelettes > Variations sur la dist

Variations sur la dist - des clefs pour personnaliser son site

mardi 12 juin 2007, par NicolasR. Dernier ajout dimanche 9 décembre 2007


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


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

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

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

[2] A 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

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

[4] La 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


Répondre à cet article

  • 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

    Retour au début des forums

  • Variations sur la dist - Le nouveau graphisme de la dist

    2 décembre 2007 19:49, par NicolasR

    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

    Retour au début des forums

  • 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

    Répondre à ce message

    • je serai également preneur de la décomposition de la structure d’un site spip.

      Tel fichier de /dist fait quoi

      Répondre à ce message

      • 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

        Répondre à ce message

        • Variations sur la dist - des clefs pour personnaliser son site 1er août 2007 12:23, par 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.

          Répondre à ce message

          • Variations sur la dist - des clefs pour personnaliser son site 11 novembre 2007 15:28, par 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

      • Variations sur la dist - des clefs pour personnaliser son site 1er août 2007 13:05, par 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.

        Répondre à ce message

    Retour au début des forums

  • 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

    Retour au début des forums



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et vie SPIP-Contrib | SPIP | L'autre.net