Interactive Prototyping with DHTML
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Interactive Prototyping with DHTML

on

  • 9,163 views

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

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

Statistics

Views

Total Views
9,163
Views on SlideShare
8,708
Embed Views
455

Actions

Likes
30
Downloads
301
Comments
4

20 Embeds 455

http://looksgoodworkswell.blogspot.com 392
http://www.slideshare.net 11
http://www.looksgoodworkswell.com 7
http://www.vleerkatcreations.com 7
http://looksgoodworkswell.blogspot.in 6
http://blog.naver.com 5
http://looksgoodworkswell.blogspot.de 4
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 3
https://www.linkedin.com 3
http://static.slideshare.net 3
http://looksgoodworkswell.blogspot.com.br 3
http://looksgoodworkswell.blogspot.com.au 2
http://looksgoodworkswell.blogspot.com.es 2
http://www.linkedin.com 1
http://looksgoodworkswell.blogspot.co.uk 1
http://looksgoodworkswell.blogspot.ca 1
http://localhost:3000 1
http://209.85.135.132 1
http://www.looksgoodworkswell.blogspot.com 1
http://looksgoodworkswell.blogspot.com.tr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Interactive Prototyping with DHTML Presentation Transcript

  • 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?