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.
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 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.
Project Deliverable 1
In Project Deliverable 1, we …
- 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 users interactions, etc…. We need to be as specific as possible.
- 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.
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.
- 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 order to do Project Deliverable 1, we need to be aware of the following requirements.
Requirements for Project Deliverable 2:
Project Deliverable 3 Will be described in greater detail when we release Project Deliverable 3
In Project Deliverable 3, each student shall peer review a small number of dynamic web sites (i.e., Projects) designed and implemented by fellow students in this course.
When performing the peer review, we shall be given a set of criteria to consider.
Our peer review shall be submitted on Canvas and will be marked.
Due Dates and Submissions
Project Deliverable 1 is due on Thursday, July 16 at 3pm.
Upload the Project-Deliverable-1.pdf file onto Canvas.
For Project Deliverable 1, we do not have to upload files onto our CMPT 165 web server.
Project Deliverable 2 is due on Thursday, July 30 at 3pm.
Project Deliverable 3 is due on Thursday, August 6 at 3pm.
Late Project Deliverables will receive a grade of 0, but they will be marked in order to provide the student with feedback so the student can continue with the project.
This project is worth 3 0 % of our final grade for this course.
Project Deliverable 1 is worth 7% and will be marked out of 10 marks.
Project Deliverable 2 is worth 17%.
Project Deliverable 3 is worth 6%.
When marking Project Deliverable 1, we shall consider a subset of all the requirements pertaining to Project Deliverable 1 and some of the following:
How well thought out is the dynamic web site.
How complete (detailed) and clear is the description of the dynamic web site.
How the layout (design wireframe) of the dynamic web site reflects good visual design principles.
How interesting is the behaviour of the dynamic web site.