Chapter 10 Web Site Development PDF

10 CHAPTER Web Site Development Chapter Objectives In this chapter, you will learn how to... Describe the skills, functions, and job roles Create the site ma...

10 CHAPTER Web Site Development Chapter Objectives In this chapter, you will learn how to... Describe the skills, functions, and job roles Create the site map, page layout, prototype, and needed for a successful Web project documentation as part of the Design phase development Complete the Web pages and associated files Utilize the stages in the standard System during the Production phase Development Life Cycle Verify the functionality of the Web site and use a Identify other common system development test plan during the Testing phase methodologies Obtain client approval and launch a Web site Apply the System Development Life Cycle to Modify and enhance the Web site during the Web development projects Maintenance phase Identify opportunities and determine goals Compare the goals of the Web site to the results during the Conceptualization phase as part of the Evaluation phase Determine information topics and site Find the right Web host provider for your Web site requirements during the Analysis phase Choose a domain name for your web site This chapter discusses the skills needed for successful large-scale project development and introduces you to common Web develop- ment methods. It is important to realize that each project is unique; each has its own needs and requirements. Choosing the right people to work on a Web project team can make it or break it. 399 400 Chapter 10 Web Site Development 10.1 Successful Large-Scale Project Development Large-scale projects are not completed by only one or two individuals. They are created by a group of people working together as a team. The job roles of project manager, information architect, marketing representative, copywriter, editor, graphic designer, database administrator, network administrator, and Web developer are usually needed for large projects. In smaller companies or smaller organizations each person can wear many hats and juggle his or her job roles. In a smaller-scale project, one of the Web developers may double as the project manager, graphic designer, database administrator, and/or infor- mation architect. Job roles necessary for successful projects are discussed in this section. Project Manager The project manager oversees the Web site development process and coordinates team activities. The project manager creates the project plan and schedule. This individual is accountable for reaching project milestones and producing results. Excellent organiza- tional, managerial, and communication skills are required. Information Architect The information architect clarifies the mission and goals of the site, assists in determining the functionality of the site, and is instrumental in defining the site organization, navigation, and labeling. Web developers and/or the project manager sometimes take on this role themselves. Marketing Representative The marketing representative handles the organization’s marketing plan and goals. The marketing representative works with the Web designers to create a Web presence, or look and feel, that aligns with the marketing goals of the organization. The marketing representative also helps to coordinate the Web site with other media used for marketing, such as print, radio, and television marketing. Copywriter and Editor The copywriter prepares and evaluates copy. When material from existing brochures, newsletters, and white papers will be used on the Web site, it must be repurposed or reworked for the Web media. The content manager or editor may work with the copy- writer to check the text for correct grammar and consistency. Content Manager The content manager participates in the strategic and creative development and enhancements of the Web site. He or she oversees changes in content. The skill set of a successful content manager includes editing, copywriting, marketing, technology, and communication. The person in this dynamic job role must be able to facilitate change.  10.2 The Development Process 401 Graphic Designer The graphic designer determines appropriate use of color and graphics on the site, creates page layouts, and designs graphics. The graphic designer may work closely with the Web developers to create graphic buttons used in mouseover effects. Database Administrator A database administrator is needed if the site accesses information stored in databases. Database administrators create databases, create procedures to maintain databases (including backup and recovery), and control access to databases. Network Administrator The network administrator configures and maintains the Web server, installs and main- tains system hardware and software, and controls access security. Web Developer The Web developer writes XHTML code and client-side scripting such as JavaScript. The Web developer may develop server-side processing such as PHP or ASP. Typically, there are multiple Web developers assigned to a large project, each with his or her area of expertise. Project Staffing Criteria Whether the project is large or small, finding the right people to work on it is crucial. When selecting staff for a project, consider each individual’s work experience, portfolio, formal education, and industry certifications. Another option to staffing a Web project (or developing an entire Web site) is to out- source the project—that is, hire another company to do the work for you. Sometimes portions of a project are outsourced, such as graphics creation, multimedia animation, or server-side scripting. When this option is chosen, communication between the project manager and the external organization is crucial. The outsource team needs to be aware of the project goals and deadlines. Large or small, developed in-house or outsourced, the success of a Web site project depends on planning and communication. Formal project development methodology is used to coordinate and facilitate the planning and communication needed for a successful Web project. 10.2 The Development Process Large corporate and commercial Web sites don’t just happen. They are carefully built, usually by following a project development methodology. A methodology is a step-by- step plan that encompasses the life cycle of a project from start to finish. It comprises of a series of phases, each having specific activities and deliverables. Most modern 402 Chapter 10 Web Site Development methodologies have their roots in the System Development Life Cycle (SDLC), a process that has been used for several decades to build large-scale information systems. The SDLC comprises a set of phases, sometimes called steps or stages. Each phase is usually completed before beginning the activities in the next phase. The basic phases of the standard SDLC (see Figure 10.1) are systems investigation, systems analysis, systems design, systems implementation, and maintenance. Figure 10.1 The System Systems Integration Development Life Feasibility Study Cycle (SDLC) Maintenance Systems Analysis Improved System Functional Requirements Systems Implementation Systems Design Operational System Systems Specification Web sites are often developed using a variation of the SDLC that is modified to apply to Web projects. Large companies and Web design firms usually create their own special methodology for use on projects. The Web Site Development Cycle is a guide to successful Web project management. Depending on the scope and complexity of a particular project, some steps can be completed in a single meeting; other steps can take weeks or months. The Web Site Development Cycle, shown in Figure 10.2, usually consists of the follow- ing steps: Conceptualization, Analysis, Design, Production, Testing, Launch, Maintenance, and Evaluation. Figure 10.2 Conceptualization The Web Site Identify Opportunity Development Cycle Evaluation Analysis Review Site Gather Requirements Maintenance Design Fix and Enhance Site Define the Solution Launch Production Publish Web Site Create Content Construct Site Testing Test Site  10.2 The Development Process 403 FAQ What about other Web site development methodologies? The development methodology presented in this chapter is a version of the traditional SDLC modified for Web site development. Other development methods include the following: Prototyping. A small working model is created and shown to the client. It is continually revised by the developer until it is usable for the intended purpose. This method can easily be included in the Web Development Life Cycle during the Design phase. Spiral System Development. This is excellent for very large-scale or phased projects where it is important to reduce risk. Small portions of the project are completed one after the other in a spiral system of development. Joint Application Development (JAD). This type of development focuses on group meet- ings and collaboration between the users and developers of a Web site or system. It is generally used only with in-house development. Agile Software Development. This development methodology is viewed as innovative in that it stresses responsiveness based on generating and sharing knowledge within a devel- opment team and with the client. The philosophy emphasizes code over documentation and results in the project being developed in many small, iterative steps. Organization-Specific Development Methodologies. Large companies and Web devel- opment firms often create their own version or interpretation of site development methodol- ogy to be used on projects. An important aspect of Web site development is that you are never finished—your site needs to be kept fresh and up-to-date, there will be errors or omissions that need to be corrected, and new components and pages will be needed. The first step is to decide why the Web site is needed in the first place. Conceptualization What opportunity or issue is the site addressing? What is the motivation for the site? Perhaps your client owns a retail store and wishes to sell products over the Internet. Perhaps your client’s competitor just completed a Web site and your client needs to create one just to keep up. Perhaps you have a great idea that will be the next eBay! Because the focus of your work is to make the site usable and appealing to your target audience, you must determine the site’s intended audience. It is crucial to be aware of who your audience is and what their preferences are. Another task during conceptualization is to determine the site’s long-term and short- term goals or mission. Perhaps a short-term goal is simply to publish a home page. Perhaps a long-term goal is for 20 percent of a company’s product sales to be made on the Web site. Or you may simply want a certain number of Web site visitors each month. Whatever they are, it is better if the objectives are measurable. Decide how you will measure the success (or failure) of your Web site. Determining the purpose and goals of a site is usually done with the cooperation of the client, project manager, and information architect. In a formal project environment, a document that details the results of this step is created, and then approved by the client before development can proceed. 404 Chapter 10 Web Site Development Analysis The Analysis phase involves meetings and interviews with key client personnel. Analysis is usually completed by the project manager, information architect or other analyst, and the client’s marketing representative and related personnel. The network administrator and database administrator may be interviewed depending on the scope of the project. Common tasks completed during the Analysis phase follow: Determine Information Topics. Organize the information to be presented on the site into categories and create a hierarchy. These information topics will be used later as a starting point for developing the site navigation. Determine Functionality Requirements. State what the site will do, not how it will do it. For example, state “the site will accept credit card orders from customers,” not “the site will perform order processing using Active Server Pages to look up each price and sales tax information in Oracle databases and use real-time credit card verification supplied by somewebsite.com.” Note the difference in the level of detail of these functionality requirements. Determine Environmental Requirements. What environmental requirements, such as hardware, operating system, memory capacity, screen resolution, and band- width will your site visitors be using? What type of hardware and software requirements will the Web server need? (See Section 10.3 Web Hosting and Section 10.4 Choosing a Virtual Host for help with this question.) Determine Content Requirements. Does content already exist in another format— brochures, catalogs, white papers? Determine who is responsible for creating and repurposing content for the site. Does the client company or marketing department have any content requirements that must be met? For example, is there a specific look and feel or corporate branding component that must be present on the site? Compare the Old Approach to the New Approach. Perhaps you are not creating a new Web site, but modifying an existing one. What benefits or added value will the new version provide? Review Your Competitors’ Sites. A careful review of your competitors’ Web pres- ence will help you design a site that will stand out from the crowd and be more appealing to your shared customer base. Note the good and bad components of these sites. Estimate Costs. Create an estimate of the costs and time involved to create the site. A formal project plan is often created or modified at this point. Often, an application such as Microsoft Project is used to estimate costs and plan project schedules. Do a Cost/Benefit Analysis. Create a document that compares the costs and benefits of the site. Measurable benefits are the most useful and most appealing to clients. In a formal project environment, a document that details the results of this cost/benefit analysis must be approved by the client before the team can proceed. Design Once everyone knows what is needed, it is time to determine how it can be accom- plished. The Design phase involves meetings and interviews with key client personnel. Design tasks are usually completed by the project manager, information architect or  10.2 The Development Process 405 other analyst, graphic designer(s), senior Web developer(s), and the client’s marketing representative and related personnel. Common tasks of the Design phase follow: Choose a Site Organization. As discussed in Chapter 5, common Web site organiza- tional forms are hierarchical, linear, and random. Determine which is best for the project site and create a site map (sometimes called a flowchart or storyboard). Prototype the Design. As a starting point, sketch out the design on paper. Sometimes it’s useful to sketch within an empty browser frame (see the student files Chapter10/sketch.doc). Often, a graphics application is used to create sample Web page mock-ups, or wireframes, as page layouts are created. These can be shown to clients as a prototype, or working model, of the system for approval. They can also be shown to focus groups for usability testing. Create a Page Layout Design. The overall layout, or look and feel, of the site should be designed. The page layout design is used as a guideline for the Home page and Content page layouts. Items such as the site color scheme, size of logo graphics, button graphics, and text should be determined. Using the page layout design and site map, create sample layouts for the Home page and Content pages. Use a graphic application to create mock-ups of these pages to get a good idea of how the site will function. If you use a Web authoring tool at this early stage, you run the risk of your manager or client thinking you already have the site half done and insisting on early delivery. Document Each Page. While this may seem unnecessary, lack of content is a fre- quent cause of Web site project delays. Prepare a content sheet for each page, such as the one shown in Figure 10.3 (available at Chapter10/contentsheet.doc in the student files), which describes the functionality of the document, text and graphic content requirements, source of content, and approver of content. Figure 10.3 Sample content sheet 406 Chapter 10 Web Site Development The site map and page design prototypes are usually approved by the client before the team can continue with the Production phase. Production During production all the previous work comes together (hopefully) in a usable and effective Web site. During the Production phase, the Web developers are on the critical path—their work must be done as scheduled or the project will be late. The other project members are consulted as needed for clarification and approval. Common tasks of the Production phase follow: Choose a Web Authoring Tool. The use of a Web authoring tool such as Adobe Dreamweaver or Microsoft Expression Web can greatly increase productivity. Specific productivity aids include designer notes, page templates, task management, and Web page check-in and check-out to avoid overlapping page updates. The use of an authoring tool will serve to standardize the XHTML used in the project pages. Any standards related to indentation, comments, and so on should be determined at this time. Organize Your Site Files. Consider placing images and media in their own folder. Also, place server-side scripts in a separate folder. Determine naming conventions for Web pages, images, and media. Develop and Individually Test Components. During this task the graphic designers and Web developers create and individually test their contributions to the site. As the images, Web pages, and server-side scripting are developed, they are individu- ally tested. This is called unit testing. On some projects, a senior Web developer or the project manager will review the components for quality and standards compliance. Once all components have been created and unit tested, it’s time to put them together and begin the Testing phase. Testing The components should be published to a test Web server. This test Web server should have the same operating system and Web server software that the production (actual) Web server will be using. Some common site testing considerations follow: Test on Different Browsers and Browser Versions. It is very important to test your pages on commonly used browsers and versions of those browsers. Test with Different Screen Resolutions. Although as a Web developer, you may use a very high screen resolution, not everyone uses 1920×1200 screen resolution. The most commonly used screen resolutions at the time of this writing are 1024×768, 1280×800, and 1280×1024. Be sure to test your Web pages on vari- ous resolutions—you might be surprised at the results. Test Using Different Bandwidths. If you live and work in a metropolitan area, everyone you know may have broadband access to the Internet. However, many people still use dial-up connections to access the Web. It is important to test your site on both slow and fast connections. Images that look great over your school’s T3 line may load very slowly over a 56K modem.  10.2 The Development Process 407 Test from Another Location. Be sure to test your Web site using a computer other than the one the Web site was developed on, in order to simulate the Web page visitor experience more closely. Test Using Mobile Devices. Mobile use of the Web is increasing all the time—test your site on one or more of the currently popular smartphones. Test, Test, Test. There is no such thing as too much testing. Humans make mis- takes. It is much better for you and your team to find the errors than for your client to point them out to you when they review the Web site. Does this sound like a lot to keep track of? It is. That’s why it’s a good idea to create a test plan—a document that describes what will be tested on each page of a Web site. A sample test plan for a Web page, shown in Figure 10.4 (see Chapter10/testplan.pdf in the student files), can help you organize your testing as you check your document in different browsers and screen resolutions. The document validation section covers content, links, and any forms or scripting that are required for the page. Search engine optimization meta tags are discussed in Chapter 13. However, at this point you should be able to verify that the page title is descriptive and includes the company or organization name. Testing your page using different bandwidths is important because Web pages that take too long to download are often abandoned. Figure 10.4 Sample test plan Automated Testing Tools and Validators. The Web authoring tool your project is using will have some built-in site reporting and testing features. Web authoring applica- tions such as Adobe Dreamweaver and Microsoft Expression Web provide functions such as spell checks, link checks, and load time calculations. Each application has unique features. Dreamweaver’s reporting includes link checking, accessibility, and code validation. There are other automated testing tools and validators available. The W3C 408 Chapter 10 Web Site Development Markup Validation Service (http://validator.w3.org) can be used to validate both HTML and XHTML. Test CSS for proper syntax using the W3C CSS Validation Service (http:// jigsaw.w3.org/css-validator). Analyze the download speed of your page using the Web Page Analyzer (http://www.websiteoptimization.com/services/analyze). Adobe also offers cross-browser testing at http://browserlab.adobe.com. Testing tools that offer additional features such as spelling, browser compatibility, page load time, and broken-link checking are available from http://www.netmechanic.com and others. See http://www.softwareqatest.com/qatweb1.html for a partial list. In addition to validating HTML and testing for broken links, consider using a tool such as HP Runner to load-test the Web server. The scope and complexity of your site will determine the amount of testing needed. For a simple site, validation and link checking will probably suffice. Other types of sites will benefit from more rigorous testing. Focus on Accessibility Accessibility Testing. In the design and coding process your team should have fol- WWW lowed recommended techniques to provide accessibility. In fact, if your Web site will be used by an agency of the federal government, you are required to do so by law (Section 508 of the Rehabilitation Act). State governments have also begun to legislate accessi- bility requirements. For example, the recently passed Illinois Information Technology Act requires Illinois state agencies and universities to ensure that their information tech- nology (including Web sites) is accessible. Prove your compliance by performing accessibility testing on your site. There are a variety of accessibility checkers available. Adobe Dreamweaver includes a built-in accessibility checker. Visit http://firefox.cita. uiuc.edu/ to download an accessibility extension for the FireFox browser. Popular online accessibility tests include Deque System’s Worldspace Online (http://worldspace. deque.com), ATRC AChecker (http://www.achecker.ca/checker), and Cynthia Says (http://www.cynthiasays.com). Usability Testing. Testing how actual Web page visitors use a Web site is called usability testing. It can be conducted at any phase of a Web site’s development and is often performed more than once. A usability test is conducted by asking users to complete tasks on a Web site, such as placing an order, looking up the phone number of a company, or finding a product. The exact tasks will vary depending on the Web site being tested. The users are monitored while they try to perform these tasks. They are asked to think out loud about their doubts and hesitations. The results are recorded (often on video tape) and discussed with the Web design team. Often changes are made to the navigation and page layouts based on these tests. Complete Hands-On Exercise 6 at the end of this chapter and perform a small-scale usability test to become more famil- iar with this technique. If usability testing is done early in the development phase of a Web site, it may use the paper page layouts and site map. If the Web development team is struggling with a design issue, sometimes a usability test can help to determine which design idea is the better choice. When usability is done during a later phase, such as the Testing phase, the actual Web site is tested. This can lead to a confirmation that the site is easy to use and well designed, to last minute changes in the Web site, or to a plan for Web site enhance- ments in the near future.  10.3 Domain Name Overview 409 Launch Your client—whether another company or another department in your organization— needs to review and approve the test Web site before the files are published to the live site. Sometimes this approval takes place at a face-to-face meeting. Other times, the test URL is given to the client and the client e-mails approval or requested changes. Once the test Web site has been approved, it is published to your live production Web site (this is called a launch). If you think you are finished—think again! It is crucial to test all site components after publishing to make sure the site functions properly in its new environment. Marketing and promotion activities for the Web site (see Chapter 13) usually take place at this time. Maintenance A Web site is never finished. There are always errors or omissions that were overlooked during the development process. Clients usually find many new uses for a Web site once they have one and request modifications, additions, and new sections (this is called site maintenance). So at this point, the project team identifies the new opportunity or enhancement and begins another loop through the development process. Other types of updates needed are relatively small—perhaps a link is broken, a word is misspelled, or a graphic needs to be changed. These small changes are usually made as soon as they are noticed. The question of who makes the changes and who approves them is often a matter of company policy. If you are a freelance Web developer, the situation is more straightforward—you will make the changes and your client will approve them. Evaluation Remember the goals set for the Web site in the Conceptualization phase? During evaluation it’s time to review them and determine if your Web site meets them. If not, consider how you can enhance the site, and begin another loop through the develop- ment process. CHECKPOINT 10.1 1. Describe the role of the project manager. 2. Explain why many different roles are needed on a large-scale Web project. 3. List three different techniques used to test a Web site. Describe each technique in one or two sentences. 10.3 Domain Name Overview A crucial part of establishing an effective Web presence is choosing a domain name; it serves to locate your Web site on the Internet. If your business or organization is brand- new, then it’s often convenient to select a domain name while you are deciding on a company name. If your organization is well established, you should choose a domain 410 Chapter 10 Web Site Development name that relates to your existing business presence. Although many domain names have already been purchased, there are still lots of options available. Choosing a Domain Name Describe Your Business. Although there is a long-standing trend to use “fun” words as domain names (for example, yahoo.com, google.com, bing.com, woofoo.com, and so on), think carefully before doing so. Domain names for traditional businesses and organizations are the foundation of the organization’s Web presence and should include the business name or purpose. Be Brief, if Possible. Although most people find new Web sites with search engines, some of your visitors will type your domain name in a browser. A shorter domain name is preferable to a longer one—it’s easier for your Web visitors to remember. Avoid Hyphens (“-”). Using the hyphen character (commonly called a dash) in a domain name makes it difficult to pronounce the name. Also, someone typing your domain name may forget the dash and end up at a competitor’s site! If you can, avoid the use of dashes in a domain name. There’s More Than.com. While the.com TLD (top-level domain name) is still the most popular for commercial and personal Web sites, consider also registering your domain name with other TLDs, such as.biz,.net,.us,.mobi, and so on. Commercial businesses should avoid the.org TLD, which is the first choice for nonprofit organizations. You don’t have to create a Web site for each domain name that you register. You can arrange with your domain name registrar (for example, http://register.com) for the “extra” domain names to point visitors to the domain name where your Web site is located. This is called domain name redirection. Brainstorm Potential Keywords. Think about words that a potential visitor might type into a search engine when looking for your type of business or organization. This is the starting point for your list of keywords. If possible, work one or more keywords into your domain name (but still keep it as short as possible). Avoid Trademarked Words or Phrases. The U.S. Patent and Trademark Office (USPTO) defines a trademark as a word, phrase, symbol, or design, or a combi- nation of words, phrases, symbols, or designs, that identifies and distinguishes the source of the goods of one party from those of others. A starting point in researching trademarks is the USPTO Trademark Electronic Search System (TESS); visit http://www.uspto.gov/web/trademarks/workflow/start.htm and click on the link to TESS. See http://www.uspto.gov for more information about trademarks. Know the Territory. Explore the way your potential domain name and keywords are already used on the Web. It’s a good idea to type your potential domain names (and related words) into a search engine to see what may already exist. Verify Availability. Check with one of the many domain name registrars to deter- mine if your domain name choices are available. A few of the many sites that offer domain name registration services are listed below: http://register.com http://networksolutions.com http://godaddycom  10.4 Web Hosting 411 Each of these sites offers a WHOIS search feature that provides you a way to determine if a potential domain name is available, and if it is owned, who owns it. Often the domain name is already taken. If that’s the case, the sites listed above will provide you with alternate suggestions that may be appropriate. Don’t give up; a domain name is out there waiting for your business. Registering a Domain Name Once you’ve found your perfect domain name, don’t waste any time in registering it. The cost to register a domain name varies, but is quite reasonable. The top rate for a.com one-year registration is currently $35 (and there are numerous opportunities for discounts with multiyear packages or bundled Web hosting services). It’s perfectly okay to register a domain name even if you are not ready to publish your Web site immedi- ately. There are many companies that provide domain registration services, as listed above. When you register a domain name, your contact information (such as name, phone number, mailing address, and e-mail address) will be entered into the WHOIS database and available to anyone unless you choose the option for private registration. While there is usually a small annual fee for private registration, it shields your personal information from unwanted spam and curiosity seekers. Obtaining a domain name is just one part of establishing a Web presence—you also need to host your Web site somewhere. The next section introduces you to factors involved in choosing a Web host. 10.4 Web Hosting Where is the appropriate place for your Web project to “live”? Choosing the most appropriate Web host provider for your business or client could be one of the most important decisions you make. A good Web hosting service will provide a robust, reliable home for your Web site. A poor Web hosting service will be the source of problems and complaints. Which would you prefer? Web Host Providers The types of Web host providers range from local ISPs who have some empty space on their servers and Web developers who host sites on the side, to local hosting companies and national companies that guarantee 99.999 percent uptime. Understandably, the fees and the level of service are different. What does your business or client need? This sec- tion looks at needs of various size businesses. One word of caution: Never consider using a “free” Web host provider for a business site. These free sites are great for kids, college students, and hobbyists, but they are unprofessional. The last thing you or your client wants is to be perceived as unprofes- sional or not serious about the business at hand. As you consider different Web host providers, be sure to check references. Also, try contacting their support phone numbers and e-mail addresses to determine just how responsive they really are. It is common for Web host providers to charge a setup fee in addition to the monthly hosting fee. Hosting fees vary widely. The cheapest hosting 412 Chapter 10 Web Site Development provider is not necessarily the one to use. Word of mouth, Web searches, the local phone directory, and online directories such as http://www.hosting-review.com are all resources in your quest for the perfect Web host provider. Hosting Needs Small- to Medium-Size Web Site. Suggested requirements include unlimited data transfer, 60MB or more of hard disk space, e-mail, and support of server-side scripting such as ASP or PHP. This type of hosting is usually virtual hosting. The Web host provider’s server is divided into a number of virtual domains, and multiple Web sites are set up on the same computer. Keep in mind that over time your Web site will grow and your processing needs will increase. Do you have access to your Web site log or will automatic reporting be included? Does the Web host provider offer an e-commerce package that you can use when you are ready? Does it offer CGI or database support? You may not need these technologies now, but keep your options open for the future. Moving a site from one Web host provider to another is not always an easy process. Choose a Web host provider that most likely will meet your future needs as well as your present needs. Also consider the operating system and Web server application that your host offers. The UNIX operating system running an Apache Web server is quite common and very efficient. However, if the skill set of your organization is mainly Microsoft technologies, your staff will be more comfortable and more productive with a Web host that offers a Microsoft operating system running Internet Information Server as the Web server. Consider local Web hosting providers as well as national Web host providers in your search. FAQ Why do I care about knowing which operating system my Web host provider uses? Knowing the operating system used by your Web host provider is important because it can help you with troubleshooting your Web site. Often, students’ Web sites work great on their own PC (usually with a Windows-based operating system) but fall apart (with broken links and images that do not load) after being published on a free Web server that uses a different oper- ating system. Some operating systems, such as Windows, treat uppercase and lowercase letters in exactly the same way. Other operating systems, such as UNIX and Linux, consider uppercase and lowercase letters to be different. This is called being case-sensitive. For example, when a Web server running on a Windows operating system receives a request generated by an anchor tag coded as My Page, it will return a file named with any combination of uppercase or lowercase letters. The values MyPage.html, mypage.html, myPage.html can all be used. However, when the request generated by the same anchor tag is received by a Web server running on a UNIX system (which is case-sensitive) the file would only be found if it were really saved as MyPage.html. If the file were named mypage.html, a 404 (not found) error would result. This is a good reason to be consistent when naming files—consider always using lowercase letters for file names.  10.5 Choosing a Virtual Host 413 Large- to Enterprise-Size Web Site. If you are expecting a high traffic site that may support a chat room or streaming media content, consider large national Web hosting services. Generally, these provide a high bandwidth Internet connection (typically OC-1 or higher), 24-hour staffing, hardware and media redundancy, and enhanced security. Determine the guaranteed level of service and response time. Also consider using a dedicated or co-located Web server at a national Web host provider. A dedicated or co-located Web server will be running your Web site only—you do not share the processor or hard drive with any other organization. There is an additional charge, but the added security and guarantee of processing may be worth it to your organization. A dedicated Web server refers to the rental and exclusive use of a computer and con- nection to the Internet that is housed on the Web hosting company’s premises. A dedi- cated server is usually needed for a Web site that could have a considerable amount of traffic, such as tens of millions of hits a day. The server can usually be configured and operated remotely from the client company or you can pay the Web host provider to administer it for you. A co-located Web server, sometimes referred to as colocated or collocated, is a com- puter that your organization has purchased and configured. Your organization effec- tively rents space at the Web host provider’s location. Your server is kept and connected to the Internet at its location. Your organization administers this computer. This pro- vides your organization with additional control over the Web server, but it also means that you need to staff or contract an individual with Web server administration experience. Large, national Web host providers can supply dedicated T1 or T3 Internet access, 24/7 support, network utilization statistics and log access, hardware and media redundancy, and the ability to cluster Web servers, support Web farms, e-commerce, and streaming media delivery. A Service-Level Agreement (SLA) that details the level of support and response time is also usually supplied by large, national Web host providers. For your Web site—small, medium, or large—selecting the right Web host can be crucial to its success. 10.5 Choosing a Virtual Host A number of factors to consider when choosing a Web host, including bandwidth, disk storage space, technical support, and the availability of e-commerce packages have been discussed. For a handy list of these factors and others to consider in your quest for a virtual Web host, review the Web host checklist shown in Table 10.1. 414 Chapter 10 Web Site Development Table 10.1 Web host checklist Operating System ❏ UNIX Some Web hosts offer a choice of these platforms. If you need ❏ Linux to integrate your Web site with your business systems, choose ❏ Windows the same operating system for both. Web Server ❏ Apache These two Web server applications are the most popular. ❏ IIS Apache usually runs on a UNIX or Linux operating system. IIS (Internet Information Services) is bundled with selected versions of Microsoft Windows. Bandwidth ❏ _____ MB or GB Some Web hosts carefully monitor your data transfer bandwidth ❏ _____ Charge for and charge you for overages. While unlimited bandwidth is great, overage it is not always available. A typical low-traffic Web site varies between 100 and 200MB per month. A medium-traffic site should be okay with about 20GB of data transfer bandwidth per month. Technical Support ❏ E-mail Review the description of technical support on the Web host’s ❏ Forum site. Is it available 24 hours a day, seven days a week? E-mail or ❏ Phone phone a question to test it. If the organization is not responsive to you as a prospective customer, be leery about the availability of its technical support later. Service Agreement ❏ Uptime guarantee A Web host that offers an SLA (Service Level Agreement) with an ❏ Automatic uptime guarantee shows that they value service and reliability. monitoring The use of automatic monitoring will inform the Web host techni- cal support staff when a server is not functioning. Disk Space ❏ _____ MB Many virtual hosts routinely offer 100MB+ disk storage space. If ❏ _____ GB you have a small site that is not graphic-intensive you may never even use 40MB of disk storage space. E-mail ❏ _____ Mailboxes Most virtual hosts offer multiple e-mail mailboxes per site. These can be used to filter messages—customer service, technical sup- port, general inquiries, and so on. Uploading Files ❏ FTP Access A Web host that offers FTP access will allow you the most flexibil- ❏ Web-based File ity. Others only allow updates through a Web-based file manager Manager application. Some Web hosts offer both options. Canned Scripts ❏ Form processing Many Web hosts supply canned, pre-written scripts to process ❏ _________________ form information. Scripting Support ❏ ASP If you plan to use server-side scripting on your site determine ❏ PHP which, if any, scripting is supported by your Web host. ❏.Net Database Support ❏ MySQL If you plan to access a database with your scripting, determine ❏ MS Access which, if any, database is supported by your Web host. ❏ MS SQL E-Commerce ❏ _________________ If you plan to enter into e-commerce (see Chapter 12) it may be Packages easier if your Web host offers a shopping cart package. Check to see if one is available. Scalability ❏ Scripting You probably will choose a basic (low-end) plan for your first Web ❏ Database site. Note the scalability of your Web host—are there other plans ❏ E-commerce with scripting, database, e-commerce packages, and additional bandwidth or disk space available as your site grows?  10.5 Choosing a Virtual Host 415 Table 10.1 Web host checklist (continued ) Backups ❏ Daily Most Web hosts will back up your files regularly. Check to see ❏ Periodic how often the backups are made and if they are accessible to ❏ No backups you. Be sure to make your own site backups as well. Site Statistics ❏ Raw log file The Web server log contains useful information about your visi- ❏ Log reports tors, how they find your site, and what pages they visit. Check to ❏ No log access see if the log is available to you. Some Web hosts provide reports about the log. See Chapter 13 for more information on Web server logs. Domain Name ❏ Required to register Some Web hosts offer a package that includes registering your with host domain name. It is better if you register your domain name your- ❏ OK to register on self (see http://register.com or http://networksolutions.com) and your own retain control of your domain name account. Price ❏ _____ Set up fee Price is last in this list for a reason. Do not choose a Web host ❏ _____ per month based on price alone—the old adage “you get what you pay for” is definitely true here. It is not unusual to pay a one-time set-up fee and then a periodic fee—either monthly, quarterly, or annually. CHECKPOINT 10.2 1. Describe the type of Web host that would meet the needs of a small company for its initial Web presence. 2. Describe the difference between a dedicated Web server and a co-located Web server. 3. Explain why price is not the most important consideration when choosing a Web host. CHAPTER SUMMARY This chapter introduced the system development life cycle and its application to Web development projects. The job roles related to Web site development were discussed. The chapter also included an introduction to choosing a domain name and a Web site host provider. Visit the textbook Web site at http://www.webdevfoundations.net for examples, the links listed in this chap- ter, and updated information. Key Terms accessibility testing editor Service Level Agreement (SLA) analysis environmental requirements System Development Life Cycle automated testing evaluation (SDLC) co-located Web server functionality requirements test plan conceptualization graphic designer testing content manager information architect trademark content requirements information topics unit testing copywriter keywords usability testing cost/benefit analysis launch validators database administrator maintenance virtual hosting dedicated Web server marketing representative Web developer design network administrator Web host domain name phases Web presence domain name registrars production Web server domain name redirection project manager Review Questions Multiple Choice 1. Which of the following should testing a site 3. What is the purpose of private registration for a include? domain name? a. checking all of the hyperlinks within the site a. it protects the privacy of your Web site b. viewing the site in a variety of Web browsers b. it is the cheapest form of domain name regis- c. viewing the site in a variety of screen resolu- tration tions c. it protects the privacy of your contact infor- d. all of the above mation d. none of the above 2. Which of the following does the role of an infor- mation architect include? 4. Which methodology is usually used by Web pro- a. being instrumental in defining the site organi- ject teams? zation, navigation, and labeling a. the SDLC b. attending all meetings and collecting all infor- b. a derivative of the SDLC similar to the one mation discussed in this chapter c. managing the project c. decided on as the project is built d. none of the above d. no development methodology is necessary 416  Hands-On Exercises 417 5. What do team members do in the Analysis phase c. It is recommended to use hyphens in domain of a Web site project? names. a. determine what the site will do—not how it d. There is no reason to check for trademarks will be done when you are choosing a domain name. b. determine the information topics of the site 10. Which Web hosting option is appropriate for the c. determine the content requirements of the site initial Web presence of an organization ? d. all of the above a. dedicated hosting 6. In which phase is a prototype of the Web site b. free Web hosting often created? c. virtual hosting a. Design d. co-located hosting b. Conceptualization c. Production d. Analysis Fill in the Blank 7. Which of the following happens during the 11. ____________________ can be described as Production phase? testing how actual Web page visitors use a a. a Web authoring tool is often used Web site. b. the graphics, Web pages, and other components 12. The ____________________ determines appropri- are created ate use of graphics on the site, and creates and c. the Web pages are individually tested edits graphics. d. all of the above 13. The ____________________ operating system(s) 8. Which of the following happens during the treat uppercase and lowercase letters differently. Evaluation phase? a. the goals for the site are reviewed b. another loop through the development process Short Answer may result 14. Describe why the Web sites of competitors c. both a and b should be reviewed when designing a d. none of the above Web site. 9. Which of the following is true about domain names? 15. Why should you try to contact the technical a. It is recommended to register multiple domain support of a Web host provider before you are names that are redirected to your Web site. one of its customers? b. It is recommended to use long, descriptive domain names. Hands-On Exercises 1. Skip this exercise if you have completed Hands-On Practice 2.11 in Chapter 2. In this exercise you will validate a Web page. Choose one of the Web pages that you have created. Launch a browser and visit the W3C HTML Validator page at http://validator.w3.org. Notice the Validate by File Upload area. Click the Browse button, select a file from your computer, and click the Check button to upload the file to the W3C site. Your page will be analyzed and a Results page generated, which shows a report of violations of the DTD that is used by your Web page. The error messages display the offending code along with the line number, column number, and description of the error. Don’t worry if your Web page does not pass the validations the first time. Many well-known Web sites have pages that do not validate—even http://yahoo.com had validation errors at the time this was written. Modify your Web page document and revalidate it until you see a message that states “This page is valid XHTML 1.0 Transitional!” (See Figure 10.5.) 418 Chapter 10 Web Site Development Figure 10.5 Message indicating that the Web page has passed the validation This page also provides you with some code and an image to display to tell the world that your page validated. Print the browser view of this page to hand in to your instructor. You can also validate pages directly from the Web. Try validating the W3C’s home page at http://w3.org, Yahoo! at http://yahoo.com, and your school’s home page. Visit http://validator.w3.org and notice the Validate by URL area. Enter the URL of the Web page you would like to validate in the Address text box. Click the Check button. View the results. Experiment with the character encoding and doctype options. The W3C’s page should pass the validation. Don’t worry if the other pages do not vali- date. Validation is not required for Web pages. However, Web pages that pass the val- idation should display well in most browsers. (Note: If you have published pages to the Web, try validating one of them instead of your school’s home page.) 2. The Cynthia Says site offers free accessibility testing at http://www.cynthiasays.com for your choice of Section 508 and WCAG 1.0 priority levels. Visit this site and test your school’s home page for Section 508 compliance. After the Section 508 accessi- bility test is run, a report is displayed with categories corresponding to those listed at http://www.access-board.gov/sec508/guide/1194.22.htm. Print the browser view of the results page to hand in to your instructor. Were you surprised at the results? Did you notice that some criteria, such as “Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup,” cannot be checked automatically and must be verified manu- ally by a person? Next, check the Web page according to the W3C’s WCAG 1.0 Priority 1 accessibil- ity criteria. Run the test again and select the WCAG – Priority 1 criteria. After the test is complete, a report is displayed with categories corresponding to those listed at http://www.w3.org/TR/WCAG10/full-checklist.html. Print out the browser view of the results page to hand in to your instructor. Generally, it is easier to pass Section 508 validation than the WCAG 1.0 criteria. Why do you think this is so? (Note: If you have published pages to the Web, try validating one of them instead of your school’s home page.) 3. Deque offers the free Worldspace Online application at http://worldspace.deque.com. Visit this site, select Accessibility Compliance Level WCAG 2.0 Level A, and test your school’s home page. After the test is run, a report is displayed that shows the  Hands-On Exercises 419 level of W3C WCAG 2.0 compliance. A report is displayed with items correspon- ding to the guidelines listed at http://www.w3.org/TR/WCAG20. Print out the browser view of the results page to hand in to your instructor. (Note: If you have published pages to the Web, try validating one of them instead of your school’s home page.) 4. NetMechanic offers a free sample of its HTML Toolbox Application at http://www.netmechanic.com/products/HTML_Toolbox_FreeSample.shtml. Visit this site and test your school’s home page. After the test is run, a results page will be displayed with ratings related to link check, bad links, HTML check, browser compatibility, load time, and spell check. Each category has a link to a detailed display that describes the types of errors found. Print out the browser view of this results page to hand in to your instructor. (Note: If you have published pages to the Web, try validating one of them instead of your school’s home page.) 5. The Dr. Watson site offers free Web page validation at http://watson.addy.com. Visit this site and test your school’s home page. After the test is run, a report is displayed with categories including server response, estimated download speed, syntax and style analysis, spell check, link verifications, images, search engine compatibility (see Chapter 13), site link popularity (see Chapter 13), and source code. Print out the browser view of this report page to hand in to your instructor. (Note: If you have published pages to the Web, try validating one of them instead of your school’s home page.) 6. Perform a small-scale usability test with a group of other students. Decide who will be the “typical users,” the tester, and the observer. You will perform a usability test on your school’s Web site. The “typical users” are the test subjects. The tester oversees the usability test and emphasizes that the users are not being tested—the Web site is being tested. The observer takes notes on the user’s reactions and comments. Step 1: The tester welcomes the users and introduces them to the Web site they will be testing. Step 2: For each of the following scenarios, the tester introduces the scenario and questions the users as they work through the task. The tester should ask the users to indicate when they are in doubt, confused, or frustrated. The observer takes notes. Scenario 1: Find the phone number of the contact person for the Web develop- ment program at your school. Scenario 2: Determine when to register for the next semester. Scenario 3: Find the requirements to earn a degree or certificate in Web develop- ment or a related area. Step 3: The tester and observer organize the results and write a brief report. If this were a usability test for an actual Web site, the development team would meet to review the results and discuss necessary improvements to the site. Step 4: Hand in a report with your group’s usability test results. Complete the report using a word processor. Write no more than one page about each scenario. Write one page of recommendations for improving your school’s Web site. 420 Chapter 10 Web Site Development Note: For more information on usability testing, see Keith Instone’s classic presen- tation at http://instone.org/files/KEI-Howtotest-19990721.pdf. Another good resource is Steven Krug’s book, Don’t Make Me Think. 7. See the description of usability testing in Hands-On Exercise 6. In a small group of students, perform usability tests on two similar Web sites, such as the following: http://bn.com and http://powells.com http://accuweather.com and http://www.wunderground.com http://running.com and http://www.coolrunning.com Decide on three scenarios. List them. Decide who will be the “users,” the tester, and the observer. Follow the steps listed in Hands-On Exercise 6. 8. Pretend that you are on a job interview. Choose a role on a Web project team that interests you. In three to four sentences, describe why you would be an excellent addition to a Web development team in that role. Web Research 1. This chapter discussed options for hosting Web sites. In this research exercise you will search for Web host providers and report on three that meet the following criteria: Support PHP and MySQL Offer e-commerce capabilities Provide at least 50MB hard disk space Use your favorite search engine to find Web host providers or visit Web host directo- ries such as http://www.hosting-review.com and http://www.hostindex.com. The Web server survey results provided by http://uptime.netcraft.com/perf/reports/Hosters may also be useful. Create a Web page that presents your findings. Include links to your three Web host providers. Your Web page should include a table of information such as set-up fees, monthly fees, domain name registration costs, amount of hard disk space, type of e-commerce package, and cost of e-commerce package. Use color and graphics appropriately on your Web page. Place your name and e-mail address at the bottom of your Web page. Print both the source code (from Notepad) and the browser view of your Web page. 2. This chapter discussed the different job functions that are needed to develop large Web sites. Choose a job role that interests you. Search for information about available jobs in your geographical area. Search for technology jobs with your favorite search engine or visit a job site such as http://monster.com, http://dice.com, http://hotjobs.com, or http://careerbuilder.com and search for your desired location and job type. Find three possible job positions that interest you and report on them. Create a Web page that includes a brief description of the job role you have chosen, a description of the three available positions, a description of the types of experience and/or educational background required for the job positions, and the salary range (if available). Organize your findings in a table. Use color and graphics appropriately on your Web page. Place your name and e-mail address at the bottom of your Web page. Print both the source code (from Notepad) and the browser view of your Web page.  Web Site Case Study: Testing Phase 421 Focus on Web Design The U.S. Department of Health and Human Services offers a free online PDF book, Research-Based Web Design & Usability Guidelines, at http://www.usability.gov/pdfs/ guidelines.html with PDF downloads for each chapter. The book suggests guidelines for a variety of topics including navigation, text appearance, scrolling and paging, writing Web content, usability testing, and accessibility, Choose one chapter topic that interests you. Read the chapter. Note four guidelines that you find intriguing or useful. In a one-page report, describe why you chose the chapter topic and the four guidelines you noted. WEB SITE CASE STUDY: Testing Phase This case study continues throughout the rest of the text. In this chapter you will test the Web Project case study. Web Project See Chapter 5 for an introduction to the Web Project. In this chapter you will develop a test plan for the project. You will review the documents created in the previous chapters’ Web Project and create a test plan. Hands-On Practice Case Part 1: Review the Design Documents and Completed Web pages. Review the Topic Approval, Site Map, and Page Layout Design documents that you created in the Chapter 5 Web Project. Review the Web pages you have created and/or modified in the Chapter 6, Chapter 7, Chapter 8, and Chapter 9 Web Project activities. Part 2: Prepare a Test Plan. See Figure 10.4 for a sample test plan document (avail- able in the student files, Chapter10/testplan.pdf). Create a test plan document for your Web site. Include CSS validation, XHTML validation, and accessibility testing. Part 3: Test Your Web Site. Implement your test plan and test each page that you have developed for your Web Project. Record the results. Write a list of suggested improvements. Part 4: Perform Usability Testing. Describe three scenarios that typical visitors to your site may encounter. Using Hands-On Exercise 6 as a guide, conduct a usability test for these scenarios. Write a one-page report about your findings. What improvements can be suggested for the Web site? This page intentionally left blank