Progressive Enhancements to Improve Content Editing and Reuse - In-context Editing

609 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
609
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Second in a series. First part was last week and is now available in the webinar series archives on HannonHill.com. And next week on March 19 we’ll take a look at improving in-context editing.
  • Progressive Enhancements to Improve Content Editing and Reuse - In-context Editing

    1. 1. By Bryce Roberts, MS, MSPH StoneRidge Corporation Bryce@stoneridge.net© 2013 – StoneRidge Corporation
    2. 2. • Block Based Content – 3/5 • Configurable Layouts – 3/12 • In-context Editing – 3/19 These are technical presentations on advanced development for Cascade Server. Let‟s dive in …© 2013 – StoneRidge Corporation
    3. 3. Direct Content Editing Link, Presented on Layout© 2013 – StoneRidge Corporation
    4. 4.  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© 2013 – StoneRidge Corporation
    5. 5. <cascading> <blocks> </blocks> </cascading>© 2013 – StoneRidge Corporation
    6. 6. In-context Editing 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© 2013 – StoneRidge Corporation
    7. 7.  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© 2013 – StoneRidge Corporation
    8. 8.  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 …© 2013 – StoneRidge Corporation
    9. 9. Block Based Content Content Blocks/Regions Page Structure Regions Unusual Block Placement© 2013 – StoneRidge Corporation
    10. 10. User-Configurable Layout All Content is now a single region. Missing block icons for all content blocks in the user-configurable layout.© 2013 – StoneRidge Corporation
    11. 11. In-context Content editing </hassle>© 2013 – StoneRidge Corporation
    12. 12.  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 …© 2013 – StoneRidge Corporation
    13. 13.  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© 2013 – StoneRidge Corporation
    14. 14.  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.)© 2013 – StoneRidge Corporation
    15. 15.  Solution ◦ In-context Content Editing  Supports page level flexible layouts  Supports block base content ◦ Distinctive appearance – the “GREEN” pencil  Example – Emory Interior Page© 2013 – StoneRidge Corporation
    16. 16. Flexible Layout - Data Definition No changes necessary in the data definition to enable in-context editing© 2013 – StoneRidge Corporation
    17. 17. In-context Content Editing – Velocity Format Format inserts editing link in a 0x0 div at the top of every content container.© 2013 – StoneRidge Corporation
    18. 18. In-context Content Editing – Layout View Each green pencil links directly to the edit mode of the content block.© 2013 – StoneRidge Corporation
    19. 19. In-context Content Editing Click green pencil takes user directly to content editing screen.© 2013 – StoneRidge Corporation
    20. 20. How do we get here?© 2013 – StoneRidge Corporation
    21. 21. 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© 2013 – StoneRidge Corporation
    22. 22.  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© 2013 – StoneRidge Corporation
    23. 23.  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© 2013 – StoneRidge Corporation
    24. 24. © 2013 – StoneRidge Corporation
    25. 25. © 2013 – StoneRidge Corporation
    26. 26. © 2013 – StoneRidge Corporation
    27. 27. © 2013 – StoneRidge Corporation
    28. 28. © 2013 – StoneRidge Corporation
    29. 29. © 2013 – StoneRidge Corporation
    30. 30. © 2013 – StoneRidge Corporation
    31. 31. © 2013 – StoneRidge Corporation
    32. 32. © 2013 – StoneRidge Corporation
    33. 33. © 2013 – StoneRidge Corporation
    34. 34. © 2013 – StoneRidge Corporation
    35. 35. © 2013 – StoneRidge Corporation
    36. 36. © 2013 – StoneRidge Corporation
    37. 37.  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© 2013 – StoneRidge Corporation
    38. 38. Having your cake and having to eat it too© 2013 – StoneRidge Corporation
    39. 39.  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!© 2013 – StoneRidge Corporation
    40. 40.  No downside for end users, really!  Requires minimal training  Requires significant development to implement  Easier to develop in Velocity than XSLT© 2013 – StoneRidge Corporation
    41. 41. Putting It All Together Block based content User-configurable layouts In-context content editing© 2013 – StoneRidge Corporation
    42. 42.  Block Based Content ◦ Easier to reuse ◦ Validation More  User-configurable Layout Productive ◦ Empower users ◦ Unlimited options Less  In-context Content Editing Frustrated ◦ Fixes block based content ◦ Fixes user-configurable layout ◦ Improves the user‟s experience© 2013 – StoneRidge Corporation
    43. 43. I wouldn‟t be here without you© 2013 – StoneRidge Corporation
    44. 44.  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© 2013 – StoneRidge Corporation
    45. 45. Bryce Roberts, MS, MSPH StoneRidge Corporation 1050 E Piedmont Rd. Suite E-222 Marietta GA, 30062 678-391-6173 Bryce@stoneridge.net www.stoneridge.net© 2013 – StoneRidge Corporation

    ×