progressive enhancements to improve content editing and reuse in cascade server: layouts (part 2 of...

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


These are technical presentations on advance development for Cascade Server, let’s dive in …

User-configurable Layout

Dynamic page layouts throughdata definitions and formats


Basic understanding of user-configurable layout compared to template layout

General benefits of user-configurable layout

How user-configurable layout supports block based content

Limitations of user-configurable layout implementations

Learning Objectives


Current SituationRegions, regions, and more

<system-region name=“more”/>


If all content is in a single WYSIWYG for the page, you only need one region (default region)

If content is block based, you need one region per block included on the page◦ Template creep◦ Fixed layout◦ Better with inline-block regions

Current Situation


Hard-coded layouts with rows, columns, and regions ◦ Maintainer’s nightmare◦ Fixed layout

BUT, Cascade Server has an elegant solution …

Current Situation


Example of a page that has many content system-region for main content.

This example has 15 regions for main content.

Template with Multiple Content Regions


SolutionUser-Configurable Content Layouts

</hassle>


Go back to page content as a single, giant

WYSIWYG block◦ Step backwards! – Not ideal!

◦ Why?

Just add more regions◦ Harder to maintain and support

◦ Requires more training for users

◦ Requires users to edit configuration sets

…

Possible Solutions


Flexible layouts

◦ Flexible implementation

◦ Intuitive for most end-users

◦ Supports separation of layout and content

◦ Allows Cascade’s agile nature to shine

Possible Solutions


Data definition based◦ Row Column Block◦ Can be nested◦ Highly configurable

Lego®-like building of page

Supports grid systems!

Supports content classing and configuration by users

Flexible Layouts


Solution◦ Page level flexible layouts

Unlimited rows Up to two columns Can add style class to column Unlimited blocks

◦ Velocity based format ◦ Supports responsive design◦ Validation (processed only know block types)

Example – Emory Interior Page

Case Example – Emory University


Structure data multiple sections, columns, and blocks.

In addition, it includes class configuration on the column.

Flexible Layout - Data Definition


Format transform for into an arbitrary number of rows, with up to two columns, and an arbitrary number of blocks. The columns are classed for type, style and

position automatically.

Flexible Layout – Velocity Format


This is an example of how to alert a user about a misconfiguration on the page. The alert is only visible inside Cascade Server and is not published

Validation – “Wrong Block Type Selected”


ImplementationHow do we get here?


Identify types of layouts needed and configuration options

Decide if page-level layouts or block-level layouts are needed … or both

Identify types of blocks needed

◦ Examples: Set of links, WYSIWYG, Call to Action, RSS feed, Accordion, Tab, etc.

Flexible Layout


Create intuitive, supportive data definitions

Include an non-editable auto-type fields

◦ Type = ‘layout’

Use consistent structures

Flexible Layout


Example – Configured Layout


Row

Block

Column

<system-data-structure> <text identifier="type" label="Block Type" restrict-to-groups="hidden" default=“layout" required="true"/> <text identifier="title" label="Title"/> <group identifier=“row" label=“Row" multiple="true"> <group identifier=“column" label=“column" multiple="true"> <asset type=“block" identifier=“block"

label=“Content Block” multiple=“true” /> </group></group>

</system-data-structure>

Example – Page Level


Check block type◦ Notify user of errors in block type choice◦ Validate both as a layout and as correct content blocks

Formats must be designed to process multiple types of blocks with one format (or import if using XSLT)

Output should reflect block content – Can include semantic identification and layout information◦ If the input block is a link set, then output a link set.

Format Level Design


Example - Velocity


Example - XSLT


It is all about organization! XSLT

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

◦ Tools are your friend – write components!◦ More verbose that Velocity

Velocity◦ Used macros◦ Test often. It can and will output noncompliant XML

value, making it harder to debug◦ Terse procedural syntax – embrace the style

Implementation Considerations


ConsequencesHaving your cake and having to eat it too


Page layouts are completely configurable!

Better support for editors!

Validation is possible!

Like Lego® blocks, you can build almost anything with flexible, user-configurable layouts

The Good


More steps in the creation of a page

Less intuitive for editing content◦ Block is not on page◦ Layout is separate from content

More initial planning on site setup

Lose Cascade’s in-context support◦ But … just wait until next week.

The Not So Good


Thank you and acknowledgements

I wouldn’t be here without you


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!


Bryce Roberts, MS, MSPH

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

[email protected]

Contact Information


mailto:[email protected]

http://www.stoneridge.net/

progressive enhancements to improve content editing and reuse in cascade server: layouts (part 2 of...

Documents