introduction au cms modx - unifr.ch · 2008-06-24 · cms - 29.4.2008 unifr.ch/weboffice 7 / 20 1.4...

INTRODUCTION AU CMS MODX

Introduction 1. Créer

2. Organiser 3. Personnaliser

CMS - 29.4.2008 unifr.ch/weboffice 2 / 20

UNE PETITE INTRODUCTION…

QUEST-CE QU’UN CMS?

CMS est l’acronyme de Content Management System. C’est outil qui vous permet de gérer facilement un site web en n’utilisant qu’une interface web, c’est-à-dire un navigateur comme Safari, Internet Explorer ou Firefox. Plus besoin de Dreamweaver comme à l’époque, les modifications se font directement dans le CMS. Les menus sont gérés automatiquement par le CMS et les modèles de l’Université sont déjà déployés dans le CMS. Notons que le mode CMS n’est pas compatible avec une publication via Dreamweaver.

DEPLOIEMENT STANDARD PAR DEFAUT A L’UNIVERSITE DE FRIBOURG

Le CMS déployé à l’Université de Fribourg est ModX. Par défaut nous déployons un site de test avec

- une branche allemande et une branche française, - des modèles de l’Université prêts à l’emploi, - un paramétrage conforme pour l’Université, - les outils comme le module de news prêt à l’emploi (nécessite juste une paramétrisation)

Les menus sont gérés automatiquement par le CMS en fonction des détails que vous lui spécifiez, le contenu étant mis en page par vos soins.

SUPPORT ET AIDE

Toutes les Unités organisationnelles peuvent demander un accès au module à [email protected] En cas de problème, ou de modification d’utilisateur, vous pouvez utiliser l’adresse [email protected] ou consulter le site http://www.unifr.ch/weboffice


1. CREER

1.1 ACCEDER A LA ZONE D’ADMINISTRATION

L’accès au module d’administration se fait à l’adresse http://www.unifr.ch/VotreSite/manager Par exemple, si l’adresse de mon site est http://www.unifr.ch/web-test alors j’accèderai au module via http://www.unifr.ch/web-test/manager La page principale contient plusieurs éléments

1. La barre de navigation avec ses onglets : elle permet d’accéder aux différentes fonctions du CMS 2. Les pages de votre site : elles sont présentées hiérarchiquement sous forme d’un arbre rappelant

l’apparence de l’explorateur Windows ou du Finder Mac. 3. La zone centrale vous donne accès aux fonctions particulières. Lors de la sélection d’une page,

l’édition se fait dans cette zone.

1.2 STRUCTURE DU SITE

Les pages de votre site sont représentées hiérarchiquement dans le volet de gauche. La structure du site se dégage clairement et les pages peuvent facilement être manipulées : ajoutées, effacées, modifiées, déplacées, ordonnées. Le volet peut être masqué/affiché en cliquant sur l’icône suivante : Les et permettent de déployer ou replier les sous-entrées.


1.3 CREER UNE PAGE

Deux types de pages existent : 1. Une page ayant un contenu réel 2. Une page étant un simple lien vers un autre site ou une autre page

1.3.1 PAGE REELLE

Pour ajouter une page réelle, cliquez sur le bouton d’ajout.

La zone centrale s’active et vous propose plusieurs sections 1. Document Settings Cette section vous permet :

- de spécifier un titre pour la page en cours (Title) - de lui attribuer un alias. Par alias on entend un nom qui figurera dans l’url. Par exemple toto pour

www.unifr.ch/VotreSite/toto (Document’s alias) - d’indiquer quel est le modèle à utiliser (User template) - de spécifier le libellé dans le menu (Menu title) - de déterminer l’ordre d’apparition dans le menu (Menu Index)

L’option Document parent vous permet de fixer à quelle branche sera rattachée cette page.


Pour modifier cette information, cliquez sur le petit dossier et choisissez dans le volet de gauche la branche à laquelle rattacher le document. 2. Document content Cette zone est la partie principale du document. Elle recouvre tout le contenu principal de la page.

Un éditeur WYSIWYG vous est proposé. Il vous permet de saisir et de formater du texte comme dans Word. Pour éviter des soucis, nous vous recommandons de ne coller que tu texte pur et de formater ce dernier dans l’éditeur. Vous pouvez également désactiver l’éditeur en choisissant None ou Aucun dans Editor to use. 3. Template Variables Des variables peuvent être attachées aux modèles. Ces dernières contiennent une valeur par défaut qui peut être modifiée page par page si nécessaire. Exemple : une adresse apparaît au fon de chaque page. Dans la page de contact regroupant les coordonnées, il n’est pas nécessaire de répéter cette information au fond de la page. Cette variable sera ainsi modifiée pour ladite page.


4. Access permissions Cette section permet de fixer les autorisations de modification.

Validez ensuite le tout en enregistrant les modifications.

1.3.2 CREER UNE PAGE DE LIEN

Le bouton suivant vous permet de créer une page-lien. En choisissant cette dernière, ce ne sera pas du contenu qui sera affiché mais l’internaute sera redirigé vers une tierce page, externe ou interne.

Les champs et les options disponibles sont similaires à une page réelle, à quelques différences près. En lieu et place du contenu, une option vous permet de définir une URL externe de type http://www.NomDuSite. Pour définir un lien vers une page interne, cliquez simplement sur le petit dossier et choisissez la cible dans le volet de gauche regroupant les pages.

N’oubliez pas de valider le tout en cliquant sur Save


1.4 EDITER UNE PAGE

Pour éditeur une page, il vous suffit de la révéler dans l’arbre des pages, puis deux solution se proposent à vous : 1. la plus simple Un clic-droite de la souris sur le nom du fichier fait apparaître un menu contextuel. Dans ce dernier, l’option Edit document vous permet d’accéder au mode d’édition du document.

2. la plus standard Cliquez sur le nom du document. Dans la zone principale, choisissez le bouton Edit. Le mode d’édition est à présent activé.

En entrant dans le mode d’édition, vous retrouvez les options disponibles lors de la création de la page.

1.5 PARAMETRES D’UNE PAGE

Différnts paramètres sont disponibles pour la page ainsi créée.


L’onglet Page Settings vous permet d’accéder à ces options.

Le petit point d’interrogation vous donne accès à l’aide direct conernant le point sélectionné. Vous pouvez notamment fixer

- Les dates de publication : si une information doit être publiée durant une période donnée, vous pouvez fixer sa date de publication en remplissant les champs Publish date et Un-publish date.

- Le type du contenu : les styles CSS ou les Javascript ne se présenteront pas de même manière que tu

code HTML. Cette fonction va de pair avec Rich text. CSS et JavaScript ne requièrent pas l’éditeur WYSIWYG.

- La mise en cache du document : si votre document contient des éléments dynamiques, décochez

l’option Cacheable.

- L’enregistrement (log) des visites : vous pouvez enregistrer la visite des pages pour obtenir des statistiques avec l’option Log visits (stats).

1.6 INSERER UN LIEN

En mode d’édition, pour insérer un lien externe sur un mot, il suffit de sélectionner le mot. Cliquez ensuite sur le bouton de lien disponible dans la barre d’outil de votre éditeur.


Une nouvelle fenêtre apparaîtra. ATTENTION : si vous avez bloqué les popup dans votre navigateur, veuillez autoriser ceux qui proviennent de www.unifr.ch

Link Url vous permet de spécifier le lien comme par exemple http://www.unifr.ch/scm/test.html ou /scm/testl.html Pour ouvrir le lien dans une nouvelle fenêtre, choisissez dans le menu Target, l’option _blank Un lien vers un document interne peut simplement être effectué en respectant la syntaxe suivante : [~ID_DU_DOCUMENT~] par exemple pour le document A notre sujet (ID=9) : [~9~]

Ce qui donne

Pour supprimer un lien, sélectionnez simplement le lien créé et cliquez sur la chaîne brisée qui supprimera le lien automatiquement.


1.7 INSERER UNE IMAGE

Avant d’insérer une image dans le CMS, vous devez la traiter à l’aide d’un logiciel comme Photoshop ou tout autre logiciel graphique. Les formats supportés sont le JPEG (convient bien pour les photos), le GIF (pour les aplats et les logos), le PNG (autre). La taille doit être également adaptée au web, à savoir 72 DPI et une largeur/hauteur déjà correcte. Les modèles de l’université supporteront des tailles au maximum de 580 pixels de large, suivant le modèle choisi. Dans l’éditeur de page, positionnez votre curseur à l’endroit où vous désirez introduire une image, puis choisissez la petite icône en forme d’arbre.

Une nouvelle fenêtre s’ouvre.

Vous pouvez indiquez l’adresse d’une image externe existante ou alors déposer votre propre image sur le serveur. Cliquez sur l’icône de chargement.

Une nouvelle fenêtre s’ouvre vous proposant de naviguer dans le dossier image.


Vous pouvez créer un sous dossier pour y organiser vos images, choisir une image existante ou alors simplement charger une nouvelle image sur le serveur.

Pour charger une nouvelle image, préparez votre image dans la bonne taille et à la bonne résolution sur votre ordinateur, puis choisissez browse pour parcourir le contenu de votre machine.

Choisissez l’image puis cliquez sur Open

Débutez le transfert en cliquant sur Upload. IMPORTANT : le nom du fichier/image téléchargé ne doit comporter aucun accent, espace ou caractère interdit sur le web. Il doit aussi contenir l’extension style .jpg ou .gif


Votre image apparaît à présent dans la liste des images disponibles sur votre site. Choisissez l’image désirée.

Vous vous retrouvez ainsi dans la précédente fenêtre.

L’onglet Appearence vous permet de fixer quelques paramètres comme ici l’alignement : l’image sera alignée à droite, le texte s’enroulant à sa droite comme l’illustre le petit dessin à côté du menu. De même, vous pouvez fixer la présence d’une bordure ou des espacements autour de l’image. Validez ensuite l’opération en cliquant sur le bouton Insert.


2. ORGANISER A présent, vous savze créer et modifier des pages. Vous pouvez les agencer en les organisant en menu et sous-menu, autrement dit en créant une structure. Cette dernière est disponible dans le volet de gauche.

2.1 DEPLACER UNE PAGE

Si nous désirons à présent déplacer la page Horaire dans le répertoire A notre sujet, cliquez simplement sur le document Horaire.

Dans la zone centrale, le bouton Move vous permet de déplacer votre page.

Une invite apparaît. Choisissez dans la structure sur la gauche le document parent. Dans notre cas, il s’agit de A notre sujet.

Le nouveau parent est à présent signalé. Validez ensuite en cliquant sur Save.


Horaire a été déplacé dans la branche A notre sujet.

2.2 MODIFIER L’ORDRE DES ELEMENTS D’UN MENU

Pour modifier l’ordre d’apparition des termes dans les menus, il vous suffit d’utiliser une valeur d’index.

Cette information se trouve en mode édition, dans le détail d’une page. Prenons par exemple notre menu. Nous désirons inverser l’ordre de Publications et de La recherche. Editez La recherche. La valeur du champ Menu Index est 1. Cela signifie que La recherche viendra en second, le premier élément ayant la valeur 0, le second la valeur 1, le troisième la valeur 2 etc…

Modifions cette valeur et indiquons 2


Procédons de même avec la page Publications et indiquons la valeur 1 pour inverser les deux éléments. A présent, nous pouvons constater que l’ordre dans le menu a été inversé.

Le système triera par ordre croissant, c’est-à-dire que vous pouvez déjà prévoir l’adjonction d’éléments supplémentaires en ayant une numérotation discursive comme 1 – 5 – 10 – 15

2.3 SUPPRIMER OU DUPLIQUER UNE PAGE

Vous pouvez supprimer ou dupliquer une page très simplement. Choisissez votre page en cliquant dessus dans la structure figurant dans le volet de gauche.

Le bouton Duplicate vous permet de dupliquer le document ET sa sous-structure, dans notre cas, ce sera le document test et sa sous-structure essai et test-level. Le bouton Delete vous permet de supprimer un document ET sa sous-structure. En cliquant sur Delete, vous pouvez constater que les documents sont à présent tracés en rouge dans la structure. Ils existent toujours, mais sont inaccessibles pour le visiteur.

Si vous cliquez sur la corbeille au sommet du volet de gauche, vos documents seront définitivement supprimés.


Si vous désirez récupérer des éléments tracés en rouge, cliquez-droite dessus le nom.

Le menu contextuel vous propose une option appelée Undelete document En choisissant cette dernière, votre document sera à nouveau publié et disponible.

3. PERSONNALISER

CHANGER LA LANGUE DE L’INTERFACE

Chaque utilisateur enregistré peut changer la langue de l’interface de gestion. Pour cela, allez dans l’onglet Security ou Utilisateurs et de choisir Manager Users ou Gestion utilisateurs Sélectionnez ensuite l’utilisateur à éditer


Dans l’onglet User ou Réglages utilisateurs, choisissez la langue qui vous convient et validez en cliquant sur le bouton d’enregistrement

Vous serez déconnecté du système et les changements entreront en vigueur à la prochaine connexion.

MODIFIER LES MODELES

ATTENTION : cette option n’est réservée qu’aux utilisateurs avancés qui maîtrisent le HTML et les autres ressources web. Une copie de secours est fortement recommandée avant toute opération. Tous les modèles de l’Université sont accessibles depuis l’onglet Resources dans l’option Manage Resources.


Les modèles de ModX sont consituté de code HTML et de variables. La documentation relative aux variables figurent sur le site www.modxcms.com

ADAPTER LE CONTENU DE VARIABLES

Plusieurs variables sont reprises dans le site. Par exemple la signature au fond, ou alors l’intitulé de l’institut au sommet.

Toutes ces variables sont disponibles dans l’onglet Resources, option Manage Resources puis dans l’onglet Templates Variables.


Les plus usitées sont

- uf_signature_Fr et uf_signature_De : signature au fond de la page - uf_identity_Fr et uf_identity_De : nom de l’institut au sommet à gauche - uf_naviglet_Fr et uf_navigleft_De : outil et choix des langues dans le menu de navigation principale en

haut à gauche Ces variables sont des portions de code HTML. Les connaisseurs peuvent l’éditer en ligne, pour les autres, un simple copier-coller dans un éditeur WYSIWYG leur permettra d’effectuer les modifications nécessaires (A).

La section Template Access détermine à quel modèle cette variable sera liée, une variable pouvont être liée à plusieurs modèles (B).


PARAMETRER LE SITE

Vous pouvez fixer quelques paramètres concernant l’entier du site depuis l’onglet Tools, option Configuration. Pour connaître les effets exact de chaque paramètre, veuillez vous référer à la documentation de modX à www.modxcms.com Citons quelques éléments comme par exemple :

- le nom du site (A) peut être modifié. Ce nom apparaît au sommet de chaque page. - vous pouvez spécifier une autre page comme page d’accueil du site (B). Par défaut, l’Université

propose une page de redirection qui redirigera votre utilisateur sur la version française ou la version allemande en fonction de la langue de son navigateur.

- vous pouvez également personnaliser la page d’erreur par défaut (C).

AUTRES ELEMENTS

Le blog www.unifr.ch/weboffice/blog vous informera de tout changement ou nouveauté

introduction au cms modx - unifr.ch · 2008-06-24 · cms - 29.4.2008 unifr.ch/weboffice 7 / 20 1.4...

Documents