Flash, Flex & Ajax – How do they compare?

December 5th, 2008 Carlos Real

Hey there, well, it was my turn at our traditional In-House Knowledge Share this month and as one of the designers at Insight, one of my activities is to keep current on new technologies and trends. I wanted to explore the three most popular rich interactive applications at the moment; Flash, Flex and Ajax, and learn their benefits and disadvantages so that we can provide our clients and their users the best possible solution.

So without further a do, I’ve dissected them hoping to get everyone to draw their own conclusions.

FLASH:
Adobe Flash (previously called Shockwave Flash and Macromedia Flash) is a set of multimedia software created by Macromedia and currently developed and distributed by Adobe Systems. Since its introduction in 1996, Flash has become a popular method for adding animation and interactivity to web pages; Flash is commonly used to create animation, advertisements, and various web page components, to integrate video into web pages, and more recently, to develop rich Internet applications.

Flash can manipulate vector and raster graphics and supports bi-directional streaming of audio and video. It contains a scripting language called ActionScript. Several software products, systems, and devices are able to create or display Flash content, including Adobe Flash Player, which is available for most common web browsers, some mobile phones and other electronic devices (using Flash Lite). The Adobe Flash Professional multimedia authoring program is used to create content for the Adobe Engagement Platform, such as web applications, games and movies, and content for mobile phones and other embedded devices.

Macromedia Flash Development Process

• Design an application interface using any visual design sofware package such as Freehand, Illustrator, Fireworks or even Flash itself.
• Add dynamic behavior (one part of the application interacting with another, for example) and interactive behavior (what happens when a button is clicked for example)
• Define and connect to data services as needed(XML)
• Publish the file and embed it on an html if it is for the Web. Or create a self contained movie if the application is for CD/hard drive use.

Flex Application Development Process

• Define an application interface using a set of pre-defined components (forms, buttons, and so on)
• Arrange components into a user interface design
• Use styles and themes to define the visual design
• Add dynamic behavior (one part of the application interacting with another, for example)
• Define and connect to data services as needed
• Build the source code into an SWF file that runs in the Flash Player

Advantages

• High penetration
• Uses Flsh player tecnology
• Provides real-time access to the most current data form outside sources
• Flex has gone fully open source

Disadvantages

• Needs the Flash players so with it compatibility on some devices come too.
• Need to learn XML language and Actionscript to build anything.
• Limited visual capabilities

Flex Examples

• http://www.volkswagen.co.uk/used/search
• http://www.activalive.com

AJAX:
Ajax (asynchronous JavaScript and XML), or AJAX, is a group of interrelated web development techniques used for creating interactive web applications or rich Internet applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.^[1] Data is retrieved using the XMLHttpRequest object or through the use of Remote Scripting in browsers that do not support it. Despite the name, the use of JavaScript, XML, or its asynchronous use is not required.

Advantages

• In many cases, the pages on a website consist of much content that is common between them. Using traditional methods, that content would have to be reloaded on every request. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage and load time.
• The use of asynchronous requests allows the client’s Web browser UI to be more interactive and to respond quickly to inputs, and sections of pages can also be reloaded individually. Users may perceive the application to be faster or more responsive, even if the application has not changed on the server side
• The use of Ajax can reduce connections to the server, since scripts and style sheets only have to be requested once.

Disadvantages

• Dynamically created pages do not register themselves with the browser’s history engine, so clicking the browser’s “back” button would not return the user to an earlier state of the Ajax-enabled page, but would instead return them to the last page visited before it. Workarounds include the use of invisible IFrames to trigger changes in the browser’s history and changing the anchor portion of the URL (following a #) when AJAX is run and monitoring it for changes.
• Dynamic web page updates also make it difficult for a user to bookmark a particular state of the application.
• Because most web crawlers do not execute JavaScript code, web applications should provide an alternative means of accessing the content that would normally be retrieved with Ajax, to allow search engines to index it.
• Any user whose browser does not support Ajax or JavaScript, or simply has JavaScript disabled, will not be able to use its functionality. Similarly, devices such as mobile phones, PDAs, and screen readers may not have support for JavaScript or the XMLHttpRequest object. Also, screen readers that are able to use Ajax may still not be able to properly read the dynamically generated content.
• The same origin policy prevents Ajax from being used across domains, although the W3C has a draft that would enable this functionality.
• The lack of a standards body behind Ajax means there is no widely adopted best practice to test Ajax applications. Testing tools for Ajax often do not understand Ajax event models, data models, and protocols.
• Opens up another attack vector for hackers that web developers might not fully test for.

Examples of Sites with Ajax:

• http://maps.google.com/
• http://gollum.easycp.de/en/0,,00.html
• http://www.kayak.com/

Posted in Web Technology | 2 Comments »

ID’s new look and how it came to be.

September 16th, 2008 Carlos Real

Hey there, my name is Carlos Real and I am one of the designers here at Insight Designs. Over the last few weeks we’ve been complimented about ID’s new look and asked about its concept and how it came to be. So here it is:

First and foremost, Insight Designs is a fun place to be, where — as Beth mentions two blog entries down — “work-hard-play-hard” is an ethos. We wanted our website, which is ultimately our business card and highest-profile marketing tool, to capture our essence. Thus, the bright colors, the simplicity in structure and the Jack-in-the-Box theme.

I wanted our site to have some depth and volume as opposed to being 2 dimensional. So we immediately thought of using our 3D modeling and animation skills to accomplish this.

As for how I came up with the boxes, well, they are full of surprises. And that’s the line that kept on surfacing every time when trying to describe our design process. I though of things every kid (chronological and at heart) in the world likes: circuses, carnivals, animals, fairs… but one idea kept springing up (pun intended) and that was the Jack-in-the-Box. I don’t know of anyone that resists the urge to turn the crank if presented with one. They are fun — just like us. They make you giddy with anticipation - just like our first design rounds. And they are surprising – just like our solutions and final delivery.

The next step was to build and animate the boxes in 3D. We had four categories — Our Faces, Our Services, Our Company, and Our Work. Each box was to have a signature “Jack” that would pop out representing the category in a simple yet fun way. For example, Our Faces pops a “Jack” of masks and a locket to display our actual faces. The “Jack” for Our Services became a hammer to symbolize our strength with back-end applications, a painter’s palette for creativity and a Swiss Army Knife as a symbol of our flexibility and resourcefulness. Next we created a scale representation of the building that houses our office including the Ben & Jerry’s awnings for the Our Company “Jack”. Finally, the “Jack” for Our Work became a collection of our websites displayed within frames as works of art. Some truly belong in a gallery if I do say so myself!

Anyway, after a bit of tinkering with the aesthetics, the rest is history. Our new website was built, content was written, pictures were taken, websites were chronologically and alphabetically showcased, everything was tested and retested, and the site was launched. I know I speak from everyone here at Insight –- even Java, when I say that we are damn proud of it, but already thinking about how to make it better for next time!

Enjoy.

Posted in Insight News, Web Design | No Comments »