HTML 5 – Let's Make Progress [pseweb 2011]

697 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
697
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML 5 – Let's Make Progress [pseweb 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. 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 />
  3. 3. What HTML 5 is not…<br />An official W3C recommendation<br />yet <br />A silver bullet<br />Fully supported in [m]any browsers<br />
  4. 4. So what’s different?<br />
  5. 5. So what’s different?<br />
  6. 6. 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 />
  7. 7. New semantic elements<br /><header><br /><nav><br /><article><br /><aside><br /><section><br /><footer><br />
  8. 8. 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 />
  9. 9. Forms<br />New input types can make life easier on mobile devices!<br />
  10. 10. New form input attributes<br />autofocus*<br />placeholder<br />required*<br />pattern<br />speech?*<br />etc.<br />* binary attributes<br />
  11. 11. Binary 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 />
  12. 12. <video><br />
  13. 13. <video><br /><video id="video" … ><br /> <source … /><br />… this is your fallback code …<br /></video><br />Can use DOM to create your own video controls<br />document.getElementById("video").play();<br />
  14. 14. 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 amazing things<br />
  15. 15. 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 />
  16. 16. Should I be sniffing for user agent?<br />NO<br />
  17. 17. Which features are supported?<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 />
  18. 18. What if I want to use an unsupported feature?<br />do websites need to look exactly the same in every browser?<br />
  19. 19. What if I want to use an unsupported feature?<br />do websites need to look exactly the same in every browser?<br />
  20. 20. What if I want to use an unsupported feature?<br />dowebsitesneedtolookexactlythesameineverybrowser.com<br />
  21. 21. Questions?<br />
  22. 22. References<br />Getting Started with HTML5 - http://html5-intro.appspot.com<br />Dive into HTML5 - http://diveintohtml5.org<br />W3C - http://www.w3.org/html5<br />A List Apart - http://www.alistapart.com/articles/previewofhtml5<br />Wikipedia - http://en.wikipedia.org/wiki/HTML5_video<br />CSS3, please! - http://www.css3please.com<br />
  23. 23. Thank you!<br />Shahab Lashkari<br />Product Manager<br />OmniUpdate, Inc.<br />shahab@omniupdate.com<br />@OUShahab<br />

×