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

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

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

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 OS Introduction 3

8. Market share by OS from 2007 to 2011 according to Gartner Inc. Worldwide Mobile Device Sales 14,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.html Market shares 5

9. Market shares Q4 / 2010 6 Sources: 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_system Fragmentation 7

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 applications 9

19. HTML5 totherescue 10 Source: http://www.w3.org/html/logo/

21. C#, XAML (Windows Phone)

22. Java (Android)

24. JavaScript

25. CSSProgramming languages on mobile platforms 11

27. Android 2.1+

28. BlackBerry 6+

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/8706 Mobile browser support 12

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/webfonts Example: Web Fonts 13

34. Example: Geolocation API 14

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 XHTML http://www.w3.org/TR/html5/ / http://www.w3.org/html/wiki/FAQs Focus shifted from documents to web applications. HTML5 Timeline 15

45. HTML5 WebSocket API -> WebSocketprotocolGroups working on HTML5 16

47. Utility

48. Interoperability

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 principles 17

56. Everything is easier now.

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

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 principles 18

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 features 19

77. WebWorkers

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

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

83. http://diveintohtml5.org/peeks-pokes-and-pointers.html HTML5 cheatsheet 23

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

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 / storage 25

90. Jo - JavaScript framework for HTML5 It 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.html PS: It’s from a who worked on YUI and now works on webOS… / Demo Works perfect with PhoneGap! HTML5 framework for UI and data 26

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

92. XUI http://xuijs.com/ A super micro tiny DOM library for authoring HTML5 mobile web applications. Basics, DOM, Event, Fx, Style, XHR Works perfect with PhoneGap! HTML5 basic framework 28

93. http://lessframework.com/ 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. HTML5 framework helping you with the layout 29

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 relearn 30

95. Sencha Touch – Mobile Web App Framework http://www.sencha.com/products/touch/ (fromthecreatorsofExtJS) HTML5 frameworkforapplications 31 PS: I like their comprehensive documentation 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 & badbrowsers 32

97. Mobile Boilerplate http://html5boilerplate.com/mobile/ HTML5 templatefor mobile usage 33

98. HTML5 Reset http://html5reset.org/ HTML5 templates for mobile usage 34

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 applications 35

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 tips 36

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 HTML5 http://www.lakercompendium.com/ PhoneGap, RhoMobile, Appcelerator Creating native apps from HTML5 37

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

114. Canvas Cheat Sheet: http://html5samples.com/wp-content/uploads/2010/03/HTML5_Canvas_Cheat_Sheet.png Massive 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 Landscape http://www.alistapart.com/articles/smartphone-browser-landscape/ iOSspecificimprovementssinceiOS 4.2 http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5 Safari DOM AdditionsforiOS: http://developer.apple.com/library/safari/navigation/#section=Libraries&topic=Safari%20DOM%20Additions%20for%20iOS Additional links 39

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

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.aspx HTML5 + SharePoint: Limitations 41

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. ContentEditable 42

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

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

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

124. iPad and SharePoint: contenteditable4/4 46

125. iPad and SharePoint: contenteditable4/4 47

126. iPad and SharePoint: contenteditable4/4 48

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 awareness 49

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 awareness 50

129. SharePoint 2010 und das iPad – Browser Support http://sharepointcommunity.de/blogs/mgreth/archive/2011/02/08/sharepoint-2010-und-das-ipad-teil-1-browser-support.aspx SharePoint 2010 und das iPad – Apps http://sharepointcommunity.de/blogs/mgreth/archive/2011/02/09/sharepoint-2010-und-das-ipad-teil-2-die-apps.aspx iPad and SharePoint: Additional links 51

130. SharePoint Client Object Model http://msdn.microsoft.com/en-us/library/gg701783.aspx Mobile Development with SharePoint Foundation http://msdn.microsoft.com/en-us/library/ms464268.aspx TechNet: “Plan for mobile devices” (http://technet.microsoft.com/en-us/library/gg610510.aspx) Existing solution: mobile entrée http://www.mobileentree.com/docs/Wiki%20Pages/Out%20of%20the%20Box.aspx HTML5 + SharePoint: Additional links 52

131. DEMO DEMO 53

132. HTML11 http://html11.org The Future? 54

133. Mytalks on thistopic (2011) 55

134. Christian Heindel christian heindel@communardo.de Twitter: @c_heindel http://www.christian-heindel.de/ Telefon: +49 (351) 8332-234 Communardo Software GmbH Kleiststraße 10 a 01129 Dresden http://www.communardo.de info@communardo.de Telefon: +49 (351) 833 820 Standort Stuttgart Königstraße 10c 70173 Stuttgart Telefon: +49 (711) 222 540 Contact 56