cq 5.4 deep-dive

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

Upload: gabriel-walt

Post on 28-Nov-2014

4.572 views

Category:

Technology


1 download

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

TRANSCRIPT

Page 1: CQ 5.4 Deep-Dive

© 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

Page 2: CQ 5.4 Deep-Dive

© 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

Page 3: CQ 5.4 Deep-Dive

© 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

Page 4: CQ 5.4 Deep-Dive

© 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

Page 5: CQ 5.4 Deep-Dive

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

Mobile Page Rendering

5

Page 6: CQ 5.4 Deep-Dive

© 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

Page 7: CQ 5.4 Deep-Dive

© 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

Page 8: CQ 5.4 Deep-Dive

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

Mobile Page Rendering in CQ 5.4

? HTTP request

Unknown Device

CQ5

Page 9: CQ 5.4 Deep-Dive

© 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.

Page 10: CQ 5.4 Deep-Dive

© 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

Page 11: CQ 5.4 Deep-Dive

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

Mobile Page Rendering with Dispatchers

11

Visit site with mobile browser

Dispatchers CQ5

Page 12: CQ 5.4 Deep-Dive

© 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

Page 13: CQ 5.4 Deep-Dive

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

Mobile Page Rendering

13

Demo

Page 14: CQ 5.4 Deep-Dive

© 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

Page 15: CQ 5.4 Deep-Dive

© 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

Page 16: CQ 5.4 Deep-Dive

© 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

Page 17: CQ 5.4 Deep-Dive

© 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

Page 18: CQ 5.4 Deep-Dive

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

Optimize your Front-End

18

Demo

Page 19: CQ 5.4 Deep-Dive

© 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

Page 20: CQ 5.4 Deep-Dive

© 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

Page 21: CQ 5.4 Deep-Dive

© 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)

Page 22: CQ 5.4 Deep-Dive

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

Work%ow-based User Generated Content Handling

22

Demo

Page 23: CQ 5.4 Deep-Dive

© 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

Page 24: CQ 5.4 Deep-Dive

© 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]

Page 25: CQ 5.4 Deep-Dive

© 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 }

Page 26: CQ 5.4 Deep-Dive

© 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:

§  [email protected]

§  [email protected]

26

Page 27: CQ 5.4 Deep-Dive

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