developing for mobile devices in magnolia
Post on 10-May-2015
227 Views
Preview:
DESCRIPTION
TRANSCRIPT
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Samuel Schmitt, Technical Account Manager @ Magnolia February 20, 2014
1
Developing for Mobile Devices in Magnolia
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.2
Mobile Devices and Magnolia
• Today mobile is everywhere
• We are all consuming information from a mobile device
• Publishing information from a mobile
• Using Web app or Native app
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.3
Mobile Devices and Magnolia
• This presentation is a journey into the “mobile” aspects of Magnolia
• Mobile authoring on a tablet• Instant publication on mobile• Multi mobile site development • Native app with Magnolia
Tuesday, March 18, 14
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Create content wherever you are
4
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.5
Create content wherever you are
• I’m a journalist for a news website
• I have to write many stories every day
• I’m never working from my office
• Always on the road with my iPad
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.6
Create content wherever you are
Magnolia CMS allows you to create and manage content on the tablet, just as easily as on the desktop
Whether you're on the iPad...... or at the desktop, Magnolia gives you an optimized CMS user
experience
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
7
•Create a new content app•Create a dedicated workspace•Create a form / dialog
•Create a new component•Model returns list of Article•Component set on a page
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
8
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
8
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
8
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
8
Tuesday, March 18, 14
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Publishing for mobile
9
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.10
Publishing for mobile with Magnolia
• Go mobile instantly
• Content formatted and optimized to match device capabilities
• Out of the box. Standard Templating Kit (STK) includes mobile website templates
• Mobile preview for smartphones and tablets such as iPad
Tuesday, March 18, 14
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Instant mobile sites with Magnolia
11
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Instant mobile sites
12
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Benefits of Instant Mobile feature
• Publish for desktop and mobile at the same time
• Avoid duplication of content
• No multiple site to maintain
• SEO Friendly, same URL for mobile and desktop
• Already here!!
13
Tuesday, March 18, 14
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Deeper look at Instant Mobile
14
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.15
Deeper look at Instant Mobile
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.15
Deeper look at Instant Mobile
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.16
Same page but different rendering
Variation:•Control pages areas to display•Define HTML Structure•Define CSS, JS to use•Control size of images
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Variation: Control areas to display
17
Disable / Enable areasby configuration
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Variation: Define HTML Structure
18
Change HTML of pages templates
and components templates
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Variation: Define CSS, JS to use
19
Mobile theme
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Variation: Control size of images
20
Imaging module
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.21
Variation and Site Definition
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.21
Variation and Site Definition
Add a variation in a site definition
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.22
Deeper look at Instant Mobile
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.22
Deeper look at Instant Mobile
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.22
Deeper look at Instant Mobile
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Mobile Rendering Process
23
1. Info about mobile device set in the context.
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Mobile Rendering Process
23
1. Info about mobile device set in the context.
2. Device channel resolved, set Channel / Variation name in the Aggregation state
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Mobile Rendering Process
23
1. Info about mobile device set in the context.
2. Device channel resolved, set Channel / Variation name in the Aggregation state
3. Merge of the site definition with the variation
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Mobile Rendering Process
23
1. Info about mobile device set in the context.
2. Device channel resolved, set Channel / Variation name in the Aggregation state
3. Merge of the site definition with the variation
4. Render the content
Tuesday, March 18, 14
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
And now?
24
Tuesday, March 18, 14
All characters appearing in this work are fictitious.
Any resemblance to real persons, living or dead, is purely
coincidental
Tuesday, March 18, 14
Tuesday, March 18, 14
Few weeks after Miami Amplify 2014
Tuesday, March 18, 14
In the office of the Big Boss of a Super Great Website
done with Magnolia
Tuesday, March 18, 14
Tuesday, March 18, 14
Tuesday, March 18, 14
John, could you come over here
Tuesday, March 18, 14
John, could you come over here
Tuesday, March 18, 14
John, could you come over here
Yes, Mr. Big Boss. How can I help you?
Tuesday, March 18, 14
John, could you come over here
Yes, Mr. Big Boss. How can I help you?I bought the
new Samsung Galaxy to my wife
Tuesday, March 18, 14
John, could you come over here
Yes, Mr. Big Boss. How can I help you?I bought the
new Samsung Galaxy to my wife
And ???
Tuesday, March 18, 14
John, could you come over here
Yes, Mr. Big Boss. How can I help you?I bought the
new Samsung Galaxy to my wife
And ??? I just
realized that our website is not optimized for
Samsung
Tuesday, March 18, 14
John, could you come over here
Yes, Mr. Big Boss. How can I help you?I bought the
new Samsung Galaxy to my wife
And ??? I just
realized that our website is not optimized for
Samsung
Euh.... And ???
Tuesday, March 18, 14
John, could you come over here
Yes, Mr. Big Boss. How can I help you?I bought the
new Samsung Galaxy to my wife
And ??? I just
realized that our website is not optimized for
Samsung
Euh.... And ???
Please do something !!
Tuesday, March 18, 14
John, could you come over here
Yes, Mr. Big Boss. How can I help you?I bought the
new Samsung Galaxy to my wife
And ??? I just
realized that our website is not optimized for
Samsung
Euh.... And ???
Please do something !!
Ok Big Boss !! I come back to you in few
days with a solution
Tuesday, March 18, 14
Tuesday, March 18, 14
Few minutes later
Tuesday, March 18, 14
In the IT Department
Tuesday, March 18, 14
Tuesday, March 18, 14
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Ah. Yes !!
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Ah. Yes !!We have to update the device detection filter.
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Ah. Yes !!We have to update the device detection filter.
Add a new channel and a new variation.
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Ah. Yes !!We have to update the device detection filter.
Add a new channel and a new variation.
A new theme and that’s it !!
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Ah. Yes !!We have to update the device detection filter.
Add a new channel and a new variation.
A new theme and that’s it !!
Great guys. I can see that we have a solution.
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Ah. Yes !!We have to update the device detection filter.
Add a new channel and a new variation.
A new theme and that’s it !!
Great guys. I can see that we have a solution.
How long it will take?
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Ah. Yes !!We have to update the device detection filter.
Add a new channel and a new variation.
A new theme and that’s it !!
Great guys. I can see that we have a solution.
How long it will take?
Mmm...
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Ah. Yes !!We have to update the device detection filter.
Add a new channel and a new variation.
A new theme and that’s it !!
Great guys. I can see that we have a solution.
How long it will take?
Mmm...
About 3 days
Tuesday, March 18, 14
Tim, Jim! We got a request from
the Big Boss
WHAT?? A request??
Yes. We have to build a new site for Samsung
Galaxy
Why
WT****
Guys, please. We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?Do you
remember what the French said in
Miami?
When? At the Bar
No during his great presentation
Ah. Yes !!We have to update the device detection filter.
Add a new channel and a new variation.
A new theme and that’s it !!
Great guys. I can see that we have a solution.
How long it will take?
Mmm...
About 3 days Ok Great. Then I will say to the Big Boss that it will be ready in 2 weeks
Tuesday, March 18, 14
Tuesday, March 18, 14
Tuesday, March 18, 14
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
What Tim and Jim did
31
New deviceDetection filter that handle Samsung device
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
What Tim and Jim did
32
New “samsung” channel
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
What Tim and Jim did
33
New variation “samsung” using another theme
Tuesday, March 18, 14
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Native App and Magnolia
34
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.35
Native App and Magnolia
• Native app
• iOS App• Android App
• Advantages compare to Mobile web app
• Take full advantage of all the device features• Use the device’s notification system• Can work offline
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.36
Native App and Magnolia - Use cases
• I must be able to write articles even without internet connection and publish them automatically to my site
• I want to enrich my native app with content coming from different sites
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
37
Create a new iOS app
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
37
Create a new iOS app
Author
Magnolia
JCR
REST API
name: “image”, JSON“properties”: [ { “title”:”The title”,
“more”: “properties”}]
Create a new Asset in DAM
Tuesday, March 18, 14
Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
37
Create a new iOS app
Author
Magnolia
JCR
REST API
name: “image”, JSON“properties”: [ { “title”:”The title”,
“more”: “properties”}]
Create a new Asset in DAM
Display specific Asset folder in a page
Tuesday, March 18, 14
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
OOTB
Template
Ipad AuthoringApps
REST
Observation
Mutli mobile siteTheme
Variation
Native appJSON
Channel
Device Detection
The Journey is Over
38
Instant MobilePreview
OOTB
Tailored Rendering
Tuesday, March 18, 14
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Questions
39
Tuesday, March 18, 14
top related