Progressive Prototyping w/HTML5, CSS3 and jQuery

5,863 views
5,668 views

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,863
On SlideShare
0
From Embeds
0
Number of Embeds
407
Actions
Shares
0
Downloads
168
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

×