OmniUpdate. Web Contributors Guide. University Information Technology Services. Training, Outreach, Learning Technologies, & Video Production

Transcription

1 OmniUpdate Web Contributors Guide University Information Technology Services Training, Outreach, Learning Technologies, & Video Production

2 Copyright 2015 University Information Technology Services Kennesaw State University This document may be downloaded, printed, or copied, for educational use, without further permission of the University Information Technology Services Division (UITS), provided the content is not modified and this statement is not removed. Any use not stated above requires the written consent of the UITS Division. The distribution of a copy of this document via the Internet or other electronic medium without the written permission of the UITS Division is expressly prohibited.

3 Table of Contents Introduction... 5 Learning Objectives... 5 Logging into OU Campus... 6 Editing your Page... 8 Accessing the In-Line Editor... 9 The WYSIWYG Editor Entering & Formatting Text Uploading Files Publishing Uploaded Files Adding Images Adding Hyperlinks Embedding Youtube Videos Embedding Videos from Kennesaw State MediaSpace Publishing a Page in OU Campus Viewing an older version of your web page Comparing an Older Version of the web page with the current version Reverting to an Older Version of your web page Checking Out of Pages Additional Help... 41

4 Page 4 of 41

5 Introduction OmniUpdate is a very useful web content management system that provides easy access to update web content. With its easy accessibility, WYSIWIG (What You See Is What You Get) toolbar, and other features, OmniUpdate allows you to publish, manage, as well as organize a wide array of content for websites you have editing access to. The following booklet is meant for those users who have Level-2 website contributing permissions. This booklet will provide you a step-by-step guide for editing Kennesaw State University websites using OmniUpdate. Learning Objectives The following topics are covered in this document: Accessing your site for editing Becoming familiar with the WYSIWIG editor Editing Existing Pages Version Control Page 5 of 41

6 Logging into OU Campus With the OmniUpdate DirectEditor, you can navigate to any webpage that you have editing permissions for and access the page for editing. The following explains how to access the OmniUpdate DirectEditor in order to edit webpages. 1. In an internet browser, navigate to the KSU page that you wish to edit (see Figure 1). Note: You must have editing access to the page to log in to the page. Figure 1 - Navigate to your Website 2. Click on the DirectEdit button (see Figure 2). Note: The DirectEdit button appears as the copyright symbol located at the bottom of the page. Figure 2 - DirectEdit Button 3. Log in with your NetID and NetID password (see Figure 3). Figure 3 - Enter your NetID Page 6 of 41

7 4. Click on Login (see Figure 4). Figure 4 - Click on Login 5. You will be taken to the DirectEdit page (see Figure 5). Figure 5 - Webpage Editor Page 7 of 41

8 Editing your Page When you are in the DirectEdit page, you will have the ability to edit your webpage, preview your page, view page properties, check in/check out of your page, and view various versions of your webpage. The layout of the DirectEdit page is as follows (see Figure 6). Figure 6 - DirectEdit Page A. The Dashboard Takes you to the OmniUpdate Dashboard B. The Content Button Allows you to view pages on the site and move pages to the Recycle Bin C. Reports Takes you to the Reports page D. User Settings Allows you to change user settings and logout of OmniUpdate E. Preview Button Allows you to preview your web page F. The Edit Tab Allows you to add/remove content from the page G. The Properties Tab Edit page properties and view the page editing logs H. Check In/Check Out Allows you to check in/check out of the page when editing I. The Publish Button Publishes the page to the public. If you are apart of an approval workflow, this button will be replaced by the Submit. J. Main Content Viewable only when in the Edit tab, clicking this will take you to the webpages In-Line Editor in which you can add/remove content on the page. Page 8 of 41

9 Accessing the In-Line Editor The In-Line editor allows users to make in place edits to the webpage with incredible ease. The following explains how to access the In-Line editor: 1. In the DirectEdit page, click on the Main Content button (see Figure 7). Figure 7 - Main Content 2. You will be taken to the In-Line editor where you will be able to add/edit text as well as access the WYSIWG (see Figure 8). Figure 8 - In-Line Editor Page 9 of 41

10 The WYSIWYG Editor The WYSIWYG (What You See Is What You Get) editor is your way to edit pages quickly. The WYSIWYG editor layout* is as follows (see Figure 9): Figure 9 - WYSIWYG Editor File Functions: Save or revert changes on a page Find Functions: Find specific content on your page Undo Redo: Undo/redo changes made on a page Spell Check: Run spell check on the content. Clear Formatting: Remove all selected text formatting and return text back to the default settings for a page. Basic Font Properties: Add bold, italic, underline, and strikethrough to selected content. List & Indent: Create an ordered list or indent content. Alignment Functions: Move selected text (left, center, right) or justify the text Link Tools: Insert/edit links Insert/Edit Mail Link: Insert and Edit a Mailto link Paragraph/Font Styles Options: Define paragraph style and add site-specific font styles, Insert Images/Media: Add/edit images and videos on a page Entering & Formatting Text 1. In the In-Line editor, click on the In-line Editor field (see Figure 10). Figure 10 - In-Line Editor Page 10 of 41

11 2. Begin typing in the In-line Editor (see Figure 11). Figure 11 - Adding Text 3. To add bulleted items, click on the Insert/Remove Bulleted List button (see Figure 12). 4. Type in your bulleted list (see Figure 13). Figure 12 - Insert/Remove Bulleted List Figure 13 - Bulleted List Page 11 of 41

12 5. You may bold, italicize, or underline using the Bold, Italics, and Underline buttons (see Figure 14). Figure 14 - Bold, Italics, and Underline 6. To adjust the alignment of your text, use the Alignment options (see Figure 15). Figure 15 - Alignment Options 7. When you are done editing text, click on the Save and exit button (see Figure 16). Note: Clicking on the Save and exit button will take you out of the editor and back to the page. To save a page but remain in the editor, use the keyboard shortcut Ctrl+S to save and continue editing. Figure 16 Save and exit Uploading Files The following explains how to upload files into your website. 1. In the webpage that you are editing, click on Main Content (see Figure 17). Figure 17 - Main Content 2. Place your cursor where you wish to add your file link (see Figure 18). Figure 18 - Place your Cursor Page 12 of 41

13 3. Click on Insert/Edit Link (see Figure 19). 4. Click on the Search button (see Figure 20). Figure 19 - Insert/Edit Link Figure 20 - Click on Search 5. In the Select File window, click on Upload (see Figure 21). 6. Click on Add Files (see Figure 22). Figure 21 - Upload Figure 22 - Add Files Page 13 of 41

14 7. Navigate to and select the file you wish to upload (see Figure 23). 8. Click Open (see Figure 24). Figure 23 - Select the File 9. Click on Start Upload (see Figure 25). Figure 24 - Click Open Figure 25 - Start Upload 10. In the Select File window, click on Insert (see Figure 26). Figure 26 - Click on Insert Page 14 of 41

15 11. Add descriptive text in the Text to display field. Note: Text in this field will be displayed on your page (see Figure 27). Figure 27 - Text to Display Field 12. In the Target dropdown, select whether you wish to have the file open in the same page or in a new window. Selecting None will have the file open in the same browser window. Selecting New window will open in a new browser window (see Figure 28). Figure 28 - Target Field Page 15 of 41

16 13. Click OK (see Figure 29). Figure 29 - Click OK 14. Your file and file link will be added to your webpage (see Figure 30). Note: You will need to publish your file before they can be viewed by the public. Figure 30 - Linked File Page 16 of 41

17 Publishing Uploaded Files Upon uploading, note that the file must be published in order for it to be viewable by the public. The following explains how to publish uploaded files. 1. In the DirectEditor, click on Pages, located at the top of your browser window (see Figure 31). Figure 31 - Pages 2. Navigate to, and hover your mouse over the uploaded file that you wish to publish (see Figure 32). 3. Click on Publish (see Figure 33). Figure 32 - Hover your mouse over the file Figure 33 - Publish 4. In the Publish window, click on Publish (see Figure 34). Figure 34 - Click on Publish Page 17 of 41

18 5. Your file will be published and available for public viewing (see Figure 35). Figure 35 - Confirmation Window Adding Images The following explains how to add images into your website. 1. In the webpage that you are editing, click on Main Content (see Figure 36). Figure 36 - Main Content 2. Place your cursor where you wish to add an image (see Figure 37). Figure 37 - Place your cursor Page 18 of 41

19 3. Click on Insert/Edit Image (see Figure 38). 4. Click on the Search button (see Figure 39). Figure 38 - Insert/Edit Image 5. Click on Upload (see Figure 40). Figure 39 - Search Figure 40 - Click on Upload Page 19 of 41

20 6. Click on Add Files (see Figure 41). Figure 41 - Add Files 7. Navigate to and select the image(s) you wish to upload (see Figure 42). 8. Click on Open (see Figure 43). Figure 42 - Navigate to and select the files Figure 43 - Click on Open Page 20 of 41

21 9. Click on Start Upload (see Figure 44). Figure 44 - Start Upload 10. Click on Insert (see Figure 45). Figure 45 - Click on Insert 11. Add an image description in the Description field (see Figure 46). Note: This field is required Figure 46 - Description Field 12. If you wish to add a ToolTip (a small information box that appears when you hover your mouse over the image), use the ToolTip field (see Figure 47). Figure 47 - Tooltip Page 21 of 41

22 13. To change the size of the image, use the Dimensions field (see Figure 48). Figure 48 - Dimensions 14. For other Appearance options for your image, use the Appearance tab (see Figure 49). Figure 49 - Appearance Tabs 15. When you have finished with your image, click OK (see Figure 50). Figure 50 - Click OK Page 22 of 41

23 16. Your image will appear in the webpage. To resize the image in your page, click on the picture (see Figure 51). Figure 51 - Image on the website 17. Click on one of the anchor points on the image and drag to resize (see Figure 52). Figure 52 - Resizing the Image Page 23 of 41

24 Adding Hyperlinks When adding hyperlinks to your page, it is recommended that you either copy/paste the link or type the link into the hyperlink fields. The following explains how to add hyperlinks into your website. 1. In the webpage you are editing, select the text that you wish to hyperlink (see Figure 53). Figure 53 - Select the text 2. Click on the Insert/Edit Link button (see Figure 54). 3. Type your link into the URL field (see Figure 55). Figure 54 - Insert/Edit Link Figure 55 - URL Field Page 24 of 41

25 4. The Text to Display field is the text that is displayed for the hyperlink. If you have selected text prior to clicking on the Insert/Edit Link button that text will appear in this field (see Figure 56). Figure 56 - Text to display field 5. To have the link open in a new window, select New window in the Target field (see Figure 57). 6. Click OK (see Figure 58). Figure 57 - New window Figure 58 - Click OK Page 25 of 41

26 7. If you receive a The URL you entered seems to be an external link pop-up, click OK to add the required prefix (see Figure 59). Figure 59 - Click OK 8. Your hyperlink will be added to your page (see Figure 60). Figure 60 - Hyperlink Embedding Youtube Videos The following explains how to add Youtube videos to your webpage: 1. Place your cursor where you wish to add your media (see Figure 61). Figure 61 - Place your cursor 2. Click on the Insert/Edit Video button (see Figure 62). Figure 62 - Insert/Edit Video Page 26 of 41

27 3. Open a new browser window in your preferred internet browser. 4. Navigate to 5. In Youtube, navigate to the video that you wish to add (see Figure 63). Figure 63 - Navigate to your video 6. Copy the video link from the address bar (see Figure 64). Figure 64 - Copy your address 7. In the Insert/Edit Embedded Media screen, located in OU Campus, paste your YouTube link in the Source field (see Figure 65). Figure 65 - Source Field Page 27 of 41

28 8. Click on Ok (see Figure 66). Figure 66 - Click OK 9. A Placeholder will appear in your webpage editor (see Figure 67). 10. Click on Save and Exit (see Figure 68). Figure 67 - Placeholder Figure 68 - Click on Save Page 28 of 41

29 11. Your video will appear in your webpage (see Figure 69). Figure 69 - Webpage Video Embedding Videos from Kennesaw State MediaSpace MediaSpace is Kennesaw State s dedicated video sharing website. When you need to upload videos to share with your audience at KSU, it is recommended that you utilize MediaSpace. For more information on using MediaSpace, please refer to the Getting Started with KSU s MediaSpace: Faculty/Staff Quick Start Guide. The following explains how to embed video from Kennesaw State University s MediaSpace onto your website. 1. Click on the Main Content button (see Figure 70). Figure 70 - Main Content Page 29 of 41

30 2. Place your cursor where you wish to embed your video. 3. Click on the Insert/Edit Video button (see Figure 71). Figure 71 - Insert/Edit Video 4. Click on the Embed Code tab (see Figure 71Figure 72). Figure 72 - Embed Code 5. Open a new browser window in your preferred internet browser 6. Navigate to mediaspace.kennesaw.edu 7. Click on the Guest icon (see Figure 73). 8. Click on Login (see Figure 74). Figure 73 - Guest Icon Figure 74 - Login Page 30 of 41

31 9. Enter your NetID credentials (A) and click Sign in (B) (see Figure 75). Figure 75 - NetID Login 10. To upload a video that you have created, click on My Media (see Figure 76). Figure 76 - My Media 11. Click on the video that you wish to Embed (see Figure 77). Figure 77 - Select your Embed Page 31 of 41

32 12. Click on Share (see Figure 78). Figure 78 - Share Button 13. Click on Embed (see Figure 79). Figure 79 - Click on Embed 14. Copy the Embed Code from the Embed field by pressing CTRL + C on your keyboard (see Figure 80). Figure 80 - Copy the Embed Code 15. In the OmniUpdate page that you are editing, paste the Embed Code in the Paste your embed code below field by pressing CTRL + V on your keyboard (see Figure 81). Figure 81 - Paste your Embed Code Page 32 of 41

33 16. Click OK (see Figure 82) Figure 82 - Click Ok 17. Click on Save and Exit (see Figure 83) Figure 83 - Click Save Publishing a Page in OU Campus The following explains how to publish a page in OU Campus. 1. After completing your edits to the page, click on the Save and exit button (see Figure 84). 2. Click on Publish (see Figure 85). Figure 84 - Click on Save Figure 85 - Click on Publish 3. The Final Check page will appear. To scan your page for spelling and hyperlink validity, click on the Spelling and Links buttons (see Figure 86). Figure 86 - Run All Page 33 of 41

34 4. Upon running your checks, you will see your error report. To view any errors, click on the Show Results link (see Figure 87). Figure 87 - Show Results 5. When you have completed reviewing your errors, click on Close (see Figure 88). Figure 88 - Click Close 6. When you are ready to publish the page, click on Publish (see Figure 89). Figure 89 - Click Publish Page 34 of 41

35 Versioning One of the benefits of OmniUpdate is the ability to review and compare different versions of your edited website as well as restoring older versions of your web page should you need to rollback your changes. The following explains how to view older versions of your web page as well as revert to a previous version of the website. Viewing an older version of your web page. 1. Navigate to the page that you wish to edit (see Figure 90). Figure 90 - Navigate to a Page 2. Click on the Check In button to check in to the page (see Figure 91). 3. Click on the Versions button (see Figure 92). Figure 91 - Click on Main Content Figure 92 - Click on Versions Page 35 of 41

36 4. You will be taken to a page that has the different versions of the website, the date it was created, as well as the user who created the document. To view an older version of the page, hover your mouse over the page version you wish to view (see Figure 93). 5. Click on View (see Figure 94). Figure 93 - Hover your mouse over the page version Figure 94 - Click on View 6. You will see the older version of the webpage (see Figure 95). Figure 95 - Old Version of the website Page 36 of 41

37 Comparing an Older Version of the web page with the current version 1. Navigate to the page that you wish to edit (see Figure 96). Figure 96 - Navigate to the Page 7. Click on the Check In button to check in to the page (see Figure 97). 2. Click on the Versions button (see Figure 98). Figure 97 - Click on Main Content Figure 98 - Click on Versions Page 37 of 41

38 3. Hover your mouse over the page version that you wish to compare (see Figure 99). 4. Click Compare (see Figure 100). Figure 99 - Hover your mouse over the page Figure 100 Compare 5. You will be able to see the various changes between the two versions (see Figure 101). Objects in red indicate deleted content. Green objects indicate added content. Figure Comparing the two versions Page 38 of 41

39 Reverting to an Older Version of your web page The following explains how to revert to an older version of your website. 1. Navigate to the page that you wish to edit (see Figure 102). Figure Navigate to the page 8. Click on the Check In button to check in to the page (see Figure 103). 2. Click on the Versions button (see Figure 104). Figure Click on Main Content Figure Click on Versions Page 39 of 41

40 3. Hover your mouse over the page version you wish to revert to (see Figure 105). Figure Hover your mouse over the page 4. Click on Revert in the Confirmation Window (see Figure 106). Figure Click on Revert 5. Your Web page will be reverted to the version you have selected (see Figure 107). Note: You must publish the reverted website version in order for the public to view it. Figure File has been reverted pop up Checking Out of Pages It is important to note that only one person can edit a webpage at a time. Therefore, when you edit a page, other users with edit rights will be unable to edit the page. This process is called Checking In to a page. When you have completed your edits, you must check out of the page so that other users may edit the page in the future. The following explains how to check out of a page that have finished editing. Page 40 of 41

41 1. Navigate to the page that you wish to edit (see Figure 108). 2. Click on the Direct Edit button (see Figure 109). Figure Navigate to the Page Figure Direct Edit Button 3. Log in to the page using you NetID if necessary. 4. Make the necessary edits to the page. 5. When you have completed your edits, click on save and exit (see Figure 110). Figure Save & Exit 6. To check out of the page, click on the Check In button, located above the WYSIWYG. This will check you out of the page (see Figure 111). Figure Check In Additional Help For additional help, please contact the KSU Service Desk in either of the following ways: Phone: service@kennesaw.edu You can learn more about the KSU Service Desk by visiting their website: Page 41 of 41