SlideShare a Scribd company logo
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 2014
Mark Rackley
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
Mark Rackley
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark 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 SharePoint
Mark 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 Beast
Mark Rackley
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010
Hemant Joshi
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuery
Mark 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 JavaScript
John 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 libraries
Mark 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 it
Mark 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 ITPros
Paul 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 templates
Paul 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 knockoutjs
Fabio 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 2010
Chris 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 JavaScript
Regroove
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery Guide
Mark 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 DIQA
DIQA Projektmanagement GmbH
 
Automate Variations in SharePoint 2013
Automate Variations in SharePoint 2013Automate Variations in SharePoint 2013
Automate Variations in SharePoint 2013
Mai 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 Part
GSoft
 
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
Joel 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 2016
Lars 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 3
Ryan 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 Bootstrap
Thomas 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 APIs
Fisnik Doko
 
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
Lohith Goudagere Nagaraj
 
Html5 phillycc
Html5 phillyccHtml5 phillycc
Html5 phillycc
Jennifer Kenderdine
 
Building rich interface components with SharePoint
Building rich interface components with SharePointBuilding rich interface components with SharePoint
Building rich interface components with SharePoint
Louis-Philippe Lavoie
 
State of the Web
State of the WebState of the Web
State of the Web
Dmitry Buzdin
 
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
 
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
 
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
Helder da Rocha
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
Dave Ross
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Todd Anglin
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
Ivano Malavolta
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
Nagendra 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-jquery
Marijn 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 flow
Vincent Biret
 
SnapyX
SnapyXSnapyX
SnapyX
ekino
 
SnapyX - ParisJS
SnapyX - ParisJSSnapyX - ParisJS
SnapyX - ParisJS
florianharmel
 
HTML5
HTML5HTML5
Single page applications the basics
Single page applications the basicsSingle page applications the basics
Single page applications the basics
Chris 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 (ottawa)
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 (toronto)
Vincent biret azure functions and flow (toronto)Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)
 
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

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 

Recently uploaded (20)

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 

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