Project: Dynamic HTML Web Site
web作业 | express代做 | javascript | project | html代做 | 代写css – 这个题目属于一个express的代写任务, 涉及了web/express/javascript/html/css等代写方面, 这个项目是project代写的代写题目
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.
Project Deliverable 1
In Project Deliverable 1, we …
- 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 cant 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.
- 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 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 <b>, <i>, <u>,
<style> and the style attribute.
We cannot use graphical web page editors (web authoring tools) like DreamWeaver
to create our web site.
Any file that we name (our HTML web page, our external CSS stylesheet, our
external JavaScript program, images, videos, etc...) must be named descriptively, i.e.,
its name must describe its purpose/topic/content.
CSS stylesheet
Our CSS stylesheet must be valid.
Our external CSS stylesheet must have a comment at the top (first line) with our
name and creation date.
Our CSS stylesheet must style our dynamic web site in an aesthetically pleasing
fashion, reflecting good visual design principles.
We must link our external CSS stylesheet as indicated in our lectures and demos:
with the HTML elements <link> and with the appropriate attributes, again as
indicated in our lectures and demos.
JavaScript
Our JavaScript program must be error free.
Our external JavaScript program must have a comment at the top (first line) with our
name and creation date.
Our JavaScript program must have about 50 lines of code.
Our JavaScript must use variables, functions (that we have written), set at least one
event listener and event handler.
o Name of variables/constants/functions must be descriptive, describing their
purpose.
We must link our external JavaScript program as indicated in our lectures and
demos: with the HTML elements <script ... defer>.
Testing
We must test our dynamic web site and make sure it works as expected (and
described in our Project Deliverable 1) by visiting it.
Submission
We must construct the appropriate directory structure (directory structure we have
discussed and created all along in this course) onto our workspace on our CMPT 165
web server.
We must upload our completed dynamic web site onto our workspace on our CMPT
165 web server, placing files in their appropriate directory (folder).
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.
Marking scheme
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.