COM1008: Web and Internet Technology Assignment (80% of module) Lecturers: Steve Maddock and Andrew Stratton
[email protected],
[email protected] 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 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 element that states that 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 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/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-media- queries/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-nav- patterns/ and https://cmd-t.webydo.com/from- simple-to-unusual-a-look-at-navigation-in-web- design-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/mobile- sites/. 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 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 publicly- accessible space and thus make it visible to the world, e.g. using GitHub Pages.
欢迎咨询51作业君
