COM1008: Web and Internet Technology
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit
COM1008: Web and Internet
Technology
Assignment (80% of module)
1. Introduction
This assignment will test your ability to create a website using Mobile-First Responsive Web Design. It will test your understanding of the 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. You must not use any libraries, such as jQuery, Bootstrap, etc, as we will regard this as use ofunfair means.
2. The Website
You will develop a website for your own fictitious company that creates young children’s web-based games and puzzles. The following is a list of pages that must be included on the web site:
• A home page (named index.html) that welcomes people to the website.
• A page with details of the founders of the fictitious company.
• A news page about the fictitious company.
• A page containing a simple interactive game – this page demonstrates an example of what the company can do.
• A contact page.
• An accessibility page.
Further details about each ofthese pages is given in the following sections.
2.1 Home page
• This page should serve as what is commonly called the ‘splash page’ for the website and should say something positive about the company.
• This page should load quickly, and should be immediately intuitive, as well as being attractive.
• Invent a logo for your fictitious company. (Hint: This logo should appear on every page of your website.)
• It is your choice what to put on the home page, but whatever decision you make it should be part of your planning document.
• This page demonstrates your ability to create an attractive page that loads quickly.
2.2 Founders page
• This should include photographs and short fictitious biographies for three people (one is yourself and the other two are fictitious).
• Consider carefully how you lay out images (photographs) in relation to surrounding text.
• This Web page will demonstrate your ability to lay out text and images together on a page in a clear and structured way.
• (Note: You should make it clear that the profile information is fictitious by including a note to this effect on the page.)
2.3 News page
• This should have at least three fictitious news items. Each fictitious news item should be accompanied by a photograph.
• Pay careful attention to which HTML5 semantic element it would be appropriate to use for news items.
• Be adventurous with the CSS for typographic effects for the news stories.
• This Web page will demonstrate your ability to lay out articles containing text and images on a page in a clear and structured way.
2.4 Game page
• The aim of this page is to demonstrate that you can use JavaScript to control drawing on a Canvas and interaction with that Canvas. You will develop a simple game.
• The user should be able to input their name which will then be used in messages given during the game.
• A button should be available on the web page to start a new game.
• The game should use the following steps:
o Three pictures are displayed at random positions on the canvas area.
o The user is instructed to click on a particular picture, e.g. ‘NAME, click on the picture of the dog’ .
o The game records if the correct picture was chosen.
o This is then repeated. You only need to repeat it twice for this assignment, i.e. three sets ofthree images.
o At the end of the game, the user is told how many correct choices they made, e.g. ‘Well done NAME, you got 3 out of 3 correct’.
• How will you get the user to input their name?
• What will you display on the canvas area before the game starts?
• The three pictures should be randomly chosen from a collection of six pictures. They can be pictures of anything, but think of the kind of things a young child would be learning the vocabulary for. They should be a mixture of four images loaded from files (e.g. pictures of a dog, a cat, etc) and two line drawings produced using the canvas drawing commands (where the line drawings can be simple shapes like triangle and star). What would be the most appropriate data structures to store this data in? (Note: consider copyright for the pictures you use.)
• When the user has made a choice, how will you display the message that tells them if it was a correct choice? Also, how will you move to the next question? Should there be a button to move to the next question?
• When you are displaying the pictures on the canvas, you need to make sure the pictures do not overlap. How big should the pictures be?
• When the user is choosing a picture on the canvas, you will need to determine if the mouse click is on top of (inside) the picture. This could be done as an approximation, e.g. inside a circular or square area that approximates the area the picture covers.
• What messages will you use to tell the user how many choices they got correct and how will you display these messages? Will you add any animated effects to the message?
• You must use only vanilla JavaScript for the assignment. Do not use any JavaScript libraries.
2.5 Contact page
• This should contain (i) the fictitious contact details of the company (e.g. address) and (ii) a form.
• 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.
• (Note: Since the contact details for the company are fictitious, the form should be sent to your University e-mail address.)
• Make sure the form is stylish – you are demonstrating that you can use HTML and CSS to make a form look good.
2.6 Accessibility page
• On this page you should give the accessibility statement for the web site.
• You may have addressed accessibility in a range ofways on the website and you should describe that on this page.
2.7 General requirements
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.
• Each html <head> element must include a meta element identifying you as the author(s). Also include comments to this effect in other file types.
• You must use the HTML5 semantic elements when structuring each webpage, e.g. header, nav, main, (article,) footer. 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? How will your navigation area adapt to each display resolution?
• 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? (Remember, it is mobile first.)
• 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 should consider this 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. 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 ofsource code where the meaning is obvious – use your common sense here.
• 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, as it is produced before the implementation!!
(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:
• Introduction: A brief statement about the general idea behind your design.
• Site Map: draw the site map for your website and justify the structure. The structure should be quite straightforward given the pages described above. Don’t overcomplicate it.
• Accessibility: describe how you address accessibility issues on your website.
• Legal issues: describe how you address legal issues (e.g. copyright) in relation to your website.
• Design mock-ups: You must use a mobile-first approach for the assignment. Create design mock-up 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/
03/building-a-better-responsive-website/;
o The diagram labelled “Normal, Narrow, Mobile” in the Overview section at:
http://webdesignerwall.com/tutorials/respon
You must decide how many breakpoints and tweakpoints to use in your design and write a short justification of this and how each affects the design. (Note: the exact position of the breakpoints could be changed during the development stage, and you may also add more tweakpoints.)
You must 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-nav-
patterns/ and https://cmd-t.webydo.com/from-
simple-to-unusual-a-look-at-navigation-in-web-
design-1057d0baef7band give a justification for the menu system that you will use. Make sure you cite the source of the one you decide you will try and implement yourself.
• Canvas and JavaScript demo: A separate design should be given for this page. How will this work on the mobile version of the site? Accessibility?
In discussing each of the above things, we 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/mobile-
sites/. You should also find other sites to cite.
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 drawing/painting 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.
We recognise that one of the more difficult things you might attempt to implement is a responsive menu that works well on both a small mobile screen and a large desktop. So, the following advice is given for the implementation of the menu part of your work. There are links above to sites that show a range of menu implementations. You should treat these as tutorial sites where you can learn how to implement a menu. You must then implement it yourself with your own code. As part of this, you must also add a comment to your code that states which of those ‘tutorials’ you used to help you write your code.
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: How did you organise the file structure for the website? How did you organise the menu? Discuss each ofthese points.
• Optimisation: For example, have you considered image loading times and what to do about this? 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 to deal with these. Also discuss any other relevant security issues for your website.
• Debugging: Did you make use of html and css validators? What were the results? Can you explain them?
• Testing: Discuss tests on different devices and different browsers and include screenshots of this – 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 also consider accessibility testing and show the results of this with screenshots.
Note: We are 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 screenshots from your own website (e.g. screenshots 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 Blackboard
The assignment handin process is via MOLE, using the assignment link. The three parts of the handin must 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 somewhere like youtube and then put a single image on your website and a link to the youtube video.
• 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 ofthe things asked for in the above requirements. 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). A good diagram embodies attention to detail. The accompanying description should give reasons for choices. Reasoning is more important. Justify accessibility statements and legal issues 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, accessibility considerations, quality;
• HTML and CSS (30%) – HTML includes comments, layout, content of <head> element, use of semantic elements, menu, quality; CSS includes organisation, layout, comments, economic use of properties, RWD, @media, quality;
• JavaScript and canvas demo (25%) – includes comments, layout, completeness, code structure and quality.
7.3 Part 3 (15%)
You must include each ofthe things asked for in the above requirements. 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/comughand
book/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, learn from and 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/comughand
book/general-information (Menu: General
Information, Assessment)
8.3 Code reuse
Do NOT use Bootstrap or jQuery 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.
You may use CSS reset or normalize. If you do, 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 evelop your website (e.g. Visual Studio Code or Notepad++ or similar). You might use more sophisticated tools to support your design process, e.g. drawing design wireframes, but not to develop your code for you. Typically, it is extremely obvious when one ofthese 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 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 publicly-accessible space and thus make it visible to the world.
2021-12-01