Successfully reported this slideshow.

Bringing HTML5 alive in SharePoint

3

Share

Loading in …3
×
1 of 27
1 of 27

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Bringing HTML5 alive in SharePoint

  1. 1. Bringing HTML5 Alive in SharePoint 2010 Chad Schroeder January 2012
  2. 2. Goals HTML 5 Reasons to Features utilize HTML5 Inspire your own ideas Prepare SharePoint SharePoint for Customizations HTML5 using HTML5
  3. 3. What is HTML 5? • Evolution of the HTML standard – HTML4 spec dates back to the 1990’s!! • Backwards compatible – Least impact to existing pages possible • Interoperability – Platform agnostic • Not Perfect – Complete spec not done yet – and no end in sight – Cannot decide on a video codec…Ogg Theora vs. H.264 vs. VP8 • Forces us to browser sniff and publish multiple formats – Not 100% supported in all browsers yet – must include method to degrade
  4. 4. Why use HTML5? • New Features • Looks good on resume – Cutting edge skill that will be around for a long time • Accessibility (SEO) – Content not always accessible to robots within Flash/Silverlight – Improved semantics • Efficiency – Single version of content >> Multiple platforms (desktop, tablet, phone)
  5. 5. Why use HTML5 (more!) • SkyDrive – Old: Silverlight – New: HTML5 • Google – Google Music on iOS – YouTube’s new player • Adobe – Ditching Flash on mobile devices for HTML5 • Windows 8 – Preferred way to develop: HTML5 + JavaScript • Silverlight – Version 5 is expected to be last version
  6. 6. Reasons to Avoid! • Current timeline for finalized specifications: 2014 – Not the most solid foundation • May break existing web parts • Cross browser + cross version differences – Expensive – Headache
  7. 7. Setting up Visual Studio • Visual Studio 2010 SP1 • Web Standards Update – HTML5 Intellisense – CSS3 • Tools > Options > Text Editor > HTML > Validation
  8. 8. SharePoint 2010 Master Page • DOCTYPE • Change ‘Forced IE8’ mode • Add Feature Detection – Modernizr http://www.modernizr.com/ • Add jQuery – Take advantage of HTML5 with minimal code
  9. 9. Supporting HTML5 in SharePoint Environment • SVG – Add SVG MIME type in IIS to serve from Image Libraries
  10. 10. General Development Guidelines • Use wrapper objects – Allows easy injection of fallback code and are more adaptive to changes • Always have a fallback (use feature detection) • Cross browser testing still needed (and annoying) • Don’t be afraid of the ‘no soup for you’ fallback – Non critical functionality: Old browsers get nothing • Adopt in small doses + set expectations
  11. 11. CSS3 • CSS3 support follows HTML5 support • Backward Compatibility with CSS2 • New features (‘modules’) – Rounded borders – Dynamic fonts (not limited to local set) – Transformations (rotate, skew) – Transitions (add effect when changing style) – Text effects (shadow)
  12. 12. Canvas <canvas></canvas> • Element that allows pixel-level drawing via JavaScript • Draw – Lines – Boxes – Circles – Text – Images • Uses – Visualization (Charts, Graphs, etc) – Animation – Client image effects – Games – 8
  13. 13. DEMO: Canvas • Water Background – Pure HTML + JavaScript animation • Signature Field – Add signature validation to SharePoint forms
  14. 14. SVG <svg></svg> <svg height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> </svg> • Scalable Vector Graphics – 2D Graphics described in XML – Looks same at any size • Search Friendly – Can contain text and metadata • Interactive <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>HTML5 Logo</title><polygon fill="#e44d26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512" /><polygon fill="#f16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894" – No MAP needed /><polygon fill="#ebebeb" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627" /><polygon fill="#ebebeb" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399" /><path d="M 108.382 0 h 23.077 v 22.8 h 21.11 V 0 h 23.078 v 69.044 H 152.57 v -23.12 h -21.11 v 23.12 h -23.077 V 0 Z" /><path d="M 205.994 22.896 h -20.316 V 0 h 63.72 v 22.896 h -20.325 v 46.148 h -23.078 V 22.896 Z" /><path d="M 259.511 0 h 24.063 l 14.802 24.26 L 313.163 0 h 24.072 v 69.044 h -22.982 V 34.822 l -15.877 24.549 h -0.397 l -15.888 -24.549 v 34.222 h - • Dynamic 22.58 V 0 Z" /><path d="M 348.72 0 h 23.084 v 46.222 h 32.453 v 22.822 H 348.72 V 0 Z" /><polygon fill="#ffffff" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217" – Can manipulate at runtime /><polygon fill="#ffffff" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305" /></svg>
  15. 15. DEMO: SVG • Post-It-Note Feature – Single base SVG (lightweight) – Dynamically generated text – Scales down to conserve space • Drawbacks – Fallback to GIF/JPG could get ugly – Manipulating SVG in JavaScript is currently more difficult than it should be (supposed to be better in future browsers like IE 10)
  16. 16. Geolocation • JavaScript API – navigator.geolocation – Get or watch current position – browser is responsible for providing the details – Results in an object containing Latitude + Longitude • Seen this already? – Non-HTML5 implementations use all of this: • Server based code • Service to get location based on your IP • HTML5 Way – More accessible – no need for 3rd party services or server based code – Potentially more accurate (use native GPS capabilities) • Warning: User can opt-out
  17. 17. DEMO: Geolocation API • Web Part that shows current user location – Depends on jQuery and Bing Maps • Not terribly interesting, but it proves: – User location can be discovered without 3rd party components – Power to use location is in hands of end user
  18. 18. Video <video></video> • Built-in HTML5 video player • No dependency on Flash or Silverlight on client • Why bother? – Cross platform (MOBILE) – Customization – Standardization (eventually) • Ready for Prime Time? – Not really • Not supported in all browsers • Fallback strategy could be cost-prohibitive • Best way to use now? – Embed using HTML5 with a Silverlight fallback
  19. 19. DEMO: HTML5 Video • Embed video in CEWP’s – They play in iOS and Android • Still stripped out in Wiki pages – Use CEWP within Wiki page • “Deep” integration would be nice – Custom field rendering template
  20. 20. Web Storage • Store structured data on the client side – Personalization data – User-specific style/data/options • Durable for session or ‘until cleared’ – Clearing governed by user/browser • Strings only – Use a wrapper class! • Security – Like cookies Web Storage
  21. 21. DEMO: Web Storage • Recent Documents Feature – Track the last ten documents the user opens • Sounds simple, but… How to persist data? – Option 1: SharePoint Lists or Server side storage (DB or file) • Complicated • Scalable (lots of users…) – Option 2: Cookies • Bloated HTTP payload • Unreliable – Option 3: HTML 5 Web Storage • Perfect!
  22. 22. Web Notifications • Out of browser notifications • Think Outlook notifications – Outlook Web Access notifications easy to miss • Finally: Users forced to acknowledge content • Can specify Title, Description, and Icon • Requires user approval – Good for users – Not great for site creators • Only supported by Webkit – Not even looking to be in IE 10
  23. 23. Web Workers • JavaScript gets multithreading – No longer have to fake it using setTimeout and setInterval • More responsive UI – Less load on main thread which handles UI • But… – All challenges of multithreading: • Cannot access DOM • Cannot share resources like scripts loaded in ‘main’ thread Load lots of data Worker A Main Thread Worker B Long calculation
  24. 24. DEMO: Web Notifications + Web Workers • Event Alert Feature – Notifies user once for any events today Calendar – Notifications require acknowledgment • Uses regular SharePoint calendar • Important to do once – Stay only mildly annoying • Also uses Web Storage! Alert Web Part
  25. 25. The Rest of HTML5 • Semantic Elements – Improve Search (header, footer, nav, section, etc.) • Form Enhancements – Improve form usability and footprint • Audio Element – Give your sites a funky fresh beat • Navigation API – Improve movement through SharePoint sites • Text API for SVG – Dynamic banners • Offline Web Applications – Lighten your SP database load
  26. 26. Thanks to SPSVB Sponsors!
  27. 27. References + Links • Code for this Presentation – http://chadschroeder.bogspot.com • HTML5 + CSS3 Support Matrix – http://caniuse.com/#cats=HTML5,JS_API • IE 10 Guide for Developers – HTML5 – http://msdn.microsoft.com/en-us/library/hh673546(v=VS.85).aspx • HTML5 Rocks – http://www.html5rocks.com/en/ • MSDN Article – http://msdn.microsoft.com/en-us/magazine/hh335062.aspx

×