Mobile applications for SharePoint using HTML5

1. Enabling cross platform mobile applications.…that also work with SharePoint 2010.Communardo Software GmbHChristian Heindel

2. 2.250.000.000 Tooth brushes in use4.617.136.636 Mobile phone subscriptionsSource: http://www.slideshare.net/hirsch30/economics-of-apps-university-of-oxford-15-oct-201091% of people have their mobile within arm’s reach 24/7. (Morgen Stanley 2007)Facebook mobile audience now at 250M users! Was 65 million in Sept 09. (03/2011, http://www.zdnet.com/blog/facebook/facebook-passes-250-million-mobile-users-mark-overhauls-mobile-site/1079)39% of SmartPhone Owners use their devices in the bathroom. (http://tcrn.ch/ifCSC8)SmartPhone PeakGfK study: http://www.gfkrt.com/news_events/market_news/single_sites/007090/index.en.html

3. AdFonic statistics: http://www.bmob.co.uk/2010/11/15/sofa-and-bed-surfing-on-the-rise/Facts from the intro…2VIDEO:http://www.youtube.com/watch?v=CjUcq_E4I-s

4. The challenge:Large number of different target platforms.

5. No clear market leader, like with desktop OS.

6. Endless list of manufacturers and devices.Platforms for mobile devices: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)In addition, netbooks and tablets also run:Windows, Linux, OS X, Chrome OSIntroduction3

7. iPadIt changed everything... Chromebookhttp://www.google.com/chromebook/Windows 8 will run on ARMSay hello to Windows 8 tablets…HP webOS netbooksSource: "CES: Microsoft shows off Windows 8 on ARM.", ZDNet, http://www.zdnet.com/blog/microsoft/ces-microsoft-shows-off-windows-8-on-arm/8339, http://www.engadget.com/2011/05/18/evidence-of-webos-netbook-and-keyboard-less-phone-pop-up-in-deve/ , http://www.golem.de/1106/84073.htmlEverything changes…4

8. Market share by OS from 2007 to 2011 according to Gartner Inc.Worldwide Mobile Device Sales14,4-19,9% of all mobile devices sold in 2010 were smartphones.This was an 72% increase from 2009 to 2010.Sources: http://www.gartner.com/it/page.jsp?id=1543014, http://www.gartner.com/it/page.jsp?id=1306513, http://www.gartner.com/it/page.jsp?id=910112, http://www.golem.de/1106/84073.htmlMarket shares5

9. Market shares Q4 / 20106Sources: Canalys (http://www.canalys.com/pr/2011/r2011013.html), Wikipedia (http://en.wikipedia.org/wiki/Mobile_operating_system)

10. Source: http://en.wikipedia.org/wiki/Mobile_operating_systemFragmentation7

11. MarketingPresence in App Stores is good for visibility of your product.

12. This is important for consumer products, not so much for enterprise products.Performance, Look & FeelNative applications run faster and integrate better.PossibilitiesBrowsers do not get access to all functions, like phonebooks, camera and so on…PRO native applications8

13. Incalculable business risksWill the application be approved by the platform lord?

14. How long will it take?Legal stuffA lot of contracts and rulesA lot of work / costsTry 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. Fees for app stores usually around 30% of revenue.

16. You need specialized developers for the different plattforms.

17. You need to rely on frameworks like PhoneGap, RhoMobile, AppCelerator

18. You will not be indexed by search engines.CONTRA native applications9

19. HTML5 totherescue10Source: http://www.w3.org/html/logo/

20. Whatsomeunderstand:Objective C (iOS)

21. C#, XAML (Windows Phone)

22. Java (Android)

23. Qt (C++) (Symbian, Maemo)What everybody understands:HTML

24. JavaScript

25. CSSProgramming languages on mobile platforms11

26. Mobile platforms with A-grade browsers:Apple iOS 3+

27. Android 2.1+

28. BlackBerry 6+

29. Windows Phone 7.5 ‚Mango‘, in fall 2011Those represent 95% of US internet traffic from mobile devices.They supporting features like:Web fonts

30. Geolocation API

31. Offline web applications

32. Web SQL databaseSources: http://www.sencha.com/products/touch/, http://caniuse.com/, http://developer.yahoo.com/yui/articles/gbs/, http://www.zdnet.com/blog/microsoft/microsoft-to-support-same-ie9-security-privacy-features-on-phone-and-desktop/8706Mobile browser support12

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).Source: http://www.google.com/webfontsExample: Web Fonts13

34. Example: Geolocation API14

35. W3C published first draft of HTML in 1993

36. HTML 4.01 published in 1999, then stagnation

37. Formation of WHATWG in 2004 (to push along HTML5)

38. W3C active again since 2006, published first draft of HTML5 in 2008

39. XHTML2 working group stopped 2009

40. Not finished. Currently published as “working draft” (04/2011)

41. W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for HTML5 Standard (http://www.w3.org/2011/02/htmlwg-pr.html)HTML5 - A vocabulary and associated APIs for HTML and XHTMLhttp://www.w3.org/TR/html5/ / http://www.w3.org/html/wiki/FAQsFocus shifted from documents to web applications.HTML5 Timeline15

42. Web Hypertext Application Technology Working Group (WHATWG)Founded in 2004 by employees of Apple, Mozilla, Google and Opera.

43. Working on HTML and APIs for development of web applications.World Wide Web Consortium (W3C)HTML working group

44. HTML5 specificationInternet Engineering Task Force (IETF)Responsible for internet protocols like HTTP

45. HTML5 WebSocket API -> WebSocketprotocolGroups working on HTML516

46. Spelled out in WHATWG specification:Compatibility

47. Utility

48. Interoperability

49. Universal accessSome proof:HTML5 is 20 years backwards compatible

50. id=”html5”, id=html5, ID=”html5” – will all be accepted

51. Separation of content and presentation via CSS3.

52. Almost all HTML formatting parameters no longer supported

53. Accessibility (WAI-ARIA roles -> Screen Readers)

54. Media Independence (different devices and platforms)HTML5 design principles17

55. Further proof:Support for all world languages

56. Everything is easier now.

57. Syntax is not strict, example: you can leave out quotation marks

58. Less text, example: simplified DOCTYPE, simplified character set declarationPlugin-Free ParadigmPlugins cannot always be installed

59. Plugins can be disabled or blocked (see iPad + Flash ;-) )

60. Plugins are a separate attack vector

61. Plugins are difficult to integrate with the rest of an HTML document (plugin boundaries, clipping, transparency)HTML5 design principles18

62. Canvas (2D and 3D)

63. Channel messaging

64. Cross-document messaging

65. Geolocation

66. MathML

67. Microdata

68. Server-Sent events

69. Scalable Vector Graphics (SVG)

70. WebSocket API and protocol

71. Web origin concept

72. Web storage

73. Web SQL database

74. Web Workers

75. XMLHttpRequest Level 2HTML5 New features19

76. I love marketing departments!Not part of HTML5 specification:Geolocation

77. WebWorkers

78. HTML Speech Input API (supported by Chrome 11, proposal to the HTML Speech Incubator Group)Moved to separate standards documents:WebStorage

79. Canvas 2DHTML5 is used as an umbrella term for all of them.HTML5 is a marketing buzzword!20

80. http://www.caniuse.com/Does my target platform support the function I want to use?

81. Which platform will I loose, if I want to use a certain feature?HTML5 browser compatibility21

82. http://www.html5test.com/Don’t run this in Internet Explorer… ;-)HTML5 browser compatibility22

83. http://diveintohtml5.org/peeks-pokes-and-pointers.htmlHTML5 cheatsheet23

84. http://microjs.com/Select therightframework…24

85. Lawnchairhttp://westcoastlogic.com/lawnchair/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.Featuresmicro tiny storage without the nasty SQL:pure and delicious JSON

86. clean and simple oo design with one db table per store

87. key/value store.. specifying a key is optional

88. happily and handily will treat your store as an array of objects

89. terse syntax for searching and therefore finding of objectsHTML5 frameworkfor JSON / storage25

90. Jo - JavaScript framework for HTML5It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap.Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets.Integrates Lawnchair via joLawn.http://joapp.com/docs/index.htmlPS: It’s from a who worked on YUI and now works on webOS… / DemoWorks perfect with PhoneGap!HTML5 framework for UI and data26

91. http://zeptojs.com/Zepto.js is a minimalist JavaScript frameworkfor mobile WebKitbrowsers, with a jQuery-compatiblesyntax.HTML5 frameworkfortheminimalist27

92. XUIhttp://xuijs.com/A super micro tiny DOM library for authoring HTML5 mobile web applications.Basics, DOM, Event, Fx, Style, XHRWorks perfect with PhoneGap!HTML5 basic framework28

93. http://lessframework.com/Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.HTML5 framework helping you with the layout29

94. http://jquerymobile.com/Dynamic touch interfaces that will adapt gracefully to a range of device form factors.The system includes both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs).Based on jQuery core.See also: http://jqtouch.com/A jQueryplugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.HTML5 framework if you don’t want to relearn30

95. Sencha Touch – Mobile Web App Frameworkhttp://www.sencha.com/products/touch/(fromthecreatorsofExtJS)HTML5 frameworkforapplications31PS: I like their comprehensivedocumentation on offline apps. ;-)They are explaining how you use this http://dev.w3.org/html5/offline-webapps/therightway…

96. http://www.modernizr.com/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.HTML5 frameworkforgood & badbrowsers32

97. Mobile Boilerplatehttp://html5boilerplate.com/mobile/HTML5 templatefor mobile usage33

98. HTML5 Resethttp://html5reset.org/HTML5 templates for mobile usage34

99. Mobile first development (yiibu-style, http://yiibu.com/)Apps vs. the Webhttp://www.alistapart.com/articles/apps-vs-the-web/A practical approach:Design the product.

100. Implement the product using web standards.

101. Launch the product.

102. Run into problems.

103. Translate product design into an iPhone app.

104. Launch product on iTunes.Principles for developing mobile applications35

105. Images slow things down immensely– get rid of them

106. Avoid text-shadow & box-shadow

107. Hardware-acceleration is quite new… and buggy

108. Use touch events whenever you can (ontouchmove > onmousemove > onclick)

109. Avoid opacity

110. Hand-code JavaScript and CSS (frameworks are heavy, no Prototype, no jQuery)

111. Use translate3d, not translateSource: http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/HTML5 performance tips36

112. There are a variety of frameworks that will wrap your HTML5 code and generate apps for different platforms.They are usually slow, buggyand limited in functionality and support.In most cases, you better do real native programming.eBooks from HTML5http://www.lakercompendium.com/PhoneGap, RhoMobile, AppceleratorCreating native apps from HTML537

113. https://build.phonegap.com/Write your app using HTML, CSS and JavaScriptUpload it to the PhoneGap Build serviceGet back app-store ready apps for Apple iOS, Google Android, Palm, Symbian, Blackberry and more.PhoneGap/build38

114. Canvas Cheat Sheet:http://html5samples.com/wp-content/uploads/2010/03/HTML5_Canvas_Cheat_Sheet.pngMassive collection of tutorials:“The Ultimate HTML5 Tutorials and Useful Techniques”http://www.dzinepress.com/2011/04/the-ultimate-html5-tutorials-and-useful-techniques/An oldie:http://www.html5rocks.com/Smartphone Browser Landscapehttp://www.alistapart.com/articles/smartphone-browser-landscape/iOSspecificimprovementssinceiOS 4.2http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5Safari DOM AdditionsforiOS:http://developer.apple.com/library/safari/navigation/#section=Libraries&topic=Safari%20DOM%20Additions%20for%20iOSAdditional links39

115. It has built in support for mobile applications, but…HTML5 + SharePoint40

116. The page won’t validate as proper HTML5 code. (SharePoint outputs content as XHTML 1.0 natively.)

117. contenteditablenot supported. (Editor)

118. Ribbon positioning will fail. (Workaround)

119. Out-of-the-box SharePoint master pages need to be adjusted.Change document type to:<!DOCTYPE HTML>Remove:<meta http-equiv="X-UA-Compatible" content="IE=8" />Examples: http://blog.drisgill.com/2010/09/html5-and-sharepoint-2010-and-ie9-beta.html / http://blogs.msdn.com/b/opal/archive/2010/09/16/ie9-sharepoint-2010-html5.aspx / http://blogs.msdn.com/b/sharepoint_de/archive/2011/03/16/sharepoint-2010-and-apple-ipad.aspxHTML5 + SharePoint: Limitations41

120. If you do not want to edit from mobile devices, you might just want to disable the mobility redirect.Disable-SPFeature -Identity MobilityRedirect -Url http://yoursite<!-MobilityRedirect Feature-><Feature ID="{f41cc668-37e5-4743-b4a8-74d1db3fd8a4}" Name="FeatureDefinition/f41cc668-37e5-4743-b4a8-74d1db3fd8a4"SourceVersion="1.0.0.0"/>Mobility Redirect vs. ContentEditable42

121. contenteditable not supported:Automatic switch to mobile version<system>netpubwwrootssirtualDirectories0pp_browsersompat.browser  <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>iPad and SharePoint: contenteditable 1/443

122. contenteditable not supported:b) Manually switch to mobile versionhttp:// URL /m/http:// URL /_layouts/mobile/default.aspxc) For short /m/ version, the MobilityRedirect feature has to be activated.See also: Mobile development with SharePoint Foundationhttp://msdn.microsoft.com/en-us/library/ms464268.aspxand: http://support.microsoft.com/kb/930147iPad and SharePoint: contenteditable 2/444

123. contenteditable not supported:iisreset / noforceWant to see how a page is rendered for mobile??mobile=1Source: http://blogs.msdn.com/b/sharepoint_de/archive/2011/03/16/sharepoint-2010-and-apple-ipad.aspxiPad and SharePoint: contenteditable 3/445

124. iPad and SharePoint: contenteditable4/446

127. Two DIVs and a little bit of JavaScript.Source: http://mike-greene.com/2010/10/enhancing-the-sharepoint-2010-ui-scripted-orientation-aware-content/iPad and SharePoint: Orientation awareness49

128. Two DIVs and a little bit of JavaScript.Source: http://mike-greene.com/2010/10/enhancing-the-sharepoint-2010-ui-scripted-orientation-aware-content/VIDEO: http://mike-greene.com/2010/10/enhancing-the-sharepoint-2010-ui-ipad-orientation-detection/iPad and SharePoint: Orientation awareness50

129. SharePoint 2010 und das iPad – Browser Supporthttp://sharepointcommunity.de/blogs/mgreth/archive/2011/02/08/sharepoint-2010-und-das-ipad-teil-1-browser-support.aspxSharePoint 2010 und das iPad – Appshttp://sharepointcommunity.de/blogs/mgreth/archive/2011/02/09/sharepoint-2010-und-das-ipad-teil-2-die-apps.aspxiPad and SharePoint: Additional links51

130. SharePoint Client Object Modelhttp://msdn.microsoft.com/en-us/library/gg701783.aspxMobile Development with SharePoint Foundationhttp://msdn.microsoft.com/en-us/library/ms464268.aspxTechNet: “Plan for mobile devices” (http://technet.microsoft.com/en-us/library/gg610510.aspx)Existing solution: mobile entréehttp://www.mobileentree.com/docs/Wiki%20Pages/Out%20of%20the%20Box.aspxHTML5 + SharePoint: Additional links52

131. DEMODEMO53

132. HTML11http://html11.orgThe Future?54

133. Mytalks on thistopic (2011)55

134. Christian Heindelchristian heindel@communardo.deTwitter: @c_heindelhttp://www.christian-heindel.de/Telefon: +49 (351) 8332-234Communardo Software GmbHKleiststraße 10 a01129 Dresdenhttp://www.communardo.deinfo@communardo.deTelefon: +49 (351) 833 820Standort StuttgartKönigstraße 10c70173 StuttgartTelefon: +49 (711) 222 540Contact56

Mobile applications for SharePoint using HTML5

More Related Content

What's hot

What's hot (20)

Similar to Mobile applications for SharePoint using HTML5

Similar to Mobile applications for SharePoint using HTML5 (20)

More from Christian Heindel

More from Christian Heindel (9)

Recently uploaded

Recently uploaded (20)

Mobile applications for SharePoint using HTML5