mobile applications for sharepoint using html5

56
Enabling cross platform mobile applications. …that also work with SharePoint 2010. Christian Heindel Communardo Software GmbH Bild durch Klicken auf Symbol hinzufügen

Upload: christian-heindel

Post on 09-May-2015

16.712 views

Category:

Technology


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Mobile applications for SharePoint using HTML5

Enabling cross platform mobile applications.

…that also work with SharePoint 2010.

Christian HeindelCommunardo Software GmbH

Bild durch Klicken auf Symbol hinzufügen

Page 2: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 3: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Introduction

3

Page 4: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

iPad• It changed everything...

Chromebookhttp://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

Page 5: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Year Symbian Android RIM iOS Microsoft Other

OSsSmartphones/Total Devices

11Q1 27,4% 36% 12,9

%16,8% 3,6% 3,3% 100.769.300

427.846.000

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

2007 63,5% N/A 9,6% 2,7% 12% 12,1%

Market shares

5

Page 6: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Market shares Q4 / 2010

6

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

Page 7: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Fragmentation

7

Page 8: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 9: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Incalculable business risks• Will the application be approved by the platform lord?• How long will it take?Legal stuff• A lot of contracts and rulesA 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

Christian Heindel
Communote Client > 2 months before first feedbackRegistration as delveoper 11 days (https://twitter.com/#!/c_heindel/status/61296598419906561 )Opera v11.01 from 01.03.2011v11.10 released on 11.04.2011 - still not in app store, my comment about download via website was rated second most usefull
Page 10: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

HTML5 to the rescue

10

Source: http://www.w3.org/html/logo/

Page 11: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügenWhat some understand:• 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

Page 12: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 13: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 14: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Example: Geolocation API

14

Page 15: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

• 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 XHTMLhttp://www.w3.org/TR/html5/ / http://www.w3.org/html/wiki/FAQs

Focus shifted from documents to web applications.

HTML5 Timeline

15

Page 16: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügenWeb 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 specificationInternet Engineering Task Force (IETF)• Responsible for internet protocols like HTTP• HTML5 WebSocket API → WebSocket protocol

Groups working on HTML5

16

Page 17: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügenSpelled 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

Page 18: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 19: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

• 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

Page 20: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügenI 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

Page 21: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 22: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

http://www.html5test.com/• Don’t run this in Internet Explorer… ;-)

HTML5 browser compatibility

22

Page 23: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

HTML5 cheat sheet

23

Page 24: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügenhttp://microjs.com/

Select the right framework…

24

Page 25: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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.

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 framework for JSON / storage

25

Page 26: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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 data

26

Page 27: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

http://zeptojs.com/Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

HTML5 framework for the minimalist

27

Page 28: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügenXUIhttp://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

Page 29: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 30: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügenhttp://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 if you don’t want to relearn

30

Page 31: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Sencha Touch – Mobile Web App Frameworkhttp://www.sencha.com/products/touch/(from the creators of ExtJS)

HTML5 framework for applications

31

PS: I like their comprehensivedocumentation on offline apps. ;-)They are explaining how you use this http://dev.w3.org/html5/offline-webapps/ the right way…

Page 32: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

http://www.modernizr.com/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 framework for good & bad browsers

32

Page 33: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügenMobile Boilerplatehttp://html5boilerplate.com/mobile/

HTML5 template for mobile usage

33

Page 34: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

HTML5 Resethttp://html5reset.org/

HTML5 templates for mobile usage

34

Page 35: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 36: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

• 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

Page 37: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügenThere 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 HTML5http://www.lakercompendium.com/

PhoneGap, RhoMobile, Appcelerator

Creating native apps from HTML5

37

Page 38: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügen

https://build.phonegap.com/1. Write your app using HTML, CSS and JavaScript2. Upload it to the PhoneGap Build service3. Get back app-store ready apps for Apple iOS, Google

Android, Palm, Symbian, Blackberry and more.

PhoneGap/build

38

Page 39: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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 Landscapehttp://www.alistapart.com/articles/smartphone-browser-landscape/iOS specific improvements since iOS 4.2http://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

Additional links

39

Page 40: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügen

It has built in support for mobile applications, but…

HTML5 + SharePoint

40

Page 41: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

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

Page 42: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 43: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

contenteditable not supported:a) Automatic switch to mobile version<system>\inetpub\wwwroot\wss\VirtualDirectories\80\App_browsers\compat.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

Page 44: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

contenteditable not supported:b) Manually switch to mobile versionhttp:// 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 Foundationhttp://msdn.microsoft.com/en-us/library/ms464268.aspxand: http://support.microsoft.com/kb/930147

iPad and SharePoint: contenteditable 2/4

44

Page 45: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 46: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

iPad and SharePoint: contenteditable 4/4

46

Page 47: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

iPad and SharePoint: contenteditable 4/4

47

Page 48: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

iPad and SharePoint: contenteditable 4/4

48

Page 49: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 50: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

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

Page 51: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

SharePoint 2010 und das iPad – Browser Supporthttp://sharepointcommunity.de/blogs/mgreth/archive/2011/02/08/sharepoint-2010-und-das-ipad-teil-1-browser-support.aspx

SharePoint 2010 und das iPad – Appshttp://sharepointcommunity.de/blogs/mgreth/archive/2011/02/09/sharepoint-2010-und-das-ipad-teil-2-die-apps.aspx

iPad and SharePoint: Additional links

51

Page 52: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

SharePoint Client Object Modelhttp://msdn.microsoft.com/en-us/library/gg701783.aspx

Mobile Development with SharePoint Foundationhttp://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éehttp://www.mobileentree.com/docs/Wiki%20Pages/Out%20of%20the%20Box.aspx

HTML5 + SharePoint: Additional links

52

Page 53: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Bild durch Klicken auf Symbol hinzufügen

DEMO

DEMO

53

Page 54: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

HTML11http://html11.org

The Future?

54

Page 55: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

My talks on this topic (2011)

55

Communardo TechnologiemeetingDonnerstag, 19. Mai 2011

ShareConfDüsseldorf, 7.-9. Juni 2011„Mobile Anwendungen für SharePoint mit HTML5“

European SharePoint ConferenceBerlin, 17.-20. Oktober 2011„Mobile applications for SharePoint using HTML5“

Page 56: Mobile applications for SharePoint using HTML5

SeiteCommunardo Software GmbH · Kleiststraße 10 a · D-01129 Dresden/Germany · Fon +49 (0) 351/833 820 · Mail [email protected] · www.communardo.de

Christian Heindel

christian [email protected]

Twitter: @c_heindelhttp://www.christian-heindel.de/

Telefon: +49 (351) 8332-234

Communardo Software GmbHKleiststraße 10 a01129 Dresdenhttp://[email protected]

Telefon: +49 (351) 833 820 Standort Stuttgart

Königstraße 10c70173 Stuttgart

Telefon: +49 (711) 222 540

Contact

56

Bild durch Klicken auf Symbol hinzufügen