Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PROTOTYPING                                      withTODD ZAKI WARFEL / UXLONDON /#HTML5
Grab the fileshttp://bit.ly/UXLondon
Guiding PrinciplesSet Expectations
Guiding PrinciplesThe Best Tool is the one you know
Guiding PrinciplesPrototype Only What you Need
HTMl as a prototyping toolPros and Cons
About that code thingProduction vs. Non-production
html vs. html5
HTML Doctypes<!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.1//EN"     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><...
HTML5 Doctypes<!DOCTYPE  HTML>
HTML Tags            HTML5 Tags<div>                <article><p>                  <aside><dl>,  <dt>,  <dd>   <section><ol...
HTML helps you think about theOrganization / Structure                                 DESIGN
html page structureA typical HTML page will                                  div  id=headeruse divs with IDs andClasses to...
HTML5 page structureHTML5 gives semanticmeaning to these structures,             headerwhich previously requiredIDs and Cl...
Pro tip: Update your reset.cssarticle,  aside,  footer,  header,  hgroup,  nav,  section  {display:block;  margin:0;  padd...
Pro tip: Update your reset.cssarticle,  aside,  footer,  header,  hgroup,  nav,  section  {display:block;  margin:0;  padd...
html5 RecursivenessHTML5 allows for multiple                                        headersections and articles withina si...
html5 RecursivenessHTML5 allows for multiple                                        headersections and articles withina si...
html5 RecursivenessHTML5 allows for multiple                                        headersections and articles withina si...
What about the problem child?IE needs a little help fromour friend JavaScript.Modernizer/HTML5shiv tothe rescue.http://mod...
Pro tip: Smack IE Into Shape<!DOCTYPE  html><html><head><!-­‐-­‐[if  lt  IE  9]><script  src="http://html5shiv.googlecode....
HTML5 Input Typesdatedate-­‐timeemailtelrangesearchtimeurl
Pro tip: HTML5 Search Input<form>    <input  type="search"  name="q"  placeholder="Search"  autofocus>    <input  type="su...
HTML5 Registration Form<form>    <input  name="Full  Name"  placeholder="Enter  your  full  name"  autofocus  required>   ...
http://bit.ly/html5_mobile         Email               URL
Gettin’ Sexy with CSS3      It’s the New Photoshop
.btn-­‐fancy  {}            Fancy Button
Border Radiusborder-­‐radius:6px;  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐radius:6px;            Fancy Button
Box Shadow-­‐moz-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2;  -­‐webkit-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2;box-­‐shadow:...
TExt Shadowtext-­‐shadow:  1px  1px  0  #d2572b;}           Fancy Button
Background Gradientbackground:-­‐webkit-­‐gradient(linear,  0%  0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,  #e6764...
Anatomy of a CSS3 Button.btn-­‐primary  {padding:  .5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(lin...
Anatomy of a CSS3 Button.btn-­‐primary  {padding:  .5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(lin...
Anatomy of a CSS3 Button.btn-­‐primary  {padding:  .5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(lin...
Anatomy of a CSS3 Button.btn-­‐primary  {padding:  .5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(lin...
CSS3 RGBA and Opacityrgba  (238,88,0,1.0);#d2572b;  opacity:1.0;rgba  (238,88,0,0.5);#d2572b;  opacity:0.5;
Hit me with some jQuery!
Simple JavaScript Function $(#PostMessage).click(function() {  $(tr.new-comment).fadeIn();  return false; });
Double Time $(#PostMessage).click(function() {  $(#CommentForm).hide();  $(tr.new-comment).fadeIn();  return false; });
ResourcesHTML5 Spec        http://www.w3.org/TR/html5/  CSS3 Spec         http://www.w3.org/Style/CSS/current-­‐work.en.ht...
http://bit.ly/protobkon The Twitters@zakiwarfel
Html5 ux london
Html5 ux london
Html5 ux london
Upcoming SlideShare
Loading in …5
×

Html5 ux london

7,999 views

Published on

Slides from my progressive prototyping with HTML5 and CSS3 workshop at UXLondon.

Published in: Design

Html5 ux london

  1. 1. PROTOTYPING withTODD ZAKI WARFEL / UXLONDON /#HTML5
  2. 2. Grab the fileshttp://bit.ly/UXLondon
  3. 3. Guiding PrinciplesSet Expectations
  4. 4. Guiding PrinciplesThe Best Tool is the one you know
  5. 5. Guiding PrinciplesPrototype Only What you Need
  6. 6. HTMl as a prototyping toolPros and Cons
  7. 7. About that code thingProduction 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 theOrganization / Structure DESIGN
  13. 13. html page structureA typical HTML page will div  id=headeruse divs with IDs andClasses to create the div  id=navstructure. div  id=content div  id=   sidebar div  id=footer
  14. 14. HTML5 page structureHTML5 gives semanticmeaning to these structures, headerwhich previously requiredIDs and Classes. section/article aside footer
  15. 15. Pro tip: Update your reset.cssarticle,  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.cssarticle,  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 RecursivenessHTML5 allows for multiple headersections and articles withina single page. Each section/ navarticle can have its ownheader, footer, aside and section asidenav. header article footer footer
  18. 18. html5 RecursivenessHTML5 allows for multiple headersections and articles withina single page. Each section/ navarticle can have its ownheader, footer, aside and section asidenav. header article footer footer
  19. 19. html5 RecursivenessHTML5 allows for multiple headersections and articles withina single page. Each section/ navarticle can have its ownheader, footer, aside and section asidenav. header article footer footer
  20. 20. What about the problem child?IE needs a little help fromour friend JavaScript.Modernizer/HTML5shiv tothe rescue.http://modernizr.comhttp://html5shiv.googlecode.com/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 Typesdatedate-­‐timeemailtelrangesearchtimeurl
  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 Radiusborder-­‐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 Shadowtext-­‐shadow:  1px  1px  0  #d2572b;} Fancy Button
  31. 31. Background Gradientbackground:-­‐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 Opacityrgba  (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. ResourcesHTML5 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.jsModernizer http://modernizr.com/  Dive Into HTML5 http://diveintohtml5.org/Reframer http://reframerapp.com  
  41. 41. http://bit.ly/protobkon The Twitters@zakiwarfel

×