Successfully reported this slideshow.
Your SlideShare is downloading. ×

Html5 ux london

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Html5 ux london

  1. 1. PROTOTYPING with TODD ZAKI WARFEL / UXLONDON /#HTML5
  2. 2. Grab the files http://bit.ly/UXLondon
  3. 3. Guiding Principles Set Expectations
  4. 4. Guiding Principles The Best Tool is the one you know
  5. 5. Guiding Principles Prototype Only What you Need
  6. 6. HTMl as a prototyping tool Pros and Cons
  7. 7. About that code thing Production vs. Non-production
  8. 8. html vs. html5
  9. 9. HTML Doctypes <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐strict.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  HTML  4.01  Transitional//EN"      "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Frameset//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐frameset.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  HTML  4.01  Strict//EN"      "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  HTML  4.01  Transitional//EN"      "http://www.w3.org/TR/html4/loose.dtd">
  10. 10. HTML5 Doctypes <!DOCTYPE  HTML>
  11. 11. HTML Tags HTML5 Tags <div> <article> <p> <aside> <dl>,  <dt>,  <dd> <section> <ol>,  <ul>,  <li> <header>,  <hgroup> <fieldset> <nav> <input> <footer> <datalist> <progress> <time>
  12. 12. HTML helps you think about the Organization / Structure DESIGN
  13. 13. html page structure A typical HTML page will div  id=header use divs with IDs and Classes to create the div  id=nav structure. div  id=content div  id=   sidebar div  id=footer
  14. 14. HTML5 page structure HTML5 gives semantic meaning to these structures, header which previously required IDs and Classes. section/article aside footer
  15. 15. Pro tip: Update your reset.css article,  aside,  footer,  header,   hgroup,  nav,  section   {display:block;  margin:0;  padding: 0;  border:0;  font-­‐weight:inherit;   font-­‐style:inherit;  font-­‐size: 100%;  font-­‐family:inherit;   vertical-­‐align:baseline;  list-­‐ style:none;  outline:none}
  16. 16. Pro tip: Update your reset.css article,  aside,  footer,  header,   hgroup,  nav,  section   {display:block;  margin:0;  padding: 0;  border:0;  font-­‐weight:inherit;   font-­‐style:inherit;  font-­‐size: 100%;  font-­‐family:inherit;   vertical-­‐align:baseline;  list-­‐ style:none;  outline:none}
  17. 17. html5 Recursiveness HTML5 allows for multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
  18. 18. html5 Recursiveness HTML5 allows for multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
  19. 19. html5 Recursiveness HTML5 allows for multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
  20. 20. What about the problem child? IE needs a little help from our friend JavaScript. Modernizer/HTML5shiv to the rescue. http://modernizr.com http:// html5shiv.googlecode.co m/svn/trunk/html5.js
  21. 21. Pro tip: Smack IE Into Shape <!DOCTYPE  html> <html> <head> <!-­‐-­‐[if  lt  IE  9]> <script  src="http://html5shiv.googlecode.com/svn/ trunk/html5.js"  type="text/javascript"></script> <![endif]-­‐-­‐> </head>
  22. 22. HTML5 Input Types date date-­‐time email tel range search time url
  23. 23. Pro tip: HTML5 Search Input <form>    <input  type="search"  name="q"   placeholder="Search"  autofocus>    <input  type="submit"  value="Search"> </form>
  24. 24. HTML5 Registration Form <form>    <input  name="Full  Name"   placeholder="Enter  your  full  name"   autofocus  required>    <input  type="email"  name="Email"   placeholder="Enter  your  email  address"   required>    <input  type="url"  name="URL"   placeholder="What’s  your  website   address?">    <input  type="submit"  value="Register"> </form>
  25. 25. http://bit.ly/html5_mobile Email URL
  26. 26. Gettin’ Sexy with CSS3 It’s the New Photoshop
  27. 27. .btn-­‐fancy  {} Fancy Button
  28. 28. Border Radius border-­‐radius:6px;  -­‐moz-­‐border-­‐radius: 6px;  -­‐webkit-­‐border-­‐radius:6px; Fancy Button
  29. 29. Box Shadow -­‐moz-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2;   -­‐webkit-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2; box-­‐shadow:  4px  4px  8px  #a2a2a2;   Fancy Button
  30. 30. TExt Shadow text-­‐shadow:  1px  1px  0  #d2572b;} Fancy Button
  31. 31. Background Gradient background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop (0.55,  #e67646),  to(#d2572b));   background:-­‐moz-­‐linear-­‐gradient(center   top,  #eb9972,  #e67646  55%,  #d2572b); Fancy Button
  32. 32. Anatomy of a CSS3 Button .btn-­‐primary  {padding:  .5em  .9em;  background:   #e67646;  background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,   #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐ gradient(center  top,  #eb9972,  #e67646  55%,   #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐ border-­‐radius:6px;  border-­‐radius:6px;  border:1px   solid  #bc6647;  -­‐moz-­‐box-­‐shadow:0  0  0;  -­‐webkit-­‐ box-­‐shadow:0  0  0;  font-­‐size:  1.375em;  font-­‐ weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0   #d2572b;}
  33. 33. Anatomy of a CSS3 Button .btn-­‐primary  {padding:  .5em  .9em;  background:   #e67646;  background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,   #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐ gradient(center  top,  #eb9972,  #e67646  55%,   #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐ border-­‐radius:6px;  border-­‐radius:6px;  border:1px   solid  #bc6647;  -­‐moz-­‐box-­‐shadow:0  0  0;  -­‐webkit-­‐ box-­‐shadow:0  0  0;  font-­‐size:  1.375em;  font-­‐ weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0   #d2572b;}
  34. 34. Anatomy of a CSS3 Button .btn-­‐primary  {padding:  .5em  .9em;  background:   #e67646;  background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,   #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐ gradient(center  top,  #eb9972,  #e67646  55%,   #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐ border-­‐radius:6px;  border-­‐radius:6px;  border:1px   solid  #bc6647;  -­‐moz-­‐box-­‐shadow:0  0  0;  -­‐webkit-­‐ box-­‐shadow:0  0  0;  font-­‐size:  1.375em;  font-­‐ weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0   #d2572b;}
  35. 35. Anatomy of a CSS3 Button .btn-­‐primary  {padding:  .5em  .9em;  background:   #e67646;  background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,   #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐ gradient(center  top,  #eb9972,  #e67646  55%,   #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐ border-­‐radius:6px;  border-­‐radius:6px;  border:1px   solid  #bc6647;  -­‐moz-­‐box-­‐shadow:0  0  0;  -­‐webkit-­‐ box-­‐shadow:0  0  0;  font-­‐size:  1.375em;  font-­‐ weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0   #d2572b;}
  36. 36. CSS3 RGBA and Opacity rgba  (238,88,0,1.0); #d2572b;  opacity:1.0; rgba  (238,88,0,0.5); #d2572b;  opacity:0.5;
  37. 37. Hit me with some jQuery!
  38. 38. Simple JavaScript Function $('#PostMessage').click(function() { $('tr.new-comment').fadeIn(); return false; });
  39. 39. Double Time $('#PostMessage').click(function() { $('#CommentForm').hide(); $('tr.new-comment').fadeIn(); return false; });
  40. 40. Resources HTML5 Spec http://www.w3.org/TR/html5/   CSS3 Spec http://www.w3.org/Style/CSS/current-­‐work.en.html   HTML5SHIV http://html5shiv.googlecode.com/svn/trunk/html5.js Modernizer http://modernizr.com/   Dive Into HTML5 http://diveintohtml5.org/ Reframer http://reframerapp.com  
  41. 41. http://bit.ly/protobk on The Twitters @zakiwarfel

×