developing for mobile devices in magnolia

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



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



Create content wherever you are

4




• 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




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


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



How does it work?

8



Publishing for mobile

9



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



Instant mobile sites with Magnolia

11



Instant mobile sites

12



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



Deeper look at Instant Mobile

14



Same page but different rendering

Variation:•Control pages areas to display•Define HTML Structure•Define CSS, JS to use•Control size of images



Variation: Control areas to display

17

Disable / Enable areasby configuration



Variation: Define HTML Structure

18

Change HTML of pages templates

and components templates



Variation: Define CSS, JS to use

19

Mobile theme



Variation: Control size of images

20

Imaging module



Variation and Site Definition



Variation and Site Definition

Add a variation in a site definition



Mobile Rendering Process

23

1. Info about mobile device set in the context.




23


2. Device channel resolved, set Channel / Variation name in the Aggregation state




23



3. Merge of the site definition with the variation




23



3. Merge of the site definition with the variation

4. Render the content



And now?

24


All characters appearing in this work are fictitious.

Any resemblance to real persons, living or dead, is purely

coincidental


Few weeks after Miami Amplify 2014


In the office of the Big Boss of a Super Great Website

done with Magnolia


John, could you come over here



Yes, Mr. Big Boss. How can I help you?



Yes, Mr. Big Boss. How can I help you?I bought the

new Samsung Galaxy to my wife





And ???





And ??? I just

realized that our website is not optimized for

Samsung





And ??? I just


Samsung

Euh.... And ???





And ??? I just


Samsung

Euh.... And ???

Please do something !!





And ??? I just


Samsung

Euh.... And ???

Please do something !!

Ok Big Boss !! I come back to you in few

days with a solution


Few minutes later


In the IT Department


Tim, Jim! We got a request from

the Big Boss



the Big Boss

WHAT?? A request??



the Big Boss

WHAT?? A request??

Yes. We have to build a new site for Samsung

Galaxy



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****

Guys, please. We are using Magnolia.

It must be easy.



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you

remember what the French said in

Miami?



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar

No during his great presentation



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar


Ah. Yes !!



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar


Ah. Yes !!We have to update the device detection filter.



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar



Add a new channel and a new variation.



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar




A new theme and that’s it !!



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar





Great guys. I can see that we have a solution.



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar






How long it will take?



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar







Mmm...



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar







Mmm...

About 3 days



the Big Boss

WHAT?? A request??


Galaxy

Why

WT****


It must be easy.

Tim?

Yes, Jim?Do you


Miami?

When? At the Bar







Mmm...

About 3 days Ok Great. Then I will say to the Big Boss that it will be ready in 2 weeks



What Tim and Jim did

31

New deviceDetection filter that handle Samsung device




32

New “samsung” channel




33

New variation “samsung” using another theme



Native App and Magnolia

34



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



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



How does it work?

37

Create a new iOS app



How does it work?

37


Author

Magnolia

JCR

REST API

name: “image”, JSON“properties”: [ { “title”:”The title”,

“more”: “properties”}]

Create a new Asset in DAM



How does it work?

37


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



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



Questions

39


developing for mobile devices in magnolia

Technology

magnolia international

magnolia cms

registered trademark

mobile devices

mobile theme

instant mobile sites

new content app

duplication of content