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

2. 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 (!)

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

4. So what’s different?

5. So what’s different?

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

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

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

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

10. New form input attributes autofocus* placeholder required* pattern speech?* etc. * binary attributes

11. Binary attributes <input type="email" autofocus> <input type="email" autofocus="autofocus"> <input type="email" autofocus="true"> <input type="email" autofocus="false">

12. <video>

13. <video> <video id="video" … > <source … /> … this is your fallback code … </video> Can use DOM to create your own video controls document.getElementById("video").play();

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

15. 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?

16. Should I be sniffing for user agent? NO

17. Which features are supported? Modernizr http://www.modernizr.com/ When can I use… http://www.caniuse.com/ HTML5 Boilerplate http://html5boilerplate.com/

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

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

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

21. Questions?

22. References Getting Started with HTML5 - http://html5-intro.appspot.com Dive into HTML5 - http://diveintohtml5.org W3C - http://www.w3.org/html5 A List Apart - http://www.alistapart.com/articles/previewofhtml5 Wikipedia - http://en.wikipedia.org/wiki/HTML5_video CSS3, please! - http://www.css3please.com

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