Building a Website - Coursework

Coursework Aim

The coursework for this module consists of building, and documenting the process of building a website. From the very beginning you need to be clear that this coursework consists of building and documenting the process of building the website. Majority of the marks will be awarded for your record of its creation and the explanation of the techniques used in developing it.

You are given an opportunity to choose the content of your site. However, it needs to be carefully chosen to allow a suitably complex website to be constructed. No two students will be permitted to build websites on the same subject. You must provide short description of your idea for the web site to your tutor. The tutor needs to approve it before you can proceed with the rest.

The content of the site will have no bearing on the marks awarded, but the logical way it is structured and the way it is presented will, therefore, the content should be seen as a vehicle for demonstrating web design techniques. You should not be spending a lot of time writing material, rather you should be using text which is available for reuse such as text from Wikipedia which can be reproduced as long as it is correctly attributed. Each page should include a notice in the footer that it is a demonstration website developed as an educational exercise and that it incorporates text and media from Wikipedia under the creative commons licence.

The web site/application must have 4-6 pages. In general, these pages will correspond to HTML files, although in certain advanced cases alternative structure will be considered. These pages must be linked together in a logical way with a well-designed navigational approach.  In addition to appropriate content there has to be some interactive features / elements within your website. It is expected that.

• You develop a template, then use this template to develop pages for your site (main area of each page can be different in structure).
• Home page can be different in structure from the template (succinct introduction to the site; appealing appearance)
• There has to be a logical separation of the topics into pages
• Where possible and appropriate, images, videos and audio files can be used
• Use JavaScript for appropriate features
• Use PHP for appropriate features

There are two main components to the coursework, the development report, which is worth 80% of the marks, and the demo and website itself, worth 20% of the marks. Details of each of these follow.

The aim of the report is to detail the work you have done. Imagine that someone is paying you to create this website and now that it is built they are arguing that they should pay less! This report should explain just how much work went into it and what a high quality product it is and why it is worth every penny!

Requirements

The following sections are required and must be included in your report, but if you have done advanced additional work you should add extra sections to describe that.

This section should include the specification (short description) of your web site/application (this is the idea for the site you discussed with the tutor). Anything else that was part of planning phase of your website needs to be included such as site map. The site map should be accompanied by appropriate narrative related to how you have divided your topic into logical pages. Some initial design decisions (sketches of your pages) should also be included. You can use some wire frames software or sketch these by hand.

You should describe the structure of your site including:

• How you have chosen to organise the information it contains and why
• How you have structured the actual data - typically the links between the various pages, but also any advanced structuring using dynamically loaded content or layers should also be described here
• how your files are organised on the server - where you store your images, styles and scripts, and why you chose to do it that way
• Semantic Mark-up - You should explicitly indicate where you have used semantic mark-up and in each case give your reasoning for the way you have used it.
• Included Media - You should indicate where you have included media files using HTML5 tags to embed them and explain how they work.
• Validation Reports - You should include the output of the W3C validator set to its experimental HTML5 settings for each of your pages and comment on any warnings it outputs.
• Browser compatibility notes - You should document any HTML tags or attributes you have used which are not supported across all browsers and comment on your reasons for doing so. It is acceptable to do this as long as you know you are doing it!

Describe the structure of the site, do not include styling as it should be in the second part of the report, however, some html code of the site with no styling active might be useful in describing the structure.

You should describe your main look and feel, including:

• The reasoning behind your choices for layout, colours, fonts and backgrounds
• Sensible screenshots to illustrate it
• Explicit descriptions of how the various styles were implemented:

Where you have styled HTML tags, say so and say why

Where you have used styles for IDs, say so and say why

Where you have used classes, say so and say why

Explain any complex (nested) selectors you have used

Where style rules have been cascaded you should explain this

Where dynamic effects such as transitions have been used these should be thoroughly explained

You should include fragments from your CSS in all these explanations.

• Responsive Design - You should describe how you have made your web application responsive to different screen sizes.
• Browser compatibility notes - You should document any CSS features you have used which are not supported across all browsers and comment on your reasons for doing so. Illustrate these differences with screenshots if possible. It is acceptable to do this as long as you know you are doing it!

You should document all uses you have made of JavaScript. Where you have used JavaScript in preference to using features of HTML5 and CSS3 which could have achieved the same results you should give your reasons for doing so. Please note, the code provided needs to be explained in detail. (If you cannot explain it, do not use it)

You can demonstrate how you have used PHP or/and AJAX in this section. You can use either and still gain the full marks for this section. It will depend on the complexity of what you have used.

Briefly Explain the W3C Web Accessibility Initiative Web Content Accessibility Guidelines (you are expected to reference the W3 sources). Comment on any aspects of your design which you know do or do not meet these guidelines. It is important to demonstrate your knowledge and understanding of the guidelines and that you know whether or not you have followed them.

These marks will be awarded for the overall quality of the report and the work presented. This includes the presentation of the report and the use of correct English grammar. Formal report structure is expected (title page, contents, intro, appropriate headings/subheadings, referencing).

Break down the code into smaller snippets where possible. Also, make sure you put the snippets of your code into a text box (example is below) using monotype font type, e.g. Courier New, the size can be 10 point, single spacing. All the figures including the code snippets must have a caption unless it is one line of the code that is linked to the code with the caption (example below).