OU Campus
Content Management System Training
Phase1 – Part 1

OUCampus Training

To 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 onWWW.
  • As you work on conversion, your sites will be viewable on 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.

Onthe 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 started

When 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 Web Communications will create your Omnidev site, publish files to and notify you so you can begin the conversion.

You can keep experimenting in your assigned training folder indefinitely.

Logging in

Using the browser of your choice, open one of your 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 pagewe 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:
  3. Save this URL for future logins.
  4. Scroll to bottom of the page and click the date
  5. The date is also called the “DirectEdit Link”
  6. 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.
  • 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

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 whereyou 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 whenyou 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.
  • SaveVersion: 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.
  • 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 publish

OU 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.pcf
  3. Click on the green edit button in the main content panel, the JustEdit toolbar becomes available for content editing
  4. Follow the page directions for content to edit.
  5. Click the Save and Exit icon on the JustEdit toolbar
  6. 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.
  • 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
  1. Select “Sub Section” from the list of new content options
  2. Name the Subsection an SEO friendly name in the “Directory name” field, we will use support
    Remember: No capitals, special characters or spaces
  3. Name the Subsection an SEO friendly name in “Friendly Name” line (AKA: the breadcrumb), for this exercise we will use Support
    Remember: This will be displayed in the web page to site visitors
  4. 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
  5. Add Description – maximum of 150 characters, include keywords in the sentences
  6. Add Tags-Keywords separated by commas
  7. Click Create
  8. 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 Subsection
  2. Choose “New” and select Intro, Two Columns with Sidebar page type
  3. Choose an SEO Friendly Filename. Remember: No capitals, special characters or spaces
  4. For this exercise we will use tutorials
  5. Set the Page Title for the new page- 54 character maximum and most important word first
  6. For this exercise will use Tutorials for OU Campus
  7. Add Description – maximum of 150 characters, include keywords your audiences may be using for searches in the sentences
  8. Add Tags-Keywords separated by commas
  9. Click Create
  10. Navigate to the Pages List (Content > Pages) to view the addition of the page in your site structure
  11. Click back into the tutorials page at about-us>support>tutorials.pcf

Tip: the page is automatically checked out to you.

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 link

Exercise: Inserting an internal link

  1. Make sure you are in the about-us>support>tutorials.pcf page
  2. Click on green “Content Region” button
  3. Add this content under the Tutorials heading 1:
  4. Web Communications offers a wide variety of support services.Highlight the words “support services”
  5. Click on Insert/Edit icon in the JustEdit toolbar
  6. Click the Browse icon to select about-us/support/index.pcf page
  7. Ignore the rest of modal information
  8. Click OK
  9. Note: to create an external link, copy the full URL into the URL field. OU campus will ask if you want to add the 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 toolbar
  3. Select Class > Button at the bottom of the modal
  4. 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
  1. Type in email address
  2. Click “OK”

______

Page check

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

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 toolbar 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.

  • 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
  • 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.
  • 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 page
  2. Click Preview
  3. Return to Edit mode or stay in Preview mode
  4. Click green “Publish” button
  5. The Publish modal will open; eitherrun page checks or just select Publish

Exercise: Publishing multiple pages

  1. From pages-list (Content > Pages), open Subsectionabout-us
  2. 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.

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