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 , , ,
