Jeu de squelettes « EXIBIT »

Mise à jour 08/01/2010 : version 2.0.1

  • debug du squelette « article.html »

Démo visible ici : http://spip.exibit.be

1. Présentation

Les « Squelettes Exibit » ont été spécialement développés comme une base stable, à la structure sémantique et respectueuse des standards pour démarrer un travail de customisation graphique et de mise en page. Ils possèdent de nombreux atouts de base laissant aux auteurs SPIP une grande souplesse dans la mise en page de leurs contenus.

Les « Squelettes Exibit » (license MIT) disposent d’un jeu de CSS qui permet aux webdesigners de développer un habillage laissant libre champ à leur créativité (pour autant qu’on maitrise le CSS). Il est donc surtout à destination des webdesigners soucieux de développer un habillage sur mesure pour leur projet mais en utilisant une base XHTML-CSS stable et valide.

Les « Squelettes Exibit » sont adaptés à de petits et moyens sites pour associations, petites entreprises. Si le site grossit ou si des plugins SPIP doivent être ajoutés par la suite, ils peuvent facilement évoluer.

Ces squelettes SPIP possèdent les caractéristiques suivantes :

  • valides XHTML 1.0 Transitional
  • librairie Javascript « FANCYBOX » permettant l’ouverture de contenu dans des fenêtres (la galerie photos fonctionne avec cette librairie) qui se base elle-même sur Jquery, natif dans les dernières versions de SPIP
  • mise en page des rubriques par mots-clés
  • galerie photos avec création automatique d’onglets et visionneuse
  • Squelettes fonctionnels
    • 404 (page d’erreur en cas de contenu non trouvé)
    • article : visite du site par article
    • rubrique : visite du site par rubrique (menu)
    • recherche : page de résultats de la recherche
    • plan : plan du site
    • sommaire : page d’accueil du site
    • toutes les zones de la pages sont stockées dans un sous-répertoire « include » (menu à 3 niveaux, pied, entête, ...)
  • Une CSS générale et des CSS particulières pour les navigateurs capricieux :
    • Internet Explorer 7
    • Internet Explorer 6

2. Configuration

2.1. MISE EN PAGE AVEC LE PLUGIN « COMPOSITION »

Depuis la version 2.0. les différentes mises en page sont gérées gràce au plugin « composition ». Cela signifie principalement que les différentes mises en page de rubriques et articles sont cette fois isolées dans un sous-répertoire de « squelettes » appelé... « compositions ». On y retrouve donc l’ensemble des mises en page à savoir :

  • affichage des articles en deux colonnes (les articles qui vont dans la colonne de droite doivent être taggé par un mot-clé)
  • affichage par numéro d’articles du titre + introduction + lien ’lire plus’" (si on utilise le chapeau, il remplace l’introduction automatique de SPIP)
  • « affichage par date de publication + introduction + date + lien ’lire plus’ »
  • « affichage par numéro d’articles des articles en entier+ affichage des onglets des images contenues dans l’article avec lien vers visionneuse FancyBox » (galerie photos)
  • « affichage des article en menu déroulant » (JQuery UI)
  • « affichage des articles en onglet » (JQuery UI)
  • affichage en mode blog", les articles s’affichent par ordre chronologique de publication + nombres de commentaires associés à l’article.

Par défaut les articles s’affichent en entier l’un en dessous de l’autre par numéro d’article.

Pour configurer ce système, voici la procédure :

Il faut donc en premier lieu télécharger le plugin Composition

Plus besoin désormais comme dans les précédentes versions d’associer des mots-clés aux rubriques, on gagne du temps !

Il suffit dans SPIP de sélectionner la composition depuis le menu qui apparait dans la colonne de gauche dans l’apercçu SPIP d’une rubrique ou article.
Il est donc très aisé de créer de nouvelles compositions au besoin.

Exception : pour la mise en page sur deux colonnes, il faut quand même créer un groupe de mot-clés intitulé par exemple « mise en page articles » dans lequel vous créer un mot-clé appelé « colonne de droite » (dans le squelette, le n° de mot-clé défini est le « 5 »). La procédure est donc

  1. Associer la composition « 2 colonnes » à la rubrique,
  2. Associer le mot-clé « colonne de droite » aux articles qui doivent figurer dans la colonne de droite (par défaut il sont dans la colonne de gauche ou colonne principale)

2.2. Le mode « galerie photos »

Si ce n’est pas encore fait dans la console de configuration de « SPIP », vous devez activer dans « fonctions avancées » une des méthodes de fabrication des vignettes (GD2 recommandée, à voir avec l’hébergement)
le création des vignettes fonctionne avec un masque PNG placé à la racine du répertoire principal « masque.png ». Vous pouvez en modifier la taille via un logiciel d’édition image au besoin

La visionneuse fonctionne avec la librairie Javascript « Fancybox » basée sur JQUERY (natif sur la version 2 de SPIP, il faut donc bien placer la balise #INSERT_HEAD entre les balises « head », OK dans les squelettes Exibit). Vous pouvez éditer les styles graphiques de celle-ci dans le répertoire « css »

Pensez à donner un titre à vos images ainsi qu’une description, il apparaitront dans la visionneuse

Dans les rubriques qui fonctionnent avec la composition « galerie photo », ils n’est pas nécessaire de positionner les images importées dans les articles au moyen des balises SPIP «  ». Si vous en avez malgré tout besoin, sachez que la boucle gère les doublons et que l’image n’apparaitra pas deux fois.

2.3. Mise en page par onglet et en menu déroulant

Celles-ci se font grâce à la librairie JQuery UI. Les articles se classent en onglet par numéro de titre. A noter que dans le répertoire « javascript », il y a un fichier appelé « application.js » qui gère les configuration particulières des différentes librairies javascript installées. Au moyen de la documentation officielle, il vous est donc possible d’ajouter des options d’affichage comme par exemple la rapidité d’ouverture des fenêtres Fancybox, l’effet de transition au changement d’onglet, etc.

2.4. CSS

  • La CSS mise à dispo est ultra basique. Les zones de mises en pages principales sont entourées d’une bordure grise afin que vous puissiez clairement visualiser celles-ci.
  • L’objectif est bien entendu que les graphistes puissent développer sur cette base un CSS enrichie laissant libre champ à leur créativité
  • Les images nécessaires à l’habillage du site seront idéalement stockés dans le répertoire « images »

2.5. DIVERS

  • Le lien « mentions légales » (obligatoires dans de nombreux pays) dans le pied de page est à activer (vers l’article que vous créerez)
  • Des styles dans la CSS sont prévus pour certains plugins comme par exemple « Forms & Tables »
  • Fonctionne avec SPIP 1.9.2 (la galerie photo non vérifiée) et SPIP 2.0

3. Aperçu

Vous pouvez consulter le site démo : http://spip.exibit.be
Reste à vous appliquer dans la CSS ;-)

4. Archives à télécharger

update : 29/07/2009

Squelettes Exibit 2.0.1

Discussion

Aucune discussion

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