Your SlideShare is downloading. ×
0
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Progressive Prototyping w/HTML5, CSS3 and jQuery

5,261

Published on

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

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,261
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
167
Comments
0
Likes
17
Embeds 0
No embeds

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

×