标签：ati tutorial rac hiera http mis welcome change iss
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.
代写COM1008留学生编程
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.
如有需要，请加QQ：99515681 或邮箱：99515681@qq.com 微信：codehelp
标签：ati tutorial rac hiera http mis welcome change iss
原文地址：https://www.cnblogs.com/weibojava/p/14140425.html
