Progressive Prototyping w/HTML5, CSS3 and jQuery

PROTOTYPING with

TODD ZAKI WARFEL / UXLISBON /#HTML5

http://bit.ly/HTML5_prototype

Grab the files



Set ExpectationsGuiding Principles

The Best Tool is the one you knowGuiding Principles

Prototype Only What you NeedGuiding Principles

Pros and ConsHTMl as a prototyping tool

Production vs. Non-productionAbout that code thing

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

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd


http://www.w3.org/TR/html4/loose.dtd








HTML5 Doctypes<!DOCTYPE HTML>

HTML Tags<div>

<p>

<dl>, <dt>, <dd>

<ol>, <ul>, <li>

<fieldset>

<input>

<article>

<aside>

<section>

<header>, <hgroup>

<nav>

<footer>

<datalist>

<progress>

<time>

HTML5 Tags

Organization / StructureHTML helps you think about the

DESIGN

html page structureA typical HTML page will use divs with IDs and Classes to create the structure.

div id=header

div id=footer

div id= sidebar

div id=content

div id=nav

HTML5 page structureHTML5 gives semantic meaning to these structures, which previously required IDs and Classes.

header

footer

asidesection/article

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 sections and articles within a single page. Each section/article can have its own header, footer, aside and nav.

footer

asidesection

header

nav

header

footer

article

html5 RecursivenessHTML5 allows for multiple sections and articles within a single page. Each section/article can have its own header, footer, aside and nav.

footer

asidesection

header

nav

header

article

footer

What about the problem child?IE needs a little help from our friend JavaScript.

Modernizer/HTML5shiv to the rescue.

http://modernizr.com

http://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 Typesdate

date-‐time

email

tel

range

search

time

url

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_mobileEmail URL

http://bit.ly/HTML5_mobile

http://bit.ly/HTML5_mobile

Gettin’ Sexy with CSS3It’s the New Photoshop

Fancy Button

.btn-‐fancy {}

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;

});

Resourceshttp://www.w3.org/TR/html5/

http://www.w3.org/Style/CSS/current-‐work.en.html


http://modernizr.com/

http://diveintohtml5.org/

http://reframerapp.com

HTML5 Spec

CSS3 Spec

HTML5SHIV

Modernizer

Dive Into HTML5

Reframer

http://www.w3.org/TR/html5/

http://www.w3.org/TR/html5/

http://www.w3.org/Style/CSS/current-work.en.html

http://www.w3.org/Style/CSS/current-work.en.html





http://diveintohtml5.org

http://diveintohtml5.org



http://bit.ly/protobk

@zakiwarfelon The Twitters

Thrifty, Fast, and Effective User Experience Research Techniques

Russ UngerTodd Zaki Warfel

GuerrillaUXResearchMethods



Progressive Prototyping w/HTML5, CSS3 and jQuery

Technology

Transcript of Progressive Prototyping w/HTML5, CSS3 and jQuery