20
Feb

Various Definitions of User Interface

  • The part of a computer program that displays on the screen for the user to see
  • A set of controls such as buttons, commands and other devices that allow a user to operate a computer program
  • The part of an application that the end user sees on the screen and works with to operate the application, such as menus, forms and buttons

The Goldmine Rush

The Boom

  • Online Medium: A paradigm shift in the information dissemination approach
  • Beating the success tape with ‘first to market’

The Bust

To beat “first-mover” sites, competitors started loading truckloads of features, content, and so on, leading to complexities for end users.

The Realization

  • For a sustainable competitive advantage, focus on quality user experience
  • It is user experience that forms the customer’s impression of the company’s offerings
  • It is user experience that differentiates the company from its competitors
  • It is user experience that determines whether your customer will ever come back

What Goes Into User Experience

Understanding every possible expectation and action that a user is likely to take is the key to User Experience.

The Various Elements of User Experience are:

  • The Strategy Plane - Finding out the business and user objectives of any product or site.
  • The Scope Plane – Translating user needs and site objectives into specific requirements.
  • The Structure Plane – Defines the flow, which the users would possibly take.
  • The Skeleton Plane – The placement of buttons, tabs, photos, and blocks of text.
  • The Surface Plane – The layer with which a user interacts. This layer is made up of images and text. Some of these images and text might be attached to some function.

Creating Intuitive User Interfaces

From a usability perspective, site design is more challenging and important than page design.

Homepage

  • Should be designed differently from the rest of the pages
  • Should answer the questions, such as, “Where am I?”  and “What does this site do?”
  • Should offer these three features:
  1. Directory of the site’s main content area (navigation)
  2. Summary of the most important news or promotions
  3. A search feature

Navigation – Should answer these three fundamental questions

  • Where am I?
  • Where have I been?
  • Where can I go?
  • Create site structure that reflects user’s view of the site and the information they are looking for
  • Use icons in navigation only if it helps users to recognize items
  • Show hierarchical path through breadcrumb navigation

Search-

  • Give users an input box to enter search queries, instead of just giving a link
  • Don’t offer a feature to “Search the Web” from the site’s search function
  • Make search easily available from every single page of site
  • Show page description and keywords in search results

Content Design – Writing for the web

  • Use the inverted pyramid approach
  • Be crisp and to the point
  • Write for scannability
  • Avoid redundant content
  • Don’t use clever phrases that make users work too hard to figure them out
  • Use consistent capitalization and other style standards
  • Give the Page title on each page
  • Emphasize legibility

Some Other Tips

  • Use colors with high contrast between the text and the background and readable fonts
  • Almost all text should be left-justified, avoiding continuous text in caps
  • Offer enough information for user to avoid mistakes
  • When errors occur, offer suggestions for recovery
  • Error messages should be “polite” and not pin the blame on user
  • Optimize your photos for the web.
  • Label graphics and photographs if their meaning is not clear, use Alt Text with images
  • Optimize video files. Use streaming options wherever possible
  • When downloading, indicate file size
  • Provide option to users to download any plug-ins.
  • Use graphics to show real content, not just decorate your homepage.
  • Never animate critical elements of a page such as the logo, tagline or main headline
  • Web pages should be dominated by content of interest to the user
  • To understand the grouping of information, provide adequate white space.
  • Make your design compatible for various browsers like IE, Firefox, Safari, etc.

By Shubhankar Chakraborty

By

Team Member - Administrator

09
Feb

What is Flex?

Flex is a way to make SWF files!
At the heart of Flex is the ability to create SWF files that run in Adobe Flash Player. Distill all the features down and it is a development paradigm that compiles to SWF. It really is that simple, but we often make the definition much harder. Just like Flash can create SWF files, so can Flex, but the way you develop it is completely different.

Flex is for developers.

Flex was not built for animators, writers, accountants; it was written for software developers and the paradigm matches the development methodology you already know. If you know Java, C, C++, C#, Delphi, VB, PHP, ColdFusion, Python, Ruby, you can learn Flex with little effort. The goal when Flex was created was to make a development paradigm that developers could learn easily matching the methodology they already know, yet create SWF files for Flash Player (and now AIR). Flex has classes, components, a compiler, a debugger, class libraries, and uses XML (MXML) for declarative markup of components. The ActionScript programming language is based on ECMAScript 4 (the language standard behind JavaScript) and has full support for the ECMA XML scripting standard, E4X. It also has most of the UI components that you already use (like button, list, datagrid, combobox, and tree) but it also supports containers like HBox, VBox, TabNavigator, TitleWindow and many others. If you have written software before, you can learn Flex easily. But better still, Flex is compatible with all HTTP servers, version control systems, and any server side programming language, so the knowledge you have of servlets, php, ASP.net, or JSP is really handy. Flex just lets you program the client side in a paradigm you already know and understand.

Flex is for making applications…

Flex was built for making rich client side application behavior. It wasn’t built for making web pages, banner ads, or server side logic. It was built for creating client-side applications that run over the Internet talking to remote servers. Flex has been used to make some really great apps like Buzzword (Document Editor like Microsoft Word but in the web) or Picnik (Photo Editor/Manager for touching up your best snapshots) or SlideRocket (Presentation software like Apple Keynote but in the web) or Oracle Sales Prospector (An enterprise ERP application. Yes Oracle uses Adobe Flex! ) or many other applications you can see at Flex.org. The real key is that all these examples provide an application experience just like desktop software.

…that run on the web (Adobe Flash Player)…

Flash Player 9 is installed on more than 95% of computers that use the Internet and has been installed more than 3,500,000,000 times at a rate of over 10,000,000 times per day. When you develop software, you want it to run compatibly in as many places as possible. Adobe Flash Player provides a solid foundation to build these experiences without the need to install or update anything on the end user’s computer. If you were running a store you would want that store to be available to as many customers as possible and choosing Flash Player allows you to provide a great experience (rich) to 95% of the web (reach). Make sure you look at the reach of the technology you select. If you choose something not widely installed or incompatible, you are simply turning away customers and business.

…on the desktop (Adobe AIR)…

Adobe AIR is a new runtime in development by Adobe and we are very close to releasing Adobe AIR 1.0. AIR allows you to write desktop software that runs on 3 operating systems (MAC, WIN, LINUX) with the same file. This allows your application to be a true desktop application rather then just a website and allows you to do much more than the web allows today. AIR applications are real native desktop applications and provide APIs for writing files, drag-drop, system notifications, network detection, and more. AIR empowers developers to write desktop software that leverages the Internet.

…on mobile devices.

Adobe is working to enable Flex to build applications for mobile platforms and support a wide range of devices. Just as Flex can be used to write a web based application or desktop application, it can be used to write software for mobile devices. The fact is that devices are becoming ever more powerful and more plentiful. It is just a matter of time before we enable developers to leverage Flex to deliver mobile applications on Flash Lite or AIR on mobile.

In summary, Flex is a development paradigm that allows you to write software for the web and desktop that many people can use compatibly today. It leverages the tools, servers, and development models that you already know and allows you to write the next generation of software compatibly. At Adobe we are working around the clock to make this ecosystem of software better and provide you with the best tools and platforms to make your projects a success.

I encourage you to take a fresh look at Adobe Flex and discover the opportunity in learning a new language and ecosystem. Developers around the world are embracing it to create all sorts of new applications and I think you should jump in too.

If you are looking forward to learn Flex then here are some useful links

Adobe Component Explorer:

Describes various components available in Flex.

Adobe Style Explorer:

Helps defining styles for your Flex application.

Handling XML Data:

Tricks and techniques of using XML data in Flex.

Its fun to play around and learn Flex. Try it…you will definitely enjoy it :-)

by Saagar Shetty

By

Team Member - Administrator

09
Feb

Selenium is a suite of tools used to automate web application testing across many platforms. It is an open source tool developed in Java Script and browser technologies and hence supports all the major browsers on all the platforms. It was developed by ThoughtWorks Inc.

There are 4 components of Selenium:

1) Selenium Core:

This is the original JavaScript-based testing system. It is now used primarily as a component of Selenium Remote Control, but it can also be used as a pure JavaScript/HTML testing system. To run Selenium Core tests, they normally have to be installed on the server on which you want to test.

2) Selenium IDE:

Selenium IDE is an integrated development environment for Selenium tests. It is implemented as a Firefox (2+) extension, and allows you to record, edit, and debug tests.

Features:

  • Easy record and playback
  • Intelligent field selection using IDs, names, or Xpath, as needed
  • Autocomplete for all common Selenium commands
  • Walk through tests
  • Debug and set breakpoints
  • Save tests as HTML, Ruby scripts, or any other format
  • Support for Selenium user-extensions.js file
  • Option to automatically assert the title of every page

Drawbacks:

  • The biggest drawback of Selenium IDE is its limitation in terms of browser support. Though Selenium scripts can be used for most of the browsers and operating systems, scripts written using Selenium IDE can be used for only the Firefox browser if it is not used with Selenium RC or Selenium Core.
  • Selenese, the simple scripting language used by IDE, is somewhat primitive as it has no conditionals (no “if” statements), and no loops (no “for” statements).
  • Does not help with the launching and closing of the browser

Note: Selenium IDE can be configured to repeat a specific test by using flowControl extensions: goto, While, and so on, by installing the selenium-goto extension (download it from http://wiki.openqa.org/pages/viewpageattachments.action?pageId=379). To install it, open the Options panel in the Selenium IDE browser extension and specify the location of the user-extension.js file.


3) Selenium Remote Control:

Selenium Remote Control (RC) is a test tool that allows you to write automated web application UI tests in any programming language against any HTTP website using any mainstream JavaScript-enabled browser. The RC server also bundles Selenium Core, and automatically loads it into the browser.

Selenium RC comes in two parts:

a) A server, which automatically launches and kills browsers, and acts as a HTTP proxy for web requests from them.

b) Client libraries for your favorite computer language (Java, .NET, Perl, Python, C#, PHP and Ruby).

Click on selenium for a simplified architectural representation.

As a test suite starts, the following happens

  • The client/driver reaches out to the Selenium-Server.
  • The Selenium-Server launches a browser (or reuses an old one) with a URL that will load the Selenium core web page.
  • The Selenium-Core gets the first instruction from the client/driver (via the HTTP Proxy built into the Selenium RC Server).
  • The Selenium-Core acts on that first instruction, typically opening a page of the AUT.
  • The web server is asked for that page, and it renders it in the frame/window reserved for it.

4) Selenium Grid:

Selenium Grid runs tests on many servers at the same time, cutting down on the time it takes to test multiple browsers or operating systems.

Installation:

  1. Selenium IDE:
    • Selenium IDE can be downloaded from http://seleniumhq.org/download/.
    • Open Mozilla Firefox.
    • Drag and drop the file into it.
    • Install it and restart Firefox
    • If installed properly, Selenium can be accessed from Tool –> Selenium IDE in your browser toolbar.
  2. Selenium RC:
    • Selenium RC can be downloaded from http://seleniumhq.org/download/.
    • Unzip the file and extract it in the directory of your choice.
    • JRE 1.5 or higher version should be installed on your machine. To check the version, type the following command at the dos prompt: java -version.

Bibliography:

http://seleniumhq.org/

http://www.testinggeek.com

By Diana Dsouza

By

Team Member - Administrator