SlideShare a Scribd company logo
1 of 27
Download to read offline
Bringing HTML5 Alive in SharePoint 2010


         Chad Schroeder January 2012
Goals


          HTML 5                        Reasons to
          Features                     utilize HTML5



                   Inspire your own ideas


           Prepare                      SharePoint
        SharePoint for                Customizations
           HTML5                       using HTML5
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
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)
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
DEMO: Canvas


• Water Background
   – Pure HTML + JavaScript
     animation


• Signature Field
   – Add signature validation to
     SharePoint forms
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>
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)
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
                                              Web
                                             Storage
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
                                                       Load lots of data
                                            Worker A



                      Main Thread                           Worker B
                                                                       Long calculation
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
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

More Related Content

What's hot

SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014Mark Rackley
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsMark Rackley
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQueryMark Rackley
 
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...Mark Roden
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointMark Rackley
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint BeastMark Rackley
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010Hemant Joshi
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQueryMark Rackley
 
Transform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScriptTransform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScriptJohn Calvert
 
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery librariesTulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery librariesMark Rackley
 
NOW I Get it!! What SharePoint IS and why I need it
NOW I Get it!! What SharePoint IS and why I need itNOW I Get it!! What SharePoint IS and why I need it
NOW I Get it!! What SharePoint IS and why I need itMark Rackley
 
SPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITProsSPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITProsPaul Hunt
 
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...SPTechCon
 
Using js link and display templates
Using js link and display templatesUsing js link and display templates
Using js link and display templatesPaul Hunt
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsCodemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsFabio Franzini
 
2012 - HTML5, CSS3 and jQuery with SharePoint 2010
2012 - HTML5, CSS3 and jQuery with SharePoint 20102012 - HTML5, CSS3 and jQuery with SharePoint 2010
2012 - HTML5, CSS3 and jQuery with SharePoint 2010Chris O'Connor
 
SharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScriptSharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScriptRegroove
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery GuideMark Rackley
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 Fabio Franzini
 

What's hot (20)

SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
 
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuery
 
Transform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScriptTransform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScript
 
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery librariesTulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
 
NOW I Get it!! What SharePoint IS and why I need it
NOW I Get it!! What SharePoint IS and why I need itNOW I Get it!! What SharePoint IS and why I need it
NOW I Get it!! What SharePoint IS and why I need it
 
SPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITProsSPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITPros
 
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
 
Using js link and display templates
Using js link and display templatesUsing js link and display templates
Using js link and display templates
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsCodemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
 
2012 - HTML5, CSS3 and jQuery with SharePoint 2010
2012 - HTML5, CSS3 and jQuery with SharePoint 20102012 - HTML5, CSS3 and jQuery with SharePoint 2010
2012 - HTML5, CSS3 and jQuery with SharePoint 2010
 
SharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScriptSharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScript
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery Guide
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
 

Viewers also liked

SPSCT15 - An Independent Evaluation of Third-Party SharePoint Analytics Offer...
SPSCT15 - An Independent Evaluation of Third-Party SharePoint Analytics Offer...SPSCT15 - An Independent Evaluation of Third-Party SharePoint Analytics Offer...
SPSCT15 - An Independent Evaluation of Third-Party SharePoint Analytics Offer...Jonathan Ralton
 
Stop Searching, Start Finding: The Findability Solution for SharePoint from DIQA
Stop Searching, Start Finding: The Findability Solution for SharePoint from DIQAStop Searching, Start Finding: The Findability Solution for SharePoint from DIQA
Stop Searching, Start Finding: The Findability Solution for SharePoint from DIQADIQA Projektmanagement GmbH
 
Automate Variations in SharePoint 2013
Automate Variations in SharePoint 2013Automate Variations in SharePoint 2013
Automate Variations in SharePoint 2013Mai Omar Desouki
 
Image Slider with SharePoint 2013 Search Results Web Part
Image Slider with SharePoint 2013 Search Results Web PartImage Slider with SharePoint 2013 Search Results Web Part
Image Slider with SharePoint 2013 Search Results Web PartGSoft
 
SharePoint 2013 Usage Analytics and Making Metrics Actionable
SharePoint 2013 Usage Analytics and Making Metrics ActionableSharePoint 2013 Usage Analytics and Making Metrics Actionable
SharePoint 2013 Usage Analytics and Making Metrics ActionableJoel Oleson
 
Set up an SharePoint On-Premises environment for developing provider-hosted a...
Set up an SharePoint On-Premises environment for developing provider-hosted a...Set up an SharePoint On-Premises environment for developing provider-hosted a...
Set up an SharePoint On-Premises environment for developing provider-hosted a...SPC Adriatics
 
SQL Server 2016 and SharePoint 2016 - Lars PLatzdasch - SQL Konferenz 2016
SQL Server 2016 and SharePoint 2016  - Lars PLatzdasch - SQL Konferenz 2016SQL Server 2016 and SharePoint 2016  - Lars PLatzdasch - SQL Konferenz 2016
SQL Server 2016 and SharePoint 2016 - Lars PLatzdasch - SQL Konferenz 2016Lars Platzdasch
 
SharePoint Fest Chicago 2015 - Anatomy of configuring provider hosted add-in...
SharePoint Fest Chicago 2015  - Anatomy of configuring provider hosted add-in...SharePoint Fest Chicago 2015  - Anatomy of configuring provider hosted add-in...
SharePoint Fest Chicago 2015 - Anatomy of configuring provider hosted add-in...Nik Patel
 
How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3Ryan McIntyre
 
The A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThe A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThomas Daly
 

Viewers also liked (10)

SPSCT15 - An Independent Evaluation of Third-Party SharePoint Analytics Offer...
SPSCT15 - An Independent Evaluation of Third-Party SharePoint Analytics Offer...SPSCT15 - An Independent Evaluation of Third-Party SharePoint Analytics Offer...
SPSCT15 - An Independent Evaluation of Third-Party SharePoint Analytics Offer...
 
Stop Searching, Start Finding: The Findability Solution for SharePoint from DIQA
Stop Searching, Start Finding: The Findability Solution for SharePoint from DIQAStop Searching, Start Finding: The Findability Solution for SharePoint from DIQA
Stop Searching, Start Finding: The Findability Solution for SharePoint from DIQA
 
Automate Variations in SharePoint 2013
Automate Variations in SharePoint 2013Automate Variations in SharePoint 2013
Automate Variations in SharePoint 2013
 
Image Slider with SharePoint 2013 Search Results Web Part
Image Slider with SharePoint 2013 Search Results Web PartImage Slider with SharePoint 2013 Search Results Web Part
Image Slider with SharePoint 2013 Search Results Web Part
 
SharePoint 2013 Usage Analytics and Making Metrics Actionable
SharePoint 2013 Usage Analytics and Making Metrics ActionableSharePoint 2013 Usage Analytics and Making Metrics Actionable
SharePoint 2013 Usage Analytics and Making Metrics Actionable
 
Set up an SharePoint On-Premises environment for developing provider-hosted a...
Set up an SharePoint On-Premises environment for developing provider-hosted a...Set up an SharePoint On-Premises environment for developing provider-hosted a...
Set up an SharePoint On-Premises environment for developing provider-hosted a...
 
SQL Server 2016 and SharePoint 2016 - Lars PLatzdasch - SQL Konferenz 2016
SQL Server 2016 and SharePoint 2016  - Lars PLatzdasch - SQL Konferenz 2016SQL Server 2016 and SharePoint 2016  - Lars PLatzdasch - SQL Konferenz 2016
SQL Server 2016 and SharePoint 2016 - Lars PLatzdasch - SQL Konferenz 2016
 
SharePoint Fest Chicago 2015 - Anatomy of configuring provider hosted add-in...
SharePoint Fest Chicago 2015  - Anatomy of configuring provider hosted add-in...SharePoint Fest Chicago 2015  - Anatomy of configuring provider hosted add-in...
SharePoint Fest Chicago 2015 - Anatomy of configuring provider hosted add-in...
 
How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3
 
The A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThe A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with Bootstrap
 

Similar to Bringing HTML5 alive in SharePoint

HTML5 features & JavaScript APIs
HTML5 features & JavaScript APIsHTML5 features & JavaScript APIs
HTML5 features & JavaScript APIsFisnik Doko
 
Building rich interface components with SharePoint
Building rich interface components with SharePointBuilding rich interface components with SharePoint
Building rich interface components with SharePointLouis-Philippe Lavoie
 
Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent Biret
 
Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent Biret
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3Helder da Rocha
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsIvano Malavolta
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]David Wesst
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Jeremy Likness
 
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquerySpsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jqueryMarijn Somers
 
SPS calgary 2017 introduction to azure functions microsoft flow
SPS calgary 2017 introduction to azure functions microsoft flowSPS calgary 2017 introduction to azure functions microsoft flow
SPS calgary 2017 introduction to azure functions microsoft flowVincent Biret
 
SnapyX
SnapyXSnapyX
SnapyXekino
 
Single page applications the basics
Single page applications the basicsSingle page applications the basics
Single page applications the basicsChris Love
 

Similar to Bringing HTML5 alive in SharePoint (20)

HTML5 features & JavaScript APIs
HTML5 features & JavaScript APIsHTML5 features & JavaScript APIs
HTML5 features & JavaScript APIs
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Html5 phillycc
Html5 phillyccHtml5 phillycc
Html5 phillycc
 
Building rich interface components with SharePoint
Building rich interface components with SharePointBuilding rich interface components with SharePoint
Building rich interface components with SharePoint
 
State of the Web
State of the WebState of the Web
State of the Web
 
Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)
 
Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquerySpsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquery
 
SPS calgary 2017 introduction to azure functions microsoft flow
SPS calgary 2017 introduction to azure functions microsoft flowSPS calgary 2017 introduction to azure functions microsoft flow
SPS calgary 2017 introduction to azure functions microsoft flow
 
SnapyX
SnapyXSnapyX
SnapyX
 
SnapyX - ParisJS
SnapyX - ParisJSSnapyX - ParisJS
SnapyX - ParisJS
 
HTML5
HTML5HTML5
HTML5
 
Single page applications the basics
Single page applications the basicsSingle page applications the basics
Single page applications the basics
 

Recently uploaded

Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 

Recently uploaded (20)

Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 

Bringing HTML5 alive in SharePoint

  • 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