Bringing HTML5 alive in SharePoint
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Bringing HTML5 alive in SharePoint

  • 34,935 views
Uploaded on

This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.

This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
34,935
On Slideshare
8,593
From Embeds
26,342
Number of Embeds
54

Actions

Shares
Downloads
63
Comments
1
Likes
2

Embeds 26,342

http://chadschroeder.blogspot.com 11,845
http://chadschroeder.blogspot.in 2,678
http://chadschroeder.blogspot.co.uk 1,441
http://chadschroeder.blogspot.de 1,185
http://chadschroeder.blogspot.ca 1,051
http://chadschroeder.blogspot.com.au 854
http://chadschroeder.blogspot.fr 696
http://chadschroeder.blogspot.ru 604
http://chadschroeder.blogspot.nl 599
http://chadschroeder.blogspot.se 512
http://chadschroeder.blogspot.it 350
http://chadschroeder.blogspot.com.br 327
http://chadschroeder.blogspot.com.es 326
http://chadschroeder.blogspot.ch 323
http://chadschroeder.blogspot.be 301
http://chadschroeder.blogspot.no 224
http://chadschroeder.blogspot.dk 215
http://chuvash.eu 185
http://chadschroeder.blogspot.sg 177
http://chadschroeder.blogspot.hk 173
http://chadschroeder.blogspot.co.nz 163
http://chadschroeder.blogspot.fi 160
http://chadschroeder.blogspot.ae 157
http://chadschroeder.blogspot.com.ar 157
http://chadschroeder.blogspot.co.at 152
http://chadschroeder.blogspot.co.il 148
http://chadschroeder.blogspot.pt 146
http://chadschroeder.blogspot.cz 144
http://chadschroeder.blogspot.jp 143
http://chadschroeder.blogspot.mx 127
http://chadschroeder.blogspot.ro 123
http://sharepointkunskap.wordpress.com 97
http://chadschroeder.blogspot.com.tr 95
http://chadschroeder.blogspot.ie 89
http://chadschroeder.blogspot.kr 81
http://chadschroeder.blogspot.hu 74
http://chadschroeder.blogspot.tw 72
http://chadschroeder.blogspot.sk 54
http://translate.googleusercontent.com 32
http://chadschroeder.blogspot.gr 32
http://webcache.googleusercontent.com 13
http://theoldreader.com 3
http://a0.twimg.com 2
http://131.253.14.98 2
http://www.chadschroeder.blogspot.in 1
http://131.253.14.125 1
http://111.221.29.49 1
http://65.55.108.4 1
http://www.google.nl 1
https://translate.googleusercontent.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Bringing HTML5 Alive in SharePoint 2010 Chad Schroeder January 2012
  • 2. Goals HTML 5 Reasons to Features utilize HTML5 Inspire your own ideas Prepare SharePoint SharePoint for Customizations HTML5 using HTML5
  • 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. 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. 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. 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. Setting up Visual Studio• Visual Studio 2010 SP1• Web Standards Update – HTML5 Intellisense – CSS3• Tools > Options > Text Editor > HTML > Validation
  • 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. Supporting HTML5 in SharePoint Environment• SVG – Add SVG MIME type in IIS to serve from Image Libraries
  • 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. 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. 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. DEMO: Canvas• Water Background – Pure HTML + JavaScript animation• Signature Field – Add signature validation to SharePoint forms
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Thanks to SPSVB Sponsors!
  • 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