European SharePoint Conference: Mobile Applications for SharePoint using HTML5

Mobile Applications for SharePoint using Christian Heindel, Communardo Software GmbH @c_heindel

Agenda
Introduction, market shares, pro & contra, features, design principles
Tools, tips and tricks
SharePoint + HTML5
DEMO
Questions

Introduction
The challenge:
Large number of different target platforms
No clear market leader, not 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), Windows Mobile , 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

Everything changes…
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

Market shares
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.
Year Symbian Android RIM iOS Microsoft Other OSs Smartphones/ Total Devices 11Q2 22,1% 43,4% 11,7% 18,2% 1,6% 2,9% 107.740.400 428.661.200 2010 37,6% 22,7% 16,0% 15,7% 4,2% 3,8% 296.646.600 1.596.802.400 2009 46,9% 3,9% 19,9% 14,4% 8,7% 6,1% 172.373.100 1.211.239.600 2008 52,4% 0,5% 16,6% 8,2% 11,8% 10,5% 139.287.900 1.222.252.900 2007 63,5% N/A 9,6% 2,7% 12% 12,1%

Fragmentation

PRO native applications
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…

CONTRA native applications
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.

Programming languages and browser support on mobile platforms
What some understand:
Objective C (iOS)
C#, XAML (Windows Phone)
Java (Android)
Qt (C++) (Symbian, Maemo)
What everybody understands:
HTML
JavaScript
CSS
Mobile platforms with A-grade browsers:
Apple iOS 3+
Android 2.1+
BlackBerry 6+
Windows Phone 7.5 ‚Mango‘
Those represent 95% of US internet traffic from mobile devices.
They supporting features like:
Geolocation API
Offline web applications
Web SQL database

HTML5 New features

Example: Geolocation API

HTML5 design principles HTML5 - A vocabulary and associated APIs for HTML and XHTML http://www.w3.org/TR/html5/

HTML5 design principles
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)

Agenda
Tools , tips and tricks
SharePoint + HTML5
DEMO
Questions

HTML5 browser compatibility
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
http://www.html5test.com/
Don’t run this in Internet Explorer… ;-)

HTML5 framework for JSON / storage

HTML5 framework for UI and data
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
From a deveoper who worked on YUI and now works on webOS… / Demo
Works perfect with PhoneGap!

HTML5 framework for the minimalist
Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax .

HTML5 basic framework
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 framework helping you with the layout
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 if you don’t want to relearn
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 jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.

HTML5 framework for applications
Sencha Touch – Mobile Web App Framework (from the creators of ExtJS)
PS : I like their comprehensive documentation on offline apps. ;-) They are explaining how you use this http://dev.w3.org/html5/offline-webapps/ the right way…

HTML5 framework for good & bad browsers
Modernizr adds 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 template for mobile usage
Mobile Boilerplate

Additional links
HTML5 cheat sheet
http :// diveintohtml5.org/peeks-pokes-and-pointers.html
Get help selecting the right framwork with http://microjs.com/
Another template: http :// html5reset.org
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/
iOS specific improvements since iOS 4.2
http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5
Safari DOM Additions for iOS:
http://developer.apple.com/library/safari/navigation/#section=Libraries&topic=Safari%20DOM%20Additions%20for%20iOS

Agenda
SharePoint + HTML5
DEMO
Questions

Principles for developing mobile applications
Mobile first development (yiibu-style, http://yiibu.com / ) - They also have tips for Nokia browsers… ;-)
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*.
* insert other platform here
Apps vs. the Web
http://www.alistapart.com/articles/apps-vs-the-web /

HTML5 performance tips
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

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

Agenda
SharePoint + HTML 5
DEMO
Questions

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

HTML5 + SharePoint: Limitations
The page won’t validate as proper HTML5 code. (SharePoint outputs content as XHTML 1.0 natively.)
contenteditable not supported. (Editor)
Ribbon positioning will fail. ( Workaround )
Out-of-the-box SharePoint master pages need to be adjusted. ( v5.master )
Change document type to:
<!DOCTYPE HTML>
Remove:
<meta http-equiv="X-UA-Compatible" content="IE=8" />

Mobility Redirect vs. ContentEditable
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" />

iOS and SharePoint – Redirect?
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>

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

Want to see how a page is rendered for mobile? Add: ?mobile=1 to the URL…

DEMO
http://m.christian-heindel.de

Contact information Communardo Software GmbH Kleiststraße 10 a 01129 Dresden http://www.communardo.de [email_address] Phone: +49 (351) 83382-0 Thank you for listening! Questions? Christian Heindel E-Mail: [email_address] Web: http://www.christian-heindel.de/ Twitter: @c_heindel

European SharePoint Conference: Mobile Applications for SharePoint using HTML5

by Christian Heindel on Oct 20, 2011

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 13

Statistics

European SharePoint Conference: Mobile Applications for SharePoint using HTML5 Presentation Transcript

http://paper.li	11
http://a0.twimg.com	2