SlideShare a Scribd company logo
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
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.
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

Similar to DHTML Prototyping: Silicon Valley Code Camp

50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)
Cristiano Caetano
 
Complexinterfaces
ComplexinterfacesComplexinterfaces
Complexinterfaces
Bojhan
 
Managing Databases In A DevOps Environment 2016
Managing Databases In A DevOps Environment 2016Managing Databases In A DevOps Environment 2016
Managing Databases In A DevOps Environment 2016
Robert Treat
 
Designing with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern LibraryDesigning with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern Library
goodfriday
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
uxpin
 
Prototypes, Prototypes, Prototypes
Prototypes, Prototypes, PrototypesPrototypes, Prototypes, Prototypes
Prototypes, Prototypes, Prototypes
Shane Morris
 
Think like a developer debugging seo - be wizard 2013 rimini
Think like a developer  debugging seo - be wizard 2013 riminiThink like a developer  debugging seo - be wizard 2013 rimini
Think like a developer debugging seo - be wizard 2013 rimini
David Sottimano
 
Solving Problems: An Agile Organization Approach
Solving Problems:  An Agile Organization ApproachSolving Problems:  An Agile Organization Approach
Solving Problems: An Agile Organization Approach
toriat123
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
Jared Faris
 
Designing Rich Web Experience
Designing Rich Web ExperienceDesigning Rich Web Experience
Designing Rich Web Experience
interactionpatterns.org
 
All Day DevOps 2017 - There is No Root Cause
All Day DevOps 2017 - There is No Root CauseAll Day DevOps 2017 - There is No Root Cause
All Day DevOps 2017 - There is No Root Cause
Matthew Boeckman
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
Chad Currie
 
Finding the Center
Finding the CenterFinding the Center
Finding the Center
Andrew Heaton
 
Best Practices in Automating Business Processes
Best Practices in Automating Business ProcessesBest Practices in Automating Business Processes
Best Practices in Automating Business Processes
Rhia Wieclawek
 
Metrics As A Learn And Change Agent
Metrics As A Learn And Change AgentMetrics As A Learn And Change Agent
Metrics As A Learn And Change Agent
Gaetano Mazzanti
 
L'illusione dell'ortogonalità
L'illusione dell'ortogonalitàL'illusione dell'ortogonalità
L'illusione dell'ortogonalità
Alberto Brandolini
 
RedisConf17 - Observability and the Glorious Future
RedisConf17 - Observability and the Glorious FutureRedisConf17 - Observability and the Glorious Future
RedisConf17 - Observability and the Glorious Future
Redis Labs
 
Morris prototyping - oredev - share
Morris   prototyping - oredev - shareMorris   prototyping - oredev - share
Morris prototyping - oredev - share
Shane Morris
 
AgileLunch Meetup - Listen to your Board
AgileLunch Meetup - Listen to your BoardAgileLunch Meetup - Listen to your Board
AgileLunch Meetup - Listen to your Board
Fernando Cuenca
 
Principles of user interface design
Principles of user interface designPrinciples of user interface design
Principles of user interface design
vivekvelvan
 

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

50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)
 
Complexinterfaces
ComplexinterfacesComplexinterfaces
Complexinterfaces
 
Managing Databases In A DevOps Environment 2016
Managing Databases In A DevOps Environment 2016Managing Databases In A DevOps Environment 2016
Managing Databases In A DevOps Environment 2016
 
Designing with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern LibraryDesigning with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern Library
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
 
Prototypes, Prototypes, Prototypes
Prototypes, Prototypes, PrototypesPrototypes, Prototypes, Prototypes
Prototypes, Prototypes, Prototypes
 
Think like a developer debugging seo - be wizard 2013 rimini
Think like a developer  debugging seo - be wizard 2013 riminiThink like a developer  debugging seo - be wizard 2013 rimini
Think like a developer debugging seo - be wizard 2013 rimini
 
Solving Problems: An Agile Organization Approach
Solving Problems:  An Agile Organization ApproachSolving Problems:  An Agile Organization Approach
Solving Problems: An Agile Organization Approach
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
 
Designing Rich Web Experience
Designing Rich Web ExperienceDesigning Rich Web Experience
Designing Rich Web Experience
 
All Day DevOps 2017 - There is No Root Cause
All Day DevOps 2017 - There is No Root CauseAll Day DevOps 2017 - There is No Root Cause
All Day DevOps 2017 - There is No Root Cause
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
Finding the Center
Finding the CenterFinding the Center
Finding the Center
 
Best Practices in Automating Business Processes
Best Practices in Automating Business ProcessesBest Practices in Automating Business Processes
Best Practices in Automating Business Processes
 
Metrics As A Learn And Change Agent
Metrics As A Learn And Change AgentMetrics As A Learn And Change Agent
Metrics As A Learn And Change Agent
 
L'illusione dell'ortogonalità
L'illusione dell'ortogonalitàL'illusione dell'ortogonalità
L'illusione dell'ortogonalità
 
RedisConf17 - Observability and the Glorious Future
RedisConf17 - Observability and the Glorious FutureRedisConf17 - Observability and the Glorious Future
RedisConf17 - Observability and the Glorious Future
 
Morris prototyping - oredev - share
Morris   prototyping - oredev - shareMorris   prototyping - oredev - share
Morris prototyping - oredev - share
 
AgileLunch Meetup - Listen to your Board
AgileLunch Meetup - Listen to your BoardAgileLunch Meetup - Listen to your Board
AgileLunch Meetup - Listen to your Board
 
Principles of user interface design
Principles of user interface designPrinciples of user interface design
Principles of user interface design
 

More from Bill Scott

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

More from Bill Scott (20)

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

Recently uploaded

Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
FODUU
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
Techgropse Pvt.Ltd.
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 

Recently uploaded (20)

Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 

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
  • 4.
  • 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.
  • 88.
  • 89.
  • 90.
  • 91.
  • 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