Html5 ux london

1. PROTOTYPING with TODD ZAKI WARFEL / UXLONDON /#HTML5

2. Grab the files http://bit.ly/UXLondon

3. Guiding Principles Set Expectations

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

8. html vs. html5

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

10. HTML5 Doctypes <!DOCTYPE HTML>

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

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>

24. HTML5 Input Types date date-‐time email tel range search time url

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>

27. http://bit.ly/html5_mobile Email URL

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

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

44. http://bit.ly/protobk on The Twitters @zakiwarfel

Html5 ux london

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Ähnlich wie Html5 ux london

Ähnlich wie Html5 ux london (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html5 ux london