Post on 18-Dec-2014
description
PROTOTYPING with
TODD ZAKI WARFEL / UXLONDON /#HTML5
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">
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}
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
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
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>
Gettin’ Sexy with CSS3It’s the New Photoshop
Fancy Button
.btn-‐fancy {}
Border Radiusborder-‐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:-‐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);
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;}
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;}
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;}
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://html5shiv.googlecode.com/svn/trunk/html5.js
http://modernizr.com/
http://diveintohtml5.org/
http://reframerapp.com
HTML5 Spec
CSS3 Spec
HTML5SHIV
Modernizer
Dive Into HTML5
Reframer