Squelette Post-IT (version SPIP 1.9)

Le squelette Post-IT est constitué d’un ensemble de post-it répartis sur l’écran.

Présentation

ecran principal

Ces post-it sont de deux types :

  • la première série est constituée de la liste des rubriques secteurs réparties sur 3 colonnes, on retrouve pour chacun de ces post-it, un bandeau rappelant le nom du secteur puis la liste des derniers articles de la rubrique (on reconnait ces post-it au numéro)
  • la seconde série affichée en alternance avec la première regroupe des post-it spécifiques
    • l’édito : l’article associé à ce mot clef est affiché dans ce post-it ;
    • la galerie : une image au hasard est affichée dans le post galerie, cette image est extraite d’un des articles associé au mot clef galerie, en l’absence d’article avec le mot clef galerie, ce post-it n’est pas affiché ;
    • la recherche : ce post-it inclus la recherche spip, la recherche par mots-clefs, et par auteur, sur le site de démo, la recherche google a été ajoutée ;
    • les dernières nouveautés du site ;
    • les dernières nouvelles du web : on retrouve ici, la liste des derniers articles des sites syndiqués
    • le bloc-note : ce post-it (le nom du squelette vient de ce post-it) est un forum dont l’affichage est limité au dernier article, ce bloc-note est celui d’un article qui peut-etre vide auquel est associé le mot clef bloc-note (en l’absence de cet article, le post-it n’est pas affiché). en fonction du type d’autorisation pour le forum -modération à postériori, à priori, sur abonnement) de cet article, l’édition du bloc-note pourra être autorisé à tous les internautes ou uniquement aux inscrits.
    • les brèves ;
    • le bloc publicitaire google adsence ;
    • la recherche google
    • on peut-imaginer tout type de post-it à installer en alternance avec les autres.

-   Testé sur ces navigateurs

Testé ? Plateforme Navigateur Version
oui windows Internet explorer IE6
oui windows Firefox 1.5
non windows Mozilla 1.0.1 par exemple
non windows Phoenix .
oui windows Opera 8.5
non Mac Internet explorer .
Oui Mac Firefox 1.5
non Mac Netscape .
non Mac Chimera .
non Mac Mozilla .
non Mac Phoenix .
non Mac Opera .
Oui Mac Safari 1.3.2
non Unix/Linux Netscape .
non Unix/Linux Mozilla .
non Unix/Linux Phoenix .
non Unix/Linux Opera

Les squelettes rubrique.html,article.html, ...

Fenetre article

Ces différents squelettes sont constitués de deux parties,
-  la première est la page sommaire
-  la deuxième est la fenêtre d’affichage de l’article ( respectivement rubrique, breve, forum, ...), elle s’affiche par dessus le fond du sommaire (la classe de la fenêtre d’affichage comporte la propriété z-index).

On retrouve dans chaque fenêtre, une première colonne avec la liste des sous-rubriques (des articles, des mots, des liens,...) et dans la colonne principale, la description de la rubrique, le texte de l’article, le descriptif des liens syndiqués,...

Le bouton retour permet de fermer la fenêtre et de revenir au sommaire.

Tous les liens sous la fenêtre sont actifs.

Le menu

fenetre menu

le bouton Menu affiche une nouvelle fenêtre qui se superpose à toutes les précédente (propriété z-index de valeur supérieure)

Le menu est en fait le plan du site.

Login

fenetre login

Le bouton login affiche lui aussi une fenètre de login qui se superpose aux précédentes

Galerie de Photos

Fenetre galerie

Le squelette Post-It intègre une galerie de photos. On trouve dans la colonne de gauche, la liste des galeries disponibles sur le site et pour la galerie courante, 3 vignettes affichées. La navigation dans la galerie s’effectue soit en cliquant sur une des vignettes, soit sur suivant ou précédent. la photo sélectionnée est affichée dans la partie droite.

Une galerie de photos est en fait un article associé au mot clef galerie. Les images à afficher doivent être intégrées dans l’article en tant que documents et non en tant qu’images.

Installation et configuration

  • Installation

L’installation se limite à decompresser le zip ci-dessous et à recopier le répertoire squelettes à la racine de votre site spip. Il reste en suite à configurer et organiser les post-It.

  • Configuration
    • Création d’un article avec le mot clef « edito » qui s’affichera dans le premier post-it
    • création d’un article avec le mot clef « bloc-note » nécessaire pour autoriser l’affichage du bloc-note. Autoriser les forums de cet article.
    • création d’un ou plusieurs articles avec le mot clef galerie
    • création des post-it spécifiques à votre site, par défaut le squelette est livré avec
      • le post Edito
      • le post Nouveautés
      • le post galerie
      • le post recherche
      • le post les dernières nouvelles du web
      • le bloc-note
      • le bloc google (à modifier avec vos paramètres google,)
      • le post recherche-google (modifier la recherche google avec vos paramètres)

Organisation de la page

Les post-it décrivant chaque secteurs du site sont répartis sur trois colonnes, les post-i supplémentaires doivent être intercalés entre les précédent afin d’avoir un affichage « harmonieux » de tous les post-it.

L’organisation de la page est réalisée via un groupe de mot clefs.
-  vous devez créer un groupe de mot clefs avec le nom post-it

  • les mots clefs doit pouvoir être associés aux rubriques
  • il est préférable que seuls les administrateurs aient accès à ces mots clefs
    -  vous devez ensuite créer les mots clefs suivants
  • 1. edito
  • 2. recherche
  • 3. bloc-notes
  • 4. nouveautes
  • 5. galerie
  • 6. sites-syndic
  • 7. prop-site
  • 8. google
  • 9. recherche-google

-  vous devez ensuite affecter ces mots clefs aux rubriques secteur (c’est à dire les rubriques à la racine) de votre site en les répartissant « harmonieursement » sachant que

  • les post-it sont affichés avant la rubrique à laquelle est associé le mot clef correspondant
  • les post-it sont classés {par num titre}

-  Remarques

  • les numéros dans le nom des mots clefs ne sont utiles que pour classer les mots clefs à l’affichage
    • attention à l’écriture de chaque des mots clefs et du groupe de mots clefs.
    • chacun de ces mots clefs correspond à un post-it différent
    • il n’est nécessaire que de créer que ceux dont vous aurez l’utilité (si vous ne souhaitez pas proposer aux visiteurs de proposer un site, il est inutile de créer le mot clef prop-site de même si vous n’avez pas de compte google adsence, il est inutile de créer les deux mots clefs correspondants)

Création de nouveaux post-it

Le squelette est fourni avec un post-it vierge (post-vierge.html) que vous pouvez modifier pour afficher les informations de votre choix
-  les articles syndiqués d’une rubrique particulière
-  la liste des tags

A ce post-it sont associé la fenête fenetre-vierge.html et le squelette vierge.html

Pour afficher ce post-it
-  créer le mot clef 10. vierge dans le groupe post-it
-  associer ce mot clef à la rubrique racine de votre choix

A vous de créer vos post-it !

Structure du squelette post-it

Cette partie n’est pas utile pour installer et utiliser le squelette post-it, elle n’est destinée qu’aux développeurs de squelettes

Le squelette post-it est construit autour d’un squelette tronc ou squelette, le fichier squelette.html. ce squelette est inclus dans tous les autres squelettes (article, rubrique, sommaire,...) avec des paramètres caractérisant les éléments à affichés. Ainsi pour rubrique.html on a le code suivant :

<INCLURE{fond=squelette}{skl=skl_rubrique}{id_rubrique}>

c’est à dire une simple inclusion du fond squelette avec deux paramètres l’id_rubrique et skl_rubrique.

Pour article.html, on a

<B_type-article>
<BOUCLE_type-article(ARTICLES){id_article}{titre_mot=galerie}>
<INCLURE{fond=squelette}{skl=skl_galerie}{id_article}{id_document}>
</BOUCLE_type-article>
</B_type-article>
<INCLURE{fond=squelette}{skl=skl_article}{id_article}>
<//B_type-article>

Un squelette légérement plus compliqué puisque l’on doit gérer soit les articles normaux, soit les galeries photos

Le fichier squelette.html contient lui

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="#LANG_DIR" lang="#LANG">
<head>
<INCLURE{fond=header}{id_rubrique}{id_article}>
</head>
<body>

<INCLURE{fond=bandeau}{delais=1}>
<INCLURE{fond=post-it}{note}{id_article}>

<!--- Choix fond -->

[(#ENV{skl}|=={skl_rubrique}|?{' ',''})
  <INCLURE{fond=fenetre-rubrique}{id_rubrique}>
]
[(#ENV{skl}|=={skl_article}|?{' ',''})
  <INCLURE{fond=fenetre-article}{id_article}>
]
[(#ENV{skl}|=={skl_galerie}|?{' ',''})
   <INCLURE{fond=fenetre-galerie}{id_article}{id_document}>
]
[(#ENV{skl}|=={skl_breve}|?{' ',''})
   <INCLURE{fond=fenetre-breve}{id_breve}>
]
[(#ENV{skl}|=={skl_mot}|?{' ',''})
   <INCLURE{fond=fenetre-mot}{id_mot}>
]
[(#ENV{skl}|=={skl_auteur}|?{' ',''})
   <INCLURE{fond=fenetre-auteur}{id_auteur}>
]
[(#ENV{skl}|=={skl_forum}|?{' ',''})
   <INCLURE{fond=fenetre-forum}{id_article}{id_forum}>
]
[(#ENV{skl}|=={skl_recherche}|?{' ',''})
   <INCLURE{fond=fenetre-recherche}{recherche}>
]
[(#ENV{skl}|=={skl_article-syndic}|?{' ',''})
   <INCLURE{fond=fenetre-article-syndic}{id_syndic_article}>
]


<!-- menu et login -->

[(#ENV{menu}|=={1}|?{' ',''})
  <INCLURE{fond=menu}>
]
[(#ENV{login}|=={1}|?{' ',''})
  <INCLURE{fond=login}>
]

<div class="alaligne"> </div>
<INCLURE {fond="pied-de-page"}>

#SPIP_CRON
</body>
</html>

On le voit, ce squelette ne comporte aucune boucle spip, il ne comporte que la structure de la page et un grand nombre d’inclusions conditionnelles de la forme

(#ENV{skl}|=={skl_rubrique}|?{' ',''})
  <INCLURE{fond=fenetre-rubrique}{id_rubrique}>
]
[(#ENV{skl}|=={skl_article}|?{' ',''})
  <INCLURE{fond=fenetre-article}{id_article}>
]
[(#ENV{skl}|=={skl_galerie}|?{' ',''})
   <INCLURE{fond=fenetre-galerie}{id_article}{id_document}>
]

ces tests se lisent
-  Si skl=skl_rubrique Alors Inclure fenetre_rubrique
-  Si skl=skl_article Alors Inclure fenetre_article
-  Si...

On le voit, en fonction du résultat de chaque test, l’inclusion correspondante est réalisée et la page correspondante est calculée.

L’intérêt de cette structure est de limiter la maintenance de la feuille de style à un seul fichier. les contenu sont eux gérés dans chaque fichier inclus.

Discussion

Une discussion

  • 2
    Chbarret

    Bonjour,
    Superbe squelette, mais est-il possible que le navigateur retienne l’état (ouvert ou réduit) et la position des post-it d’une session à l’autre ?

    • je ne sais pas encore faire, si tu sais, n’hésite pas à modifier le source sur la zone

      A+

    • chbarret

      Bonjour,
      Non, je ne sais pas faire, mais je me demandais si je n’avais pas raté qlq chose.
      Par ailleurs, c’est sans doute utile au visiteur qui pourrait retrouver le site dans la configuration où il l’avait quitté.

    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