Manuel Webconf Tool Moyens Informatiques - INRIA Grenoble Rhône-Alpes 30 mars 2010
Table des matières Architecture d'un site Web...3 Accéder au site web...4 Au commencement......5 Le back office...6 Le contenu...7 Gestion des pages...8 Apparence du site...14 Les widgets...15 Gestion des utilisateurs du back office...18 Envoi de mail/newletter (menu MailPress):...21 Gérer un calendrier collaboratif (Menu Events Calendar):...24 Personnalisation du thème (menu Appareance > Custom CSS) :...26 Forum (menu Forum Server) :...27 Création de tableau (Menu Tools > Wp-table Reloaded)...28 Langues du site (menu Settings > Language)...31 Partager le contenu du site vers des réseaux sociaux (menu Settings > AddThis)...32 Statistiques du site...34 Gestion des inscriptions...35 2
Architecture d'un site Web A l image de l arborescence de vos documents sur votre ordinateur, un site web est composé d un ensemble de dossiers et fichiers, avec une structure hiérarchique spécifique. Figure 1 : Arborescence d un site web Vos documents sont nommés avec une extension particulière suivant son type (.doc pour un document word,.xls pour une feuille excel, etc.). L'extension utilisée pour les pages web est.html. Le format html est un format de description de données. Il permet de structurer ces données, et d'inclure des ressources multimédias (images, formulaires, etc.). Ces fichiers sont utilisés avec des exte,nsions.css (Cascading Style Sheets). Les fichiers.css permettent de mettre en forme les fichiers html. Chaque fichier html (Hypertext Markup Language) correspond à une page du site web. Chaque page web peut-être lié à une autre page web. C'est ce que nous appelons un hyperlien. Et chaque page web est accessible via une adresse web. La structure d'un site web est reflétée par le menu du site, qui dirige l'utilisateur vers chacune des pages web, en passant par son URL (Uniform Resource Locator). 3
Accéder au site web Un site web (ensemble de pages html) est accessible via un navigateur, par le biais d'une adresse web de la syntaxe suivante: http://nomconference.inrialpes.fr. Par exemple, http://webconf.inrialpes.fr Le back office (BO) d'un site est accessible via l'adresse su type : https://nomconference.inralpes.fr/wp-admin. Le BO permet de gérer (créer, modifier, supprimer) les pages html du site. Ces modifications se font donc par une interface web, accessible à partir de l'inria, mais aussi par l'extérieur, et sont instantanées (Vous faites une modification, vous l'enregistrez, et elle apparaît automatiquement sur le site web. Pensez à rafraîchir la page au niveau de votre navigateur). 4
Au commencement... WebConf Tool est une instance modifiée de WordPress MU (Multi Utilisateurs). L'avantage de cet outil par rapport à un WordPress classique est de permettre au Service des Moyens Informatiques (SMI) de gérer plusieurs sites à travers une seule interface web, mais aussi de générer automatiquement chaque site web avec les mêmes caractéristiques. A la création d'un site web, le SMI importons un squelette, qui correspond à un ensemble de pages html, fréquemment utilisé dans un site de conférence (Accueil, Appel à communications, Comités, Programme, etc.), avec une structure donnée. (D'autres configurations sont mises en place, que nous ne détaillerons pas ici). Une adresse unique est attribuée à chaque site, ainsi qu'un administrateur (nous verrons plus loin qu'il a la possibilité de rajouter d'autres utilisateurs, dont des administrateurs). Chaque utilisateur de l'outil doit être enregistré sur un site donné pour pouvoir accéder au BO de celui-ci. 5
Le back office A la connexion au BO, une page d accueil (dashboard) vous présente les informations principales sur le contenu de votre site. Image 1 : le back office 1 : Titre de votre site, avec un lien pour accéder à sa page d accueil 2 : Nom de l utilisateur connecté 3 : Liens hypertextes vers des outils externes de l Inria (Alfresco pour le partage de fichiers, Sympa pour la gestion de mailinglist. 4 : Menu principal de l outil. 5 : Récapitulatif sur le contenu du site : Nombre de pages, de posts, etc. Pour configurer les informations à afficher ou non au niveau du dashboard, cliquez sur Screen Options. 6
Le contenu Comme nous l avons vu en haut, l information contenue dans un site peut être de nature différente : texte, image, son, vidéo, etc. Ces différents contenus sont disposés au sein de Pages, découpées en différents blocs : Figure 2 : Structure d'une page web Lorsque vous allez créer une Page dans WebConf Tool, vous allez en fait créer le bloc principal de la page html. Les autres blocs sont gérés par les widgets, et les thèmes (cf. plus bas). 7
Gestion des pages La gestion des pages se fait par le menu principal Pages : Pour créer une page, allez dans Pages > Add new. Image 2 : Création d une page Contenu Lors de la création, vous devez renseigner : - le titre de la page (dans les différentes langues choisies. Plus d informations p. 31 ). - le contenu de la page au niveau de l éditeur de texte. Par exemple, sur l image cidessus, l utilisateur est sur le point d écrire le contenu en Visual (i.e. en utilisant l éditeur de texte) pour la version anglaise. Pour écrire la version française en html, cliquez sur les onglets adéquats. Vous obtenez ceci : 8
Image 3 : 2diteur de texte Les icônes de l éditeur textuel sont largement inspirés de Word. Il vous est possible de copier/coller des documents crées à partir de Word et de conserver leurs mises en page dans WordPress, mais le résultat est parfois décevant Image 4 : éditeur wysiwyg (Pour un rapide descriptif des différentes icônes : http://help.keonnected.com/resources/cahier_keonnected_tinymce.pdf) Image 5 : Boutons de l éditeur de texte Au dessus de cette barre d outils se trouvent des boutons vous permettant d insérer une image, une vidéo ou un autre média au sein de votre page. Image 6 : Insertion d un média dans une page Les images traitées sont compressées, redimensionnées et des miniatures sont créées. 9
Image 7 : Insérer une image Vous pouvez modifier le nom de votre image, lui attribuer un texte alternatif (conseillé au cas où l image ne s afficherait pas), une description, un lien hypertexte (qui s ouvrira au click sur l image), etc. Pour modifier une image ou la supprimer, survolez l image insérée dans votre page et cliquez sur le bouton adéquat : Image 8 : Modification d une image insérée 10
Image 9 : Modification des propriétés d'une image Vous pouvez modifier les propriétés vues à l insertion de l image, attribuer des dimensions exactes, etc. Chaque image téléchargée est visible via le menu Media qui répertorie tous les médias (images, vidéos, sons, fichiers texte) de votre site. Vous pouvez également télécharger d autres documents et les gérer à partir du sous-menu Add New du menu Media. Image 10 : Liste des médias d un site 11
Carte géographique Image 11 : Insertion d une carte Pour intégrer une carte géographique de type GoogleMap, renseignez l adresse, la taille de la carte et cliquez sur Add location. Publication Lorsque vous avez terminé d écrire votre page, cliquez sur le bouton Publish. Pour voir le résultat sur votre site, cliquez sur Visit Sit (en haut de l écran).vous pouvez à tout moment prévisualiser votre travail avec le bouton Preview. Il vous est également possible de sauvegarder cette page sans la publier, créant ainsi un brouillon (bouton Draft) de celle-ci. Si vous avez crée une page, mais que vous voulez la publier à une date donnée, renseignez alors la date de publication. WordPress s occupe du reste. Si vous êtes contributeur, vous ne pouvez pas publier, mais seulement soumettre à relecture. 12
Hiérarchisation Si la page crée est une sous-page d une page déjà crée, sélectionnez cette page au niveau de la liste déroulante Parent. Dans notre exemple, les pages Organization Committee et Program Committe sont des sous-pages de Committees : Image 12 : structuration du site Pages et sous pages Lors de l affichage du menu de vos pages, elles sont par défaut classées alphabétiquement (cf. Widget Pages). Mais vous pouvez choisir de les classer suivant un ordre de votre choix. Pour cela, attribuez un numéro de hiérarchie à chacune de vos pages au niveau de la case Order. Par exemple, notre page Home sera en tête de menu, donc aura le numéro 0. Nous avons 8 pages, et nous voulons que la page Forum soit la dernière, elle aura donc le numéro 8. 13
Apparence du site La mise en forme des différentes pages du site se fait par le biais de thèmes (Menu Appareance > Themes). Un thème va conditionner la mise en place de vos différents contenus, de la couleur du texte, etc. Un ensemble de thèmes vous est proposé, en adéquation avec la charte graphique de l INRIA. Vous pouvez ajouter un nouveau thème via l interface : Image 13 : Liste des thèmes disponibles Vous pouvez à tout moment de la création de votre site modifier son thème. Pour chaque thème, vous devrez préciser certains points comme l image de votre logo par exemple. Ces paramètres seront accessibles via un sous-menu du menu Appareance. Nous verrons plus bas (p. 26) qu un plugin permet de personnaliser la charte graphique de votre site en vous donnant accès à la feuille de style (css). (N.B. : pour ajouter une image en logo pour le thème Mumrik, suivre les instructions ici : http://frontendbook.com/adding-a-header-image-to-the-mumrik-theme) 14
Les widgets Nous avons vu comment gérer les pages d un site, et nous avons également vu que ces pages servaient à ajouter du contenu au bloc principal d une page html. Les widgets quant à eux permettent de rajouter du contenu au niveau des sidebar (cf. Figure 2 : Structure d'une page web). Un widget est une petite application interactive apportant à l'utilisateur des informations ciblées (calendrier, diaporama d images, liste des pages, etc.). Ils sont facilement manipulables s intègrent facilement au niveau des sidebar présents pour un thème donné. Image 14 : Gestion des widgets Prenons l exemple ci-dessus. Nous avons sélectionne le thème Fusion. Ce thème permet de rajouter des widgets à droite d une page, au niveau de trois colonnes différentes (Default Sidebar et 2 nd sidebar et topcolumn), et en bas de la page (Footer). Il existe deux catégories de widgets : - Avalaible widgets : Cette partie recense tous les widgets à disposition, - Inactive widgets : elle recense tous les widgets que vous avez utilisé et déjà configuré (ou que le SMI a configuré pour vous). Pour activer un widget, glissez-déposez cet élément sur le barre voulu. Pour le désactiver, procédez de manière inverse. Pensez à déposer le widget dans la partie Inactive widget pour conserver vos paramètres. 15
Image 15 : Activation d un widget Ajoutez ou modifiez les paramètres et enregistrez. Parmi ces widgets, voici les principaux : - qtranslate Languge Chooser : si vous choisissez d avoir une page ou tout votre site disponible en plusieurs langues, ce widget permet d insérer un bloc affichant les différentes langues (texte et/ou drapeau) permettant à l utilisateur de passer d une langue à l autre par un simple click (par défaut, les langues activés sont le français et l anglais). Il est fortement conseillé de disposer ce widget au niveau de la sidebar «topcolumn». - Pages : affiche une liste de toutes vos pages selon un ordre alphabétique ou par hiérarchie (cf. Image 2 : Création d une page). - Search : insère une fonction recherche au sein de votre site. - Calendar : affiche un calendrier du mois courant. - Your Events Calendar : affiche un calendrier mensuel avec les événements que vous avez paramétré (cf. Image 23 : Calendrier (EventsCalendar) activé via le widget associé 16
(Your Events Calendar)). - RSS : insère un lien rss vers un site de votre choix. - Text : affiche un texte sans mise en forme (possibilité d insérer du code html). - Links : affiche les liens hypertextes que vous avez listés au niveau du menu Links. Vous pouvez catégoriser vos liens et afficher avec le widget seulement une catégorie. - Meta : affiche un lien vers le back office, un lien de déconnexion au back office et un lien vers le flux rss du site. - Mailpress : affiche un formulaire d inscription à une newsletter (configuration dans menu>settings>mailpress) - Forum latest activity : affiche les derniers commentaires (configuration dans menu>forum). Astuce n 1 : pour la plupart des widgets, un titre vous est demandé. Pour certains, si vous laissez le champ vide, le widget affichera un titre par défaut. Pour forcer un titre vide, faire un espace dans le champ prévu au titre. 17
Gestion des utilisateurs du back office Pour chaque site, il y a au moins un administrateur, qui a tous les droits sur le site. Il peut y avoir d autres membres avec d autres droits. Voici un récapitulatif de ces droits : (Image extraite de http://www.interconnectit.com/) Tableau 1 : Rôles des utilisateurs Étant donné qu un auteur ne peut même pas publier une page (seulement des articles, ce qui ne nous intéresse pas ici), les rôles d Auteur, Contributeur et Abonné ne sont pas intéressants. Gestion des rôles Si ces droits ne vous conviennent pas, ou si vous avez besoin de créer d autres rôles 18
ou groupes, vous avez à votre disposition une fonctionnalité Capabilities (sous-menu du menu Users). Image 16 : Gestion des rôles Pour un rôle donné, vous pouvez ajouter ou supprimer un droit. Et vous pouvez créer d autres rôles. Dans le menu Tools > Capability Manager, vous avez la possibilité de supprimer toutes les modifications faites. Créer un nouvel utilisateur Remplissez le formulaire suivant accessible via le menu Users > Add New. (Ne décochez pas la case Skip confirmation Email). 19
Image 17 : Création d un nouvel utilisateur Un mail sera envoyé (en français et anglais) au nouvel utilisateur, ainsi qu à l administrateur du site. Seul l utilisateur connaît son mot de passe. Il lui est possible de le modifier en allant dans son profil (Users > Your profile). La configuration est telle que pour chaque utilisateur ayant des identifiants ldap, il pourra les utiliser si l administrateur a renseigné l username et l email adéquat (par défaut, WebConf Tool crée un mdp en plus de celui de ldap). Gestion des utilisateurs par l administrateur Un tableau récapitulatif est mis à disposition de l administrateur pour gérer facilement les utilisateurs du site (modifier les informations d un utilisateur, le supprimer, changer son rôle). Image 18 : Liste des utilisateurs 20
Envoi de mail/newletter (menu MailPress): Vous pouvez à présent envoyer des mails aux membres du site, via le menu Mail > New Mail. Image 19 : Création d un mail Vous pouvez également gérer des mailinglists 1 via cet outil. Pour cela, créez votre liste via le Menu Mails > Mailinglist, puis allez au menu Mails > Users, et attribuez la mailinglist voulue aux utilisateurs (Edit). Vous avez la possibilité d importer des listes de membres directement via un fichier csv (Mails > Import). Comme pour votre site, vous pouvez appliquer un Template à vos mails. Activez celui désiré grâce au menu Mails > Themes. Enfin, vous avez la possibilité de gérer des newsletters, envoyées aux personnes qui se seront préalablement abonnés. Pour cela, voici les étapes à faire : 1 Un lien vers le système Sympa, gestionnaire des mailinglists de l Inria est à votre disposition au niveau de votre dashboard. 21
- Vous devez d abord spécifier à quoi s abonne l utilisateur ; Pour cela allez à Settings > MailPress > subscriptions. Image 20 : Configuration des newsletters Dans l exemple ci-dessus, les utilisateurs auront le choix de s abonner aux newsletters journalière, hebdomadaire ou mensuel. Il ne sert à rien de cocher «per post» et «Comment» étant donné que vous ne gérez aucun des deux - Ensuite, il faut permettre aux visiteurs de votre site de s inscrire à la newsletter. Pour cela, activez le widget «MailPress» et de le configurer (si vous cochez «Manage your subscription" link?», un lien est crée avec le texte que vous spécifiez pour permettre aux personnes de gérer leur abonnement. Cette gestion est possible par défaut à l utilisateur au moment de sa confirmation d abonnement). 22
Image 21 : Formulaire d abonnement une newsletter Le visiteur qui s inscrit via ce formulaire recevra un mail de confirmation. A la confirmation, il devra sélectionner la/les newsletters auxquelles(s) il souhaite s abonner (Dans notre cas, la fréquence à laquelle il recevra la newsletter, fréquence que vous avez configurée précédemment). - Enfin, créez votre newsletter comme si vous envoyiez un mail, en sélectionnant les personnes abonnées à une newsletter donné via le menu déroulant suivant : Image 22 : Création d une newsletter 23
Gérer un calendrier collaboratif (Menu Events Calendar): Ce calendrier permet (contrairement au calendrier par défaut de WordPress) d insérer des événements (publics ou non) pour une date donnée. Image 23 : Calendrier (EventsCalendar) activé via le widget associé (Your Events Calendar) Créez tout simplement vos événement via un formulaire (accessible par le menu EventsCalendar > Add Event). Image 24 : Events Calendar Création d un événement 24
Les événements non publics sont visibles seulement par les rôles sélectionnés (administrateurs, éditeurs, etc.) et s ils sont connectés au back office au moins une fois (données enregistrées dans le navigateur via les cookies). Comme vu plus haut, un widget permet d afficher ce calendrier (Your events calendar). Vous pouvez également insérer ce calendrier au niveau d une page en insérant ce code dans la partie Visual lors de la rédaction de votre page : [[EventsCalendarLarge]]. Au niveau du back office, un calendrier résumé tous les événements crées. Image 25 : Events Calendar Calendrier du back office 25
Personnalisation du thème (menu Appareance > Custom CSS) : Comme vu plus haut, la charte graphique de votre site est gérée par un thème. Ce thème est composé d une feuille de style css (un thème peut contenir plusieurs feuilles de style, mais la majorité des informations se trouvent dans le fichier prinicpal). Si vous avez des connaissances en css, et que vous souhaitez apporter des modification au style- modifications que vous ne pouvez pas faire directement depuis l interface- alors le plugin Custom CSS vous permet de faire ces modifications. Image 26 : Modification de la feuille de style Ce plugin ne permet pas de modifier directement le fichier css en question (Vous pouvez l éditer via «Show Style Css»). Cette restriction garantit une indépendance des modifications faites par différents utilisateurs de différents sites utilisant le même thème, et assure la possibilité d effacer vos modifications et de retrouver le fichier css source en cas de besoin. En pratique, si vous faites des modifications (dans l exemple ci-dessus, la couleur de a été modifiée), le navigateur va dans un premier temps charger la feuille de style par défaut, puis la vôtre, ce qui permettra d afficher la couleur de fond noir et non plus blanche (css par dafaut). Pour annuler toutes vos modifications, effacer seulement le contenu de votre feuille de style. 26
Forum (menu Forum Server) : Pour intégrer un forum, écrivez le code suivant au niveau du code html d une page : <! VASTHTML-->. Puis via le menu Forum Server > Categories & Forums, créez d abord une catégorie puis un forum pour une catégorie donnée. Sélectionnez un Template pour l affichage vi le menu Forum Server > Skins. Image 27 : Affichage d un forum Vous pouvez restreindre l intervention de membres sur un forum donné en créant un user group. 27
Création de tableau (Menu Tools > Wp-table Reloaded) L éditeur de texte accessible lors de la création de pages permet de créer des tableaux simples. Pour des tableaux plus complexes, préférez l utilisation de cet outil. Lors de la création d un nouveau tableau (Add a New Table), vous devez renseigner un titre, une description (que vous choisirez de faire apparaître ou non par la suite au niveau de la page), le nombre de lignes et colonnes (modifiables à tout moment). Ensuite, vous devez remplir votre tableau et le configurer : Image 28 : Création d'un tableau avec WP Table reloaded Pour le contenu, tapez votre texte directement dans chaque cellule ; insertion de liens hypertextes et images sont possibles. 28
Image 29 : Gestion du contenu d'un tableau Attention, le code produit au sein de la cellule est du html, vous ne verrez donc pas directement votre image. Pour cela, enregistrez votre tableau, retourner à l interface où apparaît la liste de vos tableaux, et cliquez sur preview. Image 30 : Liste des tableaux crées avec WP Table Reloaded Pour insérer votre tableau dans une page, cliquez sur shortcode, copiez le code, et collez-le à l endroit où vous voulez afficher votre tableau. (Exemple de tableau ici : http://webconf.inrialpes.fr/fr/documentation/wp-tablereloaded-widget/) Pour la mise en forme du tableau, réglez les paramètres au niveau de l onglet «Table Settings» (en-dessous du contenu du tableau) et au niveau des options du plugin (List of Tables > Option Plugin). Vous pouvez également modifier la CSS (plus d infos ici : 29
http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/faq/). Une librairie Javascript (pour configuer toutes les options, laissez les librairies DataTables et Tables Tools activées) vous permet de configurer d autres aspects de votre tableau : - au niveau l onglet «Data Tables JavaScript Features» : classement ou non par l utilisateur de chaque colonne par ordre alphabétique du contenu, pagination du tableau, une fonction de recherche, autoriser la copie du tableau sous diffrents format, etc.) Image 31 : Configuration des options gérées par JS pour wp table reloaded 30
Langues du site (menu Settings > Language) Vous pouvez facilement activer/désactiver les langues de votre site via le tableau suivant. Image 32 : Gestion des langues du site 31
Partager le contenu du site vers des réseaux sociaux (menu Settings > AddThis) De plus en plus, la possibilité d échanger une page d un site, un contenu d un site ou l adresse d un site est donnée aux visiteurs. Cela permet entre autres de mieux faire connaître votre site. Pour cela, de plus en plus de réseaux sociaux sont mis à disposition (facebook, twitter, linkedin, etc.). Cette fonctionnalité doit se faire rapidement par l utilisateur. Vous pouvez configurer un bouton de type «AddThis», à insérer au niveau de vos pages (l icône se placera à la fin de votre page, à gauche), ou au niveau d une de votre sidebar (widget «AddThis widget», aucune configuration requise). Plusieurs options de configuration s offrent à vous : - le type de menu où apparaissent les différents icônes des réseaux sélectionnés. Par exemple : Image 33 : Exemple d'affichage de la fenêtre de partage La 1 ère image montre la vue «static» qui fait apparaître toutes les icônes de tous les services disponibles, lorsque l utilisateur clique sur le «plus». La 2 ème image montre la mise en forme de la fenêtre en mode «dropdown» qui apparaît au survol du «plus». - le type de l icône «AddThis» : Par exemple : 32
Image 34 : Exemple d'affichage de l'icône "AddThis" - l endroit où afficher cette icône : au niveau des pages, de la sidebar. - les services de partage à activer : Par défaut, le plugin vous permet de partager avec plus de 200 services. Pour sélectionner une partie de ces derniers qui s afficheront au survol de l icône (tous les autres services restent accessibles en cliquant sur cette même icône), mentionnez-les au niveau du champ «Dropdown/Toolbox Services», en les séparant par une virgule (attention, si vous sélectionnez le menu «static», cette fonctionnalité ne marche pas). Pour avoir la liste exhaustive des services : http://addthis.com/services/all. Pour la liste des codes : http://www.addthis.com/services/list N.B. : Des outils sont également disponibles avec ce plugin : le PrintFriendly (code printfriendly), le simple Print (code print), la création de pdf (code pdfonline) ou encore l envoi par mail (code email). - l ajout de texte (et sa couleur) dans l en-tête de la fenêtre d affichage des services sélectionnés. 33
Statistiques du site Un outil de statistiques de connexion vient d'être mise en place pour l'ensemble des sites déployés via WebConfTool, ouvert sur le net en utilisant awstats (un package fourni par l'équipe système des MI). Ces statistiques sont accessibles via une URL de la forme suivante: http://nomconf.inrialpes.fr/awstats/awstats.pl?config=nomconf Par exemple: http://webconf.inrialpes.fr/awstats/awstats.pl?config=webconf Attention, cette url n'est pas accessible depuis le réseau externe. Les données sont mises à jour tous les jours à minuit. Image 35 : Affichage des statistiques de webconf.inrialpes.fr 34
Gestion des inscriptions Si vous devez gérer des inscriptions pour votre événement scientifique (gratuites ou non), vous devez contacter la cellule cours/colloque qui gère cela avec un logiciel dédié (Gipco): Daniele[point]Herzog[at]inrialpes[point]fr. Une fois les démarches effectuées, vous n'aurez qu'à insérer un lien hypertexte pour que les participants puissent s'inscrire via une interface web. 35
Liste des tableaux, figures et images FIGURE 1 : ARBORESCENCE D UN SITE WEB...3 FIGURE 2 : STRUCTURE D'UNE PAGE WEB...7 IMAGE 1 : LE BACK OFFICE...6 IMAGE 2 : CRÉATION D UNE PAGE...8 IMAGE 3 : 2DITEUR DE TEXTE...9 IMAGE 4 : ÉDITEUR WYSIWYG...9 IMAGE 5 : BOUTONS DE L ÉDITEUR DE TEXTE...9 IMAGE 6 : INSERTION D UN MÉDIA DANS UNE PAGE...9 IMAGE 7 : INSÉRER UNE IMAGE...10 IMAGE 8 : MODIFICATION D UNE IMAGE INSÉRÉE...10 IMAGE 9 : MODIFICATION DES PROPRIÉTÉS D'UNE IMAGE...11 IMAGE 10 : LISTE DES MÉDIAS D UN SITE...11 IMAGE 11 : INSERTION D UNE CARTE...12 IMAGE 12 : STRUCTURATION DU SITE PAGES ET SOUS-PAGES...13 IMAGE 13 : LISTE DES THÈMES DISPONIBLES...14 IMAGE 14 : GESTION DES WIDGETS...15 IMAGE 15 : ACTIVATION D UN WIDGET...16 IMAGE 16 : GESTION DES RÔLES...19 IMAGE 17 : CRÉATION D UN NOUVEL UTILISATEUR...20 IMAGE 18 : LISTE DES UTILISATEURS...20 IMAGE 19 : CRÉATION D UN MAIL...21 IMAGE 20 : CONFIGURATION DES NEWSLETTERS...22 IMAGE 21 : FORMULAIRE D ABONNEMENT UNE NEWSLETTER...23 IMAGE 22 : CRÉATION D UNE NEWSLETTER...23 IMAGE 23 : CALENDRIER (EVENTSCALENDAR) ACTIVÉ VIA LE WIDGET ASSOCIÉ (YOUR EVENTS CALENDAR)...24 IMAGE 24 : EVENTS CALENDAR CRÉATION D UN ÉVÉNEMENT...24 IMAGE 25 : EVENTS CALENDAR CALENDRIER DU BACK OFFICE...25 IMAGE 26 : MODIFICATION DE LA FEUILLE DE STYLE...26 IMAGE 27 : AFFICHAGE D UN FORUM...27 IMAGE 28 : CRÉATION D'UN TABLEAU AVEC WP-TABLE RELOADED...28 IMAGE 29 : GESTION DU CONTENU D'UN TABLEAU...29 IMAGE 30 : LISTE DES TABLEAUX CRÉES AVEC WP-TABLE RELOADED...29 IMAGE 31 : CONFIGURATION DES OPTIONS GÉRÉES PAR JS POUR WP-TABLE RELOADED...30 IMAGE 32 : GESTION DES LANGUES DU SITE...31 IMAGE 33 : EXEMPLE D'AFFICHAGE DE LA FENÊTRE DE PARTAGE...32 IMAGE 34 : EXEMPLE D'AFFICHAGE DE L'ICÔNE "ADDTHIS"...33 IMAGE 35 : AFFICHAGE DES STATISTIQUES DE WEBCONF.INRIALPES.FR...34 TABLEAU 1 : RÔLES DES UTILISATEURS...18 36