COCC User Guide to Web Editing within the Ektron CMS

COCC User Guide to Web Editing within the Ektron CMS

List of Topics Covered in this Guide 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Introduction How to Log In Finding/Adding a Folder Creating Content Web Content Editor Properties of a Content Block Edit in Context Deleting Content Libraries Upload Images Upload Documents Editing/Creating Menus Display Linked Lists Creating & Maintaining Calendars HTML Contact Forms Navigating the Online Help in CMS

1. Introduction - What on earth is a CMS/Ektron/content block? What is Ektron? Although the name conjures images of a campy monster flick (Godzilla vs Ektron?), Ektron is actually the Content Management System (CMS) for COCC s website. A CMS is an application used to create, edit, manage and publish digital media and text. It uses a web based editor that allows us to edit content directly from our browser without the need of installing any web editing software. The Ektron CMS populates web pages based on references to items called content blocks. Within Ektron, content can be written to a content block to appear on a particular web page or a page may reference multiple content blocks (html copy, images, web forms, documents). The CMS pulls the content from those blocks to create the page the visitor will see. This provides us with a site based on dynamic content, rather than static content. So what does this mean to me as a web editor? CMS models offer the same ability to edit content in-page while providing significant advantages. Many custom pagebuilder pages on the COCC site use content that is repeated elsewhere on the site. This is not a phenomenon specific to COCC s site, it is very common among websites of similar size and is particularly common among higher-ed sites. A CMS allows multiple pages to draw information from a common content block. When it comes time to update tuition, or a degree checklist, an editor needs to make the change just once. Every page referring to that information will automatically publish the updated information. What other advantages does Ektron bring to the table? Ektron CMS also has the ability to utilize publishing work-flows. Our web editors have rights to edit specific areas of the OCCC website. Within those areas, they may make edits and choose to save the change as a draft or publish that page to the website for the public to view. With Ektron we can grant permissions for specific users to edit content-blocks and submit the changes to another editor in the department to approve. Once they approve the content in Ektron it will be published. This workflow is all handled through the CMS. What about visitors who view our web on mobile devices? More students than ever are visiting our website using mobile devices such as iphones, ipads, Androids, Kindles etc. Our website uses Responsive Web Design (RWD) to address that audience. Using device detection, media queries and new RWD templates our website automatically scales down and adjust format to fit different sized devices. Menus will condense to a dropdown menu and images can scale or be removed at smaller mobile screen sizes to speed up load time and create a better user experience. Other handy features will be addressed briefly in this guide. This guide is meant to serve as a basic overview to help you get started. As you start diving deeper into your content, structure and navigation Scott Donnell and Barry Rogers will be be happy to answer questions and provide additional training. You can reach us at: Scott Donnell - ext 7709 or sdonnell@cocc.edu Barry Rogers - ext 7769 or brogers1@cocc.edu

2. Logging In So where and how do I log in to start? Steer your browser to the COCC home page: http://www.cocc.edu/ Click on the Employee Login button in the header below the search box. On the Employee Login page, click on the Web Editor icon to access the login area. Click the Login Now button and enter your normal COCC network/email username and password. *See below if you do not yet have edting rights. You are now logged in to the web Content Management System (CMS). You should see the text usernname is logged in. Congratulations! You made it, you re logged into your editor account. To start editing simply click on the Workarea link in the upper right corner to locate your web folder, or navigate to your page and use the edit menu (this is covered in sections below). *Editing Access on COCC Network For security reasons, our authoring pages are only available on our campus network or via Remote Desktop from off campus. *Web Editor Access If you need to edit web pages but have not yet been set up with login access please contact our web admins and they will add you as a web editor and set up folder access.

3. Finding/Adding a Folder Where do I find my content folder? How do I start creating new content? Though basic edits can be done from the page view, the WorkArea is where you can view all content folders and library items such as images and PDF files. From your WorkArea click the Content tab. Usually you ll be creating content in an existing folder. For example this may be a folder specific to your department or program. Subfolders can be created if needed. Using the folder menu on the left you can navigate to your existing department folder. If you need to create a new folder or sub-folder simply select the folder you would like to place your new folder in. If you have permissions for this folder a New button will appear. Click the New button and select Folder. For most new folders using the default property values works great, just change the name appropriately (one or two words is best). After Naming and giving your folder a brief Description click the Add Folder button to create your new folder. *Faculty Office Hours Pages: COCC empoloyees automatically receive a directory listing when hired. Faculty members have the option to request an office hours page. Editor login access will be set up along with a folder in the Faculty and Staff folder. An office hours page will be created and additional pages can be added for bio, course information, links etc.

4. Creating Content I ve got my folder - how do I start creating content? The majority of the pages we ll be creating are content blocks of HTML (Web) content. Make sure you ve selected the folder you would like to place this new content block in. Click the New button and then select HTML Content. This step brings us to the web content editor. Your first step will be to Name the page. A short title works great and it is ok to use spaces. This title will appear as a bold headline on your page and will also be used in the URL (web address). The CMS will automatically convert spaces to hyphens in the URL. For example a page titled About COCC will have a URL of: http://www.cocc.edu/about-cocc/. Below the title you will see tabs for Content, Summary, Meta Data, Aliases, Schedule etc. In the Summary tab, it is best practice to enter a short (one sentence) summary of the page content. This summary will appear below links on our search results page and will help give visitors a quick idea of what the page is about. We will cover other areas such as Metadata, Aliases, Schedule etc. later in this quick guide. Next step... Click the Content Tab and let s add some content.

5. Web Content Editor The Aloha Web Content Editor Ektron cms uses the Aloha Editor for content formatting. The latest version of Aloha offers improved functionality and allows our pages to be more compatible with modern web browsers and mobile devices. The editor was designed with usability in mind and with a little practice it is fairly intuitive and easy to use. It works very well in all modern web browsers (Firefox and Chrome are preferred but IE10+ is okay). With your page open in Edit mode, a yellow or blue border will appear as you hover over the page content area. A blue border appears when you click your cursor on the page in the content area. You are now ready to begin editing. The Aloha Editor contains a toolbar menu, which will appear when you click on an editable content area. If you are familiar with MS Word you will recognize many of the text formatting tools. You will notice the toolbar is simplified and there are tabs to organize actions like Format, Insert and Review. You may type directly into the content area or copy and paste text from another source such as a Word doc or web page. To paste copied content, simply place your cursor in the content area, right click, and choose Paste (or Ctrl/v). Note that images and PDFs cannot be pasted but can be uploaded to the Library and linked to or inserted onto a page. This is covered more later in this guide. The Aloha editor will automatically clean up content to maintain formatting and hyperlinks but remove any extraneous code that may exist behind the scenes. This helps bring in clean code that will display correctly on the web and make it easy to edit in the future. Additional formatting can be done within the web editor. Standard formatting tools such as bold, italics, lists heading styles etc. can be found in the Aloha tool bar in the Format tab. Hover your mouse over the individual icons to reveal tool tips. Bold, Italics, Subscript, Block-quote, Hyperlinks, Lists, Paragraph, Headings Library, Template, Media Table, Special Character, Hyperlink, Bookmark, Abbreviation Horizontal Rule Validate, View Inspector, View Source (HTML code) The toolbar can be pinned to stop floating and lock in one position Click arrow to view more choices

5. Web Content Editor...Continued The Inspector The latest version of Aloha editor now places more formatting options in the main tool bar including COCC custom styles for text colors, size, link styles etc. Inspector The Inspector Tool is still a very handy tool for viewing elements on our web page and accessing additional options and styles. An element may be a headline, paragraph, bulleted list, image or even a table. When you click on content on your page you can then view options in the Inspector. The selected element will appear with a blue background. For example use the Inspector to set a hyperlink to open in a new tab/ window or to set an email link. Code View This is certainly not required but for those of you familiar with HTML, you may also edit the code directly by selecting the View Source button (pair of brackets) located in the Review tab. You ll notice that the code view appears with formatting and is color coded to make it easier to edit. Code view (Not required but handy option for those interested) We will cover other items such as adding Library items like images and documents later in this guide. When you re happy with your content simply click the PUBLISH button to save and make your changes live. If you wish to leave the page without saving any changes be sure to click the Undo Checkout icon so the page will not remain checked out in edit mode to you. Please Note: For security reasons, all our edits are made on an Authoring site. The changes you publish will automatically sync out to the live www.cocc.edu site at the top of each hour. Or web administrators can also activate a sync at other times upon request if needed. Publish Undo Checkout

6. Properties of a Content Block Wow, that s a lot of tabs! What do I do with them all? As you re creating new content or editing existing the number of tabs to control the properties of the content block may be a little imposing. It s good to know that leaving the majority of the values as the default will typically result in a great looking and functioning page. The Content tab holds just that - your content (text, images, links). Here you can edit with the Aloha editor. The Summary tab allows a brief summary to be entered for the content. The summary will show up in site search results and give users an idea of what the page is about. The Metadata tab stores the information tags for the content block. Metadata talks about the information in your content and helps Search Engines understand what your page is all about. It s a great idea to include a Meta Title i.e. Admissions - Central Oregon Community College - Bend Oregon and brief Description of your page here. The Alias tab allows us to manually control the URL aliasing of our content. For example we can create short alias for marketing. If the page url is vert long a short alias might be created to pring on a brochure or postcard. http://www.cocc.edu/business rather than Contact our web admins for assistance. The Schedule tab allows content to be viewable within certain date ranges. This feature can be used to prepublish updates and set a date for that content to go live. It is also useful to set an End Date and select the CMS Refresh Reminder action. This will automatically email a content update reminder to the last editor of the page within 24 hours of the End Date. The Comment tab is not mandatory but can be used to add comments about recent page updates or edits. The templates tab allows you to apply different templates you have permissions to use to your content. In most cases this will be Standard layout with or without a left navigation menu.

6. Properties of a Content Block...Continued The Category tab is a hidden gem. This tab allows us to assign Taxonomy to the content. Let s say our content is regarding placement tests. It may be appropriate to select Recruiting and Registration under the Admissions and Records menu. Maybe even Academic under the Policies menu. Identifying the Taxonomy for the content allows lists specific to the taxonomy category to be retrieved later. We can display these lists to visitors or use them to look for candidates of content to edit when a change has occurred.

7. Edit In Context Is there a faster way to make simple edits? This is an incredibly useful tool within the editing environment. Let s say that a simple typo managed to escape the editor and spell check. Rather than navigate to the content block in your folder menu, make the edit in the Content tab and click Publish to make the edit live there is a much faster way. Make sure that you re logged in, then navigate to the page needing the edit in your web browser. You should see little silver bullet - the AccessPoint (AP). Mouse-over the AP and you ll see this menu appear. Clicking on Edit will open up a new edit window in the WorkArea. However, clicking on Edit in Context allows you to make simple edits directly on the page. The Aloha editor has improved this funtionality and now offers many of the same tools that are used in the full editor. Once in Edit in Context mode, place your cursor anywhere in the page content and a blue border will appear around the editable content area and the tool bar will appear on the page. Once you have made your in context edits, locate the Save button located in the Save/Cancel tab. You can make your edit then click the Save button and your edit will instantly publish (as long as you have the right permissions). It doesn t get much easier! Note: Save is used in Edit in Context - whereas Publish is used when editing in the work area. From the AP menu you may also View History to review the edits/revisions, Delete the page and view the page Properties. In short, you ll learn to love the AP.

8. Deleting Content Whoops - how can I delete that page? You have a few options when it comes to deleting content. Delete a content block - Navigate to the block in your folder menu. Mouse-over the Delete button and then select content. This will take you to a menu where you can designate which content blocks you would like to delete. Check the appropriate boxes and click the Delete button. You ll get one last chance to change your mind - click OK and the content will be deleted. Delete a folder - This option will permanently delete a folder and all content within it including html pages and library items. This option is only available to advanced users and site admins. If you need to have a folder that is not used and you wish to have it deleted please contact our web administrators.

9. Libraries Where can I store images and files? When you are ready to include images in your content or make a pdf accessible to web visitors it is time for us to head to the library. Your Library will house the following items for you to use: Files Forms Hyperlinks Images Quicklinks (Links to our COCC web pages) These items will be at your disposal as you re editing and creating content. In the Aloha editor you can click the Library button to insert any of your stored items quickly. Anytime one of the items is updated, say a Quicklink to another COCC page, the update will automatically be reflected in your page. To access your Library from your WorkArea simply click the Library tab above the folder menu. Once you ve clicked it you may need to navigate to the appropriate Library folder (you ll notice they mirror your content folders). Remember that these Libraries are part of your web-tool arsenal. Anything you place in here will be easy for you to access later as you re editing. If you edit one of the items and re-upload it the changes will be made for each instance you reference it. When you re ready to add an item to one of your libraries select the appropriate sub-library from the dropdown menu and click the Add button. Definitions Files - Files (pdfs, docs) uploaded here are NOT searchable for visitors like documents uploaded as DMS items. Forms - Online forms and surveys. For security reasons online forms can only be created by site admins. Hyperlinks - Any link that you would like to have handy in your library that is to an EXTERNAL site. Images - Not much explanation needed here. Quicklink - Any link to a COCC web page (INTERNAL). By default any HTML content page/block with automatically appear as a quicklink

10. Uploading Images What s the best format/size/way to upload images? The format of an image loaded into Ektron can make a huge difference in the time it takes for a page to load. If the image is large (file size and/or images size) the page will take a longer time to load. If the size has been reduced too much the image quality will suffer. As a general guideline you should keep your web images to 600 pixels or less on its largest dimension and 50k or less in file size. If you have an image larger than these standards use Photoshop or another editor to make the changes (Photoshop has a very fast tool called Save For Web & Devices under the File menu). Ektron will accept.jpg,.gif and.png image file formats. When you have a content block open for editing and are ready to insert an image from your Library simply place your cursor where you would like the image to be inserted and click on the Library button in the Aloha Editor. Once you click the Library icon in the tool bar you ll usually be taken to the most recently updated Library. You may need to navigate to the appropriate Library and Type (image/files/forms...). Find the image you re looking for and you can double-click the image to insert it into your open content block. Now that you ve inserted your image it is a great idea to set the properties for the image in this specific page. In Format Tab the toolbar you may choose styles to position the image left or right on the page. Inspector Tool for images - You can use the Inspector for additional image options such as adding descriptive Alt Text or accessing the Image Editing tool. The Image Editing tool can create a duplicate copy of your image and can be used for cropping, rotating and resizing. Tip: It is best practice to add Alt Text to images to help search engines and screen readers identify what the image is. If not entered this will usually default to the image Title you established when you first uploaded it to the library.

11. Uploading Documents Library document or DMS? You have a couple options when it comes to making files available on the web. It is usually recommended that you publish files in PDF format rather than Word or Excel. Please Note - it s best to remove spaces from document names before uploading. Hyphens or underscores will work fine. Example: file-name-here.pdf #1 - Your first option (described above) is to load the document into your File Library. The document will be easy to link to from the editor as you are creating new content or editing existing content. It s important to know that the content of the documents loaded to your Library will NOT be scanned by the website s search feature. #2 - Your second option is to load the document directly as a content item. Rather than going into your file Library you ll stay under the Content portion of the WorkArea. Click on the New button and then the DMS Document option (DMS=Document Management System). Browse to the document you re uploading then click the Publish button. You have the option of adding properties just like you would with a Content Block such as a Title and Summary. Documents uploaded into the DMS rather than the document Library will be scanned by the website s search feature. Tip: It is best to replace spaces in file names with a hyphen (dash) or underscore. File-name.jpg

12. Editing Menus Pages and docs are live - now I need a menu. You ll really want to hold off on customizing your menus until you have the majority of your content pages in place, even place-holder pages will work. To start, from the content tab navigate to and select the folder in which the menu will exist-this is normally your top-level folder to begin with. Once you have the folder selected click on the View button and then click Menu. This will take you to a list of all menus within that folder. Click on the menu you would like to edit. If you are working in a folder that does not yet have a menu, you can add a new menu, preferably with the same name as the folder. On the following screen you will have buttons available to Add Menu Items, Remove a Menu Item, Reorder Items, View Menu Properties to Delete the Menu. In this example we ll Add an item. Caution: Delete(X) will delete the entire menu. Add Remove Reorder View Props Delete Clicking Add will bring up these options. For the most part you ll be adding either a content item (single page/file) or a SubMenu. A SubMenu will have a title that will expand down with SubMenu items of it s own in an accordion fashion. Selecting a Content Item then Next will take you to a menu that allows you to browse to the specific Content Item. Select the Item then click the Add button and you re done. If you would like to add a SubMenu it just adds one extra step to the process...

12. Editing Menus continued... from the Add New Item menu select SubMenu then click next. I m not showing all of the next menu as you can go into a lot of detail with SubMenus. The important field to complete is the Title. The text you place here is exactly how it will read on-screen. If you want that main button, the accordion label, to link to a page insert that page url into the URL Link field. Leave this field blank if you don t want the menu label (Title) to actually link to a page. A good example of a menu label that links to a page can be found here: http://authoring.ad.cocc.edu/cap-center/ Once you ve complete these fields click Save and you ll go to a blank Add Item page. In this screen you can add Menu Items to your SubMenu. This is an identical process to adding Items to a top level Menu. Creating a New Menu will take you to this same screen. Punch in a name and header link if you want one, save and you re off to start adding in Items. Have fun! PLEASE NOTE: Because menus are cached content, your edits to menu structure and link items may not be immediately viewable on your web page upon saving. Menu changes will generally refresh and appear on your web page within 5-10 minutes. Changes will sync out to the live site at the top of the next hour.

13. Custom Page Builder Pages What is a Page Builder page? Most of our web pages are standard html content pages. But lets say you want to harness the power of Ektron and create a custom page that displays content blocks from multiple existing html pages from different folders on the web. Or perhaps use a widget that could display a content such as a YouTube video, Calendar, or a list of links to all PDF documents in a certain folder. A Page Builder custom page can be created to accomplish that. This can be set up upon request by a website administrator. In essence these pages have drop zones or boxes where content can be displayed and edited. Though the initial set-up is somewhat advanced, editing content on these pages is not difficult and we d be happy to provide training on how to use the tools to create dynamic content. Page builder custom pages are used on the COCC home page, employee and student login pages, Getting Started, Barber Library pages and calendar pages. Editable regions Various Content Widgets Please contact our website administrators if your department would like to have a custom Pagebuilder page set up.

14. Creating & Maintaining Calendars What about adding an Events Calendar? The Ektron software provides a powerful web calendar tool that enables editors to create events and display them on the website. A special calendar folder and display page can be set up upon request by our web administrators. Once a calendar is created, editors can easily add and edit events. The events can then be displayed in Calendar view or even in list view showing a list of links to info about upcoming events. Calendar Events To add events to a calendar, first enter the Workarea and locate the calendar folder you wish to add to. Once you have located the calendar, double click on a date or click the New tab and select Add Calendar Event. This pops open the editor where you ll be able to type a Title, Location and the Description. The Description is the content area where you can add text, links, images etc. Set the date and time of the event and click the Save button to publish. To edit and existing event be sure to click the event title on the calendar to open the event and make updates. If an event is a recurring event you will be prompted to edit the series of events or this date only. Notice that each event also has a related content block. In most cases you will not edit that block unless you want to edit the event summary. Event Recurrences For ongoing events, it is also possible to set options in the recurrence tab. It can be set to appear daily, once a week, etc. This is very handy if the event is an all day event or the same time for each occurrence. For events that happen at random intervals or different times, it may work better to enter them as separate entries so the correct date and time appears to the viewer.

15. HTML Forms Can we create online contact forms? The Ektron software offers advanced functionality for the creation and processing of Online E-mail Forms. Information entered into the form can be sent to one or more email recipients and can also captured in the database. Information stored in the database data can be viewed and exported upon request. Examples of this type of form could be contact forms, service requests, information requests or sign up forms. Online forms require advanced knowledge of the Ektron software tools and can be only be created by our web administrators. These forms are for basic information and cannot encrypt sensitive data. For security reasons Ektron form fields must not include requests for any sensitive data such as Social Security Numbers or Credit Card Numbers. We can use other systems such as Dynamic Forms for secure data. Please submit any requests for online forms to the Banner Help Desk Ticket system. The link can be found on the Employee Login page: http://www.cocc.edu/employee-login/

16. Navigating the online help in the CMS Where can I learn more? The COCC web team is available to offer individual or group training. Also note that there is a help button in the work area that can be clicked any time to access the full Ektron CMS online help manual. Please note that the help section is written for developers as well as web editors so includes more information that most editors will every use but still can be a very handy resource. Simply click the Help tab or the? icon from within the work area and it will open to topics related to the area you are working in. You may also brows topics and use the search feature to access help on other topics. Don t hesitate to contact the web team using the Report a Correction link in the footer of the COCC web or via the Banner Help Ticket system. Scott Donnell Web Designer College Relations 541-383-7709 sdonnell@cocc.edu Barry Rogers Sr. Web Developer Information Technology Services - ITS 541-383-7769 brogers1@cocc.edu