Mobile applications for SharePoint using HTML5


Published on

Giving an overview. Showing tools and tips for creating mobile applications with HTML5 (that also work with SharePoint).

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile applications for SharePoint using HTML5

  1. 1. Enabling cross platform mobile applications.<br />…that also work with SharePoint 2010.<br />Communardo Software GmbH<br />Christian Heindel<br />
  2. 2. Tooth brushes in use<br />4.617.136.636 Mobile phone subscriptions<br />Source:<br />91% of people have their mobile within arm’s reach 24/7. (Morgen Stanley 2007)<br />Facebook mobile audience now at 250M users! Was 65 million in Sept 09. (03/2011,<br />39% of SmartPhone Owners use their devices in the bathroom. (<br />SmartPhone Peak<br /><ul><li>GfK study:
  3. 3. AdFonic statistics:</li></ul>Facts from the intro…<br />2<br />VIDEO:<br /><br />
  4. 4. The challenge:<br /><ul><li>Large number of different target platforms.
  5. 5. No clear market leader, like with desktop OS.
  6. 6. Endless list of manufacturers and devices.</li></ul>Platforms for mobile devices:<br />MeeGo (MobLin+Maemo) (Intel/Nokia), Android (Google), iOS (Apple), WebOS (HP), WindowsMobile, Windows Phone (Microsoft), BlackBerry OS (RIM), Symbian, Bada (Samsung), Qt, J2ME (Oracle), Brew (Quallcomm)<br />In addition, netbooks and tablets also run:<br />Windows, Linux, OS X, Chrome OS<br />Introduction<br />3<br />
  7. 7. iPad<br /><ul><li>It changed everything... </li></ul>Chromebook<br /><br />Windows 8 will run on ARM<br /><ul><li>Say hello to Windows 8 tablets…</li></ul>HP webOS netbooks<br />Source: "CES: Microsoft shows off Windows 8 on ARM.", ZDNet,, ,<br />Everything changes…<br />4<br />
  8. 8. Market share by OS from 2007 to 2011 according to Gartner Inc.<br />Worldwide Mobile Device Sales<br />14,4-19,9% of all mobile devices sold in 2010 were smartphones.<br />This was an 72% increase from 2009 to 2010.<br />Sources:,,,<br />Market shares<br />5<br />
  9. 9. Market shares Q4 / 2010<br />6<br />Sources: Canalys (, Wikipedia (<br />
  10. 10. Source:<br />Fragmentation<br />7<br />
  11. 11. Marketing<br /><ul><li>Presence in App Stores is good for visibility of your product.
  12. 12. This is important for consumer products, not so much for enterprise products.</li></ul>Performance, Look & Feel<br /><ul><li>Native applications run faster and integrate better.</li></ul>Possibilities<br /><ul><li>Browsers do not get access to all functions, like phonebooks, camera and so on…</li></ul>PRO native applications<br />8<br />
  13. 13. Incalculable business risks<br /><ul><li>Will the application be approved by the platform lord?
  14. 14. How long will it take?</li></ul>Legal stuff<br /><ul><li>A lot of contracts and rules</li></ul>A lot of work / costs<br /><ul><li>Try publishing to the following stores at the same time: App Store (Apple), Android Market (Google), Amazon Appstore for Android, BlackBerry App World (RIM), Ovi Store (Nokia), HP App Catalog (WebOS), Windows Marketplace for Mobile, Windows Phone Marketplace (Microsoft), Samsung apps
  15. 15. Fees for app stores usually around 30% of revenue.
  16. 16. You need specialized developers for the different plattforms.
  17. 17. You need to rely on frameworks like PhoneGap, RhoMobile, AppCelerator
  18. 18. You will not be indexed by search engines.</li></ul>CONTRA native applications<br />9<br />
  19. 19. HTML5 totherescue<br />10<br />Source:<br />
  20. 20. Whatsomeunderstand:<br /><ul><li>Objective C (iOS)
  21. 21. C#, XAML (Windows Phone)
  22. 22. Java (Android)
  23. 23. Qt (C++) (Symbian, Maemo)</li></ul>What everybody understands:<br /><ul><li>HTML
  24. 24. JavaScript
  25. 25. CSS</li></ul>Programming languages on mobile platforms<br />11<br />
  26. 26. Mobile platforms with A-grade browsers:<br /><ul><li>Apple iOS 3+
  27. 27. Android 2.1+
  28. 28. BlackBerry 6+
  29. 29. Windows Phone 7.5 ‚Mango‘, in fall 2011</li></ul>Those represent 95% of US internet traffic from mobile devices.<br />They supporting features like:<br /><ul><li>Web fonts
  30. 30. Geolocation API
  31. 31. Offline web applications
  32. 32. Web SQL database</li></ul>Sources:,,,<br />Mobile browser support<br />12<br />
  33. 33. The Google Font API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod).<br />Source:<br />Example: Web Fonts<br />13<br />
  34. 34. Example: Geolocation API<br />14<br />
  35. 35. <ul><li>W3C published first draft of HTML in 1993
  36. 36. HTML 4.01 published in 1999, then stagnation
  37. 37. Formation of WHATWG in 2004 (to push along HTML5)
  38. 38. W3C active again since 2006, published first draft of HTML5 in 2008
  39. 39. XHTML2 working group stopped 2009
  40. 40. Not finished. Currently published as “working draft” (04/2011)
  41. 41. W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for HTML5 Standard (</li></ul>HTML5 - A vocabulary and associated APIs for HTML and XHTML<br /> /<br />Focus shifted from documents to web applications.<br />HTML5 Timeline<br />15<br />
  42. 42. Web Hypertext Application Technology Working Group (WHATWG)<br /><ul><li>Founded in 2004 by employees of Apple, Mozilla, Google and Opera.
  43. 43. Working on HTML and APIs for development of web applications.</li></ul>World Wide Web Consortium (W3C)<br /><ul><li>HTML working group
  44. 44. HTML5 specification</li></ul>Internet Engineering Task Force (IETF)<br /><ul><li>Responsible for internet protocols like HTTP
  45. 45. HTML5 WebSocket API -> WebSocketprotocol</li></ul>Groups working on HTML5<br />16<br />
  46. 46. Spelled out in WHATWG specification:<br /><ul><li>Compatibility
  47. 47. Utility
  48. 48. Interoperability
  49. 49. Universal access</li></ul>Some proof:<br /><ul><li>HTML5 is 20 years backwards compatible
  50. 50. id=”html5”, id=html5, ID=”html5” – will all be accepted
  51. 51. Separation of content and presentation via CSS3.
  52. 52. Almost all HTML formatting parameters no longer supported
  53. 53. Accessibility (WAI-ARIA roles -> Screen Readers)
  54. 54. Media Independence (different devices and platforms)</li></ul>HTML5 design principles<br />17<br />
  55. 55. Further proof:<br /><ul><li>Support for all world languages
  56. 56. Everything is easier now.
  57. 57. Syntax is not strict, example: you can leave out quotation marks
  58. 58. Less text, example: simplified DOCTYPE, simplified character set declaration</li></ul>Plugin-Free Paradigm<br /><ul><li>Plugins cannot always be installed
  59. 59. Plugins can be disabled or blocked (see iPad + Flash ;-) )
  60. 60. Plugins are a separate attack vector
  61. 61. Plugins are difficult to integrate with the rest of an HTML document (plugin boundaries, clipping, transparency)</li></ul>HTML5 design principles<br />18<br />
  62. 62. <ul><li>Canvas (2D and 3D)
  63. 63. Channel messaging
  64. 64. Cross-document messaging
  65. 65. Geolocation
  66. 66. MathML
  67. 67. Microdata
  68. 68. Server-Sent events
  69. 69. Scalable Vector Graphics (SVG)
  70. 70. WebSocket API and protocol
  71. 71. Web origin concept
  72. 72. Web storage
  73. 73. Web SQL database
  74. 74. Web Workers
  75. 75. XMLHttpRequest Level 2</li></ul>HTML5 New features<br />19<br />
  76. 76. I love marketing departments!<br />Not part of HTML5 specification:<br /><ul><li>Geolocation
  77. 77. WebWorkers
  78. 78. HTML Speech Input API (supported by Chrome 11, proposal to the HTML Speech Incubator Group)</li></ul>Moved to separate standards documents:<br /><ul><li>WebStorage
  79. 79. Canvas 2D</li></ul>HTML5 is used as an umbrella term for all of them.<br />HTML5 is a marketing buzzword!<br />20<br />
  80. 80.<br /><ul><li>Does my target platform support the function I want to use?
  81. 81. Which platform will I loose, if I want to use a certain feature?</li></ul>HTML5 browser compatibility<br />21<br />
  82. 82.<br /><ul><li>Don’t run this in Internet Explorer… ;-)</li></ul>HTML5 browser compatibility<br />22<br />
  83. 83.<br />HTML5 cheatsheet<br />23<br />
  84. 84.<br />Select therightframework…<br />24<br />
  85. 85. Lawnchair<br /><br />Sorta like a couch except smaller and outside, also, a client side JSON document store. Perfect for webkit mobile apps that need a lightweight, simple and elegant persistence solution.<br />Features<br /><ul><li>micro tiny storage without the nasty SQL:pure and delicious JSON
  86. 86. clean and simple oo design with one db table per store
  87. 87. key/value store.. specifying a key is optional
  88. 88. happily and handily will treat your store as an array of objects
  89. 89. terse syntax for searching and therefore finding of objects</li></ul>HTML5 frameworkfor JSON / storage<br />25<br />
  90. 90. Jo - JavaScript framework for HTML5<br />It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap.<br />Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets.<br />Integrates Lawnchair via joLawn.<br /><br />PS: It’s from a who worked on YUI and now works on webOS… / Demo<br />Works perfect with PhoneGap!<br />HTML5 framework for UI and data<br />26<br />
  91. 91.<br />Zepto.js is a minimalist JavaScript frameworkfor mobile WebKitbrowsers, with a jQuery-compatiblesyntax.<br />HTML5 frameworkfortheminimalist<br />27<br />
  92. 92. XUI<br /><br />A super micro tiny DOM library for authoring HTML5 mobile web applications.<br />Basics, DOM, Event, Fx, Style, XHR<br />Works perfect with PhoneGap!<br />HTML5 basic framework<br />28<br />
  93. 93.<br />Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.<br />HTML5 framework helping you with the layout<br />29<br />
  94. 94.<br />Dynamic touch interfaces that will adapt gracefully to a range of device form factors.<br />The system includes both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs).<br />Based on jQuery core.<br />See also:<br />A jQueryplugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.<br />HTML5 framework if you don’t want to relearn<br />30<br />
  95. 95. Sencha Touch – Mobile Web App Framework<br /><br />(fromthecreatorsofExtJS)<br />HTML5 frameworkforapplications<br />31<br />PS: I like their comprehensive<br />documentation on offline apps. ;-)They are explaining how you use this…<br />
  96. 96.<br />Modernizradds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it.<br />HTML5 frameworkforgood & badbrowsers<br />32<br />
  97. 97. Mobile Boilerplate<br /><br />HTML5 templatefor mobile usage<br />33<br />
  98. 98. HTML5 Reset<br /><br />HTML5 templates for mobile usage<br />34<br />
  99. 99. Mobile first development (yiibu-style,<br />Apps vs. the Web<br /><br />A practical approach:<br /><ul><li>Design the product.
  100. 100. Implement the product using web standards.
  101. 101. Launch the product.
  102. 102. Run into problems.
  103. 103. Translate product design into an iPhone app.
  104. 104. Launch product on iTunes.</li></ul>Principles for developing mobile applications<br />35<br />
  105. 105. <ul><li>Images slow things down immensely– get rid of them
  106. 106. Avoid text-shadow & box-shadow
  107. 107. Hardware-acceleration is quite new… and buggy
  108. 108. Use touch events whenever you can (ontouchmove > onmousemove > onclick)
  109. 109. Avoid opacity
  110. 110. Hand-code JavaScript and CSS (frameworks are heavy, no Prototype, no jQuery)
  111. 111. Use translate3d, not translate</li></ul>Source:<br />HTML5 performance tips<br />36<br />
  112. 112. There are a variety of frameworks that will wrap your HTML5 code and generate apps for different platforms.<br />They are usually slow, buggyand limited in functionality and support.<br />In most cases, you better do real native programming.<br />eBooks from HTML5<br /><br />PhoneGap, RhoMobile, Appcelerator<br />Creating native apps from HTML5<br />37<br />
  113. 113.<br />Write your app using HTML, CSS and JavaScript<br />Upload it to the PhoneGap Build service<br />Get back app-store ready apps for Apple iOS, Google Android, Palm, Symbian, Blackberry and more.<br />PhoneGap/build<br />38<br />
  114. 114. Canvas Cheat Sheet:<br /><br />Massive collection of tutorials:<br />“The Ultimate HTML5 Tutorials and Useful Techniques”<br /><br />An oldie:<br /><br />Smartphone Browser Landscape<br /><br />iOSspecificimprovementssinceiOS 4.2<br /><br />Safari DOM AdditionsforiOS:<br /><br />Additional links<br />39<br />
  115. 115. It has built in support for mobile applications, but…<br />HTML5 + SharePoint<br />40<br />
  116. 116. <ul><li>The page won’t validate as proper HTML5 code. (SharePoint outputs content as XHTML 1.0 natively.)
  117. 117. contenteditablenot supported. (Editor)
  118. 118. Ribbon positioning will fail. (Workaround)
  119. 119. Out-of-the-box SharePoint master pages need to be adjusted.</li></ul>Change document type to:<br /><!DOCTYPE HTML><br />Remove:<br /><meta http-equiv="X-UA-Compatible" content="IE=8" /><br />Examples: / /<br />HTML5 + SharePoint: Limitations<br />41<br />
  120. 120. If you do not want to edit from mobile devices, you might just want to disable the mobility redirect.<br />Disable-SPFeature -Identity MobilityRedirect -Url http://yoursite<br /><!-MobilityRedirect Feature-><Feature ID="{f41cc668-37e5-4743-b4a8-74d1db3fd8a4}" Name="FeatureDefinition/f41cc668-37e5-4743-b4a8-74d1db3fd8a4"SourceVersion=""/><br />Mobility Redirect vs. ContentEditable<br />42<br />
  121. 121. contenteditable not supported:<br />Automatic switch to mobile version<br /><system>inetpubwwwrootwssVirtualDirectories80App_browserscompat.browser<br /><!-- iPad Safari Browser --> <!-- sample UA "Mozilla/5.0 (iPad; U; CPU OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5" --> <browser id="iPadSafari" parentID="AppleSafari"> <identification> <userAgent match="iPad" /> <userAgent match="Mobile" /> </identification> <capabilities> <capability name="isMobileDevice" value="true" /> <capability name="canInitiateVoiceCall" value="true" /> <capability name="optimumPageWeight" value="1500" /> <capability name="requiresViewportMetaTag" value="true" /> <capability name="supportsTouchScreen" value="true" /> <capability name="telephoneNumberDetectionDisabled" value="true" /> </capabilities> </browser><br />iPad and SharePoint: contenteditable 1/4<br />43<br />
  122. 122. contenteditable not supported:<br />b) Manually switch to mobile version<br />http:// URL /m/<br />http:// URL /_layouts/mobile/default.aspx<br />c) For short /m/ version, the MobilityRedirect feature has to be activated.<br />See also: Mobile development with SharePoint Foundation<br /><br />and:<br />iPad and SharePoint: contenteditable 2/4<br />44<br />
  123. 123. contenteditable not supported:<br />iisreset / noforce<br />Want to see how a page is rendered for mobile?<br />?mobile=1<br />Source:<br />iPad and SharePoint: contenteditable 3/4<br />45<br />
  124. 124. iPad and SharePoint: contenteditable4/4<br />46<br />
  125. 125. iPad and SharePoint: contenteditable4/4<br />47<br />
  126. 126. iPad and SharePoint: contenteditable4/4<br />48<br />
  127. 127. Two DIVs and a little bit of JavaScript.<br />Source:<br />iPad and SharePoint: Orientation awareness<br />49<br />
  128. 128. Two DIVs and a little bit of JavaScript.<br />Source:<br />iPad and SharePoint: Orientation awareness<br />50<br />
  129. 129. SharePoint 2010 und das iPad – Browser Support<br /><br />SharePoint 2010 und das iPad – Apps<br /><br />iPad and SharePoint: Additional links<br />51<br />
  130. 130. SharePoint Client Object Model<br /><br />Mobile Development with SharePoint Foundation<br /><br />TechNet: “Plan for mobile devices” (<br />Existing solution: mobile entrée<br /><br />HTML5 + SharePoint: Additional links<br />52<br />
  131. 131. DEMO<br />DEMO<br />53<br />
  132. 132. HTML11<br /><br />The Future?<br />54<br />
  133. 133. Mytalks on thistopic (2011)<br />55<br />
  134. 134. Christian Heindel<br />christian<br />Twitter: @c_heindel<br /><br />Telefon: +49 (351) 8332-234<br />Communardo Software GmbH<br />Kleiststraße 10 a<br />01129 Dresden<br /><br /><br />Telefon: +49 (351) 833 820<br />Standort Stuttgart<br />Königstraße 10c<br />70173 Stuttgart<br />Telefon: +49 (711) 222 540<br />Contact<br />56<br />