Downloaded 168 times
![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>](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtml5uxlisbon-110511092558-phpapp02%2f75%2fProgressive-Prototyping-w-HTML5-CSS3-and-jQuery-21-2048.jpg&f=jpg&w=240)
Uploaded byTodd Zaki Warfel
2,343 views
Progressive Prototyping w/HTML5, CSS3 and jQuery
The document discusses using HTML and CSS for prototyping. It provides guidance on setting expectations and only prototyping necessary features. HTML5 semantic tags and structures are covered, along with tips for styling buttons and forms with CSS3 features like gradients, shadows and rounded corners. The document also addresses browser compatibility issues and includes resources for further information.
Recommended
More Related Content
What's hot
Similar to Progressive Prototyping w/HTML5, CSS3 and jQuery
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fvibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Progressive Prototyping w/HTML5, CSS3 and jQuery
- 1.PROTOTYPING withTODD ZAKI WARFEL / UXLISBON /#HTML5
- 2.
- 3.
- 4.Guiding PrinciplesThe BestTool is the one you know
- 5.Guiding PrinciplesPrototype OnlyWhat you Need
- 6.HTMl as aprototyping toolPros and Cons
- 7.About that codethingProduction vs. Non-production
- 8.
- 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.
- 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 youthink about theOrganization / Structure DESIGN
- 13.html page structureAtypical 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 structureHTML5gives semanticmeaning to these structures, headerwhich previously requiredIDs and Classes. section/article aside footer
- 15.Pro tip: Updateyour 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: Updateyour 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 allowsfor 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 allowsfor 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 allowsfor 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 theproblem 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: SmackIE 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>
- 24.
- 25.Pro tip: HTML5Search Input<form> <input type="search" name="q" placeholder="Search" autofocus> <input type="submit" value="Search"></form>
- 26.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>
- 27.http://bit.ly/HTML5_mobile Email URL
- 28.Gettin’ Sexy withCSS3 It’s the New Photoshop
- 29..btn-‐fancy {} Fancy Button
- 30.Border Radiusborder:1px solid #bc6647; border-‐radius:6px; -‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐radius:6px; Fancy Button
- 31.Box Shadow-‐moz-‐box-‐shadow: 4px 4px 8px #a2a2a2; -‐webkit-‐box-‐shadow: 4px 4px 8px #a2a2a2;box-‐shadow: 4px 4px 8px #a2a2a2; Fancy Button
- 32.TExt Shadowtext-‐shadow: 1px 1px 0 #d2572b;} Fancy Button
- 33.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
- 34.Anatomy of aCSS3 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 aCSS3 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.Anatomy of aCSS3 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;}
- 37.Anatomy of aCSS3 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;}
- 38.CSS3 RGBA andOpacityrgba (238,88,0,1.0);#d2572b; opacity:1.0;rgba (238,88,0,0.5);#d2572b; opacity:0.5;
- 40.Hit me withsome jQuery!
- 41.Simple JavaScript Function$('#PostMessage').click(function() { $('tr.new-comment').fadeIn(); return false; });
- 42.Double Time $('#PostMessage').click(function(){ $('#CommentForm').hide(); $('tr.new-comment').fadeIn(); return false; });
- 43.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
- 44.http://bit.ly/protobk Russ Unger Todd Zaki Warfel Guerrilla UX Research Methods Thrifty, Fast, and Effective User Experience Research Techniqueson The Twitters@zakiwarfel