October 9, 2006 Designing Powerful Web Applications with AJAX & Other Rich Internet Applications David Malouf & Bill Scott UI 11 Cambridge, MA October 9, 2006

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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)

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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)

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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 Gliffy

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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]

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 Visualizing the AJAX effect JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 Backend Frameworks ● DOJO ● Script.aculo.us ● Rico ● Ruby on Rails ● ASP.NET ● Yahoo! User Interface Library (YUI) ● Atlas ● Backbase

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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 (functionality, brand) – Browser to desktop connection

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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?

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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?

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 Keeping up with the Tech Well it is really up to you … ● Books ● Blogsphere ● Tech Meetups ● UnConferences ● Conferences … well you are here.

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 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

Designing Powerful Web Applications with AJAX & Other RIAs October 9, 2006 Time to explore ● Empressr – Desktop Presentation ● NetFlix – DVD by mail ● Meebo – Web-IM ● Flickr – Photo Sharing ● Zimbra – Web Groupware