This document summarizes new features in Adobe CQ 5.4 for developers. It introduces mobile device capability APIs, client libraries for websites, HTML5 video components, workflow-based reverse replication for user generated content, and integration with Adobe SiteCatalyst for analytics and targeting. The presentation provides demonstrations of mobile rendering, client library optimization, and user generated content workflows.

1. What’s New in CQ 5.4 – Developer Deep-dive
Cédric Hüsler | Gabriel Walt
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

2. Welcome – Goal of this Session
§ anks for your interest to learn more about CQ5 from Adobe
§ e content of this session is targeted to developers and so ware architects
with advanced experience in CQ5.
§ New to CQ5? We recommend this session 1st: h p://adobe.ly/cq54intro
§ Upcoming CQ5 Trainings – check out: h p://bit.ly/cq5training
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2

3. What’s New in CQ 5.4 – For Developers
§ Mobile Device Capability API § Apple Push Noti cation service
§ Mobile Device Groups con guration and redirect lter § jQuery & jQuery Mobile UI Toolkit
§ Read IMAP/POP3 accounts with Polling Importer § Updated ExtJS 3.1.1 UI Toolkit
§ ClientLibs for web sites § Cookie-based authentication (Token-auth)
§ Video transcoding with FFmpeg with con gurable § Work ow-based Form Actions
pro les
§ User Pro le Self-service Form Actions
§ HTML5 Video Component
§ Forum component
§ Extended Work ow API (Java & REST)
§ Work ow-based UGC moderation
§ Con gurable roll-out con guration for LiveCopy
§ Enhanced Portlet to run CQ5 in Portal Server
§ Background Tasks API
§ Improved SQL2 query engine
§ Replication to static les
§ Be er streaming over HTTP for assets
§ Reporting Framework
§ Link externalizer service
§ Work ow-based reverse-replication
§ API to implement Mailing Gateways
§ Rendition and Proxy Asset API
§ Vault can move nodes with RCP mode
§ Wild-card ACLs
§ Extensible ClickstreamCloud
§ User Activity Stream API
§ Events Tracking API for SiteCatalyst
§ Content Sync Framework
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 3

4. What’s New in CQ 5.4 – Topics covered in this Session
§ Mobile Device Capability and Device Group
§ Con gurable roll-out con guration for LiveCopy
§ ClientLibs for web sites
§ HTML5 Video Component and Transcoding Pro les
§ Work ow-based reverse-replication
§ Work ow-based UGC moderation
§ Integration with SiteCatalyst and Events Tracking JS API
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 4

5. Mobile Page Rendering
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5

6. Mobile Page Rendering
We are facing:
§ ousands of devices – with varying capabilities
§ Rare so ware updates – still, for most devices
Unequal capabilities
§ Screen size Serve a different design
Need to abstract
§ JS support
away capabilities
§ CSS support Server-side feature detection
§ Image support
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6

7. Device Capabilities Abstraction
Wireless Universal Resource FiLe
§ Con guration le for all known mobile devices on earth
§ Over 500 capabilities for each device that are broken up into 30 groups
§ Used by many others, such as Facebook
§ is Free and Open Source So ware – h p://wur .sourceforge.net/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7

8. Mobile Page Rendering in CQ 5.4
?
Unknown
Device
HTTP request
CQ5
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

9. Mobile Page Rendering in CQ 5.4
HTML Renditions Content in Repository
HTTP request
CQ5 Default Site Master Content
Live Copy
Touch Phone Site
Mobile Content
Device Capabilities (from WURFL)
§ Supports JS Smart Phone Site Different avors of same content
§ Supports CSS
§ Supports Image
§ Exact Screen Size
§ Supports Device Rotation
§ Etc.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

10. Mobile Page Rendering in CQ 5.4
Web Path Node Path
/site/news.html /content/site/news
HTTP request
CQ5 Default Site Master Content
/site-mobile/news.touch.html Live Copy
Touch Phone Site
/content/site-mobile/news
Mobile Content
Device Capabilities (from WURFL) /site-mobile/news.smart.html
§ Supports JS Smart Phone Site Different avors of same content
§ Supports CSS
§ Supports Image
§ Exact Screen Size
§ Supports Device Rotation
§ Etc.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

11. Mobile Page Rendering with Dispatchers
Visit site with
mobile browser
Dispatchers CQ5
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 11

12. Mobile Page Rendering with Dispatchers
Visit site with Dispatcher forwards Lookup device
mobile browser request to publish server list and evaluate
device group
Sends back URL to
Dispatchers optimized version
CQ5
Request mobile Render device-group
optimized version speci c page
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 12

13. Mobile Page Rendering
Demo
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 13

14. Optimize Rendering Page Speed – Score be er!
• Yahoo! YSlow: h p://developer.yahoo.com/yslow/
• Google Page Speed: h p://code.google.com/speed/page-speed/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 14

15. Optimize your Front-End
Front-End is about:
CQ5 structures well HTML:
§ HTML = Markup + Content § under the content node
§ under the component node
§ CSS = Layout
Client Libraries
§ JS = Behavior
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 15

16. Optimize your Front-End
Client Libraries
§ We have various CSS & JS libraries Framework
Library A
§ Express relations between client libs
§ dependencies Library B
§ embed Component A
Various optimizations Component B
§ concatenated Component C
§ mini ed
Site Design
§ gzipped
Publish ClientLib
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 16

17. Optimize your Front-End
/ Framework
etc Library A
clientlibs Library B
designs Component A
site Component B
apps Component C
site Site Design
components Publish ClientLib
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17

18. Optimize your Front-End
Demo
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

19. ClientLibs cheetsheet
List ClientLib dependencies and embeds
h p://SERVER /libs/cq/ui/content/dumplibs.html
Include JS and CSS in separate les
h p://SERVER/PAGE.html ?debugClientLibs=true
Show Firebug console
h p://SERVER/PAGE.html ?debugConsole=true
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19

20. User Generated Content – Reverse Replication
5 CQ5
Publish 1 Comment, rating,
forum post
3
CQ5 Check & fetch
Outbox content
2 Stored in repository
& in Replication Outbox
Author
5
Replication to
all publish
CQ5
4 Work ow-based
moderation & Publish
spam check
Internal Network DMZ
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20

21. User Generated Content - Work ow-based Reverse Replication
7 Replication to
all publish CQ5
Publish 1 Any user generated
content
5
CQ5 Check & fetch
Outbox content
2 Stored in repository and
add cq:distribute=true
Author eld
3 Start ReverseReplication work ow
based on Launcher Con guration
6 Optional: Work ow-
based handling & 4 Store in Replication Outbox
spam check (this removes cq:distributed)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21

22. Work ow-based User Generated Content Handling
Demo
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22

23. Targeted Content Delivery with CQ5
Request page
Dispatchers
Browser
Request personalized ClickstreamCloud
Cookie
CQ5
Evaluate the Request targeted content snippet
ClickstreamCloud
Tracking request
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23

24. CQ5 and Adobe Online Marketing Suite
CQ5
Load pages and
context cloud
Fetch PageView stats
via WebService
Browser
ClickMap
[Context JS]
Send tracking info incl.
context and events
SiteCatalyst Publish offers
Send context and fetch
targeted mbox content from
offers
Test&Target
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24

25. Send custom events from your component
§ If you want to track events on page load
§ use the record a ribute
§ pass event name as rst parameter, then a JSON object carrying payload (variables and de nition)
§ this will increase the page view count
41 <form action="${currentPage.path}.html" !
42 record="'search', {'keyword': '<c:out value="${search.query}"/>’,
'results':'${result.totalMatches}',
'executionTime':'${result.executionTime}'}">!
43 <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/>!
44 <input value="<fmt:message key="searchButtonText"/>" type="submit"/>!
45 </form>
§ If you want to track events on user interaction
§ use the track() function, if available
§ pass event name as rst parameter, then a JSON object carrying payload (variables and de nition)
§ this will not increase the page view count
49 if (typeof record == "function") {!
50 record("ajaxload", {!
51 url: "http://example.com/ajax",!
52 button: "submit"!
53 })!
54 }
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25

26. ank You
§ Next steps:
§ Download CQ 5.4 and play with it
§ Update your instance to CQ 5.4
§ Existing Customers / Partners – visit DayCare
§ Partners and AEDP members get in on Partner Portal
§ Our contacts:
§ chuesler@adobe.com
§ gwalt@adobe.com
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26

27. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.