Rapid Prototyping With jQuery
Upcoming SlideShare
Loading in...5
×
 

Rapid Prototyping With jQuery

on

  • 16,674 views

This will give you an introduction about Prototyping in general, highlights advantages and disadvantages and gives you a pragramtic view on solutions, tools and ways to get the job done and win your ...

This will give you an introduction about Prototyping in general, highlights advantages and disadvantages and gives you a pragramtic view on solutions, tools and ways to get the job done and win your next pitch.

Statistics

Views

Total Views
16,674
Views on SlideShare
16,552
Embed Views
122

Actions

Likes
27
Downloads
315
Comments
2

15 Embeds 122

http://www.slideshare.net 47
http://onwebdev.blogspot.com 33
http://www.techgig.com 10
http://us-w1.rockmelt.com 6
http://us-w1.rockmelt.com 6
http://a0.twimg.com 5
http://paper.li 5
http://onwebdev.blogspot.com.au 2
http://onwebdev.blogspot.co.uk 2
http://www.linkedin.com 1
http://fbweb-test.comoj.com 1
http://www.twylah.com 1
http://do.notuse.me 1
http://www.tumblr.com 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • thank you
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks, found Themeroller from your presentation which I hadn't come across before
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Rapid Prototyping With jQuery Rapid Prototyping With jQuery Presentation Transcript

  • RAPID PROTOTYPING with jQuery
  • PROTOTYPING
  • 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.
  • “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
  • WHAT IS RAPID PROTOTYPING? • Implementing some product functionality as soon as possible • Not worrying about any details or production issues • Keeping up an illusion!
  • Rapid prototypers are the illusionists and magicians of the web.
  • WHY?
  • design like in ‘product design’ • Engineering the final design can take a long time • Slow feedback loop for each design interaction • Communication problems between design and engineering
  • WHY? • Exploration • Validating it works • Communication
  • DIFFERENT PROTOTYPES • Wireframes = Walk through prototypes • Interactive prototypes
  • WHAT IS A PROTOTYPE FOR US? • Interactive click dummy • Modelled after wireframes and/or concept layouts • Usually targeted at one audience, on one platform
  • A Prototype doesn’t need to validate!
  • NO CROSS- BROWSER MESS!
  • Semantics? Who needs semantics! SEO? Who cares, damn it? Structure, logic...! LOL!
  • Just do it, damnit!
  • REQUIREMENTS OF A PROTOTYPE
  • Layout Behavior Data
  • LAYOUT • Use CSS Frameworks! • Copy and Paste! • Use WYSIWYG Editors! Just get the damn job done!
  • CSS FRAMEWORKS? • Hides complexity, like any other framework • Provides templates for grids, columns and more • Normalizes across browsers
  • 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
  • BEHAVIOR • Brings life into the prototype • Describe interactions a user can perform • Clicks • Hover • Drags • ..etc
  • 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
  • DATA • Use jQuery’s ajax functions to quickly inject content • JSONP is your friend! • $(‘div’).load(‘some.url#content’)
  • USE PUBLIC API’S • YQL • Google API’s (Maps, Search, Docs, etc) • Flickr
  • THE ILLUSION OF SPEED
  • A PROTOTYPE DOESN’T HAVE TO BE FAST.
  • IT ONLY HAS TO FEEL FAST.
  • 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
  • TOOLS
  • THEMEROLLER
  • THEMEROLLER • Design custom themes • 100%jQuery UI CSS Framework compatible • Funand intuitive UI (No coding!) • png8 with alpha transparency • Theme Gallery
  • JQUERY UI
  • JQUERY UI CSS FRAMEWORK
  • 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
  • PRETTY NEAT BUT I NEED MY OWN STYLES ANYWAY
  • Crap, rock on!
  • IT‘S NOT EXCLUSIVE. • Uses em‘s for all units • Scales background images • All documented • Comes with testing & debugging tools
  • WEBKIT
  • 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
  • 3D CSS TRANSFORMS!
  • ...MUCH MORE • CSS Gradients • box shadow • CSS Reflections • CSS Animations • text shadow • CSS Transitions
  • Thank you Webkit!
  • FIREBUG / WEBKIT WEB INSPECTOR
  • FIREBUG / WEB INSPECTOR • Quickly edit markup • Edit CSS • Manipulate JavaScript The save button is missing!
  • GREASEMONEKY
  • META • paul.bakaus@gmail.com • http://jqueryui.com • http://paulbakaus.com • http://wiki.jqueryui.com • http://twitter.com/pbakaus • http://dev.jqueryui.com
  • THANK YOU FOR YOUR ATTENTION. http://paulbakaus.com / @pbakaus