![Page 1: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/1.jpg)
May 5, 2006 // Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
Next Generation Development
New Paradigms in User Interfaces
![Page 2: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/2.jpg)
May 5, 2006 // Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
“All crises begin with the blurring of one paradigm and the consequent loosening of the rules for normal research”. -T.S. Kuhn
![Page 3: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/3.jpg)
» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
![Page 4: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/4.jpg)
» UI: History Channel Overview» UI through the times» GUIs & the Web Impact» Stalwart Soldiers» The New Paradigm
» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
![Page 5: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/5.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: UI Through the Times05.05.2006
UI Shifts Corresponding to Increased User Base
1960s: Punch Cards
1970s: Command Line
1980s: GUI
1990s+: Web
? Next ?
![Page 6: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/6.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: UI Through the Times05.05.2006
1960s: Punch Cards
1970s: Command Line
1980s: GUI
1990s+: Web
? Next ?
But is the Browser really an advance in user interface design?
Let’s look at what was going on before NCSA Mosaic changed it all…
![Page 7: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/7.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: UI Through the Times05.05.2006
» GUI Advances» Desktop Paradigm
» Trash Bin» Tabs» Menu Bars
» Interactivity» Haptic Devices» 3D Displays
PARC Cone Tree, 1991
Robertson, Mackinlay & CardDemonstrating a trend towards rich, real-time interaction.
![Page 8: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/8.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: GUIs & Web Impact05.05.2006
Form
Form
Web
Server
Punch
Card
Ticker
Mainframe
The user fills out a form, sends it to a processor, and patiently sips coffee awaiting the results.
What does that remind us of?
![Page 9: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/9.jpg)
» Many Efforts Continued…» Applets» Flash» Web Start
» But:» All require new run-times» Lack tight browser integration» Require learning new technologies
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: Soldiers05.05.2006
![Page 10: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/10.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: The New Paradigm05.05.2006
Asynchronous JavaScript + XML
AJAX
» Browser is the run-time.» Has access to all browser elements/functions.» NO new technologies required.» Frees us from requirement to submit entire page.
![Page 11: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/11.jpg)
» UI: History Channel Overview» The New Paradigm: Ajax
» Definition» Architecture» Examples
» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
![Page 12: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/12.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Definition05.05.2006
Asynchronous JavaScript + XML
» Defines an Approach:» Standards-based presentation (CSS, XHTML)» Dynamic Display/Interaction via DOM» Data manipulation with XSLT» Asynchronous data/code retrieval » Bound in JavaScript (ECMAScript)
AJAX is not, itself, a new technology.
AJAX is a term that identifies a method to load and manipulate data from a server in a web browser, without reloading the entire page.
![Page 13: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/13.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Definition05.05.2006
“All crises begin with the blurring of one paradigm and the consequent loosening of the rules for normal research. “ -T.S. Kuhn
![Page 14: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/14.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
Ajax Engineis loaded into the
browser
Engine intercepts user events and requests
Engine performs:• Data Validation• Interface Changes• Server Requests
![Page 15: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/15.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
Can also forward new code, and
serialized objects.
![Page 16: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/16.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
No new technologies; instead, a new way of using them.
![Page 17: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/17.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
In the “old” method, we fire off a request, and lock while waiting for the response.
(Users became used to waiting)
![Page 18: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/18.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
AJAX decouples the request from the response.
(No more waiting; the Engine works in the “background”)
![Page 19: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/19.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Some Examples05.05.2006
» Ajax Examples» Google Maps» Google Suggest» MyYahoo» AOL A9» Zillow.com» DesignBais
![Page 20: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/20.jpg)
» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management
» Blurred Boundaries» MVC: Help from an old friend» Design Patterns: Control at last
» Design: Return of the Lost Art» State of the Art» Future
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
![Page 21: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/21.jpg)
» Blending Roles?» Functionality now in JavaScript» Who codes the JavaScript?
» Designers?» Middleware Developers?
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Consider an Autocomplete Example *…
* Inspired by Thomas Fuch’s(?) Flash-based demonstration:
http://www.phppatterns.com/stuff/latency.html
![Page 22: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/22.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
![Page 23: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/23.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
A
Our Ajax Engine is triggered by the key_up event, and sends a request to the server to filter the name list on “A”.
![Page 24: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/24.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Some suggestions are returned and presented:
A
>
Andy Dick
Andy LaMora
Anthony Jefts
Arturo Sandoval
>
![Page 25: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/25.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
An
>
>Andy Dick
Andy LaMora
Anthony Jefts
![Page 26: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/26.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
And
>
>Andy Dick
Andy LaMora
![Page 27: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/27.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
Andy
>
>Andy Dick
Andy LaMora
![Page 28: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/28.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
Andy
>
>Andy Dick
Andy LaMora
![Page 29: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/29.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
Andy L
>
>Andy LaMora
![Page 30: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/30.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>That’s the one, so I hit tab to select it.
Andy LaMora
>
>Andy LaMora
![Page 31: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/31.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
Great!
But is a real world example? What if our network lags?
Lets try something more realistic:
![Page 32: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/32.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
A
![Page 33: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/33.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
An
Hmmm…. Our engine is still processing requests, but there are no results. Network must be slow.
![Page 34: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/34.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
And
We’ll keep typing.
![Page 35: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/35.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
Andy
Still nothing!
![Page 36: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/36.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
Andy
Well now something is happening, but…
>
Andy Dick
Andy LaMora
>
![Page 37: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/37.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
Andy
??? I’m not typing ??
>
Andy Dick
Andy LaMora
Anthony Jefts
>
![Page 38: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/38.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
Andy
What the heck is going on…
>
Andy Dick
Andy LaMora
Anthony Jefts
Arturo Sandoval
>
![Page 39: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/39.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Now if I hit tab, I get the wrong name:
Andy Dick
>
Andy Dick >
![Page 40: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/40.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
What Happened?
Our Ajax Autocomplete module was too naïve. It didn’t know, or forgot to remember:
NETWORK LATENCY VARIES WITH TIME
![Page 41: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/41.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
» Three factors introduced error:
» HTTP transport» Rely on Request/Response model
» Asynchronous Communication» Every request is independent» No transaction to bind our request/response pairs
» Network Lag» Our first requests returned last;
» {1,2,3,4} returned {4,3,2,1}» But could have been any order at all.» Latency varies with time!
![Page 42: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/42.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
» So, what kind of problem is this anyway?
» User Interface?
» Design?
» Network protocol?
One could assign sequence numbers to the requests, of course. However, there is no “standard” solution as yet.
Ajax introduces some new project management problems, and requires some thought viv. project contributor roles.
![Page 43: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/43.jpg)
» To The Rescue: MVC» Model View Controller in UI» Each GUI Item developed on MVC
» Callback Functions» Element Identifiers
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: MVC05.05.2006
![Page 44: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/44.jpg)
» Raising the Bar on JavaScript Development» Thinking about Roles» Opportunity: Better Code
» Design Patterns» Command Pattern» Observer Pattern
» Attention to Division of Labor» Programmers Program» Designers Design
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Design Patterns05.05.2006
![Page 45: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/45.jpg)
» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art
» Metaphors and Affordances» Example: Control Options» IA Impact
» State of the Art» Future
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
![Page 46: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/46.jpg)
» Metaphors» Usage Model (eg Desktop)» Workflows patterned after model» Icons Indicate Purpose
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Metaphors & Affordances05.05.2006
» Affordances» Proper use is implied» Subtle employment of familiar cues
![Page 47: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/47.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Example: Control Options05.05.2006
Instructions: Order Your Questions
The Moon is a Planet
Venus is a Comet
Alpha Centauri is a Star
Yes No
Yes No
Yes No
We want to adjust the order that our questions appear in a survey.
(With Ajax, of course)
Our containers can be dragged
around
![Page 48: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/48.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Example: Control Options05.05.2006
Instructions: Order Your Questions
So, it should be clear to the user what can be done – from the containers alone.
But, is it clear what can be done here?
![Page 49: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/49.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Example: Control Options05.05.2006
Instructions: Order Your Questions
Provide affordances that indicate function to the user – invite the correct usage.
Provide the containers with
“grips”.
![Page 50: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/50.jpg)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Example: Control Options05.05.2006
Instructions: Order Your Questions
The Point: Web UI designers must think like desktop application designers!
Need Ajax Toolkits/Frame
works to provide these
(TopCoder Opportunity?)
![Page 51: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/51.jpg)
» Impact on Information Architects» Sovereign vs. Page-Based Interaction
Should it behave like a desktop program?Do we need to communicate state?
» Best use of Rich Behavior
Use affordances to suggest next steps.Colors and responsiveness indicate state: OnBlur()
» Mindful of MVC/Labor Divisions
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: IA Impact05.05.2006
![Page 52: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/52.jpg)
» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art
» IFrame vs. XMLHTTPRequest » Browser Security» Acceptance
» Future
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
![Page 53: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/53.jpg)
» IFrames» Wide Browser Support» Consistant Code Base» Can be faster for large requests» Can lessen zone problems» Very hard to debug» Back-button support
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] State: IFrame vs. XMLHTTPRequest05.05.2006
» XMLHTTPRequest» Limited browser support» Requires ActiveX on IE» Different Code Bases» Faster for small requests» Designed for the purpose» Easier to parse return data
![Page 54: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/54.jpg)
» Browser Security is an Issue» Zones
» IE: Active X Requirements
» Future standards are in flux
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
[ ] State: Browser Security
The browser security model prevents us from (easily) referencing servers other than the page source.
IE requires ActiveX for XHR. ActiveX is switched off by default (even though MS invented it).
JSON vs XML? Will MS play along?
![Page 55: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/55.jpg)
» Software Frameworks» Java Server Faces» Atlas (Microsoft)» Ruby On Rails
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
[ ] State: Acceptance
» Applications» Google» Yahoo » Internals» ASPs!
![Page 56: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/56.jpg)
» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future
» Service Orientated Architecture» Application Service Providers
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
![Page 57: May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development New Paradigms in User Interfaces](https://reader035.vdocument.in/reader035/viewer/2022062322/56649ea85503460f94bab84d/html5/thumbnails/57.jpg)
May 5, 2006 // Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
“...though the world does not change with a change of paradigm, the scientist afterwards works in a different world. “