Rapid Prototyping With J Query

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    8 Favorites

    Rapid Prototyping With J Query - Presentation Transcript

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

    + Bootstrap Bootstrap , 2 months ago

    custom

    1162 views, 8 favs, 2 embeds more stats

    Paul Bakaus' presentation on using jQuery UI to cre more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1162
      • 921 on SlideShare
      • 241 from embeds
    • Comments 0
    • Favorites 8
    • Downloads 45
    Most viewed embeds
    • 216 views on http://bootstrap.pl
    • 25 views on http://aulapolska.pl

    more

    All embeds
    • 216 views on http://bootstrap.pl
    • 25 views on http://aulapolska.pl

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories