This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.
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