Mobile applications for SharePoint using HTML5

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

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

The challenge:
Large number of different target platforms.
No clear market leader, like with desktop OS.
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

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

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

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

Source: http://en.wikipedia.org/wiki/Mobile_operating_system
Fragmentation
7

Marketing
Presence in App Stores is good for visibility of your product.
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

Incalculable business risks
Will the application be approved by the platform lord?
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
Fees for app stores usually around 30% of revenue.
You need specialized developers for the different plattforms.
You need to rely on frameworks like PhoneGap, RhoMobile, AppCelerator
You will not be indexed by search engines.
CONTRA native applications
9

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

Whatsomeunderstand:
Objective C (iOS)
C#, XAML (Windows Phone)
Java (Android)
Qt (C++) (Symbian, Maemo)
What everybody understands:
HTML
JavaScript
CSS
Programming languages on mobile platforms
11

Mobile platforms with A-grade browsers:
Apple iOS 3+
Android 2.1+
BlackBerry 6+
Windows Phone 7.5 ‚Mango‘, in fall 2011
Those represent 95% of US internet traffic from mobile devices.
They supporting features like:
Web fonts
Geolocation API
Offline web applications
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

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

Example: Geolocation API
14

W3C published first draft of HTML in 1993
HTML 4.01 published in 1999, then stagnation
Formation of WHATWG in 2004 (to push along HTML5)
W3C active again since 2006, published first draft of HTML5 in 2008
XHTML2 working group stopped 2009
Not finished. Currently published as “working draft” (04/2011)
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

Web Hypertext Application Technology Working Group (WHATWG)
Founded in 2004 by employees of Apple, Mozilla, Google and Opera.
Working on HTML and APIs for development of web applications.
World Wide Web Consortium (W3C)
HTML working group
HTML5 specification
Internet Engineering Task Force (IETF)
Responsible for internet protocols like HTTP
HTML5 WebSocket API -> WebSocketprotocol
Groups working on HTML5
16

Spelled out in WHATWG specification:
Compatibility
Utility
Interoperability
Universal access
Some proof:
HTML5 is 20 years backwards compatible
id=”html5”, id=html5, ID=”html5” – will all be accepted
Separation of content and presentation via CSS3.
Almost all HTML formatting parameters no longer supported
Accessibility (WAI-ARIA roles -> Screen Readers)
Media Independence (different devices and platforms)
HTML5 design principles
17

Further proof:
Support for all world languages
Everything is easier now.
Syntax is not strict, example: you can leave out quotation marks
Less text, example: simplified DOCTYPE, simplified character set declaration
Plugin-Free Paradigm
Plugins cannot always be installed
Plugins can be disabled or blocked (see iPad + Flash ;-) )
Plugins are a separate attack vector
Plugins are difficult to integrate with the rest of an HTML document (plugin boundaries, clipping, transparency)
HTML5 design principles
18

Canvas (2D and 3D)
Channel messaging
Cross-document messaging
Geolocation
MathML
Microdata
Server-Sent events
Scalable Vector Graphics (SVG)
WebSocket API and protocol
Web origin concept
Web storage
Web SQL database
Web Workers
XMLHttpRequest Level 2
HTML5 New features
19

I love marketing departments!
Not part of HTML5 specification:
Geolocation
WebWorkers
HTML Speech Input API (supported by Chrome 11, proposal to the HTML Speech Incubator Group)
Moved to separate standards documents:
WebStorage
Canvas 2D
HTML5 is used as an umbrella term for all of them.
HTML5 is a marketing buzzword!
20

http://www.caniuse.com/
Does my target platform support the function I want to use?
Which platform will I loose, if I want to use a certain feature?
HTML5 browser compatibility
21

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

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

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

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
clean and simple oo design with one db table per store
key/value store.. specifying a key is optional
happily and handily will treat your store as an array of objects
terse syntax for searching and therefore finding of objects
HTML5 frameworkfor JSON / storage
25

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

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

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

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 layout
29

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

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…

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

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

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

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.
Implement the product using web standards.
Launch the product.
Run into problems.
Translate product design into an iPhone app.
Launch product on iTunes.
Principles for developing mobile applications
35

Images slow things down immensely– get rid of them
Avoid text-shadow & box-shadow
Hardware-acceleration is quite new… and buggy
Use touch events whenever you can (ontouchmove > onmousemove > onclick)
Avoid opacity
Hand-code JavaScript and CSS (frameworks are heavy, no Prototype, no jQuery)
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

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

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

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

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

The page won’t validate as proper HTML5 code. (SharePoint outputs content as XHTML 1.0 natively.)
contenteditablenot supported. (Editor)
Ribbon positioning will fail. (Workaround)
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

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

contenteditable not supported:
Automatic switch to mobile version
<system>inetpubwwwrootwssVirtualDirectories80App_browserscompat.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/4
43

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
44

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
45

iPad and SharePoint: contenteditable4/4
46

47

48

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

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

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

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

DEMO
DEMO
53

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

Mytalks on thistopic (2011)
55

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

Mobile applications for SharePoint using HTML5

by Christian Heindel on Jun 16, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 9

Statistics

Mobile applications for SharePoint using HTML5 — Presentation Transcript

https://twitter.com	4
http://www.techgig.com	4
http://us-w1.rockmelt.com	1