MODX - ETAPE 1 PERSONNALISER

MODX - ETAPE 1 PERSONNALISER Introduction 1. Créer 2. Organiser 3. Personnaliser

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://student.unifr.ch/nomdevotresite/login.php 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 Vous pouvez gérer simplement les utilisateurs ayant accès au CMS à l adresse http://www.unifr.ch/weboffice/gestcms ROLES Trois rôles sont disponibles : Administrateur : Il peut éditer des variables, des chunks et des Snippets, il peut également définir de nouveaux utilisateurs GROUPES D UTILISATEURS Lier des groupes aux groupes de documents CMS - 7.6.2011 unifr.ch/weboffice 2 / 24

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 (selon les norme i18n). (2) Page d accueil dans les trois langues (3) Page d accueil pour une version monolingue CMS - 7.6.2011 unifr.ch/weboffice 3 / 24

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 - 7.6.2011 unifr.ch/weboffice 4 / 24

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. Il n est pas nécessaire. 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 - 7.6.2011 unifr.ch/weboffice 5 / 24

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 - 7.6.2011 unifr.ch/weboffice 6 / 24

Des adaptations sont possibles de deux manières : - en les demandant au weboffice : webmaster@unifr.ch - en ajoutant vos modifications dans le fichier CSS disponible appelé custom.css via Manage Files puis sous le dossier files 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 - 7.6.2011 unifr.ch/weboffice 7 / 24

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 - 7.6.2011 unifr.ch/weboffice 8 / 24

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 - 7.6.2011 unifr.ch/weboffice 9 / 24

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 - 7.6.2011 unifr.ch/weboffice 10 / 24

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 - 7.6.2011 unifr.ch/weboffice 11 / 24

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 - 7.6.2011 unifr.ch/weboffice 12 / 24

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 - 7.6.2011 unifr.ch/weboffice 13 / 24

PARAMETRES DANS UNE PAGE Chaque page possède différents paramètres disponibles ne 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 (700 x 120 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 - 7.6.2011 unifr.ch/weboffice 14 / 24

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 - 7.6.2011 unifr.ch/weboffice 15 / 24

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 mixe 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 - 7.6.2011 unifr.ch/weboffice 16 / 24

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 - 7.6.2011 unifr.ch/weboffice 17 / 24

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 - 7.6.2011 unifr.ch/weboffice 18 / 24

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 - 7.6.2011 unifr.ch/weboffice 19 / 24

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 mixe des trois. CMS - 7.6.2011 unifr.ch/weboffice 20 / 24

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. CMS - 7.6.2011 unifr.ch/weboffice 21 / 24

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 - 7.6.2011 unifr.ch/weboffice 22 / 24

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 - 7.6.2011 unifr.ch/weboffice 23 / 24

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 - 7.6.2011 unifr.ch/weboffice 24 / 24