Developing for Mobile Devices in Magnolia

577 views

Published on

This presentation was given at Amplify Miami 2014 by Samuel Schmitt, Senior Consultant at Magnolia International.

Mobile technology continues to change how we consume and create content on a daily basis.

That's why Magnolia 5 was built from the ground up to manage multiple themes for virtually any type of mobile device. Now you can manage, create and publish content to all of your channels - including mobile - and with a minimum of effort.

This presentation will explore how to define mobile themes, modify mobile templates, and create channels for devices (Android, iPhone, Windows Phone). Our Senior Consultant Samuel Schmitt will take you through the entire process - from mobile authoring on a tablet to native apps that connect with Magnolia to instant mobile sites.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
577
On SlideShare
0
From Embeds
0
Number of Embeds
89
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Developing for Mobile Devices in Magnolia

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1 Create content wherever you are 4 Tuesday, March 18, 14
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd. How does it work? 8 Tuesday, March 18, 14
  9. 9. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd. How does it work? 8 Tuesday, March 18, 14
  10. 10. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd. How does it work? 8 Tuesday, March 18, 14
  11. 11. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd. How does it work? 8 Tuesday, March 18, 14
  12. 12. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1 Publishing for mobile 9 Tuesday, March 18, 14
  13. 13. 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
  14. 14. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1 Instant mobile sites with Magnolia 11 Tuesday, March 18, 14
  15. 15. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd. Instant mobile sites 12 Tuesday, March 18, 14
  16. 16. 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
  17. 17. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1 Deeper look at Instant Mobile 14 Tuesday, March 18, 14
  18. 18. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.15 Deeper look at Instant Mobile Tuesday, March 18, 14
  19. 19. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.15 Deeper look at Instant Mobile Tuesday, March 18, 14
  20. 20. 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
  21. 21. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd. Variation: Control areas to display 17 Disable / Enable areas by configuration Tuesday, March 18, 14
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.21 Variation and Site Definition Tuesday, March 18, 14
  26. 26. 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
  27. 27. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.22 Deeper look at Instant Mobile Tuesday, March 18, 14
  28. 28. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.22 Deeper look at Instant Mobile Tuesday, March 18, 14
  29. 29. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.22 Deeper look at Instant Mobile Tuesday, March 18, 14
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1 And now? 24 Tuesday, March 18, 14
  35. 35. All characters appearing in this work are fictitious. Any resemblance to real persons, living or dead, is purely coincidental Tuesday, March 18, 14
  36. 36. Tuesday, March 18, 14
  37. 37. Few weeks after Miami Amplify 2014 Tuesday, March 18, 14
  38. 38. In the office of the Big Boss of a Super Great Website done with Magnolia Tuesday, March 18, 14
  39. 39. Tuesday, March 18, 14
  40. 40. Tuesday, March 18, 14
  41. 41. John, could you come over here Tuesday, March 18, 14
  42. 42. John, could you come over here Tuesday, March 18, 14
  43. 43. John, could you come over here Yes, Mr. Big Boss. How can I help you? Tuesday, March 18, 14
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. Tuesday, March 18, 14
  51. 51. Few minutes later Tuesday, March 18, 14
  52. 52. In the IT Department Tuesday, March 18, 14
  53. 53. Tuesday, March 18, 14
  54. 54. Tuesday, March 18, 14
  55. 55. Tim, Jim! We got a request from the Big Boss Tuesday, March 18, 14
  56. 56. Tim, Jim! We got a request from the Big Boss WHAT?? A request?? Tuesday, March 18, 14
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. 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
  69. 69. 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
  70. 70. 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
  71. 71. 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
  72. 72. 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
  73. 73. 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
  74. 74. Tuesday, March 18, 14
  75. 75. Tuesday, March 18, 14
  76. 76. Tuesday, March 18, 14
  77. 77. 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
  78. 78. 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
  79. 79. 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
  80. 80. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1 Native App and Magnolia 34 Tuesday, March 18, 14
  81. 81. 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
  82. 82. 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
  83. 83. 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
  84. 84. 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
  85. 85. 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
  86. 86. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1 OOTB Template Ipad Authoring Apps REST Observation Mutli mobile site Theme Variation Native app JSON Channel Device Detection The Journey is Over 38 Instant Mobile Preview OOTB Tailored Rendering Tuesday, March 18, 14
  87. 87. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1 Questions 39 Tuesday, March 18, 14

×