Upload
hannonhill
View
327
Download
1
Embed Size (px)
DESCRIPTION
In this first installment in a three-part webinar series about content editing and reuse in Cascade Server, Bryce Roberts of Stoneridge Corporation discusses one way to set up flexible layouts for your site.
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 advance development for Cascade Server, let’s dive in …
User-configurable Layout
Dynamic page layouts throughdata definitions and formats
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Current SituationRegions, regions, and more
<system-region name=“more”/>
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Hard-coded layouts with rows, columns, and regions ◦ Maintainer’s nightmare◦ Fixed layout
BUT, Cascade Server has an elegant solution …
Current Situation
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
SolutionUser-Configurable Content Layouts
</hassle>
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Flexible layouts
◦ Flexible implementation
◦ Intuitive for most end-users
◦ Supports separation of layout and content
◦ Allows Cascade’s agile nature to shine
Possible Solutions
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Structure data multiple sections, columns, and blocks.
In addition, it includes class configuration on the column.
Flexible Layout - Data Definition
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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”
© 2013 – StoneRidge Corporation
ImplementationHow do we get here?
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Create intuitive, supportive data definitions
Include an non-editable auto-type fields
◦ Type = ‘layout’
Use consistent structures
Flexible Layout
© 2013 – StoneRidge Corporation
Example – Configured Layout
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
<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
© 2013 – StoneRidge Corporation
<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
© 2013 – StoneRidge Corporation
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
© 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
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
© 2013 – StoneRidge Corporation
ConsequencesHaving your cake and having to eat it too
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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