MODX 1.0.10 NOUVEAUTES DEPUIS LA VERSION 0.96 Gérer les utilisateurs Paramétrer le site Modèles disponibles Paramètres d une page Activer le module de news Aller plus loin : javascript, snippets, chunks Code sources des modèles
CONNEXION ET UTILISATEURS Lorsque vous recevez un accès au CMS, ce dernier contient quelques pages par défaut et un nombre de paramètre à personnaliser en fonction de votre unité. La première partie vous permettra d exploiter pleinement les fonctionnalités avec des connaissances basiques. La seconde partie vous permettra de paramétrer plus précisément certains détails. Notez toutefois que ce qui est important demeure le contenu et la façon de l organiser qui facilitera la lecture de vos internautes. CONNEXION Lancez un navigateur web récent tel que Safari, Internet Explorer ou Firefox. Rendez-vous à l adresse http://www.unifr.ch/nomdevotresite/login.php ou http://www-test.unifr.ch/nomdevotresite/login.php si votre site est encore sur le serveur de test. Par exemple, si votre site s appel xyz: Puis authentifiez-vous à l aide de votre compte @unifr Pour accéder au CMS en mode administrateur, vous devez avoir un compte @unifr.ch, un eaccount. Une information complémentaire à cet effet figure à http://www.unifr.ch/eaccount GESTION DES UTILISATEURS ROLES Nous recommandons par défaut le rôle d'editeur pour la plupart des personnes devant modifier le site web de votre unité. Rôles disponibles: 1. Editor: il peut éditer le contenu recommandé pour des rédacteurs ponctuels ou pour les personnes appelés à modifier qu'une partie restreinte du site 2. Publisher: il reprend le même rôle que l auteur et peut créer des chunks et modifier les paramètres du site recommandé pour les personnes destinées à introduire globalement du contenu c'est le rôle que nous préconisons par défaut CMS - 28.5.2013 unifr.ch/weboffice 2 / 28
3. Developer: idem que éditeur, il peut créer des templates, créer des snippets et des plugins ce rôle est réserveé aux développeurs chargés d'ajouter des fonctionnalités à votre CMS. à utiliser avec précaution. 4. Administrator UNIFR: idem que developer mais avec possibilité de gérer les utilisateurs nous recommandons d'en faire un usage limité à quelques utilisateurs ayant suivi le cours et connaissant bien le CMS modx CREER UN UTILISATEUR 1. Choisir l'onglet Security 2. Puis cliquez sur Manager Users 3. Et enfin sur New User 1. Dans username, inscrivez l'adresse email @unifr en minuscules de l'utilisateur 2. Laissez modx proposer un mot de passe. Ce dernier ne sera pas utilisé, car l'utilisateur s'authentifiera avec son compte de l'université, mais il est généré tout de même. 3. Attribuez un rôle à cet utilisateur, de préférence le rôle d'éditeur CMS - 28.5.2013 unifr.ch/weboffice 3 / 28
La confirmation suivante apparaît. ATTENTION: le mot de passe généré ne servira pas à l'utilisateur. Seul le mot de passe du eaccount sera utilisé. GROUPES D UTILISATEURS Vous pouvez créer des groupes d utilisateurs qui pourront avoir un accès limité à un groupe de ressources. ATTENTION, ce type de gestion est plus lourd car il nécessite de fixer les autorisations pour chaque document. Il ne faut l utiliser que dans des cas précis. Dans la plupart des situations, ce sera la confiance dans les gestionnaires des contenus qui sera à mettre en avant plutôt qu une gestion des droits d accès rigoureux. Pour gérer des accès différenciés, vous devez, dans l interface d administration, aller dans l'onglet Security puis choisir Manager Permissions et: Créer un ou plusieurs groupes d utilisateurs Créer un ou plusieurs groupes de ressources CMS - 28.5.2013 unifr.ch/weboffice 4 / 28
Lier un ou plusieurs groupes d utilisateurs à un ou plusieurs groupes de ressources Dans cette même interface liez les utilisateurs à un groupe d utilisateurs CMS - 28.5.2013 unifr.ch/weboffice 5 / 28
A présent, il nous faut lier indiquer les autorisations d accès pour chaque document. Par défaut, l accès est donné à tous les utilisateurs. Pour activer une restriction, cochez simplement le/les groupes auquel appartient ce document, dans l onglet Access permissions lors de l édition d un document. CMS - 28.5.2013 unifr.ch/weboffice 6 / 28
PARAMETRER LE SITE DEFINIR LES LANGUES UTILISEES Nous allons régler les paramètres de langues. Le site est préparé pour une version - Monolingue - Bilingue : Fr+De ou Fr+En ou DE+En - Trilingue Fr+De+En Si vous planifiez à moyen terme une version bilingue, commencez directement le site en bilingue. Votre site contient les éléments suivants (1) Script de redirection des langues si vous utilisez une version multilangue. Ce script va délivrer au visiteur la page qui correspond à la langue de son navigateur. (2) Page d accueil dans les trois langues (3) Page d accueil pour une version monolingue CMS - 28.5.2013 unifr.ch/weboffice 7 / 28
ACTIVER VERSION BILINGUE OU TRILINGUE Pour activer une version bilingue ou trilingue, il vous suffit de modifier quelques paramètres. PAGE DE REDIRECTION Ouvrez la page Redirection langues et adaptez les paramètres suivants : - langdefault : langue par défaut qui doit être une des langues activées. Dans l exemple, le français. - langlist : liste des langues activées à choisir parmi fr, de, en ou en les combiant en les séparant par une virgule. Dans l exemple, le français et l allemand. SWITCH LANG Afin de basculer d une langue à l autre sans souci, un script effectue une translation de l URL. Pour paramétrer ce script, il suffit d éditer un chunk. Ce dernier se trouve dans Elements, Manage Elements puis dans l onglet Chunks. Allez dans la liste correspondant aux différentes langues activées et localisez un chunk appelé param_<langue>_navig, par exemple pour l allemand param_de_navig Dans le contenu procédez de même qu avec la page de redirection en ajustant le paramètre lg à votre choix. Ici nous avons activé le français et l allemand CMS - 28.5.2013 unifr.ch/weboffice 8 / 28
A présent il vous suffit de développer votre arborescence sous les pages d accueil des différentes langues choisies, chacune avec son style lié. ACTIVER VERSION MONOLINGUE La version monolingue est quelque peu différente. SI vous ne comptez pas utiliser les autres langues, vous pouvez les effacer ainsi que le script de redirection. Vous pouvez créer les pages de votre site au premier niveau de la hiérarchie. L acronyme des chunks y correspondant est MO pour monolingue. Par défaut nous utilisons une version bilingue. Donc les explications ciaprès sont à adapter si vous choisissez une version monolingue. Pour activer le site monolingue vous devez avoir le statut d administrateur. Allez dans l onglet Tools puis choisissez Configuration Indiquez ensuite comme ID de page d accueil, l identifiant correspondant à votre page, ici le numéro 5. Enregistrez les modifications. CMS - 28.5.2013 unifr.ch/weboffice 9 / 28
ACTIVER LA COULEUR DE LA FACULTE La couleur des facultés peut être activée très simplement. Des styles sont disponibles avec les couleurs des facultés par défaut. Les adaptations sont à effectuer dans le CMS sous style-fr.css, style-de.css ou style-en.css en fonction des langues. Il suffit d ajouter l import SOUS la ligne @import url(http://www.unifr.ch/css/common.110.css); Plusieurs versions sont disponibles et le numéro dépend de votre UO. Une liste complète est disponible sur http://blog.unifr.ch/cms Théologie : @import url(http://www.unifr.ch/css/spec.110.3000.css); écriture blanche @import url(http://www.unifr.ch/css/spec.110.3002.css); écriture noire Droit : @import url(http://www.unifr.ch/css/spec.110.4000.css); Lettres : @import url(http://www.unifr.ch/css/spec.110.5000.css); SES : @import url(http://www.unifr.ch/css/spec.110.6000.css); Sciences : @import url(http://www.unifr.ch/css/spec.110.7000.css); Les couleurs s activeront ensuite, comme par exemple ici pour la Faculté de droit en rouge. CMS - 28.5.2013 unifr.ch/weboffice 10 / 28
Des adaptations sont possibles de deux manières : - en les demandant au weboffice : webmaster@unifr.ch pour des modifications globales - en ajoutant vos modifications dans le fichier CSS disponible appelé custom.css via Manage Files puis sous le dossier files pour une personnalisation locale AJOUTS DE STYLES Vous pouvez ajouter quelques styles pour personnaliser différents éléments du contenu. Ces styles peuvent être ajoutés dans ce même fichier custom.css ou dans un autre fichier que vous pourrez déposer sur le serveur. CMS - 28.5.2013 unifr.ch/weboffice 11 / 28
PERSONNALISER LES EN-TETES ET PIEDS DE PAGE Les en-têtes et les pieds de pages doivent être personnalisés. Les en-têtes (1) contiennent le nom de votre institut ou département. Il doit être intégré dans ce format pour optimiser le placement naturel dans les moteurs de recherche. Le pied de page (2) permet de contacter directement le webmaster ou l institut. Ces éléments sont contenus dans des chunks. Pour y accéder, choisissez Elements > Manage Elements puis l onglet Chunks CMS - 28.5.2013 unifr.ch/weboffice 12 / 28
Les chunks sont divisés par groupes de langues, par exemple Unifr Parameter DE pour l allemand. Dans chaque langue, un chunk appelé param_<langue>_identity par exemple param_de_identity. Ouvrez ce chunk et activez l éditeur. Editez ensuite le contenu pour qu il corresponde à votre institut. Procédez de même dans chaque langue que vous aurez activée. CMS - 28.5.2013 unifr.ch/weboffice 13 / 28
Pour le pied de page, procédez de même avec le chunk appelé param_<langue>_signature, par exemple param_de_signature. Activez ensuite l éditeur de texte Modifiez le contenu A noter qu une adresse contact ou un email est nécessaire en fond de page. Par défaut nous pointons vers un formulaire de contact pour éviter le spam vers des adresses emails. CMS - 28.5.2013 unifr.ch/weboffice 14 / 28
FORMULAIRE DE CONTACT Afin d éviter de mettre une adresse email en contact dans le pied de page, un formulaire de contact simplifié a été introduit dans le CMS. Une page appelée Contact est disponible dans chacune des langues. Cette page n est pas visible dans les menus, pour cela, Show in menu n est pas coché. Un snippet appelé uf_simplecontact est paramétré pour afficher un formulaire simple de contact : - Le paramètre lg permet de choisir la langue - Le paramètre from sera l adresse affichée en from de la confirmation mais également celle de destination du message original, donc votre adresse. Remplacez echo@unifr.ch par votre adresse email. A présent nous pouvons voir ce qu affiche le formulaire. CMS - 28.5.2013 unifr.ch/weboffice 15 / 28
MODELES DISPONIBLES Trois modèles sont disponibles pour le site offrant une certaine souplesse dans l agencement du contenu. Le modèle uf_<langue>_tpl_a000 Prévu pour la page d accueil il permet de définir facilement les trois colonnes de la page d accueil Le modèle uf_<langue>_tpl_a001 Son contenu est composé de la barre de navigation à gauche et du contenu occupant tout l espace CMS - 28.5.2013 unifr.ch/weboffice 16 / 28
Le modèle uf_<langue>_tpl_a002 Ce modèle affiche la barre de navigation à gauche puis un contenu à deux colonnes Les modèles sont verrouillés pour permettre une mise à jour centralisée en cas de modification. Vous trouverez en annexe le code source de ces pages pour mieux comprendre sa structure. CMS - 28.5.2013 unifr.ch/weboffice 17 / 28
PARAMETRES DANS UNE PAGE Chaque page possède différents paramètres disponibles en fonction des modèles. Ces paramètres se trouvent en général après le corps du contenu, il sont appelés Template Variables. Ils sont appliqués à la page en cours d édition. Si vous appliquez un même paramètres à plusieurs pages, il est préférable d en faire un chunk pour vous simplifier la mise à jour. POUR LE MODELE UF_<LANGUE>_TPL_A001 (1) Top Picture : vous pouvez choisir d afficher une image en bandeau sous le menu principal (700x120 pixels), d afficher une petite image (700x60 pixels) ou de ne rien afficher. (2) Top Picture choice : vous pouvez choisir l image qui s affichera dans cette page ou en télécharger une nouvelle de votre ordinateur au serveur. Veillez à avoir une bonne taille (700x120 pixels). (3) Chemin d accès : vous pouvez afficher au sommet le breadcrumb pour se repérer facilement dans la structure. (4) Access Level : cette option vous permet de fixer les autorisations d accès à cette page. Actuellement trois modes sont proposés. Open ne restreint pas l accès à la page. Intranet la restreint en accès intranet uniquement. AAI force l authentification de l internaute via AAI. Cela peut se remarquer comme suit : CMS - 28.5.2013 unifr.ch/weboffice 18 / 28
Une deuxième série de paramètres est disponible comme suit : (5) Left Menu: vous pouvez afficher le menu à gauche fermé (standard) ou forcer le menu ouvert, ou encore choisir de personnaliser le menu à gauche avec des boîtes ou du code de votre choix. (6) Left menu personnalized: si vous avez chioisi de personnaliser le menu à gauche, introduisez le code HTML ou les chunks dans ce champ. (7) Header Param: ce paramètre est chargé dans le tag <head> de cette page. Pratique pour insérer un Javascript. Attention si vous désirez le mettre sur toutes les pages, utilisez plutôt le chunk prévu à cet effet. Le résultat : CMS - 28.5.2013 unifr.ch/weboffice 19 / 28
POUR LE MODELE UF_<LANGUE>_TPL_A002 Pour le modèle uf_<langue>_tpl_a002 sur deux colonnes, le paramètre Col. Right vous permet de fixer le contenu de la colonne de droite. Vous pouvez y insérer du code HTML, un chunk ou encore un snippet, voire même un mélange des trois. Le résultat : POUR LE MODELE UF_<LANGUE>_TPL_A000, PAGE D ACCUEIL La page d accueil a des paramètres plus particuliers. Plusieurs modèles de mise en page peuvent être basculés en un clic. Il s agit souvent des combinaison des Templates Variables HomeBlocA, HomeBlocB, HomeBlocC et HomeBlocD avec le contenu principal. Pour choisir le bon modèles, utilisez la Template Variable uf_fr_homecontent comme par exemple : CMS - 28.5.2013 unifr.ch/weboffice 20 / 28
MODELE UF_HPMODA A gauche la TV Home Bloc A avec au centre le contenu principal sur toute la largeur. MODELE UF_HPMODB Idem que le uf_hpmoda mais avec une deuxième colonne à droite correspondant à la TV Home Bloc B CMS - 28.5.2013 unifr.ch/weboffice 21 / 28
MODELE UF_HPMODC La colonne de gauche est occupée par la TV Home Bloc A, la partie supérieure par le contenu principal, puis juste en dessous trois colonnes correspondant respectivement aux TV Home Bloc B, Home Bloc C, Home Bloc D. CMS - 28.5.2013 unifr.ch/weboffice 22 / 28
ACTIVER LE MODULE DE NEWS Le module de news est pré-installé dans le CMS. Pour obtenir un accès au module de news de l Université, envoyez un message à webmaster@unifr.ch en précisant l adresse de votre CMS. Connectez-vous au module de news et cliquez sur Infos puis localisez la Secret Key. Copiez-la. Dans le CMS ; allez dans Elements puis dans Manage Elements et choisissez l onglet Chunks Localisez au fond, le chunk nommé param_newstoken Collez ensuite le code qui correspond à votre Secret Key Votre module de news est à présent connecté au CMS. Vous pouvez l appeler à l aide du snippet uf_news par exemple : [[uf_news? &lg=`fr` &action=`list` &tpl=`param_newslist` ]] Le snippet accepte les paramètres suivants : - lg langue qui peut être fr, de ou en - action list ou detail - cat SI vous voulez restreindre la liste à une catégorie particulière - size Le nombre de news maximales retournées en liste - tpl Template utilisé pour le résultat Template correspond à un chunk équipé de placeholders. CMS - 28.5.2013 unifr.ch/weboffice 23 / 28
Par exemple, on peut créer un chunk pour obtenir une liste qui affiche le titre suivi de la date entre crochets, en lien, et l accroche (summary) de la news à la suite: <li> <a href="++urldetail++">++title++ [++date++]</a> <span>++summary++</span> </li> Ceci permet de formater les news selon les désirs du concepteur en combinant CSS et chunks. A noter que si aucun template n est précisé, le système en défini un par défaut. Il est conseillé de faire des chunks réutilisables dans plusieurs endroits. Des exemples sont disponibles dans le CMS déployé, par exemple : {{example_news_fr_side}} <h2 class="bluetitle blueline">news</h2> <ul class="newslist"> [!uf_news? &lg=`fr` &action=`list` &tpl=`param_newslist`!] </ul> {{ TEST_newsHomepage_fr}} <h2 class="orangeline">events </h2> <ul class="arrowdg"> [[uf_news? &lg=`fr` &action=`list` &tpl=`param_newslist` ]] </ul> Vous pouvez y insérer du code HTML, un chunk ou encore un snippet, voire même un mélange des trois. CMS - 28.5.2013 unifr.ch/weboffice 24 / 28
ALLER PLUS LOIN JAVASCRIPT Vous pouvez ajouter des scripts : - dans une page particulière comme expliquée ci-avant dans la Template Variable appelée Header Param. - Pour toutes les pages, en introduisant ce script dans le chunk param_<langue>_header De même, le chunk param_<langue>_footer est chargé en dernier dans la page et peut contenir un Javascript par exemple. STYLES Vous pouvez ajouter des scripts dans un fichier externe appelé directement dans style-fr.css, style-de.css ou style-en.css. Un style existant peut être redéfini ou partiellement modifié en liant votre style en dernier dans ces fichiers. SNIPPETS ET CHUNKS Les administrateurs de votre site peuvent manipuler les chunks et les snippets. Mais que sont ces deux éléments? CHUNK Un chunk est un morceau de code HTML qui est appelé dans plusieurs endroit du site. On l écrit donc une seule fois pour le modifier ensuite à un seul endroit et on l appelle avec la syntaxe {{Nom_du_chunk}}. Il peut également combiner du code HTML et des appels à d autres chunks (inclusion) ou des snippets. SNIPPET Un snippet est un script PHP exécuté lors du chargement de la page. On peut éaglement lui passer des paramètres. Attention, un snippet requiert des connaissances en PHP. Il peut également bloquer complètement le chargement d un page s il est mal écrit. L appel a un snippet se fait via [[NomDuSnippet]] ou pour ne pas utiliser le cache [!NomDuSnippet!] CMS - 28.5.2013 unifr.ch/weboffice 25 / 28
ANNEXE 1 : CODE SOURCE DES MODELES UF_FR_TPL_A000 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- HEADER POUR LE MODELE --> {{param_fr_header}} <title>{{param_fr_title}}</title> <link rel="stylesheet" type="text/css" href="[(site_url)]style-fr.css" media="all" /> <base href="[(site_url)]"/> <!-- HEADER POUR LA PAGE --> [*uf_header*] </head> <body id="uf_fr_tpl_a000"> <div id="webpage"> <!-- start:identite --> {{uf_fr_identity}} <!-- end:identite --> <!-- start:navig --> {{uf_fr_navig}} <!-- end:navig --> <!-- start:main --> <div id="main-home"> [*#uf_homecontent*] <div id="signature"> {{param_fr_signature}} <!-- end:main --> <!-- end:webpage --> {{param_fr_footer}} </body> </html> CMS - 28.5.2013 unifr.ch/weboffice 26 / 28
UF_DE_TPL_A001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- HEADER POUR LE MODELE --> {{param_fr_header}} <title>{{param_fr_title}}</title> <link rel="stylesheet" type="text/css" href="[(site_url)]style-fr.css" media="all" /> <base href="[(site_url)]"/> <!-- HEADER POUR LA PAGE --> [*uf_header*] </head> <body id="uf_de_tpl_a001"> <div id="webpage"> <!-- start:identite --> {{uf_de_identity}} <!-- end:identite --> <!-- start:navig --> {{uf_de_navig}} <!-- end:navig --> <!-- start:main --> <div id="main"> <div id="menu"> [*#uf_menuleft*] <!-- breadcrumb --> [*breadcrumb*] <!-- banner if exist --> [*uf_toppicture*] <div id="content"> [*content*] <div id="signature"> {{param_de_signature}} <!-- end:main --> <!-- end:webpage --> {{param_de_footer}} </body> </html> CMS - 28.5.2013 unifr.ch/weboffice 27 / 28
UF_DE_TPL_A002 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- HEADER POUR LE MODELE --> {{param_fr_header}} <title>{{param_fr_title}}</title> <link rel="stylesheet" type="text/css" href="[(site_url)]style-fr.css" media="all" /> <base href="[(site_url)]"/> <!-- HEADER POUR LA PAGE --> [*uf_header*] </head> <body id="uf_de_tpl_a002"> <div id="webpage"> <!-- start:identite --> {{uf_de_identity}} <!-- end:identite --> <!-- start:navig --> {{uf_de_navig}} <!-- end:navig --> <!-- start:main --> <div id="main"> <div id="menu"> [*#uf_menuleft*] <!-- breadcrumb --> [*breadcrumb*] <!-- banner if exist --> [*uf_toppicture*] <div id="content"> <div id="content_col1"> [*content*] <div id="content_col2"> [*uf_de_colright*] <div id="signature"> {{param_de_signature}} <!-- end:main --> <!-- end:webpage --> {{param_de_footer}} </body> </html> CMS - 28.5.2013 unifr.ch/weboffice 28 / 28