1 / 20

Design Patterns of Web 2.0. Ajax and more!

Design Patterns of Web 2.0. Ajax and more!. Michael Curry Designer/Developer of PushHandle, Inc. About Me. I am a UI designer and internet enthusiast NYU grad. B.A. in Media Studies and Visual Comm. 6 years working interactive design positions from Retail to Analytics and Optimization

kreeli
Télécharger la présentation

Design Patterns of Web 2.0. Ajax and more!

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Design Patterns of Web 2.0. Ajax and more! Michael Curry Designer/Developer of PushHandle, Inc.

  2. About Me • I am a UI designer and internet enthusiast • NYU grad. B.A. in Media Studies and Visual Comm. • 6 years working interactive design positions from Retail to Analytics and Optimization • Currently I work for my own startup design company: PushHandle Inc.

  3. Overview • What is Ajax? • What are Design Patterns? • Recent successes in modern UI design • “PushHandle Messenger” Walkthrough • Q & A

  4. What is Ajax? • Term coined by Jesse James Garret of Adaptive Path in 2005. • Main idea/goal is to achieve uninterrupted interaction between the browser and servers for a better user experience. • Main interruption defeated by Ajax is the unnecessary page refresh. An action now can occur with out the wait time of same page loading again after retrieving server information.

  5. What are Design Patterns? • Design patterns are generally considered common problems found in a specific type of design. • With Ajax being practiced for a few years now – new design patterns of Web Design have surfaced. • In this discussion, I want to point out some of these patterns but more importantly some of great solutions have been created.

  6. Modern UI Success! • JavaScript Libraries: YUI, Jquery, & Prototype • Script.aculo.us Sites • Jquery Sites • YUI Sites

  7. Javascript Libraries: YUI, Jquery, & Prototype • A JavaScript library has the motto: “…make JavaScript suck less”. – mochikit.com • No, Cross browser handling sucks and non-standard browsers suck! (Less than 15% of web users use IE6: hooray!) – http://www.w3schools.com/browsers/browsers_stats.asp • Still, it’s true they provide less typing which leads to condensed file sizes and usually less problems. • No matter which you pick – necessary tool.

  8. Javascript Libraries… • For Starters: YUI • For Designers: Prototype and Script.aculo.us • For Devs: JQuery

  9. YUI success Layout/Element Oriented improvements. • “Muttons” - Contextual/Assoc. Navigation • Inline Editor – No repetition, or space hog • Both are not exactly form elements • If you are not aware of YUI-reset.css - get it! • * YUI 3 coming soon…

  10. “Muttons” “Muttons” are a display element that give great contextual navigation while keeping interface clean, simple, and unintimidating. 1.Initial View 3. Action Initiated 2. Action Invitation 4. Action Results and Sub-actions reveal

  11. Inline Editing Inline Editing uses Ajax to accomplish binary page goals (display and edit) in one streamlined dynamic page. 1.Initial View 2.Invitation to Action 3.Quick Same Page Inline Edit

  12. Jquery Success • Most Popular Library now. Dev favorite. • FriendFeed : “real-time” twitter, mail, blog, communication mashup. • WundrBar and Tripeedo – amazing RegExp project. Although still needing some additions built for future of web. • Both incredible projects that take idea of Ajax to a new level.

  13. Scripty Notes • Technically is an extension of Prototype.js – one of oldest js libaries. But packages it in its releases. • Started as a way to do cool animations without having to add flash to a page. • Is the default lib. for Ruby on Rails dev: Basecamp - 37 great UI design ref • *http://scripty2.com*

  14. Script.acul.ous Success • Freckle Time Tracking: Created by same folks who created the library: Thomas Fuchs and Amy Hoy • How do we use inputs? Why so many? When we can do tags & descriptions in same box. • More… http://letsfreckle.com/blog/

  15. PushHandle Messenger • Inspired by various sites we talked about – I have started a webapp for “smart-chatting” • “Smart-chatting” means a lot of things. But essentially it is about taking known conventions of an instant messenger and improving the performance.

  16. Twitter, Google, and IM • These 3 services are among the most used and known in internet and modern communication. • What is most interesting about this is they are all interacted in the same way. The main differences are results and expectations. • To use anyone of these – you simply type into an input and submit. SO SIMPLE – BUT SATISFYING! • IM is the oldest & yet not much has changed since the days of AOL member chat. • But so much more is available today…

  17. Thanks For the Time Feel Free to contact me: mcurry@pushhandle.com

More Related