Upload
chad-schroeder
View
35.280
Download
2
Tags:
Embed Size (px)
DESCRIPTION
This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.
Citation preview
Bringing HTML5 Alive in SharePoint 2010
Chad Schroeder January 2012
Goals
HTML 5 Features
Prepare SharePoint for
HTML5
Reasons to utilize HTML5
SharePoint Customizations
using HTML5
Inspire your own ideas
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
I
HTML 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)
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
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
Setting up Visual Studio
• Visual Studio 2010 SP1
• Web Standards Update– HTML5 Intellisense– CSS3
• Tools > Options > Text Editor > HTML > Validation
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
Supporting HTML5 in SharePoint Environment
• SVG– Add SVG MIME type in IIS to serve from Image Libraries
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
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)
• Element that allows pixel-level drawing via JavaScript• Draw
– Lines– Boxes– Circles– Text– Images
• Uses– Visualization (Charts, Graphs, etc)– Animation– Client image effects– Games–
Canvas <canvas></canvas>
JavaScript
8
DEMO: Canvas
• Water Background– Pure HTML + JavaScript
animation
• Signature Field– Add signature validation to
SharePoint forms
• Scalable Vector Graphics– 2D Graphics described in XML– Looks same at any size
• Search Friendly– Can contain text and metadata
• Interactive– No MAP needed
• Dynamic– Can manipulate at runtime
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>
<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" /><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 -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" /><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>
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 browserslike IE 10)
Reminder!
Do notDelete!This content
is going toexpire inJanuary
Finish
SPSVB
Presentation!
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
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
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
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
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
WebStorage
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!
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
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
Main Thread
Load lots of dataWorker A
Long calculationWorker B
DEMO: Web Notifications + Web Workers
• Event Alert Feature– Notifies user once for any events today– Notifications require acknowledgment
• Uses regular SharePoint calendar
• Important to do once– Stay only mildly annoying
• Also uses Web Storage! Alert Web Part
Calendar
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
Thanks to SPSVB Sponsors!
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