OU CampusContent Management System Training

Phase 1 – Part 1

1

OU Campus TrainingTo know before you start

You will be working in a development directory called Omnidev. You will be publishing your test files to the directory Omnidev on WWW. As you work on conversion, your sites will be viewable on www.unco.edu/omnidev/sitename from campus

or when logged in to Junos Pulse off campus. Files will be built as .PCF in development and published as .ASPX, not HTML.

Web Page Flow

Web authors will create and edit pages on the OU Campus server in the cloud, not via UNC’s shared drives.

When files are published, the OU Campus server FTP’s them to production on the UNC WWW server.

On the OU Campus Server

Content entered by web authors is stored in a database and, when the page is published, that content is combined with the template code to form an .aspx page (replaces html pages).

Getting startedWhen you are ready to move from experimenting in your training-files site and start working on your Omnidev department site (in the development stage), please submit the New Site Setup/Access form found on www.unco.edu/websupport/resources. Web Communications will create your Omnidev site, publish files to www.unco.edu/omnidev/department-name and notify you so you can begin the conversion.

You can keep experimenting in your assigned training folder indefinitely.

2

Logging inUsing the browser of your choice, open one of your www.unco.edu/omnidev pages and go to the bottom of the page to click on the date – that’s the DirectEdit link.

You will be taken to the OU Campus logon screen, use your first.lastname and network password. Your password will change automatically in OU Campus when you change it in UNC’s network.

The index.pcf page we created will be ready to use.

Exercise: Logging In

1. Open browser 2. Go to URL on sticky note and add a dash (-) and then the number of your computer to the end of the last

file name in the URL, example: http://www.unco.edu/omnidev/_train/phase1/march15-session1/training-files-01/

3. Save this URL for future logins.4. Scroll to bottom of the page and click the date

a. The date is also called the “DirectEdit Link”5. Log in to OUCampus with your UNC first.last and network password

_______________________________________________________________________________________________

OU Campus Interface

Global navigation bar

The global navigation bar is the primary way to navigate through OU Campus. Depending on your user level,

certain options in the bar will be shown or not shown. A list of items and their function is described below:

Dashboard: Includes access to your workflow, inbox, and Dashboard gadgets. Content: The Content menu includes access to the main area for editing pages and assets. Reports: Provides access to reporting and content management functionality. Add-Ons: Provides access to additional applications for access through the OU Campus User Avatar or Gravatar, and User Name: The menu provides access to your settings – it is important not to

change your password. o Tip: you can create a gravater through gravater.com

Help: Help menu items include access to the OU Campus support sites. The UNC support request can be found under the Gadgets tools>Request Help. You can view the Getting Help section at the end of this document for details.

Secondary navigation bar

3

The other global elements of the OU Campus interface are the secondary navigation bar, located directly underneath the global navigation bar, which includes a breadcrumb providing the location path where you are located within OU Campus. Also located on this navigation element is the Sites drop-down that allows for switching among any additional sites that may be configured under your permissions.

File Navigation Sidebar

The file navigation, located on the left, can be manually collapsed or expanded. The sidebar allows you to

easily browse through pages, files and directories within the site. This also allows you to navigate through the

structure of the site without leaving the page you are currently viewing. (click on the arrow)

The view can be toggled between Pages and Assets. Status indicators and file icons indicate the status of a

particular piece of content as well as the file type, e.g. Checked In or Checked Out.

The Keep Synced (lock icon) can be used to synchronize the list within the sidebar when you are in the site

structure.

Tip: the file navigation sidebar is just a list of files, not where you are in your site. When creating any new content, don’t rely on that view since you may be creating the page, asset etc. in the wrong place.

Tip: Is it strongly recommended to default to the Pages List viewable from the Global Navigation Bar – > Content-Pages.

Pages Action Bar

To check out the page, click on the lightbulb. This is a required action to allow you to see the page parameters and other information.

Preview: Displays the page in preview mode. Edit: Displays the page in edit mode, which includes editable regions. Checking out the page shows additional

utilities. Properties: Properties provides access to editing various other page items. A page or file must be checked out

to view or update parameters. Once clicked, the menu items under Properties include the functionality for Parameters, MultiEdit Content, Access Reminders and the Log, as applicable.

Versions: Used to view the committed versions of the page; available when the page is checked out to you. Page Check: Clicking the Page Check icon displays the Page Check modal with the ability to run any available

page checks. Save Version: Allows you to save a version of the current page, which is a useful action to perform before

other actions such as a find and replace can be done. Be sure to type in a description of the version so you can easily track it later.

Check Out/In/Lock: Allows for a page to be checked out or in by you. If the page is checked out to another user, a lock icon is shown.

Publish: After choosing an editable region and editing the page, the Publish button is available once the page is saved. Clicking the button will bring up the Publish modal. The Publish button is split into a drop-down menu as well for additional publish options. The available actions in this drop-down menu include Schedule, Submit for Approval, and Expire.

4

Server Drop-Down: The Server drop-down defaults to UNC’s WWW server. This menu is only available from the Preview view.

The plug icon opens the Gadget toolbar to display useful shortcuts, including a Getting Help function.

Tip: the full properties choices, page check and version only show when the page is checked out (click on the lightbulb).

Basic page edit and publishOU Campus pages have editable content regions instead of one large region like the Dreamweaver sites have. When you click on a green content region button, the JustEdit toolbar becomes available.

The JustEdit toolbar has many standard choices such a bold, bullets, copy, paste and save. It also has additional options:

Exit without saving. Insert snippet and asset buttons. Clear formatting for content that updates incorrect formatting from a copy/paste action. To see the styles choices, please refer to web style guide for more information. WHEN IN DOUBT, PUBLISH OUT!

TIP: Can also ctrl-S to save and keep working.

Exercise: Navigating to “Site Pages” using the Global Navigation Bar

1. Click on the Content button and click the Pages choice (Content > Pages)2. Click on index.pcf3. Click on the green edit button in the main content panel, the JustEdit toolbar becomes available for

content editing4. Follow the page directions for content to edit. 5. Click the Save and Exit icon on the JustEdit toolbar6. Click on the Preview button to see the Page as it looks in a live site

_______________________________________________________________________________________________

Create Subsections and Folders Your top level site is called a Master Section.

5

Subsections are OU Campus subdirectories (in common terms) that organize other web pages and are not used for images, PDF’s or Word docs.

Folders in OU Campus are used only for images, widgets and PDF/doc files, not for web pages.

Exercise: Creating a Subsection inside a Subsection

1. Navigate to pages-list the Global Navigation Bar (Content > Pages) 2. Click into the about-us Subsection

3. Click on the “New” button

4. Select “Sub Section” from the list of new content options5. Name the Subsection an SEO friendly name in the “Directory name” field, we will use support

Remember: No capitals, special characters or spaces6. Name the Subsection an SEO friendly name in “Friendly Name” line (AKA: the breadcrumb), for this exercise

we will use SupportRemember: This will be displayed in the web page to site visitors

7. Set the Page Title for the Subsection index page - 54 character maximum and most important word first (Web Communications at UNC rather than UNC Web Communications). For this exercise we will use Support from Web Communications at UNC

8. Add Description – maximum of 150 characters, include keywords in the sentences 9. Add Tags-Keywords separated by commas10. Click Create

11. Navigate to the Pages List (Content > Pages) to view the addition of this Subsection in your site structure

Tip: to publish a Subsection, publish all of the pages in the Subsection and OU Campus will create the Subsection on the Production server

___________________________________________________________________________________________

Create a new page Exercise: Creating a new page

1. Navigate to pages-list (Content > Pages) and then into the about-us and then support Subsection2. Choose “New” and select Intro, Two Columns with Sidebar page type 3. Choose an SEO Friendly Filename. Remember: No capitals, special characters or spaces

a. For this exercise we will use tutorials4. Set the Page Title for the new page - 54 character maximum and most important word first

a. For this exercise will use Tutorials for OU Campus5. Add Description – maximum of 150 characters, include keywords your audiences may be using for

searches in the sentences 6. Add Tags-Keywords separated by commas7. Click Create8. Navigate to the Pages List (Content > Pages) to view the addition of the page in your site structure9. Click back into the tutorials page at about-us>support>tutorials.pcf

Tip: the page is automatically checked out to you.

6

Tip: the new page defaults to no Banner image; that option can be turned on via the Page Parameters.

Tip: The Site Title is determined by the Title of your Master Section; “Training Files” will be replaced by your department name when you are building your department site.

Insert a linkExercise: Inserting an internal link

1. Make sure you are in the about-us>support>tutorials.pcf page2. Click on green “Content Region” button3. Add this content under the Tutorials heading 1:

a. Web Communications offers a wide variety of support services. Highlight the words “support services”

4. Click on Insert/Edit icon in the JustEdit toolbar

5. Click the Browse icon to select about-us/support/index.pcf page6. Ignore the rest of modal information7. Click OK8. Note: to create an external link, copy the full URL into the URL field. OU campus will ask if you want to

add the http:// to the URL, click okay

Exercise: Making a link button

1. Highlight internal link you just created; only a link can be turned into a button.2. Right click or select the insert/edit icon from the toolbar3. Select Class > Button at the bottom of the modal4. Click “OK”

Tip: The link class of button can be chosen in the Insert/Edit Link modal at the time the link is created

Exercise: Inserting a Mailto Link

1. Highlight email word 2. Click on the mail icon in the JustEdit toolbar

3. Type in email address 4. Click “OK”

______________________________________________________________________________________________

Page checkThe Page Check happens automatically when a page is published but the check can also be run manually.

7

Once the Page Check is open, you can click on Spelling, Links and/or Accessibility.

Check spelling Click on Spell Check and Show Results link. The results screen can also be opened in another window to compare to OU page: click on the Open in New

Window message in the modal window. You can add words to the dictionary by mousing over the word in the results screen. Click on Done to close the spell check modal.

Tip: the quickest way to check spelling is to click on the spell check in the JustEdit tool bar as you edit a section, it creates red lines and suggested spellings. The tool bar method only appears when you click on an editable region.

Tip: Submit a ticket at help.unco.edu if you need words added to the dictionary.

Check for broken links Click on link check from the Page Check modal, it may take a minute to run.

8

Click on Show Results. Look at both staging and production indicators. The yellow triangles are advisory. A red circle is a true broken link and will show if the link is incorrect or linked page has not been published. Note that email links can’t be verified and will show with a blue icon. All green or blue icons in the production server means your page passes the inspection.

Tip: You can publish the page with broken links but doing so is only acceptable in testing.

Check for accessibility issues Click on Known Problems, see tips below for possible causes. All other problem types are possible issues the tool cannot check because the page is in development.

Generally those are not issues but rather a lack of access to the styles and final page.

Tip: Missing link, including social media links, will cause an error. Tip: a missing page title will cause an error. Tip: you will see a mailto error until the footer file has been completed with a contact name.

Publish a page Publishing a page sends it to the production server (WWW), and, while you are working in development, to

the Omnidev directory. The URL for the production server (test site) is www.unco.edu/omnidev/yourdeptname. You can only view the Omnidev test server files on campus or through Junos Pulse off campus. The published page can’t be viewed on campus if you are signed on to Junos Pulse.

9

When you hit publish, the OU Campus template and the content in the editable regions are combined to form the final .aspx page.

TIP: The aspx page is like the old HTML pages were in Dreamweaver. Tip: Never navigate to a page through a link on a preview page, always use the Pages List.

Exercise: Publishing a page

1. Make sure you are in the about-us/support/tutorials.pcf page2. Click Preview3. Return to Edit mode or stay in Preview mode4. Click green “Publish” button5. The Publish modal will open; either run page checks or just select Publish

Exercise: Publishing multiple pages

1. From pages-list (Content > Pages), open Subsection about-us2. Check the about-us subsection 3. Click “Publish”

4. A modal will open, check “Include checked out files”5. Click green “Publish” button

Tip: Publishing multiple pages skips the final page check for spelling, broken links and accessibility so make sure you have performed this function (through the page check button on the Pages Action toolbar) on the page as it is edited.

You can’t publish a subsection but can select all of the files in the subsection and publish them in batch – OU Campus creates the Subsection on the production server.

You can publish a folder (images, PDF and Widgets).

_____________________________________________________________________________________________

Production server Through the Content>Pages view, you can see both the Staging and Production server files. The Production server is WWW and those files are “live”. Files published to Omnidev are restricted to on campus and Junos Pulse off campus view. When your new site has been published, remember those files are the actual public web pages. You can delete any file that is not a Web page. Remember that OU Campus removes a file from Production if it is sent to the Recycle Bin in Staging.

Affect what your page looks like – Page Properties-Parameters

Use the Page Properties-Parameters to turn off or on certain page structures, such as columns or sidebar, and enter the page descriptions. This affects only that page, not any other page in the site.

10

Page Parameters control:Title and Meta Tags

Title affects the name seen in browser tab and Google result. Description creates the paragraph seen in search engine results. Keywords help UNC’s search engine find the page, as well as search engines. Site Banner is the blue space and Banner image.

Custom Settings

Image Region turns Banner image on or off. Page Heading is what shows up as Page Title in blue area of page. Page paragraph also shows up in blue area of page and is optional but can be used as short explanatory

or promotional text. Don’t put critical info in that area since users may look past it. Breadcrumb is mandatory and should generally be the same as the page title, use capitalization. Rows and Columns layout.

o Concept: Rows 1 and 3 sit beside the right sidebar, rows 3, 4 and 5 extend to the right edge of the page.

o Refer to the Web Style Guide images for details.

Tip: Row 4 can be a color chosen from the Page Parameters modal. Tip: Remember to turn on the right sidebar for each page if you want it appear on the page.

Insert/edit an image Image sizes for different columns can be found in the Web Style Guide. You have to publish the image to be able to see it in preview. Delete the sample image rather than replace it. Make sure you are in the images folder immediately after you hit the source > browse button on the insert

images modal to allow the image to upload into the correct folder. Unpublished images will have a red box and “unpublished image” text to remind you to publish the image. Be sure to add the Tag for each image so it can be searched and filtered later. OU Campus sets a dependency tag so it will know if the image location gets broken, the tag starts with {{and

that information should never be changed.

Tip: it’s easier to size images outside of Omni. TIP: Upload images to images folder first and publish them before you edit your pages. Tip: Don’t set the dimensions in the insert box. Tip: make image about 100 pixels larger in case you decide to turn off sidebar or reduce number of

columns. TIP: If you publish from Preview, you’ll need to refresh your browser to see image correctly. Tip: remember to hit the crop or resize button after you set the new size. Tip: images side-by-side in columns should also be the same height.

11

Tip: You should move an image into the images folder if it is uploaded to an incorrect location; go to Content>Pages and mouseover the image to access the file>move option.

Note: There is an OU Campus bug: the cancel bar at bottom stays until you click on preview of the page.

Exercise: Inserting an image

1. Return to pages-list (Content > Pages) and select page to insert image on a. For this exercise stay on the about-us>support>tutorials.pcf page

2. Click content region edit button on column 23. Select where you want to insert the image in the editable region

a. For this exercise we will replace the sample image in the left columnb. Click on the sample image and hit delete

4. Click on the image icon in the JustEdit toolbar

5. Click the “Browse icon” in the modal6. Navigate to image in images folder

a. For this exercise select the image titled “bear-family.jpg” 7. Click “Insert”8. Add description for alt tag/accessibility 9. Click “OK”10. Click the “save and exit” icon in the JustEdit toolbar11. Click “Preview” to view page with inserted image included, note the unpublished image message12. Click Publish to publish the page

______________________________________________________________________________________________

Obtaining Images Creative Services has built a restricted gallery at

http://www.unco.edu/websupport/resources/ou-campus/images-galleries/obtaining.aspxUpload files. o When you register for training, your email will be added to the web authors group that has access to

the gallery.o When you first access the gallery to download an image, you can choose “join account” and create a

password.o More details can be found at http://www.unco.edu/websupport/resources/ou-campus/images-

galleries/obtaining.aspx. If you find images and need help resizing them, submit a ticket at help.unco.edu with the image number and

Creative Services will assist. If there are no images that fit your need, you can

o Submit a marketing request form for photography at http://www.unco.edu/universityrelations/request-form/

12

o Search shutterstock.com for an image and submit the file number via help.unco.edu. We will download and send the image to you.

Uploading Files A folder does not contain web pages but is used for images, PDFs and widgets.

You can create a new folder or subfolder within a parent folder or subfolder to help organize your files. You can choose multiple images at once to upload but upload and edit requires one at a time. You can choose multiple PDF’s to upload. File names can be changed in the upload. Must be lower case, no spaces. OU Campus files can contain only lowercase letters, numbers and dashes.

Tip: Publish images and PDF’s right away. The upload modal lists file types that cannot be uploaded. The file size limit is 500K.

Exercise: Uploading Images

1. Navigate from pages-list (Content > Pages) to images folder2. Choose “Upload” from Page action toolbar3. Click “Add” button 4. Navigate to desktop and select image to upload 5. Click “Open” (you may need to change file name before upload)6. Click on “Start Upload”7. A modal will open and display upload status8. Click “Close” to close modal

______________________________________________________________________________________________

Edit the Banner image This area uses a table transformation – a way to insert content that does not require knowledge of code. Ignore the blue area, it is just the heading for the function. To add another Banner image, press tab to create a new row, don’t hit enter. To delete a Banner image select the image and hit delete, then right click on the row the image was in and hit

delete>row. You can have up to 5 “slider images”. You can have only one image if you’d like. You are encouraged to use one image to decrease load time of page. Images must be 1600X440.

TIP: The top one will always show first. Tip: turn off Banner image when working on a page and turn it back on later.

13

Tip: Move image into images folder through Page Actions. Tip: The row containing a deleted image must also be deleted or the spacing below the Banner image will

contain too much white space.

Exercise: Uploading and adding a Banner image

1. Open root level index page (index.pcf) from pages-list (Content > Pages) 2. Click on the green "Banner Content" edit button 3. Press the "tab" key on keyboard4. Select "image" icon from the JustEdit toolbar5. Click the Browse Icon6. Modal will open, navigate to the image folder7. Click Upload8. Browse to your desktop > images folder and select gunter.jpg.9. Click Open10. Select Start Upload11. Click Close12. Click Insert13. Add description for the alt tag14. Click “OK”15. Click “Save and exit” in JustEdit toolbar16. Publish page

______________________________________________________________________________________________

Create site navigationTop level navigation

_Topnav.pcf has already been created for you, note the instructions. To enter your link words, use tab and shift tab (remove). Always start the list with bullet. The top level links are bullets, the indent drop down links (second level navigation) are sub bullets. Don’t set a class, it won’t affect the link. Turn on or off social media and apply button via top nav page properties. Remember to check out the file

to see the page parameters.

Tip: When turning on the social media or CTA button on the _topnav.pcf file, remember to choose the option in the Additional Section Content dropdown box.

Tip: create your site Subsections and Pages first and then build the navigation.

14

Exercise: Creating Top Level Navigation

1. Click on content>Pages and navigate to the root level of your site2. Open _topnav.pcf file on root of the site (AKA: master section) 3. Type “Home” where Link1 is 4. Hit “Enter” on your keyboard5. Type “About Us” 6. Hit “Enter” on your keyboard7. Hit tab and type “Support”8. Highlight entries individually and click the link icon in the JustEdit toolbar

a. Use Browse icon to select appropriate page b. Click “OK”

9. Save then publish _topnav.pcf10. Go to pages-list (Content > Pages) and click on index page

a. Select preview to view top level navigation______________________________________________________________________________________________

Sidebar Content

There can be three things in right side bar:

1. Third level of navigation links.2. Open content/images inserted and formatted by Web Author.3. Widgets, such as the Contact Us box (More details in Part 2 training).

Sidenav Every Subsection has a sidenav file in case it is needed. The side navigation is for Subsection pages that need a third level navigation. The _sidenav.pcf list should be just one level of links although it will accommodate two levels. The side navigation is turned on for each page using the Page Parameters; turn on both the Right Sidebar

Region and Right Side Navigation in the Page Parameters Always leave the Section Resources setting in the Page Parameters alone

Tip: Remember to create a link for each page in the Subsection, including the index.pcf page. Tip: Remember to turn on Right Sidebar Region and Right Sidebar Navigation in each page’s

Parameters.

Exercise: Creating side navigation

1. Open pages-list (Content > Pages)2. Open the “support” subsection and open the about-us Subsection 3. Select the Side Nav file (_sidenav.pcf)4. Replace the words Link1 with Support5. Hit “Enter” on your keyboard6. Type “Tutorials”7. Highlight links individually and click on the link icon in the JustEdit toolbar

15

a. Navigate to the support>index.pcf for the home link and support>tutorials for the tutorials linkb. Click “OK”

8. Save and publish _sidenav.pcf9. Navigate to index.pcf page of the support Subsection 10. Click “Preview” to view side navigation

______________________________________________________________________________________________

Footer File The footer.pcf file controls the editable content in the site footer. Some of the content in the footer applies to UNC in general is standard in all footers. The orange MultiEdit button is found at the top of the footer.pcf page and is used for pre-formatted

content. The name and email address of the page contact is required in all page footers. You can select who the

page contact is. The additional contact information is optional and recommended for campus departments. Quicklinks are optional and should reflect the most popular content in the site; they can also be links to

closely related UNC departments. Quicklinks can be external links.

Files: move copy, rename, delete and recycleThe most convenient way to work with files in batch is through the Pages List. As you check the box next to file names, an action bar appears at the top of list, allowing files to be managed in batch.

Functions include Edit, Review, Publish and File actions, including Rename, Move, Copy and Send to Recycle Bin.

The Edit, Review and Publish actions can also be completed within the individual Page view. The File actions can only be performed in the Pages List. You can delete Subsections but they are not retrievable. Individual files can be removed and are moved to the recycle bin; this also removes them from the

production server The Recycle Bin

16

o Can be found under the Content Tab (Content > Recycle Bin).o Allows Web Authors to restore files by mousing over the file name and choosing Revert.o Shows all recycled files and can be searched or sorted by the Recycle categories.o The Recycle Bin should be emptied regularly.

Tip: If you rename a file, you have to also rename the page in the parameters if you want the title to change.

Tip: The renamed page original is not deleted from WWW and you can’t delete it. Submit a Web Assistance ticket to have the file removed.

Page Versions A Page must be checked out to see the Versions tab in the Page Action bar. Every publish of a Page creates a Version. You can also save a Version of the Page by clicking the Version icon in the Page Action bar.

You should describe Versions, such as “With Fall semester dates”, for quick reference in the list of Page Versions.

Clicking on the Versions link in the Page Action bar shows past versions. Mousing over a Version in the Version list allows you to Revert to an older Version, compare that Version

against the live Page or delete the Version. Comparing Versions looks at the differences between the past Version and current Page on the Staging

server and are color coded in the current Page view.

Going live When your site is ready to move out of the Omnidev development directory to the actual WWW directory,

please submit a ticket to help.unco.edu. Web Communications will switch your production URL to be www.unco.edu/department-name, make a few

changes in the Master Section properties and permissions and publish the site live to WWW. After your site is live, you will access the OU Campus login by clicking on the footer date last updated (the

Direct Edit Link) on one of the live pages. The www.unco.edu/omnidev /department-name Master Section will be deleted but your original _train files

will exist for experimentation.

17

If you need another UNC Omnidev site to convert another existing web site, submit a New Site Setup/Access form found on www.unco.edu/websupport/resources. Web Communications will notify you when your Omnidev site is ready to use.

The URL of many of your site pages will change in the conversion. You can submit a ticket with a list of old (Dreamweaver site) -> new (OU Campus) URL’s and Web Communications will assist with the redirects. Please redirect only the critical pages of your site, such as the home page, high traffic pages and crucial forms. The goal is to allow internal links of other sites to continue working during the conversion and make sure, within reason, that any bookmarked links are not broken.

Getting HelpThere are multiple way to get help with your web site:

Web Communications can assist with questions; you can request help through the OU Campus Gadget or submit a ticket via help.unco.edu/- select submit ticket. The ticket description choice is Website Assistance. A Web Communications staff member will contact you within 48 hours. Please indicate in the description if the issue is of critical nature.

The help icon next to your user name has links to the Omni Update support portal. That portal has thorough instructions on all general aspects of using OU Campus. There is helpful information on this site but please remember every campus has flexibility in the setup of OU Campus so screen shots and processes may differ.

Other links to the Omni Update site require a user logon so please contact Web Communications via a ticket submission if you are interested in any feature.

The www.unco.edu/websupport site has a section called UO Campus Self Help. That section contains information specific to UNC’s configuration of OU Campus.

Helpful URL’s:http://www.unco.edu/websupport/resources/ou-campus/forms/index.aspx

http://www.unco.edu/websupport/resources/ou-campus/

uncbears.photoshelter.com

www.unco.edu/websupport/webstyleguide

18