Scottish Legal Aid BoardContent Management

using

OpenCmsMartin Spinks

CTO Navyblue

Tuesday, March 16, 2010

1 Overview of OpenCms™

23 Creating and maintaining pages

Editing pages, creating content and using Direct Edit

4

The WorkplaceLogging in, and finding your way around

Publishing changes and SearchPublish your changes to the online site

OverviewThe UKTI Websites are built using OpenCms

What does OpenCms do? An Open Source website CMS Create complete websites with highly customized layouts Fully browser based access the CMS with a web browser Enables several users to work on the website as a team

Why did we use OpenCms?

Browser-enabled work environment "Direct edit" from the website preview Project based publishing WYSIWYG editor for unstructured content History to go back to an older version Form based editor for structured content Template mechanism Search engine integrated

1 Overview of OpenCms

23 Creating and maintaining pages

Editing pages, creating content and using Direct Edit

4

The WorkplaceLogging in, and finding your way around

Publishing changes and SearchEditing pages, creating content and using Direct Edit

Workplace

WorkplaceThis is the administration area of OpenCms

You can manage all sites and content from the Workplace

Using the Workplace you can: Create, edit, delete pages and sections Update and modify navigation Publish content Administer users and accounts Create online forms Create structured content for re-use Secure areas of the site Update galleries and website assets

WorkplaceLogin to the Workplace

The Workplace is available online 24/7 To access the workplace you will require a username and

password The Workplace is available at:

http://slab.navyblue.com/system/login/

You should see a login screen Enter your username and password to access the Workplace The Workplace opens in a POPUP window

WorkplaceGetting around

The Workplace is designed to look like windows explorer Shows the contents of the website Content is organised into folders and files (just like

your PC)

There are three main panels on the page Toolbar (at the top) Folder bar (at the left) Folder window (in the middle)

Workplace uses a Virtual File System (VFS) Everything is stored in a database Just think of the WP like windows explorer Files are only created when published

WorkplaceNavigating the Workplace

Getting around the Workplace is simple Click on a page to view it in edit mode Click on a folder to drill down Click (or right click) on icon to get the context menu

Permissions Every user in the system has a set of permissions This controls what they can do, see and update Depending on permissions you may not see everything

Demonstration

WorkplaceWorkplace Toolbar

This is the top most list of buttons in the ToolBar

Projects View the different projects There are two projects Offline and Online

Sites Switch to view a different site

View Switch to a different view

Reload Reload the Workplace

Preferences Set your own preferences

Help Find help using the online help

Logout Logout out of the workplace

Workplace

Workplace Folders

Located on the left hand side Show the folder structure of the

website Does not show the pages

Folder names are identical to website paths

Each folder has a set of Permissions Some folders appear greyed out You cannot edit or view these folders

WorkplaceWorkplace Files

Folder window shows information aboutthe files of the folder you are currentlyviewing

Click on the icon to view CONTEXT MENU

The CONTEXT MENU is your friend

• Lock – The file/folder so no one else can edit it

• Edit – The page

• Copy – The file/folder to a new location

• Rename / Move – The file/folder

• Delete the file• Touch

– The file/folder to mark it as changed• Availability

– Set when the file is published/expires• Permissions• History

– Roll back to an older version• Properties

Workplace

Viewing and locating pages

Folder names and files are the same as the URL of a page

This makes it easy to find a page given a web address

• To view a page just click on it’s name• Opens the page in a new window• This is the Offline version• Any changes you make will not effect the live version of the

site.

Demonstration

Lets do TUTORIAL 1.

1 Overview of OpenCms

23 Creating and maintaining pages

Editing pages, creating content and using Direct Edit

4

The WorkplaceLogging in, and finding your way around

Publishing changes and SearchEditing pages, creating content and using Direct Edit

Editing PagesEdit a Page

Pages in OpenCms are built from Templates

A Template defines the layout of a page Templates can be complex Templates contain no content Templates contain holes to add in content

OpenCms uses Direct Edit to make it easy to update content Makes editing the page easy Find the Direct Edit button Hover over it to see editable content Click on the button to edit content

You can use the WYSIWYG editor to add content

Editing PagesUsing the WYSIWYG Editor

The WYSIWYG editor is just like WORD™

Save changes

Undo and Redo

Paste from Documents

Media and Images

Universal

Formatting

Demonstration

Lets do TUTORIAL 2.

Editing PagesGeneral Guidelines and Rules

Content in the editor should contain very little formatting

This is very important The website style sheets will style up the content Based on the type of element in the page Content is also clean and therefore readable

General Rules Don’t change the FONT (please no Comic Sans!!) Don’t change the colour of the text Don’t scale images down too much Don’t use tables to layout the information

Do use the Paste from WORD™ function Do keep the content tidy

Creating a PageCreating a Page

Pages in OpenCms are built from Templates To create a page or section click New button

Starts the Create Wizard You can create any content from here Select Page with free content Add in properties Click Finish

Workplace uses a colour coding to indicate the state of a page New - BLUE Modified - RED Equivalent - BLACK

Demonstration

Lets do TUTORIAL 3.

Deleting a PageDeleting a Pages and Folders

Sometimes things go wrong Sometime things need to change We can delete documents in the Workplace

Delete a document Open the CONTEXT MENU

Select Delete Document is “stroked though” It has been marked as changed! It’s not been deleted yet!

Un-Delete a document You can undo this operation

Open the CONTEXT MENU Select Un Delete

Document is not deleted until you publish! Document is deleted immediately if it’s not published!

Demonstration

Lets do TUTORIAL 4.

NavigationNavigation

Navigation is held in a pages propertiesAll pages and folder can be added to Navigation Can be set when you create the page Or can be set later, when required

To change or set the Navigation

Option 1• View a pages properties• Check / Un-Check the Add to Navigation• Add in the Navigation text

Option 2• Open the CONTEXT MENU• Select Change NavigationYou can also move the page up and down the Navigation structure

Demonstration

Lets do TUTORIAL 5.

Sections

Creating a section

A section on the site is just a folder The folder should contain at least one page Default page is index.html You can set the default page if you like

Creating a folderWe firstly create a folder in the Workplace• Add in additional information• We’ve created a section on the site• Make sure you add Navigation information

Demonstration

Lets do TUTORIAL 7.

Structured ContentRe-using information in the CMS

Structured Content is another way of updating content Content is structured very specifically for a purpose This is so we can reuse it across the site

Structured Content is: A container for something An XML file with information in it Acts as a template for a thing

The following things are Structured Content: News Events People Mailshots Documents Related Links

Demonstration

1 Overview of OpenCms

23 Creating and maintaining pages

Editing pages, creating content and using Direct Edit

4

The WorkplaceLogging in, and finding your way around

Publishing changes and SearchPublishing to the live site, searching and finding documents

PublishingPublishing changes

All changes are performed on the Offline site Offline is not visible to the outside world (only seen in Workplace) Allows changes to be made and previewed without worrying about them

Publishing a page Open the CONTEXT MENU Click Publish Directly OpenCms will then do the following for you:

o Check the links on the pageo Report any errorso Index the document to make it searchableo Cache the document if it needs too Send an email if you need it too Make the page visible to the Online projecto Publish any related resources (such as images and documents)

Check the live site

Demonstration

Lets do TUTORIAL 7.

Search EngineSearch Engine

The search engine is integrated into the site

All pages are searchable and are automatically indexed by OpenCms