Overview

Learn specific techniques for editing UTC websites with OU Campus Content Management System. Get hands-on help to improve your website.

Objectives

Create a new Interior Section with multiple pages; work with _props.pcf: Section Properties File & Parameters

Learn to use OU Campus Just Edit WYSIWYG editor.
(WYSIWYG: What You See Is What You Get)

Publish Sections, Pages and Navigation

Activities

Walk-through of Interior Section and Interior Pages; create several pages with different Page Layouts.

  • Instructor creates a new “Department XX” site, quickly going through and narrating steps on the OU Campus form dialog. This is similar to what students will do later when they create their own sections.
  • Stress Title Case (appears on page) vs file naming convention (URL/address,).
  • Stress semantic naming for search engine optimization.
  • Describe the index file and its importance: actual index of sibling documents, intro to the section and siblings, or “most important” content in the section
  • Change Access to Everyone for all files/folders in new Department XX, then add & set the ox_ftp_image_root variable to /department-XX/images. Quickly mention access groups and how they limit users’ ability to edit sections.
  • Demonstrate and lead students in creation of New Interior Section “firstname-lastname”, again stressing Title Case vs file naming convention, and semantic naming for searchability and accessibility.
  • Repeat importance of index.pcf file… actual index, introduction, or most important page in the new section… and it is also the page that is displayed when a user links to, or enters the folder address in a browser; no index or a blank index is very bad for searchability and accessibility
  • After creation of new student sections, this should open each student’sindex.pcf.
  • Explain difference between Preview and Edit
  • Describe One column, Two column, Stacked and Full-width layouts, and how to change this setting via Properties > Parameters (page must be checked out)
  • Have students change index to Two column sidebar layout, save and publish and view product page in new tab via the status prompt link.
  • Instructor click on nav and breadcrumb links to show that other pages have not been published. Explain that side navigation is not published, thus no nav links to the students’ new sections & pages.
  • Everyone creates my-new-page.pcf.
  • Stress importance of semantic and correct file naming for readability and searchability
  • “But I want my file and folder names to be short…”
  • No, you really don’t, and neither does a search engine or a screen reader. If you really want a short URL, ask the web team to create a utc.edu/shortcut for your page e.g. utc.edu/gilligan, and then show utc.edu/gilligan+ , which gives statistics
  • Stress importance of keeping .pcf extension: Publish Control File. If this is changed or removed, the page canno be published.
  • Everyone open _sidenav.inc
  • Briefly demonstrate that items are simple text links
  • automatically inserted ONLY when new pages are created
  • text links can be rearranged, edited, etc.
  • Save and Publish _sidenav.inc
  • Switch to a tab with the webtrain Department XX pages and refresh to show the working sidenav
  • Show that the main index and sidenav are not yet published by clicking a link to the Department XX index
  • Publish Department XX main index and sidenav; demonstrate navigation dropdowns and navigate around various pages and sections
  • Explain how to think about navigation and links: the Destination has to be created before the link or navigation. When your boss says “We need a dropdown and when you click, it goes to a page” = you should be thinking = “I need to create a section and some pages”.

Introduction to Just Edit interface.Just Edit is the “What You See Is What You Get” editor for OU Campus that makes content creation fastand easy, and shows edits in the actual layout context of the page. Just Edit is the default editor for OU Campus pages; some assets and Multi-edit pages such as Staff Profile pages use a slightly different editor.

  • Entering and styling text with Headings, paragraphs and lists
  • Setting text styles
  • Proper nesting of heading levels
  • Proper use of “spacing” and separators
  • no blank paragraphs or headings: accessibility issue. Use a horizontal separator instead. It is also permissible to use line breaks after paragraphs for extra spacing
  • Linking to internal and external web pages and documents
  • Copy & paste the full URL for an external page
  • Uploading images and documents
  • Create a Word doc on desktop
  • Create a text link for the doc, and use Add/Edit to navigate to /docs folder and upload
  • Insert an image using Insert/Edit Image, Upload
  • Have students rename image prior to upload, prepend their first name, dashes to separate
  • Insert/whoops… need to add Description for accessibility
  • Save
  • Where did the image go in Preview?
  • It’s on Staging: demonstrate how to change Preview to Stagingvs Production

Publishing Sections, Pages and Navigation

  • _sidenav.inc: Sidebar Navigation
  • Secondary Navigation: horizontal & dropdowns
  • Navigation within OU Campus environment vs. Navigation on live web pages
  • Section Properties: Header, Footer, Navigation and Inheritance
  • Demonstrate how to change inheritance of sidenav and header.
  • Have students change _props.pcf > Properties to NOT inherit sidenav and footer, add title, then publish.
  • Republish the Entire Department XX site to pick up all changes
  • Demonstrate how the sections now have their own sidenav and header titles, and a blue header background with no image
  • Profiles: individuals & index; Multi-tiered profiles
  • Everyone create a profile with basic info, Save
  • Notify students they would need to Clear the placeholder image before trying to navigate/upload a new image… they don’t have permissions on the placeholder image folder
  • Publish all individual files, then publish the Index to pick up the changes/additions