L'eau près de chez vous · Web viewDirection des Systèmes d’Informations. SITE WEB "SAUVONS L'EAU" (Xème PROGRAMME)-----Manuel utilisateur VERSION DATE OBJET DE LA VERSION AUTEUR

Direction des Systèmes d’Informations

SITE WEB "SAUVONS L'EAU"(Xème PROGRAMME)

------------------------Manuel utilisateur

VERSION DATE OBJET DE LA VERSION AUTEUR0.1 22/11/2013 Création Julien Abt0.2 26/11/2013 Compléments Hervé Chuzeville0.3 29/11/2013 Prise en compte remarques

AERMCAudrey Vairac

0.4 06/12/2013 Modifications mineures Hervé Chuzeville1.0 11/12/2013 Compléments Julien Abt1.1 12/12/2013 Modifications mineures Hervé Chuzeville1.2 20/01/2014 Compléments Hervé Chuzeville1.3 28/01/2014 Intégration de vidéos Vimeo Hervé Chuzeville1.4 16/05/2014 Modification procédure vidéos

YoutubeHervé Chuzeville

2.0 15/12/2014 Sauvons l’eau V2 Joseph Verdurand2.1 29/12/2014 Ajout des mots clés masqués +

génération/récupération de l’identifiant twitter

Philippe Grisolano

2.1.1 15/01/2015 Non utilisation WMV Hervé Chuzeville2.2.0 9/05/2017 Annexe 2 Hervé Chuzeville2.2.1 12/04/2018 catégories de "Classement actu

pour site institutionnel"Hervé Chuzeville

AVRIL 2018

AGENCE DE L'EAURHONE MEDITERRANEE CORSE

Site Web "Sauvons l'eau"

Manuel utilisateurAstek

Rhône Alpes

DSI Page 2

SOMMAIRE

1. INTRODUCTION................................................................................................................................4

1.1. OBJET DU DOCUMENT.........................................................................................................................41.2. PRÉSENTATION DU SITE WEB.................................................................................................................41.3. DOCUMENTS APPLICABLES....................................................................................................................41.4. TERMINOLOGIE.................................................................................................................................5

1.4.1. Glossaire..............................................................................................................................51.4.2. Abréviations..........................................................................................................................5

2. ADRESSES DE CONNEXION................................................................................................................6

3. PRÉSENTATION DU SITE....................................................................................................................6

3.1. ORGANISATION DE LA STRUCTURE DES PAGES.............................................................................................63.2. ORGANISATION DE LA PAGE D’ACCUEIL.....................................................................................................73.3. ORGANISATION DES PAGES BASSIN...........................................................................................................93.4. ORGANISATION DE LA PAGE AGENDA......................................................................................................103.5. ORGANISATION DE LA PAGE FOCUS........................................................................................................103.6. ORGANISATION DE LA PAGE ARTICLE, RENCONTRE OU INTERVIEW....................................................................10

4. CONTRIBUTION..............................................................................................................................11

4.1. CRÉER UN ARTICLE...........................................................................................................................114.1.1. Insérer une image comme photo de l’article.......................................................................124.1.2. Insérer une vidéo comme vidéo de l’article........................................................................134.1.3. Insérer un tweet..................................................................................................................144.1.4. Ajouter une catégorie.........................................................................................................144.1.5. Insérer des titres dans le texte riche..................................................................................164.1.6. Copier-coller sans garder la mise en forme (depuis Word ou autre)..................................164.1.7. Copier-coller depuis Word en gardant la mise en forme....................................................174.1.8. Insérer un lien interne ou externe dans le texte riche........................................................174.1.9. Insérer un lien vers un fichier et insérer le fichier sur le site en une seule opération.........184.1.10. Préparer une image (nécessaire uniquement pour une insertion dans le texte riche)....19

4.1.10.1. Réduire les dimensions et la résolution de l'image.....................................................................................214.1.10.2. Changer, si besoin, le format de fichier image...........................................................................................224.1.10.3. Compresser l'image.................................................................................................................................. 23

4.1.11. Insérer une image dans le texte riche.............................................................................244.1.12. Insérer une vidéo disponible sous forme de fichier.........................................................274.1.13. Insérer une vidéo Youtube..............................................................................................274.1.14. Insérer une vidéo Vimeo.................................................................................................304.1.15. Insérer un fichier audio.......................................................................................................304.1.16. Créer un tableau de données...............................................................................................304.1.17. Indiquer les termes non français..........................................................................................314.1.18. Insérer une citation............................................................................................................324.1.19. Insérer le bloc de source d’une citation.................................................................................324.1.20. Insérer un bloc encadré......................................................................................................334.1.21. Insérer des définitions........................................................................................................33

4.2. CRÉER UNE INTERVIEW......................................................................................................................33




Rhône Alpes

DSI Page 3

4.3. CRÉER UNE RENCONTRE.....................................................................................................................344.4. CRÉER UN ÉVÉNEMENT......................................................................................................................344.5. CRÉER UNE BRÈVE............................................................................................................................354.6. CLASSEMENT PAR MOTS-CLÉS MASQUÉS.................................................................................................354.7. MODIFIER UN ARTICLE, UNE INTERVIEW OU UNE RENCONTRE.........................................................................364.8. GÉRER LES PUBLICATIONS DIFFÉRÉES......................................................................................................37

5. CONTRIBUTION EN BACK-OFFICE.....................................................................................................38

5.1. AJOUTER UNE PUBLICATION................................................................................................................385.2. MODIFIER UNE PUBLICATION...............................................................................................................385.3. MODIFIER EN MASSE DES PUBLICATIONS.................................................................................................385.4. GÉRER LES PUBLICATIONS ET LES EXPIRATIONS...........................................................................................395.5. ELIRE UNE PUBLICATION COMME PUBLICATION CHOISIE (BLOC ORANGE FOCUS)...................................................405.6. CHOISIR LES BRÈVES À PUBLIER DANS LE PORTAIL D’UN BASSIN (COLONNE DE DROITE)...........................................405.7. CHOISIR LES PUBLICATIONS DE LA PORTLET LIRE AUSSI (PAGE D’ACCUEIL)...........................................................415.8. CHOISIR LES PUBLICATIONS À FAIRE APPARAITRE SUR LE SITE INSTITUTIONNEL......................................................425.9. MODÉRATION DES COMMENTAIRES DES INTERNAUTES.................................................................................43

6. ANNEXE 1 : MODIFICATION DU WIDGET TWITTER DE LA PAGE D’ACCUEIL...........................................45

6.1. CONFIGURATION DU WIDGET DANS SAUVONS L’EAU...................................................................................47

7. Annexe 2 : Modification des intitulés des catégories du menu/des onglets des régions..........................47




Rhône Alpes

DSI Page 4

1. Introduction

1.1. Objet du document

Ce document décrit les procédures nécessaires à la création et à la modification de publications dans le site Sauvons l’eau.

1.2. Présentation du site Web

Le site « Sauvons l’eau » est un site internet d’actualité sur le monde de l’eau. Le projet doit créer un vecteur de communication différent du site institutionnel de l’Agence de l’eau pour que les messages obtiennent un meilleur taux de pénétration dans la population.

L’objectif est que l’Agence de l’eau Rhône Méditerranée Corse devienne une référence du secteur, dans le domaine numérique comme dans le domaine réel.

1.3. Documents applicables

Repère Titre du document Auteur Référence

DR1 Cahier des charges du site Sauvons l’eau H. Chuzeville (Agence de l’eau) V1.1

DR2 Document de conception de d’analyse J. Abt (Astek) V0.1

PAQ Plan d’assurance Qualité de la TMA Web de l’Agence de l’eau

Sylvie BETIN, Jérémy JOUINEAU, Genevieve GUERINOT (Astek)

V00




Rhône Alpes

DSI Page 5

1.4. Terminologie

1.4.1. Glossaire

Terme Définition

JCMS Ou Jalios JCMS, est le produit retenu pour concevoir et implémenter le site internet

Portail Dans JCMS, chaque page présentée à un utilisateur l’est sous forme d’un portail dont l’organisation est définie par l’administrateur du site, et dont le contenu est calculé en fonction de l’utilisateur

Portlet = "bloc d'éléments". Un portlet est un élément composant un portail. Un portlet peut lui-même être composé d’autres portlets.

1.4.2. Abréviations

Abréviation DéfinitionIHM Interface Homme MachineJAR Java ArchiveURL Uniform Resource LocatorWAR Web ArchiveXML eXtensible Markup LanguageHTTP HyperText Transfer ProtocolSQL Structured Query LanguageUNO Universal Network ObjectsAJP Apache JServ Protocol




Rhône Alpes

DSI Page 6

2. Adresses de connexion

L’adresse de connexion au front-office du site est http://www.sauvonsleau.fr

L’adresse de connexion au back-office de contribution est http://www.sauvonsleau.fr/work

La contribution en front-office est à privilégier, la contribution en back-office étant à réserver pour des usages de contribution de masse.

Il existe aussi un site de test, que vous pouvez utiliser pour vos tests : http://preprod.xsalto.com (dont le back-office est : http://preprod.xsalto.com/work).

3. Présentation du site

Le site Sauvons l’eau est réalisé à partir de l’outil JCMS 8.0, afin de bénéficier des fonctionnalités fournies en standard, notamment en terme de workflow de publication, d’éditeur de texte riche et de moteur de recherche.

Le site est configuré comme étant public afin de permettre un accès non authentifié pour les internautes. Pour les utilisateurs authentifiés et possédant des droits de contribution, certaines fonctions de contribution sont présentées depuis le front-office.

3.1. Organisation de la structure des pages

Le site est organisé avec une structure de page commune à toutes les pages :

1. Un bandeau supérieur avec :o le logo Sauvons l’eau, qui porte le lien vers l’accueil du site, o le logo l’eau qui fait l’actu,o un lien vers le site institutionnel de l’Agence de l’eau,o des liens vers les réseaux sociaux ou le flux RSS,o un accès à la recherche rapide ou la recherche avancée.

2. Un menu de navigation entre les différents bassins de l’Agence de l’eau et l’agenda

3. Le corps de la page, qui varie en fonction de la page affichée,

http://preprod.xsalto.com/work

http://preprod.xsalto.com/

http://www.sauvonsleau.fr/work

http://www.sauvonsleau.fr/




Rhône Alpes

DSI Page 7

4. Un pied de page avec :o un rappel des liens vers les différents bassins,o un rappel des liens vers l’agenda et la liste des publications « Focus »,o les liens vers la page de contact, la charte de modération, les mentions légales,o Un rappel des liens vers les réseaux sociaux.

La présentation de ces différents éléments s’adapte automatiquement en fonction de la largeur de l’écran de l’internaute.

3.2. Organisation de la page d’accueil

La page d’accueil présente une sélection des derniers articles. Ces articles sont tous les articles à l’état publié, triés par date de publication décroissante.

Le dernier article est mis en avant dans une portlet « A la une » qui lui confère une présentation enrichie.

Les huit articles suivants sont présentés dans un format plus réduit.




Rhône Alpes

DSI Page 8

Une publication focus (la publication ayant la dernière date de modification majeure et appartenant à la catégorie focus) est mise en avant dans un encart de couleur. Cette portlet particulière a pour vocation de mettre en avant des publications de type Rencontre ou Interview, dont la fréquence de nouveauté est moins élevée que les articles.




Rhône Alpes

DSI Page 9

Une portlet « Lire aussi …» contient des articles (sélectionnés manuellement par les rédacteurs) affichés en gabarit réduit (seuls les catégories, la date de publication et le titre seront affichés).Un widget « News Tweet » affiche les derniers tweets du compte associé. Un contributeur peut changer le compte ainsi que le nombre des derniers tweets à afficher.




Rhône Alpes

DSI Page 10

Enfin une portlet « Les + lus » présente une sélection des articles les plus lus par les internautes, triée par ordre décroissant de popularité.

3.3. Organisation des pages bassin

Les pages bassin sont les pages qui correspondent aux liens Rhône-Alpes, Languedoc-Roussillon, Bourgogne / Franche-Comté ou PACA / Corse.

On retrouve la même présentation des articles que pour la page d’accueil avec l’article le plus récent à la une et huit articles suivants en présentation plus réduite. Les articles présentés sont tous les derniers articles publiés, relatifs au bassin choisi et triés par ordre décroissant de date de publication.

Une portlet présente quelques brèves choisies par les contributeurs. Il existe une portlet par bassin, permettant ainsi de présenter des brèves différentes sur chacun des bassins.

Enfin une portlet liste les événements associés au bassin, triés par ordre croissant de date de début puis de date de fin.




Rhône Alpes

DSI Page 11

3.4. Organisation de la page agenda

La page agenda liste les événements publiés par ordre de date de début d’événement, puis de date de fin, croissantes.

Une portlet liste les événements publiés les plus lus, triés par popularité décroissante.

3.5. Organisation de la page Focus

La page focus liste les publications de type Article, Evénement, Rencontre ou Interview ayant ayant la catégorie focus activé et dans l’état publiés par ordre de date de dernière modification majeure.

3.6. Organisation de la page article, rencontre ou interview

La page de visualisation plein écran d’un article, d’une rencontre ou d’une interview présente, en plus de cette publication, une liste de publications connexes. Ces publications sont automatiquement sélectionnées en rapport avec le classement de la publication en thèmes, en bassin et en personnalité.

Ces publication connexes sont présentées dans une porlet lire aussi.




Rhône Alpes

DSI Page 12

En plus des différents champs de la publication qui sont détaillés dans le chapitre 4, les commentaires posés par les internautes sur la publication sont affichés par date de création décroissante.

4. Contribution

La contribution dans le site Sauvons l’eau nécessite d’être authentifié avec un compte ayant les droits de contribution. Cela s’effectue en suivant le lien back-office décrit au chapitre 2.

L’authentification demandée (nom d’utilisateur et mot de passe) est propre au site Sauvons l’eau.

4.1. Créer un article

Depuis la page d’accueil du site, Cliquer sur le bouton Ajouter à côté du titre « Les + lus », puis choisir Article dans la liste proposée.

Un article est composé des champs suivants :1. Un titre : désigne l’article,2. Un chapeau : présente l’idée principale de l’article et est affiché lorsque l’article est à la une ou en

pleine page,3. Un texte d’accroche : reprend automatiquement le début du chapeau, le contributeur peut désactiver

cette copie automatique en décochant la case « Recopier le début du chapeau dans le texte d’accroche »,

4. Le corps du texte : texte riche permettant une mise en forme personnalisée,5. Une photo ou une vidéo : représente l’article et apparaît dans la plupart des gabarits d’affichage de

l’article. La photo doit être d’une largeur minimum de 700 pixels, elle ne doit pas excéder 4000 pixels de large pour un affichage optimal. Si l’image respecte ces limites, alors le site redimensionne automatiquement l’image en fonction des besoins d’affichage,

6. Un classement en bassin : le choix parmi les bassins proposés détermine les pages dans lesquelles l’article apparaît,

7. Un classement thématique 8. Un classement en personnalités et structures 9. Des photos complémentaires10. Des références externes : liens url vers des pages externes au site11. Un classement "actualité pour le site institutionnel" pour faire apparaître des actualités de

Sauvonsleau dans la colonne de droite (bloc "L"actu") des pages du site institutionnel de catégories communes.




Rhône Alpes

DSI Page 13

4.1.1. Insérer une image comme photo de l’article

Pour choisir l’image qui représente l’article, il faut cliquer sur le bouton « Choisir une image » . L’explorateur de média propose alors à l’utilisateur toutes les images déjà présentes sur le site.

Pour ajouter une nouvelle image , il faut choisir « Ajouter un image » . La fenêtre de dépôt de fichier s’ouvre alors.

Les fichiers peuvent être déposés en utilisant un glisser-déposer depuis un explorateur Windows. On peut aussi ajouter les fichiers un à un avec le bouton « + Add files ».

Les fichiers sont créés sur le site lorsqu’on clique sur déposer.




Rhône Alpes

DSI Page 14

On peut préférer utiliser le dépôt classique (en suivant le lien dépôt classique depuis la fenêtre précédente), afin de pouvoir renseigner directement la description de l’image, qui sera utilisée comme texte alternatif à l’image et comme légende de l'image affichée sous forme d'info-bulle au survol avec la souris (dans le cas contraire, il faudra revenir modifier l'image dans un 2ème temps pour ajouter ce texte alternatif/de légende dans le champ "Description").

Pour sélectionner une image à insérer dans l’article, il faut sélectionner l’image dans l’explorateur de media et cliquer sur le bouton « selectionner ce media ».

4.1.2. Insérer une vidéo comme vidéo de l’article

Il faut que le champ Photo soit vide.Mettre une URL dans le champ vidéo suivant les méthodes :

Youtube :2 méthodes :

- En étant sur la vidéo, cliquer sur puis , copier le contenu de src= « ... »- Ecrire //www.youtube.com/embed/ et rajouter l’id de la vidéo, ce sont les chiffres et les lettres

après v= et avant & s’il existe : ou

Dailymotion :2 méthodes :

- En étant sur la vidéo, cliquer sur , copier le contenu de src= « ... »- Ecrire //www.dailymotion.com/embed/video/ et rajouter l’id de la vidéo, ce sont les chiffres et

les lettres après http://www.dailymotion.com/video/ et avant _ :




Rhône Alpes

DSI Page 15

Viméo :2 méthodes :

- En étant sur la vidéo, cliquer sur (bouton en haut à droite sur la vidéo), copier le contenu de src= « ... »

- Ecrire //player.vimeo.com/video/ et rajouter l’id de la vidéo, ce sont les chiffres et les lettres après http://vimeo.com/

4.1.3. Insérer un tweet

Sur un tweet cliquer sur « … » puis sur « Insérer le Tweet ».Copier tout le contenu du textaera commençant par <blockquote …

Dans le WYSIWYG, cliquer sur le bouton et coller le contenu copié ci-dessus à l’endroit voulu.Cliquer sur Mettre à jour.

4.1.4. Ajouter une catégorie

Les différents plans de classement sont représentés par des catégories. Pour les thématiques et les personnalités ou structures, ce plan de classement est évolutif.

Pour ajouter une catégorie, il suffit de faire un clic-droit sur une catégorie existante et choisir "Ajouter des sous-catégories" ou "Ajouter des catégories à ce niveau" pour ajouter des catégories filles ou sœurs de la catégorie sur laquelle le clic droit a été fait.

http://vimeo.com/




Rhône Alpes

DSI Page 16

Attention : pour les catégories de "Classement actu pour site institutionnel" (pour faire apparaître des actualités de Sauvonsleau dans la colonne de droite des pages du site institutionnel de catégories communes), tout ajout/modification/suppression nécessite une action de déclaration équivalente dans le site institutionnel (voir le manuel utilisateur du site institutionnel pour les détails).




Rhône Alpes

DSI Page 17

4.1.5. Insérer des titres dans le texte riche

Pour insérer des titres dans un document, le contributeur doit :- Sélectionner le texte à passer en titre,- Choisir le niveau de titre dans la liste déroulante "Format".

Accessibilité : L'article doit respecter la hiérarchie des titres et chaque titre doit être défini comme tel, notamment :• un titre de paragraphe ou de sous-paragraphe doit être défini en lui appliquant un format "Titre n" dans le menu déroulant "Format" de l'éditeur de texte riche• un titre de niveau inférieur doit toujours être sous un titre de niveau supérieur dans la hiérarchie ; par exemple, un Titre 4 doit toujours être sous un Titre 3 dans la hiérarchie (les titres 1 et 2 sont définis par le titre de l’article et le chapeau).• on ne doit pas sauter un niveau de titre ; par exemple, on ne doit pas passer directement d'un Titre 2 à un Titre 4.

4.1.6. Copier-coller sans garder la mise en forme (depuis Word ou autre)

Pour insérer du texte issu d’un document Word (ou autre), sans conserver sa mise en forme initiale :• Sélectionner le texte sous Word et le copier (clic droit, copier),• Dans l’éditeur de texte riche, positionner le curseur à l’endroit où insérer le texte,• Cliquer sur le bouton ,




Rhône Alpes

DSI Page 18

Il faut préférer cette solution à la suivante (copier-coller depuis Word) afin de respecter la charte graphique du site.

4.1.7. Copier-coller depuis Word en gardant la mise en forme

Pour insérer du texte déjà mis en forme sous Word dans l’éditeur de texte riche : Sélectionner le texte sous Word et le copier (clic droit, copier), Dans l’éditeur de texte riche, positionner le curseur à l’endroit où insérer le texte, Cliquer sur le bouton , Faire Ctrl + V sur le clavier pour coller le texte dans la boîte de dialoque suivante, puis cliquer sur

Insérer pour que le texte formaté soit inséré dans l’éditeur de texte riche.

4.1.8. Insérer un lien interne ou externe dans le texte riche

Le lien interne ou externe est un lien vers une adresse internet.

Dans l’éditeur de texte riche, sélectionner le texte à transformer en lien hypertexte, puis cliquer sur le bouton Insérer/éditer un lien.

Dans la boîte de dialogue ouverte, renseigner les champs suivants :

• URL du lien (obligatoire) : l’adresse internet du lien à créer (par exemple http://www.google.com)

• Cible du lien (facultatif) : indique si l’ouverture doit être faite dans la même fenêtre de navigateur ou dans une nouvelle fenêtre (répéter obligatoirement, dans ce cas, le texte du lien – son intitulé sélectionné pour la création du lien – suivi de " (nouvelle fenêtre)" dans le champ titre ci-après, pour prévenir les utilisateurs de l'ouverture d'une nouvelle fenêtre)Exemple de titre :"Site Web de l'Agence de l'eau Rhône Méditerranée Corse (nouvelle fenêtre)"




Rhône Alpes

DSI Page 19

• Titre (obligatoire si la cible du lien est une nouvelle fenêtre ou un fichier bureautique, facultatif sinon) : définit le contenu de l’info bulle affichée au survol du lien.Dans le cas d'un lien vers un fichier bureautique, répéter obligatoirement le texte du lien – son intitulé sélectionné pour la création du lien – suivi de son format et sa taille (et sa langue s'il ne s'agit pas du Français) entre parenthèsesExemple : "Express'eau d'avril 2013 (format PDF, 248 Ko)"

• Classe (facultatif) : permet de donner un autre aspect au lien si l’aspect par défaut ne convient pas.

Accessibilité : le champ titre doit être rempli uniquement pour compléter les informations de l'intitulé d'un lien (complément de descriptif du lien, indication de format, poids ou langue d'un fichier, avertissement d'ouverture d'une nouvelle fenêtre). Il doit reprendre obligatoirement l'intitulé du lien en le complétant, dans le cas où on le remplit. Il ne doit pas uniquement répéter l'intitulé du lien (ne rien mettre dans le champ titre dans ce cas).

4.1.9. Insérer un lien vers un fichier et insérer le fichier sur le site en une seule opération

Pour insérer un lien vers un fichier et insérer ce fichier sur le site en une seule opération, il suffit de suivre la procédure précédente d'insertion d'un lien interne dans le texte riche, à la différence près qu'au lieu de renseigner directement le champ "URL du lien", il faut cliquer sur l'icône "parcourir" à droite de ce champ.

Puis, il faut cliquer sur l'icône "ajouter" dans la nouvelle fenêtre qui s'affiche, listant les contenus du site, puis sur le choix "Document" du menu déroulant qui s'affiche.

Ensuite, il faut cliquer sur le bouton "Ajouter des fichiers" dans l'écran qui apparaît.




Rhône Alpes

DSI Page 20

Puis, il faut choisir le fichier en parcourant l'explorateur Windows et en cliquant sur le bouton "ouvrir" lorsque celui-ci est sélectionné.

Ensuite, on clique sur le bouton "Déposer" de l'écran précédent.

Puis, on coche le bouton radio en face du document sur l'écran d'avant. Le champ "URL du lien" est alors automatiquement rempli.

4.1.10. Préparer une image (nécessaire uniquement pour une insertion dans le texte riche)

Sur un site Web, une image s'optimise avant son insertion sur le site, afin de minimiser son poids (en Ko) et donc son temps de chargement, tout en préservant une qualité d'affichage optimale (cette opération est nécessaire uniquement pour une insertion dans le texte riche ; dans les champs spécifiques images du logiciel, le logiciel effectue automatiquement ces opérations de préparation des images).




Rhône Alpes

DSI Page 21

Pour cela, on utilisera le logiciel GIMP afin de :1. réduire les dimensions de l'image,2. réduire la résolution de l'image,3. changer, si besoin, le format de fichier image,4. compresser l'image.




Rhône Alpes

DSI Page 22

Lancer GIMP, par exemple à partir du menu démarrer de Windows :

Le logiciel se présente ainsi :




Rhône Alpes

DSI Page 23

4.1.10.1. Réduire les dimensions et la résolution de l'image

Une fois que vous avez ouvert GIMP, cliquez sur le menu déroulant "Fichier" puis "Ouvrir". Sélectionnez votre image et validez en cliquant sur le bouton "Ouvrir".

Cliquez sur le menu déroulant "Image", puis "Echelle et taille de l’image…".

Une fois la boîte de dialogue ouverte, indiquez la taille réduite que vous souhaitez donner à votre image (largeur et hauteur) en vérifiant que celle-ci est exprimée en pixels.




Rhône Alpes

DSI Page 24

Dans les deux champs suivants, insérez la résolution de 72 pixels/in pour les axes X et Y. Avant de valider, vérifiez bien si elle est bien exprimée en pixels/in. Puis cliquez sur "Échelle" pour valider et obtenir l'aperçu de l'image à la nouvelle taille.

4.1.10.2. Changer, si besoin, le format de fichier image

Quel format choisir selon le type de l'image que vous voulez insérer sur l'Intranet ?

pour une image comprenant du texte : le PNG pour une image avec transparence : le PNG pour un logo, une icône, un dessin, un graphique : le PNG voire le GIF pour une photographie, une image haute qualité : le JPEG pour une animation : le GIF

(Pour de plus amples renseignements sur les raisons de ces choix, voir : http://www.commentcamarche.net/faq/17625-choisir-une-image-et-savoir-l-optimiser-pour-son-site-pro)

Votre choix fait, cliquez une nouvelle fois dans l’onglet "Fichier", puis "Enregistrer sous". Une fois la boîte de dialogue ouverte, cliquez sur (le petit "+" devant) "Sélectionner le type (selon l’extension)" puis dans la liste déroulante choisissez le format que vous souhaitez :

image GIF image JPEG ou image PNG.

Puis cliquez sur "enregistrer".

http://www.commentcamarche.net/faq/17625-choisir-une-image-et-savoir-l-optimiser-pour-son-site-pro




Rhône Alpes

DSI Page 25

4.1.10.3. Compresser l'image

En fonction du format choisi, la méthode de compression est un peu différente :

JPEG : o cochez "afficher l'aperçu dans la fenêtre d'image" afin de voir en temps réel les modifications

de la qualité de l'image (et de son poids), o puis déplacez le curseur "Qualité" vers la gauche, de sorte de diminuer celle-ci au maximum

tout en s'arrêtant avant que la dégradation ne devienne trop visible.




Rhône Alpes

DSI Page 26

PNG : déplacez le curseur "Niveau de compression". Plus le taux est important, plus l’image sera compressée.

GIF : pas de fonctionnalité prévue. Le GIF ne se compresse qu’en diminuant la taille et la résolution de l’image.

Puis cliquez sur "enregistrer".

4.1.11. Insérer une image dans le texte riche

Dans l’éditeur de texte riche, positionner le curseur à l’endroit où insérer l’image.

Cliquer sur le bouton "Insérer une image, une vidéo, un fichier audio, […]" : la boîte de dialogue Explorateur de médias s’affiche.




Rhône Alpes

DSI Page 27

Si l’image n’existe pas encore, il faut d'abord cliquer sur , et déposer l’image comme indiqué au chapitre 4.1.9.

Au survol de l’image souhaitée, le bouton Sélectionner ce media s’affiche, cliquer dessus.

Accessibilité : Faire un clic droit sur l’image et choisir "Insérer / éditer l’image" et renseigner les champs :

Description de l’image (obligatoire s'il s'agit d'une image illustrative ou contenant du texte) :

o dans le cas d'une image illustrative : décrire l'image, de manière précise, en quelques mots

o dans le cas d'une image contenant du texte : la description doit reprendre obligatoirement (au moins) le texte inclus dans l'image

o dans le cas d'une image décorative (n'apportant aucune information supplémentaire au texte environnant) : laisser obligatoirement le champ vide

Titre (facultatif) : définit le contenu de l’info bulle affichée au survol du lien : c'est le champ qui permet de renseigner la légende de la photo qui s'affiche au survol de la souris.

Description longue du lien (obligatoire si l'image contient beaucoup d'information ; dans l'onglet "avancé") : permet de décrire l'image de manière détaillée (et non le "lien"), si le champ "Description de l'image" n'est pas suffisant. Par exemple, pour les graphiques ou les cartes où la description longue doit donner le même niveau d'information (sans voir la carte) que celui de la carte en elle-même.




Rhône Alpes

DSI Page 28

Attention : pour que l’image soit « responsive » (s’ajuste en fonction de la taille de l’écran) les champs « Dimensions » de l’onglet Apparence doivent être vides, sinon la taille sera fixe quel que soit l’écran et par conséquent l’image pourra être déformée et/ou n’être qu’en partie affichée.




Rhône Alpes

DSI Page 29

4.1.12. Insérer une vidéo disponible sous forme de fichier

Dans l’éditeur de texte riche, positionner le curseur à l’endroit où insérer la vidéo.

Cliquer sur le bouton "Insérer une image, une vidéo, un fichier audio, […]" : la boîte de dialogue Explorateur de médias s’affiche.

Sélectionner l’onglet Vidéo et choisir la vidéo correspondante, en cliquant sur le bouton Sélectionner ce media (attention : ne pas intégrer de vidéos au format WMV car elles peuvent ne pas fonctionner sous les navigateurs autres que Internet Exploreur ; cf. FNC GAR13-109_WSE).

Accessibilité : Pour que la vidéo insérée respecte la loi sur l'accessibilité :1. il faut :

soit qu'elle possède une audio-description (synchronisée), soit qu'elle soit présentée avec sa transcription textuelle (à côté de la vidéo ou via un lien

"description de la vidéo" placé à côté ou juste après).2. et il faut qu'elle soit sous-titrée.

Hervé Chuzeville est à votre disposition pour vous assister sur le plan technique pour la rédaction de vos cahiers des charges ou pour vos mises en œuvre de vidéos accessibles.

4.1.13. Insérer une vidéo Youtube

Note : la technique d'insertion d'une vidéo est différente de la technique utilisée pour l'Intranet, non permise sur le Web pour des raisons de sécurité.

Intégrer une vidéo Youtube :1. Ouvrir le lien vers la vidéo Youtube dans un

navigateur (en suivant pas exemple le lien http://youtu.be/eJ71akc9tsE),

2. Cliquer sur l'onglet "Partager" > "Intégrer",3. Choisir la taille de la vidéo à intégrer,4. Décocher l'option "Afficher les suggestions de

vidéos à la fin de la lecture",5. Copier tout le contenu de la textarea "Intégrer" ; la

valeur est < iframe > ... </ iframe >6. Dans JCMS, en édition d'article dans l’éditeur de

texte riche, positionner le curseur à l’endroit où insérer la vidéo,

7. Cliquer sur le bouton "insérer / éditer un media

incorporé" ,8. Coller la valeur ci-avant dans l'onglet "Source",9. Cliquer sur "Insérer", puis "Enregistrer".

Intégrer une vidéo Dailymotion :

http://youtu.be/eJ71akc9tsE




Rhône Alpes

DSI Page 30

1. Ouvrir le lien vers la vidéo Dailymotion dans un navigateur (en suivant par exemple le lien http://dai.ly/x20m06a),

2. Cliquer sur l'onglet "Exporter",3. Choisir la taille de la vidéo à intégrer,4. Copier tout le contenu de la textarea

"Copier le code d’intégration" ; la valeur est < iframe > ... </ iframe >

5. Dans JCMS, en édition d'article dans l’éditeur de texte riche, positionner le curseur à l’endroit où insérer la vidéo,

6. Cliquer sur le bouton "insérer / éditer

un media incorporé" ,7. Coller la valeur ci-avant dans l'onglet

"Source",8. Cliquer sur "Insérer", puis

"Enregistrer".

Intégrer une vidéo Viméo :1. Ouvrir le lien vers la vidéo Viméo dans un navigateur (en suivant pas exemple le lien

http://vimeo.com/9669791),

2. Cliquer sur le bouton "Partager" 3. Choisir la taille de la vidéo à intégrer,4. Copier tout le contenu de la textarea

"Intégrer" ; la valeur est < iframe > ... </ iframe >


6. Cliquer sur le bouton "insérer / éditer un

media incorporé" ,7. Coller la valeur ci-avant dans l'onglet

"Source",8. Cliquer sur "Insérer", puis "Enregistrer".




Rhône Alpes

DSI Page 31


soit qu'elle possède une audio-description (synchronisée), soit qu'elle soit présentée avec sa transcription textuelle (à côté de la vidéo ou via un lien



Deux autres façons d'intégrer d'anciennes vidéos Youtube (qui ne nécessitaient pas des iframes) sont données ci-dessous, pour mémoire :

Une première façon d’intégrer une vidéo Youtube est la suivante :

1. Ouvrir le lien vers la vidéo Youtube dans un navigateur (en suivant pas exemple le lien http://youtu.be/eJ71akc9tsE),

2. Cliquer sur l'onglet "Partager" > "Intégrer",3. Décocher l'option "Afficher les suggestions de

vidéos à la fin de la lecture",4. Cocher l'option "Utiliser l'ancien code

d'intégration" (donc sans iframe),5. Récupérer la vraie valeur de l'url dans la balise

param name="movie", la valeur est : //www.youtube.com/v/eJ71akc9tsE


7. Cliquer sur le bouton "insérer / éditer un media

incorporé" ,8. Choisir le type "Flash" et renseigner le champ "Fichier / URL" avec http: + la valeur trouvée ci-avant,

c'est à dire : http://www.youtube.com/v/eJ71akc9tsE9. Cliquer sur "Insérer", puis "Enregistrer".

Une autre façon de procéder est la suivante :10. Ouvrir le lien vers la vidéo Youtube dans un navigateur (en suivant pas exemple le lien

http://youtu.be/eJ71akc9tsE),11. Cliquer sur l'onglet "Partager" > "Intégrer",12. Choisir la taille de la vidéo à intégrer,13. Décocher l'option "Afficher les suggestions de vidéos à la fin de la lecture",14. Cocher l'option "Utiliser l'ancien code d'intégration" (donc sans iframe),15. Copier tout le contenu de la textarea "Intégrer" ; la valeur est <object> ... </object>16. Dans JCMS, en édition d'article dans l’éditeur de texte riche, positionner le curseur à l’endroit où

insérer la vidéo,

17. Cliquer sur le bouton "insérer / éditer un media incorporé" ,18. Choisir le type "Flash" et coller la valeur ci-avant dans l'onglet "Source",19. Cliquer sur "Insérer", puis "Enregistrer".






Rhône Alpes

DSI Page 32

4.1.14. Insérer une vidéo Vimeo

L'intégration de vidéo Vimeo doit se faire comme suit :

1. Share2. Show options3. Use old embed code4. copier le contenu de la textarea Embed : "<!-- This version of the embed code [...] on

https://vimeo.com."5. coller ce contenu dans le contenu html de l'article à intégrer


a. soit qu'elle possède une audio-description (synchronisée), b. soit qu'elle soit présentée avec sa transcription textuelle (à côté de la vidéo ou via un lien



4.1.15. Insérer un fichier audio

Dans l’éditeur de texte riche, positionner le curseur à l’endroit où insérer le fichier son.

Cliquer sur le bouton "Insérer une image, une vidéo, un fichier audio, […]".. : la boîte de dialogue Explorateur de médias s’affiche.

Sélectionner l’onglet Sons et choisir le fichier correspondant, en cliquant sur le bouton Sélectionner ce media.

Accessibilité : Pour que le fichier audio inséré respecte la loi sur l'accessibilité : il faut qu'il soit présenté avec sa transcription textuelle (à côté du lecteur audio ou via un lien placé à côté).Hervé Chuzeville est à votre disposition pour vous assister sur le plan technique pour vos mises en œuvre de fichiers sons accessibles.

4.1.16. Créer un tableau de données

Cliquer sur le bouton Insérer un tableau .

Dans la boîte de dialogue, choisir le nombre de lignes et de colonnes souhaitées, et choisir les paramètres d’affichage et penser à cocher la case :

Afficher la légende du tableau (obligatoire pour un tableau de données).

https://vimeo.com/




Rhône Alpes

DSI Page 33

Cliquer ensuite sur l'onglet "Avancé", pour remplir le champ :

Résumé (obligatoire pour un tableau de données) : résumé du tableau ; exemple : "Prix de l'eau par département et par années".On notera que pour un tableau de présentation (dit aussi "de mise en page"), il ne faut, au contraire, pas remplir le champ résumé.

Cliquer sur Mettre à jour, le tableau est alors inséré dans l’éditeur de texte riche.

Il faut tout de suite penser à remplir le titre du tableau (obligatoire pour un tableau de données ; appelé aussi la légende du tableau) :

Une fois le tableau rempli, il faut définir les cellules de titre (obligatoire pour un tableau de données), selon la procédure ci-dessous, afin que le tableau soit accessible :

Pour un tableau dont la première ligne correspond aux cellules de titre :o se placer sur une cellule de la première ligne,o puis faire un clic droit o et choisir "Cellule > Propriétés de la cellule", o puis dans le champ "Type de cellule", sélectionner "Titre", o dans le champ "Portée", choisir "Colonne",o sélectionner "Mettre à jour toutes les cellules de la ligne",o puis cliquer sur "Mettre à jour".

Pour un tableau dont la première colonne correspond aux cellules de titre :o se placer sur une cellule de la première colonne,o puis faire un clic droit o et choisir "Cellule > Propriétés de la cellule", o puis dans le champ "Type de cellule", sélectionner "Titre", o dans le champ "Portée", choisir "Ligne",o sélectionner "Mettre à jour toutes les cellules de la colonne",o puis cliquer sur "Mettre à jour".

Pour un tableau plus complexe (cellules de titre à la fois sur la première ligne et sur la première colonne, voire sur plusieurs lignes ou colonnes), il faut coder le tableau directement en HTML pour respecter toutes les règles d'accessibilité. Hervé Chuzeville est à votre disposition pour vous aider dans ce cas.




Rhône Alpes

DSI Page 34

4.1.17. Indiquer les termes non français

Il faut coder les indications de termes non français directement en HTML pour respecter toutes les règles d'accessibilité. Hervé Chuzeville est à votre disposition pour vous aider dans ce cas.




Rhône Alpes

DSI Page 35

4.1.18. Insérer une citation

Pour insérer un bloc de citation dans l’éditeur de texte riche, il faut suivre la procédure suivante : Sélectionner le bloc de texte composant la citation, Dans la liste déroulante "Format", choisir l’option "Bloc de citation" :

Afin de respecter toutes les règles d'accessibilité, il faut indiquer la source des citations, et pour cela coder directement en HTML. De même lorsque la citation est une citation courte et non un bloc, il faut également coder en HTML. Hervé Chuzeville est à votre disposition pour vous aider dans ce cas.

4.1.19. Insérer le bloc de source d’une citation

Pour insérer un bloc de source d’une citation dans l’éditeur de texte riche, il faut suivre la procédure suivante : Sélectionner le bloc de texte composant la source d’une citation, Dans la liste déroulante "Styles", choisir l’option "legend" :




Rhône Alpes

DSI Page 36

4.1.20. Insérer un bloc encadré

Pour insérer un bloc encadré dans l’éditeur de texte riche, il faut suivre la procédure suivante : Sélectionner le bloc de texte composant le bloc encadré, Dans la liste déroulante "Styles", choisir l’option "special".

4.1.21. Insérer des définitions

Il faut coder les définitions directement en HTML pour respecter toutes les règles d'accessibilité. Hervé Chuzeville est à votre disposition pour vous aider dans ce cas.

4.2. Créer une interview

Depuis la page d’accueil du site, Cliquer sur le bouton Ajouter à côté du titre « Les + lus », puis choisir "Interview" dans la liste proposée.

Une interview est composée des champs suivants : Un titre : désigne l’interview, Nom : de la personne interviewée, Fonction de la personne interviewée, Une photo ou une vidéo de la personne interviewée : apparaît dans la plupart des gabarits d’affichage

de l’interview. Cette photo doit être d’une largeur minimum de 700 pixels, elle ne doit pas excéder 4000 pixels de large pour un affichage optimal. Si l’image respecte ces limites, alors le site redimensionne automatiquement l’image en fonction des besoins d’affichage,

Chapeau Un texte d’accroche : reprend automatiquement le début du chapeau, le contributeur peut désactiver


Dates clés : du parcours de l’interviewée, Etapes clés : correspondent aux dates clés, Questions Réponses Préfixe de question : le texte qui est repris en début de chaque question Préfixe de réponse : le texte qui est repris en début de chaque réponse Un classement en personnalités et structures Des références externes : liens url vers des pages externes au site




Rhône Alpes

DSI Page 37

4.3. Créer une rencontre

Depuis la page d’accueil du site, Cliquer sur le bouton Ajouter à côté du titre « Les + lus », puis choisir Rencontre dans la liste proposée.

Une rencontre est composée des champs suivants : Un titre : de la rencontre, Nom : de la personne rencontrée, Fonction de la personne rencontrée, Une photo ou une vidéo de la personne rencontrée : apparaît dans la plupart des gabarits d’affichage

de la rencontre. Cette photo doit être d’une largeur minimum de 700 pixels, elle ne doit pas excéder 4000 pixels de large pour un affichage optimal. Si l’image respecte ces limites, alors le site redimensionne automatiquement l’image en fonction des besoins d’affichage,

Chapeau Un texte d’accroche : reprend automatiquement le début du chapeau, le contributeur peut désactiver


Dates clés : du parcours de la personne rencontrée, Etapes clés : correspondent aux dates clés, Corps du texte Un classement en personnalités et structures Des références externes : liens url vers des pages externes au site

4.4. Créer un événement

Depuis la page agenda du site, Cliquer sur le bouton Ajouter à côté du titre « Les + lus ».

Un événement est composé des champs suivants : Titre photo ou une vidéo: apparaît dans la plupart des gabarits d’affichage de l’événement. Cette photo doit

être d’une largeur minimum de 700 pixels, elle ne doit pas excéder 4000 pixels de large pour un affichage optimal. Si l’image respecte ces limites, alors le site redimensionne automatiquement l’image en fonction des besoins d’affichage,

Lieu Date de début Date de fin (facultative) : le format des dates affichées varie selon 4 cas de figures :

a. Les dates de début et de fin de l’évènement sont différentes : « Du jj/mm/aaaa au jj/mm/aaaa».

b. Les dates de début et de fin de l’évènement sont les mêmes et l’heure de fin est supérieure à l’heure de début : « Le jj/mm/aaaa de hh:mm à hh:mm ».

c. Seule la date de début de l’évènement est renseignée (on ne veut pas préciser d’heure de début) : « Le jj/mm/aaaa».

d. Les dates de début et de fin de l’évènement sont les mêmes et l’heure de fin est égale à l’heure de début (on veut préciser l’heure de début) : « Le jj/mm/aaaa à hh:mm »

Un texte d’accroche




Rhône Alpes

DSI Page 38

Corps du texte Classement en bassin Classement en thématiques Un classement en personnalités et structures Des références externes : liens url vers des pages externes au site

Note : la date à laquelle l'évènement doit disparaître de l'affichage dans l'agenda est la "date d'expiration" spécifiée dans l'onglet "workflow" (automatiquement remplie depuis la version 1.0.2 du site Sauvonsleau).

4.5. Créer une brève

Depuis une page de bassin, Cliquer sur le bouton Ajouter à côté du titre « Le saviez-vous ? ».

Une brève est composée des champs suivants : Titre Texte phare Photo Classement en bassin

4.6. Classement par mots-clés masqués

Pour les publications de type Article, Interview, Rencontre, Brève et Événement d'agenda, un champ « Mots-clés masqués » est disponible lors de l’édition de la publication. Il ne s’agit pas d’un plan de classement standard avec une liste de cases à cocher mais d’un champ texte où les mots-clés sont rentrés librement et séparés par des virgules.

Ces mots-clés ne sont jamais affichés en front-office, mais sont utilisés lors de l’affichage de publications connexes Les mots-clés masqués sont également utilisés par la fonction de recherche globale du site.




Rhône Alpes

DSI Page 39

4.7. Modifier un article, une interview ou une rencontre

Pour modifier une publication, quel que soit son type, il faut avant tout cliquer sur son titre pour l'afficher en plein écran.

Depuis l’affichage plein écran, si l’utilisateur connecté a les droits pour cela, il peut cliquer sur le bouton Editer qui lui affiche le formulaire de modification :




Rhône Alpes

DSI Page 40

4.8. Gérer les publications différées

Pour qu’une publication ne soit pas immédiatement visible par le public, il faut basculer son état à « Planifié ». Cette action peut être complétée par la modification de la date de publication afin que la publication soit automatiquement accessible au public après la date voulue. Ces opérations sont disponibles dans l’onglet « Workflow » de la page d’édition d’une publication.

Le comportement est similaire pour l’expiration à partir de laquelle la publication est déclarée comme obsolète et n’apparait plus au public.




Rhône Alpes

DSI Page 41

5. Contribution en back-office

5.1. Ajouter une publication

Depuis la page d’accueil du back-office, tous les types de publications peuvent être créés en cliquant sur le bouton Ajouter, puis en choisissant le type de la publication à créer.

Il est à noter qu’on peut créer de cette façon les images à intégrer par la suite dans les autres publications.

5.2. Modifier une publication

L’affichage en liste fourni par le back-office permet de lister toutes les publications, ou de les filtrer à la manière d’un tableau bureautique classique.

Lorsqu’une publication est listée à l’écran, le bouton éditer en début de ligne permet d’ouvrir l’écran de modification de cette publication.

5.3. Modifier en masse des publications

Toujours dans l’affichage des publications en back-office, le bouton "Ajouter au panier" permet d’ajouter une ou plusieurs publications au panier.

Le clic sur le bouton "Gérer le panier" dans la barre se service en haut de l’écran permet d’afficher le contenu du panier, et de réaliser des opérations sur toutes les publications présentes dans le panier.




Rhône Alpes

DSI Page 42

5.4. Gérer les publications et les expirations

L’onglet Workflow du back-office permet notamment d’afficher le calendrier des publications et celui des expirations.

Le calendrier des publications recense les publications à l’état planifié et dont la date de publication approche.

Le calendrier des expirations recense quant à lui les publications dont la date d’expiration approche.

Ces mécanismes permettent de de programmer l’animation du site à l’avance.




Rhône Alpes

DSI Page 43

5.5. Elire une publication comme publication choisie (bloc orange Focus)

Editer la publication voulue.

Cocher la case « Activer » du champ focus

Si c’est lors de l’édition d’une publication cliquer sur la flèche à côté de Enregistrer et cocher « Modification majeure »

Cliquer sur enregistrer.

Attention, la création d’une nouvelle publication avec mettra automatiquement cette publication comme publication choisie, la création étant considérée comme une modification majeure.

5.6. Choisir les brèves à publier dans le portail d’un bassin (colonne de droite)

Depuis le back-office, ouvrir les onglets "Portlets" > "Toutes les portlets", puis éditer la portlet "Brève de Rhône Alpes" (à adapter en fonction du bassin) :

Aller sur l’onglet "Contenu", puis dans le sous onglet "Avancé" :




Rhône Alpes

DSI Page 44

Dans le champ "Premières publications", à la place de la publication existante, cliquer sur choisir une publication et sélectionner les publications à élire (clic sur le bouton radio).


Note : pour modifier le nombre de brèves à afficher, il faut aller sur l'onglet "itération".

5.7. Choisir les publications de la portlet Lire aussi (page d’accueil)

Depuis le back-office, ouvrir les onglets "Portlets" > "Toutes les portlets", puis éditer la portlet " Lire aussi (page d'accueil)" :

Aller sur l’onglet "Contenu", puis dans le sous onglet "Avancé" :

http://localhost:8080/sauvonsleau/work/displayWork.jsp?id=d_8020

http://localhost:8080/sauvonsleau/work/displayWork.jsp?id=d_8020




Rhône Alpes

DSI Page 45

Dans le champ "Premières publications", à la place de la publication existante, cliquer sur choisir une publication et sélectionner les publications à élire (clic sur le bouton radio).


5.8. Choisir les publications à faire apparaitre sur le site institutionnel

En mode création ou modification d'un article, dans l'onglet "Contenu", il faut aller cocher, dans la liste de catégories "Classement actu pour site institutionnel", la (les) catégorie(s) communes avec le site institutionnel concernées par le(s) sujet(s) de l'article.




Rhône Alpes

DSI Page 46

Attention : pour les catégories de "Classement actu pour site institutionnel", tout ajout/modification/suppression de catégorie nécessite une action de déclaration équivalente dans le site institutionnel (voir le manuel utilisateur du site institutionnel pour les détails).

5.9. Modération des commentaires des internautes

Dans le back office, onglets "Contenus utilisateurs" > "Tous les contenus utilisateurs", on retrouve la liste des commentaires.




Rhône Alpes

DSI Page 47

Les commentaires suivent un workflow de modération des commentaires.

Au dépôt un commentaire est à l'état publié.

Lors d'un clic sur le lien "Signaler un abus", le commentaire passe à l'état "Publié - à modérer".

A ce moment, l'administrateur de l'espace décide si le commentaire devient "Publié – modéré" ou "Rejeté".

Dans le dernier cas, le commentaire devient non visible aux internautes.

Dès lors qu'un commentaire a quitté l'état "Publié", le clic sur Signaler un abus devient inopérant (on considère que le modérateur a déjà joué son rôle une fois).

L’administrateur de l’espace est responsable de ce qui est publié sur le site. Il n’est pas responsable des commentaires écrits par les internautes, mais le devient s’il laisse des commentaires inadéquats (insultants…) publiés alors qu’il lui a été signalé de leur présence.




Rhône Alpes

DSI Page 48

6. Annexe 1 : Modification du widget Twitter de la page d’accueil

Sur le site Twitter (il faut être connecté) aller dans « Paramètres »

Puis cliquer sur « Widgets »




Rhône Alpes

DSI Page 49

Si vous désirez créer un nouveau Widget cliquer sur le bouton « Créer un nouveau »

Renseigner le champ « Nom d’utilisateur », cliquer sur « Créer un widget »

Si le widget existe déjà cliquer sur « Editer »

Il s’agit ensuite de récupérer le code HTML généré :

Ex : <a class="twitter-timeline" href="https://twitter.com/SauvonsLeau" data-widget-id="546964800618901504">Tweets de @SauvonsLeau</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>




Rhône Alpes

DSI Page 50

Et notamment la valeur du champ «data-widget-id » Ex :data-widget-id="546964800618901504"

6.1. Configuration du widget dans Sauvons l’eau

En tant qu’administrateur central de l’applicationOuvrir l’administration de Sauvons l’eau > Exploitation > Gestion des modules Editer le module « Sauvons l'eau V2 », vous pouvez éditer les propriétés suivantes :

Widget Twitter – ID : Identifiant du widget généré (voir la procédure ci-dessus)Widget Twitter - Nombre maximum de tweets : Nombre de Tweets qui seront affichés (au maximum)

7. Annexe 2 : Modification des intitulés des catégories du menu/des onglets des régions

Dans la back-office et partie Exploitation, cliquer sur la gestion des modules

Editer le plugin Sauvons l’eau

Modifier la largeur des onglets pour les 5 onglets actuels. Séparer chaque valeur par ; La largeur des onglets à indiquer est en %. Les valeurs possibles sont 10 12 14 … 40

Exemple :




Rhône Alpes

DSI Page 51

Pour information, les 2 configurations suivantes peuvent être mise en place pour un affichage correct :

Si onglets AUVERGNE - RHÔNE-ALPES et OCCITANIE

Les largeurs peuvent être : 30;12;34;14;10 (paramétrage mis en place lors de la MEE

de mai 2017 avec le changement de nom des régions)

Si onglet RHÔNE-ALPESLes largeurs peuvent être : 16;28;32;14;14

NB : Pour changer le libellé de l’onglet, il suffit de changer le libellé de la catégorie de navigation en 2 endroits (car le menu de navigation compare ces deux catégories pour déterminer lacatégorie courante) :

dans la catégorie "Accueil" et dans la catégorie "Bassins".

Exemple :




Rhône Alpes

DSI Page 52