This document provides an overview of HTML5, including what it is and isn't, new semantic elements like <header> and <nav>, new form input types like email and url, the <video> element, differences between canvas, SVG and CSS3, techniques for checking browser compatibility, and examples of HTML5 in higher education. The presenter encourages using Modernizr and Can I Use to check support and considering progressive enhancement when an unsupported feature is desired rather than identical rendering across all browsers.

1. Let’s Make Progress Shahab Lashkari Product Manager OmniUpdate, Inc. shahab@omniupdate.com @OUShahab

2. Overview What it is What it isn’t Semantics Forms Video Canvas vs. SVG vs. CSS3 Compatibility Questions?

3. What is HTML 5? The latest revision of the HTML standard Contains both HTML 4 and XHTML 1 Though some elements have been deprecated Can be written in either syntax New APIs (e.g., canvas, offline storage, media playback, drag-and-drop, etc.) New rules for error handling (!)

4. What HTML 5 is not… An official W3C recommendation yet A silver bullet Fully supported in [m]any browsers

5. So what’s different?

6. So what’s different?

7. New semantic elements article aside audio canvas figcaption figure footer header nav section video etc.

8. New semantic elements <header> <nav> <article> <aside> <section> <footer>

9. New form input types email url tel number range search date month week time color etc. e.g., <input type="email">

10. Forms New input types can make life easier on mobile devices!

11. New form input attributes autofocus* placeholder required* pattern speech?* etc. *booleanattributes

12. Boolean attributes <input type="email" autofocus> <input type="email" autofocus="autofocus"> <input type="email" autofocus="true"> <input type="email" autofocus="false">

13. <video> <video id="myvideo" … > <source … /> … your fallback code goes here … </video> Use JavaScript to interact with DOM and create your own video controls document.getElementById("myvideo").play();

14. <video>

15. Canvas vs. SVG vs. CSS3 Canvas is essentially a sketchpad Scalable Vector Graphics use math to create images CSS3 can do some prettyamazingthings

16. Compatibility Should I be sniffing for user agent? Then how will I know which features are supported? What if I want to use a feature that isn’t supported in all browsers?

17. Should I be sniffing for user agent? NO

18. Which features are supported? Mark Pilgrim suggests using one of 4 techniques: Check if a certain property exists on a global object (such as window or navigator). Example: testing for geolocationsupport Create an element, then check if a certain property exists on that element. Example: testing for canvas support Create an element, check if a certain method exists on that element, then call the method and check the value it returns. Example: testing which video formats are supported Create an element, set a property to a certain value, then check if the property has retained its value. Example: testing which <input> types are supported

19. Useful Resources Modernizr http://www.modernizr.com/ When can I use… http://www.caniuse.com/ HTML5 Boilerplate http://html5boilerplate.com/

20. What if I want to use an unsupported feature? do websites need to look exactly the same in every browser?

21. What if I want to use an unsupported feature? dowebsitesneedtolookexactlythesameineverybrowser.com

22. Questions?

23. References Dive into HTML5 - http://diveintohtml5.org A List Apart - http://www.alistapart.com/articles/previewofhtml5 W3C - http://www.w3.org/html5 Wikipedia - http://en.wikipedia.org/wiki/HTML5_video HTML5 Rocks - http://www.html5rocks.com

24. Examples in higher education University of Denver The University of North Dakota

25. Thank you! Shahab Lashkari Product Manager OmniUpdate, Inc. shahab@omniupdate.com @OUShahab