Mon site SPIP

Evolution du squelette Post-It

Papanicola Robert — 2007-05-03T06:42:11Z

Le squelette Post-It est en cours de transformation, il passe au Web2. Je suis en train de la faire évoluer en utilisant la bibliothèque Jquery/interface.

Cette nouvelle version intègre déja :
les "boites triables"
les fenetres flottantes
la galerie "imagebox"
le menu accordéon

Le squelette n'est pas encore finalisé, il reste encore
la gestion du bloc-note (j'hésite entre l'utilisation d'un wiki spip limité à une rubrique et le fonctionnement précédent utilisant un forum)
la mémorisation de la disposition des fenètres des lors des différentes visites d'un internaute (je ne sais pas faire et j'attends votre aide)
...

Le squelette est disponible sur la zone via svn ou en téléchargeant le zip.

N'hésitez pas à le modifier et à le faire évoluer.

Grafcet avec Pgf/Tikz

Papanicola Robert — 2007-03-24T20:00:10Z

Utilisation

L'objectif de la librairie GRAFCET est de permettre le tracé de grafcet selon la norme EN 60848 (la norme est disponible à l'achat sur le site de l'ISO, le document préparatoire à la norme est accessible à l'adresse http://tc3.iec.ch/txt/3b256.pdf ).

Exemple typique

On retrouve dans le graphe ci-contre les principaux éléments graphiques de la librairie GRAFCET

La commande associée à chaque élément graphique est explicite :

\Etape[VT100]110 pour dessiner une étape après la transition T110 avec le numéro 110 ;
\Transition[VX120]120 pour dessiner une transition après l'étape X120, cette transition est référencée 120 ;
\EtapeInit[0,0]100 pour dessiner une étape initiale au point (O,O) avec le numéro 100 ;
\ActionXX110Sortir A pour associer l'action Sortir A à l'étape X110 ;
\ReceptT100$dcy \cdot a_0$ pour associer la réceptivité dc y · a0 à la transition T100 ;
\LienRetourT120X100 pour tracer le lien orienté de la dernière transition vers l'étape initiale.

exemple complexe

Il est bien sûr possible de tracer des grafcets plus complexe comme le suivant avec encapsulation

avec le code suivant :

\begin{tikzpicture} \EtapeInit[0,0]{D1} \Transition{D1} \DecaleNoeudx[-4]{TD1}{b1} \DecaleNoeudx[-4]{VTD1}{Vb1} \ConvOU[-2]{TD1}{b1}{b2} \Etape[b2]{A6} \DivOU{XA6}{-1/b3,8/b4} \Transition[b3]{A6-a} \Transition[b4]{A6-b} \EtapeEncapsulante[VTA6-a]{F1} \DivOU{XF1}{-1/b5,4.5/b6} \Transition[b5]{F1-a} \LienRetour[2]{TF1-a}{Vb1} \Transition[b6]{F1-b} \ConvOU[2]{TF1-b}{TA6-b}{b7} \DecaleNoeudx[11]{XD1}{liens} \DecaleNoeudy[-1.5]{b7}{b7} \Lien{b7}{liens}{XD1} \Recepts{ D1/$\overline{BPAU}\cdot S_{manu}$, A6-a/$z \cdot S_0 \cdot S_{auto}$, A6-b/$BPAU$, F1-a/$S_{manu}$, F1-b/$BPAU$ } \SequenceET[7,-2]{0,1} \LienRetour[4]{T1}{X0} \EtapeEncapsulante[X1]{1} \LienActivation{X0} \Recepts{ 0/$Dcy$, 1/$X44$} \DecaleNoeudx[-5]{X0}{coin1} \DecaleNoeudy[-4]{coin1}{coin1} \DecaleNoeudx[5]{X1}{coin2} \DecaleNoeudy[5]{coin2}{coin2} \CadreEncap{coin1}{coin2}{F1}{GM} \SequenceEE[-1,-9]{20,21,22}{23} \ActionRecept{20/VA/$a$, 21/VB/$b$, 22/VC/$z$} \LienActivation{X20} \DecaleNoeudx[-4]{X20}{coin1} \DecaleNoeudy[-3]{coin1}{coin1} \DecaleNoeudx[7]{X23}{coin2} \DecaleNoeudy[3]{coin2}{coin2} \CadreEncap{coin1}{coin2}{1}{Dosage} \SequenceEE[5,-9]{30,31,32}{33} \ActionRecept{30/MT/$DP$, 31/MT/$\overline{DP}$, 32/MT/$DP$} \LienActivation{X30} \DecaleNoeudx[-4]{X30}{coin1} \DecaleNoeudy[-3]{coin1}{coin1} \DecaleNoeudx[7]{X33}{coin2} \DecaleNoeudy[3]{coin2}{coin2} \CadreEncap{coin1}{coin2}{1}{Amenage} \SequenceEE[10,-7]{40,41,...,43}{44} \LienActivation{X40} \ActionRecept{42/MP+/$S_1$, 43/MP-/$S_0$} \Recept{T40}{$X23\cdot X33$} \ActionX{X41}{MR} \Recept{T41}{$t_1/X41$} \Action{X43}{MR} \DecaleNoeudx[-4]{X40}{coin1} \DecaleNoeudy[-3]{coin1}{coin1} \DecaleNoeudx[9]{X44}{coin2} \DecaleNoeudy[3]{coin2}{coin2} \CadreEncap{coin1}{coin2}{1}{Malaxage} \end{tikzpicture}

Pour plus d'info, télécharger le pdf

Installation

télécharger le zip
installer le fichier grafcet.sty dans vos packages persos, remettre à jour la base des packages
appeler le package dans votre entete : \usepackagegrafcet

NB : vous devez avoir installer une version à jour de pgf/tikz

Proposition de structure des squelettes SPIP

Papanicola Robert — 2007-03-18T19:40:20Z

La structure actuelle

La commande et la nouvelle balise #INCLURE permettent la modularisation des squelettes Spip. Ces commandes permettennt de mettre en œuvre la notion de noisette chère à de nombreux développeurs Spip (SpipKits, monter son squelette en kit ) mais aussi Coder ses squelettes avec des INCLURE.

En poussant à l'extrème, un squelette type pourrait avoir la structure suivante (exemple de rubrique.html) :

\\ < head > \\ < INCLURE\{ fond = header\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad header \\ < /head > \\ < body > \\ < div\quad class = ''entete'' > \\ < INCLURE\{ fond = entete\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad entete \\ < /div > \\ < div\quad class = ''menu'' > \\ < INCLURE\{ fond = menu\} \{ id\_rubrique\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad menu \\ < /div > \\ < div\quad class = ''contenu'' > \\ < INCLURE\{ fond = contenu\} \{ id\_rubrique\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad contenu \\ < /div > \\ < div\quad class = ''pied'' > \\ < INCLURE\{ fond = pied\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad pied \\ < /div > \\ < /body > \\ < /html > \\ \end{array} " title=" \begin{array}{l} < html > \\ < head > \\ < INCLURE\{ fond = header\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad header \\ < /head > \\ < body > \\ < div\quad class = ''entete'' > \\ < INCLURE\{ fond = entete\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad entete \\ < /div > \\ < div\quad class = ''menu'' > \\ < INCLURE\{ fond = menu\} \{ id\_rubrique\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad menu \\ < /div > \\ < div\quad class = ''contenu'' > \\ < INCLURE\{ fond = contenu\} \{ id\_rubrique\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad contenu \\ < /div > \\ < div\quad class = ''pied'' > \\ < INCLURE\{ fond = pied\} \cdot \cdot \cdot \cdot \cdot \cdot > Noisette\quad pied \\ < /div > \\ < /body > \\ < /html > \\ \end{array} " />

Dans chaque

du squelette, on insère la noix ou la noisette qui va bien, :
entre les balises ...
dans le

dans le

....

Dans cette structure, chaque fichier squelette : sommaire.html, rubrique.html, article.html, etc. est une coquille dans laquelle on insère noix et noisette, on constate alors rapidement que pour un site classique tous ces fichiers ont la même structure (feuille de style deux ou trois colonnes avec un bandeau et un pied de page) et qu'il serait judicieux de n'avoir à maintenir qu'un seul fichier plutot que ces n fichiers d'où la proposition de structure qui suit.

Proposition

la structure des pages web est décrite dans un fichier squelette unique : squelette.html, le [*tronc*] du site
les fichiers squelettes de base (sommaire, rubrique, article,...) appellent tous un même squelette avec les paramètres nécessaires

* pour rubrique.html * pour article.html * ....

le squelette squelette.html inclue différents contenus en fonction des paramètres transmis la structure pouvant être la suivante

* en fonction du paramètre (#ENVskl passé par l'url, le squelette squelette.html va inclure des « noisettes » différentes

Avantages de la structure

Spip par essence permet de dissocier le fond de la forme, cette structure permet de prolonger cette notion, la forme (le style) est géré par le fichier squelette.html, le contenu par chacune des noisettes incluses (les boucles élémentaires).

L'avantage principal est ici la modularité, cette modularité facilitant la maintenance et l'évolution du site.

Un autre avantage est d'utilser les fichiers rubrique.html, article.html pour effectuer facilement des choix de squelette ainsi, si on souhaite pour certain articles afficher une galerie au lieu de l'article normal il suffiet de définir une nouvelle valeur pour skl comme sur le site.

Le fichier article.html contient :

On voit que l'on passe soit le paramètre skl_article soit skl_galerie en fonction du mot clef galerie.

Sites exemples

sites en fonctionnement

squelette	lien vers squelettes.html	Remarques
post-it	squelette.html	Compte tenu de la forme de ce squelette, les div sont incluses dans les noisettes
S.I.I	squelette.html	Ici, le choix des noisettes à inclure se fait soit en fonction du paramètre skl, soit de l'id
Diapospip	squelette.html	squelette élémentaire utilsant la structure proposée
Lycée Jacques Amyot	squelette.html
Lou Salomé	squelette.html

Un pastis bien frais

Papanicola Robert — 2007-01-09T08:47:47Z

Schéma-blocs avec PGF/TIKZ

Papanicola Robert — 2007-01-03T14:25:44Z

Les macros suivantes permettent de faciliter le dessin de schéma-blocs (block-diagram), elles s'appuient sur le package pgf et les macros tikz.

Les macros ont été adaptées à partir des exemples d'utilsation de la librairie tikz de Kjell Magne Fauske et principalement : http://www.fauskes.net/pgftikzexamples/tag/block-diagram/.

Utilisation typique

L'utilisation typique de cet ensemble de macro-commandes est produire des schéma-blocs tel celui présenté sur la figure suivante.


utilisation typique

On retrouve dans ces schémas les principales fonctionnalités des macros
des blocs :

de la gauche vers la droite,
de la droite vers la gauche ;
un comparateur ;
une entrée ;
une sortie ;
des liens :
simple entre blocs alignés,
entre un lien et un bloc ,
entre deux blocs (ou comparateur) non alignés,
un retour direct.

Le code utilisé pour décrire ce schéma est précisé ci-dessous.

Environnement

Les macros suivantes s'utilisent dans l'environnement tikzpicture

Nota : vous devez avoir installé la dernière version du package pgf !

Entrée

Tous les blocs sont dessinés en relatif par rapport à un noeud d'entrée, la construction du schéma ne peut donc débuter qu'après avoir défini le premier noeud avec la commande :\\entree{nom}.

La commande decale[distance]{E1}{E2} permet de positionner un nouveau n\oe ud par rapport au n\oe ud précédent, cette commande est nécessaire pour démarrer un nouvelle branche ou pour positionner une nouvelle entrée.

Bloc

Utilisation Le dessin d'un bloc s'obtient avec la commande

avec les paramètres suivant :

[distance] ce paramètre optionnel permet de positionner le bloc par rapport au bloc précédent ( la valeur par défaut est 6 em) ;
[nom] ce paramètre permet de nommer le noeud associé au bloc, pour faire référence à ce bloc, il faudra utiliser ce paramètre (pour relier les blocs) ;
[contenu] ce paramètre précise le contenu du bloc, cela paut être aussi bien du texte qu'une fonction mathématique comme en tapant \verb"$\dfrac{K_c}{1 + \tau \cdot p}$" (ne pas oublier les \$ ) ;
[bloc precedent] ce paramètre permet de préciser le bloc précédent, chaque bloc est positionné relativement au bloc précédent avec la distance distance.

Exemple


commande bloc

on notera la présence de \entree pour positionner le premier bloc ;
le nom de chaque bloc est unique ;
le deuxième bloc s'est adapté en hauteur et largeur en fonction du contenu ;
il est nécessaire de préciser pour le deuxième bloc un paramètre de distance afin de "l'écarter" du bloc précédent.

Nota :bloc de la chaîne de retour la commande blocr... permet de tracer les blocs de la chaîne de retour de la droite vers la gauche. les paramètres de commande sont identiques.

Comparateur - Sommateur

La commande

permet de dessiner un comparateur avec les paramètres suivant :
[distance : ] paramètre optionnel permettant de positionner le comparateur par rapport au bloc précédent ( la valeur par défaut est 4em) ;
[nom :] nom du comparateur, ce nom doit être unique dans votre schéma, il sert à référencer le comparateur pour tous les liens ;
[bloc precedent :] le nom du bloc précédent, le comparateur est placé à sa droite,à la distance \textbfdistance.

Commandes et symboles

comparateur 1	comparateur 2	sommateur 1	sommateur 2
`\comp....`	`\comph....`	`\sumb....`	`\sumh....`

Liens et renvois

Les macros proposent trois types de liens :
[Liens directs :] liens entre deux blocs (ou comparateur, entrée ou sortie) dans la chaîne directe (de la gauche vers la droite) ou dans la chaîne de retour (de la droite vers la gauche). Un lien direct entre deux blocs "b1" et "b2" s'écrit :\verb"\relier{b1}{b2}{nom} Le nom du lien est placé au dessus du lien au centre, le lien est référencé dans la figure sous le nom "b1-b2" (concaténation des noms avec un tiret "-")

Exemple

Code

[Renvois] les renvois sont des liens qui permettent soit de retourner en arrière (retour) soit de sauter un ou plusieurs blocs ; ils sont tracés entre un lien et un comparateur (sommateur) ;

[Liens non alignés :] ces liens sont utilisés pour relier un bloc d'un ligne vers un bloc d'une ligne parallèle (vers l'avant ou l'arrière) ;

|Code

Commentaires
Les premières commandes (de \entree.." à \sortieS1.." placent les blocs de la chaîne directe
On remarquera les deux commandes successives \verb"\sortie..", elles permettent ici d'éviter que le renvoi soit dessiné par dessus le nom de la sortie.
Les deux commandes \decale[-5]{f}{u} et decale{e}{v}permettent de positionner le départ des deux boucles de retour, la première est décalé de [-5] au dessus de la chaîne précédente et positionnée par rapport au bloc \f, la seconde est placée par défaut au dessous par rapport au bloc e. Ces nouveaux noeuds sont nommés u et v.
Les blocs de retours sont ensuite tracés de la droite vers la gauche par rapport à ces n oeuds avec la commande \blocr... et reliés.
La commande \relieryx{f-S}{r1}{} trace le lien depuis le milieu de la liaison entre les blocs f et s et le bloc r1, la commande \relierxy{r1}{d}{nom1} trace le lien vers le comparateur

Installation

Copier le package schemabloc.sty dans votre répertoire localtexmef/tex/latex....
placer dans l'entete de votre document \usepackage{schemabloc}

Vous pouvez aussi copier le code des macros ci-dessous dans votre entête

Code des macros

%macros commande schéma-blocs %dessin des blocs \newcommand{\bloc}[4][2]{ \node [draw, rectangle, minimum height=1cm, minimum width=1.5cm, right of = #4,node distance=#1cm] (#2) {#3}; } \newcommand{\blocr}[4][2]{ \node [draw, rectangle, minimum height=1cm, minimum width=1.5cm, left of = #4, node distance=#1cm] (#2) {#3}; } %dessin comparateurs et sommateurs \newcommand{\comp}[3][2]{ \node [draw, circle,minimum size=1cm, right of=#3,node distance=#1cm] (#2) {}; \node [draw, cross out,minimum size=0.707cm,right of=#3,node distance=#1cm] {}; \node [below of=#2,node distance=0.3cm] {$-$}; \node [left of=#2,node distance=0.3cm] {$+$}; } \newcommand{\comph}[3][2]{ \node [draw, circle,minimum size=1cm, right of=#3,node distance=#1cm] (#2) {}; \node [draw, cross out,minimum size=0.707cm,right of=#3,node distance=#1cm] {}; \node [above of=#2,node distance=0.3cm] {$-$}; \node [left of=#2,node distance=0.3cm] {$+$}; } \newcommand{\sumh}[3][2]{ \node [draw, circle,minimum size=1cm, right of=#3,node distance=#1cm] (#2) {}; \node [draw, cross out,minimum size=0.707cm,right of=#3,node distance=#1cm] {}; \node [above of=#2,node distance=0.3cm] {$+$}; \node [left of=#2,node distance=0.3cm] {$+$}; } \newcommand{\sumb}[3][2]{ \node [draw, circle,minimum size=1cm, right of=#3,node distance=#1cm] (#2) {}; \node [draw, cross out,minimum size=0.707cm,right of=#3,node distance=#1cm] {}; \node [below of=#2,node distance=0.3cm] {$+$}; \node [left of=#2,node distance=0.3cm] {$+$}; } %définitions des noeuds d'entrées et de sorties \newcommand{\entree}[1]{ \node [coordinate, name=#1,node distance=1cm] {}; } \newcommand{\sortie}[3][1.5]{ \node [coordinate, right of=#3, node distance=#1cm, minimum size=0cm] (#2) {}; } \newcommand{\decale}[3][2]{ \node [below of=#2, node distance=#1cm, minimum size=0cm](#3) {}; } %liens \newcommand{\relier}[3]{ \draw [->,>=latex',auto] (#1) -- node[name=#1-#2] {#3} (#2); } \newcommand{\relieryx}[2]{ \draw [->,>=latex'] (#1.south) |- (#2) ; } \newcommand{\relierxy}[3]{ \draw [->,>=latex'] (#1) -| node[name=#1-#2,near end,right] {#3} (#2) ; } \newcommand{\renvoi}[4][1.5]{ \node [below of=#2, node distance=#1cm, minimum size=0cm](retour#2) {}; \draw [->,>=latex'] (#2.south)--(retour#2.south) -| node[name=#2-#3,near end,right] {#4} (#3) ; }

Deux squelettes pour spip 1.9

Papanicola Robert — 2006-09-23T20:43:50Z

je viens de mettre à niveau les deux squelettes
Diapospip
Post-it

Pour Spip 1.9

Les deux squelettes ont été réécrits pour prendre en compte toutes les nouveautès de spip 1.9.

Je vous laisse tester ces deux squelettes, n'hésitez pas à me faire remonter les difficultés rencontrés lors de l'installation ou l'utilisation en utilisant les forums associés aux articles.

Si vous utilisez ces squelettes, laisser un message sur les forums correspondant

merci

Squelette Post-IT (version 1.9)

Papanicola Robert — 2006-09-23T20:36:49Z

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 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, ...


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.

Le menu


affichage du plan

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


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 :

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

Pour article.html, on a

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

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.

Squelette DiapoSpip pour Spip 1.9

Papanicola Robert — 2006-09-20T14:04:56Z

Le squelette Diapospip est un squelette conçu pour réaliser des diaporamas

Nom du Squelette : DiapoSpip 1.9
Version du squelette : 1.9
Auteur : rpapa
Licence : Creative Common
Compatibilite SPIP : compatible SPIP > 1.9
Site(s) exemple : Formation spip
Principales fonctionnalités et spécificités :

Diaporama

Ce squelette permet de réaliser une présentation (Diaporama)

Testé sur ces navigateurs

Testé ?	Plateforme	Navigateur	Version
oui	windows	Internet explorer	IE6
oui	windows	Firefox	.
non	windows	Mozilla	1.0.1
non	windows	Phoenix	.
oui	windows	Opera	.
non	Mac	Internet explorer	.
non	Mac	Netscape	.
non	Mac	Chimera	.
non	Mac	Mozilla	.
non	Mac	Phoenix	.
non	Mac	Opera	.
non	Unix/Linux	Netscape	.
non	Unix/Linux	Mozilla	.
non	Unix/Linux	Phoenix	.
non	Unix/Linux	Opera	.

Donnez-moi votre avis via le forum de cet article et aidez-moi à optimiser ce squelette pour toute plateforme.

Pourquoi ce squelette

Ce squelette est l'évolution pour spip 1.9 du squelette [art30]

Comme la version précédente ce squelette n'utilise que des fonctionnalités SPIP (pas de Javascript ni de PHP dans le squelette) et chaque diapositive correspond à une article et est chargée indépendamment des autres.

Installation

Copier le contenu du fichier zip à la racine de votre site, les squelettes se strouvent dans le répertoire /squelettes/

C'est fait !

Utilisation

Réalisation de diaporama

Fonctionnalités

Chaque rubrique constitue une présentation, les articles de la rubrique sont les différentes diapositives.

La première diapo de la présentation comporte le DESCRIPTIF de la rubrique et le sommaire de la présentation ;
un menu déroulant permet d'accéder directement à la diapo souhaitée ;
des flèches de navigation permettent de passer d'une diapo à la suivante (ou la précédente) ;
le logo de la rubrique est affiché en haut à gauche.
ecran redimensionnable (800x600, 1024x768, Largeur max).

Seuls les champs #TITRE et #TEXTE de chaque article sont affichés.

Personnalisation

La feuille de style principale est presentation.css, vous pouvez la modifier pour la rendre conforme à la charte graphique de votre site.

L'archive comporte 3 autres feuilles de style Ces trois feuilles définissent l'écran de projection du diaporama, respectivement

style	Dimensions
ecran1.css	800x600 px
ecran2.css	1024x768 px
ecran3.css	Largeur max

Le choix de la dimension se fait en cliquant en haut à droite de l'écran sur la diapo, la dimension est mémorisée pendant la session.

Structure du squelette Diapospip

Vous n'avez pas besoin de lire ce qui suit pour un simple utilsation du squelette

Le squelette Diapospip 1.9 est architecturé autour du fichier [*squelette.htm*] . Celui-ci est appelé par les squelettes sommaire.html, rubrique.html et article.html.

Squelettes	Contenu
Sommaire.html
Rubrique.html
Article.html

On constate que que ces trois squelettes ne font que le fond squelette avec les paramètres :
skl

le paramètre skl a pour valeur skl_sommaire, skl_rubrique, skl_article suivant que l'on souhaite afficher respectivement le sommaire, un rubrique ou un article

id_article, id_rubrique

passage de paramètre pour les boucles

style.

ce paramètre est utilisé pour préciser la dimension de l'affichage.

3Le squelette squelette.html3

pour expliquer la structure de ce fichier, le plus simple est de commenter le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head> <meta http-equiv="Content-type" content="text/html; charset=#CHARSET"/> <meta name="revisit-after" content="10 days"/> <meta name="robots" content="index,follow"/> <INCLURE{fond=header}{id_rubrique}{id_article}{style}> <link href="#CHEMIN{presentation.css}" type="text/css" rel="stylesheet" /> <link href="#DOSSIER_SQUELETTE/ecran[(#ENV{style,1})].css" type="text/css" rel="stylesheet" media="screen"/> </head> <body > <div id="entete"><div class="colonne-inter"> [(#ENV{skl}|=={skl_rubrique}|?{' ',''}) <INCLURE{fond=entete_rubrique}{id_rubrique}{id_article}{style}> ] [(#ENV{skl}|=={skl_sommaire}|?{' ',''}) <INCLURE{fond=entete_sommaire}{style}> ] <br class="alaligne" /> </div></div> <div id="contenant-principal1"><div id="contenant-principal2"> <div id="contenant-centre"><div class="colonne-inter"> <div class="bloc-horizontal"> [(#ENV{skl}|=={skl_rubrique}|?{' ',''}) <INCLURE{fond=contenu_rubrique}{id_rubrique}{id_article}{style}> ] [(#ENV{skl}|=={skl_sommaire}|?{' ',''}) <INCLURE{fond=contenu_sommaire}{style}> ] </div> </div> </div><!--fin colonne inter--></div><!-- fin contenant centre--> <div class="alaligne"> </div> </div> <div id="contenant-pied"><div class="colonne-inter"> <h3 class="auteurs"> <BOUCLE_equipe(ARTICLES) {id_rubrique}><BOUCLE_auteurs(AUTEURS) {id_article}{doublons}{" "} >#NOM</BOUCLE_auteurs></BOUCLE_equipe> </h3> <br class="alaligne" /> </div></div> </body></html>

Ce squelette ne comporte que les

...

de la feuille de style et des dépendant du paramètre skl, ainsi, le contenu principal de la diapositive est sélectionné par

qui se lit
si (#ENV{skl} est égal à skl_sommaire, inclure le contenu_sommaire
si (#ENV{skl} est égal à skl_rubrique alors inclurer le contenu_rubrique avec les paramètres id_rubrique et id_article

3Avantages de la structure3 Cette structure permet de prolonger et d'affiner la notion de noisette dans Spip, ici les différents squelettes sont structurés autour d'un "tronc" commun, le fichier squelette qui gère la forme (la feuille de style), le contenu (les branches et le noisettes) etant inclu en fonctions des paramètres passés.

L'avantage principal est la modularité pousée à l'extrème, chaque squelette élémentaire à une fonction et une seule

Si vous utilisez ce squelette, merci de m'en informer

Essai vidéo google

Papanicola Robert — 2006-09-20T13:51:29Z

Sur cette page, deux procédures pour inclure dans un article une vidéo google

inclusion directe

La vidéo ci-dessus est téléchargée depuis google-vidéo en utilisant le code fourni par google

Inclusion via documents distants

Roue libre

téléchargée à partir de "référencer un document sur internet"

L'intérêt de cette deuxième solution c'est qu'ilest possible de demander à spip de récuperer la vidéo et de la sauvegarder dans le répertoire IMG, pour plus d'info, on pourra lire l'article de spip contrib.

Ma chaudière

Papanicola Robert — 2006-09-06T20:29:54Z

Quelques photos de ma chaudière Chappée en vente sur ebay - 4. Galerie / galerie