1

AEM 6 APPS AND THE ADOBE DIGITAL PUBL ISH ING SUITE (DPS)

John Fait, Adobe

2

3

4

5

• Mobile • AEM Apps • DPS Integration • Demos

AGENDA

6

• Smart phone use continues to grow • Table use continues to grow • Mobile apps and downloads continues

to grow • Mobile App usage continues to outpace

mobile web

MOBILE TRENDS

7

• Tablets: Time spent per app session is

4X longer than web • Smartphones: Time spent per app

session is 2.5X longer than web

MOBILE TRENDS Tablets vs. Phones

• Phone is go to device for most users • Tablets provide better user

experience and results in longer user sessions

• Tablet users spend more

8

• Multiple platforms • Multiple devices • Rising costs

• Mobile App Management • Mobile Content Management

MOBILE CHALLENGES

9

MOBILE LANDSCAPE

10

MOBILE APP TYPES

Utility apps Content-centric apps

Device-centric: Casual gaming or transaction-based apps that rely heavily on device features Connected tasks: Transaction and task oriented apps such as mobile banking Content-focused: Consumption of content, little/no data entry

11

ADOBE® DIGITAL PUBL ISH ING SUITE (DPS)

“Create, distribute, monetize, and optimize engaging content and publications for mobile devices.”

Brand & retail affinity Sales enablement High-value customer

communication Magazines

12

ADOBE® DIGITAL PUBL ISH ING SUITE (DPS) Platform

13

Pros: • Highly designed content that can be very

engaging and interactive • Creatives have a great deal of freedom Cons: • Slow – custom layout for each article and

orientation • Multiple files for different target devices • Requires InDesign expertise

DPS InDesign Workflow

14

Pros: • Rapid development using templates • Automated creation of multiple formats • Easy content reuse • Content is fully managed • Low barrier to entry for users Cons: • Pixel perfect/complex layouts are difficult

AEM + DPS AEM Workflow

15

AEM 6.0 APPS

+

16

• Single authoring environment for all

channels • Reuse skillsets to manage and develop

sites and apps • Reuse assets across channels and devices • Develop, manage and analyze mobile

apps • Reduce costs, increase consistency

improve brand loyalty

AEM 6.0 APPS Optimized multi channel content delivery

+

17

AEM APPS PhoneGap Enterprise (PGE)

• 5.6 • PhoneGap Build Integration

• 6.0 • AEM Apps Introduced

• 6.0 Mobile Apps Feature Pack (Nov/2014) • AEM Apps *Improved*

• 6.1 (2015) • …

18

AEM APPS PhoneGap Enterprise (PGE)

• Application Command Center • single user interface for managing all aspects of an app’s lifecycle

• App Update Management • update apps directly with app store

• App Content Authoring • Non-developers can easily create and update content using a

touch based, WYSIWYG, drag and drop interface • PhoneGap build integration

• Build apps without a development environment • Adobe Mobile Services Analytics integration

• Track and report app usage • PGE Content Viewer

19

AEM APPS Digital Publishing Suite (DPS)

• 5.5 • InDesign Server Integration introduced

• 5.6 • DPS Integration Introduced

• 6.0 • Multi Folio Support via Livecopy • Touch Publication Console

• 6.0 Mobile Apps Feature Pack (Nov/2014) • Adobe Content Viewer (ACV) Support

• 6.1 (2015) • … *DPS Next

20

AEM APPS Digital Publishing Suite (DPS)

• SPEED • Non-developers can easily create and update content using a touch

based, WYSIWYG, drag and drop interface • Quickly and easily mange content targeting tablets and smartphones

via the Publications Console • View content directly in Adobe Content Viewer (ACV) from AEM, by-

passing Folio Producer • COST

• Reduce multichannel development and distribution costs by reusing existing content and skills

• CONSISTENCY • Ensure content and branch consistency across channels and devices

21

DEMO DPS Integration

• Publish AEM Folio

• Create and Assign DPS Cloud Service to a Folio • Upload Folio from AEM to Folio Producer • View in Folio Producer

• Multi Folio Support • Create Live Copies for multi-device Folio

• ACV preview

22

DEMO Sample Apps

• Content viewers

• Branded • Adobe Content Viewer

• Publications

• Geometrixx Unlimited • CMO.com • CondeNast Vanity Fair

23

KEY TAKEAWAYS

1 DPS as a mobile channel for AEM

content

2 Developers continue using their AEM skills

3 Authors continue to

manage content the AEM way

AEM + DPS Adobe InDesign Server (IDS) Integration

• InDesign • design page layouts for print and/or digital distribution.

• InDesign Server (IDS) • Scripting engine service • automated document creation and processing based on InDesign. • Uses extendscript (similar to javascript)

• AEM integration with InDesign Server 6.0 or higher • proxy worker to communicate with the IDS • scripts stored in AEM, pushed to IDS to execute • scripts can GET and POST back to AEM • Used via workflow process steps

• Uses • extract metadata and generate various renditions for DAM • merge AEM content into InDesign templates

AEM + DPS Integration Details

DPS

AEM DPS Integration

Content Management

Interface

DPS Web Services

AEM + DPS Integration Details

DPS

AEM DPS

Integration

Content Management

Interface

DPS Web Services

Publication Console Workflow Servlet

DPS Page Manager

Content Sync

Sling Rewriter

Cloud Service MSM

DPS Session Service DPS Folio Producer Service

DPS OAUTH Service DPS Folio Producer Service

AEM + DPS Content Integration Details

DPS AEM DPS Integration WCM

Folder

Page

Designs

Folio

Article

ClientLibs Assets

contains

uses

contains

contains

DPSFolio

DPSPage

contains

contains

HTMLResources

contains

uses

contains adaptTo

transform

transform

transform

28

• cq:cloudserviceconfigs

• dps-resourceType=dps:Issue • dps-exportTemplate

• dps-folioId

• dps-* metadata

• folio name is stored as jcr:title • Folio description is stored as

jcr:description

AEM + DPS Folio Properties

29

AEM + DPS Folio Properties : dps-* metadata

30

• dps-resourceType=dps:Article

• dps-articleId

• dps-* metadata

• article name is stored as jcr:title

• article description is stored as jcr:description

AEM + DPS Article Properties

31

AEM + DPS Article Properties : dps-* metadata

32

AEM + DPS Article Properties : dps-* metadata

33

AEM + DPS Article Properties : dps-* metadata

34

• ContentSync for AEM content export • static renderings • link rewriting • transformations

• Folio linked to configurations via property dps-exportTemplate

• ContentSync Configs • dps-folio configuration transforms content in <article>.folio • dps-HTMLResources configuration transforms AEM content into

HTMLResources.zip

AEM + DPS ContentSync configuration for DPS export

35

• Introduced in CQ 5.4 • Render content for export based

on content handler configs • Many OOTB handlers • Supports custom handlers • Export strategies

• Short lived via templates (DPS) • Long lived (PGE)

AEM + DPS ContentSync for Mobile

36

DEMO Folio Aware Component : Scaling Image Component

Problem: Content is not optimized for all devices • iPad targeted assets work on a phone but

can we do better?

Solution: Folio Aware Component • Ex. Scaling Image Component : Server side

scaling and quality adjustment

37

DEMO Folio Aware Component : Scaling Image Component

Details: Servlet to render to target size and quality <RESOURCE_PATH>.img.<FOLIO_SIZE>.<QUALITY>.<EXTENSION> Component: extension of foundation image component ContentSync Export handler: dpspages

{ IF component in Folio THEN change rendering based on Folio metadata ELSE default rendering }

38

DEMO Folio Aware Component : Scaling Image Component

39

DEMO Folio Aware Component : Scaling Image Component

40

DEMO Folio Aware Component : Scaling Image Component

41

DEMO Folio Creation and Content Reuse

Problem: Andrew issued challenge “Can you publish your slides as a DPS App”

Solution: Accept challenge • Enable sub assets in DAM update assets workflow • Create a workflow that creates a folio and

articles from the ingested power point slides • Publish the created folio • View in Adobe Content Viewer

42

DEMO Custom ContentSync Handler

Problem: Where is my content? • Not all content is exported automatically Solution: Custom ContentSync handler • Create a custom handler to export content as

needed

43

DEMO Custom ContentSync Handler

Details: Simple Native video component Component: extension of foundation video component ContentSync Export handler: custom-your-name-here • implement com.day.cq.contentsync.handler.ContentUpdateHandler • [extend com.day.cq.contentsync.handler.AbstractSlingResourceUpdateHandler] • Implement public boolean updateCacheEntry(ConfigEntry configEntry, Long

lastUpdated, String configCacheRoot, Session adminSession, Session userSession){ { FOR each resource under pages jcr:content IF resourceType IN handledResourceTypes THEN render/copy/update into ContentSync cache }

44

T IPS & TR ICKS

• Use RWD & AWD • Manage folio size • Embrace simplicity • Look for existing and new DevNet articles

• Preview /Debug • In AEM • Of file system • On Device

• Logging • Increase logging of com.adobe.cq.media • Redirect DPS_FP_EVENTS & DPS_CQ_EVENTS to dps.log

45

KEY TAKEAWAYS

1 DPS as a mobile channel for AEM

content

2 Developers continue using their AEM skills

3 Authors continue to

manage content the AEM way

46

RESOURCES

• AEM : http://www.adobe.com/solutions/web-experience-management.html • DPS : http://www.adobe.com/ca/products/digital-publishing-suite-enterprise.html • AEM + DPS : http://www.adobe.com/products/digital-publishing-suite-enterprise/adobe-experience-manager.html • AEM + IDS : http://docs.adobe.com/docs/en/cq/current/dam/indesign_server.html

AEM Gems : http://dev.day.com/gems • AEM Forums : http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-

experience-manager.html • DPS DevNet : http://www.adobe.com/devnet/digitalpublishingsuite.html

• http://www.adobe.com/devnet/digitalpublishingsuite/articles/aem-dps-tips-tricks.html • http://www.adobe.com/devnet/digitalpublishingsuite/articles/aem-dps-responsive-design.html • http://www.adobe.com/devnet/digitalpublishingsuite/articles/aem-dps-advanced-topics.html

• Publications • CMO : https://itunes.apple.com/gb/app/cmo-magazine/id813307980?mt=8 • Lord Abbett : https://itunes.apple.com/us/app/lord-abbett-perspectives/id787529379?mt=8 • Vanity Fair iPhone : https://itunes.apple.com/ca/app/vanity-fair-digital-edition/id427270716?mt=8

47

48

CREDITS

• Agenda, http://www.aciaalfenas.com.br • Business, fierceover50.com • Mobile Apps , www.v-softinc.com • Mobile infographics, http://www.dzone.com/ • Watch Demo, www.brianparsley.com • DPS platform, www.perpetualvisions.com • Comb trick, http://cdn.diycozyhome.com • Mobile trick, http://www.iphoneproguide.com/ • Q&A, myrivendell.wordpress.com