Structure et design des sites web Jahia UNIL
Ce document explique la structure des sites et pages web Jahia sur lesquels est baséebasée la présenceprésence web institutionnelle de l'UNIL.
Principe de l'imbrication : pages > composants > élémentséléments
Un site web Jahia est composécomposé d'un ensemble de pages, qui sont elles-mêmesmêmes composéescomposées de composants de contenu, et ces composants sont une addition d'élémentséléments de contenu.
Dans certains cas, les composants sont eux-mêmemême parfois imbriquésimbriqués entre eux. Par exemple une colonne de tableau peut contenir un texte.
Les composants
Les composants fixes
Il s'agit de composants optionnels, qui peuvent êtreêtre activésactivés ou non sur une page, et qui figureront toujours au mêmemême emplacament. Exemples :
- le texte d'introduction et le sommaire en haut des pages de contenu
- la zone hero avec sans image et surtitre en haut des landing pages
- les liens "continuer ma lecture" avant le pied de page.
Les composants de contenu
Il existe plusieurs types de composants de contenu qui peuvent voisiner sur une page, comme dans cet exemple oùoù 3 composants différentsdifférents sont utilisésutilisés :
Ces différentsdifférents composants partagent souvent plusieurs caractéristiquescaractéristiques communes :
- un champ "titre" optionnel, qui aidera
àà structurer la page (certains composants n'en ont pas, par exemple le composant Bouton) - des champs optionnels, par exemple pour afficher un
éventueléventuel texte explicatif entre le titre du composant et sesélémentséléments - une marge basse
réglableréglable (marge sous le composant), demanièremanièreàà pouvoirgérergérer l'espace blanc entre les composants afin de leréduireréduire ou l'augmenter dans certains cas pourêtreêtrecohérentcohérent avec les bonnes pratiques en design web - un affichage "responsive"
conçuconçu pour s'adapteràà toutes les largeurs d'écranécran
Voir la liste des composants de contenu
Structure des sites
Nos sites institutionnels sont basébasé sur un structure arborescente àà plusieurs niveaux :
- niveau 0 = page d'accueil
- niveau 1 = landing pages
- niveau 2 et + = basic pages
A chacun de ces niveaux correspond un template (ou modèlemodèle de page). C'est l'emplacement d'une page dans la structure du site qui va automatiquement déterminerdéterminer le template qui lui sera appliqué.appliqué.
Certains élémentséléments sont communs àà tous les templates d'un site, notamment l'en-têtetête et le pied de page. Chaque template peut accueillir différentsdifférents zones de contenu. Certaines de ces zones sont identiques dans tous les templates, et d'autres zones diffèrentdiffèrent d'un template àà l'autre. Il existe aussi des zones optionnelles.
A noter que l'accèsaccès àà l'éditionédition de certaines zones est liélié aux droits d'édition.édition. Il faut par exemple avoir des droits de webmaster de site ou de webmaster de facultéfaculté pour pouvoir modifier des zones qui apparaissent sur toutes les pages d'un site ou d'une rubrique de site.
Structure des pages
Home page
Landing page
- La partie hero est activable en option au niveau des
propriétéspropriétés de la page (entêteentête page niveau 1). - Le composant fixe "continuer ma lecture" pour ajouter des liens
complémentairescomplémentaires en bas de page est optionnel.
Basic page
- Le texte d'introduction et son bouton sont activables en option au niveau des
propriétéspropriétés de la page (entêteentête page niveau 2+). - Le sommaire pour les pages longues est optionnel. Il est
alimentéalimenté par les titresdonnésdonnés aux composantsprésentsprésents dans la page. - Le composant fixe "continuer ma lecture" pour ajouter des liens
complémentairescomplémentaires en bas de page est optionnel.
Variantes propres aux sites de facultésfacultés
Les sites de facultésfacultés se caractérisentcaractérisent par diveres variantes et options pour les modèlesmodèles de pages décritsdécrits ci-dessus.
Toutes les pages de facultésfacultés sont reconnaissables par ces points :
En complément,complément, àà l'intérieurintérieur des sites de facultésfacultés qui englobent désormaisdésormais la plupart de leurs unitésunités structurelles, les principales d'entre elles peuvent disposer d'espaces dédiésdédiés pour y regrouper leurs pages. C'est notamment le cas des départements,départements, instituts et écolesécoles :
Variantes propres aux sites autonomes
Pour diverses raisons, par exemple du multilinguisme avec des langues différentesdifférentes de celles de leur facultéfaculté ou un rattachement interfacultaire, un trèstrès petit nombre de sites sont autonomes, hors des 8 sites institutionnels principaux (UNIL.CH et ses 7 facultés)facultés). Ces sites sont reconnaissables àà ces variantes :
Navigation
Ecoconception
Le design de nos sites Jahia est basébasé sur des principes d'écoconceptionécoconception web afin de refléterrefléter les engagements de l'UNIL pour la durabilité.durabilité. Le but est de réduireréduire leur impact environnemental àà travers plusieurs choix graphiques et techniques :
- n'utiliser des images que quand elles sont
nécessairesnécessaires pourcomplétercompléter le contenu, et non pas dans un butdécoratifdécoratif - optimiser ces images pour
réduireréduire leur poids, et les remplacer par desélémentséléments graphiques pluslégerslégers quand cela est possible - pour des
élémentsélémentsmultimédiasmultimédias ou interactifs comme lesvidéos,vidéos, les podcasts et les plans d'accès,accès, ne pas les charger directement dans la page mais laisser le choix de le faire aus personnes qui visitent le site - pour les documents
ààtélécharger,télécharger, lescomplétercompléter d'une description afin de limiter autant que possible les downloads inutiles
En
Taillelien idéaleavec l'écoconception, voir les bonnes pratiques pour lesla images
gestion Voicides les dimensions auxquelles nous recommandons de préparer les images avant de les chargermédias dans Jahia :.
Vidéo
Vidéo extraite de la formation de mise àà niveau Jahia
[ Documentation Jahia : retour au sommaire ]