Assessment Task:

You are asked to design and develop a small prototype website for the client organisation in the scenario below. It need not address all of the business requirements but should give a fair impression of what the complete site would be like so that the client can decide whether or not to proceed in offering you the business.

Preloved Pets is a local charity which finds new homes for pets after their owners have died. The charity is based in a small centre where pets are temporarily housed until a new permanent home can be found for them. The pets tend to be dogs and cats, though they also include rodents.  At the moment the centre lacks the facilities to care for reptiles and fish. The centre is run by unpaid volunteers, including local vets and students.

Preloved pets currently advertises the pets it has ready for re-housing in the local paper and in posters which it places in the windows of shops in the area. The local radio station also does a "preloved pet of the week" slot. The local paper and radio provide the advertising space free of charge.

Preloved Pets is entirely self-funded. It gets its income from several sources:

• People leaving money to the charity in their wills.
• People making small one-off donations.
• A Supporters Club where people pay a regular monthly fee. Members get a quarterly emailed magazine and invitations to special events.

Preloved Pets believe that a website would be an effective way to find new homes for its pets, and to boost their income. It is also interested in the possibility of the website being used to raise funds to build a new wing to accommodate reptiles and fish.

There are three parts to this coursework:

1. Design Brief

2. Website

3. Supporting Material

1. Design Brief

The Design Brief should have four sections:

The Objectives: what is the single main goal of the site; what are the secondary goals; what are the long-term goals; how will the success of these goals be measured?

The Target Audience: a statement of the Key User Groups for the website and their main tasks.

• One persona representing one of the Key User Groups.
• One scenario detailing one of that persona's main tasks.

Personality and Tone: how should the target audience feel about the site, what should they think about it, how will the website achieve this?

• A wireframe or storyboard for the website homepage.
• A website mood board for the website.

Persuasive tactics: a description of how specific persuasive tactics will be employed in order to achieve the organisations objectives.

Single Minded Message: a single word or phrase that will capture the essence of the final site once it is launched.

The Design Brief is worth 25% of the marks for the coursework.

The Design Brief and the Supporting Material should be submitted to Blackboard as a single Word file.

2. Website

The website must reflect the client's business requirements, but does not need to cover all aspects of them. It should be informed by your earlier Design Brief. The website must be uploaded to your web space on the student server (at-web2.comp.glam.ac.uk/students/your enrolment number).

This URL will be used to access and mark your site, so check that it works and make sure that you do not place this page in a subfolder. Please note, if the website cannot be viewed or links within the website are broken, it will not be possible to mark any un-viewable features.

• A page with content including a video clip. The source of the clip should be included in your supporting material.
• A page with content including at least one photograph. The source of the photographs should be included in your supporting material.
• A page which draws some of its content from a database. This must be a .php page and should be based on the one used in the tutorial.
• A page which includes a form. Submitting this form should echo the content back to the user as was done in the tutorial.

The site should include illustrative example content- images, video, text - appropriate to the organisation in the scenario.

The HTML and the CSS should be your own work. It is not appropriate to use any form of code generation package or to use existing css templates or similar.

The emphasis in both the HTML and CSS should be on doing simple things well, rather than producing very complex pages. You do not need to go beyond the work covered in tutorial to get a good mark.

Use of HTML. The website should be constructed using HTML 5 to mark up the logical structure of the document as covered in the tutorials. The appropriate mark-up should be used, including the semantic mark-up available in HTML 5. The HTML should demonstrate the range covered in the tutorials and should be applied appropriately. The HTML mark-up should be well laid out and commented where appropriate. The HTML should be validated.

Use of CSS. CSS should be used to mark up the presentation and layout of the HTML. It will ideally make use of a single external cascading style sheet, where this is not the case, comments should explain why. It should make appropriate use of selectors. The CSS style rules should be well laid out and commented where appropriate. The CSS should be validated.

PHP should be used to draw content data from a database and display it in a .php webpage. This should be based on the tutorial work.

A simple form should be included to allow the user to submit data in some way. NOTE - you are not required to process the submitted form in any way other than by echoing the contents back as demonstrated in the tutorials. You are not required to store the form data in a database. The form should include appropriate validation where this is available within HTML (e.g. for email addresses).

The overall design of the site should reflect the user's needs and the clients business. This should include labelling and navigation, user of colour and media, the overall look and feel as well as usability.

3. Supporting Material

The Supporting Material has five elements:

1. The code listing of the complete .php page.

2. A list of sources for any media item used on the website.

3. A validation report covering every HTML and .php page and .css stylesheet files.

4. A brief explanation of how your layout is controlled by your CSS

5. A brief reflective report.

The code listing of the .php page should be the complete code for the entire page, showing the HTML tags etc.

The list of sources should identify each media item (e.g. picture of parrot on homepage) and the source (e.g. a URL). Ideally copyright free images and video should be used.

The validation report should include every .htm, .php and .css page used in your website. It should indicate whether each page validates. If there are warnings, these should be noted and commented on as appropriate. If a page does not validate, the errors should be noted and commented upon as appropriate.

The explanation of your layout should briefly describe it (e.g. header areas, navigation areas, content areas etc) and explain how CSS has been used to implement it (e.g. what HTML and CSS mark-up has been used to achieve the layout).

The reflective report should be no more than 350 words long. You should consider how the coursework went, things you found challenging, things that went well, your strengths and weaknesses with regards to the tasks in this assignment and so on.