Contexte du club de spassionautes
Pour ceux qui ont pu assister au club de spassionautes de Giron, qui s'est déroulé du 7 au 9 octobre, le format a été légèrement modifié : il n'y avait pas de présentation technique. Cette décision visait à accorder davantage de place à nos usages et à nos expériences autour de la plateforme S-PASS Territoires, tout en évitant une présentation technique trop dense dans le temps imparti. Cela permettra de programmer davantage de rendez-vous techniques tout au long de l'année, tout en évitant d'attendre les rencontres du club de spassionautes pour communiquer ou pour mettre en ligne de nouvelles fonctionnalités.
Exploration du mode enrichi
Mode enrichi | CAUE du Nord
Le mode enrichi est un éditeur visuel axé sur l'édition de contenu. Il vous permet de rédiger vos descriptions de manière interactive et dynamique grâce à l'utilisation de blocs. Contrairement au mode texte classique, il vous offre une plus grande flexibilité pour organiser et structurer vos informations, rendant ainsi vos ressources encore plus attractives et engageantes.
Fonctionnalités du mode enrichi
Mise en place et ergonomie
Pour faciliter l'édition de contenu, nous avons repensé la mise en page des formulaires d'édition. L'onglet "Informations" a été divisé en deux sections distinctes :
Générales: Cette section comprend les champs rédactionnels tels que le titre, le chapeau et la description.Métadonnées: Cette section contient les champs spécifiques à la ressource, comme les mots-clés, types, dates, acteurs et reconnaissances.
Pour améliorer l'ergonomie des formulaires d'édition, nous avons optimisé l'espace disponible en supprimant la colonne de gauche. Celle-ci contenait auparavant la vignette, le titre, les dates de création et de mise à jour, ainsi que l'identité de la personne ayant mis en ligne la ressource. Ces informations sont désormais placées en haut du formulaire, ce qui améliore l'affichage responsive, notamment en mode mobile.
De plus, les fonctionnalités de partage ont été enrichies pour permettre la modification des droits d'accès.
Accessibilité et limitations
Le mode enrichi est accessible pour toutes les ressources, à l'exception :
Des posts participatifs, qui doivent rester simples.Des conseils destinés aux particuliers, en raison de l'envoi de ces conseils par email.
Prise en main du mode enrichi
Le mode d'édition enrichi n'est pas activé par défaut afin de préserver le comportement initial du champ de description en mode texte classique. Cela permet de maintenir les mises en page existantes et offre à l'utilisateur la possibilité d'activer ce mode pour approfondir la mise en page du contenu selon ses besoins.
Activation et conversion
Dans le formulaire d'édition, un bouton intitulé passer en mode enrichi est disponible à côté du champ de description. En activant ce mode, la mise en page actuelle de la ressource est retraduite en mode enrichi , c'est à dire :
- Un bloc image est inséré avec la première photo (si existante).
- Une galerie d'images est insérée (si plusieurs photos sont présentes dans la ressource).
- La description classique est convertie dans un bloc paragraphe.
Bouton - passer en mode enrichi | CAUE du Nord
Outils d'édition disponibles
- Icône
+: Cette icône apparaît dans la marge à gauche du bloc survolé. Cliquez dessus pour ouvrir un menu proposant les types de contenus que vous pouvez ajouter à votre page.
- Un bouton de réglage du bloc
⋮⋮: Ce bouton apparaît également lorsque vous survolez un bloc. Cliquez et faites glisser pour déplacer le bloc, ou cliquez dessus pour ouvrir un menu d'actions. Par exemple :Options du bloc(réglage spécifique à chaque bloc)Convertir en: Transforme le bloc en un autre type de bloc (par exemple, une liste à puces peut devenir une case à cocher, ou un texte en titre).Supprimer: Retirer le bloc.Déplacer: Déplacer le bloc vers le haut ou vers le bas.Slash-commandes: Un moyen rapide d'ajouter un bloc de contenu à votre document. Tapez/suivi du type de bloc pour l’ajouter, par exemple/imageou/titre.
Tour d'horizon des blocs disponibles
Vous avez la possibilité d'ajouter divers types de blocs, allant des listes à puces aux images, en passant par des cartes. Voici la liste exhaustive des types de blocs :
Blocs de rédaction de contenu
Bloc de titre: H2, H3, H4 (le H1 est réservé au titre de votre ressource).Bloc de paragraphe: Saisissez du texte comme en mode classique avec des options de mise en forme.Bloc encadré: Les blocs encadrés, zones de texte colorées, sont particulièrement utiles pour mettre en avant certains paragraphes ou les distinguer du reste du document (idéaux pour les astuces ou les avertissements).Bloc liste de contrôle: Liste de tâches, case à cocher.Bloc liste: Listes à puces ou listes numérotées.Bloc citation: Pour mettre en avant une citation.
Blocs d'images et de galeries
Bloc image: Intégrer une image tout en ayant la possibilité de contrôler son ratio d'affichage (1:1, 16:9, 4:3 ou original). La légende est automatiquement renseignée par les informations que vous avez fournies dans l'onglet pièces jointes.Bloc galerie: Ce bloc permet d'afficher une collection d'images sous forme de grille. La grille est composée d'une ou plusieurs lignes et de quatre colonnes. Chaque image standard occupe une seule colonne et une seule ligne. En revanche, une grande image peut s'étendre sur deux colonnes et deux lignes, occupant ainsi plus d'espace dans la grille. Cela permet de varier la taille des images et de créer une mise en page visuellement intéressante.Bloc carousel: Ce bloc présente une série d'images qui défilent horizontalement. Vous pouvez naviguer entre les images en cliquant sur des indicateurs ou en les faisant glisser avec la souris, permettant de visualiser plusieurs images dans un espace réduit de manière interactive.Bloc juxtapose: Ce bloc permet de sélectionner une liste d'images et de créer deux menus déroulants pour choisir les images à afficher à gauche et à droite. Vous pouvez ensuite les superposer et les comparer à l'aide d'un curseur glissant.
Blocs de liens
Il existe deux types de liens : les liens internes et les liens externes. Les liens internes dirigent vers des ressources présentes sur notre plateforme. Nous utilisons des identifiants pour ces liens, ce qui leur confère une fiabilité même en cas de modification de notre structure. Les liens externes renvoient vers des sites externes. Nous conservons l'URL complète, ce qui signifie que si le site externe modifie son chemin, le lien peut devenir inactif.
- Liens externes :
Bloc lien web: Ajoute un aperçu visuel cliquable de l’URL que vous souhaitez ajouter à votre ressource.Bloc boutons: Permet d'ajouter et de configurer un ou plusieurs boutons cliquables qui redirigent vers une URL externe.
- Liens internes :
Bloc document: Permet d'ajouter un lien vers un document présent dans la partie pièces jointes de votre ressource.Bloc relations: Permet d'ajouter un lien vers une ressource (sur le même sujet, posts participatifs, voir aussi) présente dans la partie relations.
Des blocs d'intégration de contenu (iframe)
Il identifie automatiquement le type de contenu et insère un "iframe". Un iframe fonctionne comme une fenêtre sur votre page, permettant d'afficher du contenu provenant d'autres sites, tels que des vidéos YouTube ou des cartes, sans avoir à quitter votre éditeur ou à utiliser du code. Cela rend l'ajout de contenu enrichi rapide et intuitif, tout en maintenant votre page bien organisée.
Vous pouvez intégrer le contenu de huit services en collant simplement l'URL de consultation de la page (et non le code iframe) dans le champ prévu à cet effet.
Voici les services actuellement disponibles :
- YouTube
- Vimeo
- Mindomo
- Umap
- IGN : ma Carte
- S-PASS : affichage carte
- Calaméo
- GitHub Page
Pourquoi avon-nous choisi de ne pas permettre l'insertion directe de code d'intégration de services externes (vidéos, widgets, etc.) dans l'éditeur ?
Respect des normes RGPD : Gestion des cookies et protection des données
Lorsque vous intégrez des services externes, la gestion des données personnelles devient cruciale. En contrôlant ce que vous intégrez via l'éditeur, nous pouvons :
• Anticiper et gérer les cookies : Certains services tiers peuvent injecter des cookies sans votre consentement, ce qui est contraire au RGPD. En utilisant des outils intégrés, nous nous assurons que seuls les services conformes à la réglementation en matière de cookies sont utilisés.
• Obtenir le consentement des utilisateurs : Si un service doit stocker des données sur vous, la plateforme peut vous fournir des options pour demander un consentement explicite, évitant ainsi toute violation des règles de confidentialité.
Sécurité : éviter l'intégration de code malveillant
Permettre l'intégration directe de services externes via des iframes ou du code JavaScript peut présenter des risques :
• Protection contre les scripts malveillants : Certains services ou codes intégrés peuvent contenir des scripts malveillants qui compromettent votre sécurité, infectent les visiteurs ou exposent des données sensibles.
• Filtrage et validation : Nous contrôlons quels services sont autorisés et validons que le code est sécurisé avant son intégration, réduisant ainsi les risques pour vous et nos utilisateurs.
Alignement avec la ligne éditoriale
En limitant les services intégrés à ceux qui correspondent à votre ligne éditoriale, nous renforçons la cohérence de nos contenus.
• Pertinence des services : Les services mis à disposition enrichissent véritablement l'expérience utilisateur, comme les intégrations vidéo ou les cartes, tout en évitant les services intrusifs ou inappropriés.
• Contrôle sur l'apparence et le branding : Certains services tiers peuvent introduire des éléments visuels ou publicitaires non désirés.
Performance et optimisation du site
Les intégrations non contrôlées peuvent ralentir notre plateforme :
• Optimisation du chargement : En limitant et validant les services intégrés, nous évitons l'ajout de scripts lourds ou de contenus qui pourraient nuire à la performance et à l'expérience utilisateur.
Des blocs spécifiques
Bloc délimiter: Insère une fine ligne grise pour séparer le contenu.Bloc de code: Ajoute un bloc de code dans n'importe quel langage de programmation, avec la mise en forme et la coloration syntaxique.
Gestion et affichage des niveaux de partage
Niveaux de partage disponibles
Une ressource peut avoir différents niveaux de partage :
- Utilisateur : Partage individuel.
- Groupe : Partage limité au groupe.
- Communauté : Partage au sein des utilisateurs de la plateforme.
- Public : Ouvert à tous.
Par exemple, une ressource peut être accessible à tout le monde (publique), mais contenir des pièces jointes qui ne sont visibles que par certaines personnes (privées). Inversement, une ressource privée peut avoir des pièces jointes publiques. Cela signifie qu'un utilisateur peut voir la ressource sans avoir accès à certaines pièces jointes qui sont réservées à un groupe spécifique.
Gestion des blocs selon les droits d'accès
Dans le mode enrichi, certains blocs tels que les images ou les documents peuvent contenir des contenus ayant un niveau de partage différent de celui de la ressource. De plus, il est également possible qu'un élément de contenu fasse référence à un élément qui a été supprimé de la ressource.
Pour ces situations, voici comment les blocs sont gérés :
Bloc accessible: Si les éléments sont disponibles et accessibles par l'utilisateur, le bloc s'affiche normalement.Bloc restreint: Si l'utilisateur n'a pas les droits nécessaires, le bloc apparaît en gris ou hachuré, avec un pictogramme d'interdiction 🚫 pour signaler un problème d'autorisation.Bloc avec contenu manquant: Si le contenu référencé par le bloc n'existe plus, le bloc s'affiche également en gris ou hachuré, accompagné d'un pictogramme de lien cassé.
