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