Jahia UNIL post refonte web - Documentation publique
EN CONSTRUCTION
- Documentation pour les sites Jahia qui utilisent déjà le nouveau design post refonte web 2024 (site de la Direction et des services centraux, sites des facultés, instituts et centres qui ont démarré leur migration)
- Introduction à Jahia
- Structure et design des pages web Jahia
- Bases de l'édition dans Jahia
- Liste des composants Jahia
- Composant Jahia > Contenu > Texte
- Composant Jahia > Formulaire > Formulaire
- Composant Jahia > Media > Audio
- Composant Jahia > Media > Flux RSS/Atom
- Composant Jahia > Media > Galerie d'images
- Composant Jahia > Media > Image(s)
- Composant Jahia > Media > Plan
- Composant Jahia > Media > SVG
- Composant Jahia > Media > Social wall
- Composant Jahia > Media > Vidéo
- Composant Jahia > Mise en page > Accordéon
- Composant Jahia > Mise en page > Onglets
- Composant Jahia > Mise en page > Tableau
- Composant Jahia > Navigation > Bouton
- Composant Jahia > Navigation > Groupe de pages
- Composant Jahia > Ressources > Citation
- Composant Jahia > Ressources > Groupe de liens
- Composant Jahia > Ressources > Interview
- Composant Jahia > Teasers > Teasers avec icône
- Composant Jahia > Teasers > Teasers avec texte
- Composant Jahia > Teasers > Teasers de publication
- Composant Jahia > Teasers > Teasers externes verticaux
- Composant Jahia > Texte et média > Highlight
- Composant Jahia > Texte et média > Image et texte
- Rôles dans l'édition Jahia
- Taille des images dans l'édition Jahia
- Gestion du multilinguisme dans Jahia
- Articles sur la refonte web
- Questions fréquentes sur l'édition Jahia
- Demande d'ajout d'icône(s) dans le composant Jahia "Teaser avec icône"
Introduction à Jahia
Qu'est-ce que Jahia ?
Jahia est un CMS, ou content management system : c'est une application web permettant de créer et mettre à jour des sites web. Il existe de nombreux CMS permettant de répondre à différents besoins. A l'UNIL, nous employons Jahia pour réaliser nos sites web institutionnels : services, facultés, prestations, etc. WordPress est utilisé en complément pour d'autres types de sites (événements, groupes de recherche, blogs...)
La documentation figurant dans ce wiki concerne uniquement la version de Jahia employée à l'UNIL et les templates et composants développés à l'UNIL. Elle n'est pas pertinente pour des personnes qui chercheraient un mode d'emploi Jahia global à employer hors du contexte UNIL.
Que pourrez-vous éditer dans votre site Jahia ?
Les différents sites web institutionnels de l'UNIL doivent clairement pouvoir être reconnaissables comme faisant partie d'un ensemble. Pour cela ils font auppel au même design et utilisent les mêmes modèles de page et composants de contenus : tableaux, boutons, galeries d'images etc. Par conséquent, ils vont partager plusieurs éléments communs, au niveau structurel, visuel et fonctionnel : en-tête, pied de page, navigation, styles etc. Les aspects concernant la structure et la mise en page sont décrits dans la ligne graphique web UNIL.
Voici ce que vous pourrez éditer dans votre site Jahia :
- structure du site, contenu des pages à l'aide de plusieurs composants (texte, tableau, galerie, formulaire...)
- gestion des liens hypertextes et mise en forme du contenu
- gestion des images et des documents à télécharger (PDF, Word...)
- insertion de certains contenus externes (actualités et événements saisis dans MyUNIL, publications Serval, vidéos RecUNIL ou YouTube...)
- création et gestion de formulaires (pour contacts et inscriptions)
- statut des pages: brouillon ou publiées, visibles ou masquées
Principe de l'imbrication : pages > composants > éléments
Un site web Jahia est composé d'un ensemble de pages, qui sont elles-mêmes composées de composants de contenu, et ces composants sont une addition d'éléments de contenu.
Les composants de contenu
Il existe plusieurs types de composants qui peuvent voisiner sur une page, comme dans cet exemple où 3 composants différents sont utilisés :
Edition et publication : 2 étapes distinctes
Les ajouts ou modifications de contenu dans les sites Jahia ne sont pas publiés immédiatement, la publication est un processus distinct qu'il faut lancer manuellement. Ceci permet de compléter et relire une nouvelle page ou un nouveau contenu avant de le rendre visible pour tout le monde.
Ce processus concerne également les suppressions de contenu: lorsqu'on supprime une page ou un contenu, il faut ensuite "publier la suppression" pour qu'elle soit effective.
Possibilité de masquer une page ou un contenu temporairement
Jahia permet de masquer temporairement une page ou un contenu si on souhaite le rendre temporairement non visible mais qu'on veut le garder pour un usage ultérieur. Pour cela il ne faut pas dépublier ce contenu, mais agir sur sa propriété de visibilité.
Formulaires
Un composant "formulaire" permet d'ajouter sur une page un formulaire d'inscription ou de contact. Les données récoltées au moyen de ce formulaire sont consultables dans l'interface d'édition de Jahia, et sont également envoyées par email à l'adresse mail spécifiée dans les paramètres du formulaire.
Pages ou rubriques protégées par mot de passe
En option, il est possible de restreindre la consultation d'une page ou d'une rubrique (=une page et ses sous-pages) à un groupe de personnes qui devront s'idenfier par mot de passe. Ce mécanisme n'est applicable que pour des groupes de personnes disposant d'un compte UNIL, et permet ainsi de créer si nécessaire une partie "intranet" dans un site Jahia. Son activation n'est pas possible directement dans l'interface, il faut en faire la demande au helpdesk.
Référencement
Jahia permet également de travailler à un référencement efficace du site, tant au niveau de sa structure (arborescence, niveaux de titres dans les pages) que de la saisie de méta descriptions et de textes alternatifs. Nous envoyons régulièrement aux principaux moteurs de recherche la liste des pages de nos sites Jahia.
[ Documentation Jahia: retour au sommaire ]
Structure et design des pages web Jahia
EN CONSTRUCTION
- Pendant la construction de cette page, merci de vous référer aux slides 8 à 23 de cette présentation :
formation Jahia refonte web - Voir aussi la liste des composants et la taille des images.
[ Documentation Jahia: retour au sommaire ]
Bases de l'édition dans Jahia
L'interface d'édition
Se connecter
Se déconnecter
Edition des pages: Page Composer
Gestion des images et documents: jContent
Les interactions de base
3 actions fréquentes dans la manipulation des pages et des composants :
- glisser/déposer, pour déplacer une page dans la structure du site ou un composant dans une page
- clic droit, pour accéder au menu contextuel
- bouton "+ tout contenu" au bas de chaque page, pour ajouter un nouveau composant sur la page
Edition et publication = étapes distinctes
L'édition d'une page ou d'un composant (ajout, modification, suppression) n'est pas directement visible en ligne par les personnes qui visitent le site. Il faut ensuite publier ces modifications.
Avant de publier, on peut optionnellement utiliser le mode "aperçu" pour vérifier que les changements effectués correspondent à notre attente. Ce mode affiche dans un nouvel onglet une prévisualisation de la page avant sa publication.
Ensuite on peut passer à la publication :
Statut de publication
L'affichage du statut de publication est visible en haut à droite de chaque page :
Les suppressions de contenus, de pages, images ou documents doivent également être publiées : la publication achève le processus de suppression. Un élément supprimé mais "non publié après suppression" reste visible en ligne.
Masquer temporairement un contenu
Jahia permet de masquer temporairement un contenu dans une page, par exemple en le rendant non visible à partir d'une certaine date. Ceci permet de conserver certains contenus que l'on souhaite rendre provisoirement invisibles pour les visiteurs du site, en gardant l'option de pouvoir à nouvau les rendre visibles ultérieurement.
[ Documentation Jahia: retour au sommaire ]
Liste des composants Jahia
Liste des composants disponibles pour éditer les pages
Bouton "ajouter un composant"
Groupe |
Composant |
|
Contenu | Texte | Permet d’ajouter du contenu de type textuel, avec des options de mise en forme simples. Il peut être utilisé pour structurer l’information sur une page à l’aide de titres, paragraphes, listes et liens. |
Formulaire | Formulaire | Permet d’ajouter un formulaire simple sur une page de votre site, par exemple pour collecter des inscriptions, des retours ou des questions. |
Media | Audio |
Permet d’ajouter un lecteur audio directement dans une page du site. Il est conçu pour mettre à disposition un podcast ou une playlist. |
Flux RSS/Atom |
Permet d’afficher automatiquement les dernières actualités ou contenus provenant d’un flux RSS externe. | |
Galerie d'images | Permet d’afficher plusieurs images liées à un même sujet, dans un format visuel attrayant. Il est particulièrement utile pour montrer une série de photos ayant un sens éditorial (événement, ambiance, portraits, lieux…). | |
Image(s) | Permet d’insérer une ou deux images côte à côte dans une page. | |
Plan | Permet d’ajouter une carte interactive centrée sur le campus de l’UNIL, pour situer des bâtiments, des accès ou d’autres informations géolocalisées. Il s’appuie sur Planète UNIL. | |
SVG |
Permet d’ajouter une illustration vectorielle dans une page web. Il est particulièrement adapté aux pictogrammes, schémas simples ou illustrations légères. | |
Social wall |
||
Vidéo |
Permet d’intégrer facilement une vidéo dans une page web, que ce soit pour illustrer un contenu, enrichir une information ou proposer un contenu audio-visuel de l’UNIL. Il accepte plusieurs plateformes (YouTube, Vimeo, REC UNIL, av.unil.ch(s'ouvre dans un nouvel onglet), Play RTS). | |
Mise en page | Accordéon |
Permet d’afficher du contenu de manière compacte et structurée, en le répartissant dans des sections repliables. Il aide à organiser les informations longues ou denses, tout en évitant de surcharger la page visuellement. |
Onglets |
Permet d’afficher du contenu de manière compacte et structurée, en le répartissant dans des onglets. Il aide à organiser les informations longues ou denses. | |
Tableau |
Permet d’organiser de façon concise et lisible un ensemble d’informations sur une page. C’est un outil idéal pour structurer des contacts, des prestations ou des liens utiles de manière compacte et efficace. | |
Navigation | Bouton |
Permet de créer un appel à l’action clair et visible sur une page, comme par exemple "S'inscrire", "En savoir plus" ou "Télécharger". Il est conçu pour orienter la navigation de l’utilisateur vers un lien interne ou externe. |
Groupe de pages |
Permet de créer une liste de liens claire et structurée vers des pages internes ou des ressources externes. Il est conçu pour mettre en valeur un ensemble de contenus liés, sous forme de blocs de navigation facilement identifiables. | |
Ressources | Citation | Permet de mettre en valeur une citation d’une personne (avec photo, nom, fonction) afin de renforcer un message ou d’illustrer une information. |
Groupe de liens |
Permet d’afficher un ensemble de liens contextuels (internes, externes ou vers des documents), sous forme de bloc bien délimité. Ce composant est conçu pour compléter un contenu principal, en orientant les utilisateurs vers des ressources utiles. | |
Interview |
Permet de présenter une citation forte, une personne mise en avant (avec photo, nom, fonction), et un jeu de questions-réponses sous forme d’accordéon. |
|
Teasers | Teasers avec icône |
Permet de créer une liste de liens rapides, chacun accompagné d’une icône reconnaissable. Ce type de teaser est particulièrement adapté pour orienter l’utilisateur vers des pages pratiques, des rubriques spécifiques ou des actions fréquentes. Il facilite la navigation. |
Teasers avec texte |
Permet de rediriger vers d'autres pages. Il peut s'agir de pages enfants, d'autres pages du site, voire de pages de sites externes. Ce composant permet donc de créer une liste de liens visuellement reconnaissables. Chaque teaser combine un titre, un court descriptif et un lien, c’est un excellent outil pour créer des accès rapides et lisibles vers des pages de référence ou des contenus complémentaires. |
|
Teasers de publication |
Permet de mettre en avant une publication ou un contenu éditorial par un teaser visuel vertical composé d’une image, d’un titre et d’un lien. Il est conçu pour attirer l’attention sur un contenu publié – comme une page dédiée à un magazine, un article de fond, une archive – qu’il soit interne ou externe à l’UNIL. |
|
Teasers externes verticaux | Permet de mettre en avant jusqu’à 6 contenus externes à l’UNIL, en lien avec la vie ou l’image de l’université. C’est un outil idéal pour présenter une sélection d’articles, d’interviews, de reportages ou d’interventions médiatiques concernant l’UNIL tout en respectant une mise en page harmonieuse. | |
Text et media | Highlight |
Permet de valoriser un élément cliquable sur les pages de niveau 1 (landing). Il peut s'agir aussi bien de pages filles, que d’autres pages du site ou même des pages de sites externes. |
Image et texte |
Bouton "ajouter un composant news et agenda"
Pour intégrer des actualités ou événements sur une page, quatre composants sont disponibles. Ils s’appuient tous sur les informations remplies lors de la création de l’actualité ou de l'événement, mais proposent deux mises en page différentes.
Teasers d'actualités en vedette |
|
Teasers d'actualités verticaux |
|
Teasers d'événements verticaux |
|
Teasers d'événements en vedette |
|
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Contenu > Texte
Le composant Texte permet d’ajouter du contenu de type textuel, avec des options de mise en forme simples. Il peut être utilisé pour structurer l’information sur une page à l’aide de titres, paragraphes, listes et liens. Ce composant est idéal pour présenter des contenus éditoriaux, des descriptions détaillées, etc.
Cas d'utilisation
- Titres de paragraphe : afin de faciliter la lecture et le découpage d’une page, il est possible d’utiliser plusieurs niveaux de titres, h3 et h4. Le niveau 2 (<h2>) est le titre du composant Texte. Il peut y avoir plusieurs niveaux de titres 3 et 4 dans le corps du composant Texte.
- Styles : Un style basique peut être ajouté, mettre un texte en italique / gras / exposant / indice, mais également ajouter un caractère spécial.
- Liens : il est possible d’ajouter des liens dans le composant.
- Listes numérotées ou à puces : les listes permettent d’énumérer des éléments et de faciliter la lecture ou le scannage des informations contenues dans la page.
- Les cas d’utilisation Styles/Liens/Listes numérotées ou à puces peuvent se combiner entre eux lorsque l’édition de contenus en a besoin.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Formulaire > Formulaire
Le composant Formulaire permet d’ajouter un formulaire simple sur une page de votre site, par exemple pour collecter des inscriptions, des retours ou des questions.
Bonnes pratiques
Plusieurs bonnes pratiques sont nécessaires pour la création d’un formulaire :
- Simplicité : le formulaire doit être le plus simple possible et utiliser le minimum de champs nécessaires. Il est par exemple déconseillé de demander le genre de la personne.
- Longueur : il a été prouvé que plus le formulaire est long, plus le taux d’abandon est élevé.
- Hiérarchie : classer et hiérarchiser les informations demandées
- Temporalité : indiquer le temps de complétion
- Aide contextuelle : utiliser des textes additionnels pour aider les utilisatrices et utilisateurs lorsque le champ pourrait prêter à confusion
Il est important que le processus d’envoi correspondent aux standard attendus par la majeure partie des usagers :
- Au minimum, il est nécessaire de proposer un bouton d’envoi permettant à la personne de décider à quel moment elle est prête à envoyer ses informations et de faire valider les informations entrées dans les champs.
- Un feedback doit toujours être donné après l’envoi: le formulaire a-t-il bien été soumis ou y a-t-il des erreurs à corriger ? Par défaut, la formule suivante est intégrée: "Le formulaire a été envoyé avec succès".
Cas d’utilisation
Le formulaire à votre disposition permet de choisir entre les options de champs suivantes:
- Texte (Text area)
- Demande d’informations de type alphanumériques (Text input),
- Numéro de téléphone (Phone input),
- Sélection entre différentes options (Select input ou Radio input; un seul choix possible),
- Case à cocher (Checkbox input, un ou plusieurs choix possible),
- Interrupteur (Toggle Switch, sélection entre deux options)
- Sélection d’une date ou d’une période (Datepicker)
- Insertion d’un mot de passe (Password input).
Le formulaire disponible sur le CMS Jahia propose d’envoyer l’information à une adresse email qu’il sera nécessaire d’intégrer à la création du formulaire ainsi que le sujet du message qui sera reçu par le destinataire. Les données soumises via une formulaire Jahia sont également compilées dans un fichier qui peut être téléchargé ultérieurement.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Media > Audio
Le composant Audio permet d’ajouter un lecteur audio directement dans une page du site. Il est conçu pour mettre à disposition un podcast ou une playlist. Ce composant répond à un besoin croissant : permettre l’écoute de contenus audio produits ou relayés par l’UNIL, que ce soit pour s’informer, découvrir ou approfondir un sujet.
Bonnes pratiques
Afin de respecter la position éco-responsable choisie pour les plateformes digitales de L’Université de Lausanne, l’intégration d’audio dans la page doit amener une plus-value au contenu et aider à sa compréhension. Il est recommandé de décrire brièvement le contenu de l’audio, afin que les utilisatrices et utilisateurs sachent de quoi il s’agit avant de le charger pour l’écouter.
Cas d'utilisation
Le composant se décline en deux variantes:
- Lecteur simple : contient un seul élément audio. Il est composé d’un titre, d’un sous-titre
- Playlist : contient plusieurs éléments audio d’une liste de lecture. Il est composé d’un titre, d’un sous-titre et un pictogramme à droite indique qu’il s’agit d’une playlist. Les lecteurs de fichiers audio peuvent être ajoutés sur toutes les pages à tous les endroits du corps de la page tant qu’ils sont pertinents et amènent une plus-value.
Remarques particulières
Dans un souci d’éco-responsabilité, l’audio n’est pas automatiquement chargé à l’ouverture de la page. Seul un clic sur le composant permettra de charger la source audio depuis la plateforme qui l’héberge. Le média sera alors prêt à être écouté. La plateforme proposée à l’Université de Lausanne est podcastics.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Media > Flux RSS/Atom
Le composant RSS/Atom permet d’afficher automatiquement les dernières actualités ou contenus provenant d’un flux RSS ou Atom (format sucesseur de RSS) externe. Ce composant est utile pour partager des contenus à jour sans avoir à les ressaisir manuellement.
Cas d'utilisation
Ce composant contient un titre, une description, des teasers des éléments du flux (recommandation : 3 éléments), un bouton qui permet de s’abonner au flux ainsi qu’un lien “Plus d'informations" renvoyant vers la page d'informations légales, décrivant ce qu'est une flux RSS et son utilisation.
Le composant Flux RSS est utile pour afficher les dernières actualités, articles ou publications. Il permet aussi de s’y abonner.
- Actualités, événements ou blog : il est possible d’intégrer un flux RSS dans une section dédiée aux actualités, articles de blog ou mises à jour. Cela permet aux visiteuses et visiteurs de rester informés des derniers contenus publiés.
- Page d'Accueil : il est possible d’intégrer un flux RSS à la page d’accueil pour afficher les dernières actualités ou événements.
- Page de ressources ou de publications : le flux RSS peut être utilisé afin d’afficher les publications issues de Serval.
Bonnes pratiques
Le composant Flux RSS nécessite l’intégration de plusieurs éléments pour permettre son affichage:
- l’URL de flux RSS à intégrer dans le composant.
- Le nombre d'entrées distinctes qui seront remontées par le flux RSS. Par défaut, 10 entrées sont affichées.
- En option, il est possible d’ajouter un Titre ainsi qu'un Sous-titre afin de donner du contexte au flux RSS et aux entrées qu'il intègre dans la page.
Notre documentation pour comprendre les flus RSS/Atom
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Media > Galerie d'images
Le composant Galerie d’images permet d’afficher plusieurs images liées à un même sujet, dans un format visuel attrayant. Il est particulièrement utile pour montrer une série de photos ayant un sens éditorial (événement, ambiance, portraits, lieux…).
Ce composant sert à visualiser plusieurs images reliées à une même thématique afin d’illustrer un propos. Il permet d’afficher ces images en plein écran et indique le nombre d’images contenues dans la galerie. Afin que la création de contenu respecte la démarche éco-responsable de l’Université de Lausanne, l’intégration d’images dans la page doit amener une plus-value au contenu et aider à sa compréhension. Il faut éviter les images prétextes.
Droits d’auteur et copyright
Depuis l’entrée en vigueur de la révision de la loi sur le droit d'auteur le 1er avril 2020, toutes les photos sont protégées en Suisse. Il n’est donc pas légal d’utiliser des images au hasard sur le web ou les réseaux sociaux sans l’accord de leur propriétaire. Les composants dotés d’images sont donc pour la plupart prévus pour accueillir un copyright que l’usager peut ajouter dans un champ ad hoc du back office. De plus, pour la fonction Édition de contenu ou Édition de pages, il est recommandé d’ajouter des sources tierces (hors celles proposées par l’UNIL) dans les informations légales dans un espace Crédit photos.
Qu’elles soient sous licence libre ou mises à disposition par l’UNIL, les images peuvent poser des problèmes dans leur usage. Le fait qu'une image puisse être utilisée gratuitement ne signifie pas forcément que son auteur ne doive pas être mentionné (par exemple si vous utilisez une image gratuite sous licence Creative Commons autre que CC0 et que vous ne mentionnez pas sa source, ceci peut faire l'objet de poursuites). Voici quelques autres points à tenir compte lors de votre usage des images:
- Droit à l’image et droit d’auteur pour les marques et monuments: Certains photographes mettent parfois à disposition dans des banques d'images gratuites des images qu'ils ont réalisées, mais pour lesquelles ils ne possèdent pas tous les droits (par exemple l'accord de personnes reconnaissables, ou les droits de copyright des marques ou de certains lieux ou monuments).
- Partage de catalogues entre banques d’images: Certaines banques d'images gratuites mettent à disposition des images provenant d'autres banques gratuites, mais cette situation peut évoluer dans le temps (par exemple la banque d'images A vous propose une image qui provient en fait de la banque d'image B, qui entre temps ne la propose plus).
- Spécialistes en copyright et Copyright trolling: Pour protéger leurs droits de leurs images, de nombreux photographes font appel à des entreprises dotées de moyens de détection des utilisations de leurs images, qui fondent leur business model sur des réclamations de compensations financières pour les utilisations illicites ou ne mentionnant pas les auteurs. Pour complexifier la situation, certains individus peu scrupuleux pratiquent également le copyright trolling pour tenter de s'enrichir illégalement. Vous trouverez (plus d’informations sur les droits et le copyright ainsi que sur les bases de données disponibles à l’UNIL sous Images)[https://docs.google.com/document/d/1IYtw79enlpDATnKHGCFYOWB0OhiWoFmaNDjf0IXq718/edit?pli=1#heading=h.fnsqjh68tnwz].
Bonnes pratiques
Les galeries d’images doivent mentionner un copyright (sur le composant ou dans le crédit photo; voir plus haut). Chaque image peut aussi avoir une description optionnelle qui permet de donner un contexte à cette dernière. Un maximum de 120 caractères espaces compris peuvent être saisis dans la description de l'image. Un maximum de 60 caractères espaces compris peuvent être saisis dans le copyright de l'image.
Chaque galerie peut accueillir un maximum de 20 images et il est nécessaire de bien choisir la première image de la galerie. En effet, la première image doit être représentative du contenu car elle sera visible avant même l’ouverture de la galerie.
Les images doivent être correctement décrites dans la balise “alt” (il s’agit d’un texte alternatif qui décrit l’image pour les personnes qui ne seraient pas en capacité de la voir ou si une erreur de chargement survient). Par défaut, la description de l’image est reprise dans le texte alternatif de celle-ci.
Chaque composant intégrant une image nécessite, pour fonctionner de manière optimale, une certaine taille et ratio de média. Les tailles d'images recommandées sont indiquées à lors de l’utilisation du composant et dans le styleguide. Il est nécessaire de respecter ces recommandations pour un affichage optimal. Enfin, il est indispensable d’optimiser les images et leur poids afin qu’elles soient plus rapides à charger et consomment moins de ressources serveur.
Cas d'utilisation
Les galeries d’images peuvent être ajoutées sur toutes les pages à tous les endroits du corps de la page tant qu’elles sont pertinentes et amènent une plus-value (voir plus haut). Il existe 2 variantes de ce composant :
- Avec description optionnelle, une simple galerie, avec une description optionnelle, un copyright et le nombre d’images contenues dans la galerie
- Avec débordement des slides : le composant peut détecter lorsque le nombre de miniatures dépasse la capacité d'affichage. Il affichera des flèches au format desktop.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Media > Image(s)
Le composant "Image(s)" permet d’insérer une ou deux images côte à côte dans une page.
Les images servent à illustrer un propos dans la page. Afin que la création de contenu respecte la position éco-responsable choisie pour les plateformes numériques de l’Université de Lausanne, l’intégration d’images dans la page doit amener une plus-value au contenu et aider à sa compréhension. Il faut éviter les images prétextes.
Droits d’auteur et copyright des images
Depuis l’entrée en vigueur de la révision de la loi sur le droit d'auteur le 1er avril 2020, toutes les photos sont protégées en Suisse. Il n’est donc pas légal d’utiliser des images au hasard sur le web ou les réseaux sociaux sans l’accord de leur propriétaire. Les composants dotés d’images sont donc pour la plupart prévus pour accueillir un copyright que l’usager peut ajouter dans un champ ad hoc du back office. De plus, pour la fonction Édition de contenu ou Édition de pages, il est recommandé d’ajouter des sources tierces (hors celles proposées par l’UNIL) dans les informations légales dans un espace Crédit photos.
Afin de respecter le droit en vigueur, l’UNIL vous propose plusieurs solutions adaptées à vos besoins:
- Unimedia: des images des collections de l'UNIL, pour lesquelles nous possédons les droits d'auteurs;
- Banques gratuites: listes de sites proposant des images souvent sous licence libre Creative Commons zéro (CC0);
- Dreamstime: banque commerciale destinées aux employé·e·s de l'UNIL et institutions partenaires.
Qu’elles soient sous licence libre ou mises à disposition par l’UNIL, les images peuvent poser des problèmes dans leur usage. Le fait qu'une image puisse être utilisée gratuitement ne signifie pas forcément que son auteur ne doive pas être mentionné (par exemple si vous utilisez une image gratuite sous licence Creative Commons autre que CC0 et que vous ne mentionnez pas sa source, ceci peut faire l'objet de poursuites). Voici quelques autres points à tenir compte lors de votre usage des images:
- Droit à l’image et droit d’auteur pour les marques et monuments: Certains photographes mettent parfois à disposition dans des banques d'images gratuites des images qu'ils ont réalisées, mais pour lesquelles ils ne possèdent pas tous les droits (par exemple l'accord de personnes reconnaissables, ou les droits de copyright des marques ou de certains lieux ou monuments). -Partage de catalogues entre banques d’images: Certaines banques d'images gratuites mettent à disposition des images provenant d'autres banques gratuites, mais cette situation peut évoluer dans le temps (par exemple la banque d'images A vous propose une image qui provient en fait de la banque d'image B, qui entre temps ne la propose plus).
- Spécialistes en copyright et Copyright trolling: Pour protéger leurs droits de leurs images, de nombreux photographes font appel à des entreprises dotées de moyens de détection des utilisations de leurs images, qui fondent leur business model sur des réclamations de compensations financières pour les utilisations illicites ou ne mentionnant pas les auteurs. Pour complexifier la situation, certains individus peu scrupuleux pratiquent également le copyright trolling pour tenter de s'enrichir illégalement.
Bonnes pratiques
Les images doivent mentionner un copyright (sur le composant ou dans le crédit photo; voir plus haut). Elles peuvent aussi avoir une description pour l’usager qui permet de donner un contexte à cette image, mais celle-ci est optionnelle. Un maximum de 120 caractères espaces compris peuvent être saisis dans la description de l'image. Un maximum de 60 caractères espaces compris peuvent être saisis dans le copyright de l'image.
Les images doivent être correctement décrites dans la balise “alt” (il s’agit d’un texte alternatif qui décrit l’image pour les personnes qui ne seraient pas en capacité de la voir ou si une erreur de chargement survient).
Chaque composant intégrant une image nécessite, pour fonctionner de manière optimale, une certaine taille et ratio de média. Les tailles d'images recommandées sont indiquées à lors de l’utilisation du composant et dans le styleguide. Il est nécessaire de respecter ces recommandations pour un affichage optimal. Enfin, il est indispensable d’optimiser les images et leur poids afin qu’elles soient plus rapides à charger et consomment moins de ressources serveur.
Cas d'utilisation
Les images peuvent être ajoutées sur toutes les pages à tous les endroits du corps de la page tant qu’elles sont pertinentes et amènent une plus-value.
Il existe plusieurs variantes de ce composant :
- Deux images côte à côte : ells sont disposées sur deux colonnes,
- Avec bordure, qui est utilisé pour les schémas et graphiques ou les images sur fond blanc intégrant du texte.
- Afin d’intégrer des infographies parfois complexes, un composant Infographie SVG est spécifiquement prévu pour intégrer ce type d’images, uniquement au format SVG. Afin d’être pleinement lisibles, les infographies de ce composant sont les seules à ne pas avoir de version propre à l’éco-conception
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Media > Plan
Le composant Plan permet d’ajouter une carte interactive centrée sur le campus de l’UNIL, pour situer des bâtiments, des accès ou d’autres informations géolocalisées. Il s’appuie sur Planète UNIL et offre une navigation fluide, avec des options de personnalisation (zoom, centre, couches) et des plans interactifs des bâtiments du campus.
Bonnes pratiques
Dans un souci de durabilité, il a été choisi de limiter les interactions car elles ont pour conséquences de faire des requêtes multiples vers le serveur ou vers un service. C’est pourquoi, il a été décidé de privilégier l’affichage d’une image et de charger la carte uniquement si la personne clique sur “charger la carte”.
Cas d'utilisation
Les cartes permettent de localiser un lieu. Elles peuvent être utilisées sur les pages “accès” ou par exemple.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Media > SVG
Le composant SVG permet d’ajouter une illustration vectorielle dans une page web. Contrairement aux images classiques (JPEG ou PNG), le format SVG reste net à toutes les tailles, même sur écran haute résolution et n'est pas affecté par le mode éco-conçu. Il est particulièrement adapté aux pictogrammes, schémas simples ou illustrations légères.
Bonnes pratiques
Ce composant doit suivre les recommandations usuelles de toutes les images. Les images doivent:
- être correctement décrites dans la balise “alt” (il s’agit d’un texte alternatif qui décrit l’image pour les personnes qui ne seraient pas en capacité de la voir ou si une erreur de chargement survient).
- avoir, pour fonctionner de manière optimale, une taille et un ratio de média définis. Les tailles d'images recommandées sont indiquées à l’utilisation dans le composant en toute transparence pour la personne intégrant le composant. Il est nécessaire de respecter ces recommandations pour un affichage optimal.
- avoir un poids optimisé afin qu’elles soient plus rapides à charger et consomment moins de ressources serveur.
Cas d’utilisation
Ce composant peut être ajouté sur toutes les pages à tous les endroits du corps de la page tant qu’elle est pertinente et amène une plus-value.
Ce composant n’accepte que et uniquement des fichiers au format SVG.
Ce composant utilisant un média de type image est le seul à ne pas être automatiquement traité pour l’éco-conception comme toutes les autres images des sites afin de garantir une lisibilité optimale des informations.
Remarques
Une bordure optionnelle peut être ajoutée autour de l’infographie afin de faire ressortir cette dernière, notamment si les informations dans le SVG sont sur écrites sur fond blanc.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Media > Social wall
En construction.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Media > Vidéo
Le composant Vidéo permet d’intégrer facilement une vidéo dans une page web, que ce soit pour illustrer un contenu, enrichir une information ou proposer un contenu audio-visuel de l’UNIL. Ce composant accepte plusieurs plateformes (YouTube, Vimeo, REC UNIL, av.unil.ch(s'ouvre dans un nouvel onglet), Play RTS) et affiche une image de couverture avec bouton "play" pour inviter à la lecture.
Droits d’auteur et copyright des vidéos
La Cour de justice de l’Union Européenne estime que les vidéos embed (intégrée et embarquée dans une page web) ne constituent pas une infraction au copyright, même sans avoir obtenu l’autorisation des ayants droit pour sa diffusion. Les législations évoluant continuellement, il est important de garder de bonnes pratiques telles que citer vos sources, y compris pour des vidéos. Un champ a été prévu à cet effet.
Bonnes pratiques
Les vidéos peuvent mentionner un copyright sur le composant (voir plus haut). Elles peuvent aussi avoir une description optionnelle destinée à donner plus de contexte à la vidéo. Un maximum de 120 caractères espaces compris peuvent être saisis dans la description de la vidéo. Un maximum de 60 caractères espaces compris peuvent être saisis dans le copyright de la vidéo.
Afin de respecter la position éco-responsable choisie pour les plateformes digitales de l’Université de Lausanne, l’intégration de vidéos dans la page doit amener une plus-value au contenu et aider à sa compréhension. Il faut éviter les vidéos prétextes.
Cas d’utilisation
Les vidéos peuvent être ajoutées sur toutes les pages à tous les endroits du corps de la page tant qu’elles sont pertinentes et amènent une plus-value. Le composant vidéo accepte les formats suivants : -REC·UNIL (ubicast) : cette source est le média serveur de l’Université de Lausanne permettant à la Communauté de diffuser des cours ou des événements en direct et en différé en tant qu’outil pédagogique.
- YouTube : cette source permet la diffusion de vidéos hébergées sur la chaîne officielle de l’UNIL ou toute autre chaîne. Le composant permet d’intégrer aussi bien des vidéos individuelles que des playlists issues de la chaîne concernée.
- Vimeo : cette source permet la diffusion de vidéos hébergées depuis toute chaîne issue de la plateforme Vimeo destinée au partage et au visionnage. Le composant permet d’intégrer aussi bien des vidéos individuelles que des playlists issues de la chaîne concernée.
- HVA: Cette plateforme est aujourd’hui fermée. Toutefois, les vidéos qui étaient précédemment utilisées via la plateforme HVA pourront toujours être intégrées dans le Video player.
- Play RTS: les vidéos issues de la plateforme de la Radio Suisse Romande peuvent également servir de source pour intégrer un contenu additionnel.
L'image de couverture ou miniature de la vidéo est récupérée automatiquement selon une méthode propre à chaque plateforme puis affichée. Cette image n’est pas stockée sur les serveurs de l’UNIL afin de diminuer encore une fois l’impact des vidéos. Cependant, dans le cas ou l’image récupérée automatiquement par le composant n’est pas satisfaisante, il est possible d’uploader sa propre image au format 16/9 (dimensions maximales de 1280 x 720 px).
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Mise en page > Accordéon
Le composant Accordéon permet d’afficher du contenu de manière compacte et structurée, en le répartissant dans des sections repliables. Il aide à organiser les informations longues ou denses, tout en évitant de surcharger la page visuellement. Chaque section peut être ouverte ou fermée individuellement par l’utilisateur·trice.
Bonnes pratiques
Le modèle en accordéon est idéal pour décomposer un contenu long ou complexe en morceaux plus petits et plus faciles à lire ou à parcourir. Il est également idéal pour les sites mobiles car il réduit la quantité de défilement qu'un utilisateur doit effectuer pour lire un contenu. Cela permet aux utilisateurs de contrôler ce qu'ils veulent lire et quand, ce qui peut améliorer leur expérience. Le contenu d’un accordéon est caché et est révélé lorsqu’une action d’ouverture est effectuée. Il n’est donc pas recommandé d’y mettre des informations essentielles qui seront de ce fait moins visibles.
Cas d'utilisation
Un accordéon est utilisé en général avec d’autres accordéons et dans le but de mettre des questions-réponses, comme une FAQ. Il est souvent placé dans le bas de la page, au cas où les personnes n’ont pas trouvé les informations dans la page.
Ce composant ne peut contenir que les composants suivants :
- Richtext,
- resources,
- vidéo,
- audio,
- image seule,
- bouton (optionnel)
Il existe une variante sur fond foncé de ce composant qui est utilisée pour constituer le composant Interview. Elle peut être utile pour créer du rythme et du contraste dans une page qui a beaucoup de blanc.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Mise en page > Onglets
Le composant Onglets permet d’afficher du contenu de manière compacte et structurée, en le répartissant dans des onglets. Il aide à organiser les informations longues ou denses, tout en évitant de surcharger la page visuellement.
Ces éléments ne peuvent contenir que les composants suivants :
- Richtext
- tableau
- formulaire
- ressources
- vidéo
- audio,
- images (seules ou galeries)
- citation (testimonial)
- interview
- bouton (optionnel)
Bonnes pratiques
Il est utilisé pour structurer la page lorsque des contenus ont des thématiques différentes et regroupables. Il s’agit d’un système de rangement qui permet un accès rapide aux contenus. Les titres de ces onglets doivent être clairs et concis et sont limités à 30 caractères maximum (espaces compris).
Cas d'utilisation
Il est à utiliser avec parcimonie, quand plusieurs éléments ou thématiques distinctes ont la même priorité.
Exemple : dans la section Unisciences, sur la page d’un membre.
Remarques particulières
Sur mobile, ce composant s’affiche comme un dropdown.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Mise en page > Tableau
Le composant Tableau permet d’organiser de façon concise et lisible un ensemble d’informations sur une page. Grâce à ce composant, les lecteur·trice·s peuvent trier facilement les données (si vous activez cette option), et accéder rapidement aux informations recherchées. C’est un outil idéal pour structurer des contacts, des prestations, ou des liens utiles de manière compacte et efficace. Sur mobile, toutes les colonnes d’une même ligne sont affichées dans la même case, pour une meilleure lisibilité.
Bonnes pratiques
L’utilisation d’un tableau est fortement recommandée lorsque l’on souhaite représenter des données, c'est-à-dire des informations exprimées sous la forme d’un tableau en 2 dimensions. Le tableau ne doit pas être utilisé pour mettre en page du texte. On préférera dans ce cas des composants texte riche, plus adaptés pour un contenu purement textuel.
Cas d'utilisation
Il existe plusieurs variantes de ce composant :
-
Avec en-tête : lorsque l’intitulé des colonnes aide à la compréhension du tableau ou nécessite le tri des colonnes.
-
Sans en-tête : lorsqu’il s’agit d’une liste structurée et que le contenu des colonnes est suffisamment parlant pour se passer d’en-tête
-
Avec un ou plusieurs composants texte riche dans une case de tableau, notamment pour afficher du texte mis en forme, des listes ou des liens dans le contenu
-
Avec un ou plusieurs composants People Teaser dans une case de tableau, par exemple pour présenter les membres d’un service
-
Un tableau peut avoir deux ou trois colonnes selon les besoins éditoriaux.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Navigation > Bouton
Le composant Bouton permet de créer un appel à l’action clair et visible sur une page, comme par exemple "S'inscrire", "En savoir plus" ou "Télécharger". Il est conçu pour orienter la navigation de l’utilisateur vers un lien interne ou externe, tout en respectant la charte graphique de l’UNIL.
Bonnes pratiques
Chaque bouton doit communiquer clairement son objectif. Un bouton comporte toujours un libellé commençant par un verbe pour faciliter la communication de l'action du bouton. À ce libellé peut s’ajouter aussi une icône pour aider à la compréhension de l’action au clic.
Les boutons utilisent des libellés textuels qui décrivent l'action qui se produira si une personne clique sur le bouton.
Cas d'utilisation
Les templates de pages permettent de visualiser les différentes possibilités d’utilisation des boutons. Voici quelques règles simples :
- Lien ou bouton ?
- les boutons représentent une action (télécharger, s’inscrire, soumettre, postuler, etc.)
- les liens de naviguer ou d’accéder à une autre page ou un autre site
- Taille :
- Par défaut, la taille est “medium”. La plateforme Jahia utilise cette taille comme standard.
- La taille “large” n’est aujourd’hui pas utilisée dans les templates proposés sur la plateforme Jahia. Elle pourrait être utilisée dans le cadre d’autres développements pour une landing page personnalisée pour un événement qui nécessiterait un grand call-to-action.
- La taille “small” n’est aujourd’hui pas utilisée dans les templates proposés sur la plateforme Jahia. Elle pourrait être utilisée dans le cadre d’autres développements pour un écran qui serait chargé en actions dans un espace limité. Par exemple des filtres complexes.
- Style : Le style des boutons sont à choisir selon le type d’action qu’ils engendrent et selon leur importance :
- Action principale = bouton “primaire”. Ce bouton doit garder un contraste élevé. Deux variantes existent:
- Variante couleur (bleu pour le site principal) lorsqu’il est sur un fond clair
- Variante blanc lorsqu’il est sur un fond de couleur.
- Exemples : Sur le détail d’un événement : s’inscrire; sur la page profil “Futures étudiantes et futurs étudiants”, la possibilité de consulter le programme de la semaine d’accueil; sur le détail d’un bachelor : s’inscrire à la formation
- Action secondaire = bouton “secondaire”. Ce bouton a moins de contraste du fait que l’action qu’il engendre est moins importante que celle d’un bouton primaire. Deux variantes existent:
- Variante claire (gris et texte noir pour le site principal) lorsqu’il est sur un fond clair et
- Variante transparent (texte blanc) lorsqu’il est sur un fond de couleur.
- Exemples : Sur le détail d’un événement : l’ajouter à son agenda; sur le détail d’un bachelor, télécharger la brochure ou le plan de formation
- Ne pas utiliser deux boutons “primaires” l’un à côté de l’autre. La variante “secondaire” devra être utilisée s’il y a un ou plusieurs autres boutons à côté d’un “primaire”.
- Action principale = bouton “primaire”. Ce bouton doit garder un contraste élevé. Deux variantes existent:
- Icône :
- Une icône peut accompagner le libellé si l’on souhaite renforcer une action. Par exemple pour un bouton “Télécharger”, “Rechercher”, “Imprimer”, etc.
- Si une icône est ajoutée, elle sera à gauche du libellé.
- Seul un chevron (par exemple dans le composant Dropdown) ou une flèche (par exemple sur un bouton “suivant”) seront placés à droite du libellé
- Le bouton avec une icône seule est utilisé lors d’actions
- Le bouton “back to top” dans le footer
- Les réseaux sociaux dans le footer
- Les réseaux sociaux pour le composant “Partager l’actualité” ou “Partager l’événement”
- La “croix” pour fermer une modale ou la galerie plein écran
- Les flèches pour faire défiler les images d’un carrousel
- Sur le placeholder d’une vidéo, le bouton “Play”
- Sur mobile dans la navigation fermée : la loupe pour ouvrir la recherche et le burger menu pour ouvrir le menu
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Navigation > Groupe de pages
Le composant Groupe de pages permet de créer une liste de liens claire et structurée vers des pages internes ou des ressources externes. Il est conçu pour mettre en valeur un ensemble de contenus liés, sous forme de blocs de navigation facilement identifiables. Il améliore la lisibilité et oriente les utilisateurs dans leur parcours.
Ce composant permet la navigation vers des pages-filles de la page dans laquelle il est intégré, mais aussi des liens externes lorsque cela est nécessaire. Il est par exemple utilisé sur les landing pages (pages de premier niveau) nécessitant de rediriger vers des sous-pages.
Bonnes pratiques
Ce composant regroupe des liens vers des contenus ayant une cohérence thématique et permettant à la personne d’avoir une vue claire d’un sujet tout en donnant du contexte.
Exemple : Si le sujet principal est Etudier à l’UNIL, le Featured Links List décrit la thématique Offres de formation. Il peut alors rediriger vers la page traitant de ce sujet et redirige obligatoirement vers des liens vers des sous-pages de la même thématique comme Bachelors, Masters, Formations continues, etc.
Cas d'utilisation
Ce composant est utilisé pour valoriser des liens vers des contenus. Il permet de structurer une page qui redirige vers beaucoup d’éléments et peut précéder par exemple des blocs comprenant Icon Page Teaser ou Page Teaser. Son contenu doit être plus important.
Des variantes peuvent être sélectionnées pour personnaliser le composant :
- La position de l’image et du texte (gauche ou droite) permet de varier le rythme de la page si ce composant est utilisé plusieurs fois.
- Le nombre de liens secondaires peut varier. Un maximum de 6 liens peuvent être saisis.
Le lien de contenu principal (limité à 60 caractères espaces compris) est toujours accompagné d’un texte expliquant la thématique qui regroupe les liens des contenus secondaires. Il peut être associé ou non à un lien vers une page ad hoc expliquant la thématique si existante. Un maximum de 250 caractères maximum espaces compris peuvent être saisis pour cette description.
- Un maximum de 60 caractères maximum espaces compris peuvent être saisis pour le titre du lien du contenu principal.
- Un maximum de 250 caractères maximum espaces compris peuvent être saisis pour la description du contenu principal.
Les liens secondaires peuvent être accompagnés ou non de texte permettant d’identifier le contenu des pages vers lesquelles ils redirigent.
- Un maximum de 60 caractères maximum espaces compris peuvent être saisis pour le titre d’un lien secondaire.
- Un maximum de 150 caractères maximum espaces compris peuvent être saisis pour la description optionnelle d’un lien secondaire.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Ressources > Citation
Le composant Citation permet de mettre en valeur une citation d’une personne (avec photo, nom, fonction) afin de renforcer un message ou d’illustrer une information.
Bonnes pratiques
Le composant Citation contient obligatoirement une image, un texte (le témoignage en lui-même), le prénom, nom et fonction de la personne. Si aucun média n’est uploadé, une image placeholder sera chargée.
Le composant peut avoir un lien facultatif qui encourage à l’action ("call to action") de découvrir une page spécifique.
Cas d'utilisation
Ce composant peut être utilisé à tout moment dans une page. Il permet de valoriser une phrase ou une personne.
Il existe plusieurs variantes de ce composant :
- Sans "Call to Action" : à utiliser lorsqu'il s’agit d’une citation simple à insérer dans un contenu
- Avec Call to Action : lorsque le témoignage renvoie à une page plus détaillée
- Compact : à utiliser quand on veut afficher plusieurs témoignages d’un coup (ex: page futurs étudiants)
- Interview : lorsqu’il s’agit par exemple d’un entretien et que la citation est divisée en plusieurs thématiques, le composant intègre la variante Accordéon - fond foncé (voir plus haut).
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Ressources > Groupe de liens
Ce composant sert à afficher des informations complémentaires, comme des éléments à télécharger, des liens externes ou des liens internes.
Cas d’utilisation
Il peut être utilisé sur n’importe quelle page (landing, page de contenu basique, Détail d’une actualité ou d’un événement).
Il est possible d’ajouter une description. Ceci est recommandé lorsque le titre de l’élément ne parle pas de lui-même ou s’il s’agit d’un élément à télécharger, il peut être utile de décrire son contenu pour éviter un téléchargement inutile.
Points techniques avancés
Les liens peuvent être accompagnés de 3 icônes différentes:
- l'icône attachement24 pour les documents
- l'icône externalLink24 pour les liens externes
- l'icône arrowLink24 pour les liens internes
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Ressources > Interview
Le composant Interview permet de présenter une citation forte, une personne mise en avant (avec photo, nom, fonction), et un jeu de questions-réponses sous forme d’accordéon. Ce composant est idéal pour valoriser des témoignages, des expert·e·s, ou des retours d’expérience tout en proposant un accès à un contenu plus riche via un lien.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Teasers > Teasers avec icône
Le composant Teaser avec icône vous permet de créer une liste de liens rapides, chacun accompagné d’une icône reconnaissable. Ce type de teaser est particulièrement adapté pour orienter l’utilisateur vers des pages pratiques, des rubriques spécifiques ou des actions fréquentes. Il facilite la navigation grâce à un affichage visuel simplifié et structuré.
Bonnes pratiques
Le titre des page teasers doit être suffisamment explicite pour que les personnes sachent à quoi s’attendre en cliquant dessus. Il est idéal d'avoir un nombre de caractères proche entre les titres des page teasers d'un même groupe. L’important est de rester régulier et succinct. Le nombre de caractères pour le titre est limité à 60 caractères maximum, espaces compris.
Cas d'utilisation
Ce composant est notamment utilisé sur les landing pages pour diriger vers leurs sous-pages. Les pages teasers sont répartis dans une section. Chaque section peut avoir un titre de composant et un texte d’accompagnement permettant d’annoncer les pages teasers. Ce texte peut avoir un lien à gauche redirigeant vers une page traitant du thème général regroupant les page teasers. Une section comprend autant de page teasers que nécessaire. Suivant le résultat désiré, il est donc possible de créer plusieurs types d'agencement de sections.
Types d’agencement de sections
Afin de créer les différents types de section, la largeur d'un composant est schématisée en %. Ce pourcentage de largeur ne comprend pas les espacements autour des page teasers.
- Type A : 1 page teaser x 100% de la largeur disponible
- Type B : 2 page teasers x 50% de la largeur disponible
- Type C : 3 page teasers x 33% de la largeur disponible
- Type D : 4 page teasers x 25% de la largeur disponible
- Type E : 5 page teasers x 20% de la largeur disponible, il s’agit du maximum disponible pour une ligne sur desktop
Variantes du composant
Il existe plusieurs variantes de ce composant :
- Lorsqu’il y a 1 à 3 teasers sur la largeur (Type A, B et C), utiliser la variante Page teaser (grand titre avec texte explicatif)
- Lorsqu'il y a 4 à 5 teasers (Types D et E), utiliser les variantes Petits page teaser ( avec texte explicatif)
- Pour tous les types de répartition des teasers sur une ligne, utiliser la variante Très petits page teasers selon si un texte explicatif est nécessaire ou non. Cette variante est utilisée notamment dans la page qui décrit une formation (bachelor ou master) quand il est souhaité de valoriser des liens dans le corps de la page, mais que ceux-ci ne nécessite pas de texte explicatif particulier.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Teasers > Teasers avec texte
Le composant Teaser avec texte vous permet de rediriger vers d'autres pages. Il peut s'agir de pages enfants, d'autres pages du site, voire de pages de sites externes. Ce composant permet donc de créer une liste de liens visuellement reconnaissables. Chaque teaser combine un titre, un court descriptif et un lien, et peut être présenté sous différentes répartitions pour s’adapter au contenu de votre page. C’est un excellent outil pour créer des accès rapides et lisibles vers des pages de référence ou des contenus complémentaires.
Bonnes pratiques
Le titre des page teasers doit être suffisamment explicite pour que les personnes sachent à quoi s’attendre en cliquant dessus. Il est idéal d'avoir un nombre de caractères proche entre les titres des page teasers d'un même groupe. L’important est de rester régulier et succinct. Le nombre de caractères pour le titre est limité à 60 caractères maximum, espaces compris.
Cas d'utilisation
Ce composant est notamment utilisé sur les landing pages pour diriger vers leurs sous-pages. Les pages teasers sont répartis dans une section. Chaque section peut avoir un titre de composant et un texte d’accompagnement permettant d’annoncer les pages teasers. Ce texte peut avoir un lien à gauche redirigeant vers une page traitant du thème général regroupant les page teasers. Une section comprend autant de page teasers que nécessaire. Suivant le résultat désiré, il est donc possible de créer plusieurs types d'agencement de sections.
Types d’agencement de sections
Afin de créer les différents types de section, la largeur d'un composant est schématisée en %. Ce pourcentage de largeur ne comprend pas les espacements autour des page teasers.
- Type A : 1 page teaser x 100% de la largeur disponible
- Type B : 2 page teasers x 50% de la largeur disponible
- Type C : 3 page teasers x 33% de la largeur disponible
- Type D : 4 page teasers x 25% de la largeur disponible
- Type E : 5 page teasers x 20% de la largeur disponible, il s’agit du maximum disponible pour une ligne sur desktop
Variantes du composant
Il existe plusieurs variantes de ce composant :
- Lorsqu’il y a 1 à 3 teasers sur la largeur (Type A, B et C), utiliser la variante Page teaser (grand titre avec texte explicatif)
- Lorsqu'il y a 4 à 5 teasers (Types D et E), utiliser les variantes Petits page teaser ( avec texte explicatif)
- Pour tous les types de répartition des teasers sur une ligne, utiliser la variante Très petits page teasers selon si un texte explicatif est nécessaire ou non. Cette variante est utilisée notamment dans la page qui décrit une formation (bachelor ou master) quand il est souhaité de valoriser des liens dans le corps de la page, mais que ceux-ci ne nécessite pas de texte explicatif particulier.
Teaser avec un lien externe
A utiliser lorsque le lien pointe vers une page externe au site actuel.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Teasers > Teasers de publication
Ce composant permet de mettre en avant une publication ou un contenu éditorial par un teaser visuel vertical composé d’une image, d’un titre et d’un lien. Il est conçu pour attirer l’attention sur un contenu publié – comme une page dédiée à un magazine, un article de fond, une archive – qu’il soit interne ou externe à l’UNIL.
Cas d'utilisation
Ce composant est utilisé lorsque l’on souhaite mentionner des publications afin d’encourager la personne visitant le site à consulter celles-ci. Par exemple, Uniscope et Allez savoir!. A noter que jusqu’à 6 teasers peuvent être ajoutés au composant.
Bonnes pratiques
L’image utilisée dans chaque teaser doit avoir un ratio ¾ et idéalement les dimensions suivantes : 345 px de large pour 456 pixels de haut. Une image au ratio 16/9 peut également être ajoutée. Ces dimensions seront idéalement de 494 pixels par 323 pixels de haut.
Pour obtenir une image avec le logo d’un magazine comme Uniscope par exemple, ce dernier doit être ajouté dans l'image avant d'uploader cette dernière.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Teasers > Teasers externes verticaux
Le composant Teasers externes verticaux permet de mettre en avant jusqu’à 6 contenus externes à l’UNIL, en lien avec la vie ou l’image de l’université. C’est un outil idéal pour présenter une sélection d’articles, d’interviews, de reportages ou d’interventions médiatiques concernant l’UNIL tout en respectant une mise en page harmonieuse.
Bonnes pratiques
Ce composant contient un titre, un texte de description et la mention du site vers lequel il redirige sous forme de lien avec l’icône externalLink16.
Il est utilisé principalement sous sa forme “Liste”, où les teasers sont affichés côte-à-côte au nombre de 3 par ligne. Un maximum de 6 éléments sur 2 lignes peuvent être présentés par le composant.
Les Vertical external teasers sont répartis dans une section. Chaque section peut avoir un titre de sectionet un texte de description permettant de renseigner le thème abordé par les vertical external teasers qui suivent. Ce texte peut avoir un lien à gauche redirigeant vers une page traitant du thème général
Cas d'utilisation
Ce composant peut être intégré dans des pages de premier niveau (landing page). Il est particulièrement pertinent sur la page “Actualités”.
Chaque élément du composant est constitué des éléments suivants :
- Image principale de l’élément
- Titre de la page vers laquelle il redirige de 60 caractères maximum espaces compris.
- Chapô pour situer le contexte de 150 caractères maximum espaces compris.
- Texte et URL du lien vers lequel il redirige avec l’icône externalLink16.
Remarques particulières
Sur desktop, l'accroche comporte 3 lignes maximum, le texte est ensuite tronqué. Cet aspectest géré en CSS.
Le titre, l’image et le lien sont cliquables et mènent au site externe.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Texte et média > Highlight
Ce composant est utilisé pour valoriser un élément cliquable sur les pages de niveau 1. Il peut s'agir aussi bien de pages filles, que d’autres pages du site ou même des pages de sites externes. Au clic sur le composant, les visiteuses et visiteurs se rendent sur la page en question.
Bonnes pratiques
Il est composé d’une image, d’un titre, d’une accroche et d’un bouton principal, qui met en avant une action. Un bouton secondaire est optionnel. Il peut être utilisé pour envoyé sur une page qui donne plus d’informations sur l’élément mais qui n’est pas l’action principale.
Exemple : “s’inscrire” = bouton principal et “en savoir plus” = bouton secondaire.
Cas d’utilisation
Ce composant est utilisé sur les pages de niveau 1. Il est à utiliser uniquement ponctuellement, lorsqu’il y a un événement très important (ex : l’ouverture des inscriptions). Son affichage est limité dans le temps : il est possible de l’enlever une fois l’événement passé.
Il est recommandé de ne l’utiliser qu’une seule fois par page et pas sur toutes les pages car il sert à valoriser un élément.
Exemples : Page Futures étudiantes et futurs étudiants : Admission aux études.
[ Documentation Jahia: retour au sommaire ]
Composant Jahia > Texte et média > Image et texte
...
[ Documentation Jahia: retour au sommaire ]
Rôles dans l'édition Jahia
Liste des rôles et permissions pour l'édition Jahia
Fonctionnalité / Rôle Jahia | Webmaster de page | Webmaster de site | Webmaster de faculté | Expert |
---|---|---|---|---|
Demander l'ajout d'une icône pour Jahia |
✓ |
✓ |
✓ |
✓ |
Gérer le menu principal d'un site (mode, contenus) |
⤫ |
✓ |
✓ |
✓ |
Gérer le hero de la page d'accueil d'un site (composant affichant des actualités/événements) |
⤫ |
✓ |
✓ |
✓ |
Gérer les contenus non centralisés du pied de page (exemples : réseaux sociaux, liens utiles, adresse, téléphone, site map etc.) |
⤫ |
✓ |
✓ |
✓ |
Utiliser le composant HTML personnalisé |
⤫ |
✓ |
✓ |
✓ |
Utiliser le composant Social Wall |
⤫ |
✓ |
✓ |
✓ |
Peut créer des pages sur le modèle Espaces dédiés d'un site |
⤫ |
⤫ |
✓ |
✓ |
Gérer les contenus centralisés du pied de page (exemples : contact, annuaire, urgences) |
⤫ |
⤫ |
⤫ |
✓ |
Gérer les contenus centralisés du menu en haut de chaque page |
⤫ |
⤫ |
⤫ |
✓ |
Gérer les icônes disponibles sur Jahia |
⤫ |
⤫ |
⤫ |
✓ |
Accéder aux codes sources des éditeurs de texte (CK Editor) |
⤫ |
⤫ |
⤫ |
✓ |
Éditer la zone fixed du modèle de page tool (pages impressum et contact) |
⤫ |
⤫ |
⤫ |
✓ |
[ Documentation Jahia: retour au sommaire ]
Taille des images dans l'édition Jahia
Taille idéale pour les images
Composants Jahia | Ratio et dimensions idéales des images à contribuer |
---|---|
Homepage Hero – colonne gauche | Paysage 16:9 1340 x 754 Images contribuées et gérées par News et agenda MyUNIL |
Homepage Hero – colonne droite | Paysage 16:9 1340 x 754 Images contribuées et gérées par News et agenda MyUNIL |
Hero sur page de niveau 1 | Carré 1:1 1340 x 1340 |
Image | Paysage 16:9 1340 x 754 |
Infographie SVG | Paysage 16:9 1340 x 754 |
Vidéo | Paysage 16:9 1340 x 754 |
Galerie | Paysage 16:9 1340 x 754 Accepte aussi les formats portraits |
Citation Interview |
Miniature 1:1 140 x 140 |
People teaser | Miniature 1:1 140 x 140 |
Teasers de publications | Portrait 3:4 750px de large |
Image et texte | Portrait 3:4 750px de large |
Highlight | Portrait 3:4 750px de large |
Teasers externes verticaux | Paysage 16:9 750px de large |
Teasers d'actualité en vedette Teasers d'actualités verticaux Teasers d'événements verticaux Teasers des événements en vedette |
Paysage 16:9 750px de large Images contribuées et gérées par News et agenda MyUNIL |
[ Documentation Jahia: retour au sommaire ]
Gestion du multilinguisme dans Jahia
Traduire, traduire automatiquement ou recopier d'une langue à l'autre
Lors de l'édition d'une page dans un site multilingue, il faut appliquer selon les situations ou les contenus l'une de ces 3 techniques :
- traduire : saisir successivement le contenu dans une langue, puis dans l'autre
- traduire automatiquement : utiliser l'outil de traduction automatique Deepl inclus dans Jahia
- recopier un contenu d'une langue vers l'autre : dans les cas où cela fait sens
Points importants :
- une page n'existe dans une langue qu'à partir du moment où on lui a donné un titre dans cette langue
- pour modifier un contenu, la méthode la plus sûre est est d'éditer les langues dans ce contenu en parallèle, afin d'éviter de créer par erreur un "doublon" de ce contenu dans l'autre langue
- lors de la publication, ne pas oublier de publier les pages ou les composants dans toutes les langues.
En édition dans Jahia, pour changer la langue d'affichage de la page on ne va pas utiliser le sélecteur de langue en haut à droite de celle-ci, mais le sélecteur qui se trouve en haut à gauche :
Ajouter un titre de page dans la 2ème langue
Puisqu'une page n'existe dans une langue qu'à partir du moment où elle a un titre dans cette langue, s'il n'est pas déjà présent il faut aller l'ajouter :
Technique de base pour traduire (recommandée)
La méthode simple et sûre consiste à éditer les langues en parallèle pour chaque élément de chaque composant : saisir successivement le contenu dans une langue, puis dans l'autre.
Exemple :
Lors de la publication, ne pas oublier d'englober toutes les langues (sauf dans les cas où le contenu ne doit pas pas être publié simultanément) :
Recopier un contenu d'une langue vers une autre
Pour certains champs dans les contenus, cela fait sens d'utiliser un contenu identique dans toutes les langues. Jahia permet alors d'éviter une saisie à double en utilisant une option de recopie d'une langue vers l'autre.
Exemple : pour le titre d'une page intitulée "Publications" qui pourra être recopié de français en anglais, car identique dans les 2 langues. On accède à cette option de recopie en cliquant sur les 3 points en haut à droite du champ concerné, puis en choisissant "copier dans d'autres langues"
Traduction automatique avec DeepL
Un module de traduction avec DeepL est désomais intégré dans Jahia. Il permet de traduire soit une page entière, soit un composant. Quelques précautions s'imposent lors de son utilisation :
- Toujours relire et vérifier la traduction proposée par DeepL avant publication. Si besoin, corriger manuellement cette traduction.
- Stratégie recommandée : utiliser la traduction de la page entière juste la première fois pour une traduction initiale, mais ensuite pour les modifications ultérieures une fois que la page est publiée, utiliser uniquement la traduction par composant. Ceci permet de ne pas perdre les différentes corrections manuelles après la traduciton initiale.
- Prendre garde à ne pas se tromper lors du choix des langues.
[ Documentation Jahia: retour au sommaire ]
Articles sur la refonte web
Le site internet de l’UNIL fait peau neuve - Actualités UNIL, novembre 2024
Le site de l’UNIL, une aventure collective - Uniscope, décembre 2024
La refonte du site unil.ch et des sites des services centraux - Blog du Ci, janvier 2025
Design System unil.ch - Site Antistatique, mars 2025
[ Documentation Jahia: retour au sommaire ]
Questions fréquentes sur l'édition Jahia
Quelques questions ou problèmes courants que vous rencontrerez peut-être lors de l'édition de votre site Jahia UNIL.
1. Editer un site Jahia hors du réseau UNIL: le VPN UNIL est nécessaire
Pour des raisons de sécurité, l’édition des sites web Jahia UNIL peut s’effectuer:
- soit depuis le réseau de l’UNIL (connexion par câble réseau ou Wi-Fi eduroam)
- soit si vous êtes hors de l’UNIL, en employant une connexion sécurisée par le client VPN Ivanti Secure Access (qui s'appelait autrefois Pulse Secure)
Important:
L’utilisation de l’application client Ivanti Secure Access est requise, le simple accès à la passerelle web crypto.unil.ch sans avoir lancé Ivanti ne donne pas accès à toutes les fonctionnalités d’édition de Jahia.
[ Documentation Jahia: retour au sommaire ]
Demande d'ajout d'icône(s) dans le composant Jahia "Teaser avec icône"
Si vous utilisez le composant Jahia "Teasers avec icône", il se peut parfois que vous ne trouviez pas d'icône adaptée au concept que vous voulez illustrer parmi celles qui sont à disposition dans l'interface de ce composant dans Jahia.
Ces icônes proviennent toutes de la collection Flex Duo par Streamline. Nous avons souscrit une licence qui nous permet d'utiliser un certain nombre de ces icônes dans nos composants web institutionnels. Si vous trouvez dans cette collection des icônes non encore disponibles dans notre composant et que vous souhaitez utiliser dans le cadre de votre site web ou rubrique web Jahia à travers le composant "Teaser avec icône", vous pouvez nous en faire la demande au moyen d'un formulaire.
Ce formulaire est actuellement en préparation.
Nous évaluerons si ces ajouts peuvent convenir à notre charte graphique, et si oui nous les ajouterons dans le composant.
[ Documentation Jahia: retour au sommaire ]