Design and Development
The design and development of a Web-based application is a very intricate process.
The application can be implemented rapidly, but you should definitely spend adequate
time planning the end result. With proper planning, you can create an application
that is a success both in your eyes and in the eyes of your users.
Whether the topic is client-server or Web-based development tools, most programmers
don't enjoy the discussion of planning and standards. The most popular guides on the
market are those that teach the intricacies of a specific tool, like the guide you're
currently reading. When was the last time you traveled to the local guidestore to
buy the latest title on project planning, project management, or project standards
The answer is probably never, and rest assured, toChapter's lesson isn't about these
topics either. This lesson focuses on the most important aspects to consider when
developing your Web-based applications.
Language-specific coding references, such as HTML or VBScript, aren't mentioned
in this chapter. There are plenty of good references for these topics. This chapter
does, however, discuss how to use these languages to build the best applications.
It also touches on how to avoid the difficulties of standards that continue to change
with each new company innovation.
In toChapter's lesson, you will learn about effective user interface design for your
application. No matter how efficient your code is, you can't overlook the one aspect
that is most apparent to your users. After that you will read about whether or not
to use browser-specific extensions in your application. Available HTML standards
and browser extensions are briefly touched on to demonstrate their capability.
During the middle part of the Chapter, the lesson covers choosing the proper development
and deployment platform for your application, along with several alternatives specific
to Visual InterDev. After you have learned about the certain platforms, the concept
of choosing the right database for your application will be discussed. Specifically,
you will learn about the differences between desktop, or PC, databases versus client-server
databases. At the end of the Chapter, you will read about security issues and discover
a considerations checklist that you can use when developing applications for the
Effective User Interface Design
User interface design is one of the most important aspects of your application.
You may personally prefer talking about the intricacies of ActiveX controls or C++
programming, and you may want to spend more time developing new components and class
libraries that are fast and efficient.
No matter how much you enjoy other phases of development, however, you can't overlook
the most important customer of the application: the user. If users don't want to
experience your application, your miraculous code will be banished by your users
and the Web community, and dissipate in a vast wasteland of despair.
I have been a student of user interface design since my COBOL mainframe Chapters.
Those are Chapters that I would like to forget. We have come a long way, through advances
in the Macintosh and OS/2 interfaces to all of the Windows interfaces, including
Windows 3.1 and Windows 95. I have truly enjoyed studying as well as writing about
each of these new developments and the promises that they exhibited.
ToChapter developers have to contend with the Web interface. From a computing model,
some say that we have gone back in time to the mainframe, dumb-terminal Chapters. I personally
think we have finally figured out a way to effectively use the client-server model
of computing. Whatever the case, there is a new challenge: to use the browser to
exploit the advantages of the World Wide Web.
Consider the power that the Web-based interface has given to toChapter's technology
companies. The Web has caused some of the technical giants in the industry to totally
change their applications to be Web-enabled. Microsoft has completely revamped their
current and new products to use aspects of this new interface. After building a brand-new
way to explore files on your desktop, they made a conscious decision to revamp the
Windows Explorer interface to be capable of exploring Web files as well. That's a
lot of power!
The following list outlines some basic steps to consider when designing an effective
user interface for your Web-based application:
- 1. Define a purpose for the interface.
2. Identify the users' expectations and needs.
3. Design the user interface.
4. Conduct usability testing.
5. Incorporate the feedback into your interface.
Define a Purpose for the Interface
The first step involved in creating an effective user interface is to define the
purpose of your interface and how that purpose accomplishes the mission of your application.
Why are the users here? Why should someone use your application? Defining a purpose
sets the context for how you will present the information and application to the
user. If you can't define why your pages exist, then why should users visit your
In defining a purpose for your interface, you should consider the following things:
Identify the Users Needs and Expectations
While building applications, developers often take an overbearing parent approach
to programming. This method could also be called the "I know what's best approach."
This approach is synonymous to a father or mother who takes action for their son
or daughter based solely on their knowledge of the situation. The parent forms an
opinion that is one-sided and then acts on that knowledge without seeking to understand
the child's point of view. Likewise, developers design and build an application without
consulting with the end user and are distraught when the users don't appreciate the
finished product. Maybe, if developers talked to the users more, they could find
out what users need and design and develop their applications accordingly.
This is the next step in designing an effective interface. Talk to the users.
Find out their expectations for your application. Identify their specific needs.
You can answer these questions by conducting user interviews or focus group sessions.
In facilitating these discussions, you need to make sure that you establish a
specific agenda and that these meetings don't become gripe sessions about current
applications. Keep the group focused on the issue at hand. The use of a white board
can really facilitate good discussion during a meeting with your users. Using the
white board, you can construct a flowchart of the web pages and outline specific
implementation objectives for each page. You also can scope out the basic design
of the web pages and application. Accomplishing these tasks can take several sessions
but will save you much grief and sorrow in the long run.
Design the User Interface
Once you have defined the purpose and have identified the users' needs and expectations,
you're ready to begin designing the interface for your application. In designing
the interface, you need to choose a metaphor that is easy and intuitive to use and
understand. You may be thinking that you don't have many choices in the matter because
the browser is the metaphor. While the browser does serve as the universal client
for all users, you have many choices concerning the design of your web pages. Just
as with client-server applications and tools, you have many objects, designs, and
tools to choose from. You need to make sure that you use the tools in your toolbox
wisely. Don't consider everything a nail just because you have a hammer. Proper discernment
and consideration is crucial in designing your interface.
Before you begin designing individual pages, you need to consider the overall
flow of the application. A roadmap is very helpful for defining the links and possible
paths that your users can take. The Web presents a greater challenge than client-server
applications in that the users have more flexibility in choosing the route that they
take. Users may enter a certain page in your hierarchy without passing through the
default home page first. Your application must be able to account for this situation
and present the user with choices for navigating through your application. Figure
3.1 illustrates a roadmap for a sample web site.
Visualizing the final product.
A roadmap for your Web-based application can help you visualize the final product.
As shown in Figure 3.1, the menu structure is balanced and isn't too deep or shallow.
Your application should provide relevant access to information within three levels
of menus. If they don't receive the access to information or tasks within this range,
don't expect them to become a return customer. A web site full of menus provides
very tedious navigation for the user. Likewise, a web site that only contains a collection
of pages with little or no coordination isn't very intuitive. You must be careful
to design your application so that it balances logical organization with timely access
to information and action. In diagramming your roadmap, you also need to make sure
that there are no dead ends.
New Term: A dead end is a web page that doesn't
provide a path to any other pages within your web site. The only way to leave this
page is to use the navigational buttons supplied by the browser.
Think about how you feel when you take a wrong turn down a dead-end street with
no warning. You feel frustrated. You say to yourself that you will never come in
this neighborhood again. Users react to your applications in the same way if they
have no defined navigation path to other areas in your site. From every page, a user
must be able to choose a course. You might be tempted to rely on browser menu or
option buttons that provide back-and-forward scrolling options. Don't submit to this
alluring temptation. You should take as much control of user choices as you can,
so that you can guide their experience. Your users should receive the full benefit
of your web site, and the best way to accomplish this is to present the user with
Once you have created a roadmap, the next step is to choose a metaphor for your
application. This decision will drive the design of the individual pages and components
that fit into your application. You can use many different designs. You can choose
a basic web page, including heading and body sections. The use of frames also can
be used. You can choose to provide a very graphical experience so that users can
click on images and other multimedia options. You can use Virtual Reality Modeling
Language (VRML) to provide a 3D metaphor for virtual exploration of a physical site.
Once you make a selection, you need to use this metaphor throughout your application
to provide a consistent look and feel to the user. For example, choosing a frame-based
metaphor means that you need to use frames for each of your web pages. The overall
goal is to choose the metaphor that will best suit the needs of your users.
After you select the metaphor, you can begin designing the individual pages. On
any development effort, the use of style guidelines can significantly augment programmer
productivity and drastically eliminate design inconsistencies. You should create
common templates for each of your developers, content authors, and graphic artists
so that they can complete their specific piece of the application puzzle. The use
of style sheets also can greatly enhance the team's productivity.
Other design considerations include the following:
You need to design an interface that is aesthetically, or visually, pleasing to
the user. The application should provide a rich and rewarding experience for the
user. Most people interpret this point to mean that they need to go overboard on
the use of images and graphics. Consider the hammer and nail discussion again. You
must choose the tools that you use to create your interface carefully. Moderation
is the best guideline to follow concerning any of the tools that you have available.
Color should also be used properly. Use color to enhance, not overshadow, the content
of your application.
Page Design and Layout
The design of your pages is paramount to the success of the application. Your
pages should employ a common look and feel that is consistent across the application.
You should present information in the same way where possible. You need to use the
proper tool for presenting your information in the best way. Use color, where appropriate,
to highlight useful information. Images and graphics can add a lot to your application.
Be sure that you consider the placement and performance of these objects when designing
You also must logically organize the layout of your pages. Regardless of the metaphor
that you choose, most pages will contain a header area, a body, and a footer area.
The header area should include title and heading information for the page. The body
section will contain the detailed information part of your application. The body
section will be different based on the metaphor you choose. The key point is to make
sure that your information is logically organized on the page. Remember that people
read top to bottom and left to right. Design the layout of your application accordingly.
The footer section usually includes copyright and usage information as well as the
contact name and e-mail address for the web page.
Your web page design should be consistent with your application's purpose. The
interface should facilitate the accomplishment of the application's mission and enable
users to receive a rewarding experience.
Semantics refers to how you present meaning to your user through the design of
your web pages. You use different visual cues to convey this meaning. For example,
you may use certain images to portray concepts about your application and web pages.
Make sure that the image you choose is a good representation of the concept you're
communicating. The user should clearly understand what the symbol means. If you feel
there could be some confusion, use another visual cue.
A user must be able to easily and properly navigate through your application.
You can use the header and footer areas of your page to provide navigational cues
to guide the users in their journey. Examples include toolbars, tabs, and textual
hyperlinks to other pages in your application.
You should make sure that you inform the users where they are in the application.
Don't assume that they know where they are or where they're going. You need to effectively
present them with options about where to travel next. Remember the example of dead-end
streets? Providing navigational links is one way to avoid a dead-end web page. You
need to be cognizant of the fact that users may enter detailed pages in your web
hierarchy through another web page. You should provide a technique for navigating
to your home page, so that users receive the full experience of your web site. Search
utilities also are nice for first time and experienced users. For first time users,
a search engine can help overcome information overload by providing a utility to
find their required information or action. For experienced users, the search utility
provides a big time-saver for navigating to an exact location or service.
So far, the lesson has addressed basic considerations and techniques for effective
user interface design. The next few sections discuss specific HTML standards and
some of the proposed and incorporated browser standards.
Conduct Usability Testing
You should continue to evaluate the usefulness and usability of your Web-based
application throughout the development process. Does the application achieve its
mission and purpose? Does the application enable the user to achieve his or her needs?
You need to designate time in your development plan for usability testing. This task
should be performed by a team member as well as some of your end users. Monitor their
effectiveness at using the application to accomplish their tasks. Note those areas
in the application where there is confusion or concern.
You also should record the strengths of the interface for future reference for
other applications. During this process, you need to involve development team members,
including your programmers, content authors, and graphic artists. These team members
will be able to gain firsthand insight and feedback from watching the users and can
incorporate this knowledge into constructing a more user-friendly interface.
The best way to conduct usability testing is to develop a script for some of the
most important tasks that a typical user would want to accomplish. For example, a
task for a sales order entry application may be to place an order for an item. You
should group these tasks into cycles. A cycle consists of a certain number of steps
to carry out a specific task. In other words, the steps would be everything the user
needed to accomplish to place an order for an item using your application. Figure
3.2 demonstrates a sample form for documenting a usability test.
A sample usability testing form.
NOTE: This document also is on the CD-ROM included
with this guide for your use when developing your applications.
This form is for scripting the user actions. Another form for documenting the
results, strengths, and opportunities for improvement also is on the CD-ROM for you
to use. Figure 3.3 shows the layout of this form.
NOTE: These forms aren't rigid standards
and can be adapted for a variety of purposes. Perhaps usability is a new concept
to you, and you have never really considered performing these tests before you deploy
your application. Whatever the case, usability is important, and you should consider
the concepts that are mentioned in this section.
Recording the results.
Usability is usually performed during the system testing stage of a development
project. I overheard a conversation the other Chapter in which a project manager was
talking to one of his developers. The project manager asked the programmer if he
was going to perform a system test on the application which would include a usability
test. The programmer answered the project manager with a very confident response,
"That's what users are for!" Don't wait until your application is deployed
to absorb feedback from users. Be proactive.
Incorporate the Feedback into Your
After you conduct the usability test and document the results, you should evaluate
the strengths and possible opportunities for improvement in your application. You
need to assess what the user felt comfortable with and where the user needed further
assistance. The opportunities for improvements relate directly to possible changes
to the application. You should prioritize each of these changes and analyze the time
and effort needed to make each change. Does the benefit to the user outweigh the
cost to make the change and delay deployment of your application? If the benefit
is greater than the cost, make the change. If the cost is greater than the benefit,
document the change for possible implementation later. You need to communicate to
your users why the change wasn't made and that it will be considered in future releases.
Which Standards Should I Use?
There are several competing standards that define the structure and layout of
documents. The HTML Working Group of the Internet Engineering Task Force has historically
defined the standards for HTML.
The most current specification is HTML 3.2. You may be wondering what happened
to HTML 3.0. The difference between the HTML 3.0 standards and the HTML 2.0 standards
was enormous and proved to be an implementation nightmare. Also, the major software
vendors like Netscape and Microsoft had already included extensions to their browsers
that were becoming de facto standards. The World Wide Web Consortium (W3C) decided
to compromise and include some of these extensions to create HTML 3.2.
This section provides an overview of the features of HTML 3.2, as well as Netscape
and Microsoft browser extensions to these standards. In developing your application,
you should try to find common ground between these competing standards. Which standards
you use are determined in large part by answers to the following questions:
Determining the Browser
First, you need to determine what browsers are going to be used to view your application.
You may have control of setting the standard for which browser is used, as in the
case of an intranet application where you are setting the standard for the company
or organization. For external Internet applications, you may not know what browser
a person is going to use to interact with your application, because users with all
types of browsers can view it.
TIP: You should feel relatively confident
that most browsers support the use of the latest HTML standards. If you need to use
extended features of a specific browser, implement the feature, but plan for an alternate
route for those browsers that can't support the feature. An example would be using
the Microsoft extension of a borderless frame for your page. If you use borderless
frames for your application, you also need to provide a frame-based metaphor or textual
explanation for those browsers that don't support this feature.
Selecting the Features
You need to decide which browser features you need to support your application
needs. As you design your pages, you assess how you're going to accomplish the particular
application requirement. You should develop a list of alternatives for each requirement.
Once you have determined the possible alternatives, choose the extension that best
supports your need and has the greatest reach. In other words, try to use features
that accomplish your needs and that are supported by the most popular browsers.
Predicting the Future
Finally, you need to assess what future features you will be adding to your application.
Based upon these features, you should determine if the standards that you have chosen
will limit the expansion of your application. If you use the tip from the preceding
section, you should have room for expansion in your applications.
The development of browsers is growing faster than the pace of any product on
the market, including other software products, PCs, and cameras. Like these products,
the browser you use toChapter will be obsolete tomorrow, even if it is from the same
company. As you begin using a browser, the next beta is available for downloading.
Microsoft and Netscape have been leading the charge to develop these products to
capture the hearts of the Web community. In 1996 alone, Microsoft has worked on three
different versions of their browser.
You need to recognize this market phenomenon and plan accordingly. You should
watch for features that you can use and employ them in your interface. Likewise,
you should resist the temptation to use too much of a good thing. You need to provide
some consistency for the user.
The latest specification by the W3C is the HTML 3.2 standard. This specification
was previously code-named Wilbur. Before discussing HTML 3.2 specifications further,
the context needs to be set by briefly mentioning the basic features of the previous
HTML Levels 0 and 1 established the first standards for providing basic character
formatting for documents to be displayed by browsers for the World Wide Web. Levels
0 and 1 provide the structure that enables the construction of a page, including
a header, body, and footer section. Other features of 0 and 1 include the display
of numerical and bulleted lists and the ability to insert graphical images. With
HTML Levels 0 and 1, you can't insert movie files, display tables, or create multiple
columns of text.
The biggest advancement in the HTML Level 2 specification was the addition of
forms. A form enables you to place basic objects such as text boxes, push buttons,
radio buttons, and checkboxes to collect user input. The form has been great for
allowing organizations and companies to request and obtain information from their
visitors. Based on this information, a company can tailor content, products, and
services to the appropriate audience. This specification provided the first taste
of true user interaction.
HTML 3.2 adopted many of the browser extensions that had been developed previously
by Microsoft and Netscape. The HTML 3.2 specification supports the use of tables,
applets, superscripts, and subscripts. The following sections introduce some of the
specific features of the HTML 3.2 specification.
A table enables you to present information that consists of rows and columns.
The table is especially useful when presenting a result set from a query against
a database. The following code sample shows the structure for formatting data for
a table that has three rows and three columns.
In this code example, the tag <TR> stands for table row, and the
tag <TD> indicates table data. A tag surrounded by <>
denotes the beginning of the tag. The end tag is represented by </>.
For example, <TR> indicates the start of the tag, and </TR>
indicates the end of the tag. Listing 3.1 shows code for a sample table.
Listing 3.1. Formatting a table.
<caption align="top"><strong>Houston Rockets Home Basketball
<th align="left" width="75">Opponent</th>
<th align="left" width="50">Date</th>
<th align="left" width="50">Time</th>
</table> Figure 3.4 shows how this code sample would be displayed
in Microsoft Internet Explorer 3.0.
Browsing a table.
Other table features include inserting images into a table, nesting a table within
a table, and providing a URL link to another page.
HTML 3.2 supports the use of Java applets. Java applets are executable programs
created with the Java language from Sun Microsystems. These applets execute within
the context of your web page and can provide various functionality from multimedia
to spreadsheet applications. The following code example shows an applet that has
been embedded in a web page.
<h1><applet code="Neon.class" align="baseline" width="296"
height="61"><param name="picture1" value="X_sneon1.gif"><param
name="picture2" value="X_sneon2.gif">This is a neon coffee cup</applet></h1>
As you can see in the example, you can set the height and width of the applet
display area. You also can pass specific parameters to the applet by using the <param>
tag. Other customizable attributes include the alignment of the applet and the text
to display if a browser can't execute Java applets. Figure 3.5 illustrates how a
Java applet looks within a browser.
A Java applet.
You will see a more in-depth discussion of Java applets, including information
about how to use them in your applications on Chapter 15, "Integrating Objects into
Other Information Appearance Elements
HTML 3.2 provides a variety of new logical and physical elements to affect the
appearance of text and information. The following code shows some of the available
This is <BIG>Big Print</BIG>
This is <SMALL>Small Print<SMALL/>
This is an example of <STRIKE>Strike Through</STRIKE>
This is a <SUB>Subscript</SUB>
This is a <SUP>Superscript</SUP>
This is <U>Underlined Text</U>
Figure 3.6 shows how these effects are displayed.
Formatting the information.
The HTML specifications continue to evolve, as companies like Netscape and Microsoft
continue to push standardization and acceptance of their unique features and extensions.
"Cougar" is the code name for the next version of HTML. Features that are
being considered include client-side scripting, style sheets, and objects. Until
then, you can access these features by using the extensions provided by the two leading
developers of browsers: Netscape and Microsoft.
Netscape has implemented several exceptional features in their browsers over the
past couple of years. Some of these extensions are being proposed for future versions
of the HTML standards. I will touch on a few of the more popular Netscape extensions.
Frames enable you to divide a page into separate scrollable panes. A common implementation
of this feature is to provide a table of contents frame that remains static on the
pane to the left of the display area while the dynamic body pane displays the contents
of the different sections. You also can create static panes at the top and bottom
sections to provide static header and footer information, like a title at the top
and copyright information at the bottom. You should be careful not to go overboard
when using frames. You can find a good example and implementation of frames at the
following Web site:
Netscape exhibits this page to demonstrate how web pages should be designed using
frames. Other businesses and organizations are taking advantage of frames to disseminate
information. The following is another Web site to check out:
Netscape provides many options for customizing the look of your web pages. You
use these elements with the <Body> tag to affect the appearance of
the page. You can set the background image and background color for your page. You
also can establish the color of your text and the color that indicates links to information
within your web page. For links, you can further customize these colors to indicate
those links that are active and those that have been previously visited. You can
specify the font size and color of any text within the document.
You might want to add a horizontal line at the top and bottom of your page to
separate these sections from the main body. This style can add a feeling of logical
organization to your pages. Netscape provides a feature to place horizontal lines
on your page and to set their parameters like size, width, and alignment.
Netscape also provides a way to further customize the look of your tables by specifying
the width of table borders, the spacing around the cells, and the width of the actual
Another popular feature involves placing text around your images. Figure 3.7 demonstrates
Placing text around an image.
Microsoft has made significant enhancements to its Internet Explorer since the
first version was released in 1995. With version 3.0, Internet Explorer regained
the lead for features, surpassing some of the Netscape capabilities. The more unique
extensions of Internet Explorer 3.0 are covered in the following sections.
Microsoft also supports the use of tables. Microsoft has developed some very nice
features within Internet Explorer to enable you to create very graphical tables similar
to the capabilities in Microsoft Word. You can set individual background colors and
background images for each cell in the table.
Microsoft finally supports the use of frames. The addition of this feature allowed
Microsoft to catch up with Netscape. Microsoft took this concept a step further,
though, by providing the ability to create floating and borderless frames. Floating
frames enable you to incorporate the frame concept into an area of your window without
the frame consuming the page.
A floating frame.
A borderless frame.
A floating frame can be sized and placed anywhere within the page. Borderless
frames are frames that don't have a border. Figure 3.8 displays a floating frame,
while Figure 3.9 shows the concept of a borderless frame.
Cascading Style Sheets
A style sheet enables you to set formatting and appearance instructions for all
your web pages. This is similar to using a formatting template in Word or a desktop
publishing package. You construct the style sheet once to provide a common look and
feel for your web pages. For example, you might want the title to be the same font
and color for all your web pages. Instead of formatting the title for each web page,
you could use a style sheet to handle this aspect for you.
Microsoft takes this feature a step further with cascading style sheets. You may
establish a particular style sheet for your web pages while one of your users has
developed a different, personal style sheet for all incoming pages to his browser.
Cascading style sheets resolve the differences between the two styles and present
the proper settings. You set the style for your web pages with the <STYLE>
Cascading style sheets enable you to establish a consistent look and feel for
your web pages. Common standards for web page development can be established while
allowing room for creativity from your content authors and developers.
Microsoft supports some other features for extending your web pages. The <MARQUEE>
tag enables you to place a scrolling marquee of text on your web page. You can control
the frequency, behavior, height, width, color, and other parameters for this tag.
Microsoft enables you to insert inline movies within the <IMG>
tag. This feature supports the use of video clips for your users to see while using
VCR-like controls. Microsoft also enables you to insert background sound and music
in your web page. The sound or music plays in the background when your web page is
displayed. You use the <BGSOUND> tag to accomplish this feature.
Many of these features are presented in detail in the coming Chapters and weeks. As
you learn to use Visual InterDev, you can apply examples from this guide to build
dynamic web pages for your applications.
Choosing a Development and Deployment
Choosing a proper development architecture and platform is critical to the success
of any project. This section focuses specifically on platform considerations for
selecting the right development and deployment environment.
Visual InterDev can run on Windows 95, Windows NT Workstation, and Server. Each
of these platforms offers a viable alternative. You also can use a combination of
these operating systems to support your efforts. In selecting a development platform,
you need to consider the following factors:
You need to think about the current and future needs of your application. You
may be supporting 50 users currently, but the popularity of your application may
grow and with that growth will come an increase in user count and the size of your
database. Scalability refers to how well a platform can scale or move to handle an
increase in the growth of your application needs. You may originally size your database
and plan your application based on these current needs but allow no room for growth.
When planning your application, you need to choose a platform and build an application
that permits growth.
You also need to select the proper development tools to support the user requirements
of your application. Before you select these tools, you will need to perform a proper
analysis of what the user needs are and how your application is going to address
these needs. These requirements will help you choose what tools you need to build
the most effective application.
You should select these tools before you begin the development phase of your project.
Integration is much harder when you incrementally add tools along the way. One of
the best ways to proceed is to establish a toolset and provide the tools in it as
an integrated package to the developers. This toolbox significantly increases the
productivity of the programmers. Also, the chance for having development environment
problems is drastically reduced, because the tools have already been selected and
tested for interoperability.
Without standards, there is anarchy. Some would say that with standards, there
is no room for creativity. In truth, though, you need to have standards and allow
room for developer creativity. You can accomplish both.
You need to provide a set of standards that give your developers a consistent
platform. If you're a project manager, you should assign a developer to set these
standards. You need to get involvement from any and all members of the development
team who have an interest in establishing the standards. Those members who don't
help are saying that they can live with the standards that are set. You should establish
these standards for all aspects of your development, including programming, testing,
and documentation. Some of these standards will be how-to documents that define how
to perform such operations as testing your application and promoting your application
between the environments. You also should construct standard programming shells for
your developers. These shells will augment the productivity of your developers and
promote consistency within your application code. Style sheets for your HTML pages
are an excellent example of this concept.
Standards aid in all phases of your development and help resolve conflicts when
questions and issues arise.
Establishing the right architecture is a critical step in your development effort.
You need to create an architecture that supports your development both on the client
and the server. If you create a standard architecture for connecting to the database
and communicating with server-side programs and applications, you can be assured
that every developer is performing these functions in the same manner. Also, this
process enables you to build an architecture that effectively supports your application's
Choosing the right database is crucial to your application. I will talk about
this process a little later in the Chapter. For now, I wanted to mention what you need
to focus on from a development perspective once you have selected a database.
First, you should logically design your database based on user requirements. These
user requirements keep appearing, but they drive many aspects of your application
development. Entity/Relationship (E/R) diagramming tools can definitely help with
this task. Some of the more popular tools include Erwin from Logic Works and S-Designor
from Sybase's Powersoft division. These tools are very robust and should handle all
of your database administration needs. If you're using MS SQL Server as your database,
you can use the Database Designer within Visual InterDev to create and maintain your
database objects. You should assign a specific person to handle the database administration
functions for your project if you have the luxury. This person can work with the
users and translate their functional requirements into technical requirements for
the database model.
Once you have logically designed the database, you will physically create the
database. Most of the E/R tools on the market automatically create the physical database
based on the logical model that you construct. You need to create a development,
testing, and a production environment for each of your databases. Each environment
should support the different phases of your project.
NOTE: For big projects with many development
team members and users, you may need to create a fourth database environment for
training the users. You can use the testing environment for training, but problems
will invariably occur due to the nature of the environment. Conflicts will happen
between the testing by the development team and the training of the users. I have
conducted many training sessions in which the system crashed and I wished I had a
separate training environment. This can save an initial bad impression of your application
in the long run.
You should perform regular backups of your database. You also should maintain
a pristine copy of the database, especially when you begin the testing phases of
your project. This copy will represent the initial set of test data. As developers
run their tests, the actions will insert, change, and delete this data. Once they
have completed their tests, you can restore the data back to its initial state. This
process provides a controlled environment for your testing.
Now that you have learned about some general aspects and considerations for your
application architecture, it's time to talk more specifically about Visual InterDev
alternatives and their implications.
Using Windows 95 as Your Client
Visual InterDev can run on a Windows 95 platform. You can use Visual InterDev
to develop your application as well as deploy both your client and server portions
on Windows 95. There are specific benefits and considerations you need to think about
when developing and deploying on a Windows 95 platform. Each of these subjects is
discussed within the context of the client-server model and the database model for
your Windows 95 Web-based application.
NOTE: The considerations discussed in
this section apply to both Windows 95 and Windows NT Workstation. While Windows NT
Workstation is a full 32-bit operating system and more robust than Windows 95, it
is still a client platform. The ideal model for medium to large applications with
high transaction volumes is a client-server platform that includes either Windows
95 or Windows NT Workstation on the client and Windows NT Server for your server.
You can develop and deploy your Visual InterDev applications solely on the Windows
95 platform. While this is not recommended from a scalability standpoint, there are
some benefits to using this client-server model for development. Also, you could
use Windows 95 as your client and server in low user/low volume applications.
The client side of this equation involves the use of a browser, such as Internet
Explorer, Netscape Navigator, or another type of browser. The server involves the
use of the Microsoft Personal Web Server for Windows 95. This web server was developed
to compete with products such as Netscape's Fastrack Server, which also runs on Windows
95. The primary goal of this server is to provide a local server for those people
developing on Windows 95 who don't have the luxury of a network connection.
Microsoft's Personal Web Server supports all of the server-side scripting functionality
of Active Server Pages as well as other server features of Visual InterDev. The very
name of the product suggests its scalability limitations. The Microsoft "Personal"
Web Server was designed to be a personal, individual web server. The benefit is that
you can develop your application on a single machine. The limitation is that you
won't be able to support a high volume application with a large number of users.
Windows 95 is an ideal development environment for Visual InterDev. Deployment
of your client-side components is also very viable on the Windows 95 operating system.
Deployment of your application server components on a Windows 95 environment should
be avoided if your application is going to be a medium to high-volume application.
The robustness of your database options on a Windows 95 platform is somewhat limited.
Some of the same scalability and transaction support questions arise concerning the
database ingredient of the application equation on a Windows 95 platform. The robustness
of your database is a function of the Windows 95 operating system and the type of
products that are offered for this environment. Your choices of PC databases include
Microsoft Access, Microsoft FoxPro, Sybase SQL Anywhere, and any other ODBC-compliant
database for Windows 95. PC databases provide an easy-to-use environment to create
the database for your applications. These databases provide an alternative for those
applications that support a low number of users, have a database that is small to
medium in size, and don't need the power of a traditional client-server database.
For the more robust applications, you can still use a PC database for part of
your development effort. An example of this scenario involves the use of Microsoft
Access. You can use a single Windows 95 machine to build a prototype of your application
that uses the Personal Web Server as the server and Access as the local database.
Using this architecture, you can rapidly build your prototype application. During
this development, you can conduct joint application design (JAD) sessions with your
users to demo your application and record their feedback. Along the way, you construct
the logical model and physical creation of your database in Microsoft Access.
Once you have refined the prototype and incorporated the user recommendations,
you can upsize your application to a more traditional client-server platform. Microsoft
provides an upsizing wizard that enables you to transform your Access database to
a MS SQL Server database. This upsizing wizard is also on the CD-ROM included with
this guide. I have used this method for both client-server and Web-based development
projects to greatly reduce the development time of my projects.
Combining Windows 95 and Windows
You can use Visual InterDev to develop and deploy Web-based applications in a
mixed environment like Windows 95 and Windows NT.
NOTE: When I talk about mixed environments, I'm
speaking specifically about platforms that support Visual InterDev features like
ActiveX controls, Active Server Pages, and so on. You can build applications with
Visual InterDev to inter-operate in a mixed environment with legacy applications
and other custom-developed programs that run on platforms such as UNIX.
This platform is probably the preferred environment both from a development and
deployment standpoint. You also can substitute Windows NT Workstation for Windows
95 in this model. The client considerations are practically the same.
In this model, the client machines run on Windows 95, and the server is Windows
NT. From a development standpoint, you can support team development by using this
networked environment to provide central source code management on the server. Also,
you can adequately test your server components to see how these components perform
in a robust client-server environment. Regarding deployment, Windows NT Server and
Microsoft's Internet Information Server provide a very robust, industrial strength
platform to serve the needs of your application.
The database options in this model are more powerful. You can use true client-server
databases that have a plethora of features and support a high volume application
with a large number of users. Choices include Oracle, MS SQL Server, Sybase SQL Server,
and other ODBC-compliant databases.
The benefits of using a SQL database for this model include more administrative
control and a more robust environment to develop your applications. You can truly
take advantage of the power of a database in this class to meet the more advanced
needs of your application.
Choosing the Right Database for
I talked previously about the different client-server models that you can use
to develop and deploy your Visual InterDev applications. I also briefly touched on
the database options in this model and their strengths and benefits. In this section,
I want to cover specific aspects of PC databases versus SQL, client-server databases.
This section also touches on factors to consider when choosing a database for your
PC databases are designed to be intuitive and user-friendly. With a minimum knowledge
of database techniques and concepts, you can create, maintain, and interact with
most of the popular PC databases on the market. These PC databases include Microsoft
Access, Microsoft FoxPro, Sybase SQL Anywhere, and others. On the other hand, client-server
databases like MS SQL Server, Oracle, and Sybase offer a more powerful and robust
solution. These databases have been designed to handle a large number of users and
a high transaction volume. Most of the platforms that support these databases are
traditional server platforms like Windows NT and UNIX. You should consider the following
factors when choosing between a PC database and a client-server database:
The performance of your application is critical to its acceptance by your users.
Database performance is a big factor in determining the overall performance of the
application. Client-server databases provide better performance for highly intensive,
transaction-processing applications. Also, if your application executes queries that
will return many rows of data, you should use a client-server database. PC databases
usually support a more static environment in terms of the content of the data and
usually support a low to medium number of users. You should use a PC database if
you're not going to support a high number of users who are contending for the same
You also can scale a client-server database to multiple processors. This option
enables you to spread the processing between multiple processors or machines. This
kind of solution offers better fault tolerance and higher performance.
New Term: Fault tolerance refers to
the ability to handle the failure of a machine or system. A fault-tolerant system
tolerates a crashing machine by switching over to another machine to process the
Client-server databases usually support larger databases than PC databases. The
design goals of client and server platforms are very different, and these goals translate
into the objectives for the respective database. PC databases are usually supported
by typical client platforms while the robust, SQL databases are supported by the
traditional server platforms.
You should estimate the size of your database, and then select the database that
is going to meet the needs of your application. Remember, the size of your database
can rapidly grow. As the database becomes larger, you should consider moving to a
client-server database. Predicting the size of your database is both an art and a
science. Make sure that you choose the right database when considering and estimating
Your database and application must be reliable. Users must have faith that they
can use the application without having the system go down. PC databases don't provide
as much reliability as client-server databases. Most of the PC databases run a copy
of the database engine on the client machine and don't have robust support for distributed
transactions. In a networked environment, the client machine can crash and potentially
corrupt the database. Client-server databases process the transactions centrally
and insulate the databases from client machine failures.
Client-server databases also offer better locking features. These features can
significantly enhance an application in which you have users who are contending for
the same information. Data integrity is maintained, and you can use better strategies
for ensuring that all users are viewing the most up-to-date information.
As the size and importance of your database grows, you will want to use effective
tools to manage your database. Client-server databases offer better systems management
tools for maintaining your database. The backup and recovery tools are significantly
better. Some client-server databases even support hot, online backups of the data.
These tools also offer other administrator features such as e-mail notification of
system problems. PC databases don't offer the range or power of systems management
Security is always a flamboyant topic, whether you're implementing a client-server
application, developing a Web-based application, or living in your home. Everyone
has the basic need to feel secure. Security has become a big topic on the Internet,
because companies and users have pushed for the ability to conduct electronic commerce.
Security has implications for the applications that you develop, whether these applications
are for a company's intranet or an external Internet application. There are many
good sources both in guidestores and on the Internet that cover security exhaustively.
For the context of this lesson, I will attempt to point out some specific emerging
initiatives that you may want to research further.
It's important to discuss some issues that are driving these security initiatives.
Authentication is the first major concern and refers to verifying the identity of
something or someone. The process of authentication could refer to verifying code
to determine that the author is genuine. Another example of authentication involves
electronic commerce in which a company would want to confirm a person's identity
before enabling them to make a purchase.
Authorization is another major concern and refers to confirming that a person
has the authority to perform an action. Returning to the electronic commerce example,
once you have verified that the person is who he says he is, you need to determine
that he has the authority to buy the selected items. The third issue is integrity,
which involves the process of ensuring that the information that has been passed
over the network hasn't been altered in any way. Now that I have defined three of
the major issues surrounding security, it's time to take a look at several emerging
initiatives that warrant discussion.
Netscape Secure Sockets Layer
Netscape designed the Secure Sockets Layer (SSL) to ensure secure communication
between the client and server machines. SSL supports server authentication, data
encryption, and message integrity. Outbound information is properly encrypted so
that it can't be easily translated and read. Inbound information is decrypted and
displayed to the user. SSL applies to the available Internet protocols like HTTP,
FTP, and Telnet.
Microsoft Security Initiatives
Microsoft has developed several security initiatives that merit discussion. Each
of them is discussed in the following sections.
Secure Electronic Transactions
The Secure Electronic Transactions (SET) framework was designed to securely permit
electronic bank-card payments over the Internet. SET is a joint project developed
by MasterCard, VISA, Microsoft, Netscape, IBM, GTE, and others. This framework uses
digital certificates to verify all of the major players involved in an online transaction:
the buyer or cardholder, the merchant, and the merchant's financial institution.
With the introduction of Internet Explorer 3.0, Microsoft developed a way to authenticate
and qualify particular components of code like ActiveX controls. The code-signing
specifications enable a developer to sign their application. A user can be assured
that the code is authentic and reliable based on a digital signature from the author
of the code. Authenticity refers to the origin of the code. A user can be assured
that the person who signed the code is the original author. Integrity indicates that
the code hasn't been altered since its inception.
Microsoft has developed the CryptoAPI to provide an interface to developers when
designing security features into their applications or products. Many of Microsoft's
specifications including SET and code-signing are based on the CryptoAPI. The CryptoAPI
is derived from the word cryptography, which refers to the use of encryption and
decryption to protect and read sensitive or secret information. The CryptoAPI provides
a way to encrypt and decrypt information based on several popular methods of encryption,
like RSA technology. The CryptoAPI also enables developers to digitally sign their
code and provides a method for verifying signatures.
Security is an area in which the standards are continuing to emerge as the importance
of the Internet rapidly grows. You should follow these technologies as well as other
new and emerging initiatives as they develop.
In closing the lesson for the Chapter, I want to summarize the material that I have
presented. The following list represents a considerations checklist that provides
some general tips for Web-based development:
- Create a rich and rewarding experience for your users. Make them glad that they
visited, and provide a reason for them to return.
- Design and develop an effective user interface. The interface should enable the
user to be effective in accomplishing their tasks. Effectiveness has as much to do
with the interface as the efficiency of your code.
- Provide a common and consistent look and feel across your application. Your pages
should reflect a consistent font, color, page background, and page layout.
- Use an appropriate metaphor for the overall structure of your application. Also,
use appropriate metaphors and symbols on your web pages that associate the correct
meaning to the user.
- Give navigational cues to the user that provide the proper guidance.
- Provide the user with a path at all times. Do not create dead-end pages.
- Use graphics, multimedia, and advanced features to contribute to the overall
mission and purpose of your application and web pages. Avoid the use of too many
features. Resist the temptation to use advanced features just for the sake of using
- Avoid having the user scroll excessively either horizontally or vertically. Provide
a table of contents for long documents that provide jumps to the individual sections.
- Provide textual cues for your images. These cues will inform the user about the
hyperlink when images are being loaded initially or are turned off.
- Provide search features for your site that enable a user to find information
- Take advantage of the different development and deployment platform options to
enhance your productivity.
- Choose the right database for the job. Proactively plan your application needs,
and select the proper database and tools to accomplish these requirements.
In summary, think about what you're trying to accomplish by developing your application.
After you have considered the users' needs, devise a plan to design and develop the
I hope toChapter's lesson has been helpful and piqued your thinking about the application
development process. Many of the things that were discussed toChapter apply to both client-server
and Web-based application development. Other concepts are only pertinent to Web-based
At the beginning of the Chapter, you learned about effective user interface design.
Hopefully, your interfaces are already effective and this section served as a review.
You learned about specific steps to follow when designing your application interface.
Important steps to follow involve defining a purpose for your application, identifying
user needs, and conducting testing to ensure the usability of your application. You
learned about specific factors that affect your interface, like aesthetics, page
design and layout, and navigational cues.
You then learned about the ever-changing standards for developing web pages. You
learned about the latest HTML standards and their implications for designing an effective
web page. You then read about some of the more popular extensions to these standards
from Netscape and Microsoft. This part of the lesson focused on why you would want
to use these features to support your application needs. In later lessons, you will
get a chance to implement these features. You were provided with some guidelines
for choosing between the various browser standards.
Later in the Chapter, you learned about the different alternative platforms for developing
and deploying your application. In this section, the focus was on the benefits, strengths,
and limitations of each alternative. You discovered how to use each alternative to
enhance your productivity. The lesson also focused on how to choose the right database
using specific guidelines for this process. You learned that there are strengths
to both PC and client-server databases. You also learned how to take advantage of
each class of database to support your development effort.
Toward the end of the Chapter, the lesson introduced the topic of security. You learned
about some of the initiatives that are in progress and why they are important.
At the close of the Chapter, you were provided with a summary of the lesson's material
in the form of a considerations checklist. This checklist should help to provide
some general guidelines you can use when designing and developing your applications.
- Q Are there any problems with using frames as my application metaphor?
A Frames provide a structure method to divide your page, and are intended to
provide an effective navigational technique. Unfortunately, frames can provide some
navigational nightmares in a number of ways. Users can become confused with what
pane they are interacting with. Also, printing can be complicated. Sometimes you
request the printer to print one pane, and another pane is sent to the printer.
Sometimes frames can cause problems for users who are trying to add a particular
page to their favorites or guidemark list. A user may add a guidemark only to find
out that the page that was saved was not the intended page. A final problem with
frames involves the interaction with the navigational buttons of the browser. The
Back and Forward buttons do not always take you to the page that you expect. With
all of these problems, frames can provide a good interface if implemented correctly.
Microsoft's borderless frames may provide an answer to some of these problems. As
always, use discernment when choosing this metaphor.
Q What are the main factors to consider when choosing a database?
A Database size, application type, and number of users are the main considerations
when you pick a database for your application. A large database that supports a transaction-intensive
application with a medium to large number of users will warrant a client-server database.
A decision-support system with a small-to medium-sized database and a low to medium
number of users can be supported by a PC database.
Web-based development presents a new and interesting challenge. The proper design
and development of a Web-based application is essential to its acceptance. You can
choose from many metaphors, features, and standards to implement your web pages.
For toChapter's workshop, I want you to visit several of your favorite sites to determine
the strengths and weaknesses of the web pages. Note the features that you like and
those features that are unnerving. You should record some of these features to be
able to use in later lessons and future applications. In addition to your favorite
sites, take a look at these sites for additional ideas:
- 1. Name the five basic steps for designing an effective user interface.
2. What are dead ends?
3. What is the new feature in the HTML 3.2 standards that is geared toward displaying
database result sets?
4. Name two of the Microsoft extensions to the HTML standards.
5. Name the four factors to consider when choosing a database for your Web-based
- 1. The following steps outline the five basic steps to designing an effective
a. Define a purpose for the interface.
b. Identify the users' expectations and needs.
c. Design the user interface.
d. Conduct usability testing.
e. Incorporate the feedback into your interface.
2. Dead ends are like dead-end streets--they leave you with no place to go. A
dead-end page is a web page that provides no navigational path within the context
of the application. The only way for a user to navigate out of a dead end is to use
the browser navigational buttons of Back and Forward.
bHTML 3.2 provides support for tables, which are a great way to show returned rows
from a database query.
4. Possible answers include
Cascading Style Sheets
Frames (regular, floating, and borderless)
5. Possible answers include