Progressive Prototyping w/HTML5 and CSS3

Progressive Prototyping w/HTML5 and CSS3

Slides from our workshop on prototyping with HTML5, CSS3 and jQuery at EdUIConf.


Todd Zaki Warfel

October 13, 2011


  1. 5.

    You can x it on the drafting board with an

    eraser, or on the construction site with a sledgehammer. Frank Lloyd Wright, Architect “
  2. 6.
  3. 9.

    Hi Visual / Hi Functional Low Visual / Hi Functional

    Lo Visual / Low Functional Hi Visual / Low Functional Levels of Fidelity
  4. 14.
  5. 17.

    HTML Doctypes <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ""> <!DOCTYPE

    html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" ""> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" ""> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  6. 20.

    Typical HTML Page Structure A 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
  7. 21.

    HTML5 Tags <div> <p> <dl>, <dt>, <dd> <ol>, <ul>, <li>

    <fieldset> <input> <aside> <section> <header>, <hgroup> <nav> <footer> <datalist> <progress> <time>
  8. 22.

    Updated HTML5 Page Structure HTML5 gives semantic meaning to these

    structures, which previously required IDs and Classes. header footer aside section/article
  9. 23.

    Pro Tip: Update your reset.css article, 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}
  10. 24.

    What about the problem child? IE needs a little help

    from our friend JavaScript. Modernizer/HTML5shiv to the rescue. • • svn/trunk/html5.js
  11. 25.

    Pro tip: Smack IE Into Shape <!DOCTYPE html> <html> <head>

    <!--[if lt IE 9]> <script src=" svn/trunk/html5.js"></script> <![endif]--> </head>
  12. 28.

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

    autofocus> <input type="submit" value="Search"> </form>
  13. 29.
  14. 30.

    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>
  15. 34.

    Those Vendor Prefixes -moz for Firefox -ms for Microsoft -0

    for Opera -webkit for Webkit (Safari and Chrome)
  16. 36.

    Background: Linear Gradient 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
  17. 38.

    -moz-box-shadow: rgba (220, 224, 230, .7) 0 0 0 4px;

    -webkit-box-shadow: rgba (220, 224, 230, .7) 0 0 0 4px; box-shadow: rgba (220, 224, 230, .7) 0 0 0 4px; Box Shadow Fancy Button
  18. 41.