JAHIA 6. Création et modification de sites web UniNE

Transcription

1 JAHIA 6 Création et modification de sites web UniNE Janvier 2012

2

3 TABLE DES MATIÈRES 1 MODIFIER UN SITE : PRINCIPES DE BASE ADMINISTRATEUR DU SITE LOGIN (AUTHENTIFICATION) LES DIFFÉRENTS MODÈLES DE PAGE (TEMPLATE) LA STRUCTURE GÉNÉRALE D UNE PAGE (LES DIFFÉRENTES ZONES ET TAILLES) HAUT DE LA PAGE (BANDEAU) ZONES NON MODIFIABLES MENU CONTACT MENU EMPLOI TITRE DU SITE IMAGE / DIAPORAMA COLONNE DE GAUCHE (MENUS ET CRÉATION DE PAGES) MENUS PRINCIPAUX CRÉER UN MENU/UNE NOUVELLE PAGE DÉPLACER UNE PAGE ET SES SOUS-PAGES COPIER UNE PAGE ET SES SOUS-PAGES MENUS SECONDAIRES COLONNE CENTRALE LE PRINCIPE DE BOÎTES TITRE DE LA PAGE BOÎTE TEXTE LIBRE (ET IMAGE) AJOUTER DU TEXTE INSÉRER UN LIEN VERS UN FICHIER INSÉRER UN LIEN VERS UNE PAGE INTERNET INSÉRER UNE IMAGE CRÉER UNE LISTE (À PUCE ET PUBLICATION) CRÉER UN TABLEAU METTRE LE TEXTE SUR 2 COLONNES BOÎTE «VIGNETTES» BOÎTE «LISTE À ONGLETS» BOÎTE «LISTE DE SÉLECTION» BOÎTE «LISTE DÉROULANTE» BOÎTE «LISTE ACCORDÉON» BOÎTE «RUBRIQUE (1/1) ET (1/2)» BOÎTE «TABLEAU POUR CRÉATION PAGE»...28

4 6.11 BOÎTE «VIDÉO» BOÎTE «GALERIE D IMAGES» BOÎTE «GOOGLE MAP» PAGE D ACCUEIL DES SITES DE FACULTÉS BOÎTE «IMAGE À LA UNE» BOÎTE «LISTE D IMAGES À LA UNE» BOÎTE «VIDÉO À LA UNE» COLONNE DE DROITE LE PRINCIPE DE BOÎTES BOÎTE «À TÉLÉCHARGER» BOÎTE «DIVERS» BOÎTE «IMAGE» BOÎTE «IMAGE PRÉDÉFINIE» BOÎTE «VIDÉO» BOÎTE «TÉMOIGNAGE» BOÎTE «TÉMOIGNAGE AVEC PHOTO» PIED DE PAGE PIED DE PAGE DU SITE PIED DE PAGE «PORTAIL CENTRAL» ZONE DE RACCOURCIS POUR L INTERNE GESTIONNAIRE DE DOCUMENTS (TOUS TYPES DE FICHIER) GÉNÉRALITÉS DÉPLACER UN DOCUMENT, UNE IMAGE VUE VIGNETTES DÉCOMPRESSION AUTOMATIQUE DE FICHIERS.ZIP ESPACE DE TRAVAIL PARTAGÉ SUR QUELLE/S PAGE/S VOTRE DOCUMENT EST-IL UTILISE? IMAGES À VOTRE DISPOSITION RENOMMER UN RÉPERTOIRE SITE EN PLUSIEURS LANGUES ASTUCES TRAVAILLER PLUS RAPIDEMENT (LE BOUTON MAGIQUE) LIENS INTERNES VERS UNE AUTRE PAGE OU UN DOCUMENT! COPIES ET COPIES LIÉES UTILISATION DE L ÉDITEUR DE TEXTE (FCK) COLLER UN CONTENU DEPUIS WORD / DEPUIS UNE SOURCE EXTERNE...54

5 LA GOMME RETOUR À LA LIGNE AJOUTER UNE INFO BULLE A VOS LIENS PUBLICATION PLANIFIÉE MODIFIER L URL DE VOTRE PAGE POUR QUELLE SOIT LISIBLE ET COMMUNICABLE AVERTISSEMENT «WAI» PUBLIER VOS MODIFICATIONS : LE WORKFLOW...59

6

7 1 MODIFIER UN SITE : PRINCIPES DE BASE 1.1 ADMINISTRATEUR DU SITE Pour pouvoir modifier un site, vous devez faire partie des administrateurs du site et avoir suivi le cours Jahia6 organisé par le SITEL. Si vous n êtes pas encore administrateur, vous devez faire la demande auprès de l administrateur responsable du site (son nom figure dans la rubrique «information sur le site» en pied de page de votre site). 1.2 LOGIN (AUTHENTIFICATION) La procédure pour se connecter au site afin de le modifier est la suivante : Allez sur le site que vous désirez éditer. Cliquez sur le lien «login» situé dans le pied de page, puis entrez votre nom d utilisateur et votre mot de passe d utilisateur windows de l UniNE. oo Si vous ne possédez pas de nom d utilisateur windows de l UniNE, vous devez insérer votre nom d utilisateur et votre mot de passe jahia. Cliquez sur «S authentifier» Le navigateur recharge la page et l affiche en mode «En ligne» (mode de visualisation utilisateur). Pour modifier votre site, vous devez passer en mode «Edition» en cliquant sur le bouton correspondant de la barre d Edition principale. Image 1 Barres d outils jahia 2 LES DIFFÉRENTS MODÈLES DE PAGE (TEMPLATE) Les sites de l UniNE sont construits sur différents modèles de page: 1. Template «portail central»: pour le portail central de l UniNE 2. Template «faculté»: pour les sites des facultés 3. Template «sous-unité 1»: pour les sites des instituts de toutes les facultés, les sites des maisons en Faculté des lettres et sciences humaines et ceux des centres. 4. Template «autre»: pour tous les autres sites (services, laboratoires, associations d étudiants, etc.) Page 1

8 3 LA STRUCTURE GÉNÉRALE D UNE PAGE (LES DIFFÉRENTES ZONES) Image 2 Exemple d une structure de page (template 2 colonnes) L exemple ci-dessus montre un template avec 2 colonnes (une colonne pour les menus de gauche et une colonne centrale). Dans un template 3 colonnes, la colonne centrale est réduite pour laisser la place à une colonne de droite. Particularités : Le template «Faculté» page d accueil est particulier, il n a pas de colonne de gauche. Selon les templates, la taille du haut de page varie. Taille de la colonne centrale: Template 2 colonnes: 700 px Template 3 colonnes: 485 px Page 2

9 4 HAUT DE LA PAGE (BANDEAU) Les parties configurables/modifiables du haut de la page sont accessibles en modification uniquement depuis la page d accueil du site. 4.1 ZONES NON MODIFIABLES Image 3 Haut de page Les zones suivantes sont identiques sur tous les sites et ne sont pas modifiables par les administrateurs : Breadcrumb*(s il doit être modifié, merci d envoyer un message à webunine@unine.ch ) Zone bachelors et masters * Logo UniNE Zone de recherche *Pour certains sites particuliers (interuniversitaires, externes à l UniNE, etc.), il est possible de masquer ces éléments. 4.2 MENU CONTACT Image 4 Menu «Contact» Le terme «Contact» se met automatiquement lorsque vous ajoutez le lien «Contact». Il n est pas modifiable. Depuis ce menu, vous devez créer une page avec un contenu standardisé. Page 3

10 4.3 MENU EMPLOI Image 5 Menu «Emploi» Le terme «Emploi» se met automatiquement lorsque vous ajoutez le lien «Emploi». Il n est pas modifiable. Depuis ce menu, vous devez créer une page avec un contenu standardisé. 4.4 TITRE DU SITE Image 6 Titre du site La zone «titre» permet d afficher le titre du site et des éventuelles entités hiérarchiquement supérieures. Elle comprend trois niveaux au maximum (avec saut de paragraphe). Il est possible d avoir plusieurs entités de même niveau côte à côte (ex. Institut X, Institut Y sur la même ligne). Cette partie n est pas modifiable par les administrateurs du site. Si des changements sont nécessaires, vous devez envoyer un message à : webunine@unine.ch. 4.5 IMAGE / DIAPORAMA Le template «Sous-unité 1» a la particularité d avoir une image ou un diaporama dans le bandeau. Ces images sont réalisées par le Centre unimage en collaboration avec le SPD et en accord avec l entité responsable du site concerné. Ces images ne doivent pas être modifiées régulièrement, car elles font partie des éléments d identification du site. Contact : webunine@unine.ch. Informations complémentaires : charte image du site (à télécharger sur Image 7 Diaporama ou image dans le bandeau Page 4

11 5 COLONNE DE GAUCHE (MENUS ET CRÉATION DE PAGES) La largeur maximum de la colonne de gauche est de 200 pixels. 5.1 MENUS PRINCIPAUX La navigation principale de votre site se fait depuis les menus de gauche. Le template «faculté» a la particularité d avoir un premier niveau de menu en-dessous du bandeau. Toutefois, le fonctionnement reste le même. A chaque menu /sous-menu de gauche correspond un page/sous-page de votre site. Ergonomie Un bon site ne doit pas avoir plus de 7 à 9 menus principaux et pas plus de 2 à 3 niveaux de menus. Leurs intitulés doivent respecter 3 critères : 1. Etre signifiants: lorsque le visiteur lit un intitulé, il doit pouvoir facilement deviner le type de contenu appartenant à la rubrique. 2. Etre complémentaires : la somme de tous les éléments du menu doit recouvrir tout ce que le site propose à ses internautes. Il ne doit pas exister de contenu n appartenant à aucune rubrique. 3. Etre exclusifs: vos internautes doivent pouvoir choisir entre deux éléments rapidement et sans hésiter. Un intitulé doit être le seul envisageable pour le visiteur qui cherche un contenu précis (par exemple, éviter un menu «les études» suivi d un menu «masters») CRÉER UN MENU/UNE NOUVELLE PAGE Pour créer une nouvelle page, vous devez être au niveau supérieur à la page que vous souhaitez créer, puis cliquez sur «Ajouter une sous-page». Image 8 Ajout d une page à un site Vous pouvez créer une page avec 2 ou 3 colonnes (voir chapitre «Structure d une page»). Une fois la page créée, il n est plus possible de modifier le nombre de colonnes (contrairement à Jahia 4.2), seul le titre du menu peut être changé. Nous vous conseillons de toujours créer des pages avec 3 colonnes, excepté lorsque vous avez besoin de tout l espace pour insérer un tableau par exemple. Page 5

12 5.1.2 DÉPLACER UNE PAGE ET SES SOUS-PAGES Vous devez d abord ajouter une page (voir ci-dessus), puis choisir l option «Déplacer une page Jahia existante ici» et enfin sélectionner la page à déplacer. Lorsque vous déplacez une page, son adresse «url» reste la même. Ainsi, les liens qui pointent vers cette page ne seront pas cassés. Image 9 Déplacer une page et ses sous-pages Conseil pour modifier le nombre de colonnes (template 2 ou 3 colonnes) d une page Si vous devez modifier le nombre de colonnes d une page-mère (passer d un template 2 colonnes à un template 3 colonnes par exemple), vous serez obligé de recréer cette page. De ce fait, l adresse de la page sera changée, et les liens qui pointeraient vers la page d origine ne fonctionneront plus. En revanche, les sous-pages pourront être déplacées et garderont ainsi leur adresse url. Page 6

13 5.1.3 COPIER UNE PAGE ET SES SOUS-PAGES à côté du menu à co- Pour copier une page dans une autre partie du menu, il faut cliquer sur le bouton pier, puis sélectionner l option «Copier» Image 10 Copier une page à côté du menu contenant les sous- Pour copier toutes les sous-pages d une page, cliquer le bouton pages, puis sélectionner l option «Copier toutes les sous-pages» Image 11 Copier toutes les sous-pages d une page Ensuite, à l endroit ou l on désire coller la page (ou les sous-pages), cliquer le bouton puis sélectionner l option «Coller la page». à côté du menu Image 12 Coller une page Page 7

14 5.2 MENUS SECONDAIRES La navigation secondaire se trouve dans le second bloc de la colonne de gauche. Les options disponibles sont différentes selon le template : Sur le template «Faculté», dans une page de contenu, vous avez le choix entre du texte libre ou une image prédéfinie. Sur les templates «Sous-unité» et «Autre», vous pouvez : o Ajouter une sous page, avec possibilité de créer une page ou de faire un lien (vers une autre page web, vers une application, etc.). Les fonctionnalités liées à la création de page sont les mêmes que pour les menus principaux (voir ci-dessus). o Ajouter du texte libre ou une image prédéfinie (de 200px maximum) qui seront affichés uniquement sur la page en cours. Page 8

15 6 COLONNE CENTRALE La largeur maximum de la colonne centrale est de 485 pixels en mode template contenu 3 colonnes et de 700 pixels en mode contenu 2 colonnes. 6.1 LE PRINCIPE DE BOÎTES Tous les contenus de la colonne centrale se trouvent dans des boîtes. Ainsi, vous devez toujours commencer par sélectionner «ajouter une boîte» dans le cadre «Gérer les boîtes» avant de pouvoir insérer un nouveau type de contenu. Image 13 Ajouter une nouvelle boîte Ensuite une fenêtre vous permet de choisir le type de boîte que vous souhaitez insérer. Image 14 Choix du type de boîte La majeure partie de ces boîtes ne sont pas disponibles pour la page d accueil des sites des facultés qui est particulière. Page 9

16 6.2 TITRE DE LA PAGE Image 15 Titre de la page La colonne centrale comprend tout d abord le titre de la page. Ce titre est identique au titre du menu (colonne de gauche). En principe, il ne doit pas être modifié pour que le visiteur sache sur quelle page il se trouve. Dans certains cas, il peut être complété. 6.3 BOÎTE TEXTE LIBRE (ET IMAGE) La boîte permet d insérer du texte et des images dans le site. Elle utilise l éditeur de texte «FCK Editor». Image 16 FCK Editor A la fin du document vous trouvez des informations sur l utilisation du FCK Editor. Ergonomie Les tests d utilisabilité ont montré que: les internautes «balayent» la page en diagonale ils se focalisent sur les zones de la page en relation avec leur objectif et ignorent le reste Sur les pages navigantes, il faut donc respecter les 5 règles énoncées ci-dessous. 1. Allez à l essentiel : soyez concis (affiner ensuite l information avec un lien). 2. Faites des paragraphes de 10 lignes au maximum. 3. Rédigez simplement: une idée par paragraphe et 3, voir 4 paragraphes par page, au maximum. 4. Rendez les textes «scannables» : mettez des mots-clés en évidence (gras, liens hypertextes, couleur), ajoutez des sous-titres significatifs, utilisez des listes à puce. 5. Soyez objectif : énoncez des faits, du concret. Evitez le langage marketing. Page 10

17 6.3.1 AJOUTER DU TEXTE L ajout de texte se fait via le FCK editor. Il n est pas nécessaire de compléter les champs titres et sous-titres, vous pouvez utiliser les titres qui sont dans le FCK editor (accessible depuis le texte), ce qui évite de devoir faire une nouvelle boîte pour chaque nouveau texte. Il est utile de mettre le texte dans des boîtes différentes uniquement si vous souhaitez pouvoir en modifier l ordre facilement. Ajouter du texte Saisissez ou collez le texte. Remarque : Vous devez absolument utiliser le bouton quel texte. Mettez en forme le texte si nécessaire. Cliquez sur OK pour terminer. Coller comme texte pour coller n importe Dans les textes, vous devez utiliser les formats de titres prévus (Titre 1, Titre 2, Titre 3). Le format «Titre 1» est utilisé uniquement pour le titre de la page qui est affiché automatiquement et qui ne doit en principe pas être modifié. Vous devez donc généralement commencer vos textes avec les formats «titre 2». Modifier le texte Cliquez sur le bouton Gérer le texte et choisissez Modifier. Effectuez les modifications souhaitées. Cliquer sur OK pour terminer. Supprimer le texte Vous pouvez soit : Supprimer la boîte en cliquant sur le bouton Gérer cette boîte puis en choisissant Supprimer. Supprimer un bloc de contenu en cliquant sur le bouton Gérer le texte puis en choisissant Supprimer. Modifier le contenu de la boîte et supprimer les passages inutiles. Page 11

18 6.3.2 INSÉRER UN LIEN VERS UN FICHIER Ajouter un lien vers un fichier Sélectionnez le texte qui servira de lien. Cliquez sur le bouton. Cliquer sur le bouton Lien vers le fichier. Localisez le fichier. Si le fichier a déjà été placé dans le gestionnaire de fichier, parcourez l arborescence de votre dossier de site et cliquez sur le fichier à placer. Si le fichier n est pas encore présent dans le gestionnaire de fichier, sélectionnez le dossier de site, cliquez ensuite sur le bouton déposer Cliquez sur parcourir et localisez le fichier. Cliquez sur OK. Cliquez sur OK pour terminer. Modifier un lien vers un fichier Cliquez sur le bouton en regard du lien. Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer un lien vers un fichier Pour supprimer le lien sans supprimer le texte, cliquez sur le lien puis sur le bouton Supprimer le lien. Pour tout supprimer, sélectionnez tout le texte du lien et pressez la touche d effacement. Cliquez sur OK pour confirmer. Attention : La suppression du lien, ne supprime pas le fichier dans le site. Ce document peut être vu en utilisant un moteur de recherche INSÉRER UN LIEN VERS UNE PAGE INTERNET Ajouter un lien vers une page internet Sélectionnez le texte qui servira de lien. Cliquez sur le bouton. Choisissez le genre de lien : Pour créer un lien vers une page du site de l UniNE, cliquez sur le bouton Lier vers la page. Localisez le site. Cliquez sur les petits triangles situés sur la gauche pour afficher l arborescence puis cliquez sur la page à lier. Pour créer un lien vers un site extérieur à votre site/projet, saisissez l adresse de la page web dans le champ URL. L indication du protocole ( est facultative, si elle manque elle est rajoutée. Cliquez sur OK pour terminer. Modifier un lien vers une page internet Cliquez sur le bouton en regard du lien. Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer un lien vers une page internet Pour supprimer le lien sans supprimer le texte, cliquez sur le lien puis sur le bouton. Pour tout supprimer, sélectionnez tout le texte du lien et pressez la touche d effacement. Cliquez sur OK pour terminer. Page 12

19 Page 13

20 6.3.4 INSÉRER UNE IMAGE Toutes les informations concernant les images (où trouver des images, composer une image, taille des images, etc.) se trouvent dans la charte image (à télécharger sur Avant d insérer une image, il convient de rappeler les points suivants : Le format de l image doit être GIF, JPEG ou éventuellement PNG. La résolution doit être de 72 dpi. Le nom de l image ne doit pas comporter d accent (è,é,à,ä,...), d espace ni de caractères spéciaux (%,&,,...). Le nom doit être suivi de l extension (.gif /.jpg /.png) Rappelons également que l image ne peut être simplement collée dans la page. En effet l image n est pas présente dans la page, elle est liée. Insérer une image Dans la zone de contenu, cliquez pour préciser le point d insertion de l image. Cliquez sur le bouton. Cliquez sur parcourir le serveur. Si l image a déjà été placée dans le gestionnaire de documents, parcourez l arborescence de votre dossier de site et cliquez sur l image à placer. Si l image n est pas encore présente dans le gestionnaire de documents, sélectionnez votre dossier de site, cliquez sur le bouton. Cliquez sur parcourir et localisez l image (la vue «vignette» est utile, CF p.45) Cliquez sur l image souhaitée et elle sera automatiquement sélectionnée fermant le sélecteur instantanément. Le chemin vers l image est alors automatiquement rempli dans l éditeur FCK. Cliquez sur OK. Insérer une brève description de l image dans le champ Texte de remplacement (à l intention des personnes malvoyantes). Les images pour lesquelles ce champ ne serait pas renseigné provoquerait des avertissements WAI (p.56). Cliquez sur OK. Image 17 Insérer une image Page 14

21 Banque d images à disposition Le gestionnaire de documents contient toute une série d images à disposition pour illustrer vos pages. Leur emplacement : «Espace de travail partagé rubrique shared banque d images». Modifier les propriétés d une image Sélectionnez l image et cliquez sur le bouton. Effectuez les réglages voulus. Cliquer sur OK pour terminer. Supprimer une image Les opérations ci-dessous décrivent comment supprimer l affichage d une image. L image n apparaît plus dans la page mais elle est toujours présente dans le gestionnaire de documents. Sélectionnez l image. Pressez la touche Delete ou la touche Retour arrière (backspace). Cliquez sur OK pour terminer. Emplacement / Alignement de l image Les champs Espacement permettent de définir une marge (horizontale et verticale) autour de l image ou le texte est exclu. Le champ «Alignement» permet d aligner une image par rapport au texte : Pas d alignement : l image est placée sur la ligne (invisible) de texte. Alignement Gauche : l image s aligne à gauche, le texte à côté Alignement Droite : l image s aligne à droite, le texte à côté Une fois l image insérée dans votre texte, vous pouvez aisément la repositionner où vous le souhaitez en utilisant la fonction «glisser/déposer»: Image 18 Glisser / déposer une image dans l éditeur FCK L image insérée peut ensuite être renommée ou déplacée dans un autre répertoire du gestionnaire de documents sans aucun impact sur votre zone de texte enrichi. Les références/liens seront automatiquement mis à jour en conséquence (CF p. xx). Page 15

22 6.3.5 CRÉER UNE LISTE (À PUCE ET PUBLICATION) Les listes par défaut du FCKeditor sont pré-formatées avec un style propre à l UniNE (liste à chevrons). Si vous souhaitez utiliser un autre modèle de liste (à puce ou style publication), vous pouvez utiliser un des trois modèles à choix : Liste avec puces carrées Liste avec chevrons (identique à la liste par défaut) Liste mise en page pour les publications Image 19 Modèles de listes Insérer une liste Cliquez à l endroit où vous souhaitez insérer votre liste Cliquez sur le bouton Il est important de définir le style de la liste AVANT de créer les contenus de la liste. En effet, une liste avec des données d exemple est intégrée dans l éditeur. Charge à vous ensuite de modifier les lignes de la liste. Dans le menu déroulant, choisissez un modèle de liste Editez le contenu de votre liste Attention : L éditeur FCKEditor n affiche pas les listes dans leur look définitif. C est seulement une fois l éditeur fermé que vous voyez le résultat s appliquer à votre liste. Page 16

23 6.3.6 CRÉER UN TABLEAU Tableau pré-formaté Dans le FCKEditor, vous pouvez intégrer directement des tableaux pré-formatés, puis y ajouter/supprimer du contenu. Pour les tableaux, 3 types prédéfinis sont disponibles : Tableau simple (avec titre) Tableau bicolore (sans titre) Tableau complexe Image 20 Modèles de tableaux Insérer un tableau pré-formaté Cliquez à l endroit où vous souhaitez insérer votre tableau Cliquez sur le bouton Il est important de définir le style du tableau AVANT de créer les contenus des cellules. En effet, un tableau avec des données d exemple est intégré dans l éditeur. Charge à vous ensuite de modifier les contenus des cellules. Dans le menu déroulant, choisissez un modèle de tableau Editez le contenu de votre tableau L éditeur FCKEditor n affiche pas les cellules dans leur look définitif. C est seulement une fois l éditeur fermé que vous voyez le résultat s appliquer à votre tableau. Tableau simple Dans le FCKEditor, vous pouvez également intégrer des tableaux simples puis ajouter/supprimer du contenu. L icône ouvre une interface permettant de créer un tableau. Page 17

24 Image 21 Propriétés d un tableau Une fois le tableau créé, il est possible, très facilement, grâce aux menus contextuels (clic droit avec la souris), de faire des opérations sur les cellules, les lignes, Image 22 Menus contextuels tableau Page 18

25 6.3.7 METTRE LE TEXTE SUR 2 COLONNES Il est possible d afficher le texte sur une ou deux colonnes dans une boîte texte libre, en choisissant simplement à l aide du champ «Nombre de colonnes». Ce choix peut être fait au moment de la création de la boîte ou ultérieurement. Quel que soit le mode d affichage choisi, l édition du texte se fait sur une seule colonne. Le cas échéant, Jahia équilibre le texte sur les deux colonnes. Image 23 Mettre le texte sur 2 colonnes dans le FCKEditor Page 19

26 6.4 BOÎTE «VIGNETTES» Image 24 Boîte vignettes La boîte vignettes permet de mettre en avant une collection d informations. La mise en page est automatique, et pour chaque information, il est possible de renseigner le titre, un texte d accroche et une image. Chaque information doit obligatoirement être liée à une page internet. Les images doivent avoir une taille de 80x80px. Toutes les informations concernant les images se trouvent dans la charte image qui est un document d aide pour l utilisation et la composition des images (à télécharger sur Ajouter une vignette Insérez une boîte de type Vignettes puis : Cliquez sur le bouton Gérer les vignettes et choisissez ajouter une vignette. Donnez un titre à la vignette. Cliquez sur Accroche dans la colonne de gauche et insérez un bref texte. Cliquez sur Image dans la colonne de gauche, localisez la vignette. Cliquez sur Lien page web dans la colonne de gauche, choisissez une des options disponibles. Pour insérer une nouvelle vignette, cliquez sur le bouton ou cliquez sur OK pour terminer. Modifier une vignette Cliquez sur le bouton Gérer la vignette en regard de la vignette et choisissez Modifier. Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer une vignette Cliquez sur le bouton Gérer la vignette en regard de la vignette et choisissez Supprimer. Cliquez sur OK pour confirmer. Page 20

27 6.5 BOÎTE «LISTE À ONGLETS» Image 25 Boîte liste à onglets La boîte liste à onglets permet de créer, dans une même page, de multiples contenus, visibles ensuite par sélection des onglets. Chaque onglet de la boîte affichera un texte différent en dessous, sans recharger la page. Pour des raisons de lisibilité, il est important que la liste des onglets ne dépasse pas une ligne. Si cela devait être le cas, utilisez plutôt une liste de type liste de sélection ou liste déroulante Ajouter un onglet Insérez une boîte de type Liste à onglets. Cliquez sur le bouton Gérer la liste d onglets et choisissez Ajouter un onglet. Donnez un titre au nouvel onglet. Cliquez sur Contenu dans la colonne de gauche, insérez le contenu via le FCKeditor. Les options sont les mêmes que pour la boîte texte libre. Pour insérer un nouvel onglet, cliquez sur le bouton ou cliquez sur OK pour terminer. Modifier un onglet Cliquez sur le bouton Gérer cet onglet situé au-dessus du texte et choisissez Modifier. Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer un onglet Cliquez sur le bouton Gérer cet onglet situé au-dessus du texte et choisissez Supprimer. Cliquez sur OK pour confirmer. Page 21

28 6.6 BOÎTE «LISTE DE SÉLECTION» Image 26 Boîte liste de sélection avec titre et texte La boîte «liste de sélection» permet de créer, dans une même page, de multiples contenus, visibles ensuite par sélection des éléments. Chaque élément de la liste de sélection affichera un contenu différent en dessous, sans recharger la page. Ce contenu peut comprendre : Un titre Une image (taille 485x120 px) Un texte Une sous-liste de type «liste accordéon», «liste de sélection» ou «liste d onglets» (voir ci-dessus et ci-dessous) Ajouter un élément Insérez une boîte de type Liste de sélection. Cliquez sur le bouton Gérer la liste de sélection et choisissez Ajouter un élément à la liste. Dans le champ Elément de liste, donnez un nom au nouvel élément. Dans le champ Titre, choisissez un titre (facultatif). Le titre choisi apparaît dans le texte. Si vous souhaitez ajouter une image, cliquez sur Image 480x120 px et parcourez le gestionnaire de documents pour localiser l image à insérer. Cliquez sur Texte dans la colonne de gauche et insérez le contenu. Cliquez sur Sous-liste et choisissez un type de sous-liste ou si vous n en voulez pas, choisissez Aucune sous-liste. Pour insérer un nouvel élément, cliquez sur le bouton ou cliquez sur OK pour terminer. Modifier un élément Cliquez sur le bouton Gérer cet élément situé au-dessus du texte et choisissez Modifier. Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer un élément Cliquez sur le bouton Gérer cet élément situé au-dessus du texte et choisissez Supprimer. Cliquez sur OK pour confirmer. Page 22

29 Voici un exemple d une liste de sélection avec un élément «programme» qui a notamment une sous- liste type «liste accordéon». Image 27 Exemple de liste de sélection Toutes les informations concernant les images se trouvent dans la charte image qui est un document d aide pour l utilisation et la composition des images (à télécharger sur Page 23

30 6.7 BOÎTE «LISTE DÉROULANTE» Image 28 Boîte liste déroulante (exemple de liste avec image) La boîte «liste déroulante» permet de créer, dans une même page, de multiples contenus, visibles ensuite par sélection dans une liste déroulante. Chaque élément de la liste déroulante affichera un contenu différent en dessous, sans recharger la page. Le contenu sous la liste déroulante, qui est lié à un élément en particulier, peut comprendre : Un sous-titre Une image (taille 485X120 px) Un texte Une sous-liste de type liste accordéon, liste de sélection ou liste d onglets (voir ci-dessus / ci-dessous) Ajouter un élément Insérez une boîte de type Liste déroulante. Cliquez sur le bouton Gérer la liste déroulante et choisissez Ajouter un élément. Dans le champ Titre, saisissez le texte qui apparaîtra dans le menu Si cochée, l option Pas de contenu pour cet élément permet d utiliser l élément comme titre dans la liste déroulante. Dans le champ Sous-titre (optionnel), entrez le texte qui servira de titre dans le contenu Si vous souhaitez ajouter une image, cliquez sur Image 480x120 px dans la colonne de gauche et parcourez le gestionnaire de documents pour localiser l image à insérer. Cliquez sur Texte dans la colonne de gauche et insérez le contenu. Cliquez sur Sous-liste et choisissez un type de sous-liste ou si vous n en voulez pas, choisissez Aucune sous-liste. Pour insérer un nouvel élément, cliquez sur le bouton ou cliquez sur OK pour terminer. Modifier un élément Utilisez la liste pour déroulante pour afficher l élément à éditer. Cliquez sur le bouton Gérer cet élément situé au-dessus du sous-titre et choisissez Modifier. Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer un élément Utilisez la liste pour déroulante pour afficher l élément à supprimer. Cliquez sur le bouton Gérer cet élément situé au-dessus du texte et choisissez Supprimer. Cliquez sur OK pour confirmer. Toutes les informations concernant les images se trouvent dans la charte image qui est un document d aide pour l utilisation et la composition des images (à télécharger sur Page 24

31 6.8 BOÎTE «LISTE ACCORDÉON» Image 29 Boîte accordéon La boîte liste accordéon permet de créer, dans une même page, de multiples contenus, visibles ensuite par sélection du titre. En sélectionnant un titre, on ouvre la liste et on affiche le contenu. Elle peut notamment être utilisée pour une liste de questions fréquentes. Ajouter un élément Insérez une boîte de type Liste déroulante. Cliquez sur le bouton Gérer la liste accordéon et choisissez Ajouter un élément. Dans le champ Titre, saisissez le texte sur lequel il faudra cliquer pour afficher le contenu. Cliquez sur Texte dans la colonne de gauche et insérez le contenu. Pour insérer un nouvel élément, cliquez sur le bouton ou cliquez sur OK pour terminer. Modifier un élément Cliquer sur le titre de l élément à éditer. Cliquez sur le bouton Gérer cet élément situé au-dessus du texte et choisissez Modifier. Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer un élément Cliquer sur le titre de l élément à supprimer. Cliquez sur le bouton Gérer cet élément situé au-dessus du texte et choisissez Supprimer. Cliquez sur OK pour confirmer. Page 25

32 6.9 BOÎTE «RUBRIQUE (1/1) ET (1/2)» Image 30 Boîte rubrique (1/1) Image 31 Boîte rubrique (1/2) Les boîtes «rubrique (1/1 et 1/2)» permettent de faire une liste de liens avec une mise en page automatique. Depuis cette boîte, il est possible de créer des nouvelles pages jahia qui n apparaîtront pas dans les menus de gauche (création de pages depuis le contenu). Les mêmes boîtes sont disponibles sur la page d accueil des sites des facultés, mais avec un design différent. Image 32 Exemple boîtes rubriques (1/2 et 1/1) page d accueil des facultés Ajouter une rubrique Si nécessaire insérez une boîte de type Rubrique (1/1) ou Rubrique (1/2), puis : Cliquez sur le bouton Gérer la liste de rubriques et choisissez Ajouter une rubrique. Dans le champ Titre du lien ou de la page, saisissez le libellé de la rubrique tel qu il apparaîtra dans la page. Dans Type de page, choisissez le type de lien que vous voulez créer. Pour insérer une nouvelle rubrique, cliquez sur le bouton ou cliquez sur OK pour terminer. Page 26

33 Modifier une rubrique Cliquez sur le bouton en regard de la rubrique à éditer et choisissez Modifier Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer un élément Cliquez sur le bouton en regard de la rubrique et choisissez Cliquez sur le bouton Supprimer. Cliquez sur OK pour confirmer. Page 27

34 6.10 BOÎTE «TABLEAU POUR CRÉATION PAGE» Titre du lien = = Cell 2: Image 33 Boîte tableau pour création page Cette boîte permet de faire une liste de liens avec une mise en page automatique. Il est possible d afficher 8 colonnes au maximum. Depuis cette boîte, il est possible de créer des nouvelles pages jahia qui n apparaîtront pas dans les menus de gauche (création de pages depuis le contenu). Les liens / création de pages se font sur la première colonne uniquement. Ajouter des lignes au tableau Insérez une boîte de type Tableau pour création de page, puis : Si vous souhaitez des titres, cliquez sur le bouton Ajouter une ligne d en-tête et choisissez Ajouter à la liste. Renseignez les champs en commençant par cell1, ils s afficheront comme en-tête de colonne. Cliquez sur OK. Cliquez ensuite dans le cadre Ajouter une ligne, choisissez Ajouter une ligne. Dans le champ Titre du lien, saisissez le texte du lien puis sélectionnez une des options pour le type de page. Cliquez sur Cell2 dans la colonne de gauche et saisissez les données du tableau. Pour insérer une nouvelle ligne, cliquez sur le bouton ou cliquez sur OK pour terminer. Modifier le contenu du tableau Cliquez sur le bouton en regard de la ligne à éditer et choisissez Modifier l ordre des lignes Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer une ligne du tableau Cliquez sur le bouton en regard de la ligne et choisissez Supprimer le contenu. Cliquez sur OK pour confirmer. Page 28

35 6.11 BOÎTE «VIDÉO» Cette boîte n est pas disponible sur la page d accueil du template «Faculté». Image 34 Boîte vidéo Cette boîte permet d intégrer une vidéo en streaming, c est-à-dire intégrée directement dans la page jahia. Le lecteur permet de lancer la vidéo en plein écran. Les vidéos doivent-être déposées sur le serveur multimédia de l UniNE, dans les bons formats (normal et haute définition). Le centre unimage est à votre disposition au besoin (cig.sitel@unine.ch). Si vous le souhaitez, vous pouvez afficher une image fixe à la place de la première image de la vidéo. Cette image de prévisualisation permet d avoir une première image lorsque la vidéo n est pas encore lancée. Elledoit avoir une taille de 480x270px. Cette boîte est également disponible dans la colonne de droite de tous les templates. Ajouter une vidéo Insérez une boîte de type Vidéo. Cliquez sur le bouton Gérer la vidéo et choisissez Modifier la vidéo. Indiquez les URLs pour les vidéos en basse et en haute résolution dans les champs respectifs. Assurez-vous que le case Utiliser le serveur de streaming de l UNINE est cochée. Cliquez sur Image de prévisualisation dans la colonne de gauche et localisez l image qui s affichera dans la page tant que la vidéo n a pas démarré. Cliquez sur Texte dans la colonne de gauche pour ajouter du texte au-dessous de la vidéo. Cliquez sur OK pour terminer. Modifier les paramètres ou choisir une autre vidéo Cliquez sur le bouton Gérer la vidéo et choisissez Modifier la vidéo. Modifiez les paramètres selon vos souhaits : Changez les URLs pour afficher une autre vidéo Choisissez une autre image de prévisualisation et/ou éditez le texte. Cliquez sur OK pour terminer. Supprimer la vidéo La boîte Vidéo ne pouvant contenir qu une seule image, il faut supprimer la boîte. Cliquez sur le bouton Gérer cette boîte et choisissez Supprimer. Cliquez sur OK pour confirmer. Page 29

36 6.12 BOÎTE «GALERIE D IMAGES» Image 35 Boîte galerie d images La galerie d images permet d afficher une collection d images à un seul endroit. Il est possible simplement de naviguer entre les images par des clics, ou de lancer un diaporama. Pour réaliser une galerie vous devez simplement mettre toutes vos images dans un même répertoire du gestionnaire de documents et le sélectionner en tant que répertoire d image dans la fenêtre d édition. Les imagettes sont créées à la volée par le système, il n est donc pas nécessaire de s en préoccuper. Les visiteurs pourront télécharger l image originale. Toutes les informations concernant les images se trouvent dans la charte image qui est un document d aide pour l utilisation et la composition des images (à télécharger sur Page 30

37 Créer une galerie d images Insérez une boîte de type Galerie d images. Cliquez sur le bouton Gérer cette galerie et choisissez Modifier. Localisez le dossier contenant les images ou s il vous ne l avez pas encore chargé, utilisez le bouton pour le déposer. Cliquez sur OK pour terminer. Ajouter ou supprimer des images Comme la boîte Galerie d images affiche les images contenues dans un dossier, il suffit de modifier le contenu du dossier via le Gestionnaire de documents. Ajouter une légende ou un titre aux images Depuis le gestionnaire de documents, vous pouvez ajouter un titre et une description à vos images. Le champ «Titre» est lu par les navigateurs spécialisés en lieu et place de l image et le champ «Description» permet aux moteurs de recherche de «décrypter» l image. En outre, le contenu de ces champs s affiche dans la galerie d image comme suit : Page 31

38 Page 32

39 Page 33

40 6.13 BOÎTE «GOOGLE MAP» Image 36 Boîte Google map Cette boîte permet d afficher de manière standardisée la localisation de votre entité, en sélectionnant simplement son adresse dans la liste des lieux prédéfinie se trouvant dans le répertoire maps (directement accessible lorsque vous cliquez sur «ajouter une carte»). Ajouter une carte Google Insérez une boîte de type Google map. Cliquez sur le bouton Gérer les cartes et choisissez Ajouter une carte Cliquez sur le petit triangle en regard du dossier maps et sélectionnez la carte avec l adresse de votre entité. Cliquez sur OK pour terminer. Choisir une autre carte Cliquez sur le bouton Modifier la carte et choisissez Modifier Cliquez sur le petit triangle en regard du dossier maps et sélectionnez la carte qui convient. Cliquez sur OK pour terminer. Image 37 Choix de la carte pour la boîte Google map Si aucune carte ne répond à vos besoins vous devez envoyer un mail à webunine@unine.ch qui se chargera de la créer. Page 34

41 7 PAGE D ACCUEIL DES SITES DE FACULTÉS Le modèle de la page d accueil des sites des facultés est particulier. Dans la première partie, vous avez le choix entre une boîte «image à la une», «vidéo à la une» (décrite ci-dessous) ou «liste d image à la une» (voir chapitre 6.4, page 22). Dans la seconde partie, vous avez le choix entre une boîte vignette, une boîte rubrique ou une boîte texte libre (voir la description de ces boîtes dans la partie «colonne centrale»). 7.1 BOÎTE «IMAGE À LA UNE» Image 38 Boîte image à la une Cette boîte permet d afficher une information sous forme d image, accompagnée d un titre et d un texte d accroche. Pour chaque texte, il est possible de faire un lien vers un fichier ou vers une page internet. L image doit avoir une taille de 480x295px, sinon elle sera déformée ou de mauvaise qualité. Toutes les informations concernant les images se trouvent dans la charte image qui est un document d aide pour l utilisation et la composition des images (à télécharger sur BOÎTE «LISTE D IMAGES À LA UNE» Image 39 Boîte liste d images à la une Page 35

42 Cette boîte permet d afficher quatre informations, sous forme d image (taille de 480X295px), accompagnée d un titre et d un petit texte de présentation. L e module fonctionne comme un diaporama, mais le passage peut aussi être fait manuellement par un simple clic sur un des textes de présentation. Pour chaque image il est possible de faire un lien vers un fichier ou vers une page internet. Il est possible d intégrer plus de 4 informations, et en jouant sur la publication planifiée (voir chapitre 13.4, page 54), de n afficher que celles qui sont pertinentes. Si plus de 4 informations devaient-être affichées, seules les 4 premières dans l ordre d affichage seraient affichées. Toutes les informations concernant les images (où trouver des images, composer une image, taille des images, etc.) se trouvent dans la charte image (à télécharger sur BOÎTE «VIDÉO À LA UNE» Image 40 Boîte vidéo à la une Comme la boîte «Image à la une», cette boîte permet de mettre une information en avant, mais cette fois sous la forme d une vidéo en streaming, c est-à-dire intégrée directement dans la page jahia. Les vidéos doivent-être déposées sur le serveur multimédia de l UniNE, dans les bons formats (normal et haute définition). Le Centre unimage de l UniNE est à votre disposition au besoin (cig.sitel@unine.ch). Le lien «suite» permet de lier cette boîte sur un fichier ou une page Internet. L éventuelle image de prévisualisation qui permet d avoir une première image lorsque la vidéo n est pas encore lancée, doit avoir une taille de 480x295px. Toutes les informations concernant les images se trouvent dans la charte image qui est un document d aide pour l utilisation et la composition des images (à télécharger sur Page 36

43 8 COLONNE DE DROITE La largeur maximum de la colonne de droite est de 185 pixels. 8.1 LE PRINCIPE DE BOÎTES Comme pour la colonne centrale, tous les contenus de la colonne de droite se trouvent dans des boîtes. Ainsi, vous devez toujours commencer par sélectionner «ajouter une boîte» dans le cadre «Gérer les boîtes» avant de pouvoir insérer un nouveau type de contenu. Image 41 Ajouter une boîte Ensuite une fenêtre vous permet de choisir le type de boîte que vous souhaitez insérer. Image 42 Sélection du type de boîte Cette section présente les différentes boîtes à disposition : Page 37

44 8.2 BOÎTE «À TÉLÉCHARGER» Image 43 Boîte à télécharger A utiliser uniquement si les documents à télécharger sont lourds. Dans le cas contraire, il est préférable de choisir la boîte «divers». Cette boîte permet d afficher une liste de fichiers à télécharger avec inscription automatique du poids. La taille du fichier et les icônes s affichent automatiquement. Il est possible de modifier le nom affiché du fichier (sans modifier son adresse ou son nom), en allant dans le gestionnaire de documents, sélectionner le fichier, aller dans l onglet Propriétés, puis renseigner le champ Titre. Image 44 Champ Titre d un fichier Ajouter un fichier à télécharger Si nécessaire insérez une boîte de type A télécharger, puis : Cliquez sur le bouton Gérer la liste de fichiers et choisissez Ajouter un fichier. Localiser le fichier à mettre disposition ou s il vous ne l avez pas encore chargé, utilisez le bouton pour le déposer. Pour insérer un nouvel élément, cliquez sur le bouton ou cliquez sur OK pour terminer. Changer de fichier Cliquez sur le bouton en regard du fichier actuel et choisissez Modifier le fichier. Effectuez les modifications souhaitées. Localisez le nouveau fichier à mettre disposition ou s il vous ne l avez pas encore chargé, utilisez le bouton pour le déposer. Cliquez sur OK pour terminer. Page 38

45 Modifier les propriétés d un fichier La modifications des propriétés d un fichier se fait via le Gestionnaire de documents. Supprimer un élément Cliquez sur le bouton en regard du fichier et choisissez Supprimer. Cliquez sur OK pour confirmer. 8.3 BOÎTE «DIVERS» Image 45 Boîte divers 1 Image 46 Boîte divers 2 Image 47 Boîte divers 3 Cette boîte permet d afficher, dans 3 styles différents, des contenus de type texte libre. Le look de la boîte change automatiquement en fonction de la mise en forme choisie. Ajouter du contenu dans une boîte de type Divers Cliquez sur le bouton Gérer les textes et choisissez Ajouter un texte. Cliquez sur Mise en forme dans la colonne de gauche et sélectionnez un style dans le menu déroulant Cliquez ensuite sur Texte dans la colonne de gauche et ajoutez le contenu. Pour insérer un nouveau bloc de texte, cliquez sur le bouton ou cliquez sur OK pour terminer. Modifier le look ou le contenu d une boîte Divers Cliquez sur le bouton Modifier le texte et choisissez Modifier. Effectuez les changements souhaités. Cliquez sur OK pour terminer. Supprimer le contenu d une boîte Divers Cliquez sur le bouton Modifier le texte et choisissez Supprimer. Cliquez sur OK pour confirmer. Page 39

46 8.4 BOÎTE «IMAGE» Image 48 Boîte image Cette boîte permet d afficher une image dans la colonne de droite. Taille de l image : La largeur est imposée à 185px. Hauteur minimum: 90px Hauteur maximum: 185px L image insérée s adaptera automatiquement à la hauteur où à la largeur maximum en gardant les proportions de votre image. Attention à ne pas mettre des images trop grandes qui seraient inutilement lourdes. Il est possible d ajouter un cadre autour de l image ainsi qu un lien vers une page Internet. Ajouter du contenu dans une boîte de type Image Cliquez sur le bouton Gérer l image et choisissez Ajouter une image. Localisez l image à afficher ou s il vous ne l avez pas encore chargée, utilisez le bouton déposer. Cliquez sur OK pour terminer. pour la Modifier l image Cliquez sur le bouton Gérer l image et choisissez Modifier. Localisez la nouvelle image à afficher ou s il vous ne l avez pas encore chargée, utilisez le bouton pour la déposer. Supprimer l image La boîte image ne pouvant contenir qu une seule image, il faut supprimer la boîte. Cliquez sur le bouton Gérer cette boîte et choisissez Supprimer. Cliquez sur OK pour confirmer. 8.5 BOÎTE «IMAGE PRÉDÉFINIE» Image 49 Boîte image prédéfinie Page 40

47 La boîte image prédéfinie permet d insérer des images standardisées qui lient à une page définie. Le contenu des images «tous les bachelors» et «tous les masters» s adapte automatiquement à la faculté. Images actuellement à choix : Admission Inscription Newsletter Tous les bachelors (par Faculté) Tous les masters (par Faculté) Ces images sont également disponibles au niveau des menus secondaires de la colonne de gauche. Ajouter du contenu dans une boîte de type Image prédéfinie Cliquez sur le bouton Gérer les images prédéfinies et choisissez Ajouter une image. Choisissez l image dans le menu déroulant. Cliquez sur OK pour terminer. Modifier l image prédéfinie Cliquez sur le bouton Gérer l image et choisissez Modifier. Dans le menu déroulant, choisissez l image à afficher Cliquez sur OK pour terminer. Supprimer l image prédéfinie La boîte Image prédéfinie ne pouvant contenir qu une seule image, il faut supprimer la boîte. Cliquez sur le bouton Gérer cette boîte et choisissez Supprimer. Cliquez sur OK pour confirmer. 8.6 BOÎTE «VIDÉO» Image 50 Boîte vidéo Bien que plus étroite que celle se trouvant dans la colonne centrale, le fonctionnement en est identique. Merci de vous référer au chapitre «colonne centrale». Page 41

48 8.7 BOÎTE «TÉMOIGNAGE» Image 51 Boîte témoignage Cette boîte s adapte automatiquement en hauteur. Le fonds met en évidence le texte avec les guillemets. Elle permet de faire un lien vers une page internet, un fichier ou de créer une page. Ajouter un témoignage Cliquez sur le bouton Modifier le témoignage et choisissez Modifier. Ajoutez le contenu. Cliquez sur Lien dans la colonne de gauche pour lier le contenu à une autre page web. ou Cliquez sur Fichier dans la colonne de gauche pour lier le contenu à un fichier. Cliquez sur OK pour terminer. Modifier un témoignage Cliquez sur le bouton Modifier le témoignage et choisissez Modifier. Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer un témoignage La boîte Témoignage ne pouvant contenir qu un témoignage, il faut supprimer la boîte. Cliquez sur le bouton Gérer cette boîte et choisissez Supprimer. Cliquez sur OK pour confirmer. 8.8 BOÎTE «TÉMOIGNAGE AVEC PHOTO» Image 52 Boîte témoignage avec photo Cette boîte s adapte automatiquement en hauteur. Elle permet d intégrer une image, un texte et d ajouter un lien vers une page internet, un fichier ou de créer une page. Si vous souhaitez donner un style «polaroïd», l image doit avoir une taille de 160x160px. Page 42

49 Ajouter un témoignage avec photo Cliquez sur le bouton Modifier le témoignage et choisissez Modifier. Ajoutez le contenu. Photo : localisez l image à afficher ou s il vous ne l avez pas encore chargée, utilisez le bouton la déposer. Cliquez sur Lien dans la colonne de gauche pour lier le contenu à une autre page web. ou Cliquez sur Fichier dans la colonne de gauche pour lier le contenu à un fichier. Cliquez sur OK pour terminer. Modifier un témoignage avec photo Cliquez sur le bouton Modifier le témoignage et choisissez Modifier. Effectuez les modifications souhaitées. Cliquez sur OK pour terminer. Supprimer un témoignage avec photo La boîte Témoignage ne pouvant contenir qu un témoignage, il faut supprimer la boîte. Cliquez sur le bouton Gérer cette boîte et choisissez Supprimer. Cliquez sur OK pour confirmer. pour Page 43

50 9 PIED DE PAGE Le pied de page est divisé en plusieurs zones distinctes. Il n est modifiable que depuis la page d accueil du site. 9.1 PIED DE PAGE DU SITE Image 53 Pied de page du site Les zones suivantes sont identiques sur tous les sites et ne sont pas modifiables : Menus «Imprimer», «Recommander», «haut de page» Liens vers les réseaux sociaux et logo Swissuniversity Dans la zone en dessous, les termes se mettent automatiquement lorsque vous ajoutez le lien et ne sont pas modifiables. Un espace permettant d insérer un logo est prévu à gauche de l adresse. Les demandes doivent être adressées à webunine@unine.ch, car vous ne pouvez pas le modifier. Pour l entrée contact, vous devez simplement faire un lien vers le menu contact du bandeau. En dessous, une zone de texte vous permet de mettre l adresse de votre entité. 9.2 PIED DE PAGE «PORTAIL CENTRAL» Image 54 Pied de page Portail central La deuxième zone dans le pied de page est un pied de page standardisé qui permet aux utilisateurs de retrouver facilement les informations générales sur l Université, depuis toutes les pages du site, ceci en un seul clic. Les informations s y trouvant sont directement héritées du portail principal de l UniNE. Dans le cas d un site n ayant peu ou pas de rapport avec le site de l Université, il est possible de masquer ce pied de page. Page 44

51 9.3 ZONE DE RACCOURCIS POUR L INTERNE Image 55 Zone de raccourcis Cette zone propose des liens vers les sites les plus utilisés à l interne. Elle est identique sur tous les sites du domaine unine.ch. Si vous souhaitez proposer des liens, merci d envoyer un message à webunine@unine.ch. Page 45

52 10 GESTIONNAIRE DE DOCUMENTS (TOUS TYPES DE FICHIER) 10.1 GÉNÉRALITÉS Le gestionnaire contient des documents qui peuvent être de n importe quel type d élément numérique (fichier, image ou tout autre type de fichier). Le gestionnaire est accessible depuis l onglet «Outils» de la barre d Edition principale. Les opérations courantes sur les documents sont également disponibles depuis la vue simplifiée du gestionnaire de documents accessible depuis les fenêtres d édition (déposer/supprimer un document, ajouter un répertoire, etc.). Image 56 Onglet «Outils» de la barre de menu principale Le fonctionnement du gestionnaire est décrit dans le chapitre «Utilisation du gestionnaire unifié de document» du Guide d Utilisation Jahia EE v6.1, page 126 (à télécharger sur DÉPLACER UN DOCUMENT, UNE IMAGE Pour déplacer un document dans le gestionnaire de document, si le document est lié, il est important de le couper, puis de le coller dans le nouveau répertoire. Cette manière de faire garantit que les liens faits vers ce document sont maintenus. Une fois sur le document à déplacer, cliquer avec le bouton doit de la souris pour ouvrir le menu contextuel et sélectionner l option «Couper» Image 57 Couper un document Page 46

53 Aller ensuite dans le répertoire cible, cliquer avec le bouton droit de la souris et choisir l option «Coller» Astuce Image 58 Coller un document Pour mettre en ligne une nouvelle version d un document, sans devoir refaire les liens vers ce dernier sur vos pages Internet, il faut 1. Intituler le nouveau document avec le-s même-s terme-s que celui qui est en ligne 2. Télécharger le nouveau document dans le même dossier et choisir l option«ecarser» Ainsi, l url du document restera la même et les liens faits depuis le site pointeront vers le nouveau document VUE VIGNETTES L onglet «Vue» permet de modifier l affichage des documents / images. La vue «vignette» est particulièrement intéressante pour choisir une image. Image 59 Onglet vue du gestionnaire de documents Image 60 Affichage des vignettes dans le gestionnaire de documents Page 47

54 10.4 DÉCOMPRESSION AUTOMATIQUE DE FICHIERS.ZIP Il est possible de télécharger un fichier de type.zip, contenant plusieurs fichiers (pdf, jpeg, ), ainsi que leur structure. Cela permet de gagner beaucoup de temps lors du chargement de nombreux fichiers. Pour ce faire, une fois le bouton (déposer) cliqué, il faut cocher la case «Décompression automatique», puis choisir le document dans votre ordinateur. Vous avez toujours la possibilité de décompresser un dossier ultérieurement si au moment de charger le fichier zippé vous n avez pas coché la case «Décompression automatique». Il vous suffit de cliquer avec le bouton droite de la souris sur le fichier et de choisir Dézipper dans le menu contextuel. Image 61 Décompression automatique dans le gestionnaire de documents 10.5 ESPACE DE TRAVAIL PARTAGÉ Dans la partie gauche du gestionnaire de documents, il est possible d accéder à l Espace de travail partagé. Image 62 Espace de travail partagé dans le gestionnaire de documents C est dans cet espace que vous devez mettre les documents que d autres éditeurs de sites de l UniNE sont susceptibles de mettre en lien depuis leurs pages (plan d études, calendrier académique de la Faculté, etc.). Ainsi, ils peuvent les trouver facilement et les lier de manière à ce que vous soyez informé de l utilisation des fichiers en cas de modification/suppression. De la même manière, vous trouvez à cet endroit les documents que les autres éditeurs de sites de l UniNE mettent à la disposition de la communauté Universitaire. Dans la rubrique intitulée «Général», vous trouverez les documents mis à disposition de la communauté universitaire par les services centraux (calendrier académique par exemple). Afin d organiser cette partie accessible à tous, nous vous remercions de créer un répertoire pour votre site sous le répertoire de votre faculté ou du domaine central. Page 48

55 10.6 SUR QUELLE/S PAGE/S VOTRE DOCUMENT EST-IL UTILISE? Lorsque vous sélectionnez un document, vous pouvez voir sur quelle/s page/s il est utilisé en cliquant sur «Utilisations» en bas du gestionnaire de documents. Image 63 Onglet Utilisation d un document 10.7 IMAGES À VOTRE DISPOSITION Vous trouverez dans le gestionnaire de documents, toute une série d images à votre disposition pour illustrer vos pages. Emplacement «Espace de travail partagé rubrique shared banque d images». Page 49

56 10.8 RENOMMER UN RÉPERTOIRE Important Si un répertoire est renommé, les liens faits vers ce document sont automatiquement mis à jour. Pour renommer un répertoire, afficher le répertoire dans la partie droite du gestionnaire de document, puis cliquer avec le bouton droit de la souris pour afficher le menu contextuel, puis choisir l option «renommer». Image 64 Renommer un répertoire Dans la nouvelle fenêtre «pop-up» s ouvrant, changez le nom du répertoire puis cliquez «OK». Image 65 Renommer un répertoire 11 SITE EN PLUSIEURS LANGUES La gestion des langues est décrite depuis la page 202 du document «Guide d Utilisation Jahia EE v6.1» (à télécharger sur wwww.unine.ch/aide). Page 50

57 12 ASTUCES Dans cette section se trouvent des astuces vous permettant d utiliser au mieux jahia 6, afin de vous simplifier la vie et d augmenter la rapidité et la qualité de votre travail TRAVAILLER PLUS RAPIDEMENT (LE BOUTON MAGIQUE) Dans toutes les fenêtres d édition des objets de contenu vous trouverez l ensemble de boutons : Image 66 Boutons magiques Il permettent de naviguer rapidement entre les éléments de la même «liste» pour les modifier ou d ajouter un nouvel élément (bouton ), sans devoir ouvrir/fermer à chaque fois la fenêtre d édition LIENS INTERNES VERS UNE AUTRE PAGE OU UN DOCUMENT! Les liens internes sont les liens vers des sites de l Université qui sont dans jahia. Leur adresse commence toujours par Ainsi, certaines applications de l Université de Neuchâtel (horaire des cours par exemple) sont considérées comme des sites externes et vous devez simplement coller l url dans le champ «url», comme pour tout site externe. Depuis un objet de contenu, pour faire un lien interne vers une page de votre site vers un page d un autre site du domaine UniNE.ch vers un fichier vers une image (=insérer une image sur votre site) Image 67 Exemple pour lier une page Page 51

58 Image 68 Exemple pour lier une page ou un fichier depuis le FCK editor Important Vous ne devez jamais coller l url de destination un champ type «Créer un lien vers un site Web externe» ou «URL» (comme c était le cas avec Jahia 4.2). Vous devez toujours aller chercher la page ou le document sur le serveur en cliquant sur un bouton type «Lier à une page Jahia existante» ou «lien vers la page». Ainsi, en cas de suppression de la page /du document, un message d alerte avertira son propriétaire des liens existants. Il devra faire enlever les liens (les faire pointer vers la nouvelle page par exemple) avant de pouvoir supprimer sa page. Cela garantit une qualité importante aux liens sur le site web de l UniNE COPIES ET COPIES LIÉES Au moment de la création d une nouvelle page ou d un nouvel objet de contenu vous avez la possibilité de réutiliser un contenu existant, pour autant qu il soit du même type (ex. une boîte «Divers» n est pas du même type qu une boîte «Témoignage» ; si vous voulez reprendre le contenu d une boîte texte qui est dans une colonne centrale, la page doit avoir le même nombre de colonnes que celle ou l objet sera copié). Vous pouvez soit faire une copie statique ou générer une copie dynamique liée. Pour accéder à cette option vous devez aller sur la section «Outils» de l objet en création (l onglet «Sélecteur de contenu», qui nous intéresse, est déjà sélectionné). Image 69 Faire une copie Page 52

59 Dans un premier temps, vous devez soit sélectionner un site particulier, soit sélectionner tous les sites. Ensuite, il s agit de faire une recherche pour trouver la boîte où l objet désiré,(faire attention aux majuscules et minuscules). La liste des objets répondant à la recherche et leur description apparaissent alors en dessous. Seuls les objets de contenus compatibles avec l objet courant et qui sont publiés seront affichés. Il est alors possible de faire soit : Image 70 Sélection d un contenu à lier - Une copie : fait une copie à l instant présent de cet objet et l importe dans votre page. Vous pouvez ensuite le modifier comme bon vous semble. Cet objet appartient alors à votre page. - Une copie liée : fait une référence à un objet. Il n est alors pas possible d en modifier le contenu. Cet objet appartient à la page où il se trouve. En cas de modification de cet objet par son propriétaire, l objet se met à jour automatiquement dans votre page, comme si ce contenu existait réellement dans votre page. Si le propriétaire d un objet lié veut le supprimer, il recevra un message lui disant que cet objet est lié et qu il n est pas possible de le supprimer. Important Notez que vous ne pouvez faire une copie liée que sur les objets de contenu publiés. La synchronisation de la copie de destination ne se fera qu une fois le contenu source publié. Les modifications en mode brouillon de la source ne seront pas répercutées sur la copie de destination avant validation. Conseil A l intérieur du même site, il est en principe déconseillé de faire des copies de pages, car le visiteur sera décontenancé de trouver la même information à différents endroits (les liens sont à privilégier). Page 53

60 12.4 UTILISATION DE L ÉDITEUR DE TEXTE (FCK) L utilisation du FCK Editor est très proche de l utilisation du HTML Area de jahia 4, mais il comporte un certain nombre d améliorations. Son fonctionnement complet est décrit sur le site des développeurs de cet éditeur, à l adresse Il a été adapté aux besoins de l UniNE et toutes les options ne sont pas disponibles. Le fonctionnement de certaines parties intégrées à Jahia 6 du nouvel éditeur est décrit dans le document «Guide d Utilisation Jahia EEv6.1» (à télécharger sur page 113 et suivante COLLER UN CONTENU DEPUIS WORD / DEPUIS UNE SOURCE EXTERNE Lorsque vous faites un copier/coller depuis Word ou WordPad ou depuis un autre site internet, il faut impérativement utiliser le bouton ou, puis coller votre texte dans l espace prévu, sélectionner les deux options «Ignorer les polices de caractères» et «Supprimer les styles» (pour le collage depuis Word). Image 71 Coller à partir de Word De cette manière, vous supprimez les tags indésirables qui pollueraient votre page et la rendez plus rapide à l affichage pour les internautes LA GOMME Grâce à l icône «Gomme» sélectionné. il est possible très facilement de supprimer tous les styles d un contenu A noter que si le contenu a été inséré depuis Word, la gomme n est pas suffisante pour tout effacer. Pour coller du contenu depuis Word, il faut utiliser l icône RETOUR À LA LIGNE Par défaut, lors d un retour à la ligne, en HTML, le logiciel insère un nouveau paragraphe, ce qui induit un écart entre les deux lignes de texte. Il est possible de contourner ce problème en utilisant la combinaison de touches <SHIFT>+<ENTER>, qui fait un retour à la ligne sans saut de paragraphe Page 54

61 12.5 INFO BULLE Si nécessaire, le lien peut être complété par une infobulle qui donne une information complémentaire au passage du curseur de la souris. Cependant, l utilisation d infobulles ne doit pas être systématique et le texte ne doit pas être identique à celui du lien, il doit apporter une réelle valeur ajoutée. Sélectionner le texte du lien, cliquer sur le bouton «Titre»., aller dans l onglet «Avancé» et compléter le champ Image 72 Insérer une info bulle Le résultat en ligne : Image 73 Résultat d une info bulle Page 55

62 12.6 PUBLICATION PLANIFIÉE Pour tous les objets de contenu, il est possible de définir à quel moment vous voulez que votre contenu soit publié où qu il expire dans la page en mode «En ligne». Cette option permet de préparer à l avance des informations, de les valider via le workflow, mais de ne les rendre visible pour un internaute qu à une date/heure choisie. On trouve, pour tous les objets jahia, un onglet Publication planifiée dans l édition de l objet. Image 74 Exemple de publication planifiée Une fois l onglet ouvert, plusieurs options sont à choix : Image 75 Paramètres des publications planifiées Le champ «Statut actuel» indique si l objet courant est actuellement accessible en ligne. Par défaut, la planification d un objet est héritée de l objet parent (page, boîte, site, ), c est-à-dire qu il a la même planification. Si vous souhaitez avoir une planification différente vous devez sélectionner «Non» dans le champ «hériter de l objet parent». Page 56

63 Ensuite, vous avez le choix entre différents types de planifications planifiées : Aucun : aucune planification pour cet objet Date de début et date de fin : permet de préciser les dates de début et/ou de fin d accessibilité de cet objet Journalier : Permet de définir, pour chaque jour venant, des périodes d accessibilité de l objet X Jours dans la semaine : Permet de définir un calendrier hebdomadaire de la mise à disposition des objets MODIFIER L URL DE VOTRE PAGE POUR QUELLE SOIT LISIBLE ET COMMUNICABLE Il est possible dans la version 6 de Jahia, de faire simplement une ré-écriture de l URL de la page courante. Pour cela on utilise les «Vanity-URL». Ils sont décrits dans le document JahiaEEv6.1UserGuide.pdf, à la page 200. Ce document est téléchargeable sur le site A noter que dans la même interface, 2 champs permettent de faire quasi la même chose : le champ «Clé URL de la page» et le «Vanity URL». La différence est que la clé URL est partagée à toutes les langues de la page, alors que le Vanity URL n est valable que dans la langue courante. Si les deux champs sont renseignés, c est le Vanity URL qui est pris en compte. L avantage principal du Vanity URL est qu il est possible de voir tous les Vanity URLs du site à un seul endroit, à savoir dans l «Administration», dans l onglet «Afficher les Vanity URL». Ajouter une vanity URL Affichez la page à laquelle vous voulez ajouter un nom. Cliquez sur le bouton Paramètres de la page situé en haut à droite de l écran. Cliquez sur le bouton Ajouter une Vanity URL. Saisissez le texte. - Attention : Seuls les lettres sans accent, les chiffres, les points (.), les traits d union (-) et les barres obliques (/)... sont autorisés - L utilisation du slash «/», permet de créer l illusion un chemin d accès. Cochez la case Activer. Le premier nom devient celui par défaut et s affiche en gras. Recommencez les opérations 3 à 5 pour ajouter d autres noms. Cliquez sur OK pour terminer. Modifier une vanity URL Il n est pas possible de modifier une Vanity URL. La seule solution consiste à en créer une nouvelle et supprimer celle qui ne convient plus. Supprimer une Vanity URL Affichez la page à laquelle vous voulez supprimer un nom. Cliquez sur le bouton Paramètres de la page situé en haut à droite de l écran. Cliquez sur le bouton Effacer un nom Cliquez sur OK pour terminer. Attention, si vous supprimez une Vanity URL qui a été diffusée, les internautes qui ont un favori sur cette page ou qui ont mis un lien sur un site web avec cette url seront redirigés sur une page d erreur (page not found)! Page 57

64 12.8 AVERTISSEMENT «WAI» Lors de l édition de textes libres, l éditeur FCK editor vous averti si votre page possède des erreurs pour la compatibilité aux normes WAI (Web Accessibility Initiative). Ce sont les normes qui régissent l accessibilité de vos pages pour les personnes handicapées. Cette norme permet aux personnes handicapées d avoir des informations alternatives en cas de contenu qu ils ne peuvent pas voir. Ces avertissements se trouvent en dessus de l éditeur de texte en cas de problème. Image 76 Avertissement WAI Il est possible d enregistrer la page avec des avertissements WAI en cours, simplement en cliquant la case En règle générale les avertissements sont du type suivant : Prière de remplir le champ alt avec une description de l image o Pour résoudre le problème, éditer les propriétés de l image et remplir le champ «Texte de remplacement» Image 77 Champ Texte de remplacement d une image Page 58