Enseigner avec le numérique

Nouvelle maquette des sites

Johan Pustoch — 2026-09-16T15:58:01Z

Les établissements de l'académie de Normandie ont pour la plupart un site Web hébergé par l'académie sur une plateforme mutualisée utilisant le CMS SPIP. L'habillage de ces sites est réalisé à l'aide de maquettes historiquement proposées sur les périmètres des anciennes académies de Caen et Rouen : SPIPr-dane ou SPIPr-éduc.
La DRANE propose une évolution de la maquette SPIPr-Dane qui peut être appliquée sur les sites d'établissement de l'académie.

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)
Collège les Courtils (Manche)
(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).

Voir les dispositions proposées

Dispositions possibles

Les différents types de page (accueil, rubrique, article, autre) peuvent adopter une disposition différente. Il peut même y avoir une disposition spécifique pour un article ou une rubrique particulier (comme pour les noisettes).

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 en cas de difficulté ou pour un regard externe sur votre site (réglages divers, choix des couleurs et contrastes, conseils) à :

échanger sur le salon Tchap dédié
écrire à l'équipe Web Drane

[1] Via « Squelettes / Gérer les noisettes » des plugins Noizetier et SPIPr-dane-Noisettes

[2] Via « Squelettes / Gérer le thème » du plugin SPIPr-dane-config

[3] Pour paramétrer les bannières, dans Configuration / Contenu du site / Les bannières, choisir sur quel type de page vous souhaitez afficher une bannière (pour des bannières personnalisée sur vos pages de rubriques ou d'articles par exemple en plus de la page d'accueil. Choisissez les objets éditoriaux qui peuvent avoir une bannière. Si la bannière est active pour un objet, il disposera d'un formulaire pour téléverser une éventuelle bannière.

[4] Les spécialistes des feuilles de style CSS sauront toujours les mettre en place (avec goût ?). Attention à ne pas en abuser et à rester simple

Les mentions légales sur votre site d'établissement

Johan Pustoch, Olivier Gautier — 2025-04-03T11:46:00Z

Sur tous les sites internet, une page des mentions légales est obligatoire et doit contenir des informations précises et à jour. Voici comment faire pour créer ou mettre à jour cette page pour votre site d'école, de collège ou lycée hébergé sur la plateforme SPIP de l'académie de Normandie.

Cadre général

Cet article et les mentions légales évoquées ici ne concernent que les sites des écoles et établissements publics. Ces mentions doivent impérativement être modifiées et adaptées pour les établissements privés, notamment le paragraphe traitant des données personnelles qui contient des informations erronées pour les établissements privés.

Les informations figurant dans la page des mentions légales doivent être vérifiés régulièrement, au moins lors de chaque rentrée en cas de changement du directeur de la publication : changement de chef d'établissement, d'inspecteur de circonscription dans le cas d'une école...
Certains éléments sont obligatoires et les visiteurs de votre site doivent pouvoir disposer de ces informations comme cela est rappelé dans la vidéo ci-dessous.

Attention : En fonction de l'habillage du site (SPIPr-éduc ou SPIPr-dane), les méthodes de mise à jour sont différentes et expliquées ci-dessous.

Est-ce obligatoire de renseigner les mentions légales d'un site web ?

En trois minutes, faites un point sur les textes de lois relatifs aux mentions légales de votre site web :

Pourquoi faut-il renseigner les mentions légales de son site web ?
par Olivier Gautier

https://podeduc.apps.education.fr/v...

Les textes de références cités dans cette vidéo :

Loi n° 2004-575 du 21 juin 2004 pour la confiance dans l'économie numérique
Article 131-38 du Code Pénal
Décret n° 2019-768 du 24 juillet 2019 relatif à l'accessibilité aux personnes handicapées des services de communication au public en ligne
En complément, l'article 47 de la loi n° 2005-102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées rappelle que "La page d'accueil de tout service de communication au public en ligne comporte une mention clairement visible précisant s'il est ou non conforme aux règles relatives à l'accessibilité."

Mettre à jour ses mentions légales avec l'habillage SPIPr-Dane

Si votre site propose un habillage construit avec SPIPr-Dane (et souvent SPIPr-Dane-noisettes [1]), une page des mentions légales est construite automatiquement et vous devez seulement compléter quelques informations. Pour cela se rendre depuis la partie privée de SPIP dans « Publication » / « Mentions légales » et compléter les champs du formulaire :

Compléter bien les différents champs.
de nouvelles informations sont demandées (adresse postale, adresse électronique et numéro de téléphone de l'établissement)
Les informations concernant le webmestre ne sont plus désormais indispensables, néanmoins indiquer le compte ici est utile dans certains cas pour définir la page de contact [2] : il est souvent conseillé ici d'indiquer un compte SPIP pour l'établissement associé à l'adresse électronique de celui-ci (ce compte doit alors être associé à au moins un article publié).

Se rendre sur la page publique des mentions légales. Recalculer la page et relire/vérifier la cohérence de la page et des informations.

Mettre à jour ses mentions légales avec l'habillage SPIPr-éduc

Problématique

L'habillage SPIPr-éduc utilisais jusqu'à présent un plugin spécifique pour générer la page des mentions légales du site. Seulement, ce plugin dysfonctionne désormais sur notre plateforme mutualisée. Vous trouverez donc ci-dessous une nouvelle méthode pour mettre à jour vos mentions légales : il s'agit de rédiger un article en vous servant d'un modèle proposé ci-dessous puis d'indiquer à SPIPr-éduc que cet article présente les mentions légales du site.
Les étapes sont détaillées dans 2 vidéos ci-dessous :

1^ère étape : préparer le texte des mentions légales depuis un fichier à télécharger ;
2^ème étape : créer, configurer et publier l'article présentant les mentions légales.

1^ère étape : préparer ses mentions légales

Préparer les mentions légales
par Olivier Gautier

https://podeduc.apps.education.fr/v...

Modèle de mentions légales pour SPIPr-éduc (odt)

Modèle de mentions légales pour SPIPr-éduc (docx)

2^ème étape : mise en place

Mise en place des mentions légales
par Olivier Gautier

https://podeduc.apps.education.fr/v...

[1] SPIPr-Dane-Noisettes - Doc utilisateur

[2] Voir aussi la page Fonctionnalités supplémentaires avec SPIPR-Dane

Fonctionnalités supplémentaires avec SPIPR-Dane

Johan Pustoch — 2023-09-05T11:56:54Z

SPIPr-Dane est un plugin SPIP proposé sur la plateforme académique qui vous permet de personnaliser la disposition des principales pages de votre site (il s'utilise de préférence avec les plugins SPIPr-dane-noisettes et SPIPr-dane-config).
Cette page explique quelques fonctionnalités ou affichages possibles.

Attention : SPIPr-Dane-Noisettes est un plugin initialement proposé pour les sites du périmètre Caen. Il ne faut pas activer ce plugin avec le plugin SPIPr-Éduc (proposé initialement dans le périmètre Rouen).

Cette page est pour les webmestres SPIP avertis.

Afficher une liste de sites en pied de page

Utile par exemple, pour afficher les liens vers les collectivités partenaires d'un lycée, ou vers des applications dédiées pour un site d'école. Voici comment procéder.

Préparation

Pour afficher une liste de liens sous forme d'images au dessus du pied de page telle que présentée sur l'image à la fin de cet article (ou en bas de chaque page de ce site), nous utiliserons l'annuaire de sites web et le plugin « Menus ».

Activer, si ce n'est déjà fait, la gestion d'un annuaire de sites web (menu « Configuration », « Contenu du site », formulaire « Référencement de sites et syndication »).
Activer, si ce n'est déjà fait, le plugin « Menus » (menu « Administration », « Gestion des plugins ».

Référencement des sites

Les différents sites pointés par les liens sont référencés dans l'annuaire de sites web. Nous allons donc commencer par ajouter ces sites à l'annuaire.

Se rendre sur la page de gestion des sites web (menu « Édition », « Sites référencés »).
Cliquer sur « Référencer un nouveau site »
Saisir l'adresse du site à référencer. Vous pouvez utiliser le champ « Référencement automatisé d'un site » ou indiquer vous-même les informations concernant ce site.
Enregistrez.
Ajoutez un logo. Veiller à ce que la taille du logo ne soit ni trop grande, ni trop petite. Une taille d'environ 500px est recommandée.
Répéter l'opération pour chacun des sites.

Création du menu

Pour créer la liste de liens, nous allons utiliser le plugin Menu.

Se rendre sur la page de gestion des Menus (menu « Squelettes », « Menus »).
Créer un nouveau menu
Compléter les champs.
Attention, le champ Identifiant du menu doit impérativement être le mot « pied », en minuscules. C'est cet identifiant qui forcera l'affichage au dessus du pied de page.
Enregistrez.
Cliquer sur « Ajouter une entrée de menu »
Ajouter l'entrée « Liste de logos de sites ».
Cliquer sur « Modifier cette entrée »
Saisir les identifiants des sites à afficher, séparés par une virgule (,) ainsi que les dimensions des logos. Par défaut, la hauteur est prioritaire sur la largeur et est égale à 80 pixels.
Enregistrez.

Votre liste de sites est prête.

Rendez-vous dans l'espace public et constatez. Affinez, si nécessaire les valeurs saisies dans l'entrée de menu.

Créer un menu XL

Afficher un sous-menu de grande largeur (aussi appelé "Menu XL") dans la barre horizontale de navigation peut parfois être utile. Nous allons voir ici comment procéder.

Créer l'entrée principale.

Dans le menu barrenav, ajouter une entrée "Lien arbitraire"

Compléter les champs :

Nom : Le nom que vous souhaitez donner à l'item, dans l'exemple Formations
Adresse : Saisissez le signe # (dièse)
Classe CSS de l'entrée (du conteneur) : menu-xl
Classe CSS du lien : Laisser vide

Enregistrer.

Créer les colonnes.

Créer un sous-menu dans l'entrée créée, dans l'exemple Formations

Ajouter les entrées dans le sous-menu.

C'est ici que l'utilisation du système de grille Bootstrap entre en jeu. Dans le sous-menu, nous allons créer autant d'entrées "Texte libre" que nous voulons de colonnes dans le menu XL, puis pour chaque entrée, nous allons compléter le champ Nom avec le nom que nous voulons donner à la colonne et surtout, dans le champ Classe css de l'entrée (du conteneur), nous allons associer la class spanX correspondant à la largeur de colonne souhaitée.

Exemples : Le système de grille étant basé sur 12 colonnes, si nous souhaitons obtenir 4 colonnes de largeurs égales, nous allons créer 4 entrées "Texte libre" et, dans le champ Classe css de l'entrée (du conteneur) de chaque entrée, associer la classe span3 (4[colonnes] x [span]3 = 12).

Pour afficher 3 colonnes de largeurs égales, nous allons créer 3 entrées "Texte libre" et pour chaque entrée, associer la classe span4 (3[colonnes] x [span]4 = 12).

Pour afficher 3 colonnes de largeurs différentes, nous pourrons associer la classe span3 à la première entrée, puis span5 à la deuxième et span4 à la troisième ( [span]3 + [span]5 + [span]4 = 12)

Dans notre exemple, nous choisissons de créer 4 entrées CAP, BACS-PRO, BACS et BTS de largeurs égales. Nous allons donc saisir dans le champ Classe css de l'entrée (du conteneur) de chaque entrée la classe span3.

Les entrées du sous-menu principal étant créées, nous allons maintenant y ajouter pour chacune un sous-menu, puis les entrées souhaitées dans ce sous-menu.

Vous pouvez ajouter presque tous les types d'entrées, en prenant exemple sur le menu XL présent dans la barre de navigation de cette page

Vous pouvez aussi télécharger le menu et l'importer dans votre site pour ensuite, le modifier à votre guise.

Personnaliser la page contact

Avec SPIPr-Dane, le lien « Contact » du pied de page affiche une page qui permet à vos visiteurs de trouver un contact dans l'établissement (et parfois d'envoyer des messages à un destinataire).
Nous allons voir ici comment personnaliser cette page. Plusieurs solutions sont proposées.

1/ Solution par défaut

Par défaut, la page de contact est la page de l'auteur renseigné dans le champ "Compte SPIP du webmestre" de la page de configuration du plugin Mentions légales. Cette page affiche alors un formulaire dont le destinataire est le "webmestre". Il faut pour que cela fonctionne :

que son adresse électronique soit bien renseignée (utiliser une adresse académique, en général l'adresse de l'établissement)
que le compte correspondant soit associé à au moins un article publié

il est néanmoins souvent pratique de mieux personnaliser la page de contact.

2/ Utiliser le plugin "Pages"

S'il ne l'est pas, activer le plugin Pages [1]

Créez une page unique (Menu Édition, Pages uniques).

Renseignez le champ Titre avec un titre évocateur (Contacter le collège, Nous contacter, Écrivez nous, etc)
Important : Renseignez le champ Page avec le mot contact.
Renseignez les autres champs, notamment le champ Texte à votre guise et enregistrez.
Important : Si vous n'êtes pas le destinataire du formulaire de contact, retirez l'auteur et ajoutez l'auteur qui doit être destinataire du formulaire. S'il n'existe pas, créez-le en lui assignant l'adresse mail destinataire (exemple, adresse fonctionnelle de l'établissement).

À ce stade, le formulaire de contact n'apparaît pas en page publique [2]. Pour cela, il va falloir configurer les noisettes spécifiques à cet article.

Cliquez sur le lien "Configurer pour ce contenu" pour ouvrir la page de gestion des noisettes spécifiques à cet article.
Ajoutez dans le bloc content, les noisettes "Contenu de l'article" et surtout, la noisette "Écrire à l'auteur".

Et voila, votre page de contact est personnalisée.

3/ Utiliser le plugin "Formidable" pour construire un formulaire

S'il ne l'est pas, activer le plugin Formidable

Une fois activé, construire un formulaire avec les traitements adaptés (envoi d'un email sur la boîte de l'établissement par exemple). Insérer le formulaire dans la page souhaitée.

[1] Voir la documentation du plugin Pages

[2] sauf si vous avez placé une noisette "Écrire à l'auteur" dans la configuration des noisettes pour la page "article"

Sites SPIP : plateforme d'hébergement des sites

Johan Pustoch, Olivier Gautier — 2023-04-18T11:56:57Z

Une plateforme SPIP normande est proposée par la Drane pour l'hébergement des sites internet des établissements scolaires et des sites pédagogiques (sites d'écoles, collèges, lycées, sites disciplinaires, sites de circonscription, etc.). Cette plateforme est hébergée sur l'infrastructure de la DSI de l'académie de Normandie.

L'équipe Web de la Drane s'occupe de la gestion des sites SPIP de l'académie. La Drane propose aussi des outils ainsi qu'un accompagnement pour les webmestres des sites.

La plateforme permet de bénéficier de la version 4 de SPIP (4.4 version à la rentrée 2025).

Les maquettes proposées

Issus des périmètres des anciennes académies, 2 maquettes sont proposées sur la plateforme. Les établissements peuvent choisir librement une de ces deux maquettes pour habiller leur site.

SPIPr-Éduc

Des tutoriels vidéos présentant ce modèle et ses fonctionnalités vous sont proposés dans l'article Tutoriels vidéos SPIP et SPIPr-éduc.

SPIPr-Dane

Maquette personnalisable en terme de charte graphique (SPIPr-Dane-Config) et en terme de disposition globale et de choix des blocs (SPIPr-Dane-Noisettes).

Documentations :

L'activation des plugins SPIPr-dane provoque l'activation d'autres plugins utiles.
Vous pouvez également activer d'autres plugins utiles : Accès restreint, odt2spip, Enluminure typo, pdfjs, PhotoSwipe, facteur, agenda, etc.

Contact

Pour contacter l'équipe Web de la Drane : drane-webmestre@ac-normandie.fr.

Les chefs d'établissements peuvent demander à cette adresse la création d'un site internet.

SPIPr-Dane-Config - Doc utilisateur

Johan Pustoch — 2023-03-23T17:10:00Z

Le plugin SPIPr-Dane-Config est une extension de SPIPr-Dane qui permet de personnaliser les couleurs, images d'arrière-plan et polices de caractères.

Attention : SPIPr-Dane-Config est un plugin initialement proposé pour les sites du périmètre Caen. Il ne faut pas activer ce plugin avec le plugin SPIPr-Éduc (proposé initialement dans le périmètre Rouen).

Avertissement à propos des caches

Lors des changements de réglages de SPIPr-Dane-Config, différents niveaux de caches peuvent entrer en jeux et vous empêchent de voir les effets des réglages effectués.

Il est souvent utile :

de cliquer 2 fois sur « Recalculer » la page
de vider le cache de son navigateur (ou cliquer sur MAJ + le bouton actualiser du navigateur) afin de bien actualiser toutes les requêtes

Présentation des options

Rendez vous sur la page de configuration du thème (menu « Squelettes » / « Configurer le thème »).

Import / Export

Dans la colonne de gauche, un premier cadre vous propose d'exporter ou d'importer une configuration. Ce cadre n'est présent que si le plugin Import-Export est activé.

Un deuxième cadre propose un lien « Afficher la configuration » qui vous permet de voir si une configuration existe déjà. Si tel est le cas, cliquez sur « Exporter la configuration », cette sauvegarde vous permettra de revenir au point de départ en cas de soucis.

Personnalisation de base

Couleurs de base

Les couleurs de base sont répercutées sur tout le site. La couleur la plus utilisée est la couleur N°2. Modifiez les couleurs et rendez-vous sur l'espace public. Recalculez la page et constatez les modifications.

Pour choisir les couleurs et si vous disposez d'un logo, d'une image ou d'une photo représentative de votre établissement, vous pouvez utiliser un générateur de palette en ligne comme Coolors ou Adobe Color CC et générer une palette à partir de cette image.

Il est conseillé de sélectionner des couleurs complémentaires (pour les couleurs 1 et 2) pas trop claires pour une bonne lisibilité du texte sur fond blanc.

Police de caractères

Différentes polices sont proposées. Si vous choisissez Personnelle en bas de la liste déroulante, vous pourrez alors saisir le nom d'une police Google que vous trouverez sur le site Google Web Fonts
La police Marianne (proposée par défaut) est conseillée.

Comme pour les couleurs, la police de caractère de base s'applique à tout le site.

Attention à ne pas choisir une police trop exotique. Pensez à la lisibilité et à la facilité de lecture pour tous les publics (l'accessibilité des sites Web est nécessaire pour tous).

Personnalisation de l'entête

Couleur d'arrière-plan de l'entête

Choisir une couleur en harmonie avec la palette choisie des couleurs de base. Vous pouvez saisir la valeur transparent (valeur par défaut).

Image d'arrière-plan de l'entête

N'oubliez pas qu'en fonction des différents support utilisés (écran pc, tablette, smartphone, ...), la taille de votre image variera sensiblement.

Pour afficher une image d'arrière plan dans l'entête, préparez préalablement votre image.
Si cette image ou photo doit occuper toute la surface de l'entête, pensez à l'affichage sur smartphones et tablettes. Sur un écran pc, une image horizontale d'un ratio d'environ 5/1 à 6/1 conviendra.

Lorsque l'image choisie est prête à l'emploi, cliquez sur « Oui » dans le champ « Afficher une image d'arrière-plan », puis cliquez sur « Voir les images disponibles »

Si aucune image n'est disponible ou satisfaisante, vous pouvez en ajouter dans l'onglet dédié.cliquez sur « Téléverser ou supprimer une image ». Importez votre image.

Cliquez sur « Choisir », le champ « Url de l'image d'arrière plan » est automatiquement complété.

Complétez ensuite les différents champs :

Position de l'image d'arrière-plan : Dans l'ordre position verticale, position horizontale. Les valeurs les plus usuelles sont « top », « left », et « center »
Répétition de l'image d'arrière-plan : Pour l'entête, et dans le cas d'une photo, on choisira sans répétition (valeur par défaut)
Fixer l'image d'arrière-plan : Pour l'entête, laisser la valeur par défaut (Non)
Dimensions de l'image d'arrière-plan : Le choix est ici important. Vous pouvez saisir au choix, l'une des valeurs suivantes :
- cover : forcera à couvrir toute la surface sans déformer l'image, quitte à la rogner.
- contain : forcera l'image à ne pas dépasser de l'élément sans la déformer, avec le risque que l'image ne couvre pas toute la surface.
- auto : affiche l'image à sa taille réelle.
- X% Y% ou Xpx Ypx : redimensionne l'image aux dimensions choisies.
Largeur de l'arrière-plan : L'image et la couleur d'arrière-plan peuvent occuper la largeur de la page (largeur des contenus) ou occuper toute la largeur de l'écran. Attention, dans ce cas, cette taille n'est pas maîtrisable.

Entête

Vous pouvez choisir une police de caractères différente de celle choisie comme police de base et modifier sa taille et sa couleur.

Logos du site

Vous pouvez choisir d'afficher ou non le logo du site (s'il existe) et modifier sa taille et sa position (à droite ou à gauche de l'entête), ainsi que la position du logo académique (toujours présent).

Par défaut, la barre de navigation utilise la couleur de base N°2 comme couleur d'arrière-plan. Au survol d'un lien, sa couleur d'arrière-plan est la couleur N°1.
Sont personnalisables : la couleur d'arrière-plan de la barre de navigation (couleur de base N°1 ou N°2) ainsi que la couleur des liens (blanc ou noir). Vous pouvez également inverser la couleur des liens au survol (en fonction des couleurs de base N° 1 et 2)

Personnalisation de la page.

Comme pour l'entête, vous pouvez modifier la couleur d'arrière-plan de la page et ajouter une image d'arrière-plan. Procédez de la même façon que pour l'entête en préparant votre image.

Personnalisation du pied de page.

Là aussi, vous pouvez ajouter une image et/ou modifier la couleur d'arrière-plan .
Procédez de la même façon que pour l'entête.

Pour finir

Vous pouvez personnaliser les blocs affichés pour les différentes pages de votre site. Pour cela utiliser SPIPr-Dane-Noisettes (via « Squelettes » / « Gérer les noisettes ») après avoir activé le plugin.

SPIPr-Dane-Noisettes - Doc utilisateur

Johan Pustoch — 2023-03-23T17:10:00Z

Le plugin SPIPr-Dane-Noisettes est une extension de SPIPr-Dane qui permet de personnaliser les pages de votre site : pour les différentes pages, choisissez une disposition et ordonner les blocs à afficher.

SPIPr-Dane-Noisettes est un plugin SPIP proposé sur la plateforme académique qui vous permet de personnaliser la disposition des principales pages de votre site.

Attention : SPIPr-Dane-Noisettes est un plugin à utiliser avec le plugin SPIPr-dane. Il ne faut pas activer ce plugin avec le plugin SPIPr-Éduc.

SPIPr-Dane-Noisette fournit :

une liste de types de noisettes à disposer dans les pages (c'est le plugin Noizetier qui entre en jeux) : blocs de texte, listes d'articles ou de liens, carousels, etc. Les blocs sont paramétrables facilement par le webmestre et permettent de personnaliser fortement le site ;
une liste de modèles de disposition de page.

Présentation de la page de gestion des noisettes

Ouvrez la page de gestion des noisettes (Menu « Squelettes / Gérer les noisettes »).

Liste des pages pouvant accueillir des noisettes

Au centre de la page est affichée la liste des pages pouvant accueillir des noisettes. Afin de simplifier la procédure de configuration des noisettes et aussi parce que la personnalisation des autres pages présente peu d'intérêt, seules les pages article, rubrique et sommaire (page d'accueil) sont proposées dans la liste des pages.

Pour chacune de ces pages, à droite, une icône en forme de crayon vous permet d'éditer la configuration de la page. Activer si besoin seulement les 3 options : aside, content et extra.

Menus (colonne de gauche)

Sur la partie gauche, un premier bloc propose des liens pour l'affichage des types de page (sommaire, rubrique ou article).
On retrouve ici aussi les personnalisations mises en place pour des pages spécifiques.

Un troisième bloc propose un lien vers la configuration du plugin Noizetier. La configuration adaptée à SPIPr-Dane-Noisettes est appliquée à l'installation de celui-ci. Il est donc déconseillé de la modifier.
Au dessous, les liens d'import et d'export de configuration vous permettant d'effectuer une sauvegarde avant toute modification.

Ajouter des noisettes

Page sommaire (page d'accueil du site)

Dans la liste des 3 pages, cliquer sur le lien « Page d'accueil du site ».

Ce lien ouvre la page de gestion des noisettes pour la page concernée.

Les différents blocs de cette page sont assez explicites :

Au centre en haut, le cartouche avec le nom de la page et un bouton Modifier cette page que nous laissons en l'état.
Au dessous, le cadre d'ajout de noisettes, dans un des trois blocs Content, Aside et Extra accessibles par des onglets.
À gauche, sous le cartouche de la page, la liste des type de noisettes disponibles pour cette page.
Pour ajouter des noisettes à un des blocs, cliquez sur l'onglet concerné, choisissez dans la liste des noisettes disponibles, colonne de gauche, la noisette à insérer et 'glissez/déposez' la dans le bloc.

La noisette insérée dans le bloc affiche son titre, la valeurs de ses paramètres et, à droite, une icône 'crayon' et une icône 'menu'.

Dès qu'une noisette est insérée dans un bloc, celle-ci, paramétrée par défaut, est affichée en page publique à la place du contenu par défaut du bloc.

Pour modifier les paramètres, cliquer sur l'icône 'crayon' pour ouvrir le formulaire de configuration de la noisette.

Chaque type de noisettes est paramétrable, cependant, le nombre de paramètres peut varier considérablement d'un type de noisette l'autre. Nous n'aborderons pas ici la description détaillée de chacun des types de noisettes.

Un clic sur l'icône 'menu' ouvre un sous-menu proposant 3 + 2 items, Supprimer cette noisette, Dupliquer cette noisette et Copier cette noisette dans le même bloc d'autres pages, puis Déplacer vers le haut et Déplacer vers le bas. L'intitulé de ces items est assez clair...

Modifier le modèle

Au dessous de liste des pages, un bloc vous indique le modèle utilisé (par défaut, modèle N°2) et affiche le descriptif du modèle. Il propose sur la droite un bouton 'Modifier le modèle'.

SPIPr-Dane-Noisettes propose le choix parmi 12 modèles de page. Toutefois, le modèle choisi par défaut ne sera pas appliqué à certaines pages du site (recherche, contact, ...). Ces pages seront toujours affichées avec le modèle par défaut de SPIPr-Dane.

Le choix d'un modèle 2 colonnes (modèles N° 2 à N° 9) comme modèle par défaut est fortement conseillé. Vous pourrez toujours par la suite choisir un autre modèle pour les pages article, rubrique ou surtout la page sommaire, page d'accueil de votre site.

Personnaliser l'affichage d'un contenu particulier

SPIPr-Dane-Noisettes de par sa gestion par le Noizetier permet de choisir pour une page en particulier (article ou rubrique) les noisettes présents dans la page.
Ceci est un usage avancé, il ne faut pas en abuser (si on multiplie les personnalisation, difficile de s'y retrouver), mais c'est dans certains cas bien pratique.

Enseigner avec le numérique

Nouvelle maquette des sites

Sommaire

La maquette SPIPr-Dane

Exemples de sites

Présentation de la maquette

Le bandeau

Le menu horizontal

Une bannière (optionnelle)

Le corps de la page

Voir les dispositions proposées

Le pied de page

Les noisettes

La gestion du thème

Les plugins optionnels à activer

Mise en place technique de la maquette

Désactivations / Activations des plugins

Les réglages de plugins conseillés

Accompagnement

Les mentions légales sur votre site d'établissement

Cadre général

Est-ce obligatoire de renseigner les mentions légales d'un site web ?

En trois minutes, faites un point sur les textes de lois relatifs aux mentions légales de votre site web :

Les textes de références cités dans cette vidéo :

Mettre à jour ses mentions légales avec l'habillage SPIPr-Dane

Mettre à jour ses mentions légales avec l'habillage SPIPr-éduc

Problématique

1ère étape : préparer ses mentions légales

2ème étape : mise en place

Fonctionnalités supplémentaires avec SPIPR-Dane

Afficher une liste de sites en pied de page

Créer un menu XL

Créer l'entrée principale.

Créer les colonnes.

Personnaliser la page contact

Sites SPIP : plateforme d'hébergement des sites

Les maquettes proposées

SPIPr-Éduc

SPIPr-Dane

Contact

SPIPr-Dane-Config - Doc utilisateur

Avertissement à propos des caches

Présentation des options

Import / Export

Personnalisation de base

Couleurs de base

Police de caractères

Personnalisation de l'entête

Couleur d'arrière-plan de l'entête

Image d'arrière-plan de l'entête

Entête

Logos du site

Personnalisation de la barre de navigation

Personnalisation de la page.

Personnalisation du pied de page.

Pour finir

SPIPr-Dane-Noisettes - Doc utilisateur

Présentation de la page de gestion des noisettes

Liste des pages pouvant accueillir des noisettes

Menus (colonne de gauche)

Ajouter des noisettes

Page sommaire (page d'accueil du site)

Modifier le modèle

Personnaliser l'affichage d'un contenu particulier

1^ère étape : préparer ses mentions légales

2^ème étape : mise en place