Introduction to Information and Web Technologies,

Module name and code

3BUIS001C

CW weighting 40%

Lecturer setting the task with contact Elena Lushnikova (elushnikova@wiut.uz)

details and office hours Office hours: Thursday 11:1513:00

Submission deadline April 6, 17:00

Results date and type of feedback Marking week 4 marks published via SRS

The CW checks the following learning outcomes:

6. To create simple web page using text editor and appropriate software;
7. To evaluate site designs and structures.

Task overview
This is an individual task. You are required to design and build a simple website on a topic specified
below using any appropriate software (e.g. Sublime Text, Notepad++, Atom, Dreamweaver,
FrontPage, or any open source software). Together with the website, you will be required to submit a
report.

Instructions
Website (60 marks)
Note: the site must have sensible content, i.e. the pages must have some meaning. Your pages must
not be crude, offensive or defamatory.

All re-used content must be referenced:

on the page with a functional link to original source AND
within the report using Westminster Harvard referencing style.

Your website must comply with rules and guidelines provided below.

1. Topic
Create your website based on one of the following topics:

Professional portfolio/CV website Historical facts

Corporate website Learning centre
Product website Museums of Uzbekistan
 Theatres of Uzbekistan Animals
Cultural heritage of Uzbekistan Fashion
Shopping centres in Tashkent Dancing styles
National cuisine Music
List of movies released in 2016 or 2017 Martial arts
Sport Personal development
Health care Board games

2. Pages
Number of pages
Minimum number of pages: 3
Recommended: 5 pages
Maximum: 10 pages (any pages above this limit might not be marked)

Required pages
Home page (index.html)
About page with your student ID and brief explanation of website purpose (about.html)
The rest of pages is up to you

Page structure
Each page must follow the structure of proper HTML document, which requires:
Document type declaration
HTML root element
Head and body elements
Title element

Naming
Each page must have proper file name and title:
Files must be named without any spaces or capital letters. You can use dashes - or
underscores _ instead of spaces
Both file name and page title must be meaningful and describe page content

2. Layout
Page layouts should consist of semantic layout elements introduced in HTML5 standard. These
elements include:
<header> <section> <aside>
<nav> <article> <footer>

3. Main navigation
Must be present on each page
 Must allow accessing Home page and any major section of the website in 12 clicks
Current page/section should be visually distinguished

4. Sitemap (supporting navigation)

Should be located in footer of each page
Should contain links to all pages of your website
Current page/section should be visually distinguished

5. Content
Text and images
Should be placed where appropriate
Text should be informative, interesting and fit website topic
Images should illustrate topic well, be of good quality and not distorted
At least one image should be used
Text and images should be properly sized and formatted and fit to websites overall
design

Table
At least one table (22 cells minimum) with some tabular data relevant to the topic.
Each table cell must contain either text or an image

Video/audio
At least one video or audio should be embedded. You can use either:
o dedicated HTML5 element (<video> or <audio>) AND/OR
o <iframe> embedding from YouTube or other video/audio hosting

Video/audio should be relevant to website topic and content

One video OR one audio is enough
Maximum: 5 videos AND audios. E.g., embedding 4 audio files and 1 video means that you
have reached the limit
If you store video/audio as files in your website, their total size must be less than 100MB

External links
At least three links to other websites opening in new browser tab or window Commented [AR1]: If they have reference at the end of
every page and it opens in new tab it could be considered
A mailto link to webmasters email address. as external link. I think we can require them to implement at
least three external links.
o Email address must include your student ID
Commented [EL2R1]: Changed from one link to three
o You can use your email for Turn-it-in account links

o Do NOT use email address which contains your name, even partially Commented [AR3]: Please specify that it SHOULD NOT be
their personal address (it was the case in previous year CWs).
Could be their ID, e.g. 00007777@wiut.uz

6. Styles Commented [EL4R3]: Clarified the point below.

All styles must be stored externally in styles folder

You must create your own CSS styles and comment on them in the code
 You can re-use code from articles online, but you need to reference and explain it in CSS
comments. Re-used code without comments/reference will be considered a plagiarism Commented [AR5]: GOOD!

Usage of Bootstrap or other CSS frameworks/templates is not allowed Commented [AR6]: AGREE

7. JavaScript
All scripts must be stored externally in scripts folder.

Simple JavaScript functions should be used to add some dynamics or/and special effects to the
website, e.g. animations, slideshows, dynamic menus.

Any major functionality written or re-used should be explained with comments.

If jQuery or other JS libraries/frameworks are used, they must be referenced in comments and inside
the report.

8. Validation
Validate your HTML and CSS code to ensure that you have not violated any standard:
HTML validation: https://validator.w3.org/
CSS validation: https://jigsaw.w3.org/css-validator/

Recommendations
Use simple backgrounds text layered over complex or busy backgrounds is difficult to read
Use web-safe fonts, preferably sans serif for main text. Sans serif fonts, such as Arial,
Helvetica or Verdana, are easier to read on screen than serif fonts, such as Times New
Roman.
Resize and compress images in your pages, so the web page gets loaded fast.
Test how your web pages render in popular browsers (Google Chrome, Mozilla Firefox, Opera
or Internet Explorer).

Report (40 marks)

Your report should contain 35 pages with the following information:

Introduction (5 marks)
Briefly describe what your website is about and what software you have used in order to create your
website and why.

Page sketches (8 marks)

Include a sketch for each page that has distinct layout, showing the layout itself and link directions.
You can draw sketches by hand or with appropriate software. Screenshots are NOT allowed. Marks
are awarded for accurate drawings and presentation. Commented [AR7]: Can recommend any online drawing
tool, such as draw.io or lucidcharts.com
Commented [EL8R7]: Done
Suggested software:
Paint or Paint.NET
Microsoft Word drawing tools
Draw.io (https://www.draw.io/) Mockup shapes
Lucid Chart (https://www.lucidchart.com/)

Visual design (5 marks)

Write 1-2 paragraphs about how you created visual design for the website. Mention any website(s)
that inspired you and include information about how your visual design was influenced by them. If you
used graphical template (even if you heavily modified it), mention it as well and include information
about its author.

Note: You are allowed to use graphical templates (in PSD or any other graphics format), but you
MUST NOT use any HTML/CSS pre-made templates available online.

Code clarification (10 marks)

Write a clear explanation of how the following parts were implemented:
Navigation what navigation technique(s) did you use, where did you get
Any re-used code
JavaScript

Include fragments of the code followed by detailed explanation. If this part is missing, the mark will be
substantially reduced.

Conclusion (7 marks)
What did you learn while doing this coursework? What was the easiest part of your work and what
was the hardest one? How would you improve this website if you had more time and skills?

Reference list (5 marks)

Include reference entries for all information re-used from other sources, be it code, graphical
template(s), text, image(s), video(s)/audio(s), etc. It should be written using Westminster Harvard
referencing format and be sorted alphabetically.

Submission requirements
All your files should be arranged into the following folder structure and be compressed into one ZIP
archive. E.g.:

0000####.zip
0000####.docx
name-of-your-website
images
(all image files)
 styles
(all CSS files)
scripts
(all JS files)
media
(only if you store video/audio files locally)
index.html
about.html
(the rest of HTML pages)

Warning: replace #### with your actual ID number!

No need for hard copy submission, but you must submit your ZIP archive electronically at both
Intranet and Moodle. The details for submission to both systems will be provided before the deadline.
In addition, it is your responsibility to put word-processed report (Word file) through the Turn-it-in anti-
plagiarism software before submission. The details for Turn-it-in submission will be provided before
the deadline as well.
Your name should not appear anywhere neither in report, nor on the website.

Report formatting
Font either Arial, Times New Roman, or Calibri; size 12pt
Line spacing is between 1.2 and 1.5 lines; spacing 8pt after paragraph
Include standard cover page (available at Intranet Documents) with your ID number, module
title and ML name
Include a contents page giving the headings and page numbers of each section
Use Westminster Harvard method of referencing
Pages should be numbered
Your ID number should be present on each page
Include a contents page giving the headings and page numbers of each section.
Assessment criteria
Website 60

Pages, files, folders

Number of pages is close to the recommended. Each page has proper file name and
title, as well as proper document structure. Page layouts consist of semantic elements.
12
Folder names are descriptive, used to store relevant files (e.g. "styles" for CSS,
"images" for pictures, "scripts" for JS, "media" for video/audio) and have no spaces or
capital letters.

Navigation
7
Main navigation and sitemap are well-designed and conform CW requirements.

Content
Text is informative, interesting and fits website topic.
Images illustrate topic well, are of good quality and are not distorted.
At least one table is given with tabular data relevant to the topic.
At least one video OR audio is embedded and it fits website topic. 11
At least three links to other websites opening in new browser tab or window are
given.
A mailto link to webmasters email address is given (has ID, but not student
name)

Visual design is neat, consistent, readable and matches the topic.

Neat: website is orderly, visually appealing and polished
Consistent: all pages have uniform outlook and it is clear that they belong to the
same website 5
Readable: contrast between text and background is good, font is not very small,
etc.
Matches the topic: colour scheme, fonts and graphics support website topic well

JavaScript code works well, is explained in comments, any used JS

10
libraries/frameworks are referenced in comments

Validation
HTML and CSS code conform HTML5 and CSS3 standards respectively no validation
errors/warnings are found when checking with validation services 15
Markup Validation Service (https://validator.w3.org/#validate_by_input)
CSS Validation Service (https://jigsaw.w3.org/css-validator/#validate_by_input)
Report 40

Introduction it is clear what the website is about, what software have been used in
5
order to create the website and why.

Sketches for each page with distinct layout and content are included. The layout is
8
clear. Screenshots are NOT used, and drawings/presentation are accurate.

It is clear how visual design was created. Source(s) of inspiration are described and it is
5
clear how they influenced design. Any re-used graphical templates are mentioned.

Code fragments are included and clarified for the following parts:
Navigation
10
Any re-used code
JavaScript

Conclusion answers all the following questions:

1. What did you learn while doing this coursework?
7
2. What was the easiest part of your work and what was the hardest one?
3. How would you improve this website if you had more time and skills?

Reference list includes entries for all re-used information, be it code, graphical
template(s), text, image(s), video(s)/audio(s), etc. It is written using Westminster 5
Harvard referencing format and is sorted alphabetically.

Marking schema
See the Excel file attached. Commented [AR9]: We should not make it available for
students.
Assessment criteria is enough
Commented [EL10R9]: Yes, this section will be removed
from task description for students.