Recomendados
Más contenido relacionado
Similar a HTML 5 – Let's Make Progress [pseweb 2011]
Similar a HTML 5 – Let's Make Progress [pseweb 2011] (20)
Último
Último (20)
HTML 5 – Let's Make Progress [pseweb 2011]
- 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
- 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