Your SlideShare is downloading. ×
0
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Jahia mobile webinar v2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jahia mobile webinar v2

7,391

Published on

Slides from the Webinar "Jahia Mobile" given by Serge Huber, Jahia CTO

Slides from the Webinar "Jahia Mobile" given by Serge Huber, Jahia CTO

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

  • Be the first to like this

No Downloads
Views
Total Views
7,391
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Jahia Mobile Webinar<br />Serge Huber, CTO<br />shuber@jahia.com<br />© 2002-2011 Jahia Solutions Group SA<br />
  • 2. Using HTML to build mobile views<br />HTML Rendering<br />© 2002-2011 Jahia Solutions Group SA<br />
  • 3. Multi-channel<br />Android<br />iPhone<br />
  • 4. Default scaling<br /><ul><li>Proper default scale
  • 5. Reduce need to zoom in and out (or prevent it)</li></li></ul><li>Orientation support<br />
  • 6. Demo<br />HTML Rendering<br />© 2002-2011 Jahia Solutions Group SA<br />
  • 7. How it works<br />HTML Rendering<br />© 2002-2011 Jahia Solutions Group SA<br />
  • 8. User agent matching<br />User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1_1 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A345 Safari/525.20<br /> <bean class="org.jahia.services.render.filter.UserAgentFilter"><br /><property name="priority" value="6" /><br /><property name="applyOnModes" value="live,preview" /><br /><property name="applyOnConfigurations" value="page" /><br /><property name="userAgentMatchingRules"><br /> <map><br /><entry key=".*iPhone.*" value="iphone" /><br /><entry key=".*iPod.*" value="iphone" /><br /> <entry key=".*iPad.*" value="iphone" /><br /> <entry key=".*Android.*" value="iphone" /><br /> </map><br /></property><br /> </bean><br />html-iphone<br />Output channel<br />
  • 9. Output channels<br />Default output channel : HTML<br />Called from URL extensions part:<br />http://localhost:8080/cms/*.html<br />Other possible channels:<br /><ul><li>RSS
  • 10. CSV
  • 11. XML
  • 12. Mobile channels using Extensions (*-iphone)</li></li></ul><li>Default output channel<br />Default output channel view file : html/template.templates-web-blue.jsp : <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><%@ page language="java" contentType="text/html;charset=UTF-8" %><br />…<br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${fn:substring(renderContext.request.locale,0,2)}"><br /><head><br /> …<br /></head><br /> <br /><body><br /> <br /><div class="bodywrapper"><!--start bodywrapper--><br /> <template:area path="pagecontent"/><br /></div><br /><!--stop bodywrapper--><br /> <br /><c:if test="${renderContext.editMode}"><br /> <template:addResources type="css" resources="edit.css" /><br /></c:if><br /><template:addResources type="css" resources="960.css,01web.css,02mod.css,navigationN1.css,navigationN2-2.css"/><br /><template:theme/><br /> <br /></body><br /></html><br />
  • 13. iPhone output channel<br />Now let’s look at the html-iphone/template.template-web-blue.jsp : <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />….<br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${fn:substring(renderContext.request.locale,0,2)}"><br /><head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><br /> <meta name="apple-mobile-web-app-capable" content="yes" /><br /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><br />…<br /></head><br />
  • 14. iPhone output channel (2)<br /><body><br /><div class="bodywrapper"><!--start bodywrapper--><br /> <!-- ACME logo --><br /> <div id="header"><br /><template:module path="header-col1"/><br /> </div><br /> <!-- Navigation menu --><br /><template:module path="headerBottom-colContent"/><br /> <!-- Main content for most templates --><br /><template:area path="maincontent"/><br /> <br /> <!-- News detail view --><br /><template:area path="row-col1/mainResourceDisplay"/><br /> <br /> <!-- Event list view --><br /><template:area path="row1-col1/events"/><br /> <br /> <!-- Publications list view --><br /><template:area path="row1-col1/publications"/><br /></div><br /><!--stop bodywrapper--><br /> <br /><c:if test="${renderContext.editMode}"><br /> <template:addResources type="css" resources="edit.css" /><br /></c:if><br /><template:addResources type="css" resources="960.css,mobile-01web.css,02mod.css,mobile-navigationN1.css,navigationN2-2.css"/><br /><template:theme/><br /> <br /></body><br /></html><br />
  • 15. Locating content<br />Content tree<br />Contains ACME logo<br />Contains navigation<br />
  • 16. Using REST API to build native mobile clients<br />Native Mobile Rendering<br />
  • 17. Features<br /><ul><li>Server-customizable
  • 18. Native application, good user experience, fast, and works offline
  • 19. Flexible architecture</li></li></ul><li>Demo<br />Native Mobile Rendering<br />
  • 20. Initial connection<br />retrieve configuration<br />fetch section data<br />section data<br />fetch data template<br />data template & resources<br />Mobile device<br />Jahia Server<br />
  • 21. Fetching new section<br />fetch section data<br />section data<br />Mobile device<br />Jahia Server<br />
  • 22. Offline operation<br /><ul><li>Data is cached locally
  • 23. Upon reconnection, data is retrieved from server
  • 24. If server or connection falls, requests default back to cache</li></li></ul><li>Templates<br /><ul><li>HTML rendering
  • 25. Merged client side
  • 26. Template for each node type
  • 27. Different template for different devices</li></ul><html><br /><body><h1>$$$jcr:title$$$</h1><a href="$$$file$$$"><img src="$$$preview$$$"/></a><p>$$$date$$$</p>$$$body$$$</body></html><br />
  • 28. Rapid Application Development<br /><ul><li>All files are reloaded from server when connected
  • 29. No changes needed on the client side, only on server side !
  • 30. Resources such as images, CSS, Javascript can be changed on-the-fly on the server.
  • 31. Per node-type templates, modify rendering one object at a time</li></li></ul><li>Submitting content<br /><ul><li>Uses REST POST API
  • 32. Submits data file first, then uses returned UUID to create a node with a reference to data file
  • 33. Mappings are used to configure content creation location and property names</li></li></ul><li>Learn more<br /><ul><li>Multi-Channel Rendering documentation :http://www.jahia.com/cms/render/live/en/sites/jahiacom/home/community/documentation/multi-channel-rendering.html
  • 34. REST API documentation :http://www.jahia.com/community/documentation/jahiapedia/jahia-modules/rest.html
  • 35. Forum : http://www.jahia.com/cms/home/community/forum.html</li></li></ul><li>Q & A<br />
  • 36. Other HTML alternatives<br />Create a separate “m.jahia.com” mobile specific site and use content references or queries to retrieve content<br />Benefits:<br />Can use Template Studio to design templates<br />Can add mobile specific content<br />Disadvantages:<br />More editorial work to keep both sites in sync<br />Not as seemless, be careful about navigation<br />PugPigFramework : http://pugpig.com/<br />BKRenderFramework : http://bkrender.com/<br />Apache Mobile Filter: http://www.apachemobilefilter.org<br />
  • 37. Native Authentication<br />Stored in setting<br />Personalized content<br />Access control<br />Access to MyProfile data:<br />My Connections<br />My Messages<br />…<br />
  • 38. Thank you<br />Serge Huber<br />shuber@jahia.com<br />

×