Html5 ux london
19 likes3,508 views
The document discusses using HTML and CSS for prototyping. It covers HTML5 elements and structures, CSS3 features like gradients and shadows, and integrating HTML5 shiv and Modernizer to support older browsers. Recommendations include using semantic HTML5 elements instead of divs, updating reset styles, and simple jQuery examples. The goal is to leverage modern web standards for interactive prototyping.
![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>](https://image.slidesharecdn.com/html5-uxlondon-110415080536-phpapp02/85/Html5-ux-london-21-320.jpg)
Html5 ux london
- 1. PROTOTYPING with TODD ZAKI WARFEL / UXLONDON /#HTML5
- 4. Guiding Principles The Best Tool is the one you know
- 5. Guiding Principles Prototype Only What you Need
- 6. HTMl as a prototyping tool Pros and Cons
- 7. About that code thing Production vs. Non-production
- 9. 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">
- 11. HTML Tags HTML5 Tags <div> <article> <p> <aside> <dl>, <dt>, <dd> <section> <ol>, <ul>, <li> <header>, <hgroup> <fieldset> <nav> <input> <footer> <datalist> <progress> <time>
- 12. HTML helps you think about the Organization / Structure DESIGN
- 13. html page structure A typical HTML page will div id=header use divs with IDs and Classes to create the div id=nav structure. div id=content div id= sidebar div id=footer
- 14. HTML5 page structure HTML5 gives semantic meaning to these structures, header which previously required IDs and Classes. section/article aside footer
- 15. 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}
- 16. 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}
- 17. html5 Recursiveness HTML5 allows for multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
- 18. html5 Recursiveness HTML5 allows for multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
- 19. html5 Recursiveness HTML5 allows for multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
- 20. 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.co m/svn/trunk/html5.js
- 21. 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>
- 25. Pro tip: HTML5 Search Input <form> <input type="search" name="q" placeholder="Search" autofocus> <input type="submit" value="Search"> </form>
- 26. 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>
- 28. Gettin’ Sexy with CSS3 It’s the New Photoshop
- 29. .btn-‐fancy {} Fancy Button
- 30. Border Radius border-‐radius:6px; -‐moz-‐border-‐radius: 6px; -‐webkit-‐border-‐radius:6px; Fancy Button
- 31. Box Shadow -‐moz-‐box-‐shadow: 4px 4px 8px #a2a2a2; -‐webkit-‐box-‐shadow: 4px 4px 8px #a2a2a2; box-‐shadow: 4px 4px 8px #a2a2a2; Fancy Button
- 32. TExt Shadow text-‐shadow: 1px 1px 0 #d2572b;} Fancy Button
- 33. Background Gradient 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); Fancy Button
- 34. 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;}
- 35. 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;}
- 36. 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;}
- 37. 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;}
- 38. CSS3 RGBA and Opacity rgba (238,88,0,1.0); #d2572b; opacity:1.0; rgba (238,88,0,0.5); #d2572b; opacity:0.5;
- 40. Hit me with some jQuery!
- 41. Simple JavaScript Function $('#PostMessage').click(function() { $('tr.new-comment').fadeIn(); return false; });
- 42. Double Time $('#PostMessage').click(function() { $('#CommentForm').hide(); $('tr.new-comment').fadeIn(); return false; });
- 43. Resources HTML5 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.js Modernizer http://modernizr.com/ Dive Into HTML5 http://diveintohtml5.org/ Reframer http://reframerapp.com