Your SlideShare is downloading. ×
0
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
HTML 5 – Let’s Make Progress [eduWeb 2011]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,684

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,684
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Let’s Make Progress<br />Shahab Lashkari<br />Product Manager<br />OmniUpdate, Inc.<br />shahab@omniupdate.com<br />@OUShahab<br />
  • 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. 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. 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. So what’s different?<br />
  • 6. So what’s different?<br />
  • 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. New semantic elements<br />&lt;header&gt;<br />&lt;nav&gt;<br />&lt;article&gt;<br />&lt;aside&gt;<br />&lt;section&gt;<br />&lt;footer&gt;<br />
  • 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., &lt;input type=&quot;email&quot;&gt;<br />
  • 10. Forms<br />New input types can make life easier on mobile devices!<br />
  • 11. New form input attributes<br />autofocus*<br />placeholder<br />required*<br />pattern<br />speech?*<br />etc.<br />*booleanattributes<br />
  • 12. Boolean attributes<br />&lt;input type=&quot;email&quot; autofocus&gt;<br />&lt;input type=&quot;email&quot; autofocus=&quot;autofocus&quot;&gt;<br />&lt;input type=&quot;email&quot; autofocus=&quot;true&quot;&gt;<br />&lt;input type=&quot;email&quot; autofocus=&quot;false&quot;&gt;<br />
  • 13. &lt;video&gt;<br />&lt;video id=&quot;myvideo&quot; … &gt;<br /> &lt;source … /&gt;<br />… your fallback code goes here …<br />&lt;/video&gt;<br />Use JavaScript to interact with DOM and create your own video controls<br />document.getElementById(&quot;myvideo&quot;).play();<br />
  • 14. &lt;video&gt;<br />
  • 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. 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. Should I be sniffing for user agent?<br />NO<br />
  • 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 &lt;input&gt; types are supported<br />
  • 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. What if I want to use an unsupported feature?<br />do websites need to look exactly the same in every browser?<br />
  • 21. What if I want to use an unsupported feature?<br />dowebsitesneedtolookexactlythesameineverybrowser.com<br />
  • 22. Questions?<br />
  • 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. Examples in higher education<br />University of Denver<br />The University of North Dakota<br />
  • 25. Thank you!<br />Shahab Lashkari<br />Product Manager<br />OmniUpdate, Inc.<br />shahab@omniupdate.com<br />@OUShahab<br />

×