Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a HTML 5 – Let’s Make Progress [eduWeb 2011]
Semelhante a HTML 5 – Let’s Make Progress [eduWeb 2011] (20)
Último
Último (20)
HTML 5 – Let’s Make Progress [eduWeb 2011]
- 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
- 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