SlideShare a Scribd company logo
1 of 118
Download to read offline
Prototyping the
Rich Web Experience
                                   Bill Scott
                      Yahoo! Ajax Evangelist
                        b.scott@yahoo.com



                                                1
stuff i’ve done




                  2
stuff i’ve done




                  2
stuff i’ve done




                  2
stuff i’ve done




                  2
prototyping
• Have been involved with prototyping for a number of
 years

• Last summer wrote a quick dragdrop proto library
 that was based on CSS class names and associating
 behavior to these classes (‘dragme’, ‘drophere’)
  •   Goal was to make it easy for designers to start prototyping
  •   However it was not possible to provide enough logic without
      resorting to writing code
  •   Been planning to get back to the idea for a year.

• This got me thinking about simplifying the experience
 of prototyping with dhtml/ajax


                                                                    3
what i really want




take a rough prototype




                         4
what i really want




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what i really want




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what i really want




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
                                                      4
what we will discuss
• quick overview of common design patterns
 (behaviors)

• quick survey of techniques to prototype a rich web
 experience

• dive into protoscript and discuss how it can be used
 to sprinkle behaviors into web pages

• look at similar techniques emerging (jQuery, css
 behaviors, DED | Chain, etc.



                                                         5
patterns
(common interaction behaviors)




                                 6
ria patterns
       invitation. cursor invitation. hover invitation. tooltip invitation. page
   invitation. drop invitation. available. selected. auto complete. live suggest.
        refining search. dynamic filtering. live search. on-demand scrolling.
     deferred content loading. fresh content. on-demand content. periodic
      refresh. resizable modules. scrolling modules. hover detail. narrowing
  actions. narrowing choices. auto form fill. in-place drill down. dependent
     choices. look before you leap. drag and drop. drag and drop modules.
     drag and drop objects. persistant portals. in page edit. inline text edit.
    inline custom edit. direct state edit. rating an object. inline custom edit.
     inline tag edit. popup custom edit. grid cell edit. slide out custom edit.
       module configure. module flip configure. module inline configure.
    module slide out configure. module faceplate. expandable content. in-
      context tools. in-context links. in-context hover menu. silent submit.
   remembered collection. auto save. remembered preferences. hover spy.
      inline assistant. inline validation. validate then suggest. indicator. busy
     indicator. progress indicator. inline status. in-context busy. cursor busy.
  opacity fade. high contrast. balloon error tip. dynamic goal. opacity focus.
  detail zoom. lightbox. transition. brighten. cross-fade. dim. expand. fade-in.
               fade-out. flip. move. self-heal. collapse. slide. animate.

                                                                                    7
8
patterns




           9
patterns




pattern. in-page action.




                           9
patterns




pattern. in-page action.



                           pattern. in-context expand.




                                                         9
patterns




pattern. in-page action.

                                                         pattern. inline editing.

                           pattern. in-context expand.




                                                                                    9
patterns




pattern. in-page action.

                                                         pattern. inline editing.

                           pattern. in-context expand.




pattern. drag & drop.

                                                                                    9
patterns




pattern. in-page action.

                                                               pattern. inline editing.

                           pattern. in-context expand.




                                     pattern. hover details.
pattern. drag & drop.

                                                                                          9
patterns




pattern. in-page action.

                                                               pattern. inline editing.

                           pattern. in-context expand.




                                                                   pattern. in-context tools.

                                     pattern. hover details.
pattern. drag & drop.

                                                                                                9
patterns




           10
patterns




pattern. remembered collections.




                                   10
patterns




pattern. remembered collections.



                                   pattern. on-demand scrolling.

                                                                   10
patterns




                                                                   pattern. auto complete.




pattern. remembered collections.



                                   pattern. on-demand scrolling.

                                                                                       10
patterns




           11
patterns


pattern. busy indicator.




                           11
patterns


pattern. busy indicator.




pattern. lightweight popup + lightbox.


                                         11
patterns


pattern. busy indicator.




pattern. lightweight popup + lightbox.   pattern. fade transition + self-healing transitio


                                                                                      11
interesting moments




                      12
interesting moments
                                                                                                                          Drag and Drop Modules - Interesting Moments Grid

                                                                                         ID: Bill Scott & Eric Miraglia                                                                                                                            Date:
                        Currently on beta.my.yahoo.com                                                                                                                                                                                                                             Nov-0

                Mouse                                                                                         Drag Over                                 Drag Over                         Drag Over                                  Drop                             Drop
                Hover                     Mouse Down                    Drag Initiated                       Valid Target                             Invalid Target                   Parent Container                            Accepted                         Rejected

    Cursor

              CSS Move cursor Move cursor
                           CSS                            CSS Move cursor                     CSS Move cursor                            CSS Move cursor                   CSS Move cursor                            Normal Cursor                        Normal Cursor
   Tool Tip



Drag Object




                                                                                                                                                                                                                      Modules animates into the area       Modules animates back to
                           Full Opacity                   Reduced Opacity                     Reduced Opacity                            Reduced Opacity & Invalid Badge   Reduced Opacity                            just below insertion bar             the home area




                                                                                                                                                                                                                      Module comes to rest in new          Module comes back to rest
                                                                                                                                                                                                                      area                                 at full opacity




                                                                                                                                                                                                                      Modules slide up in a self-healing
                                                                                                                                                                                                                      transition to close hole

Drop Target




                                                                                                                                                                                                                       Insertion bar is removed as first   Insertion bar is removed
                           No insertion bar, just a gap   No insertion bar, just a gap        Insertion bar showing where it will drop   No insertion bar, just a gap      No insertion bar, just a gap & original holeframe of animation                  as first frame of animation




                                                                                                                                                                                                                                                                                12
Date:                                                  Nov-05

                                             Drag Over                                         Drag Over                                                            Drop                                          Drop                                            Drop On


               interesting moments         Invalid Target                                   Parent Container                                                      Accepted                                      Rejected                                      Parent Container



                    CSS Move cursor                                             CSS Move cursor                                              Normal Cursor                                      Normal Cursor                                      Normal Cursor



                                                                                                                             Drag and Drop Modules - Interesting Moments Grid

                                                                                            ID: Bill Scott & Eric Miraglia                                                                                                                            Date:
                         Currently on beta.my.yahoo.com                                                                                                                                                                                                                                Nov-0

                 Mouse                                                                                           Drag Over                                 Drag Over                         Drag Over                                  Drop                              Drop
                 Hover                     Mouse Down                     Drag Initiated                        Valid Target                             Invalid Target                   Parent Container                            Accepted                          Rejected

     Cursor

               CSS Move cursor Move cursor
                            CSS                             CSS Move cursor                      CSS Move cursor                            CSS Move cursor                   CSS Move cursor                            Normal Cursor                         Normal Cursor
    Tool Tip



Drag Object

                                                                                                                                             Modules animates into the area                     Modules animates back to                           Modules animates back t
                    Reduced Opacity & Invalid Badge                             Reduced Opacity                                              just below insertion bar                           the home area                                      the home area



                                                                                                                                                                                                                         Modules animates into the area        Modules animates back to
                            Full Opacity                    Reduced Opacity                      Reduced Opacity                            Reduced Opacity & Invalid Badge   Reduced Opacity                            just below insertion bar              the home area




                                                                                                                                             Module comes to rest in new                        Module comes Module comesrest in Modules comes back to rest
                                                                                                                                                                                                                back to to rest new      Module comes back to

                                                                                                                                                                                                at full opacity area             rest at at full opacity
                                                                                                                                             area                                                                                         full opacity




                                                                                                                                                                                                                         Modules slide up in a self-healing
                                                                                                                                                                                                                         transition to close hole

 Drop Target



                                                                                                                                             Modules slide up in a self-healing
                                                                                                                                             transition to close hole
                                                                                                                                                                                                                          Insertion bar is removed as first    Insertion bar is removed
                            No insertion bar, just a gap    No insertion bar, just a gap         Insertion bar showing where it will drop   No insertion bar, just a gap      No insertion bar, just a gap & original holeframe of animation                   as first frame of animation




                                                                                                                                                                                                                                                   Insertion bar is removed
                                                                                                                            Insertion bar is removed as first                                   Insertion bar is removed                           as first frame of
it will drop        No insertion bar, just a gap                                No insertion bar, just a gap & original holeframe of animation                                                  as first frame of animation                        animation


                                                                                                                                                                                                                                                                                    12
interesting moments for drag drop




                                    13
non-dhtml
prototyping techniques




                         14
challenge of interesting moments
                       Wireframing AJAX is a bitch. The best our agency
                       has come up with is the Chuck Jones approach:
                       draw the key frames. Chuck Jones had an
                       advantage: he knew what Bugs Bunny was going
                       to do. We have to determine all the things a user
                       might do, and wireframe the blessed moments of
                       each possibility.
                       - Jeffrey Zeldman
                       http://www.alistapart.com/articles/web3point0/



    Blessed Moments = Microstates = Interesting Moments
•
    behavior is not static
    - Multiple states need to be captured
    - Happens within a context
    - Not suited for wireframes


                                                                           15
using keyframes




                  16
using keyframes




                  16
prototyping with visio
    Changes in state placed in different layers
•

    Storyboard steps toggle visibility of associated layers
•

    Each storyline serves as a use case in the wireframe
•




                  Source: http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio


                                                                                                              17
prototyping with visio
    Changes in state placed in different layers
•

    Storyboard steps toggle visibility of associated layers
•

    Each storyline serves as a use case in the wireframe
•




                  Source: http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio


                                                                                                              17
prototyping with keynote/powerpoint
    Slides make major steps
•

    Builds used to bring in transitions, animations
•




                                                      18
19
prototyping with photoshop
    Easy to create from a series of images
•

    Images can be created by hand or from other apps
•




                                                       20
animations from screencasts
Start with screencast (SnapZPro/SnagIt)
Turn movie into animated GIF (Adobe ImageReady)




                                                  21
other approaches
Flash
Flex
iRise (www.irise.com) $$$
Axure (www.axure.com)
Interactive PDFs
Fireworks + PDF
Powerpoint

DHTML




                            22
dhtml
prototyping




              23
prototyping with DHTML
• Benefits
  •   Can start simple and layer in complexity
  •   Works well across different teams (design to code)
  •   Technology the same or similar to final implementation
  •   Most capable to approximate final result
  •   Living example

• Disadvantages
  •   Requires technical savvy
  •   Bugs can suck down time
  •   Too much time spent ‘messing with code’
  •   Hard to extract into documentation




                                                              24
dhtml prototyping skills/techniques
• Keep structure, style and logic separate
  •   Avoid adding onclick handlers in the HTML (unobtrusive)
  •   Avoid any direct styles or html style tags (font, etc.)


• Use style class switching for visual changes
• Use CSS to simulate most mouse hover behavior
• Use innerHTML for content changes
• Understand when to use a class vs. id
• Use CSS query libraries for referencing interface parts
  •   CSS selector syntax allows non-intrusive behavior injection
                                                                    25
dhtml prototyping skills/techniques
• Use anchors as basic navigation/action hooks
• Use background images in CSS with style switching
• Use a grid layout system
  •   YUI Grid

• Use Firebug
• Understand CSS Selectors
  •   Ext, jQuery, Dojo, Mootoos, Prototype, cssQuery()

• Use JSON syntax (options)

                                                          26
underlying desire for protoscript
• address the conceptual phase of interface development
 -- think “interaction theme”
 (free from solving production issues)

• express an interaction as a configuration
 (no code; declarative approach)

• dynamically insert interaction themes (behaviors) to any
 web page
 (allows experimentation)

• create a gui tool for configuring & exploring interactions

                                                              27
protoscript approach
• JSON used to express interaction theme to
 express relationship between dom elements,
 behaviors, attributes, and callbacks

• jQuery CSS Selector syntax for dom elements
• Chain dependent behavior as well as parallel behavior
 with JSON syntax

• Simple to add behaviors (class with 2 methods)
• Focus is on prototyping

                                                          28
Demo
http://protoscript.com/demos.php




                                   29
simple example




Simple Click, Fade, Close
(self-healing delete)




                            30
sprinkling in behaviors




                          31
anatomy of an interaction
DOM elements
                                             DOM
 Target an element or elements              Element
 for attaching events & behaviors.


Events
 Events are the glue between the user and              Event
 behaviors. They start behaviors.


Behaviors
 Blocks of logic, patterns, actions that    Behavior
 operate on elements.




                                                               32
anatomy of self-healing delete

                                  DOM
                                 Element




                                            Event




                                 Behavior




                                                    33
anatomy of self-healing delete

                                  DOM
                                 Element




                                            Event




                                 Behavior




                                                    33
anatomy of self-healing delete
DOM elements
                                   DOM
 [X]                              Element
 <LI>[X] oldmove.mov</LI>



                                             Event




                                  Behavior




                                                     33
anatomy of self-healing delete
DOM elements
                                   DOM
 [X]                              Element
 <LI>[X] oldmove.mov</LI>


Events
 Click                                       Event
 onClick (callback)



                                  Behavior




                                                     33
anatomy of self-healing delete
DOM elements
                                   DOM
 [X]                              Element
 <LI>[X] oldmove.mov</LI>


Events
 Click                                       Event
 onClick (callback)


Behaviors
 Fade                             Behavior
 Close




                                                     33
protoscript code




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                34
selecting dom elements (targeting)   Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                35
selecting dom elements (targeting)   Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                35
selecting dom elements (targeting)   Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                35
selecting dom elements (targeting)   Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                35
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                36
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                36
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                36
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                36
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                36
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});

                                                36
selector syntax                                                  Element



Consult jQuery docs:
 http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors
If you are setting up your own prototypes, stick with
class and identifier
 .my-class-name
 #my-id-name
Other useful examples
 a:contains(Click Here)
 .my-class-name #my-id-under-there
 #my-specific-container .my-items
Consult CSS-1, CSS-2, CSS-3 and XPath                            Behavior




                                                                  Event



                                                                            37
behaviors                               Behavior




       Animate. ColorAnimate. Fade.
           Move. Spotlight. Close.
           DragDrop. Hide. Open.
         Popup. ReplaceClass. Script.
          SetClass. SetStyle. Show.
       ToggleClass. ToggleOpenClose.
        ToggleShowHide. FetchHtml.
                 SetHtml.                Event




                                        Element



                                                   38
behavior demos                                     Behavior



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/




                                                    Event




                                                   Element



                                                              39
behavior attributes                                         Behavior


Behaviors may supply attributes for configuring the
behavior
Where possible if an underlying YUI component or
utility has a config object, this is exposed
EXAMPLE FROM Popup BEHAVIOR (bold denotes from Panel cfg)
   close: true,              width: '300px',
   draggable: true,          height: null,
   underlay: 'shadow',       zIndex: null,
   model: false,             contraintoviewport: false,
   visible: true,            iframe: false,
   effect: null,             id: 'popup_panel',
   monitorresize: true,      hd: 'Panel Title',
   x: null,                  bd: 'This is the body',         Event
   y: null,                  ft: null
   xy: null,
   context: null,
   fixedcenter: true,                                       Element



                                                                       40
plug-in behavior                                               Behavior


Protoscript core is independent of any single toolkit
 selector is a plugin. default set uses jQuery
 behavior set is plugged in. default set uses YUI.
 ProtoScript.Core.registerBehaviorSet($, YAHOO.protoscript);
 (yui-proto.js)



You are free to create your own behavior sets or plug in
other selector technologies
 Example: Mootools selector & behaviors
 ProtoScript.Core.registerBehaviorSet($ES, MooBehaviors);
 (moo-proto.js)


You can also add behaviors to the default set                   Event




                                                               Element



                                                                          41
peek under the hood of a behavior                                                  Behavior


YAHOO.protoscript.Show = function (behaviorName, behaviorCfg) {
	

 this.init(behaviorName, behaviorCfg);
};
YAHOO.protoscript.Show.prototype = {	

	

 defaultCfg : {
	

 },
	

	

 init: function(behaviorName, behaviorCfg) {
	

 	

 this.name = behaviorName;
	

 	

 this.cfg = ProtoScript.Core.applyConfig(this.defaultCfg, behaviorCfg);
	

 },
	

	

 action: function(currScope) {
	

 	

 YAHOO.util.Dom.setStyle(currScope.elems, 'visibility', 'visible');
	

 	

 if(this.cfg.onShow) {
	

 	

 	

 ProtoScript.Core.callBehaviors(this.cfg.onShow, currScope);
	

 	

 }
	

 }
};


                                                                                    Event
'Show' behavior

                                                                                   Element



                                                                                              42
adding a behavior (to default YUI set)                                                  Behavior


1. Add behavior to YAHOO.protoscript namespace
2. In init store name  apply config parameters
3. In action put your behavior logic
 The action performs the behavior
 action(currScope)
   currScope.elems: list of elems resolved from the current target scope
   currScope.idx: if multiple elems, the index into the active element for this action
   currScope.pseudoElems: some behaviors set dynamic elements (like $drag, $drop in DragDrop
   behavior.

4. For any interesting moments, call
                                            to process the callback
 ProtoScript.Core.callBehaviors

5. Add attributes as needed (in your defaultCfg)                                         Event



6. Start using it in your scripts
                                                                                        Element



                                                                                                   43
events                                     Event




          Blur. Click. Dblclick. Focus.
           Keypress. Mousedown.
           Mousemove. Mouseout.
         Mouseover. Mouseup. Timer.

                                          Element




                                          Behavior



                                                     44
events are actually behaviors                                                       Event

YAHOO.protoscript.Click = function(behaviorName, behaviorCfg) {
	

 this.init(behaviorName, behaviorCfg);
};
YAHOO.protoscript.Click.prototype = {
	

 defaultCfg : {},
	

 init: function(behaviorName, behaviorCfg) {
	

 	

 this.name = behaviorName;
	

 	

 this.cfg = ProtoScript.Core.applyConfig(this.defaultCfg, behaviorCfg);
	

 },
	

 action: function(currScope) { YAHOO.protoscript.Trigger(this.cfg,
currScope, 'click');}
};


'Click' behavior




                                                                                   Element




                                                                                   Behavior



                                                                                              45
callbacks                                                       Event




             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.
             onToggleOpenClose. onToggleShowHide.
                  onSuccess. onFailure. onSetHtml.
                                                               Element




                                                               Behavior



                                                                          46
callbacks are interesting moments




                                    47
callbacks are invoked in behaviors                                              Event

YAHOO.protoscript.Open = function (behaviorName, behaviorCfg) {
	

 this.init(behaviorName, behaviorCfg);
};
YAHOO.protoscript.Open.prototype = {
	

 defaultCfg : {
	

 },

	

   init: function(behaviorName, behaviorCfg) {
	

   	

 this.name = behaviorName;
	

   	

 this.cfg = ProtoScript.Core.applyConfig(
                                        this.defaultCfg, behaviorCfg);
	

   },
	

	

   action: function(currScope) {
	

   	

 YAHOO.util.Dom.setStyle(currScope.elems, 'display', 'block');
	

   	

 if(this.cfg.onOpen) {
	

   	

 	

 ProtoScript.Core.callBehaviors(this.cfg.onOpen, currScope);
	

   	

 }
	

   }
};

                                                                               Element
'Open' behavior invoking onOpen

                                                                               Behavior



                                                                                          48
Bookmarklet*




               *humble beginnings


                                    49
50
51
adding protoscript to your page




http://protoscript.com/downloads.php
                                       52
syntax
$proto(selector, interaction)
where:
selector is the jQuery selector syntax
interaction is a configuration object (JSON) describing the interaction
$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
    onClick: {
      Fade: {
        target: '#multiple li',
        opacity: {to: 0},
        onComplete: {Close : {} }
      }
    }
  }
});


                                                                         53
syntax
$proto(config)
single config object defines an interaction
convenient for passing interactions around or saving to config files
$proto(
{
  'span:contains([X])': {
    SetStyle: {cursor:'pointer'},
    Click: {
      onClick: {
        Fade: {
          target: '#multiple li',
          opacity: {to: 0},
          onComplete: {Close : {} }
        }
      }
    }
  }
});


                                                                     54
syntax
$proto(config)
single config object defines an interaction
convenient for passing interactions around or saving to config files
var cfg = {'span:contains([X])': {
     SetStyle: {cursor:'pointer'},
     Click: {
       onClick: {
         Fade: {
           target: '#multiple li',
           opacity: {to: 0},
           onComplete: {Close : {} }
         }
       }
     }
   }
};
$proto(cfg);



                                                                     55
0.1 beta
• Live at http://protoscript.com
  •   Started it last month
  •   reference implementation YUI + jQuery
  •   31 behaviors (including events)
  •   40+ live examples
  •   full wiki site with all behaviors documented (docs.protoscript.com)


• Open source
  •   Code is at Google Code. Send me email if you want to participate
      will get you acces to SVN trunk
  •   BSD license


• Bookmarklet
  •   Just hack to start experimenting with GUI
  •   Combined with firebug, works ok
  •   Right now best on Firefox
                                                                            56
next steps
• 'You' write lots of behaviors
  •   Wiki for docs
  •   Google code for new behaviors  behavior sets

• New GUI tool
  •   Most likely extend Firebug
  •   Combine 'inspector' with behavior wizard to inject behaviors
  •   Persist configurations for pages; allow re-load


• Flesh out behavior self-publishing
  •   Will add spec on how to make behavior publish itself to a GUI tool




                                                                           57
Animate
                                 ColorAnimate
lego-style interaction builder   Fade
                                 Move
                                 Spotlight
                                 Close
                                 DragDrop
                                 Hide
                                 Open
                                 Popup
                                 ReplaceClass
                                 Script
                                 SetClass
                                 SetStyle
                                 Show
                                 ToggleClass
                                 ToggleOpenClose
                                 ToggleShowHide
                                 FetchHtml
                                 SetHtml
                                 Blur
                                 Click
                                 DblClick
                                 Focus
                                 Keypress
                                 Mousedown
                                 Mousemove
                                 Mouseout
                                 Mouseover
                                 Mouseup
                                 Timer
                                                   58
Animate
                                              ColorAnimate
lego-style interaction builder                Fade
                                              Move
                                              Spotlight
                                              Close
                                              DragDrop
 #avatar              + behavior   edit [x]
                                              Hide
                                              Open
                                              Popup
                                              ReplaceClass
                                              Script
                                              SetClass
                                              SetStyle
                                              Show
                                              ToggleClass
                                              ToggleOpenClose
                                              ToggleShowHide
                                              FetchHtml
                                              SetHtml
                                              Blur
                                              Click
                                              DblClick
                                              Focus
                                              Keypress
                                              Mousedown
                                              Mousemove
                                              Mouseout
                                              Mouseover
                                              Mouseup
                                              Timer
                                                                58
Animate
                                                      ColorAnimate
lego-style interaction builder                        Fade
                                                      Move
                                                      Spotlight
                                                      Close
                                                      DragDrop
 #avatar                     + behavior    edit [x]
                                                      Hide
 |_
      Click        + callback + behavior   edit [x]
                                                      Open
                                                      Popup
                                                      ReplaceClass
                                                      Script
                                                      SetClass
                                                      SetStyle
                                                      Show
                                                      ToggleClass
                                                      ToggleOpenClose
                                                      ToggleShowHide
                                                      FetchHtml
                                                      SetHtml
                                                      Blur
                                                      Click
                                                      DblClick
                                                      Focus
                                                      Keypress
                                                      Mousedown
                                                      Mousemove
                                                      Mouseout
                                                      Mouseover
                                                      Mouseup
                                                      Timer
                                                                        58
Animate
                                                      ColorAnimate
lego-style interaction builder                        Fade
                                                      Move
                                                      Spotlight
                                                      Close
                                                      DragDrop
 #avatar                     + behavior    edit [x]
                                                      Hide
 |_
      Click        + callback + behavior   edit [x]
                                                      Open
                                                      Popup
       Modifier:
                                                      ReplaceClass
       Delay:
                                                      Script
                                                      SetClass
                                           OK

                                                      SetStyle
                                                      Show
                                                      ToggleClass
                                                      ToggleOpenClose
                                                      ToggleShowHide
                                                      FetchHtml
                                                      SetHtml
                                                      Blur
                                                      Click
                                                      DblClick
                                                      Focus
                                                      Keypress
                                                      Mousedown
                                                      Mousemove
                                                      Mouseout
                                                      Mouseover
                                                      Mouseup
                                                      Timer
                                                                        58
Animate
                                                      ColorAnimate
lego-style interaction builder                        Fade
                                                      Move
                                                      Spotlight
                                                      Close
                                                      DragDrop
 #avatar                     + behavior    edit [x]
                                                      Hide
 |_
      Click        + callback + behavior   edit [x]
                                                      Open
                                                      Popup
                                                      ReplaceClass
                                                      Script
                                                      SetClass
                                                      SetStyle
                                                      Show
                                                      ToggleClass
                                                      ToggleOpenClose
                                                      ToggleShowHide
                                                      FetchHtml
                                                      SetHtml
                                                      Blur
                                                      Click
                                                      DblClick
                                                      Focus
                                                      Keypress
                                                      Mousedown
                                                      Mousemove
                                                      Mouseout
                                                      Mouseover
                                                      Mouseup
                                                      Timer
                                                                        58
Animate
                                                        ColorAnimate
lego-style interaction builder                          Fade
                                                        Move
                                                        Spotlight
                                                        Close
                                                        DragDrop
 #avatar                       + behavior    edit [x]
                                                        Hide
 |_
      Click          + callback + behavior   edit [x]
                                                        Open
      |_
           onClick                                      Popup
                               + behavior    edit [x]

                                                        ReplaceClass
                                                        Script
                                                        SetClass
                                                        SetStyle
                                                        Show
                                                        ToggleClass
                                                        ToggleOpenClose
                                                        ToggleShowHide
                                                        FetchHtml
                                                        SetHtml
                                                        Blur
                                                        Click
                                                        DblClick
                                                        Focus
                                                        Keypress
                                                        Mousedown
                                                        Mousemove
                                                        Mouseout
                                                        Mouseover
                                                        Mouseup
                                                        Timer
                                                                          58
Animate
                                                          ColorAnimate
lego-style interaction builder                            Fade
                                                          Move
                                                          Spotlight
                                                          Close
                                                          DragDrop
 #avatar                         + behavior    edit [x]
                                                          Hide
 |_
      Click            + callback + behavior   edit [x]
                                                          Open
      |_
           onClick                                        Popup
                                 + behavior    edit [x]

                                                          ReplaceClass
           |_
                Fade   + callback + behavior   edit [x]
                                                          Script
                                                          SetClass
                                                          SetStyle
                                                          Show
                                                          ToggleClass
                                                          ToggleOpenClose
                                                          ToggleShowHide
                                                          FetchHtml
                                                          SetHtml
                                                          Blur
                                                          Click
                                                          DblClick
                                                          Focus
                                                          Keypress
                                                          Mousedown
                                                          Mousemove
                                                          Mouseout
                                                          Mouseover
                                                          Mouseup
                                                          Timer
                                                                            58
Animate
                                                                    ColorAnimate
lego-style interaction builder                                      Fade
                                                                    Move
                                                                    Spotlight
                                                                    Close
                                                                    DragDrop
 #avatar                                   + behavior    edit [x]
                                                                    Hide
 |_
      Click                      + callback + behavior   edit [x]
                                                                    Open
      |_
           onClick                                                  Popup
                                           + behavior    edit [x]

                                                                    ReplaceClass
           |_
                Fade             + callback + behavior   edit [x]
                                                                    Script
                 |_
                    onComplete             + behavior    edit [x]
                                                                    SetClass
                                                                    SetStyle
                                                                    Show
                                                                    ToggleClass
                                                                    ToggleOpenClose
                                                                    ToggleShowHide
                                                                    FetchHtml
                                                                    SetHtml
                                                                    Blur
                                                                    Click
                                                                    DblClick
                                                                    Focus
                                                                    Keypress
                                                                    Mousedown
                                                                    Mousemove
                                                                    Mouseout
                                                                    Mouseover
                                                                    Mouseup
                                                                    Timer
                                                                                      58
Animate
                                                                    ColorAnimate
lego-style interaction builder                                      Fade
                                                                    Move
                                                                    Spotlight
                                                                    Close
                                                                    DragDrop
 #avatar                                   + behavior    edit [x]
                                                                    Hide
 |_
      Click                      + callback + behavior   edit [x]
                                                                    Open
      |_
           onClick                                                  Popup
                                           + behavior    edit [x]

                                                                    ReplaceClass
           |_
                Fade             + callback + behavior   edit [x]
                                                                    Script
                 |_
                    onComplete             + behavior    edit [x]
                                                                    SetClass
                     |_
                                                                    SetStyle
                       Close     + callback + behavior   edit [x]
                                                                    Show
                                                                    ToggleClass
                                                                    ToggleOpenClose
                                                                    ToggleShowHide
                                                                    FetchHtml
                                                                    SetHtml
                                                                    Blur
                                                                    Click
                                                                    DblClick
                                                                    Focus
                                                                    Keypress
                                                                    Mousedown
                                                                    Mousemove
                                                                    Mouseout
                                                                    Mouseover
                                                                    Mouseup
                                                                    Timer
                                                                                      58
Animate
                                                                    ColorAnimate
lego-style interaction builder                                      Fade
                                                                    Move
                                                                    Spotlight
                                                                    Close
                                                                    DragDrop
 #avatar                                   + behavior    edit [x]
                                                                    Hide
 |_
      Click                      + callback + behavior   edit [x]
                                                                    Open
      |_
           onClick                                                  Popup
                                           + behavior    edit [x]

                                                                    ReplaceClass
           |_
                Fade             + callback + behavior   edit [x]
                                                                    Script
                 |_
                    onComplete             + behavior    edit [x]
                                                                    SetClass
                     |_
                                                                    SetStyle
                       Close     + callback + behavior   edit [x]
                                                                    Show
                                                                    ToggleClass
                                                                    ToggleOpenClose
                                                                    ToggleShowHide
                                                                    FetchHtml
 #avatar                                   + behavior    edit [x]
                                                                    SetHtml
                                                                    Blur
                                                                    Click
                                                                    DblClick
                                                                    Focus
                                                                    Keypress
                                                                    Mousedown
                                                                    Mousemove
                                                                    Mouseout
                                                                    Mouseover
                                                                    Mouseup
                                                                    Timer
                                                                                      58
Animate
                                                                    ColorAnimate
lego-style interaction builder                                      Fade
                                                                    Move
                                                                    Spotlight
                                                                    Close
                                                                    DragDrop
 #avatar                                    + behavior   edit [x]
                                                                    Hide
 |_
      Click                      + callback + behavior   edit [x]
                                                                    Open
      |_
           onClick                                                  Popup
                                            + behavior   edit [x]

                                                                    ReplaceClass
           |_
                Fade             + callback + behavior   edit [x]
                                                                    Script
                 |_
                    onComplete              + behavior   edit [x]
                                                                    SetClass
                     |_
                                                                    SetStyle
                       Close     + callback + behavior   edit [x]
                                                                    Show
                                                                    ToggleClass
                                                                    ToggleOpenClose
                                                                    ToggleShowHide
                                                                    FetchHtml
 #avatar                                   + behavior    edit [x]
                                                                    SetHtml
 |_ SetStyle                     + callback + behavior   edit [x]
                                                                    Blur
                                                                    Click
                                                                    DblClick
                                                                    Focus
                                                                    Keypress
                                                                    Mousedown
                                                                    Mousemove
                                                                    Mouseout
                                                                    Mouseover
                                                                    Mouseup
                                                                    Timer
                                                                                      58
Animate
                                                                    ColorAnimate
lego-style interaction builder                                      Fade
                                                                    Move
                                                                    Spotlight
                                                                    Close
                                                                    DragDrop
 #avatar                                    + behavior   edit [x]
                                                                    Hide
 |_
      Click                      + callback + behavior   edit [x]
                                                                    Open
      |_
           onClick                                                  Popup
                                            + behavior   edit [x]

                                                                    ReplaceClass
           |_
                Fade             + callback + behavior   edit [x]
                                                                    Script
                 |_
                    onComplete              + behavior   edit [x]
                                                                    SetClass
                     |_
                                                                    SetStyle
                       Close     + callback + behavior   edit [x]
                                                                    Show
                                                                    ToggleClass
                                                                    ToggleOpenClose
                                                                    ToggleShowHide
                                                                    FetchHtml
 #avatar                                   + behavior    edit [x]
                                                                    SetHtml
 |_ SetStyle                     + callback + behavior   edit [x]
                                                                    Blur
 |_ Click
                                                                    Click
                                 + callback + behavior   edit [x]

                                                                    DblClick
                                                                    Focus
                                                                    Keypress
                                                                    Mousedown
                                                                    Mousemove
                                                                    Mouseout
                                                                    Mouseover
                                                                    Mouseup
                                                                    Timer
                                                                                      58
Animate
                                                                    ColorAnimate
lego-style interaction builder                                      Fade
                                                                    Move
                                                                    Spotlight
                                                                    Close
                                                                    DragDrop
 #avatar                                    + behavior   edit [x]
                                                                    Hide
 |_
      Click                      + callback + behavior   edit [x]
                                                                    Open
      |_
           onClick                                                  Popup
                                            + behavior   edit [x]

                                                                    ReplaceClass
           |_
                Fade             + callback + behavior   edit [x]
                                                                    Script
                 |_
                    onComplete              + behavior   edit [x]
                                                                    SetClass
                     |_
                                                                    SetStyle
                       Close     + callback + behavior   edit [x]
                                                                    Show
                                                                    ToggleClass
                                                                    ToggleOpenClose
                                                                    ToggleShowHide
                                                                    FetchHtml
 #avatar                                   + behavior    edit [x]
                                                                    SetHtml
 |_ SetStyle                     + callback + behavior   edit [x]
                                                                    Blur
 |_ Click
                                                                    Click
                                 + callback + behavior   edit [x]

                                                                    DblClick
     |_
           onClick                         + behavior    edit [x]
                                                                    Focus
                                                                    Keypress
                                                                    Mousedown
                                                                    Mousemove
                                                                    Mouseout
                                                                    Mouseover
                                                                    Mouseup
                                                                    Timer
                                                                                      58
Animate
                                                                     ColorAnimate
lego-style interaction builder                                       Fade
                                                                     Move
                                                                     Spotlight
                                                                     Close
                                                                     DragDrop
 #avatar                                     + behavior   edit [x]
                                                                     Hide
 |_
      Click                       + callback + behavior   edit [x]
                                                                     Open
      |_
           onClick                                                   Popup
                                             + behavior   edit [x]

                                                                     ReplaceClass
           |_
                 Fade             + callback + behavior   edit [x]
                                                                     Script
                  |_
                     onComplete              + behavior   edit [x]
                                                                     SetClass
                      |_
                                                                     SetStyle
                        Close     + callback + behavior   edit [x]
                                                                     Show
                                                                     ToggleClass
                                                                     ToggleOpenClose
                                                                     ToggleShowHide
                                                                     FetchHtml
 #avatar                                    + behavior    edit [x]
                                                                     SetHtml
 |_ SetStyle                      + callback + behavior   edit [x]
                                                                     Blur
 |_ Click
                                                                     Click
                                  + callback + behavior   edit [x]

                                                                     DblClick
     |_
           onClick                          + behavior    edit [x]
                                                                     Focus
                |_ ToggleClass              + behavior    edit [x]
                                                                     Keypress
                                                                     Mousedown
                                                                     Mousemove
                                                                     Mouseout
                                                                     Mouseover
                                                                     Mouseup
                                                                     Timer
                                                                                       58
Animate
                                                                                   ColorAnimate
lego-style interaction builder                                                     Fade
                                                                                   Move
                                                                                   Spotlight
                                                                                   Close
                                                                                   DragDrop
 #avatar                                                   + behavior   edit [x]
                                                                                   Hide
 |_
      Click                                     + callback + behavior   edit [x]
                                                                                   Open
      |_
           onClick                                                                 Popup
                                                           + behavior   edit [x]

                                                                                   ReplaceClass
           |_
                 Fade                           + callback + behavior   edit [x]
                                                                                   Script
                  |_
                     onComplete                            + behavior   edit [x]
                                                                                   SetClass
                      |_
                                                                                   SetStyle
                        Close                   + callback + behavior   edit [x]
                                                                                   Show
                                                                                   ToggleClass
                                                                                   ToggleOpenClose
                                                                                   ToggleShowHide
                                                                                   FetchHtml
 #avatar                                                  + behavior    edit [x]
                                                                                   SetHtml
 |_ SetStyle                                    + callback + behavior   edit [x]
                                                                                   Blur
 |_ Click
                                                                                   Click
                                                + callback + behavior   edit [x]

                                                                                   DblClick
     |_
           onClick                                        + behavior    edit [x]
                                                                                   Focus
                |_ ToggleClass                            + behavior    edit [x]
                                                                                   Keypress
                |_ ToggleOpenClose                                                 Mousedown
                                     .content   + callback + behavior   edit [x]
                                                                                   Mousemove
                                                                                   Mouseout
                                                                                   Mouseover
                                                                                   Mouseup
                                                                                   Timer
                                                                                                     58
useful approaches (inspiration)
• Responder
  •   http://www.boxpop.net/responder
  •   given a style class name, associate behavior with those objects
• jQuery
• LivePipe’s Event.Behavior
  •   http://livepipe.net/projects/event_behavior/
• Dustin Diaz, DED Chain
  •   http://dedchain.dustindiaz.com/




                                                                        59
useful approaches (inspiration)
• Transclusions
  •   including html from somewhere else on your page
  •   http://ajaxian.com/archives/purple-include-transclusions-you-know-
      you-want-them
• DOMDom
  •   nice way to express HTML for Dom insertion
  •   http://www.zachleat.com/web/2007/07/07/domdom-easy-dom-
      element-creation/
  •   (merge with protokit)
• Magic DOM
  •   http://amix.dk/blog/viewEntry/19199
• Jester. JavaScriptian REST
  •   http://giantrobots.thoughtbot.com/2007/4/2/jester-javascriptian-rest
• JavaScript Templating Library: MJT
  •   http://mjtemplate.org/


                                                                             60
useful approaches (inspiration)
• moz-behaviors (dean.edwards.name)
  •   http://dean.edwards.name/moz-behaviors/intro/
  •   uses CSS Linking mechanisms
  •   http://www.w3.org/TR/becss
• ClassAnim
  •   http://blog.mozmonkey.com/2007/classanim-hoverhijax-keeping-
      presentation-out-of-your-javascript/
• JDA Emulator: Spring for JS
  •   Adds properties to the HTML tags themselves
• Ben Nolan’s Behavior Library
  •   http://www.ccs.neu.edu/home/dherman/javascript/behavior/
  •   http://www.ccs.neu.edu/home/dherman/javascript/behavior/
      example.html
  •   Ben Nolan, Dave Herman, Simon Wilison
• Prototype Behavior Library (built on prototype.js)
                                                                     61
more resources
Articles
    Web 3.0 article: www.alistapart.com/articles/web3point0/
    looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.html
    looksgoodworkswell.blogspot.com/2005/11/animating-interactions-with-photoshop.html
    Prototyping with PowerPoint: blogs.msdn.com/jensenh/archive/2006/02/20/535444.aspx
    Visio - the interaction designer’s nail gun: http://www.guuui.com/issues/01_06.php
    PDF Prototyping: http://www.gotomedia.com/gotoreport/may2005/news_0505_usable1.html
Products
    www.axure.com/demo.aspx
    iRise Application Simulator: irise.com
Visio Stencils
     www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio
     Visio Stencil Library: swipr.com
     Wireframe Stencils: http://iainstitute.org/tools/
     Garrett Dimon’s Stencils: http://www.garrettdimon.com/resources/templates-stencils-for-visio-
     omnigraffle




                                                                                                     62
site - http://protoscript.com
    blog - http://looksgoodworkswell.com

presentation - http://billwscott.com/share/presentations/2007/rwe




                                                                    63

More Related Content

Similar to Protoscript - Simplified prototype scripting

Designing with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern LibraryDesigning with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern Librarygoodfriday
 
Antipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experienceAntipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experienceinteractionpatterns.org
 
Seven Habits Of Highly Effective Asp Net Mvc D
Seven Habits Of Highly Effective Asp Net Mvc DSeven Habits Of Highly Effective Asp Net Mvc D
Seven Habits Of Highly Effective Asp Net Mvc Dcurtismitchell
 
Anti Patterns2008
Anti Patterns2008Anti Patterns2008
Anti Patterns2008Ross Lawley
 
BathCamp #32 - CMS Smackdown! - Plone
BathCamp #32 - CMS Smackdown! - PloneBathCamp #32 - CMS Smackdown! - Plone
BathCamp #32 - CMS Smackdown! - PloneMatt Hamilton
 
Nov. 8, 2011 webcast desiging mobile interfaces by steven hoober
Nov. 8, 2011 webcast   desiging mobile interfaces by steven hooberNov. 8, 2011 webcast   desiging mobile interfaces by steven hoober
Nov. 8, 2011 webcast desiging mobile interfaces by steven hooberO'Reilly Media
 
responsive awareness
responsive awarenessresponsive awareness
responsive awarenessonehundred_be
 
C# .NET - Um overview da linguagem
C# .NET - Um overview da linguagem C# .NET - Um overview da linguagem
C# .NET - Um overview da linguagem Claudson Oliveira
 
Prototypes and Drupal
Prototypes and DrupalPrototypes and Drupal
Prototypes and DrupalFFW
 
Building reusable components with generics and protocols
Building reusable components with generics and protocolsBuilding reusable components with generics and protocols
Building reusable components with generics and protocolsDonny Wals
 
Rick le Roy - Three design methods for mobile services
Rick le Roy - Three design methods for mobile servicesRick le Roy - Three design methods for mobile services
Rick le Roy - Three design methods for mobile servicesMobile Monday Amsterdam
 
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian ToolsDesigning for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian ToolsAtlassian
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideFramebench
 
Ruby codebases in an entropic universe
Ruby codebases in an entropic universeRuby codebases in an entropic universe
Ruby codebases in an entropic universeNiranjan Paranjape
 

Similar to Protoscript - Simplified prototype scripting (20)

Designing with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern LibraryDesigning with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern Library
 
Antipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experienceAntipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experience
 
Seven Habits Of Highly Effective Asp Net Mvc D
Seven Habits Of Highly Effective Asp Net Mvc DSeven Habits Of Highly Effective Asp Net Mvc D
Seven Habits Of Highly Effective Asp Net Mvc D
 
Bill Scott Presentation
Bill Scott PresentationBill Scott Presentation
Bill Scott Presentation
 
Anti Patterns2008
Anti Patterns2008Anti Patterns2008
Anti Patterns2008
 
BathCamp #32 - CMS Smackdown! - Plone
BathCamp #32 - CMS Smackdown! - PloneBathCamp #32 - CMS Smackdown! - Plone
BathCamp #32 - CMS Smackdown! - Plone
 
Nov. 8, 2011 webcast desiging mobile interfaces by steven hoober
Nov. 8, 2011 webcast   desiging mobile interfaces by steven hooberNov. 8, 2011 webcast   desiging mobile interfaces by steven hoober
Nov. 8, 2011 webcast desiging mobile interfaces by steven hoober
 
Web guide
Web guideWeb guide
Web guide
 
responsive awareness
responsive awarenessresponsive awareness
responsive awareness
 
C# .NET - Um overview da linguagem
C# .NET - Um overview da linguagem C# .NET - Um overview da linguagem
C# .NET - Um overview da linguagem
 
Prototypes and Drupal
Prototypes and DrupalPrototypes and Drupal
Prototypes and Drupal
 
RIA
RIARIA
RIA
 
Building reusable components with generics and protocols
Building reusable components with generics and protocolsBuilding reusable components with generics and protocols
Building reusable components with generics and protocols
 
Hanami
HanamiHanami
Hanami
 
Lean Prototyping Guide
Lean Prototyping GuideLean Prototyping Guide
Lean Prototyping Guide
 
Django in the Real World
Django in the Real WorldDjango in the Real World
Django in the Real World
 
Rick le Roy - Three design methods for mobile services
Rick le Roy - Three design methods for mobile servicesRick le Roy - Three design methods for mobile services
Rick le Roy - Three design methods for mobile services
 
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian ToolsDesigning for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
Ruby codebases in an entropic universe
Ruby codebases in an entropic universeRuby codebases in an entropic universe
Ruby codebases in an entropic universe
 

More from Bill Scott

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup EthosBill 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 - AustraliaBill 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 partnerBill Scott
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to LifeBill 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 ActionBill 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 2013Bill 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 ActionBill 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 @paypalBill 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 TeamsBill 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 JSBill 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 ExperiencesBill 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 paypalBill Scott
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech StackBill Scott
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-PatternsBill 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
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampBill Scott
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting MomentsBill Scott
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to LifeBill 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 WebcastBill 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)
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
 
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
 

Recently uploaded

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 

Recently uploaded (20)

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 

Protoscript - Simplified prototype scripting

  • 1. Prototyping the Rich Web Experience Bill Scott Yahoo! Ajax Evangelist b.scott@yahoo.com 1
  • 6. prototyping • Have been involved with prototyping for a number of years • Last summer wrote a quick dragdrop proto library that was based on CSS class names and associating behavior to these classes (‘dragme’, ‘drophere’) • Goal was to make it easy for designers to start prototyping • However it was not possible to provide enough logic without resorting to writing code • Been planning to get back to the idea for a year. • This got me thinking about simplifying the experience of prototyping with dhtml/ajax 3
  • 7. what i really want take a rough prototype 4
  • 8. what i really want take a rough prototype sprinkle in some behaviors 4
  • 9. what i really want take a rough prototype sprinkle in some behaviors 4
  • 10. what i really want take a rough prototype sprinkle in some behaviors 4
  • 11. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  • 12. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  • 13. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  • 14. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  • 15. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  • 16. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  • 17. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  • 18. what we will discuss • quick overview of common design patterns (behaviors) • quick survey of techniques to prototype a rich web experience • dive into protoscript and discuss how it can be used to sprinkle behaviors into web pages • look at similar techniques emerging (jQuery, css behaviors, DED | Chain, etc. 5
  • 20. ria patterns invitation. cursor invitation. hover invitation. tooltip invitation. page invitation. drop invitation. available. selected. auto complete. live suggest. refining search. dynamic filtering. live search. on-demand scrolling. deferred content loading. fresh content. on-demand content. periodic refresh. resizable modules. scrolling modules. hover detail. narrowing actions. narrowing choices. auto form fill. in-place drill down. dependent choices. look before you leap. drag and drop. drag and drop modules. drag and drop objects. persistant portals. in page edit. inline text edit. inline custom edit. direct state edit. rating an object. inline custom edit. inline tag edit. popup custom edit. grid cell edit. slide out custom edit. module configure. module flip configure. module inline configure. module slide out configure. module faceplate. expandable content. in- context tools. in-context links. in-context hover menu. silent submit. remembered collection. auto save. remembered preferences. hover spy. inline assistant. inline validation. validate then suggest. indicator. busy indicator. progress indicator. inline status. in-context busy. cursor busy. opacity fade. high contrast. balloon error tip. dynamic goal. opacity focus. detail zoom. lightbox. transition. brighten. cross-fade. dim. expand. fade-in. fade-out. flip. move. self-heal. collapse. slide. animate. 7
  • 21. 8
  • 24. patterns pattern. in-page action. pattern. in-context expand. 9
  • 25. patterns pattern. in-page action. pattern. inline editing. pattern. in-context expand. 9
  • 26. patterns pattern. in-page action. pattern. inline editing. pattern. in-context expand. pattern. drag & drop. 9
  • 27. patterns pattern. in-page action. pattern. inline editing. pattern. in-context expand. pattern. hover details. pattern. drag & drop. 9
  • 28. patterns pattern. in-page action. pattern. inline editing. pattern. in-context expand. pattern. in-context tools. pattern. hover details. pattern. drag & drop. 9
  • 29. patterns 10
  • 31. patterns pattern. remembered collections. pattern. on-demand scrolling. 10
  • 32. patterns pattern. auto complete. pattern. remembered collections. pattern. on-demand scrolling. 10
  • 33. patterns 11
  • 35. patterns pattern. busy indicator. pattern. lightweight popup + lightbox. 11
  • 36. patterns pattern. busy indicator. pattern. lightweight popup + lightbox. pattern. fade transition + self-healing transitio 11
  • 38. interesting moments Drag and Drop Modules - Interesting Moments Grid ID: Bill Scott & Eric Miraglia Date: Currently on beta.my.yahoo.com Nov-0 Mouse Drag Over Drag Over Drag Over Drop Drop Hover Mouse Down Drag Initiated Valid Target Invalid Target Parent Container Accepted Rejected Cursor CSS Move cursor Move cursor CSS CSS Move cursor CSS Move cursor CSS Move cursor CSS Move cursor Normal Cursor Normal Cursor Tool Tip Drag Object Modules animates into the area Modules animates back to Full Opacity Reduced Opacity Reduced Opacity Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar the home area Module comes to rest in new Module comes back to rest area at full opacity Modules slide up in a self-healing transition to close hole Drop Target Insertion bar is removed as first Insertion bar is removed No insertion bar, just a gap No insertion bar, just a gap Insertion bar showing where it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation as first frame of animation 12
  • 39. Date: Nov-05 Drag Over Drag Over Drop Drop Drop On interesting moments Invalid Target Parent Container Accepted Rejected Parent Container CSS Move cursor CSS Move cursor Normal Cursor Normal Cursor Normal Cursor Drag and Drop Modules - Interesting Moments Grid ID: Bill Scott & Eric Miraglia Date: Currently on beta.my.yahoo.com Nov-0 Mouse Drag Over Drag Over Drag Over Drop Drop Hover Mouse Down Drag Initiated Valid Target Invalid Target Parent Container Accepted Rejected Cursor CSS Move cursor Move cursor CSS CSS Move cursor CSS Move cursor CSS Move cursor CSS Move cursor Normal Cursor Normal Cursor Tool Tip Drag Object Modules animates into the area Modules animates back to Modules animates back t Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar the home area the home area Modules animates into the area Modules animates back to Full Opacity Reduced Opacity Reduced Opacity Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar the home area Module comes to rest in new Module comes Module comesrest in Modules comes back to rest back to to rest new Module comes back to at full opacity area rest at at full opacity area full opacity Modules slide up in a self-healing transition to close hole Drop Target Modules slide up in a self-healing transition to close hole Insertion bar is removed as first Insertion bar is removed No insertion bar, just a gap No insertion bar, just a gap Insertion bar showing where it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation as first frame of animation Insertion bar is removed Insertion bar is removed as first Insertion bar is removed as first frame of it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation as first frame of animation animation 12
  • 40. interesting moments for drag drop 13
  • 42. challenge of interesting moments Wireframing AJAX is a bitch. The best our agency has come up with is the Chuck Jones approach: draw the key frames. Chuck Jones had an advantage: he knew what Bugs Bunny was going to do. We have to determine all the things a user might do, and wireframe the blessed moments of each possibility. - Jeffrey Zeldman http://www.alistapart.com/articles/web3point0/ Blessed Moments = Microstates = Interesting Moments • behavior is not static - Multiple states need to be captured - Happens within a context - Not suited for wireframes 15
  • 45. prototyping with visio Changes in state placed in different layers • Storyboard steps toggle visibility of associated layers • Each storyline serves as a use case in the wireframe • Source: http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio 17
  • 46. prototyping with visio Changes in state placed in different layers • Storyboard steps toggle visibility of associated layers • Each storyline serves as a use case in the wireframe • Source: http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio 17
  • 47. prototyping with keynote/powerpoint Slides make major steps • Builds used to bring in transitions, animations • 18
  • 48. 19
  • 49. prototyping with photoshop Easy to create from a series of images • Images can be created by hand or from other apps • 20
  • 50. animations from screencasts Start with screencast (SnapZPro/SnagIt) Turn movie into animated GIF (Adobe ImageReady) 21
  • 51. other approaches Flash Flex iRise (www.irise.com) $$$ Axure (www.axure.com) Interactive PDFs Fireworks + PDF Powerpoint DHTML 22
  • 53. prototyping with DHTML • Benefits • Can start simple and layer in complexity • Works well across different teams (design to code) • Technology the same or similar to final implementation • Most capable to approximate final result • Living example • Disadvantages • Requires technical savvy • Bugs can suck down time • Too much time spent ‘messing with code’ • Hard to extract into documentation 24
  • 54. dhtml prototyping skills/techniques • Keep structure, style and logic separate • Avoid adding onclick handlers in the HTML (unobtrusive) • Avoid any direct styles or html style tags (font, etc.) • Use style class switching for visual changes • Use CSS to simulate most mouse hover behavior • Use innerHTML for content changes • Understand when to use a class vs. id • Use CSS query libraries for referencing interface parts • CSS selector syntax allows non-intrusive behavior injection 25
  • 55. dhtml prototyping skills/techniques • Use anchors as basic navigation/action hooks • Use background images in CSS with style switching • Use a grid layout system • YUI Grid • Use Firebug • Understand CSS Selectors • Ext, jQuery, Dojo, Mootoos, Prototype, cssQuery() • Use JSON syntax (options) 26
  • 56. underlying desire for protoscript • address the conceptual phase of interface development -- think “interaction theme” (free from solving production issues) • express an interaction as a configuration (no code; declarative approach) • dynamically insert interaction themes (behaviors) to any web page (allows experimentation) • create a gui tool for configuring & exploring interactions 27
  • 57. protoscript approach • JSON used to express interaction theme to express relationship between dom elements, behaviors, attributes, and callbacks • jQuery CSS Selector syntax for dom elements • Chain dependent behavior as well as parallel behavior with JSON syntax • Simple to add behaviors (class with 2 methods) • Focus is on prototyping 28
  • 59. simple example Simple Click, Fade, Close (self-healing delete) 30
  • 61. anatomy of an interaction DOM elements DOM Target an element or elements Element for attaching events & behaviors. Events Events are the glue between the user and Event behaviors. They start behaviors. Behaviors Blocks of logic, patterns, actions that Behavior operate on elements. 32
  • 62. anatomy of self-healing delete DOM Element Event Behavior 33
  • 63. anatomy of self-healing delete DOM Element Event Behavior 33
  • 64. anatomy of self-healing delete DOM elements DOM [X] Element <LI>[X] oldmove.mov</LI> Event Behavior 33
  • 65. anatomy of self-healing delete DOM elements DOM [X] Element <LI>[X] oldmove.mov</LI> Events Click Event onClick (callback) Behavior 33
  • 66. anatomy of self-healing delete DOM elements DOM [X] Element <LI>[X] oldmove.mov</LI> Events Click Event onClick (callback) Behaviors Fade Behavior Close 33
  • 67. protoscript code $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 34
  • 68. selecting dom elements (targeting) Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 35
  • 69. selecting dom elements (targeting) Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 35
  • 70. selecting dom elements (targeting) Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 35
  • 71. selecting dom elements (targeting) Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 35
  • 72. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  • 73. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  • 74. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  • 75. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  • 76. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  • 77. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  • 78. selector syntax Element Consult jQuery docs: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors If you are setting up your own prototypes, stick with class and identifier .my-class-name #my-id-name Other useful examples a:contains(Click Here) .my-class-name #my-id-under-there #my-specific-container .my-items Consult CSS-1, CSS-2, CSS-3 and XPath Behavior Event 37
  • 79. behaviors Behavior Animate. ColorAnimate. Fade. Move. Spotlight. Close. DragDrop. Hide. Open. Popup. ReplaceClass. Script. SetClass. SetStyle. Show. ToggleClass. ToggleOpenClose. ToggleShowHide. FetchHtml. SetHtml. Event Element 38
  • 80. behavior demos Behavior 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/ Event Element 39
  • 81. behavior attributes Behavior Behaviors may supply attributes for configuring the behavior Where possible if an underlying YUI component or utility has a config object, this is exposed EXAMPLE FROM Popup BEHAVIOR (bold denotes from Panel cfg) close: true, width: '300px', draggable: true, height: null, underlay: 'shadow', zIndex: null, model: false, contraintoviewport: false, visible: true, iframe: false, effect: null, id: 'popup_panel', monitorresize: true, hd: 'Panel Title', x: null, bd: 'This is the body', Event y: null, ft: null xy: null, context: null, fixedcenter: true, Element 40
  • 82. plug-in behavior Behavior Protoscript core is independent of any single toolkit selector is a plugin. default set uses jQuery behavior set is plugged in. default set uses YUI. ProtoScript.Core.registerBehaviorSet($, YAHOO.protoscript); (yui-proto.js) You are free to create your own behavior sets or plug in other selector technologies Example: Mootools selector & behaviors ProtoScript.Core.registerBehaviorSet($ES, MooBehaviors); (moo-proto.js) You can also add behaviors to the default set Event Element 41
  • 83. peek under the hood of a behavior Behavior YAHOO.protoscript.Show = function (behaviorName, behaviorCfg) { this.init(behaviorName, behaviorCfg); }; YAHOO.protoscript.Show.prototype = { defaultCfg : { }, init: function(behaviorName, behaviorCfg) { this.name = behaviorName; this.cfg = ProtoScript.Core.applyConfig(this.defaultCfg, behaviorCfg); }, action: function(currScope) { YAHOO.util.Dom.setStyle(currScope.elems, 'visibility', 'visible'); if(this.cfg.onShow) { ProtoScript.Core.callBehaviors(this.cfg.onShow, currScope); } } }; Event 'Show' behavior Element 42
  • 84. adding a behavior (to default YUI set) Behavior 1. Add behavior to YAHOO.protoscript namespace 2. In init store name apply config parameters 3. In action put your behavior logic The action performs the behavior action(currScope) currScope.elems: list of elems resolved from the current target scope currScope.idx: if multiple elems, the index into the active element for this action currScope.pseudoElems: some behaviors set dynamic elements (like $drag, $drop in DragDrop behavior. 4. For any interesting moments, call to process the callback ProtoScript.Core.callBehaviors 5. Add attributes as needed (in your defaultCfg) Event 6. Start using it in your scripts Element 43
  • 85. events Event Blur. Click. Dblclick. Focus. Keypress. Mousedown. Mousemove. Mouseout. Mouseover. Mouseup. Timer. Element Behavior 44
  • 86. events are actually behaviors Event YAHOO.protoscript.Click = function(behaviorName, behaviorCfg) { this.init(behaviorName, behaviorCfg); }; YAHOO.protoscript.Click.prototype = { defaultCfg : {}, init: function(behaviorName, behaviorCfg) { this.name = behaviorName; this.cfg = ProtoScript.Core.applyConfig(this.defaultCfg, behaviorCfg); }, action: function(currScope) { YAHOO.protoscript.Trigger(this.cfg, currScope, 'click');} }; 'Click' behavior Element Behavior 45
  • 87. callbacks Event 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. onToggleOpenClose. onToggleShowHide. onSuccess. onFailure. onSetHtml. Element Behavior 46
  • 89. callbacks are invoked in behaviors Event YAHOO.protoscript.Open = function (behaviorName, behaviorCfg) { this.init(behaviorName, behaviorCfg); }; YAHOO.protoscript.Open.prototype = { defaultCfg : { }, init: function(behaviorName, behaviorCfg) { this.name = behaviorName; this.cfg = ProtoScript.Core.applyConfig( this.defaultCfg, behaviorCfg); }, action: function(currScope) { YAHOO.util.Dom.setStyle(currScope.elems, 'display', 'block'); if(this.cfg.onOpen) { ProtoScript.Core.callBehaviors(this.cfg.onOpen, currScope); } } }; Element 'Open' behavior invoking onOpen Behavior 48
  • 90. Bookmarklet* *humble beginnings 49
  • 91. 50
  • 92. 51
  • 93. adding protoscript to your page http://protoscript.com/downloads.php 52
  • 94. syntax $proto(selector, interaction) where: selector is the jQuery selector syntax interaction is a configuration object (JSON) describing the interaction $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } } } } }); 53
  • 95. syntax $proto(config) single config object defines an interaction convenient for passing interactions around or saving to config files $proto( { 'span:contains([X])': { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } } } } } }); 54
  • 96. syntax $proto(config) single config object defines an interaction convenient for passing interactions around or saving to config files var cfg = {'span:contains([X])': { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } } } } } }; $proto(cfg); 55
  • 97. 0.1 beta • Live at http://protoscript.com • Started it last month • reference implementation YUI + jQuery • 31 behaviors (including events) • 40+ live examples • full wiki site with all behaviors documented (docs.protoscript.com) • Open source • Code is at Google Code. Send me email if you want to participate will get you acces to SVN trunk • BSD license • Bookmarklet • Just hack to start experimenting with GUI • Combined with firebug, works ok • Right now best on Firefox 56
  • 98. next steps • 'You' write lots of behaviors • Wiki for docs • Google code for new behaviors behavior sets • New GUI tool • Most likely extend Firebug • Combine 'inspector' with behavior wizard to inject behaviors • Persist configurations for pages; allow re-load • Flesh out behavior self-publishing • Will add spec on how to make behavior publish itself to a GUI tool 57
  • 99. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop Hide Open Popup ReplaceClass Script SetClass SetStyle Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 100. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide Open Popup ReplaceClass Script SetClass SetStyle Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 101. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open Popup ReplaceClass Script SetClass SetStyle Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 102. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open Popup Modifier: ReplaceClass Delay: Script SetClass OK SetStyle Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 103. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open Popup ReplaceClass Script SetClass SetStyle Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 104. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass Script SetClass SetStyle Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 105. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass |_ Fade + callback + behavior edit [x] Script SetClass SetStyle Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 106. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass |_ Fade + callback + behavior edit [x] Script |_ onComplete + behavior edit [x] SetClass SetStyle Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 107. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass |_ Fade + callback + behavior edit [x] Script |_ onComplete + behavior edit [x] SetClass |_ SetStyle Close + callback + behavior edit [x] Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 108. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass |_ Fade + callback + behavior edit [x] Script |_ onComplete + behavior edit [x] SetClass |_ SetStyle Close + callback + behavior edit [x] Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml #avatar + behavior edit [x] SetHtml Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 109. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass |_ Fade + callback + behavior edit [x] Script |_ onComplete + behavior edit [x] SetClass |_ SetStyle Close + callback + behavior edit [x] Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml #avatar + behavior edit [x] SetHtml |_ SetStyle + callback + behavior edit [x] Blur Click DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 110. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass |_ Fade + callback + behavior edit [x] Script |_ onComplete + behavior edit [x] SetClass |_ SetStyle Close + callback + behavior edit [x] Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml #avatar + behavior edit [x] SetHtml |_ SetStyle + callback + behavior edit [x] Blur |_ Click Click + callback + behavior edit [x] DblClick Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 111. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass |_ Fade + callback + behavior edit [x] Script |_ onComplete + behavior edit [x] SetClass |_ SetStyle Close + callback + behavior edit [x] Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml #avatar + behavior edit [x] SetHtml |_ SetStyle + callback + behavior edit [x] Blur |_ Click Click + callback + behavior edit [x] DblClick |_ onClick + behavior edit [x] Focus Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 112. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass |_ Fade + callback + behavior edit [x] Script |_ onComplete + behavior edit [x] SetClass |_ SetStyle Close + callback + behavior edit [x] Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml #avatar + behavior edit [x] SetHtml |_ SetStyle + callback + behavior edit [x] Blur |_ Click Click + callback + behavior edit [x] DblClick |_ onClick + behavior edit [x] Focus |_ ToggleClass + behavior edit [x] Keypress Mousedown Mousemove Mouseout Mouseover Mouseup Timer 58
  • 113. Animate ColorAnimate lego-style interaction builder Fade Move Spotlight Close DragDrop #avatar + behavior edit [x] Hide |_ Click + callback + behavior edit [x] Open |_ onClick Popup + behavior edit [x] ReplaceClass |_ Fade + callback + behavior edit [x] Script |_ onComplete + behavior edit [x] SetClass |_ SetStyle Close + callback + behavior edit [x] Show ToggleClass ToggleOpenClose ToggleShowHide FetchHtml #avatar + behavior edit [x] SetHtml |_ SetStyle + callback + behavior edit [x] Blur |_ Click Click + callback + behavior edit [x] DblClick |_ onClick + behavior edit [x] Focus |_ ToggleClass + behavior edit [x] Keypress |_ ToggleOpenClose Mousedown .content + callback + behavior edit [x] Mousemove Mouseout Mouseover Mouseup Timer 58
  • 114. useful approaches (inspiration) • Responder • http://www.boxpop.net/responder • given a style class name, associate behavior with those objects • jQuery • LivePipe’s Event.Behavior • http://livepipe.net/projects/event_behavior/ • Dustin Diaz, DED Chain • http://dedchain.dustindiaz.com/ 59
  • 115. useful approaches (inspiration) • Transclusions • including html from somewhere else on your page • http://ajaxian.com/archives/purple-include-transclusions-you-know- you-want-them • DOMDom • nice way to express HTML for Dom insertion • http://www.zachleat.com/web/2007/07/07/domdom-easy-dom- element-creation/ • (merge with protokit) • Magic DOM • http://amix.dk/blog/viewEntry/19199 • Jester. JavaScriptian REST • http://giantrobots.thoughtbot.com/2007/4/2/jester-javascriptian-rest • JavaScript Templating Library: MJT • http://mjtemplate.org/ 60
  • 116. useful approaches (inspiration) • moz-behaviors (dean.edwards.name) • http://dean.edwards.name/moz-behaviors/intro/ • uses CSS Linking mechanisms • http://www.w3.org/TR/becss • ClassAnim • http://blog.mozmonkey.com/2007/classanim-hoverhijax-keeping- presentation-out-of-your-javascript/ • JDA Emulator: Spring for JS • Adds properties to the HTML tags themselves • Ben Nolan’s Behavior Library • http://www.ccs.neu.edu/home/dherman/javascript/behavior/ • http://www.ccs.neu.edu/home/dherman/javascript/behavior/ example.html • Ben Nolan, Dave Herman, Simon Wilison • Prototype Behavior Library (built on prototype.js) 61
  • 117. more resources Articles Web 3.0 article: www.alistapart.com/articles/web3point0/ looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.html looksgoodworkswell.blogspot.com/2005/11/animating-interactions-with-photoshop.html Prototyping with PowerPoint: blogs.msdn.com/jensenh/archive/2006/02/20/535444.aspx Visio - the interaction designer’s nail gun: http://www.guuui.com/issues/01_06.php PDF Prototyping: http://www.gotomedia.com/gotoreport/may2005/news_0505_usable1.html Products www.axure.com/demo.aspx iRise Application Simulator: irise.com Visio Stencils www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio Visio Stencil Library: swipr.com Wireframe Stencils: http://iainstitute.org/tools/ Garrett Dimon’s Stencils: http://www.garrettdimon.com/resources/templates-stencils-for-visio- omnigraffle 62
  • 118. site - http://protoscript.com blog - http://looksgoodworkswell.com presentation - http://billwscott.com/share/presentations/2007/rwe 63