Day 3 Design and Development Considerations 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 books on the market are those that teach the intricacies of a specific tool, like the book you're currently reading. When was the last time you traveled to the local bookstore to buy the latest title on project planning, project management, or project standards and methodology? The answer is probably never, and rest assured, today'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 today'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 day, 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 day, you will read about security issues and discover a considerations checklist that you can use when developing applications for the Web. 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 days. Those are days 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. Today 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 days. 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 today'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 application? In defining a purpose for your interface, you should consider the following things: Content: What information should be included? Audienc: Who is the target audience? User benefits What benefit will the users gain from the application? 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. Figure 3.1. 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 options. 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: Aesthetics Page design and layout Semantics Navigation Aesthetics 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 your pages. 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 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. Navigation 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. Figure 3.2. A sample usability testing form. NOTE: This document also is on the CD-ROM included with this book 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. Figure 3.3. Recording the results. Usability is usually performed during the system testing stage of a development project. I overheard a conversation the other day 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 Interface 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: What browsers reside in my user community? What features do I need to support my application? What standards do I need for future expansion of my application features? 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 today 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. HTML 3.2 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 specifications. 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. Tables 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. <TR> <TD>Cell1</TD><TD>Cell2</TD> <TD>Cell3</TD> </TR> 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. <table border="0"> <caption align="top"><strong>Houston Rockets Home Basketball Schedule</strong></caption> <tr> <th align="left" width="75">Opponent</th> <th align="left" width="50">Date</th> <th align="left" width="50">Time</th> </tr> <tr> <td width="75">Bulls</td> <td width="50">12/4</td> <td width="50">7:30</td> </tr> <tr> <td width="75">Celtics</td> <td width="50">12/7</td> <td width="50">7:30</td> </tr> <tr> <td width="75">Jazz</td> <td width="50">12/10</td> <td width="50">7:30</td> </tr> </table> Figure 3.4 shows how this code sample would be displayed in Microsoft Internet Explorer 3.0. Figure 3.4. 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. Applets 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. Figure 3.5. 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 Day 15, "Integrating Objects into Your Applications." 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 features. This is <BIG>Big Print</BIG> <BR><BR> This is <SMALL>Small Print<SMALL/> <BR><BR> This is an example of <STRIKE>Strike Through</STRIKE> <BR><BR> This is a <SUB>Subscript</SUB> <BR><BR> This is a <SUP>Superscript</SUP> <BR><BR> This is <U>Underlined Text</U> Figure 3.6 shows how these effects are displayed. Figure 3.6. 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 Extensions 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 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: www.netscape.com/comprod/products/navigator/version_2.0/frames/eye/ 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: www.childadvocates.org Appearance 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 data cells. Another popular feature involves placing text around your images. Figure 3.7 demonstrates this feature. Figure 3.7. Placing text around an image. Microsoft Extensions 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. Tables 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. Frames 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. Figure 3.8. A floating frame. Figure 3.9. 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> tag. 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. Other Extensions 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 days and weeks. As you learn to use Visual InterDev, you can apply examples from this book to build dynamic web pages for your applications. Choosing a Development and Deployment Platform 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: Scalability Development tools Standards Architecture Database Scalability 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. Development Tools 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. Standards 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. Architecture 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 needs. Database Choosing the right database is crucial to your application. I will talk about this process a little later in the day. 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 and Server 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. Client-Server Model 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. Database 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 book. 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 NT 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. Client-Server Model 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. Database 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 the Job 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 applications. 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: Performance Database Size Reliability Systems Management Performance 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 information. 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 application's need. Database Size 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 its size. Reliability 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. Systems Management 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 tools. Security Issues 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 bookstores 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 Framework 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. Code-Signing 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. CryptoAPI 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. Considerations Checklist In closing the lesson for the day, 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 them. 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 easily. 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 "killer app." Summary I hope today's lesson has been helpful and piqued your thinking about the application development process. Many of the things that were discussed today apply to both client-server and Web-based application development. Other concepts are only pertinent to Web-based development. At the beginning of the day, 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 day, 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 day, 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 day, 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&A 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 bookmark list. A user may add a bookmark 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. Workshop 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 today'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: ESPNET Sportszone (espnet.sportszone.com) Land's End (www.landsend.com) Virtual Vineyards (www.virtualvin.com) Microsoft (www.microsoft.com) Netscape (www.netscape.com) Quiz 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 application. Quiz Answers 1. The following steps outline the five basic steps to designing an effective interface: 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) Background sound Marquees Movies Formatted tables 5. Possible answers include Performance Database size Reliability Systems management