html5 ux london

44
PROTOTYPING with TODD ZAKI WARFEL / UX LONDON /#HTML5

Upload: todd-zaki-warfel

Post on 18-Dec-2014

6.113 views

Category:

Design


1 download

DESCRIPTION

Slides from my progressive prototyping with HTML5 and CSS3 workshop at UXLondon.

TRANSCRIPT

Page 1: Html5 ux london

PROTOTYPING with

TODD ZAKI WARFEL / UXLONDON /#HTML5

Page 2: Html5 ux london

http://bit.ly/UXLondon

Grab the files

Page 3: Html5 ux london

Set ExpectationsGuiding Principles

Page 4: Html5 ux london

The Best Tool is the one you knowGuiding Principles

Page 5: Html5 ux london

Prototype Only What you NeedGuiding Principles

Page 6: Html5 ux london

Pros and ConsHTMl as a prototyping tool

Page 7: Html5 ux london

Production vs. Non-productionAbout that code thing

Page 8: Html5 ux london

html vs. html5

Page 9: Html5 ux london

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

Page 10: Html5 ux london

HTML5 Doctypes<!DOCTYPE  HTML>

Page 11: Html5 ux london

HTML Tags<div>

<p>

<dl>,  <dt>,  <dd>

<ol>,  <ul>,  <li>

<fieldset>

<input>

<article>

<aside>

<section>

<header>,  <hgroup>

<nav>

<footer>

<datalist>

<progress>

<time>

HTML5 Tags

Page 12: Html5 ux london

Organization / StructureHTML helps you think about the

DESIGN

Page 13: Html5 ux london

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

Page 14: Html5 ux london

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

header

footer

asidesection/article

Page 15: Html5 ux london

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}

Page 16: Html5 ux london

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}

Page 17: Html5 ux london

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

Page 18: Html5 ux london

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

Page 19: Html5 ux london

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

Page 21: Html5 ux london

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>

Page 22: Html5 ux london
Page 23: Html5 ux london
Page 24: Html5 ux london

HTML5 Input Typesdate

date-­‐time

email

tel

range

search

time

url

Page 25: Html5 ux london

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

Page 26: Html5 ux london

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>

Page 27: Html5 ux london

http://bit.ly/html5_mobileEmail URL

Page 28: Html5 ux london

Gettin’ Sexy with CSS3It’s the New Photoshop

Page 29: Html5 ux london

Fancy Button

.btn-­‐fancy  {}

Page 30: Html5 ux london

Border Radiusborder-­‐radius:6px;  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐radius:6px;

Fancy Button

Page 31: Html5 ux london

Box Shadow-­‐moz-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2;  

-­‐webkit-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2;

box-­‐shadow:  4px  4px  8px  #a2a2a2;  

Fancy Button

Page 32: Html5 ux london

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

Fancy Button

Page 33: Html5 ux london

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

Page 34: Html5 ux london

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

Page 35: Html5 ux london

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

Page 36: Html5 ux london

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

Page 37: Html5 ux london

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

Page 38: Html5 ux london

CSS3 RGBA and Opacityrgba  (238,88,0,1.0);

#d2572b;  opacity:1.0;

rgba  (238,88,0,0.5);

#d2572b;  opacity:0.5;

Page 39: Html5 ux london
Page 40: Html5 ux london

Hit me with some jQuery!

Page 41: Html5 ux london

Simple JavaScript Function $('#PostMessage').click(function() {

$('tr.new-comment').fadeIn();

return false;

});

Page 42: Html5 ux london

Double Time $('#PostMessage').click(function() {

$('#CommentForm').hide();

$('tr.new-comment').fadeIn();

return false;

});

Page 43: Html5 ux london

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

Page 44: Html5 ux london

@zakiwarfelon The Twitters

http://bit.ly/protobk