Human Factors and Technology Factors in Web Development

Introduction
A friend of mine, a Web-developer wanna-be, told me that he wanted to learn the hottest Web technologies, and I told him to go for XML (eXtensible Markup Language) and Java. Why do I pick these two technologies? Generally speaking XML will be the major player in the field of data storage, and Java is considered the best technology to manipulate the data stored in XML documents. Except for these two technologies, there are still a lot more Web technologies. In the first part of this paper, we will be looking at five technologies: Flash, HTML (HyperText Markup Language), XML, Java, and ASP. We will not cover the definition of each of them; rather, we will look at the difference between Flash and Java Applet, XML and HTML, and JSP and ASP. Each pair is grouped in this way because they are similar in certain aspects, but they are different for various reasons. For instance, both Flash and Java applets make fancy animations, but they are created with very different approaches. In the second part, I will quantitatively assess six online retailers. The third part is the conclusion of this paper, and I will talk about what I have learned from this class and this research paper. Let us start with the difference between Flash and Java applet.

Flash vs. Java Applet
When we need to decide how to implement a multimedia application on the web, we often consider using GIF animations, Java applets, or Flash Animations. GIF animations are not interactive; they are only a loop of several static images displayed over and over again. To make interactive multimedia applications, most popular technologies are Flash and Java applet. Java applet is fundamentally different from Flash because Java applet is written in Java, which is a programming language, and Flash animations are created using a software package named Flash, from Macromedia. Flash and Java applet are also different in terms of development environment and the use of vector graphics.

Development Environment
As mentioned before, Java applet is written in Java. So, to create a slideshow, Java applet's approach is: first generate, say, ten pictures. And then write tens or hundreds of lines of Java code to make our slideshow happen. That means, Java programming language concept is a prerequisite, and it takes time to master a programming language. Plus, the development environment is not graphical; we have to imagine the scene created by the plain text code. Java applet does not have what-you-see-is-what-you-get kind of development environment. Flash takes a completely different approach for us to create a slideshow with the same function. To create a Flash slideshow, we also need to generate ten pictures. And then all we need to do is use the existing tools on the Flash software's GUI interface. It feels like using Microsoft Word to write a document. If we have a little knowledge of JavaScript, we can do more magic with Flash. There are many free Java editors on the Web. This makes another difference between Java applet and Flash applications, because to create a Flash file, we need to use the Flash software that is not free. The following are the screenshots for a Java editor (from TextPad, http://www.textpad.com) and a Flash development environment. To take a look at the Java applet source code, we can use search engine and type something like 'sample java applet,' etc. Here is a quick link to an applet source code and an applet tutorial. There are also a lot of downloadable Flash source files and tutorials; here is a good example.

Flash Development Environment		Java Development Environment (free from http://www.textpad.com)

Advantages vs. Disadvantages
The advantage with Java applet is that since Java is a programming language, we can pretty much write anything, which means we can do some magic that Flash cannot. But Java applets have the disadvantage that they sometimes can get pretty large in terms of file size. And we may have to do all the math and image manipulation pretty much by hand. On the other hand, the advantage with Flash is that easier to learn. Once we are familiar with Flash, creating impressive animations takes only a bunch of mouse clicks. The disadvantage is that we still need to have programming concept in order to create more complex interactive applications. The scrolling text applet below is a demonstration of the power of Java; with Java, we can create effects that Flash may not be able to achieve. A lot of free applets can be downloaded from the Web, such as JavaPowered.com.

Vector Graphics
Flash's big focus is on vector graphics. This makes Flash completely different from Java applet and GIFs or JPGs, which use precise grids of colored pixels to draw exact images. Vector graphics are a way of expressing images mathematically. The idea is to allow graphics to be scaled up or down infinitely, rotated, scaled, stretched, made transparent, or tinted without distortion or loosing sharpness. A Flash file looks exactly the same whether running on a huge monitor or a tiny handheld. Flash is good for scaling or stretching a graphic.

XML vs. HTML

XML and HTML both use a very similar syntax. HTML describes the look and feel of a web page; that is, it tells browser how to display data. XML does not tell the browser how to display data. What XML does is to tell what the data in a document are. This is the major difference. While HTML combines data and display, XML separates them. This difference makes XML documents more portable. An XML document can be used in many different types of applications. XML and HTML are different in other two aspects which are described in the following. Here are 3 example XML documents: 1 2 3. To see how HTML looks similar to XML, we can go to "view" menu, and choose "source code." The resulting texts are HTML code. Here is an HTML example.

Case-sensitive
XML is case-sensitive with both markup tags and text. This is significantly different from HTML. Element type names are case-sensitive: you must stick with whatever combination of upper- or lower-case you use to define them either by first usage or in a DTD. So, in a well-formed XML document, we cannot say <BODY>...</body>. Upper- and lower-case must match. Thus, <IMG/> and <img/> are two different element types. Besides, attribute names and attribute values are also case-sensitive.

Define Our Own Tags
XML is used to define the structure of data rather than to describe how the data will be presented. With XML, we can define data structures using markup tags. Unlike HTML, XML lets us define our own tags. We can also define attributes for our own XML tags. Most HTML attributes are used for formatting, but most XML attributes provide additional information regarding the data structure.

JSP vs. ASP

ASP (Active Server Page) and JSP (Java Server Page) are both popular for generating dynamic content for a Web page. ASP is from Microsoft, and JSP is from Sun. In terms of functionality, JSP and ASP are very similar. In the contents, they both have a static part and a dynamic part. The static part is just HTML tags, which will tell the web browsers how to display texts, images, and so on. The dynamic part is the Java code in JSP or scripting languages in ASP. This dynamic part enables contents to be dynamically generated, and it enables session tracking, and database interaction. JSP and ASP both use component objects to embed Java code or scripting languages in HTML; ASP uses Microsoft's proprietary ActiveX components in COM model, whereas JSP uses JavaBeans, which are only Java classes. Beside, JSP and ASP are different in terms of platform supported, scripting language used, and the syntax. Here are example code of ASP and JSP.

Proprietary vs. Open Approach
Since JSP and ASP have similar functionality, before we decide which technology to be used for the development of our web application, we need to look at what type of system architecture we have. If the server is a Microsoft product, then ASP is the technology to use because ASP can only work with machines that have IIS installed. Unlike ASP, JSP allows us to run it on any Web server and any operating system. JSP is not supported directly on IIS, but it can be supported on Unix, which is the where the majority of the Web servers reside, and other machines. If the server platform is already selected, then choose ASP if the server is from Microsoft, otherwise, choose JSP. JSP technology is designed to be both platform and server independent. It can work with tools, servers, and databases from different vendors. The following table shows a summary.

Scripting Languages
ASP supports JScript and VBScript. JSP supports Java code. Java is a programming language; it is more powerful than scripting languages. For instance, exception handling is Java's way of dealing with errors occurring during process. ASP does not have error handling mechanism. As a result, those errors may bring down the entire server. Since Java is a programming language, it also helps in the area of memory management by providing protection against memory leaks.

Predefined Objects
JSP and ASP both have a set of pre-defined objects provided by the Web server. The objects are so similar; in fact, they have the same functionality. The apparent difference is that ASP capitalizes the object name; JSP uses lower-case only. In addition, the mechanism to write to output stream is implemented differently in ASP and JSP. JSP provides an object named "out" to allow direct output to the output stream. In ASP, Microsoft uses the object named "Response" plus its method named "Write" to write to the output stream. The following table shows the comparison of the predefined objects in ASP and JSP.

Delimiting Tags
ASP and JSP both started out with similar styles of delimiting scripts from HTML. <% and %> are used to set of sections of script. <%=' and '%> are used to return a value within content. And <%@ and %> are used to delimit page directives. The following ASP and JSP code both produce the same HTML on the client side:

The Resulting HTML

<TITLE>Counting from 1 to 5</TITLE>      1<BR> 2<BR> 3<BR> 4<BR> 5<BR>

XML Style Delimiting Tags
Although ASP and JSP look similar from the above example, JSP has XML-style delimiters that ASP does not have. Because JSP comes after ASP, and XML is becoming the next big guy in the field of Web development, Sun makes JSP code look more similar to XML, and actually these kind of delimiter style is fully XML compliant. But some extra work needs to be done if we want to use the XML-style delimiters. For instance, a step to format a JSP page as an XML document, we must use as the root element. The following table shows the two styles of delimiting tags that JSP supports.

Website Assessment

After the discussion on the difference among Flash, HTML, XML, Java, and ASP, we will start to examine six retail sites on-line which are using at least two of the above technologies. Because ASPs and JSPs are both used to dynamically generate an HTML page to the user, functionality-wise, they are the same. So, there is really no difference as far as the consumer is concerned. That is, the technology factor is of less concern here. The human factor is more important. Therefore, to assess a site, the guidelines provided by Dr. Craig Nathanson are extremely helpful.

According to Dr. Nathanson, the six key elements that build up a place in the cyberspace are scenic, functional, self-guiding, flowing, familiar, and unique. Under each category, there will be several guidelines which are stated as questions. In this section, I will be assessing six on-line retail stores by following these guidelines.

The three websites that are well designed:

• Tiffany & Co. (Jewelry)
• Bloomingdale's (Department Store)
• Old Navy (Apparel)

• Longs Drugs (Grocery)
• FogDog (Sports)
• Petfooddirect (Pet Food and Supplies)

Tiffany & Co.
Technologies involved: Flash, ASP, and HTML
http://www.tiffany.com/default.asp

The following shows the details of assessment for each category.

Bloomingdale's
Technologies involved: Flash, JSP, and HTML
http://www.bloomingdales.com/

The following shows the details of assessment for each category.

Old Navy
Technologies involved: Flash, ASP, and HTML
http://www.oldnavy.com/

The following shows the details of assessment for each category.

Longs Drugs
Technologies involved: JSP, and HTML
http://www.longs.com/

The following shows the details of assessment for each category.

FogDog Sports
Technologies involved: JSP, and HTML
http://www.fogdog.com/home/index.jsp

The following shows the details of assessment for each category.

Pet Food Direct
Technologies involved: ASP and HTML
http://www.petfooddirect.com/

The following shows the details of assessment for each category.

Summary of the Assessment of the Six Websites

	Tiffany Jewelry	Bloomingdale's Dept. Store	Old Navy Apparel	Longs Drugs	FogDog Sports	PetFoodDirect Pet Supplies
Scenic	88%	94%	96%	42%	50%	40%
Functional	74%	86%	82%	67%	67%	60%
Self-guiding	84%	92%	78%	50%	50%	58%
Flowing	98%	98%	98%	62%	74%	56%
Familiar	94%	90%	92%	66%	60%	52%
Unique	78%	82%	72%	30%	26%	28%
Ave. Percentile	86.00%	90.33%	86.33%	52.83%	54.50%	49.00%

The assessment done in this paper is based on Dr. Craig Nathanson's research: Rating criteria for building place in cyberspace©.

The Differences Among the Six Websites

The six websites are all functional; the functionality is either implemented in JSP or ASP. But since we are the consumers, we do not need to care about how they deliver information to us. As a consumer, I care about how a website makes me feel. Websites that makes their consumers keep coming back are qualified to be called a 'place.' In this research, I think that Tiffany, Bloomingdale's, and Old Navy are places. Longs Drugs' design is not so well. Look at the stats, we see that Longs has the average percentile of 52.83%. What makes it far worst than the others is that it is not scenic. The same thing also applies to the other not-so-good websites, FogDog.com and PetFoodDirect.com. Some people may argue that the look and feel will not affect how successful a site would be, but from the stats in this research paper, being scenic is a must-considered issue.

An overview of the stats, we can find that not-so-good websites are poor in all the other aspects as well. They are not functional, self-guiding, flow, familiar, and unique. For instance, PetFoodDirect.com's search engine is kind of weak. I typed 'dry' in order to find dry food, but their search engine does not show what is being listed in its existing aisle 'Dog dry food' and 'Cat dry food.' I think this is a major flaw. They may consider to team up with the mother of all the search engines, google.com. In fact, this is how our school does; our school's main website uses google's search engine, and the search can be limited to our school data only. Longs Drugs also has a very weak search engine. This would be a problem because when customers could not figure out how to find out a product, they would just go to another websites with a few keystrokes and clicks.

Familiarity is not an easy issue for those not-so-famous on-line retailers. Famous brand names have the advantage of being well-known, so from the stats I make the assumption that famous brand names tend to score higher in the familiarity category. So how to make an on-line store that does not have a physical presence become familiar? My answer is that it needs to implement the other five key elements: functional, scenic, self-guiding, flow, and unique. There are a lot of successful examples out there: amazon.com, yahoo.com, hotmail.com, etc. These dot-com's all started out as a pure on-line company, but they all have provided the services that people would love to have, so people keep going back to them, and that makes their website become familiar.

Something unique about Tiffany & Co. is the use of the combination of ASP and Flash. Although Flash is notorious for the download time, but if use appropriately, Flash can bring a site so much life. However, there are elegant ways to integrate Flash into HTML, but the common solution is to offer two versions of a site - one Flash and the other HTML. Tiffany is a good example of Flash. Flash is also an excellent tool for viewing detail because with Flash, we can scale up and down a graphic without distortion. So, showing details of jewelry is a good application of Flash. Therefore, although Flash may never have the functionality or speed of HTML, it does have its niche. In addition, it does enrich our on-line experiences.

In the process of writing this paper, to find out a good example, I thought of famous brand names, such as Tiffany, Old Navy, and Bloomingdale's. When thinking of not-so-good examples, I asked search engines for ideas. For instance, I entered the keywords like 'sports,' 'fragrance,' 'pet food,' and so on, and looked at the search results and went to each site. I examined the URL to find out whether the site was enabled by either ASP or JSP. It is easy to tell; if the URL has .asp file extension, then the dynamic content is enabled by ASP technology; if the URL has .jsp file extension, it is a JSP page. I only examined the sites built with ASP or JSP. Overall, I found that most famous brand names are designed well, and those not-so-well-designed websites are often not so famous. Maybe it is because famous brand names have more money to go out and find the best Web development companies to build their dream stores. On contrary, small retailers do not have money to hire a better Web development staff nor to outsource the project to a better Web development company.

In this research, I did not give quite much description to describe how good a website is; rather, I evaluated websites using the quantitative approach based on Dr. Nathanson's website assessment guidelines. From the final table, which shows the comparison of the six websites in terms of percentile, I found that the numbers are pretty good at describing how good a site is. In addition, I found that good websites usually are good at every aspect, and not-so-good websites are also not so good in every aspect. The conclusion I draw here is that the six key elements are not only playing important roles in the process of Web development, but they also have influence on each other; if one element cannot be well implemented, the other five elements will end up not being well implemented as well.

Afterthoughts

I strongly recommend that people who want to get into Web development field to learn JSP and XML, because XML will be a major technology to store data in the future, and JSP is currently the technology that best manipulate the data in the XML documents. A lot of web development jobs need the skilled of XML because they want to convert data from different vendors' database into portable XML documents. The significance of such a converting is highlighted because of the fact that the traditional way of storing data has several disadvantages. For instance, we have lots of different database and Web servers from various vendors. Because of this diversity, different bridging mechanisms need to be in the right place to enable a Web server to talk to a database. Moreover, to get data from a database, a Web server needs to know how to speak correctly for database to understand. That is, a Web developer also needs to know database language. All these things have been there for many years. But if we store data in an XML document, the cost of storing data is greatly reduced. And even better is that we now have Java technology that can help a Web developer to manipulate the data within the XML file. XML also will greatly improve the search ability because XML focus on how to store data and how to describe data. Unlike HTML, XML separates the actual data from page layout issue. This would result in more precise search result, and I think this is why XML is becoming a hottie. There are projects that implement an XML search engine going on. This would encourage people to change the way they store data. Currently Java is considered the best technology to process XML documents, so I recommend a Web-developer-wannabe to learn XML and Java.

However, does it mean that we can avoid learning to handcraft a HTML page or simply rely on a WYSIWYG HTML editor to do the layout job for use? My answer is no. A WYSIWYG HTML editor such as Macromedia Dreamweaver or Microsoft FrontPage can be used as a helper when we want to see what our HTML code would look like in a Web browser. But there are jobs that FrontPage and or Dreamweaver cannot fulfill. WYSIWYG editors are only good at displaying static HTML; they are not so good at handling the scripting code that would do fancy things, such as rollover images or scrolling texts ˇV at this situation, the editors will just ignore the scripts. And we still have to figure out how the page would look like by interpreting the code by ourselves. Therefore, the knowledge of plain HTML coding is important.

Once we are good at hand-coding HTML, we can make better good use of JSP and or ASP to create a both functional and scenic web pages. As mentioned early, JSP and ASP source code is only a combination of static HTML code and dynamic scripting code. The scripts contribute to the functionality requirement of an interactive website. The HTML code contributes to the look and feel of a website. Among the six websites that we have examined, each one of them has the ability to dynamically generate content; however, the look and feel issue makes them look so different. Based on the stats in this paper, the look and feel issue has great influence on how successful they are in their e-commerce business. So, if we have the technology to dynamically generate content plus strong knowledge of HTML, we can make a website that is both functional and good-looking. However, this is not the all for web development; we still have one guy missing: the human factor.

According to Dr. Craig Nathanson, a website which can be qualified as a 'place' needs the following six elements: being scenic, functional, self-guiding, flow, familiar, and unique. A place is a website where people would keep coming back to have fun with; a place is a website that does not have enabling technologies, but a website that shows that they do care about and want to know what their visitors want from their site. If we have a fancy interactive website, but we do not show our passion about human, our website would end up being a site stuffed with cold codes and people would not want to come back to us again. Being able to design a website that fully implements these six elements is much harder than learning the programming languages. In this class, we are learning how to implement the six elements. The tremendously invaluable thing we learned in this class is how to evaluate a website based on precise guidelines provided by Dr. Nathanson. It is so precious because we not only know how to evaluate other peopleˇ¦s websites, we also know how to improve our website or how to start to build our place correctly right from the beginning. Before this class, I could name a lot of good websites and bad websites, but I could not describe why I thought they were so. Now we have had Dr. Craig Nathanson's website assessment guidelines, we can quantitatively evaluate how good a website's design is. Such a quantitative approach is an invaluable knowledge to me because I like things to be analyzed scientifically, not just emotionally based on personal preferences. Human factor and technology factor are complement to each other; a 'place' cannot do well without either one.