Introduction  to HTML5     Scott VandeheyFront-End Web Developer    ELC Technologies      @spaceninja
Why make a newversion of HTML?    (For the long version:) diveintohtml5.org/past.html
HTML5 Design Principlesref: bit.ly/html-principles   Image credit: Dale Stephanos
Photo credit: Jacinta LodgeSupport Existing Content
Photo credit: Kevin SimpsonDegrade Gracefully
Photo credit: Jeremy KeithPave the Cowpaths
Photo credit: Ian “Bluemoose”Priority of ConstituenciesUSERS > AUTHORS > IMPLEMENTORS > SPECIFIERS > PURITY
Photo credit: Kris KrugTop 3 New Features
1. Better Forms   new input types     placeholder   and many more!
New input types <input type="email">  <input type="tel">  <input type="url"> <input type="number">    and many more!
Search<input type="search">
Placeholder<input placeholder="your name">
Validation<input required>
ContentEditable<div contenteditable>  Click on me to edit!</div>
2. Rich Media   video & audio
Recognize this?<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"width="640" height="360" codebase="http://downl...
That’s better<video src="movie.mp4"></video>
Multiple sources<video controls width="360" height="240”>  <source src="movie.webm"   type=video/webm; codecs="vp8, vorbis...
Multiple fallbacks<video controls width="360" height="240”>  <source ...>  <source ...>  <source ...>  <object>    ... fla...
Safari 3+   Firefox 3.5+Chrome 3+   IE8 (flash)
3. New Semantic    Elements    header & footer      nav & aside    section & article    and many more!
Image credit: A List Apart
Image credit: A List Apart
4. Simplified Elements     doctype      charset   script & style
Doctype & Charset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN""http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict....
No type for JS & CSS<script type="text/javascript" src="x.js"></script><script src="x.js"></script><link type="text/css" r...
How to convertyour site to HTML5 in one easy step
It’s Easy!Change this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-st...
Browser shimsAdd this to your stylesheet:section, article, header,footer, nav, aside, hgroup {  display: block;}Add this c...
Rumor: Browsersdon’t support HTML5False:All modern browsers haveimplemented HTML5 to somedegree, and there’s no reason not...
Rumor: HTML5 won’t be ready until 2022False:2009: W3C Working Draft2012: W3C Recommendation2022: two complete implementati...
Rumor: HTML5 takes us back to tag soupFalse:HTML5 allows you to useHTML or XHTML syntax.
Thank You   To learn more:  abookapart.com diveintohtml5.orgFollow me on Twitter:     @spaceninja  </presentation>
Introduction to HTML5
Introduction to HTML5
Upcoming SlideShare
Loading in …5
×

Introduction to HTML5

1,548 views

Published on

HTML5 is ready to use today, and Scott Vandehey can show you how to use it in your site. During this session, you will learn the answer to these questions:

What is HTML5?
What features does it offer me?
How do I set up my themes to use it?
How well supported is it?

By the end, you will see that converting your site to HTML5 can offer you real benefits, and will position you to easily take advantage of new features as they become available. With its focus on graceful degradation, there’s no reason to delay. Learn how HTML5 can help you!

This session is intended for beginner to intermediate level front-end developers and designers. You should have a healthy interest in markup.

We will be introducing some of the new elements, such as Article, Section, and Video, but not the new APIs like drag-and-drop or geolocation.

1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,548
On SlideShare
0
From Embeds
0
Number of Embeds
104
Actions
Shares
0
Downloads
41
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Introduction to HTML5

  1. 1. Introduction to HTML5 Scott VandeheyFront-End Web Developer ELC Technologies @spaceninja
  2. 2. Why make a newversion of HTML? (For the long version:) diveintohtml5.org/past.html
  3. 3. HTML5 Design Principlesref: bit.ly/html-principles Image credit: Dale Stephanos
  4. 4. Photo credit: Jacinta LodgeSupport Existing Content
  5. 5. Photo credit: Kevin SimpsonDegrade Gracefully
  6. 6. Photo credit: Jeremy KeithPave the Cowpaths
  7. 7. Photo credit: Ian “Bluemoose”Priority of ConstituenciesUSERS > AUTHORS > IMPLEMENTORS > SPECIFIERS > PURITY
  8. 8. Photo credit: Kris KrugTop 3 New Features
  9. 9. 1. Better Forms new input types placeholder and many more!
  10. 10. New input types <input type="email"> <input type="tel"> <input type="url"> <input type="number"> and many more!
  11. 11. Search<input type="search">
  12. 12. Placeholder<input placeholder="your name">
  13. 13. Validation<input required>
  14. 14. ContentEditable<div contenteditable> Click on me to edit!</div>
  15. 15. 2. Rich Media video & audio
  16. 16. Recognize this?<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"width="640" height="360" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="flashvars"value="guid=BQtfIEY1&amp;width=640&amp;height=360&amp;locksize=no&amp;dynamicseek=false&amp;qc_publisherId=p-18-mFEk4J448M" /><param name="src" value="http://v.example.com/media/plugins/video/flvplayer.swf?ver=1.21" /><paramname="wmode" value="transparent" /><paramname="allowfullscreen" value="true" /><embedtype="application/x-shockwave-flash" width="640" height="360"src="http://v.example.com/media/plugins/video/flvplayer.swf?ver=1.21" allowfullscreen="true" wmode="transparent"flashvars="guid=BQtfIEY1&amp;width=640&amp;height=360&amp;locksize=no&amp;dynamicseek=false&amp;qc_publisherId=p-18-mFEk4J448M"></embed></object>
  17. 17. That’s better<video src="movie.mp4"></video>
  18. 18. Multiple sources<video controls width="360" height="240”> <source src="movie.webm" type=video/webm; codecs="vp8, vorbis"> <source src="movie.ogv" type=video/ogg; codecs="theora, vorbis"> <source src="movie.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"></video>
  19. 19. Multiple fallbacks<video controls width="360" height="240”> <source ...> <source ...> <source ...> <object> ... flash stuff here ... <a href="movie.mp4">Download the movie.</a> </object></video>
  20. 20. Safari 3+ Firefox 3.5+Chrome 3+ IE8 (flash)
  21. 21. 3. New Semantic Elements header & footer nav & aside section & article and many more!
  22. 22. Image credit: A List Apart
  23. 23. Image credit: A List Apart
  24. 24. 4. Simplified Elements doctype charset script & style
  25. 25. Doctype & Charset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN""http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html><meta http-equiv="Content-Type"content="text/html; charset=UTF-8" /><meta charset="UTF-8">
  26. 26. No type for JS & CSS<script type="text/javascript" src="x.js"></script><script src="x.js"></script><link type="text/css" rel="stylesheet"media="screen" href="x.css" /><link rel="stylesheet"media="screen" href="x.css">
  27. 27. How to convertyour site to HTML5 in one easy step
  28. 28. It’s Easy!Change this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">to this:<!DOCTYPE html>
  29. 29. Browser shimsAdd this to your stylesheet:section, article, header,footer, nav, aside, hgroup { display: block;}Add this conditional comment to your head:<!--[if IE]> <script src="http://html5shim.googlecode.com/ ↩ svn/trunk/html5.js"></script><![endif]-->
  30. 30. Rumor: Browsersdon’t support HTML5False:All modern browsers haveimplemented HTML5 to somedegree, and there’s no reason not touse the parts that work today.
  31. 31. Rumor: HTML5 won’t be ready until 2022False:2009: W3C Working Draft2012: W3C Recommendation2022: two complete implementations
  32. 32. Rumor: HTML5 takes us back to tag soupFalse:HTML5 allows you to useHTML or XHTML syntax.
  33. 33. Thank You To learn more: abookapart.com diveintohtml5.orgFollow me on Twitter: @spaceninja </presentation>

×