Mobile applications for SharePoint using HTML5

  • 16,070 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
16,070
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
365
Comments
0
Likes
14

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. Enabling cross platform mobile applications.
    …that also work with SharePoint 2010.
    Communardo Software GmbH
    Christian Heindel
  • 2. 2.250.000.000 Tooth brushes in use
    4.617.136.636 Mobile phone subscriptions
    Source: http://www.slideshare.net/hirsch30/economics-of-apps-university-of-oxford-15-oct-2010
    91% 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 Peak
    • GfK 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…
    2
    VIDEO:
    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 OS
    Introduction
    3
  • 7. iPad
    • It changed everything... 
    Chromebook
    http://www.google.com/chromebook/
    Windows 8 will run on ARM
    • Say hello to Windows 8 tablets…
    HP webOS netbooks
    Source: "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.html
    Everything changes…
    4
  • 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
  • 11. Marketing
    • Presence 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 & Feel
    • Native applications run faster and integrate better.
    Possibilities
    • Browsers do not get access to all functions, like phonebooks, camera and so on…
    PRO native applications
    8
  • 13. Incalculable business risks
    • Will the application be approved by the platform lord?
    • 14. How long will it take?
    Legal stuff
    • A lot of contracts and rules
    A lot of work / costs
    • 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. 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/
  • 20. Whatsomeunderstand:
    • Objective C (iOS)
    • 21. C#, XAML (Windows Phone)
    • 22. Java (Android)
    • 23. Qt (C++) (Symbian, Maemo)
    What everybody understands:
    Programming languages on mobile platforms
    11
  • 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 2011
    Those 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 database
    Sources: 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
  • 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 XHTML
    http://www.w3.org/TR/html5/ / http://www.w3.org/html/wiki/FAQs
    Focus shifted from documents to web applications.
    HTML5 Timeline
    15
  • 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 specification
    Internet Engineering Task Force (IETF)
    • Responsible for internet protocols like HTTP
    • 45. HTML5 WebSocket API -> WebSocketprotocol
    Groups working on HTML5
    16
  • 46. Spelled out in WHATWG specification:
    Some 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 principles
    17
  • 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 declaration
    Plugin-Free Paradigm
    • Plugins 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 principles
    18
  • 62. HTML5 New features
    19
  • 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:
    HTML5 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 compatibility
    21
  • 82. http://www.html5test.com/
    • Don’t run this in Internet Explorer… ;-)
    HTML5 browser compatibility
    22
  • 83. http://diveintohtml5.org/peeks-pokes-and-pointers.html
    HTML5 cheatsheet
    23
  • 84. http://microjs.com/
    Select therightframework…
    24
  • 85. Lawnchair
    http://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.
    Features
    • micro 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 objects
    HTML5 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
  • 99. Mobile first development (yiibu-style, http://yiibu.com/)
    Apps vs. the Web
    http://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 applications
    35
  • 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 translate
    Source: 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
  • 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.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>inetpubwwwrootwssVirtualDirectories80App_browserscompat.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