The term Rich Internet Application was first coined by the Macromedia Product Management team to explain the direction they saw the application of their technology platform Flash + what was then called Remoting enabling within web-based applications. It is important to understand that RIA as a concept is no longer owned by Macromedia (or bought by Adobe), but is a term that captures the general spirit of what the Flash platform was trying to achieve, but that many technologies can now enable similar behavior, often even better than Macromedia can achieve. Connected: It lives on the Network Distributed: Both the DATA and the GUI are distributed remotely (i.e. over the network) Local: Access to local computation outside of the browser itself is required: file system, multimedia drivers, saved data Intelligent: The client shares the logic of the application with the server Moving: Animation is used for GUI and Cinematic effects.
Drag & Drop is the ability to select an object with your mouse pointer and with a mouse-down action hold that object and with a gesture of the mouse move that object. Usually the end goal is to release that held object over a target. Releasing the object triggers a new action like a location change, or even triggers a whole new macro of actions. Menus & Tool bars: These are containers that help designers create a system of discoverability of actions when a list of actions becomes too many to be displayed all at once within a screen view. Toolbars more specifically are done by using icons instead of text as trigger buttons for actions, usually to be enacted on selected objects. Windows & Wizards: Windows are moveable, resizable containers where GUI elements can be placed. This is usually done for hierarchical or linear progressing reasons. A Wizard can take place in a window, but it doesn’t have to. It is characterized by controlling the flow of tasks through a linear progress, whose end completes a more complex set of tasks that if done all at once would be too difficult to do. Wizards also are used to build interfaces where a first step actually determines the elements to be shown during the proceeding steps. Panels: These are like windows, however, instead of hovering over the pre-existing content on the screen, they separate an existing screen into structured action and view areas.. Trees: This is a type of hierarchical navigation using expand and collapse of nodes in order to hide the complexity of a total structure allowing the user to browse their way to discoverability. Form validation: This form of client side intelligence allows the system to check for various criteria, so that the user does not have to wait for the longer server side validation to tell them that they have in fact made a preventable error. Non-HTML Controls: There are a host of controls. These are just examples of ones that are common in desktop applications but not available in the standard set of controls within xHTML. Keyboard actions are like hotkeys (ctrl-p = print) or even our ability to use the shift and arrow keys to make selections, or that same shift key with the mouse creates a different type of selection than without the shift key depressed.. Context menus: These menus are found by either using the right mouse button or through holding down the single mouse button (PC vs. Mac)
Movement: Moving pixels on a screen has been shown to get people’s attention. Yup, that bouncing Monkey does drive people to want to shoot it. But more importantly movement can be guided to aid users with some basic understandings of the GUI they are using. Because objects are being manipulated in a metaphorical sense and not in reality, animation helps us do the following: Understand that the computer is processing (we’ve all seen progress bars or animated mouse cursors). Guide us to understand where objects go when we are done with them, or where they came from. Alert us to the state change of an object.
What did we mean when we said “page” when the metaphor first became used? Well we literally meant a page. We were creating documents and so an HTML file was a finite counting, even though when printed it actually contained multiple pages. Today that same file though can contain many documents in it, or its point isn’t even for documentation purposes. The concept of the page as we understood it is not so valuable as it once was. However, because the concept of a “get” is understood by both designers and developers as that moment in time when we have to relinquish the browser’s hold on the screen for a moment and go get a whole new collection of GUI elements. There are many reasons to still do this, most of which have little to do with the user. Further it is not the only reason we make dramatic changes to screen elements. Sometimes the task has changed so drastically what we need to accomplish that the original context of working is not viable for our continuing to maintain that context. The decision that a designer now needs to make is 2-fold: How connected are a collection of tasks to the context of the current goals of the user. What limits are in my technical architecture that might force me to otherwise change architecture. Both questions are equally important and they play off of each other. No technology is not without its constraints so don’t dismiss #2 as someone else’s problem. It is your problem as the designer of a complete system. Ignoring it will come back to haunt you later when your engineers come back to you and tell you they can’t do the original design.
Web 2.0 is really only marketing speak. What is more important is to talk individually about the particulars that make it up: RIAs (our topic today) How to architect user-generated content Creating social networks Do you want an open system that is iterative, or a closed one with longer lifecycles? “ Limited designer role” is a tricky one since well we are a designer. The purpose here though is where are you going to concentrate on aesthetics and where are you going to concentrate on system and behavioral design. The latter is not forfeitable at all.
This is NOT a comprehensive list of technologies.
Sometime circa 2005 a decision started brewing that less and less sites started supporting Netscape 4.x. Being the legacy technology that kept AJAX from happening, it was a bold move that only could have happen through the popularity of a successor to the rebel browser community that was cross platform—Firefox. Since AJAX was invented in IE 4.x it was the relinquishing of Netscap3 that was required to move on.
This effect existed first with Flash-based technologies inside of a ubiquitous browser component, but by being able to do this effect in straight (no plug-in) HTML, the tables were turned. Add in the pretty good animation features of DHTML to the puzzle and you can pretty much do anything in open standards HTML that you can do with a plug-in service like Flash.
Being a drawing, animation, development, and player all in one, it really has some good skills for bringing RIAs to life. There are particular advantages around cinematic effects and other uses for animations.
Extensions or add-ons take browsers to the next level. They add functionality that seems native to the browser in useful and powerful ways. Some are so simple but add so much value.
Scott … can you help this out?
If link doesn’t work open ford.ppt
Deployment issues are those that effect both the building of and the distributing of your application. Before you distribute you need to know if you can build it. Can you engineers master something new in the time requirements and other resource constraints of your system? Is such training worth the added cost? But afterwards, there are support questions by the user, the user’s environment, and your environment. If your environment for business reasons needs to do smaller, rapid iterations to maybe get to market faster, can your user base support the type of distribution model that will be required. Then there is lastly the ethical question that people are coming to in technology. And the legacy technology issues.
These questions focus on the product itself. Since most web applications don’t require access to the local system, a plug-in based architecture is probably not required.
I keep to the blogsphere for the most part. There are a host of RIA related blogs out there with great examples of what others are doing. BarCamps or other un-conferences are the great in person way to engage those that are doing this work in a more intimate fashion.
Empressr – A PPT solution that is built on Flash. NetFlix – Probably one of the earliest examples of RAIs with their star-ratings. They have slowly added more and more to their system. Meebo – one of the best AJAX/RIA examples because it allows for 2-way communication through a web browser using a variant of AJAX known as COMET (get it?) Flickr – The photosharing site recently removed all of its flash elements and now is only HTML/AJAX. Nice stuff. It does have desktop application that is required for bulk upload operations … If time allows we can look at how BubbleShare did the build-upload using hidden Flash elements. Zimbra – Is Email/Calendar/Contacts groupware GUI that has lots of nice AJAX being used.
Designing Powerful Web Applications with AJAX & Other Rich Internet Applications David Malouf & Bill Scott UI 11 Cambridge, MA October 9, 2006
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.
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