Modules, cadres et pages. PMB Services PMB
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 72
M
ODULES
,
CADRES ET PAGES
Cadres de l’OPAC et du portail
Un cadre est un élément visuel de forme rectangulaire, un « petit ensemble fondamental » . Il se caractérise par
les conditions d’affichage : visible dans toutes les pages ou dans une page spécifique ? page(s) de l’OPAC ou du portail ?
les propriétés CSS : positionnement ? dans quelle zone ? où exactement ? dimensions ?
le contenu et la source des données : quels types d’informations (notices, articles …) ? d’où viennent ces données ?
L
ES CADRES DE L
’OPAC
SONT LES
«
CADRES DE BASE
»
DE
PMB,
ILS EXISTENT D
’
OFFICE
Ils sont visibles même si on n’a pas activé le portail, et visibles aussi après avoir activé le portail !
Ils sont visibles dans les pages de l’OPAC et dans les pages du portail
Certains cadres de l’OPAC sont « fixes », c’est-à-dire présents dans toutes les pages (OPAC ou portail, peu importe)
On les place en général dans les zones « fixes », c’est-à-dire celles dont le contenu ne change pas, comme l’introduction, le
bandeau de gauche et le pied de page. En effet, ces cadres sont en général assez petits, donc ces 3 zones conviennent a priori.
Il y a toutefois une exception notable : le panier du lecteur est « fixe » (présent partout) mais on le place la plupart du temps en haut de la page centrale, qui est une zone dont le contenu est variable.
Introduction
Message de bienvenue
Page centrale
Panier du lecteur
Bandeau de gauche
Bloc de connexion
Adresse
Accueil (choix de la langue)
Pied de page
Barre de navigation
Liens externes
D’autres cadres de l’OPAC sont « variables », ils sont liés à un type spécifique de page.
On préfère placer les cadres variables dans la page centrale, la zone dont le contenu varie en fonction de l’activité du
lecteur (consultation du catalogue, recherche, affichage d’une notice ou d’une autorité, accès au compte du lecteur …)
Page centrale
Onglets de recherche
(simple, multicritères, dans les périodiques)
Types possibles de recherche simple
Butineur de sections
OPAC - Page d’accueil
OPAC – Résultats d’une recherche
Liste des catégories Liste des résultats Facettes
On configure toujours les cadres de l’OPAC dans l’onglet Administration, peu importe que vous ayez activé le portail ou non.
Administration > Outils > Paramètres de l’OPAC
Administration > OPAC > Infopages – Navigation - Recherche prédéfinie – Facettes …
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 73
Ce que le portail apporte en plus, par rapport au paramétrage « classique » dans l’onglet
Administration, c’est la possibilité de modifier l’aspect visuel des cadres de l’OPAC
Déplacer les cadres de l’OPAC d’une zone à l’autre
Déplacer les cadres de l’OPAC dans la même zone, afin de changer l’ordre d’affichage o
Exemple : déplacer le cadre « accueil » (choix de la langue)
Editer les propriétés CSS des cadres de l’OPAC : modifier la position, les dimensions, les marges …
L
ES CADRES DU PORTAIL NE PRÉEXISTENT PAS DANS
PMB,
IL FAUT LES CRÉER À PARTIR DES MODULES
Ils ne sont visibles que si on a activé le portail !
Ils sont visibles dans les pages du portail et dans les pages de l’OPAC
Certains cadres du portail sont « fixes », c’est-à-dire présents dans toutes les pages (OPAC ou portail, peu importe)
Il vaut mieux mettre les cadres fixes dans les zones « fixes », c’est-à-dire celles dont le contenu ne change pas, comme l’introduction, le bandeau de gauche et le pied de page. Mais concrètement, les 2 dernières zones conviennent moins bien.
Les cadres fixes du portail (ex. le menu ou le bloc de recherche) sont souvent trop grands que pour être placés de manière
ergonomique dans le bandeau de gauche ou le pied de page, c’est pourquoi on les place en général dans l’introduction.
Introduction
Menu
Bloc de recherche
N.B. Si le menu était dans le bandeau de gauche, il serait d ifficile de s’y retrouver !
Explications
Voir page suivante
D’autres cadres du portail sont « variables », ils sont liés à un type spécifique de page.
On préfère placer les cadres variables dans la page centrale, la zone dont le contenu varie en fonction de l’activité du
lecteur (contenu d’une rubrique, affichage d’un article, liste ou carrousel d’articles, carrousel de notices, agenda …)
Page centrale
Portail - Page d’accueil
Portail – Rubrique « Nouveautés »
Carrousel d’articles
Agenda
Liste d’articles
Carrousel de notices
Contenu d’une rubrique
On crée et on configure toujours les cadres du portail dans l’onglet Portail.
Quand on crée un cadre à partir d’un module, il faut en définir le contenu, la source de données, la (les) page(s) de destination, les
propriétés CSS, les liens avec le contenu bibliographique ou éditorial, la vue (ex. vue générique, template Django, liste ou carrousel)
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 74
Dans quelle zone placer les cadres de l’OPAC et du portail ?
En théorie, tous les cadres de l’OPAC et du portail peuvent être placés dans n’importe quelle zone, et dans n’importe quel type de page (OPAC ou portail).
Mais dans la pratique, il vaut mieux privilégier des zones ou des pages spécifiques pour certains types de cadres, pour des raisons d’ergonomie et d’équilibre graphique.
Il vaut mieux mettre les cadres fixes (= présents dans toutes les pages) dans les zones fixes, c’est-à-dire celles dont le contenu ne change pas, comme l’introduction, le bandeau de gauche et le pied de page.
Les 3 zones citées ci-dessus conviennent en général bien pour les cadres de l’OPAC (qui sont assez petits).
Certains cadres fixes du portail (menu ou bloc de recherche) sont souvent trop grands que pour être placés de manière ergonomique dans le bandeau de gauche ou le pied de page, c’est pourquoi on les place en général dans l’introduction.
Voir ci-dessous un exemple pour le menu : le déplacer dans le bandeau de gauche ne convient pas pour certaines feuilles de style !
Il y a toutefois une exception : le panier du lecteur est fixe (présent partout) mais on le positionne habituellement en haut de la page centrale, qui est une zone dont le contenu est variable.
Il vaut mieux mettre les cadres variables (= présents dans certains types de pages) dans une zone variable.
On préfère les placer dans la page centrale, la zone dont le contenu varie en fonction de l’activité du lecteur
(consultation d’une notice, recherche dans les articles ou dans le catalogue, lecture d’un article, accès au compte du lecteur ...)
Ce système contribue à la stabilité graphique à l’ensemble, puisque ce n’est qu’une partie de l’écran (la page centrale) qui
est rafraîchie lorsqu’on appelle une autre URL, et que les autres zones (introduction, bandeau de gauche et pied de page) ne changent ni de place ni d’aspect visuel ni de contenu. On n’a pas l’impression d’un bouleversement fondamental dès que le lecteur passe à une autre activité, et change dont d’URL.
On peut aussi placer un cadre (fixe ou variable) dans le bandeau de droite, mais il faut y réfléchir.
Certes, le bandeau de droite semble convenir parfaitement pour un carrousel de nouveautés ou pour les facettes, mais cette zone n’existe pas dans toutes les feuilles de style, et pose en outre un problème qu’on ne perçoit peut-être pas de prime abord.
Si on prévoit un bandeau de droite relativement large, on perd forcément de la place pour la partie centrale de la page
o
pas uniquement dans la page où on voit par exemple un cadre variable (comme un carrousel ou les facettes)
o
mais dans toutes les pages de l’OPAC ou du portail, même s’il n’y a aucun cadre dans le bandeau de droite
Or l’écran n’est pas extensible ! Ce rétrécissement de la page centrale sera perceptible partout, et obligera par exemple le lecteur
à scroller davantage pour parcourir une notice relativement détaillée.
C’est pourquoi certains préfèrent laisser à la page centrale presque toute la largeur disponible (hormis le bandeau de gauche), et placer un carrousel dans la partie droite de la page centrale, et non pas dans le bandeau de droite.
A vous de peser le pour et le contre.
Peut-on déplacer le menu ? Le mettre dans le bandeau de gauche plutôt que dans l’introduction ?
Voici le menu tel qu’il apparaît dans la zone introduction.
La rubrique Animations contient 2 sous-rubriques : Evénements et Heure du conte.
Le template qui gère ce menu est conçu dans la perspective où les rubriques sont affichées côte à côte, et les sous-rubriques en-dessous. Ceci permet d’avoir éventuellement d’autres sous-niveaux, qui viendraient à droite des titres Evènements et Heure du conte.
En effet, il faut de l’espace pour déployer en partie l’arbre du contenu éditorial.
D’un point de vue ergonomique, ce n’est pas une bonne idée de mettre un tel menu dans le bandeau de gauche, surtout s’il y a plusieurs rubriques et sous-rubriques.
Les sous-rubriques vont en effet masquer les titres des autres rubriques !
Bien entendu, cette remarque n’a pas une portée générale : elle concerne une feuille de style comme pmb4, dont le bandeau de gauche est assez étroit.
N.B. On peut aussi créer un menu avec le module Liste de rubriques.
En effet, on peut aussi obtenir un affichage ergonomique de l’arborescence en adaptant la feuille de style et le template lié à ce cadre (via des balises HTML).
Toutefois, il est nettement plus facile de créer un menu avec le module Menu !
La zone introduction convient en général mieux pour des cadres fixes du portail, comme le menu ou la recherche.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 75
Peut-on placer des cadres du portail dans les pages de l’OPAC ?
En théorie, on peut insérer les cadres du portail dans les pages du portail ou dans celles de l’OPAC.
Mais concrètement, on n’a guère de place disponible dans l’OPAC, si ce n’est dans la page d’accueil. En effet, les autres pages de l’OPAC (recherche, recherche, affichage d’une liste de notices ou de périodiques …) sont déjà tellement remplies qu’on ne voit pas comment y ajouter un cadre supplémentaire (ex. un article complet) sans nuire à la lisibilité de l’ensemble.
En outre, même la page d’accueil de l’OPAC risque vite d’être en surcapacité si elle contient déjà des liens vers les infopages, un onglet déplié de recherche, une liste assez longue de catégories et 3 étagères virtuelles.
Ce que vous pouvez en général ajouter sans trop de problème dans la page d’accueil de l’OPAC, c’est un carrousel de
nouveautés ou un flux RSS. Mais attention, n’en faites pas trop, cela deviendrait vite un fouillis.
Dès que vous voulez créer et étoffer le contenu éditorial, et le relier au contenu bibliographique, il faut envisager le passage
au portail. Afficher des articles complets ou des rubriques dans une page de l’OPAC est rarement une réussite ergonomique.
« Passer au portail » n’implique pas de remplacer tout de suite la page d’accueil classique de l’OPAC par une page portail,
mais il y a un minimum requis pour exploiter valablement le contenu éditorial et le relier au contenu bibliographique : o créer et configurer au moins les 2 « pages-outils » essentielles du portail : la page qui affiche une rubrique, et la page
qui affiche un article (accompagné éventuellement d’une liste de notices) o paramétrer un menu basé sur l’arborescence de certaines rubriques, afin de pouvoir naviguer dans le contenu
éditorial, et d’accéder ainsi aisément à tous les articles publiés.
Vous pouvez dès lors ajouter certains cadres dans la page qui affiche une notice. Deux modules conviennent tout à fait dans cette optique : les articles dans la même catégorie que la notice, et les articles du même auteur que la notice.
Au point où vous en êtes, pourquoi vous arrêter en si bon chemin ? Continuez !
o
Si vous voulez un agenda ou un bloc de recherche dans les articles, la liste des pages nécessaires s’allonge encore : la page qui affiche une liste d’événements, et celle qui affiche le résultat d’une recherche dans le contenu éditorial. o
Terminez en beauté : créez et fignolez la page d’accueil du portail ;-)
Identifier et repérer les zones et cadres
Menu latéral
Version PMB 4.1
Comment accéder au menu qui permet de créer et d’éditer des cadres ?
Cliquer d’abord sur « Construire », cela ouvre un volet à droite
Construire
Créer ou éditer des pages
(= créer une page, changer son nom ou ajouter une variable d’environnement). Rien d’autre !
Gérer le contenu éditorial et les collections numériques
Administration des modules
Il s’agit seulement de
configurer les modules !.
Cliquer ici sur le nom d’un module ne permet pas d’insérer dans une page un cadre lié au module choisi !
Le menu des cadres se déplie automatiquement
Menu « replié » des cadres
J’ai replié les listes de cadres pour donner une vue d’ensemble
Informations de l’OPAC
URL de la page visible dans le volet de droite
Liste des objets définis
Sélection des objets
Activer le droit de déplacer des
cadres (et parfois aussi des zones)
Listes des cadres et zones qu’on peut identifier et repérer.
Cadres de l’OPAC
Cadres du portail
Cadres hors de la page
Zones de l’OPAC
Modules :
sélectionner un module et insérer ensuite un cadre dans une page
Pages : sélectionner la bonne page du portail, celle dans laquelle on va insérer un cadre
Liste des versions : pour restaurer ou supprimer une version antérieure, ou pour activer le CMS dans l’OPAC
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 76
Comment repérer et identifier les cadres de l’OPAC et du portail ? Dans quelle liste figurent-ils ?
Si vous cliquez sur le libellé d’un cadre de l’OPAC, vous le repérez facilement dans le volet de droite, car ce cadre est entouré d’un rectangle rouge.
Liste des cadres et zones
N.B. Depuis la version 4.1.4 de PMB, les pointillés rouges ont été remplacés par un trait continu de la même couleur.
Pour voir (ou revoir) la liste des cadres, cliquez sur l’onglet Contenu.
Si vous cliquez sur le libellé d’un cadre du portail, vous le repérez facilement dans le volet de droite, car ce cadre est entouré d’un rectangle rouge.
Cliquez sur l’icône du crayon pour éditer le contenu
d’un cadre (nom du cadre, dans quellle page, source de données, page de destination, template Django …)
Cliquez sur le nom d’un cadre et ensuite sur l’onglet Edition CSS pour vérifier ou modifier ses propriétés CSS
Attention ! Un cadre est parfois « un cadre du portail « dans une page, mais « un cadre hors de la page » dans une autre page !
Comparez par exemple les cadres qui affichent un article ou une rubrique dans ces deux types de pages.
Page qui affiche un article Page qui affiche une rubrique
Dès que vous naviguez dans le volet de droite, les infos visibles sous chaque titre (cadres de l’OPAC, du portail, cadres hors de la page) changent automatiquement.
En effet, la liste des cadres varie en fonction de l’URL de la page affichée à droite.
Essayez et vous verrez ;-)
Les cadres du portail aboutissent « hors de la page » dans plusieurs cas :
Cela peut être tout à fait normal, s’ils sont liés à une autre page que celle visible dans le volet de droite (voir exemple ci-dessus)
Cela peut être lié à une erreur de paramétrage, si on ajoute un cadre et que ses conditions d’affichage ne correspondent pas au type de page sélectionnée, ou si on modifie les conditions d’affichage d’un cadre préexistant et que cela déclenche un problème
Cela peut aussi révéler la maladresse des débutants … si on n’a pas bien « accroché » le cadre à une zone ;-)
Cette méthode de repérage permet aussi de voir
des cadres présents sur les pages, même si ceux-ci ne sont pas directement visibles à l’écran.
Voir ce qui n’est pas directement visible à l’écran ? Oui, c’est possible, car il y a des zones qui semblent vides, mais qui ne le sont pas !
Sélectionner une page On voit dans le volet de droite la page qui affiche une rubrique
La zone « page centrale » a l’air aussi vide que le panier du lecteur.
Liste des objets définis
Cliquer sur le nom du cadre
La zone « page centrale » de la page qui affiche une rubrique n’est en réalité pas aussi vide qu’on l’aurait cru, elle contient un cadre intitulé « affichage d’une rubrique ».
N.B. Les 3 autres cadres du portail mentionnés dans la liste sont situés dans la zone « introduction »
Surprise !
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 77
Distinguer les modules et les cadres
Liste de quelques modules et cadres du portail visibles dans la page d’accueil – dans les zones introduction et page centrale
En noir (police standard) : le nom du cadre
Menu
Menu
Carrousel d’articles (accueil)
Liste d’articles
Liste d'articles - sélections (accueil)
Liste d’articles
Liste de brèves (accueil)
Liste d’articles
Ces exemples me serviront de fil confucteur pour expliquer quelques concepts fondamentaux liés aux modules et cadres : source de données, construction des liens, templates Django …
En rouge et en italiques : le nom du module
Barre de recherche simple
Recherche
Agenda (accueil)
Agenda
Carrousel de notices (nouveautés - accueil)
Liste de notices
N.B. Vous remarquez que ce carrousel n’a pas été créé avec le module
« carrousel », mais avec le module
« liste de notices ».
Comment savoir avec certitude quel module est à l’origine de tel
En premier lieu, le nom du module qui a servi à créer le cadre Ensuite, le nom donné au cadre ou tel ou cadre ?
Cliquer sur l’icône du crayon et
éditer le cadre concerné.
Cadres du portail
Surprenant de prime abord
Une liste de notices qui génère un carrousel
Trois fois le même module (liste d’articles), mais des concrétisations différentes dans ces
3 cadres présents en page d’accueil.
Le nom donné au cadre contient des indications plus précises, afin de repérer tout de suite de quel cadre il s’agit, et dans quelle page il se trouve. On peut en effet avoir une liste d’articles ailleurs que dans la page d’accueil.
Un module est un « élément de programmation », un outil qui permet de connecter divers aspects, et de définir ainsi le cadre concret qui sera créé au bout du processus.
La source de données : comment on va remplir le cadre
o
Sources internes (contenu bibliographique ou éditorial) ou externes (flux RSS)
La navigation : comment on va accéder au cadre
o
Par le menu principal, via un carrousel d’articles ou de notices, grâce au module recherche …
La vue : comment on va afficher les données dans le cadre
o quels champs afficher ? quelle mise en forme employer ? o la réponse aux 2 questions précédentes peut varier, on peut spécifier des conditions d’affichage dans le template Django o on emploie des langages spécifiques pour définir la mise en forme : HTML, CSS, templates Django, templates de notices
A partir du même module, on peut créer plusieurs cadres différents
, selon le type de contenu, la valeur d’une variable globale d’environnement ou la valeur d’un champ personnalisé, selon le mode d’affichage
(ex. liste ou carrousel)
…
Il est donc essentiel de donner un nom adéquat au cadre, un nom plus précis que celui du module
, car le même module peut être employé plusieurs fois dans la même page ou dans des pages différentes. Il faut éviter tout risque de confusion.
Un cadre est un élément visuel concret, de forme rectangulaire, qui a été défini à partir d’un module.
Il est fixe (présent dans toutes les pages) ou variable (lié à un type spécifique de page)
Il peut être présent sur les pages de l’OPAC ou du portail
Il doit être placé dans une zone précise et adéquate, et avoir des conditions d’affichage et des propriétés CSS cohérentes,
sinon on ne le voit pas. Il risque de disparaître dans les cadres hors de la page en cas d’erreur de paramétrage.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 78
Modules disponibles
J’ai regroupé ces modules en diverses catégories, afin de donner une vue d’ensemble.
contiennent des explications détaillées sur de nombreux modules.
PMB 4.0.13 PMB 4.1 Certains modules sont fondamentaux, car ils génèrent le cadre principal d’une des pages-outils du portail ; ils sont en général liés à une variable d’environnement
Module rubrique variable id_rubrique page qui affiche une rubrique
Module article variable id_article page qui affiche un article
Module notice variable id_notice page qui affiche une notice
Module agenda variable id_date page qui affiche une liste d’événements
Module liste d’articles pas de variable page qui affiche le résultat d’une
recherche dans le contenu éditorial : une liste d’articles
Listes présentées de manière « classique » ou en carrousel
liste d’articles au choix : affichage sous forme de liste ou de carrousel
liste de notices (défilement horizontal, vertical, en fondu enchaîné)
liste de rubriques
liste de bannettes un seul mode d’affichage : la liste
liste d’étagères
carrousel de notices un seul mode d’affichage : le carrousel
Aide à la navigation
menu créé sur base du contenu éditorial ou dans l’interface d’administration
fil d’Ariane (fournir des liens en arrière sur les pages déjà parcourues)
Aide à la recherche interne ou externe
recherche interne (dans le contenu bibliographique et/ou éditorial)
recherche externe : interrogation SPARQL (accès au Web sémantique)
Insertion directe
agenda (calendrier des activités organisées par la bibliothèque)
code HTML (ajouter un cadre qui contient du code HTML)
éléments de l’OPAC (ex. infopages, navigateur de périodiques)
Administration des modules
Un clic sur le nom d’un module (dans cette colonne) ne permet pas d’insérer dans une page un cadre lié au module choisi !!
Mais un clic sur le nom d’un module (dans cette colonne) donne accès à l’interface d’administration
: on peut y configurer un module ou voir les vues qui y sont associées
(templates Django).
N.B. 5 modules doivent être d’abord configurés, sinon ils ne sont pas utilisables :
Agenda
Interrogation SPARQL
Portfolio
Recherche
Insertion d’éléments externes à la base
flux RSS
portfolio (gérer une collection de documents numériques non catalogués)
Interface de l’onglet Portail > Un clic sur « Construire » ouvre un volet à droite
Informations de l’OPAC
Menu créé dans l’interface d’administration
URL de la page visible dans le volet de droite
Liste des objets définis
Sélection des objets
Activer le droit de déplacer des cadres (et parfois aussi des zones)
Listes des cadres et zones
Cadres de l’OPAC
Cadres du portail
Cadres hors de la page
Zones de l’OPAC
Modules :
sélectionner un module afin d’insérer ensuite un cadre dans une page
Pages : sélectionner la bonne page du portail, celle dans laquelle on va insérer un cadre
Liste des versions :
pour restaurer ou supprimer une version antérieure
ou pour activer le CMS dans l’OPAC
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 79
PMB 4.1
Administration des modules
Interface d’administration des modules
Si on clique sur le nom d’un module, on voit 0, 1 ou 2 boutons : Général et Vues.
Général permet de configurer le module - Vues donne accès à la gestion des templates
N.B. Rien pour les modules Code HTML et Eléments de l’OPAC : ni Général ni Vues.
Le bouton Général n’est pas souvent affiché, car on peut employer la plupart des modules immédiatement.
Toutefois, il est indispensable de passer d’abord par l’interface d’administration pour 5 modules.
En effet, ils doivent être configurés avant usage.
Agenda
o
Définir les calendriers
Interrogation SPARQL (recherche externe)
o
Définir les sources de données
Menu : seulement s’il s’agit du menu créé dans l’interface d’administration o
Comme le nom l’indique clairement ! o
Inutile pour un menu basé sur le contenu éditorial (rubriques) : on peut l’employer tout de suite
Portfolio
o
Pour ce module, il n’y a pas de bouton « Général », la configuration se fait ailleurs o
Paramétrer un répertoire d’upload (onglet Administration) et définir les Collections numériques
(onglet Portail)
Recherche interne
o
Définir les types de recherche (contenu éditorial et bibliographique) et les pages de destination
N.B. J’explique comment paramétrer l’ agenda
, le menu créé dans l’interface d’administration
lorsque j’analyse ces modules en détail.
Presque tous les modules proposent de gérer les vues et les templates liés à ces vues.
Pas de « Vues » pour le code HTML, les éléments de l’OPAC et la recherche interne (articles - catalogue)
Les templates Django sont des scripts qui permettent de sélectionner les données à afficher, de personnaliser la mise en forme, la présentation de ces données. Ces templates gèrent aussi la navigation d’une page à l’autre
(création d’URL et d’éléments cliquables), sur base de la réponse à la question « Construction du lien vers ? ».
Pour faciliter le travail de conception du portail, PMB a prévu une possibilité de sauvegarder ces templates Django et d’en faire des espèces de « modèles » à réutiliser, à améliorer.
Exemple : module Agenda
Définition des calendriers
Exemple : module Liste d’articles
Liste des templates Django avec lien
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 80
Analyser quelques exemples de cadres
Les formulaires de création des cadres sont tous bâtis sur le même modèle, et on pose les questions de base dans le même ordre.
Nom du cadre ? fixe ou non ? où ? page de l’OPAC ou du portail ? conditions d’affichage ? source de données ? combien d’éléments ? à trier dans quel ordre ? quel filtre ? quelle vue ? où aller ensuite ? quelle variable employer ? quel template ?
Bien entendu, les questions varient en fonction du type de cadre et du module qui l’a généré : liste d’articles ? liste de notices ? …
Il est donc important de se familiariser le plus vite possible avec ce mode de présentation, et avec ce vocabulaire.
J’ai réparti les cadres en plusieurs groupes « logiques », par exemple sur base du module qui a servi à les créer.
Ce mode de présentation permet de mieux comprendre « l’architecture du portail », l’interconnexion entre les éléments.
Cadres qui affichent une liste d’articles
Le module « liste d’articles » a généré des cadres de fonction et d’aspect différents. Voici quelques exemples.
Page d’accueil du portail : carrousel d’articles d’actualité (en fondu enchaîné), aperçu des nouveautés et liste de brèves.
Liste de brèves
Formulaire pour la liste de Brèves (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Dans cet exemple, il est attaché à une page.
Mode de mise en cache ?
Selon les GET, POST et vues OPAC
Conditions d’affichage ?
Aucune dans ce cas-ci
Dans quelle page afficher le cadre ?
Page d’accueil du portail
Source de données ? Sélecteur ?
Les articles d’une ou de plusieurs rubriques
Critère et ordre de tri ?
Par date de publication - décroissant
Nombre maximum d’éléments à renvoyer ?
= nombre maximum d’articles à afficher
Surprenant mais vrai !
Dans le cas d’une liste ou d’un carrousel d’articles, la valeur zéro affiche tous les articles qui répondent au critère de sélection
(ex. appartenance à une rubrique).
Dans le cas d’une liste ou d’un carrousel de notices, la valeur zéro a un sens « normal » : cela veut dire qu’on n’affiche aucune notice.
Mode édition du cadre : comment choisir la bonne page ou en changer ?
Si on est en mode édition du cadre, on ne voit plus qu’une seule option : soit la liste des pages de l’OPAC soit la liste des pages du portail.
Ici, le choix se limite aux pages du portail, car c’était le type de page qui avait été retenu
au départ, au moment de créer ce cadre. Si vous voulez placer ce cadre ailleurs, il faut donc sélectionner une autre page du portail dans la liste déroulante.
Mode création du cadre : comment choisir la bonne page ou en changer ?
Si on est en mode création du cadre, on voit les deux options : la liste des pages du portail ou la liste des pages de l’OPAC.
Le mieux est de naviguer dans le volet de droite, afin d’afficher d’abord la bonne page, elle sera ainsi présélectionnée automatiquement dans le formulaire.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 81
Formulaire pour la liste de Brèves (2)
Filtre
Aucun filtre sélectionné
N.B. Dans tous les cadres liés aux listes d’articles, ce sont les mêmes filtres qui sont proposés.
Choisir une vue = comment afficher la liste ?
Liste d’articles – template Django avec lien
Autre possibilité : vue en carrousel
Construction du lien vers un article
= où aller ensuite ? vers quelle page ?
Page qui affiche un article et une liste de notices
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de l’article est ici la seule option.
Au départ, le cadre du template est « minuscule » !!!
Si vous amenez le curseur de la souris dans le coin inférieur droit, vous verrez une flèche bidirectionnelle, qui vous indique qu’il est possible d’agrandir ce cadre, afin de faciliter la lecture.
Template Django à utiliser ? quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
Un template spécial a été défini pour les brèves.
Il ne prévoit aucun lien URL possible vers la page qui affiche un article, rien n’est cliquable.
C’est vraiment mieux ainsi !
Construction du lien pour les articles = où aller ensuite ? vers quelle page ? comment ? grâce à quelle variable ?
Page qui affiche un article et une liste de notices
En soi, la question est surprenante pour la liste de Brèves, car ce cadre ne mène à aucune autre page, rien n’est prévu dans le template
Django pour assurer un lien éventuel. Mais c’est une question standard qui est posée pour tous les cadres qui affichent une liste d’articles.
La réponse peut elle aussi surprendre au début : pourquoi la page qui affiche un article et une liste de notices ?
Dans la démo du portail, il y a une seule page qui est prévue pour afficher un article, mais c’est une page multifonctions !
Cette page est conçue pour afficher tous les types de contenu d’articles de la démo :
Informations, Coup de cœur, Sélection, Evénement à une date précise, Evénement à une période précise
Il faut bien sûr transmettre une variable (un paramètre, si vous préférez) : le numéro identifiant de l’article.
Sinon, on irait sur la bonne page, celle qui affiche un article, mais PMB ne saurait pas quoi faire : quel article afficher ?
Résultat à l’écran
Syntaxe des templates Django
Template Django de la liste de Brèves
<h2>Brèves</h2>
<hr>
{% for article in articles %}
<h4>{{article.title}}</h4>
On affiche le titre “Brèves”
Une 1 e
ligne horizontale
Début de la boucle :
{% for article in articles %}
Permet d’afficher les articles prévus
<blockquote>{{article.resume}}</blockquote>
<hr>
{% endfor %}
Les instructions entre {% %}
Les champs entre {{ }}
on a donc une “boucle” qui va du premier au dernier
On affiche le champ titre de l’article : {{article.title}}
Ensuite le résumé (chapeau) de l’article : {{article.resume}}
Une autre ligne horizontale
Fin de la boucle :
{% endfor %}
Exemple : la boucle de répétition {% for article in articles %}
Exemple : le titre de l’article {{article.title}}
Explications des balises HTML Les balises <h2> et <h4> reflètent la hiérarchie titre / sous-titre et déterminent la taille des caractères
La balise <hr> affiche une ligne horizontale
La balise <blockquote> détermine un mode d’affichage (bloc de citation)
Les Brèves s’affichent en page d’accueil, et c’est tout. On n’affiche que 2 champs : le titre et le chapeau de l’article.
Ce template ne permet pas de créer un lien vers quoi que ce soit, car rien n’est cliquable, la balise <a href=" …> brille par son absence !
Félicitations ! Vous venez de comprendre le sens de votre premier template Django ;-)
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 82
Sélection de nouveautés
Formulaire pour les Nouveautés - symbolisées par des étagères (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Attaché à la page.
Mode de mise en cache ?
Selon les GET, POST et vues OPAC
Conditions d’affichage ?
Aucune dans ce cas-ci
Dans quelle page afficher le cadre ?
Page d’accueil du portail
Source de données ? Sélecteur ?
Les articles d’une ou de plusieurs rubriques
Critère et ordre de tri ?
Par date de publication - décroissant
Nombre maximum d’éléments à renvoyer ?
= nombre maximum d’articles à afficher
Dans le cas d’une liste ou d’un carrousel d’articles, la valeur zéro affiche tous les articles qui répondent au critère de sélection
(ex. appartenance à une rubrique).
Dans le cas d’une liste ou d’un carrousel de notices, la valeur zéro a un sens « normal » : cela
veut dire qu’on n’affiche aucune notice.
N.B. La liste des sélecteurs proposés varie forcément en fonction de la source de données choisie au départ.
Les logos indiquent clairement que les articles qui y sont associés remplacent les étagères virtuelles de nouveautés.
Soyez donc cohérent ! Il faut que les articles choisis soient du type sélection, afin d’avoir un lien vers une étagère !
Formulaire pour les Nouveautés - symbolisées par des étagères (2)
Filtre
Aucun filtre sélectionné
Choisir une vue = comment afficher la liste ?
Liste d’articles – template Django avec lien
Autre possibilité : vue en carrousel
Construction du lien vers un article
= où aller ensuite ? vers quelle page ?
Page qui affiche un article et une liste de notices
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de l’article est ici la seule option.
Template Django à utiliser ?
Clic sur le logo ou le titre d’une étagère (en page d’accueil) on change de page.
quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
Le template affiche les logos et les titres des articles, et il gère aussi la navigation.
Le même article, donc le même numéro d’id, affiché avec des mises en page
différentes, dans 2 pages (page d’accueil – page qui affiche un article)
Puisque cet article est de type Sélection, il a un champ personnalisé qui contient le numéro d’id d’une étagère.
Donc, on peut voir (sur la page qui affiche un article) non seulement cet article, mais aussi les notices liées à cette étagère.
« Construction du lien vers … ? » : où aller ensuite ?
Un cadre issu du module « Liste d’articles » mène toujours vers la page qui affiche un article et une liste de notices.
Je rappelle que c’est une page multifonctions, conçue pour afficher tous les types de contenu d’articles de la démo.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 83
Résultat à l’écran
Template Django des Nouveautés - symbolisées par des étagères
<h2>Nouveautés</h2>
On affiche le titre “Nouveautés”
{% for article in articles %}
<div style="width:49%;marginright:1%;float:left;margin-bottom:5px;margintop:5px;text-align:center;">
Début de la boucle :
{% for article in articles %}
Permet d’afficher les articles prévus
on a donc une “boucle” qui va du premier au dernier
Début de la balise <div style=" … qui gère la mise en forme
<a href="{{article.link}}">
<img style="width:90px;" src='{{article.logo.large}}'/>
<h4>{{article.title}}</h4>
Ces logos suggèrent clairement l’idée qu’on va revisiter le concept d’étagère
</a>
</div>
virtuelle.
{% endfor %}
Ce template s’appelle « Liste d’articles - template
Ces étagères sont ici les logos des articles
Django avec lien », ce n’est pas un hasard !
Il prévoit la possibilité de cliquer sur le titre ou le logo de type Sélection pour aller vers la page qui affiche un article.
Syntaxe des templates Django
Les instructions entre {% %}
Début de la balise <a href=" … (lien URL)
D’abord l’URL de destination, le lien <a href="{{article.link}}">
Ensuite, la « source » = d’où on part = où peut-on cliquer ?
Sur le logo de l’article : {{article.logo.large}}
Sur le titre de l’article : {{article.title}}
Tout ce qui est situé entre le début <a href="{{article.link}}">
et la fin de la balise </a> sera donc cliquable
Fin de la balise </a>
Fin de la balise </div>
Fin de la boucle :
{% endfor %}
Exemple : la boucle de répétition {% for article in articles %}
Explications des balises HTML
Les champs entre {{ }} Exemple : le titre de l’article {{article.title}}
Les balises <h2> et <h4> reflètent la hiérarchie titre / sous-titres et déterminent la taille des caractères
Les balises <div style=" … > et </div> marquent le début et la fin d’un « bloc de texte » à mettre en forme.
L’affichage du texte situé entre ces 2 balises peut être personnalisé : marges, alignement, police de caractères …
La balise <img> signifie image. <img … src=’ …’> signifie la source de l’image = l’URL de l’image.
Risque de dégâts collatéraux ! Ne faites jamais de copier-coller d’un template Django depuis le traitement de texte !
C’est vraiment une très mauvaise idée, car Word ou OpenOffice insèrent des codes de mise en forme qui peuvent perturber le fonctionnement normal de ces templates, et aussi de PMB. En outre, vous risquez d’avoir des sauts de ligne au mauvais endroit.
Si vous voulez récupérer le contenu d’un template Django, faites un copier-coller à partir de la démo du portail.
Comment rendre une image cliquable en HTML ?
<a href="… : URL de destination <img src="… : source, d’où on part : on clique sur l’image
<a href="http://www.sigb.net><img src=" http://127.0.0.1/pmb/opac_css/images/site/pmb.png " alt="Logo de PMB" /></a>
N.B. Pour les balises alt=" " et title=" ", employez des guillemets, mais pas l’apostrophe. alt=" " : texte alternatif à afficher si l’image n’est pas disponible title=" " : texte à afficher au survol de la souris sur l’image
L’apostrophe posera problème dès que le texte (dans le alt ou le title) contient des apostrophe.
Modifiez donc quelques templates Django si nécessaire. En effet, certains d’entre eux créent le contenu des balises alt ou title avec le titre d’une notice, or ces titres peuvent contenir des apostrophes, donc ils seraient tronqués dès la 1
L’Avare de Molière se réduirait ainsi à la seule lettre “L” !! e
apostrophe.
Exemples corrects :
alt="{{record.title}}" ou title="{{record.title}}"
Comment rendre un texte cliquable en HTML ?
<a href="… : URL de destination
Texte entre <a> et </a> : source, d’où on part : on clique sur le texte
<a href="http://amcubat.be/docpmb">Site de Anne-Marie Cubat</a>
Comment rendre le texte et l’image cliquables en une seule balise HTML ? On combine le tout !
<a href="http://www.sigb.net><img src=" http://127.0.0.1/pmb/opac_css/images/site/pmb.png " alt="Logo de PMB" />Site de PMB</a>
C’est d’ailleurs ce qui se passe dans ce template Django et aussi dans d’autres : une seule balise <a href=" pour le texte et l’image
<a href="{{article.link}}"><img style="width:90px;" src='{{article.logo.large}}'/><h4>{{article.title}}</h4></a>
La variable {{article.link}} désigne l’URL de destination, son contenu est créé sur base de vos réponses.
Que se passe-t-il au moment où vous répondez à ces questions ?
Construction du lien ? Où aller ? vers quelle page ? Que faire dans cette page ? Comment le signaler ? Quelle variable transmettre ?
PMB sait qu’il faut aller ensuite vers la page qui affiche un article – page dont l’id est 4 est dans la démo
PMB sait qu’il faut afficher certains articles de certaines rubriques, et il connaît le numéro identifiant de chaque article
PMB peut ainsi construire une URL avec variables, une page de destination pour chaque article, par exemple http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=4&id_article=14
Cette URL qui a été construite de manière dynamique est enregistrée dans la variable {{article.link}} (a link = un lien)
Mais pour avoir un lien fonctionnel, il faut en outre qu’on puisse « cliquer sur quelque chose » pour accéder à la page de
destination : c’est le rôle du template qui prévoit (dans ce cas-ci) que le logo et le titre de l’article soient cliquables.
N.B. Si nécessaire, relire le chapitre URL avec variables et navigation
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 84
Carrousel d’articles d’actualité
Formulaire pour le carrousel d’articles d’actualité (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Attaché à la page.
Mode de mise en cache ?
Selon les GET, POST et vues OPAC
Conditions d’affichage ?
Aucune dans ce cas-ci
Dans quelle page afficher le cadre ?
Page d’accueil du portail
Source de données ? Sélecteur ?
Les articles d’une ou de plusieurs rubriques
Critère et ordre de tri ?
Par date de publication - décroissant
Nombre maximum d’éléments à renvoyer ?
= nombre maximum d’articles à afficher
Dans le cas d’une liste ou d’un carrousel d’articles, la valeur zéro affiche tous les articles qui répondent au critère de sélection
(ex. appartenance à une rubrique).
Dans le cas d’une liste ou d’un carrousel de notices, la valeur zéro a un sens « normal » : cela
veut dire qu’on n’affiche aucune notice.
Dans ce cadre, les articles d’actualité sont extraits de 3 rubriques : Evénements,
Heure du conte et Coups de cœur. C’est donc l’actualité au sens large :
Les animations (ex. Cultures d’Afrique contemporaine, Tim Burton)
Les nouveautés « Coups de cœur » (ex. Bibliothèques, Georges)
Formulaire pour le carrousel d’articles d’actualité (2)
Filtre
Aucun filtre sélectionné
Choisir une vue = comment afficher la liste ?
Vue en carrousel
Autre possibilité : Liste d’articles – template Django + lien
Construction du lien vers un article
= où aller ensuite ? vers quelle page ?
Page qui affiche un article et une liste de notices
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de l’article est ici la seule option.
Mode d’affichage du carrousel ?
Fondu enchaîné
Autres possibilités : défilement horizontal ou vertical
Définir les autres paramètres du carrousel
N.B. Pour la clarté, j’ai voulu montrer la 2 e
partie du formulaire dans son ensemble, mais je traite les questions sur les templates dans les encadrés suivants.
« Construction du lien vers … ? » : où aller ensuite ?
Un cadre issu du module « Liste d’articles » mène toujours vers la page qui affiche un article et une liste de notices.
Je rappelle que c’est une page multifonctions, conçue pour afficher tous les types de contenu d’articles de la démo.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 85
Formulaire pour le carrousel d’articles d’actualité (3)
Template Django à utiliser ? quels champs afficher ? comment gérer la mise en forme et les liens
éventuels vers « ailleurs » ?
Le template affiche les logos, les titres et les résumés des articles.
Le template gère aussi la navigation, car deux éléments sont cliquables
(voir code HTML) :
Le logo de l’article
Le texte « Lire la suite »
Résultat à l’écran
Soit actualité bibliographique :
Coups de cœur
Soit actualité
événementielle :
Animations
<h2>Actualités</h2>
Template Django du carrousel d’articles d’actualité
On affiche le titre “Actualités”
<ul id='carousel_{{id}}'>
{% for record in records %}
<li class='{{id}}_item' style="height:200px">
<h3>{{record.title}}</h3>
<a href='{{record.link}}' alt='{{record.title}}' title="{{record.title}}"><img style="float:left;marginright:5px;max-height:200px;max-width:200px;" src='{{record.logo.large}}' /></a>
{{record.resume}}
<a style="text-align:right;" href="{{record.link}}">Lire la suite...</a>
</li>
{% endfor %}
</ul>
N.B. Remplacez les apostrophes par des guillemets
dans la balise alt='{{record.title}}'
Cette balise devient alt="{{record.title}}"
Début de la liste non numérotée du carrousel (<ul>
Début de la boucle :
{% for record in records %}
Permet d’afficher les enregistrements (= articles) du carrousel
Début de la définition d’un élément de la liste (<li>)
Titre de l’enregistrement : {{record.title}}
Début de la 1 e
balise <a href=" … (lien URL)
URL de destination <a href="{{record.link}}">
On clique sur le logo : {{record.logo.large}}
Fin de la 1 e
balise </a>
Résumé de l’enregistrement : {{record.resume}}
Début de la 2 e
balise <a href=" … (lien URL)
URL de destination <a href="{{record.link}}">
On clique sur le texte « Lire la suite »
Fin de la 2 e
balise </a>
Fin de la définition de cet élément (</li>
Fin de la boucle :
{% endfor %}
Fin de la liste non numérotée (</ul>
Un carrousel (de notices, d’articles ou de rubriques) est toujours bâti sur le modèle de la boucle
{% for record in records %}
Syntaxe des templates Django
Les instructions entre {% %}
Les champs entre {{ }}
Exemple : la boucle de répétition {% for record in records %}
Exemple : le titre de l’enregistrement {{record.title}}
Explications des balises HTML
Explication pour la balise alt
alt="{{record.title}}"
Les balises <ul> et </ul> marquent le début et la fin d’une liste non ordonnée = non numérotée (ul = unordered list)
Une liste non ordonnée peut prendre la forme d’une liste à puces, mais cela peut aussi signifier tout simplement une liste d’éléments non numérotés. C’est le cas ici, les articles se succèdent dans le carrousel en fondu enchaîné.
Les balises <li> et </li> marquent le début et la fin de chaque élément de la liste (li = list)
La balise <img> signifie image. <img … src=’ …’> signifie la source de l’image = l’URL de l’image.
Que se passe-t-il au moment où vous répondez à ces questions ?
Construction du lien ? Où aller ? vers quelle page ? Que faire dans cette page ? Comment le signaler ? Quelle variable transmettre ?
PMB sait qu’il faut aller ensuite vers la page qui affiche un article – page dont l’id est 4 est dans la démo
PMB sait qu’il faut afficher certains articles de certaines rubriques, et il connaît le numéro identifiant de chaque article
PMB peut ainsi construire une URL avec variables, une page de destination pour chaque article, par exemple http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=4&id_article=17
Cette URL qui a été construite de manière dynamique est enregistrée dans la variable {{record.link}} (a link = un lien)
Mais pour avoir un lien fonctionnel, il faut en outre qu’on puisse « cliquer sur quelque chose » pour accéder à la page de
destination : c’est le rôle du template qui prévoit (dans ce cas-ci) que le logo et le texte « Lire la suite » soient cliquables.
N.B. Si nécessaire, relire le chapitre URL avec variables et navigation
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 86
Formulaire pour le carrousel d’articles d’actualité (4)
Template de notice à utiliser pour le contenu ?
Template par défaut - Deux autres choix possibles
CSS associée ?
Aucun contenu
Quel template de notice employer ? N.B. Cette question concerne l’affichage des notices dans la page courante.
Un template de notice créé dans Editions > Templates de notices sert à personnaliser l’affichage du contenu du cadre.
Dans la démo, vous pouvez employer le template par défaut, ou « Portail – liste de notices » (visible dans l’onglet Editions).
Une liste de notices ou un carrousel (notices ou articles) sont toujours bâtis sur le modèle de la boucle
{% for record in records %}
Une boucle qui va du premier au dernier enregistrement (a record), et cet enregistrement peut être un article ou une notice.
PMB pose d’office la question « Quel template de notice employer ? » dans deux cas :
Si le template Django contient la boucle {% for record in records %} ou bien s’il faut afficher une seule notice.
Toutefois, cette possibilité de recourir à un template prédéfini n’existe concrètement que si 2 conditions sont remplies :
Le cadre doit être créé à partir des modules Liste de notices (carrousel ou liste) ou Afficher une notice, mais pas à partir du
module Liste d’articles (carrousel ou liste). Choisir un template de notice pour afficher un article n’aurait d’ailleurs aucun sens !
Le template Django doit contenir « quelque part » la variable {{record.content}} (ce qui exclut par ex. le module Carrousel)
Dans ce cas-ci, la question « quel template de notice employer ? » est sans objet, car il s’agit d’articles et non pas de notices !
Les carrousels (d’articles ou de notices) proposent une CSS associée.
On peut par exemple changer la couleur de fond, ou prévoir une bordure.
Evitez toutefois les fantaisies qui risqueraient de rompre l’harmonie visuelle de l’ensemble ! N’oubliez pas les niveaux de priorité de la CSS : la CSS que vous définiriez dans ce cadre-ci l’emporterait sur la CSS de la feuille de style (c’est toujours le dernier
Comment connaître les noms des variables qu’on peut employer dans les templates Django ?
Voilà ce qu’on voit au départ
Aperçu des champs liés aux types de contenu
En cliquant sur les + et les -, on peut déplier ou replier cette arborescence.
C’est ainsi qu’on découvre la « longue » liste des champs qui existent, et donc des variables utilisables dans ce template.
Cerise sur le gâteau : au survol de la souris, vous avez même droit à une petite explication complémentaire, sous la forme d’une infobulle ;-)
Nom précis donné au cadre ?
Les 4 premières questions sont identiques dans tous les formulaires de cadres
Fixe (présent dans toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Les 2 premières questions ne requièrent que peu d’explications.
Puisqu’un module peut générer des cadres différents, il faut donner au cadre un nom précis, afin d’éviter toute confusion. Ce nom doit indiquer de quelle manière les données sont affichées et, si nécessaire, dans quelle page le cadre se trouve.
Un cadre est
o fixe, c’est-à-dire présent dans toutes les pages (ex. menu, barre de recherche, connexion au compte du lecteur) o
ou attaché à une page précise : une page du portail ou de l’OPAC
Par contre, répondre de manière adéquate aux 2 dernières questions n’est pas évident !
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 87
Je voudrais remercier particulièrement Camille Bénard, qui a expliqué clairement les différences entre les options proposées.
Presque tous les commentaires de cette page et de la suivante sont « de sa plume », ou plutôt, « de son clavier » ;-)
Quant aux autres explications, je les ai rédigées sur base des infos fournies par Camille.
Mode de mise en cache (Camille Bénard)
La mise en cache signifie que l'on garde le cadre en mémoire de façon à ne pas le charger une nouvelle fois lors de son prochain affichage.
Cependant certains cadres nécessitent d'être rechargés selon certaines conditions. C'est pourquoi il y a différents modes de cache :
Pas de mise en cache : le cadre est rechargé pour chaque nouvelle page affichée, à recommander pour les cadres dont le contenu peut être mis à jour TRÈS fréquemment (par exemple pour le module flux RSS).
Selon les GET : le cadre est rechargé lorsque l'on passe une nouvelle information (une variable) dans la page via l'URL.
Exemple de GET : on a une "page qui affiche une rubrique" qui contient un cadre "rubrique" unique, dont le contenu affiché dépend de la rubrique sur laquelle on a cliqué. Donc dans une même page et un même cadre, on peut afficher des contenus différents, en fonction de la valeur d'une variable passée dans l'URL (ici l'identifiant de la rubrique), qui correspond à un GET. Il faut donc que le cadre "rubrique" soit rechargé selon les GET.
Selon les POST : le cadre est rechargé lorsque l'on passe une nouvelle information dans la page via un formulaire.
Exemple de POST : on a une "page qui affiche une liste d'articles (résultat d’une recherche)" qui contient un cadre "liste d'articles" unique, dont le contenu dépend des mots saisis dans le formulaire de recherche, ce qui correspond à un POST. Il faut donc que le cadre "liste d'articles" soit rechargé selon les POST.
Selon les vues OPAC : le cadre est rechargé lorsque l'on change de vue OPAC.
Systématique : le cadre est chargé lors du 1 er
affichage, ensuite il n'est plus chargé à nouveau au cours de la navigation (jusqu'à la fin de la durée de vie du cache définie dans le paramètre 'cache_ttl'). A recommander pour les cadres dont le contenu ne bouge pas, quelle que soit la page (les éléments fixes).
cache_ttl
Le paramètre cache_ttl
Jusqu’à présent, je n’avais donné que ces infos succinctes à propos de la configuration de ce paramètre
Lorsque vous construisez le portail, mettez cache_ttl à 0 pour voir plus vite l’impact des modifications.
N’oubliez pas de remettre la valeur par défaut (1800) lorsque vous repassez en mode de fonctionnement « normal »
N.B. Cette valeur correspond à la durée de vie du cache des cadres du portail (en secondes)
En phase de construction du portail, on donne à cache_ttl la valeur 0, ainsi les changements sont visibles immédiatement.
En situation réelle de production, il arrive souvent que la valeur de cache_ttl soit nettement plus élevée que 1800, surtout s’il s’agit d’une base assez volumineuse et que beaucoup de personnes consultent le portail en même temps.
Sinon, recharger de nombreuses fois les mêmes pages ralentirait nettement le « trafic ».
La table cms_cache_cadres
C’est dans cette table que certains cadres sont mis en cache, afin de ne pas devoir être rechargés lors du prochain affichage.
Le nom donné à la table reflète particulièrement bien sa fonction.
C’est une table qui se remplit et se vide automatiquement :
Elle se remplit en fonction des « GET, POST et Vues OPAC » (voir ci-dessus)
Elle se vide plus ou moins vite en fonction de la durée de vie du cache = la valeur du paramètre cache_ttl
Si vous avez effectué des changements relativement importants dans le portail – par exemple
Si vous avez ajouté ou modifié le contenu d’un article lié à un événement qui aura lieu bientôt
Si vous avez ajouté ou modifié la date d’un événement dans l’agenda
Il est utile que les lecteurs soient prévenus le plus tôt possible.
Mais si la durée de vie de votre cache est d’une heure ou deux, les lecteurs ne verront pas tout de suite l’impact de ces changements.
Dans ce genre de circonstances, il vaut mieux vider le cache « manuellement ».
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 88
Conditions d’affichage – Variables globales (Camille Bénard)
Le cadre ne sera affiché que si une condition spécifique est remplie.
4 conditions sont aisées à comprendre
Page (il s’agit d’une des pages du portail)
Personnes authentifiées : lecteur qui a saisi un login et un mot de passe corrects
Type de page OPAC
Vues OPAC
Mais les 2 conditions liées à une variable globale méritent quelques explications complémentaires.
Les variables globales désignent des éléments qui composent l'URL. Ces conditions d'affichage sont utiles si l'on souhaite ajouter un cadre sur une page que l'on ne retrouve pas dans les conditions "page" et "type de page OPAC".
Si on prend l'exemple de l'URL d'un onglet de recherche prédéfinie : http://.../pmb/ opac_css/index.php?search_type_asked=extended_search&onglet_persopac=3
Les 2 variables qui composent cette URL sont 'search_type_asked' et 'onglet_persopac'.
Elles ont respectivement pour valeur 'extended_search' et '3'.
Si on souhaite ajouter un cadre sur la page de cet onglet de recherche prédéfinie en particulier, on peut utiliser la condition "valeur d'une
variable globale" ainsi : Nom de la variable globale à récupérer = onglet_persopac Valeur à tester = 3
Si on souhaite ajouter un même cadre sur les pages de tous les onglets de recherche prédéfinie, on peut utiliser la condition "présence d'une
variable globale" ainsi : Nom de la variable globale à récupérer = onglet_persopac
Les 4 premières questions sont identiques dans tous les formulaires de cadres, et on propose le même éventail de réponses.
Nom précis donné au cadre ?
Fixe (présent dans toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Les 2 premières questions ne posaient pas de problème majeur.
Je viens de fournir des réponses détaillées aux 2 questions suivantes
Mode de mise en cache ? Conditions d’affichage ?
C’est pourquoi je présenterai désormais ces 4 questions de manière abrégée, il me semble inutile de tout répéter à chaque fois.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Cadres qui affichent une liste de notices
Page 89
Le module « liste de notices » a généré des cadres de fonction et d’aspect différents. Voici quelques exemples.
Page d’accueil du portail : carrousel de notices - nouveautés en général (à droite de l’écran)
Page qui affiche un article : étagère associée à un article - nouveautés d’un rayon (ex. fiction jeunesse)
Page qui affiche un article : carrousel « sur le même sujet » - notices dans les mêmes catégories qu’un article
Carrousel de notices
– les nouveautés en général
Formulaire pour le carrousel de nouveautés (1) – Créé à partir du module « Liste de notices »
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page d’accueil du portail
Source de données ? 6 possibilités
Ici, les notices d’une étagère
Dans la page d’accueil du portail
Sélecteur ?
Sélecteur manuel d’une étagère
Nombre maximum d’éléments à renvoyer ?
= nombre maximum de notices à afficher
Dans le cas d’une liste ou d’un carrousel de notices, la valeur zéro a un sens « normal » : cela veut dire qu’on n’affiche aucune notice.
Dans le cas d’une liste ou d’un carrousel d’articles, la valeur zéro affiche tous les
articles qui répondent au critère de sélection.
Liste de notices – Ce module propose 6 sources de données possibles, ce qui influence ensuite le choix du sélecteur
Ex. Source de données = même auteur
Ces 3 possibilités de sélecteur sont proposées non seulement pour les notices du même auteur principal, mais aussi pour les notices similaires et pour celles dont la cote d’exemplaire est proche.
N.B. Notices similaires – Les champs concernés sont : titre propre, éditeur, indexation décimale, catégories et mots-clés libres.
Comment créer un carrousel de notices ? Avec le module Carrousel ou avec le module Liste de notices ?
N.B. Ces deux modules permettent de créer les 3 types de carrousel : horizontal, vertical ou en fondu enchaîné.
Dans le cas du module Liste de notices, on peut créer des listes ou des carrousels.
En outre, on choisit d’abord une source de données (parmi 6), et ensuite un sélecteur.
On peut diversifier le mode d’affichage (liste ou carrousel) et la source de données.
Carrousel - une seule source de données
Notices d’une étagère
Dans le cas du module Carrousel, on peut seulement créer un carrousel.
On ne choisit pas la source de données, c’est d’office « Notices d’une étagère ».
On ne peut pas diversifier le mode d’affichage (carrousel) ni la source de données.
Conclusion : on peut certes créer un carrousel de notices avec le module Carrousel, mais l’éventail de choix est plus réduit.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 90
Formulaire pour le carrousel de nouveautés (2) – Créé à partir du module « Liste de notices »
Choisir une vue = comment afficher la liste ?
Vue en carrousel
Autre possibilité : vue Django (liste)
Construction du lien vers une notice
= où aller ensuite ? vers quelle page ?
Page du portail qui affiche une notice
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de la notice est ici la seule option.
Mode d’affichage du carrousel ?
Fondu enchaîné
Autres possibilités : défilement horizontal ou vertical
Définir les autres paramètres du carrousel
N.B. Pour la clarté, j’ai voulu montrer la 2 e
partie du formulaire dans son ensemble, mais je traite les questions sur les templates dans l’encadré suivant.
Dans ce type de module (liste de notices), la réponse à la question « Où aller ensuite ? » peut varier : on peut aller vers la page OPAC « classique » qui affiche une notice, ou bien vers la page du portail qui affiche une notice.
Toutefois, dans la démo, on choisit toujours (dans le cas d’un carrousel) d’aller vers la page du portail qui affiche une notice.
Pour aller vers la page du portail qui affiche une notice, on choisit la page adéquate dans la liste déroulante
Pour aller directement vers la page de l’OPAC qui affiche une notice, on ne choisit aucune des pages du portail qui sont proposées
Le lien vers la page du portail se fait par une URL avec variables
Le lien vers l’OPAC se fait par le permalink de la notice
La page du portail qui affiche une notice propose (à la dernière ligne) un lien permanent (permalink) pour aller vers l’OPAC, donc
on peut ensuite voir les infos habituelles sur la notice, sur les exemplaires et leur disponibilité. Mais la route est plus longue !
N.B. Si le permalink ne s’affiche pas, vérifiez le paramétrage de l’OPAC : le paramètre permalink doit avoir la valeur 1.
Que se passe-t-il au moment où vous répondez à ces questions ?
Construction du lien ? Où aller ? vers quelle page ? Que faire dans cette page ? Comment le signaler ? Quelle variable transmettre ?
PMB sait qu’il faut aller ensuite vers la page du portail qui affiche une notice – page dont l’id est 7 est dans la démo
PMB sait qu’il faut afficher la notice correspondante, et il connaît le numéro identifiant de chaque notice
PMB peut ainsi construire une URL avec variables, une page de destination pour chaque notice, par exemple http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=7&id_notice=88
Cette URL qui a été construite de manière dynamique est enregistrée dans la variable {{record.link}} (a link = un lien)
Mais pour avoir un lien fonctionnel, il faut en outre qu’on puisse « cliquer sur quelque chose » pour accéder à la page de
destination : c’est le rôle du template qui prévoit (dans ce cas-ci) que la vignette et le titre de la notice soient cliquables.
N.B. Si nécessaire, relire le chapitre URL avec variables et navigation
Dans la démo, on a choisi d’afficher la notice dans une page du portail, mais on aurait aussi pu l’afficher dans une page de l’OPAC,
et l’URL de destination aurait correspondu au permalink : http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=notice_display&id=88
Formulaire pour le carrousel de nouveautés (3) – Créé à partir du module « Liste de notices »
Template Django à utiliser ? quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
Le template affiche la vignette prévue et le titre de la notice.
Le template gère aussi la navigation, car ces deux éléments sont cliquables (voir code HTML) : la vignette du livre, CD, DVD … et le titre de cette notice
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 91
Formulaire pour le carrousel de nouveautés (4) – Créé à partir du module « Liste de notices »
Template de notice à utiliser pour le contenu ?
Template par défaut - Deux autres choix possibles
CSS associée ?
Aucun contenu
Une liste de notices ou un carrousel (notices ou articles) sont toujours bâtis sur le modèle de la boucle
{% for record in records %}
Une boucle qui va du premier au dernier enregistrement (a record), et cet enregistrement peut être un article ou une notice.
PMB pose d’office la question « Quel template de notice employer ? » dans deux cas :
Si le template Django contient la boucle {% for record in records %} ou bien s’il faut afficher une seule notice.
Toutefois, cette possibilité de recourir à un template prédéfini n’existe concrètement que si 2 conditions sont remplies :
Le cadre doit être créé à partir des modules Liste de notices (carrousel ou liste) ou Afficher une notice, mais pas à partir du
module Liste d’articles (carrousel ou liste). Choisir un template de notice pour afficher un article n’aurait d’ailleurs aucun sens !
Le template Django doit contenir « quelque part » la variable {{record.content}} (ce qui exclut par ex. le module Carrousel)
Dans ce cas-ci, la question « quel template employer ? » est sans objet, car on n’a pas employé la variable {{record.content}}
Résultat à l’écran
Template Django du carrousel de nouveautés
<ul id='carousel_{{id}}'>
{% for record in records %}
<li class='{{id}}_item'>
<a href='{{record.link}}' alt='{{record.title}}' title='{{record.title}}' style="text-align:center;">
<img style="max-width:120px;max-height:120px;textalign:center;" src='{{record.vign}}'/><br />
{{record.title}} <br />
</a>
</li>
{% endfor %}
</ul>
N.B. Remplacez les apostrophes par des guillemets
alt="{{record.title}}" title="{{record.title}}"
Début de la liste non numérotée du carrousel (<ul>
Début de la boucle :
{% for record in records %}
Permet d’afficher les vignettes des notices du carrousel
Début de la définition d’un élément de la liste (<li>)
Début de la balise <a href=" … (lien URL)
URL de destination <a href='{{record.link}} … >
On clique sur la vignette : {{record.vign}}
Ou on clique sur le titre de la notice : {{record.title}}
Fin de la balise </a>
Fin de la définition de cet élément (</li>
Fin de la boucle :
{% endfor %}
Fin de la liste non numérotée (</ul>
Un carrousel (de notices, d’articles ou de rubriques) est toujours bâti sur le modèle de la boucle
{% for record in records %}
Syntaxe des templates Django
Les instructions entre {% %}
Les champs entre {{ }}
Exemple : la boucle de répétition {% for record in records %}
Exemple : le titre de l’enregistrement {{record.title}}
Explications des balises HTML
Explication - balises alt et title
Les balises <ul> et </ul> marquent le début et la fin d’une liste non ordonnée = non numérotée (ul = unordered list)
Une liste non ordonnée peut prendre la forme d’une liste à puces, mais cela peut aussi signifier tout simplement une liste d’éléments non numérotés. C’est le cas ici, les notices se succèdent dans le carrousel vertical.
Les balises <li> et </li> marquent le début et la fin de chaque élément de la liste (li = list)
La balise <img> signifie image. <img … src=’ …’> signifie la source de l’image = l’URL de l’image.
Template d’origine
Template modifié
Petite adaptation du template Django du carrousel de nouveautés – La fonction limitstring
<ul id='carousel_{{id}}'>
{% for record in records %}
PMB a ajouté une fonction aux templates Django : limitstring
Elle permet de limiter la longueur d’une chaîne de caractères.
Dans le template d’origine {{record.title}}
<li class='{{id}}_item'>
<a href='{{record.link}}' alt="{{record.title}}"
title="{{record.title}}" style="textalign:center;">
Avec la fonction limitstring {{record.title | limitstring,45,"..." }}
Attention à la syntaxe ! Le tout doit être entre {{ }}
Il faut une barre verticale | entre la variable et limitstring
<img style="max-width:120px;maxheight:120px;text-align:center;" src='{{record.vign}}'/><br />
{{record.title | limitstring,45,"..." }} <br />
</a>
</li>
{% endfor %}
</ul>
Cela signifie que la longueur du texte à afficher (le titre de la notice, record.title) sera limitée à 45 caractères, et que les caractères
manquants seront remplacés par le texte entre guillemets (les 3 petits points). Le découpage se fait à l’aveugle, et le résultat final est plus ou moins heureux suivant le cas = suivant le titre à afficher.
Si vous avez une série de titres assez longs dans un carrousel de notices, cette fonction est fort utile. Bien entendu, son rôle n’est pas limité aux carrousels, elle peut aussi servir en d’autres circonstances.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 92
R
EMARQUES GÉNÉRALES À PROPOS DES CARROUSELS
Ne prenez pas « au pied de la lettre » les valeurs maximales liées au nombre d’éléments, n’oubliez pas que tout dépend en premier lieu de la taille de la zone où vous affichez le carrousel, et des dimensions que vous lui avez données !
Il se peut par exemple que dans votre cas, le nombre idéal d’éléments à afficher par page soit inférieur aux valeurs suggérées ci-dessous, car votre carrousel est de taille assez réduite.
Pour des raisons d’ergonomie et de lisibilité, il est vivement conseillé de
Mettre un seul carrousel par page – définir ses dimensions en fonction du nombre d’éléments à afficher en une fois (par page)
Limiter le nombre d’éléments qui défilent horizontalement ou verticalement (10-15 maximum)
Définir des temps de transition et de pause entre 2 et 10 secondes (donc entre 2000 et 10000 ms)
Limiter le nombre d’éléments à afficher en une fois (par page) o dans un carrousel horizontal (max. 4-5) ou vertical (max. 3-4) o dans un carrousel en fondu enchaîné : un seul !!!
Limiter le nombre d’éléments à déplacer en fonction du nombre d’éléments affichés et des temps de transition! (ex. 1 ou 2)
Les carrousels (d’articles ou de notices) proposent une CSS associée.
On peut par exemple changer la couleur de fond, ou prévoir une bordure. Evitez toutefois les fantaisies qui risqueraient de rompre l’harmonie visuelle de l’ensemble ! N’oubliez pas les niveaux de priorité de la CSS : la CSS que vous définiriez dans ce cadre
R
EMARQUES GÉNÉRALES À PROPOS DES VIGNETTES
Pré-requis : il faut que l'extension Php curl ait été activée dans la configuration de Php (le fichier php.ini).
En cas de doute, si vous travaillez en mode local, vérifiez la configuration du serveur (par exemple EasyPhp, Wamp ou Xampp).
Sinon, contactez le service informatique de votre institution ou votre hébergeur.
Comment savoir si une extension Php est activée ou non ?
Cherchez (à la fin du fichier php.ini) les lignes qui commencent par extension = …, et regardez le début de la ligne.
S’il y a un point-virgule au début, c’est une ligne de commentaire qui ne sera pas exécutée, donc l’extension ne sera pas activée.
S’il n’y a pas de point-virgule au début, c’est une ligne de commande qui sera exécutée, donc l’extension sera activée.
Dans le cas de extension=php_curl.dll, vous devrez donc supprimer le point-virgule qui se trouverait éventuellement en début de ligne.
Où chercher ces vignettes qui représentent les couvertures des livres ? 3 options possibles
A partir d’un répertoire spécifique, le site de Amazon
A partir d’un répertoire spécifique propre à votre institution, un répertoire que vous avez créé et rendu accessible sur Internet
Quelque part sur Internet, « là où elles se trouvent actuellement ». Dans ce cas, il faut compléter le champ « URL de la vignette » lorsqu’on catalogue la notice. Ce champ se trouve tout à la fin de la liste, dans le bloc « Informations de gestion ».
N.B. On peut combiner les options 1 et 3, ou bien les options 2 et 3. Mais les options 1 et 2 s’excluent mutuellement !
Options 1 ou 2 : l’URL de la vignette est créée de manière dynamique, à partir de l’ISBN de la notice (sans les tirets).
Option 3 : l’URL de la vignette est « statique », il faut l’enregistrer préalablement dans un des champs de la notice.
Il faut paramétrer PMB à deux niveaux : en mode gestion et pour l’OPAC.
A chaque fois, il faut préciser s’il faut afficher les vignettes (oui ou non), et dans quel répertoire il faut éventuellement aller les chercher (sur base de l’ISBN) : sur le site de Amazon ou dans votre répertoire spécifique.
Infos complémentaires : http://amcubat.be/docpmb/afficher-vignettes-couvertures
Chemins d’accès : Administration > Outils > Paramètres généraux
Paramètres généraux
Option 1 : Amazon
Option 2 : votre répertoire spécifique
Paramètres de l’OPAC
Paramètre
book_pics_show book_pics_url book_pics_url show_book_pics
Valeurs
0 ou 1
Administration > Outils > Paramètres de l’OPAC
Signification
0 : ne pas afficher les vignettes
1 : afficher les vignettes http://images-eu.amazon.com/images/P/!!isbn!!.08.MZZZZZZZ.jpg http://mon_site/pmb/opac_css/images/vignettes/!!isbn!!.jpg Ce sont bien sûr des exemples http://127.0.0.1/pmb/opac_css/images/vignettes/!!isbn!!.jpg
0 ou 1 0 : ne pas afficher les vignettes
1 : afficher les vignettes
Option 1 : Amazon
Option 2 : votre répertoire book_pics_url book_pics_url http://images-eu.amazon.com/images/P/!!isbn!!.08.MZZZZZZZ.jpg http://mon_site/pmb/opac_css/images/vignettes/!!isbn!!.jpg Ce sont bien sûr des exemples spécifique http:// 127.0.0.1/pmb/opac_css/images/vignettes/!!isbn!!.jpg
Ce tableau montre clairement pourquoi les options 1 et 2 s’excluent mutuellement : le paramètre book_pics_url ne peut avoir qu’un seul contenu !
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 93
N
OTICES D
’
UNE ÉTAGÈRE ASSOCIÉE À UN ARTICLE
:
NOUVEAUTÉS D
’
UN RAYON
(
EX
.
FICTION JEUNESSE
)
Attention au sens du titre ! La nuance est importante.
J’ai écrit « Nouveautés d’un rayon (exemple fiction jeunesse) »
Je n’ai pas écrit « Nouveautés du rayon fiction jeunesse »
Je commence par des captures d’écran pour situer le contexte, et clarifier ainsi les explications qui suivront.
Rappel visuel : comment accède-t-on à ce cadre ?
(Nouveautés, par exemple fiction jeunesse)
On clique sur une des étagères de la page d’accueil.
Cela mène à la page qui affiche un article.
Le template (en page d’accueil) prévoit d’afficher seulement le logo et le titre de l’article.
N.B. Les logos suggèrent clairement l’idée qu’on va
(Si nécessaire, relisez l’analyse du cadre Nouveautés dans
revisiter le concept d’étagère virtuelle. la série des Cadres issus du module Liste d’articles)
Deux exemples pour la page qui affiche un article : les nouveautés du rayon cinéma - les nouveautés du rayon fiction jeunesse
Attention ! Ces logos d’étagères ne sont pas de simples images, ce sont des logos d’articles !
Le même article,
(donc le même numéro d’id) affiché
avec des mises en page différentes,
dans 2 pages : la page d’accueil du portail, et la page qui affiche un article et une liste de notices.
Cette page qui affiche un article comprend trois cadres, dont deux sont visibles dans la capture d’écran ci-dessus :
Un cadre issu du module Affichage d’un article : un bref article de type sélection (ex. Cinéma ou Fiction jeunesse)
Le cadre « Nouveautés du rayon … » - Etagère associée à un article : une liste de notices – cadre que j’analyse maintenant
Comparaison entre deux cadres issus du module « Liste de notices »
Dans les deux cas, la source de données est la même : les notices d’une étagère, mais le choix du sélecteur est différent. Pourquoi ?
Page d’accueil
Page qui affiche un article et une liste de notices
Carrousel de nouveautés
Nouveautés d’un rayon (ex. fiction jeunesse)
Ce carrousel présente des nouveautés présélectionnées par le bibliothécaire, et probablement choisies dans divers rayons.
Il est donc logique de lier l’ensemble du carrousel au contenu d’une
étagère précise, alimentée par un panier spécifique.
Cette liste présente des nouveautés présélectionnées par le bibliothécaire, et choisies dans un seul rayon (ex. jeunesse, cinéma).
Il est donc logique de lier chaque article de type sélection au contenu d’une étagère précise, alimentée par un panier spécifique.
Mais un autre aspect intervient.
Le contenu de ce carrousel est entièrement prévisible dès le début, au moment où on crée le cadre.
En effet, la liste des notices à afficher dépend uniquement des choix effectués auparavant par le bibliothécaire : quelle étagère sélectionner pour le carrousel ? Quel panier va alimenter cette étagère ?
En fonction du choix effectué par le lecteur en page d’accueil, il faut afficher dans cette page l’article et la liste de nouveautés qui correspondent à l’étagère sur laquelle le lecteur a cliqué.
Le contenu de cette liste n’est pas entièrement prévisible dès le
début, au moment où on crée le cadre.
En effet, la liste des notices à afficher dépend :
des choix effectués auparavant par le bibliothécaire :
Ce genre de cadre ne doit pas être polyvalent, le lecteur ne peut de toute façon pas interagir. quelle étagère associer à chaque article ?
mais aussi du choix effectué au moment même par le lecteur : sur quelle étagère cliquer en page d’accueil ?
Ce genre de cadre doit être polyvalent, il doit s’adapter aux
décisions prises par le lecteur.
Carrousel : on présente les nouveautés de l’étagère que le bibliothécaire a préalablement sélectionnée et alimentée.
Liste de nouveautés : on ne présente pas les nouveautés du rayon jeunesse, mais les nouveautés d’un rayon choisi par le lecteur.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Formulaire pour les nouveautés d’un rayon – par exemple fiction jeunesse (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page qui affiche un article et une liste de notices
Source de données ? 6 possibilités
Notices d’une étagère
Sélecteur ?
(voir explications dans l’encadré suivant)
Depuis un type de contenu d’article.
Nombre maximum d’éléments à renvoyer ?
= nombre maximum de notices à afficher
Dans le cas d’une liste ou d’un carrousel de notices, la valeur zéro a un sens « normal » : cela veut dire qu’on n’affiche aucune notice.
Dans le cas d’une liste ou d’un carrousel d’articles, la valeur zéro affiche tous les articles qui répondent
au critère de sélection.
Formulaire pour les nouveautés d’un rayon – par exemple fiction jeunesse (2)
Page 94
Choix du sélecteur pour la source de données et autres choix à effectuer
Cette série de choix est liée à l’objectif qu’on s’est fixé : si on clique sur une des étagères en page d’accueil, il faut voir (dans la page qui affiche un article) l’article qui correspond à l’étagère sélectionnée, et en-dessous, la liste des notices de cette étagère.
Un petit rappel : pages qui ont une variable d’environnement - types de contenu
Certaines pages sont liées à une variable d’environnement, entre autres la page qui affiche un article et une liste de notices.
Voir Créer les pages du portail
En effet, un article de type sélection a un champ personnalisé, qui permet d’associer l’article à l’id d’une étagère.
Le lecteur clique sur un logo d’étagère en page d’accueil.
N’oubliez qu’il s’agit en fait du logo d’un article, et que c’est le même article qu’on voit dans la page d’accueil et dans la page qui affiche un article et une liste de notices.
Le numéro d’id de l’article est donc connu dès le départ.
Puisqu’on va vers la page qui affiche un article, on peut transmettre un paramètre via la variable d’environnement : l’identifiant de l’article
(id_article), afin que PMB sache quel article afficher dans cette page.
En outre, puisque cet article est théoriquement de type sélection (sauf erreur du bibliothécaire !), on va disposer d’un 2 e
paramètre : cet article contient en effet (dans ses propres champs personnalisés) le numéro identifiant de l’étagère que vous avez sélectionnée au moment de rédiger l’article.
Tout ceci permet d’afficher le « bon » article, et la liste des notices contenues dans l’étagère choisie par le lecteur !
Cet enchaînement de choix et de variables rend le système polyvalent : on peut présenter les nouveautés d’un rayon, quel qu’il soit.
Tout se résume en fait à une question de paramétrage correct !
Ceci permet d’enrichir le concept de l’étagère virtuelle.
Elle ne se limite plus nécessairement à une simple liste de notices, elle inclut aussi la possibilité d’expliquer, dans le texte de l’article, les spécificités de l’étagère, les points communs entre les notices : thème, auteur, lien avec une activité …
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 95
Formulaire pour les nouveautés d’un rayon – par exemple fiction jeunesse (3)
Choisir une vue = comment afficher la liste ?
Vue Django - Autre possibilité : Vue en carrousel
Construction du lien vers une notice
= où aller ensuite ? vers quelle page ?
Apparemment, nulle part. Mais ce n’est pas tout à fait vrai …
En tout cas, aucune page du portail n’est sélectionnée, ce qui ne laisse qu’une seule issue : aller vers la page de l’OPAC qui affiche une notice !
Du coup, la série suivante de questions n’est pas posée.
Que faire dans cette page ? Comment le signaler Quelle variable ?
Le choix de la page de destination et des moyens d’y accéder est géré dans un template de notices : Portail – liste de notices.
Formulaire pour les nouveautés d’un rayon – par exemple fiction jeunesse (4)
Template Django à utiliser ? Quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
Le template affiche éventuellement le titre « Toutes les nouveautés ».
Ensuite, on a une boucle (du premier au dernier enregistrement) qui affiche le contenu de la notice : record.content.
Une liste de notices ou un carrousel (notices ou articles) sont toujours bâtis sur le modèle de la boucle
{% for record in records %}
Une boucle qui va du premier au dernier enregistrement (a record), et cet enregistrement peut être un article ou une notice.
PMB pose d’office la question « Quel template de notice employer ? » dans deux cas :
Si le template Django contient la boucle {% for record in records %} ou bien s’il faut afficher une seule notice.
Toutefois, cette possibilité de recourir à un template prédéfini n’existe concrètement que si 2 conditions sont remplies :
Le cadre doit être créé à partir des modules Liste de notices (carrousel ou liste) ou Afficher une notice, mais pas à partir du
module Liste d’articles (carrousel ou liste). Choisir un template de notice pour afficher un article n’aurait d’ailleurs aucun sens !
Le template Django doit contenir « quelque part » la variable {{record.content}} (ce qui exclut par ex. le module Carrousel)
Dans ce cas-ci, la question « quel template de notice employer ? » a un sens, car toutes les conditions sont vérifiées.
Ce template Django semble plutôt « vide », en tout cas, il ne répond pas à certaines questions fondamentales :
il ne précise pas quels champs afficher (record.content désigne tout le contenu de la notice)
il ne signale pas comment mettre en forme les données (si ce n’est le fait de tracer une ligne horizontale)
il ne prévoit pas de liens pour aller ensuite « ailleurs », vers la page qui affiche une notice (version portail ou OPAC)
Il faut donc une possibilité de répondre à ces questions vitales, ce sera le rôle du template de notices (défini dans l’onglet Editions).
Template de notice à utiliser pour le contenu ?
Portail – Liste de notices
Deux autres choix possibles
Résultat à l’écran
Template Django des nouveautés d’un rayon – par exemple fiction jeunesse
{% if records %}
Début de la condition
{% if records %}
S’il y a des notices à afficher
<h3>Toutes les nouveautés</h3>
{% endif %}
{% for record in records %}
<blockquote>{{record.content}}</blockquote>
<br />
<hr>
{% endfor %}
On affiche le titre « Toutes les nouveautés »
Fin de la condition
{% endif %}
Début de la boucle :
{% for record in records %}
Afficher le contenu de la notice {{record.content}}
Saut de ligne
On trace une ligne horizontale
Fin de la boucle :
{% endfor %}
Une liste de notices (vue Django ou carrousel) est toujours bâtie sur le modèle de la boucle
{% for record in records %}
Syntaxe des templates
Django
Explications des balises
HTML
Les instructions entre {% %}
la boucle de répétition {% for record in records %}
la condition {% if records %} {% endif %}
Les champs entre {{ }}
le contenu de la notice {{record.content}}
La balise <br /> provoque un saut de ligne (br = break)
La balise <hr> trace une ligne horizontale (hr = horizontal rule)
La balise <blockquote> détermine un mode d’affichage (citation)
La condition
{% if records %}
est nécessaire ici
Elle signifie : s’il y a des enregistrements = notices
Inutile d’afficher le titre « Toutes les nouveautés » s’il n’y a pas d’étagère associée à l’article ou si elle est vide !
{{record.content}} = tout le contenu de la notice !
C’est trop ! Via le template de notices, il faut réduire le nombre de champs, et préciser comment les afficher.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Template de notices : Portail – Liste de notices
Ce genre de template se crée dans l’onglet Editions
Editions > Templates > Notices
Il permet de définir un format d’affichage pour les notices.
Chaque template contient des fonctions spécifiques, qui font référence aux champs de la base de données, du code HTML pour la mise en forme et parfois quelques mots à afficher.
Ce template comprend en fait 4 parties : monographies, articles de
périodiques, périodiques (notices-mères) et notices de bulletins .
Voir le guide en ligne de PMB http://doc.sigb.net/pmb/co/edit_tpl_notice.html
http://doc.sigb.net/pmb/co/edit_tpl_notice_fonctions.html
Page 96
Portail – Liste de notices – Le template des monographies gère cette présentation succincte de la notice
Explication préliminaire pour les balises HTML liées aux tableaux
Les balises <table> et </table> marquent le début et la fin d’un tableau.
Les balises <tbody> et </tbody> marquent le début et la fin de la définition du tableau.
Les balises <tr> et </tr> marquent le début et la fin de chaque ligne
Les balises <td> et </td> marquent le début et la fin de chaque cellule.
<table>
<tr> Début de l’unique ligne de ce tableau
<td> 1 e
cellule : la vignette </td>
<td> 2 e
cellule : titre, auteur et résumé de la notice </td>
</tr> Fin de la ligne
</table>
On ne le croirait pas à première vue, mais cette notice est
affichée dans un tableau dont les bordures sont invisibles !
Je trace ces bordures pour clarifier les choses ;-)
Ce tableau (défini dans le template) comprend
une seule ligne : l’ensemble des infos sur la notice
deux cellules : à gauche, la vignette
à droite, titre, auteur et résumé de la notice
Où va-t-on ensuite si on clique sur un lien : sur la vignette ou sur le titre ?
La balise est <a href="#permalink();"> L’URL de destination est donc la page de l’OPAC qui affiche une notice
<table border="0" cellpadding="1" cellspacing="5"
>
Créer un tableau dont les bordures sont invisibles (border="0")
<tbody>
<tr>
<td
style="width:110px;text-align:center;"
>
Lien cliquable sur une image = sur la vignette <a href="
URL de destination = permalink de la notice dans l’OPAC
Si cette vignette existe #if(#img_url();
<a href="#permalink();">#if(#img_url();,<img src="#img_url();" style="width:100px;" />,<img src="./styles/pmb4/images/no_image.jpg" style="width:100px;" />);</a>
</td>
<td style="text-align:left;"
>
<a href="#permalink();"><font size=3>#title();#a_empty(#complement_title();, : );</font></a>
on affiche la vignette du livre <img src="#img_url();
Sinon = s’il n’y a pas de vignette
On affiche une vignette standard
(pas d’image pour ce titre)
<img src="./styles/pmb4/images/no_image.jpg">
Fin du lien cliquable </a>
Lien cliquable sur un texte = sur le titre <a href="
URL de destination = permalink de la notice dans l’OPAC
On affiche le titre
S’il y a un sous-titre (complément de titre)
#str_replace( , ,#a_empty(#authors_by_type_with_tpl(1,3,\, ,\,
,0,0,70\,71\,72,{rejete} {name});,<br />de ););
On affiche le signe de ponctuation : et le sous-titre
Fin du lien cliquable (</a>
S’il y a un ou plusieurs auteurs
On affiche le mot « de » et le(s) nom(s) et prénom(s) #a_empty(#resume();,<br /><br />);
</tr>
</tbody>
</td>
S’il y a un résumé
On l’affiche
N.B. Explication de la fonction « auteurs » à la page suivante
</table>
Pour employer ce template de notices dans votre futur portail, il faut le créer dans la base de travail et dans la base en ligne !
Ce template comprend 4 parties : monographies, articles de périodiques, périodiques et
Pas de copier-coller à partir du traitement de texte, cela crée des problèmes. Copier-coller dans l’onglet Editions !!!
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 97
Portail – Liste de notices – Le template des monographies
Paramètres de la fonction qui affiche le nom des auteurs : #authors_by_type_with_tpl(1,3,\, ,\, ,0,1,70\,71\,72,{rejete}{name});
Cette fonction retourne les auteurs de la notice en fonction de leur type, selon une mise en forme à définir
#authors_by_type_with_tpl(param0,param1,param2,param3,param4,param5, param6,param7);
// $param[0] = 0=principal seul, 1=principal + autres, 2=tous
// $param[1] = nombre maximum d'auteurs à afficher
// $param[2] = séparateur entre auteurs
// $param[3] = séparateur entre auteur principal / autres auteurs / auteurs secondaires
// $param[4] = afficher la fonction : 0=non, 1=toujours
// $param[5] = afficher "et al." s’il y a plus d'auteurs que le maximum prévu dans le paramètre 1
// $param[6] = 70=physique, 71=collectivités, 72=congrès
// $param[7] = template pour l'affichage des auteurs, à définir à partir des éléments suivants :
{name} = nom ou élément d'entrée
{rejete} = prénom ou élément rejeté
{function} = fonction de l'auteur dans la notice
{author_comment} = commentaire
Pourquoi y a-t-il une barre oblique inversée \ avant certaines virgules ?
Regardez par ex. les paramètres 2 et 3 : pour le séparateur entre auteurs, et celui entre auteur principal / autre / secondaire
Vu que le séparateur entre les paramètres dans la fonction est une virgule, si on veut que le séparateur entre les noms de plusieurs auteurs soit lui aussi une virgule, il faut éviter à PMB de s'emmêler les pinceaux !
Dans ce cas, en Php - MySQL, si on emploie un signe qui sert normalement de séparateur de données dans une autre fonction, on doit le précéder d'un caractère appelé "caractère d'échappement". Le caractère "échappe" en quelque sorte à sa fonction habituelle (qui est celle de séparateur), il prend une autre fonction. En général, il récupère souvent sa fonction de départ : on veut afficher une « vraie » virgule !
Par convention, c'est la barre oblique inversée, \ (le backslash) qui sert de caractère d'échappement en Php - MySQL.
Si on analyse les paramètres 0, 1 et 2 de cette fonction : #authors_by_type_with_tpl (1,3,\, ,
une simple virgule est le séparateur entre les paramètres ex. 1,3,
\, (barre oblique + virgule = pas d’espace entre les 2) indique qu'on veut une « vraie » virgule (\ est le caractère d’échappement)
\, , ex. paramètre 2 et séparateur entre les paramètres 2 et 3 : barre oblique + virgule espace virgule la 1 la 2 e e
virgule (après \) sera une « vraie » virgule et elle sera suivie d’un espace (ex. après le nom d’un auteur)
virgule est le séparateur entre les paramètres
Nouveautés d’un rayon – par exemple fiction jeunesse
Peut-on afficher la notice autrement ? Oui, si vous avez un autre template ! De toute façon, il y a déjà celui par défaut ...
On a choisi le template : Portail – Liste de notices
Voici ce qu’on aurait vu avec le template par défaut
Pour bien comprendre cette URL
L’URL de cette image <img src="./styles/pmb4/images/no_image.jpg"> est relative par rapport à pmb/opac_css/
Autrement dit, son adresse absolue est par exemple http://127.0.0.1/opac_css/styles/pmb4/images/no_image.jpg
Peut-on employer une autre image pour symboliser l’absence de vignette ? Oui.
Dans ce contexte-ci (nouveautés d’un rayon), c’est simple, il suffit changer l’URL dans le template de notices.
Vous pouvez prendre une autre image en ligne « quelque part », il suffit d’indiquer son URL dans la balise <img src=" ">.
D’ailleurs, il y a déjà une image homonyme employée par défaut dans l’OPAC (dans le dossier pmb/opac_css/images/) : no_image.jpg
Dans le template de notices, l’URL relative de cette autre image deviendrait donc <img src="./images/no_image.jpg">
Dans d’autres contextes, si le mode d’affichage de la notice est géré par le template Django, il faut adapter ce template.
Il faut y ajouter une condition : si la vignette manque, on redirige le lien vers une autre image que celle prévue par défaut.
Cette solution sera expliquée dans l’analyse du carrousel suivant : notices dans les mêmes catégories qu’un article.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 98
Je rappelle que ce template (Portail – Liste de notices) comprend en réalité 4 parties.
Jusqu’à présent, j’ai repris et illustré dans ce chapitre le template des monographies (rayon Fiction – Jeunesse).
Si vous cliquez sur l’étagère des périodiques, vous verrez comment on gère l’affichage d’autres types de documents :
Un périodique (la notice-mère)
Un article de périodique
Une notice de bulletin
Affichage géré par le template « Portail – Liste de de notices »
Partie « Périodique »
Exemples concrets : périodiques, articles et notices de bulletins
Affichage « classique » dans l’OPAC
A l’écran, on voit seulement le titre du périodique et son logo.
En effet, le champ résumé de la notice-mère du périodique est vide.
Partie « Article de périodique »
Par contre, le champ résumé a été complété pour cet article, ainsi que pour la notice de bulletin ci-dessous. Mais il n’y a pas de logo.
Voir Adapter son mode de travail au portail
Le champ « résumé »
Partie « Notice de bulletin »
Remarque valable pour un OPAC classique et pour le portail.
Un bulletin « ordinaire » n’est pas une notice, donc on ne peut pas le mettre dans un panier de notices pour le lier à une étagère.
Il faut d’abord transformer le bulletin en « notice de bulletin ».
Voir Bulletins et notices de bulletins .
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 99
Template Portail – Liste de notices (suite)
Template des périodiques
<table border="0" cellpadding="1" cellspacing="5">
<tbody>
<tr>
<td style="width:110px;text-align:center;">
<a href="#permalink();">#if(#img_url();,<img src="#img_url();" style="width:100px;" />,<img src="./styles/pmb4/images/no_image.jpg" style="width:100px;" />);</a>
</td>
<td style="text-align:left;">
<a href="#permalink();"><font size=3>#title();#a_empty(#complement_title();, : );</font></a>
#a_empty(#resume();,<br /><br />);
</td>
</tr>
</tbody>
</table>
Template des articles
<table border="0" cellpadding="1" cellspacing="5">
<tbody>
<tr>
<td style="width:110px;text-align:center;">
<a href="#permalink();">#if(#img_url();,<img src="#img_url();" style="width:100px;" />,<img src="./styles/pmb4/images/no_image.jpg" style="width:100px;" />);</a>
</td>
<td style="text-align:left;">
<a href="#permalink();"><font size=3>#title();#a_empty(#complement_title();, : );</font></a>
#str_replace( , ,#a_empty(#authors_by_type_with_tpl(1,3,\, ,\, ,0,0,70\,71\,72,{rejete} {name});,<br />de ););
<br />
<i>In #nom_revue();#a_empty(#numero_bulletin();,\, ); (#if(#extract_path((.*) [(],#date_bulletin(););,#extract_path((.*)
[(],#date_bulletin(););,#date_bulletin(););)</i>
#a_empty(#resume();,<br /><br />);
</td>
</tr>
</tbody>
</table>
Template des notices de bulletins
<table border="0" cellpadding="1" cellspacing="5">
<tbody>
<tr>
<td style="width:110px;text-align:center;">
<a href="#permalink();">#if(#img_url();,<img src="#img_url();" style="width:100px;" />,<img src="./styles/pmb4/images/no_image.jpg" style="width:100px;" />);</a>
</td>
<td style="text-align:left;">
<a href="#permalink();"><font size=3>#extract_path((.*) [(],#title(););#a_empty(#complement_title();, : );</font></a>
#str_replace( , ,#a_empty(#authors_by_type_with_tpl(1,3,\, ,\, ,0,0,70\,71\,72,{rejete} {name});,<br />de ););
<br />
<i>Bulletin de #nom_revue();</i>
#a_empty(#resume();,<br /><br />);
</td>
</tr>
</tbody>
</table>
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 100
C
ARROUSEL
«
SUR LE MÊME SUJET
» :
NOTICES DANS LES MÊMES CATÉGORIES QU
’
UN ARTICLE
Formulaire pour le carrousel de notices dans les mêmes catégories qu’un article (1) – Module « Liste de notices »
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page qui affiche un article et une liste de notices
Source de données ? 6 possibilités
Notices dans les mêmes catégories qu’un article
Sélecteur ?
Depuis une variable d’environnement
Quelle variable d’environnement ?
L’identifiant de l’article est ici la seule option
Nombre maximum d’éléments à renvoyer ?
= nombre maximum de notices à afficher
Dans le cas d’une liste ou d’un carrousel de notices, la valeur zéro a un sens « normal » : cela veut dire qu’on n’affiche aucune notice.
Dans le cas d’une liste ou d’un carrousel d’articles, la valeur zéro affiche tous les
articles qui répondent au critère de sélection.
Choix du sélecteur pour la source de données
Rappel visuel : quand voit-on ce carrousel de notices dans les mêmes catégories qu’un article ?
On est bien entendu dans la page qui affiche un article.
Ce carrousel n’a visiblement aucun lien avec le type de contenu de l’article.
Ces 3 exemples illustrent la diversité à ce niveau-là :
Evénement (Tim Burton)
Coup de cœur (Bibliothèques pleines de fantômes)
Information (Mais que font les bibliothécaires ?)
En outre, c’est le même carrousel pour 2 de ces articles.
Quel est donc le lien entre ces articles et ces notices ?
Tous ces articles sont liés à une (ou plusieurs) catégorie(s) du thésaurus.
Les notices affichées dans un carrousel sont liées aux même(s) descripteur(s) que l’article présent dans la page.
Les étagères « classiques » de l’OPAC et certaines étagères du portail sont « statiques » en ce sens que leur contenu est préétabli.
Dans ce cas-ci, il s’agit d’une « étagère dynamique », dont le contenu se crée au moment-même, en fonction des données présentes dans la base (données = notices + catégories + articles).
On a employé le module « Liste de notices », donc on peut afficher ces notices dans une vue Django (une liste) ou dans un carrousel.
N.B. Il est impossible d’obtenir ce genre de résultat avec le module Carrousel.
Le sélecteur pour la source de données est une variable d’environnement : l’identifiant de l’article. Ce numéro d’id suffit, puisqu’il permet de connaître les catégories associées à cet article, et ensuite de sélectionner les notices adéquates.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 101
Formulaire pour le carrousel de notices dans les mêmes catégories qu’un article (2) – Module « Liste de notices »
Choisir une vue = comment afficher la liste ?
Vue en carrousel - Autre possibilité : vue Django (liste)
Construction du lien vers une notice
= où aller ensuite ? vers quelle page ?
Page du portail qui affiche une notice
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de la notice est ici la seule option.
.
Mode d’affichage du carrousel ?
Défilement vertical
Autres possibilités : défilement horizontal ou fondu enchaîné
Définir les autres paramètres du carrousel
Template Django à utiliser ? quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
La vignette prévue et le titre de la notice sont cliquables.
Dans ce type de module (liste de notices), la réponse à la question « Où aller ensuite ? » peut varier : on peut aller vers la page OPAC « classique » qui affiche une notice, ou bien vers la page du portail qui affiche une notice.
Toutefois, dans la démo, on choisit toujours (dans le cas d’un carrousel) d’aller vers la page du portail qui affiche une notice.
Pour aller vers la page du portail qui affiche une notice, on choisit la page adéquate dans la liste déroulante
Pour aller directement vers la page de l’OPAC qui affiche une notice, on ne choisit aucune des pages du portail qui sont proposées
Le lien vers la page du portail se fait par une URL avec variables
Le lien vers l’OPAC se fait par le permalink de la notice
La page du portail qui affiche une notice propose (à la dernière ligne) un lien permanent (permalink) pour aller vers l’OPAC, donc
on peut ensuite voir les infos habituelles sur la notice, sur les exemplaires et leur disponibilité. Mais la route est plus longue !
N.B. Si le permalink ne s’affiche pas, vérifiez le paramétrage de l’OPAC : le paramètre permalink doit avoir la valeur 1.
Que se passe-t-il au moment où vous répondez à ces questions ?
Construction du lien ? Où aller ? vers quelle page ? Que faire dans cette page ? Comment le signaler ? Quelle variable transmettre ?
PMB sait qu’il faut aller ensuite vers la page du portail qui affiche une notice – page dont l’id est 7 est dans la démo
PMB sait qu’il faut afficher la notice correspondante, et il connaît le numéro identifiant de chaque notice
PMB peut ainsi construire une URL avec variables, une page de destination pour chaque notice, par exemple http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=7&id_notice=87
Cette URL qui a été construite de manière dynamique est enregistrée dans la variable {{record.link}} (a link = un lien)
Mais pour avoir un lien fonctionnel, il faut en outre qu’on puisse « cliquer sur quelque chose » pour accéder à la page de
destination : c’est le rôle du template qui prévoit (dans ce cas-ci) que la vignette et le titre de la notice soient cliquables.
N.B. Si nécessaire, relire le chapitre URL avec variables et navigation
Dans la démo, on a choisi d’afficher la notice dans une page du portail, mais on aurait aussi pu l’afficher dans une page de l’OPAC,
et l’URL de destination aurait correspondu au permalink : http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=notice_display&id=87
Formulaire pour le carrousel de notices dans les mêmes catégories qu’un article (3) – Module « Liste de notices »
Template de notice à utiliser pour le contenu ? CSS associée ?
Template par défaut - Deux autres choix possibles Aucun contenu
Une liste de notices ou un carrousel (notices ou articles) sont toujours bâtis sur le modèle de la boucle
{% for record in records %}
Une boucle qui va du premier au dernier enregistrement (a record), et cet enregistrement peut être un article ou une notice.
PMB pose d’office la question « Quel template de notice employer ? » dans deux cas :
Si le template Django contient la boucle {% for record in records %} ou bien s’il faut afficher une seule notice.
Toutefois, cette possibilité de recourir à un template prédéfini n’existe concrètement que si 2 conditions sont remplies :
Le cadre doit être créé à partir des modules Liste de notices (carrousel ou liste) ou Afficher une notice, mais pas à partir du
module Liste d’articles (carrousel ou liste). Choisir un template de notice pour afficher un article n’aurait d’ailleurs aucun sens !
Le template Django doit contenir « quelque part » la variable {{record.content}} (ce qui exclut par ex. le module Carrousel)
Dans ce cas-ci, la question « quel template employer ? » est sans objet, car on n’a pas employé la variable {{record.content}}
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 102
Résultat à l’écran
Parties du code que je vais adapter dans
l’encadré suivant.
Template Django du carrousel de notices dans les mêmes catégories qu’un article
{% if records %}
<h3>Sur le même sujet</h3>
{% endif %}
<ul id='carousel_{{id}}'>
{% for record in records %}
<li class='{{id}}_item'>
<a href='{{record.link}}' alt='{{record.title}}' title='{{record.title}}' >
<img style="max-width:120px;max-height:120px;textalign:center;" src='{{record.vign}}'/>
<br /> {{record.title}} <br />
</a>
</li>
{% endfor %}
</ul>
N.B. Remplacez les apostrophes par des guillemets
alt="{{record.title}}" title="{{record.title}}"
Début de la condition
{% if records %}
S’il y a des notices à afficher
On affiche le titre « Sur le même sujet »
Fin de la condition
{% endif %}
Début de la liste non numérotée du carrousel (<ul>
Début de la boucle :
{% for record in records %}
Permet d’afficher les vignettes des notices du carrousel
Début de la définition d’un élément de la liste (<li>)
Début de la balise <a href=" … (lien URL)
URL de destination <a href='{{record.link}} … >
On clique sur la vignette : <img src='{{record.vign}}'/>
Ou on clique sur le titre de la notice : {{record.title}}
Fin de la balise </a>
Fin de la définition de cet élément (</li>
Fin de la boucle :
{% endfor %}
Fin de la liste non numérotée (</ul>
Un carrousel (de notices, d’articles ou de rubriques) est toujours bâti sur le modèle de la boucle
{% for record in records %}
Syntaxe des templates Django
Balises HTML
Les instructions entre {% %}
la boucle de répétition {% for record in records %}
la condition {% if records %} {% endif %}
Les champs entre {{ }}
URL de la notice {{record.link}}
La condition
{% if records %}
est nécessaire ici
Elle signifie : s’il y a des enregistrements = notices
Inutile d’afficher le titre « Sur le même sujet » s’il n’y a pas de notices à afficher dans cette étagère dynamique !
Toutes les balises ont déjà été expliquées précédemment. Si nécessaire, voir aide-mémoire - HTML
Petite adaptation du template Django du carrousel de notices dans les mêmes catégories qu’un article
Objectif : afficher une autre image que celle employée par défaut pour symboliser l’absence de vignette
Notice avec vignette
Template d’origine
Notice sans vignette
Template d’origine
Notice sans vignette
Template modifié
{% if records %}
<h3>Sur le même sujet</h3>
{% endif %}
<ul id='carousel_{{id}}'>
{% for record in records %}
<li class='{{id}}_item'>
<a href='{{record.link}}' alt="{{record.title}}" title="{{record.title}}">
{% if record.vign!="http://127.0.0.1/pmbv4perso2/opac_css/i mages/vide.png"
%}
<img style="max-width:120px;maxheight:120px;text-align:center;" src='{{record.vign}}'
/>
{% else %}
<img style="max-width:120px;max-height:120px;textalign:center;" src='http://127.0.0.1/pmbv4perso2/opac_css/images/no_ image_question.jpg' />
{% endif %}
<br /> {{record.title | limitstring,45,"..." }} <br />
</a>
</li>
{% endfor %}
</ul>
Début de la condition
{% if records %}
S’il y a des notices à afficher
On affiche le titre « Sur le même sujet »
Fin de la condition
{% endif %}
Début de la liste non numérotée du carrousel (<ul>
Début de la boucle :
{% for record in records %}
Permet d’afficher les vignettes des notices du carrousel
Début de la définition d’un élément de la liste (<li>)
Début de la balise <a href=" … (lien URL)
URL de destination <a href='{{record.link}} … >
Début de la condition
Si la vignette à afficher est différente d’une vignette vide
{% if record.vign!="http://... /vide.png" %}
On affiche la vignette du livre et on peut cliquer
<img src='{{record.vign}}' />
Sinon
{% else %}
On affiche une autre vignette et on peut cliquer
<img src='http://… /no_image_question.jpg' />
Fin de la condition
{% endif %}
Ou on peut cliquer sur le titre de la notice : {{record.title}}
Fin de la balise </a>
Fin de la définition de cet élément (</li>
Fin de la boucle :
{% endfor %}
Fin de la liste non numérotée (</ul>
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 103
Template Django : la condition {% if %} …. {% else %} … {% endif if %}
Objectif : en cas d’absence de vignette, afficher une image alternative, autre que celles prévues par défaut dans PMB
N.B. Je suppose que le paramétrage des vignettes est correct. Relire si nécessaire les explications que j’ai déjà fournies
Comment accéder à ces vignettes ? Voici les trois options possibles :
A partir d’un répertoire spécifique, le site de Amazon
A partir d’un répertoire spécifique propre à votre institution
Sur base du contenu du champ « URL de la vignette »
Images que PMB affiche par défaut en cas d’absence de vignette
Dans les deux premiers cas, l’URL de la vignette est construite de manière dynamique, à partir de l’ISBN (sans les tirets).
Le paramètre book_pics_url contient dès lors une valeur comme http://images-eu.amazon.com/images/P/!!isbn!!.08.MZZZZZZZ.jpg
Dans le 3 e
cas, cela dépend de ce que vous avez catalogué : le champ URL de la vignette est-il complété ?
Dans les 2 premiers cas, la vignette s’affiche automatiquement si la notice contient un ISBN correct !
La vignette s’affiche … du moins, si une vignette est effectivement disponible !
L’ISBN ne concerne que les monographies, donc la création dynamique d’une URL de vignette n’est pas possible pour les périodiques, les livres plus anciens ou certaines parutions à tirage limité (thèses, mémoires, travaux de fin d’étude, brochures …)
En outre, ce système vous rend dépendant d’un site, par exemple Amazon : si un livre, un CD, un DVD n’est pas (plus) en vente chez eux, vous ne verrez pas de vignette, même si votre ISBN est correct.
pouvez seulement employer l’option n° 3 : compléter le champ URL de la vignette.
Comment PMB gère-t-il l’absence de vignette si l’URL a été construite de manière dynamique à partir de l’ISBN ?
PMB « transite » d’abord par l’affichage d’une image vide : « vide.png », ensuite il affiche une image par défaut.
C’est pourquoi le script expliqué ci-dessous vérifie si la vignette à afficher est différente de l’image « vide.png »
Remplacer une des images par défaut de PMB par une image de votre choix ne sera donc possible que
s’il s’agit d’une monographie (il faut un ISBN)
si l’URL est construite de manière dynamique, sur base de l’ISBN (options 1 ou 2)
Dans le cas n° 3, vous continuerez à voir les images par défaut prévues par PMB, car l‘URL de la vignette à afficher est enregistrée dans un champ de la notice, et même si ce champ est vide ou contient une valeur erronée, on ne « transite » pas par l’image « vide.png ».
Monographies avec ISBN Options n° 1 ou n° 2 : URL dynamique
Si l’ISBN dans votre base est correct et correspond à une vignette stockée en ligne, on voit la vignette.
Si l’ISBN dans votre base est erroné ou manquant, ou bien s’il n’y a pas de vignette en ligne pour cet ISBN, on voit votre image alternative.
Périodiques ou monographies sans ISBN
Option n° 3 : champ URL de la vignette
Si le champ est complété correctement, et qu’il y a une vignette disponible en ligne, on voit la vignette.
Sinon, on voit l’image par défaut de PMB.
J’espère que ces explications complémentaires vous ont permis de comprendre pourquoi on a ajouté une condition dans le template
Django, et pourquoi on a absolument voulu vérifier si une image était différente ou non de « vide.png »
<a href='{{record.link}}' alt="{{record.title}}" title="{{record.title}}">
{% if record.vign!="http://127.0.0.1/pmbv4perso2/opac_css/images/vide.png"
%}
<img style="max-width:120px;max-height:120px;text-align:center;" src='{{record.vign}}' />
{% else %}
<img style="max-width:120px;max-height:120px;text-align:center;" src='http://127.0.0.1/pmbv4perso2/opac_css/images/no_image_question.jpg' />
{% endif %}
<br /> {{record.title | limitstring,45,"..." }} <br />
</a>
{% if %} Si la condition est vérifiée
Instruction n° 1
{% else %} Sinon
Instruction n° 2
{% endif %} Fin de la condition
Par convention
!= signifie “différent de”
Début de la balise <a href=" … (lien URL)
URL de destination <a href='{{record.link}} … >
Début de la condition
Si la vignette à afficher est différente d’une image vide
{% if record.vign!="http://... /vide.png" %}
On affiche la vignette du livre et on peut cliquer
<img src='{{record.vign}}' />
Sinon
{% else %}
On affiche une autre image et on peut cliquer
<img src='http://… /no_image_question.jpg' />
Fin de la condition
{% endif %}
Ou on peut cliquer sur le titre de la notice : {{record.title}}
Fin de la balise </a>
L’image de remplacement que j’ai prévue s’appelle no_image_question.jpg.
Elle est enregistrée dans pmb/opac_css/images
Bravo !! Vous venez de parcourir (et je l’espère, de comprendre) toutes les instructions qui existent dans les templates Django ;-)
Vous voyez bien que ce n’était pas un obstacle insurmontable : les boucles, les conditions et la fonction limitstring …
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 104
Cadres du portail attachés à une page de l’OPAC
Liste d’articles dans les mêmes catégories qu’une notice - Liste de notices du même auteur qu’une notice
Dans la démo, ces cadres sont attachés à une page de l’OPAC, mais on aurait aussi pu sélectionner une page du portail.
Pourquoi ces exemples supplémentaires ?
Je voulais montrer que la démo contient aussi des exemples de cadres liés à une page de l’OPAC, et rappeler ainsi qu’on peut
insérer un cadre dans une page du portail ou de l’OPAC (même si un choix convient parfois mieux que l’autre).
En outre, ces cadres complètent les 2 séries précédentes d’exemples : le 1 er
cadre affiche une liste d’articles, et le 2 e
affiche une liste de notices.
Vu leur principe de base, ces cadres s’insèrent idéalement dans une page (portail ou OPAC) où on affiche une notice :
Les Articles dans les mêmes catégories qu’une notice et les Notices du même auteur qu’une notice font référence au même point de départ : une notice. Leur libellé le montre d’ailleurs clairement.
Il y a un lien entre le dernier cadre analysé (notices dans les mêmes catégories qu’un article) et le prochain que je vais présenter.
Les modules qui ont généré ces cadres ont des fonctions similaires – dans un sens ou dans l’autre …
Liste de notices dans les mêmes catégories qu’un article
Liste d’articles dans les mêmes catégories qu’une notice
Dans la page du portail qui affiche un article Dans la page de l’OPAC qui affiche une notice
Catégorie Bibliothéconomie Catégorie Cinéma
A
RTICLES DANS LES MÊMES CATÉGORIES QU
’
UNE NOTICE
Formulaire pour les articles dans les mêmes catégories qu’une notice (1) – Module Liste d’articles
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page de l’OPAC qui affiche une notice
Source de données ?
Articles des catégories d’une notice
Sélecteur ?
Sélecteur d’une notice depuis un permalink, c’est donc basé sur l’identifiant de la notice affichée au départ dans cette page de l’OPAC
Critère et ordre de tri ?
Par date de publication - décroissant
Nombre maximum d’éléments à renvoyer ?
= nombre maximum d’articles à afficher
Dans le cas d’une liste ou d’un carrousel d’articles, la valeur zéro affiche tous les
articles qui répondent au critère de sélection.
Source de données et choix du sélecteur : les articles des catégories d’une notice - sélecteur depuis un permalink
Dans les 3 exemples de listes d’articles vus jusqu’à
Choix du sélecteur présent, le choix était toujours « Rubriques », et ensuite, « sélecteur manuel d’une ou de plusieurs rubriques ».
On change ici de source de données et de sélecteur.
.
Il s’agit ici d’une liste dynamique, créée au moment même, en fonction des catégories communes à la notice et aux articles.
La liste des articles à afficher peut changer de jour en jour, en fonction de l’évolution du contenu éditorial et bibliographique.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 105
Formulaire pour les articles dans les mêmes catégories qu’une notice (2) – Module Liste d’articles
Filtre
Aucun filtre sélectionné
Choisir une vue = comment afficher la liste ?
Liste d’articles – template Django avec lien
Autre possibilité : Vue en carrousel
Construction du lien vers un article
= où aller ensuite ? vers quelle page ?
Page qui affiche un article et une liste de notices
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de l’article est ici la seule option.
Template Django
Rappel : si vous dépliez les dossiers, vous pouvez voir la liste des variables utilisables dans le template.
Un cadre issu du module « Liste d’articles » mène toujours vers la page qui affiche un article et une liste de notices.
Je rappelle que c’est une page multifonctions, conçue pour afficher tous les types de contenu d’articles de la démo.
Template Django des articles dans les mêmes catégories qu’une notice
Résultat à l’écran
{% if articles %}
<h3>Lire aussi...</h3>
{% endif %}
{% for article in articles %}
<div style="width:49%;marginright:1%;float:left;margin-bottom:5px;margintop:5px;">
<h3>{{article.title}}</h3>
<a href='{{article.link}}' alt="{{article.title}}" title="{{article.title}}"><img style="float:left;marginright:5px;" src='{{article.logo.vign}}' />
</a>
<p>{{article.resume}}</p>
<a style="text-align:right;" href="{{article.link}}">Lire la suite...
</a>
</div>
{% endfor %}
Ce template s’appelle « Liste d’articles - template
Django avec lien », ce n’est pas un hasard !
Il prévoit la possibilité de cliquer sur le logo de l’article ou sur le texte « Lire la suite » pour aller vers la page qui affiche un article.
Syntaxe des templates Django
Explications des balises HTML
Les instructions entre {% %}
la condition {% if articles %} {% endif %}
Les champs entre {{ }}
URL de l’article {{article.link}}
Début de la condition
la boucle de répétition {% for article in articles %}
{% if articles %}
S’il y a des articles à afficher
On affiche le titre « Lire aussi … »
Fin de la condition
{% endif %}
Début de la boucle :
{% for article in articles %}
une “boucle” qui va du premier au dernier article
Début de la balise <div style=" … qui gère la mise en forme
On affiche le titre de l’article
Début de la 1 e
balise <a href=" … (lien URL)
D’abord l’URL de destination, le lien <a href="{{article.link}}">
Ensuite, la « source » = d’où on part = où peut-on cliquer ?
Sur le logo de l’article : <img src='{{article.logo.vign}}' />
Fin de la 1 e
balise </a>
On affiche le résumé = le chapeau de l’article
Début de la 2 e
balise <a href=" … (lien URL)
D’abord l’URL de destination, le lien <a href="{{article.link}}">
Ensuite, la « source » = d’où on part = où peut-on cliquer ?
Sur le texte « Lire la suite … »
Fin de la 2 e
balise </a>
Fin de la balise </div>
Fin de la boucle :
{% endfor %}
La condition
{% if articles %}
est nécessaire ici
Elle signifie : s’il y a des articles liés aux mêmes catégories que la notice affichée au départ
Inutile d’afficher le titre « Lire aussi » s’il n’y a pas d’articles à afficher dans cette liste dynamique !
La balise <h3> détermine la taille des caractères
Les balises <div style=" … > et </div> marquent le début et la fin d’un « bloc de texte » à mettre en forme.
L’affichage du texte situé entre ces 2 balises peut être personnalisé : marges, alignement, police de caractères …
La balise <img> signifie image. <img … src=’ …’> signifie la source de l’image = l’URL de l’image.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 106
Formulaire pour les articles dans les mêmes catégories qu’une notice (3) – Module Liste d’articles
Construction du lien vers un article
= où aller ensuite ? vers quelle page ?
Page qui affiche un article et une liste de notices
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de l’article est ici la seule option.
On va vers la page qui affiche un article et une liste de notices.
Je rappelle que c’est une page multifonctions, conçue pour afficher tous les types de contenu d’articles de la démo.
Que se passe-t-il au moment où vous répondez à ces questions ?
Construction du lien ? Où aller ? vers quelle page ? Que faire dans cette page ? Comment le signaler ? Quelle variable transmettre ?
PMB sait qu’il faut aller ensuite vers la page qui affiche un article – page dont l’id est 4 est dans la démo
PMB sait qu’il faut afficher un ou plusieurs articles, et il connaît le numéro identifiant de chaque article
PMB peut ainsi construire une URL avec variables, une page de destination pour chaque article, par exemple http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=4&id_article=11
Cette URL qui a été construite de manière dynamique est enregistrée dans la variable {{article.link}} (a link = un lien)
Mais pour avoir un lien fonctionnel, il faut en outre qu’on puisse « cliquer sur quelque chose » pour accéder à la page de
destination : c’est le rôle du template qui prévoit (dans ce cas-ci) que le logo et le texte « Lire la suite » soient cliquables.
N.B. Si nécessaire, relire le chapitre URL avec variables et navigation
N
OTICES DU MÊME AUTEUR QU
’
UNE NOTICE
Carrousel de notices du même auteur qu’une notice - Module « liste de notices »
Dans la page de l’OPAC qui affiche une notice
Auteur : Tim Burton
Formulaire pour le carrousel de notices du même auteur qu’une notice (1) – Module « Liste de notices »
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page de l’OPAC qui affiche une notice
Source de données ? 6 possibilités
Notices du même auteur principal
Sélecteur ?
Sélecteur d’une notice depuis un permalink, c’est donc basé sur l’identifiant de la notice affichée au départ dans cette page de l’OPAC
Nombre maximum d’éléments à renvoyer ?
= nombre maximum de notices à afficher
Dans le cas d’une liste ou d’un carrousel de notices, la valeur zéro a un sens « normal » : cela veut dire qu’on n’affiche aucune notice.
Il s’agit d’un carrousel dynamique, créé au moment même, en fonction des auteurs et notices disponibles dans la base.
La liste des notices à afficher peut changer de jour en jour, en fonction de l’évolution du contenu bibliographique.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 107
Formulaire pour le carrousel de notices du même auteur qu’une notice (2) – Module « Liste de notices »
Choisir une vue = comment afficher la liste ?
Vue en carrousel - Autre possibilité : vue Django (liste)
Construction du lien vers une notice
= où aller ensuite ? vers quelle page ?
Page du portail qui affiche une notice
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de la notice est ici la seule option.
.
Mode d’affichage du carrousel ?
Défilement horizontal (ou vertical ou en fondu enchaîné
Définir les autres paramètres du carrousel
Template Django à utiliser ? quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
Le template affiche la vignette prévue et le titre de la notice, et il gère aussi la navigation, car ces 2 éléments sont cliquables.
Dans ce type de module (liste de notices), la réponse à la question « Où aller ensuite ? » peut varier : on peut aller vers la page OPAC « classique » qui affiche une notice, ou bien vers la page du portail qui affiche une notice.
Toutefois, dans la démo, on choisit toujours (dans le cas d’un carrousel) d’aller vers la page du portail qui affiche une notice.
Une liste de notices ou un carrousel (notices ou articles) sont toujours bâtis sur le modèle de la boucle
{% for record in records %}
Une boucle qui va du premier au dernier enregistrement (a record), et cet enregistrement peut être un article ou une notice.
PMB pose d’office la question « Quel template de notice employer ? » dans deux cas :
Si le template Django contient la boucle {% for record in records %} ou bien s’il faut afficher une seule notice.
Toutefois, cette possibilité de recourir à un template prédéfini n’existe concrètement que si 2 conditions sont remplies :
Le cadre doit être créé à partir des modules Liste de notices (carrousel ou liste) ou Afficher une notice, mais pas à partir du
module Liste d’articles (carrousel ou liste). Choisir un template de notice pour afficher un article n’aurait d’ailleurs aucun sens !
Le template Django doit contenir « quelque part » la variable {{record.content}} (ce qui exclut par ex. le module Carrousel)
Dans ce cas-ci, la question « quel template employer ? » est sans objet, car on n’a pas employé la variable {{record.content}}
Template Django du carrousel de notices du même auteur qu’une notice
Résultat à l’écran
.
{% if records %}
<h3>Du même auteur</h3>
{% endif %}
<ul id='carousel_{{id}}'>
{% for record in records %}
<li class='{{id}}_item'>
<a href='{{record.link}}' alt="{{record.title}}" title="{{record.title}}">
<img style="max-width:120px;max-height:95px;textalign:center;" src='{{record.vign}}'/>
<br />{{record.title}}<br />
</a>
</li>
{% endfor %}
</ul>
Syntaxe des templates Django
Balises HTML
Début de la condition
{% if records %}
S’il y a des notices à afficher
On affiche le titre « Du même auteur »
Fin de la condition
{% endif %}
Début de la liste non numérotée du carrousel (<ul>
Début de la boucle :
{% for record in records %}
Permet d’afficher les vignettes des notices du carrousel
Début de la définition d’un élément de la liste (<li>)
Début de la balise <a href=" … (lien URL)
URL de destination <a href='{{record.link}} … >
On clique sur la vignette : <img src='{{record.vign}}'/>
Ou on clique sur le titre de la notice : {{record.title}}
Fin de la balise </a>
Fin de la définition de cet élément (</li>
Fin de la boucle :
{% endfor %}
Fin de la liste non numérotée (</ul>
Les instructions entre {% %}
la boucle de répétition {% for record in records %}
la condition {% if records %} {% endif %}
Les champs entre {{ }}
URL de la notice {{record.link}}
La condition
{% if records %}
est nécessaire ici
Elle signifie : s’il y a des enregistrements = notices
Inutile d’afficher le titre « Du même auteur » s’il n’y a pas de notices à afficher dans ce carrousel dynamique !
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 108
Formulaire pour le carrousel de notices du même auteur qu’une notice (3) – Module « Liste de notices »
Construction du lien vers une notice
= où aller ensuite ? vers quelle page ?
Page qui affiche une notice
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de la notice est ici la seule option.
Dans ce type de module (liste de notices), la réponse à la question « Où aller ensuite ? » peut varier : on peut aller vers la page OPAC « classique » qui affiche une notice, ou bien vers la page du portail qui affiche une notice.
Toutefois, dans la démo, on choisit toujours (dans le cas d’un carrousel) d’aller vers la page du portail qui affiche une notice.
Pour aller vers la page du portail qui affiche une notice, on choisit la page adéquate dans la liste déroulante
Pour aller directement vers la page de l’OPAC qui affiche une notice, on ne choisit aucune des pages du portail qui sont proposées
Le lien vers la page du portail se fait par une URL avec variables
Le lien vers l’OPAC se fait par le permalink de la notice
La page du portail qui affiche une notice propose (à la dernière ligne) un lien permanent (permalink) pour aller vers l’OPAC, donc
on peut ensuite voir les infos habituelles sur la notice, sur les exemplaires et leur disponibilité. Mais la route est plus longue !
N.B. Si le permalink ne s’affiche pas, vérifiez le paramétrage de l’OPAC : le paramètre permalink doit avoir la valeur 1.
Que se passe-t-il au moment où vous répondez à ces questions ?
Construction du lien ? Où aller ? vers quelle page ? Que faire dans cette page ? Comment le signaler ? Quelle variable transmettre ?
PMB sait qu’il faut aller ensuite vers la page du portail qui affiche une notice – page dont l’id est 7 est dans la démo
PMB sait qu’il faut afficher la notice correspondante, et il connaît le numéro identifiant de chaque notice
PMB peut ainsi construire une URL avec variables, une page de destination pour chaque notice, par exemple http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=7&id_notice=110
Cette URL qui a été construite de manière dynamique est enregistrée dans la variable {{record.link}} (a link = un lien)
Mais pour avoir un lien fonctionnel, il faut en outre qu’on puisse « cliquer sur quelque chose » pour accéder à la page de
destination : c’est le rôle du template qui prévoit (dans ce cas-ci) que la vignette et le titre de la notice soient cliquables.
N.B. Si nécessaire, relire le chapitre URL avec variables et navigation
Dans la démo, on a choisi d’afficher la notice dans une page du portail, mais on aurait aussi pu l’afficher dans une page de l’OPAC,
et l’URL de destination aurait correspondu au permalink : http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=notice_display&id=110
Conseils complémentaires – Listes et carrousels de notices créés de manière dynamique
Si on crée un carrousel manuellement à partir d’une étagère, le résultat final est prévisible, car on connaît dès le début
le nombre maximum d’éléments à renvoyer – c’est le contenu du panier lié à cette étagère
le nombre d’éléments par page (visibles en une fois) – on l’a fixé soi-même
le nombre d’éléments à déplacer – on l’a fixé soi-même
N.B. Veillez si possible à ce que le nombre maximum d’éléments à renvoyer soit un multiple du nombre d’éléments par page, cela
rend le mouvement plus fluide (s’il y a 3 vignettes par page, il vaut mieux un carrousel de 12 éléments plutôt que 11 ou 13). Dans le même ordre d’idées, tenez compte du nombre de vignettes par page lorsque vous déterminez le nombre d’éléments à déplacer.
Lorsqu’on crée ce genre de carrousel de manière dynamique, il faut faire particulièrement attention au paramétrage, surtout s’il s’agit d’un carrousel comme les « autres notices du même auteur », car le résultat final est aléatoire.
Si vous mettez ce genre de cadre dans la page de l’OPAC qui affiche une notice, on verra ce cadre pour toutes les notices de l’OPAC ! (sauf si l’auteur de la notice de départ n’a qu’une seule œuvre dans le catalogue)
Il faut en tout cas éviter de fixer un nombre trop élevé d’éléments à renvoyer, et privilégier l’idée de placer ce cadre
« notices du même auteur » dans une page du portail. Ainsi, il ne s’affichera que dans certains cas prévisibles.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 109
Des problèmes peuvent se poser pour un carrousel de notices si le nombre de notices du même auteur est peu élevé …
En effet, dans l’état actuel du paramétrage, si vous avez par exemple demandé d’afficher 6 vignettes, et qu’il n’y a que 6 œuvres de l’auteur dans la base, on ne peut créer que 5 vignettes différentes de celle de la notice de départ. Dans ce cas, PMB affiche 2 fois la même vignette !
N.B. Ce genre de problème (afficher plusieurs fois la même notice donc la même vignette) se pose pour les carrousels de notices, mais pas pour les listes de notices.
Ce problème ne concerne pas seulement les notices du même auteur (ce n’est qu’un exemple), on peut aussi le rencontrer pour les notices des catégories d’un article, les notices similaires …
Et aussi si le nombre de notices du même auteur est fort élevé …
Les notices affichées ne seront peut-être pas les plus intéressantes, ni les plus récentes, ni celles liées à une vignette …
Listes et carrousels de notices créés de manière dynamique ou manuelle ?
Avant de faire un choix définitif pour un modèle ou l’autre, il faut vraiment tester dans la base réelle.
Certes, il est plus rapide de créer de manière dynamique une liste ou un carrousel de notices : notices
du même auteur, dans les mêmes catégories qu’un article, dont la cote d’exemplaire est proche … Les modèles ne manquent pas.
Les notices similaires à une notice de départ sont sélectionnées sur base des champs suivants : titre propre, éditeur, indexation décimale, catégories et mots-clés libres.
Le mode de création est dynamique : à partir du moment où vous avez choisi un modèle, la liste des notices à afficher change automatiquement en fonction de l’évolution du contenu bibliographique de la base, et parfois aussi du contenu éditorial (ex. les notices des catégories d’un article).
Créer une liste ou un carrousel de manière manuelle (à partir des notices d’une étagère) prend un peu
plus de temps, car il faut créer une étagère spécifique, un panier qui lui est consacré, et remplir le panier avec des notices adéquates.
C’est un choix fixe : il faut éventuellement éditer le cadre plus tard pour changer d’étagère, et/ou modifier le contenu du (des) panier(s) qui alimente(nt) cette étagère, voire même supprimer carrément l’étagère si elle est devenue inutile.
La création manuelle offre un avantage indiscutable : celui de pouvoir vraiment sélectionner les notices à afficher.
Ex. Je reprends le cas des « notices du même auteur », des « notices similaires » ou des « notices liées aux mêmes catégories qu’un article ».
Si « vous laissez faire les choses sans intervenir », vos lecteurs risquent parfois de voir
des notices fort anciennes ou peu pertinentes – si le choix se fait dans une base bien étoffée
souvent les mêmes notices - si le choix se fait dans une base de taille réduite
Si la pertinence des résultats est à vos yeux le critère essentiel pour certains carrousels ou listes spécifiques, choisissez vous-même les notices à afficher, via le sélecteur manuel d’une étagère.
Sinon, s’il s’agit simplement d’offrir quelques suggestions de lecture complémentaire, optez sans souci pour la création dynamique de l’étagère.
De toute façon, vous pouvez avoir plusieurs carrousels ou listes de notices dans le portail, donc vous pouvez employer des modèles différents, et diversifier les critères de sélection des données.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 110
Page de l’OPAC qui affiche une notice : gestion ergonomique de l’ensemble des données
Cette page de l’OPAC est en général assez longue, car elle contient déjà beaucoup d’infos : les données de la notice et celles des exemplaires, et aussi des suggestions de lecture
(Dans le même rayon et Peut-être aimerez-vous).
Que se passe-t-il si on y ajoute les deux derniers cadres que je viens d’analyser ?
Cadre généré par le module « liste d’articles »
Articles dans les mêmes catégories qu’une notice
Cadre généré par le module « liste de notices »
Notices du même auteur qu’une notice
Ces cadres sont visibles dans la page OPAC qui affiche une notice, à la fin des cadres habituels.
La page de l’OPAC qui affiche une notice est devenue fort longue, malgré un résumé qui est ici très bref !
Si vous affichez déjà les « notices dans le même rayon » et les suggestions « Peut-être aimerez-vous », ajouter sur la même page 2 cadres supplémentaires obligerait le lecteur à scroller beaucoup avant de les atteindre, surtout si la page centrale est assez étroite et le résumé fort long.
Il n’est pas sûr que les lecteurs découvrent rapidement les « notices du même auteur » et les « articles à lire » !
Il convient dès lors de se poser quelques questions, surtout à propos du cadre « Notices du même auteur ».
Avoir à sa dispostion ce genre de module est indéniablement un atout, mais dans quelle page placer ce cadre ?
Si vous l’insérez dans la page de l’OPAC qui affiche une notice, vous risquez de créer une impression de répétition –
regardez les vignettes ci-dessus. En effet, il y a déjà 2 cadres de l’OPAC qui proposent des notices : « Dans le même rayon » et « Peut-être aimerez-vous ». Ajouter un cadre du portail comme « Du même auteur » peut encore augmenter le nombre de notices et de vignettes identiques.
Or le paramétrage est global : si vous avez décidé d’afficher ces cadres, on verra toujours ceux de l’OPAC, et parfois
aussi celui du portail (si la base contient au moins 2 notices du même auteur). Et il serait dommage de devoir renoncer en toute circonstance aux cadres de l’OPAC qui proposent des suggestions de lecture
(Dans le même rayon et Peut-être aimerez-vous).
Relativisons quand même : la démo du portail renforce ce sentiment de « déjà-vu », car elle ne contient que 68 notices, regroupées autour d’un petit nombre de thèmes majeurs
(et les films de Tim Burton en font partie, il est l’auteur de 6 notices).
Le risque statistique de retrouver la même notice à plusieurs endroits est donc forcément plus élevé dans la démo que dans une base normale ! Ce risque dépend surtout du contenu de votre base, et de la manière de paramétrer l’OPAC.
Je pense qu’il serait en général plus judicieux d’afficher les « notices du même auteur » dans la page du portail qui affiche une notice, afin de pouvoir contrôler l’apparition ou non de ce cadre.
Bien sûr, ceci n’est qu’un avis personnel, pas une règle que j’essayerais d’imposer …
Testez en tout cas dans la vraie base, n’hésitez pas à modifier votre choix initial si nécessaire.
N.B. Dans le chapitre intitulé « Exemples supplémentaires », j’expliquerai comment insérer le cadre « Notices du même auteur » dans une variante de la page du portail qui affiche une notice .
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 111
R
EQUÊTES
SQL
LIÉES AUX PANIERS ET AUX ÉTAGÈRES
Exemple de liste de paniers – Avec le numéro d’id et le nombre de notices par panier
Type de panier Id Nom du panier
Bulletins 6 Exemple de panier de bulletins
Exemplaires
Notices
8 Exemple de panier d’exemplaires
11 Exemple de panier de notices
Notices
Notices
Notices
Notices
Notices
Notices
Notices
12 Nouveautés en page d’accueil
13 Nouveautés fiction adultes
14 Nouveautés fiction jeunesse
15 Nouveautés documentaires
16 Nouveautés CD
17 Nouveautés DVD
18 Nouveautés périodiques
Nombre Commentaire Utilisateurs
0 1
0
0
1 4 3 2
1
13
9
13
20
5
5
13
1
1
1
1
1
1
1
Exemple de contenu de 2 paniers de notices – avec indication du type de notice
Id
Exemple de liste d’étagères – Avec le paramétrage pour l’OPAC
Nom de l’étagère Commentaire OPAC ? Validité
De … à
…
3 Nouveautés Invisible Permanente
4 Nouveautés fiction adultes
5 Nouveautés fiction jeunesse
6 Nouveautés documentaires
7 Nouveautés CD
Invisible
Invisible
Invisible
Invisible
Permanente
Permanente
Permanente
Permanente
8 Nouveautés DVD
9 Nouveautés périodiques
10 Test – Nouveautés – Fiction
Invisible
Invisible
Invisible
Permanente
Permanente
Permanente
Exemple de liste d’étagères – Avec le numéro d’id et le nombre de notices par panier associé
Id Nom de l’étagère Id Nom du panier Nombre
3 Nouveautés
4 Nouveautés fiction adultes
5 Nouveautés fiction jeunesse
6 Nouveautés documentaires
12 Nouveautés en page d’accueil
13 Nouveautés fiction adultes
14 Nouveautés fiction jeunesse
15 Nouveautés documentaires
13
9
13
20
7 Nouveautés CD
8 Nouveautés DVD
9 Nouveautés périodiques
10 Test – Nouveautés – Fiction
16 Nouveautés CD
17 Nouveautés DVD
18 Nouveautés périodiques
13 Nouveautés fiction adultes
13
9
5
5
13 10 Test – Nouveautés – Fiction 14 Nouveautés fiction jeunesse
N.B. Pour avoir la liste complète des procédures disponibles, voir Requêtes SQL
Utilisateurs
1
1
1
1
1
1
1
1
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 112
Analyser les pages-outils du portail
Que de chemin parcouru depuis le début …
Vous venez de voir comment fabriquer le dernier modèle de briques dont vous aviez besoin.
En effet, vous savez désormais comment configurer les cadres issus des modules !
En outre, vous avez vu toutes les instructions liées aux templates Django.
Votre « imprimante 3D » est prête à fonctionne, vous savez comment la piloter ;-)
Mais il est inutile de rêver à l’étage supérieur (la page d’accueil du portail), si vous n’avez pas érigé des fondations solides et un rez-de-chaussée dont les murs sont porteurs !
Les « murs porteurs », ce sont les pages du portail autres que la page d’accueil, celles que j’appelle les « pages-outils ».
Liste des pages du portail
Liste des pages-outils et des variables d’environnement
N.B. Il n’y a pas de variable d’environnement pour la page qui affiche une liste d’articles (le résultat d’une recherche dans le contenu éditorial).
Aussi longtemps que les pages-outils ne sont pas opérationnelles, cela ne sert à rien de mettre la plupart des cadres dans la page d’accueil du portail ou ailleurs, ils ne fonctionneront pas !!
A quoi bon mettre un carrousel ou une liste d’articles en page d’accueil si la page qui est censée afficher un article n’existe pas encore, ou bien si elle existe mais qu’on n’y a pas encore inséré un cadre issu du module « afficher un article » ?
C’est comme si le GPS du portail dysfonctionnait et envoyait systématiquement les gens dans une « voie sans issue » …
Le premier cadre à insérer est issu du « module de base », le module qui donne à chaque page-outil sa raison d’être :
Module « Rubrique » dans la page qui affiche une rubrique
le contenu de n’importe quelle rubrique (résumé, sous-rubriques et/ou articles qui en dépendent)
Module « Article » dans la page qui affiche un article et une liste de notices
le contenu de n’importe quel article (résumé et texte même de l’article)
quel que soit le type de contenu : coup de cœur, sélection, information, événement (date ou période)
Module « Notice » dans la page qui affiche une notice
le contenu de n’importe quelle notice
Module « Agenda » dans la page qui affiche une liste d’événements qui correspondent à la date sélectionnée dans l’agenda
les activités qui ont lieu à n’importe quelle date ou période - du moins si quelque chose est prévu !
Module « Liste d’articles » dans la page qui affiche les résultats d’une recherche dans le contenu éditorial
le résultat de n’importe quelle recherche (une liste d’articles) – du moins si on a trouvé quelque chose !
Les quatre premiers modules cités font d’ailleurs appel à la variable d’environnement de la page correspondante.
id_rubrique, id_article, id_notice et id_date
En outre, chaque cadre gère en général « la suite de la navigation », il stipule
où on ira ensuite
: on le détermine la plupart du temps en répondant à la question « Construction du lien vers … ? »
comment y aller
: le template Django (ou le template de notices) génère si nécessaire une URL de destination (sur base de la réponse à la question « Construction du lien vers ? », et ce template spécifie aussi ce qui est cliquable : titre, logo …
Si les pages-outils n’existaient pas, les cadres placés en page d’accueil ou sur d’autres pages ne mèneraient nulle part !
Un exemple significatif des « enchaînements » : le menu principal, qui est un cadre fixe, présent dans toutes les pages du portail.
Tel qu’il est conçu dans la démo, ce menu affiche uniquement les titres des rubriques et des sous-rubriques
Si la page qui affiche une rubrique n’existait pas ou n’était pas opérationnelle, vous auriez beau cliquer (dans le menu) sur le titre d’une rubrique ou d’une sous-rubrique, rien ne se passerait, vous n’iriez nulle part ailleurs
Si cette page qui affiche une rubrique existe et fonctionne, vous voyez les logos, titres et résumés des sous-rubriques et articles
Mais si la page qui affiche un article n’existait pas ou n’était pas opérationnelle, cela ne servirait à rien de cliquer sur le logo d’un article (dans la page qui affiche une rubrique), vous ne pourriez pas changer de page pour lire le contenu de cet article !
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 113
P
AGE DU PORTAIL QUI AFFICHE UNE RUBRIQUE
Comment accéder à la page du portail qui affiche une rubrique ?
Le « chemin habituel » part du menu principal qui présente les rubriques et sous-rubriques.
L’URL de destination contient le numéro d’id de la page (6) et la variable d’environnement liée à ce type de page : id_rubrique
Exemple : http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=6&id_rubrique=3
Comme vous le voyez, la page du portail qui affiche une rubrique peut prendre des aspects différents.
Animations est une rubrique parente sans résumé
On voit les 2 sous-rubriques qui en dépendent
Evénements n’a pas de sous-rubrique ni de résumé
On voit le titre, le logo et le résumé des articles
N.B. Dans la démo, la rubrique « Sélections » n’a pas de résumé, j’en ai « inventé » un.
Sélections est une rubrique parente avec résumé
On voit le résumé et les sous-rubriques
Voir Rédiger les rubriques et articles
La page du portail qui affiche une rubrique n’est pas une page où on verrait « quelque part » le titre d’une rubrique, un titre sur lequel on pourrait cliquer, ni une page où on afficherait une rubrique précise (et pas les autres).
c’est une page où on voit le contenu d’une rubrique, quel que soit son numéro d’id
o on « voit le contenu d’une rubrique » signifie qu’on voit
les champs de la rubrique elle-même (titre + logo + résumé)
les sous-rubriques qui en dépendent (s’il y en a)
les articles qui en dépendent (s’il y en a) o
cette page a le numéro d’id 6 dans la démo (ce numéro ne change pas) o la variable d’environnement id_rubrique transmet le numéro d’id de la rubrique à afficher (ce numéro varie)
ex. http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=6&id_rubrique=3
en théorie, ce doit être une page polyvalente où on voit une rubrique, quel que soit son type de contenu
o
mais dans la démo, il y a un seul type de contenu pour les rubriques, et ce type n’est lié à aucun champ personnalisé o donc la version originale du template Django de cette page n’est pas vraiment polyvalente, il faudra l’adapter si vous voulez créer un nouveau type de contenu pour les rubriques
Formulaire pour le module « Rubrique » cadre principal de la page qui affiche une rubrique (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page qui affiche une rubrique
Sélecteur pour la source de données ?
Sélecteur de rubrique depuis une variable
d’environnement.
L’identifiant de la rubrique (id_rubrique) est donc la seule possibilité.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 114
Formulaire pour le module « Rubrique » cadre principal de la page qui affiche une rubrique (2)
Afficher le contenu d’une rubrique, c’est montrer le titre et le résumé, et aussi les sous-rubriques et/ou articles qui en dépendent.
On pose deux fois la question « Construction du lien vers ?» :
où aller s’il s’agit d’une sous-rubrique ? où aller s’il s’agit d’un article ?
Ces deux questions ne s’excluent pas, car une rubrique peut contenir des sous-rubriques et des articles.
Construction du lien vers une rubrique
= où aller ensuite ? vers quelle page ?
Page qui affiche une rubrique
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de la rubrique est ici la seule option.
Construction du lien vers un article
= où aller ensuite ? vers quelle page ?
Page qui affiche un article
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de l’article est ici la seule option.
Template Django à utiliser ? quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
Le template gère l’affichage des sous-rubriques et articles, il gère aussi la navigation vers « ailleurs », en précisant ce qui est cliquable (titre, logo, message)
Page qui affiche une rubrique Page qui affiche un article
</div>
{% endfor %}
Template Django – Afficher le contenu d’une rubrique
<h2>{{title}}</h2>
<img style="float:left;margin-right:5px;max-height:200px;maxwidth:200px;" src='{{logo.large}}' />
<p>{{resume}}</p>
<div class="row">{{content}}</div>
<ul>
{% for child in children %}
<li><a href='{{child.link}}'>{{child.title}}</a></li>
{% endfor %}
</ul>
{% for article in articles %}
<div style="width:49%;margin-right:1%;float:left;marginbottom:5px;margin-top:5px;">
<h3>{{article.title}}</h3>
<a href='{{article.link}}' alt="{{article.title}}" title="{{article.title}}"><img style="float:left;margin-right:5px;" src='{{article.logo.vign}}' /></a>
<p>{{article.resume}}</p>
<a style="text-align:right;" href="{{article.link}}">Lire la suite...</a>
Titre de la rubrique
Logo (éventuel)
Résumé (éventuel) de la rubrique
Début de la liste non numérotée (<ul>)
Début de la boucle :
{% for child in children %}
Permet d’afficher les sous-rubriques d’une rubrique parente
Début de la définition d’un élément de la liste (<li>)
Début de la balise <a href=" … (lien URL)
URL de destination <a href='{{child.link}} … >
On clique sur le titre de la sous-rubrique : {{child.title}}
Fin de la balise </a>
Fin de la définition de cet élément (</li>
Fin de la boucle :
{% endfor %}
Fin de la liste non numérotée (</ul>)
Début de la boucle :
{% for article in articles %}
Permet d’afficher les articles d’une rubrique parente
Début de la balise <div style= …>
On affiche le titre de l’article
Début de la 1 e
balise <a href=" … (lien URL)
URL de destination <a href="{{article.link}}">
On clique sur le logo : {{article.logo.vign}}
Fin de la 1 e
balise </a>
On affiche le résumé de l’article (chapeau)
Début de la 2 e
balise <a href=" … (lien URL)
URL de destination <a href="{{article.link}}">
Ou on clique sur le texte « Lire la suite »
Fin de la 2 e
balise </a>
Fin de la balise </div>
Fin de la boucle :
{% endfor %}
Explications sur les balises HTML : voir aide-mémoire HTML
Explications sur les templates : voir aide-mémoire - templates Django
Les instructions entre {% %}
la boucle de répétition {% for child in children %}
Dans ce contexte, a child = une sous-rubrique
Les champs entre {{ }}
URL de l’article {{article.link}}
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 115
Une rubrique peut contenir des sous-rubriques et aussi des articles, le template Django en tient compte
Dans la démo, aucune rubrique ne contient à la fois des sous-rubriques et des articles, mais en soi, c’est tout à fait possible.
C’est ce que j’ai voulu illustrer en créant 3 sous-rubriques de « Evénements » :
Pour les adultes – Pour les enfants – Pour tous
La version originale du template Django gère ce genre d’éventualité : on affiche d’abord la liste des sous-rubriques, et ensuite, celle des articles.
Accéder à la page qui affiche une rubrique … et poursuivre sa route …
On peut même passer plusieurs fois par la page qui affiche une rubrique avant d’atteindre un article
Un chemin direct Un chemin un peu plus long
Point de départ
Menu principal
Clic sur Evénements
(id_rubrique = 4)
On va vers la page qui affiche une rubrique
Page une rubrique
(pageid = 6)
Clic sur un article (Burton)
(id_article = 11)
On va vers la page qui affiche un article http://...&pageid=6&id_rubrique=4 http://...&pageid=4&id_article=11
Point de départ
Menu principal
Clic sur Animations
(id_rubrique = 1)
On va vers la page qui affiche une rubrique
Page une rubrique
(pageid = 6)
Clic sur Evénements
(id_rubrique = 4)
On va vers la page qui affiche une rubrique http://...&pageid=6&id_rubrique=1 http://...&pageid=6&id_rubrique=4
Page un article
(pageid = 4)
Page qui affiche un article (vue complète)
Page une rubrique
(pageid = 6)
Clic sur un article (Burton)
(id_article = 11)
On va vers la page qui affiche un article http://...&pageid=4&id_article=11
Page un article
(pageid = 4)
Je n’avais montré qu’une « version réduite » de la page qui affiche un article. Mais le portail recèle souvent des surprises …
Si vous regardez cette page dans sa totalité, vous constatez la présence d’un carrousel de notices sur le même sujet que l’article.
Vous pouvez donc poursuivre l’exploration du catalogue …
La création automatique de ces interconnexions dépend de 2 éléments liés au cadre : la réponse à la question « Construction du lien vers … » (= où aller ensuite ?) et le template Django du cadre.
Dans le formulaire de création du cadre Dans le template associé à ce cadre : contenu de la balise <a href="
…>
La question : Construction du lien vers … ?
On a prévu ici 2 possibilités : aller vers
la page qui affiche une rubrique
la page qui affiche un article
Exemple de lien à créer : vers la page qui affiche une rubrique (id = 6)
pour afficher une sous- rubrique (id = 4)
Le template crée l’URL de destination et l’enregistre dans {{child.link}} http://...&pageid=6&id_rubrique=4
Exemple de lien à créer : vers la page qui affiche un article (id = 4)
pour afficher un article (id = 11)
Le template crée l’URL de destination et l’enregistre dans {{article.link}} http://...&pageid=4&id_article=11
Le template gère aussi la navigation entre les Le template gère aussi la navigation entre les
On ne peut pas deviner sur quoi le lecteur va cliquer (rubrique ou article), il faut donc gérer les
2 cas dans le formulaire et dans le template.
pages, puisqu’il spécifie ce qui est cliquable : ici, le titre {{child.title}}
pages, puisqu’il spécifie ce qui est cliquable : le logo {{article.logo.vign}} ou le message
« Lire la suite ».
En outre, la présence éventuelle d’un autre cadre sur la même page peut ouvrir d’autres perspectives …
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
P
AGE DU PORTAIL QUI AFFICHE UN ARTICLE ET UNE LISTE DE NOTICES
Page 116
Comment accéder à la page du portail qui affiche un article et une liste de notices ?
Le « chemin habituel » part d’une liste ou d’un carrousel d’articles, ou bien d’une recherche dans le contenu éditorial.
L’URL de destination contient le numéro d’id de la page (4) et la variable d’environnement liée à ce type de page : id_article
Exemple : http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=4&id_article=9
N.B. Le mot recherché était « cinéma »
L’aspect de cette page varie en fonction du type de contenu de l’article, et des autres cadres présents éventuellement.
En effet, cette page ne contient pas uniquement le cadre « Afficher un article », il y en a deux autres.
Module Liste de notices « Etagère associée à un article » et « Notices dans les mêmes catégories qu’un article »
Type Sélection
Ce type d’article est lié à une étagère
champ personnalisé :
etagere
.
On voit deux cadres : l’article et la liste des notices de cette étagère.
En théorie, on pourrait aussi voir le 3 e
cadre : le carrousel de notices sur le même sujet.
Ce sont les 5 types de contenu définis dans la démo.
Voir configuration préliminaire du
Type Coup de cœur
Ce type d’article est lié à une notice
champ personnalisé :
identifiant_notice
On voit 1 ou 2 cadres : l’article et (parfois) un carrousel de notices sur le même sujet.
Type Information
Ce type d’article n’est lié à aucun champ
personnalisé.
On voit 1 ou 2 cadres : l’article et (parfois)
Type Evénement à une date
Ce type d’article est lié à une date précise
champ personnalisé :
date
On voit 1 ou 2 cadres : l’article et (parfois) un carrousel de notices sur le même sujet.
Type Evénement sur une période
Ce type d’article est lié à deux dates précises :
la date de début et la date de fin de l’activité champs personnalisés : date_debut, date_fin
On voit 1 ou 2 cadres : l’article et (parfois) un
un carrousel de notices sur le même sujet. carrousel de notices sur le même sujet.
Le nom complet « page qui affiche un article et une liste de notices » se justifie souvent, mais pas dans tous les cas.
En effet, on voit toujours un article, mais pas nécessairement le contenu d’une étagère ou un carrousel de notices.
La présence de l’étagère liée à une liste de notices n’est possible que si l’article est de type Sélection, si on a enregistré le numéro d’id d’une étagère (dans le champ personnalisé lié à ce type d’article) … et si l’étagère contient des notices !
Le carrousel de notices sur le même sujet peut apparaître de manière automatique, quel que soit le type de contenu de
l’article. Sa présence éventuelle dépend des catégories communes à l’article et à certaines notices de la base. Ce carrousel est donc créé de manière dynamique, sur base des liens entre le contenu éditorial et le contenu bibliographique.
Ne confondez pas ces variables !
Leurs noms sont similaires, et les questions de départ identiques : quelle notice ? ou quelle date ?
id_notice
et
id_date
sont 2
variables d’environnement
page qui affiche une notice ou page qui affiche une liste d’événements
identifiant_notice
et
date
sont 2
champs personnalisés
types de contenu des articles : Coup de cœur ou Evénement à une date
La page du portail qui affiche un article n’est pas une page où on verrait « quelque part » le titre d’un article, un titre sur lequel on pourrait cliquer, ni une page où on afficherait un article précis (et pas les autres).
c’est une page où on voit le contenu d’un article, quel que soit son numéro d’id
o on « voit le contenu d’un article » signifie qu’on voit l’ensemble de l’article
titre + logo + résumé (chapeau) + contenu (texte de l’article) o cette page a le numéro d’id 4 dans la démo (ce numéro ne change pas) o la variable d’environnement id_article transmet le numéro d’id de l’article à afficher, ce numéro varie donc
ex. http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=4&id_article=9
dans la démo, c’est une page polyvalente où on voit un article, quel que soit son type de contenu
o les champs personnalisés de l’article transmettent d’autres paramètres liés au type de contenu de l’article :
numéro d’id de la notice (coup de cœur), numéro d’id de l’étagère (sélection), date (événement à une date),
dates de début et de fin (événement sur une période) – aucun champ personnalisé pour le type Information o même si la version originale du template Django de cette page est polyvalente (par rapport aux types de contenu qui existent dans la démo), il faudra l’adapter si vous voulez créer un nouveau type de contenu pour les articles
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 117
Formulaire pour le module « Article » cadre principal de la page qui affiche un article (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page qui affiche un article
Sélecteur pour la source de données ?
Sélecteur de rubrique depuis une variable
d’environnement.
L’identifiant de l’article (id_article) est donc la seule possibilité.
Formulaire pour le module « Article » cadre principal de la page qui affiche un article (2)
Tous les chemins mènent à Rome … c’est particulièrement vrai pour une page du portail
En effet, toutes les routes mènent à un moment ou l’autre vers la page qui affiche un article
Dans le formulaire, on ne pose pas la question
Construction du lien = où aller ensuite ? vers
quelle page ? En effet, on est arrivé « au bout du parcours » : dans la page qui affiche un article.
Toutefois, il est malgré tout possible de poursuivre sa route, d’autres voies s’ouvrent ;-)
Template Django à utiliser ? quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
Le template gère l’affichage de l’article, quel que soit son type de contenu :
coup de cœur (id d’une notice)
sélection (id d’une étagère)
événement à une date (date)
événement sur une période (dates de début et de fin de l’activité)
information (aucun champ personnalisé)
S’il s’agit d’un article « coup de cœur » lié à un identifiant de notice, le template gère aussi la navigation entre les pages, puisqu’il propose d’aller vers la page de l’OPAC qui affiche une notice.
Si vous dépliez les dossiers, vous voyez la liste des variables que vous pouvez utiliser dans les templates Django.
En cas de doute sur le sens d’une variable, déplacez le curseur : une infobulle s’affiche au survol de la souris, et vous explique la fonction de cette variable.
Exemples : les champs personnalisés liés aux types de contenu « Coup de cœur » et
« Evénement à une date précise », ainsi que les noms des variables qui désignent ces champs.
Type coup de cœur fields_type.identifiant_notice,
fields_type.identifiant_notice.id fields_type.identifiant_notice.label …
Type Evénement à une date précise fields_type.date
fields_type.date.id fields_type.date.label …
N.B. La fenêtre de visualisation est assez étroite, donc il faut souvent scroller latéralement pour voir le nom complet d’une variable.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 118
Template Django – Afficher le contenu d’un article
En fonction des types de contenu, on emploie les champs personnalisés qui y sont liés : date, date_debut, date_fin, identifiant_notice
Exemple : le champ date_debut correspond à la variable fields_type.date_debut.values.0.value dans le template Django
C’est pourquoi il vaut mieux restaurer la configuration de la démo : les templates sont ainsi immédiatement prêts à l’emploi.
Si ces champs personnalisés existaient dans votre base mais sous des noms différents, vous devriez adapter les templates !
<h3>
S’il s’agit d’un événement sur une période précise
{% if fields_type.date_debut.values.0.value %}
{% if fields_type.date_fin.values.0.value %}
Du {{fields_type.date_debut.values.0.format_value}}
au {{fields_type.date_fin.values.0.format_value}} :
{% else %}
Le {{fields_type.date_debut.values.0.format_value}} :
{% endif %}
S’il s’agit d’un événement sur une période précise
Début de la 1
e
condition
Si
le champ date_debut
a une valeur
{% if fields_type.date_debut.values.0.value %}
Début de la 2
e
condition
Si le champ date_fin a une valeur
{% if fields_type.date_fin.values.0.value %}
On affiche : Du {{date_debut}} au {{date_fin}}
Sinon {% else %} (s’il n’y a pas de date de fin)
On affiche : Le {{date_debut}}
{% endif%}
S’il s’agit d’un événement à une date précise
S’il n’y a pas de date de fin, on considère que l’événement a lieu
à une date précise (celle du début), et on modifie le message
Fin de la 2
e
condition {% endif%}
Fin de la 1
e
condition {% endif%}
{% if fields_type.date.values.0.value %}
Le {{fields_type.date.values.0.format_value}} :
S’il s’agit d’un événement à une date précise
{% endif%}
Quel que soit le type de contenu de l’article
Début de la condition
Si le champ date a une valeur
{% if fields_type.date.values.0.value %}
On affiche : Le {{date}}
{{title}}</h3>
Fin de la condition {% endif%}
<img style="float:left;margin-right:5px;max-height:200px;max-width:200px;" src='{{logo.large}}' />
<p>{{resume}}</p>
<br />
<div class="row">{{content}}</div>
<br />
S’il s’agit d’un article « Coup de cœur » (lié à une notice)
Quel que soit le type de contenu de l’article, on affiche
le titre de l’article {{title}}
le logo de l’article <img style="… " src='{{logo.large}}' />
le résumé de l’article {{resume}} (le chapeau)
le contenu de l’article {{content}} (le texte complet)
S’il s’agit d’un article « Coup de cœur » (lié à une notice)
{% if fields_type.identifiant_notice.values.0.value %}
<a href="./index.php?lvl=notice_display&id=
{{fields_type.identifiant_notice.values.0.value}}">
Voir le document dans le catalogue
Début de la condition
Si le champ identifiant_notice a une valeur
{% if fields_type.identifiant_notice.values.0.value %}
On génère une balise <a href=" …">
Le 1 er
élément est l’URL de destination (une adresse OPAC)
</a>
{% endif%}
Le 2e élément est la source = ce qui est cliquable
Fin de la condition {% endif%}
Vu la manière dont le template Django est rédigé (pour les coups de cœur), il génère une URL de destination qui est une adresse OPAC.
En fait, cette URL correspond au permalink de la notice dans l’OPAC.
Exemple : si identifiant_notice = 88 cela donne http://./index.php?lvl=notice_display&id=88
<a href="./index.php?lvl=notice_display&id={{fields_type.identifiant_notice.values.0.value}}">Voir le document dans le catalogue</a>
Le template spécifie aussi ce qui est cliquable = le texte entre les balises <a href="…."> et </a>
Rappel : l’adresse
http://./index.php?lvl=notice_display&id=88 est une adresse relative par rapport à /pmb/opac_css
elle correspond à une adresse absolue comme par exemple
http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=notice_display&id=88
Condition « simple » : si … alors …
On n’envisage qu’un seul cas :
si la condition est vérifiée
Il n’y a rien à faire dans le cas contraire
{% if %} Si la condition est vérifiée
Instruction à exécuter
{% endif %} Fin de la condition
Les conditions dans les templates Django : synthèse schématique
Condition « si … alors … sinon … »
On envisage les 2 termes de l’alternative :
On peut imbriquer 2 conditions l’une dans l’autre
si la condition est vérifiée – si elle ne l’est pas
{% if %} Si la condition est vérifiée
Instruction n° 1
{% else %} Sinon
Instruction n° 2
{% if %} Si la condition n° 1 est vérifiée
Instruction n° 1
{% if %} Si la condition n° 2 est vérifiée
Instruction n° 2
{% else %} Sinon
{% endif %} Fin de la condition
Dans ce template, il y a un exemple d’imbrication entre 2 conditions : le cas des événements qui se déroulent sur une période précise.
Instruction n° 3
{% endif %}
Fin de la condition n° 2
{% endif %} Fin de la condition n° 1
Explications complémentaires : voir aide-mémoire HTML
Explications complémentaires : voir aide-mémoire – templates Django
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 119
Accéder à la page qui affiche un article et une liste de notices … et poursuivre sa route …
Vue d’ensemble de cette page qui comprend trois cadres
» est le cadre fondamental de cette page
o il est lié à la variable d’environnement id_article o il est forcément présent en toute circonstance
Etagère associée à un article » n’est visible que
o si l’article est de type Sélection o si le champ personnalisé lié à cet article (etagere) contient une valeur qui correspond à une étagère remplie
Notices dans les mêmes catégories qu’un article
o n’est lié à aucun type de contenu d’article ; en théorie, il peut donc apparaître en toute circonstance o mais il n’est visible que s’il y a des descripteurs communs à l’article et à certaines notices de la base
Article - Type Information
http://...&pageid=4&id_article=10
Article - Type Sélection
http://...&pageid=4&id_article=13 http://...index.php?lvl=notice_display&id=80
Un seul cadre : l’affichage d’un article.
Aucun champ personnalisé n’est associé au type
de contenu Information
Cet article n’est lié à aucune catégorie, donc pas de carrousel de notices sur le même sujet.
On est donc arrivé au bout du parcours, on n’ira nulle part ailleurs.
Le type de contenu Sélection est lié à un champ personnalisé : etagere .
Cet article n’est lié à aucune catégorie, donc pas de carrousel de notices sur le même sujet.
Le template de notices qu’on associe au cadre
Etagère liée à un article prévoit 2 éléments cliquables : la vignette et le titre de la notice.
Si on clique sur la vignette ou le titre, on va vers la page OPAC qui affiche la même notice.
Le template de notices qu’on associe au cadre
Etagère liée à un article
prévoit un lien vers l’OPAC : <a href="#permalink();">, ce qui explique l’URL de destination visible ci-dessus.
Conseil – Evitez de lier un article de type Sélection aux catégories, afin de ne pas avoir 2 cadres supplémentaires : le contenu de l’étagère et le carrousel de notices sur le même sujet, d’autant plus qu’on risque vraiment d’avoir des notices communes à ces 2 cadres.
http://...&pageid=4&id_article=17
Article - Type Coup de cœur
http://...index.php?lvl=notice_display&id=88
Le type de contenu Coup de cœur est lié à un champ personnalisé : identifiant_notice .
Cet article est lié à une catégorie
(bibliothéconomie), donc on voit aussi le
carrousel de notices sur le même sujet.
Si on clique sur ce lien « Voir le document dans le
catalogue », on va vers la page OPAC qui
affiche la même notice.
C’est prévu dans le template du cadre
principal de cette page : Afficher un article.
Article - Type Evénement à une date
http://...&pageid=4&id_article=11 http://...&pageid=7&id_notice=112
Template du cadre « Afficher un article »
URL de destination pour les Coups de cœur
Contenu de la balise <a href=" …>
<a href="./index.php?lvl=notice_display&id=
{{fields_type.identifiant_notice.values.0.value}}"
>Voir le document dans le catalogue</a>
J’ai expliqué (en commentant le cemplate) que ceci générait une adresse OPAC comme http://...index.php?lvl=notice_display&id=88
Le template gère aussi la navigation entre les pages, puisqu’il spécifie ce qui est cliquable : le message « Voir le document dans le catalogue » est situé entre les balises <a href="… "> et </a>
Article - Type Evénement sur une période
http://...&pageid=4&id_article=1
Ce type de contenu est lié à un champ personnalisé : date.
Cet article est lié à une catégorie (cinéma), donc on voit aussi le carrousel de notices sur le même
sujet que l’article.
Un clic sur la 1 e
vignette (dans le carrousel mène vers la page du portail qui affiche cette notice.
Dans le
formulaire du cadre Notices dans les mêmes catégories qu’un article
,
il y a la question « Construction du lien vers ? » et on a répondu : vers la page du portail qui affiche une notice, ce qui explique l’URL de destination http://...&pageid=7&id_notice=112
Le
template de ce cadre
prévoit 2 éléments cliquables : la vignette et le titre de la notice.
Ce type de contenu est lié à 2 champs personnalisés : date_debut et date_fin .
En outre, cet article est lié à une catégorie
(Afrique), donc on voit aussi le carrousel de
notices sur le même sujet que l’article.
On pourrait donc poursuivre sa route en cliquant sur un titre ou une vignette.
En outre, si on est dans la page du portail qui affiche une notice, on peut même aller vers la page OPAC qui affiche la même notice !
En effet, à la dernière ligne de la page du portail qui affiche une notice, on suggère de cliquer sur le permalink …
Conclusion : la page qui affiche un article et une liste de notices est loin d’être une voie sans issue !!
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
P
AGE DU PORTAIL QUI AFFICHE UNE NOTICE
Page 120
Comment accéder à la page du portail qui affiche une notice ?
Le « chemin habituel » part d’un carrousel de notices.
L’URL de destination contient le numéro d’id de la page (7) et la variable d’environnement liée à ce type de page : id_notice
Exemple : http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=7&id_notice=112
Carrousel de nouveautés (accueil)
Carrousel « sur le même sujet »
Adresse : page du portail qui affiche une notice http://... &pageid=7&id_notice=112
Adresse OPAC = permalink http://...?lvl=notice_display&id=112
Le permalink propose de voir la notice dans l’OPAC
Dans la démo, la page du portail qui affiche une notice contient (à la dernière ligne) un lien vers le permalink de la notice.
Dès qu’on passe dans l’OPAC, on voit tous les champs de la notice, ainsi que les données des exemplaires liés à cette notice.
Données liées aux exemplaires : cote de rangement, numéro d’exemplaire, localisation, section, disponibilité …
Toutefois, on ne « transite » pas toujours par la page du portail qui affiche une notice.
Dans certains cas, le lien se fait directement vers la page de l’OPAC qui affiche une notice.
Comment accéder directement à la page de l’OPAC qui affiche une notice ?
Le « chemin habituel » part d’une liste de notices, ou d’un article « Coup de cœur » - dans la page qui affiche un article.
L’URL de destination correspond donc au permalink de la notice dans l’OPAC.
Exemple : http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=notice_display&id=80
Liste de nouveautés
(fiction jeunesse) http://...?lvl=notice_display&id=80
L’affichage de cette liste est géré par un template de notices qui crée un lien vers l’OPAC.
Article de type Coup de cœur http://...?lvl=notice_display&id=88
Lorsque je parle de « chemin habituel », je fais référence à la manière dont la démo est paramétrée.
Ce n’est pas un parcours obligatoire !
Vous ne devez pas nécessairement:
aller vers la page du portail qui affiche une notice
aller vers la page de l’OPAC qui affiche une notice dans le même genre de circonstances que dans la démo.
Je rappelle que le choix de la page de destination se détermine dans le cadre
précédent. Par exemple, dans le cadre qui affiche une liste ou un carrousel de notices, ou dans le cadre qui affiche un article.
Vous pouvez paramétrer autrement le chemin qui mène d’une page à l’autre.
Vous pouvez aussi modifier la mise en
Le lien propose de voir la notice dans l’OPAC forme des données dans la page du portail qui affiche une notice.
La page du portail qui affiche une notice n’est pas une page où on verrait « quelque part » le titre d’une notice, un titre sur lequel on pourrait cliquer, ni une page où on afficherait une notice précise (et pas les autres).
c’est une page où on voit le contenu d’une notice, quel que soit son numéro d’id
o
ce qu’on voit dépend du paramétrage du cadre « afficher une notice », plus précisément, du template Django
dans la démo, cette page n’affiche pas tous les champs de la notice, ni les données liées aux exemplaires
c’est pourquoi il y a un lien « permalink » afin d’accéder aisément à la version OPAC de cette page o
cette page a le numéro d’id 7 dans la démo (ce numéro ne change pas) o la variable d’environnement id_notice transmet le numéro d’id de la notice à afficher (ce numéro varie)
ex. http://127.0.0.1/pmb4perso/opac_css/index.php?lvl=cmspage&pageid=7&id_notice=88
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 121
Formulaire pour le module « Notice » cadre principal de la page qui affiche une notice (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page qui affiche une notice
Sélecteur pour la source de données ?
Sélecteur de rubrique depuis une variable
d’environnement.
L’identifiant de la notice (id_notice) est donc la seule possibilité.
Formulaire pour le module « Notice » cadre principal de la page qui affiche une notice (2)
Template Django à utiliser ? quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
Un seul template Django est disponible : l’affichage d’une notice, et il brille par sa concision : 2 lignes !
Choix du template de notice
: template par défaut.
Une liste de notices ou un carrousel (notices ou articles) sont toujours bâtis sur le modèle de la boucle
{% for record in records %}
Une boucle qui va du premier au dernier enregistrement (a record), et cet enregistrement peut être un article ou une notice.
PMB pose d’office la question « Quel template de notice employer ? » dans deux cas :
Si le template Django contient la boucle {% for record in records %} ou bien s’il faut afficher une seule notice.
Toutefois, cette possibilité de recourir à un template prédéfini n’existe concrètement que si 2 conditions sont remplies :
Le cadre doit être créé à partir des modules Liste de notices (carrousel ou liste) ou Afficher une notice, mais pas à partir du
module Liste d’articles (carrousel ou liste). Choisir un template de notice pour afficher un article n’aurait d’ailleurs aucun sens !
Le template Django doit contenir « quelque part » la variable {{record.content}} (ce qui exclut par ex. le module Carrousel)
Dans ce cas-ci, la question « quel template de notice employer ? » a un sens, car toutes les conditions sont vérifiées.
Si le template par défaut ne vous convient pas, vous pouvez créer un nouveau template de notice, ce qui vous permettra de modifier l’aspect général de la page du portail, et/ou d’augmenter le nombre de champs visibles à l’écran.
Le template qui existe déjà (Portail – Liste de notices) n’affiche en effet qu’un nombre fort réduit de champs, c’est celui qu’on avait
Notices d’une étagère associée à un article
<p>{{record.header}}</p>
<blockquote>{{record.content}}</blockquote>
{{record.header}} = l’en-tête
Template Django – Afficher le contenu d’une notice
Page de l’OPAC qui affiche une notice
Titre, auteur et date de publication.
{{record.content}}
Les données essentielles de la notice : titre, auteur,
éditeur, date de publication, collation, langues, catégories, résumé et permalink.
Page du portail qui affiche une notice – Template par défaut
Rappel : un clic sur le permalink mène vers la page de l’OPAC qui affiche la même notice.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 122
P
AGE DU PORTAIL QUI AFFICHE UNE LISTE D
’
ÉVÉNEMENTS
(
SÉLECTION D
’
UNE DATE DANS L
’
AGENDA
)
Comment accéder à la page du portail qui affiche une liste d’événements ?
Le « chemin habituel » part de l’agenda : on clique sur une date dans le calendrier, qui est affiché en page d’accueil.
Une liste d’événements est une liste d’articles dont le type de contenu est Evénement (à une date ou sur une période).
Si plusieurs événements correspondent à la date sélectionnée, on va vers la page qui affiche une liste d’événements.
L’URL de destination contient le numéro d’id de la page (9) et la variable d’environnement liée à ce type de page : id_date
Exemple : http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=9&id_date=2013-01-09
Toutefois, on ne va pas toujours vers la page qui affiche une liste d’événements.
Si un seul événement correspond à la date sélectionnée, on va directement vers la page qui affiche un article.
L’URL de destination contient le numéro d’id de la page (4) et la variable d’environnement liée à ce type de page : id_article
Exemple : http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=4&id_article=1
Pour comprendre ces captures d’écran : 2 activités ont été annoncées dans 2 articles de type Evénement
Un événement à une date précise (Lisez 5 fruits …), et un autre qui s’étale sur une période (Cultures d’Afrique …)
Date sélectionnée : 09/01/2013
2 événements à afficher
Date sélectionnée : 01/02/2013
Un seul événement à afficher
Date sélectionnée : 01/04/2013
Aucun événement à afficher
Comme vous le voyez, 3 cas de figure peuvent se présenter ensuite.
Page du portail qui affiche une liste d’événements une liste = au moins 2 !
Page du portail qui affiche l’article lié à l’unique événement concerné
Le clic sur la date n’a rien déclenché
Pas de changement de page
N.B. Si on clique sur le logo d’un événement dans cette liste, on va vers la page du portail qui affiche l’article lié à cette activité.
Formulaire pour le module « Agenda » cadre principal de la page qui affiche une liste d’événements (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page qui affiche une liste d’événements
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 123
Formulaire pour le module « Agenda » cadre principal de la page qui affiche une liste d’événements (2)
Sélecteur pour la source de données ?
Calendriers créés dans l’interface d’administration/Date.
C’est la bonne option dans ce cas-ci, car le critère de date doit déterminer quelles activités il faut afficher.
On sélectionne les 2 calendriers qui ont été définis dans
l’interface d’administration : Expo et Evénement
Sélecteur depuis une variable d’environnement.
Une seule possibilité : identifiant de date (id_date)
Page du portail page qui affiche une liste d’événements : 2 sélecteurs possibles pour la source de données
Si on choisit « Calendriers créés dans l’interface d’administration », PMB va afficher la liste de tous les articles de type
Evénement, quelle que soit la date de l’événement
Si on choisit « Calendriers créés dans l’interface d’administration / Date », PMB va afficher la liste de certains articles de
type Evénement, sélectionnés d’après la date sur laquelle on a cliqué dans l’agenda. On ne verra donc que o les articles qui correspondent aux activités à cette date (le calendrier appelé « Evénement ») o les articles qui correspondent aux activités sur une période qui inclut cette date (le calendrier appelé « Expo »)
Dans ce contexte-ci, il faut donc choisir « Calendriers créés dans l’interface d’administration / Date »
N.B. Je présente d’abord ce cadre-ci dans sa totalité, ensuite j’expliquerai comment créer un calendrier dans l’interface d’administration.
Formulaire pour le module « Agenda » cadre principal de la page qui affiche une liste d’événements (3)
Choisir une vue = comment afficher la liste ?
Vue d’une liste d’événements
Construction du lien vers un événement
= où aller ensuite ? vers quelle page ?
Page qui affiche un article et une liste de notices
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de l’article est ici la seule option.
Template Django à utiliser ? quels champs afficher ? comment gérer la mise en forme et les liens éventuels vers « ailleurs » ?
Attention ! Le mot « événement » a plusieurs significations dans ce contexte !
Un Evénement est un type de contenu d’article : événement à une date précise, ou événement qui s’étale sur un période déterminée (les autres types de contenu éditorial sont le coup de cœur,
la sélection et l’information). Voir configuration du contenu éditorial .
Une liste d’événements est une liste d’articles de type Evénement : suivant le cas,
une liste complète ou une liste sélective (sur base de la date choisie dans l’agenda).
Voir explications ci-dessus : différence entre 2 sélecteurs pour la source de données.
Le cadre Liste d’événements est généré par le module Agenda.
« Evénement » est le nom donné dans la démo à un calendrier qu’on a défini au moment de
créer l’agenda (dans l’interface d’administration)
Dans cet exemple, on a décidé d’afficher les 2 calendriers qui avaient été prévus :
Expo (événement sur une période) et Evénement (événement à une date précise).
Ces calendriers doivent être définis sur base des types de contenu des articles.
« Evénements » est aussi le nom donné dans la démo au titre d’une rubrique
Dans cet exemple, la rubrique « Evénements » contient 2 articles de type Evénement
(« Cultures d’Afrique noire contemporaine » et « Journée Tim Burton »)
, mais un autre article qui est lui aussi de type Evénement
(« Lisez 5 fruits et légumes par jour »)
dépend de la rubrique « Heure du conte »
Voir OPAC « style portail » : les exemples n° 4 (afficher une liste d’événements) et n° 5 (afficher le contenu d’une rubrique)
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 124
<div>
{% for event in events %}
<h3>
Qu’il s’agisse d’un événement à une date ou sur une période
Si le champ date de début a une valeur
{% if event.event_start.format_value %}
Si le champ date de fin a une valeur
{% if event.event_end.format_value %}
Du {{event.event_start.format_value}}
au {{event.event_end.format_value}}
{% else %}
Le {{event.event_start.format_value}}
{% endif %}
{% endif%}
: {{event.title}} N.B. Ce titre est précédé du signe de ponctuation :
</h3>
<blockquote>
<a href='{{event.link}}'><img style="float:left;margin-right:5px;" src='{{event.logo.vign}}'/></a>
<p>{{event.resume}}</p>
<br/>
<div class="row">{{event.content}}</div>
</blockquote>
<br />
{% endfor %}
</div>
Explications complémentaires : voir
Template Django – Afficher une liste d’événements
Début de la balise <div>
Début de la boucle :
{% for event in events %}
Permet d’afficher les événements prévus
on a donc une “boucle” qui va du premier au dernier événement
Qu’il s’agisse d’un événement à une date ou sur une période
Début de la 1
e
condition
Si le champ date de début a une valeur
{% if event.event_start.format_value %}
Début de la 2
e
condition
Si le champ date de fin a une valeur
{% if event.event_end.format_value %}
On affiche Du {{event.event_start.format_value}}
au {{event.event_end.format_value}}
Sinon {% else %} (s’il n’y a pas de date de fin)
On affiche : Le {{event.event_start.format_value}}
S’il n’y a pas de date de fin, on considère que l’événement a lieu
à une date précise (celle du début), et on modifie le message
Fin de la 2
e
condition {% endif%}
Fin de la 1
e
condition {% endif%}
On affiche le titre de l’article {{event.title}}
On génère une balise <a href=" …">
<a href='{{event.link}}'> Lien pour un événement
URL de destination : page du portail qui affiche un article
<img style="…" src='{{event.logo.vign}}'/>
la source = ce qui est cliquable : le logo
</a>
On affiche
le résumé de l’article {{event.resume}} (le chapeau)
le contenu de l’article {{event.content}} (le texte complet)
Fin de la boucle :
{% endfor %}
Fin de la balise </div>
Explications complémentaires : voir aide-mémoire – templates Django
Dans ce template, on a « fusionné » les 2 types d’événements dans la boucle {% for event in events %} … {% endfor %}
{{event.event_start.format_value}} reprend les valeurs du champ date (événement à une date précise) ou du champ date_debut (le début d’un événement qui s’étale sur une période)
{{event.event_end.format_value}} reprend la valeur du champ date_fin (la fin d’un événement qui s’étale sur une période)
Cela correspond d’ailleurs au paramétrage des calendriers dans l’interface d’administration.
Remarques à propos de la version d’origine de ce template : variantes pour la balise <a href='{{event.link}}'>
Version abrégée d’une partie du template d’origine
Cette balise <a href='{{event.link}}'> … </a> gère la navigation vers la page qui
affiche un article, mais on aura parfois l’impression de « déjà-vu ».
: {{event.title}}
<a href='{{event.link}}'><img style="float:left;marginright:5px;" src='{{event.logo.vign}}'/></a>
{{event.resume}}
{{event.content}}
En effet, la page qui affiche une liste d’événements montre déjà tous les champs de l’article : titre, logo, résumé et contenu. Donc, aller vers la page qui affiche un article n’apportera « un plus » que si on a lié cet article aux catégories, et qu’on voit en outre le carrousel de notices sur le même sujet. Sinon, changer de page ne sert à rien.
Variante n° 1 : ne pas afficher le contenu de l’article
Remplacer {{event.content}} par ceci
Vous pourriez peut-être remplacer la variable {{event.content}} par un lien vers l’article complet. Mais cela obligerait le lecteur à cliquer pour lire la suite, alors qu’avec le template d’origine, il dispose dès le début de toutes les infos sur l’activité
<a href='{{event.link}}'>Lire la suite … </a> qui a été organisée. A vous de juger !!
Variante n° 2 : clic possible aussi sur le titre
Adaptation conseillée aux distraits qui pourraient oublier de prévoir un logo pour ce genre d’article !
Remplacer : {{event.title}} par ceci
: <a href='{{event.link}}'>{{event.title}}</a>
Aller ailleurs, vers la page qui affiche un article ne sera pas toujours aisé !
En effet, seul le logo de l’événement est cliquable, donc si vous n’avez pas prévu de logo pour cet article, rien n’est cliquable ! Impossible d’aller ailleurs …
Par « mesure de sécurité », vous pourriez veiller à ce que le titre de l’article soit lui aussi cliquable, on ne sait jamais !
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
C
RÉER ET DÉFINIR DES CALENDRIERS DANS L
’
INTERFACE D
’
ADMINISTRATION
Page 125
Module Agenda – Etape préliminaire : création et paramétrage des calendriers
Pour accéder à l’interface d’administration d’un module spécifique, cliquez sur le nom de ce module dans le menu latéral de gauche.
Général Gestion du module – dans ce cas-ci, Agenda
Création et définition des calendriers
Vues
Gestion des templates associés à ce module
Clic sur le bouton « Général » : la 1 e
chose à faire est de créer des calendriers, sur base des types de contenu des articles.
Il faut bien sûr choisir des types de contenu liés à une ou plusieurs dates, vu que le but est de publier un agenda des activités.
Le calendrier appelé « Expo » contient la liste des événements qui s’étalent sur une période déterminée.
Puisqu’il s’agit d’un événement sur une période, il faut ensuite préciser les dates de début et de fin de l’activité : le contenu des champs personnalisés appelés date_debut et date_fin.
De toute façon, dès que vous avez sélectionné un événement sur une période, la liste des champs personnalisés que vous pourriez choisir se réduit automatiquement, vu la configuration du contenu éditorial.
Le calendrier appelé « Evénement » contient la liste des événements qui se déroulent à une date précise.
Bien qu’il s’agisse d’un événement à une date précise, on vous propose de fournir le même genre d’infos que si c’était un événement sur une période : les dates de début et de fin de l’activité.
Il suffit bien entendu de compléter le 1 er
champ, et de sélectionner le champ personnalisé appelé date.
De toute façon, dès que vous avez sélectionné un événement à une date, la liste des champs personnalisés que vous pourriez choisir se réduit automatiquement, vu la configuration du contenu éditorial.
On envisage donc les 2 types d’événements de la même manière : avec des dates de début et de fin. Ceci correspond d’ailleurs à une remarque que je venais de faire en commentant le template de la page qui affiche une liste d’événements.
On a « fusionné » les 2 types d’événements dans la boucle {% for event in events %} … {% endfor %}
{{event.event_start.format_value}} reprend les valeurs du champ date (événement à une date précise) ou du champ date_debut (le début d’un événement qui s’étale sur une période)
{{event.event_end.format_value}} reprend la valeur du champ date_fin (la fin d’un événement qui s’étale sur une période)
Gestion des couleurs affectées aux calendriers
Chaque calendrier est associé à une couleur, que vous pouvez choisir (en fonction de votre charte graphique).
Par convention, en HTML, les codes des couleurs sont indiqués en format hexadécimal (en base 16).
Ces codes commencent par le symbole # et 16 caractères sont utilisables : les chiffres de 0 à 9 et les lettres des A à F
(obligatoirement en majuscules).
De nombreux sites vous aident à déterminer quel code il faut employer, par exemple http://html-color-codes.info/Codes-couleur-HTML/
Vous pouvez travailler « dans les deux sens » :
Pour connaître le code HTML d’une couleur, il suffit de cliquer sur celle-ci dans une palette de couleurs
Pour savoir à quelle couleur un code HTML correspond, il suffit d’introduire ce code dans un champ de saisie
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 126
A
GENDA
:
CALENDRIER EN PAGE D
’
ACCUEIL
Vous venez de franchir les 2 étapes préliminaires :
Vous avez configuré la page qui affiche une liste d’événements : elle contient un cadre issu du module Agenda
Vous avez créé et paramétré 2 « calendriers » dans l’interface d’administration : « Expo » et « Evénement »
Vous pouvez employer à nouveau le module Agenda, mais cette fois-ci, pour afficher un calendrier en page d’accueil.
Le module « Agenda » a généré le cadre « agenda » : le calendrier visible en page d’accueil.
Date sélectionnée : 09/01/2013
2 événements à afficher
Date sélectionnée : 01/02/2013
Un seul événement à afficher
Formulaire pour le cadre « Agenda » : vue en calendrier (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page d’accueil
Formulaire pour le cadre « Agenda » : vue en calendrier (2)
Date sélectionnée : 01/04/2013
Aucun événement à afficher
Sélecteur pour la source de données ?
Calendriers créés dans l’interface d’administration.
C’est la bonne option dans ce cas-ci, car le critère de date ne peut pas avoir d’impact sur les événements à afficher.
On doit voir, mois par mois, toutes les activités qui ont été annoncées dans des articles de type Evénement.
On sélectionne les 2 calendriers qui ont été définis dans
l’interface d’administration : Expo et Evénement
Pour la page du portail qui affiche une liste d’événements, il faut choisir Calendriers créés dans l’interface d’administration / Date
On obtient la liste de certains articles de type Evénement, sélectionnés d’après la date sur laquelle on a cliqué dans l’agenda.
L’option « Date » agit comme un filtre, on ne verra donc que
les articles qui correspondent aux activités à cette date (le calendrier appelé « Evénement »)
les articles qui correspondent aux activités sur une période qui inclut cette date (le calendrier appelé « Expo »)
Il faut donc une URL avec variable de date pour appeler la page qui affiche une liste d’événements et obtenir une liste sélective.
Exemple : http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=9&id_date=2013-01-09
Attention au paramétrage et aux URL
Si on appelle cette page en spécifiant seulement son numéro identifiant, mais sans transmettre le paramètre de date
Exemple : http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=9
Ou si appelle cette page en transmettant son numéro identifiant et le paramètre de date, mais en ayant mal configuré le sélecteur
Exemple : choisir « Calendriers créés dans l’interface d’administration » (donc sans l’option Date)
Dans un cas comme dans l’autre, on verra la liste de toutes les activités annoncées dans des articles, au lieu d’une liste sélective.
Pour l’agenda (vue en calendrier), il faut choisir Calendriers créés dans l’interface d’administration (sans l’option Date)
En effet, le calendrier doit permettre de repérer, mois par mois, toutes les dates qui correspondent à des activités annoncées dans des articles de type Evénement :
o une couleur pour les activités à une date précise (c’est le calendrier appelé « Evénement ») o une autre couleur pour les activités sur une période (c’est le calendrier appelé « Expo »)
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 127
Formulaire pour le cadre « Agenda » : vue en calendrier (3)
On pose deux fois la question « Construction du lien vers ? » :
où aller s’il y a un seul événement ? où aller s’il y a plusieurs événements ?
Vue ? Nombre d’événements à afficher ?
Vue en calendrier – 2 événements
Construction du lien vers un seul événement
= où aller ensuite ? vers quelle page ?
Page qui affiche un article et une liste de notices
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de l’article ici la seule option.
Construction du lien vers plusieurs événements
= où aller ensuite ? vers quelle page ?
Page qui affiche une liste d’événements
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de date est ici la seule option.
N.B.
Les deux questions « Construction du lien vers ? » ne s’excluent pas, car le cadre doit être polyvalent, et traiter les deux cas possibles.
Vous pouvez cliquer sur n’importe quelle date visible dans l’agenda (en page d’accueil)
La page du portail qui affiche une liste d’événements est une page où on voit une série d’événements quelle que soit la date choisie … mais à condition qu’il y ait des articles de type Evénement pour annoncer les activités !!
Attention ! On ne va pas nécessairement vers la page qui affiche une liste d’événements !
En effet, la date sélectionnée dans l’agenda peut être liée à zéro, une ou à plusieurs activités qui se déroulent précisément à la date choisie, ou qui s’étalent sur une période qui englobe la date choisie.
Si
aucun événement
n’est prévu pour cette date, rien ne se passe !
On reste dans la page où on voit le calendrier : la page d’accueil, dans ce cas-ci.
Si
un seul événement
est prévu, on va directement
vers la page qui affiche un article
Dans la démo, la page qui affiche un article a le numéro d’id 4 (ce numéro ne change pas)
la variable d’environnement id_article transmet le numéro d’id de l’article à afficher (ce numéro varie donc)
Exemple pour l’article « Cultures d’Afrique noire contemporaine »
http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=4&id_article=1
Ensuite, si on clique sur une vignette (dans le carrousel), on va vers la page qui affiche une notice.
Ex. http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=7&id_notice=70
Si plusieurs événements sont prévus, on va vers la page qui affiche une liste d’événements
Une liste d’événements comporte au minimum deux événements !
Dans la démo, la page qui affiche une liste d’événements a le numéro d’id 9 (ce numéro ne change pas)
la variable d’environnement id_date transmet la date sélectionnée (cette date varie donc)
http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=9&id_date=2013-01-09
Rappel : le cadre principal de cette page est créé à partir du module agenda
Ensuite, si on clique sur le logo d’un événement, on va vers la page qui affiche l’article adéquat.
Exemple pour l’article « Lisez 5 fruits et légumes par jour »
http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=4&id_article=2
Les dates des événements ne sont pas le seul critère qui détermine l’affichage ou non de tel ou tel article de type Evénement !
Le statut de publication d’un article et ses dates de publication ont aussi un impact filtrant !
Voir configuration du contenu éditorial
Vous ne voyez donc pas tous les articles, seulement ceux dont le statut est « publié » et dont les dates de publication sont valides.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 128
P
AGE DU PORTAIL QUI AFFICHE UNE LISTE D
’
ARTICLES
(
LE RÉSULTAT D
’
UNE RECHERCHE DANS LE CONTENU ÉDITORIAL
)
Comment accéder à la page qui affiche le résultat d’une recherche ?
Le « chemin habituel » part de la barre de recherche (visible dans la zone introduction).
Ce champ de saisie offre 2 possibilités : recherche dans le catalogue ou recherche dans le contenu éditorial.
Si on effectue une recherche dans les articles, on va vers la page du portail qui affiche une liste d’articles (résultat de recherche)
L’URL de destination contient seulement le numéro d’id de cette page (11) qui n’est liée à aucune variable d’environnement
Exemple : http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=11
Toutefois, on ne va pas toujours vers la page du portail qui affiche une liste d’articles (résultat de recherche).
Si on effectue une recherche dans le catalogue, on va vers la page de l’OPAC qui affiche le résultat d’une recherche
L’URL de destination correspond donc à une adresse de type OPAC
Exemple : http://127.0.0.1/pmbv4perso2/opac_css/index.php?lvl=more_results
Recherche dans le contenu éditorial Recherche dans le catalogue
Formulaire pour le module « Liste d’articles » cadre principal de la page qui affiche un résultat (1)
Il s’agit du résultat d’une recherche dans le contenu éditorial
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Mode de mise en cache ?
Conditions d’affichage ?
Dans quelle page afficher le cadre ?
Page qui affiche une liste d’articles (résultat)
Source de données ?
Recherche simple dans les articles
Critère et ordre de tri ?
Par pertinence – ordre décroissant
Nombre maximum d’éléments à renvoyer ?
= nombre maximum d’articles à afficher
Dans le cas d’une liste ou d’un carrousel d’articles, la valeur zéro affiche tous les
articles qui répondent au critère de sélection.
Choix de la source de données Choix du critère de tri
.
Il s’agit ici d’une liste dynamique, créée au moment même, en fonction de ce qu’on a pu trouver dans les articles.
La liste des articles à afficher peut changer de jour en jour, en fonction de l’évolution du contenu éditorial.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 129
Formulaire pour le module « Liste d’articles » cadre principal de la page qui affiche un résultat (2)
Il s’agit du résultat d’une recherche dans le contenu éditorial
Filtre
Aucun filtre sélectionné
Choisir une vue = comment afficher la liste ?
Liste d’articles – template Django avec lien
Autre possibilité : Vue en carrousel
Construction du lien vers un article
= où aller ensuite ? vers quelle page ?
Page qui affiche un article et une liste de notices
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de l’article est ici la seule option.
Template Django
Rappels : si vous dépliez les dossiers, vous pouvez voir la liste des variables utilisables dans le template.
En outre, une infobulle (affichée au survol de la souris) vous explique la fonction de chaque variable.
Un cadre issu du module « Liste d’articles » mène toujours vers la page qui affiche un article et une liste de notices.
Je rappelle que c’est une page multifonctions, conçue pour afficher tous les types de contenu d’articles de la démo.
Template Django – Afficher une liste d’articles : résultat d’une recherche dans le contenu éditorial
<h3>Résultat de la recherche</h3>
{% if articles %}
{% for article in articles %}
<div style="width:49%;margin-right:1%;float:left;margin-bottom:5px;margintop:5px;">
<h3>{{article.title}}</h3>
<a href='{{article.link}}' alt='{{article.title}}' title="{{article.title}}"><img style="float:left;margin-right:5px;" src='{{article.logo.vign}}' /></a>
<p>{{article.resume}}</p>
<a style="text-align:right;" href="{{article.link}}">Lire la suite...</a>
</div>
{% endfor %}
<div class="row"></div>
{% else %}
<br />
Pas de résultats
<br />
<a href="./index.php?search_type_asked=simple_search">>> Rechercher dans le catalogue</a>
{% endif %}
Explications complémentaires : voir aide-mémoire HTML
Titre : Résultat de la recherche
Début de la condition {% if articles %}
Si la recherche a donné des résultats, s’il y a des articles à afficher
Début de la boucle :
{% for article in articles %}
Permet d’afficher les articles adéquats
on a donc une “boucle” qui va du premier au dernier article
On affiche le titre de l’article {{article.title}}
On génère une balise <a href=" …"> …. </a>
<a href='{{article.link}}'> Lien pour un article
URL de destination : page du portail qui affiche un article
<img style="…" src='{{article.logo.vign}}'/>
la source = ce qui est cliquable : le logo
On affiche le résumé de l’article {{article.tresume}}
On génère une balise <a href=" …"> …. </a>
<a href='{{article.link}}'> Lien pour un article
URL de destination : page du portail qui affiche un article
la source = ce qui est cliquable : le message « Lire la suite »
Fin de la boucle
{% endfor %}
Sinon
{% else %}
On affiche le message « Pas de résultats »
On affiche un lien une recherche simple dans le catalogue
Fin de la condition :
{% endif %}
Explications complémentaires : voir aide-mémoire – templates Django
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 130
C
ONFIGURER LA RECHERCHE DANS L
’
INTERFACE D
’
ADMINISTRATION
Module Recherche – Etape préliminaire : configuration de la recherche
Pour accéder à l’interface d’administration d’un module spécifique, cliquez sur le nom de ce module dans le menu latéral de gauche.
Général Gestion du module – dans ce cas-ci, Recherche
Paramétrage de la recherche
Choix des pages de destination
Recherche dans le catalogue
Donner un nom à ce type de recherche
Choisir la page de destination : la page de l’OPAC qui affiche le résultat d’une recherche dans le catalogue
Recherche dans les articles
Donner un nom à ce type de recherche
Choisir la page de destination : la page du portail qui affiche une liste d’articles = le résultat d’une recherche dans les articles
C’est fini, vous venez de configurer le module recherche !
Particularité de ce module : la question « Construction du lien vers … ? » n’est pas posée dans un cadre issu de ce module.
C’est dans l’interface d’administration que vous déterminez les pages de destination (OPAC et portail).
I
NSÉRER UN CADRE
«
BARRE DE RECHERCHE
» (
MODULE RECHERCHE
)
Vous venez de franchir les 2 étapes préliminaires :
Vous avez configuré la page qui affiche le résultat d’une recherche dans le contenu éditorial : elle contient un cadre issu du module Liste d’articles
Vous avez configuré les 2 aspects de la recherche dans l’interface d’administration (recherche dans le catalogue et recherche dans le contenu éditorial), et déterminé la page de destination dans chaque cas.
Vous pouvez enfin employer le module Recherche pour insérer une barre de recherche dans la zone Introduction.
Le module « Recherche » a généré le cadre « Barre de recherche », visible dans la zone Introduction
Recherche dans les articles Recherche dans le catalogue
Formulaire pour le cadre « Barre de recherche simple » - Module Recherche
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Un cadre fixe !! Dans la zone Introduction
Mode de mise en cache ?
Conditions d’affichage ?
Typos possibles de recherche ?
Sélectionner les 2 types de recherche prédéfinis :
dans le catalogue – dans les articles
Afficher le bouton d’aide ?
Titre du cadre de recherche ?
Afficher le lien de recherche avancée ?
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 131
Accéder aux résultats de recherche … et poursuivre sa route …
Recherche dans le contenu éditorial Recherche dans le catalogue
Clic sur un article page qui affiche un article http://.../ opac_css/index.php?lvl=cmspage&pageid=4&id_article=2
On peut déplier une notice
Clic sur une vignette (carrousel) page qui affiche une notice http://.../opac_css/index.php?lvl=cmspage&pageid=7&id_notice=101
On peut aussi découvrir d’autres voies à explorer …
Vous pouvez effectuer une recherche dans le contenu éditorial, si la barre de recherche a été configurée en ce sens
La question « Construction du lien vers ? » n’est pas posée dans le formulaire de création de ce cadre.
C’est dans l’interface d’administration que vous sélectionnez la page du portail qui affiche le résultat d’une recherche.
C’est une page où on voit la liste des articles qui répondent au critère de recherche.
Dans la démo, la page qui affiche le résultat d’une recherche dans les articles a le numéro d’id 11 (ce numéro ne change pas)
Il n’y aucune variable d’environnement liée à cette page
http://127.0.0.1/pmbv4perso/opac_css/index.php?lvl=cmspage&pageid=11
Si un ou plusieurs articles contiennent le(s) mot(s) recherché(s), on voit le titre et le résumé de cet article (ou de ces articles)
Un clic sur un de ces articles mène vers la page qui affiche un article.
Sinon, on voit le message « Pas de résultats » et on propose d’effectuer une recherche dans le catalogue.
Le mot recherché dans le contenu éditorial n’est pas le seul critère qui détermine l’affichage ou non de tel ou tel article !
Le statut de publication d’un article et ses dates de publication ont aussi un impact filtrant !
Voir configuration du contenu éditorial
Vous ne voyez donc pas tous les articles, seulement ceux dont le statut est « publié » et dont les dates de publication sont valides.
Vous pouvez effectuer une recherche dans le contenu bibliographique, si la barre de recherche a été configurée en ce sens
La question « Construction du lien vers ? » n’est pas posée dans le formulaire de création de ce cadre.
C’est dans l’interface d’administration que vous sélectionnez la page de l’OPAC qui affiche le résultat d’une recherche.
C’est une page où on voit la liste des notices qui répondent au critère de recherche.
La page qui affiche le résultat d’une recherche dans les notices correspond forcément à une adresse de type OPAC
http://127.0.0.1/pmbv4perso2/opac_css/index.php?lvl=more_results
Si une ou plusieurs notices contiennent le(s) mot(s) recherché(s), on voit la liste des notices, qu’on peut déplier si nécessaire.
Un clic sur le permalink d’une notice mène vers la page de l’OPAC qui affiche cette notice dans son intégralité.
Sinon, on propose de faire une suggestion d’achat, ou bien d’interroger des sources externes.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 132
Menu basé sur le contenu éditorial
Il y a deux manières de créer un menu :
Se baser sur une partie de l’arbre du contenu éditorial (certaines rubriques)
Construire ce menu dans l’interface d’administration
Je traite ici la 1 e
méthode : un menu basé sur le contenu éditorial.
C’est la méthode employée dans la démo, et en outre, c’est le système le plus simple à mettre en œuvre au début.
Formulaire pour le cadre « Menu » - Module Menu (1)
Nom précis donné au cadre ?
Fixe (toutes les pages) ou attaché à une page ?
Un cadre fixe !! Dans la zone Introduction
Mode de mise en cache ?
Conditions d’affichage ?
Source de données ?
Menu basé sur du contenu éditorial (Rubriques)
Sélecteur pour la source de données ?
Sélection manuelle d’une rubrique racine
La rubrique racine sera le « Menu principal ».
Profondeur maximale du menu ?
3
Construction du lien vers une rubrique
= où aller ensuite ? vers quelle page ?
Page qui affiche une rubrique
Que faire dans cette page ? Comment le signaler ?
= quelle variable transmettre ?
L’identifiant de la rubrique est ici la seule option.
Quelle vue ?
Vue générique
Source de données ?
Formulaire pour le cadre « Menu » - Module Menu (2)
N.B. Je reprends les questions les plus importantes, et je commente les réponses possibles
Menu basé sur du contenu éditorial (Rubriques)
Créer un menu dans l’interface d’administration offre plus de souplesse, mais est plus complexe.
Sélecteur pour la source de données ?
Sélection manuelle d’une rubrique racine
Quelle rubrique racine ?
Menu principal rubriques Animations, Sélections et Infos pratiques
Une « rubrique racine » est le parent d’au moins une autre rubrique, et
éventuellement de sous-rubriques d’où le terme « rubrique racine »
En outre, elle peut aussi être éventuellement l’enfant d’une autre
rubrique c’est une question de point de vue, c’est relatif !
La «
racine de l’arbre du contenu éditorial
» est la seule rubrique qui
n’a pas de parent, mais qui est le parent de toutes les autres
c’est une vérité générale.
Attention à la gestion de l’arbre du contenu éditorial
La position que les rubriques occupent par rapport à leur rubrique
racine (ici, le « Menu principal »), et la position que les articles occupent
dans une rubrique déterminent l’ordre d’affichage dans le menu et dans la page qui affiche le contenu d’une rubrique. C’est pourquoi j’avais expliqué en détail comment déplacer si nécessaire les rubriques et articles.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 133
Formulaire pour le cadre « Menu » - Module Menu (3)
N.B. Je reprends les questions les plus importantes, et je commente les réponses possibles
Profondeur maximale du menu ?
2 niveaux suffisent en théorie pour la démo.
On peut prévoir un 3 e
niveau « en réserve » (si on ajoute un niveau de sous-rubriques).
Exemple : j’ai créé 3 sous-rubriques qui dépendent de « Evénements » :
Pour les adultes – Pour les enfants – Pour tous
Construction du lien vers une rubrique = où aller ensuite ? vers quelle page ?
Page qui affiche une rubrique
Vu qu’on a choisi le menu basé sur le contenu éditorial (rubriques), c’est la seule page de
destination possible !
Que faire dans cette page ? Comment le signaler ? = quelle variable transmettre ?
L’identifiant de la rubrique est ici la seule option.
Quelle vue ?
Vue générique
Il est plus facile d’adapter la profondeur maximale du menu si on a choisi la vue générique
(il suffit de changer la valeur). Dans le cas de la vue Django, il faut adapter le template.
A partir du menu principal, accéder aux rubriques, ensuite aux articles … et poursuivre sa route …
Une rubrique qui n’est le parent d’aucune autre rubrique
Une rubrique qui est le parent de 2 autres rubriques
Page une rubrique
(pageid = 6)
Rubrique Evénements
Id_rubrique = 4 http://...&pageid=6&id_rubrique=4
Page une rubrique
(pageid = 6)
Rubrique Animations
Id_rubrique = 1 http://...&pageid=6&id_rubrique=1
Page une rubrique
(pageid = 6)
Rubrique Evénements
Id_rubrique = 4 http://...&pageid=6&id_rubrique=4
Page un article
(pageid = 4)
Article Tim Burton id_article = 11
Le carrousel de notices sur le même sujet que l’article vous ouvre d’autres perspectives.
Vous pouvez donc poursuivre l’exploration du catalogue … http://...&pageid=4&id_article=11
Ex. Si une rubrique n’apparaît pas dans le menu, vérifiez son statut et ses dates de publication : ils pourraient expliquer son invisibilité !
Ce n’est pas parce qu’une rubrique ou un article ont le statut « Publié – Visible par tous » qu’on les voit automatiquement !
Or, vous n’allez sûrement pas créer un nombre anormalement élevé de carrousels ou de listes, afin d’être sûr que les rubriques et articles soient tous accessibles d’une manière ou d’une autre.
En outre, il faut faciliter la navigation du lecteur, lui fournir un menu bien structuré, dont les titres et sous-titres sont explicites.
Un menu est un système efficace de liens logiques vers les rubriques et articles, un GPS pour orienter le lecteur
Insérer un menu dans la zone Introduction - il s’agit ici d’un menu basé sur le contenu éditorial (les rubriques)
Organiser (à partir d’une rubrique racine visible) une arborescence cohérente de rubriques visibles
Mettre les articles visibles dans des rubriques parentes visibles qui dépendent de la rubrique racine qu’on a choisie
C’est ainsi que le lecteur pourra naviguer dans votre portail sans risquer de se perdre, et en ayant le maximum de chances de trouver ce qu’il était venu chercher … et de découvrir en même temps d’autres aspects du catalogue ou les activités que vous organisez régulièrement;-)
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 134
Analyser la page d’accueil du portail
En introduisant un des chapitres précédents, j’avais dit qu’il était inutile de rêver à l’étage supérieur (le portail), aussi longtemps qu’on n’avait pas érigé des fondations solides et un rez-de-chaussée dont les murs sont porteurs : les pages-outils.
Mission accomplie : vous avez construit les « murs porteurs ».
Chaque page-outil contient désormais un cadre issu du module fondamental qui lui est associé.
Vous pouvez enfin passer à la dernière étape : insérer des cadres dans la page d’accueil ou ailleurs ...
Liste de quelques modules et cadres du portail visibles dans la page d’accueil – dans les zones introduction et page centrale
En noir (police standard) : le nom du cadre
Menu
Menu
Carrousel d’articles (accueil)
Liste d’articles
Liste d'articles - sélections (accueil)
Liste d’articles
Liste de brèves (accueil)
Liste d’articles
En rouge et en italiques : le nom du module
Barre de recherche simple
Recherche
Agenda (accueil)
Agenda
Carrousel de notices (nouveautés - accueil)
Liste de notices
Je n’ai pas l’intention d’analyser à nouveau ces cadres, mais je voudrais insister sur la chronologie des actions.
Pour tous ces cadres, vous déterminez où il faut aller ensuite, en répondant à la question « Construction du lien vers ... ? »
Cette question est posée en général au moment de créer un cadre, sauf pour la barre de recherche simple.
Mais si la page de destination n’existe pas encore, vous ne pouvez forcément pas la sélectionner dans la liste déroulante ...
Par conséquent, il faut créer et configurer les 5 pages-outils indispensables avant d’insérer ces cadres dans une page !
Dans le cas contraire, vous devriez éditer à nouveau ces cadres plus tard, afin de configurer le « lien vers » !
Menu basé sur le contenu éditorial
page qui affiche une rubrique
Agenda page qui affiche un article et une liste de notices
page qui affiche une liste d’événements
Carrousel d’articles d’actualité
page qui affiche un article et une liste de notices
Liste d’articles – Sélections
page qui affiche un article et une liste de notices
Barre de recherche simple
page qui affiche une liste d’articles (résultat d’une recherche)
Page de destination : question posée dans l’interface d’administration
Carrousel de notices – Nouveautés
page qui affiche une notice
En outre, ces cadres contiennent un template Django ou un template de notices afin de gérer la navigation, la « suite du parcours ».
Mais si ce template ne crée pas d’URL de destination (sur base de la réponse à la question « où aller ensuite ? »), si ce template ne spécifie pas ce qui est cliquable (texte et/ou image), on n’a aucune possibilité concrète de changer de page !
C’est d’ailleurs le cas pour les Brèves. En théorie, on pourrait aller vers la page qui affiche un article et une liste de notices.
En effet, le formulaire de ce cadre contient la même réponse à la question « Lien vers ? » que la Liste d’articles – Sélections.
Mais le template Django de ce cadre ne crée pas d’URL de destination ni d’élément cliquable, donc on ne peut pas aller ailleurs !
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 135
Il est techniquement impossible de paramétrer correctement ces cadres si on n’a pas d’abord fait une série d’actions :
Configurer le contenu éditorial : créer divers types d’articles et des champs personnalisés pour transmettre des valeurs
o
Ex. Sans le champ personnalisé etagere, impossible de lier un article de type Sélection à une étagère !
Créer la page-outil vers laquelle on ira ensuite
o
Si la page-outil dont on a besoin n’existe pas, elle n’apparaît forcément pas dans la liste déroulante, parmi les réponses possibles à la question « construction du lien vers … ? », donc on ne peut pas la sélectionner !
Lier cette page-outil à une variable d’environnement – Du moins si elle est censée avoir une variable d’environnement !
o Si la variable d’environnement (id_rubrique, id_article, id_notice ou id_date) n’existe pas, on ne peut pas transmettre à la page suivante le numéro d’id de la rubrique, de l’article … à afficher o
Il n’y a pas de variable d’environnement pour la page qui affiche le résultat d’une recherche dans le contenu éditorial
Insérer dans chaque page-outil un cadre issu du module fondamental lié à cette page
o
Ex. si la page qui est censée afficher un article ne contient pas un cadre issu du module « Article », PMB peut aller vers cette page (car elle existe), mais PMB ne peut rien faire, rien afficher, faute de cadre adéquat !
En résumé
Si les pages-outils n’existaient pas, si elles ne contenaient pas le cadre fondamental lié à leur fonction, s’il n’y avait pas des variables d’environnement et des champs personnalisés pour transmettre des paramètres, si les templates Django ne créaient pas des URL de destination et ne spécifiaient pas ce qui est cliquable, il serait inutile d’insérer des cadres en page d’accueil, soit on n’irait nulle part ailleurs, soit on irait quelque part mais on ne pourrait rien y faire !
C’est pourquoi je vous ai présenté le contenu éditorial, les modules, les cadres et les pages-outils avant de voir les choses sous un autre angle : à partir de la page d’accueil. Il faut respecter la chronologie des actions à exécuter.
Interconnexion entre ces cadres visibles en page d’accueil et les pages-outils du portail
Rappel
Il n’y a pas de variable d’environnement liée à la page qui affiche une liste d’articles (le résultat d’une recherche dans le contenu éditorial).
Menu
Cadres
On ne va jamais « spontanément » vers une page, quelle qu’elle soit
C’est dans chaque cadre qu’on construit le lien vers « la suite du parcours ».
Variable d’environnement
Pages de destination
(Le menu de la démo n’affiche que des titres de rubriques)
id_rubrique
Page qui affiche une rubrique
Clic sur un titre de rubrique
Carrousel d’articles (accueil)
Clic sur un article du carrousel
Liste d’articles - Sélections (étagères)
Clic sur un article de la liste
id_article
Si on clique sur une sous-rubrique page qui affiche une rubrique
Si on clique sur un article page qui affiche un article
Page qui affiche un article
L’aspect varie en fonction du type de
contenu de l’article (ce paramètre est
Coup de cœur :
identifiant_notice
Sélection :
etagere
Evénement (date précise) :
date
transmis par un champ personnalisé)
Evénement (période) :
date_debut, date_fin
Information : pas de champ personnalisé
Liste de brèves – pas de clic possible Pas de lien Aucune page de destination prévue dans le template de ce cadre
Barre de recherche dans les articles
Si on effectue une recherche
Pas de variable
Page qui affiche une liste d’articles : le résultat d’une recherche
Si on clique sur un article de la liste page qui affiche un article
Agenda (calendrier : choix d’une date)
S’il y a un seul événement
S’il y a plusieurs événements
Carrousel de notices (nouveautés)
Clic sur une notice du carrousel
id_article id_date id_notice
Page qui affiche un article
Page qui affiche une liste d’événements (module agenda)
Si on clique sur un événement de la liste page qui affiche un article
Page du portail qui affiche une notice
Si on clique sur le permalink page de l’OPAC qui affiche une notice
Ces variables se ressemblent : leurs noms sont similaires, et les questions de départ identiques : quelle notice ? ou quelle date ?
Mais elles n’ont pas la même fonction, ne les confondez pas !
id_notice
et
id_date
sont 2
variables d’environnement
page qui affiche une notice ou page qui affiche une liste d’événements
identifiant_notice
et
date
sont 2
champs personnalisés
types de contenu des articles : Coup de cœur ou Evénement à une date
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 136
Templates Django
– Synthèse
Dans ce chapitre consacré aux modules et cadres, j’ai parlé à de nombreuses reprises des templates Django. J’ai essayé d’y aller « à petits pas », de passer progressivement du plus simple au plus complexe. Le moment est venu d’en faire une synthèse.
Un template Django est un script créé à l’aide d’un langage de programmation appelé Django H2O.
Ce template remplit de multiples fonctions :
o
Déterminer quelles données il faut afficher
o tout l’article ou seulement le titre et le chapeau (le champ résumé) ? o toute la notice ou seulement certains champs ? o on dispose en effet de variables pour identifier les données bibliographiques ou éditoriales
Gérer la mise en forme de ces données
o
Spécifier la police de caractères, la taille des images … grâce aux balises HTML
Définir une structure générale, un algorithme
o
Créer des boucles pour gérer les répétitions
Ex. afficher toutes les notices d’une étagère ou afficher tous les articles d’une rubrique o
Formuler des conditions
Ex. Si on a trouvé des articles qui répondent au critère de recherche, on les affiche
Sinon, on voit le message « Aucun résultat »
Gérer la navigation entre les pages, indiquer vers quelle page on ira ensuite
o
Générer une balise <a href= …>
l’URL de destination est créée sur base de la réponse à la question « Construction du vers … ? »
le script spécifie aussi quels éléments sont cliquables (ex. titre, logo)
G
ESTION DES TEMPLATES DANS L
’
INTERFACE D
’
ADMINISTRATION
Jusqu’à présent, je vous ai toujours présenté chaque template Django en même temps que le cadre auquel il est associé.
Mais les templates se gèrent aussi ailleurs, dans
l’interface d’administration des modules
Rappel : si on clique sur le nom d’un module (dans la colonne de gauche), on voit 0, 1 ou 2 boutons :
Général : configuration du module
Vues : gestion des templates Django
Exemple : module Liste d’articles - Templates Django avec lien
Comment lire aisément un template Django dans son intégralité
Cette astuce fonctionne aussi bien pour les cadres que dans l’interface d’administration des modules.
Au départ, le cadre du template est « minuscule » !!!
En effet, on ne voit en général que 3 lignes du template dans la petite fenêtre de lecture, ce qui ne permet vraiment pas d’avoir une vue d’ensemble.
Si vous amenez le curseur de la souris dans le coin inférieur droit, vous verrez une flèche bidirectionnelle, qui vous indique qu’il est possible d’agrandir ce cadre, afin de faciliter la lecture.
N.B. Le template que j’ai choisi comme exemple est fort court
7 lignes au total – c’est d’ailleurs celui de la Liste de brèves ;-)
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 137
Interface d’administration - Vues et templates
Exemple : module Liste d’articles – Vue : template Django avec lien - On a enregistré 4 modèles de template
Choix de la vue Choix du template Définition du template
Exemple : module Liste d’articles – Vue : carrousel - On a enregistré 1 modèle de template
Choix de la vue Choix du template Définition du template
Pour agrandir le cadre, amener le curseur dans le coin inférieur droit.
Une flèche bidirectionnelle apparaît.
La « vue » a un sens plus global que le template : c’est une manière générale d’afficher les données.
Pour chacune de ces vues, on peut prévoir un ou plusieurs templates, afin de diversifier la présentation.
Article
Notice
Modules
D
ÉMO DU PORTAIL
L
ISTE DES MODULES
,
DES TEMPLATES
D
JANGO ET DES CADRES OÙ ILS SONT EMPLOYÉS
Templates Django Cadres où ces templates sont employés
Rubrique
3 modules de base : un article - une notice - une rubrique
Affichage d’un article
Cadre principal de la page qui affiche un article
Affichage d’une notice
Affichage d’une rubrique
Cadre principal de la page qui affiche une notice
Cadre principal de la page qui affiche une rubrique
Vues
Templates Django avec lien
Templates Django Cadres où ces templates sont employés
Module liste d’articles
Liste d’articles – Sélections – Nouveautés
Sélection de nouveautés (symbolisées par les étagères)
Liste de brèves
Liste d’articles – Résultat d’une recherche dans les articles
Liste d’articles – Recherche dans le catalogue
Actualités en page d’accueil
Cadre principal de la page qui affiche le résultat d’une recherche dans le contenu éditorial
Articles dans les mêmes catégories qu’une notice
Carrousel d’articles d’actualité
Carrousel
Vue Django
Liste de notices
Notices du même auteur
Module liste de notices
Notices d’une étagère associée à un article
Notices du même auteur qu’une notice
Vue en carrousel
Notices similaires
Notices sur la même étagère (cote de rangement proche)
Nouveautés en page d’accueil
Notices dans les mêmes catégories qu’un article
N.B. Ces 2 templates ne sont pas illustrés dans la démo.
Notices – Carrousel de nouveautés
Notices dans les mêmes catégories qu’un article
Module agenda
Liste d’événements
Affichage d’une liste d’événements à partir de l’agenda
Cadre principal de la page qui affiche une liste d’événements
Conclusion : à chaque cadre illustré dans la démo correspond au moins un template sauvegardé dans l’interface d’administration
Comme vous pouvez le constater, tous les cadres et templates illustrés dans la démo ont été commentés dans ce manuel !
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
S
YSTÈME DE CLASSEMENT DES TEMPLATES DANS L
’
INTERFACE D
’
ADMINISTRATION
Page 138
En guise d’exemples, je reprends les deux modules qui contiennent le plus grand nombre de templates.
Liste de notices – Vue : template Django
Liste de notices – Vue : carrousel
Liste d’articles – Vue : template Django avec lien
Attention ! Ces carrousels ont été créés avec le module Liste de notices, c’est pourquoi les templates correspondants figurent sous le titre « Liste de notices », et pas sous le titre « Carrousel » !
Liste d’articles – Vue : carrousel
Conclusion : les templates sont classés sur base du module qui a servi à générer un cadre, et ensuite par vue.
Ce système de classement facilite le choix d’un template adéquat, lorsqu’on paramètre un cadre.
On ne voit que la liste des templates réellement utilisables, en fonction du module concerné et de la vue qu’on a choisie.
Liste d’articles – Vue : template Django avec lien
Liste d’articles – Vue : carrousel
Vous pouvez ajouter des templates à ceux qui ont déjà été enregistrés, mais veillez à respecter ce mode de classement.
Sauvegardez ces nouveaux templates « avec le bon module », sinon ils ne vous seront pas proposés « au bon moment » !!
A ce propos, je vous rappelle quelques indications du chapitre «
Distinguer les modules et les cadres
Comment savoir avec certitude quel module est à l’origine de tel ou tel ou cadre ?
Cliquez sur l’icône du crayon pour éditer le cadre.
Si un carrousel de notices a été créé sur base du module Liste de notices, le template correspondant est sauvegardé dans Liste de notices > Vue en carrousel !
Pour créer un nouveau template, sélectionnez le bon module et la bonne vue, et cliquez ensuite sur ajouter un template.
Vous pourrez adapter si nécessaire le
template par défaut qui vous sera proposé,
ou le remplacer par le template d’un
cadre spécifique (il suffit de copier-coller).
Pour modifier un template préexistant, cliquez sur son nom et adaptez le code.
En premier lieu, le nom du module qui a servi à créer le cadre Ensuite, le nom donné au cadre
Dans un cas comme dans l’autre, n’oubliez pas d’enregistrer !
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 139
G
ESTION DES TEMPLATES DANS LES CADRES
Rappel : comment sauvegarder un template lié à un cadre
A ce point de vue-là, il n’y a aucune différence entre un cadre qu’on vient de créer et qu’on enregistre pour la 1 e
fois, et un cadre préexistant qu’on édite afin de compléter ou de corriger le paramétrage initial.
La méthode de sauvegarde est identique et toute simple :
lorsque vous enregistrez le contenu d’un cadre, vous
enregistrez en même temps le template qui lui est associé !
Choix d’un template précis ou recours au template par défaut ?
Quand peut-on choisir le template à utiliser ?
Jusqu’à présent, vous avez vu des captures d’écran comme celle-ci, où vous pouviez choisir le template à utiliser pour tel ou tel cadre.
Mais ce n’est pas une règle générale.
Ce choix éventuel d’uu template n’est possible que s’il y a au moins un template adéquat qui a été enregistré dans l’interface
d’administration, donc un template qui est relié au module
concerné et aussi à la vue choisie.
Il faut respecter le système de classement dans l’interface d’administration. (voir page précédente)
Sinon, vous ne disposerez pas du « bon » template au moment où vous en aurez besoin.
Si vous parcourez à nouveau la liste des templates enregistrés dans l’interface d’administration, vous comprendrez aisément pourquoi vous avez toujours vu jusqu’à présent ce message « Choisissez le template à utiliser ». Je rappelle la conclusion qui figure à la fin de cette liste.
A chaque cadre illustré dans la démo correspond au moins un template sauvegardé dans l’interface d’administration
Ne soyez pas surpris par la modification du message – Cela reflète un changement important
Quand on choisit pour la 1 e
fois un template ou dès qu’on change le template d’un cadre préexistant, le nom du nouveau template est
Les choses changent dès qu’on a sauvegardé le cadre. Si vous éditez à nouveau ce cadre, le nom du template que vous aviez choisi n’apparaît visible aussi longemps qu’on n’a pas sauvegardé le cadre. plus, on voit à nouveau le message « Choisissez le template à utiliser »
Le message a changé, le nom du modèle choisi disparaît dès que vous sauvegardez le template en même temps que le cadre.
Vous avez sélectionné un template dans la liste de ceux qui sont enregistrés dans l’interface d’administration.
Soit vous avez employé ce template tel quel dans le cadre, soit vous l’avez modifié, mais peu importe, finalement.
Ce modèle de template a perdu son statut de modèle général et réutilisable, il est devenu le template d’un cadre précis.
Quand doit-on employer le template par défaut ?
Si aucun template dans l’interface d’administration ne correspond au module concerné et à la vue choisie, une seule possibilité : le template par défaut ! On ne voit dès lors aucun message suggérant un choix éventuel.
Ex. Module Liste de rubriques (non illustré dans la démo).
2 vues possibles : Template Dajngo avec lien ou carrousel
Mais aucun template adéquat n’est sauvegardé dans l’interface d’administration, donc pas de choix de template possible.
Conclusion : même si aucun template ne semble exister (en administration) pour un module et une vue spécifiques,
PMB ne vous abandonne pas à votre triste sort ! Il vous propose de toute façon un template par défaut ;-)
Même si vous sauvegardez les changements apportés à un template dans un cadre ou dans l’interface d’administration, il n’y a aucune répercussion automatique ni dans un sens, ni dans l’autre.
La modification d’un modèle de template dans l’interface d’administration n’a aucun impact sur les templates des cadres préexistants
La modification d’un template dans un cadre n’a aucun impact sur les modèles de template dans l’interface d’administration
Il faut donc faire des copier-coller si on veut mettre les templates à jour des deux côtés.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 140
F
AUT
-
IL CRÉER OU MODIFIER DES TEMPLATES DANS L
’
INTERFACE D
’
ADMINISTRATION
?
Gérer les templates dans l’interface d’administration permet de créer des « modèles de templates », à réutiliser, à améliorer et à partager, donc cela facilite vraiment l’existence !
Les templates par défaut sont fort brefs, quelque peu « rudimentaires »
o Cela vaut vraiment la peine de récupérer et de sauvegarder dans votre portail les templates disponibles dans la démo, car ils sont beaucoup plus élaborés, et vous montrent des exemples concrets de ce qu’on peut faire. o Ces templates sont enregistrés dans la table cms_managed_modules.
Cela vous donne aisément accès à de nouveaux modèles de templates
o Si vous avez modifié un des modèles de templates lorsque vous étiez en train d’éditer un cadre, cette nouvelle version du modèle n’est disponible que si vous éditez le cadre concerné. o Or, si vous voulez créer un nouveau cadre en partie similaire, il est plus pratique de sélectionner directement ce nouveau template, ce qui implique de l’avoir sauvegardé préalablement dans l’interface d’administration. o Suivant le cas, vous pouvez soit conserver le modèle préexistant et sauvegarder la nouvelle version sous un nom différent, soit faire les changements dans le modèle préexistant.
Cela facilite la collaboration
o Si vous ne vous sentez pas capable de modifier ou de créer vous-même un template Django, vous pouvez demander à quelqu’un d’autre de vous aider, intégrer ensuite ce nouveau template dans l’interface d’administration et l’employer ultérieurement dans un cadre. o Même si personnellement vous maîtrisez les templates Django, il est toujours plus fructueux de travailler à plusieurs, de partager et d’échanger vos « productions » !
C’est utile si vous travaillez en multi-localisations o Chaque bibliothèque sera amenée à publier ses propres articles, mais risque du coup de développer son propre mode de présentation. o Pour maintenir une cohérence dans l’affichage, pour éviter de rompre l’harmonie graphique de l’ensemble, il vaut mieux prévoir des templates identiques, au moins pour les cadres fondamentaux du portail.
L
ES TEMPLATES DE LA DÉMO SONT
-
ILS RÉUTILISABLES PARTOUT
?
Globalement, oui.
La plupart des variables utilisées dans les templates ont un lien avec les champs de la base de données ou avec
le contenu éditorial (ex. titre / résumé d’un article ou d’une rubrique), et elles ont donc une portée générale.
Toutefois, certaines variables désignent des champs personnalisés qu’on a pu créer.
o Ex. Date de début d’un événement sur une période {{fields_type.date_debut.values.0.format_value}} o
Si vous avez donné d’autres noms à ces champs personnalisés, vous devrez faire quelques changements dans certains templates o Si vous avez restauré le contenu éditorial minimum, ou si vos champs personnalisés sont identiques à ceux de la démo (mêmes noms, types de données et types de saisie), les templates sont prêts à l’emploi.
N.B. Je rappelle que vous pouvez restaurer dans votre base la configuration éditoriale minimum de la démo, ainsi que la table cms_managed_modules, qui contient les templates Django.
Voir Sauvegarder - restaurer la configuration minimum du portail
Les tableaux de synthèse des pages suivantes vous donnent des exemples de variables utilisables dans les templates Django, ainsi que la liste des instructions et fonctions disponibles.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 141
L
ISTE DES INSTRUCTIONS ET FONCTIONS DES TEMPLATES
D
JANGO
Les instructions entre {% %}
Les boucles de répétition
Exemple {% for article in articles %} … {{article.title}} … {{article.resume}} … {{article.content}} … {% endfor %}
Liste d’articles (template Django avec lien)
{% for article in articles %}
Article du contenu éditorial
{% for record in records %}
Liste de notices (vue Django ou carrousel)
Carrousel de notices
Carrousel d’articles
Carrousel de rubriques
Liste de rubriques (template Django avec lien)
Liste des sous-rubriques d’une rubrique parente
Agenda (vue d’une liste d’événements)
Liste d’étagères
Liste de bannettes
Pour toutes les listes de notices
Pour tous les carrousels
{% for section in sections %}
{% for child in children %}
{% for event in events %}
{% for shelve in shelves %}
A record = enregistrement
Suivant le cas, record =
une notice, un article ou une rubrique
Section = rubrique du contenu éditorial
Dans ce contexte, a child = une sous-rubrique
An event = un événement
A shelf (pluriel shelves) = une étagère
{% for bannette in bannettes %}
Les bannettes de la DSI
Contexte : un article est lié à une étagère.
On affiche l’article, et en-dessous, la liste des notices contenues dans cette étagère
N.B. J’ai abrégé le contenu du template, j’ai gardé les instructions essentielles pour comprendre le sens de la condition.
Les conditions : 2 exemples concrets
{% if records %}
<h3>Toutes les nouveautés</h3>
{% endif %}
{% for record in records %}
{{record.content}}
{% endfor %}
S’il y a des enregistrements (= notices) à afficher
On affiche le titre « Toutes les nouveautés »
Fin de la condition
Boucle qui va de la 1 e
à la dernière notice
On affiche le contenu de la notice
Fin de la boucle
La condition {% if records %} {% endif %} est nécessaire dans cet exemple
Inutile d’afficher le titre « Toutes les nouveautés » s’il n’y a pas d’étagère associée à l’article ou si elle est vide !
Contexte : page résultat de recherche
On cherche un mot dans les articles. Si on le
{% if articles %}
{% for article in articles %}
S’il y a des articles à afficher
Boucle qui va du 1 er
au dernier article trouve, on affiche la liste des articles concernés.
N.B. J’ai abrégé le contenu du template, j’ai gardé les instructions essentielles pour comprendre le sens de la condition.
….
{% endfor %}
{% else %}
Pas de résultats
{% endif %}
On affiche la version abrégée (titre + résumé)
Fin de la boucle
Sinon
On affiche le message « Pas de résultats »
Fin de la condition
La condition {% if articles %} {% else %} {% endif %} est nécessaire dans cet exemple
On a une boucle qui va du 1 er
au dernier article seulement si on a trouvé le mot quelque part dans le contenu éditorial !
Et en toute logique, le message « Pas de résultats » n’a de sens que dans le cas d’une recherche infructueuse !
Condition « simple » : si … alors …
On n’envisage qu’un seul cas :
si la condition est vérifiée
Il n’y a rien à faire dans le cas contraire
{% if true %} Si la condition est vérifiée
Instruction à exécuter
{% endif %} Fin de la condition
Les conditions : synthèse schématique
Condition « si … alors … sinon … »
On peut imbriquer 2 conditions l’une dans l’autre
On envisage les 2 termes de l’alternative :
si la condition est vérifiée
si elle ne l’est pas
{% if true %} Si la condition est vérifiée
Instruction n° 1
{% else %} Sinon
Instruction n° 2
{% endif %} Fin de la condition
{% if true %} Si la condition n° 1 est vérifiée
Instruction n° 1
{% if true %} Si la condition n° 2 est vérifiée
Instruction n° 2
{% else %} Sinon
Instruction n° 3
{% endif %}
Fin de la condition n° 2
{% endif %} Fin de la condition n° 1
On symbolise en général une condition Django de cette manière :
(% if true %} si c’est vrai, si la condition est vérifiée
On peut effectuer les tests classiques de comparaison
if {{variable1}} == {{variable2}} if {{variable1}} < {{variable2}} if {{variable1}} != {{variable2}} if {{variable1}} <= {{variable2}}
Par convention == signifie “égal à" (double signe =) if {{variable1}} > {{variable2}} if {{variable1}} >= {{variable2}}
Par convention != signifie “différent de"
On peut employer les opérateurs booléens habituels : and or not
if {{variable2}} >= {{variable1}} and {{variable2}} <= {{variable3}}
Infos complémentaires : https://docs.djangoproject.com/en/1.8/ref/templates/builtins/
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 142
Une fonction supplémentaire : limitstring
PMB a ajouté une fonction aux templates Django de base, la fonction limitstring
{{record.title | limitstring,45,"..." }}
Attention à la syntaxe ! Le tout doit être entre {{ }}
Il faut une barre verticale | entre la variable et limitstring
La fonction limitstring permet de limiter la longueur d’une chaîne de caractères. Exemple {{record.title | limitstring,45,"..." }}
Cela signifie que la longueur du texte à afficher (le titre de la notice, record.title) sera limitée à 45 caractères, et que les caractères manquants seront remplacés par le texte entre guillemets (les 3 petits points).
Le découpage se fait à l’aveugle, et le résultat final est plus ou moins heureux suivant le cas = suivant le texte à afficher !
Si vous avez une série de titres assez longs dans un carrousel de notices, cette fonction est fort utile.
Bien entendu, son rôle n’est pas limité aux carrousels, elle peut aussi servir en d’autres circonstances.
V
ARIABLES UTILISABLES DANS LES TEMPLATES DU PORTAIL
Les noms des variables entre {{ }}
Les variables utilisables dans les templates ont un lien avec les champs de la base de données ou avec le contenu éditorial
Le sens de certaines variables comme {{article}} ou {{section}} est évident.
Mais …
Tous les carrousels (notices, articles, rubriques) emploient la boucle {% for record in records %}
Toutes les listes de notices (vue Django ou carrousel) emploie la boucle {% for record in records %}
La variable {{record}} a donc plusieurs significations : elle peut désigner une notice, un article ou une rubrique.
{{title}}
{{article.title}}
{{section.title}}
{{record.title}}
Le titre de l’article
Le titre de la rubrique
Le titre de l’enregistrement
{{event.title}}
Suivant le cas, titre de la notice, de l’article ou de la rubrique
Le titre de l’événement (Le terme événement a un sens global dans ce contexte : article qui décrit une activité à une date ou sur une période)
{{resume}}
{{article.resume}}
{{section.resume}}
{{record.resume}}
{{event.resume}}
Le « résumé » de l’article = le chapeau de l’article
Le « résumé » de la rubrique
Le « résumé » de l’enregistrement
Suivant le cas,
résumé de la notice, chapeau de l’article ou résumé de la rubrique
Le « résumé » de l’événement = le chapeau de l’article
{{content}}
{{article.content}}
{{record.content}}
{{event.content}}
Le contenu de l’article = le texte même de l’article
Le contenu de l’enregistrement - Suivant le cas
le contenu de la notice = tous les champs de la notice
le contenu de l’article = le texte même de l’article
N.B. Rappel : une rubrique n’a pas de champ « contenu »
Le contenu de l’événement = le texte même de l’article
{{link}}
{{article.link}}
{{section.link}}
{{record.link}}
{{event.link}}
Le lien = URL de l’article
Le lien = URL de la rubrique
Le lien = URL de l’enregistrement
Suivant le cas, URL de la notice, de l’article ou de la rubrique
Le lien = URL de l’événement
{{vign}}
{{article.vign}}
{{section.vign}}
{{record.vign}}
{{event.vign}}
La vignette de l’article
La vignette de la rubrique
La vignette de l’enregistrement
Suivant le cas, la vignette de la notice, de l’article ou de la rubrique
La vignette de l’événement
Exemples de champs personnalisés, qui correspondent aux types de contenu définis pour les articles
N.B. Les noms des variables et fonctions associées à un champ personnalisé contiennent toujours ceci : {{fields_type}}
{{fields_type.date.values.0.format_value}}
{{fields_type.date_debut.values.0.format_value}}
Evénement à une date précise
Evénement sur une période : date de début
{{fields_type.date_fin.values.0.format_value}}
{{fields_type.etagere.values.0.value}}
{{fields_type.identifiant_notice.values.0.value}}
Evénement sur une période : date de fin
Sélection : identifiant de l’étagère associée à un article
Coup de cœur : identifiant de la notice associée à un article
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 143
Propriétés CSS des cadres
L
E FLUX D
’
UN DOCUMENT
Le flux normal d’un document correspond au comportement naturel des éléments d’une page Web.
Les éléments sont placés les uns après les autres dans le code HTML, et c’est cet ordre qui détermine l’ordre d’affichage des éléments dans la page.
C’est donc le navigateur qui décide où il va placer les cadres (comme si le code
HTML était un texte qu’on lisait de haut en bas).
Les cadres du portail sont des éléments de type « block » : des espèces de « briques ».
Par défaut, les blocs se placent naturellement les uns en-dessous des autres, dans le flux normal, et ils occupent toute la largeur de la zone où ils se trouvent. C’est ce qu’on appelle la position « statique ».
Pour modifier ce comportement par défaut, on peut agir sur 2 propriétés des cadres : position et float.
La propriété « position »
Position statique : c’est le placement par défaut, le cadre est dans le flux du document, à sa place « normale »
Position relative : le cadre sort du flux et est décalé par rapport à la position qu’il aurait normalement dû avoir, c’est pourquoi l’espace que ce cadre aurait dû occuper reste vide
Position absolue : le cadre sort du flux et est positionné par rapport au coin supérieur gauche de la zone en position relative ou absolue qui le contient, sa place ne dépend donc plus de l’ordre dans lequel les éléments sont déclarés dans le code HTML
Position fixe : le cadre sort du flux et est positionné par rapport à la fenêtre du navigateur, il ne bouge pas même si on scrolle
La propriété « float »
Le cadre sort partiellement du flux, il est déplacé vers l’extrême gauche ou droite de la zone qui le contient, ce qui permet par exemple d’avoir deux cadres côte à côte.
Espace réservé
En position relative, le navigateur conservera l'espace que le cadre occuperait s'il était dans le flux normal.
En position absolue, le cadre n'a plus d'espace réservé dans le flux normal
Source : Premiers pas avec le portail (document en ligne, publié par PMB Services) http://doc.sigb.net/portail_pmb/co/description_deplacement.html
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
La propriété « float » permet d'entourer le cadre par d'autres cadres.
Float : left et float : right
left : le cadre se place à gauche, les suivants se placent à sa droite.
right : le cadre se place à droite, les suivants se placent à sa gauche.
none : pas de float attribué au cadre.
inherit : le cadre hérite du float de sa zone parente.
Page 144
Insérer un clear (ndlr : lorsqu’on édite les propriétés CSS d’un cadre)
Cocher cette case annule l'effet du float left ou du float right du cadre précédent.
Source : Premiers pas avec le portail (document en ligne, publié par PMB Services) http://doc.sigb.net/portail_pmb/co/utilisation_construction_editioncss.html
Commentaires à propos des deux exemples ci-dessus
C’est le cadre n° 2 qui « flotte » à gauche ou à droite
Les cadres n° 3 et n° 4 ne peuvent se placer à côté du cadre n° 2 que si on a réduit leur largeur (sinon, ils seraient en-dessous)
Un cadre qui contient un « clear » ne va ni à gauche ni à droite du cadre flottant, il est dans le flux normal du document, en-dessous du cadre qui flottait. C’est comme si on traçait une ligne horizontale virtuelle à la fin de tout ce qui flotte.
C’est donc pour le cadre n° 5 qu’il faut cocher la case « clear »
Autres ressources intéressantes sur le positionnement CSS :
Site de Alsacréations : http://www.alsacreations.com/
Initiation au positionnement CSS – partie 1 http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
Initiation au positionnement CSS – partie 2 http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
Guide de survie du positionnement CSS http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 145
L
ES MARGES
:
MARGIN ET PADDING
Pour positionner les cadres les uns par rapport aux autres, on peut aussi employer les propriétés margin et padding.
Le padding d'un cadre représente l'espace entre la bordure du cadre et son contenu
Margin représente la marge entre la bordure du cadre et les autres cadres.
Padding et margin d'un cadre
auto : le cadre prend le padding ou le margin dont il a besoin. px : définit en nombre de pixels le padding ou le margin.
% : définit le padding ou le margin du cadre en pourcentage de la largeur ou de la hauteur de la zone contenant le cadre inherit : le cadre hérite du padding ou du margin de sa zone parente.
Si le margin-left et le margin-right sont en auto, le cadre est centré.
Source : Premiers pas avec le portail (document en ligne, publié par PMB Services) http://doc.sigb.net/portail_pmb/co/utilisation_construction_editioncss.html
Dans un premier temps, j’ai surtout voulu expliquer la notion de flux d’un document, et présenter les propriétés CSS qui permettent de positionner les cadres les uns par rapport aux autres.
Je vous donnerai toutefois une liste complète de ces propriétés dans le chapitre suivant.
N’oubliez pas qu’un cadre est rarement seul dans une zone !
Comprendre comment le système fonctionne facilite « l’assemblage des pièces du puzzle ».
Je sais que ces concepts semblent fort théoriques pour le moment, pourtant il est nécessaire de les maîtriser.
Je vous rassure, vous aurez une vision plus concrète grâce aux explications et aux captures d’écran des pages suivantes ;-)
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 146
Manipuler les cadres
Le premier point important est d’attacher si nécessaire un cadre à une page
Si le cadre est fixe (visible dans toutes les pages), il suffit de cocher la case « fixe », et ensuite, on place ce cadre en général dans une zone fixe, comme l’introduction, le bandeau de gauche ou le pied de page.
Ainsi, il sera visible en toute circonstance, peu importe qu’on ait affiché une page de l’OPAC ou du portail.
Si le cadre doit être attaché à une page spécifique
(du portail ou de l’OPAC), il faut procéder autrement.
Mais les captures d’écran des pages précédentes ne montrent pas exactement comment faire.
En effet, je vous ai montré jusqu’à présent des cadres déjà configurés, mais l’écran n’est pas le même si on est en mode édition
d’un cadre existant, ou en mode création d’un nouveau cadre.
Modification d’un cadre existant
Si on est en mode édition du cadre, on ne voit qu’une seule option : soit la liste des pages du portail, soit la liste des pages de l’OPAC.
Cadre attaché à une page du portail Cadre attaché à une page de l’OPAC
Création d’un nouveau cadre : comment l’attacher à une page
Pour attacher un cadre « solidement » à une page, il faut d’abord naviguer dans le volet de droite, afin d’afficher la bonne page !!
Ensuite, vous pouvez sélectionner le module qui servira à générer le cadre, et compléter le formulaire.
Page signifie qu’on n’a sélectionné aucune page de l’OPAC .
La page d’accueil du portail est sélectionnée automatiquement, puisqu’elle était visible dans le volet de droite.
Vous pouvez cliquer sur la croix, pour fermer la liste des pages de l’OPAC, mais ce n’est pas obligatoire.
Evitez bien sûr de sélectionner une page du portail et une page de l’OPAC !
PMB n’apprécierait pas votre indécision et vous le montrerait clairement ;-)
Cette erreur de paramétrage ferait disparaître le cadre dans les cadres « hors de la page » !!
La page de l’OPAC qui affiche une notice est sélectionnée
automatiquement, puisqu’elle était visible dans le volet de droite.
On n’a même pas accès à la liste des pages du portail.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 147
Création d’un nouveau cadre dans une page du portail
Comment faire s’il n’est pas possible de naviguer dans le volet de droite ?
Supposons que vous vouliez travailler dans la page qui affiche un article et une liste de notices, et y ajouter un cadre.
Si vous venez à peine de démarrer la construction de votre portail, naviguer
dans le volet de droite sera impossible. Le doute est permis, surtout au début.
Toutes ces pages se ressemblent comme des gouttes d’eau : elles sont vides !
Comment être sûr que ceci est bien la page qui affiche un article et que les cadres qu’on veut placer iront bien là et pas ailleurs
?
Cliquez sur « Pages » et sélectionnez la page concernée dans la liste.
Si c’est la « bonne » page du portail (celle que vous vouliez), vous pouvez y positionner des cadres.
Si ce n’est pas correct, refaites une sélection et l’écran se rafraîchira dans le volet de droite.
Cliquez ensuite sur Modules pour sélectionner le module qui servira à générer le cadre.
Le formulaire du nouveau cadre montre clairement que la bonne page du portail a été sélectionnée.
Après enregistrement du formulaire, le cadre apparaît en haut de la page centrale.
Ne cliquez surtout pas tout de suite sur « Enregistrer » (tout en bas du volet de droite) !!
Les cadres du portail aboutissent « hors de la page » dans plusieurs cas de figure :
Cela peut être tout à fait normal, s’ils sont liés à une autre page que celle visible dans le volet de droite.
Cela peut être lié à une erreur de paramétrage, si on ajoute un cadre et que ses conditions d’affichage ne correspondent pas au type de page sélectionnée, ou si on modifie les conditions d’affichage d’un cadre préexistant et que cela déclenche un problème
Cela peut révéler la maladresse des débutants … si on n’a pas bien « accroché » le cadre à une zone ;-)
Un petit mot à propos de la « maladresse des débutants »
Ce genre de problème peut survenir si on inséré un cadre dans une page et qu’on l’a enregistré ou actualisé sans avoir d’abord positionné le cadre correctement dans une zone.
Méfiez-vous, certains cadres sont parfois récalcitrants et ont tendance à disparaître dans les cadres hors de la page …
Méfiez-vous aussi de certains cadres têtus, qui acceptent d’aller dans la bonne zone, mais pas à l’endroit que vous aviez choisi !
Positionner un cadre correctement dans une zone
Un nouveau cadre se place par défaut en haut de la page centrale, il occupe toute la largeur de la page centrale (puisque c’est un « bloc »), mais en réalité il n’est
positionné dans aucune zone au départ. Les apparences sont trompeuses !
Il faut bien sûr déplacer un cadre s’il doit aller dans une autre zone, mais aussi s’il doit rester dans la zone « page centrale ».
Avant d’enregistrer et d’actualiser la page, il faut déplacer ce cadre à la souris, et
voir le trait bleu qui indique l’endroit approximatif où on peut le déposer – même si cette position n’est pas parfaite au 1 er
essai, et même si vous le ramenez finalement à son point de départ … Vous pouvez redimensionner le cadre tout de suite ou plus tard.
« Baladez votre cadre » à la souris avant de cliquer sur « Enregistrer ».
Ne « lâchez » pas le cadre aussi longtemps que vous n’avez pas vu le trait bleu qui indique l’endroit où le déposer .
C’est la meilleure manière d’accrocher un cadre solidement à une zone !
Editer le contenu d’un cadre – Editer les propriétés CSS d’un cadre
On peut cliquer sur deux onglets :
« Contenu » pour voir la liste des cadres (de l’OPAC, du portail, hors de la page)
« Edition CSS » pour éditer les propriétés CSS d’un cadre préalablement sélectionné
Pour éditer le contenu d’un cadre, cliquez sur l’icône du crayon (à gauche du nom donné au cadre)
Définir les propriétés générales du cadre (nom, page, source de données, template Django ...)
Pour éditer les propriétés CSS d’un cadre, cliquez sur son nom, et ensuite, sur l’onglet CSS.
Définir les attributs CSS du cadre sélectionné (dimensions, positionnement, marges …)
Si vous voulez retourner ensuite à la liste des cadres, cliquez sur l’onglet « Contenu »
2 onglets : contenu - CSS
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 148
Carrousel d’articles d’actualité
Page d’accueil
Position
Left, top
Edition CSS des cadres – Liste complète des propriétés CSS
Position statique : c’est le placement par défaut, le cadre est dans le flux du document, à sa place
« normale »
Position relative : le cadre sort du flux et est décalé par rapport à la position qu’il aurait normalement dû avoir, c’est pourquoi l’espace que ce cadre aurait dû occuper reste vide
Position absolue : le cadre sort du flux et est positionné par rapport au coin supérieur gauche de la zone en position relative ou absolue qui le contient, sa place ne dépend plus de l’ordre dans lequel les éléments sont déclarés dans le code HTML
Position fixe : le cadre sort du flux et est positionné par rapport à la fenêtre du navigateur, il ne bouge pas même si on scrolle
Left et top permettent de préciser l’écart souhaité par rapport au bord latéral gauche ou supérieur.
Il se peut donc que des cadres se chevauchent, en fonction de leur paramétrage respectif.
Espace réservé pour un cadre qui est en position relative ou absolue
En position relative, le navigateur conservera l'espace que le cadre occuperait s'il était dans le flux normal.
En position absolue, le cadre n'a plus d'espace réservé dans le flux normal.
Zindex
Si des cadres se chevauchent, il peut être utile de savoir lequel se trouve « au-dessus » des
autres. Un cadre possédant un attribut Zindex supérieur à un autre se trouve « au-dessus ».
Visibility Cette propriété permet de rendre un cadre visible ou invisible :
Visible : le cadre est visible
Hidden : le cadre est invisible (hidden = caché)
Height
Cette propriété permet de définir la hauteur d'un cadre : auto : le cadre prend la hauteur dont il a besoin. px :
% : définit la hauteur du cadre en nombre de pixels. définit la hauteur du cadre en pourcentage de la hauteur de la zone contenant le cadre. inherit : le cadre hérite de la hauteur de sa zone parente.
Width
Float
Cette propriété permet de définir la largeur d'un cadre : auto : le cadre prend la largeur dont il a besoin. px :
% : définit la largeur du cadre en nombre de pixels. définit la largeur du cadre en pourcentage de la largeur de la zone contenant le cadre. inherit : le cadre hérite de la largeur de sa zone parente
Cette propriété permet d'entourer le cadre par d'autres cadres, d’en avoir plusieurs côte à côte. left : le cadre se place à gauche, les suivants se placent à sa droite. right : le cadre se place à droite, les suivants se placent à sa gauche. none : pas de float attribué au cadre. inherit : le cadre hérite du float de sa zone parente.
Padding
Margin
Le padding d'un cadre représente l'espace entre la bordure du cadre et son contenu
Margin représente la marge entre la bordure du cadre et les autres cadres. auto : le cadre prend le padding ou le margin dont il a besoin. px : définit le padding ou le margin en nombre de pixels.
% : définit le padding ou le margin du cadre en pourcentage de la largeur ou de la hauteur de la zone contenant le cadre inherit : le cadre hérite du padding ou du margin de sa zone parente.
Si le margin-left et le margin-right sont en auto, le cadre est centré.
Display
Visibility
Display
Insérer un clear
block : le cadre est visible.
none : le cadre est invisible.
Différence entre ces deux propriétés
Visibility : hidden rend le cadre invisible mais conserve son emplacement.
Display : none rend le cadre invisible et place les cadres suivants comme s'il n'existait pas.
Cocher la case « clear » annule l'effet du float left ou du float right du cadre précédent.
Source : Premiers pas avec le portail (document en ligne, publié par PMB Services) http://doc.sigb.net/portail_pmb/co/utilisation_construction_editioncss.html
Attention ! Les conflits de CSS peuvent générer de l’instabilité dans le portail, surtout s’ils concernent les dimensions et la position des zones (introduction, bandeau de gauche et de droite, page centrale, pied de page) ! Veillez à définir les zones dans la feuille de style même, et essayez de ne pas changer leurs propriétés principales à d’autres niveaux de CSS.
A.-M. Cubat
Carrousel d’articles d’actualité
Attaché à la page d’accueil
Zone page centrale
PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 149
Propriétés CSS – Exemples
Barre de recherche rapide
Cadre fixe
Zone introduction
Carrousel de notices
Attaché à la page d’accueil
Zone page centrale
Menu
Cadre fixe
Zone introduction
Quelques conseils pratiques
Adaptez les dimensions de certains cadres, comme des carrousels de notices ou d’articles, en fonction du contenu à y mettre
Si vous voulez qu’un cadre s’étende « naturellement » vers le bas, définissez sa hauteur en « auto »
Si vous voulez que le portail s’adapte facilement aux diverses résolutions d’écran (style responsive), définissez la hauteur, la largeur, padding et margin en pourcentage plutôt qu’en pixels.
Si un cadre doit être positionné et/ou dimensionné de manière précise, et que vous êtes « presque » arrivé au bon paramétrage, pensez à noter les valeurs actuelles ou à enregistrer une version du CMS avant de tenter une nouvelle modification ! Sinon, vous pourriez éprouver quelques difficultés à retrouver « la configuration qui était presque correcte, à un détail près » ;-)
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 150
Vous pouvez changer la position d’un cadre de deux manières :
Modifier certaines propriétés CSS : position, left et top, margin et padding – Voir pages précédentes
Déplacer le cadre à la souris
Objets définis – Sélection des objets – Déplaçables - Récepteurs
Déplaçables : en général, on coche « cadres », afin de pouvoir les déplacer
Récepteurs : en général, on coche « zones », on déplace le cadre par rapport à une zone
N.B. Si on voulait déplacer une « zone », ce serait par rapport au « fond » (l’ensemble de la page), mais je rapppelle qu’ il vaut mieux gérer le placement des zones dans la feuille de style, afin d’éviter des conflits de CSS à différents niveaux.
Deux mini-cours simultanés – vous êtes bien entendu multitâches, cela va de soi ;-)
Un rappel de grammaire française et une révision du code de la route …
La différence entre l’infinitif et le participe passé des verbes en –er o
« Activer » à l’infinitif signifie que quelque chose est à activer o
« Activé » (le participe passé) signifie que quelque chose a été activé
La différence entre les feux verts et rouges o
On a ou on n’a pas le droit de faire quelque chose
Posons d’abord la question de base : activer … mais que faut-il activer ?
Il s’agit du droit de déplacer un objet à la souris.
Par défaut, ce droit n’est pas activé, le feu est rouge, sinon dès que vous cliqueriez sur un cadre (volontairement ou non), il pourrait se balader ! C’est donc une mesure de sécurité bien utile, pour éviter les déplacements intempestifs de cadres.
Vous sélectionnez un cadre, vous cliquez sur « Activer », et vous pouvez agir (le message change, le feu est vert).
Par conséquent, dès que vous avez changé la position du cadre concerné, n’oubliez pas de cliquer sur « Activé » afin de bloquer à nouveau les cadres ! (il faut voir le message « Activer » et le feu rouge)
Attention à l’ordre des opérations !
Sélectionnez d’abord le cadre que vous voulez déplacer en cliqaunt sur son nom !
Lorsque vous cliquerez ensuite sur « Activer » afin que le message devienne « Activé », un seul cadre sera déplaçable
: celui que vous aviez sélectionné. Ce qui est beaucoup plus sûr, les autres cadres ne risquent pas de bouger.
Ne restez en mode Activé (feu vert) que le temps strictement nécessaire !!
Retournez en mode Activer (feu rouge) dès que possible
Si vous cliquez d’abord sur « Activer » afin que le message
devienne « Activé », tous les cadres seront déplaçables.
Ce qui est évidemment beaucoup plus dangereux !!
Le moindre clic de souris peut déclencher des catastrophes …
Ici, je n’avais déplacé qu’un seul cadre – intentionnellement - mais vous avez déjà un aperçu des dégâts potentiels ;-)
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 151
Déplacer un cadre
Un seul cadre était sélectionné donc déplaçable : la liste de nouveautés, qui se trouve désormais à droite.
Comme lors de la création d’un cadre, il faut absolument voir le trait bleu qui indique l’endroit où vous pourrez déposer le cadre.
Comment enregistrer ces modifications graphiques ?
Les choses ne se passent pas de la même manière que pour d’autres éléments du portail.
Contenu éditorial
o
Lorsque vous paramétrez les types de contenu ou les statuts de publication pour les rubriques et les articles, vous voyez un bouton « Enregistrer » dans le formulaire (onglet Administration). o
Lorsque vous ajoutez ou éditez un article ou une rubrique, vous voyez un bouton « Enregistrer » dans le formulaire
(onglet Portail)
Gestion des cadres
o
Lorsque vous créez un nouveau cadre ou éditez un cadre existant, vous voyez un bouton « Enregistrer » dans le formulaire. (onglet Portail > Construire)
Gestion des templates Django
o
Lorsque vous créez un nouveau template ou éditez un template existant, vous voyez un bouton « Enregistrer » dans le formulaire. (Onglet Portail > Modules > Interface d’administration)
On peut modifier les propriétés CSS des objets de deux manières
Pour éditer les propriétés CSS d’un cadre, cliquez sur son nom, et ensuite, sur l’onglet CSS.
Définir les attributs CSS du cadre sélectionné (dimensions, positionnement, marges …)
Mais comme vous avez pu le constater dans les captures d’écran des pages précédentes,
le formulaire d’édition des propriétés CSS ne contient pas de bouton « Enregistrer »
On peut déplacer un cadre à la souris, après avoir activé ce droit.
Mais le bouton « Enregistrer » brille là aussi par son absence …
Si vous avez modifié les propriétés CSS d’un objet d’une des deux manières expliquées ci-dessus, et si vous voulez sauvegarder ces changements, il faut cliquer sur « Enregistrer »
La sauvegarde est dans ce cas un peu moins spontanée, moins intuitive que quand on voit le bouton « Enregistrer » dans un formulaire ! Il faut y penser ...
Enregistrez régulièrement !
Cela permet de retourner en arrière si nécessaire.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Page 152
Enregistrer une « version » du portail ne signifie pas « enregistrer tout le portail » ni « enregistrer tout l’aspect graphique » !
Lorsqu’on a déplacé ou modifié des éléments, il faut enregistrer les nouvelles propriétés CSS des zones et des cadres afin de préserver les modifications – du moins si on est content de cette mise en page !
Cliquer sur « enregistrer » (dans le volet de droite, en bas).
Cela crée une « version » : une copie de la mise en page.
Deux précautions valent mieux qu’une !
Vous pouvez aussi adopter une « conduite préventive » : si la mise en page actuelle vous convient bien dans l’ensemble, mais que vous voulez essayer d’améliorer « un petit quelque chose », cliquez sur
« enregistrer » avant de faire des modifications !
Si le résultat ne vous plaît pas, restaurez la version antérieure ;-)
Il suffit de choisir dans la liste la « bonne » version à restaurer.
Ce système de « versions » sauvegarde seulement la mise en page, la disposition des zones et des cadres et leurs propriétés CSS,
pas les cadres en tant que tels (le paramétrage du contenu est enregistré quand on sauvegarde le cadre)
ni le contenu éditorial géré dans l’onglet Administration ou dans l’onglet Portail
Si vous avez entretemps supprimé un cadre, restaurer une « version » antérieure ne va pas le ressusciter !
Ce système de « version » permet uniquement de repositionner les cadres qui existent encore à l’endroit qu’ils occupaient auparavant, en rendant aux zones et aux cadres les propriétés CSS antérieures qui avaient été enregistrées.
PMB vous propose d’actualiser la page
après la création (ou la modification) d’un cadre, et son enregistrement
ou après l’enregistrement d’une « version » du CMS
Il y a deux manières d’actualiser une page
Si on clique sur un des deux boutons
« Actualiser la page », on va actualiser la
page courante, celle qui est visible dans le volet de droite.
Donc, on rafraîchit la bonne page.
Si on clique sur « Agencement des cadres » ou si on rafraîchit la page dans l’onglet du navigateur, on retourne à la page d’accueil.
Il faudra donc éventuellement 1, 2 ou 3 clics de souris en plus pour parvenir à la page qu’on souhaitait actualiser.
Signification précise du terme « Actualiser une page » dans le contexte : enregistrer une version du CMS
Ce commentaire ne concerne donc pas l’actualisation d’une page après la sauvegarde d’un cadre
Jusqu’à présent, j’ai présenté les choses comme si vous aviez à chaque fois cliqué sur « Enregistrer » afin de sauvegarder les nouvelles propriétés CSS d’un cadre ou sa nouvelle position. Mais que se passe-t-il si vous n’avez pas cliqué ?
Si vous n’avez pas cliqué sur « Enregistrer », aucun changement n’a été enregistré, forcément !
Si vous cliquez sur « Actualiser la page » sans avoir cliqué préalablement sur « Enregistrer », la page est
rafraîchie, mais par rapport à la dernière version enregistrée du CMS (il y a 5 minutes, il y a 2 heures, hier …)
Conséquence … et astuces ;-)
Si la modification que vous vouliez faire dans les propriétés CSS est tout compte fait une mauvaise idée, ou si vous avez déplacé un cadre mais que sa nouvelle position est une catastrophe graphique, n’enregistrez rien du tout, cliquez sur « Actualiser la page », et vous reviendrez à la situation antérieure !
Evitez toutefois que la situation « antérieure » ne soit « trop ancienne » !
Pensez à enregistrer régulièrement lorsque vous adaptez la mise en page ou que vous déplacez des cadres.
A.-M. Cubat PMB – Construction du portail – Concepts et exemples
Source : http://amcubat.be/docpmb/portail-construction-concepts-exemples
Quelle version du CMS est active dans l’OPAC ?
On voit d’ailleurs son numéro identifiant dans les informations de l’OPAC.
Page 153
Par défaut, c’est la dernière version en date qui est active.
Restaurer une version antérieure – Supprimer une version antérieure
Pour restaurer une version antérieure, cliquez sur la date et de l’heure de la version à restaurer. Si vous avez sélectionné la bonne version, je vous conseille de faire immédiatement une nouvelle sauvegarde.
En effet, il est beaucoup plus facile de gérer les choses si on est sûr que la dernière version en date est « la bonne », plutôt que de devoir retenir que c’est la 2 e
ou la 3 e
dans la liste.
Pour supprimer une version, cliquez sur la croix à droite.
Si le nombre de versions à supprimer est nettement plus élevé, je vous conseille d’employer une requête SQL.
Requête SQL - Supprimer une ou plusieurs versions du CMS antérieure(s) à la version sélectionnée
Au fil du temps, le nombre de versions du CMS augmente dans la table cms_version, et il devient utile de lancer un « grand nettoyage de printemps ». C’est particulièrement le cas pour la démo du portail, où le nombre de versions du CMS est fort élevé.
La requête de suppression fonctionne selon le principe suivant
on sélectionne une version du CMS
la requête supprime la (les) version(s) du CMS antérieure(s) à la version choisie
elle conserve la version sélectionnée et les versions postérieures
Cette requête est surtout conçue pour lancer « un nettoyage par le vide » dans des versions anciennes du portail, mais
soyez prudent dès qu’il s’agit de supprimer des versions relativement récentes !!
Pour que le portail fonctionne, il vous faut « la bonne version » du CMS : celle qui est active pour le moment (celle dont on voit le numéro dans les informations de l’OPAC).
Or, c’est en général la version la plus récente qui est active (sauf si vous venez de restaurer une version antérieure).
Si on veut vérifier à l’aise, avant de lancer la suppression, et savoir à quelle version du CMS un numéro d’id correspond, il suffit d’employer une autre procédure qui donne la liste des versions du CMS, et leur numéro identifiant.
En effet, la liste des versions du CMS fournie par PMB mentionne la date et l’heure de sauvegarde, mais pas le numéro d’id de la version.
Attention donc, ne lancez pas cette procédure de manière inconsidérée ! Vérifiez d’abord !!
En rédigeant cette requête, j’ai veillé à ce qu’il soit techniquement impossible de supprimer la dernière version en date, puisque cette suppression déclencherait probablement de sérieux dysfonctionnements (selon toute vraisemblance, c’est celle qui est active).
Assurez-vous que la version du CMS qui est active pour le moment ne fasse pas partie de celles que la requête pourrait supprimer.
Ne soyez pas surpris par le nombre de lignes affectées par la requête, il est largement supérieur au nombre de versions supprimées.
En effet, à chaque ligne de la table cms_version correspondent plusieurs lignes dans la table cms_build (une ligne par cadre).
Or, la requête supprime les traces d’une version dans les deux tables concernées.
Dans cet exemple, j’ai demandé la suppression des 3 versions antérieures
à la version 177, donc la requête va supprimer 3 lignes dans la table cms_version, mais 138 lignes dans cms_build : 141 au total.
Download
Link público atualizado
O link público para seu chat foi atualizado. Você pode visualizar e gerenciar seus links de chat após o registro aqui.
