Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Advanced Projects

For these projects you will need access to a server. You can implement the programs in any available language; do not feel confined to PHP. If you are an experienced Java programmer and wish to use Java servlets or JSP for these projects, you will need a servlet container, such as Tomcat.

Do not neglect visual design, usability and accessibility just because you are doing some programming. All the sites must have navbars and use clear layout. Use your own choice of colours and make your own decisions about whether to use single or multiple column layouts for each project where appropriate.

Instead of creating a set of pages to display a gallery of images, as in the earlier project, you can implement an image gallery by generating the pages dynamically from a database. Design a database schema for recording the details of a set of images, including the location (URL) of the image file, a title and any meta-data that you think appropriate (for example, you might include the date a photo was taken and information about its subject). Write and test scripts to retrieve data from the database and display the corresponding image and its metadata.

Create an attractive and easy-to-use interface to your scripts that will allow visitors to the gallery to browse the collection of images or search for images whose meta-data satisfies the criteria that they specify.

In this more advanced version of the image gallery pay close attention to layout and presentation as well as to the technical challenges. The purpose of the site is to present each image to its best advantage. You therefore need to think carefully about the whole colour design of the site (which may be affected by the nature of the images you are presenting), the placement of the images on the page, and the layout in general. You also need to ensure that the metadata is displayed in such a way that it clearly relates to the image, but does not detract from that image’s presentation.

Market Survey

Create a multi-page market survey, with at least 6 pages, to assess users’ responses to the latest item that you yourself bought. For example, you might ask what they think about the coffee in a certain cafe, a mobile phone, an item of clothing or food, a book, a downloaded music file. It doesn’t matter what the object is. Display some information about what the object is, how much it costs, what its main features are, and so on, and then ask questions such as whether respondents feel it is value for money, whether they have bought the same item themselves, what other similar items they have bought, and so on. Some questions may depend on the answers to earlier ones. Arrange that questions which do not apply are skipped automatically. (For example, the question "how satisfied were you with this item when you bought it yourself?" should only be asked to respondents who have indicated that they did buy the item themselves.)

Set your survey in a very clear and simple page design that does not interfere with the essential point of the page, i.e. the survey questions. Each page should ask a few simple questions, and then lead on to the next page. At the end of the survey there will be a “Submit” button to send the complete survey response back to you (in your role as the market researcher). Use radio buttons for possible answers to at least some of the questions. For example, it is common to be asked to rate the quality of something on a scale of 1 to 5. You must ensure that your respondents can only select one possible number or answer for each question.

Write a program to run on the server, take the survey data and store it in a database. (You will need to design a suitable schema.)

Create a script and a Web page to display the survey results clearly. Provide options for viewing detailed responses as well as summaries. If the language in which you are writing the server-side script provides a suitable library, create charts to display the results in an attractive graphical form.

Consider the implications of providing a facility that allows someone who is filling in the survey to go back to an earlier question and change their answer. If you think that such a facility is feasible, add it to your survey application. (You should also consider what should happen if someone uses the back button to go backwards through the survey.)

Interface for Updating a Page of Data

If you created a brochure site for some kind of holiday accommodation, as described in the second of the intermediate projects, use that site as the basis for this project, but if you have not already done that project you should start by creating such a site. This time, however, be sure to include a page that displays the current season’s prices. Assume that the prices differ with the seasons, and change from year to year, so that it will be necessary to update this page every year. As a Web designer, you won’t want to do this for your client every year, so design and implement a little Web application that allows the client to perform the updates themselves.

The price data will need to be stored on the server. You could use a database for this, but you may prefer a lower-tech approach, just using a flat file, since there will not be much data and it is very simply structured. You will need a script to retrieve the prices to display on the site. You will also need to provide an interface for your client to enter a new season’s prices. Remember that the client is not likely to be very technically sophisticated, so you must make an effort to ensure that this interface is easy to use. You should also validate all the data carefully, and respond helpfully to errors.

Remembering Visitors

Modify the image gallery site, or another of your sites that you think would be suitable, so that only registered visitors can look at the images or pages of the site. To do this, you will need to provide a registration page that allows people to set a user name and password, and a login page, where they can enter these details after registration. You also need to make sure that the site’s internal pages cannot be reached without logging in.

You can extend this basic application to provide some helpful facilities. In particular, you can use a cookie to remember each visitor, so that they don’t need to log in explicitly each time they visit the site – but you must be prepared for the possibility that the cookie’s information has misled you (for example, if two people share an account on the same machine), and provide some means of logging in again explicitly. (You will probably have seen links labelled something like ‘If you are not Orinoco Womble, log in’ on sites, such as Amazon, that remember visitors.)

Once you are able to recognize visitors, you can allow them to customize the site, and remember their settings. For instance, you could let them choose a stylesheet, or, in the case of the image gallery, an image that they would like to see displayed when they arrive. Provide a preferences form for visitors to choose settings such as these. Record their choices in a database of some sort, and apply their chosen settings whenever they log in to the site.

Message Board

This project is only loosely specified, to allow you maximum scope for solving the problem and coming up with a good implementation. You might want to treat this project as a theoretical exercise, if you think it is too hard to implement.

Email is becoming steadily less useful, as spam fills up the system, and aggressive spam filters reject legitimate messages, causing people to lose faith that email always gets through. One possible response is to use a different type of communication system: some people have switched to instant messaging, others use the message systems on social networking sites, such as MySpace. The goal of this project is to create a dedicated Web application, whose purpose is to enable registered users to exchange messages. You should aim for the convenience of email, but take all possible steps to ensure that the system cannot be abused. For instance, you might want to verify that a message has been posted by the person it claims to be from.

If you do try the full implementation of this project, pay attention to the user interface and make sure that your site design is appropriate for the task.

Consider how you can take advantage of the Web-based nature of your service to provide facilities that conventional email does not permit, such as public messages.

Payment Service

This project might be suitable for a group of students.

Create a payment service site, which allows people to pay for goods and services bought from other sites on the Web. Start by looking at existing payment services, such as PayPal. Look at the service they offer, and look at the documentation they provide to Web developers, which describes how people selling goods on the Web can use PayPal to handle payments.

It is especially important that a payment site be 100% usable and accessible. Make sure that it will be entirely clear to somebody who has been sent to the site to make a payment exactly what they need to do. They must be able to cancel at any point before they have authorized the payment, and it should be clear exactly when authorization occurs. When designing the appearance of the site, it is important that you convey an impression of trustworthiness.

Implement a similar service (not using real money, of course) that provides the necessary services to buyers and sellers, and an API that allows your payment services to be integrated into other sites. Try this out by requiring users who register with your image gallery or message service to pay a subscription.

Give some thought to how you could cater for transactions that don’t cost very much (so-called micro-payments). How would you make it possible for people to pay as little as a few pennies (cents, or whatever) for something, without incurring costs that exceed the value of the transaction?

Mash-Up

As we mention in Chapter 1, one of the features of Web 2.0 is the availability of Web APIs, which provide access to data through programs as well as on Web pages. This has led to the possibility of ‘mash-ups’, which, in the context of the Web, are sites that combine data from two or more sources and present them in a unified way. Many mash-ups are based on the Google Maps API, which makes it possible for geographically-related data, such as the location of coffee shops or the average price of houses, to be superimposed on a map of the region concerned.

Create a mash-up from at least two sources. The combination must be meaningful and provide more information than the two separate sets of data independently. While Google Maps is probably the most often used API for mashing, there is a long list of Web APIs at the Programmable Web site.

Create a suitably designed site to present the results of your mash-up and to allow all potential users to interact with it in a clear and meaningful way.