Progressive Prototyping w/HTML5, CSS3 and jQuery
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Progressive Prototyping w/HTML5, CSS3 and jQuery

  • 5,785 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,785
On Slideshare
5,364
From Embeds
421
Number of Embeds
9

Actions

Shares
Downloads
163
Comments
0
Likes
17

Embeds 421

http://lanyrd.com 326
https://twitter.com 68
http://www.linkedin.com 13
https://www.linkedin.com 6
http://twitter.com 3
http://us-w1.rockmelt.com 2
http://afdelinginternet.posterous.com 1
https://lanyrd.com 1
https://twimg0-a.akamaihd.net 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. PROTOTYPING withTODD ZAKI WARFEL / UXLISBON /#HTML5
  • 2. Grab the fileshttp://bit.ly/HTML5_prototype
  • 3. Guiding PrinciplesSet Expectations
  • 4. Guiding PrinciplesThe Best Tool is the one you know
  • 5. Guiding PrinciplesPrototype Only What you Need
  • 6. HTMl as a prototyping toolPros and Cons
  • 7. About that code thingProduction vs. Non-production
  • 8. html vs. html5
  • 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. HTML5 Doctypes<!DOCTYPE  HTML>
  • 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. HTML helps you think about theOrganization / Structure DESIGN
  • 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. HTML5 page structureHTML5 gives semanticmeaning to these structures, headerwhich previously requiredIDs and Classes. section/article aside footer
  • 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. 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. 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. 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. 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. 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. 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. HTML5 Input Typesdatedate-­‐timeemailtelrangesearchtimeurl
  • 23. Pro tip: HTML5 Search Input<form>    <input  type="search"  name="q"  placeholder="Search"  autofocus>    <input  type="submit"  value="Search"></form>
  • 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. http://bit.ly/HTML5_mobile Email URL
  • 26. Gettin’ Sexy with CSS3 It’s the New Photoshop
  • 27. .btn-­‐fancy  {} Fancy Button
  • 28. Border Radiusborder:1px  solid  #bc6647;  border-­‐radius:6px;  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐radius:6px; Fancy Button
  • 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. TExt Shadowtext-­‐shadow:  1px  1px  0  #d2572b;} Fancy Button
  • 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. 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. 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. 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. 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. CSS3 RGBA and Opacityrgba  (238,88,0,1.0);#d2572b;  opacity:1.0;rgba  (238,88,0,0.5);#d2572b;  opacity:0.5;
  • 37. Hit me with some jQuery!
  • 38. Simple JavaScript Function $(#PostMessage).click(function() { $(tr.new-comment).fadeIn(); return false; });
  • 39. Double Time $(#PostMessage).click(function() { $(#CommentForm).hide(); $(tr.new-comment).fadeIn(); return false; });
  • 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. http://bit.ly/protobk Russ Unger Todd Zaki Warfel Guerrilla UX Research Methods Thrifty, Fast, and Effective User Experience Research Techniqueson The Twitters@zakiwarfel