SPIPr-éduc : tutoriels vidéo

Présentation du jeu de squelettes SPIPr-éduc

Cette vidéo vous présente les principales caractéristiques de SPIPr éduc, un jeu de squelettes SPIP :

• Responsive
• Modulable
• Configurable
• Qui propose des thèmes facilement déployables

Toutes les étapes pour migrer votre charte graphique vers SPIPr-éduc

Dans cette vidéo longue (environ 30 minutes), vous pourrez observer les étapes qui vous permettent de basculer votre charte graphique en passant d’une version non responsive (charte graphique des services de l’État 2012 sous eva-web) à une version responsive (charte académie de Rouen sous SPIPr éduc).

En particulier, vous pourrez voir les étapes suivantes :

1. La préparation du site : sauvegarde de l’habillage et de la base de données, prise de note des éléments qu’il faudra restituer sous SPIPr éduc.
2. La bascule des outils : mise en maintenance du site, passage d’eva-web à SPIPr éduc.
3. La configuration de SPIPr éduc.
4. Un premier nettoyage des outils devenus inutiles.
5. La gestion des mentions légales.
6. L’écriture du slogan.
7. Le nettoyage final (vider le cache et sortir de l’état de maintenance).

Ajouter des articles dans le carousel “A la Une”

Dans la vidéo présentée ci-dessous présente l’ajout d’un article en Une avec un logo de dimensions 680px de large sur 279px de haut. Si vous utilisez la charte graphique Éducation Nationale 2020, les dimensions attendues sont 1200px de large sur 600px de haut.

Placer un article en éditorial

Dans cette vidéo de 2 minutes, voyez comment déposer un article en éditorial ou le retirer en 2 clics. Vous verrez aussi comment ordonner vos articles placés en éditorial.

La gestion des évènements

Dans cette vidéo de 5 minutes, vous verrez comment ajouter des évènements et les lier à vos articles, ainsi que la méthode pour afficher ces évènements et un mini-calendrier sur votre site.

Insérer un bloc avec les logos de vos partenaires

Dans cette vidéo, vous verrez comment insérer le bloc présentant les logos de vos partenaires ou de diverses ressources, internes ou externes à votre site, sur votre page de sommaire.

Mettre en place une barre de liens

Vous souhaitez donner des accès rapides à des ressources externes ou internes à votre site web, cette vidéo vous montre comment faire.

Afficher un nuage de mots-clés

Dans cette vidéo, vous verrez comment insérer un nuage de mots-clés et le configurer.

Voici les règles CSS et LESS proposées dans la vidéo :

padding:10px; margin-bottom:20px; box-shadow: 0 0 4px #666; .nuage {text-align:center; li {display:inline-block; padding: 3px 6px;} br.autobr {display: none;} a:hover {background-color:transparent; color:green;} }

Quelques propositions complémentaires pour adapter les CSS en fonction des tailles des mots-clés générés (fin de la vidéo) :

• augmenter la taille d’un mot-clé de poids 5 : a.nuage5{font-size:1.5em;}
• modifier la couleur d’un mot-clé de poids 8 : a.nuage8{color:3300ff;}
• modifier la police de caractère d’un mot-clé de poids 2 : a.nuage2{font-family:"Calibri";}

Liens vers 2 documentations sur ce site :

• Documentation du plugin Nuage
• Habillage graphique du plugin Nuage

Une carte de géographie dynamique pour présenter votre établissement

En suivant les quelques étapes de la vidéo ci-dessous, vous pourrez déployer une carte de géographie dynamique afin de la proposer aux internautes qui souhaitent se rendre dans votre établissement.

Vous pourrez noter que les règles CSS proposées en fin de vidéo sont les suivantes :

• margin-bottom:20px; pour décoller le bloc de celui qui le suit ;
• padding:10px; pour ajouter une marge intérieure à la bordure grise ;
• box-shadow: 0px 0px 6px #aaaaaa; pour ajouter un ombrage extérieur et donner l’impression que le bloc se détache du fond de la page.

Présentation de la charte graphique Éducation Nationale 2020 qui reprend les codes graphiques du site académique normand ainsi que d’autres sites institutionnels

Basculer sa charte graphique sous le thème Éducation Nationale 2020

Créer votre logo et l’installer dans l’entête de votre site

Mettre en place et configurer un bloc très visuel en page d’accueil

Un carousel amélioré en page d’accueil

Le tutoriel-vidéo ci-dessous vous montre comment mettre en place un carousel “A la Une” utilisant le plugin Slick à la place du carousel classique de SPIPr éduc. Ce nouveau carousel corrige quelques défauts graphiques du carousel classique et s’adapte à tout type de terminal (ordinateur, smartphone...).
Notez que, sur cette charte graphique, les logos sont attendus aux dimensions 1200 pixels de large sur 600 pixels de haut. Pour toute autre dimension ou tout autre format, vos logos seront automatiquement redimensionnés, voire recadrés.

Un affichage des deniers articles en 3 colonnes

La liste des derniers articles du thème “Education nationale 2020” est présentée en 2 colonnes, ce qui occupe une place non négligeable de la page de sommaire d’un site SPIPr éduc. Cette vidéo montre comment basculer en un affichage en 3 colonnes.

Rendre plus attractive la présentation des rubriques

Ce tutoriel vidéo montre comment remplacer le menu vertical des rubriques par un bloc plus attractif présentant les sous-rubriques en 3 colonnes.

Présentation du plugin CRCN qui permet de mettre en avant les compétences du Cadre de Référence des Compétences Numériques dans les articles

Le Cadre de Référence des Compétences Numériques (CRCN), décrit dans le décret du 30 août 2019, définit des compétences numériques, réparties par domaines, à maîtriser.
Ce plugin vous permettra d’attribuer des compétences aux articles de votre site SPIP et de les afficher.

Diffuser une vidéo grâce au service Pod national et au plugin Oembed

La vidéo ci-dessous présente le service Pod Normand, celui-ci ne doit plus être utilisé : le service PodEduc national doit désormais être utilisé depuis l’adresse https://podeduc.apps.education.fr/

Cette vidéo vous présente quelques problématiques de la diffusion de vidéos sous SPIP :

• une méthode interne à SPIP peu intéressante car ne permettant ni le téléchargement progressif, ni de déposer des vidéos lourdes ;
• l’utilisation du service Pod normand permettant de déposer, indexer, enrichir ses vidéos et ensuite les diffuser, à remplacer par PodEduc comme expliqué ci-dessus ;
• la mise en place de l’outil oEmbed qui simplifiera la vie de vos rédacteurs SPIP : on copie l’adresse de la vidéo et elle est directement incrustée dans son article !

Afficher une image 360°

La vidéo ci-dessous vous présente la méthode pour déposer une image 360° dans un article SPIP grâce au plugin Panorama VR.