Upload
gabriel-walt
View
4.577
Download
1
Embed Size (px)
DESCRIPTION
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
Citation preview
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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.
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
2
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
What’s New in CQ 5.4 – For Developers
§ Mobile Device Capability API
§ Mobile Device Groups con!guration and redirect !lter
§ Read IMAP/POP3 accounts with Polling Importer
§ ClientLibs for web sites
§ Video transcoding with FFmpeg with con!gurable pro!les
§ HTML5 Video Component
§ Extended Work%ow API (Java & REST)
§ Con!gurable roll-out con!guration for LiveCopy
§ Background Tasks API
§ Replication to static !les
§ Reporting Framework
§ Work%ow-based reverse-replication
§ Rendition and Proxy Asset API
§ Wild-card ACLs
§ User Activity Stream API
§ Content Sync Framework
§ Apple Push Noti!cation service
§ jQuery & jQuery Mobile UI Toolkit
§ Updated ExtJS 3.1.1 UI Toolkit
§ Cookie-based authentication (Token-auth)
§ Work%ow-based Form Actions
§ User Pro!le Self-service Form Actions
§ Forum component
§ Work%ow-based UGC moderation
§ Enhanced Portlet to run CQ5 in Portal Server
§ Improved SQL2 query engine
§ Be$er streaming over HTTP for assets
§ Link externalizer service
§ API to implement Mailing Gateways
§ Vault can move nodes with RCP mode
§ Extensible ClickstreamCloud
§ Events Tracking API for SiteCatalyst
3
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
4
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile Page Rendering
5
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile Page Rendering
We are facing:
§ "ousands of devices – with varying capabilities
§ Rare so#ware updates – still, for most devices
6
Unequal capabilities
§ Screen size
§ JS support
§ CSS support
§ Image support
Serve a different design
Server-side feature detection
Need to abstract
away capabilities
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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/
7
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile Page Rendering in CQ 5.4
? HTTP request
Unknown Device
CQ5
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Live Copy
Different %avors of same content
Master Content
Mobile Content
Content in Repository
Mobile Page Rendering in CQ 5.4
Touch Phone Site
Smart Phone Site
Default Site CQ5
HTML Renditions
HTTP request
Device Capabilities (from WURFL) § Supports JS
§ Supports CSS
§ Supports Image
§ Exact Screen Size
§ Supports Device Rotation
§ Etc.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Live Copy Touch Phone Site
Smart Phone Site
Default Site
/site/news.html
Master Content
/content/site/news
Mobile Content
Web Path Node Path
Mobile Page Rendering in CQ 5.4
CQ5
Device Capabilities (from WURFL) § Supports JS
§ Supports CSS
§ Supports Image
§ Exact Screen Size
§ Supports Device Rotation
§ Etc.
/site-mobile/news.smart.html
/site-mobile/news.touch.html
/content/site-mobile/news
Different %avors of same content
HTTP request
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile Page Rendering with Dispatchers
11
Visit site with mobile browser
Dispatchers CQ5
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile Page Rendering with Dispatchers
12
Visit site with mobile browser
Dispatcher forwards request to publish server
Sends back URL to optimized version Dispatchers CQ5
Lookup device list and evaluate device group
Request mobile optimized version
Render device-group speci!c page
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile Page Rendering
13
Demo
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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/
14
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Front-End is about:
§ HTML = Markup + Content
§ CSS = Layout
§ JS = Behavior
Optimize your Front-End
15
CQ5 structures well HTML: § under the content node § under the component node
Client Libraries
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Optimize your Front-End
Client Libraries
§ We have various CSS & JS libraries
16
§ Express relations between client libs
§ dependencies
§ embed
Various optimizations
§ concatenated
§ mini!ed
§ gzipped
Framework
Library A
Library B
Component A
Component B
Component C
Site Design
Publish ClientLib
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Optimize your Front-End
17
Framework
Library A
Library B
Component A
Component B
Component C
Site Design
Publish ClientLib
/
etc
clientlibs
designs
site
apps
site
components
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Optimize your Front-End
18
Demo
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
19
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
User Generated Content – Reverse Replication
20
1
CQ5 Publish
CQ5 Publish
Comment, rating, forum post
2 Stored in repository & in Replication Outbox
3 Check & fetch Outbox content
4 Work"ow-based moderation & spam check
CQ5 Author
Replication to all publish
Internal Network DMZ
5
5
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
User Generated Content - Work%ow-based Reverse Replication
21
1
CQ5 Publish Any user generated
content
2 Stored in repository and add cq:distribute=true !eld
5 Check & fetch Outbox content
6 Optional: Work"ow-based handling & spam check
CQ5 Author
Replication to all publish
7
3 Start ReverseReplication work"ow based on Launcher Con!guration
4 Store in Replication Outbox (this removes cq:distributed)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Work%ow-based User Generated Content Handling
22
Demo
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Targeted Content Delivery with CQ5
23
Request personalized ClickstreamCloud CQ5
Disp
atch
ers
Browser Cookie
Evaluate the ClickstreamCloud
Request page
Request targeted content snippet
Tracking request
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
CQ5 and Adobe Online Marketing Suite
24
SiteCatalyst
Test&Target
CQ5
Fetch PageView stats via WebService
Load pages and context cloud
Send tracking info incl. context and events
ClickMap
Send context and fetch targeted mbox content from offers
Publish offers
Browser [Context JS]
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
§ 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
25
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>
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.
"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:
26
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.