Progressive Prototyping w/HTML5, CSS3 and jQuery

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"><!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">

HTML5 Doctypes<!DOCTYPE HTML>

HTML Tags HTML5 Tags<div> <article><p> <aside><dl>, <dt>, <dd> <section><ol>, <ul>, <li> <header>, <hgroup><fieldset> <nav><input> <footer> <datalist> <progress> <time>

HTML helps you think about theOrganization / Structure DESIGN

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

HTML5 page structureHTML5 gives semanticmeaning to these structures, headerwhich previously requiredIDs and Classes. section/article aside footer

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}

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

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

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>

HTML5 Input Typesdatedate-‐timeemailtelrangesearchtimeurl

Pro tip: HTML5 Search Input<form> <input type="search" name="q" placeholder="Search" autofocus> <input type="submit" value="Search"></form>

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>

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:6px; Fancy Button

Box Shadow-‐moz-‐box-‐shadow: 4px 4px 8px #a2a2a2; -‐webkit-‐box-‐shadow: 4px 4px 8px #a2a2a2;box-‐shadow: 4px 4px 8px #a2a2a2; Fancy Button

TExt Shadowtext-‐shadow: 1px 1px 0 #d2572b;} Fancy Button

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

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;}

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.html HTML5SHIV http://html5shiv.googlecode.com/svn/trunk/html5.jsModernizer http://modernizr.com/ Dive Into HTML5 http://diveintohtml5.org/Reframer http://reframerapp.com

http://bit.ly/protobk Russ Unger Todd Zaki Warfel Guerrilla UX Research Methods Thrifty, Fast, and Effective User Experience Research Techniqueson The Twitters@zakiwarfel

http://lanyrd.com	326
https://twitter.com	47
http://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

Progressive Prototyping w/HTML5, CSS3 and jQuery

by Todd Zaki Warfel on May 11, 2011

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 387

Statistics

Progressive Prototyping w/HTML5, CSS3 and jQuery Presentation Transcript