Scottish Legal Aid Board Content Management using OpenCms Martin Spinks CTO Navyblue Tuesday, March 16, 2010

1 Overview of OpenCms™ 2 3 Creating and maintaining pages Editing pages, creating content and using Direct Edit 4 The Workplace Logging in, and finding your way around Publishing changes and Search Publish your changes to the online site

Overview The 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 2 3 Creating and maintaining pages Editing pages, creating content and using Direct Edit 4 The Workplace Logging in, and finding your way around Publishing changes and Search Editing pages, creating content and using Direct Edit

Workplace This 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

Workplace Login 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: You should see a login screen Enter your username and password to access the Workplace The Workplace opens in a POPUP window

Workplace Getting 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

Workplace Navigating 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

Workplace Workplace 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

Workplace Workplace Files Folder window shows information about the files of the folder you are currently viewing 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 2 3 Creating and maintaining pages Editing pages, creating content and using Direct Edit 4 The Workplace Logging in, and finding your way around Publishing changes and Search Editing pages, creating content and using Direct Edit

Editing Pages Edit 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 Pages Using 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 Pages General 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 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 Page Deleting 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.

Navigation Navigation is held in a pages properties All 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 Navigation You 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 folder We 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 Content Re-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 2 3 Creating and maintaining pages Editing pages, creating content and using Direct Edit 4 The Workplace Logging in, and finding your way around Publishing changes and Search Publishing to the live site, searching and finding documents

Publishing Publishing 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: oCheck the links on the page oReport any errors oIndex the document to make it searchable oCache the document if it needs to oSend an if you need it to oMake the page visible to the Online project oPublish any related resources (such as images and documents) Check the live site Demonstration Lets do TUTORIAL 7.

Search Engine The search engine is integrated into the site All pages are searchable and are automatically indexed by OpenCms