PROTOTYPING                                      withTODD ZAKI WARFEL / UXLISBON /#HTML5
Grab the fileshttp://bit.ly/HTML5_prototype
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:1px  solid  #bc6647;  border-­‐radius:6px;  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐radius...
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:  #e67646;  background:-­‐moz-­‐linear-­‐gradient(center  top,  #eb9972,  #e67646  55%,  #d2...
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/protobk                                                                           Russ Unger                ...
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Upcoming SlideShare
Loading in...5
×

Progressive Prototyping w/HTML5, CSS3 and jQuery

5,349

Published on

Slides from my progressive prototyping with HTML5, CSS3 and jQuery workshop.

Published in: Technology, Design
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,349
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
167
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Progressive Prototyping w/HTML5, CSS3 and jQuery

  1. 1. PROTOTYPING withTODD ZAKI WARFEL / UXLISBON /#HTML5
  2. 2. Grab the fileshttp://bit.ly/HTML5_prototype
  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:1px  solid  #bc6647;  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 Shadowtext-­‐shadow:  1px  1px  0  #d2572b;} Fancy Button
  31. 31. Background Gradientbackground:  #e67646;  background:-­‐moz-­‐linear-­‐gradient(center  top,  #eb9972,  #e67646  55%,  #d2572b);  background:-­‐webkit-­‐gradient(linear,  0%  0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,  #e67646),  to(#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/protobk Russ Unger Todd Zaki Warfel Guerrilla UX Research Methods Thrifty, Fast, and Effective User Experience Research Techniqueson The Twitters@zakiwarfel
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×