Post on 12-Jul-2015
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