#CSUC14

1. Outputting Their Full Potential:
Using Outputs for Site Redesigns and
Development Code Repositories
Justin Klingman
Manager, Web Software Development

2. Sorry, IE Enthusiasts
@JustinVT99 @beacontec #csuc14

3. What We’ll Talk About
Using Outputs for more than just repurposing content
• How Outputs work
– What all can they do?
• Redesigns
– In a Test instance or the Live instance?
– Our preferred method & setup
• Development Code Repository
– Purpose
– Benefits
– Setup
@JustinVT99 @beacontec #csuc14

4. Outputs Overview
• Repurposing Content: COPE
Create Once Publish Everywhere
• Examples:
– HTML (Desktop / Responsive)
– Mobile
– PDF
– XML/RSS
– Print
– Include
– Multiple Languages
@JustinVT99 @beacontec #csuc14
Cascade
Page
Publish

5. Site Redesign Output

6. Redesigns
Where: Within New Cascade Site
• Set up “redesign” website (e.g. http://redesign.my.edu/)
• Develop!
– Create all assets: Templates, Formats, Blocks, etc.
– Create sample folder structure & content
• Implementation
– Freeze publishing of current site
– Manually copy all Cascade & web assets to existing site
– Site architecture changes, if needed
– Publish to “redesign” site and fully test
– Push live
@JustinVT99 @beacontec #csuc14

7. Redesigns
Where: Within Cascade Test Instance
• Set up “redesign” website (e.g. http://redesign.my.edu/)
• Copy Production Cascade database to Test instance
• Develop!
• Implementation
– Freeze publishing of current site
– Manually copy all new/edited Cascade & web assets to Production
instance
– Site architecture changes, if needed
– Publish to “redesign” site and fully test
– Push live
@JustinVT99 @beacontec #csuc14

8. Redesigns
Where: Within Current Cascade Site
• Set up “redesign” website (e.g. http://redesign.my.edu/)
• Create “Redesign” output in all Configuration Sets
• Develop!
• Implementation
– Freeze publishing of current site
– Manually copy all new/edited Cascade & web assets to live outputs
– Site architecture changes, if needed
– Publish site to current test site and fully test
– Push live
@JustinVT99 @beacontec #csuc14

9. Redesigns
Where: Pros & Cons
Solution Pros Cons
Within New
Cascade Site
• Cannot interfere with current site
• Allows for a fresh start
@JustinVT99 @beacontec #csuc14
• Don’t have current site’s architecture and
content to develop/test with
• Lengthy setup – starting from scratch
• Users cannot populate new content until
redesign is implemented in current site
Within Cascade Test
Instance
• Cannot interfere with current site
• Have current site’s architecture and
content to develop/test with (but is not
constantly updated)
• Quick setup
• As development/testing goes on, site’s
architecture and content get stale
• Production implementation: Have to manually
copy all Cascade & web assets from Test to
Prod Cascade instance
• Users cannot populate new content until
redesign is implemented in current site
Within Current Site
“Redesign” Output
• Have current site’s architecture and
content to develop/test with, which is
constantly updated
• Users can populate new content during
development process to save time
• Depending on number of Configuration Sets,
can be a lengthy setup
• Users can see redesign in progress
(is this really a con?)

10. Redesigns
“Redesign” Output: Setup
Cascade
Page
“HTML”
Output
“Redesign”
Output
@JustinVT99 @beacontec #csuc14
Publish
Publish
www.my.edu
test.my.edu
redesign.my.edu
Current Site
Redesign Site

11. Redesigns
“Redesign” Output: Setup
• Set up a dedicated Test website (http://redesign.my.edu/)
– Visible to outside in order to test with mobile devices
• Create new “Redesign” Destination
– Will publish the redesign to the above Test website
– Set permissions to only allow developers/testers access to publish
• Set up “redesign” folder for all Cascade and template-level
web assets (CSS, JavaScript, images, etc.) to be redesigned
@JustinVT99 @beacontec #csuc14

12. Redesigns
“Redesign” Output: Setup
• Copy all Cascade and web assets to “redesign” folder and edit:
– Templates: Change all paths (HTML and Blocks/Formats) to “redesign”
folder
– XHTML Blocks & Formats: Change all paths to “redesign” folder
• Edit each Configuration Set and add “Redesign” Output
– One per layout (e.g. “HTML-Redesign”, “Mobile-Redesign”)
– Settings:
• Template: Same as current Output, but in “redesign” folder
• Publishable: No
• Default Output: No
• Region Blocks and Formats: All point to “redesign” folder
• All other settings should match current Output(s)
@JustinVT99 @beacontec #csuc14

13. Redesigns
“Redesign” Output: Setup
• Data Definitions
– Back up!
• Content Types
– Change each Output to “Select Destinations”
• HTML (Current): Current Destinations
• Redesign: “Redesign” Destination(s)
• Edit each Configuration Set
– In “Redesign” output, enable publishing
• Publish site to “Redesign” & test
@JustinVT99 @beacontec #csuc14

14. Redesigns
“Redesign” Output: Development
• Data Definitions
– Do you have a backup?
– Add new groups/fields
• Begin label with “REDESIGN”
• Use “Restrict to groups” field to
hide from end users
– Do NOT rename or change nesting
of any existing fields
– When populated on pages, data will
only display in “Redesign” output
@JustinVT99 @beacontec #csuc14

15. Redesigns
“Redesign” Output: Development
• Metadata Sets
– Add new fields
• Begin label with “REDESIGN”
• Make “Visible” (not “Inline”) to hide from end users
– When populated on pages, data will only display in “Redesign” output
• Develop!
– Keep good release notes!
@JustinVT99 @beacontec #csuc14

16. Redesigns
“Redesign” Output: Implementation
• “Freeze” publishing for current site
• Copy & replace Cascade and web assets from “redesign”
folders to live folders
– Change paths in Template regions and HTML, XHTML Blocks, Formats
• Data Definitions
– Remove “REDESIGN” labels and “Restrict to Groups” values
– Delete old fields (if applicable)
@JustinVT99 @beacontec #csuc14

17. Redesigns
“Redesign” Output: Implementation
• Metadata Sets
– Make fields “Inline” (if applicable)
• Destinations
– Disable publishing for “Redesign” Destinations
• PUBLISH & TEST!
• Change site architecture (if applicable) & make content
updates
@JustinVT99 @beacontec #csuc14

18. Redesign
“Redesign” Output: Go Live!
• Content Types
– Change “HTML” (current) publishing to original settings
• Configuration Sets
– Delete “Redesign” output – or not???
• Asset Cleanup
• Publish it live!
• Party!
@JustinVT99 @beacontec #csuc14

19. Redesign
“Redesign” Output
Example
@JustinVT99 @beacontec #csuc14

20. Development Code Repository

21. Development Code Repository
Challenge #1: Cascade Template-level Asset Changes
Problem
• Changes to Templates, Blocks, and Formats could be
published by end users before they are ready to go live
Possible Solutions
• Make changes in sandbox or
Test instance
• Disable publishing = Angry user base
• “Dev” Output = Blissfully ignorant
user base
@JustinVT99 @beacontec #csuc14

22. Development Code Repository
Challenge #1: Cascade Template-level Asset Changes
Solution: “Dev” Output
• Same concept and setup as “Redesign” Output
• Copy all Cascade Template-level assets to new “_internal-dev”
folder
– Development on Templates, Blocks, and Formats will take place here
– Initially will be an exact duplicate of current “_internal” folder
@JustinVT99 @beacontec #csuc14

23. Development Code Repository
Challenge #1: Cascade Template-level Asset Changes
Solution: “Dev” Output
• Code and other changes will then be released from "_internal-dev"
to "_internal“
– Similar to releasing files outside of Cascade from Dev to Production
– Unless under development, all code between "_internal-dev" and
"_internal" should match exactly
• Publishing
– "Dev" Outputs: Will publish to Development destinations only
• Set permissions to only allow developers/testers access to publish
– Existing Outputs (e.g. "HTML"): Will publish to Production
destinations only
@JustinVT99 @beacontec #csuc14

24. Development Code Repository
Challenge #1: Cascade Template-level Asset Changes
Solution: “Dev” Output
• Good Release Notes are critical
_internal-dev/formats/analytics
» Copy new format to _internal/formats/analytics
_internal-dev/templates/interior
» Copy code to _internal/templates/interior
» “ANALYTICS” region
• Block: _internal/blocks/no-block
• Format: _internal/formats/analytics
– Is this a pain? Yeah, but…all in the name of quality!
@JustinVT99 @beacontec #csuc14

25. Development Code Repository
Challenge #1: Cascade Template-level Asset Changes
Example
@JustinVT99 @beacontec #csuc14

26. Development Code Repository
Challenge #2: Template-level Web Asset Changes
Problem
• Changes to Template-level web assets (CSS, JS, images) could
be published by users before they are ready to go live
– Even if end users don’t have read or write permissions
• Example: Update header logo with 125th anniversary logo
– Requires new image, CSS layout changes to accommodate larger logo
– Changes made, end user publishes the homepage too soon
– Header is hosed, President is mad, developer was framed!
@JustinVT99 @beacontec #csuc14

27. Development Code Repository
Challenge #2: Template-level Web Asset Changes
Possible Solutions
• Make changes in Test instance or sandbox
• Disable publishing on assets
• Separate “Global” site
Solution: Separate “Global” Site
• Set up new Cascade site that will house these assets
– Assets won’t publish when a page is published
– Only developers have access
@JustinVT99 @beacontec #csuc14

28. Development Code Repository
Challenge #2: Template-level Web Asset Changes
Solution: Separate “Global” Site
• Update all Templates, XHTML Blocks, and Formats to point to
new site’s assets
<link href="site://www.my.edu-Global/css/main.css"
rel="stylesheet" />
• Site publishes back into main website
– Destination settings
• Directory: Same as main site, but add on “global”
• Transport: Same as main site
<link href="/global/css/main.css" rel="stylesheet" />
@JustinVT99 @beacontec #csuc14

29. Development Code Repository
Challenge #2: Template-level Web Asset Changes
Solution: Separate “Global” Site
• Folder structure
– Requires that all files be within the same top-level folder
(e.g. “global”)
– Same as main site, but do not include top-level folder
– Site URL: top level folder name: “/global”
@JustinVT99 @beacontec #csuc14

30. Development Code Repository
Challenge #2: Template-level Web Asset Changes
Example
@JustinVT99 @beacontec #csuc14

31. Questions?
Justin Klingman
jklingman@beacontechnologies.com
@JustinVT99
@JustinVT99 @beacontec #csuc14