Chapter 1. Introduction

Project Overview

Last year a project was completed for Mr. Starkey (hereinafter referred to as "Client") to design a family website. The website was centered on a fantasy football league created for family and friends from around the world. Many other features were involved in the creation of this website including games, events, family news and many more. With all these and an advanced fantasy football competition, more than just a website site was created. In fact a quote from the Client stated “The website has brought everyone together into a kind of ‘Family Intranet' or in other words, a ‘Virtual Community' has been created” (Starkey A.J. 2006).

Chapter 2. Design

Project Aims

With the success of the project, the Client has asked for improvements to be made to the fantasy football feature of the website. For next seasons competition the Client would like the entrants to be able to register on-line. The Clients reasons for this are numerous:-

  • To aid in the ease of entering the competition
  • To save on postage for managers in different countries
  • To have one official route for applications, instead of entries coming in from different ways and therefore getting lost and misled
  • To allow alterations to be made by the entrant without contacting the Client
  • To improve the quality of the website and to continuously bring the website forward with new and innovative ideas

Project Objectives

To fulfil this project and create the on-line fantasy football application I will have to meet several objectives.

1.To enable the entrant to:-

  • Create a user name and password
  • Log in with correct details
  • View fantasy football rules
  • Scroll through the players in different classes i.e. defence, midfield and forwards
  • Pick and list their selected team
  • Process their chosen team
  • E-mail their application to the relevant address
  • Error messages to be given in these circumstances:-
  • Wrong log-in details are supplied
  • Selected team breaks any fantasy football rules
  • Follow the CSS guidelines set in the website structure, and to consider all HCI aspects throughout the design and implementation.
  • To have the new system installed by 11Dec 2006.

Project Considerations

During all aspects of designing and building this feature the following considerations will be taken into account:-

  • Superstructure
  • Graphics
  • Colour
  • Content
  • Readability
  • Page Layout
  • Links

Project Methodology

There were several possible methodologies to help with this project. The ones considered were:-

  • 5 STEPS (Steps to Ensure Project Success) - where it helps an individual deliver the project on time within budget. The focus is on developing a realistic schedule for a project and then managing it.
  • AIS (Administrative Information System) - which uses 7 structured components.
  • PRINCE (Projects IN Controlled Environments) - this was produced by the Central Computing and Telecommunications Agency (CCTA) for the development and implementation of IS/IT projects.
  • WebE Process “WebApps are often delivered incrementally. That is, framework activities will occur repeatedly as each increment is engineered and delivered” (Pressman RS 2005, p 507). Using the WebE Process represents an incremental design structure. The project is split up into increments to be tried and tested individually. This process model is adaptable to fit most tasks or implements.

The one I have decided to go with is a methodology called PROMPT (Project Resource Organisation Management & Planning Techniques) which although is the predecessor to PRINCE, it is the methodology more suited to my project than the others. PROMPT was designed in an attempt to set down guidelines for a computer project to avoid serious over-running of time limits, which I feel is vital in this project to keep me from falling behind. Even though the WebE process is specifically designed for web applications our project is not incremental.

The stage flow guidelines are as follows:-

  • Feasibility Study - to determine whether the project should be done/can be done/will work if it is done.
  • Initial stage - where the project organisation is set up.
  • Specification Stage - in which the user specification was detailed.
  • Design Stage - where the logical and from this the physical design of the computer system was designed in detail.
  • Development Stage - the system is built and tested.
  • Installation stage - the user accepts a working system.
  • Operation Stage - when the system is tuned for the work in hand.

Interface designs

The overall design of the interface has to run along the same lines as the original website, while the log-in and selection pages can follow different routes. There are several different ways of approaching the interface. One option is a simple one click system where you click on a player and it appears in your team. Another option, and the one which will be applied to the feature, is a drag and drop system. Both options are simple for the users to work but the drag and drop system brings little extra to the process. It doesn't have to be just the name that is dragged it can be an icon. This will create a real manager feel to the program. Fig 2 shows an example of this drag and drop procedure. The icon being a player's face.

User Case

The two use case diagrams show how the system will function. Diagram 1 shows how the Entrant will create his account, while Diagram 2 shows what option will be available to the registered manager.

Storyboard

Storyboarding not only improves your site navigation system but also helps design your website properly.

Interface - html/css design and layouts

The majority of the pages in this section of the website will follow the same guidelines, with the slight exception of the team selection, seen below.

Database Design

There are several pieces of information required on each player for the database. Each subject data needs to be sorted properly to aid in the running of the database. “Normalisation is part of successful database design. Without normalisation, database systems can be inaccurate, slow and inefficient and they might not produce the data you expect” (databasedev.co.uk). To enable us to follow the normalisation rules to need to find a piece of information that uniquely identifies that player. As team name, player name player position etc can quite easily be duplicate a player ID has been created for each player. The creation of this ID will be automatically created by the database software (mysql) so does not need to be of a concern. The information held an each player are as follows:

Field

Example

ID

1001

Team Name

Arsenal

Position

Goalkeeper

Player Name

Lehmann

Cost

7.5m

Further developments

The program has been designed so that any future enhancements that are required can be easily implemented. The program is reusable for the fantasy football competition every year. All that needs to be changed each year is the player information. As the database doesn't carry very much data there is plenty of room for extensions or other ideas and new innovations. The program can in future be used for any other fantasy games the client has in mind for future events.

Reflection

I found that the project, although not impossible to complete in the time limit, the ideas I had to solve the project objectives were over ambitious. The reasons for this soon became clear:

  • My knowledge of PHP was not satisfactory at the start of the project to complete my ambitious objectives.
  • The plan to keep to the main website theme, instead of aiding in the building of the fantasy football section made the project harder to complete. This was that I could not express myself for this project and therefore were limited in the way I could develop it.

Considering this, the objectives and aims did not change as I feel that I still completed them moderately. The problem was that the php was very basic in the whole. Although this doesn't help with the time limit available, I can still improve this in the future as I improve my php knowledge. A good example of this is the team selection process. Diagram 6 shows one example of how I would have liked it to have been done.

Chapter 3. Project Tracking

Project Risks

Due to the small size of this project, the risks are few, although I have included a few extra. These need to be considered even though the probability is very low, as they applied to the original project and so also concern the current one.

Risk Identity

Risk Probability

Risk Impact

Assessment of risk

Risk mitigation & management

1. Budget

Unlikely

Important

Domain and monthly web server costs exceed expectations

keep within budget where possible

2. Schedule

Possible

Important

Mismanagement of workload

Keep with schedule planed in the Gantt chart

3. Design

Unlikely

Marginal

Unable to design to specification and considerations

Research thoroughly and seek aid if required

4. Implementation

Possible

Marginal

Software and hardware problems

Prepare for this by having a second pc and alternative software available

5. Personnel

Unlikely

Serious

Illness to myself that halts the procedure

Seek extensions if required

Reflection

Project Risks

As already reflected on earlier, concerning the objectives that were unfulfilled this also comes under the project risk category. The risk identity here was “schedule”.

Risk Identity

Risk Probability

Risk Impact

Assessment of risk

Risk mitigation & management

2. Schedule

Possible

Important

Mismanagement of workload

Keep with schedule planed in the Gantt chart

Here although it says that the assessment of the risk is “Mismanagement of workload” I would be inclined to say that it was “Misinterpretation of expectations”

Project Methodology

The Project Proposal stated that the methodology WebE was going to be used. This was changed when it became clear that that Methodology wasn't completely suited for this project. The WebE is used for incremental applications, while the PROMPT although outdated was more suited this time.

Chapter 4. Testing

“Software testing is fundamentally concerned with demonstrating that observed (actual) program behaviour corresponds with specified (expected) program behaviour” (Jorgensen. P. 2002). What this means is that you build your test conditions to match what the expected outcomes of the software are. The best way of doing is to split your software into manageable sections. This is called Unit testing.

This does not cover all the testing required, as our software needs to meet accessibility requirements and also pass a validation test. For all these and more we need to decide on a test strategy.

Test Strategy

The test strategy will include four different types of testing as described below.

Sight testing

This test will be used throughout the development and implementation of the website, and will be ongoing over short periods. This will spot simple errors before they become bigger.

Usability testing

This will be used to test every aspect of the website as defined in the website considerations. The tests and results can be seen in the Test plan. The website will then be put through the W3c Mark-up Validation Service test.

Accessibility testing

Accessibility testing involves measuring the ease with which users with special needs can complete common tasks on your website. The tests and results can be seen in the Test plan.

Acceptance testing

The Client will then be involved and asked to test all the features of the website to ensure that everything is designed to the clients' expectations. This testing may result in further refinements.

Usability Testing

Using the list from the project consideration, we will test the web site thoroughly. These tests will be completed using different computers, browsers and internet speeds.

Below is the test plan, which gives a table of the tests that were carried out, their expected results and their actual results.

Test Plan

Test No.

Test

Expected Results

Actual Results

Superstructure:

1

Is the site layout easy to understand?

Yes

Yes

2

Is the navigation around the site easy

Yes

Yes

3

Is the loading time quick and efficient

Yes

Yes

4

Is the site accessible to users with inferior hardware

Yes

Yes

5

Is the site accessible to users with inferior software

Yes

Yes

6

is the site accessible for short-sighted people

Yes

Yes

Graphics:

7

Are they clear and attractive

Yes

Yes

8

Are they necessary

Yes

Yes

9

Do they contribute or just a distraction

Contribute

Contribute

10

Will they unjustifiable add to excessive loading time

No

Yes

11

Consider alternatives for people with lower spec browsers and software

Yes

Yes

Colour:

12

Is there an attractive mix of colours

Yes

Yes

13

Do they add to the appearance of the site

Yes

Yes

14

Do the colours follow web standards

Yes

Yes

15

Have I considered colour blindness

Yes

Yes, See Accessibility test.

Content:

16

Is the content interesting and of use to the user

Yes

Yes

17

Is the spelling correct

Yes

Yes

18

Is interaction possible

Yes

Yes

Readability:

19

Are the pages readable

Yes

Yes

20

Does the site load correctly using different browsers

Yes

No! See note 102

Page Layout:

21

Is each page in the site consistent

Yes

No! See note 101

22

Use of Cascading style sheets

Yes

Yes

Links:

23

Are the links easy to spot

Yes

Yes

24

Do they work correctly

Yes

Yes

25

If they follow the links can they return easily

Yes

Yes

26

Is there a site map, breadcrumbs or similar

Yes, example

Yes, Site map

Program: Registration

27

Accept names and username

Yes

Yes

28

Accept Correct E-mail

Yes

Yes

29

Incorrect E-mail

Error

Error

30

Passwords Encrypt

Yes

Yes

31

Passwords don't match

Error

Error

32

Clear details button works

Yes

Yes

33

Database saves correct data

Yes

Yes

Program: Log-in

34

Correct log-in details

Opens managers page

Opens managers page

35

Incorrect log-in details

Error

No! See note 103

36

Correct Admin details

Opens Admin Page

Opens Admin Page

37

Incorrect Admin details

Warning

Warning

Program: Enter players

38

Show list of choices

Yes

Yes

39

Accept correct choice

Yes

Yes

40

Enter Team

Return to Log-in

Return to Log-in

Program: Admin

41

Insert new details

Accept and save to database

Accepted and saved to database

42

Return button

Opens Log-in page

Opens Log-in page

Program: show details

43

Press View Table

Shows Latest Table

Latest Table is shown

44

Press View Team

Shows Users team

Users team is shown

45

Press View Guestbook

Opens guestbook

See note 104

46

Press logout

Returns to the home page

Returns to the home page

Note 101: The pages that show the team selection and the football tables etc. are not consistent with all pages as yet. The reason being is that they are just using “trail” data until the beginning of the season, once the correct player data been released then the pages will follow the required standard.

Note 102: The site was originally tested on Internet Explorer 5/6. Fire fox 1.0.7 and Opera 8.5. While each of these browsers displayed the site accurately there was the exception of a few minor errors fixed during the sight test. The real problem started when I updated to the latest Internet Explorer version 7 (IE7). Here the home page's heading were moved. This problem was overcome without disrupting the view in the other browsers that were previously perfect. Without being sure if it's IE7's fault or my own page design, the problem in the home page was that IE7 browser would not except a heading value I had entered, I arrived at this answer by pure trail and error, but once changed it solved the problem first time.

Note 103: The error comes up but there was no link button to take the user back to the Log-in page. Instead of taking the user away a statement appears stating that wrong details were inputted and clears the details ready for a retry.

Note 104: The guestbook is not fully operational at the moment, but the shell has been put in to show the users that the feature will be available once the new season starts.

Accessibility Testing

For this test, we used two website tests. Firstly was the Website Accessibility Initiative (WAI). This involves a full checklist of over 60 tests to check for your sites accessibility. The second is a colour-blindness test from a company called Vischeck. Vischeck take your webpage and show you how it would look to a person with colour-blindness Fig 3 shows this. While the outcome is not perfect, the picture in the top right is not seen, everything else including the text is seen correctly. As this picture is only temporary tests will be made on any future pictures uploaded onto the site.

Acceptance Testing

The Acceptance tests

After all the other tests had been done the acceptance testing took place. Here the client went through the whole site to check for errors and suitability. Whilst this test was a success at the clients' home address, there was a problem when he accessed the website at work. The problem here was that the headings in the home page did not show in “Edwardian script”. The browser here used was Internet Explorer Version 6.0.2800.1106co. While this was confusing the problem was not a major one, also, I had not come across this problem before other then in testing and certainly not with any of the other browsers I have tested the site with. Therefore, the decision was made to see if any of the users had similar problems until any alterations were made.

Reflection

After researching web application testing in different areas, it became clear that most testing is done in different ways, by using testing tools or even specialised test software. Having mostly in the past used test strategies from P M Heathcote's “Tackling computer Projects” I have adapted that with what I had learnt from others theories that I had researched.

As with one tutorial I found, “How to Unit Test the User Interface of Web Applications” (Dudziak 2005) he's actually testing a significantly bigger project. There is, however several similarities which can be taken and used in other simpler web applications.

The entire test plan is made up of several different ones to satisfy this projects needs. Finally with the software not to go on-line until the summer when the new season starts, the tests can only be done on what is available. Therefore further testing (Unit and Acceptance) will be carried out once the project has finally been completed.

In the usability testing the W3c Mark-up Validation Service test came up withseveral errors one of which was the heading Family Ties. This was adding to excessive download time according to the test. The answer here was to make the heading into a image.

Chapter 5. Clarity of Documentation

References

Accessibility checklist. http://www.w3.org/TR/WCAG10/full-checklist.html

Allen, G 2006, Project management methodologies - 23 Nov 2006, http://www.tech.port.ac.uk/staffweb/allang/pm-mthds.htm

Colour-blindness testing http://www.vischeck.com/vischeck/vischeckURL.php

Database solutions and downloads for Microsoft access, http://www.databasedev.co.uk/design_basics.html

Dudziak, T 2005, How to unit test the user interface of web applications - 23 Dec 2006, http://www.openqa.org/floyd/HowToUnitTestTheUserInterfaceOfWebApplications.pdf

Heathcote, PM 1997, Tackling Computer Projects 2nd Ed p3-19, Hillman, [GB]

Jorgensen. P, Software Testing - A Craftsman's Approach, CRC Press. 2 ed. 2002.

Khor, S, Software Testing - Methods, Strategies and issues, http://www.cs.concordia.ca/~comp691l/TestingFinal_Susan.pdf

Pressman, RS 2005, Software engineering: A practitioner's approach, Sixth edition, McGraw-Hill, [New York].

Starkey, AJ 2006, Family Ties - a personal website for family and friends - 20 May 2006, www.anthonystarkey.co.uk.

Bibliography

Acquired Knowledge systems Inc, Celestial Graphics, Website design.

http://www.aksi.net/website-design-tutorial2.htm

Allen, G 2006, Project management methodologies - 23 Nov 2006, http://www.tech.port.ac.uk/staffweb/allang/pm-mthds.htm

Bradley, A 2006, PHP Log-in Script - 12 Oct 2006, http://php.about.com/od/finishedphp1/ss/php_login_code.htm

Crooks, G. (2006). Team of the week. Available: http://news.bbc.co.uk/sport1/shared/spl/hi/football/squad_selector/team_of_the_week/html/ss_team.stm. Last accessed 21 Oct 2006.

Devshed forums, 2001-2007, Creating a Simple Threaded Discussion Forum - 2 Nov 2006, http://www.devshed.com/c/a/PHP/Creating-a-Simple-Threaded-Discussion-Forum/

Desilva, J 2003, The learning journey, accessed 13 Nov 2006 http://www.desilva.biz/php/

HTML writing aids and examples. http://www.re-vision.com/webwork/index.html

Keynote Netmechanic on-line HTML help.http://www.netmechanic.com/

Kreps, D. (2005) Web Design, content and Usability, University of Salford, Salford.

Mirror.co.uk (2005). You the manager2006, http://www.youthemanager.co.uk/CleverTV/tmg/themirror/clienthome.do?competitionId=15693

NFLuk.com. (2004). Fantasy /football 2006. Available: http://www.nfluk.com/games/fantasy-football/index.aspx.

PhP Mysql Tutorial, 2004-2007, accessed OCT/Nov 2006, http://www.php-mysql-tutorial.com/index.php

Stafford careers, Aims and Objectives, http://learning.staffs.ac.uk/careers/careersweb/cplanning/nsaimsobjs3.html

Starkey, A. 2005 , Family Ties - a personal website for family and friends - Aug 2005, www.anthonystarkey.co.uk

The ultimate HTML resource. http://www.htmlgoodies.com/beyond/javascript/article.php/3471341

Valade, J 2002, PHP & MYSQL for Dummies (2nd Edition) Wiley , [New York]

W3 schools on-line web tutorials. http://www.w3schools.com/default.asp