Squelette Post-IT (version spip 1.8)

Le Squelette Post-Ip propose une présentation originale de vos rubriques, de vos nouveautés, de vos liens, ... sous la forme de Post-It affichés à l’écran.

Présentation

ecran principal

Le squelette Post-IT est constitué d’un ensemble de post-it réparti sur l’écran. 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 ;
    • 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

Site exemple : http://www.papanicola.info/post-it/

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.

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.

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

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 (modifier la recherche google avec vos paramètres)
      • le post les dernières nouvelles du web
      • le bloc-note
      • le bloc google (à modifier avec vos paramètres google,)

Organisation de la page

L’organisation de la page est gérée dans le squelette post-it.html, celui-ci est inclus dans les pages sommaire.html, rubrique.html, article.html, ...

Le source est partiellement décrit ci-dessous.

<div class="colonne">
<BOUCLE_exclus(RUBRIQUES) {tout}{titre_mot=exclusion}{doublons exclus}> </BOUCLE_exclus>
<BOUCLE_secteur(RUBRIQUES){racine}{doublons exclus}>
 <INCLURE(page.php3){fond=post-supp}{post=#COMPTEUR_BOUCLE}{note}{id_article}>
<B_liste>
<div class="module">
<div class="moduleframe">
     <div class="moduleHeader">
          <div class="title"><a href="#URL_RUBRIQUE" > [#COMPTEUR_BOUCLE - (#TITRE|supprimer_numero)]</a></div>
     </div>
     <div class="moduleContent">
          <ul>
          <BOUCLE_liste(ARTICLES){id_secteur}{0,7}{!par date}>
          <li><a href="#URL_ARTICLE" [title="(#DESCRIPTIF|supprimer_tags|attribut_html)"]> [(#TITRE|supprimer_numero)] </a></li>
          </BOUCLE_liste>
          </ul>
     </div>
</div>
</div>
</B_liste>

[(#TOTAL_BOUCLE|divise{3}|=={#COMPTEUR_BOUCLE}|?{' ',''})  </div><div class="colonne">]

[(#TOTAL_BOUCLE|divise{1.5}|=={#COMPTEUR_BOUCLE}|?{' ',''}) </div><div class="colonne">]

</BOUCLE_secteur>
</div>

Cette boucle liste les rubriques secteurs (sauf les rubriques associées au mot clef « exclusion »), et affiche pour chacune d’elles la listes des derniers articles de la branche concernée.

L’affichage en colonne est réalisée grace à la contrib Affichage en colonnes sans tableaux ni doublons

Les Post-it supplémentaires sont intégrés par la commande

<INCLURE(page.php3){fond=post-supp}{post=#COMPTEUR_BOUCLE}{note}{id_article}>

L’INCLURE charge le fond « post-supp » en lui passant les différents paramètres utiles

  • l’id_article, et note sont utiles pour la gestion du post bloc-note (affichage du forum associé à l’article correspondant)
  • post contient lui la valeur courante de la boucle, c’est ce paramètre qui va permettre d’organiser l’affichage des autres post-it.

Le squelette post-supp est détaillé ci-dessous.

[(#ENV{post}|=={1}|?{' ',''})<INCLURE(page.php3){fond=post-edito}>]
[(#ENV{post}|=={6}|?{' ',''})<INCLURE(page.php3){fond=post-google}>]

[(#ENV{post}|=={3}|?{' ',''})<INCLURE(page.php3){fond=post-liens_syndic}>]
[(#ENV{post}|=={5}|?{' ',''})
            [(#ENV{note}|=={1}|?{' ',''})
                                   <INCLURE(page.php3){fond=post-message}{id_article}{delais=1}>]
            [(#ENV{note}|<>{1}|?{' ',''})
                                   <INCLURE(page.php3){fond=post-bloc-notes}{delais=1}>]
]
[(#ENV{post}|=={2}|?{' ',''})<INCLURE(page.php3){fond=post-recherche}>]

Dans ce squelette on retrouve plusieurs fois

[(#ENV{post}|=={1}|?{' ',''})<INCLURE(page.php3){fond=post-edito}>]

qui se traduit par si la valeur de la variable d’ENVironnement « post » est égale à 1, alors INCLURE le post-edito.

Seul le post relatif au bloc note est différent puisqu’il faut soit afficher le message, soit le forum pour saisir le message.

Pour organiser votre page, il suffit donc d’éditer ce squelette et de le modifier en conséquence, vous pouvez faire le test en modifiant les différentes valeurs des tests.

Quelques remarques :

  • plusieurs post-it peuvent avoir le même numéro, ils seront affichés successivement ;
  • l’ordre des post importe peu (sauf s’ils ont le même numéro) ;
  • les post-it supplémentaires sont affichés après le post-it normal, l’équilibre des colonnes ne tient pas compte de ces post-it.
  • la couleur du fond et des post-it et des fenêtres peut être modifiée dans la feuille de style post-it.css (rechercher les couleurs aqua, orange, pink et purple)

Mise à jour


-  -1/03/2006 - Version post-it 1.2

  • modification menu
  • modifacation css
  • modification Header

Dernière modification de cette page le 9 février 2019

Discussion

3 discussions

Ajouter un commentaire

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