OU Campus - Getting Started

Transcription

1 OU Campus - Getting Started I. How to Login 1. To edit any page, log in to OU Campus by clicking the Direct Edit link (the Date Stamp at the bottom of the page, underneath the social media icons). 2. Enter your Farmingdale username and password. Then click Log In. Please note that you MUST login from your department s webpages where you have access. Login in from other areas or the homepage, will give you an access error. 1

2 Interface II. Creating a New Empty Folder To create a new empty folder: 1. Click the Expand Arrow on the New button. 2. Select Folder, enter a Name, then hit Enter on the keyboard. 2

3 III. Creating a New Page or Section How to create a new page or section: 1. Click the New button. 2. In the Select Content view, choose the New Page or New Section template. 3. Give the page a Name, Description, and change the Access Settings to restrict user accessibility. 4. Click Save. 1. Folder: Creates an empty folder or directory. Use this template to create folders for images, pdfs and subdirectories. 2. New Department Section: Template for department or offices pages, where contact information needs to be displayed. Content in third column flows to the top on mobile devices. This will be used as landing pages for all departments and offices. It creates a directory with an index page (the landing page). 3. New Interior Section: Template for other interior pages or other landing pages that does not contain office contact information. Content in third column flows to the bottom in mobile devices. Page could have image header, two columns, or three columns. 4. New Department Page: Similar to New Department Section (4), but it creates one single page for departments landing pages where contact information in third column will go on top on mobile devices, making the contact information available. 5. Full Width Page: Similar to New Two Column Page template with two columns with option to display image banner, adjust the image to full width or on second column, one column or second column. Third column goes at the bottom on mobile devices. This template is the one to use most of the time. 6. Left Nav: Template for creating/modifying Left Navigation menus. Easier to manage than the current version. Users must request access to the /includes/custom_navs directory. 7. New Profile Page: Template to be used for Faculty to create their faculty pages. It creates a directory with an index page, i.e. john-smith/index.pcf. Information is entered via Multiedit. More pages can be created using the Full Width Page template. This template will be available in the /faculty directory and it is for faculty members only. 3

4 Difference between Templates IV. Editing a Page 4

5 Clicking on the lightbulb, it will turn yellow and will display the Page Actions Toolbar. Buttons on the toolbar will depend on the permission level assigned to each user. Page Actions Toolbar The Page Actions toolbar provides tools to edit a page and its properties, preview changes, check links, and perform other functions. More importantly, the Page Actions Toolbar provides the options to publish changes or route them for approval. (User toolbar may vary.) Preview: Show a rendered version of a page before publishing or sending for approval. Edit: Select a page region to edit Source: Edit HTML source code for the entire page Properties: Update any metadata properties defined on a page and modify page access Versions: Show proposed page changes with current page, or any previously published version of a page that has been backed up to the versioning archives, or revert to a previous version of the page Page Check: Check the pages for spelling, valid links, and W3C validation (some or all of these options may be disabled by an administrator.) Save Versions: Save a copy of the page to the versioning archives without publishing the page to the production server. Check In/Out: Assign the content to the desired user account to prevent other users from modifying the content. Publish Options: Publish the page to the production server, schedule a publish, submit the page to another user for approval, or set the content to expire. Content Help: Provides useful information regarding the Page Actions toolbar Selecting Regions Select a region of a page to edit within the WYSIWYG Editor. 5

6 WYSIWYG Toolbar Editor OU Campus provides page editing commands with the What-You-See-Is-What-You-Get (WYSIWYG) Editor Toolbar. (User toolbar may vary.) File Functions: Save or revert changes on a page. Cut, Copy, Paste, Find Functions: Find specific content and cut, copy, paste, or paste as plain text Undo Redo Functions: Undo/redo changes made on a page. Spell Check: Run spell check on the content. Clear Formatting: Remove all selected text formatting and return the text back to the default settings for a page. Font Properties: Add bold, italic to selected content. Create Lists: Create ordered/unordered lists. Text Script Functions: Turn selected content into superscript or subscript text. Link Tools: Insert/edit links, insert mailto links, and create anchors. Help: Display the Help window. Font Properties: Header size for selected text, add site-specific styles like align text right or left, apply red or grey color to font, apply class image responsive for images, align images. Insert Images/Media: Add/edit images and videos on a page. Horizontal Line: Add horizontal rules. Insert Line Break: Insert line breaks. Snippet: Insert a preconfigured snippet of code to be used as a template. Asset: Insert a global asset. Table Properties: Create/edit tables within a page, apply classes such as gray or blue background, table with borders, tables that rows change color when mouse over. 6

7 Accessibility Guide for OU Content Contributors Page Structure 7

8 Adding/changing Banner image and adding alt description in OU Campus To change Banner image and alt description If you change the Banner image, you MUST change the Banner alt text according to the image you select. 1. Checkout page by clicking on lightbulb icon. 2. Click Properties icon. 3. Make sure Display Banner checkbox is selected. 4. Browse to Banner images location: images/full-col-width-1200px, select your image and click Choose File. 5. On field Banner Alt Text, change the image description according to the image. For descriptions, please check Banner image inventory: If you re adding a new image, please add a short description of the image. Not the page title or the department title, but a short description of what the image is. If you have any questions or not sure, send the image to webchanges@farmingdale.edu so we can provide you with a proper image alt description. 8

9 All Banner images are located at images/full-col-width-1200px. Please select Production as shown below. For proper image alt descriptions for all Banner images, please refer to this Banner images inventory: 9

10 Headers Content Contributors must order heading elements properly. All pages must begin with a header 1 (h1), h2 elements should generally follow h1 elements, h3 elements should follow h2 elements, etc. Do not "skip" levels just for visuals (e.g. h1 directly to h3). When levels are skipped users of assistive technology may not understand the relationship of content. Always use Header 1, then 2, 3, and so on based on the structure of your content. 10

11 Links For links, DO NOT use click here by any means. All links must have a descriptive title and CANNOT be the same text as the link. See why: 11

12 About Images All images MUST have an alt tag DESCRIBING the image, no exceptions. Image Description: alt tag, visible to screen readers, full image description Title: When you mouse over an image, is what pops up. This complements the alt tag. Title: Image Description or alt tag: 12

13 Editing Content Begin editing content using the OU Campus WYSIWYG Editor. Simply edit the page using the toolbar functions provided at the top of the screen. Once finished editing, click the Save button for additional functions. Approving/Publishing Pages After saving a page, the Page Actions toolbar is displayed with a preview of the page. If there are no further changes, the page is ready to be published. Depending on user level, choose Publish or Submit for Approval: 13

14 When uploading PDF, Word, Excel documents etc. to the Website Word Documents and PDF s must be checked for accessibility BEFORE being uploaded to the Website. One solution is to create a page in OU Campus or a Wufoo form instead. If you must upload PDF, Word, Excel, or any other type of binary document, please review these links on how to properly create accessible documents: Cheatsheets from the National Center on Disability and Access to Education (NCDAE) Microsoft Office Word PDF Conversion in Word PowerPoint Excel Adobe Acrobat XI Acrobat X InDesign CS5.5 When publishing content in OU Campus OU Campus has now been configured to automatically check for spelling, W3C Validation and Accessibility when you select Publish. 14

15 If you get any errors, please DO NOT publish the page; first try fixing all the errors. If there are errors that you cannot fix, please send the page to webchanges using the Request Help gadget, see below: All pages must be free or errors for Spelling, W3C, and Accessibility. One exception are left navigation files. Those will show with several errors, but since those files are incorporated into your pages, those errors will not show. 15

16 You may also use WAVE ( a free Web Accessibility tool to check your pages in addition of OU Campus. All pages on farmingdale.edu should have 0 errors and only 1 alert (1 X Noscript element). The only valid alerts are for links to PDF and Word documents. Alerts from WAVE that you must pay attention are skipping headers, missing alt description on images, links with no title or same title description as the text. If you have any questions about these and other errors or alerts, nicosise@farmingdale.edu or call Other Rules to Remember Top header must be Header 1, no exceptions. Use Header 1, then 2, 3, and so on. Do not skip the order. Do not bold or center headers. Do not use all CAPS in titles and entire paragraphs. Do not underline headers, text. Underlined text on the web is for links ONLY. Phone numbers should be in this format: Sample of accessible page: Sample of no accessible page: Resources: WAVE Web Accessibility Tool: Farmingdale Accessibility Policy: Farmingdale OU Campus Support: Penn State Accessibility Guide: Any question, please nicosise@farmingdale.edu, or call Sylvia Nicosia,

17 To publish a page, all three buttons MUST be green. V. Additional Resources Complete User Guide for OU Campus (pdf, 89 pages: OU Campus Version 10 Support page: OU Campus Training Tuesdays recorded sessions by OmniUpdate: Farmingdale s Support page: 17