Let’s Make Progress<br />Shahab Lashkari<br />Product Manager<br />OmniUpdate, Inc.<br />shahab@omniupdate.com<br />@OUSha...
Overview<br />What it is<br />What it isn’t<br />Semantics<br />Forms<br />Video<br />Canvas vs. SVG vs. CSS3<br />Compati...
What is HTML 5?<br />The latest revision of the HTML standard<br />Contains both HTML 4 and XHTML 1<br />Though some eleme...
What HTML 5 is not…<br />An official W3C recommendation<br />yet <br />A silver bullet<br />Fully supported in [m]any brow...
So what’s different?<br />
So what’s different?<br />
New semantic elements<br />article<br />aside<br />audio<br />canvas<br />figcaption<br />figure<br />footer<br />header<b...
New semantic elements<br /><header><br /><nav><br /><article><br /><aside><br /><section><br /><footer><br />
New form input types<br />email<br />url<br />tel<br />number<br />range<br />search<br />date<br />month<br />week<br />t...
Forms<br />New input types can make life easier on mobile devices!<br />
New form input attributes<br />autofocus*<br />placeholder<br />required*<br />pattern<br />speech?*<br />etc.<br />*boole...
Boolean attributes<br /><input type="email" autofocus><br /><input type="email" autofocus="autofocus"><br /><input type="e...
<video><br /><video id="myvideo" … ><br />  <source … /><br />… your fallback code goes here …<br /></video><br />Use Java...
<video><br />
Canvas vs. SVG vs. CSS3<br />Canvas is essentially a sketchpad<br />Scalable Vector Graphics use math to create images<br ...
Compatibility<br />Should I be sniffing for user agent?<br />Then how will I know which features are supported?<br />What ...
Should I be sniffing for user agent?<br />NO<br />
Which features are supported?<br />Mark Pilgrim suggests using one of 4 techniques:<br />Check if a certain property exist...
Useful Resources<br />Modernizr<br />http://www.modernizr.com/<br />When can I use…<br />http://www.caniuse.com/<br />HTML...
What if I want to use an unsupported feature?<br />do websites need to look exactly the same in every browser?<br />
What if I want to use an unsupported feature?<br />dowebsitesneedtolookexactlythesameineverybrowser.com<br />
Questions?<br />
References<br />Dive into HTML5 - http://diveintohtml5.org<br />A List Apart - http://www.alistapart.com/articles/previewo...
Examples in higher education<br />University of Denver<br />The University of North Dakota<br />
Upcoming SlideShare
Loading in...5
×

HTML 5 – Let’s Make Progress [eduWeb 2011]

1,709

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,709
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML 5 – Let’s Make Progress [eduWeb 2011]

  1. 1. Let’s Make Progress<br />Shahab Lashkari<br />Product Manager<br />OmniUpdate, Inc.<br />shahab@omniupdate.com<br />@OUShahab<br />
  2. 2. Overview<br />What it is<br />What it isn’t<br />Semantics<br />Forms<br />Video<br />Canvas vs. SVG vs. CSS3<br />Compatibility<br />Questions?<br />
  3. 3. What is HTML 5?<br />The latest revision of the HTML standard<br />Contains both HTML 4 and XHTML 1<br />Though some elements have been deprecated<br />Can be written in either syntax<br />New APIs (e.g., canvas, offline storage, media playback, drag-and-drop, etc.)<br />New rules for error handling (!)<br />
  4. 4. What HTML 5 is not…<br />An official W3C recommendation<br />yet <br />A silver bullet<br />Fully supported in [m]any browsers<br />
  5. 5. So what’s different?<br />
  6. 6. So what’s different?<br />
  7. 7. New semantic elements<br />article<br />aside<br />audio<br />canvas<br />figcaption<br />figure<br />footer<br />header<br />nav<br />section<br />video<br />etc.<br />
  8. 8. New semantic elements<br /><header><br /><nav><br /><article><br /><aside><br /><section><br /><footer><br />
  9. 9. New form input types<br />email<br />url<br />tel<br />number<br />range<br />search<br />date<br />month<br />week<br />time<br />color<br />etc.<br />e.g., <input type="email"><br />
  10. 10. Forms<br />New input types can make life easier on mobile devices!<br />
  11. 11. New form input attributes<br />autofocus*<br />placeholder<br />required*<br />pattern<br />speech?*<br />etc.<br />*booleanattributes<br />
  12. 12. Boolean attributes<br /><input type="email" autofocus><br /><input type="email" autofocus="autofocus"><br /><input type="email" autofocus="true"><br /><input type="email" autofocus="false"><br />
  13. 13. <video><br /><video id="myvideo" … ><br /> <source … /><br />… your fallback code goes here …<br /></video><br />Use JavaScript to interact with DOM and create your own video controls<br />document.getElementById("myvideo").play();<br />
  14. 14. <video><br />
  15. 15. Canvas vs. SVG vs. CSS3<br />Canvas is essentially a sketchpad<br />Scalable Vector Graphics use math to create images<br />CSS3 can do some prettyamazingthings<br />
  16. 16. Compatibility<br />Should I be sniffing for user agent?<br />Then how will I know which features are supported?<br />What if I want to use a feature that isn’t supported in all browsers?<br />
  17. 17. Should I be sniffing for user agent?<br />NO<br />
  18. 18. Which features are supported?<br />Mark Pilgrim suggests using one of 4 techniques:<br />Check if a certain property exists on a global object (such as window or navigator).<br />Example: testing for geolocationsupport<br />Create an element, then check if a certain property exists on that element.<br />Example: testing for canvas support<br />Create an element, check if a certain method exists on that element, then call the method and check the value it returns.<br />Example: testing which video formats are supported<br />Create an element, set a property to a certain value, then check if the property has retained its value.<br />Example: testing which <input> types are supported<br />
  19. 19. Useful Resources<br />Modernizr<br />http://www.modernizr.com/<br />When can I use…<br />http://www.caniuse.com/<br />HTML5 Boilerplate<br />http://html5boilerplate.com/<br />
  20. 20. What if I want to use an unsupported feature?<br />do websites need to look exactly the same in every browser?<br />
  21. 21. What if I want to use an unsupported feature?<br />dowebsitesneedtolookexactlythesameineverybrowser.com<br />
  22. 22. Questions?<br />
  23. 23. References<br />Dive into HTML5 - http://diveintohtml5.org<br />A List Apart - http://www.alistapart.com/articles/previewofhtml5<br />W3C - http://www.w3.org/html5<br />Wikipedia - http://en.wikipedia.org/wiki/HTML5_video<br />HTML5 Rocks - http://www.html5rocks.com<br />
  24. 24. Examples in higher education<br />University of Denver<br />The University of North Dakota<br />
  25. 25. Thank you!<br />Shahab Lashkari<br />Product Manager<br />OmniUpdate, Inc.<br />shahab@omniupdate.com<br />@OUShahab<br />

×