辅导COM1008留学生编程、写作Java实验程序、Java编程设计调试

” 辅导COM1008留学生编程、写作Java实验程序、Java编程设计调试COM1008: Web and InternetTechnologyAssignment (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. IntroductionThis assignment will test your ability to create awebsite using Mobile First Responsive Web Design.It will test your understanding of stages of creating awebsite, as Well as your coding skills in HTML5, CSSand JavaScript.This is an individual project. The work you submitmust be your own work and not plagiarised.2. The WebsiteYou will develop a website that promotes yourself andyour degree programme. The following is a list of therequirements for this web site: A home page (named index.html) that welcomespeople to the website.o This Should include a photograph of you (or acartoon picture of you or some other abstractpicture) and Some general information aboutyou and your website, for example it couldinclude another image related to you to givereaders a flavour of what you do (e.g. a screenshot of your work on your degree, orsomething to do with a hobby, or a universityclub that you belong to).o Question: What will you include on every pageof your Website that identifies it is about you?A company would include a logo on everypage, 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 bepart of your planning document.o This page demonstrates your ability to createan attractive page that loads quickly. A page that focuses on your degree programme.o This Should give (i) an overview of yourdegree programme and (ii) a brief overview ofeach of the modules you are studying in year 1 a paragraph and a picture for each (anillustration from the module, e.g. a screen shotof your work, or something else thatdemonstrates what the module is about).o This Web page will demonstrate your ability tolay out text and images together on a page in aclear and structured way.o As part Of the design process, you shouldconsider what other information would beuseful here, e.g. links to official informationabout the modules and your degreeprogramme. A pictorial quiz pageo This should use three images (e.g. photographsor sketches or screenshots or anything that isgraphical) related to your degree programmeor the Department or the University in generaland ask the user something about each image.Be creative.o You can choose whichever way you like toreveal the answer. It could be a multiple choicequiz and then press a button to reveal thecorrect answer, or an answer could be revealedwhen the user hovers over something on thepage (e.g. a piece of text saying RevealAnswer).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 someadvanced CSS to make a page attractive andfun. A page that demonstrates the JavaScript andCanvas Work you have learnt on com1008.o The aim of this page is to demonstrate that youcan use JavaScript to control drawing on aCanvas and interaction with that Canvas.o The topic of the page is Data Visualisation.Your task is to create and display some data ina range of ways. The data should be the timespent on three activities related to you and/oryour degree programme each day for a periodof seven days. This could be real data, e.g. howmuch time per Day you spend on three differentactivities such as university work, using yourphone and exercise, or time spent per day onthree of your taught modules. You choose thethree categories. It is fine if you want to inventsome realistic Data, but real amounts would bemore authentic. The amounts should vary eachday so as to make the visualisation moreinteresting.o The page should feature a table that presentsthe data and a single canvas where the data canbe displayed in three different ways. Thereshould be buttons on the page that can be usedto switch between the three differentvisualisations.2o One visualisation should be a pie chart for thetotal time in the whole week for each of thethree activities. One visualisation should be abar chart that shows each days data for thewhole week (see httpss://datavizcatalogue.com/for different kinds of bar chart to choose from).The third visualisation is your choice thisgives you a chance to show off your JavaScriptprowess.o In addition to the buttons to switch betweenvisualisations, there should be some buttons tochange between three different colour scalesfor each Visualisation.o You must use only vanilla JavaScript. Donot use any JavaScript libraries such as D3.js. A contact pageo This should contain (i) your contact details(Privacy: put the Departments address only,not your personal address, and do not includea phone number), and (ii) a form.o The form is for users to send comments to youvia your e-mail address. A user should inputtheir e-mail address in a text box in the formand input their comments in another text areaon the form. The form should also include abutton, which when clicked by the user, sendsthe contents of the two text areas to yourUniversity e-mail address.o Make sure the form is stylish you aredemonstrating that you can use HTML andCSS to make a form look good. An accessibility pageo On this page you should give the accessibilitystatement for the web site. You may haveaddressed accessibility in a number of ways onthe website and, if so, you should state that onthis page.You must Satisfy the following when constructingyour website: The overall website design must be consistent. The website must be legible, e.g. is there goodcontrast between text and background? The website must take into account accessibilityissues. The head element must include an elementidentifying the author(s). You must use the HTML5 semantic elementswhen structuring each webpage. These must thenbe styled in the relevant stylesheet(s). A responsive navigation area must be included forthe Web site. What will be the words or phrasesused as the links to each page? How will you dealwith both a small mobile screen and a largedesktop? Appearance must be controlled by the linkedstylesheet(s), not by inline styles. Use of @media queries are these used in astructured and controlled way? Economic Use of properties in a stylesheet, whereappropriate, e.g. margin a b c d, rather than settingthe top, right, bottom and left margin separately Note: For the JavaScript Canvas demo page, youmay need an extra stylesheet for any specificeffects you use on that page. You may also needan extra stylesheet for any specific effects on thequiz page. You should consider these points aspart of your design document. All source code should be well organised andneatly laid out, e.g. using indentation. You must include appropriate comments in yoursource code. As an example, a comment mightdescribe the purpose and reasons for using aparticular CSS rule or use of a particular HTMLelement rather than a different element. We willlook at these comments carefully since thecomment text will be unique to you and reflectyour understanding. However, do not commenton simple Pieces of source code where themeaning is obvious use your common sensehere. For the HTML file, remember to include ameta tag in the head element that statesthat youare the author. Also include comments to thiseffect in other files. Note: If you want to use videos on your website,then put them on youtube and just put a singleimage and a link to the youtube video on your website. Do not include the video on the web siteitself, as this will make it impossible to hand inthe final work see later.3. Part 1: Planning and DesignThe Word or pdf document for this part should bebetween 500 and 1000 words long, and may includeas many images as you wish to use.You must create a document that describes how youplanned and Designed the website using Mobile FirstResponsive Web Design. This document should becompleted before implementation starts. It should notinclude screen shots of your implementation.3(Note: Requirements are given in section 2 above, soyou dont need to write about this.)You must include the following in separate headedsections: General ethos: A brief statement about the generalethos behind your design and why it suits therequirements. Is it formal? is it fun? does it use aparticular colour palette? was it inspired byanother site (or sites)? Site Map: draw the site map for your website andjustify the structure. Dont just describe thediagram. Reasons for its structure are moreimportant. Accessibility: describe how you addressaccessibility issues on your website. Legal issues: describe how you address issuessuch as copyright in relation to your website. Design mock-ups: You must use a mobile-firstapproach For the assignment. Create design mockupdiagrams that show, as a minimum, the mobiledesign and the desktop design. You could usewireframes for this, paint software (e.g.Photoshop) or hand-drawn sketches (that are thenscanned in) to produce diagrams similar to thefollowing examples:o The diagram labelled The extremeversions of the new website design at: httpss://www.smashingmagazine.com/2013/03/building-a-better-responsive-website/;o The diagram labelled Normal, Narrow,Mobile in the Overview section at: https://webdesignerwall.com/tutorials/responsive-design-with-css3-mediaqueries/comment-page-1You must decide how many breakpoints to use inyour design and write a short justification of this.(Note: the exact position of the breakpoints couldbe changed during the development stage, andyou may also add a few tweakpoints.)Justify your design decisions. (Note: You do nothave to give designs for every page if some of thepages are very similar. Just say that page X issimilar to Page Y.) Menu System: A consideration of the menusystem that is being used, e.g. consider https://responsivenavigation.net/index.html and https://bradfrost.com/blog/web/responsive-navpatterns/and httpss://cmd-t.webydo.com/fromsimple-to-unusual-a-look-at-navigation-in-webdesign-1057d0baef7band give a justification forthe menu system you decide to use. Canvas and JavaScript demo: A separate designshould be given for this page. How will this workon the mobile version of the site? Will it consideraccessibility? What data will be visualised?What visualisations will be used? How will thebuttons and the canvas be laid out?In discussing each of the above things, I expect youto justify your decisions using references to relevantwebsites. As an example, the following websiteshould be referred to: httpss://developers.google.com/webmasters/mobilesites/.You should also find other sites to refer to.Assume you are using up-to-date browsers. Do notconsider old browsers.You should include plenty of diagrams in yourdocument (and each figure should be numbered andhave a caption), where the pictures can be generalillustrations (e.g. a design hierarchy or a page layoutdiagram). Pictures can be hand-drawn and scanned in,or can be produced using appropriate software tools.Your references list and words in diagrams do notcount towards the word limit.Surprise us With your own comments on differentaspects of the process. The aim of this document is tomake sure you have thought about the process ofplanning and designing a website and carried out theprocess in a structured way.4. Part 2: The WebsiteThe Website should include all the requirementsgiven in Section 2 and should match your designdocument. If you make any changes to the designduring development, these can be discussed in Part 3.5. Part 3: The development and testingdocumentThe Word or pdf document for this part should bebetween 500 and 1000 words long, and may includeas many images as you wish to use.The development and testing document should coverthe following, Each in headed sections: Changes: Has the design changed? If so, brieflydescribe the changes and why you made them. Organisation: Did you create templates for theHTML and CSS? If so, why, and how did you usethem? How did you organise the file structure forthe website? Discuss the debugging tools youhave used. How did you organise the menu? Useof 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 aform for users to complete, discuss any securityissues that you think are relevant and how youdeal with these. Also discuss any other relevantsecurity issues for your website (e.g. https or httpss?). Debugging: Did you make use of html and cssvalidators? What were the results? Can youexplain them? Testing: Tests on different devices and differentbrowsers you only need to consider up-to-dateversions of web browsers in your testing. For thepurposes of this assignment, it is acceptable to useemulation tools for testing (e.g. the ResponsiveDesign Mode available in Firefox or ChromesDevice Mode). You must consider accessibilitytesting and show the results of this.Note: I am not including delivery as part of theassignment, since for you that is just handing theassignment in through Blackboard (MOLE).You should include plenty of diagrams in yourdocument (and each figure should be numbered andhave a caption), where the pictures can be generalillustrations, as well as screen shots from your ownwebsite (e.g. screen shots of tests on differentdevices). Your References list and words in diagramsdo not count towards the word limit.Surprise us with your own comments on differentaspects of the process. The aim of this document is tomake sure you have thought about the process ofdeveloping and testing a website and carried out theprocess in a structured way.6. Handin via MOLEThe assignment handin process is via MOLE, usingthe assignment link. The three parts of the handinshould be put in a single zip file calledname_com1008.zip, where name is your name, e.g.JaneSmith_com1008.zip. This zip file should containthe following: Part 1. The planning and design document. Thisshould be a Word document called design.doc ora pdf document called design.pdf in a subfoldercalled documentation. Part 2. This is the Website itself. The home pageof the website must be index.html, so that it iseasy for us to identify which file to load first.Make sure you include every file, including allrelevant images. (Remember: using relativeaddresses on your website for the links betweenpages and resource files such as images isimportant so that the website can be easily copiedonto a different server.) Do not include videos, asincluding these will create a large zip file, whichwill crash Blackboard, given the number ofstudents handing in work there is previousexperience of this and it wasnt pretty. If you wantto use videos, then put them on youtube and justput a single image and a link to the youtube videoon your web site. Part 3. The development and testing document.This should be a Word document calleddevelopandtest.doc or a pdf document calleddevelopandtest.pdf in a subfolder calleddocumentation.Remember to identify in each and every separate filethat you wrote the code.When you have created the zip file, you should checkthat it has been created correctly by unzipping it againin a different folder on your computer and checkingthat the pages open and work. There have been casesin previous years where the zip file was corrupt or thefile structure had been flattened. So please check yourzip file is correct before you hand it in. Also, pleasecheck that the correct zip file has been uploaded toBlackboard.7. Marking7.1 Part 1 (15%)You must include each of the things asked for in theabove specification. Justifications should be given foreach part, but these should be brief as there is amaximum word limit. Use diagrams to help explainthings (as these do not count towards the word limit).The accompanying description should give reasonsfor choices, e.g. the discussion of the site map shouldnot describe What the site map diagram alreadyshows. Reasoning is more important. Justifyaccessibility statements by citing references. Thedesign mock-ups should be neat and reasons for thebreakpoint(s) (and, if used, tweakpoint(s)) given.7.2 Part 2 (70%)The majority of marks are for producing a websitethat fulfils all the requirements. Read them carefully. General (15%) includes look feel, RWDbehaviour, content, use on different browsers;5 HTML and CSS (30%) HTML includescomments, layout, content of head element,semantic elements, menu, validation; CSSincludes organisation, layout, comments,economic use of properties, RWD, @media,validation; JavaScript and canvas demo (and any JavaScripton 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 theabove specification. Justifications should be given foreach part, but these should be brief as there is amaximum word limit. Use diagrams to help explainthings (as these do not count towards the word limit).8. Practical considerations8.1 Unfair meansThe standard Department rules for use of unfairmeans will be applied, as described in theundergraduate student handbook: httpss://sites.google.com/sheffield.ac.uk/comughandbook/general-information (Menu: GeneralInformation, Assessment)We are aware That there are lots of HTML, CSS andJavaScript tutorial sites on the Web. Do not copythem, since that would be plagiarism. Instead, beinspired by them.8.2 Late handinStandard Department rules will be used for latehandin see: httpss://sites.google.com/sheffield.ac.uk/comughandbook/general-information (Menu: GeneralInformation, Assessment)8.3 Code reuseDo NOT use Bootstrap or any other similarframeworks/libraries for creating web sites.You may reuse HTML, CSS and JavaScript code thatwe wrote that is given in lecture notes, as long as it isnot code that is from another source that is being usedto illustrate something we may have used it toillustrate something, but you will not have permissionto reuse it. If there is any doubt, assume you cannotreuse it.If you are using CSS reset or normalize, you need tomake sure you comply with the license for each ofthose and Make clear that they are not your work.Include any attribution in the relevant files that youuse.8.4 Text editorThere are plenty of Web design tools available. Theexpectation for this assignment is that you will use acode editing environment to develop your website(e.g. Visual Studio Code or Notepad++ or similar).You might use more sophisticated tools to supportyour design process, but not to develop your code foryou typically, it is extremely obvious when one ofthese sophisticated tools has been used in codedevelopment as the files created contain lots ofextraneous HTML and CSS, rather than onlyincluding what is required. As part of the deliverablesyou will have noted that we expect code that containscomments. These will demonstrate whether or notyou understand the more complex bits of HTML, CSSand JavaScript that you have produced.8.5 Relative linksMake sure you use relative URLs in your HTML codewhen referring to your own resources or to other filesthat you are Developing the reasons for this areexplained in lectures. Links to relevant external URLsshould still be given in full, e.g. https://www.w3.org/.8.6 Keeping your work privateYour website Should be developed on your owncomputer, not in a publicly-accessible folder.When your work has been marked and returned toyou: you could copy your Web site to a publiclyaccessiblespace and thus make it visible to the world,e.g. using GitHub Pages.如有需要，请加QQ：99515681 或邮箱：99515681@qq.com

“