CQ 5.4 Deep-Dive

5,432 views

Published on

Covering:
- Mobile Device Capability and Device Group
- Configurable roll-out configuration 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

Published in: Technology

CQ 5.4 Deep-Dive

  1. 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. 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. 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. 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. 5. Mobile Page Rendering© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5
  6. 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. 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. 8. Mobile Page Rendering in CQ 5.4 ? Unknown Device HTTP request CQ5© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  9. 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. 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. 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. 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. 13. Mobile Page Rendering Demo© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 13
  14. 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. 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. 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. 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. 18. Optimize your Front-End Demo© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
  19. 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. 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. 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. 22. Work ow-based User Generated Content Handling Demo© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22
  23. 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. 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. 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. 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. 27. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

×