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