Designing Powerful Web Applications Using AJAX and Other RIAs

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.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + guest9107f7 guest9107f7 2 years ago
    you forgot silverlight,



    and Ajax the XMLHTTP object was created by Microsoft (you missed that too) due ?
Post a comment
Embed Video
Edit your comment Cancel

57 Favorites & 3 Groups

Designing Powerful Web Applications Using AJAX and Other RIAs - Presentation Transcript

  1. Designing Powerful Web Applications with AJAX & Other Rich Internet Applications David Malouf & Bill Scott UI 11 Cambridge, MA October 9, 2006
  2. Breakdown of the day
    • Section 1: … from the beginning
      • Defining RIAs & RIA Technologies
      • How to pick the right technology for your project
      • Looking at current examples of RIAs
    • Section 2: Interaction Design for RIAs
      • Understanding Patterns
      • AJAX Design Patterns
      • Design Principles
    • Section 3: Design Practice
      • Tools of the trade
        • Designing
        • Communicating Design
      • Communicate this RIA (exercise)
    • Section 4: Design your own RIA
      • What is “design”—the verb?
      • Design your own RIA (exercise)
  3. What is an RIA?
    • Give credit, where credit is due …
      • Macromedia (today Adobe) coined the term “Rich Internet Application” to describe the growing trend of adding media richness (more motion internal to a single page view) due to the creation of applications using their product Flash MX.
    • The simple answer:
      • Connected
      • Distributed
      • Local
      • Intelligent
      • Moving
  4. What does it mean for us today?
    • Emulating desktop behaviors
    • Cinematic Effects
    • Client-side (in browser) …
      • Data management
      • Business logic management
    • Re-definition of the “page” metaphor
    • Required connection to local machine (optional)
  5. Emulating Desktop Behaviors
    • Drag & Drop
    • Menu & Tool bars
    • Windows & Wizards
    • Panels
    • Trees
    • Form validation
    • Non-HTML controls
      • Accordian
      • Combobox
      • Spinner box
      • Sliders
    • Keyboard Actions
    • Context Menus
    Google Spreadsheet
  6. Cinematic Effects: Animation for added context
    • Where am I going? Where was I?
    • Action completion
    • Object state change
    • System progress
    • Animation for aesthetic reasons is also viable
    LaszloSystems
  7. What happens to our page? “ There is no [page].” - Neo “ There is no page; only pathways” -- Emily Chang & Max Kiesler of ideacodes A page is a metaphor of a moment of uninterrupted context Kayak
  8. What’s all the fuss about Web 2.0?
    • O’Reilly as trend spotter …
    • RIAs is only one component of the trend
    • Other components
      • User generated
      • Mashed up & Remixed
      • Open & iterative
      • Limited designer role (if at all)
    • Separately nothing new, but a trend (critical mass) makes it worth noting.
    • Sir Tim Berners-Lee’s warning not to create new bubble – [The Register – Aug ’06]
  9. The Technologies
    • DHTML – HTML + JavaScript + CSS
    • AJAX – DHTML + XML
    • Flash
    • Browser Extensions/Plug-ins
    • Java
    • ActiveX
    • Others not to be discussed
      • XUL, CURL, etc.
    • Backend Frameworks
  10. Pure Browser: DHMTL & AJAX
    • Nothin’ but browser
    • Uses very open technologies
    • Allows for simple richness
    • AJAX – new info from server without refresh
    • A JavaScript call makes a query to the server
    • Server returns XML
    • JavaScript manipulates CSS to reformat XML in place on existing screen
  11. Visualizing the AJAX effect JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)
  12. Flash (by Adobe)
    • Requires an installed plug-in
    • Created to bring animation and interactivity to the web
    • Uses vector graphics
    • Not native, but ubiquitous // open format
    • Visual development environment
      • Tied to Flex development environment
    Goowy
  13. Extensions
    • Different browsers have different ways of adding extensions to themselves.
    • Behaves as if a part of the browser
      • Toolbars
      • Status bars
      • Sidebars
      • Menu add-ons
    • Greasemonkey for Firefox
    Google Notebook
  14. Java & ActiveX (with .NET)
    • Installed applications that can …
      • run inside the browser window
      • control the browser
      • connect the browser to the rest of the local client
    • Virtual Machines & Frameworks
      • Java requires a pre-installed virtual machine or emulator. Once installed any Java-base application can run.
      • Frameworks are a collection of components and controls
        • .NET requires the installation of the framework
        • SWING or AWT are two frameworks for Java
    IntraLinks
  15. Backend Frameworks
    • DOJO
    • Script.aculo.us
    • Rico
    • Ruby on Rails
    • ASP.NET
    • Yahoo! User Interface Library (YUI)
    • Atlas
    • Backbase
  16. Choosing a Technology
    • Deployment Environment
      • Local clients
      • Enterprise considerations
      • Iteration cycles
    • Development Environment
      • Training & capabilities of team against time and resources available for project
    • The Design
      • Browser to desktop connection
  17. Deployment
    • Can my users install something?
      • Tech savvy enough
      • Enterprise allow them to
    • Do I plan on “tweaking” rapidly, or will my product follow a more standard release cycle?
    • Am I willing to use closed or otherwise non-ubiquitous technologies?
  18. The Design
    • How much integration do I need to add between the browser and the rest of a user’s local desktop environment?
    • Does my design require cinematic effects between scenes, or just within them? (or none at all?)
    • At what point do I need to manage calls to and from a remote server in my design?
  19. Keeping up with the Tech
    • Well it is really up to you …
    • Books
    • Blogsphere
    • Tech Meetups
    • UnConferences
    • Conferences
    • … well you are here.
  20. Exercise: Let’s start a project
    • Goal: Pick a technology for your project. This project will be continued.
    • Criteria for the design
      • Application Service (Hosted)
        • Infinite Audience
        • Business-to-Business community
      • File Management System
        • Moving lots of files
      • Collaborative
      • Media Centric
    • Criteria for Development
      • Old-school software engineering;
      • Highly formally educated group
  21. Time to explore
    • Empressr – Desktop Presentation
    • NetFlix – DVD by mail
    • Meebo – Web-IM
    • Flickr – Photo Sharing
    • Zimbra – Web Groupware
  22. Section 2 HERE
    • BILL’s Section
  23. Section 3: Design Practice Designing and Communicating Design
  24. Designing vs. Communicating vs. Documenting
    • Designing –conceive an idea through a design process.
    • Communicating
      • Get buy in
      • Collaborate to ensure proper implementation
    • Documenting
      • Archive ideas
      • “ Hit by a bus” contingency
  25. Design-ING
    • != conceiving, creation, producing
    • Formalized process
      • Studio
      • Divergent unrefined thinking followed by
      • Evaluation, testing, and reflection
  26. 3 basic steps to designing
    • Sketching
    • Framework and Language
    • Refinement
  27. Sketching What do you see here? Rapid & Rough Multiplicity Communicate CONCEPTS
  28. Framework and Language Create Structure Navigation Language Object Action Modifiers
  29. Refinement Details Behavior
  30. Designing Behavior
    • Time: Behavior cannot be static
    • It is not “flow” between contexts;
    • happens within a context
    • Multiple states
      • Sometimes Fluid motion
    • Hard to communicate “intra-contextual” behaviors using static renderings
      • More difficult to test it.
  31. Sample Process
    • Sketch on paper/whiteboard
    • Scan/Photograph into digital environment
    • Trace (or re-draw) using computer tool
    • Use “ blocking ” tool to define framework
    • As further detail is required to refine framework fill in blocks using a higher fidelity drawing tool.
    • Add interactivity so that behavior can be experienced , evaluated, tested, and reflected upon.
  32. Discuss: Example Process
    • What Properties through this process did we notice that might apply to the tools we decide to use?
  33. Pain
        • Wireframing Ajax is a [expletive]... We have to determine all of the things a user might do, and wireframe the blessed moments of each possibility. - Jeffrey Zeldman, Web 3.0
  34. The Shift
  35. Assumption
    • All interaction is course-grained at page level
    • Wireframes capture layout, priority, behavior & content
  36. Impact
    • Full page refresh is replaced by small content updates.
    • Hyperlink, Submit are replaced by a full range of interactive events.
    • Characterized by micro-interaction and micro-updates leading to micro-states.
  37. Impact
    • Interaction is characterized by direct manipulation, lightweight actions and in-page actions
    • Nuances are multiplied
      • invitation
      • activation
      • deactivation
      • affordances
      • constraints
      • timing
      • delays
      • rate of feedback
  38. Drag & Drop Interesting Moments
    • Page load
    • Mouse hover over draggable object
    • Mouse down on draggable object
    • Drag initiated (mouse down, mouse moves >= 3 pixels)
    • Drag over valid target area
    • Drag over invalid target area
    • Drag over original location
    • Drop accepted
    • Drop rejected
    • Drop on original location
  39. Drag & Drop Actors
    • Page
    • Cursor
    • Tool Tip
    • Drag object
    • Drag ghost
    • Original location
    • Drop target
  40. Drag & Drop Matrix
  41. my.yahoo Interesting Moments
  42. Adaptive Path: Micro States
  43. Yahoo!: Micro States
  44. Animation with Visio
  45. Animation with Photoshop
  46. Section 4: Designing an RIA
    • “ I design software”
    • “ I’m wearing design er jeans”
    • “ interaction design ”
    • “ design school”
    • “ That design looks cool”
  47. What is “design”?
    • Design as noun (I like that “design”)
      • Is the result of a conceived idea, whether or not it was actually “designed”
    • Design as verb (I “design” software)
      • A process of creativity
      • Non-linear
      • Assumes there is more than one elegant solution to any single problem
      • Considers the measurable and the aesthetic
  48. Simple Design Exercise
    • Problem:
    • I need a device that allows a user to move & select objects, text and graphics in a graphical interface
    • Let’s work through this …
  49. Making Design (verb) Work
    • Divergent thinking
      • Skew, bend, melt, tear … change!
    • Evaluation is separate from Ideation
      • Put your judge on hold
    • Multiple minds
    • Model, Model, Model
    • Taking the road least traveled can bring you back to the freeway
      • Process ideas in disconnected ways
      • Connect disconnected ideas in separate exercise
  50. Exercise: Criteria From Section 1
    • Criteria for the design
      • Application Service (Hosted)
        • Infinite Audience
        • Business-to-Business community
      • File Management System
        • Moving lots of files
      • Collaborative
      • Media Centric
    • Criteria for Development
      • Old-school software engineering;
      • Highly formally educated group
  51. Exercise: Moving forward
    • Need to share corporate media objects across different enterprises
    • Need to collaborate on these objects
      • Annotate
      • Version
      • Append
    • Need to publish out to 3 rd parties
    • Don’t worry we aren’t doing this whole application …
  52. Exercise: Annotate
    • Design a set of screens that make up one page
    • Displays both a list objects and single object
    • Allows the user to comment on that object
    • Track commenting
    • Annotate on media directly
    • Create a collection and “send” that collection
  53. Questions ? Resources: Dave’s Blog: www.synapticburn.com Bill’s Blog: looksgoodworkswell.blogspot.com

+ David MaloufDavid Malouf, 4 years ago

custom

12498 views, 57 favs, 9 embeds more stats

This is the slide deck from the workshop given at U more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 12498
    • 12485 on SlideShare
    • 13 from embeds
  • Comments 1
  • Favorites 57
  • Downloads 1
Most viewed embeds
  • 3 views on http://techno-sphere.blogspot.com
  • 2 views on http://synapticburn.com
  • 2 views on http://stratagility.com
  • 1 views on http://www.indianpad.com
  • 1 views on http://gmodules.com

more

All embeds
  • 3 views on http://techno-sphere.blogspot.com
  • 2 views on http://synapticburn.com
  • 2 views on http://stratagility.com
  • 1 views on http://www.indianpad.com
  • 1 views on http://gmodules.com
  • 1 views on http://elliotjaystocks.com
  • 1 views on http://www.bee-box.com
  • 1 views on http://www.stratagility.com
  • 1 views on http://www.slideshow.com

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