progressive enhancements to improve content editing and reuse - in-context editing

Progressive Enhancements to Improve Content Editing

and ReuseBy Bryce Roberts, MS, MSPH

StoneRidge CorporationBryce@stoneridge.net

© 2013 – StoneRidge Corporation

Presentations Overview

• Block Based Content – 3/5• Configurable Layouts – 3/12• In-context Editing – 3/19

© 2013 – StoneRidge Corporation

These are technical presentations on advanced development for Cascade Server. Let’s dive in …

In-context EditingDirect Content Editing Link,

Presented on Layout

© 2013 – StoneRidge Corporation

Define in-context editing and current implementation in Cascade

Issues related to block-based content with configurable layouts and in-context editing

Benefits of in-context editing and separating content from layout

General method to implement in-context editing

Limitations of in-context editing implementations

Learning Objectives

© 2013 – StoneRidge Corporation

<cascading><blocks>

</blocks></cascading>

Current Situation

© 2013 – StoneRidge Corporation

In-context editing is a cycle in which content for a page is edited by linking to the asset from the rendered display:

Select block Click Edit Icon Edit & Submit Changes

In-context Editing

© 2013 – StoneRidge Corporation

Cascade Server adds a block icon for every system region with an assigned block.

These block icons provide in-context editing for all system regions

The block can appear in unusual locations depending on the template structure

Current Situation

© 2013 – StoneRidge Corporation

Block-based content with template regions◦ Content blocks appear with page structure block

Confusing to some end users Content blocks appear identical to structure blocks

◦ Can greatly increase the number of icons on the layout

User-configurable Layout◦ All block content in a layout appears as a single region◦ Must navigate to layout before going to block

BUT, Cascade Server has an elegant solution …

Current Situation

© 2013 – StoneRidge Corporation

Content Blocks/Regions

Page Structure Regions

Unusual Block Placement

Block Based Content

© 2013 – StoneRidge Corporation

All Content is now a single region. Missing block icons for all content blocks in the user-configurable layout.

User-Configurable Layout

© 2013 – StoneRidge Corporation

SolutionIn-context Content editing

</hassle>

© 2013 – StoneRidge Corporation

Go back to page content as a single, giant WYSIWYG block◦ Step backwards! – Not ideal!

◦ Why?

◦ Not easier for editing isolated content pieces

Go back to template level layout◦ Step backwards! – Even worse!

◦ Why?

◦ Lose all the benefits of user-configurable layouts

…

Possible Solutions

© 2013 – StoneRidge Corporation

In-context content editing

◦ Flexible implementation

◦ Intuitive for most end-users

◦ Supports separation of layout and content

◦ Allows Cascade’s agile nature to shine

◦ Extends Cascade’s user interface

Possible Solutions

© 2013 – StoneRidge Corporation

Dynamically inserted◦ Editing link based on content blocks in layout

Supports user-configurable layouts

Distinctive from page structure blocks

Improves end-user experience by associating display with content editing. (Less guessing.)

In-context Content

Editing

© 2013 – StoneRidge Corporation

Solution◦ In-context Content Editing

Supports page level flexible layouts Supports block base content

◦ Distinctive appearance – the “GREEN” pencil

Example – Emory Interior Page

Case Example – Emory University

© 2013 – StoneRidge Corporation

No changes necessary in the data definition to enable in-context editing

Flexible Layout - Data Definition

© 2013 – StoneRidge Corporation

Format inserts editing link in a 0x0 div at the top of every content container.

In-context Content Editing – Velocity Format

© 2013 – StoneRidge Corporation

Each green pencil links directly to the edit mode of the content block.

In-context Content Editing – Layout View

© 2013 – StoneRidge Corporation

Click green pencil takes user directly to content editing screen.

In-context Content Editing

© 2013 – StoneRidge Corporation

ImplementationHow do we get here?

© 2013 – StoneRidge Corporation

Before you start …

Utilize block-based content (1st presentation)

Utilize user-configurable layout (2nd presentation)

Get organized. Keep all content blocks together.

Well developed, modular code

◦ Velocity – Macros

◦ XSLT– Imported Stylesheets

Map tool very helpful to create

In-context Content Editing

© 2013 – StoneRidge Corporation

Decide on a ‘key’ for identifying blocks◦ Path◦ Link◦ Name◦ Custom-ID

Create content index

Create a map tool if using XSLT

Create easy to identify icon

In-context Content Editing

© 2013 – StoneRidge Corporation

Create Content Key-ID map◦ Use key to associate with ID◦ Handle duplicate keys with error

Add in-context content editing logic to processing code module

Verify success with each block type◦ Important to check position of in-context edit icon◦ May need to adjust icons based on content block

Format Level Design

© 2013 – StoneRidge Corporation

Example - Velocity

© 2013 – StoneRidge Corporation

Example - Velocity

© 2013 – StoneRidge Corporation

Example - Velocity

© 2013 – StoneRidge Corporation

Example - Velocity

© 2013 – StoneRidge Corporation

Example - Velocity

© 2013 – StoneRidge Corporation

Example - Velocity

© 2013 – StoneRidge Corporation

Example - XSLT

© 2013 – StoneRidge Corporation

Example - XSLT

© 2013 – StoneRidge Corporation

Example - XSLT

© 2013 – StoneRidge Corporation

Example - XSLT

© 2013 – StoneRidge Corporation

Example - XSLT

© 2013 – StoneRidge Corporation

Example - XSLT

© 2013 – StoneRidge Corporation

Example - XSLT

© 2013 – StoneRidge Corporation

It is all about organization! XSLT

◦ Use import to keep the parts of your code separate Modularity

◦ Tools are your friend – write components! Map Tool Node Key Tool

◦ More verbose that Velocity Velocity

◦ Use macros◦ Terse procedural syntax – embrace the style

Implementation Considerations

© 2013 – StoneRidge Corporation

ConsequencesHaving your cake and having to eat it too

© 2013 – StoneRidge Corporation

Content editing is in-context!

More intuitive for editors!

Overcome limitations of user-configurable layouts!

The best context for content editing is in-context ;)

Requires minimal training!

The Good

© 2013 – StoneRidge Corporation

No downside for end users, really!

Requires minimal training

Requires significant development to implement

Easier to develop in Velocity than XSLT

The Not So Good

© 2013 – StoneRidge Corporation

Block based content

User-configurable layouts

In-context content editing

Putting It All Together

© 2013 – StoneRidge Corporation

Block Based Content◦ Easier to reuse◦ Validation

User-configurable Layout◦ Empower users◦ Unlimited options

In-context Content Editing◦ Fixes block based content◦ Fixes user-configurable layout◦ Improves the user’s experience

What does it all mean?

© 2013 – StoneRidge Corporation

More Productive

Less Frustrated

Thank you and acknowledgements

I wouldn’t be here without you

© 2013 – StoneRidge Corporation

Emory University◦ For being a great client whose challenging needs

and great ideas drive great solutions Hannon Hill

◦ For continuing to develop and add wonderful features to Cascade Server

◦ For nurturing a wonderfully vibrant user community

John, Kat and Holly◦ For making this presentation possible and for all

your support of the series

Thank you!

© 2013 – StoneRidge Corporation

Bryce Roberts, MS, MSPH

StoneRidge Corporation1050 E Piedmont Rd.Suite E-222Marietta GA, 30062

678-391-6173Bryce@stoneridge.netwww.stoneridge.net

Contact Information

© 2013 – StoneRidge Corporation