Jahia UNIL post refonte web - Documentation publique

EN CONSTRUCTION 
- 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

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 :

En complément, nous pouvons activer certaines options sur demande, comme par exemple protéger l'accès à une rubrique par mot de passe, modifier l'en-tête ou le pied de page.

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 :

jahia-intro-composants.png

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

[ Documentation Jahia: retour au sommaire ]

Liste des composants Jahia

EN CONSTRUCTION

Liste des composants disponibles pour éditer les pages

Bouton "ajouter un composant"

Groupe
 Composant

Contenu Texte





Formulaire Formulaire





Media Audio


Flux RSS/Atom


Galerie d'images


Image(s)


Plan


SVG


Social wall


Vidéo





Mise en page Accordéon


Onglets


Tableau





Navigation Bouton


Groupe de pages





Ressources Citation


Groupe de liens


Interview





Teasers Teasers avec icône


Teasers avec texte


Teasers de publication


Teasers externes verticaux





Text et media Highlight


Image et texte

Bouton "ajouter un composant news et agenda"

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

Il s’agit du contenu textuel, du corps de la page. Il comprend aussi bien les titres que le texte mais aussi les listes à puces ou listes numérotées.

text.png

Cas d'utilisation

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Formulaire > Formulaire

Le formulaire est un élément interactif pour collecter des informations auprès des utilisatrices et utilisateurs. Il est utilisé dans divers contextes, notamment pour la soumission de demandes, l'inscription à des événements, la souscription à des newsletters ou la connexion à une plateforme.

form.png

Bonnes pratiques

Plusieurs bonnes pratiques sont nécessaires pour la création d’un formulaire :

Il est important que le processus d’envoi correspondent aux standard attendus par la majeure partie des usagers :

Cas d’utilisation

Le formulaire à votre disposition permet de choisir entre les options de champs suivantes:

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

Ce composant sert à indiquer la disponibilité d’un contenu audio (podcasts, extraits d’émission, etc.). Il peut être configuré pour un élément audio individuel ou une liste de lecture (playlist).

audio.png

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:

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

Ce composant permet d’afficher le contenu d’un flux RSS ou Atom (format sucesseur de RSS).

flux rss.png

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.

Bonnes pratiques

Le composant Flux RSS nécessite l’intégration de plusieurs éléments pour permettre son affichage:

 

Notre documentation pour comprendre les flus RSS/Atom 

 

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Media > Galerie d'images

galerie.png

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:

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 :

 

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Media > Image(s)

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 digitales 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.

image.png

image double.png

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:

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:

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 :

 

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Media > Plan

Les cartes sont utilisées pour indiquer un lieu. Elles sont souvent accompagnées d’un lien qui permet d’ouvrir un outil dédié, dans lequel il est plus agréable pour l’utilisatrice et l’utilisateur de naviguer (se déplacer, zoomer, rechercher un itinéraire). Pour le site principal de l’Université de Lausanne, l’outil de cartographie privilégié est Planète UNIL, qui permet de consulter les plans interactifs des bâtiments du campus.

carte.png

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

Ce composant est utilisé pour afficher une infographie au format SVG (tableau, formes, statistiques, etc.). Il n’a pas de traitement automatique pour l’éco-conception pour une meilleure lisibilité.

svg.png

Bonnes pratiques

Ce composant doit suivre les recommandations usuelles de toutes les images. Les images doivent:

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

Ce composant sert à indiquer la disponibilité d’une vidéo permettant d’en apprendre plus sur un sujet. Dans un souci d’éco-responsabilité, la vidéo n’est pas automatiquement chargée à l’ouverture de la page. Seul un clic sur le composant permettra de charger la source vidéo depuis la plateforme qui l’héberge. Le média sera alors prêt à être visionné.

video.png

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.

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

Un accordéon est un élément composé d'en-têtes empilés verticalement qui révèlent plus de détails lorsqu'il est déclenché par un clic de souris.

accordéon.png

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 :

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

Ce composant permet de naviguer entre différents éléments contenus derrière des onglets.

onglet.png

Ces éléments ne peuvent contenir que les composants suivants :

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

Un tableau permet de structurer l’affichage des données. Il se compose de lignes et de colonnes, mais également d’en-têtes de colonnes, qui permettent de trier les contenus. Sur mobile, toutes les colonnes d’une même ligne sont affichées dans la même case, pour une meilleure lisibilité.

tableau.png

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 :

 

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Navigation > Bouton

Les boutons permettent aux utilisatrices et aux utilisateurs de déclencher une action ou un événement en un seul clic. Par exemple, un bouton permet la fonctionnalité de soumission d'un formulaire, d'ouverture de la boîte de dialogue, d'annulation d'une action, ou une opération de suppression.

bouton.png

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 :

 

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Navigation > Groupe de pages

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.

groupe de pages.png

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 :

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.

Les liens secondaires peuvent être accompagnés ou non de texte permettant d’identifier le contenu des pages vers lesquelles ils redirigent.

 

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Ressources > Citation

Une citation correspond à un composant permettant de citer le discours d’une personne réelle.

citation.png

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 :

 

[ 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.

bloc de liens.png

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:

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Ressources > Interview

...

interview_.png

 

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Teasers > Teasers avec icône

Ce composant permet de rediriger sur d’autres pages. 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.

icon page teaser.png

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.

Les page teasers permettent, si souhaité, d’ajouter un texte permettant d’indiquer à l’usager quel contenu il pourra trouver au clic. Comme pour le titre, si on ajoute un texte explicatif a un page teaser, il est important de proposer un texte explicatif à tous les page teasers réunis dans un même ensemble. Le nombre de caractères de cette description est limité à 250 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.

Variantes du composant

Il existe plusieurs variantes de ce composant :

 

[ Documentation Jahia: retour au sommaire ]

Composant Jahia > Teasers > Teasers avec texte

Ce composant permet de rediriger sur d’autres pages. 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.

page teaser.png

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.

Les page teasers permettent, si souhaité, d’ajouter un texte permettant d’indiquer à l’usager quel contenu il pourra trouver au clic. Comme pour le titre, si on ajoute un texte explicatif a un page teaser, il est important de proposer un texte explicatif à tous les page teasers réunis dans un même ensemble. Le nombre de caractères de cette description est limité à 250 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.

Variantes du composant

Il existe plusieurs variantes de ce composant :

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 d’afficher des liens vers des publications (magazine, journal, livres, etc.) afin d’identifier et mettre en valeur les productions de 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

Ce composant permet de mettre en avant une information de type Actualité provenant de sites externes aux sites de l’UNIL. On retrouve celui-ci sur la page Actualités, dans la section “On parle de nous”.

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 :

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.

highlight.png

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

...

image et texte.png

 

[ Documentation Jahia: retour au sommaire ]

Introduction à Jahia

EN CONSTRUCTION

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

Rôles dans l'édition Jahia

EN CONSTRUCTION

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)

⤫

⤫

⤫

✓

Taille des images dans l'édition Jahia

EN CONSTRUCTION

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

Gestion du multilinguisme dans Jahia

EN CONSTRUCTION

Traduire, traduire automatiquement ou recopier d'une langue à l'autre

Lors de l'édition d'une page dans un site multilingue, on peut à choix et selon les contenus :

Points importants :

Technique de base (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 : 

base-trad-001.png

base-trad-002.png

La version traduite est aussi affichable en mode édition à partir de ce sélecteur de langue : 

base-trad-003.png

...