Topical Analysis: Animation, JavaScript, and Rich Internet Applications

Rich Internet Applications (RIAs) are Web based applications that similarly to desktop applications have the same flexibility, ease of use, and graphic intensity. Some of the major Rich Internet Applications technologies that emerged in recent years and changed the Web development are Flash and Ajax.

Flash is an important and powerful tool for building interactive Web sites. It has vast capabilities in the interface design, aesthetics and functionality (Grosvenor, p.1). Flash uses vector-based animation and ActionScript, a programming language, to build animations that can range from creation of a simple animation to building the whole Website. It also has capabilities of building robust SQL and XML data-feeding Web applications. The content created within Flash movie is browser independent and is rendered the same way across all browsers. To play the Flash movie, however, the plug-in is required. Plug-in is found in 90 percent of all Internet enabled computers. Flash originally used for creating marketing banners; has grown with the development and maturation of ActionScript and transformed the visual appeal of the Web. ActionScript is an object-oriented programming language that uses very similar syntax to JavaScript. A programmer can access and update any element within the application using ActionScript. Flash can be used to build forms where ActionScript reads user input (textual input) and respond to it. Forms created in Flash use text field, combo-box, check-box, label, buttons or radio buttons. Application created in Flash can make calls to the server and update information. Some of the fundamental functions in Flash include drawing, working with layers, creating symbol, instances and creating time-line animations with motion and shape tweening.

In the last few years, Ajax technology became a key approach in creating Web applications. Ajax uses a specific JavaScript object called XMLHttpRequest combined with Java Script events and dynamic HTML (DHTML). By using the XMLHttpRequest object (XHR), developers have a bigger control over the HTTP requests to retrieve data. The World Wide Web Consortium (W3C) has released the first specification for the Ajax standards in 2006. Some of the Ajax rich user interfaces include drag and drop effect, navigation, event handling, form entry validation, interface for opening APIs, and state management. Several practical uses of Ajax technology focus on creating mash-ups pages that re-use more than one Website content in a single page.

The essential characteristics of RIA are:
- Accessibility
- Advanced communications
- Complexity
- Consistency
- Performance
- Security
- Richness

Dojo and jQuery are open source JavaScript libraries that help make DHTML tasks. jQuery contains common Events, DOM, Effects, CSS, and Ajax functions and is linked from a Webpage similarly to JavaScript:

Dojo widgets that consist of JavaScript, HTML and CSS are used to enhance websites with interactive features such as menus, tabs, 2-D drawings, forms, animations and drag-and-drop.

JavaScript is an object-oriented scripting language mostly used on the client side (integrated component of the browser) that is not related to Java programming language. JavaScript is one of the most popular languages used on the Web. Functions that are written in JavaScript are embedded or included in HTML, and are interacting with DOM. Examples of JavaScript use includes: validation of Web forms, building applications that enhance user interfaces, building dynamic applets and interactive games, opening a new resizable window, changing images on the mouse over and creating security passwords. The potential security risk in JavaScript and Ajax includes the following:
- Client-side security controls
- Increased attack surface
- Cross-Site Scripting (XSS)
- Connecting the gap between users and services

References
Booch, G. (2007). Object-Oriented Analysis and Design with Applications. Addison-Wesley.
Grosvenor, S. (2004). The Flash Anthology: Cool Effects & Practical ActionScript. SitePoint Pty. Ltd.

Object-Oriented Design II

Object-Oriented Programming (OOP) deals with object hierarchies and relationships between classes. The concept of inheritance is very powerful in Object Oriented Programming (OOP). It applies to an idea that each new class can be derived from an existing class. Java programming characteristic is that each class is inherited from and existing class. For instance, C1 is a superclass from which C2 is extended, and therefore is called subclass. Polymorphism in OOP is related to the inheritance relationship. A new subclass inherits features from a superclass. Java also supports dynamic binding, where objects could come from anywhere.

Object-Oriented approach to a design is more common due to the fact that OOP methodologies are more effective in complex software design. Objects used in OOP provide abstraction and encapsulation. Abstraction puts the emphasis on the important problems that have to be solved in a design and eliminates the unrelated ones. Encapsulation has been defined by Booch (2007) as "the process of compartmentalizing the elements of an abstraction that constitute its structure and behavior; encapsulation serves to separate the contractual interface of an abstraction and its implementation." (p.51). Encapsulating data and procedures allows hiding information from the user of the object.

In Java programming we can define the following steps:
• Creating and modifying source code
• Compiling the code
• Executing the code

Programming errors are often observed, even by advanced programmers. There are three types of errors:
• syntax errors,
• runtime errors,
• and logic errors.

Finding and debugging the syntax and runtime errors is usually straightforward. Syntax error is recognized by compiler, and occurs when the rules of the programming language are not followed. Runtime error arises when running application tries to perform an operation impossible to execute, like division by zero, or an attempt to access an out-of-bound array element. The program is usually terminated abnormally when the runtime error takes place. However, Java offers capability to handle runtime errors through exception handling, and allows programming of robust applications. Java makes it possible for programs to catch and process exceptions, which may be achieved by using a construct called the try-catch block. Logic errors are usually the most difficult to handle, and occur if the program does not execute the code the way it was intended. Logic errors are often referred to as “bugs” and are difficult to find. Therefore, they require more complex approach.

Java programming uses several data structures that are supported in the Java API. They are arrays, lists, stacks, and queues, binary trees, heaps and priority queues. In OOP data structure is defined similarly to declaring a class and it uses data fields to store data. A data structure stores data as well as provides methods to access and manipulate data. Such operations include deletion insertion, searching, retrieving, modifying, etc.

An array is one of simplest and easiest to use data structures which hold data elements in sequential order. However, the main limitation of an array is its size, which cannot be altered once the arrayed was created. Java offers other structures like lists which allow dynamic sizing of data structure.

Java is very dynamic, versatile language that allows for flexibility in programming of robust applications. Programs written in Java are characterized by portability, which means they run similarly on any hardware and operating system by using Java Virtual Machine.



References
Booch, G. (2007). Object-Oriented Analysis and Design with Applications. Addison-Wesley.
Liang, D. (6th ed.). Introduction to Java Programming. Pearson Prentice Hall.
Sun Developer Network (SDN). (n.d.). Retrieved November 6 2009, from http://java.sun.com/

Object- Oriented Design I

Object-oriented programming (OOP) languages represent a programming paradigm in which objects, data structures consisting of related state and behavior, are used. Object-oriented programming languages are widely used and are considered far more flexible than other programming languages. In object-oriented languages like C++, Java, or C# the principle is that an object encloses everything that should be inside the object. In object-oriented programming, the code that is written once can be reused through inheritance.

Java, originally developed by Sun Microsystems, is a powerful object oriented programming language that can be used to build many web applications. Java was designed in 1991 with the name Oak and in 1995 was renamed Java. Since 1995, Java, a simple, object-oriented, robust interpreted, secure, portable, dynamic and high-performance language, became one of the most popular programming languages for Internet applications (Liang, p.14).

Java can be used on the Web to:
• Build data-driven Web applications for server-side technologies
• Java Servlets can add a Web interface to a database
• Java Servlet API and cookies are used to personalize content
• Building dynamic Web pages (JSP)
• Develop standalone applications for mobile devices

The initial attraction of Java comes from the fact that it was run from a Web browser as an applets. Initially, applets built with Java enhanced user interfaces with buttons, text fields, text areas and radio buttons, and made the Web more responsive and interactive (Liang, p.14).

The critical elements in writing code in Java are objects. Java objects share characteristics with real-world objects, and they have state and behavior. For instance, a car may have the following states: speed and current gear, and its behavior may be accelerating and slowing down. In Java, state of an object is stored in variables, and its behavior is expressed by methods, like in the example code below.
class Car {

//States of an object (car) are expressed variables
int speed = 65;
int gear = 4;


//Object behavior is expressed by methods

void changeGear (int newGear) {
gear = newGear;
}

void accelerate(int increaseSpeed) {
speed = speed + increaseSpeed;
}

void slowDown(int decreaseSpeed) {
speed = speed - decreaseSpeed;
}

void printStates() {
System.out.println(Current speed:" + speed + "Current gear:"+gear);
}
}

A class is the main component of Java programming language and a base from which individual objects are created. The class Car serves as a blueprint to construct new car objects because all cars share same characteristics, and it may be reused multiple times without re-writing of the code.
If there is a need to expand an existing Java object, it is done through inheritance, a mechanism that allows sharing common states and behaviors among other classes. The class Car from the above example becomes a superclass for all classes that reuse it, i.e. for new classes Sport Car, or LuxuryCar.
Creating a new class that inherits from superclass is simple and easy to read, like in the following code:
class SportCar extends Car {

// here come variables and methods for the subclass, SportCar
}

This way the new object, SportCar, receives all characteristics of the object Car. That allows a programmer to focus exclusively on unique features of the new object.



References
Liang, D. (6th ed.). Introduction to Java Programming. Pearson Prentice Hall.
Sun Developer Network (SDN). (n.d.). Retrieved October 28 2009, from http://java.sun.com/

Designing Images and Applying Usability Concepts

The usage of images on the Web is no different from using images in print, and follows the same principles of graphic design. According to Meggs (1992), “Graphic design is a hybrid discipline. Diverse elements, including signs, symbols, words, and pictures, are collected and assembled into a total message” (p.8). Graphical elements depending on how being used on the Web serve many purposes. They carry the message, serve as a visual communicator, support and give the recognition to the brand, and present the data. Images are also used as space fillers. With the availability of graphical software, graphic designers are limitless in the way they can use photography and images on the Web. By combining and altering images, they are able to create new reality. Images and type are the key elements in developing identity, logo, advertisements, and visual programs for any brand.

In the communication design, the representation of words and images complementing each other is called visual- verbal synergy. When the images are created with a dominance of text they are called verbally dominant, and if created with a dominance of image they are called visually dominant. Combination of images and text in web design should create coherent powerful, meaningful union. In addition to type and images, graphic designers working on the Web can structure and balance the space by using graphic support elements. These elements can include ruled lines, ornaments, patterns, colors, background and shapes. Graphic support elements do not carry message, but instead create resonance.

The design process involves five fundamentals steps. It starts with defining the problem, goals, objectives and audience. The second step, information gathering, Meggs (1992) describes as “…learning about the client’s needs and the sphere of activity, finding out how other designers have solved similar problems, and surveying the communications environment in which the design will function” (p.154). The goal of information gathering is to acquire as much information as possible about the project. It should include detailed discussion with the client, library research and meeting with various art suppliers. In the third step, finding an idea, designers search for information, use vertical or lateral thinking, and exploit other artists’ examples to open many possibilities to solve the problem. Solution finding can occur though the process of brainstorming, incubation, notation, synthesis and ocular reconnaissance. (Meggs, 1992, p.157). In this step it is helpful to revisit the specific criteria that were developed during the information gathering step. Some of the importance should be placed on communicating the message in the new design, form, space usage and resonance.
1. Images should create coherent union
2. Type and image should harmonize with each other representing:
- visual- verbal synergy
- visually dominant graphic
- or, verbally dominant graphic
3. Signs and symbols must be meaningful and easy to understand
4. The typography used in graphical elements must be legible
5. The visual structure should be effective
6. The images should be expressive and engaging the audience

The overall visual design should support and express the essence of the topic and most importantly convey the message. The last step of the designing process, implementation, includes presenting the solution, accepting it by the client and executing the project.

Web designers, in addition to following principles of graphic design, have to apply the web usability concept to make the design successful. To minimize the download time, images have to be optimized with professional graphical software. Colors of the images, foreground and background should be carefully defined to make the design readable for colorblind users, and be cross- platform compatible.


References
Meggs, P.B. (1992). Type & Image. The language of graphic design. New York: John Wiley & Sons, Inc.