Section1-FromTheBegi..
-
Upload
sampetruda -
Category
Documents
-
view
406 -
download
3
description
Transcript of Section1-FromTheBegi..
October 9, 2006
Designing Powerful Web Applications with AJAX &
Other Rich Internet Applications
David Malouf & Bill Scott
UI 11Cambridge, MAOctober 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 SpreadsheetGliffy
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
KayakNetFlix
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 TechWell 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