General Training Curriculum

Transcription

1 General Training Curriculum

2 Table of Contents 1.0 Getting Started 1.1 What is MODX? 1.2 Browser Support 1.3 How Do I Log In? 2.0 MODX Dashboard 2.1 What is a Dashboard? 2.2 Global Top Menu Bar MODX Logo Search Content Media Extras 2.3 Publisher Dashboard Manager Quick Start Site-specific Instructions Recently Edited Resources Who s Online 3.0 Resources & Files 3.1 Resources 3.2 Files 4.0 Media Files 4.1 Allowed File Types 4.2 Max File Size 4.3 Edit Photo(s) 4.4 Manage File(s) 4.5 Upload File(s) 4.6 Delete File(s) 5.0 Page/Resource Types 5.1 Resources Types How to Create a New Document

3 5.1.1 How to Create a Weblink How to Create a New Static Resource 5.2 Nested Page(s) What is a Nested Page or Child Page How to Create a Container (Parent) How to a Add Nested Page to a Container 5.3 How to Duplicate an Existing Page 5.4 How to Delete a Page 5.5 How to Recover a Deleted Page 5.6 How to PERMANENTLY Delete a Page 5.7 Page Reorder 5.8 Resource ID # 5.9 Breadcrumbs 5.10 Breadcrumbs and Nested (Child Pages) 6.0 Page Properties (Document, Settings, Template Variables) 6.1 Document Tab Title (required) Long Title Uses Template (required) Resource Alias (required) Description Menu Title Hide From Menus Published Content 6.2 Settings Tab 6.3 Template Variables Tab 7.0 Templates 7.1 What are Templates? 7.2 Homepage Template 7.3 Subpage Template 8.0 How to Format Page Content using a Rich-Text Editor 8.1 Rich-Text Editor Toolbar

4 8.2 Copying and Pasting Content 8.3 Headings and Paragraph 8.4 Additional Content Formatting 8.5 Lists 8.6 Blockquote 8.7 Links Link to a Page within Your Site Link to a URL Link to a File Link to an Link to a Phone Number Create and Link to an In-Page Anchor 8.8 Images Add an Image A Linked Image 8.9 YouTube Videos 8.10 IFrame 8.11 Tables 8.12 Horizontal Rule 8.13 Additional Buttons (Special Characters, Show Blocks, Preview, Print) 9.0 How to Secure Files and Pages 9.1 PennKey Protect a Page 9.2 PennKey Protect a File 10.0 Version Control 11.0 MODX Helpful Tips

5 1.0 Getting Started 1.1 What is MODX? MODX is a web-based Content Management System or CMS that allows you to manage the content of your site. 1.2 Browser Support All our sites are designed to work in Penn s current supported computing products. For the full list of supported products, go to How Do I Log In? If your site is in development, which means the site is not live, you will access the log in page by going to: *remember to replace SITENAME with your account name If your site is live and in production, you can access the log in page by going to: *remember to replace SITENAME with your account name You will get the Pennkey log in page to access your site. Enter your credentials (pennkey and password) and click continue with PennKey to proceed to the manager dashboard. 2.0 MODX Dashboard 2.1 What is a Dashboard? The Dashboard is a user interface that organizes and presents information in a way that is easy to read. The dashboard includes the Manager Quickstart, Custom Instructions, Recently Edited Resources and Who s Online. 2.2 Global Top Menu Bar The menu bar that runs the width of the top of your window is global to each page in your ModX manager view. Global means that it is consistent throughout the site MODX Logo The MODX logo is located at the top left of the menu. Click the logo to go to the dashboard Search Use the quick search by clicking the search icon to find resources within your site. Unfortunately, this search is not as robust as the google search engine but can be helpful in locating a resource (also known as a web page) Content The Content dropdown menu includes New Resource, Search, and Preview Site. New Resource (also known as a web page) will create a new document Search will take you to a more detailed search page Preview Site will open your site in a new tab

6 2.2.3 Media Under the Media drop-down, you can access the Media Browser. This will direct you to your file system where you can manage all your files: upload, download, delete, etc. Consider this your library Extras Under the Extras drop-down is Configuration which includes: Color Theme: Select a color theme for your Self-Serve site. Each of the 3 self-serve templates includes multiple themes to choose from. Google Analytics (optional): If you have a Google Analytics set up to track your site, add the Google Analytics Key and allow 24 hours for any tracking. If you are interested in signing up, get started here. Site Description: the description displays with your site title in Google search results. If you do not fill in anything, Google will just pull your first line of content,which in turn usually is a description or mission statement for your site. Site Keywords: keywords are words or phrases someone would search in a search engine to find websites. For example, if you are a Biology Lab you may want to type words like: Biology, Penn, Lab, Research. 2.3 Publisher Dashboard Manager Quick Start The Manager Quick Start menu includes resources, references and quick links to other applications. 1. MODX Help: submit a MODX help ticket which collects all information needed to best troubleshoot the issue and track all activity regarding the issue. Helpful tips before submitting a ticket: check General Instructions, Custom Instructions, refreshing your page, saving your work, and making sure you are using a supported brower before submitting a ticket. 2. General Instructions: a summary the MODX General training 3. Typography Tips: quick link to tips on how to organize and emphasize content 4. Edit Photos: use Pixlr to crop your photos before uploading and adding to your content 5. Google Analytics: sign into your Google Analytics account 6. PSOM Calendar, Machform, and RSS Generator: additional feature(s), request for account if interested 7. MODX Glossary: list of MODX terminology Site-specific Instructions Any site-specific instructions that is not included in the MODX General training will be explained here Recently Edited Resources This is a list of the last resources (web pages) that you edited Who s Online This will list who is currently logged into the manager of your site. When a publisher is editing a page, it will lock the page so there would be no overlap on edits to a page.

7 3.0 Resources & Files On the lefthand side, there is a box with tabs for Resources and Files. This tab gives you quick access to all the pages and files within your site. 3.1 Resources The Resources tab lists all the resources on your site. You can quick create a new resource (document, weblink, static resource) and permanently delete using the icons located directly under the Resources tab. In the Resource tree, you can see the following about each resource: an auto-generated unique identifying number (ID#) a resource that is greyed out is hidden from the navigation menu a resource that is italicized is not published a resource that is red and has a strikethrough is ready to be permanently deleted 3.2 Files The File tab allows you to view the file system on your site. Any file that is within secure will be Pennkey protected and will require the viewer to log in with their PennKey credentials. You can quick upload, rename, or delete files directly in the Files tab or manage your files in the Media Browser located under Media in the top menu bar. Note: All files need to be uploaded into one of the directories set up 4.0 Media Files 4.1 Allowed File Types Allowed document types are:.doc,.docx,.ppt,.pptx,.pdf,.rtf,.txt,.xls,.xlsx Allowed image types are:.jpg,.jpeg,.png,.gif,.svg Recommended document format is a PDF file so that the user cannot make any edits or copy the information. 4.2 Max File Size You may not exceed 5 MB s. The larger the file size, the longer it takes to load on your webpage. 4.3 Edit Photo(s) In the dashboard, click Edit Photos in the Manager Quickstart. Please be sure to crop ALL photos (especially the banner photos) before uploading them so you have a cohesive organization of images. Banner photos need to be cropped to the specified dimensions included in the Site-specific Instructions and help text when uploading a new banner photo. 4.4 Manage File(s) Go to Media Browser located under Media in the top menu bar to manage by uploading, renaming, deleting your files. Make sure all images are cropped to the right dimensions before uploading and included in the appropriate directory: documents, images and secure (PennKey-protected)

8 Note: If files are not in a directory, you may experience issues when linking to your file from your webpage. 4.5 Upload File(s) Go to the Media Browser. To upload file(s): click the quick button (up-arrow in a circle) at the top lefthand corner OR contextual click (right-click) on the directory you want to upload your file to. drag and drop your document(s) into the window from the location where your files have been saved on your computer OR click Choose a File and select your file(s) to upload. - a pop-up window will appear in the middle of your screen. Make sure the Top Title Bar includes the directory name in the path: Upload destination: directoryname/. - selected files will display as a list in the window. click Upload. When upload is successful, a green message Upload Successful! will appear next to each uploaded file. Note: Make sure to name your files with no spaces, use dashes intead, lowercase, and keep it relatively short 4.6 Delete File(s) Go to the Media Browser. Locate the file and contextual click (right-click or Ctrl + Click) on file. Click Delete File in the menu. A warning pop-up window will appear, continue by clicking YES. If you still see the file, refresh your page. Note: Once you delete a file, it is permanently gone from your file system. 5.0 Page/Resource Types 5.1 Resources Types There are 3 types of Resources you can create on your site. Document (basic webpage) Weblink (link to an external website) Static resource (links to a PDF file) These resource types are specific to the navigation. For example, you would only use a static resource to add a PDF as a navigation item How to Create a New Document Click on the first icon (paper icon) to create a new document. By default MODX will Uses Template as a Subpage template. This is the type of Resource that you will use the most. The required fields are explained under Page Properties How to Create a Weblink Click on the second icon (link icon) to create a new weblink. The required fields are: Title Uses Template: needs to be set to (empty) Resource Alias Weblink: copy and paste the URL of the desired linked website.

9 Published: box should be checked to see weblink in navigation Click Save How to Create a New Static Resource Click on the last icon (file icon) for a Static Resource. The required fields are: Title Uses Template: needs to be set to (empty) Resource Alias Static Resource: click on file icon (far right of the textfield) to navigate your file system and select your PDF file Published: box should be checked to see weblink in navigation Once you have selected your static resource, click on the Settings Tab and click the Content Type dropdown to select PDF. Click Save. 5.2 Nested Page(s) What is a Nested Page or Child Page A navigation includes the main navigation and can be organized with a nested submenu. Since the submenu items belong to a top level navigation item, these pages are called nested or child pages. The containers (or parents) of these nested pages are not pages themselves, but categories that hold the nested pages How to Create a Container (Parent) Create a new document for your container. Set the following fields: Title, which will appear in the navigation Uses Template: set to (empty) since this is not a web page Resource Alias Published: box should be checked to see weblink in navigation Go to the Settings tab, check in the box that says Container to indicate that again, this is NOT a page, just a container. Click Save How to a Add Nested Page to a Container Create the nested page. In the Resource tab (on the lefthand box), click, hold and drag the child page into the container (drag ON container, not below). You can drag as many or as few as you want. Once you drag the pages into the Container, a small caret will appear to the left, indicating there is a child page. When you click on the arrow, all the nested (children) pages will display. 5.3 How to Duplicate an Existing Page Click on the page you wish to duplicate. At the top right, click Duplicate next to Save. A box will appear asking if you want to duplicate this page, click Yes. There are 2 identical pages with the newly duplicate page highlighted with a new ID# in the Resource tree. The duplicate document will appear on your screen with no value for the resource alias. Update the page and save your changes. 5.4 How to Delete a Page In order to delete a page, go to the Resource tab on the lefthand box. Right click on the resource name and a menu will appear. Click Delete. A pop-up menu will display asking if you are sure you want to delete. Click Yes. The page will now be RED with a strike-through in the Resource tab. Your Page is no longer published, nor can it be edited. 5.5 How to Recover a Deleted Page

10 A deleted page with the title red and with a strikethrough is in a deleted state but NOT permanently deleted. To recover this page, go to the Resource tab on the lefthand side box, right-click the page you want to undelete. A menu will appear, click Undelete. You can now edit and publish this page. 5.6 How to PERMANENTLY Delete a Page IF you are ready to permanently delete ALL pages that are in the deleted state with the red and strike through name in the Resource tab, click the trashcan icon at the top right of the Resource tab box. A pop-up menu will appear confirming ALL deleted pages will be completely removed. Click Yes. 5.7 Page Reorder Go to the Resource tab, click and drag the page up or down to reorder. The changes will reflect on your webpage instantly after you refresh your site in the browser. 5.8 Resource ID # The resource ID # is auto-generated and assigned to each page created. This ID# is used when you link to a page within your site. If you delete a page, MODX will never use this number again. 5.9 Breadcrumbs Breadcrumbs are on all subpages and help users know where they are on the site by listing the path of where you are located on your site. You can click on breadcrumbs and navigate back to different levels of the navigation Breadcrumbs and Nested (Child Pages) Breadcrumbs list the organization of your pages so it is important that child pages are nested correctly. For example, if I have a link on a Faculty page that goes to a specific faculty members full profile, the profile page needs to be nested within the faculty page so that the breadcrumb displays a path that makes sense. 6.0 Page Properties (Document, Settings, Template Variables) 6.1 Document Tab Each page has several tabs available. The Document tab is the default tab view for a web page and contains most of the page properties that need to be updated. Please note there are several fields that are requried to be filled in before you can save it as a web page Title (required) The Title field is required. The Title populates... the page name in the Resources tab default page title (heading 2) at the beginning of the page content, unless the Long Title is specified (see below) the title in the browser tab Long Title The Long Title is an optional textfield if the title for your page, your Header 2, is different from the Title. If you leave the Long Title blank, the Title will display as the page title Uses Template (required) Uses Template is required. Assigning a template sets up the page with the site design. The Homepage template should only be used once, on just your homepage as it includes global information which is information that goes on every page i.e. contact information in the footer. You may have more templates depending on the design of your

11 site. Any specific instructions is included in the custom instructions found on the dashboard Resource Alias (required) The Resource Alias, the name of the web page (URL), is required. This alias will be generated as the html page name included in the web address. Be consistent, keep it simple and do not use spaces. For example, the resource alias is set to about for the About page. Note: The homepage resource alias is index and should NOT be changed Description The Description field is optional. The Description sets the meta description for the page in place of the site description that is set in configurations and applied to all pages on your site. The page should have specific content that is notably different or unique to have it s own page specific meta description Menu Title The Menu Title is optional. The Menu Title is used only to override the page title to use a shorter name in your navigation. If you do not fill this in, MODX will use your Title. For example, a page title like About the Institute for Translational Medicine and Therapeutics can have the Menu Title set to About Us for the navigation Hide From Menus The Hide From Menus checkbox determines if the page should display or be hidden in the navigation. When a page has Hide from Menus checkbox checked, the page in the Resource tab will appear lighter gray Published The Published checkbox determines the page visibility on the web. A page that has Published checked makes the page available to view your site. If your page is not published, it will not be viewable on your site. When a page is unpublished, the page in the Resource tab will be italicized Content The Content area is located at the bottom of each tab view. The richtext area is where all your content should be included. 6.2 Settings Tab There are only a few properties for your web page to set in the Settings. All other fields/checkboxes should be left alone. Parent Resource: this is where you can manually set a web page to be a nested/child page of a container. You can do the same thing by going to the Resource tree and click and drag a page into a parent container. Resource Type: identifies which type of resource you are using: document, weblink, static resource, symlink. For all documents, it should be set to HTML by default and for static resources, it should be set to PDF. Published On: this field gets auto-populated by the date and time that the page is created Publish Date: a date for the page to be published and go live can be set here Unpublish Date: a date for the page to be unpublished and not accessible on your site can be set here Container: check the checkbox set the page as a container with nested pages 6.3 Template Variables Tab Template Variables include all features of the template available i.e. accordion, personnel. In the Template Variables tab, there are categories of the different features that can be used on your web page.

12 7.0 Templates 7.1 What are Templates? A template applies design and layout elements for your web pages. Each template includes varying features where you can set content and maintain a consistent design for your site. It is standard to have 2 templates, the Homepage Template and Subpage Template. The Homepage Template SHOULD ONLY BE USED FOR THE HOMEPAGE as it includes global information that needs to be defined once and populated onto all other pages i.e. contact information in the footer. 7.2 Homepage Template The Homepage Template should be set to the homepage ONLY. A homepage is intended to draw the user into your website. Examples of special features that may be included on a homepage template are banner, announcement, news & events. The homepage also includes global information i.e. footer. The content for the footer such as contact information and/or quick links is set on the homepage and displays in the footer on all pages. 7.3 Subpage Template A subpage is all the pages of your site, besides your homepage. The Subpage Template will have it s own set of features available to format the content of your web page. For example, the personnel feature may be available to display a formatted list of personnel profiles. 8.0 How to Format Page Content using a Rich-Text Editor 8.1 Rich-Text Editor Toolbar In the Content area, the richtext editor includes a toolbar at the top of the content area. 8.2 Copying and Pasting Content Copying and pasting content from other programs is common. When copying and pasting content, it is common to find that styles get copied over as well. To ensure that all styles are removed as the content is copied, follow these steps: Copy and paste into the Content area in MODX Highlight or select all the pasted content Click remove format button (Tx) This should clear extra styles from the content. 8.3 Headings and Paragraph In the toolbar, there is a Format dropdown that includes Normal, Heading 3, Heading 4, Heading 5 and Heading 6. Heading styles are used to structure your content and create hierarchy of information. All other content that is not a heading should use Normal to display as paragraph text. For more information, go to the Typography Tips page. 8.4 Additional Content Formatting Common text styles included are bold, italic, subscript and superscript. We STRONGLY suggest not to use underline as it can be identified as a link. For more information, go to the Typography Tips page.

13 8.5 Lists Numbered and bulleted lists are available in the toolbar. To create a sub-item within the list, use increase indent (right arrow in lines icon) or the Tab key on your keyboard. To decrease indent, click the left arrow in lines icon or SHIFT+Tab. 8.6 Blockquote Highlight quotes using the blockquote style, the double quote icon in the toolbar. Type your quote, highlight it and then click on the blockquote icon in the toolbar. You will only notice that the text intents in the richtext editor and when you preview the page, the quote will be styled. 8.7 Links Link to a Page within Your Site In the content area, highlight the word you want to link. Go to the Resource tab on the lefthand side and locate the page you want to link to. Drag and drop the page onto the highlighted word in the content area. When linked successfully, a little green checkmark will appear and the word should change to blue with an underline. If this does not happen the first time, try again or try to add your link manually. To manually link a word to a page within your site, highlight the link word. Click the link icon in the toolbar and a pop-up window will appear. Set the following: Link Type: URL Protocol: <other> URL: [[~#]] (Replace # with the page ID# found next to the page name in the Resource tab) Click OK and the word should be linked properly Link to a URL Highlight the link word and click on the link button. A pop-up window will appear. Set the following: Link Type: URL Protocol: URL: go to the site you want to link to in your browser, copy and paste into the textfield Go to the Target tab in the pop-up window, set Target to: New Window Click OK and the word should be linked properly Link to a File Highlight the link word and click on the link button. A pop-up window will appear. Set the following: Link Type: URL Protocol: <other> Click Browse Server and navigate the file system to select your file URL: this will be auto-populated once you select your file using Browse Server Go to the Target tab in the pop-up window, set Target to: New Window Click OK and the word should be linked properly Link to an Highlight the link word/ address and click on the link button. A pop-up window will appear. Set the following: Link Type: Address: include address

14 Message Subject: this field is optional, include a pre-populated message subject as needed Message Body: this field is optional, include a pre-populated message subject as needed Click OK and the word/ address should be linked to an Link to a Phone Number Highlight the phone number or word and click on the link button. A pop-up window will appear. Set the following: Link Type: URL Protocol: <other> URL: tel: (replace number with real phone number) Click OK and the word or phone number should be linked to a phone number. On mobile devices, this will provide the option to call the linked number Create and Link to an In-Page Anchor In-page anchors can be added to the content of your page to link within a page. This allows linking to a section of the page. First, create the anchor(s) in your content. Click in the content area where you would like to add an anchor. It is usually created for sub-sections within the page. Then, click on the Anchor icon in the toolbar which looks like a little flag. Name the anchor something meaningful so it can be easily identified when you are linking to it. Click OK and a red flag will appear to indicate the anchor. Highlight the link word and click on the link button. A pop-up window will appear. Set the following: Link Type: link to an anchor in text By Anchor Name: select the anchor name you want to link to Click OK and the word should be linked to the specified anchor on the page. 8.8 Images Add an Image Click in the content area where you want to include an image. Click on the Image button in the toolbar and a popup window will appear. Set the following: Click Browse Server next to URL to navigate through the file system to select your image. Make sure the image is already uploaded to the /images directory. Alternative Text: add a short description for the image. This is important for usability as readers will read the alternative text to describe the image on the web page Width: (empty) Height: (empty) Alignment: align your image left, center or right Captioned image: check to include a caption, caption box will appear in the Content area once you close out of the pop-up window. Click OK and you should see the image in the Content area. If you included a caption, update text A Linked Image To link an image, include the image using the instructions above. In the Content area, select the image and click the link button in the toolbar. Follow the steps to link using the link properties available. 8.9 YouTube Videos Add a YouTube video to your page using the YouTube tool. Click in the Content area where you would like to add your

15 video. Click the YouTube button. There are 2 ways to include a YouTube video using the embed code or URL. Go to YouTube and locate your video. Below the video, there is an option to Share. The Share option provides the URL and the Embed option provides code. Both methods work to include a YouTube video. Make sure Make Responsive (ignore width and height, fit to width) is checked. Click OK and the video should display in your Content area IFrame Click the IFrame button in the toolbar, which looks like a globe. Include iframe content such as a DCI list or a Vimeo video by including the URL Tables Click in the Content area to add a table. Click the Table button in the toolbar. Jump down to more and click. A pop-up window will appear. Add your table properties by specifying the number of rows, columns and headers as needed. Make sure to keep the width and height empty so the table is responsive. Click OK and the table outline will appear in the Content area. The table may look tight but it will table cells will expand as you enter content Horizontal Rule Click in the Content area to include the a horizontal line and click horizontal line button in the toolbar. It looks like several horizontal lines with one bold line in the center Additional Buttons (Special Characters, Show Blocks, Preview, Print) There are several other tools available to you. Special Characters: special characters and symbols (#$%) Show blocks: visually defines each element in the Content area such as paragraph, heading, table, image etc. Preview: a full screen view of your content editor Print: allows you to Print your content from your content editor 9.0 How to Secure Files and Pages Pennkey Protected pages and files are viewable only to users with a PennKey username and password. 9.1 PennKey Protect a Page Go to the page you want to PennKey protect. In the Resource Alias textfield, add secure/ before the alias name given i.e. secure/contact. Click Save. When the viewer tries to view the page, the PennKey log in page will appear. When they enter their Pennkey credentials, they will be able to view the page. 9.2 PennKey Protect a File The file MUST be in the /secure directory before you link it on your webpage, otherwise it will not be protected. Go to your Media Browser. Upload your file to the /secure directory to PennKey protect. If the file has already been

16 uploaded, locate the file and drag that file into the secure directory. If you are moving a file from a directory, make sure you relink to the file on your webpage with the updated file location Version Control Each resource includes a Versions tab. Versions allows you to revert a resource to a previous version. In the Versions tab, there is a list of every saved version of your resource with a version number, date, and who edited it. If you know which page you want to revert back to, contextual-click (right-click) and click Revert Resource to Version # to revert to version. Otherwise, to view a previous version details before reverting back to a previous version, contextual-click (right-click) and click View Version Details. If you are ready to revert to the selected version after reviewing the details, click Revert Resource. If you are still not sure, you can compare the selected version with the current version of the page. Click the Compare To dropdown and select the first result which is the current version. You will be able to see each version detail side by side. When you are ready to revert to a version, click Revert Resource dropdown and select the current or previous version. Click Back to Resource to go back to the page and click View to preview page MODX Helpful Tips Tips Tricks and Best Practices The Manager Dashboard includes resources and references to help manage your site. Be sure to check the following: General Instructions for a refresher on how to manage your site Site-specific instructions for instructions not included in the General Instructions, if any your using a supported brower If you are having issues seeing content updates or dashboard issues... make sure you clicked the Save button to save your changes hard refreshing your page (SHIFT+the refresh button [for a mac] ; Ctrl+f5 [for a pc]) If you are not sure what each icon does, hover over icon and help text will show up that should help you. Some functions in MODX are in a menu when you contextual-click (right-click). You can find options for: resources in the Resource tab files in the file system table for the personnel feature, accordion feature, slideshow, etc.