SET11112 Web Design and Development

1. Assessment Brief Proforma

1. Module number SET11112
2. Module title Web Design and Development
3. Module leader Christos Chrysoulas
4. Tutor with responsibility Christos Chrysoulas
for this Assessment
Student’s first point of
contact
5. Assessment Practical assessment with report

6. Weighting 100% of module assessment

7. Size and/or time limits for Reports: Report 1 max 1000 words. Report 2 max 1000 words.
assessment Expect to spend 55 hours on this assessment.

8. Deadline of submission Submit coursework 1 (zipped) Friday October 27th

to Moodle by 15:00 on:
Submit coursework 2 (zipped) Friday December 1St
to Moodle by 15:00 on:
9. Arrangements for Upload your completed work in a zipped file to Moodle.
submission
You are advised to keep your own copy of the assessment, as
student work will not be returned.

10. Assessment Regulations All assessments are subject to the University Regulations

11. The requirements for the See coursework specification attached

assessment

12. Special instructions None

13. Return of work and Feedback will be supplied within 3 working weeks of a
feedback submission.
Student work will not be returned.

14. Assessment criteria See coursework descriptor below

2. Scenario
Your web design company is bidding for the contract for an online ordering and door-to-door food
delivery service. The customer creates an account and logs into the site to order one or more
products. The products are delivered to the customer's door. The customer pays online for their
order.

Your first task, and the only one to fall within the remit of this module, is to produce a working
prototype to show the customer. Should the customer accept your convincing proposal, they will
award the contract to complete the site.

In your design you will certainly consider the customer's user interface and make it usable and
professional-looking.

3. Part One (40% of the module marks, submitted halfway through

the trimester)

The decision to pass or fail a student depends on the total marks for both courseworks. It is not
possible to predict a pass or a fail, based solely on the marks for part one.

Part one involves the submission, to Moodle, of a written report and a simple prototype site, all in a
zipped file with the name of nnnn.zip, where “nnnn” is your matriculation number.

1. Write a clear summary of your initial research. Say what you liked and disliked about the sites you
visited. Include the URLs of the sites from which you have learned.

(500 words max., 5 marks)

2. Write, in 25-50 words, a mission statement for your own web site. A mission statement will help
you to visualise what you and your client want from the site, and ways to achieve this. (Mission
statements are often the decision of higher management. However, if the client is not forthcoming,
the web designer can make suggestions as a basis for negotiation).

In this section you will be marked on clarity of vision and whether you are able to keep to the word
limits.

(25-50 words, 5 marks)

3. Eventually (but not in Part One of this coursework) you will need a way of comparing the quality of
your prototype with that of its competitors. Compile a list of ten criteria which could be used to
measure the quality of a site such as yours. Try to select criteria on which independent assessors might
agree. For example “nice” is too open to individual interpretation; “generous use of white space” is
better; “the page height lies within the average browser window so scrolling is not necessary” is very
precise, (though not necessarily applicable, depending on the example). For each criterion, give a short
description of why you decided that it was important in this context. One mark for each criterion.

(10 criteria, 10 marks)

4. Suggest five ways of measuring the success or otherwise of the web site itself when it is finally
published and operational. These measurements will be important when measuring the success of
changes. These measurements must be numerically measurable: “a professional appearance” is
difficult to measure, whereas “a 10% increase in business” can be measured. This section is about the
business effectiveness of an operational web site, whereas Section 3 is only about the appearance of
the web pages. One mark for each measurement.

(5 measurements, 5 marks)

5. Propose a visual style for the site, including fonts, colours, element positions etc. You will only get
marks for definite decisions, so “a restful background colour” will not score any marks, whereas “a
powder blue background” will. You may wish to make an illustrative mood board. (The client will
almost certainly demand changes to this style proposal, but he would prefer to do that, rather than
generating his own style from scratch. This is a common development scenario). As with all
coursework, higher marks will be awarded for work of a higher standard.

(500 words max., 5 marks)

6. Submit a zipped file containing a simple horizontal prototype for the site, containing three linked
web pages. "Horizontal prototype" means that it looks real, but it doesn't actually work. The pages
are to be of HTML, CSS and images only, i.e., no PHP or other server languages. Please write your own
code and do not use the code of others (this rules out the use of frameworks). The pages are to be as
follows:

• The application's landing page (home page).

• A page containing an HTML form.

• Another page for the website.

Marks will be given for appearance, uniformity, correct use of the technologies and an appropriate
file structure. As with all coursework, higher marks will be awarded for work of a higher standard. (10
marks)

Submission notes for Part-1: All your work for Part-1 will be submitted in a zipped file called
cw_part1_MN.zip, where “MN” is your matriculation number. The zipped file will contain a written
report document (word/pdf) describing your answers for Task 1 to 5 in a well-structured format, and
a folder called ‘prototype’ that will contain your contents for Task 6.

4. Part Two (60% of the module marks, submitted near the end of
the trimester)
This part accounts for 60% of the total module marks. It involves the creation and deployment of a
working interactive web site. During this work, if you want, you may use a publicly available
framework, such as w3.css or Bootstrap. However, you are not allowed to use content management
system such as WordPress or Joomla, or website templates or any web applications frameworks such
as Laraval or Symfony. In this part, the following tasks are required.

1. You are required to create a web site which runs on a server. Your web site should be interactive
and contain the following features. The total marks for this question will be distributed against
the follow features:
• At least three web pages
• Client-side form validation
• User account creation
• Login and password authentication
 • PHP sessions and session storage
• CRUD (create, read, update, delete) database functionality.
• Your code is to validate against the W3C HTML5 document type definition and CSS
definition.
• Your written report is to contain details of URLs, login names and passwords needed to
access your site.
(40 marks)

2. For this coursework you have produced an interactive prototype, designed to help show the client
what the site could be like. Nevertheless, there will be more work to do before the site goes live
and starts accepting real orders. Your written report must now outline that extra work needed to
make your current interactive prototype into a working professional web site. You will be marked
on the quantity, detail, and clarity of your requirements.
(500 words max., 10 marks)

3. Your written report must contain a reflection on your work for this module, outlining what you
have learned about web design. Mark will be awarded for the number and quality of insights.
(500 words max., 10 marks)

4. There will be no coursework demonstration. Instead, you are asked to self-report your
achievements in code-writing. Please copy and paste this self-marking grid into your written
coursework and fill it in to tell us what you have achieved.

Submission notes for Part-2. All your work for Part-2 will be submitted in a zipped file called
cw_part2_MN.zip, where “MN” is your matriculation number. The submitted zipped file will contain
a written report document (word/pdf) describing your answers for Task 2 to 4 in a well-structured
format, and a folder called ‘site’ that will contain the files of your site. In addition to the files from the
server, please include an exported file of your database (use PhpMyAdmin to export the file). Place
this exported file in the zipped file at the same level as the written report and ‘site’ folder. Please also
add to your written report any log-in names, passwords, URLs and other instructions that are needed
to access the site. As with all coursework, higher marks will be awarded for work of a higher standard.
 Exists: Give the requested information in this
Coursework achievement grid yes or column.
no?

Please give the full URL (web address) of

your home page on the server
There must be at least 3 web pages (list 3
filenames)
I can register a new account (on which
page?)
There is a way of logging in (on which page?)
logging in is only successful for the right
password (true or false)
There is feedback telling me whether I am or
am not logged in. (what feedback?)
There are pages you can only reach if you
have logged in (which pages?)
Can your application create a table row on
the database? (How can I check?)
Can your application read from the
database? (How can I check?)
Can your application update a database
entry? (How can I check?)
Can your application delete a database table
row? (How can I check?)

Also please prepare a short video presenting the functionality of your webpage. The video should be
around five (5) minutes long. Provide the link of the video at the end of your report.

5. Notes
Plan to spend a total of 55 hours on your coursework, apportioning your effort according to the marks
available for each section.

Reflection after Part One may lead you to modify your design or evaluation criteria. This is
encouraged. Part Two will be marked without reference to Part One.

Normal School of Computing regulations apply to your submission. They are published separately in
your student handbook.

Try to avoid accusations of plagiarism:

• Do not copy and paste text from the Internet.
• If you use code from the internet, please acknowledge it in comments in the code and also in
the report.
• After reading reference material, lay it down where you cannot see it and write your own
interpretation in your own words.
• Credit will be given for good referencing.
• In preparing your application, do not copy material from other web sites at all.
Check that both your web applications are completely visible to someone who is not logged in as you.
(Ask a friend to check.)

6. Relationship to the module learning outcomes

This module has the following learning outcomes:
LO1: Critically evaluate the current standards & technologies used to develop WWW systems
(Maps onto the reports of both courseworks.)
LO2: Critically analyse the motivation behind trends in modern web technologies and identify
emerging issues.
(Maps onto the report sections of both courseworks.)
LO3: Design, develop and evaluate a suite of web pages using appropriate web technologies
(Maps onto the web site construction of both courseworks.)