04/18/23Page 1

Content Editor Workshop

Using Roxen Content Management System

Presented by the Office of Communications and Office of Information Technology

04/18/23Page 2

Content editor workshop overview

• Part 1 - Key concepts• Part 2 - Tour of the system• Part 3 - Using the CMS tools • Part 4 - Advanced CMS tools

– Exercises throughout the presentation

Introduction | part 1 | part 2

04/18/23Page 3

Content Editor Workshop

Using Roxen Content Management System

Part 1Key concepts

04/18/23Page 4

Key concepts // How Princeton University's content management system works

Introduction | part 1 | part 2

• Roxen’s Web content management system allows non-technical editors to add and change content.

• There is no need for special software on your computer. All you need is a Web browser and a URL.

• You can edit equally well from Macintosh, PC and Linux computers.

• Support staff members in Communications and OIT maintain the infrastructure and templates.

04/18/23Page 5

Key concepts // How Princeton University's content management system works

Introduction | part 1 | part 2

• In Princeton’s implementation of Roxen CMS, it is more than a content editing tool. Our CMS-enabled sites also include templates with specific designs and functions.

• These templates help promote a higher standard of information architecture, usability and accessibility.

04/18/23Page 6

Key concepts // How Princeton University's content management system works

Introduction | part 1 | part 2

• Princeton’s system recognizes your regular netID and password.

• You can log in and edit from any computer with Internet access, even at home or while traveling.

• Members of groups on campus can be given permission to write or view specific sites, directories or pages.

• Published pages can easily be made viewable for campus members only.

04/18/23Page 7

Key concepts // How Princeton University's content management system works

Introduction | part 1 | part 2

04/18/23Page 8

Key concepts // What makes our CMS special

• It is easier to maintain current, accurate content– Editors can build Web pages without knowing HTML

– Menu links are changed automatically as pages are added and deleted

– It is easy to modify these menus without knowing HTML or having to change the menu in every page individually

– Teammates can preview pages before they are made public using a two-step workflow

– Workflows can include automatic e-mail notifications when pages are published

Introduction | part 1 | part 2

04/18/23Page 9

Key concepts // What makes our CMS special?

• Additional Roxen CMS advantages– Information in the editing environment is secure

– Permissions can be controlled to a finely detailed level, such as:• Pages or sections can be made viewable only on campus

• Individuals can have access to edit only specific pages or sections

– You can revert to any published version of a page

Introduction | part 1 | part 2

04/18/23Page 10

Key concepts // What makes the University’s templates special?

• The templates are designed to be usable & accessible– The underlying code incorporates elements for users with

vision issues, including styles for aural readers and skip-access links

– Navigational elements and colors are used consistently to provide site visitors predictable clues for using the site

• Content is separate from design & functionality– Page editors can't easily "break" the design

– The design can be changed without affecting the content

– The content can be reused in other formats (e.g. RSS for news readers)

Introduction | part 1 | part 2

04/18/23Page 11

Key concepts // Preferred browsers for editing

• Generally, the latest version of Firefox works best

• Internet Explorer for Windows works better if you

need to resize content tables

» If you have access to a PC, we recommend having both

IE7 and Firefox in order to test your site before launch

» Developer extensions are now available for both

• Safari on Macintosh doesn't handle the component

editor well

Introduction | part 1 | part 2

04/18/23Page 12

Key concepts // Understanding URLs in this system

• Examples of public site URLs:

• www.princeton.edu/evp

• www.princeton.edu/main

• Examples of edit server URLs:

• https://www-cms-edit.princeton.edu/main

• https://www-dept-edit.princeton.edu/training

Introduction | part 1 | part 2

04/18/23Page 13

Content Editor Workshop

Content EditorUsing Roxen CMS

Part 2Tour of the system

04/18/23Page 14

Tour of the Insite Editor view // What is the Insite Editor?

Introduction | part 1 | part 2

Roxen’s Insite Editor gives you access to modify content by surfing around the pages of your website.

An editable version of your site exists on the “edit server,” which gives limited access to users & groups.

When you are in “edit mode” you will see the Roxen Toolbar at the top of each page.

04/18/23Page 15

Tour of the Insite Editor view // What parts of the page can be changed with Insite Editor?

Introduction | part 1 | part 2

04/18/23Page 16

Tour of the Insite Editor view // What parts of the page cannot be changed from the Insite Editor?

Introduction | part 1 | part 2

04/18/23Page 17

Tour of the Insite Editor view // Description of the standard elements of our templates

Introduction | part 1 | part 2

Elements of our templates:toolbarlogobarbanner -bannerlogo -bannerphotonavalpha (horizontal)navbeta (left)content (center) -headersubcontent (right)footer

04/18/23Page 18

Tour of the Insite Editor view // Enter edit mode - red link in the footer

Introduction | part 1 | part 2

04/18/23Page 19

Tour of the Insite Editor // Surveying the Roxen Toolbar

• Main tab» Name, status area on left

» New

» Edit

» Delete

» Publish/Update

» Revert

» CE (Content Editor view)

» Exit (exit edit mode)

Introduction | part 1 | part 2

04/18/23Page 20

Tour of the Insite Editor // What "saving" and "publishing" mean

• Saved content is visible only to you» Saved content is held in a virtual “sandbox” which is

available to you from any computer with Internet

access.

» You can see your changes only when you are in edit

mode.

» When you exit edit mode, you will see the last

published version of the page (which may not be the

same as your sandbox if you haven’t published).

Introduction | part 1 | part 2

04/18/23Page 21

Tour of the Insite Editor // What "saving" and "publishing" mean

• Published content is visible to others» Published content can be previewed by your work group if

you have a two-step workflow.

» You must enter edit mode in order to preview internally

published pages in a workflow step.

» Publishing on a single step or the final step of a workflow

makes your page visible to the public (only after site launch).

» When you exit edit mode, you can see the version of the

content that is being synchronized to the front-end servers.

» Synchronization can take from 1 to 30 minutes.

» Reverting only works on published content. Caution: If you

revert a page without publishing, your sandbox for this page

is cleared out.

Introduction | part 1 | part 2

04/18/23Page 22

Tour of the Insite Editor // Surveying the Roxen Toolbar

• Properties tab

» Menu

» Permissions

» Languages

» Visibility

» Notification

» Workflow

» Versions

Introduction | part 1 | part 2

04/18/23Page 23

Tour of the Insite Editor // Surveying the Roxen Toolbar

• Tools tab

» Documentation button may be helpful

» See information in the Insite Editor section

Introduction | part 1 | part 2

04/18/23Page 24

Tour of the Insite Editor // Surveying the Roxen Toolbar

• Resolving Editing Conflicts» Conflicts can occur when you have made changes to a page

and then someone publishes different changes to the same

page before you do.

» You will see a “Modified (Conflict)” status message in the Main

tab of the Toolbar.

» An Update button will appear in place of the Publish button.

When you click on that, you can keep or discard changes both

you and the other person made.

» Occasionally, conflicts may need to be resolved through the CE

view instead.

Introduction | part 1 | part 2

04/18/23Page 25

Tour of the Insite Editor // Surveying the Editing Components

• Components

» Toolbar > Main tab > Edit button

» Floating Edit button for some components

» Add/Delete/Copy components

» Rearrange components

» How our components are used

» Component variants - change the look and

sometimes the location of your content

Introduction | part 1 | part 2

04/18/23Page 26

Tour of the Insite Editor // Surveying Editing Component Variants

Introduction | part 1 | part 2

04/18/23Page 27

Content Editor Workshop

Using Roxen Content Management System

Part 3Using the tools

04/18/23Page 28

Using the tools // Editing pages

Introduction | part 1 | part 2

Select a component to edit it

04/18/23Page 29

Using the tools // Editing pages

Introduction | part 1 | part 2

Click on the up or down arrow at left to re-order the components in the page.

04/18/23Page 30

Using the tools // Editing pages

Introduction | part 1 | part 2

Always use the Cancel or Save Page button instead of your browser back button

04/18/23Page 31

Using the tools // Editing pages

Introduction | part 1 | part 2

Floating Edit Button lets you edit some components directly

04/18/23Page 32

Using the tools // Creating new pages

Steps for naming new pages

Introduction | part 1 | part 2

04/18/23Page 33

Using the tools // Creating new pages - TWO steps

Step 2: Alternate way using “+” sign in toolbar (temporarily not functioning properly in dept-edit)

Introduction | part 1 | part 2

IA tip:Use related, memorable, easily spelled words for the URL, menu link title and header. Example:URL: /training/sandbox/evelynMenu link title: Evelyn’s pageHeader: Welcome to Evelyn’s Page

04/18/23Page 34

Using the Editor Components// Adding components

Introduction | part 1 | part 2

• Click on the “Insert” tab and select a component

• Components are organized in top-to-bottom

order on the page

04/18/23Page 35

Using the tools// Adding links

Introduction | part 1 | part 2

• Click on Link icon

IA tip:People who skim a page’s content or who have vision problems may skip straight to link titles, which are highlighted in your content. Take advantage of this by hotlinking the most important concepts versus “click here.”

04/18/23Page 36

Using the tools// Adding links

Introduction | part 1 | part 2

• Internal links = links on the same server

• Example sites on same server: those from today’s training

• Uses “relative URLs”

• Surfing to these sites is best

• External links

• For other Princeton sites and outside sites

• “Absolute URLs” must include http://

• Pasting in the URL occasionally can be faster

04/18/23Page 37

Using the tools// Placing existing photos

Introduction | part 1 | part 2

• Insert or edit a text and picture

component or a sidebar

text and picture component

• Select “Browse & Upload”

• Select a picture name

• Save the text and

picture component

04/18/23Page 38

Using the tools// Uploading and placing new photos

Introduction | part 1 | part 2

• Insert or edit a text and picture component

or a sidebar text and picture component

• Select “Browse & Upload”

• Browse

• Upload

• Select the picture by name

• Save the text and

picture component

04/18/23Page 39

Content Editor Workshop

Using Roxen Content Management System

Part 4Advanced CMS tools

04/18/23Page 40

Advanced CMS tools// Modifying menus - part 1

Introduction | part 1 | part 2

• Surf to highest level under which the menu links appear

• Select the Properties tab

• Select the Menu button

IA tip:Ideally, similar menu links should be kept together in groups of five or fewer. A menu spacer can be inserted for longer contextual menus. This aids in ease of use and remembering link locations.

04/18/23Page 41

Advanced CMS tools// Modifying menus - part 2

Introduction | part 1 | part 2

• Insert Entry or Menu Spacer• Inserting an entry separates it from the

others so it can be moved

• Only needs to be done once

• Move Menu Entry up or down

• Save Menu

• No need to publish it

IA tip:Navigational menus should contain only links to pages in that site or in that section of the site. Menu links to other sites or to documents can be disorienting.

04/18/23Page 42

Advanced CMS tools// Versions and reverting

Introduction | part 1 | part 2

• Click on Revert button on Main tab

• Can revert to all previously published versions

• Reverting creates a new version, vs. erasing the older ones

• Reverting only addresses published versions of content

• It is only available on pages that have been published at least

once and then have been modified afterward

04/18/23Page 43

Advanced CMS tools// Using workflows

Introduction | part 1 | part 2

• Internal vs. external publishing

• Customizable in a "granular" way

• Allows for automatic e-mail notifications

04/18/23Page 44

Advanced CMS tools// Setting page visibility by date

Introduction | part 1 | part 2

• Select Visibility button on Properties tab

• Select visibility: always, never, before or after a specified time,

or during a specified time interval

• Pages that are set not to be visible on the front-end servers

are still visible on the edit server