Présentation
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, ...
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
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
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
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
Discussions par date d’activité
3 discussions
Bonjour,
Avez-vous une version .php à mettre en ligne ?
Merci encore pour ce travail.
le zip ne comporte que 4 fichiers .php3, il me semble qu’il suffit de les renommer pour que cela fonctionne (mais je ne suis pas sur de ma réponse)
Répondre à ce message
Encore un beau travail partagé, merci.
Une remarque juste, le bouton retour présent sur les fenêtres superposées n’est pas très visible, peut-être faudrait-il l’éclaircir.
Répondre à ce message
Bonjour,
Je ne dirai qu’un mot BRAVO.
Cordialement
merci
Re,
http://gea.iut-amiens.fr/siteGEA/
Encore merci, c’est exactement ce que je souhaitais. Je vais rajouter un post-it avec la version spip, celle de votre squelette avec leurs liens. Quel est votre
numéro de version ?
Cordialement
déja installé
on devrait lancer le concours du squelette le plus rapidement installe
avez-vous eu des pb d’installations
je n’ai pas défini de n° de version
A+
Re,
Aucun problème, une lettre à la poste !
Cordialement
Re,
J’ai un petit problème avec les brèves. Quel est leur mot clé ?
Cordialement
Comment mettre le post-it des brèves. Un petit « comment faire » pour les nuls ?
Cordialement
en fait j’ai oublié le post-it breves
il faut le créer en prenant pour exemple celui des articles
j’y travaille demain
A+
Bonjour,
Les brèves me semblent attachées aux rubriques. Afficher les brèves par rubrique ne me semble pas utile. Un seul post-it peut être consacré aux brèves(les 7 dernières) et la fenêtre des brèves indique l’URL de la rubrique.
Cordialement
je vais travailler dessus
merci de tes remarques
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 :
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.
Suivre les commentaires : |