Calypso - Agence De L'eau Rhône Mediterranée Corse€¦ · Web viewLe titre de l’évènement est le titre h1 de la page d’accueil, il est important pour le référencement

AGENCE DE L'EAURHONE MEDITERRANEE CORSE SITES WEB COLLOQUES ASTEK RA

DIRECTION DES SYSTEMES D'INFORMATION CRÉATION/CONFIGURATION PAGE 1

Direction des Systèmes d’Informations

SITES WEB EVENEMENTIELS POUR LES INSCRIPTIONS AUX COLLOQUES

------------------------

Manuel utilisateurpour la création et la configuration

d'un site événementiel

VERSION DATE OBJET DE LA VERSION AUTEURV1.0.0 05/06/2015 Création Philippe GrisolanoV1.0.1 17/06/2015 Complément + prise en compte des

retoursPhilippe Grisolano

V1.0.2 29/06/2015 Ajout des parties manquantes (sauf la partie CSS)

Philippe Grisolano

V1.0.3 30/06/2015 Ajout paramétrage animateur Philippe GrisolanoV1.0.4 06/07/2015 Objet des emails, supprimer une image

du tableauPhilippe Grisolano

V1.0.5 19/08/2015 Organisateurs + quelques compléments Antonin MarconiPhilippe Grisolano

V 1.0.6 07/09/2015 Mise en forme, compléments Hervé ChuzevilleV 1.0.7 09/08/2018 Complément modification formulaire Hervé Chuzeville

Août 2018



1. INTRODUCTION....................................................................................................................................... 5

2. CRÉATION DU SITE................................................................................................................................. 5

3. CONFIGURATION DE L’ÉVÈNEMENT.....................................................................................................6

3.1. TITRE DE L’ÉVÈNEMENT............................................................................................................................. 6

3.2. IMAGE BANDEAU HEADER........................................................................................................................... 6

3.3. DATE DE L’ÉVÈNEMENT.............................................................................................................................. 6

3.4. DESCRIPTION........................................................................................................................................... 7

3.5. LIEU DE L’ÉVÈNEMENT............................................................................................................................... 7

3.6. INFORMATIONS PRATIQUES........................................................................................................................ 7

3.7. PARTENAIRES........................................................................................................................................... 7

3.8. TABLEAU D’IMAGES DE LA PAGE D’ACCUEIL..................................................................................................8

3.9. COLONNE GAUCHE DE LA PAGE D’ACCUEIL (FACULTATIF)..............................................................................8

3.10. ARTICLE SAUVONS L’EAU DE LA PAGE D’ACCUEIL (FACULTATIF)...................................................................9

3.11. PROGRAMME........................................................................................................................................ 9

3.12. INTERVENANTS...................................................................................................................................... 9

3.13. GESTION DES INSCRIPTIONS................................................................................................................. 10

3.14. CONFIGURATION DES ORGANISATEURS..................................................................................................10

4. CRÉATION / MODIFICATION DES INTERVENANTS.............................................................................10

5. CRÉATION / MODIFICATION DES INTERVENTIONS............................................................................11

6. CONFIGURATION DU SITE.................................................................................................................... 11

6.1. GÉNÉRAL............................................................................................................................................... 11

6.1.1. Evènement principal...................................................................................................................... 11

6.1.2. Affichage synthèse........................................................................................................................ 11

6.1.3. Affichage intervenants................................................................................................................... 11

6.1.4. Temps de rotation du tableau d’accueil..........................................................................................12

6.1.5. Taille du badge.............................................................................................................................. 12

6.1.6. Utilisation de la personnalisation du CSS.......................................................................................12

6.1.7. Cookies......................................................................................................................................... 12



6.1.8. Modification de l'intitulé d'une structure dans le menu déroulant du formulaire d'inscription à un colloque 13

6.2. TWITTER................................................................................................................................................ 13

6.3. MESSAGES PERSONNALISABLES...............................................................................................................14

6.3.1. Mot d'accueil formulaire d'inscription..............................................................................................14

6.3.2. Paragraphe légal formulaire d'inscription........................................................................................15

6.3.3. Récapitulatif formulaire d'inscription...............................................................................................15

6.3.4. Confirmation formulaire d'inscription...............................................................................................15

6.3.5. Confirmation formulaire d'inscription considéré comme spam.........................................................16

6.3.6. Message clôture d'inscription.........................................................................................................16

6.3.7. Message événement complet........................................................................................................16

6.4. EMAILS.................................................................................................................................................. 17

6.4.1. E-mail de contact........................................................................................................................... 17

6.4.2. Sujet du mail de confirmation d'inscription......................................................................................17

6.4.3. Mail de confirmation d'inscription....................................................................................................17

6.4.4. Sujet du mail d'annulation d'inscription...........................................................................................17

6.4.5. Mail d'annulation d'inscription.........................................................................................................17

6.5. MÉTA-DESCRIPTION................................................................................................................................ 18

6.6. CSS GLOBAL......................................................................................................................................... 18

6.7. CSS HEADER........................................................................................................................................ 18

6.8. CSS FOOTER........................................................................................................................................ 18

6.9. CSS ACCUEIL........................................................................................................................................ 18

6.10. CSS INSCRIPTION............................................................................................................................... 18

6.11. CSS PROGRAMME.............................................................................................................................. 18

6.12. CSS INTERVENANTS........................................................................................................................... 18

6.13. CSS DÉTAIL INTERVENANT..................................................................................................................18

7. CONFIGURATION DU PLUGIN « SITEEVENEMENTIELPLUGIN »........................................................19

8. CONFIGURATION DU TITRE DES PAGES............................................................................................20



9. CONFIGURATION DES URLS INTUITIVES............................................................................................21

10. ANNEXE : OPTIMISER UNE IMAGE À INSÉRER DANS UN SITE WEB.............................................22

10.1. RÉDUIRE LES DIMENSIONS ET LA RÉSOLUTION DE L'IMAGE.......................................................................23

10.2. CHANGER, SI BESOIN, LE FORMAT DE FICHIER IMAGE...............................................................................24

10.3. Compresser l'image..........................................................................................................................25



1. IntroductionCe document décrit la création et la configuration d’un site évènementiel pour les inscriptions aux colloques de l'agence de l'eau.

2. Création du sitePour créer un nouveau site pour un colloque on va créer un espace de travail à partir de l’espace modèle créé pour (espace $NAME$). Cette première opération d'initialisation est à demander à la DSI.

Pour créer un site il faut aller dans l’espace d’administration

Puis cliquer sur Organisation > Espaces de travail

Cliquer ensuite sur la baguette magique de l’espace modèle « $NAME$ »



A ce niveau le site est créé et disponible à l’adresse suivante :

http://www.sauvonsleau.fr/<Préfixe>

3. Configuration de l’évènementPour chaque site évènementiel un contenu de type Evènement SE est ajouté, il contient les informations de l’évènement, il est donc nécessaire de le configurer avec les informations de l’évènement du site.

Dans l’espace de travail de l’espace précédemment créé :

Aller dans Contenus > Tous les contenus puis éditer le contenu « Evénement ».

3.1. Titre de l’évènementLe titre de l’évènement est le titre h1 de la page d’accueil, il est important pour le référencement naturel qu’il soit représentatif du site.

3.2. Image bandeau headerL’image sélectionnée dans ce champ correspond à l’image du header du site, qui apparait en haut de toutes les pages. Quelles que soient les dimensions originales de l’image, elle sera redimensionnée si besoin pour remplir toute la largeur du site (soit 1140px). La hauteur sera également redimensionnée pour garder les proportions de l’image.

Ainsi, afin d’obtenir un rendu correct, il est conseillé de choisir une image rectangulaire avec une largeur avoisinant les 1140px. L'image devra, au préalable, avoir été optimisée pour le Web (voir l'annexe "Optimiser une image à insérer dans un site Web") afin de réduire le temps de chargement des pages (l'optimisation automatique de Jcms n'étant pas utilisée pour ce champ car elle n'a pas été jugée satisfaisante).

3.3. Date de l’évènementRenseignez les 2 champs suivants :

Onglet Général > Date de début

http://www.sauvonsleau.fr/%3CPr%C3%A9fixe



Onglet Général > Date de fin

3.4. DescriptionSur l’onglet Accueil, dans la colonne centrale, s’affiche la description de l’évènement

Onglet Général > Description

3.5. Lieu de l’évènementOnglet Général > Lieu

Le lieu de l’évènement est utilisée principalement dans l’onglet « Infos pratiques »

Il est préconfiguré il faut éditer ce lieu pour l’adapter à l’évènement :

Renseignez les champs suivants :

Titre : Nom du lieu

Description :

Adresse :

Code postal :

Ville :

Téléphone :

3.6. Informations pratiquesEn plus du lieu, l’onglet Infos pratiques contient un champ libre permettant d’apporter un complément d’information :

Onglet Général > Informations pratiques



3.7. PartenairesUne liste de partenaires peut être affichée sur la page d’accueil du site.

Un partenaire est préconfiguré, il peut être édité ou supprimé selon les besoins

Onglet « Page d’accueil » > Partenaires

Le type de contenu Partenaire SE est définit par un titre, un logo, une URL, Libellé du lien (non visible).

Les logos des partenaires apparaissent en pied de chaque page du site.

Les logos devront, au préalable, avoir été optimisés pour le Web (voir l'annexe "Optimiser une image à insérer dans un site Web") afin de réduire le temps de chargement des pages (l'optimisation automatique de Jcms n'étant pas utilisée pour ce champ car elle n'a pas été jugée satisfaisante).

3.8. Tableau d’images de la page d’accueilLa page d’accueil comporte sous le menu une liste d’image qui peut défiler si il y a plusieurs images :

Onglet « Page d’accueil » > Tableau page d'accueil : images.

Quelles que soient les dimensions originales de l’image, elle sera redimensionnée, si besoin, pour remplir toute la largeur du site (soit 1140px). La hauteur sera également redimensionnée pour garder les proportions de l’image (550px max). Ainsi, afin d’obtenir un affichage correct, il est recommandé de choisir des images rectangulaires ayant les mêmes proportions (au mieux, avec une longueur avoisinant les 1140px).

Les images devront, au préalable, avoir été optimisées pour le Web (voir l'annexe "Optimiser une image à insérer dans un site Web") afin de réduire le temps de chargement des pages (l'optimisation automatique de Jcms n'étant pas utilisée pour ce champ car elle n'a pas été jugée satisfaisante).

Important : Si vous voulez supprimer une image qui n’est pas la dernière du tableau vous ne devez pas laisser d’image vide, il vous faudra une fois l’image supprimée, décaler les images (couper coller les URLS et textes des images suivantes vers la case du tableau précédente)

3.9. Colonne gauche de la page d’accueil (facultatif)Le bandeau vertical gauche de la page d’accueil est une image configurable :

Onglet « Page d’accueil » > Image mosaïque des chiffres.



Si cette image apporte des informations il faut renseigner ce informations dans le champ (accessibilité : reprendre le texte contenu dans l'image) :

Onglet « Page d’accueil » > Texte alternatif mosaïque.

L'image devra, au préalable, avoir été optimisée pour le Web (voir l'annexe "Optimiser une image à insérer dans un site Web") afin de réduire le temps de chargement des pages (l'optimisation automatique de Jcms n'étant pas utilisée pour ce champ car elle n'a pas été jugée satisfaisante).

3.10.Article sauvons l’eau de la page d’accueil (facultatif)Un ou plusieurs articles du site sauvons l’eau peuvent être affichés sur la page d’accueil en dessous de la présentation :

Onglet « Page d’accueil » > Thématique article sauvons l'eau.

Le nombre d’article à afficher est configurable :

Onglet « Page d’accueil » > Nombre articles de Sauvons l'eau.

3.11.ProgrammeLes différentes interventions de l’évènement sont configurables :

Onglet « Programme » > Programme

Des interventions sont préconfigurées il s’agit de les adapter et d’en ajouter d’autres si besoin.

Voir ensuite le chapitre sur la création/modification des interventions.

L’entête de l’onglet programme est défini, lui, dans le champ suivant :

Onglet « Programme » > Description du programme.

3.12. IntervenantsIl est possible de configurer le haut de page et le bas de page de l’onglet intervenants :

Onglet « Intervenants » > Mot d'accueil onglet intervenants

Onglet « Intervenants » > Animateur : Message au dessus de la liste des intervenants, pour présenter l’animateur du colloque, peut être vide.



Il faut faire pointer le nom de l’utilisateur sur l’intervenant correspondant qui aura été préalablement créé.

Onglet « Intervenants » > Zone en dessous du détail d'un intervenant (retour)

Il existe 2 possibilités pour choisir la liste des intervenants à afficher sur la page « Intervenants » :

Champ « Choix manuel intervenants » à « Non » : la liste des intervenants est détectée automatiquement en fonction des intervenants liés aux activités de l’événément (l’ordre d’affichage n’est pas modifiable).

Champ « Choix manuel intervenants » à « Non » : la liste des intervenants est paramétrable manuellement via le champ « Liste manuelle intervenants ». L’ordre d’affichage est le même que celui choisi dans la liste.

3.13.Gestion des inscriptionsOnglet Gestion > Date clôture d’inscription

Onglet Gestion > Nombre de places

Onglet Gestion > Sélection des activités (permet de définir si lors de l’inscription les participants choisirons les interventions auxquelles ils souhaitent participer).

3.14.Configuration des organisateursOnglet Gestion > Organisateurs

Ce champ contient la liste des organisateurs de l’évènement, il permet, si les personnes, sont connectées d’afficher l’onglet Gestion.

En outre, pour qu'un agent puisse modifier les contenus du site, il faut qu'il soit administrateur de l'espace du site événementiel pour le colloque.

4. Création / modification des intervenantsLes intervenants sont créés avec le type de contenu « Intervenant SE ».

Il faut renseigner les champs suivants :

Titre (obligatoire) : utilisée uniquement dans la configuration

Prénom (obligatoire)

Nom (obligatoire)

Photo (possible d’utiliser upload/docs/image/jpeg/2015-04/user.jpg comme avatar si pas de photo disponible) ; les photos sont optimisées automatiquement pour le Web par Jcms (ce qui n'empêche pas, si vous le souhaitez, une optimisation préalable "manuelle" via un logiciel comme la fonction



"enregistrer pour le Web" de Photoshop qui permettra une optimisation plus fine et donc meilleure ; voir aussi l'annexe "Optimiser une image à insérer dans un site Web").

[Note technique : si on utilise le tag jalios jalios:thumbnail dans les développements, alors l'image est optimisée automatiquement par Jcms, mais avec une légère perte de qualité (un test sur une image de 75,1 Ko donne une nouvelle image de 44,3 Ko). Depuis un navigateur, il est possible de reconnaitre une image qui utilise la balise jalios:thumbnail grâce à la dernière partie de son chemin qui est du type {nom de l'image}.associated/th-{dimension maximum de l'image}-{nom de l'image}.jpg.Plus simplement si dans le chemin de l'image il y a ".associated/th-" cela veut dire que l'image provient d'un tag jalios:thumbnail.Exemples : image créée par un tag : upload/docs/image/jpeg/2015-07/photo_christian_de_perthuisrecadree.jpg.associated/th-112x141-photo_christian_de_perthuisrecadree.jpg.jpg ; image normale : upload/docs/image/jpeg/2015-07/photo_christian_de_perthuisrecadree.jpgSur le site des colloques seules les images des photos d'identités utilisent le tag.]

Description (obligatoire) : La description de l’intervenant s’affiche sur la page d’affichage pleine page de celui-ci

Fonction : affichée si présent dans la page programme

5. Création / modification des interventionsLes interventions sont créés avec le type de contenu « Intervention SE ».

Il faut renseigner les champs suivants :

Titre (obligatoire) : utilisé uniquement dans la configuration

Lieu : Si le lieu de l’intervention est différent du lieu de l’évènement il est possible de le configurer ici

Date de début (obligatoire)

Date de fin (obligatoire)

Description (obligatoire) : utilisée dans la page programme et dans l’affichage pleine page d’un intervenant

Intervenants : permet de définir les intervenants de cette intervention

Nombre de place : Si on gère pour l’évènement une inscription par activité il est possible de limiter le nombre d’inscrits par intervention



6. Configuration du site

6.1. Général

6.1.1. Evènement principal

Par défaut un évènement est créé avec la création du site, il est possible de choisir ici avec quel évènement le site sera associé.

6.1.2. Affichage synthèse

Permet d’afficher l’onglet synthèse une fois que l’évènement s’est déroulé

6.1.3. Affichage intervenants

Permet d’afficher l'onglet intervenants.

6.1.4. Temps de rotation du tableau d’accueil

Définit le temps de rotation des images sur la page d’accueil quand il y en a plusieurs de sélectionnées

6.1.5. Taille du badge

Définit la taille du badge généré

6.1.6. Utilisation de la personnalisation du CSS

Définit si la personnalisation du site par les onglets CSS* (feuilles de styles) est active

6.1.7. Cookies

Il faut sélectionner la catégorie du portail contenant la page sur l’utilisation des cookies.

Il faut pour cela sélectionner la catégorie « Cookies » sous la catégorie du site.

Ex pour un site « Test » :



6.1.8. Modification de l'intitulé d'une structure dans le menu déroulant du formulaire d'inscription à un colloque

Pour modifier l'intitulé d'une structure dans le menu déroulant du formulaire d'inscription à un colloque, il suffit de modifier le nom de la catégorie correspondante dans l'arborescence des catégories du site sous : "Sites évènementiels > Classement > Structure".

Exemple :

6.2. TwitterLe fil twitter affiché sur la page d’accueil est configurable dans cet onglet :

Id du fil Twitter : Identifiant du widget twitter

Url du Twitter : URL qui s’affiche à la place du widget si jamais celui-ci ne peut s’afficher

Nombre de tweets affichés : Nombre de tweet affiché sur la page



6.3. Messages personnalisablesLes messages ci-dessous peuvent utiliser des mots clés qui seront remplacés par leur valeur lors de l’affichage du message :

$nomDuColloque$ : Titre de l’évènement

$boiteContact$ : E-mail de contact dans l’onglet Emails

$datesDuColloque$ : date de début et de fin de l’évènement au format suivant :

Si le colloque est sur un jour : "le <JOURS MOIS ANNEE> de <HEURE’h’MINUTE> à < HEURE’h’MINUTE >

Sinon : du <JOURS MOIS ANNEE> au <JOURS MOIS ANNEE>

$dateDebutColloque$ : <JOURS MOIS ANNEE>

$lieuDuColloque$ : Adresse du lieu de l’évènement

Certains mots clés sont uniquement utilisables lors d’une inscription car ils référencent des informations de l’inscription :

$civilite$ : Civilité saisie lors de l’inscription (Madame, Monsieur)

$nom$ : Nom saisi lors de l’inscription

$prenom$ : Prénom saisi lors de l’inscription

$numeroInscription$ : Numéro d’inscription généré par le système

6.3.1. Mot d'accueil formulaire d'inscription



6.3.2. Paragraphe légal formulaire d'inscription

6.3.3. Récapitulatif formulaire d'inscription



6.3.4. Confirmation formulaire d'inscription

6.3.5. Confirmation formulaire d'inscription considéré comme spam



6.3.6. Message clôture d'inscription

6.3.7. Message événement complet



6.4. EmailsL’envoi d’e-mail utilisé notamment lors de la confirmation d’inscription est configurable dans cet onglet

Il est possible d’utiliser les variables définies dans le chapitre sur les messages personnalisables

6.4.1. E-mail de contact

Expéditeur des différents mails automatiquement envoyés.

Valeur de la variable : $boiteContact$

6.4.2. Sujet du mail de confirmation d'inscription

Sujet du mail envoyé à la personne venant de s’inscrire.

Il est possible d’utiliser les variables définies dans le chapitre sur les messages personnalisables.

Valeur si non renseigné : Confirmation de votre inscription à l'événement + <TITRE EVENEMENT>.

6.4.3. Mail de confirmation d'inscription

Contenu du mail envoyé à la personne venant de s’inscrire.


6.4.4. Sujet du mail d'annulation d'inscription

Sujet du mail envoyé à la personne dont son inscription a été annulée par le gestionnaire du site.


Valeur si non renseigné : Annulation de votre inscription à l'événement + <TITRE EVENEMENT>.

6.4.5. Mail d'annulation d'inscription

Contenu du mail envoyé à la personne dont son inscription a été annulée par le gestionnaire du site.




6.5. Méta-descriptionLes balises meta description de chaque onglet, sont configurables dans cet onglet.


Cette étape de personnalisation est importante pour le référencement naturel du site et c'est, la plupart du temps, cette description qui apparait comme résumé de la page dans les moteurs de recherche.

6.6. CSS globalIci, configurer la police principale utilisée dans tout le site, la taille et la couleur des titres de pages (par exemple « Inscription », « Programme », « Intervenants ».

6.7. CSS HeaderIci, configurer les tailles et les couleurs du Header (bandeau). Attention : lors de l’installation d’un site événementiel, il est probable que les liens du menu de navigation aient une taille trop importante. Dans ce cas, diminuer la taille dans la propriété « Taille menu ».

6.8. CSS FooterIci, configurer la taille et la couleur des liens du footer (pied de page) ainsi que la couleur de fond du footer.

6.9. CSS AccueilIci, configurer les tailles et couleurs des textes et zones appartenant à la page Accueil.

6.10. CSS Inscription Ici, configurer les tailles et couleurs des textes et zones appartenant à la page Inscription.

6.11. CSS ProgrammeIci, configurer les tailles et couleurs des textes et zones appartenant à la page Programme.

6.12.CSS IntervenantsIci, configurer les tailles et couleurs des textes et zones appartenant à la page Intervenants.

6.13.CSS Détail IntervenantIci, configurer les tailles et couleurs des textes et zones appartenant à la page Détail Intervenant.



7. Configuration du plugin « SiteEvenementielPlugin »

Propriétés Valeur Description

Clé API Gmap AIzaSyCJnztAjX0ZAkS_7WCQWiFsEN2nMxBeoS8

Clé d'identification du plan Google Map

Id de la catégorie Sites événementiel

jv_9480

Id du workspace modèle des sites événementiel

jv_9485

Dimension du QR Code en pixels (hauteur = largeur)

150

Id du site "événementiel" sur Xiti

A renseigner par la DSI pour activer le suivi des statistiques



8. Configuration du titre des pagesLe titre des pages correspond au titre de la portlet du portail correspondant.

Pour modifier le titre d’une page, il faut pour cela éditer la portlet « Portail JSP Collection » correspondant à la page

Portlet Page

Accueil - Portail Onglet accueil

Inscription - Portail Onglet inscription

Programme - Portail Onglet programme

Intervenants - Portail Onglet intervenants

Informations pratiques - Portail Onglet infos pratiques

Gestion - Portail Onglet gestion

Synthèse - Portail Onglet synthèse

Politique des cookies - Portail Page d’information sur l’utilisation des cookies

Cette étape est très importante et indispensable pour le référencement naturel du site, notamment (ces éléments sont notamment une "zone chaude" pour le référencement dans les moteurs de recherche ; ils sont également utilisés dans les favoris ou dans les statistiques Xiti).

Par exemple, pour le Colloque "Eau économie" de 2015, les titres suivants ont été utilisés (en tenant compte du fait que Google affiche environ les 50 premiers caractères du titre sur les résultats sur mobile et les 70 premiers sur écran d'ordinateur, en 2015) :

"Accueil – Portail" renommé en : "Et si l'eau était le levier de croissance de votre territoire ? Colloque Lyon 16 octobre 2015"

"Inscription – Portail" renommé en : "Inscription au colloque "Et si l'eau était le levier de croissance de votre territoire ?""

"Programme – Portail" renommé en : "Programme du colloque "Et si l'eau était le levier de croissance de votre territoire ?""

"Intervenants – Portail" renommé en : "Intervenants du colloque "Et si l'eau était le levier de croissance de votre territoire ?""

"Informations pratiques – Portail" renommé en : "Infos pratiques du colloque "Et si l'eau était le levier de croissance de votre territoire ?""

"Gestion – Portail" renommé en : "Gestion du colloque "Et si l'eau était le levier de croissance de votre territoire ?"" (Ce dernier n'aura pas d'intérêt pour le référencement mais uniquement pour les gestionnaires s'ils mettent la page en favori)

" Synthèse du colloque "Et si l'eau était le levier de croissance de votre territoire ?""



9. Configuration des URLs intuitivesDes URLs intuitives sont configurables en éditant les catégories sur lesquelles elles ont été définies.

Liste des URLs configurables :

Catégorie Valeur par défaut Page

Catégorie racine /<NOM_CATEGORIE_RACINE> (= préfixe du site définit à la création)

Onglet accueil

/Navigation/Accueil /<NOM_CATEGORIE_RACINE>/accueil Onglet accueil

/Navigation/Inscription /<NOM_CATEGORIE_RACINE>/inscription Onglet inscription

/Navigation/Programme /<NOM_CATEGORIE_RACINE>/programme Onglet programme

/Navigation/Intervenants

/<NOM_CATEGORIE_RACINE>/intervenants Onglet intervenants

/Navigation/Infos pratiques

/<NOM_CATEGORIE_RACINE>/infospratiques

Onglet infos pratiques

/Navigation/Synthèse /<NOM_CATEGORIE_RACINE>/synthese Onglet synthèse

/Navigation/Gestion /<NOM_CATEGORIE_RACINE>/gestion Onglet gestion

L’URL du site sera ainsi de la forme www.sauvonsleau.fr/URL_INTUITIVE>.

Cette URL ne reste pas affichée dans le navigateur, elle est remplacée par l’adresse réelle de la page.



10. Annexe : Optimiser une image à insérer dans un site WebSur 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.

Il existe de multiples logiciels permettant d'optimiser une image pour le Web, notamment Photoshop, avec sa fonction "enregistrer pour le Web" que vous pouvez utiliser si vous possédez déjà une licence d'utilisation pour ce logiciel.

Dans la suite, on utilisera, pour notre part, le logiciel GIMP (qui est une solution gratuite) 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.

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



Le logiciel se présente ainsi :

10.1.Réduire les dimensions et la résolution de l'imageUne 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.

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.

10.2.Changer, si besoin, le format de fichier imageQuel 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)

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

10.3.Compresser l'imageEn 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.





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

Documents

Calypso - Agence De L'eau Rhône Mediterranée Corse€¦ · Web viewLe titre de l’évènement est le titre h1 de la page d’accueil, il est important pour le référencement