Page à destination des chefs d’établissement ou des webmestres des sites SPIP hébergés par l’académie de Normandie.

La maquette SPIPr-Dane

La maquette SPIPr-Dane est développée par la DRANE et propose un habillage simple et configurable.
La maquette est basée sur la personnalisation par les webmestres :

• des blocs présents dans les différentes pages (accueil, rubrique, article) à l’aide de la personnalisation des noisettes [1]
• du style de la page (polices, couleurs, disposition) à l’aide de la personnalisation du thème [2]

La nouvelle version de la maquette est proposée depuis septembre 2026. Elle met en avant la qualité des publications réalisées par les rédacteurs du site : titres pertinents, descriptifs des articles, logos, contenus rédigés pour le Web et mis en page (simplement), images et documents bien décrits.

Des thèmes prédéfinis sont proposés et peuvent être modifiés. Les couleurs doivent être choisies avec soin afin de respecter les contrastes nécessaires pour une bonne lisibilité par chacun (accessibilité).

Exemples de sites

• Collège Gaston Lefavrais (Orne)
  (d’autres exemples à venir)

Présentation de la maquette

Les pages de votre site sont composées de 4 à 5 éléments : le bandeau, le menu horizontal de navigation, une bannière (optionnelle, selon le type de page), le corps de la page (composé de 3 éléments) et le pied de page.

L’affichage est responsive et s’adapte à la largeur de l’écran du visiteur du site (par exemple le menu horizontal se rétracte sur petit écran, les éléments se place davantage les uns sous les autres et moins les un à côté des autres suivant la largeur disponible).

Le bandeau

Le bandeau du site est très important et donne l’identité visuelle de votre site.
Il affiche :

• le logo de l’académie de normandie
• le logo du site (logo de l’établissement ou image le représentant) si présent
• le nom du site (c’est le nom de l’établissement en général) et le slogan (si présent - phrase ou information courte). Cet affichage du nom du site et du slogan peut être masqué si votre logo (par exemple sous forme d’un petit bandeau) contient déjà ces informations
• le moteur de recherche
• une ligne d’informations (adresse, téléphone, adresse électronique) issue des mentions légales de votre site. Cet affichage peut se masquer mais il reste fortement conseillé pour les établissements scolaires

Le menu horizontal

Par défaut, le menu horizontal affiche un lien vers l’accueil et vers les rubriques de premier niveau. Pour un menu plus élaboré, il faut activer le plugin Menus qui permet de construire un menu personnalisé selon vos envies ou contenus : sous-menu, pictos, liens divers (page de contact, agenda, etc.), et même des méga-menus.

Une bannière (optionnelle)

Une bannière est une image de format rectangulaire et allongée (format jpg ou png ou webp) . C’est un visuel qui permet de donner de l’identité à vos pages. En particulier sur la page d’accueil, une jolie photo de l’établissement - ou d’un élément représentatif - ou un élément graphique pour annoncer un événement - portes ouvertes par exemple - sera bien visible sur le site.

Cette maquette permet d’afficher sur votre site une bannière sur la page d’accueil ou sur les pages de vos rubriques ou d’articles [3].

Le corps de la page

Le corps des pages est la partie principale et est constitué de 3 éléments : content, aside et extra.
Ces 3 éléments peuvent être disposés de différentes façons (15 modèles possibles). L’ordre est important et c’est l’élément content qui est à privilégier car il s’affichera en premier (et en haut par exemple sur petit écran).

Le pied de page

Le pied de page affiche les liens indispensables : mentions légales, plan du site, page de contact, liens de connexion, etc.

À noter : il est aussi possible au-dessus du pied de page d’afficher une ligne de logos/liens vers des partenaires. Voir Fonctionnalités supplémentaires avec SPIPR-Dane.

Les noisettes

Dans content, aside et extra, vous choisissez et configurez les « noisettes » à afficher dans la gestion des « noisettes ». Pas de grands changements au niveau de la gestion des noisettes : certaines ont été améliorées (affichage des listes en grille par exemple) ou enrichies d’options.
Voir : SPIPr-Dane-Noisettes - Doc utilisateur.

La gestion du thème

Cette partie a été bien améliorée et simplifiée. Les réglages proposés permettent d’obtenir un site plus moderne, plus accessible et facilement personnalisable.

Des thèmes de couleurs prédéfinis sont proposés pour un résultat rapide que l’on peut ensuite personnaliser à ses goûts.

L’affichage d’images de fond (dans le bandeau, dans le contenu) était proposé dans l’ancienne version. Ces options ne sont plus disponibles pour garantir des affichages optimisés et lisibles/accessibles [4].

Les plugins optionnels à activer

Nous conseillons pour mieux personnaliser votre site d’activer également les plugins suivants :

• Menus : Permet de personnaliser facilement le menu horizontal « barrenav ».
• Bannière et Centre image : Permet d’afficher sous la barre de navigation des images horizontales avec légende sur la page d’accueil, des rubriques ou des articles. Intéressant pour plus de visuel.
• Enluminures typographiques : Pour davantage de boutons de mise en forme dans vos contenus. Attention : Le plugin doit être bien configuré avec des balises h2 pour les titrailles de premier niveau (puis h3, h4, h5).
• Pages : utile en particulier pour créer une page de contact (utiliser ici "contact" comme identifiant). Voir : Fonctionnalités supplémentaires avec SPIPR-Dane.
• Blocs dépliables : Pour créer dans vos contenus des blocs qui se déplient.
• PhotoSwipe : pour afficher joliment les images cliquables ou les galeries

Mise en place technique de la maquette

À noter : Les chefs d’établissement et les webmestres des sites qui ne sont pas habitués à la gestion des plugins SPIP peuvent contacter l’équipe Web Drane (avec le ou la chef(fe) d’établissement en copie) qui pourra réaliser pour vous les opérations techniques et vous laissera finaliser les réglages d’esthétique à votre goût si besoin.

Dans le cas contraire, si vous êtes à l’aise avec la gestion des plugins, vous pouvez faire les réglages qui suivent sur votre site.

Désactivations / Activations des plugins

• Au préalable, en fonction des cas désactiver les plugins :
  • « LESS CSS », « Bootstrap 2 » et « SPIPr-dist (version 0.4.21) » (cette étape désactivera plusieurs autres plugins dont les versions 2 de « SPIPr-Dane Config » et « SPIPr-Dane Noisettes », c’est « normal ») si ceux-ci sont activés
  • « SPIPr Éduc », « Spécial Normandie », « Accessibilité » et « SPIP Mentions Légales » si ceux-ci sont activés
• Puis activer les plugins :
  • les versions 4 de « SPIPr-Dane Config » et « SPIPr-Dane Noisettes » (d’autres plugins s’activeront alors automatiquement)
• Activer également s’ils ne le sont pas déjà les plugins suivant : Menus, Bannière, Centre image, Pages, Enluminures typographiques, Blocs dépliables, PhotoSwipe.
• Éventuellement activer Pdf.js (pour l’affichage intégré des pdf dans vos pages), Agenda (gestion d’événements associés aux articles), odt2spip (pour générer un article à partir d’un fichier odt)
• Faire les différents réglages de la maquette :
  • Configurer (ou vérifier) les noisettes présentes dans les différents types de pages via « Squelettes / Gérer les noisettes »
  • Configurer le thème via « Squelettes / Gérer le thème » (en prenant soin du contraste des couleurs)

Les réglages de plugins conseillés

Les crayons : SPIPr-Dane active automatiquement le plugin Crayon : très pratique pour modifier directement sur le site vos contenus. Vérifier le cas échéant les 2 réglages suivants :

• dans Configuration / Gestion des plugins, au niveau du plugin Crayon, cliquer sur « Configurer » et cocher « Activer la barre typographique dans les crayons ? »
• dans Configuration / Fonctions avancées / Configurer les barres d’outils : cocher « Charger les scripts de barre d’outils sur l’espace public »

Recalculer la page publique. Vérifier que les crayons fonctionne (double-clic sur les champs d’un article par exemple) et que la barre typographique est bien présente.

Optimisations et compression : Ces réglages permettent de limiter le nombre et la taille des fichiers appelés pour afficher les pages de votre site (c’est de l’optimisation Web : les pages se chargeront plus rapidement et la charge serveur sera plus limitée par la suite). Dans Configuration / Fonctions avancées, cocher les options :

• Activer la compression des scripts (javascript)
• Activer la compression des feuilles de style (CSS)

Recalculer la page publique.

Accompagnement

Ne pas hésiter à contacter l’équipe Web Drane en cas de difficulté ou pour un regard externe sur votre site (réglages divers, choix des couleurs et contrastes, conseils).