School of Computing and information Systems

PROGRAMME: BSC BUSINESS INTELLIGENCE AND DATA ANALYTICS

BSC COMPUTER SYSTEMS ENGINEERING

BSC APPLLIED BUSINESS COMPUTING

BSC MOBILE & WEB TECHNOLOGIES

Web & Multimedia Development Year 1 Semester 2

ASSIGNMENT

Hand out Date: 08 March 2024 Hand in Date: 14 May 2024

Total Marks: 100

Instructions to candidates

1. Candidates must a-empt ALL ques2ons.

2. You are to make your submission on turn-it-in. You may consult with your tutor/lecturer
on how this will be done.
3. Your Assignment submission must have a cover page with full student details. The cover
page will be provided to students when the Assignment is issued out. On the cover
page, you will find an acknowledgement statement which must be signed by the student
as proof of admission or affirma2on of one’s own work being submi-ed.
4. Ensure that you have an account on turn-it-in by going to www.turni2n.com. Use the
creden2als provided for your account, for accessing this system. If you do not have your
turn-it-in account creden2als get hold of the module tutor/lecturer as soon as possible.
5. Ensure that you have your GitHub account set up and that you have your assignment
repository created, where you will upload your website files.

1
6. Any work with a plagiarism level above 30 % will not be marked. You are responsible for
ensuring the plagiarism level detected in your work is within this level. Monitor the
plagiarism ra2ng of your work regularly.
If you share your solu2on with others, the chances of plagiarism rising above this level
are high.
7. It is your responsibility to ensure that the Web & Mul2media Development module is in
turn-it-in and that you can see it before the submission date, so you can submit your
report on the module link/bin. Consult with your tutor/lecturer if this is not the case.
8. Save the file name using the following conven2on or format
surname_firstname_cohort_assignment code.docx or .pdf e.g.,
smith_david_april2022_A03.docx
9. Note that this assignment may be subject to change or amendment and that care shall
be taken to ensure that any such amendment or change shall not prejudice or
disadvantage you/the candidate/the student.
 Learning Objec-ves and Outcomes of the Assignment

The Learning objec/ve of the Assignment are as follows:

1. Understanding Web Development Fundamentals:

- Understand the basic principles of web development.
- Understand the role of HTML and CSS in web development.
- Differen2ate between client-side and server-side technologies.
2. HTML Fundamentals:
- Create well-structured HTML documents using appropriate tags.
- Understand seman2c HTML and its significance for accessibility and SEO.
- Incorporate mul2media elements such as images, audio, and video using HTML tags.
3. CSS Fundamentals:
- Apply CSS styles to HTML elements using inline, internal, and external stylesheets.
- Understand the box model and its implica2ons for layout and design.
- Implement CSS selectors to target specific HTML elements for styling.
4. Responsive Web Design:
- Understand the concept of responsive web design and its importance in modern web
development.
- U2lize CSS media queries to create responsive layouts that adapt to different screen
sizes and devices.
- Implement flexible grids and responsive images to op2mize content for various
viewport sizes.
5. Accessibility and Usability:
- Understand the importance of usability and apply principles of user-centred design to
enhance the user experience.
6. Cross-Browser Compa/bility:
- Iden2fy poten2al compa2bility issues between different web browsers and versions.
- Implement strategies to ensure consistent rendering and func2onality across various
browsers and devices.
7. Project Development and Deployment:
- Plan, design, and develop a complete website using HTML and CSS.
- Deploy the website to a web hos2ng service and configure domain se_ngs.
- Perform tes2ng and debugging to ensure the website func2ons correctly across
different environments.

3
This assignment has two Tasks, Sec/ons 1 and 2. You must consult your Tutor to acquire
clarifica/ons for this assignment. You can also consult with the module leader.

Sec/on A – Website Planning & Documenta/on [40 marks]

WARNER Bros Website Re-Design

As a student developer, your task is to plan, document, and develop a website for Warner
Bros. To ensure a structured approach, you'll follow the Website Design Process outlined in
Chapter 3 of this module. This process encompasses all elements necessary for successful
website development. Your initial steps involve thorough planning, documentation, and
implementation of design strategies tailored to Warner Bros needs. Through this process,
you'll ensure the website meets all requirements and delivers an optimal user
experience. The following diagram shows the stages that you need to follow to produce the
required product.
1. Website Specifica/ons: [10 marks]
a. State the objec/ve, purpose of the website and its goals for the business.
b. State the target audience, showing their demographics and technical ap2tude.
c. You must iden2fy the type of website or content you will be designing for the
users.
2. Informa/on Design & Taxonomy: [5 marks]
Your documenta2on should then provide the informa2on architecture, showing how
informa2on is categorized and its naviga2on paths (i.e. Site Map) – all necessary page
naviga2on across the website must be documented. Plan your site by crea2ng a
storyboard flowchart.
3. Page Template Design: [5 marks]
This part should focus on the page template design, showing how the final webpage for
the website will look like. REMEMBER that Wireframes offer a more complete view of
what the final design will look like.
4. Technical Brief: [5 marks]
You are to state any technologies you will use in developing this website and any other
resources (sodware tools, graphics tools etc.). Remember to choose sodware tools that
match the complex needs of your website.
5. Quality Assurance: [5 marks]
You are to provide detailed Test samples of your website. These shall include browser
compa2bility tests, mobile device tests. These should be in form of screenshots
illustra2ng where the website was being tested.
6. Publishing & Promo/on: [4 marks]
Indicate how your website is hosted, the tools and methods you used to host your website
– this should encompass your GitHub commands and tools used to upload your website
on GitHub Pages. Include the website link address on this part for reference.
7. Future Developments/Recommenda/ons: [3 marks]
There are always ways to improve work – kindly use this part to demonstrate how you
would improve the website in the future.
8. Report Organization and Structure [3 marks]

Guidelines for wri/ng your report: A good and effec2ve report presents and analyses facts and
evidence relevant to the specific problem or issue of the report brief. The style of wri2ng in a
report is usually less discursive than in an essay, with a more direct and economic use of language.
A well-wri-en report will demonstrate your ability to:

5
 • understand the purpose of the report brief and adhere to its specifica2ons.
• gather, evaluate, and analyse relevant informa2on.
• structure material in a logical and coherent order.
• present your report in a consistent manner according to the instruc2ons of the report.
brief.
• make thoughgul and prac2cal recommenda2ons where required.
• The report word count must be 2000.

GitHub Pages URL: Link to the hosted Warner Bros website on GitHub Pages for
assessment. The copy of the website folder (together with necessary file i.e. images,
css,js and bootstrap files): These must be submieed in your respec/ve GitHub
Repository that is named with your SCIS number e.g. FCSE19-001.

Sec/on B – Website Design & development [60 marks]

Warner Bros. is a mul2faceted media conglomerate known for its diverse entertainment
offerings, spanning feature films, television, anima2ons, digital distribu2on, video games, and
more. Its subsidiaries include Warner Bros. Pictures, Warner Bros. Interac2ve Entertainment,
Warner Bros. Television, Warner Bros. Anima2on, and others. The company's current website,
hosted at h-ps://www.warnerbros.com serves as a hub for movie trailers, news, classic clips, TV
series, and video games. Addi2onally, it operates an online store offering a wide range of
products, from movies to clothing, toys, home décor, and collec2bles.

As part of an ini2a2ve to stay at the forefront of technology and web presence, Warner Bros. is
undergoing a redesign and redevelopment of its website. Key features of the redesign include
adherence to W3C standards, u/liza/on of HTML5, CSS3, JavaScript and Bootstrap,
compa/bility with various browsers and devices, and a focus on mul2media content and page
uniformity.

The revamped website will consist of at least five main pages: the index page, movies page, TV
shows page, games & apps page, collec2ons page, and a feedback page with an HTML form. Each
of the pages dedicated to movies, TV shows, and games will feature informa2on about at least
one item from the respec2ve category.
Crea2vity will be emphasized throughout the redesign process to ensure the website appeals to
Warner Bros.'s target audience. This will involve the use of compelling graphics, imagery, and
banners created with tools like GIMP to engage visitors and enhance their browsing experience.

Planning, Design and Development Documenta/on of Warner Bros Website

1. Informa/on Design and Taxonomy: The first step in the development process involves
organizing the content and structuring the informa2on architecture of the website. This includes
categorizing the content into logical groups and determining how it will be interconnected.

a. Site Map Design: A visual representa2on of the website's structure, the site map outlines
the hierarchy of pages and how they are linked together. It serves as a blueprint for the
website's naviga2on and content organiza2on.
Example Site Map:
- Home
- Index Page
- Movies
- Individual Movie Pages
- TV Shows
- Individual TV Show Pages
- Games & Apps
- Individual Game/App Pages
- Collec/ons
- Feedback

2. Graphics Design and Page Template Crea/on: Once the informa2on architecture is
established, the next step is to design the look and feel of the website. This involves crea2ng
wireframes and visually designing page templates.

a. Wireframes: Basic layouts of each page, wireframes outline the structure and placement
of elements such as naviga2on menus, content sec2ons, and mul2media objects. Use the
Figma tool to design the website Wireframes.

b. Visual Designs: of each page, page templates incorporate branding elements, colour
schemes, typography, and imagery to create a cohesive and visually appealing interface
using graphics sodware like GIMP.

7
3. Technical Brief:
With the design approved, the website is built using HTML5, CSS3, JavaScript and Bootstrap.
HTML5, CSS3, JavaScript, and Bootstrap are fundamental technologies used in website
development. HTML5 provides the structure, CSS3 handles styling, and JavaScript adds
interac2vity. The Bootstrap framework simplifies development by offering pre-designed
components like naviga2on bars, bu-ons, and more. To improve your website, incorporate
Bootstrap to control elements such as naviga/on bars, bueons, tables, cards, and carousels.
Bootstrap ensures consistency and responsiveness across different devices. Document your
usage of Bootstrap as part of the comments to demonstrate understanding and customiza2on.

4. Quality Assurance: Before the launch, the website undergoes rigorous tes2ng to ensure
func2onality and compa2bility across various browsers and devices.

5. Cross-Browser Compa/bility Tes/ng: Tes2ng the website on different browsers (e.g., Chrome,
Firefox, Safari) to iden2fy and resolve any compa2bility issues.

Example Tes/ng Checklist:

- Ensure consistent layout and func2onality across browsers
- Test on different devices (desktop, tablet, mobile) to verify responsiveness
- Check for proper rendering of mul2media content (images, videos)
- Validate HTML, CSS, and JavaScript code for errors

6. Publishing & Promotion: The website will be hosted using appropriate hos2ng services, and
tools like GitHub will be u2lized for version control and deployment. GitHub Pages will be used
for hos2ng the website. Do not forget to include the link to your website on your Documenta2on.
Appendix A: Report Marking Guideline

Scale
Criteria
Excellent Very Good Above Average Below Poor
Average Average
1. Website 10 pts 8 pts 6 pts 4 pts A 2 pts 0 pts
Specifications: Included Included Included a report with Includes a few POOR to NO
State the facts, quotes, facts, mixture of very few opinions, with Introduction
website and quotes, and facts, quotes, facts, some a lot of
objective, its paraphrasing paraphrasing and paraphrasing information
goals in from reliable from reliable paraphrasing with taken as is
relation to the sources. sources. from reliable information from
business. Included as well as from unreliable
research from unreliable unreliable sources.
State the target
subject- sources. sources.
audience,
matter
showing their
experts
demographics
and technical
aptitude.

You must identify

the type of
website or
content you will
be designing for
the users
2. Information 5 pts 4 pts 3 pts 2 pts few 1 pts 0 pts A
Design & All page Some page Some page page details Very little poor
Taxonomy details are details are details are are page details, presentation
information identified, identified, identified, identified, a a structure of of
architecture, Clear Clear Clear structure of pages with information
showing how structure of structure of structure of pages with access to
information is pages with pages with pages with access to content.
categorized easy easy access easy access content.
and its navigation access to
to content. to content.
paths (i.e. Site content.
3clicks rule
Map) 3clicks rule
maintained
maintained
3. Page 5 pts 4 pts A 3 pts A 2 pts A 1 pts A 0 pts
Template an very good minimalistic very simple very simple A poor design
Design page excellent presentation and simple presentation presentation or
template presentatio design, presentation design. No design. No NOT Done
design, n design, indicating a design, clear clear
showing how indicating a very good indicating indication of indication of
the final very good placement placement content content
webpage for placement of of content of content sections sections
content on on the with little
the website will on the with NO
the page. page. No Active
look like. page. Active White
Clearly clearly White space
Clearly space
define indication of between
content define content between
elements.
sections with content sections elements.
Active sections with with little
White space Active White Active
between space
elements.
 between White space
elements. between
elements.

4. Technical Brief 5 pts 4 pts 3 pts 2 pts A 1 pt 0 pts

state any A detailed A very A descriptive brief text of A shallow A poor
technologies you and insightful detailed and text of the the software listing of tools presentation
will use in text descriptive software tools, graphic and resources of facts to
developing this describing text of the tools, tools and any without any the issue.
website and any the software software graphic tools other description of
other resources tools, graphic tools, and any resources what each is
(software tools, tools and any graphic tools other needed to to be used
graphics tools other and any resources complete the for.
etc) resources other needed to assignment
resources
 needed to needed to complete the
complete the complete assignment
assignment the
assignment
5. Quality Assurance: 5 pts 4 pts 3 pts 2 pts 1 pts 0 pts
detailed Test samples of A very good A very A good A simple An illustration Poor Work
your website. These shall illustration of test, good illustration of illustration of of test, with or NO
include browser with detailed illustration test, with some test, with little narrow Work
compatibility tests, mobile descriptions of what of test, with descriptions of descriptions of descriptions Done
device tests. each test was good what each test what each test of
carried. descriptio was carried on, was carried what each
on, and variations, if ns of and variations, if on, test
any what each any and variations was carried
test if any on,
was and variations
carried on, if any
and
variations if
any
6. Publishing & Promotion 4 pts 3 pts 2 pts 1 pt 0 pts
Indicate how your Excellent Some good use Evidence of use of the Poor Work
website is hosted, the N/A use of the of the GitHub use of the GitHub or NO
tools and methods you GitHub technology, with GitHub technology Work
used to host your website technolog use of the GIT technology, for submission, Done
– this should encompass y, with commands to with little use of with little to
your GitHub commands good use monitor the GIT no use of
and tools used to upload of the GIT changes across commands to the GIT
the monitor commands
your website on command
GitPages. s to changes
 monitor development of across the
changes the website development
across the of the website
developm
ent of the
website
7. Future 3 pts 2 pts 1 pts A 0 pts
Developments/Recomme N/A N/A A very clear A clear brief on narrow brief Poor Work
ndations demonstrate brief on how the how the on how the or NO
how you would improve website can be website can website can Work
the website in the future improved be improved be improved Done
Writing Style (Report 3 pts A 2 pts 1 pts 0 pts
Organisation and very good, A good A logical Poor Work
Structure) N/A N/A structured structured and or NO
material in a material in a coherent Work
logical and logical and order Done
coherent order coherent order
An attempt to
a consistent a consistent present the
presentation of presentation of report
the report the report according to
according to according to the
the instructions the instructions of
of the report instructions of the report
brief; the report brief; brief;
 Appendix B: Prototype Marking Guidelines

Student #: ___________________ Full Name:

________________________

Aspect Max Mark Comments

mark
A: Word Processed Report (marked from Assignment submission): Only one (1) file to be submieed

Website Planning & Documenta2on 40

//Transfer from Turni/n
B: The Website : Website files in GitHub Repository

1. HTML Structure (15 Marks):

- Check Proper use of HTML5 semantic 15
elements (e.g., `<header>`, `<nav>`,
`<section>`, `<footer>`)
- Check Proper use of additional HTML
elements (e.g., <article>, <aside>, <figure>,
<figcaption>)
- Check Clear and logical organization of
content on web pages.
- Valid HTML syntax with appropriate
indentation.

2. CSS Styling (10 Marks): 10

- Consistent and visually appealing styling using
CSS3.
- Responsive design that adapts to different screen
sizes.
-Evaluate whether CSS styles are consistently applied
throughout the website?
-Check if the CSS styles are responsive and adapt well
to di<erent screen sizes and devices.
- Ensure that the CSS styles adhere to accessibility
standards, making the website usable for people with
disabilities.

14
3. JavaScript Interactivity (5 Marks): 5
- Check the Implementation of interactive features
using JavaScript.
- Evaluate how JavaScript handles errors and provides
feedback to users in case of invalid inputs or
submission failures.
-Check if JavaScript is used to validate form inputs on
the client-side before submission.

4.Bootstrap Integration (5 Marks):

-Evaluate whether Bootstrap's components and styles 5
are applied consistently (typography, colour scheme,
spacing, and layout) across the website.
-Ensure that Bootstrap's components and features are
accessible to all users, including those with disabilities

5. Content and Multimedia (10 Marks): 10

- Check whether the content is Engaging and
relevant content across the website
- Check whether various multimedia elements are
integrated into the website (e.g., images, videos) to
enhance user experience.
-Check Accessibility considerations for multimedia
content.
- Check consistency in the style, tone, and branding
of content and multimedia elements across the
website.

6 Cross-Browser Compatibility (5 Marks): 5

- Test the website on popular web browsers such as
Google Chrome, Mozilla Firefox, Apple Safari,
Microsoft Edge, and Opera for compatibility.
-Assess how CSS styles are rendered across different
browsers.
-Evaluate the functionality of JavaScript code across
different browsers
- Verify that HTML markup is interpreted consistently
across browsers.
- Ensure that the website layout adapts correctly to
different viewport sizes and orientations.

7. Presentation (10 marks) 10

Use the following Metrics to assess the
Presentation:
-Assess the clarity and coherence of the presentation
content.
-Does the student demonstrate a deep -
understanding of the work they are presenting on?
-Does the student speak clearly and confidently?
- Evaluate the student's ability to manage time
effectively during the presentation.
-Did they respond thoughtfully and respectfully to
questions?

16
Appendix C: Assignment Submission Cover Sheet

Student Id:

Student names:

Student email:

Cohort:

Assignment title:

Date of submission:

Programme of
Study:
Year of Study: YEAR 1

Intellectual property statement By checking the box below, I certify

that this assignment is my work and is free from plagiarism. I
understand that the assignment may be checked for plagiarism
by electronic or other means and may be transferred and stored
in a database for data-matching purposes to help detect
plagiarism. The assignment was not submitted for assessment in
any other unit or institution. I have read and understood the
Botswana Accountancy College plagiarism guidelines policy.

☐ Agree Signature…………………………………….

Date…………………………………………..

------ End of Paper------