代写COM1008留学生编程、代做Java代写程序、Java编程设计调试

日期：2020-12-09 10:44

COM1008: Web and Internet

Technology

Assignment (80% of module)

Part 1: Planning and Design document (15%)

Part 2: Website (70%)

Part 3: Development and testing document (15%)

Deadline: 3pm, Tuesday 15 December (week 12)

Handin: zip file of all your documents via Blackboard

(MOLE).

1. Introduction

This assignment will test your ability to create a

website using Mobile First Responsive Web Design.

It will test your understanding of stages of creating a

website, as well as your coding skills in HTML5, CSS

and JavaScript.

This is an individual project. The work you submit

must be your own work and not plagiarised.

2. The Website

You will develop a website that promotes yourself and

your degree programme. The following is a list of the

requirements for this web site:

? A home page (named index.html) that welcomes

people to the website.

o This should include a photograph of you (or a

cartoon picture of you or some other abstract

picture) and some general information about

you and your website, for example it could

include another image related to you to give

readers a flavour of what you do (e.g. a screen

shot of your work on your degree, or

something to do with a hobby, or a university

club that you belong to).

o Question: What will you include on every page

of your Website that identifies it is about you?

A company would include a logo on every

page, but how will you do it?

o It is your choice what to put on the home page,

but whatever decision you make it should be

part of your planning document.

o This page demonstrates your ability to create

an attractive page that loads quickly.

? A page that focuses on your degree programme.

o This should give (i) an overview of your

degree programme and (ii) a brief overview of

each of the modules you are studying in year 1

– a paragraph and a picture for each (an

illustration from the module, e.g. a screen shot

of your work, or something else that

demonstrates what the module is about).

o This Web page will demonstrate your ability to

lay out text and images together on a page in a

clear and structured way.

o As part of the design process, you should

consider what other information would be

useful here, e.g. links to official information

about the modules and your degree

programme.

? A pictorial quiz page

o This should use three images (e.g. photographs

or sketches or screenshots or anything that is

graphical) related to your degree programme

or the Department or the University in general

and ask the user something about each image.

Be creative.

o You can choose whichever way you like to

reveal the answer. It could be a multiple choice

quiz and then press a button to reveal the

correct answer, or an answer could be revealed

when the user ‘hovers’ over something on the

page (e.g. a piece of text saying ‘Reveal

Answer’).

o JavaScript can be used for revealing answers.

o There is no need to record the score of the user.

o This page tests your ability to use some

advanced CSS to make a page attractive and

fun.

? A page that demonstrates the JavaScript and

Canvas work you have learnt on com1008.

o The aim of this page is to demonstrate that you

can use JavaScript to control drawing on a

Canvas and interaction with that Canvas.

o The topic of the page is Data Visualisation.

Your task is to create and display some data in

a range of ways. The data should be the time

spent on three activities related to you and/or

your degree programme each day for a period

of seven days. This could be real data, e.g. how

much time per day you spend on three different

activities such as university work, using your

phone and exercise, or time spent per day on

three of your taught modules. You choose the

three categories. It is fine if you want to invent

some realistic data, but real amounts would be

more authentic. The amounts should vary each

day so as to make the visualisation more

interesting.

o The page should feature a table that presents

the data and a single canvas where the data can

be displayed in three different ways. There

should be buttons on the page that can be used

to switch between the three different

visualisations.

2

o One visualisation should be a pie chart for the

total time in the whole week for each of the

three activities. One visualisation should be a

bar chart that shows each day’s data for the

whole week (see https://datavizcatalogue.com/

for different kinds of bar chart to choose from).

The third visualisation is your choice – this

gives you a chance to show off your JavaScript

prowess.

o In addition to the buttons to switch between

visualisations, there should be some buttons to

change between three different colour scales

for each visualisation.

o You must use only vanilla JavaScript. Do

not use any JavaScript libraries such as D3.js.

? A contact page

o This should contain (i) your contact details

(Privacy: put the Department’s address only,

not your personal address, and do not include

a phone number), and (ii) a form.

o The form is for users to send comments to you

via your e-mail address. A user should input

their e-mail address in a text box in the form

and input their comments in another text area

on the form. The form should also include a

button, which when clicked by the user, sends

the contents of the two text areas to your

University e-mail address.

o Make sure the form is stylish – you are

demonstrating that you can use HTML and

CSS to make a form look good.

? An accessibility page

o On this page you should give the accessibility

statement for the web site. You may have

addressed accessibility in a number of ways on

the website and, if so, you should state that on

this page.

You must satisfy the following when constructing

your website:

? The overall website design must be consistent.

? The website must be legible, e.g. is there good

contrast between text and background?

? The website must take into account accessibility

issues.

? The <head> element must include an element

identifying the author(s).

? You must use the HTML5 semantic elements

when structuring each webpage. These must then

be styled in the relevant stylesheet(s).

? A responsive navigation area must be included for

the Web site. What will be the words or phrases

used as the links to each page? How will you deal

with both a small mobile screen and a large

desktop?

? Appearance must be controlled by the linked

stylesheet(s), not by inline styles.

? Use of @media queries – are these used in a

structured and controlled way?

? Economic use of properties in a stylesheet, where

appropriate, e.g. margin a b c d, rather than setting

the top, right, bottom and left margin separately

? Note: For the JavaScript Canvas demo page, you

may need an extra stylesheet for any specific

effects you use on that page. You may also need

an extra stylesheet for any specific effects on the

quiz page. You should consider these points as

part of your design document.

? All source code should be well organised and

neatly laid out, e.g. using indentation.

? You must include appropriate comments in your

source code. As an example, a comment might

describe the purpose and reasons for using a

particular CSS rule or use of a particular HTML

element rather than a different element. We will

look at these comments carefully since the

comment text will be unique to you and reflect

your understanding. However, do not comment

on simple pieces of source code where the

meaning is obvious – use your common sense

here. For the HTML file, remember to include a

meta tag in the <head> element that statesthat you

are the author. Also include comments to this

effect in other files.

? Note: If you want to use videos on your website,

then put them on youtube and just put a single

image and a link to the youtube video on your web

site. Do not include the video on the web site

itself, as this will make it impossible to hand in

the final work – see later.

3. Part 1: Planning and Design

The Word or pdf document for this part should be

between 500 and 1000 words long, and may include

as many images as you wish to use.

You must create a document that describes how you

planned and designed the website using ‘Mobile First

Responsive Web Design’. This document should be

completed before implementation starts. It should not

include screen shots of your implementation.

3

(Note: Requirements are given in section 2 above, so

you don’t need to write about this.)

You must include the following in separate headed

sections:

? General ethos: A brief statement about the general

ethos behind your design and why it suits the

requirements. Is it formal? is it fun? does it use a

particular colour palette? was it inspired by

another site (or sites)?

? Site Map: draw the site map for your website and

justify the structure. Don’t just describe the

diagram. Reasons for its structure are more

important.

? Accessibility: describe how you address

accessibility issues on your website.

? Legal issues: describe how you address issues

such as copyright in relation to your website.

? Design mock-ups: You must use a mobile-first

approach for the assignment. Create design mockup

diagrams that show, as a minimum, the mobile

design and the desktop design. You could use

wireframes for this, paint software (e.g.

Photoshop) or hand-drawn sketches (that are then

scanned in) to produce diagrams similar to the

following examples:

o The diagram labelled “The “extreme”

versions of the new website design” at:

https://www.smashingmagazine.com/2013/0

3/building-a-better-responsive-website/;

o The diagram labelled “Normal, Narrow,

Mobile” in the Overview section at:

http://webdesignerwall.com/tutorials/respons

ive-design-with-css3-mediaqueries/comment-page-1

You must decide how many breakpoints to use in

your design and write a short justification of this.

(Note: the exact position of the breakpoints could

be changed during the development stage, and

you may also add a few tweakpoints.)

Justify your design decisions. (Note: You do not

have to give designs for every page if some of the

pages are very similar. Just say that page X is

similar to page Y.)

? Menu System: A consideration of the menu

system that is being used, e.g. consider

http://responsivenavigation.net/index.html and

http://bradfrost.com/blog/web/responsive-navpatterns/

and https://cmd-t.webydo.com/fromsimple-to-unusual-a-look-at-navigation-in-webdesign-1057d0baef7b

and give a justification for

the menu system you decide to use.

? Canvas and JavaScript demo: A separate design

should be given for this page. How will this work

on the mobile version of the site? Will it consider

‘accessibility’? What data will be visualised?

What visualisations will be used? How will the

buttons and the canvas be laid out?

In discussing each of the above things, I expect you

to justify your decisions using references to relevant

websites. As an example, the following website

should be referred to:

https://developers.google.com/webmasters/mobilesites/.

You should also find other sites to refer to.

Assume you are using up-to-date browsers. Do not

consider old browsers.

You should include plenty of diagrams in your

document (and each figure should be numbered and

have a caption), where the pictures can be general

illustrations (e.g. a design hierarchy or a page layout

diagram). Pictures can be hand-drawn and scanned in,

or can be produced using appropriate software tools.

Your references list and words in diagrams do not

count towards the word limit.

Surprise us with your own comments on different

aspects of the process. The aim of this document is to

make sure you have thought about the process of

planning and designing a website and carried out the

process in a structured way.

4. Part 2: The Website

The Website should include all the requirements

given in Section 2 and should match your design

document. If you make any changes to the design

during development, these can be discussed in Part 3.

5. Part 3: The development and testing

document

The Word or pdf document for this part should be

between 500 and 1000 words long, and may include

as many images as you wish to use.

The development and testing document should cover

the following, each in headed sections:

? Changes: Has the design changed? If so, briefly

describe the changes and why you made them.

? Organisation: Did you create templates for the

HTML and CSS? If so, why, and how did you use

them? How did you organise the file structure for

the website? Discuss the debugging tools you

have used. How did you organise the menu? Use

of JavaScript? Discuss each of these points.

4

? Optimisation: Have you considered optimisations

(e.g. image loading times)? Discuss.

? Security: For the contact page, which contains a

form for users to complete, discuss any security

issues that you think are relevant and how you

deal with these. Also discuss any other relevant

security issues for your website (e.g. http or

https?).

? Debugging: Did you make use of html and css

validators? What were the results? Can you

explain them?

? Testing: Tests on different devices and different

browsers – you only need to consider up-to-date

versions of web browsers in your testing. For the

purposes of this assignment, it is acceptable to use

emulation tools for testing (e.g. the Responsive

Design Mode available in Firefox or Chrome’s

Device Mode). You must consider accessibility

testing and show the results of this.

Note: I am not including ‘delivery’ as part of the

assignment, since for you that is just handing the

assignment in through Blackboard (MOLE).

You should include plenty of diagrams in your

document (and each figure should be numbered and

have a caption), where the pictures can be general

illustrations, as well as screen shots from your own

website (e.g. screen shots of tests on different

devices). Your references list and words in diagrams

do not count towards the word limit.

Surprise us with your own comments on different

aspects of the process. The aim of this document is to

make sure you have thought about the process of

developing and testing a website and carried out the

process in a structured way.

6. Handin via MOLE

The assignment handin process is via MOLE, using

the assignment link. The three parts of the handin

should be put in a single zip file called

name_com1008.zip, where name is your name, e.g.

JaneSmith_com1008.zip. This zip file should contain

the following:

? Part 1. The planning and design document. This

should be a Word document called design.doc or

a pdf document called design.pdf in a subfolder

called documentation.

? Part 2. This is the website itself. The home page

of the website must be index.html, so that it is

easy for us to identify which file to load first.

Make sure you include every file, including all

relevant images. (Remember: using relative

addresses on your website for the links between

pages and resource files such as images is

important so that the website can be easily copied

onto a different server.) Do not include videos, as

including these will create a large zip file, which

will crash Blackboard, given the number of

students handing in work – there is previous

experience of this and it wasn’t pretty. If you want

to use videos, then put them on youtube and just

put a single image and a link to the youtube video

on your web site.

? Part 3. The development and testing document.

This should be a Word document called

developandtest.doc or a pdf document called

developandtest.pdf in a subfolder called

documentation.

Remember to identify in each and every separate file

that you wrote the code.

When you have created the zip file, you should check

that it has been created correctly by unzipping it again

in a different folder on your computer and checking

that the pages open and work. There have been cases

in previous years where the zip file was corrupt or the

file structure had been flattened. So please check your

zip file is correct before you hand it in. Also, please

check that the correct zip file has been uploaded to

Blackboard.

7. Marking

7.1 Part 1 (15%)

You must include each of the things asked for in the

above specification. Justifications should be given for

each part, but these should be brief as there is a

maximum word limit. Use diagrams to help explain

things (as these do not count towards the word limit).

The accompanying description should give reasons

for choices, e.g. the discussion of the site map should

not describe what the site map diagram already

shows. Reasoning is more important. Justify

accessibility statements by citing references. The

design mock-ups should be neat and reasons for the

breakpoint(s) (and, if used, tweakpoint(s)) given.

7.2 Part 2 (70%)

The majority of marks are for producing a website

that fulfils all the requirements. Read them carefully.

? General (15%) – includes look & feel, RWD

behaviour, content, use on different browsers;

5

? HTML and CSS (30%) – HTML includes

comments, layout, content of <head> element,

semantic elements, menu, validation; CSS

includes organisation, layout, comments,

economic use of properties, RWD, @media,

validation;

? JavaScript and canvas demo (and any JavaScript

on the quiz page) (25%) – includes comments,

layout, code structure and quality, completeness,

creativity.

7.3 Part 3 (15%)

You must include each of the things asked for in the

above specification. Justifications should be given for

each part, but these should be brief as there is a

maximum word limit. Use diagrams to help explain

things (as these do not count towards the word limit).

8. Practical considerations

8.1 Unfair means

The standard Department rules for use of unfair

means will be applied, as described in the

undergraduate student handbook:

https://sites.google.com/sheffield.ac.uk/comughandb

ook/general-information (Menu: General

Information, Assessment)

We are aware that there are lots of HTML, CSS and

JavaScript tutorial sites on the Web. Do not copy

them, since that would be plagiarism. Instead, be

inspired by them.

8.2 Late handin

Standard Department rules will be used for late

handin – see:

https://sites.google.com/sheffield.ac.uk/comughandb

ook/general-information (Menu: General

Information, Assessment)

8.3 Code reuse

Do NOT use Bootstrap or any other similar

frameworks/libraries for creating web sites.

You may reuse HTML, CSS and JavaScript code that

we wrote that is given in lecture notes, as long as it is

not code that is from another source that is being used

to illustrate something – we may have used it to

illustrate something, but you will not have permission

to reuse it. If there is any doubt, assume you cannot

reuse it.

If you are using CSS reset or normalize, you need to

make sure you comply with the license for each of

those and make clear that they are not your work.

Include any attribution in the relevant files that you

use.

8.4 Text editor

There are plenty of Web design tools available. The

expectation for this assignment is that you will use a

code editing environment to develop your website

(e.g. Visual Studio Code or Notepad++ or similar).

You might use more sophisticated tools to support

your design process, but not to develop your code for

you – typically, it is extremely obvious when one of

these sophisticated tools has been used in code

development as the files created contain lots of

extraneous HTML and CSS, rather than only

including what is required. As part of the deliverables

you will have noted that we expect code that contains

comments. These will demonstrate whether or not

you understand the more complex bits of HTML, CSS

and JavaScript that you have produced.

8.5 Relative links

Make sure you use relative URLs in your HTML code

when referring to your own resources or to other files

that you are developing – the reasons for this are

explained in lectures. Links to relevant external URLs

should still be given in full, e.g. http://www.w3.org/.

8.6 Keeping your work private

Your website should be developed on your own

computer, not in a publicly-accessible folder.

When your work has been marked and returned to

you: you could copy your Web site to a publiclyaccessible

space and thus make it visible to the world,

e.g. using GitHub Pages.