Rédacteur web Université de Bourgogne

Transcription

1 Rédacteur web Université de Bourgogne Guide d utilisation du kit web Edition des contenus en interface Front-End Sommaire : - Accéder à l'interface de mise jour publique des articles (p 2-3) - Mettre à jour le contenu d'un article existant (p 4-5) - Proposer et créer une actualité /un agenda (p 6-8) - Utilisation de l éditeur de texte (p 9-10) - Gérez vos contenus avec Sliders (Plier/déplier) et Tabs (onglets) (p 11-14) - Sélecteur des styles > structurer la mise en forme de vos contenus (p 15-16) - Insertion d'images dans vos articles (p 17-19) - Insertion de documents dans vos articles (p 20-21) - Insertion de galeries photos / vidéos (p 22-25) - Insertion de listes à puces/ numérotée (p 26-27) - Création de liens hypertextes (p 28-31) - Mise en forme des contenus : structurer le contenu de vos articles (p 32-33) - Renseigner et mettre à jour une fiche enseignant-chercheur (p 34-37) Pour toutes questions sur l utilisation du kit : Utilisation des fonctionnalités Publications de contenus Gestion des contenus Problèmes d utilisations du kit : 1

2 Accéder à l'interface de mise jour publique des articles Interface Front-end Vous êtes rédacteur web pour votre site? Cet article vous explique comment vous connecter à l'interface publique de gestion des contenus de votre site internet, également appelée interface Front-end. Quel navigateur web utiliser? Pour garantir une compatibilité maximale avec le système de gestion des contenus Joomla utilisé pour le kit web, nous recommandons de travailler avec le navigateur Mozilla Firefox. Joomla fonctionne globalement avec tous les navigateurs web (Chrome, Safari, Opéra, Internet Explorer ) mais nous ne garantissons pas le fonctionnement de toutes ses options selon le navigateur (autre que Mozilla Firefox) et la version que vous utilisez. Si Firefox n est pas installé sur votre ordinateur, vous pouvez le télécharger sur le site de mozilla et l installer ensuite sur votre ordinateur. En cas de difficultés, vous pouvez contacter le correspondant informatique de votre composante / laboratoire qui pourra vous aider à l installer. Pour vous connecter à l'interface Front-end : Le bouton de connexion est situé sur le bandeau pied de page, accessible depuis toutes les pages de votre site. (Fig. 1) Fig. 1 : Pied de page du site et bouton Mon compte ou Admin (selon les sites) pour vous connecter en Front-End 2

3 Une fois cliqué sur «Mon compte», vous arrivez sur la page de connexion : Cliquez sur le bouton Connexion CAS ub : Vous accédez à la zone de connexion du Serveur Central d'authentification de l'ub (CAS), sécurisé et qui vous permet d'utiliser les mêmes identifiants que pour l ENT et les autres applications de l'université. Saisissez vos login et mot de passe ENT et cliquez sur «Se connecter». Un message valide votre connexion. Bravo! Vous êtes connecté et vous pouvez gérer le contenu de votre site en mode Front-end. C est également sur cette page que vous pouvez vous déconnecter. Quel Login et mot de passe? Vous ne savez plus quels identifiants utiliser? Vous n êtes pas personnels de l ub mais vous devez mettre à jour un kit web? Ça ne marche pas? Votre compte n est pas créé? Pour ces questions et toutes autres questions, utilisez l application : helpdesk.u-bourgogne.fr 3

4 Mettre à jour le contenu d'un article existant Interface Front-end En tant que rédacteur vous pouvez mettre à jour les articles déjà publiés dans votre site web. Une information change en cours d année, un contact, un fichier PDF à télécharger, une nouvelle association étudiante à indiquer vous pouvez facilement depuis le Front-end effectuer vos modifications (suppression, modification et ajout de contenus) dans vos articles! Accéder à l édition d un article Lorsque vous êtes connecté en tant que rédacteur une icône Edition apparaît au-dessus du titre de chaque article de votre site. (Fig. 1) > Icône Edition Fig. 1 : Accéder à l édition d un article En cliquant sur cette icône, vous ouvrez l Editeur HTML qui va permettre de gérer les modifications de contenus dans l article. En tant que rédacteur, vous pouvez mettre à jour le contenu des articles et celui des encarts dès que l icône édition est visible et cliquable! Attention : vous cliquez sur l icône édition et l éditeur de texte ne s ouvre pas, Ou si vous voyez une icône verrou à la place de l icône édition. Cela signifie que l article que vous voulez mettre à jour a mal été fermé lors de sa précédente utilisation. Dans ce cas, il suffit de contacter l administrateur de votre kit ou de déposer un ticket sur l application helpdesk.u-bourgogne.fr L article pourra alors être facilement déverrouillé depuis l interface back-end du site. Cette action de déverrouillage est par contre impossible depuis l interface front-end. Conseil : Pensez à sauvegarder régulièrement votre travail dans l'éditeur de texte Si vous travaillez longtemps sur l édition d un article, pensez régulièrement à cliquer sur le bouton «Sauver et fermer». En effet la fonction de sauvegarde automatique et le raccourci Ctrl+S ne fonctionnent pas avec l éditeur HTML du kit web. 4

5 Description générale de l éditeur de contenus : Titre de l article (modifiable) Enregistrer et publier vos modifications de contenu : bouton Sauver et fermer Barre d outils : Fonctionnalités de gestion des contenus (insertion de liens hypertextes, images, docs téléchargeables ), styles La fenêtre de contenu de l article : Gérez vos modifications de contenus ici. Fig. 2 : L éditeur HTML permet de gérer et de publier les modifications de contenus Lorsque vos modifications sont enregistrées, cliquer sur le bouton Une fois le bouton cliqué, vous revenez sur l article tel que les internautes le voient. Les modifications que vous avez effectuées apparaissent normalement directement dans l article, et seront directement visibles par tous les internautes visitant cette page. Zone publication Située en bas de zone Edition article, les options de publication ne sont utiles que si vous proposez une nouvelle actualité. 5

6 Proposer et créer une actualité /un agenda En tant que rédacteur, vous pouvez proposer des actualités / agendas (conférence, colloque, actus formations, infos pratiques ) Les actualités et agendas s affichent dans une zone réservée, sur la page d accueil de votre kit web (Fig. 1) Le menu gauche peut également proposer une rubrique Agenda : dans cette rubrique, seuls les événements agenda sont affichés. Menu gauche Rubrique agenda Fig. 1 : la zone principale actualités / agenda du kit est en page d accueil Les actus et agendas sont également accessibles dans des encarts spécifiques qui peuvent être positionnés sur les pages de votre site, dans la colonne encarts : ATTENTION : le contenu de ces encarts est dynamique. Il affiche et reprend automatiquement les titres d actus et agenda que vous créez. Comment proposer une actualité / un agenda? Après vous être connecté en tant que rédacteur en Front-end, cliquez sur le bouton «Proposer un article» dans le bandeau en pied de page (Fig. 1) de votre site : 6

7 La fenêtre de proposition d article s ouvre > vous pouvez complétez les champs vides : > Titre de l actualité / Agenda > Alias : généré automatiquement par Joomla Zone de gestion des contenus : Textes / Images / Liens hypertextes / Docs à télécharger Lecteur vidéo / audio >Barre d outils : Fonctionnalités de mise en forme et gestion des contenus (insertion de liens hypertextes, images, docs téléchargeables ), styles du texte. >Publication de votre article : Choisissez la catégorie Actualités Externes / Internes ou Agenda. >Statut de votre article : Proposé par défaut par Joomla. Inutilisé dans le kit web. Une fois votre article actu prêt, enregistrez le et publiez le en cliquant sur : Attention, En tant que rédacteur front-end, vous pouvez uniquement proposer des articles pour les actualités et l agenda. Les catégories liées aux rubriques / sous rubriques et encarts de votre site sont gérées par l administrateur de votre kit. Si vous pensez qu il manque une rubrique, sous-rubrique, un encart vous devez contacter l administrateur de votre site et voir avec lui pour leur mise en place. 7

8 Conseils et règles de gestion de contenus pour les actualités et agenda La zone d actualité / agenda en page d accueil des sites n affiche qu un résumé de l article. Au clic, la page Actu/Agenda complète s ouvre. Pour créer cette accroche spécifique, dans l éditeur de contenus, vous devez utiliser le bouton «Lire la suite» : Etape 1 : dans l éditeur, cliquez à l endroit ou insérer le lien «Lire la suite». ETAPE 2 : Cliquez sur le lien «Lire la suite» Une barre se matérialise. Le contenu situé avant la barre s affichera en page accueil et dans la page Actu/Agenda. Le contenu situé après la barre ne s affiche que dans la page Actu/Agenda. Il est indispensable d utiliser ce lien «lire la suite» pour créer l accroche pour votre Actualité/Agenda en page accueil de votre site, sinon vous affichez la totalité de votre Actu/Agenda en page d accueil, ce qui donne un résultat peu agréable, ergonomique, pratique pour vos internautes. Encart Agenda : Affichez la bonne date d événement Lorsque vous proposez un événement dans l Agenda, il pourra s afficher dans l encart Agenda mentionné plus haut dans l article. Cet encart affiche les titres des événements et une date. Pour paramétrer cette date liée à un agenda, vous devez contacter l administrateur de votre kit car, en tant que rédacteur vous ne pouvez pas pour l instant vous-même gérer cette date. Il faut choisir la date de création de l article. 8

9 Utilisation de l'éditeur de texte L éditeur de texte vous propose tous les options pour gérer le contenu dans vos articles Présentation des options de mise en forme du texte. A noter : une info bulle apparaît au survol de chaque bouton, décrivant sa fonction. Ligne 1 : Redimensionner la taille de l éditeur Agrandissez/réduisez la taille de la fenêtre Editeur pour travailler de manière plus pratique. Boutons Rechercher / remplacer : Ces deux boutons permettent de rechercher un mot/groupe de mots et de remplacer toutes ses occurrences par un autre mot/groupe de mots. Boutons Couper et Copier : Copier et couper un contenu de l éditeur. Les raccourcis claviers fonctionnent (Ctrl+C / Ctrl+X) Bouton coller : Coller un contenu copié et/ou coupé dans l éditeur. Ce bouton permet également de coller proprement du texte copié dans WORD Sélecteur paragraphe : le Sélecteur de formats (Paragraphe) est présent à titre indicatif mais vous n en avez normalement pas besoin. Sélecteur styles CSS : Les styles Chapo et intertitre vont vous servir à structurer la mise en forme de votre texte. Encadre horizontal et vertical vont vous permettre de créer des encadrés de mise en valeur des contenus. Le choix Tableau apparaît dans la liste de styles mais vous ne devez pas l utiliser. Boutons Annuler / Rétablir : Même principe que sous WORD et les raccourcis claviers fonctionnent : Ctrl+Z / Ctrl+Y Afficher/Masquer les balises des blocs (paragraphes ) : Cette option est activée par défaut. Elle est très pratique, par exemple pour la gestion des styles, qui sont en effet souvent liés à un paragraphe. En affichant les blocs, il peut être plus facile de gérer l application des styles. Afficher/Masquer l éditeur HTML : Accès à la gestion du contenu en HTML. A n utiliser que si vous avez de bonnes connaissances de bases. 9

10 Ligne 2 : Bouton mise en gras : Bouton mise en italique : Bouton listes numérotées : Bouton liste à puces : Bouton indice : Bouton exposant : Boutons Augmenter/Diminuer le retrait : Bouton Insérer un caractère spécial : Bouton Citation : Ligne 3 : Elle contient toutes les options permettant de créer et gérer un tableau. Attention : Les tableaux dans les éditeurs HTML sont beaucoup plus complexes à gérer que dans les logiciels EXCEL ou WORD. Ils sont beaucoup moins souples que les logiciels de bureautiques. N essayez pas de reproduire des tableaux complexes, vous risquez de perdre beaucoup de temps. Transformez plutôt ce type de données en documents à télécharger. Dans l éditeur, privilégiez des tableaux s ils sont basiques. Ligne 4 : Des options de gestion de contenus spécifiques à Internet Bouton insérer une ligne horizontale : Insertion d'un séparateur horizontal, option utile pour structurer son contenu. Bouton insérer une image : Bouton insérer un lien hypertexte ou le supprimer : Le bouton insérer un lien est également utilisé pour l insertion de documents téléchargeables (.pdf) Bouton Insérer/Modifier une ancre : L ancre est un lien interne dans la page. Un des sites web qui utilise le mieux les ancres est wikipedia, qui place au sommet de chaque article un sommaire avec des ancres vers chaque section de l article. Bouton Insérer un lien Lire la suite : Utile pour les actualités / agenda > matérialisation leur accroche en page accueil. Boutons «Nettoyer le code HTML» et «Supprimer tous les styles» : Ils permettent d effacer la mise en forme des contenus et de nettoyer le code HTML associé. 10

11 Gérez vos contenus avec Sliders (Plier/Déplier) et Tabs (onglets). Une fonctionnalité utile pour les longs contenus ou pour les structures clairement établies. Si une de vos pages présente un long contenu (texte, image, etc ) vous aviez jusqu à présent la possibilité d utiliser les ancres nommées, pour faire des liens à l intérieur de votre page. Vous pouvez à présent utiliser le système des Tabs et Sliders pour gérer autrement la présentation de votre contenu. 1 Sliders : système de Plier / Déplier La présentation des associations sur le site de l ub utilise ce système : La liste des associations est affichée dans une mise en forme Liste (barre colorée, puce triangle). Lorsqu on clique sur un titre, les informations se déplient et on peut replier pour revenir à l état initial. Des mots clés : Déplier au survol des barres et Replier indiquent à l internaute les actions qui s effectuent au clic de souris. Pour obtenir ce résultat dans l éditeur de contenus, il vous suffit d insérer les balises dans votre contenu texte : {slider=titre} au début de votre paragraphe et {/slider} à la fin de votre paragraphe. 11

12 Après le caractère = : vous indiquez le titre qui sera dans la liste et sur fonds de couleur Cliquez sur l onglet avancé Il peut bien sûr y avoir du texte avant et après les sliders. 12

13 2 Tabs : système d onglets La présentation des fiches enseignants-chercheurs peut par exemple utiliser avantageusement le système des onglets : Ex : En cliquant sur chaque onglet, vous affichez le contenu correspondant. Seul bémol, il est difficile selon la taille des titres d onglet d aller au-delà de 6 ou 7 onglets. Le principe est à peu près le même que pour les sliders. Pour obtenir ce résultat dans l éditeur de contenus, il vous suffit d insérer les balises dans votre contenu texte : {tab=titre} au début de votre paragraphe et {/tabs} à la fin de votre paragraphe. 13

14 Après le caractère = : vous indiquez le titre qui sera dans l onglet, sur fond coloré. Contrairement à la balise {/slider} qu il faut placer à la fin de chaque paragraphe, la balise {/tabs} n est utile qu une seule fois, et est à placer à la fin de tous vos onglets. Onglets (tabs) ou Plier/déplier (Sliders)? Dans les deux cas, les onglets positionnés sur une ligne horizontale, ou les listes plier/déplier offrent une vue très synthétique du découpage du contenu. Les onglets sont cependant plus pratiques lorsque les titres de section ne sont pas très longs (deux à trois mots maximum). Les sliders seront de leur côté plus pertinents si vous avez plus de 7 éléments textes à découper, et (ou) avec des titres supérieurs à 3 mots. C est en fonction de votre contenu qu il faut juger de l utilité de l un ou de l autre. Pour finir, ce type de mise en page est rarement utilisé pour les actus et agenda. Utilisez les plutôt pour des contenus présents dans les rubriques du menu gauche. 14

15 Sélecteur des styles > structurer la mise en forme de vos contenus L'utilisation des styles permet de produire un contenu structuré en faisant ressortir visuellement certaines informations. Dans le sélecteur, nous avons prédéfini quatre styles qui vont vous aider à structurer la mise en page de vos articles. Exemple avec un article du site communication.u-bourgogne.fr : > Style Titre > Style Chapo > Style Intertitre > Style Encadré horizontal Le style titre est directement appliqué au contenu renseigné dans le champ «Titre» de l éditeur de contenu. Pour les autres styles : Chapo Intertitre encadrés horizontal et vertical, PDF, c est à vous de les appliquer en utilisant le sélecteur de styles CSS de l éditeur. 15

16 Pour utiliser les styles proposés dans le «sélecteur de styles» : Il faut sélectionner avec la souris une zone de texte qui doit être transformée en chapo, intertitre ou encadré et de cliquer dans la liste Styles CSS, le style que vous souhaitez lui appliquer. Création d'un chapo pour votre article : Ce style a été conçu pour le premier paragraphe de votre texte, son introduction. La taille de la police et sa couleur ont changés, mettant ainsi ce premier paragraphe en valeur par rapport au reste du texte. Pour la création d'un intertitre, même principe : Les intertitres ont été créés pour rythmer un long texte et matérialiser des titres aux différentes parties qui le composent. Les encadrés horizontaux et verticaux : Ils affichent le texte dans/ à l intérieur d un encadré de couleur sous le texte sélectionné, mettant ainsi en valeur les infos qu il contient. Attention : le style encadré s applique à un paragraphe à la fois. Assurez-vous que la zone que vous souhaitez transformer en encadré est UN SEUL paragraphe. Pour cela : cliquez sur le bouton : afficher les blocs Les blocs sont tous délimités par un encadré en pointillé qui précise sa nature : Paragraphe (p) / container (div ou span) / liste à puce ou numérotée (ul). Si vous avez sélectionné les deux derniers blocs paragraphes : l application du style encadré horizontal donnera DEUX encadrés. Il suffit donc de regrouper le texte en un seul paragraphe et de réappliquez le style. Touches shift+entrée pour aller à la ligne sans changer de paragraphe. Insérer une puce PDF Sélectionner un paragraphe qui propose de télécharger un document (lien cliquable) puis cliquez sur PDF. La puce est visible à gauche du paragraphe avec une marge à droite de quelques pixels. Utiliser les styles CSS : un résultat bénéfique pour vos internautes. Si vous appliquez sur chacune de vos pages ces styles, vous proposerez des pages web homogènes à vos internautes, garantissant une consultation plus efficace du contenu, et un confort accru. 16

17 Insertion d'images dans vos articles Votre site web dispose d une médiathèque dans laquelle vous allez pouvoir enregistrer les photos / images qui seront affichées dans vos pages. Dans l éditeur de texte, cliquez à l endroit où vous souhaitez afficher l image. Puis cliquez sur l icône Insérer/Editer une image : pour accéder au «Gestionnaire d images». Cas N 1 : L image est déjà enregistrée dans la médiathèque de votre site > ETAPE 1 > ETAPE 2 > ETAPE 3 ETAPE 1 : Naviguer dans l arborescence de dossiers pour accéder à l image que vous souhaitez insérer. ETAPE 2 : Cliquez sur l image choisie (des infos apparaissent alors dans les zones Propriétés et Détails). ETAPE 3 : Cliquez sur le bouton insérer. Le logo de l ub apparaît à l endroit choisi. L image est bien insérée dans mon texte, calée avec le chapo. Des paramètres sont automatiquement appliqués à l image insérée : - le texte se cale à droite de l'image. (alignement : gauche) - 5 pixels de marge sont insérés à droite de l'image pour que le texte n y soit pas collé. 17

18 Ces paramètres sont modifiables dans la zone propriétés du Gestionnaire d images : - alignement de l image - taille des marges entre l image et le texte (en pixels) - dimensions de l image (en pixels) - description de l image (utile pour les personnes déficientes visuelles) Cas N 2 : L image n est pas insérée dans la médiathèque de votre site Il faut au préalable réaliser cette opération. > ETAPE 2 > ETAPE 1 ETAPE 1 : choisissez dans l arborescence le dossier où vous allez enregistrer l image ETAPE 2 : cliquez sur le bouton envoyer sur le serveur : La fenêtre «Envoyer» s ouvre. > ETAPE 2 > ETAPE 1 > ETAPE 3 ETAPE 1 : Cliquez sur parcourir ou «cliquer-glisser» le fichier dans la fenêtre et cliquer sur «envoyer» ETAPE 2 : Sélectionnez l image sur votre disque dur et validez avec «Ouvrir» ETAPE 3 : Cliquez sur «Envoyer» pour enregistrer l image sur le serveur Vous pouvez maintenant intégrer l image comme indiqué dans le cas N 1. Formats d images possibles : Format JPEG : photos Format PNG / GIF : illustrations, infographie / Logos Résolution : 72 DPI 18

19 Afficher la légende d une photo : Il est possible d afficher une légende aux images que vous insérez dans vos pages. Elle s affiche dans un rectangle et sur fonds colorés. Tant que vous survolez l image, la légende s affiche. Pour gérer l affichage de la légende : 1 / Lorsque vous éditez votre image Cliquez sur l onglet avancé 2 / Cliquez sur jcetooltip dans la liste de styles CSS 3 / Remplissez le champ titre avec le texte qui s affichera en légende. N oubliez pas de valider le gestionnaire d images pour bien enregistrer vos modifications sur les images et leur légende. Si vous testez cette option et qu elle ne fonctionne pas sur votre site (la légende n apparaît pas au survol de l image), déposez un ticket sur : 19

20 Insertion de documents dans vos articles Pour insérer un document à télécharger dans votre article, il faut créer un lien depuis l éditeur de contenus vers votre document hébergé dans la médiathèque. Dans l éditeur de texte, sélectionnez la zone de texte qui sera cliquable pour télécharger le document, Puis cliquez sur l icône Insérer/Modifier un lien : pour accéder au «Gestionnaire de liens». Cas N 1 : le document est déjà enregistré dans la médiathèque > Cliquez sur l icône Parcourir pour accéder au Gestionnaire de fichiers ou sont enregistrés vos documents téléchargeables La fenêtre «Gestionnaire de fichiers» s ouvre : > ETAPE 1 : Retrouvez dans l arborescence le dossier qui contient le document > ETAPE 2 : Sélectionnez le document (cliquez sur son nom) > ETAPE 3 : Cliquez sur Insert Vous êtes de retour sur le gestionnaire de liens : L adresse du document sur le serveur est précisée dans le champ URL. Dans la zone attributs, choisissez : Ouvrir dans une nouvelle fenêtre puis cliquez sur Insérer. Le lien cliquable vers le doc apparaît bien dans l éditeur de contenus. Attention : Le lien n est pas cliquable dans l éditeur de texte. Il faut enregistrer et valider pour revenir sur le site et pouvoir cliquer sur le lien. 20

21 Cas N 2 : Le document n est pas enregistré dans la médiathèque Allez dans la fenêtre Gestionnaire de fichiers > ETAPE 1 > ETAPE 2 Etape 1 : choisissez dans l arborescence le dossier où vous allez enregistrer l image Etape 2 : cliquez sur le bouton envoyer sur le serveur : La fenêtre «Envoyer» s ouvre. > ETAPE 2 > ETAPE 1 > ETAPE 3 ETAPE 1 : Cliquez sur parcourir (ou système de «cliquer-glisser» et «envoyer») ETAPE 2 : Sélectionnez l image sur votre disque dur et validez avec «Ouvrir» ETAPE 3 : Cliquez sur «Envoyer» pour enregistrer le document sur le serveur Le fichier est désormais enregistré dans la médiathèque. Vous pouvez à présent l intégrer dans votre article > Revenez au Cas N 1. 21

22 Insérer une galerie photos / une vidéo Insertion d une galerie photo dans le corps de l article Il s agit dans cet exemple d insérer une galerie photo créée avec l application ub : Si vous n avez pas de compte sur cette application il suffit de vous rendre sur cette adresse et de remplir le formulaire d inscription. Il sera ensuite validé par le webmaster du service communication et vous pourrez ensuite vous connecter à l application avec vos identifiants ENT pour créer vos galeries. Une fois votre galerie créée, vous devez récupérer son identifiant dans l onglet lien galerie : 2/ Copiez l identifiant de la galerie : La suite de chiffres placée après id= 1/ Cliquez sur Lien Galerie Retourner ensuite de l éditeur HTML de l article dans lequel vous souhaitez afficher cette galerie et insérez votre identifiant de galerie. Insérer l identifiant copié entre les balises {photosb} {/photosb} 22

23 photosb correspond au type de galerie. L application propose 3 modèles de galerie pour les articles (zone centrale de la page web) : Modèle A : identifiant {photosa} {/photosa} Modèle B : identifiant {photosb} {/photosb} Modèle C : identifiant {photosc} {/photosc} 1 modèle de galerie pour les encarts : Modèle Encart : identifiant {photosencart} {/photosencart} 23

24 Lorsque vous êtes dans la rubrique lien galerie pour copier l identifiant, le coin supérieur gauche vous donne des infos et vous rappelle quel type de galerie est utilisé. Une fois l article enregistré, vous pouvez vérifier la bonne publication de la galerie sur le site. 24

25 Insertion d une vidéo dans le corps de l article Il s agit ici d insérer une vidéo publiée sur une plateforme de partage vidéo telle que You Tube. Le principe est le même que pour les galeries photos. 1/ Publier votre vidéo sur You Tube 2/ Récupérer son identifiant L identifiant est récupérable dans l URL de la page qui affiche la vidéo. Il s agit de la suite de lettres et chiffres située après watch?v= 2/ Dans l éditeur de contenus du kit Insérer à l endroit où vous souhaitez afficher la galerie l identifiant : {youtube}tn7w7400vkq{/youtube} Enregistrez votre article et vérifiez la mise en ligne de votre vidéo sur votre site web. Intérêt : En utilisant cette méthode, vous n êtes plus obligé comme par le passé d insérer vos contenus dans l espace HTML de l article, et risquer ainsi une erreur de gestion de code (balises HTML mal gérées, etc ) Des difficultés pour insérer une galerie photos / un fichier son (soundcloud), vidéo (You tube) dans vos articles : 25

26 Insertion de listes à puces/ numérotées Les listes à puces permettent de structurer votre texte lorsqu il comporte des listes. La procédure de création de liste est identique pour liste à puces ou numérotée. Conseil d utilisation : - Utilisez les listes à puces / numérotée dès que votre liste comporte plus de deux propositions. - Ne créer si possible qu une seule liste par article (Si vous créez plusieurs listes dans un même article, l effet de mise en valeur perdra de son intérêt. Créer une liste à puces / numérotée : ETAPE 2 : Cliquez sur le bouton Liste à puce ETAPE 1 : Sélectionnez les éléments de la liste répartis chacun sur une ligne différente (aller à la ligne). Votre liste à puces est bien créée : 26

27 Pour sortir/clore une liste à puces / numérotée : ETAPE 2 : Cliquez sur le bouton Liste à puce ETAPE 1 : Allez à la ligne après la dernière proposition de la liste (Clavier : Bouton entrée) La liste se ferme et vous êtes dans un nouveau paragraphe. 27

28 Création de liens hypertextes C est une des fonctions primordiales du web : les liens hypertextes relient les pages et les sites web entre eux et permettent de «naviguer» entre les pages d un site et entre les sites webs. 1 / créer un lien interne > vers une des pages de son site Dans l éditeur de textes, écrivez le texte qui servira de lien cliquable et/ou sélectionnez ce texte, puis cliquez sur l icône Insérer/éditer un lien : Le «Gestionnaire de liens» s ouvre > ETAPE 1 : Zone liens internes : sélectionnez l article ou le lien de menu. Tous vos articles y sont enregistrés et classés par catégories > ETAPE 2 : Choisir Afficher dans la même fenêtre (Lien interne) > ETAPE 3 : Cliquez sur Insérer 2 / Créer un lien externe > vers une page d un autre site web Récupérer au préalable l adresse de la page web vers laquelle vous voulez pointer. > Copiez l adresse URL de la page cible 28

29 Ensuite, dans votre article sur le kit, ouvrez le «Gestionnaire de liens» pour créer votre lien externe : > ETAPE 1 : Collez l adresse de la page web. « est nécessaire. Joomla vous propose automatiquement de l ajouter si vous oubliez > ETAPE 2 : Cible du lien > Choisir Afficher dans une nouvelle fenêtre (Lien externe) Après sauvegarde de l éditeur, le lien est inséré, cliquable et ouvre une nouvelle page. > ETAPE 3 : Cliquez sur Insérer 3 / Créer un lien vers une adresse mail Ouvrez le «Gestionnaire de liens» pour créer votre lien vers une adresse de messagerie > ETAPE 1 : Cliquez sur l icône > ETAPE 2 : Indiquez l adresse mail du destinataire. Les champs «Copie à» «Copie cachée à» et Sujet» ne sont pas utilisables > ETAPE 3 : Cliquez sur Valider > ETAPE 4 : Cliquez sur Insérer 29

30 4 / Création d une ancre nommée > lien à l intérieur de la page Utilisez les ancres nommées principalement si votre page est longue et contient beaucoup de contenu. Un excellent exemple est le site wikipédia dont tous les articles présentent un sommaire composé de liens vers les différents paragraphes de la page : il s agit d ancres avec des liens qui pointent vers ceux-ci. Ex : Positionner votre ancre dans l article : Les ancres vont être insérées dans votre article aux endroits qui structurent votre texte : par exemple les intertitres. Si votre article est constitué de plusieurs paragraphes, chacun pourra avoir son intertitre. Dans l éditeur, cliquez à l endroit où vous souhaitez insérer l ancre, juste avant un intertitre par exemple, puis cliquez sur le bouton Insérer/Modifier une ancre : > Nommez l ancre puis cliquez sur insérer > L ancre est bien affichée à côté de l intertitre contact. Vous pouvez à tout moment modifier le titre de l ancre en cliquant dessus puis en cliquant sur le bouton : Créer un lien hypertexte vers cette ancre : Ouvrez le «Gestionnaire de liens» pour créer votre lien vers l ancre «Contact» : > ETAPE 1 : Sélectionnez le nom de l ancre vers laquelle votre lien sera créé > ETAPE 2 : Choisir Afficher dans la même fenêtre (Lien interne) > ETAPE 3 : Cliquez sur Insérer Le lien est créé et permet d accéder en cliquant à la zone de la page où l ancre est positionnée. 30

31 Les liens une fois qu ils sont créés restent modifiables. Dans l éditeur, il suffit de cliquer dessus puis de cliquer sur l icône Insérer/éditer un lien. ATTENTION : Quel que soit le type de liens (Interne / Externe / Courriel / Ancre nommée) si vous ne sélectionnez pas de zone de texte avant d ouvrir le gestionnaire de liens, et que vous validez la création du lien, un message d erreur vous demandera de créer un texte de lien (qui sera cliquable une fois celui-ci validé) : > Champ «Texte» de lien : Si vous présélectionnez un texte avec la souris avant d ouvrir le gestionnaire de liens, c est dans ce champ qu il apparaîtra. Le texte de lien est indispensable. Un problème avec les liens Les liens que vous créez ne fonctionnent pas? Des messages d erreur apparaissent? helpdesk.u-bourgogne.fr 31

32 Mise en forme des contenus : structurer le contenu de vos articles Une gestion cohérente des contenus de votre site doit permettre à vos internautes : - de consulter facilement les informations que vous proposez et de les lire à l écran. - de retrouver une mise en forme homogène de vos contenus sur chaque page de votre site. Dans chaque page de votre site, le contenu est organisé en 3 colonnes : Colonne gauche : Menu de navigation principal Colonne centrale : > Article (page de contenu) > Liste d actualités / Agenda (page d accueil) Colonne droite : Encarts de contenu : > Navigation transversale (liens vers pages internes / externes) > Contacts > Téléchargement de doc > Relais Actus / Agenda > Multimédia (galerie photos ) > Géolocalisation > Facebook like box Structurez le texte de votre article Votre rôle : réaliser une présentation cohérente du contenu vos articles dans chaque page de votre site. Privilégiez la simplicité et un découpage clair de vos textes. L éditeur de contenus propose une fonction gestion des styles pour vous aider à structurer vos textes. Pour vous faciliter le travail, les caractéristiques de chaque style sont prédéterminées (police, taille, couleur ) pour les titre, accroche (chapo), intertitre, paragraphe de texte, encadré, liste à puces Pour utiliser les styles : Voir l article Utilisation des styles p Ces principes de base doivent être appliqués à toutes vos articles et selon vos besoins : Le titre, le chapo et les paragraphes séparés par un saut de ligne sont la base de votre mise en page. Respecter ces principes garantit une présentation homogène et cohérente de vos articles. Selon la longueur de votre article (nombre de paragraphes différents) et les infos dont vous disposez, vous n aurez pas toujours recours aux intertitres, aux encadrés ou à la photo pour illustrer. Pour les liens hypertextes, il est recommandé de les placer en fin d article. 32

33 Les options secondaires de mise en forme. Pour compléter la mise en page de vos textes, vous pouvez également utiliser : Mise en gras / listes à puces. Quelques erreurs de mise en forme à ne pas commettre : Vouloir reproduire la mise en forme d'un document word : De nombreux textes créés dans votre site seront souvent repris de fichiers word. Leur mise en forme est souvent différente de celle préconisée pour votre site web, et n utilise pas les styles et options de mises en forme proposées dans l'éditeur de texte du kit web. Exemple : Textes soulignés sur internet, on ne souligne pas un texte pour le mettre en valeur, car le style souligné est uniquement utilisé pour les liens hypertextes, alors qu il est couramment utilisé sur word pour mettre en valeur un texte. Qui plus est, vous ne pouvez pas copier-coller directement un texte depuis un fichier word dans l'éditeur du kit. La mise en forme de votre article sur vitre site internet doit plutôt obéir aux consignes proposées ci-dessus. Mettre un paragraphe entier en italique : l italique est difficile à lire à l écran, et en fonction de votre ordinateur et écran, les caractères italiques sont plus ou moins bien affichés : à utiliser avec légèreté. Mettre des mots en gras à toutes les lignes : Utiliser «abusivement» de la mise en gras réduira l effet de mise en valeur. Réservez le gras pour les mots vraiment importants de votre texte. Attention aux lettres capitales : Les lettres capitales sont difficilement lisibles à l écran. Et plus le nombre de mots qui se succèdent sont en capitales, moins le texte sera lisible. Préférez la mise en gras. 33

34 Renseigner et mettre à jour une fiche enseignant-chercheur Chaque site de laboratoire basé sur le kit web peut disposer d une rubrique rassemblant les fiches de présentation de ses personnels (enseignants-chercheurs / techniciens / ITRF ). En accès public, elles affichent notamment leurs coordonnées professionnelles, CV, publications et la liste de leurs enseignements, etc Pour modifier une fiche, commencez par vous connecter en front-office. Rendez-vous ensuite sur la fiche que vous souhaitez modifier. Si vous ne la trouvez pas via le menu de gauche, tapez directement le nom et le prénom de l enseignant-chercheur dans la barre de recherche. Cliquez sur pour éditer la fiche. 1 - Les différents éléments de la fiche Lorsque vous avez cliqué sur l icône, l éditeur s ouvre. Il comprend différentes zones (les zones modifiables sont en vert) : 1 : Intitulé de l onglet : Ne doit pas être modifié. 2 : Contenu de l onglet. C est dans cet espace que vous ajoutez vos informations. 3 : C est ici que vous devez ajouter votre photo. 4 : C est ici que vous précisez vos coordonnées. 5 : Balise fermante : Ne doit pas être modifiée ou supprimée. 34

35 35

36 2 Ajouter vos informations (zones 2) Pour ajouter vos informations dans les zones 2, vous pouvez rédiger directement dans l éditeur ou copier vos informations depuis une autre source. Si vous choisissez cette seconde option, veillez à respecter les démarches suivantes : 1) Copiez le texte que vous souhaitez placer dans votre fiche 2) Placez votre curseur à l endroit où vous voulez coller votre texte dans l éditeur 3) Cliquez sur (voir ci-dessous) et copiez votre texte dans l espace blanc 4) Cliquez sur "Insérer". De cette manière, le style éventuel de la source (police, taille de caractères, couleur ) sera supprimé pour respecter le style de la fiche. Reproduisez cette action pour chaque rubrique (carrière, projets, publications ). Attention : n oubliez pas que seul le texte présent dans les zones vertes est modifiable. Vous ne devez pas modifier ou supprimer les autres éléments. 3 Ajouter votre photo (zone 3) Tout d abord, préparez votre photo de profil. Veillez à ce que votre image ne soit ni trop grande ni trop lourde, pour ne pas ralentir l affichage de la page. Dans l idéal, aucun côté de votre photo ne doit dépasser 130px. Ensuite, sélectionnez le portrait dans la fiche en cliquant dessus. Il doit se surligner en bleu. Pour le remplacer par votre photo, cliquez sur l icône "Insérer / modifier une image" : Dans le gestionnaire d images qui s ouvre, sélectionnez le dossier dans lequel vous voulez enregistrer votre photo. Cet emplacement n a pas d importance, il vous permet seulement d organiser vos images sur le serveur. Ensuite, cliquez sur au-dessus de la colonne "Détails". 36

37 Dans la fenêtre qui s ouvre, faites glisser votre image dans la zone grise ou cherchez-la sur votre ordinateur avec le bouton "Explorer". Enfin, cliquez sur "Envoyer". Votre image apparaît désormais dans votre fiche. 4 Ajouter vos coordonnées (zone 4) La modification de cette zone se fait de la même façon que pour les zones 2. Veillez à respecter la mise en page : nom et prénom en gras et saut de ligne entre chaque information. Vous pouvez ajouter autant de coordonnées que nécessaire. Le nombre de caractères n est pas limité. 5 Publication / En attente de publication L espace de publication se trouve sous l éditeur : Si vous avez achevé la rédaction de votre fiche, sélectionnez le statut "Publié". Vous pouvez également préciser à quel moment elle sera mise en ligne (par défaut, il s agit de la date de création) et à quel moment elle sera dépubliée. Si vous ne souhaitez pas indiquer de date de fin de publication, laissez les "0". Si votre fiche est en cours de réalisation et que vous souhaitez la terminer plus tard, sélectionnez le statut "Dépublié". Vous pouvez également la supprimer avec le statut "Mis à la corbeille" ou l archiver avec "Archivé". Pour terminer, n oubliez pas d enregistrer vos modifications en cliquant sur "Sauvegarder", au-dessus de l éditeur. 6 Créer une nouvelle fiche à partir d une fiche vierge Pour créer une fiche en partant de zéro, ou dans le cas où vous auriez fait une erreur de manipulation et supprimé le contenu de votre fiche, vous devez récupérer le code HTML. Pour ce faire, rendez-vous sur une fiche déjà créée et cliquez l icône "Editeur de code" : Copiez l intégralité du code : <table class="tableau" style="height: 145px; width: 500px;" border="1" cellpadding="2"> à <p>{/tabs}</p>. Ouvrez ensuite la fiche vierge et cliquez sur l icône "Editeur de code". Collez ce code dans l éditeur. Cliquez une nouvelle fois sur l icône pour revenir au mode d édition classique. Il ne vous reste plus qu à vous entrer vos informations. 37