Your SlideShare is downloading. ×
0
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Protoscript - Simplified prototype scripting

4,222

Published on

Given at the Rich Web Experience 2007. …

Given at the Rich Web Experience 2007.

http://protoscript.com

Protoscript is a simplified scripting language for creating Ajax style prototypes for the Web. With Protoscript it's easy to bring interface elements to life. Simply connect them to behaviors and events to create complex interactions.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,222
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
139
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Prototyping the Rich Web Experience Bill Scott Yahoo! Ajax Evangelist b.scott@yahoo.com 1
  • 2. stuff i’ve done 2
  • 3. stuff i’ve done 2
  • 4. stuff i’ve done 2
  • 5. stuff i’ve done 2
  • 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
  • 19. patterns (common interaction behaviors) 6
  • 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
  • 22. patterns 9
  • 23. patterns pattern. in-page action. 9
  • 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
  • 30. patterns pattern. remembered collections. 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
  • 34. patterns pattern. busy indicator. 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
  • 37. interesting moments 12
  • 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
  • 41. non-dhtml prototyping techniques 14
  • 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
  • 43. using keyframes 16
  • 44. using keyframes 16
  • 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
  • 52. dhtml prototyping 23
  • 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
  • 58. Demo http://protoscript.com/demos.php 29
  • 59. simple example Simple Click, Fade, Close (self-healing delete) 30
  • 60. sprinkling in behaviors 31
  • 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) {

×