Rich Internet Application: Challenges inDesign, Development & Deployment

By07030244006

Mahesh PanchalSDM – 07-09

Agenda

• Objective• Methodology• Brief on RIA• Analysis of work done• Alternative Solutions• Proposed Solutions• Findings, Recommendations & Conclusion

Objective

To study, Analyze Rich Internet Applications. & Find out issues arises while Design, Development & Deployment of RIAs.

Methodology• I Studied the RIA by collecting data through Internet. It includes study of various white

paper, News, Articles, Blogs, Success stories, Case, forums & site, additionally I’ll go through

books & reference material

• Afterword it’s mandatory to know How Are RIAs Built? / Technologies / Use of Adobe

technology platform. Working in the same direction I have Hands on tools used to build RIAs

• Figure out the problems while adopting RIAs

• Then found the alternative solution. & afterword I have given proposed solution.

• Finally study comes to end by Findings, Rcommandation & conclusion.

Introduction: Rich Internet Applications

• Internet Applications look and feel like desktop applications.

• RIAs can have many different types of technology

• Browser & platform Independent• RIA background

“By 2010, at least 60 percent of new application development projects will include RIA

technology.” Gartner

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid CellEditing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text

Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In ContextProgress. Inline Status. Character Counter. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic

Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. DropInvitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate.

Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition.Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide

Transition. Rich Internet Object. Available. Selected. Identifiable Object.Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid CellEditing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text

Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In ContextProgress. Inline Status. Character Counter. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic

Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. DropInvitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate.

Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition.Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide

Transition. Rich Internet Object. Available. Selected. Identifiable Object.

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid CellEditing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text

Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In ContextProgress. Inline Status. Character Counter. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic

Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. DropInvitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate.

Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition.Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide

Transition. Rich Internet Object. Available. Selected. Identifiable Object.Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid CellEditing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text

Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In ContextProgress. Inline Status. Character Counter. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic

Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. DropInvitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate.

Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition.Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide

Transition. Rich Internet Object. Available. Selected. Identifiable Object.

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid CellEditing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text

Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In ContextProgress. Inline Status. Character Counter. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic

Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. DropInvitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate.

Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition.Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide

Transition. Rich Internet Object. Available. Selected. Identifiable Object.Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid CellEditing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text

Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In ContextProgress. Inline Status. Character Counter. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic

Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. DropInvitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate.

Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition.Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide

Transition. Rich Internet Object. Available. Selected. Identifiable Object.

Analysis of Work done• Problem under Research• Steps involved in Designing

1. What information will go?2. Priorities the information:

Deciding How Much Richness to Add

3. Controls: Interactive Page Elements

4. Placing theme: Refreshing Part of the Page

5. Flow: Breaking the Page Model

1. Fundamental Tasks2. User Experience3. Nomenclature and relationships

exist among the various pieces of content

1. It is tempting to design many new features that add a lot of richness

2. Takes time for people to adapt to new approaches

3. Usability testing will help

1. Allow users to interact with page elements

2. primary challenge is to communicate

3. Appearance of the element or show the controls

4. consistently throughout the interface

Use of visual attention(ex: is attracted by movement and

high color contrast)

1. We develop a mental model of how things work.

2. Break application appropriately3. Don’t try to put everything into one

“page” just because you can.4. Google Vs. Yahoo page model

• Problem under Research• Steps involved in Designing

1. What information will go?2. Priorities the information:

Deciding How Much Richness to Add

3. Controls: Interactive Page Elements

4. Placing theme: Refreshing Part of the Page

5. Flow: Breaking the Page Model

Research is based on Problems arises while Design, Development & Deployment of RIAs

Issues arises while adopting RIA

• Purpose of system• Requirement• Issues arise while development & Deployment

Designing

Alternative Solutions• Selecting RIA Technology will

lead the pack– Adobe Flex & AIR– AJAX– Microsoft Silvelight– JavaFX– OpenLaszlo– Java Script / Applet

TutorialsHands on tools used to build RIAs

Tools flex

• Selecting RIA Technology will lead the pack– Adobe Flex & AIR– AJAX– Microsoft Silvelight– JavaFX– OpenLaszlo– Java Script / Applet

Adobe Flex & Air1. Open source framework2. Application deployed to any web

browser enabled with Flash plugin 3. Which is available on 90% of the

machines4. Flex and AIR will provide big market

share of RIAs to Adobe

AJAX1. Ability to be deploy2. certain limitations3. behaving differently with

different browsers

Microsoft Silverlight1. Requires runtime browser Plugin2. Silverlight 1.0 for mobile3. Silverlight 2.0 has support .Net

Framework4. Less compatibility with platforms

JavaFX1. A product from Sun Microsystem2. Group of products: JavaFX Script &

JavaFX Mobile

OpenLaszlo1. Open Source platform2. The applications can be either

served as Java Servlets or a Flash (swf) file in a browser

Tutorials

Java Script / Applet1. Grandfathered technology2. Currently it is being integrated

in the new technologies

TutorialsGet tremendous amount of online help

Hands on tools used to build RIAs

Proposed Solution

• Which RIA technology is best for you?• Limitations• Use: best of the AJAX & Adobe

AJAX when time-to-market is critical and updates are frequent& For large-scale user productivity applications, developers should use Flex

AJAX: The Fast Lane to a Better User Experience

Ajax framework Criteria

helps shops meet time-to-market needs favors gradual re-factoring of existing Web apps Can deliver speedy performance

It's easy to choose the wrong AJAX framework.Finding best-of-breed AJAX development tools is difficultCross-browser compatibility issues increase testing costs

create their own frameworksbuild on top of open source frameworks

Adobe's Solution Is Powerful, Predictable, and Productive

Widespread adoption of Flash speeds deployment.works well for large-scale RIAsEvolves quickly and has a predictable trajectory.improves developer productivity and collaboration with designers

Developers Are Hard to Find and Other Drawbacks of FlexFlash upgrade issues can defeat the deployment value proposition

Success can create an unexpected user response

Adobe is an attractive RIA solution because it combines powerful development tools (Flex) with a near-universal browser plug-in (Flash)

Solutions …cntd

• Designing and Managing Rich Internet Applications• Handling Deployment issues

Availability: A Measure of Overall Quality

Responsiveness: Achievable, but not Guaranteed

Clarity Requires Distributed Application Design

Utility Depends on Everyone’s Contribution

Findings, Recommendations & Conclusion

• Real time findings for Designing RIAs• Recommendation: Possible Applications in the

Industry• Conclusion 1. Make it directly interactive

2. Make it inviting3. Use lightweight, in-context popups instead of page

transitions where possible4. Use real-estate creatively5. Cross page boundaries reluctantly6. Create a light footprint7. Think of your interactions as storyboards8. Communicate transitions9. Think in objects

Product Catalogs and Product SelectorsProduct ConfigurationsProductivity ApplicationsEntertainment Applications

While Designing: RIA must fulfill availability, responsiveness, clarity and utility criteria. Developers can choose technology depends on application requirement.The Deployment is no more issue with increasing speed of transmission media & availability of required plug-ins to run RIAs

Finally we can say the future of web applications & endorsing of Web 2.0 / Web 3.0 is going to happen via RIA.

• Real time findings for Designing RIAs• Recommendation: Possible Applications in the

Industry• Conclusion

Reference [1] Adobe - Rich Internet applications (2009) [Online] Available:

http://www.adobe.com/resources/business/rich_internet_apps/#open[2] Gartner Report: Management Update: Rich Internet Applications Are the Next Evolution of the Web. (Publication Date: 11

May 2005) [Online] Available: www.sebringsoft.com/images/riacom-factbook.pdf[3] Rich Internet application –Article from Wikipedia [Online] Available:http://en.wikipedia.org/wiki/Rich_Internet_application[4] White Paper- “Creating rich Internet applications with the Adobe technology platform”[5] Rich Internet Applications 101: A Primer for Marketing Agencies & Multimedia Developers’ By Andrea Simmons, a White

Paper from Integration New Media. [Online] Available: www.inm.com/resource-center/en/white-paper/INM-RIA-Primer.pdf

[6] “Planning for RIA success” Tad Staley, Adobe Consulting [Online] Available: www.adobe.com [7] ‘Rich Internet Applications- Technical Comparison and Case Studies of AJAX, Flash, and Java based RIA”- Best practice Report

by Tom Noda Shawn Helwig. [Online] Available: http://www.uwebc.org/opinionpapers[8] White Paper “Rich Internet Applications” Sponsored by: Macromedia and Intel-Joshua Duhl (November 2002)[9] Rich Internet Applications: Design, Measurement, and Management Challenges by Chris Loosley, Senior Director, SLM

Technologies (Keynote Systems, 2006)[10] Article “Should You Choose AJAX or Adobe?” published by SYS-CON Media (2008) [Online] Available:

http://flex.sys-con.com/node/469472/mobile[11] Presentation on ” Choosing the right Rich Internet Application technology path” by Marco Casrio (2007) [Online] Available:

http://www.slideshare.net/ [12] Article on “Which Rich Internet Application (RIA) Technology Will Lead the Pack?” by Vikrant in March 7th, 2008 [Online]

Available: http://www.betadaily.com/2008/03/07/which-rich-internet-application-ria-technology-will-lead-the-pack/[13] Nine Tips for Designing Rich Internet Applications BILL SCOTT, Director UI Engineering, Netflix, Saturday , January 07,

2006[Online] Available:http://looksgoodworkswell.blogspot.com/2006/01/nine-tips-for-designing-rich-internet.html

Thank you