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

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)

Affichage d'une rubrique par vignettes

Vader[FR] — 2014-06-17T16:23:20Z

La rubrique de mes Thèmes Zengarden affiche les sous-rubriques et articles par vignettes, et non sous forme de liste comme dans les autres rubriques.

Comment mettre en place ce format d'affichage ?

1) la boucle SPIP

Pour éviter d'avoir ce format d'affichage dans toutes les rubriques, il ne faudra le mettre que dans des squelettes de rubriques dédiés.

Ne faire ce format d'affichage que pour des rubriques avec relativement peu d'articles car il n'y a pas de système de pagination.

à l'intérieur de la , il faudra créer 2 boucles, une pour les rubriques, auxquelles on ajoute une petite icône style "répertoire", et une pour les articles.

Je ne vais pas expliquer le fonctionnement complet de la boucle SPIP ici, simplement le code HTML généré.

On sélectionne dans la table des rubriques, selon l'identifiant de la rubrique parent (la rubrique affichée) et on trie de manière alphanumérique par le titre au lieu de la date de publication.
Ainsi, les vignettes seront dans l'ordre alphabétique, ce qui est plus simple pour les visiteurs.

On génère un bloc div, dont la classe de style permettra un traitement adéquat.

Dans ce bloc, on affiche le logo de l'article (ou de la rubrique), en le réduisant aux bonnes dimensions, grâce au filtre |image_reduire{250,150}.

En dessous de l'image (en raison de l'utilisation d'un bloc paragraphe), mais toujours dans le même cadre, on affiche le titre de l'article (ou de la rubrique).

 [(#LOGO_RUBRIQUE|image_reduire{150,70})][(#TITRE)]

Articles et rubriques auraient pu avoir une classe CSS identique, mais il est préférable de faire une différence afin que celle-ci soit visible pour les visiteurs.

la boucle pour les articles :

	   [(#LOGO_ARTICLE|image_reduire{150,70})]
#TITRE

2) le style CSS

Toutes les vignettes s'alignent dans le même cadre, grâce à la propriété de style float:left.

Comme il n'y a pas de pagination, il faudra permettre au cadre conteneur de défiler, avec la propriété de style overflow-y:auto, qui affichera donc un "ascenseur" vertical si le contenu dépasse la taille du cadre.
Sauf si le cadre n'est pas "fixé" en taille fixe ou à distance fixe des bords en position:absolute (ou position:relative), auquel cas il pourra s'agrandir à volonté... et la page avec.

Tout d'abord, la taille et le positionnement, communs aux deux classes de vignettes.
La taille doit être cohérente avec celle du filtre de la boucle SPIP, et prévoir la hauteur du texte sous l'image.

La propriété de style float:left permet de faire "flotter" les blocs, qui vont s'aligner les uns à côtés des autres, puis "couler" à la ligne suivante.

.vignettes_rubrique, .vignettes_article { width:150px; height:100px; float:left; margin: 10px; text-align: center;
}

De même, les images (éléments HTML correspondants à la balise HTML img) contenus dans un bloc de classe vignettes, auront une taille limitée par le style CSS.

Dans la mesure où la taille des images est limitée par le filtre de la boucle SPIP, cette précaution n'est pas nécessaire.

.vignettes_rubrique img, .vignettes_article img { max-width:150px;
}

Pour les blocs des vignettes de rubriques, on ajoute une image d'arrière plan, en forme d'icône de répertoire, qui sera positionnée en bas à droite, et non répétée.
Cette image est située dans le même répertoire que le CSS, même si le CSS est question est invoqué par un CSS de thème situé dans un sous-répertoire, dans le cas d'une feuille de style commune (ce qui est le cas pour ce site).

.vignettes_rubrique { background-image:url("icon_rep.png"); background-position:bottom right; background-repeat:no-repeat;
}

En raison de la présence de cette vignette, il faut, afin que le texte (titre) des blocs vignettes de rubriques reste lisible et ne passe pas devant, ajouter une marge à droite, ici de 32px.

.vignettes_rubrique .texte { margin: 0 32px 0 0;
}