2. Session Objectives and Takeaways Brief tour of HTML5 Leveraging HTML5 Features in SharePoint 2010 Adding Support for IE8 and IE7 References….
3. Brief tour of HTML5
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. HTML5 & Technology Classes
7. Its here to stay…
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..
10. Responsive UI
11. Responsive UI
12. Leveraging HTML5 Features in SharePoint 2010
13. It has built in support, but… +
14. SharePoint As of Today…
15. SharePoint As of Today…
16. Getting it Working…• <!DOCTYPE html>• Internet Explorer 9 compatibility – <meta http-equiv="X-UA-Compatible" content="IE=9"/>– Potential issues and workarounds
17. Using HTML5 in SharePoint Master Page
18. Web Pages: Before and After
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. 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. Adding Support for IE8 and IE7
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
24. Integrating Modernizr
25. When is HTML5 ‘done’?
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/