Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Mobile Applications for SharePoint using  Christian Heindel, Communardo Software GmbH @c_heindel
Agenda <ul><li>Introduction, market shares, pro & contra, features, design principles </li></ul><ul><li>Tools, tips and tr...
Introduction <ul><li>The challenge: </li></ul><ul><li>Large number of different target platforms </li></ul><ul><li>No clea...
Everything changes… <ul><li>iPad </li></ul><ul><li>It changed everything...   </li></ul><ul><li>Chromebook </li></ul><ul>...
Market shares <ul><li>Market share by OS from 2007 to 2011 according to Gartner Inc. (Worldwide Mobile Device Sales) </li>...
Fragmentation
PRO  native applications <ul><li>Marketing </li></ul><ul><li>Presence in App Stores is good for visibility of your product...
CONTRA  native applications <ul><li>Incalculable business risks </li></ul><ul><li>Will the application be approved by the ...
Programming languages and browser support on mobile platforms <ul><li>What some understand: </li></ul><ul><li>Objective C ...
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 <ul><li>Plugin-Free Paradigm </li></ul><ul><li>Plugins cannot always be installed </li></ul><ul><l...
Agenda <ul><li>Introduction, market shares, pro & contra, features, design principles </li></ul><ul><li>Tools , tips and t...
HTML5 browser compatibility <ul><li>http://www.caniuse.com/ </li></ul><ul><li>Does my target platform support the function...
HTML5 browser compatibility <ul><li>http://www.html5test.com/ </li></ul><ul><li>Don’t run this in Internet Explorer… ;-) <...
HTML5 framework for JSON / storage
HTML5 framework for UI and data <ul><li>Jo  - JavaScript framework for HTML5 </li></ul><ul><li>It was originally designed ...
HTML5 framework for the minimalist <ul><li>Zepto.js   is a minimalist JavaScript framework for mobile WebKit browsers, wit...
HTML5 basic framework <ul><li>XUI </li></ul><ul><li>http ://xuijs.com / </li></ul><ul><li>A  super micro tiny  DOM library...
HTML5 framework helping you with the layout <ul><li>Less Framework is a CSS grid system for designing  adaptive web­sites ...
HTML5 framework if you don’t want to relearn <ul><li>http://jquerymobile.com / </li></ul><ul><li>Dynamic touch interfaces ...
HTML5 framework for applications <ul><li>Sencha Touch  – Mobile Web App Framework (from the creators of ExtJS) </li></ul>P...
HTML5 framework for good & bad browsers <ul><li>Modernizr   adds classes to the <html> element which allow you to target s...
HTML5 template for mobile usage <ul><li>Mobile Boilerplate </li></ul>
Additional links <ul><li>HTML5 cheat sheet </li></ul><ul><li>http :// diveintohtml5.org/peeks-pokes-and-pointers.html </li...
Agenda <ul><li>Introduction, market shares, pro & contra, features, design principles </li></ul><ul><li>Tools,  tips and t...
Principles for developing mobile applications <ul><li>Mobile first development (yiibu-style,  http://yiibu.com / ) - They ...
HTML5 performance tips <ul><li>Images slow things down immensely – get rid of them </li></ul><ul><li>Avoid text-shadow & b...
Creating native apps from HTML5 <ul><li>There are a variety of frameworks that will wrap your HTML5 code and generate apps...
Agenda <ul><li>Introduction, market shares, pro & contra, features, design principles </li></ul><ul><li>Tools, tips and tr...
+ It has built in support for mobile applications, but…
HTML5 + SharePoint: Limitations <ul><li>The page won’t validate as proper HTML5 code.  (SharePoint outputs content as XHTM...
Mobility Redirect vs. ContentEditable <ul><li>If you do not want to edit from mobile devices, you might just want to disab...
iOS and SharePoint – Redirect? <ul><li>contenteditable not supported: </li></ul><ul><li>Automatic switch to mobile version...
iOS and SharePoint – Redirect? <ul><li>contenteditable not supported: </li></ul><ul><li>b) Manually switch to mobile versi...
iOS and SharePoint – Redirect? <ul><li>Want to see how a page is rendered for mobile? Add:  ?mobile=1  to the URL… </li></ul>
iOS and SharePoint – Redirect?
iOS and SharePoint – Redirect?
DEMO <ul><li>http://m.christian-heindel.de </li></ul>
Contact information Communardo Software GmbH Kleiststraße 10 a 01129 Dresden http://www.communardo.de [email_address] Phon...
Nächste SlideShare
Wird geladen in …5
×

European SharePoint Conference: Mobile Applications for SharePoint using HTML5

4.583 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

European SharePoint Conference: Mobile Applications for SharePoint using HTML5

  1. 1. Mobile Applications for SharePoint using Christian Heindel, Communardo Software GmbH @c_heindel
  2. 2. Agenda <ul><li>Introduction, market shares, pro & contra, features, design principles </li></ul><ul><li>Tools, tips and tricks </li></ul><ul><li>SharePoint + HTML5 </li></ul><ul><li>DEMO </li></ul><ul><li>Questions </li></ul>
  3. 3. Introduction <ul><li>The challenge: </li></ul><ul><li>Large number of different target platforms </li></ul><ul><li>No clear market leader, not like with desktop OS </li></ul><ul><li>Endless list of manufacturers and devices </li></ul><ul><li>Platforms for mobile devices: </li></ul><ul><li>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) </li></ul><ul><li>In addition, netbooks and tablets also run: </li></ul><ul><li>Windows , Linux , OS X , Chrome OS </li></ul>
  4. 4. Everything changes… <ul><li>iPad </li></ul><ul><li>It changed everything...  </li></ul><ul><li>Chromebook </li></ul><ul><li>http://www.google.com/chromebook/ </li></ul><ul><li>Windows 8 will run on ARM </li></ul><ul><li>Say hello to Windows 8 tablets… </li></ul><ul><li>HP webOS netbooks </li></ul>
  5. 5. Market shares <ul><li>Market share by OS from 2007 to 2011 according to Gartner Inc. (Worldwide Mobile Device Sales) </li></ul><ul><li>14,4 - 19,9% of all mobile devices sold in 2010 were smartphones. </li></ul><ul><li>This was an 72% increase from 2009 to 2010. </li></ul>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%
  6. 6. Fragmentation
  7. 7. PRO native applications <ul><li>Marketing </li></ul><ul><li>Presence in App Stores is good for visibility of your product. </li></ul><ul><ul><li>This is important for consumer products, not so much for enterprise products. </li></ul></ul><ul><li>Performance, Look & Feel </li></ul><ul><li>Native applications run faster and integrate better. </li></ul><ul><li>Possibilities </li></ul><ul><li>Browsers do not get access to all functions, like phonebooks, camera and so on… </li></ul>
  8. 8. CONTRA native applications <ul><li>Incalculable business risks </li></ul><ul><li>Will the application be approved by the platform lord? </li></ul><ul><li>How long will it take? </li></ul><ul><li>Legal stuff </li></ul><ul><li>A lot of contracts and rules </li></ul><ul><li>A lot of work / costs </li></ul><ul><li>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 </li></ul><ul><li>Fees for app stores usually around 30% of revenue. </li></ul><ul><li>You need specialized developers for the different plattforms. </li></ul><ul><li>You need to rely on frameworks like PhoneGap, RhoMobile, AppCelerator </li></ul><ul><li>You will not be indexed by search engines. </li></ul>
  9. 9. Programming languages and browser support on mobile platforms <ul><li>What some understand: </li></ul><ul><li>Objective C (iOS) </li></ul><ul><li>C#, XAML (Windows Phone) </li></ul><ul><li>Java (Android) </li></ul><ul><li>Qt (C++) (Symbian, Maemo) </li></ul><ul><li>What everybody understands: </li></ul><ul><li>HTML </li></ul><ul><li>JavaScript </li></ul><ul><li>CSS </li></ul><ul><li>Mobile platforms with A-grade browsers: </li></ul><ul><li>Apple iOS 3+ </li></ul><ul><li>Android 2.1+ </li></ul><ul><li>BlackBerry 6+ </li></ul><ul><li>Windows Phone 7.5 ‚Mango‘ </li></ul><ul><li>Those represent 95% of US internet traffic from mobile devices. </li></ul><ul><li>They supporting features like: </li></ul><ul><li>Geolocation API </li></ul><ul><li>Offline web applications </li></ul><ul><li>Web SQL database </li></ul>
  10. 10. HTML5 New features
  11. 11. Example: Geolocation API
  12. 12. HTML5 design principles HTML5 - A vocabulary and associated APIs for HTML and XHTML http://www.w3.org/TR/html5/
  13. 13. HTML5 design principles <ul><li>Plugin-Free Paradigm </li></ul><ul><li>Plugins cannot always be installed </li></ul><ul><li>Plugins can be disabled or blocked - see iPad + Flash ;-) </li></ul><ul><li>Plugins are a separate attack vector </li></ul><ul><li>Plugins are difficult to integrate with the rest of an HTML document (plugin boundaries, clipping, transparency) </li></ul>
  14. 14. Agenda <ul><li>Introduction, market shares, pro & contra, features, design principles </li></ul><ul><li>Tools , tips and tricks </li></ul><ul><li>SharePoint + HTML5 </li></ul><ul><li>DEMO </li></ul><ul><li>Questions </li></ul>
  15. 15. HTML5 browser compatibility <ul><li>http://www.caniuse.com/ </li></ul><ul><li>Does my target platform support the function I want to use? </li></ul><ul><li>Which platform will I loose, if I want to use a certain feature? </li></ul>
  16. 16. HTML5 browser compatibility <ul><li>http://www.html5test.com/ </li></ul><ul><li>Don’t run this in Internet Explorer… ;-) </li></ul>
  17. 17. HTML5 framework for JSON / storage
  18. 18. HTML5 framework for UI and data <ul><li>Jo - JavaScript framework for HTML5 </li></ul><ul><li>It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap . </li></ul><ul><li>Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets. </li></ul><ul><li>Integrates Lawnchair via joLawn. </li></ul><ul><li>http://joapp.com/docs/index.html </li></ul><ul><li>From a deveoper who worked on YUI and now works on webOS… / Demo </li></ul><ul><li>Works perfect with PhoneGap! </li></ul>
  19. 19. HTML5 framework for the minimalist <ul><li>Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax . </li></ul>
  20. 20. HTML5 basic framework <ul><li>XUI </li></ul><ul><li>http ://xuijs.com / </li></ul><ul><li>A super micro tiny DOM library for authoring HTML5 mobile web applications. </li></ul><ul><li>Basics , DOM , Event , Fx , Style , XHR </li></ul><ul><li>Works perfect with PhoneGap! </li></ul>
  21. 21. HTML5 framework helping you with the layout <ul><li>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. </li></ul>
  22. 22. HTML5 framework if you don’t want to relearn <ul><li>http://jquerymobile.com / </li></ul><ul><li>Dynamic touch interfaces that will adapt gracefully to a range of device form factors. </li></ul><ul><li>The system includes both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs). </li></ul><ul><li>Based on jQuery core. </li></ul><ul><li>See also: http://jqtouch.com / </li></ul><ul><li>A jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices. </li></ul>
  23. 23. HTML5 framework for applications <ul><li>Sencha Touch – Mobile Web App Framework (from the creators of ExtJS) </li></ul>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…
  24. 24. HTML5 framework for good & bad browsers <ul><li>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. </li></ul>
  25. 25. HTML5 template for mobile usage <ul><li>Mobile Boilerplate </li></ul>
  26. 26. Additional links <ul><li>HTML5 cheat sheet </li></ul><ul><li>http :// diveintohtml5.org/peeks-pokes-and-pointers.html </li></ul><ul><li>Get help selecting the right framwork with http://microjs.com/ </li></ul><ul><li>Another template: http :// html5reset.org </li></ul><ul><li>Canvas Cheat Sheet: </li></ul><ul><li>http://html5samples.com/wp-content/uploads/2010/03/HTML5_Canvas_Cheat_Sheet.png </li></ul><ul><li>Massive collection of tutorials: </li></ul><ul><li>“ The Ultimate HTML5 Tutorials and Useful Techniques” </li></ul><ul><li>http://www.dzinepress.com/2011/04/the-ultimate-html5-tutorials-and-useful-techniques/ </li></ul><ul><li>An oldie: http ://www.html5rocks.com/ </li></ul><ul><li>Smartphone Browser Landscape </li></ul><ul><li>http://www.alistapart.com/articles/smartphone-browser-landscape/ </li></ul><ul><li>iOS specific improvements since iOS 4.2 </li></ul><ul><li>http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5 </li></ul><ul><li>Safari DOM Additions for iOS: </li></ul><ul><li>http://developer.apple.com/library/safari/navigation/#section=Libraries&topic=Safari%20DOM%20Additions%20for%20iOS </li></ul>
  27. 27. Agenda <ul><li>Introduction, market shares, pro & contra, features, design principles </li></ul><ul><li>Tools, tips and tricks </li></ul><ul><li>SharePoint + HTML5 </li></ul><ul><li>DEMO </li></ul><ul><li>Questions </li></ul>
  28. 28. Principles for developing mobile applications <ul><li>Mobile first development (yiibu-style, http://yiibu.com / ) - They also have tips for Nokia browsers… ;-) </li></ul><ul><li>A practical approach: </li></ul><ul><li>Design the product. </li></ul><ul><li>Implement the product using web standards. </li></ul><ul><li>Launch the product. </li></ul><ul><li>Run into problems. </li></ul><ul><li>Translate product design into an iPhone* app. </li></ul><ul><li>Launch product on iTunes*. </li></ul><ul><li>* insert other platform here </li></ul><ul><li>Apps vs. the Web </li></ul><ul><li>http://www.alistapart.com/articles/apps-vs-the-web / </li></ul>
  29. 29. HTML5 performance tips <ul><li>Images slow things down immensely – get rid of them </li></ul><ul><li>Avoid text-shadow & box-shadow </li></ul><ul><li>Hardware-acceleration is quite new… and buggy </li></ul><ul><li>Use touch events whenever you can (ontouchmove > onmousemove > onclick) </li></ul><ul><li>Avoid opacity </li></ul><ul><li>Hand-code JavaScript and CSS (frameworks are heavy, no Prototype, no jQuery) </li></ul><ul><li>Use translate3d, not translate </li></ul>
  30. 30. Creating native apps from HTML5 <ul><li>There are a variety of frameworks that will wrap your HTML5 code and generate apps for different platforms. </li></ul><ul><li>They are usually slow, buggy and limited in functionality and support. </li></ul><ul><li>In most cases, you better do real native programming. </li></ul><ul><li>eBooks from HTML5 </li></ul><ul><li>http://www.lakercompendium.com / </li></ul>
  31. 31. Agenda <ul><li>Introduction, market shares, pro & contra, features, design principles </li></ul><ul><li>Tools, tips and tricks </li></ul><ul><li>SharePoint + HTML 5 </li></ul><ul><li>DEMO </li></ul><ul><li>Questions </li></ul>
  32. 32. + It has built in support for mobile applications, but…
  33. 33. HTML5 + SharePoint: Limitations <ul><li>The page won’t validate as proper HTML5 code. (SharePoint outputs content as XHTML 1.0 natively.) </li></ul><ul><li>contenteditable not supported. (Editor) </li></ul><ul><li>Ribbon positioning will fail. ( Workaround ) </li></ul><ul><li>Out-of-the-box SharePoint master pages need to be adjusted. ( v5.master ) </li></ul><ul><li>Change document type to: </li></ul><ul><li><!DOCTYPE HTML> </li></ul><ul><li>Remove: </li></ul><ul><li><meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; /> </li></ul>
  34. 34. Mobility Redirect vs. ContentEditable <ul><li>If you do not want to edit from mobile devices, you might just want to disable the mobility redirect. </li></ul><ul><li>Disable-SPFeature -Identity MobilityRedirect -Url http://yoursite </li></ul><ul><li><!-MobilityRedirect Feature-> <Feature ID=&quot;{f41cc668-37e5-4743-b4a8-74d1db3fd8a4}&quot; Name=&quot;FeatureDefinition/f41cc668-37e5-4743-b4a8-74d1db3fd8a4&quot; SourceVersion=&quot;1.0.0.0&quot; /> </li></ul>
  35. 35. iOS and SharePoint – Redirect? <ul><li>contenteditable not supported: </li></ul><ul><li>Automatic switch to mobile version </li></ul><ul><li><system>inetpubwwwrootwssVirtualDirectories80App_browserscompat.browser </li></ul><ul><li><!-- iPad Safari Browser -->  <!-- sample UA &quot;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&quot; -->  <browser id=&quot;iPadSafari&quot; parentID=&quot;AppleSafari&quot;>  <identification>  <userAgent match=&quot;iPad&quot; />  <userAgent match=&quot;Mobile&quot; />  </identification>  <capabilities>  <capability name=&quot;isMobileDevice&quot; value=&quot;true&quot; />  <capability name=&quot;canInitiateVoiceCall&quot; value=&quot;true&quot; />  <capability name=&quot;optimumPageWeight&quot; value=&quot;1500&quot; />  <capability name=&quot;requiresViewportMetaTag&quot; value=&quot;true&quot; />  <capability name=&quot;supportsTouchScreen&quot; value=&quot;true&quot; />  <capability name=&quot;telephoneNumberDetectionDisabled&quot; value=&quot;true&quot; />  </capabilities>  </browser> </li></ul>
  36. 36. iOS and SharePoint – Redirect? <ul><li>contenteditable not supported: </li></ul><ul><li>b) Manually switch to mobile version </li></ul><ul><li>http:// URL /m/ </li></ul><ul><li>http:// URL /_layouts/mobile/default.aspx </li></ul><ul><li>c) For short /m/ version, the MobilityRedirect feature has to be activated. </li></ul><ul><li>See also: Mobile development with SharePoint Foundation </li></ul><ul><li>http:// msdn.microsoft.com/en-us/library/ms464268.aspx </li></ul><ul><li>and: http:// support.microsoft.com/kb/930147 </li></ul>
  37. 37. iOS and SharePoint – Redirect? <ul><li>Want to see how a page is rendered for mobile? Add: ?mobile=1 to the URL… </li></ul>
  38. 38. iOS and SharePoint – Redirect?
  39. 39. iOS and SharePoint – Redirect?
  40. 40. DEMO <ul><li>http://m.christian-heindel.de </li></ul>
  41. 41. 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

×