Download - Rapid Prototyping With J Query
![Page 1: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/1.jpg)
RAPID PROTOTYPINGwith jQuery
![Page 2: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/2.jpg)
PROTOTYPING
![Page 3: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/3.jpg)
WHAT IS A PROTOTYPE?
A prototype is an original type, form, or instance of something serving as a typical example, basis, or standard for other things of the same category.
![Page 4: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/4.jpg)
“An Experience Prototype is any kind of representation, in any medium, that is designed to understand, explore or communicate what it might be like to engage with
the product, space or system we are designing.”
Jane Fulton Suri
![Page 5: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/5.jpg)
WHAT IS RAPID PROTOTYPING?
• Implementing some product functionality as soon as possible
• Not worrying about any details or production issues
• Keeping up an illusion!
![Page 6: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/6.jpg)
Rapid prototypers are the illusionists and magicians of the
web
![Page 7: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/7.jpg)
WHY?
![Page 8: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/8.jpg)
WHY?
• Engineering the final design can take a long time
• Slow feedback loop for each design interaction
• Communication problems between design and engineering
![Page 9: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/9.jpg)
WHY?
• Exploration
• Validating it works
• Communication
![Page 10: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/10.jpg)
![Page 11: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/11.jpg)
DIFFERENT PROTOTYPES
• Wireframes = Walk through prototypes
• Interactive prototypes
![Page 12: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/12.jpg)
WHAT IS A PROTOTYPE FOR US?
• Interactive click dummy
• Modelled after wireframes and/or concept layouts
• Usually targeted at one audience, on one platform
![Page 13: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/13.jpg)
A Prototype doesn’t need to validate!
![Page 14: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/14.jpg)
NO CROSS-BROWSER
MESS!
![Page 15: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/15.jpg)
Semantics?
Who needs semantics!
SEO?
Who cares, damn it?
Structure, logic...!
LOL!
![Page 16: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/16.jpg)
REQUIREMENTS OF A PROTOTYPE
![Page 17: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/17.jpg)
REQUIREMENTS OF A PROTOTYPE
Layout
Behavior
Data
![Page 18: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/18.jpg)
LAYOUT
• Use CSS Frameworks!
• Copy and Paste!
• Use WYSIWYG Editors!
Just get the damn job done!
![Page 19: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/19.jpg)
CSS FRAMEWORKS?
• Hides complexity, like any other framework
• Provides templates for grids, columns and more
• Normalizes across browsers
![Page 20: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/20.jpg)
SOME TECHNIQUES
• If the floats don’t work, simply position everything
• Use a CSS Framework that comes with columns or a grid
• Utilize all kinds of specific browser technology
![Page 21: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/21.jpg)
BEHAVIOR
• Brings life into the prototype
• Describe interactions a user can perform
• Clicks
• Hover
• Drags
• ..etc
![Page 22: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/22.jpg)
CSS
• Use CSS whenever possible
• Use it to simulate hover events: a:hover {}
• Use content injection through CSS
• Switch class names in JavaScript, not styles
![Page 23: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/23.jpg)
DATA
• Use jQuery’s ajax functions to quickly inject content
• JSONP is your friend!
• $(‘div’).load(‘some.url#content’)
![Page 24: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/24.jpg)
USE PUBLIC API’S
• YQL
• Google API’s (Maps, Search, Docs, etc)
• Flickr
![Page 25: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/25.jpg)
THE ILLUSION OF SPEED
![Page 26: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/26.jpg)
A PROTOTYPE DOESN’T HAVE TO BE FAST.
![Page 27: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/27.jpg)
IT ONLY HAS TO FEEL FAST.
![Page 28: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/28.jpg)
PERCEIVED RESPONSIVENESS
• Slow down your interactions
• Use animations and effects to hide a loading process
• Slow interaction makes people understand your prototype!
• Shows the state change
• Shows relationships between elements
• Focusses attention
![Page 29: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/29.jpg)
TOOLS
![Page 30: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/30.jpg)
THEMEROLLER
![Page 31: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/31.jpg)
THEMEROLLER
• Design custom themes
• 100% jQuery UI CSS Framework compatible
• Fun and intuitive UI (No coding!)
• png8 with alpha transparency
• Theme Gallery
![Page 32: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/32.jpg)
JQUERY UI
![Page 33: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/33.jpg)
![Page 34: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/34.jpg)
JQUERY UI CSS FRAMEWORK
![Page 35: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/35.jpg)
THE CSS FRAMEWORK
• Semantic + generic classes instead of per-plugin
• Seperation of design and layout
• Support for CSS Sprites + CSS3 corner radius
• Modular and extensible
![Page 36: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/36.jpg)
PRETTY NEAT BUT I NEED MY OWN STYLES ANYWAY
![Page 37: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/37.jpg)
More power!
![Page 38: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/38.jpg)
IT‘S NOT EXCLUSIVE.
• Uses em‘s for all units
• Scales background images
• All documented
• Comes with testing & debugging tools
![Page 39: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/39.jpg)
WEBKIT
![Page 40: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/40.jpg)
![Page 41: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/41.jpg)
CSS TRANSFORMS
• Webkit/Gecko (Safari 3+, iPhone, Android, Air, FF 3.5+)
• 2D transformations on HTML elements
• Yes, all kinds of 2d transformations: Rotating, Scaling, Skewing
![Page 42: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/42.jpg)
3D CSS TRANSFORMS!
![Page 43: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/43.jpg)
...MUCH MORE
• CSS Gradients
• CSS Reflections
• text shadow
• box shadow
• CSS Animations
• CSS Transitions
![Page 44: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/44.jpg)
FIREBUG
![Page 45: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/45.jpg)
FIREBUG
• Quickly edit markup
• Edit CSS
• Manipulate JavaScript
The save button is missing!
![Page 46: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/46.jpg)
GREASEMONKEY
![Page 47: Rapid Prototyping With J Query](https://reader034.vdocuments.site/reader034/viewer/2022051411/5446e825afaf9f5d178b47cd/html5/thumbnails/47.jpg)
META
• http://paulbakaus.com
• http://twitter.com/pbakaus
• http://jqueryui.com
• http://wiki.jqueryui.com
• http://dev.jqueryui.com