Vader[FR] : ce n'est pas un blog, c'est un Sith

JavaScript

Vader[FR] — 2023-10-11T17:07:25Z

JavaScript

JavaScript est un langage interprété, exécuté côté client par le navigateur. Il n'y a aucun lien avec le langage compilé Java.

S'exécutant dans le navigateur, les droits du javaScript sont limités. Il ne peut par exemple pas lire ou écrire sur le disque dur.

Les scripts et fonctions en JavaScript permettent de modifier la page en temps réel, sans avoir à recharger toutes les informations depuis le serveur.

Contrairement à de nombreux sites, le site "Vader-fr" ne fait appel à aucun domaine tiers (voir onglet suivant).

Mais le site utilise néanmoins du JavaScript afin de fournir quelques fonctionnalités très pratiques :

Système d'onglets et de pages sur les articles, permettant de séparer les "chapitres" en onglets différents, d'avoir un article moins long et plus lisible.
Blocs dépliants
Protection des adresses courriel dans les articles et descriptif des rubriques.
Tri des tableaux

Serveur tiers ou Domaine tiers ou Site tiers : Serveur n'étant pas l'hébergeur de la page Web visitée mais un autre serveur, d'un autre domaine, auquel la page visitée fait un appel pour une raison quelconque (publicité, script, image, PDF, composants de la page visitée, calculs, etc.)

Sous Firefox, le plugin LightBeam permet de visualiser les relations entre les différents sites.

Toujours sur Firefox, des plugins permettent de gérer l'exécution des scripts de domaines tiers, par exemple :

Voici par exemple les serveurs tiers signalés sur le site Ouest-France :


Domaines Tiers site Ouest-France - NoScript


Domaines Tiers site Ouest-France - Ghostery


Domaines Tiers site Ouest-France - uBlock Origin

Présentation générale du site

Vader[FR] — 2022-06-20T08:31:34Z

Site de l'association "Histoire et Patrimoine" de la commune de Les Touches en Loire Atlantique

1914-1918 - première guerre mondiale
1939-1945 - deuxième guerre mondiale, résistance en Loire Inférieure (Loire Atlantique)
actualités sur la commune de Les Touches
actualités et informations sur l'association

Reprend également des articles des sites d'Henri Lepage.

Étant un site d'information et non artistique, ce site a besoin d'afficher beaucoup d'informations, son design est donc assez "chargé" contrairement à un site d'artiste ou de design qui, simple vitrine, serait plus épuré.
Le design reste donc très classique, un entête qui fait aussi menu de navigation (avec champ de recherche), pied de page et cadre contenu sur toute la largeur au centre pour plus de lisibilité, lequel reste fixe dans la page et a son propre scrolling.
Petite "innovation" personnelle [1] que l'on retrouve également sur mon site, un cadre dépliant sur la droite liste les articles de la même rubrique.

Ce site sous SPIP a été créé à partir du squelette zpip, "customisé" pour le site Vader-fr.fr, avec quelques modifications à la marge.

Son fonctionnement technique sera détaillé dans cette rubrique :

squelette
style CSS dont multi-rubrique
scripts JavaScript

[1] Je n'ai pas vu de tel design sur un autre site, mais il est possible que cela existe.

Squelette Zpip, thème ZenGarden, scripts JavaScript et PHP

Vader[FR] — 2014-12-25T16:01:29Z


Squelette Zpip Isabelle palenc


Thème ZenGarden isabelle Palenc


Scripts JavaScript Isabelle Palenc: diaporama AJAX, redimensionnement proportionnel, avertissement pour Internet Explorer...


Script PHP pour le diaporama AJAX


Scripts PHP de gestion des chaines, accents et caractères spéciaux.


Diverses fonctions utilitaires en PHP: Pas nécessairement utilisées par le site.

validation W3C des balises et du CSS :


Validation W3C du code des balises


Validation W3C du code CSS du style

Rubrique actualités

Vader[FR] — 2014-12-25T14:48:02Z

Squelette de la rubrique

La rubrique actualité s'affiche sous la forme d'une liste d'articles (titre + début du texte) à gauche, d'une image à droite et d'un éventuel bloc de liens de pagination en dessous de la liste des articles, si besoin est.

Dans la mesure où la rubrique ne comporte pas de sous-rubrique, le squelette est rubrique=13.html dans le dossier contenu du plugin Zpip.

[(#REM) Actualites ]

On reprend la structure habituelle avec le cadre gris.

Pour simplifier, on réutilise des éléments déjà déclarés.

Le cadre principal contient 3 blocs :

actus_liste, la liste des actualités (titre + résumé du texte)
expos_pagination, les liens de pagination si besoin est
actus_photo : la photo

actus_liste

	 #ANCRE_PAGINATION

On travaille sur les articles de la rubrique 13, en les triant pas ordre chronologique inverse (du plus récent au plus ancien), le tout filtré par la langue choisie sur le site, et en sélectionnant 10 articles par page.
Cette boucle SPIP est dans une lite

seront donc répétés pour chaque article.
```
  #TITRE 
 [(#TEXTE|couper{80})]
```
On affiche le titre dans un lien, puis les 80 premiers caractères du texte, obtenus par le filtre |couper{80}.

Il ne reste ensuite plus qu'à fermer l'élément de liste, la liste de la boucle d'affichage, la boucle générale (de détail des articles) étant fermées plus loin de manière à englober le bloc pagination et y générer les liens de pagination.
```
 
```

style CSS du bloc :

#actus_liste { position:absolute; top:0; left:0; width:60%; bottom:50px; overflow-y:auto; padding-left:50px;
}

Le bloc est fixé dans la page, aux bords gauche et haut, à 50 px du bas pour laisser la place au bloc pagination, et ne prend que 60% de la largeur de son conteneur, pour laisser de la place au bloc photo.
Un espace de 50px entre son bord gauche et le contenu permet de l'aérer visuellement, et grâce à la propriété overflow-y:auto, un ascenseur vertical apparaîtra dans ce cadre si besoin est.

expos_pagination

On y affiche simplement la pagination correspondant à la boucle de sélection des articles.
Le mot clé #PAGINATION n'étant pas valable en dehors d'une boucle, c'est pourquoi la boucle générale de sélection des articles (, à ne pas confondre avec la boucle d'affichage, ) se referme plus loin.


	[(#PAGINATION)
]
style CSS du bloc :
#expos_pagination { position:absolute; height:50px; left:0; right:10px; bottom:0; text-align:center;
}
Le bloc est fixé dans la page, aux bords gauche et bas, hauteur limitée à 50px pour ne pas déborder sur le cadre précédent, à 10 px du bord droite pour laisser une marge entre le contenu et le bloc général, son contenu (les liens de paginations) étant justement centré.

`actus_photo`


ici, une autre boucle SPIP va chercher au hasard une photo (et une seule) dans une rubrique dédiée, laquelle est cachée dans la rubrique 1 ("Accueil"), et non visible directement sur le site.
On travaille sur les articles, de la rubrique 38, en triant par hasard, et en se limitant à un seul élément.

Puis le logo de l'article est ensuite affiché.
	   [(#LOGO_ARTICLE)]   
Style CSS du bloc :
#actus_photo { bottom:50px; position:absolute; top:0; right:0; width:30%;
}
Le bloc est fixé dans la page, aux bords droit et haut, à 50 px du bas pour laisser la place au bloc pagination, et sa largeur est limitée à 30% de son conteneur, ce qui, avec une largeur de 60% pour son voisin (liste des actualités), laisse 10% de la largeur du bloc général comme marge entre les deux.

L'image du bloc sera traitée par un script JavaScript pour la redimensionner de manière proportionnelle.


Puis on ferme le div principal, la boucle du détail sur les articles, ainsi que les blocs généraux et la boucle de la rubrique.



Squelette des articles

Les articles de la rubrique actualité s'affichent sous la forme d'une photo (le logo) à gauche, et du titre + texte à droite.
Dans la mesure où la rubrique ne comporte pas de sous-rubrique, le squelette devrait être article=13.html dans le dossier contenu du plugin Zpip.

Toutefois, le fichier squelette est article-13.html, car plusieurs sous-rubriques étaient prévues avant.
[(#REM) Actualites ]    #LOGO_ARTICLE 
 
Le cadre général est divisé en 2 blocs :
 expos_image, contenant le logo de l'article.
 fixé dans la page à 80px du haut, 25px du bas, au bord gauche #expos_image { position:absolute; top:80px; left:0; bottom:25px;
 de largeur limitée à 49% de son conteneur. width:49%; }
 Son image sera traitée par un script JavaScript.
 expos_texte ; contenant le cartouche (titres), le contenu "surlignable" (chapeau et texte, y compris documents et images incorporées au texte), le lien vers un article ou site, et les notes de bas de page.
 fixé lui aussi dans la page à 80px du haut, mais à 0px du bas, et au bord droit #expos_texte { position:absolute; top:80px; right:0; bottom:0;
 sa largeur est également limitée à 49% de son conteneur, afin que les deux blocs ne se chevauchent pas. width:49%;
 sa largeur maximale est de 500px afin de limiter la longueur des lignes de texte à lire max-width:500px;
 un espacement interne de 10px entre son bord droit et le contenu permet de l'aérer visuellement. padding-right:10px;
 le contenu (texte et images ou documents) pouvant être trop grand pour le cadre, un ascenseur vertical viendra automatiquement en cas de besoin.  overflow-y:auto; }
Du reste, les boucles sont quand à elles classiques des articles : logo, titre, texte, lien...
  [(#SURTITRE)
] #TITRE
 [(#SOUSTITRE)
] [(#REM) Inclure le modele des liens de traductions ] #MODELE{article_traductions} 
  [(#CHAPO|image_reduire{500,0})
] [(#TEXTE)
] 
 [<:voir_en_ligne:> : [(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]
] [ <:info_ps:>
 (#PS|image_reduire{500,0})
 
]



Rubriques revue de presse et liens
Vader[FR] — 2014-12-13T13:31:36Z
Ces deux rubriques fonctionnent exactement sur le même principe et ont donc le même squelette
En haut à gauche, un menu des sous-rubriques liste les sous-rubriques qui contiennent des articles, une barre verticale séparant ce menu du contenu : liste des articles sous forme de vignettes (page rubrique) ou contenu de l'article (page article).
Le squelette étant le même pour les rubriques que les sous rubriques, les fichiers correspondants dans le répertoire contenu du plugin Zpip sont :
 rubrique-33.html pour la rubrique "Revue de presse" et ses sous rubriques (articles de presse et médias télévision/radio)
 rubrique-37.html pour la rubrique "Liens" et ses sous rubriques (artistes, réseaux, galeries et salon)
 article-33.html pour les articles de la rubrique "Revue de presse" et ses sous rubriques
 article-37.html pour les articles de la rubrique "Liens" et ses sous rubriques
Squelette des rubriques

Fichier de squelette rubrique-33.html dans le répertoire contenu du plugin Zpip, strictement identique à rubrique-37.html à l'exception d'un filtre de boucle SPIP
[(#REM) LIENS ]




On déclare d'abord les conteneurs généraux de la page, qui formeront le grand cadre gris, avant de créer les deux cadres liste des rubriques sous forme de menu à gauche, et liste des articles sous forme de vignettes à droite.
   [(#TITRE)]
  

La boucle de sélection des rubriques est extrêmement simple, on sélectionne les sous rubriques de "Revue de presse", à savoir donc les rubriques dont la rubrique parent est de numéro 33.

Puis on affiche simplement les liens ligne par ligne dans un cadre "liens_rubrik".
le style CSS correspondant est ;
#liens_rubrik { position:absolute; top:0; left:0; width:130px; border-right:1px solid black; font-size:15px; padding-left: 5px; padding-top: 5px;
}
Le cadre est fixé dans le bord haut gauche, sa largeur est fixe, de 130 pixels.

Sa hauteur est variable selon le nombre de lignes de liens qui s'afficheront dedans, ce qui permet à la bordure droite de ne pas dépasser les lignes.
 [(#REM) puis les articles - même taille ]     [(#LOGO_ARTICLE|image_reduire{100,100})] 
 #TITRE 
  

La boucle de sélection des articles n'est pas très compliquée, et l'affichage par vignettes se fait comme pour la rubrique Galerie (Sculpture et Peinture).

On prend les articles (ARTICLES) de la rubrique et de ses sous-rubriques en les filtrant par langue {lang} et en les triant par date du plus récent au plus ancien {par date}{inverse}
Style CSS du cadre des articles :
#liens_artikles { position:absolute; top:0; left:140px; right:5px; bottom:0; overflow-y:auto; padding-left: 5px; padding-top: 5px;
}
le cadre des articles est fixés à 140 pixels du bord gauche (puisque le cadre des rubriques fait 130 pixels de largeur), aux bords bas et haut, et à 5 pixels du bord droite, afin de prendre le reste de la page.

Un ascenseur vertical apparaîtra si besoin est overflow-y:auto;
Puis on ferme le cadre général

Squelette des articles

Fichier de squelette article-33.html dans le répertoire contenu du plugin Zpip, strictement identique à article-37.html à l'exception d'un filtre de boucle SPIP
 


   [(#TITRE)]
  
  
Comme pour le squelette précédent, on retrouve les différents cadres : le cadre général (bio), le cadre de la liste des rubriques à gauche, et le grand cadre contenu à droite, qui cette fois ne contiendra pas les vignettes des articles mais le contenu de l'article sélectionné.
	 [(#LOGO_ARTICLE||image_reduire{200,200})] [(#SURTITRE)
] #TITRE
 [(#SOUSTITRE)
] [(#REM) Inclure le modele des liens de traductions ] #MODELE{article_traductions} 
  [(#CHAPO|image_reduire{500,0})
] [(#TEXTE|image_reduire{500,0})
] 
 [<:voir_en_ligne:> : [(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]
] [ <:info_ps:>
 (#PS|image_reduire{500,0})
 ] 

La boucle d'affichage du contenu de l'article sélectionné est la même que pour les autres articles, on affiche le logo dans le cartouche avec le titre, et le texte avec ses documents en dessous.

Inclusion de vidéo

Dans un des articles de revue de presse, une courte vidéo est incluse au texte de l'article.

Cela est possible grâce au plugin SPIP "Lecteur de médias de MediaSPIP" (mediaspip_player).
 Lien de téléchargement dans le catalogue des plugins de SPIP : mediaspip_player.
 Documentation du plugin
Une fois le document (fichier vidéo) téléversé sur le site SPIP, on peut inclure le lecteur par le lien "emb" (embedded).
Afin d'être sûr que la taille du lecteur correspond à celle de la vidéo, j'ai mis le lien  dans un cadre.

 




Rubriques galeries
Vader[FR] — 2014-11-02T19:33:30Z
Galerie

Tout comme la page de garde, la rubrique galerie contient un diaporama des articles des sous-rubriques.

Par défaut, le logo de la rubrique galerie est affiché, avant le lancement du diaporama ou au cas où JavaScript serait désactivé.
Fichier de squelette rubrique=3.html dans le répertoire contenu du plugin Zpip.
[(#REM) RUBRIQUE 3 = galeries ] [(#REM) barre de navigation : sous-rubriques de rubrique 3 ]
[(#REM)	MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
 
Tout comme pour les rubriques biographie et expositions, on inclut un squelette commun de barre de navigation.

Les squelettes de la rubrique galerie (rubrique=3.html), ses sous rubriques (rubrique-3.html) et les articles de la rubrique galerie ou de ses sous rubriques (article-3.html) partageant la même barre de navigation, pour des squelettes qui peuvent ensuite différer, l'inclusion prend ici tout son sens.

En effet, affiche/bitume et peinture/sculpture ont des aspects complètement différents dans l'espace public, les premiers étant affichés en grand avec une liste de vignettes en dessous, les autres avec des vignettes par sous rubriques (séries ou formats) et articles.
        [(#LOGO_RUBRIQUE)] 
  #TITRE
 JavaScript doit être activé pour que le diaporama puisse démarrer 
 
  
 
Pour le reste, le principe est le même que pour la page de garde.
Barre de navigation
     [(#TITRE)] 
  
 

Comme pour les autres, on liste les sous-rubriques de la rubrique galerie, à savoir donc les rubriques dont la rubrique parente est la numéro 3.

Les sous-rubriques sont classées non pas par ordre alphabétique, mais par numéro de rubrique, et donc l'ordre dans lesquelles elles ont été créées.

la balise #EXPOSE de SPIP, comme classe CSS éventuelle [1] du lien permet de définir une classe CSS particulière (class="on") sur le lien d'une sous-rubrique si le contenu de celle-ci est affiché dans la page.

Une règle CSS commune aux liens des trois barres de navigation #nav a.on, #nav_bio a.on, #nav_expo a.on permet de définir une propriété de couleur d'arrière plan du lien background-color:white; afin de le mettre en valeur.
Affiche et Bitume

Ces deux sous-rubriques de galerie ne contenant que des articles, car il y a moins d'œuvres de ce type que de peintures et sculptures, les œuvres (articles) sont affichées en grand, logo à gauche, texte à droite, avec une liste de vignette en dessous, laquelle est paginée.
Les squelettes rubrique-5.html et rubrique-18.html dans le répertoire contenu de Zpip sont donc strictement identiques.
[(#REM) barre de navigation : sous-rubriques de rubrique 3 ]
[(#REM)	MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
 
On travaille sur le contenu d'une rubrique, la boucle principale est bien sûr invoquée.
  [(#REM) articles au dessus, logo à gauche, texte à droite ]  
Étant donné que l'on va afficher le contenu d'un article, il faut créer une boucle :
 travaillant sur les articles, (ARTICLES)
 de la rubrique précédemment sélectionnée par la boucle principale {id_rubrique}
 on trie par date, depuis le plus récent {par date}{inverse}
 en n'affichant qu'un seul article, {pagination 1}{debut_pagination_articles, 1}
  [(#LOGO_ARTICLE_RUBRIQUE)] 
  [#TITRE
(#TEXTE)] 
 
On affiche ensuite logo, titre et texte de l'article.
Puis la pagination par vignettes, via une boucle SPIP.
   
 [(#REM) pagination par date + précédent/suivant ]  #PAGINATION{precedent_peintures}  [(#LOGO_ARTICLE|image_reduire{150,63})]  #PAGINATION{suivant_peintures}  

 
 
La pagination étant particulière (boucle sur les articles pour vignettes + liens "précédent" et "suivant"), voici le détail
Pagination

Les deux fichiers de modèle pagination_precedent_peinture.html et pagination_suivant_peinture.html sont situés dans le dossier prive/modeles de SPIP.

par ailleurs, pagination...peinture (articles) a le même squelette que pagination...peintures (rubriques)
Précédent
#ENV*{bloc_ancre}
#SET{bornes,#ENV{page_courante}|bornes_pagination{#ENV{nombre_pages},10}}
#SET{premiere, #GET{bornes}|reset}
#SET{derniere, #GET{bornes}|end}
#SET{separateur,#ENV{separateur,'|'}}
#SET{i,#ENV{page_courante}|moins{1}}
#SET{imjpre,''}
#SET{imjsui,''}
[(#GET{i}|>{0}|?{' '})[ (#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} }) ][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#GET{imjpre}}{separateur=''}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})] #SET{i,#GET{i}|plus{2}}
]
Suivant
#ENV*{bloc_ancre}
#SET{bornes,#ENV{page_courante}|bornes_pagination{#ENV{nombre_pages},10}}
#SET{premiere, #GET{bornes}|reset}
#SET{derniere, #GET{bornes}|end}
#SET{separateur,#ENV{separateur,'|'}}
#SET{i,#ENV{page_courante}|moins{1}}
#SET{imjpre,''}
#SET{imjsui,''}
#SET{i,#ENV{page_courante}|plus{1}}
[(#GET{i}|<={#ENV{nombre_pages}}|?{' '})[ (#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} }) ][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#GET{imjsui}}{separateur=''}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]
]
Peinture et Sculpture

Ces deux sous-rubriques de galerie contenant aussi bien des sous-rubriques que des articles, les séries/formats (rubriques) et œuvres (articles) sont affichées en vignettes.
Les squelettes rubrique=9.html et rubrique=6.html dans le répertoire contenu de Zpip sont donc strictement identiques.
Les sous-rubriques (séries d'œuvres) de ces sous-rubriques (peinture/sculpture) utilisent un squelette identique au deux rubriques précédentes (affiche/bitume).
Le système est très simple, deux boucles SPIP vont chercher logo, titre et lien des sous-rubriques, puis des articles de la rubrique, chacun étant affiché dans un bloc contenant le lien via le logo et le titre. Le style CSS se charge du reste en faisant "flotter" ces blocs pour les aligner sur une grille.
[(#REM) RUBRIQUE 9 = peintures ] [(#REM) barre de navigation : sous-rubriques de rubrique 3 ]
[(#REM)	MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
   
[(#REM) D'abord les sous-rubriques avec une icône spéciale style "dossier" en bas à droite ]     [(#LOGO_RUBRIQUE|image_reduire{100,100})] 
 [(#TITRE)] 
   [(#REM) puis les articles - même taille ]     [(#LOGO_ARTICLE|image_reduire{100,100})] 
 #TITRE 
  

 
 
Style CSS des vignettes :
.vignettes_rubrique, .vignettes_article { float:left; width:130px; height:130px; margin: 20px; padding:20px; text-align: center; background-color:#DEDEDE;
}
Les blocs de classe vignette_rubrique et articles sont donc positionnés de manière "flottante", en les alignant les uns après les autres en commençant à gauche. D'où la propriété de style float:left

Afin de permettre un bon alignement, les blocs ont une taille fixe. Le contenu (le texte du lien ainsi que l'image) est centré, et le fond est grisé. Un espace intérieur (padding) de 20 px s'ajoute à un autre, extérieur (margin), pour séparerle bord du cadre de son contenu, et les vignettes entre elles.
.vignettes_rubrique img, .vignettes_article img{ max-width:100px;
}
.vignette_img { height:100px;
}
Bien que la boucle SPIP génère une image de bonne taille grâce au filtre "image réduire" [(#LOGO_ARTICLE|image_reduire{100,100})], dans le doute, on limite la taille des images à celle de leur bloc, 100 pixels.
.vignettes_rubrique .texte, .vignettes_article .texte { margin:0; padding-bottom: 5px; padding-top: 5px;
}
Articles

Par la suite, les articles ont la même structure que pour les affiches ou les bitumes, avec l'œuvre en grand et la liste paginée des autres articles sous forme de vignettes en dessous.
De la même manière que pour les rubriques, les squelettes des articles article-5.html, article-6.html, article-9.html et article-18.html sont strictement identiques.
La boucle est la même que celle dans le squelette rubrique (affiche/bitume), on y adjoint simplement les liens vers les autres langues de l'article.
[(#REM) barre de navigation : sous-rubriques de rubrique 3 ]
   [(#REM) Inclure le modele des liens de traductions ] #MODELE{article_traductions}  [(#REM) articles au dessus, logo à gauche, texte à droite ]    [(#LOGO_ARTICLE_RUBRIQUE)] 
  [#TITRE
(#TEXTE)] 
    
 [(#REM) pagination par date + précédent/suivant ]  #PAGINATION{precedent_peinture}  [(#LOGO_ARTICLE|image_reduire{150,63})]  #PAGINATION{suivant_peinture}  
 [(#REM) Gestion du portfolio et des documents ]
[(#INCLURE{fond=inclure/documents}{id_article})] 
 [<:info_notes:>
(#NOTES)
] 

		
		
[1] car entre [ ], ce qui permet à SPIP de ne rien générer en cas d'absence de contenu, dans le cas présent donc si la cible du lien n'est pas exposée



Rubriques biographie et expositions
Vader[FR] — 2014-10-22T08:52:55Z
Ces deux rubriques fonctionnent exactement sur le même principe et ont donc le même squelette, à l'exception d'un appel à un sous-squelette qui contient un paramètre de boucle SPIP différent.
Une "barre de navigation" liste les 3 articles de la rubrique, celui dont les données sont affichées étant sur fond blanc.
En dessous, un cadre gris affiche les données du premier article rédigé, texte et logo.

Le squelette de la rubrique appelle en fait le squelette article, lequel inclut celui de la barre de navigation.
Exemple pour la rubrique 2 (biographie) :
Squelette de la rubrique

Fichier de squelette rubrique=2.html dans le répertoire contenu du plugin Zpip.
[(#REM) RUBRIQUE 2 = biographie ] [(#REM)	MAIN NAVIGATION / NAVIGATION PRINCIPALE ]    #INCLURE{fond=contenu/article,id_article,env}  

Ce squelette est extrêmement simple puisqu'il sélectionne un et un seul ({pagination 1}) article de la rubrique correspondant à la langue choisie (filtre {lang}), le tout trié par numéro d'article ({par id_article}).

Cela aurait pu être un tri sur le titre des articles, ou bien un article au hasard.
Une fois l'article sélectionné, on appelle le squelette article avec le numéro l'article à afficher.

SPIP sélectionnera automatiquement le squelette le plus approprié pour cet article.
Squelette article

Fichier de squelette article=2.html dans le répertoire contenu du plugin Zpip.
[(#REM) RUBRIQUE 2 = biographie ] [(#REM)	MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
	
Le squelette de l'article inclut celui de la barre de navigation. 

De fait, la boucle contenue dans ce sous-squelette aurait pu être incluse directement dans le squelette article, mais la conception d'origine de cette rubrique impliquait deux squelettes rubrique/article bien distincts, qui partageaient la même boucle de barre de navigation, laquelle a donc été externalisée.
Voir onglet suivant pour la barre de navigation.

Que ce soit dans la page d'affichage de l'article ou via l'appel depuis la page d'affichage de la rubrique, un numéro d'article est fourni, il n'y a donc pas besoin de filtre particulier.
  [(#CHAPO|image_reduire{500,0})
]  [(#TEXTE|image_reduire{500,0})
] [(#LOGO_ARTICLE_RUBRIQUE|image_reduire{275,0})]
 
 
 [<:voir_en_ligne:> : [(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]] [(#REM) Gestion du portfolio et des documents ]
[(#INCLURE{fond=inclure/documents}{id_article})] 
 
L'indentation permet de suivre la hiérarchie des blocs.

Le reste du squelette est assez classique.
Style CSS associé
#bio, #peintures { position:absolute; left:0; top:55px; bottom:55px; right:55px; background-color:#999999;
}
Pour le bloc principal, fond gris et positionnement de manière absolute = fixé aux bords de son cadre conteneur (div de classe surlignable dans le div de classe galeries).

l'espace au dessus (55px) est dédié à l'affichage de la barre de navigation.
div.galeries { position:absolute; top:50px; bottom:0; left:0; right:5px; overflow-y:auto;
}
l'espace au dessus (50px) correspond à l'entête de la page.

le bloc de classe surlignable n'a pas de style CSS.
#diapo_image, #bio_texte, #peintures_image { position:absolute; left:25px; top:25px; bottom:25px;
}
#bio_texte { right:300px; }
#diapo_texte, #bio_texte, #peintures_contenu { overflow-y:auto;
}
Le texte des articles de la rubrique biographie partage les mêmes propriétés de positionnement et de taille que les images des blocs peintures et diapo, utilisés dans d'autres pages.

Ici, le bloc image étant de taille fixe (275px de large), c'est le cadre texte qui s'adaptera en étant fixé à 300 pixels du bord droite, laissant toujours la même place libre pour le cadre image.

Les images étant redimensionnées automatiquement par un script JavaScript, seuls les blocs de texte disposeront d'un ascenseur vertical si besoin est (overflow-y:auto;).
#bio_image{ width:275px;
} #diapo_image img, #bio_image img, #peintures_image img { max-height:100%; max-width:100%;
} #diapo_texte, #bio_image, #peintures_contenu { position:absolute; bottom:0; top:25px; right:5px; padding-right:5px;
}
L'image (logo) des articles de la rubrique biographie partage les mêmes propriétés de positionnement et de taille que les textes des blocs peintures et diapo, utilisés dans d'autres pages.

Seule la taille fixe est particulière au bloc image de la rubrique biographie.
Squelette barre de navigation

Fichier de squelette barre-nav-bio.html dans le répertoire inclure du plugin Zpip.
     [(#TITRE)] 
  
 

Cette boucle va simplement chercher les articles de la rubrique n°2 (biographie) afin de lister leurs titres.

Le mot clé SPIP [ class="(#EXPOSE)"] permet de définir la classe CSS "on" sur le lien, si le contenu de l'article ou de la rubrique est "exposé", et donc affiché dans la page.

Cela permettra d'appliquer le style CSS suivant :
#nav a.on, #nav_bio a.on, #nav_expo a.on { background-color:white;
}
Ce qui mettra une couleur de fond blanche sur le lien de l'article dans la barre de navigation si celui-ci est affiché.
Style CSS associé aux barres de navigation (biographie, expositions..)
#nav, #nav_bio, #nav_expo { margin: 0; overflow: hidden; border: 0px solid #000000; position:absolute; top:30px; height:50px; left:0px; right:0;
} #nav ul, #nav_bio ul, #nav_expo ul { margin: 0; padding: 0 0 0 0; list-style: none; line-height: normal;
} #nav li, #nav_bio li, #nav_expo li { display: inline; text-align: center;
} #nav a, #nav_bio a, #nav_expo a { display: block; height: 20px; text-decoration: none; text-align: center; font-size: 1em; font-weight: bold; color: black; font-family: EurocentricRegular,Arial,Helvetica,sans-serif;
} #nav .menu-liste, #nav_bio .menu-liste, #nav_expo .menu-liste { padding-left: 2%; padding-right: 2%;
} #nav .menu-entree, #nav_bio .menu-entree, #nav_expo .menu-entree { border: 1px solid black; float: left; padding: 5px; text-align: center; width: 22%; background-color:#999999;
}
En ce qui concerne la taille du bloc du lien d'un article dans la barre de navigation, la propriété partagée définie ci-dessus est surchargée et donc remplacée par celle définie ci-dessous, car définie après la précédente.
#nav_bio .menu-entree, #nav_expo .menu-entree { width:30%;
}
Il y a également des propriétés de couleur et de taille de police pour l'évènement hover, correspondant au survol de la souris, et ce aussi bien pour les liens que pour les blocs.
#nav a:hover, #nav .active a, #nav .menu-entree.on a, #nav_bio a:hover, #nav_bio .active a, #nav_bio .menu-entree.on a, #nav_expo a:hover, #nav_expo .active a, #nav_expo .menu-entree.on a { color: #110404;
} #nav .menu-entree:hover, #nav_bio .menu-entree:hover, #nav_expo .menu-entree:hover { background-color:#DEDEDE; font-size:1em;
}
De même pour les items de menu de la barre de navigation.
#nav .menu-entree .menu-liste, #nav .menu-entree .menu-liste a, #nav_bio .menu-entree .menu-liste, #nav_bio .menu-entree .menu-liste a, #nav_expo .menu-entree .menu-liste, #nav_expo .menu-entree .menu-liste a { display:inline; line-height:0; font-size:0px; height:0; padding-left:2px; padding-right:2px;
}
#nav .menu-entree:hover .menu-liste, #nav .menu-entree:hover .menu-liste a, #nav_bio .menu-entree:hover .menu-liste, #nav_bio .menu-entree:hover .menu-liste a, #nav_expo .menu-entree:hover .menu-liste, #nav_expo .menu-entree:hover .menu-liste a { font-size:0.825em; line-height:20px; height:20px;
}



Script générique des diaporamas AJAX
Vader[FR] — 2014-10-18T19:53:27Z
Ce script est le même pour le diaporama de la page de garde et pour le diaporama de la galerie.
Il lit des paramètres dans la page (numéro de rubrique à parcourir, nombre de niveaux de sous-rubriques à chercher, langue) et envoie la requête au serveur, puis insère dans la page l'image, le titre et le texte de chaque élément du diaporama en l'adaptant à la taille de la fenêtre, avant de demander l'élément suivant.
En effet, les éléments de ce diaporama sont des articles :
 le logo de l'article est une image particulière, que l'on peut aisément différencier du texte, afin de lui accorder un traitement différent.
 un article existe dans une certaine langue, ce qui permet d'afficher un diaporama différent selon la langue souhaitée
 un article avec texte, titre et logo est facile à ajouter, modifier ou enlever dans l'espace privé de SPIP.
Lancement des fonctions JavaScript

Comme on peut le voir dans l'aperçu Firebug de la structure de la page de garde, il y a dans chaque page, pour l'évènement onLoad (= "au chargement") de l'élément HTML body, appel à une fonction unique et générique "AuChargement".
function AuChargement(){ pisteIE(); cachejs(); setTimeout("charger_diapo()",1000); // 1 seconde traitercadres(); traiterimages();
}
Cette fonction unique en invoque d'autres, qui, selon les éléments présents ou non dans la page, feront quelque chose :
 pisteIE va, comme son nom l'indique, rediriger les utilisateurs du navigateur Internet Explorer vers une page d'avertissement, indiquant les déficiences de Microsoft Internet Explorer quand aux éléments pourtant normalisés W3C de la page.
 Un lien "continuer quand même" permet aux utilisateurs d'Internet Explorer de poursuivre la navigation, ils ont été prévenus.
 Un système de cookie enregistre le fait que l'utilisateur est prévenu, cela évite de faire la redirection à chaque ouverture de page.
 cachejs sert, comme son nom l'indique, à cacher le message selon lequel JavaScript est désactivé sur le navigateur.
 setTimeout("charger_diapo()",1000); lance la fonction charger_diapo() au bout d'une seconde.
 C'est cette fonction qui ira chercher les paramètres du diaporama dans la page et enverra la requête au serveur pour le premier élément.
 traitercadres et traiterimages vont redimensionner les cadres et images qui en ont besoin.
Lancement du diaporama
function charger_diapo(){ if (this.document.getElementById('diapo')!=null){
Cette fonction ne s'exécutera que si un élément "diapo" est présent dans la page
 if (this.document.getElementById('nrubrique')!=null){ nrubrique=this.document.getElementById('nrubrique').value; }else{ nrubrique=0; }
Pour chaque paramètre du diaporama, on vérifie sa présence, et en cas d'absence on utilise une valeur par défaut
Autres paramètres
 if (this.document.getElementById('mindepth')!=null){ mindepth=this.document.getElementById('mindepth').value; }else{ mindepth=0; } if (this.document.getElementById('maxdepth')!=null){ maxdepth=this.document.getElementById('maxdepth').value; }else{ maxdepth=1; } if (this.document.getElementById('lang')!=null){ lang=this.document.getElementById('lang').value; }else{ lang="fr"; }
Puis on initialise quelques valeurs avant d'appeler la fonction qui créera et enverra la requête.
 var url_image=null; var texte_diapo=null; var titre_diapo=null; requete_requete_image_diapo('charger_diapo.php?id=0&rub='+nrubrique+'&min='+mindepth+'&max='+maxdepth+'&lang='+lang); }
}
Création de la requête XMLHTTP

Le script javaScript défini quelque variables globales, que plusieurs fonctions utiliseront.
var diapo = 0;
var prochain=0;
var nrubrique=0;
var mindepth=0;
var maxdepth=1;
var delai=5000;
Avant de pouvoir créer la requête XMLHTTP, il faut un objet de type xmlhttprequest pour y mettre les paramètres, l'envoyer au serveur et recevoir sa réponse.

En fonction du navigateur, on utilisera plusieurs méthodes.
Création de l'objet xmlhttprequest
function get_requete_image_diapo(){ var requete_image_diapo = null; if (window.XMLHttpRequest){ // Firefox requete_image_diapo=new XMLHttpRequest(); }else if (window.ActiveXObject){ // IE try{ requete_image_diapo=new ActiveXObject("Msxml12.XMLHTTP"); }catch(e){ try{ requete_image_diapo=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e1){ requete_image_diapo=null; } } }else{ // non supporté alert("Votre navigateur ne supporte pas les XMLHTTPRequest."); /* + redirection vers page navigs.html */ } return requete_image_diapo;
}
La fonction précédente, qui créé l'objet xmlhttprequest, est appelée par la fonction de création et d'envoi de la requête que voici :
function requete_requete_image_diapo(url){
	requete_image_diapo=get_requete_image_diapo(); if (!requete_image_diapo){ alert("Votre navigateur ne peut créer de requête AJAX."); /* + redirectiuon vers page navigs.html */ return; }
On récupère l'objet xmlhttprequest, puis, si celui-ci n'a pu être créé et que par conséquent la variable requete_image_diapo n'existe pas - le ! signifiant la négation - on affiche un message et l'on quitte la fonction.

Sinon, on poursuit
	//alert("envoi de la requete"); requete_image_diapo.onreadystatechange=function(){traitementReponse_requete_image_diapo(requete_image_diapo)} requete_image_diapo.open("GET",url,true); requete_image_diapo.send(null);
}
requete_image_diapo.onreadystatechange= définit la fonction function(){ ... } de traitement de la réponse, quand la requête aura "changé d'état".

Puis on ouvre l'url du script du serveur auquel il faut envoyer la requête, et qui la traitera pour envoyer la réponse selon les paramètres indiqués, et on y envoie la requête.

Modification de la page affichée
function traitementReponse_requete_image_diapo(requete_image_diapo){ var contenu; var erreur=0; if (requete_image_diapo.readyState==4){

Si la requête est dans l'état "4", c'est à dire que l'on a reçu la réponse du serveur,
 //alert("reception de la reponse : traitement"); contenu=requete_image_diapo.responseXML;
On récupère le document XML constituant la réponse du serveur.
 if (contenu.getElementsByTagName("image")[0].firstChild.nodeValue!=null){ url_image=contenu.getElementsByTagName("image")[0].firstChild.nodeValue; }else{ erreur=1; }
On vérifie la présence de différents éléments de réponse, en préparant des valeurs par défaut si besoin.
 contenu est le document XML de réponse. Celui-ci est organisé selon une arborescence de balises pour les divers éléments et leurs valeurs.
 on utilise la fonction getElementsByTagName pour adresser ces balises par leur nom
 cette fonction renvoie un tableau de balises correspondantes, dont on s'intéresse au premier élément, à la case 0, qui est la première case d'un tableau javaScript.
 Une fois récupéré la balise souhaitée, on récupère la valeur du nœud (nodeValue).
Autres éléments
 if (contenu.getElementsByTagName("url_article")[0].firstChild.nodeValue!=null){ url_article=contenu.getElementsByTagName("url_article")[0].firstChild.nodeValue; }else{ erreur=1; } if (contenu.getElementsByTagName("titre")[0].firstChild!=null){ if (contenu.getElementsByTagName("titre")[0].firstChild.nodeValue!=null){ titre_diapo=contenu.getElementsByTagName("titre")[0].firstChild.nodeValue; }else{ erreur=1; } }else{ titre_diapo=""; } //alert("titre="+contenu.getElementsByTagName("titre")[0].textContent); // y'a aussi data, wholeText...nodeValue... if (contenu.getElementsByTagName("texte")[0].firstChild!=null){ if (contenu.getElementsByTagName("texte")[0].firstChild.nodeValue!=null){ texte_diapo=contenu.getElementsByTagName("texte")[0].firstChild.nodeValue; if ((texte_diapo==null)||(texte_diapo=="")){ texte_diapo="Sans titre"; } }else{ texte_diapo=""; } }else{ texte_diapo=""; }
De même, on récupère plusieurs paramètres toujours présents, dont la prochaine image preload que l'on va commencer à charger comme arrière plan à taille nulle pour accélérer son chargement lorsque ce sera son tour.
 prochain=contenu.getElementsByTagName("prochain")[0].firstChild.nodeValue; // delai=contenu.getElementsByTagName("delai")[0].firstChild.nodeValue; preload=contenu.getElementsByTagName("preload")[0].firstChild.nodeValue; //alert("texte="+contenu.getElementsByTagName("texte_diapo")[0].firstChild.nodeValue);
Pour comprendre à quoi correspondent ces éléments, voir l'onglet détaillant le script PHP.
Et si tout va bien (variable erreur toujours à zéro)
	if (erreur==0){	
On essaie de récupérer le bloc "image" du diaporama afin de pouvoir y intégrer l'image indiquée dans le document XML.

Dans la même structure conditionnelle, l'on s'assure qu'il y a bien une image à y intégrer (l'url de l'image fournie dans la réponse XML est non nulle).
 if ((this.document.getElementById('diapo_image')!=null)&&(url_image!="")){ //alert ("on a le div image");
Si le bloc image existe, on le référence afin de pouvoir le modifier, en utilisant la fonction getElementById qui renvoie un élément unique, puis on y intègre un lien vers l'article sous la forme d'une image qui est son logo avec la valeur innerHTML de l'élément, qui correspond au code HTML que l'élément contient.
 var div_image=this.document.getElementById('diapo_image'); // le div div_image.innerHTML="";
L'image du diaporama étant dans son bloc, il est peut être utile à présent de la redimensionner afin de l'adapter aux dimensions dudit bloc.
On récupère donc les dimensions du bloc, par offsetHeight et offsetWidth, puis les dimensions réelles de l'image, par les valeurs "hauteur" et "largeur" fournies dans la réponse (voir script PHP).
 var h_div=this.document.getElementById('diapo_image').offsetHeight; var l_div=this.document.getElementById('diapo_image').offsetWidth; var h_img=parseFloat(contenu.getElementsByTagName("hauteur")[0].firstChild.nodeValue); var l_img=parseFloat(contenu.getElementsByTagName("largeur")[0].firstChild.nodeValue); //alert("traitement d'une image de "+h_img+" par "+l_img);
Selon la différence de dimension entre le bloc et l'image, il faudra la réduire prioritairement en largeur, en hauteur, ou les deux, et si l'image n'est pas trop grande, on cherchera à la centrer.
Le reste du script de traitement devrait être aisément compréhensible, d'autant que les commentaires permettent de suivre les conditions vérifiées et le traitement effectué.

Le principe reste toujours le même :
 si une dimension de l'image est plus grande que celle du bloc, alors
 calculer la proportion entre les deux afin de pouvoir réduire l'image
 une fois la bonne proportion de réduction trouvée, calculer les marges entre les dimensions du bloc et celles de l'image réduite, pour centrer l'image.
 if (l_img>l_div){ var reduction=l_img/l_div; // la proportion de réduction, qui sera la meme en hauteur et largeur // si h_img/reduction>h_div alors if ((h_img/reduction)>h_div){ // image plus large et en réduite, plus haute que le div // image plus HAUTE que large // réduction_h = h_img/h_div var reduction_h=h_img/h_div; // appliquer reduction_h en hauteur et largeur var nh=h_img/reduction_h; var nl=l_img/reduction_h; // pour être au milieu
Une fois l'image réduite, on calcule la marge, puis on applique réduction et marge de centrage.

De même que pour le bloc diapo, on utilise la fonction getElementById pour référencer le bloc, puis, comme pour la réponse XML, getElementsByTagName pour récupérer le tableau des images (balise  contenues, la première (et seule) étant à la case 0.

Puis l'on définit les attributs HTML de cette balise  pour retailler l'image, et lui ajouter un style personnalisé contenant la marge de centrage, ainsi que la prochaine image preload comme arrière-plan de taille nulle pour accélérer son chargement lorsque ce sera son tour.
 var margel=(l_div-nl)/2; // si la marge est > à x px, calculer la différence et réduire div image pour agrandir div texte image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("height",nh); image.setAttribute("width",nl); image.setAttribute("style","margin-left:"+margel+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;");
Autres cas
 // sinon }else{ // image plus large mais pas plus haute que le div // image plus LARGE que haute // appliquer réduction en largeur et hauteur var nh=h_img/reduction; var nl=l_img/reduction; // pour être au milieu, il faut que margeh=()h_div-nh/2 var margeh=(h_div-nh)/2; image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("height",nh); image.setAttribute("width",nl); image.setAttribute("style","margin-top:"+margeh+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;"); //finsi } // fins }else{ // image pas plus large que le div if (h_img>h_div){ // div assez large mais pas assez haut // réduction_h = h_img/h_div var reduction_h=h_img/h_div; // appliquer reduction_h en hauteur et largeur var nh=h_img/reduction_h; var nl=l_img/reduction_h; // pour être au milieu, il faut que margel=()545-nl/2 var margel=(l_div-nl)/2; image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("style","margin-left:"+margel+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;"); image.setAttribute("height",nh); image.setAttribute("width",nl); }else{ // image pas trop grande // mais cadre peut-être trop grand var margeh=(h_div-h_img)/2; var margel=(l_div-l_img)/2; image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("style","margin-left:"+margel+"px;margin-top:"+margeh+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;"); } } }else{ //alert("div image non trouvé"); }
Puis on fait la même chose pour le texte et le titre
 if (this.document.getElementById('diapo_texte')!=null){ var div_texte=this.document.getElementById('diapo_texte'); // le div //alert ("on a le div texte"); div_texte.innerHTML=""+titre_diapo+""+texte_diapo+"
"; }else{ //alert("div texte non trouvé"); } }
...et on demande le prochain élément, si bien sûr cela a du sens.

Si le diaporama n'a aucun ou qu'un seul élément, il n'est pas utile d'envoyer d'autre requête, et le script du serveur indiquera que prochain vaut "-1", soit une valeur non valide.
la commande setTimeout( permet de définir un délai avant de demander le prochain élément.
 diapo=prochain; if (prochain!=-1){ //	requete_requete_image_diapo("charger_diapo.php?id="+diapo+"&delai="+delai); setTimeout("requete_requete_image_diapo('charger_diapo.php?id='+diapo+'&rub='+nrubrique+'&min='+mindepth+'&max='+maxdepth+'&lang='+lang)",delai); } }
}
script PHP

Le script PHP charger_diapo.php, situé à la racine du serveur web, et appelé comme URL par la fonction charger_diapo et après chaque traitement de réponse, va traiter la requête xmlhttp et envoyer une réponse au format XML.

Dans la mesure où les scripts PHP de SPIP peuvent utiliser des variables de session pour stocker des paramètres, on se connecte à cette session afin de pouvoir récupérer la langue choisie.
On créé l'entête de la réponse avant qu'un autre script, de traitement des accents, ne s'en charge.

le script accents.php contient plusieurs fonctions, dont une utilisée pour transformer les caractères accentués contenus dans la base en leur équivalent en code HTML, permettant un affichage normal quel que soient les encodages de caractère du serveur et du navigateur.
header('content-Type:text/xml,charset=UTF-8');
require "accents.php";
On se connecte à la base de données.
mysql_connect('serveur','utilisateur','mot de passe','MYSQL'); mysql_select_db("nom de la base");
On travaillera sur les tables des rubriques et des articles de SPIP, qui ont généralement un nom commençant par "spip_".
$tablerubriques="spip_rubriques";
$tablearticles="spip_articles";
La requête xmlhttp envoyant ses paramètres dans l'url, par la méthode GET (voir article sur PHP), on récupère les paramètres par la variable globale $_GET, qui est un tableau associatif (les colonnes sont identifiées par nom et non par numéro).
if (isset($_GET["id"])){ $idd=$_GET["id"];
}else{ $idd=0; /* id du diapo en cours, à diviser par total de diapo et prendre le reste , ex si idd = 5 pour 3 photos existantes, alors charger photo 2 */
}
Autres paramètres
if (isset($_GET["delai"])){ $delai=$_GET["delai"]; //echo "delai de $delai secondes
";
}else{ $delai=0;
} if (isset($_GET["rub"])){ $id_rubrique_diapo=$_GET["rub"];
}else{ $id_rubrique_diapo=0; } if (isset($_GET["min"])){ $min_depth=$_GET["min"];
}else{ $min_depth=0; } if (isset($_GET["max"])){ $max_depth=$_GET["max"];
}else{ $max_depth=1; } if (isset($_GET["lang"])){ $_SESSION["lang"]=$_GET["lang"];
}else{ if (isset($_SESSION["languser"])){ $_SESSION["lang"]=$_SESSION["languser"]; } if (!isset($_SESSION["lang"])){ $_SESSION["lang"]="fr"; }
}
Pour la langue, on essaie d'abord de la récupérer par le paramètre fourni lors de la requête et le stocker dans la variable de session "lang", avant de pendre la variable de session "languser" si elle est définie, et enfin, si la variable de session "lang" n'est toujours pas définie, on prend par défaut langue française.

Une fonction de parcourt de rubrique et sous-rubrique est définie, ce qui permet de faire du parcours récursif, lorsque la fonction s'appelle elle-même.

La fonction renverra tous les identifiants de sous-rubriques dans lesquelles on est susceptible de trouver des éléments de diaporama.
function parcourt_rubrik($cur_rubrik,$curdepth,$maxdepth,$mindepth) {
Ces deux paramètres ne pouvant être passés d'un niveau à l'autre de la boucle récursive sans rendre la fonction complexe, on les redéfinit localement à chaque niveau.
	$tablerubriques="spip_rubriques"; $tablearticles="spip_articles";
	$curdepth.=$curdepth+1; $rubs=array(); // le tableau qu'on renverra, contenant dans la case 0 sa taille $reksrub="select id_rubrique from ".$tablerubriques." where id_parent=$cur_rubrik"; $resrub=mysql_query($reksrub); while ($rowrub=mysql_fetch_array($resrub,MYSQL_ASSOC)){ $ssrub=$rowrub["id_rubrique"]; if ($curdepth>=$mindepth){ $rubs[]=$ssrub; } if ($curdepth<$maxdepth){ $rubs=array_merge($rubs,parcourt_rubrik($ssrub,$curdepth,$maxdepth,$mindepth)); } } return $rubs;
}
On créé donc la liste des rubriques en appelant la fonction récursive, en partant de la rubrique fournie en paramètre par la requête xmlhttp.
$liste_rubriques=parcourt_rubrik($id_rubrique_diapo,$min_depth,$max_depth,$min_depth);
Ici, on construit un morceau de la requête SQL, à savoir une partie de la clause conditionnelle WHERE, en ajoutant à un code de base des morceaux de code SQL [1]

On utilise une boucle while (tant que) pour parcourir un tableau dont la taille est variable, en s'arrêtant lorsque l'index atteint le nombre de case contenues dans le tableau, et en incrémentant l'index au fur et à mesure.
$liste_rubrik="(id_rubrique=$id_rubrique_diapo";
$irub=0; while ($irub

Une fois que la partie "liste des rubriques parentes" de la requête des articles que l'on va sélectionner est créée, on l'utilise d'abord dans une requête pour compter les éléments, puis ensuite dans la requête de récupération.
/* requete pour connaître le nombre total de photos pouvant être affichées */ $rek_compt="select count(*) as total from ".$tablearticles." where $liste_rubrik and statut='publie' and lang='".$_SESSION["lang"]."'"; // pas de order by pour compter
$res_compt=mysql_query($rek_compt);
$row_total=mysql_fetch_array($res_compt,MYSQL_ASSOC);
$total=$row_total["total"];
 clause SELECT :
 On compte count
 les lignes dans leur globalité count(*)
 dont on stockera le compte dans une colonne nommée "total" as total, plus simple pour la référencer,
 clause FROM
 depuis la table des articles, dont le nom, susceptible de varier, a été mis dans la variable tablearticles
 clause WHERE
 pour les articles faisant partie de la liste des rubriques
 et étant publiés
 et dont la langue est celle déterminée plus tôt et stockée dans la variable de session.
if ($total>0){
Si il y a effectivement plusieurs articles publiés dans les rubriques ciblées et ce dans la langue choisie, alors on va récupérer les deux premiers articles selon un tri définit plus bas.

Le script JavaScript, fournissant toujours un paramètre de numéro de diapo à charger dans la requête xmlhttp, on se base sur ce paramètre pour démarrer la sélection dans la liste des articles disponibles.
Quand au prochain élément de diaporama à charger, c'est soit l'article suivant dans la liste - si l'article en cours n'est pas le dernier de la liste - soit le premier, à savoir le numéro 0 de la liste (tableau des réponses).
	$debut=$idd; // 0 par defaut $par_page=1; if (($idd+1)<$total){ $prochain=$idd+1; }else{ $prochain=0; }
La requête de sélection est la même que celle de comptage, logique puisque l'on travaille sur les mêmes éléments.

Seules les clauses SELECT - car on ne compte pas cette fois - et la clause de tri ORDER - qui était inutile dans une requête de comptage - vont changer

On ajoute aussi une clause LIMIT qui restreint le nombre de lignes de résultat que l'on va finalement traiter.
 clause SELECT : on sélectionne tous les champs *
 clause ORDER BY par date décroissante DESC, et donc par article le plus récent.
 on limite les lignes de résultat à 1, comme vu plus haut  $par_page=1;, et on démarre à la ligne numéro $debut, à savoir $idd, le paramètre de numéro de diapo fourni à l'appel du script par la requête xmlhttp.
	$rek_sel="select * from ".$tablearticles." where $liste_rubrik and statut='publie' and lang='".$_SESSION["lang"]."' order by 'date' DESC limit $debut,$par_page "; // order by date DESC $res_sel=mysql_query($rek_sel);
Étant donné que l'on traite des articles, et que l'image cherchée est un logo, il est bon de savoir que sous SPIP, les logos ont un nom particulier :
 type de l'élément SPIP articles, rubriques, sites
 on
 numéro dudit élément
 les logos étant stockés à la racine du dossier IMG, peu importe leur extension (jpg, png, gif...)
	$imagebase="IMG/arton";
Pour chaque ligne de résultat renvoyée (en fait il n'y en a qu'une)
	while ($row_sel=mysql_fetch_array($res_sel,MYSQL_ASSOC)){
On récupère la valeur de chaque champ dont on a besoin.

Les champs de type texte (titre et texte) passent par plusieurs filtres pour traiter des caractères spéciaux qui risqueraient de faire planter le document XML réponse.
 $id=$row_sel["id_article"]; $titre=htmlentities($row_sel["titre"]); $titre=remet_accents($titre); $titre=str_replace("'","'",$titre); $titre=str_replace('"','"',$titre); $titre=str_replace("°","°",$titre); $texte=htmlentities($row_sel["texte"]); $texte=remet_accents($texte); $texte=str_replace("'","'",$texte); $texte=str_replace('"','"',$texte); $texte=str_replace("°","°",$texte); $texte=nl2br($texte); $urlarticle="spip.php?article$id";
Pour l'image, on recherche si le fichier artonXX existe pour plusieurs extensions possibles.

Si un fichier portant ce nom existe, alors on a trouvé.
 // image = IMG/arton[+id article].jpg ou autre // =========== existence du fichier jpg, png ou gif ============== $extensions=array("jpg","jpeg","JPG","png","PNG","gif","GIF"); $i=0; $trouve=false; $image=""; while (($i"; if (file_exists($image_test)){ //echo "$image_test existe
"; $image=$image_test; $trouve=true; }else{ //echo "$image_test n'existe pas
"; } $i++; } // image par défaut if (!$trouve){ $image="interrogation.png"; }
Si aucun fichier image de logo correspondant à l'article n'est trouvé, on prend une image par défaut.

Puis on récupère les dimensions de l'image contenue dans le fichier avec une fonction PHP.
 $infos_image = @getImageSize($image); // info sur la dimension de l'image // '@' est placé devant la fonction getImageSize() pour empecher l'affichage des erreurs si l'image est absente. //dimension $largeur = $infos_image[0]; // largeur de l'image $hauteur = $infos_image[1]; // hauteur de l'image
Ces informations de taille seront envoyées dans la réponse et utilisées par le script pour redimensionner l'image si besoin est.
Et on oublie pas de fermer la boucle de traitement de la ligne de résultat des articles correspondants à ce que l'on cherche.
 }
Puis on sélectionne l'image suivante afin de pouvoir commencer à la charger plus tôt, de sorte qu'au tour d'après, l'image de la diaporama suivante se chargera plus vite.

La requête est la même que la précédente, mais on ne prendra pas la même ligne de résultat.

Le traitement pour trouver le fichier image sera le même.
Image suivante
	$rek_presel="select * from ".$tablearticles." where $liste_rubrik and statut='publie' and lang='".$_SESSION["lang"]."' order by 'date' DESC limit $prochain,$par_page "; // order by date DESC $res_presel=mysql_query($rek_presel); while ($row_presel=mysql_fetch_array($res_presel,MYSQL_ASSOC)){ $extensions=array("jpg","jpeg","JPG","png","PNG","gif","GIF"); $i=0; $trouve=false; $pre_image=""; while (($i"; if (file_exists($image_test)){ //echo "$image_test existe
"; $pre_image=$image_test; $trouve=true; }else{ //echo "$image_test n'existe pas
"; } $i++; } // image par défaut if (!$trouve){ $pre_image="interrogation.png"; } } //echo "image trouvee : $image
";
Si en revanche il n'y a aucun article correspondant à ce que l'on cherche
}else{ $image="interrogation.png"; $texte="\"\""; $largeur=0; $hauteur=0; $delai=0; $pre_image="\"\""; $urlarticle="#"; // page actuelle $prochain=-1; $titre="Aucune image disponible."; // changer le texte selon la langue if ($_SESSION["lang"]=="fr"){ $titre="Aucune image disponible."; // changer le texte selon la langue } if ($_SESSION["lang"]=="en"){ $titre="No article available for this language : english."; // changer le texte selon la langue } if ($_SESSION["lang"]=="de"){ } $texte=$titre; // $texte=htmlentities($texte); // $texte=remet_accents($texte);
}
Puis il est temps de créer le document XML qui servira de réponse.

Dans Firebug, il est possible de voir, dans l'onglet réseau, les requêtes avec leurs paramètres, et les réponses associées en XML.
On crée un objet de type DOMDocument, puis on y ajoute les éléments et sous-éléments, en commençant par la racine du document.
// réponse du serveur = contenu de l'XmlHttpResponse
$doc=new DOMDocument("1.0","utf-8");
$racine=$doc->createElement('root');
$doc->appendChild($racine);
$url_image=$doc->createElement('image',$image);
$racine->appendChild($url_image);
$lien=$doc->createElement('url_article',$urlarticle);
$racine->appendChild($lien);
$titre_diapo=$doc->createElement('titre',$titre);
$racine->appendChild($titre_diapo);
$texte_diapo=$doc->createElement('texte',$texte);
$racine->appendChild($texte_diapo);
$info=$doc->createElement('largeur',$largeur);
$racine->appendChild($info);
$info2=$doc->createElement('hauteur',$hauteur);
$racine->appendChild($info2);
$tempo=$doc->createElement('delai',$delai);
$racine->appendChild($tempo);
$next=$doc->createElement('prochain',$prochain);
$racine->appendChild($next);
$pre=$doc->createElement('preload',$pre_image);
$racine->appendChild($pre);
$debug=$doc->createElement('debug',"$debugmsg");
$racine->appendChild($debug);
Et pour finir, on envoie le document par un simple echo du texte XML renvoyé par la fonction saveXML sur l'objet.
echo $doc->saveXML();
?>


		
		
[1] ça tombe bien, j'avais justement besoin d'exemple de ce genre de méthode pour un autre article



Page de garde et structure générale
Vader[FR] — 2014-10-18T14:40:37Z
Page de garde

La toute première page (http://isabellepalenc.com/) est une simple page avec fond grisé et 3 liens de langue. Pour l'instant, seul la langue française est disponible car les articles n'ont pas encore été traduits.
Le lien de langue mène ensuite à la rubrique biographie (http://isabellepalenc.com/spip.php?rubrique2).
Sur la page de garde furent affichés la liste des articles les plus récents, puis un diaporama automatique des œuvres situées dans la rubrique galerie, puis enfin un diaporama automatique sur l'artiste et son atelier, ainsi qu'une citation.
Dès le départ - et c'est un point commun à tous mes squelettes SPIP/Zpip - fut conçue une fausse rubrique "Accueil" en tant que rubrique numéro 1, et ce pour plusieurs raisons :
 La rubrique est listée automatiquement dans le menu des rubriques principales du bloc navigation
 Le nom de cette rubrique dans la liste peut facilement être traduit grâce à un bloc multilingue dans SPIP, plus facile à éditer qu'un lien en dur dans le squelette.
 Le site étant multilingue, le tri par titre dans la liste des rubriques aurait provoqué des incohérences selon la langue, c'est pourquoi les rubriques sont listées par numéro.
 La fausse rubrique étant la numéro 1, elle apparaît toujours en premier, que son nom soit "Accueil" ou "Home".
 Cette fausse rubrique peut en cacher d'autres, comme un diaporama dédié ou une citation, qui ne seront visibles de nulle part ailleurs sur le site, y compris la page de plan ou la page recherche.
 Cette fonctionnalité n'était pas prévue au départ, mais était toujours possible, et à fini par servir.
Au sein d'un plugin Zpip, les fichiers de squelette correspondants à la page de garde sont :
 rubrique=1.html à la racine du plugin, qui se contente de décrire pour cette rubrique la même structure que la page sommaire  
 page-sommaire.html dans le répertoire contenu, qui décrit donc le contenu commun des pages sommaire et "Accueil" (rubrique 1).
 rubrique-1.html dans le répertoire contenu, qui affichera pour les sous rubriques de la rubrique 1 le même contenu (que la page sommaire).
Squelette de la page de garde

 le bloc conteneur général du contenu.
Style CSS associé
.contenu-principal { padding:5px;
}
Pour les éléments de classe "contenu-principal" : espace interne de 5 pixels à gauche.
div.galeries { position:absolute; top:50px; bottom:0; left:0; right:5px; overflow-y:auto;
}
Pour les blocs de classe "galeries" : fixé à 50 pixels du bord haut (du cadre conteneur ou de la fenêtre), à 0 pixels du bas et de la gauche, 5 pixels du bord droite, et ascenseur vertical (axe y) automatique.
 le bloc du diaporama
       [(#LOGO_ARTICLE)]  
  JavaScript doit être activé pour que le diaporama puisse démarrer 
 
Ce bloc contient un formulaire, qui sera lu par le script JavaScript générique des diaporamas, afin de préparer la requête XMLHTTP pour le serveur et demander l'élément de diaporama à afficher.

Seuls les éléments (image, titre, texte descriptif) du diaporama seront demandés et téléchargés depuis le serveur, sans que la page ne soit rechargée, afin d'alléger la charge.
Ce concept de programmation en web se nomme AJAX.
Une boucle SPIP permet de charger la première image avant même le lancement du diaporama.
Style CSS diaporama
#diapo { position:absolute; left:0; top:55px; bottom:120px; right:55px; background-color:#999999;
}
Pour le bloc "diapo" : fixé à gauche, en haut, en bas et à droite. 120 pixels du bas afin de prendre en compte la hauteur - fixe - du bloc citation situé dessous.
#diapo_image, #bio_texte, #peintures_image { position:absolute; left:25px; top:25px; bottom:25px;
}
#diapo_image, #peintures_image { right:500px;
}
#diapo_texte, #peintures_contenu { width:475px;
}
#diapo_image img, #bio_image img, #peintures_image img { max-height:100%; max-width:100%;
} #diapo_texte, #bio_image, #peintures_contenu { position:absolute; bottom:0; top:25px; right:5px; padding-right:5px;
} #diapo_texte, #bio_texte, #peintures_contenu { overflow-y:auto;
} #diapo.diapo-sommaire #diapo_texte { visibility:hidden;
} #diapo.diapo-sommaire #diapo_image { right:5px;
}
Afin de cacher le bloc de texte du diaporama de la page de garde, et seulement celle là, le bloc diapo dispose d'une classe, "diapo-sommaire", qui fait que les blocs "diapo_texte" contenus dans un bloc disposant de la classe précitée seront cachés.
De même, les blocs "diapo_image" contenus dans un bloc disposant de la classe précitée seront "fixés" à 5px du bord droite, au lieu de 500px.
Cette classe n'est définie que dans le squelette de la page sommaire.

Cela permet d'avoir un seul "squelette" de diaporama, et donc un seul script AJAX, générique.
.titre_diapo { font-size:1.2em; font-weight:bold;
} .titre_diapo, .titre_diapo a, .titre_article { color:#666666;
} .titre_diapo a { text-decoration: none;
}
 le bloc citation
	   [(#TEXTE)]   
Ici, c'est une simple boucle SPIP qui va chercher un et un seul ({pagination 1}) article (on travaille sur la table des (ARTICLES)) au hasard ({par hasard}) dans la rubrique 36 ({id_rubrique=36}), rubrique dédiée qui contient les citations et est cachée dans la rubrique "Accueil".

Le filtre de langue {lang} permet de ne choisir que parmi les articles dans la langue souhaitée, selon le paramètre transmis à SPIP (lien de langue).

On affiche ensuite le texte de la citation par la balise [(#TEXTE)].
Style CSS citation
#citation { position:absolute; left:0; bottom:55px; right:55px; background-color:#999999; height:50px; text-align:center;
}
Pour le bloc "citation" : fixé à gauche, en bas et à droite, hauteur fixe de 50 pixels.
#citation p { font-size: 1.2em; margin: 0;
}
 Puis la fin du bloc conteneur général
Structure générale du site

L'élément body est surchargé par un bloc "page" positionné de manière absolue et fixé aux bords de la fenêtre.

Les différents éléments du corps de page sont ensuite disposé dans des blocs dédiés : entête, pied de page, navigation et contenu.

Les 4 blocs sont positionnés de manière absolue à l'intérieur du bloc "page", fixés aux bords dudit bloc, afin que le bloc "contenu" puisse s'étendre selon la taille de l'écran, sans que les autres blocs ne se déforment (voir ici).
Le bloc entête contient lui-même 2 sous-blocs :
 le bloc unique d'identifiant #drapos, contenant la liste des liens de langue selon les langues utilisées dans les articles publiés du site SPIP. Il est situé de manière absolue dans son cadre (entete), fixé à 20% du bord gauche et 20 pixels du haut. Il peut ainsi s'étendre selon les besoins.
 le bloc de classe .accueil, qui est de fait également unique. Il est lui aussi fixé de manière absolue dans son cadre (entete), à 150 pixels du bord droite et 20 pixels du haut. Il contient le logo, qui est de largeur fixe.
Cela permet si besoin est de mettre un bloc d'arrière plan et un bloc filtre sans toucher au contenu, comme c'est le cas pour certains de mes thèmes ZenGarden (exemple).

L'arrière plan étant monochrome, et le bloc contenu disposant généralement d'un arrière plan propre, il n'a pas été nécessaire d'utiliser un bloc dédié à l'arrière plan et un bloc filtre.


Structure général site Isabelle palenc
Aperçu par Firebug (module pour Mozilla Firefox)





Présentation générale du site
Vader[FR] — 2014-10-18T14:40:33Z
Comme son nom l'indique, ce site est celui d'une artiste peintre sculpteur, par ailleurs membre des Ateliers du Père Lachaise Associés.
Après non pas 7 [1] mais 2 ans de réflexion, ce site est finalement ouvert au public.
Ce site SPIP étant un site de type "artistique", son squelette est épuré, afin de mettre en avant les œuvres, et a été fait entièrement selon les souhaits de l'artiste, suite à une longue réflexion. Il utilise un squelette Zpip "customisé".
Ce site est par ailleurs multilingue.
Son fonctionnement technique sera détaillé dans cette rubrique :
 squelette dont multilinguisme,
 style CSS
 scripts JavaScript donc les diaporamas AJAX
		
		
[1] référence au film éponyme