CMPT 165 – Summer 2020
Project: Dynamic HTML Web Site
Project – Deliverable 1

Read this entire document before doing anything!
This document describes our Project in general and our Project Deliverable 1 in details. It also
describes our Project Deliverables 2 and 3 in general. The detailed description of our Project
Deliverables 2 and 3 will be posted on Wed. July 15 and on Wed. July 29, respectively.
It may be the case that some of the material discussed in this document is new to us, perhaps
because we have not yet covered this material in our lectures. If this is the case, we shall do so
over the next few lectures. We can also try to discover this new material on our own.

Project
In this project, we shall design a simple dynamic web site, which will allow the user to do
something such as:
 allow the user to play a game (game web site),
 allow the user to draw something (drawing web site),
 allow the user to do convert between various units (conversion web site),
 allow the user to compute equations (calculator web site),
 etc…
Our dynamic web site will require user interaction and will be composed of HTML markup code
(1 HTML web page), CSS style rules (1 external CSS stylesheet) and JavaScript code (1 external
JavaScript program).

Objectives
Our objectives, in this Project, are to …
 Design a visually appealing and usable web site and express our design using a wireframe.
 Get us working with all three “layers” of the web development process: HTML, CSS and
JavaScipt to create a simple dynamic web site (client-side).
 Allow us to identify visually appealing and usable web sites and analyse the strengths and
weaknesses of these interactive web sites.
CMPT 165 – Summer 2020

Project Deliverable 1
In Project Deliverable 1, we ...
1. Decide what our dynamic web site is to do.
To help us decide, we have seen various JavaScript demos in class (and in Participation
Activity 8) so far, and will see more over the next few lectures. We can also search the
Internet and further investigate what we can do with JavaScript.
NOTE: We cannot use Participation Activity 8 as our Project. However, we can base
our Project on the demos we have seen in our lectures and will see over the
next few lectures, but we will have to add more HTML elements, CSS style rules
and JavaScript code to these because these demos are not complex enough to
qualify for the Project.
NOTE: We cannot use Silly_Stories web site as our Project. However, to give us an
idea of the level of complexity our Project must have, Silly_Stories web site
would have the required level of complexity to qualify for the Project (but we
can’t use it).
Making this decision will certainly require us to write some JavaScript code and try it our
self in order to ascertain whether what we want our dynamic web site to do is feasible.
2. Once we have a good idea of what we want our dynamic web site to do, we must write a
proposal in which we must describe in detail what our dynamic web site is to do, how the
user is to interact with it and how our web site is to respond to user’s interactions, etc….
We need to be as specific as possible.
3. We must also describe what our dynamic web site will look like.
This signifies that we must design our dynamic web site. When we do so, we must take
into consideration the visual design principles seen in Lecture 17 (from Dr. Diana
Cukierman). We must also strive
 to make our dynamic web site user-friendly (unnecessary scrolling does not
qualify for “user-friendliness”  ) - one way to do this is by minimizing the amount
of effort, e.g., the number of mouse clicks, the user must make in order to get our
dynamic web site to do something,
 to minimize download time by making our files a reasonable size (this includes
images and videos),
 to create a responsive dynamic web site, i.e., a dynamic web site that can be
properly viewed on different devices (devices of different size), and
 to design our dynamic web site such that it is accessible to all users, including users
with visual impairment. One way to achieve this is by using the alt attribute of
. The value of this attribute will be displayed if either the picture is not
rendered (e.g., when the file is not found) or when a screen reader is used.
CMPT 165 – Summer 2020
Then, we must capture our design by drawing a wireframe of our dynamic web site. This
wireframe must not only reflect the structural (semantic) HTML elements of our dynamic
web site and some of its content, it must also give a clear idea of the layout of our dynamic
web site, i.e., the positioning of its structural HTML elements.
4. Finally, we must combine our detailed description of what our dynamic web site is to do
along with its design wireframe in one document (1 to 2 pages long) and save this
document as a pdf document. We must name this document Project-Deliverable-1.pdf.

Project Deliverable 2 – Will be described in greater detail when we release Project Deliverable 2
In Project Deliverable 2, we implement our dynamic web page, our external CSS stylesheet and
our external JavaScript program based on the detailed description of our dynamic web site and
our design wireframe from Project Deliverable 1.
In order to do Project Deliverable 1, we need to be aware of the following requirements.
Requirements for Project Deliverable 2:
Dynamic web site
 Our dynamic web site must required user interaction in order to do what it is
supposed to do. It must modify either the web page (its content) and/or the style of
our web page based on user interaction and perhaps other events.
HTML web page
 Our HTML web page must be valid HTML5.
 Our HTML web page must have a comment at the top (first line) with our name and
creation date.
 We must use the attribute width and height for the images/videos HTML
elements.
 We must not use the browser to resize our images/videos.
 Our images/videos must fit completely in their container, hence no scrolling required.
 We must use relative URLs for all the files located in our directory structure, i.e., for
all the files we created and the files we downloaded into our directory structure.
 We use absolute URL for all the files not located in our directory structure.
 We cannot use presentation (appearance) HTML elements such as , , ,