SlideShare a Scribd company logo

DHTML Prototyping: Silicon Valley Code Camp

Bill Scott, profile picture
Bill Scott

The document discusses techniques for rapidly prototyping interactive prototypes using DHTML, including separating interface elements, behaviors, and data using a model-view-controller pattern; addressing challenges related to layout, styles, and behaviors; and tools like CSS frameworks that can help simplify the prototyping process. It provides examples of interactions and discusses factors like timing that are important to consider for prototyping interactions.

TechnologyDesign
1 of 176
Downloaded 160 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
Interactive Prototyping with DHTML tips, techniques, tools, libraries and frameworks for rapid prototyping Bill Scott 2009.10.03
My Background
the challenge interaction is dynamic
DHTML Prototyping: Silicon Valley Code Camp
Simple Interaction?
Simple Interaction? Events... Page load. Mouse hover. Mouse down. Drag initiated. Drag leaves original location. Drag re- enters original location. Drag re-enters original location. Drag enters valid target. Drag exits valid target. Drag enters specific invalid target. Drag is over no specific target. Drag hovers over valid target. Drag hovers over invalid target. Drop accepted. Drop rejected. Drop on parent container. 16+
Simple Interaction? Actors... Page. Cursor. Tool Tip. Drag Object. Drag Object’s Parent Container. Drop Target. 6+
Actors Events 96 Interesting Moments
interaction (n). mutual or reciprocal action; interacting
Interaction is Nuanced
Interaction is Nuanced flickr. inline edit
Interaction is Nuanced flickr. inline edit y! teachers. drag & drop
Interaction is Nuanced backpackit. contextual tools flickr. inline edit y! teachers. drag & drop
Interaction is Nuanced backpackit. contextual tools flickr. inline edit y! teachers. drag & drop the gap. inline assistant
Interaction is Nuanced
Interaction is Nuanced the gap. inline assistant
Interaction is Nuanced the gap. inline assistant microsoft live. paged scrolling
Interaction is Nuanced the gap. inline assistant broadmoor hotel. one page checkout microsoft live. paged scrolling
Devil is in the Details
Devil is in the Details y! teachers. anti-pattern. hover & cover
Devil is in the Details y! teachers. anti-pattern. hover & cover
Devil is in the Details y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover - resolved
Devil is in the Details y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover - resolved
Devil is in the Details
Devil is in the Details y! photos. anti-pattern. idiot boxes
Devil is in the Details y! photos. anti-pattern. idiot boxes y! maps. anti-pattern. mouse trap
Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
Timing Concerns
Timing Concerns my yahoo!. version 1
Timing Concerns my yahoo!. version 1 my yahoo!. version 2
Timing Concerns my yahoo!. version 1 my yahoo!. version 2 my yahoo!. version 3
prototyping with DHTML why?
Advantages Start simple & add complexity Higher fidelity Living, evolving example Closer to final technical solution
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
100+ variations prototyped over 1 week Winnowed down between PMs, Design & Eng. Put before users the next week & again 2 weeks later
100+ variations prototyped over 1 week Winnowed down between PMs, Design & Eng. Put before users the next week & again 2 weeks later
prototyping architecture thinking about it the right way
Separation of Concerns (MVC)
Separation of Concerns (MVC) View
Separation of Concerns (MVC) View Data
Separation of Concerns (MVC) View Data Behavior
Separation of Concerns
Separation of Concerns View
Separation of Concerns View Data
Separation of Concerns View Data Behavior
Separation of Concerns Structure View Data Behavior
Separation of Concerns Layout Structure View Data Behavior
Separation of Concerns Layout Structure View Style Data Behavior
Prototyping Challenges Not surprisingly the challenges are within each concern Structure, Layout & Style Getting the page laid out correctly (enough) & quickly Behavior Adding interactivity to the page Data Populating the prototype with fake or semi-realistic data
Layout & Style Putting everything where it should be as quickly as possible* *with minimal hacking
It’s Not That Easy 14 IE 6 layout bugs
It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs
It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines
It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 8 major browsers
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
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
This Should Not Be Hard... But It Is Confronted with many techniques Floats + Margins Slows prototyping float left float right Problem: Laying out against the flow margin-left margin-right Simple Margin All Floats Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quam float left float right massa, aliquam non, feugiat non, ullamcorper sed, eros. Nullam mattis float left ultrices lectus. Aenean dolor tortor, semper in, aliquam at, faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. All Floats w/ Nested float left Cum sociis natoque margin-left float left float right float right
Box Model IE6 Quirks mode (and earlier IE) have different handling Use strict mode to eliminate this concern
Understanding Floats Flow of block elements
Understanding Floats Flow of block elements Flow of inline elements
Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor float left sit amet, consectetur block adipiscing elit. Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. element Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, flows around faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis block above natoque Flow of inline elements
Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor float left sit amet, consectetur block adipiscing elit. Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. element Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, flows around faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis block above natoque Flow of inline elements Floating block elements float left float left third block float left element wraps flow left to right
Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor float left sit amet, consectetur block adipiscing elit. Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. element Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, flows around faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis block above natoque Flow of inline elements Floating block elements float left float left third block float left element wraps flow left to right Clearing floats float left float left flow left to right [clear] after clear, flow returns to vertical for blocks
Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely 5 em A B is positioned relative to A 5 em 5 em (which is B positioned), not 5 em the document
Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely 5 em A B is positioned relative to A 5 em 5 em (which is B positioned), not 5 em the document B positioned absolutely position: relative A B is positioned relative to A 5 em (again B positioned), not 5 em the document
Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely B positioned absolutely 5 em no positioning specified A B is positioned A B is positioned relative to A relative to 5 em 5 em (which is document, not A B positioned), not (since it is not 5 em the document positioned) 5 em B 5 em B positioned absolutely position: relative A B is positioned relative to A 5 em (again B positioned), not 5 em the document
Layout Techniques for Prototyping
Layout Techniques for Prototyping Choose positioning over floats
Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system Use a CSS framework to simplify life
CSS Frameworks Building on the work of others Hide complexity Simplify the layout process Express layout Define templates and/or grids Normalize browsers CSS Reset Handle IE Objections? Takes away the craftsmanship Non-semantic
CSS Frameworks Elements CSS Frameworks CleverCSS WYMstyle: a CSS framework Tripoli Beta CSS Framework YAML CSS Framework ESWAT Web Project Framework YUI Grids CSS CwS CSS Framework Boilerplate CSS Framework My (not really mine) CSS Framework Blueprint CSS BlueTrip 960 Grid Schema Web Design Framework
CSS Frameworks Elements CSS Frameworks CleverCSS WYMstyle: a CSS framework Tripoli Beta CSS Framework YAML CSS Framework ESWAT Web Project Framework YUI Grids CSS CwS CSS Framework Boilerplate CSS Framework My (not really mine) CSS Framework Blueprint CSS BlueTrip 960 Grid Schema Web Design Framework
Blueprint CSS Framework
Blueprint CSS Framework
Blueprint CSS Framework
Blueprint CSS Framework
Blueprint CSS Framework Layout is specified 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.
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
YUI Grid Builder
YUI Grid Cheat Sheet
YUI Grid Cheat Sheet
960 Grid
960 Grid
960 Grid
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 flexible base number to work with You can also make Blueprint a 960 grid system as well
960 gs Fluid A derivative that supports fluid layout
Less CSS CSS Pre-processor http://lesscss.org/
Less CSS CSS Pre-processor http://lesscss.org/
Less CSS CSS Pre-processor http://lesscss.org/
Less CSS CSS Pre-processor http://lesscss.org/
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
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 "Big, Bold, and Ugly" A Paragraph Is a Paragraph List Mania Keep DIV elements to a minimum Use px for font-sizes (avoids nesting difficulties) Minimize selectors Extend objects by applying multiple classes to an element
Behavior Making the page come alive* *as quickly as possible
Anatomy of an Interaction
Anatomy of an Interaction Page Element Target an element or elements for attaching events & behaviors.
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.
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.
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.
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 Blocks of logic, patterns, actions that Handler operate on elements. Behavior
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 fir e Events are the glue between the user and behaviors. They start behaviors. Behavior modify Event Blocks of logic, patterns, actions that Handler operate on elements. rm fo p er Behavior
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 fir e Events are the glue between the user and behaviors. They start behaviors. Behavior modify Event Blocks of logic, patterns, actions that Handler operate on elements. rm fo p er Behavior “Keep interaction, objects and behavior separate”
Behavior Injection Tying behavior to elements in the markup tightly couples behavior (also non-semantic) Avoid onclick=”someAction()” Instead associate actions with matched elements
Behavior Injection By rendering all panels hidden & showing with JS <form id="login" action=""> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </div> <!-- With Errors--> <div class=”errors”> <p class="error">Password doesn't match.</p> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </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="text" name="email"/></p> <input type="submit" value="Send New Password" /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
Behavior Injection .noerrors, .errors, .forgotten: {display:none;} By rendering all panels hidden & showing with JS <form id="login" action=""> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </div> <!-- With Errors--> <div class=”errors”> <p class="error">Password doesn't match.</p> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </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="text" name="email"/></p> <input type="submit" value="Send New Password" /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
Behavior Injection .noerrors, .errors, .forgotten: {display:none;} By rendering all panels hidden & showing with JS <form id="login" action=""> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </div> $(".errors").show(); <!-- With Errors--> <div class=”errors”> <p class="error">Password doesn't match.</p> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </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="text" name="email"/></p> <input type="submit" value="Send New Password" /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
Behavior Injection: 960gs Fluid
Behavior Injection: 960gs Fluid <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul>
Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul>
Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> toggle open/close tied to .box
Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> toggle open/close tied to .box menu behavior tied to .menu
Protoscript Experimental framework for behavior injection
Example
Protoscript: Sprinkling in Behaviors
Anatomy of Self-Healing Delete DOM elements [X] DOM <LI>[X] oldmove.mov</LI> Element Events Click Event onClick (callback) Behaviors Fade Behavior Close
Anatomy of Self-Healing Delete DOM elements [X] DOM <LI>[X] oldmove.mov</LI> Element Events Click Event onClick (callback) Behaviors Fade Behavior Close
Anatomy of Self-Healing Delete DOM elements [X] DOM <LI>[X] oldmove.mov</LI> Element Events Click Event onClick (callback) Behaviors Fade Behavior Close
Anatomy of Self-Healing Delete Element Behavior Event
Anatomy of Self-Healing Delete Element Behavior Event
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 });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
Behaviors Animate. ColorAnimate. Fade. Move. Spotlight. Close. DragDrop. Hide. Open. Popup. ReplaceClass. Script. SetClass. SetStyle. Show. ToggleClass. ToggleOpenClose. Element ToggleShowHide. FetchHtml. SetHtml. Behavior Event
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
Events Blur. Click. Dblclick. Focus. Keypress. Mousedown. Mousemove. Mouseout. Mouseover. Mouseup. Timer. Element Behavior Event
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
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
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
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.
ClassBehaviors jQuery Library http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category
ClassBehaviors jQuery Library http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category <fieldset class="border"> <label for="myselect">Select Anything<em>*</em>:</label> <select id="myselect" name="myselect" class="linkedSelects id_myLinkedSelect"> <option value="">--- pick a type ---</option> <option value="./xml/linkedSelects_fruit.xml">Fruit</option> <option value="./xml/linkedSelects_vegetables.xml">Vegetables</option> <option value="./xml/linkedSelects_fish.xml">Fish</option> </select> <select id="myLinkedSelect" name="myLinkedSelect"> <option value="">--- pick a type first ---</option> </select> </fieldset>
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
Greasemonkey + jQuery
Greasemonkey + jQuery jquery code can be loaded for any web page allowing behaviors to be added
Firebug Edit HTML For quick adding of html or modifying html during a prototype review Edit CSS Change behaviors, layout or style on the fly Layout issues Visualize the box model & page layout Manipulate Javascript Change logic, add behaviors, experiment & tweak
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 Specificity 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 to tweak & debug
Data/Content Approximating reality
jQuery Data Binding jQuery.ajax(options) $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); Very quick way to bring in dynamic interface elements
Use Public APIs Yahoo! Search Google Search Flickr images Google Maps
Use JSON {"name": "Jack B. Nimble", "at large": true, "grade": "A", "level": 3} name Jack B. Nimble at large true grade A level 3
JSON: Arrays ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] [ [0, -1, 0], [1, 0, 0], [0, 0, 1] ] 3x3 array
JSON in jQuery jQuery.getJSON(url, [data], [callback]) $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); } );
JSON Example $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; // only get 4 images }); } ); ({ "title": "Recent Uploads tagged cat", "link": "http://www.flickr.com/photos/tags/cat/", "description": "", "modified": "2009-03-09T02:00:41Z", "generator": "http://www.flickr.com/", "items": [ { "title": "birthday 89", "link": "http://www.flickr.com/photos/gulshan/3340193322/", "media": {"m":"http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpg"}, "date_taken": "2009-03-08T03:11:50-08:00", "description": "<p><a href="http://www.flickr.com/people/gulshan/">gulshan</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/gulshan/3340193322/" title= "birthday 89"><img src="http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpg" width="240" height="160" alt="birthday 89" /></a></p> ", "published": "2009-03-09T02:00:41Z", "author": "nobody@flickr.com (gulshan)", "author_id": "88283245@N00", "tags": "birthday party me brooklyn cat photobooth marcus 2009" },
Use YQL
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Prototyping Challenges View. Layout, Style & Structure Getting the page laid out correctly (enough) & quickly Behavior Adding interactivity to the page Data Populating the prototype with fake or semi-realistic data
Resources Book: CSS:The Missing Manual http://css.maxdesign.com.au/floatutorial/ 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/
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 fluid) http://www.mostinspired.com/blog/wp-content/uploads/2009/rip/16_fluid_jquery/ http://honeyl.public.iastate.edu/blueprint/ http://code.google.com/p/css-boilerplate/ http://jdclayton.com/blueprints_compress_a_walkthrough.html
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://designinfluences.com/fluid960gs/ http://www.protoscript.com http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category http://joanpiedra.com/jquery/greasemonkey/ http://www.getfirebug.com/ http://particletree.com/features/a-designers-guide-to-prototyping-ajax/ http://json.org http://www.dapper.net/dapperDemo/ http://developer.yahoo.com/yql/ http://designingwebinterfaces.com/resources/interestingmomentsgrid.xls
Photo Credits http://www.flickr.com/photos/yerro/2310015018/ http://flickr.com/photos/totoro_zine/2341347265/ http://www.flickr.com/photos/rohdesign/2610114400/ http://en.wikipedia.org/wiki/ Internet_Explorer_box_model_bug
Questions?

More Related Content

PDF
What to expect while scrumming om band
India Scrum Enthusiasts Community
 
PDF
Hacking Netflix - Netflix APIs
Bill Scott
 
PDF
Object-oriented design principles
Xiaoyan Chen
 
PPTX
RIA
Mahesh Panchal
 
PPTX
Sayed-Minhal-Principles of Beautiful Design
Sayed Minhal
 
PPTX
Basics of Interaction Design & Strategy - 4/11/15
Robert Stribley
 
PPTX
Introduction to User Experience Design 12/07/19
Robert Stribley
 
PPTX
Basics of Interaction Design & Strategy - 6/12/15
Robert Stribley
 
What to expect while scrumming om band
India Scrum Enthusiasts Community
 
Hacking Netflix - Netflix APIs
Bill Scott
 
Object-oriented design principles
Xiaoyan Chen
 
RIA
Mahesh Panchal
 
Sayed-Minhal-Principles of Beautiful Design
Sayed Minhal
 
Basics of Interaction Design & Strategy - 4/11/15
Robert Stribley
 
Introduction to User Experience Design 12/07/19
Robert Stribley
 
Basics of Interaction Design & Strategy - 6/12/15
Robert Stribley
 

Similar to DHTML Prototyping: Silicon Valley Code Camp (20)

PDF
NewsHarvest Gap Analysis
kimmyccs
 
PPTX
Basics of Interaction Design & Strategy - 4/9/16
Robert Stribley
 
PDF
Web Usability: Making Your Sites More Awesomer
Jennifer Riehle McFarland
 
PPTX
Introduction to User Experience Design 10/07/17
Robert Stribley
 
PPTX
Basics of Interaction Design and Strategy
Robert Stribley
 
PPTX
What's trending?
Zabisco Digital
 
PPT
Principles of web design
MR Z
 
KEY
ARTDM 171, Week 13: Navigation Schemes
Gilbert Guerrero
 
PPT
Owning the Interaction in Dynamic Environments
guestf4f7a4b38
 
PPT
Owning the Interaction in Dynamic Environments
Fergus Roche
 
KEY
Online Content Strategy
JISC Netskills
 
PDF
IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell
Harald Felgner, PhD
 
PPTX
Introduction to User Experience Design 06/22/19
Robert Stribley
 
PPTX
Introduction to User Experience Design 2/16/19
Robert Stribley
 
PPTX
Introduction to User Experience Design 02/17/18
Robert Stribley
 
KEY
Artdm 171 Week12 Templates
Gilbert Guerrero
 
PPTX
Introduction to User Experience Design 12/08/18
Robert Stribley
 
PPTX
Introduction to User Experience Design 06/22/18
Robert Stribley
 
PPTX
Basic webpage layout and design
Andz Bass
 
PDF
Introduction to good_usability
Nguyen Minh
 
NewsHarvest Gap Analysis
kimmyccs
 
Basics of Interaction Design & Strategy - 4/9/16
Robert Stribley
 
Web Usability: Making Your Sites More Awesomer
Jennifer Riehle McFarland
 
Introduction to User Experience Design 10/07/17
Robert Stribley
 
Basics of Interaction Design and Strategy
Robert Stribley
 
What's trending?
Zabisco Digital
 
Principles of web design
MR Z
 
ARTDM 171, Week 13: Navigation Schemes
Gilbert Guerrero
 
Owning the Interaction in Dynamic Environments
guestf4f7a4b38
 
Owning the Interaction in Dynamic Environments
Fergus Roche
 
Online Content Strategy
JISC Netskills
 
IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell
Harald Felgner, PhD
 
Introduction to User Experience Design 06/22/19
Robert Stribley
 
Introduction to User Experience Design 2/16/19
Robert Stribley
 
Introduction to User Experience Design 02/17/18
Robert Stribley
 
Artdm 171 Week12 Templates
Gilbert Guerrero
 
Introduction to User Experience Design 12/08/18
Robert Stribley
 
Introduction to User Experience Design 06/22/18
Robert Stribley
 
Basic webpage layout and design
Andz Bass
 
Introduction to good_usability
Nguyen Minh
 
Ad

More from Bill Scott (20)

PDF
Keeping a Startup Ethos
Bill Scott
 
PDF
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bill Scott
 
PDF
Lean Engineering: How to make Engineering a full Lean UX partner
Bill Scott
 
PDF
Bringing Change to Life
Bill Scott
 
PDF
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
Bill Scott
 
PDF
bringing design to life with lean ux & lean engineering - Lean Day West 2013
Bill Scott
 
PDF
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
Bill Scott
 
PDF
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Bill Scott
 
PDF
Anti-Patterns that Stifle Lean UX Teams
Bill Scott
 
PDF
Real World Lessons Using Lean UX (Workshop)
Bill Scott
 
PDF
Kicking Up the Dust with Node JS
Bill Scott
 
PDF
Lean Engineering. Applying Lean Principles to Building Experiences
Bill Scott
 
PDF
Enabling Lean with Tech: lessons learned applying lean at paypal
Bill Scott
 
PDF
The Lean Tech Stack
Bill Scott
 
PDF
Lean UX Anti-Patterns
Bill Scott
 
PDF
Designing With Lenses (UxLx, CHIFOO, BigD)
Bill Scott
 
PDF
Designing for Interesting Moments
Bill Scott
 
PDF
Bringing Design to Life
Bill Scott
 
PDF
Designing Web Interfaces Book - O'Reilly Webcast
Bill Scott
 
PDF
Designing Web Interfaces
Bill Scott
 
Keeping a Startup Ethos
Bill Scott
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bill Scott
 
Lean Engineering: How to make Engineering a full Lean UX partner
Bill Scott
 
Bringing Change to Life
Bill Scott
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
Bill Scott
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
Bill Scott
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
Bill Scott
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Bill Scott
 
Anti-Patterns that Stifle Lean UX Teams
Bill Scott
 
Real World Lessons Using Lean UX (Workshop)
Bill Scott
 
Kicking Up the Dust with Node JS
Bill Scott
 
Lean Engineering. Applying Lean Principles to Building Experiences
Bill Scott
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Bill Scott
 
The Lean Tech Stack
Bill Scott
 
Lean UX Anti-Patterns
Bill Scott
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Bill Scott
 
Designing for Interesting Moments
Bill Scott
 
Bringing Design to Life
Bill Scott
 
Designing Web Interfaces Book - O'Reilly Webcast
Bill Scott
 
Designing Web Interfaces
Bill Scott
 
Ad

Recently uploaded (20)

PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
CIFDAQ
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
Encapsulation theory and applications.pdf
gurumoop
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Teaching material agriculture food technology
LiaRayya
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
A Presentation on Artificial Intelligence
memembruh336
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
CIFDAQ's Market Insight: SEC Turns Pro Crypto
CIFDAQ
 

DHTML Prototyping: Silicon Valley Code Camp

  • 1. Interactive Prototyping with DHTML tips, techniques, tools, libraries and frameworks for rapid prototyping Bill Scott 2009.10.03
  • 6. Simple Interaction? Events... Page load. Mouse hover. Mouse down. Drag initiated. Drag leaves original location. Drag re- enters original location. Drag re-enters original location. Drag enters valid target. Drag exits valid target. Drag enters specific invalid target. Drag is over no specific target. Drag hovers over valid target. Drag hovers over invalid target. Drop accepted. Drop rejected. Drop on parent container. 16+
  • 7. Simple Interaction? Actors... Page. Cursor. Tool Tip. Drag Object. Drag Object’s Parent Container. Drop Target. 6+
  • 8. Actors Events 96 Interesting Moments
  • 9. interaction (n). mutual or reciprocal action; interacting
  • 12. Interaction is Nuanced flickr. inline edit y! teachers. drag & drop
  • 13. Interaction is Nuanced backpackit. contextual tools flickr. inline edit y! teachers. drag & drop
  • 14. Interaction is Nuanced backpackit. contextual tools flickr. inline edit y! teachers. drag & drop the gap. inline assistant
  • 16. Interaction is Nuanced the gap. inline assistant
  • 17. Interaction is Nuanced the gap. inline assistant microsoft live. paged scrolling
  • 18. Interaction is Nuanced the gap. inline assistant broadmoor hotel. one page checkout microsoft live. paged scrolling
  • 19. Devil is in the Details
  • 20. Devil is in the Details y! teachers. anti-pattern. hover & cover
  • 21. Devil is in the Details y! teachers. anti-pattern. hover & cover
  • 22. Devil is in the Details y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover - resolved
  • 23. Devil is in the Details y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover - resolved
  • 24. Devil is in the Details
  • 25. Devil is in the Details y! photos. anti-pattern. idiot boxes
  • 26. Devil is in the Details y! photos. anti-pattern. idiot boxes y! maps. anti-pattern. mouse trap
  • 27. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  • 28. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  • 29. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  • 30. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  • 31. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  • 32. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  • 35. Timing Concerns my yahoo!. version 1 my yahoo!. version 2
  • 36. Timing Concerns my yahoo!. version 1 my yahoo!. version 2 my yahoo!. version 3
  • 38. Advantages Start simple & add complexity Higher fidelity Living, evolving example Closer to final technical solution
  • 39. 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
  • 40. 100+ variations prototyped over 1 week Winnowed down between PMs, Design & Eng. Put before users the next week & again 2 weeks later
  • 41. 100+ variations prototyped over 1 week Winnowed down between PMs, Design & Eng. Put before users the next week & again 2 weeks later
  • 42. prototyping architecture thinking about it the right way
  • 45. Separation of Concerns (MVC) View Data
  • 46. Separation of Concerns (MVC) View Data Behavior
  • 50. Separation of Concerns View Data Behavior
  • 51. Separation of Concerns Structure View Data Behavior
  • 52. Separation of Concerns Layout Structure View Data Behavior
  • 53. Separation of Concerns Layout Structure View Style Data Behavior
  • 54. Prototyping Challenges Not surprisingly the challenges are within each concern Structure, Layout & Style Getting the page laid out correctly (enough) & quickly Behavior Adding interactivity to the page Data Populating the prototype with fake or semi-realistic data
  • 55. Layout & Style Putting everything where it should be as quickly as possible* *with minimal hacking
  • 56. It’s Not That Easy 14 IE 6 layout bugs
  • 57. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs
  • 58. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines
  • 59. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 8 major browsers
  • 60. 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
  • 61. 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
  • 62. This Should Not Be Hard... But It Is Confronted with many techniques Floats + Margins Slows prototyping float left float right Problem: Laying out against the flow margin-left margin-right Simple Margin All Floats Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quam float left float right massa, aliquam non, feugiat non, ullamcorper sed, eros. Nullam mattis float left ultrices lectus. Aenean dolor tortor, semper in, aliquam at, faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. All Floats w/ Nested float left Cum sociis natoque margin-left float left float right float right
  • 63. Box Model IE6 Quirks mode (and earlier IE) have different handling Use strict mode to eliminate this concern
  • 65. Understanding Floats Flow of block elements Flow of inline elements
  • 66. Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor float left sit amet, consectetur block adipiscing elit. Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. element Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, flows around faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis block above natoque Flow of inline elements
  • 67. Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor float left sit amet, consectetur block adipiscing elit. Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. element Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, flows around faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis block above natoque Flow of inline elements Floating block elements float left float left third block float left element wraps flow left to right
  • 68. Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor float left sit amet, consectetur block adipiscing elit. Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. element Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, flows around faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis block above natoque Flow of inline elements Floating block elements float left float left third block float left element wraps flow left to right Clearing floats float left float left flow left to right [clear] after clear, flow returns to vertical for blocks
  • 69. Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely 5 em A B is positioned relative to A 5 em 5 em (which is B positioned), not 5 em the document
  • 70. Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely 5 em A B is positioned relative to A 5 em 5 em (which is B positioned), not 5 em the document B positioned absolutely position: relative A B is positioned relative to A 5 em (again B positioned), not 5 em the document
  • 71. Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely B positioned absolutely 5 em no positioning specified A B is positioned A B is positioned relative to A relative to 5 em 5 em (which is document, not A B positioned), not (since it is not 5 em the document positioned) 5 em B 5 em B positioned absolutely position: relative A B is positioned relative to A 5 em (again B positioned), not 5 em the document
  • 72. Layout Techniques for Prototyping
  • 73. Layout Techniques for Prototyping Choose positioning over floats
  • 74. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  • 75. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  • 76. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  • 77. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  • 78. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  • 79. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system Use a CSS framework to simplify life
  • 80. CSS Frameworks Building on the work of others Hide complexity Simplify the layout process Express layout Define templates and/or grids Normalize browsers CSS Reset Handle IE Objections? Takes away the craftsmanship Non-semantic
  • 81. CSS Frameworks Elements CSS Frameworks CleverCSS WYMstyle: a CSS framework Tripoli Beta CSS Framework YAML CSS Framework ESWAT Web Project Framework YUI Grids CSS CwS CSS Framework Boilerplate CSS Framework My (not really mine) CSS Framework Blueprint CSS BlueTrip 960 Grid Schema Web Design Framework
  • 82. CSS Frameworks Elements CSS Frameworks CleverCSS WYMstyle: a CSS framework Tripoli Beta CSS Framework YAML CSS Framework ESWAT Web Project Framework YUI Grids CSS CwS CSS Framework Boilerplate CSS Framework My (not really mine) CSS Framework Blueprint CSS BlueTrip 960 Grid Schema Web Design Framework
  • 87. Blueprint CSS Framework Layout is specified 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.
  • 93. YUI Grid Cheat Sheet
  • 94. YUI Grid Cheat Sheet
  • 98. 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 flexible base number to work with You can also make Blueprint a 960 grid system as well
  • 99. 960 gs Fluid A derivative that supports fluid layout
  • 104. 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
  • 105. 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 "Big, Bold, and Ugly" A Paragraph Is a Paragraph List Mania Keep DIV elements to a minimum Use px for font-sizes (avoids nesting difficulties) Minimize selectors Extend objects by applying multiple classes to an element
  • 106. Behavior Making the page come alive* *as quickly as possible
  • 107. Anatomy of an Interaction
  • 108. Anatomy of an Interaction Page Element Target an element or elements for attaching events & behaviors.
  • 109. 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.
  • 110. 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.
  • 111. 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.
  • 112. 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 Blocks of logic, patterns, actions that Handler operate on elements. Behavior
  • 113. 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 fir e Events are the glue between the user and behaviors. They start behaviors. Behavior modify Event Blocks of logic, patterns, actions that Handler operate on elements. rm fo p er Behavior
  • 114. 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 fir e Events are the glue between the user and behaviors. They start behaviors. Behavior modify Event Blocks of logic, patterns, actions that Handler operate on elements. rm fo p er Behavior “Keep interaction, objects and behavior separate”
  • 115. Behavior Injection Tying behavior to elements in the markup tightly couples behavior (also non-semantic) Avoid onclick=”someAction()” Instead associate actions with matched elements
  • 116. Behavior Injection By rendering all panels hidden & showing with JS <form id="login" action=""> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </div> <!-- With Errors--> <div class=”errors”> <p class="error">Password doesn't match.</p> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </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="text" name="email"/></p> <input type="submit" value="Send New Password" /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
  • 117. Behavior Injection .noerrors, .errors, .forgotten: {display:none;} By rendering all panels hidden & showing with JS <form id="login" action=""> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </div> <!-- With Errors--> <div class=”errors”> <p class="error">Password doesn't match.</p> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </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="text" name="email"/></p> <input type="submit" value="Send New Password" /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
  • 118. Behavior Injection .noerrors, .errors, .forgotten: {display:none;} By rendering all panels hidden & showing with JS <form id="login" action=""> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </div> $(".errors").show(); <!-- With Errors--> <div class=”errors”> <p class="error">Password doesn't match.</p> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </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="text" name="email"/></p> <input type="submit" value="Send New Password" /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
  • 120. Behavior Injection: 960gs Fluid <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul>
  • 121. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul>
  • 122. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> toggle open/close tied to .box
  • 123. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> toggle open/close tied to .box menu behavior tied to .menu
  • 127. Anatomy of Self-Healing Delete DOM elements [X] DOM <LI>[X] oldmove.mov</LI> Element Events Click Event onClick (callback) Behaviors Fade Behavior Close
  • 128. Anatomy of Self-Healing Delete DOM elements [X] DOM <LI>[X] oldmove.mov</LI> Element Events Click Event onClick (callback) Behaviors Fade Behavior Close
  • 129. Anatomy of Self-Healing Delete DOM elements [X] DOM <LI>[X] oldmove.mov</LI> Element Events Click Event onClick (callback) Behaviors Fade Behavior Close
  • 130. Anatomy of Self-Healing Delete Element Behavior Event
  • 131. Anatomy of Self-Healing Delete Element Behavior Event
  • 132. 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 });
  • 133. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 134. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 135. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 136. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 137. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 138. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 139. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 140. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 141. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 142. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 143. Behaviors Animate. ColorAnimate. Fade. Move. Spotlight. Close. DragDrop. Hide. Open. Popup. ReplaceClass. Script. SetClass. SetStyle. Show. ToggleClass. ToggleOpenClose. Element ToggleShowHide. FetchHtml. SetHtml. Behavior Event
  • 144. 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
  • 145. Events Blur. Click. Dblclick. Focus. Keypress. Mousedown. Mousemove. Mouseout. Mouseover. Mouseup. Timer. Element Behavior Event
  • 146. 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
  • 147. 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
  • 148. 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
  • 149. 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.
  • 151. ClassBehaviors jQuery Library http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category <fieldset class="border"> <label for="myselect">Select Anything<em>*</em>:</label> <select id="myselect" name="myselect" class="linkedSelects id_myLinkedSelect"> <option value="">--- pick a type ---</option> <option value="./xml/linkedSelects_fruit.xml">Fruit</option> <option value="./xml/linkedSelects_vegetables.xml">Vegetables</option> <option value="./xml/linkedSelects_fish.xml">Fish</option> </select> <select id="myLinkedSelect" name="myLinkedSelect"> <option value="">--- pick a type first ---</option> </select> </fieldset>
  • 152. 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
  • 154. Greasemonkey + jQuery jquery code can be loaded for any web page allowing behaviors to be added
  • 155. Firebug Edit HTML For quick adding of html or modifying html during a prototype review Edit CSS Change behaviors, layout or style on the fly Layout issues Visualize the box model & page layout Manipulate Javascript Change logic, add behaviors, experiment & tweak
  • 156. 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 Specificity 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 to tweak & debug
  • 158. jQuery Data Binding jQuery.ajax(options) $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); Very quick way to bring in dynamic interface elements
  • 159. Use Public APIs Yahoo! Search Google Search Flickr images Google Maps
  • 160. Use JSON {"name": "Jack B. Nimble", "at large": true, "grade": "A", "level": 3} name Jack B. Nimble at large true grade A level 3
  • 161. JSON: Arrays ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] [ [0, -1, 0], [1, 0, 0], [0, 0, 1] ] 3x3 array
  • 162. JSON in jQuery jQuery.getJSON(url, [data], [callback]) $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); } );
  • 163. JSON Example $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; // only get 4 images }); } ); ({ "title": "Recent Uploads tagged cat", "link": "http://www.flickr.com/photos/tags/cat/", "description": "", "modified": "2009-03-09T02:00:41Z", "generator": "http://www.flickr.com/", "items": [ { "title": "birthday 89", "link": "http://www.flickr.com/photos/gulshan/3340193322/", "media": {"m":"http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpg"}, "date_taken": "2009-03-08T03:11:50-08:00", "description": "<p><a href="http://www.flickr.com/people/gulshan/">gulshan</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/gulshan/3340193322/" title= "birthday 89"><img src="http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpg" width="240" height="160" alt="birthday 89" /></a></p> ", "published": "2009-03-09T02:00:41Z", "author": "nobody@flickr.com (gulshan)", "author_id": "88283245@N00", "tags": "birthday party me brooklyn cat photobooth marcus 2009" },
  • 165. Use Dapper (Screen Scraping)
  • 166. Use Dapper (Screen Scraping)
  • 167. Use Dapper (Screen Scraping)
  • 168. Use Dapper (Screen Scraping)
  • 169. Use Dapper (Screen Scraping)
  • 170. Use Dapper (Screen Scraping)
  • 171. Prototyping Challenges View. Layout, Style & Structure Getting the page laid out correctly (enough) & quickly Behavior Adding interactivity to the page Data Populating the prototype with fake or semi-realistic data
  • 172. Resources Book: CSS:The Missing Manual http://css.maxdesign.com.au/floatutorial/ 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/
  • 173. 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 fluid) http://www.mostinspired.com/blog/wp-content/uploads/2009/rip/16_fluid_jquery/ http://honeyl.public.iastate.edu/blueprint/ http://code.google.com/p/css-boilerplate/ http://jdclayton.com/blueprints_compress_a_walkthrough.html
  • 174. 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://designinfluences.com/fluid960gs/ http://www.protoscript.com http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category http://joanpiedra.com/jquery/greasemonkey/ http://www.getfirebug.com/ http://particletree.com/features/a-designers-guide-to-prototyping-ajax/ http://json.org http://www.dapper.net/dapperDemo/ http://developer.yahoo.com/yql/ http://designingwebinterfaces.com/resources/interestingmomentsgrid.xls