![What HTML 5 is not…An official W3C recommendationyet A silver bulletFully supported in [m]any browsers](https://image.slidesharecdn.com/html5letsmakeprogresseduweb2011-110801171006-phpapp01/85/HTML-5-Let-s-Make-Progress-eduWeb-2011-4-320.jpg)
HTML 5 – Let’s Make Progress [eduWeb 2011]
- 1. Let’s Make ProgressShahab LashkariProduct ManagerOmniUpdate, Inc.shahab@omniupdate.com@OUShahab
- 2. OverviewWhat it isWhat it isn’tSemanticsFormsVideoCanvas vs. SVG vs. CSS3CompatibilityQuestions?
- 3. What is HTML 5?The latest revision of the HTML standardContains both HTML 4 and XHTML 1Though some elements have been deprecatedCan be written in either syntaxNew 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 recommendationyet A silver bulletFully supported in [m]any browsers
- 9. New form input typesemailurltelnumberrangesearchdatemonthweektimecoloretc.e.g., <input type="email">
- 10. FormsNew input types can make life easier on mobile devices!
- 11. New form input attributesautofocus*placeholderrequired*patternspeech?*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 controlsdocument.getElementById("myvideo").play();
- 14. <video>
- 15. Canvas vs. SVG vs. CSS3Canvas is essentially a sketchpadScalable Vector Graphics use math to create imagesCSS3 can do some prettyamazingthings
- 16. CompatibilityShould 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 geolocationsupportCreate an element, then check if a certain property exists on that element.Example: testing for canvas supportCreate 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 supportedCreate 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 ResourcesModernizrhttp://www.modernizr.com/When can I use…http://www.caniuse.com/HTML5 Boilerplatehttp://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. ReferencesDive into HTML5 - http://diveintohtml5.orgA List Apart - http://www.alistapart.com/articles/previewofhtml5W3C - http://www.w3.org/html5Wikipedia - http://en.wikipedia.org/wiki/HTML5_videoHTML5 Rocks - http://www.html5rocks.com
- 24. Examples in higher educationUniversity of DenverThe University of North Dakota
- 25. Thank you!Shahab LashkariProduct ManagerOmniUpdate, Inc.shahab@omniupdate.com@OUShahab