Interactive Prototyping with DHTML

9,664 views
8,608 views

Published on

I presented this talk at Mix '09 on 3/19/2009.

Prototyping can be challenging. Especially prototyping in DHTML. But over the last few years a number of tools, techniques, libraries and frameworks have emerged making the task easier. Drawing from years of experience at companies such as Yahoo! and Netflix, come hear Bill Scott discuss these solutions and best practices for laying out pages rapidly, injecting interactive behavior and simulating data for prototyping your Web applications in DHTML.

Video from live event: http://videos.visitmix.com/MIX09/C14F

Published in: Technology
4 Comments
31 Likes
Statistics
Notes
No Downloads
Views
Total views
9,664
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
305
Comments
4
Likes
31
Embeds 0
No embeds

No notes for slide

Interactive Prototyping with DHTML

  1. Interactive Prototyping with DHTML tips, techniques, tools, libraries and frameworks for rapid prototyping Mix 09 Bill Scott Mar. 19th, 2009
  2. My Background
  3. the challenge interaction is dynamic
  4. Interaction is Nuanced
  5. Interaction is Nuanced ickr. inline edit
  6. Interaction is Nuanced ickr. inline edit y! teachers. drag & drop
  7. Interaction is Nuanced backpackit. contextual tools ickr. inline edit y! teachers. drag & drop
  8. Interaction is Nuanced backpackit. contextual tools ickr. inline edit y! teachers. drag & drop the gap. inline assistant
  9. Interaction is Nuanced
  10. Interaction is Nuanced the gap. inline assistant
  11. Interaction is Nuanced the gap. inline assistant microsoft live. paged scrolling
  12. Interaction is Nuanced the gap. inline assistant broadmoor hotel. one page checkout microsoft live. paged scrolling
  13. Devil is in the Details
  14. Devil is in the Details y! teachers. anti-pattern. hover & cover
  15. Devil is in the Details y! teachers. anti-pattern. hover & cover
  16. Devil is in the Details y! teachers. anti-pattern. hover & cover - resolved y! teachers. anti-pattern. hover & cover
  17. Devil is in the Details y! teachers. anti-pattern. hover & cover - resolved y! teachers. anti-pattern. hover & cover
  18. Devil is in the Details
  19. Devil is in the Details y! photos. anti-pattern. idiot boxes
  20. Devil is in the Details y! photos. anti-pattern. idiot boxes y! maps. anti-pattern. mouse trap
  21. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  22. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  23. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  24. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  25. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  26. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  27. Timing Concerns
  28. Timing Concerns my yahoo!. version 1
  29. Timing Concerns my yahoo!. version 1 my yahoo!. version 2
  30. Timing Concerns my yahoo!. version 1 my yahoo!. version 2 my yahoo!. version 3
  31. prototyping with DHTML
  32. Prototyping with DHTML Bene ts Start simple & add complexity Higher delity Closer to nal solution Living example Disadvantages Requires technical savvy Bugs can suck down time Too much time spent ‘messing with code’ Hard to extract into documentation Can get in the way of ideation if not rapid enough
  33. 100+ variations prototyped over 1 week Winnowed down between PMs, Design & Eng. Put before users the next week & again 2 weeks later
  34. 100+ variations prototyped over 1 week Winnowed down between PMs, Design & Eng. Put before users the next week & again 2 weeks later
  35. Separation of Concerns Content/Structure should be free of style & behavior logic Style should be layered in externally Logic should be handled in separate code
  36. Separation of Concerns Content/Structure should be free of style & behavior logic Structure Style should be layered in externally Logic should be handled in separate code
  37. Separation of Concerns Content/Structure should be free of style & behavior logic Structure Style should be layered in externally Logic should be handled in Style separate code
  38. Separation of Concerns Content/Structure should be free of style & behavior logic Structure Style should be layered in externally Logic should be handled in Style Logic separate code
  39. Separation of Concerns Content/Structure should be free of style & behavior logic Structure Style should be layered in externally Logic should be handled in Style Logic separate code “Keep structure, style and logic separate”
  40. Prototyping Challenges Layout Getting the page laid out correctly (enough) & quickly Behavior Adding interactivity to the page Data Populating the prototype with fake or semi-realistic data
  41. Layout Putting everything where it should be as quickly as possible* *with minimal hacking
  42. It’s Not That Easy 14 IE 6 layout bugs
  43. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs
  44. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines
  45. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 8 major browsers
  46. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 8 major browsers 5 ways to layout elements
  47. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 8 major browsers 5 ways to layout elements 6+ ways to vertically align
  48. This Should Not Be Hard... But It Is Confronted with many techniques Floats + Margins Slows prototyping oat left oat right Problem: Laying out against the ow margin-left margin-right Simple Margin All Floats Lorem ipsum dolor sit amet, consectetur adipiscing elit. oat left oat right Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, oat left eros. Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis All Floats w/ Nested tempus mattis ipsum. oat left Cum sociis natoque margin-left oat left oat right oat right
  49. Box Model IE6 Quirks mode (and earlier IE) have di erent handling Use strict mode to eliminate this concern
  50. Understanding Floats Flow of block elements
  51. Understanding Floats Flow of block elements Flow of inline elements
  52. Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor oat left block sit amet, consectetur adipiscing elit. element Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. Nullam mattis ultrices lectus. Aenean ows around dolor tortor, semper in, aliquam at, faucibus a, diam. Nam eget urna block above vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis natoque Flow of inline elements
  53. Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor oat left block sit amet, consectetur adipiscing elit. element Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. Nullam mattis ultrices lectus. Aenean ows around dolor tortor, semper in, aliquam at, faucibus a, diam. Nam eget urna block above vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis natoque Floating block elements Flow of inline elements oat left third block oat left element oat left wraps ow left to right
  54. Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor oat left block sit amet, consectetur adipiscing elit. element Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. Nullam mattis ultrices lectus. Aenean ows around dolor tortor, semper in, aliquam at, faucibus a, diam. Nam eget urna block above vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis natoque Floating block elements Flow of inline elements oat left third block oat left element oat left wraps ow left to right Clearing oats oat left oat left ow left to right after clear, [clear] ow returns to vertical for blocks
  55. Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely 5 em A B is positioned 5 em relative to A, not 5 em B the document 5 em
  56. Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely 5 em A B is positioned 5 em relative to A, not 5 em B the document 5 em B positioned absolutely position: relative A B is positioned relative to A, not 5 em B the document 5 em
  57. Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely B positioned absolutely 5 em no positioning speci ed A A B is positioned B is positioned 5 em relative to A, not relative to 5 em B the document document, not A 5 em 5 em B 5 em B positioned absolutely position: relative A B is positioned relative to A, not 5 em B the document 5 em
  58. Layout Techniques
  59. Layout Techniques Choose positioning over oats
  60. Layout Techniques Choose positioning over oats Use a grid layout system
  61. Layout Techniques Choose positioning over oats Use a grid layout system
  62. Layout Techniques Choose positioning over oats Use a grid layout system
  63. Layout Techniques Choose positioning over oats Use a grid layout system
  64. Layout Techniques Choose positioning over oats Use a grid layout system
  65. Layout Techniques Choose positioning over oats Use a grid layout system Use a CSS framework to simplify life
  66. CSS Frameworks Building on the work of others Hide complexity Simplify the layout process Express layout De ne templates and/or grids Normalize browsers CSS Reset Handle IE Objections? Takes away the craftsmanship Non-semantic
  67. CSS Frameworks Elements CSS Frameworks Schema Web Design Framework WYMstyle: a CSS framework CleverCSS YAML CSS Framework Tripoli Beta CSS Framework YUI Grids CSS ESWAT Web Project Framework Boilerplate CSS Framework CwS CSS Framework Blueprint CSS My (not really mine) CSS Framework 960 Grid
  68. CSS Frameworks Elements CSS Frameworks Schema Web Design Framework WYMstyle: a CSS framework CleverCSS YAML CSS Framework Tripoli Beta CSS Framework YUI Grids CSS ESWAT Web Project Framework Boilerplate CSS Framework CwS CSS Framework Blueprint CSS My (not really mine) CSS Framework 960 Grid
  69. Blueprint CSS Framework
  70. Blueprint CSS Framework
  71. Blueprint CSS Framework
  72. Blueprint CSS Framework
  73. Blueprint CSS Framework Layout is speci ed by using style classes that denote layout. “span-7” means span 7 grid columns. “colborder” means provide one grid column to the right as a border.
  74. YUI Grid Builder
  75. YUI Grid Cheat Sheet
  76. YUI Grid Cheat Sheet
  77. 960 Grid
  78. 960 Grid
  79. 960 Grid
  80. Why 960? 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly exible base number to work with You can also make Blueprint a 960 grid system as well
  81. 960 gs Fluid A derivative that supports uid layout
  82. Making it Semantic Criticism: non-semantic naming There are tools for making blueprint semantic Boilerplate http://code.google.com/p/css-boilerplate/ Blueprint’s compress.rb http://jdclayton.com/blueprints_compress_a_walkthrough.html Semantify http://lab.christianmontoya.com/read/ http://www.christianmontoya.com/2007/11/10/semantify-and-css-tools-based-on- blueprint/) CSS Mixin for PHP http://habilis.net/cssmixin/ Non-issue for prototyping
  83. Style Techniques Use CSS Reset Keep structure, style and logic separate Avoid any direct styles or html style tags (font, etc.) Appropriate Markup H1 Does Not Mean quot;Big, Bold, and Uglyquot; A Paragraph Is a Paragraph List Mania Keep DIV elements to a minimum Use px for font-sizes (avoids nesting di culties) Minimize selectors Extend objects by applying multiple classes to an element
  84. Behavior Making the page come alive* *as quickly as possible
  85. Anatomy of an Interaction
  86. Anatomy of an Interaction Page Element Target an element or elements for attaching events & behaviors.
  87. Anatomy of an Interaction Page Element Target an element or elements for attaching events & behaviors. Event Handler Events are the glue between the user and behaviors. They start behaviors.
  88. Anatomy of an Interaction Page Element Target an element or elements for attaching events & behaviors. Event Handler Events are the glue between the user and behaviors. They start behaviors. Behavior Blocks of logic, patterns, actions that operate on elements.
  89. Anatomy of an Interaction Page Element Target an element or elements for attaching events & behaviors. Event Handler Events are the glue between the user and behaviors. They start behaviors. Behavior Blocks of logic, patterns, actions that operate on elements.
  90. Anatomy of an Interaction Page Element Target an element or elements for attaching events & behaviors. Page Element Event Handler Events are the glue between the user and behaviors. They start behaviors. Behavior Event Handler Blocks of logic, patterns, actions that operate on elements. Behavior
  91. user Anatomy of an Interaction ew vi t en Page Element ev Target an element or elements for attaching events & behaviors. Page Element Event Handler re Events are the glue between the user and behaviors. They start behaviors. Behavior modify Event Handler Blocks of logic, patterns, actions that operate on elements. rm fo er p Behavior
  92. user Anatomy of an Interaction ew vi t en Page Element ev Target an element or elements for attaching events & behaviors. Page Element Event Handler re Events are the glue between the user and behaviors. They start behaviors. Behavior modify Event Handler Blocks of logic, patterns, actions that operate on elements. rm fo er p Behavior “Keep interaction, objects and behavior separate”
  93. Behavior Injection Tying behavior to elements in the markup tightly couples behavior (also non-semantic) Avoid onclick=”someAction()” Instead associate actions with matched elements
  94. Behavior Injection By rendering all panels hidden & showing with JS <form id=quot;loginquot; action=quot;quot;> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p> <p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p> <input type=quot;submitquot; value=quot;Submitquot; /> </div> <!-- With Errors--> <div class=”errors”> <p class=quot;errorquot;>Password doesn't match.</p> <p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p> <p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p> <input type=quot;submitquot; value=quot;Submitquot; /> </div> <!-- Forgot Password--> <div class=”forgotten”> <p>Provide your email and we'll send you a new password.</p> <p><label>Email Address: </label><input type=quot;textquot; name=quot;emailquot;/></p> <input type=quot;submitquot; value=quot;Send New Passwordquot; /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
  95. Behavior Injection .noerrors, .errors, .forgotten: {display:none;} By rendering all panels hidden & showing with JS <form id=quot;loginquot; action=quot;quot;> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p> <p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p> <input type=quot;submitquot; value=quot;Submitquot; /> </div> <!-- With Errors--> <div class=”errors”> <p class=quot;errorquot;>Password doesn't match.</p> <p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p> <p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p> <input type=quot;submitquot; value=quot;Submitquot; /> </div> <!-- Forgot Password--> <div class=”forgotten”> <p>Provide your email and we'll send you a new password.</p> <p><label>Email Address: </label><input type=quot;textquot; name=quot;emailquot;/></p> <input type=quot;submitquot; value=quot;Send New Passwordquot; /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
  96. Behavior Injection .noerrors, .errors, .forgotten: {display:none;} By rendering all panels hidden & showing with JS <form id=quot;loginquot; action=quot;quot;> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p> <p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p> <input type=quot;submitquot; value=quot;Submitquot; /> </div> $(quot;.errorsquot;).show(); <!-- With Errors--> <div class=”errors”> <p class=quot;errorquot;>Password doesn't match.</p> <p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p> <p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p> <input type=quot;submitquot; value=quot;Submitquot; /> </div> <!-- Forgot Password--> <div class=”forgotten”> <p>Provide your email and we'll send you a new password.</p> <p><label>Email Address: </label><input type=quot;textquot; name=quot;emailquot;/></p> <input type=quot;submitquot; value=quot;Send New Passwordquot; /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
  97. Behavior Injection: 960gs Fluid
  98. Behavior Injection: 960gs Fluid <ul class=quot;nav mainquot;> <li><a href=quot;#quot;>Menu 1</a> <ul> <li><a href=quot;#quot;>Submenu 1</a></li> <li><a href=quot;#quot;>Submenu 2</a></li> <li><a href=quot;#quot;>Submenu 3</a></li> <li><a href=quot;#quot;>Submenu 4</a></li> <li><a href=quot;#quot;>Submenu 5</a></li> </ul> </li> <li><a href=quot;#quot;>Menu 2</a> <ul>
  99. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class=quot;nav mainquot;> <li><a href=quot;#quot;>Menu 1</a> <ul> <li><a href=quot;#quot;>Submenu 1</a></li> <li><a href=quot;#quot;>Submenu 2</a></li> <li><a href=quot;#quot;>Submenu 3</a></li> <li><a href=quot;#quot;>Submenu 4</a></li> <li><a href=quot;#quot;>Submenu 5</a></li> </ul> </li> <li><a href=quot;#quot;>Menu 2</a> <ul>
  100. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class=quot;nav mainquot;> <li><a href=quot;#quot;>Menu 1</a> <ul> <li><a href=quot;#quot;>Submenu 1</a></li> <li><a href=quot;#quot;>Submenu 2</a></li> <li><a href=quot;#quot;>Submenu 3</a></li> <li><a href=quot;#quot;>Submenu 4</a></li> <li><a href=quot;#quot;>Submenu 5</a></li> </ul> </li> <li><a href=quot;#quot;>Menu 2</a> <ul> toggle open/close tied to .box
  101. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class=quot;nav mainquot;> <li><a href=quot;#quot;>Menu 1</a> <ul> <li><a href=quot;#quot;>Submenu 1</a></li> <li><a href=quot;#quot;>Submenu 2</a></li> <li><a href=quot;#quot;>Submenu 3</a></li> <li><a href=quot;#quot;>Submenu 4</a></li> <li><a href=quot;#quot;>Submenu 5</a></li> </ul> </li> <li><a href=quot;#quot;>Menu 2</a> <ul> toggle open/close tied to .box menu behavior tied to .menu
  102. Protoscript Experimental framework for behavior injection
  103. Example
  104. Protoscript: Sprinkling in Behaviors
  105. Anatomy of Self-Healing Delete DOM elements DOM [X] Element <LI>[X] oldmove.mov</LI> Events Click Event onClick (callback) Behaviors Behavior Fade Close
  106. Anatomy of Self-Healing Delete DOM elements DOM [X] Element <LI>[X] oldmove.mov</LI> Events Click Event onClick (callback) Behaviors Behavior Fade Close
  107. Anatomy of Self-Healing Delete DOM elements DOM [X] Element <LI>[X] oldmove.mov</LI> Events Click Event onClick (callback) Behaviors Behavior Fade Close
  108. Anatomy of Self-Healing Delete Element Behavior Event
  109. Anatomy of Self-Healing Delete Element Behavior Event
  110. Anatomy of Self-Healing Delete $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  111. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  112. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  113. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  114. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  115. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  116. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  117. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  118. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  119. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  120. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  121. Behaviors Animate. ColorAnimate. Fade. Move. Spotlight. Close. DragDrop. Hide. Open. Popup. ReplaceClass. Script. SetClass. SetStyle. Show. ToggleClass. ToggleOpenClose. Element ToggleShowHide. FetchHtml. SetHtml. Behavior Event
  122. Behavior Demo Site has a demo page for each behavior http://protoscript.com/demos.php Site has a wiki with documentation page for each behavior http://docs.protoscript.com/ Element Behavior Event
  123. Events Blur. Click. Dblclick. Focus. Keypress. Mousedown. Mousemove. Mouseout. Mouseover. Mouseup. Timer. Element Behavior Event
  124. Callbacks onComplete. onTween. onStart. onClose. onStartDrag. onDrag. onDragEnter. onDragOver. onDragDrop. onDragOut. onEndDrag. onMouseUp. onInvalidDrop. onBlur. onClick. onDblClick. onFocus. onKeypress. onMousedown. onMousemove. onMouseout. onMouseover. onMouseup. onTimer. onHide. onOpen. onReplaceClass. onSetClass. onSetStyle. onShow. onToggleClass. Element onToggleOpenClose. onToggleShowHide. onSuccess. onFailure. onSetHtml. Behavior Event
  125. jQuery Easy to layer in behavior Easy to keep behavior separate Simple, quick, terse syntax $(“div”).addClass(“highlighted”); <div class=”module”> <h2>Some Header</h2> <div class=”bd”> <p>Some content</p> </div> Element Behavior <div class=”ft”> <p>Footer content</p> </div> </div> $(“.ft”).click(function () { $(this). addClass(“highlighted”); }); Element Events Behavior
  126. jQuery Behaviors Behavior html. append. prepend. before. after. wrap. show. hide. toggle. slideDown. slideUp. fadeIn. fadeOut. animate. css. offset. position. height. width. addClass. attr. removeClass. toggleClass. val. + over 1000 plugins
  127. jQuery Events Event bind. trigger. hover. toggle. blur. change. click. dlbclick. error. focus. keydown. keypress. keyup. load. mousedown. mousemove. mouseout. mouseover. mouseup. resize. scroll. select. submit. unload.
  128. Class Behaviors Adding classes that represent behavior Javascript code implements behavior for speci c classes <a id=quot;optionquot; class=quot;truequot;> <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; /> <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; /> Option <span class=quot;ifTruequot;>(On)</span> <span class=quot;ifFalsequot;>(Off)</span> </a> .ifTrue, .ifFalse{ #option{ display:none; font-size:.8em; } color:#444; .true .ifTrue{ } display:inline; #option .ifTrue{ } color:green; .false .ifFalse{ } display:inline; #option .ifFalse{ } color:red; } See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
  129. Class Behaviors Adding classes that represent behavior Javascript code implements behavior for speci c classes <a id=quot;optionquot; class=quot;truequot;> <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; /> <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; /> Option <span class=quot;ifTruequot;>(On)</span> <span class=quot;ifFalsequot;>(Off)</span> </a> .ifTrue, .ifFalse{ #option{ display:none; font-size:.8em; } color:#444; .true .ifTrue{ } display:inline; #option .ifTrue{ } color:green; .false .ifFalse{ } display:inline; #option .ifFalse{ } color:red; } See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
  130. Class Behaviors Adding classes that represent behavior Javascript code implements behavior for speci c classes <a id=quot;optionquot; class=quot;truequot;> <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; /> <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; /> Option <span class=quot;ifTruequot;>(On)</span> <span class=quot;ifFalsequot;>(Off)</span> </a> .ifTrue, .ifFalse{ #option{ display:none; font-size:.8em; } color:#444; .true .ifTrue{ } display:inline; #option .ifTrue{ } color:green; .false .ifFalse{ } display:inline; #option .ifFalse{ } color:red; } See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
  131. Class Behaviors Adding classes that represent behavior Javascript code implements behavior for speci c classes <a id=quot;optionquot; class=quot;truequot;> <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; /> <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; /> Option <span class=quot;ifTruequot;>(On)</span> <span class=quot;ifFalsequot;>(Off)</span> </a> .ifTrue, .ifFalse{ #option{ display:none; font-size:.8em; } color:#444; .true .ifTrue{ } display:inline; #option .ifTrue{ } color:green; .false .ifFalse{ } display:inline; #option .ifFalse{ } color:red; } See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
  132. ClassBehaviors jQuery Library http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category
  133. ClassBehaviors jQuery Library http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category <fieldset class=quot;borderquot;> <label for=quot;myselectquot;>Select Anything<em>*</em>:</label> <select id=quot;myselectquot; name=quot;myselectquot; class=quot;linkedSelects id_myLinkedSelectquot;> <option value=quot;quot;>--- pick a type ---</option> <option value=quot;./xml/linkedSelects_fruit.xmlquot;>Fruit</option> <option value=quot;./xml/linkedSelects_vegetables.xmlquot;>Vegetables</option> <option value=quot;./xml/linkedSelects_fish.xmlquot;>Fish</option> </select> <select id=quot;myLinkedSelectquot; name=quot;myLinkedSelectquot;> <option value=quot;quot;>--- pick a type first ---</option> </select> </fieldset>
  134. Style Class Switching Keep style details out of programming logic Instead bundle style changes under a style class Use class “mix-in” Multiple class names for an element
  135. Greasemonkey + jQuery
  136. Greasemonkey + jQuery jquery code can be loaded for any web page allowing behaviors to be added
  137. Firebug Edit HTML For quick adding of html or modifying html during a prototype review Edit CSS Change behaviors, layout or style on the y Layout issues Visualize the box model & page layout Manipulate Javascript Change logic, add behaviors, experiment & tweak
  138. Behavior Techniques Use CSS to simulate mouse hover actions Use CSS selector syntax to inject behavior ExtJS, jQuery, Dojo, Mootools, Prototype, cssQuery(), YUI 3.0 Understand CSS Speci city Understand Class vs. ID Use style class switching for visual changes Use innerHTML for content changes Anchors as basic navigation/action hooks Keep structure, style and logic separate Avoid adding onclick handlers in the HTML (unobtrusive) Use Firebug
  139. Data/Content Approximating reality
  140. jQuery Data Binding jQuery.ajax(options) $.ajax({ url: quot;test.htmlquot;, cache: false, success: function(html){ $(quot;#resultsquot;).append(html); } }); Very quick way to bring in dynamic interface elements
  141. Use Public APIs Yahoo! Search Google Search Flickr images Google Maps
  142. JSON {quot;namequot;: quot;Jack B. Nimblequot;, quot;at largequot;: true, quot;gradequot;: quot;Aquot;, quot;levelquot;: 3} name Jack B. Nimble at large true grade A level 3
  143. JSON: Arrays [quot;Sundayquot;, quot;Mondayquot;, quot;Tuesdayquot;, quot;Wednesdayquot;, quot;Thursdayquot;, quot;Fridayquot;, quot;Saturdayquot;] [ [0, -1, 0], [1, 0, 0], [0, 0, 1] ] 3x3 array
  144. JSON in jQuery jQuery.getJSON(url, [data], [callback]) $.getJSON(quot;http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?quot;, function(data){ $.each(data.items, function(i,item){ $(quot;<img/>quot;).attr(quot;srcquot;, item.media.m).appendTo(quot;#imagesquot;); if ( i == 3 ) return false; }); } );
  145. JSON Example $.getJSON(quot;http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?quot;, function(data){ $.each(data.items, function(i,item){ $(quot;<img/>quot;).attr(quot;srcquot;, item.media.m).appendTo(quot;#imagesquot;); if ( i == 3 ) return false; // only get 4 images }); } ); ({ quot;titlequot;: quot;Recent Uploads tagged catquot;, quot;linkquot;: quot;http://www.flickr.com/photos/tags/cat/quot;, quot;descriptionquot;: quot;quot;, quot;modifiedquot;: quot;2009-03-09T02:00:41Zquot;, quot;generatorquot;: quot;http://www.flickr.com/quot;, quot;itemsquot;: [ { quot;titlequot;: quot;birthday 89quot;, quot;linkquot;: quot;http://www.flickr.com/photos/gulshan/3340193322/quot;, quot;mediaquot;: {quot;mquot;:quot;http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpgquot;}, quot;date_takenquot;: quot;2009-03-08T03:11:50-08:00quot;, quot;descriptionquot;: quot;<p><a href=quot;http://www.flickr.com/people/gulshan/quot;>gulshan</a> posted a photo:</p> <p><a href=quot;http://www.flickr.com/photos/gulshan/3340193322/quot; title= quot;birthday 89quot;><img src=quot;http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpgquot; width=quot;240quot; height=quot;160quot; alt=quot;birthday 89quot; /></a></p> quot;, quot;publishedquot;: quot;2009-03-09T02:00:41Zquot;, quot;authorquot;: quot;nobody@flickr.com (gulshan)quot;, quot;author_idquot;: quot;88283245@N00quot;, quot;tagsquot;: quot;birthday party me brooklyn cat photobooth marcus 2009quot; },
  146. Prototyping with DHTML Layout Getting the page laid out correctly & quickly Behavior Adding interactivity to the page Data Populating the prototype with fake or semi- realistic data
  147. Resources Book: CSS:The Missing Manual http://css.maxdesign.com.au/ oatutorial/ http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/ http://www.blueprintcss.org/ http://www.scribd.com/doc/3592303/Blueprint-CSS-framework-version-071-cheat-sheet http://kematzy.com/blueprint-generator/ http://mdaines.com/plumb/ http://developer.yahoo.com/yui/grids/ http://developer.yahoo.com/yui/grids/builder/
  148. Resources http://yuiblog.com/assets/pdf/cheatsheets/css.pdf http://www.designbygrid.com/ http://www.divitodesign.com/2008/12/960-css-framework-learn-basics/ http://www.divitodesign.com/2009/01/tricks-to-solve-960-css-framework-problems/ http://www.mostinspired.com/blog/2009/01/28/rapid-interactive-prototyping/ (with jquery) http://www.domain7.com/WhoWeAre/StephenBau.html (built the moo tools version of uid) http://www.mostinspired.com/blog/wp-content/uploads/2009/rip/16_ uid_jquery/ http://honeyl.public.iastate.edu/blueprint/ http://code.google.com/p/css-boilerplate/ http://jdclayton.com/blueprints_compress_a_walkthrough.html
  149. Resources http://lab.christianmontoya.com/read/ http://www.christianmontoya.com/2007/11/10/semantify-and-css-tools-based-on- blueprint/ http://habilis.net/cssmixin/ http://particletree.com/features/ajax-wireframing-approaches/ http://designin uences.com/ uid960gs/ http://www.protoscript.com http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category http://joanpiedra.com/jquery/greasemonkey/ http://www.get rebug.com/ http://particletree.com/features/a-designers-guide-to-prototyping-ajax/ http://json.org
  150. Photo Credits http://www. ickr.com/photos/yerro/2310015018/ http:// ickr.com/photos/totoro_zine/2341347265/ http://www. ickr.com/photos/rohdesign/2610114400/ http://en.wikipedia.org/wiki/ Internet_Explorer_box_model_bug
  151. We are hiring Both UX Designer & UI Engineer positions open
  152. Questions?

×