Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

667 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
  • Be the first to comment

  • Be the first to like this

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

×