Designing Powerful Web Applications with AJAX - PowerPoint PPT Presentation

Loading...

PPT – Designing Powerful Web Applications with AJAX PowerPoint presentation | free to download - id: 16713-ODBhY



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Designing Powerful Web Applications with AJAX

Description:

Designing Powerful Web Applications with AJAX & Other RIAs ... Meebo Web-IM. Flickr Photo Sharing. Zimbra Web Groupware. Section 2 HERE. BILL's Section ... – PowerPoint PPT presentation

Number of Views:158
Avg rating:3.0/5.0
Slides: 55
Provided by: davidh193
Learn more at: http://billwscott.com
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Designing Powerful Web Applications with AJAX


1
Designing Powerful Web Applications with AJAX
Other Rich Internet Applications
  • David (Heller) 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 designthe 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
Whats all the fuss about Web 2.0?
  • OReilly 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-Lees 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 users 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 Lets 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
  • BILLs 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
Rapid Rough Multiplicity Communicate CONCEPTS
What do you see here?
28
Framework and Language
Create Structure Navigation Language Object Ac
tion 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
47
  • I design software
  • Im wearing designer jeans
  • interaction design
  • design school
  • That design looks cool

48
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

49
Simple Design Exercise
  • Problem
  • I need a device that allows a user to move
    select objects, text and graphics in a graphical
    interface
  • Lets work through this …

50
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

51
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

52
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 3rd parties
  • Dont worry we arent doing this whole
    application …

53
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

54
Questions ?
  • Resources
  • Daves Blog
  • www.synapticburn.com
  • Bills Blog
  • looksgoodworkswell.blogspot.com
About PowerShow.com