Brock University Content Management System Training Guide

Transcription

1 Brock University Content Management System Training Guide Table of Contents Brock University Content Management System Training Guide...1 Logging In...2 User Permissions...3 Content Editors...3 Section Administrators...3 Accessibility...4 Creating Content Pages...5 Selecting page design options...5 Creating Your Page...6 Page Title...6 Menu Settings...7 Inputting Text...8 Main Heading...11 Images...11 Path Settings...13 Publishing Options...13 Editing Menus...13 Creating Discussion Forums...15 Creating Web Forms...15 Creating a Blog...17 Creating a Gateway Banner

2 Creating Calendar Events...19 Creating News Items...20 Edit Blocks...20 Logging In The new re designed website will be made live at on August 26 th, The development site where you can change you content until that point is located at brockcontent.x2idea.net/your section. To edit content within your section of the Brock University website you must first login by clicking the Employee Login link in the footer navigation anywhere on the site. See image below: 2

3 Your login will be in the following format: Username: (first initial)(last Password: your section (for example: business or applied health sciences) User Permissions There are two types of roles in the Brock University content management system. Content Editors Those users who have been granted content editor status within their section are able to create content and pages and submit them for approval to a section administrator in their area. They can also edit existing pages and submit the changes for approval. Section Administrators Those users who have been granted section administrator status will see the administrator s dashboard when they login. This dashboard is where administrators can view new or revised content submitted by content editors. Administrators can view submitted content by clicking the paper and pencil icon to the right as seen below. 3

4 Accessibility The Accessibility for Ontarians with Disabilities Act, 2005 (AODA) establishes standardized levels of accessibility for persons with disabilities in Ontario and applies to the university sector. The web site templates have been created with W3C Standards (international web accessibility standards) and provide several accessibility features. As you create and modify web pages and provide content, ensure the accessibility of the content you are providing: Provide clear Alt Tags for images. Use closed captioning for videos. Use headings in logical order. Use clear and concise language. Use high contrast colour choices. Use sans serif fonts (e.g. verdana, arial). Ensure that links are meaningful when read out of context (e.g. "campus map" instead of "click here") Test your site for accessibility issues: navigate using a keyboard only, and view the accessible version to make sure that the content reads properly. Throughout this document you will see references to accessibility tips. The consistent use of accessibility practices will ensure your pages are accessible to everyone. 4

5 Creating Content Pages After you have logged in you can click the Create Content link from the left side navigation Selecting page design options Now that you have logged into the employee login and chosen to create content, you are presented with a list of page design options to choose from. Each page design has an image and a description associated with it. To get a larger view of this page design option you can click the Enlarge link below the page design option s image. Use the page design option descriptions to help select an appropriate page design. Before you begin to create a new page you should have a concept of what you would like your page to look like and what assets you want to put on the page. Giving some consideration to this in advance will assist you to choose the best design option to suit your purpose.. 5

6 Creating Your Page Once you have logged in, clicked create content, and chosen your page option you will be able to input the content that will be on your page. Page Title The first field you must enter is the Page Title This will appear in red as a title above your content. This field is required. Accessibility Tip: For those users who utilize a screen reader to access the page it is important that they can understand the contents of the page based on title of the page and the page s main heading (described below). 6

7 A good page title indicates to the reader what they will be reading about below before they get to the contents. A bad page title leaves them guessing so that they must read the contents before they know what the page is about. Bad page titles can make consuming pages time consuming because the user can t move on to something different quickly when they aren t on the correct page. Menu Settings The next piece of your new page that must be setup is the menu settings. Menu settings determine how your content will be linked to the rest of the content on you site and will appear in your top or side navigation area. First you must input a link title. This link title should be short (usually no more than 2 3 words) so that it fits in the menu and doesn t expand to two lines on the menu. This menu link title should also be intuitive. In other words it should describe the page or set of pages the user will access by clicking this link. Accessibility Tip: Do not use acronyms or local jargon in your menu link titles as they may not be understood by some users. For example: GOOD: Current Students Portal BAD: CSP GOOD: On Campus Pub BAD: Rez Watering Hole 7

8 Now you must select a parent item for this menu link title. A link that is within a set of links is referred to as a child of the link it is a part of. For example, in the image below, Brock News is the parent item and News Releases is the child of Brock News. If you are creating a page that is 1 st level page on your section your parent item will be Global: Inputting Text Now you will be able to enter text that will display on your page. If the page you have chosen has two columns you will input the text for that column in two places. The box to enter your text will look like this: 8

9 There are 7 functions to alter your text within the editor: 1. Bold (show Bold Icon Here) a. This function will bold the font on the text you have selected. This function is similar to bolding text in other document creation software that you are likely familiar with. 2. Bulleted List (show Icon here) a. This function allows you to make a bulleted list i in the text area on the page. Again, this is similar to creating a bulleted list in other document creation software. 3. Numbered List (Show Icon here) 4. This function allows you to make a numbered list in the text area on the page similar to creating a bulleted list in any document creation software. Hyperlink a. By selecting text and clicking the hyperlink button you can link the text to any page normally accessible on the internet. When you click the hyperlink icon it will bring up the dialogue box shown below. You then select the link type; URL (a webpage), (someone s ), or a Link to an Anchor (another location within the same page). Do not alter the protocol unless you are linking to a page on a secure server ( Now enter the link URL you wish to link to. 9

10 The only other consideration you have is in the target tab within hyperlink dialogue box. Select the Target Frame drop down and select one of two options; New Window or Same Window. For links that are not on the Brock University website select New Window and for pages on the Brock University website select Same Window. 5. Paste a. The paste feature is used if you have copied text from within a web browser,.pdf document or other place that has text (NOT MICROSOFT WORD). 6. Paste From Word The Paste From Word feature allows you to paste text in the text area that has been copied from a Microsoft Word Document. It is important that you use this feature for text copied from Word because the feature removes code that is existent in Microsoft Word Text. Removing code when pasting into a document is important to ensure your text will display correctly on the web page. 7. Style a. The style feature allows you to select text and change it to; a Header, a Subheading, or back to normal font. These styles have been approved by the Marketing and Communications Group at Brock University. There is no ability to change font styles beyond these options. These style decisions have been made in the best interest of ensuring Brock University s website provides a consistent user experience, is aesthetically appealing, and reflects the Brock brand. 10

11 Main Heading The Main Heading of the page is automatically entered for you. This is static and constant across your section s part of the website. It appears above your section s navigation in red. The main heading reminds all users what section of the site they are in. This is especially important for those users who may not be able to see the visual hierarchy within the breadcrumbs. Images If the page design option you have chosen provides the capability to include images you will be able to upload these images and enter alternate text. When uploading images it is important that you make sure they fit the pixel size stated below the browse button. If they do not fit they will be automatically resized. If your picture is not the same size please ensure that it is the same aspect ratio (for example longer horizontally than vertically). Otherwise, the image could look askew. Accessibility Tip: It is very important that you enter short, clear, and descriptive alternate text for the image you upload. Example 1: 11

12 Good Alt Tag: "Rick Mercer addresses the audience during spring convocation" Bad Alt Tag: "Mercer for web" Example 2: Good Alt Tag: "Faculty of Graduate Studies Still accepting applications for Fall '09!" Bad Alt Tag: "Graduate Studies link" It is important to take into consideration the size the file you are uploading in the image section. Most images you upload should be no larger than 300kb. Files larger than 300kb may cause the page to have a slow download speed. For each page to load the user must download the contents of the page. Your image is part of that content and so the file size affects the downloading speed. 12

13 Path Settings In the Path Settings field you must input what you would like to be after slash in your section. If your page is deeper than the first level it will automatically fill in path settings that have been entered for the previous fields. The text you enter should not have any spaces. For instance, if my page was for future students in the training section of the website I would type futurestudents. Once I publish the page the url bar in the user s browser will read: Publishing Options If you would like the page to be published then click the checkbox beside the word published. This means that your page will be seen live to the world. If you aren t ready to publish this page then you can leave this option unchecked. You can find this in your user history if it is unpublished. Editing Menus Section Administrators are able to edit menu (a.k.a. navigation) items that are within their section of the website. As an administrator you can drag and drop menu items above/below others as well as change their parent child relationship. The link to make these edits appears in your left menu whenever you are logged into the website. Clicking this link will launch a screen like this: 13

14 Using the directional arrow you can drag and drop menu items to change the hierarchy and structure. You can also edit the name of the item. Creating Duplicate Menu Items If you would like to create a menu item that links to a page in another area you can use the add item tab at the top of the Edit Menu page. An example of this would be a page in the Current Students section of a faculty s site. Someone may wish to link to a program description from a menu item in the future students section. Instead of duplicating the page you can simply have a menu item link to somewhere else without containing any page content itself. That way you don t have to update two pages with future changes. To create this duplicate link click the Add Item tab as shown in the screenshot above. Fill in the path you would like this item to link to. For example: 14

15 The example above is showing the creation of a menu item that links to another page instead of having content associated with the item itself. Creating Discussion Forums A discussion forum is a useful tool for allowing your users to communicate with each other or have a behind closed doors discussion amongst your colleagues. To access the creation o forums click create content from the left hand side navigation. You create a forum much the same way as you create a regular page. To learn how to properly title a forum and place it in the menu see page 5 of this document. The important aspect of forum consideration is the comment settings. Expand the menu so it appears as shown below. This is where you can specify what types of users will be able to participate in your forum. If the box beside the user type is checked below it indicates that they can access it. An authenticated user is anyone who has a login on the site. This could be a student, an employee, or a friend of Brock. An anonymous user is anyone who visits the page. Creating Web Forms Web forms allow users to collect information from their audience. This can be used as a survey or to collect other types of information. 15

16 The first part of creating a web form is titling it and placing it in the menu properly. For more information on this please see page 5 of this manual. The second part will be determining what types of users will be allowed to submit your forms. Expand the menu so it appears as shown below. This is where you can specify what types of users will be able to submit content on your web form. If the box beside the user type is checked below it indicates that they can access it. An authenticated user is anyone who has a login on the site. This could be a student, an employee, or a friend of Brock. An anonymous user is anyone who visits the page. After you click save you will be able to put in form components. The following are the form components available. 1. Field Set 2. Grid 3. File 4. Select a. A field set allows you to create a group of fields. For example you might make one section of your form called personal information that contains a number of fields like name, , birthday, etc. a. Creating a grid allows you to create one or more questions or statements with the same radio button options. The user can only select one response to these. A grid is often used for Likert scales in which users select how much they agree with a statement. a. This lets you create a field for users to upload files to submit to you. You will need to select what type of files you will allow to be uploaded. For security purposes users will not be able to upload any other files types than the ones you have selected. Creating Checkboxes, Radio Buttons, or Select Lists Creating radio buttons, checkboxes, and select lists is a little tricky in Webform, since they're all part of the "select" component type. To create these types, follow the instructions below for the type of element you are trying to create. Select list (single selection) choose the SELECT type, enter the values and label, and make sure LIST is checked (on). Select list (multiple selection) choose the SELECT type, enter the values and label, then choose the MULTIPLE advanced setting, and make sure LIST is checked (on). Checkbox choose the SELECT type, enter the value and label, then choose the MULTIPLE advanced setting (even if you just want one checkbox to appear), and make sure LIST is not on. 16

17 5. Page Break Checkboxes (multiple) choose the SELECT type, enter the values and label, then choose the MULTIPLE advanced setting, and make sure LIST is not on. Radio buttons choose the SELECT type, enter the values and label. Make sure both the MULTIPLE advanced setting and LIST settings are not on. a. This feature lets you create a page Break so if you have a very long form or survey. The page break makes it possible for the user to click a next page button instead of scrolling many screen lengths down. 6. For Instructions on more field types see the online documentation. and click the link that says Web form Field Types in blue. Creating a Blog (All users should use discretion when creating a blog. If you or your group do not have the resources to consistently update your blog than it can in some cases do more harm than good. Your blog should be updated consistently and frequently. According to industry standards your blog should be updated daily or weekly. Please contact the Brock University Marketing and Communications group if you require advice in this area.) The first step in creating a blog is to create the blog overview page that will display the latest posts. You can do this by clicking on Create Content and choosing the User Blog option. This will allow you to specify where the blog displays on the site and give it a title. As part of this you can also choose which user the blog is for. Any post created by that user will be shown on the blog overview page. Once the blog overview page has been created and published, the user can create blog posts. Each post is a separate page, but a summary will be shown on the blog overview page. Any time a user creates a blog post and it is approved, it will be automatically shown on their blog. Creating a Gateway Banner Creating a Gateway page type is similar to creating a regular page type except that it has a place to upload banner content. Below is an image of the upload process for a Gateway L2 page design option. 17

18 Once you have uploaded a picture of the correct size fill in: you will be presented with the following fields to 1. Description: The description you enter will display to the left of the image underneath the Title field. 2. Alternate Text: The alternate text field is where you will put in text that describes the image. It is very important to enter the alternate text because users with disabilities may be dependent on this text to know what is being presented on the screen. 18

19 3. Title: The title field will appear as a header to the left of the image above the description. 4. Link: The link you enter will be where the user is taken if they click on the image, title or description. This link opens in the same window so we recommend that you only link to places within your area of the site. 5. Auto rotate: When this checkbox has a check in it, it indicates that when you have multiple items in the banner (from click add another item) the banner will automatically rotate like a self playing slideshow. If it is unchecked the user will have to click the numbers to rotate through manually. Creating Calendar Events Each faculty/department will be able to submit events to their portion of the institutional calendar as well as host their own events page on their section of the site. For a faculty/department to host their own events section on their part of the website they must either request this in their initial consultation with Academica Group or make a formal request to ITS after the summer of To create an event item click create content from the left menu while signed into the website. Then choose Event. 19

20 Once you have finished inputting the content for your event you must select the proper tags for your event. Start by identifying the department and then the type of event. To expand each set of tags simply click the title such as Type of Event. Creating News Items Each faculty/department will be able to submit news items to their portion of the institutional news section as well as host their own news page on their section of the site. If your faculty/department would like to host your own news section on your part of the website your must either request this in yourr initial consultation with Academica Group or make a formal request to ITS after the summer of The institutional news system is still being finalized so the instructions for creating news are not presently available. These will be available in a later version of this document. Edit Blocks By clicking Edit Blocks from your left hand menu you are brought to a screen where you can begin to create blocks and change the location of existing blocks. 20

21 To create a standard block click the add block button at the top. Input your content and select what pages you would like the block to display on: 21

22 If you re not sure what the path of the page you are looking to display the block on is open up a new browser window and navigate to the page. Copy the portion at the end of the address: Once you have saved the block enable it in the LEFT OR RIGHT SIDEBAR. If you require a custom block that you cannot create using the custom blocks that have been enabled contact Brock ITS. 22

23 Image Resizing/Cropping See Appendix A for instruction on how to crop and resize images using a free online tool. Video Uploading Creating a Page with a video is very similar to creating a page with a picture. To create your video page simply click the create content button from your left menu while logged in. After that you will enter your usual page information (please reference the Creating Your Page section of this manual). After that you will be asked to upload your video. Please note that your video cannot be larger than 100mb s and cannot have any special characters in the file name. You can upload your video in any file format. This file will be automatically converted into a.flv file meaning it will be played with a flash video player (standard on the web). Please wait for you video to upload before saving or submitting the page. Once your video has been uploaded you may save/submit the page. A great way to link to (and promote) your video is to take a screenshot from video and upload that image to your section homepage banner or image contextual block (See the Edit Blocks section of this manual). To take a screen shot use the Print Screen button on your keyboard while looking at the on your screen (located near the top right of your keyboard). After that open a blank word document (or image editor) and right click Paste. Crop the image and save it as an image file. Video Captioning TBD Appendix A Image Size Reference a) Consulting Handbook Page x 140 b) Consulting Handbook Page 22, 21, x 220 c) Consulting Handbook Page x 150 d) Consulting Handbook Page 15, x

24 24

25 25

26 26

27 27

28 28

29 29

30 30

31 31

32 32

33 33

34 34