Designing Powerful Web Applications with AJAX & Other Rich Internet Applications
David Malouf & Bill Scott
UI 11 Cambridge, MA October 9, 2006
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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 Understanding Patterns AJAX Design Patterns Design Principles Tools of the trade
● ●
●
Section 2: Interaction Design for RIAs
– – –
●
Section 3: Design Practice
–
Designing Communicating Design
–
●
Communicate this RIA (exercise) What is ―design‖—the verb? Design your own RIA (exercise)
Section 4: Design your own RIA
– –
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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:
–
–
– – –
October 9, 2006
Connected Distributed Local Intelligent Moving
Designing Powerful Web Applications with AJAX & Other RIAs
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 Connection to local machine (optional)
●
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Emulating Desktop Behaviors
●
Drag & Drop
Menu & Tool bars Windows & Wizards Panels Trees
●
Non-HTML controls
– –
●
Accordian Combobox
●
–
–
●
Spinner box
Sliders
●
●
●
Form validation
Keyboard Actions Context Menus
●
Google Spreadsheet Gliffy
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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 NetFlix
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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]
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
The Technologies Behind RIAs
●
DHTML + HTML + JavaScript + CSS AJAX = DHTML + XML(or JSON) Flash
●
●
●
Browser Extensions/Plug-ins
Java ActiveX
●
●
●
Others not to be discussed
–
XUL, CURL, etc.
●
Backend Frameworks
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Pure Browser: DHMTL & AJAX
●
●
●
Nothin’ but browser Uses very open technologies Allows for simple richness
AJAX – new info from server without page refresh ● A JavaScript call makes a query to the server ● Server returns XML ● JavaScript manipulates CSS to reformat XML in place on existing screen
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Visualizing the AJAX effect
JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
Empressr
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
Del.icio.us Firefox Add-on
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
●
Ofoto
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Backend Frameworks
●
DOJO Script.aculo.us Rico
●
●
●
Ruby on Rails
ASP.NET Yahoo! User Interface Library (YUI)
●
●
●
Atlas
Backbase
●
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Choosing a Technology
●
Deployment Environment
– – –
Local clients Enterprise considerations Iteration cycles Training & capabilities of team against time and resources available for project Browser to desktop connection
●
Development Environment
–
●
The Design (functionality, brand)
–
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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?
●
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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?
●
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Keeping up with the Tech
Well it is really up to you …
●
Books Blogsphere
●
●
Tech Meetups
UnConferences
●
●
Conferences
… well you are here.
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
Moving lots of files
–
File Management System
●
–
Collaborative
–
●
Media Centric
Old-school software engineering; Highly formally educated group
Criteria for Development
– –
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Time to explore
●
Empressr – Desktop Presentation NetFlix – DVD by mail Meebo – Web-IM
●
●
●
Flickr – Photo Sharing
Zimbra – Web Groupware
●
October 9, 2006