Quality Development with HTML5

27,541 views

Published on

Work on HTML5 began in 2004 to improve the existing markup language which has been in place for the past decade. In this decade the web has grown and evolved quite a bit, leaving web designers and developers much to ask for. HTML5 responds to those request and helps pave the way for a new frontier in front-end development. HTML5 introduces new elements, a more semantic structure, improved form functionality, better media control and more for the growing web.

Published in: Technology, Design
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
27,541
On SlideShare
0
From Embeds
0
Number of Embeds
23,562
Actions
Shares
0
Downloads
260
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Quality Development with HTML5

  1. 1. QUALITY DEVELOPMENTWITH HTML5Shay HoweSeptember 2011www.shayhowe.com – @letscounthedays
  2. 2. SHAY HOWE www.shayhowe.com – @letscounthedaysQuality Development with HTML5 & CSS3 @letscounthedays
  3. 3. HTML5 CSS3 Markup language to give Presentation language to content structure and give content style and meaning. appearance.Quality Development with HTML5 & CSS3 @letscounthedays
  4. 4. Quality Development with HTML5 & CSS3 @letscounthedays
  5. 5. HTML5Quality Development with HTML5 & CSS3 @letscounthedays
  6. 6. HTML5 IS SIMPLEQuality Development with HTML5 & CSS3 @letscounthedays
  7. 7. DOCTYPEHTML<!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  HTML  4.01   Transitional//EN"  "http://www.w3.org/TR/ html4/loose.dtd">HTML5<!DOCTYPE  html>Quality Development with HTML5 & CSS3 @letscounthedays
  8. 8. LANGUAGEHTML<html  xmlns="http://www.w3.org/1999/xhtml"   lang="en"  xml:lang="en">HTML5<html  lang="en">Quality Development with HTML5 & CSS3 @letscounthedays
  9. 9. CHARACTER ENCODINGHTML<meta  http-­‐equiv="Content-­‐Type"  content="text/ html;  charset=UTF-­‐8">HTML5<meta  charset="UTF-­‐8">Quality Development with HTML5 & CSS3 @letscounthedays
  10. 10. CSSHTML<link  rel="stylesheet"  type="text/css"   href="file.css">HTML5<link  rel="stylesheet"  href="file.css">Quality Development with HTML5 & CSS3 @letscounthedays
  11. 11. JAVASCRIPTHTML<script  type="text/javascript"  src="file.js"></ script>HTML5<script  src="file.js"></script>Quality Development with HTML5 & CSS3 @letscounthedays
  12. 12. GETTING STARTEDQuality Development with HTML5 & CSS3 @letscounthedays
  13. 13. GETTING STARTEDHTML5 Shiv<!-­‐-­‐[if  IE]> <script  src="http://html5shiv.googlecode.com/ svn/trunk/html5.js"></script><![endif]-­‐-­‐>CSSarticle,  aside,  footer,  header,  hgroup,  nav,  section  { display:  block;}Quality Development with HTML5 & CSS3 @letscounthedays
  14. 14. HTML5 IS SEMANTICQuality Development with HTML5 & CSS3 @letscounthedays
  15. 15. NEW ELEMENTS• article • footer • rt• aside • header • ruby• audio • hgroup • section• canvas • keygen • source• command • mark • summary• datalist • meter • time• details • nav • video• embed • output • wbr• figcaption • progress• figure • rpQuality Development with HTML5 & CSS3 @letscounthedays
  16. 16. STRUCTURAL ELEMENTS• header• nav• article• section• aside• footerQuality Development with HTML5 & CSS3 @letscounthedays
  17. 17. STRUCTURAL ELEMENTS<body> <header>...</header> <nav>...</nav> <article> <section>...</section> </article> <aside...</aside> <footer>...</footer></body>Quality Development with HTML5 & CSS3 @letscounthedays
  18. 18. STRUCTURAL ELEMENTSQuality Development with HTML5 & CSS3 @letscounthedays
  19. 19. HGROUP<header> <hgroup> <h1>Shay  Howe</h1> <h2>Man,  Myth  or  Legend</h2> </hgroup></header>Quality Development with HTML5 & CSS3 @letscounthedays
  20. 20. HGROUPQuality Development with HTML5 & CSS3 @letscounthedays
  21. 21. TIME<time  datetime="15:00">3pm</time><time  datetime="2011-­‐08-­‐24">August  24th,  2011</ time><time  datetime="2011-­‐08-­‐24T15:00">August  24th,    2011  at  3pm</time><time  datetime="2011-­‐08-­‐24"  pubdate>August    24th,  2011</time><time>2011-­‐08-­‐24</time>Quality Development with HTML5 & CSS3 @letscounthedays
  22. 22. TIMEQuality Development with HTML5 & CSS3 @letscounthedays
  23. 23. FIGURE & FIGCAPTION<figure> <img  src="shay.jpg"  alt="Shay  Howe"> <figcaption>Shay  Howe  the  Man</figcaption></figure><figure> <img  src="june.jpg"  alt="June"> <img  src="july.jpg"  alt="July"> <img  src="august.jpg"  alt="August"> <figcaption>Summer  Months</figcaption></figure>Quality Development with HTML5 & CSS3 @letscounthedays
  24. 24. FIGURE & FIGCAPTIONQuality Development with HTML5 & CSS3 @letscounthedays
  25. 25. MARK<h1>Search  results  for  chicago</h1><ol> <li><a  href="http://www.shayhowe.com/"> Shay  is  from  <mark>Chicago</mark>. </a></li></ol>Quality Development with HTML5 & CSS3 @letscounthedays
  26. 26. METER<meter>7  out  of  10  stars</meter><meter  max="10">7  stars</meter><meter  min="0"  max="105"  low="5"  high="65"        optimum="45"  value="47">The  car  is  moving  at      a  decent  average  mile  per  hour.</meter>Quality Development with HTML5 & CSS3 @letscounthedays
  27. 27. PROGRESSYou  are  <progress>50%</progress>  complete.<progress  min="0"  max="100"  value="50">Hold      tight,  your  getting  there.</progress>Quality Development with HTML5 & CSS3 @letscounthedays
  28. 28. AUDIOQuality Development with HTML5 & CSS3 @letscounthedays
  29. 29. AUDIO<audio  src="song.mp3"></audio><audio  src="song.mp3"  autoplay  controls  loop      preload="auto"></audio>Quality Development with HTML5 & CSS3 @letscounthedays
  30. 30. AUDIO CONTROLS<audio  id="player"  src="song.mp3"></audio><div> <button  onclick="document.getElementById(player).play()"> Play </button> <button  onclick="document.getElementById(player).pause()"> Pause </button> <button  onclick="document.getElementById(player).volume  +=  0.1"> Volume  Up </button> <button  onclick="document.getElementById(player).volume  -­‐=  0.1"> Volume  Down </button></div>Quality Development with HTML5 & CSS3 @letscounthedays
  31. 31. AUDIO FALLBACKS<audio  controls> <source  src="song.ogg"  type="audio/ogg"> <source  src="song.mp3"  type="audio/mpeg"> <object  type="application/x-­‐shockwave-­‐flash"   data="player.swf?soundFile=song.mp3"> <param  name="movie" value="player.swf?soundFile=wild-­‐ thing.mp3"> <a  href="song.mp3">Download  song</a> </object></audio>Quality Development with HTML5 & CSS3 @letscounthedays
  32. 32. VIDEOQuality Development with HTML5 & CSS3 @letscounthedays
  33. 33. VIDEO<video  src="movie.mp4"  controls  height="390"   width="640"></video><video  src="movie.mp4"  controls  height="390"      width="640"  poster="image.jpg"></video>Quality Development with HTML5 & CSS3 @letscounthedays
  34. 34. FORMSQuality Development with HTML5 & CSS3 @letscounthedays
  35. 35. NEW INPUTS• color • range• date • search• datetime • tel• datetime-­‐local • time• email • url• month • week• numberQuality Development with HTML5 & CSS3 @letscounthedays
  36. 36. COLOR<input  id="color"  name="color"  type="color">Quality Development with HTML5 & CSS3 @letscounthedays
  37. 37. DATE & TIME• date:  2011-­‐08-­‐24• datetime:  2011-­‐08-­‐24T12:00:00+01  • datetime-­‐local:  2011-­‐08-­‐24T12:00:00• month:  2011-­‐08• time:  12:00:00• week:  2011-­‐W34<input  id="birthday"   name="birthday"   type="datetime-­‐local">Quality Development with HTML5 & CSS3 @letscounthedays
  38. 38. DATE & TIMEQuality Development with HTML5 & CSS3 @letscounthedays
  39. 39. EMAIL<input  id="email"  name="email"  type="email">Quality Development with HTML5 & CSS3 @letscounthedays
  40. 40. EMAILQuality Development with HTML5 & CSS3 @letscounthedays
  41. 41. NUMBER<input  id="cost"  name="cost"  type="number"   min="10"  max="100">Quality Development with HTML5 & CSS3 @letscounthedays
  42. 42. RANGE<input  id="rating"  name="rating"  type="range"   min="1"  max="10">Quality Development with HTML5 & CSS3 @letscounthedays
  43. 43. SEARCH<input  id="query"  name="query"  type="search">Quality Development with HTML5 & CSS3 @letscounthedays
  44. 44. TEL<input  id="phone"  name="phone"  type="tel">Quality Development with HTML5 & CSS3 @letscounthedays
  45. 45. TELQuality Development with HTML5 & CSS3 @letscounthedays
  46. 46. URL<input  id="website"  name="website"  type="url">Quality Development with HTML5 & CSS3 @letscounthedays
  47. 47. URLQuality Development with HTML5 & CSS3 @letscounthedays
  48. 48. NEW ATTRIBUTES• autocomplete • min• autofocus • multiple• formaction • novalidate• formenctype • pattern• formmethod • placeholder• formnovalidate • readonly• formtarget • required• list • spellcheck• max • stepQuality Development with HTML5 & CSS3 @letscounthedays
  49. 49. AUTOCOMPLETE<form  action="#"  autocomplete="off"><input  id="destination"  name="destination"      type="text"  autocomplete="off">Quality Development with HTML5 & CSS3 @letscounthedays
  50. 50. AUTOFOCUS<input  id="name"  name="name"  type="text"      autofocus>Quality Development with HTML5 & CSS3 @letscounthedays
  51. 51. DATALIST<input  id="city"  name="city"  type="city"      list="cities"><datalist  id="cities"> <option  value="Chicago"> <option  value="Los  Angeles"> <option  value="New  York"></datalist>Quality Development with HTML5 & CSS3 @letscounthedays
  52. 52. MIN, MAX & STEP<input  id="score"  name="score"  type="number"   min="0"  max="10"  step="2">Quality Development with HTML5 & CSS3 @letscounthedays
  53. 53. PLACEHOLDER<input  id="destination"  name="destination"   type="text"  placeholder="Your  destination">Quality Development with HTML5 & CSS3 @letscounthedays
  54. 54. PLACEHOLDERQuality Development with HTML5 & CSS3 @letscounthedays
  55. 55. REQUIRED<input  id="name"  name="name"  type="text"      required>Quality Development with HTML5 & CSS3 @letscounthedays
  56. 56. REQUIREDQuality Development with HTML5 & CSS3 @letscounthedays
  57. 57. PATTERN<input  id="phone"  name="phone"  type="tel"   pattern="^[0-­‐9]+[-­‐  ]*[0-­‐9]+$">Quality Development with HTML5 & CSS3 @letscounthedays
  58. 58. PATTERNQuality Development with HTML5 & CSS3 @letscounthedays
  59. 59. CHANGED ELEMENTSQuality Development with HTML5 & CSS3 @letscounthedays
  60. 60. AOLD<p><a  href="http://www.shayhowe.com/">Shay      Howe</a>  is  a  front-­‐end  web  designer  and      developer.</p>NEW<a  href="http://www.shayhowe.com/"> <h1>Shay  Howe</h1> <p>Front-­‐end  web  designer  and  developer.</p></a>Quality Development with HTML5 & CSS3 @letscounthedays
  61. 61. BOLDText rendered as bold.NEWText stylistically offset without importance.Quality Development with HTML5 & CSS3 @letscounthedays
  62. 62. CITEOLDReference to another source.NEWSpecifically a reference to a title of work.Quality Development with HTML5 & CSS3 @letscounthedays
  63. 63. HROLDRender a horizontal rule.NEWA paragraph-level thematic break.Quality Development with HTML5 & CSS3 @letscounthedays
  64. 64. IOLDText rendered as italic.NEWText in an alternative voice or tone.Quality Development with HTML5 & CSS3 @letscounthedays
  65. 65. MENUOLDA single column menu list.NEWA group of controls, most commonly used within webapplications.Quality Development with HTML5 & CSS3 @letscounthedays
  66. 66. SOLDText rendered with a line through it.NEWText struck from the content that is no longer accurate orrelevant.Quality Development with HTML5 & CSS3 @letscounthedays
  67. 67. SMALLOLDText rendered as small.NEWText within side comments or small print.Quality Development with HTML5 & CSS3 @letscounthedays
  68. 68. OBSOLETE ELEMENTS & ATTRIBUTESQuality Development with HTML5 & CSS3 @letscounthedays
  69. 69. OBSOLETE ELEMENTS• acronym • frame• applet • frameset• basefont • isindex• big • noframes• center • strike• dir • tt• font •uDeprecated from HTML 4.0Quality Development with HTML5 & CSS3 @letscounthedays
  70. 70. OBSOLETE ATTRIBUTES• align • frame • profile• alink • frameborder • scrolling• background • hspace • shape• bgcolor • link • size• border • name • target• cellpadding • nohref • text• cellspacing • noshade • type• coords • nowrap • valignQuality Development with HTML5 & CSS3 @letscounthedays
  71. 71. HOMEWORKMicroformatshAtom, hCalendar, hCard, hReviewWAI-ARIA Rolesbanner, complementary, contentinfo, main, navigation,searchQuality Development with HTML5 & CSS3 @letscounthedays
  72. 72. QUESTIONS? Thank you!Quality Development with HTML5 & CSS3 @letscounthedays

×