Embed Size (px)
DESCRIPTION
Learning Objectives: To understand what is in-context editing and how it is currently implemented in Cascade Server To understand the issues related to configurable layouts with in-context editing To understand the benefits of in-context editing and separating content from layout To understand the general method of implementing in-context editing for configurable layouts
Citation preview
Progressive Enhancements to Improve Content Editing
and ReuseBy Bryce Roberts, MS, MSPH
StoneRidge [email protected]
© 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
Contact Information
© 2013 – StoneRidge Corporation
