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

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