Extending SharePoint 2010with HTML 5    Hemant Joshi    Senior Consultant , IW    Hemant.joshi@neudesic.com
Session Objectives and Takeaways   Brief tour of HTML5   Leveraging HTML5 Features in SharePoint 2010   Adding Support ...
Brief tour of HTML5
Brief History of HTML and CSS• HTML 3.2 and CSS 1.0 (1997)    – Browser wars between Netscape vs. Internet Explorer• HTML ...
Five things you need to know about HTML5!1.   Its not once big thing.2.   You don’t need to throw anything away.3.   Its e...
HTML5 & Technology Classes
Its here to stay…
HTML is New HTML5This is the HTML5 doctype: <!DOCTYPE html> That’s it. Just 15 characters. It’s so easy, you can type it b...
Moving to HTML5• Primary Motivations    –   To write HTML that works consistently across all modern browsers    –   To tak...
Responsive UI
Responsive UI
Leveraging HTML5 Features in SharePoint 2010
It has built in support,   but…                                  +
SharePoint As of Today…
SharePoint As of Today…
Getting it Working…• <!DOCTYPE html>• Internet Explorer 9 compatibility    – <meta http-equiv="X-UA-Compatible" content="I...
Using HTML5 in SharePoint Master Page
Web Pages: Before and After
HTML5 Master Page• Lets See a custom master page for SharePoint 2010 that…    – uses the HTML5 doctype    – provides found...
Creating Pages using new HTML5 Features• Examples of using HTML5 Functionality in SharePoint 2010    –   Using Scalable Ve...
Adding Support for IE8 and IE7
What About IE8 and IE7?• IE8 and IE7 Still Make Up Significant Percentage of Browser Base    –   Graphic on this slide sho...
Adding Support for IE7 and IE8• Support older browsers requires adding "polyfills"    –   A polyfill is a shim which provi...
Integrating Modernizr
When is HTML5 ‘done’?
References
References• HTML5 cheat sheet•   http://diveintohtml5.org/peeks-pokes-and-pointers.html• Get help selecting the right fram...
Further reading….
Q&A
Thank You
Upcoming SlideShare
Loading in...5
×

Html5 with SharePoint 2010

11,783

Published on

HTML 5 with SharePoint 2010:

With few changes, HTML5 can be used in SharePoint 2010.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,783
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 with SharePoint 2010"

  1. 1. Extending SharePoint 2010with HTML 5 Hemant Joshi Senior Consultant , IW Hemant.joshi@neudesic.com
  2. 2. Session Objectives and Takeaways Brief tour of HTML5 Leveraging HTML5 Features in SharePoint 2010 Adding Support for IE8 and IE7 References….
  3. 3. Brief tour of HTML5
  4. 4. Brief History of HTML and CSS• HTML 3.2 and CSS 1.0 (1997) – Browser wars between Netscape vs. Internet Explorer• HTML 4.01 and CSS 2.0 (1999) – Exit Netscape – Enter FireFox, Opera, Safari, etc.• XHTML 1.0 and CSS 2.1 (2000) – HTML content pages written as valid XML documents SharePoint 2010 lives here• HTML 5 and CSS 3.0 (2005) – Rejects the constraints added by XHTML – Standardizes new HTML elements, CSS properties and JavaScript APIs
  5. 5. Five things you need to know about HTML5!1. Its not once big thing.2. You don’t need to throw anything away.3. Its easy to get started.4. It already works.5. Its here to stay.
  6. 6. HTML5 & Technology Classes
  7. 7. Its here to stay…
  8. 8. HTML is New HTML5This is the HTML5 doctype: <!DOCTYPE html> That’s it. Just 15 characters. It’s so easy, you can type it by hand..
  9. 9. Moving to HTML5• Primary Motivations – To write HTML that works consistently across all modern browsers – To take advantage of the of the new JavaScript APIs – To eliminate need for Flash and other browser-specific plug-ins – To target mobile devices and the CEOs iPad• Primary Pain Points – Todays "modern" browsers only support portions of HTML5 specification – Full HTML5 specification support across modern browsers anticipated in 2022 – Internet Explorer (IE) does not offer HTML5 tag support until IE9 – IE8 and IE7 are difficult to support in HTML5 Websites
  10. 10. Responsive UI
  11. 11. Responsive UI
  12. 12. Leveraging HTML5 Features in SharePoint 2010
  13. 13. It has built in support, but… +
  14. 14. SharePoint As of Today…
  15. 15. SharePoint As of Today…
  16. 16. Getting it Working…• <!DOCTYPE html>• Internet Explorer 9 compatibility – <meta http-equiv="X-UA-Compatible" content="IE=9"/>– Potential issues and workarounds
  17. 17. Using HTML5 in SharePoint Master Page
  18. 18. Web Pages: Before and After
  19. 19. HTML5 Master Page• Lets See a custom master page for SharePoint 2010 that… – uses the HTML5 doctype – provides foundation for pages to take advantage of HTML5 features – Demo………
  20. 20. Creating Pages using new HTML5 Features• Examples of using HTML5 Functionality in SharePoint 2010 – Using Scalable Vector Graphics (SVG) – Using the Canvas – Using the Video element – Using Geolocation – Demo………
  21. 21. Adding Support for IE8 and IE7
  22. 22. What About IE8 and IE7?• IE8 and IE7 Still Make Up Significant Percentage of Browser Base – Graphic on this slide show stats across Internet Users – SharePoint environment are even more reliant on IE8 and IE7 – Neither IE8 nor IE7 support most changes to HTML5 – Leveraging HTML5 while supporting IE8 and IE7 requires considerable effort
  23. 23. Adding Support for IE7 and IE8• Support older browsers requires adding "polyfills" – A polyfill is a shim which provides fallback functionality to older browsers – Allows you to code to spec for HTML5, CSS3 and new JavaScript API – Polyfills fill the gaps for older browsers to add support or degrade gracefully – As users upgrade, your code doesnt change but user experience improves• Supporting Older Browsers Begins with Modernizr – Open source project that tests current browser for over 40 HTML5 features – It adds classes to HTML elements that signify which features are supported – It creates JavaScript object named Modernizr with Boolean properties – It provides script loader with polyfills to backfill functionality in old browsers
  24. 24. Integrating Modernizr
  25. 25. When is HTML5 ‘done’?
  26. 26. References
  27. 27. References• HTML5 cheat sheet• http://diveintohtml5.org/peeks-pokes-and-pointers.html• Get help selecting the right framwork with http://microjs.com/• Another template: http://html5reset.org• Canvas Cheat Sheet:• http://html5samples.com/wp-content/uploads/2010/03/HTML5_Canvas_Cheat_Sheet.png• Massive collection of tutorials:• “The Ultimate HTML5 Tutorials and Useful Techniques”• http://www.dzinepress.com/2011/04/the-ultimate-html5-tutorials-and-useful-techniques/• An oldie: http://www.html5rocks.com/
  28. 28. Further reading….
  29. 29. Q&A
  30. 30. Thank You

×