Web Development Coursework for the end of term: final website assignmentJava

Java Python Web Development Coursework for the end of term: final website assignment

This assignment consists of two parts – a website and a report on the website design and production. These are marked as one assignment

Brief

Website

Where will you be in 10 years? Your brief is to design and build a responsive website that represents the professional portfolio of a version of you in 2034. This can be as realistic or as fantastical as you like, provided you are explicit about the effects of your decision on the design and execution of your assignment.

Your web site should have 5 pages with different types of material and media, including video and sound clips if relevant.

In addition to the web site, you will include a report as a file called report.html with associated images etc. in your site's base directory. This will explain what you have learned in the process of building your site, where you found your information, and how you have adapted any resources (if applicable). The structure of the report is described in the next section.

You should avoid making use of primarily server side or pre-compiled frameworks such as React or WebPack. If you use CSS templates, for example with Bootstrap, make sure you customise it enough to get credit for your own work – and make clear which parts of the code are yours and which parts come from the template library. You may find it safer to avoid any CSS templates or libraries, but they  are not prohibited provided they are clearly referenced and that you have written your own code as well.

Report

Your report.html should contain the following (in this order):

.    Your name

.    Introduction: What is the essential story being told by your portfolio site? Describe the version of you that it is about. What is the audience you are addressing? What type of structure did you choose to implement?

.    Inspiration: State 3 professional portfolio sites (not advices articles or portfolio templates) that

have inspired you when creating your website. What did you learn from them?

.    Accessibility: State 3 ways in which your site is accessible.

.    Usability: State 3 ways in which you considered the usability of your site.

.    Learning: State 3 things you had to learn or find out to create your site. How did you achieve that?

.    Evaluation I: What aspects of your work do you think were particularly successful? Why?

.    Evaluation II: What aspects of your work could be improved? How might you do things differently another time?

.    Resources: What resources did you use in your work? List any sources of information, libraries, plugins, code or tools (you should also indicate inclusions from other sources within your code using comments)

.    Appendices: Site map (if useful), wireframes and mock-ups

Preferred citation formats

Format for citing code:

[1] Author Initial, Author Surname, 'Title of program/source code' (), Year Published. [Type]. Web address or publisher.

Example:

[1] P. Korponaić, 'Meteor Kitchen examples' (commit 0abcf1c), 2016. [Source code]. https://github.com/perak/kitchen-examples/tree/master/example-minimal

Format for citing online resource:

[1] Author Initial. Author Surname, 'Title', Year Published. [Online]. Available: http://Website URL. [Accessed: 10- Oct- 2013].

Example:

[1] Handlebarsjs.com, 'Handlebars Reference', 2016. [Online]. Available: http://handlebarsjs.com/reference.html. [Accessed: 20- Sep- 2016].

Materials from the web

You can use almost anything you like that you can find on the Web, but you should avoid anything that is not open or out of copyright (e.g. that costs money or requires login or registration).

On your report page (and, wherever possible, in your code) you must describe what you have taken, where you took it from, and what you have done to it.

If you copy-and-paste something almost without change, you must say so clearly and give credit to the source. You will get credit for making imported code fit in with and enhance your own design, for understanding and using complex libraries, or for altering and enhancing material that you have used. Showing you can adapt existing code is particularly valuable.

In order to be clear which material you have written and which you have used from elsewhere you will be expected to provide comprehensive comments within your HTML, CSS and Javascript. files indicating code you have used, code you have adopted and edited and code that you have written.

Marking Criteria

Marking criteria fall under the five broad categories below. The marking criteria for this project are as

follows (each criterion has an equal weighting of 5%):

.    Site (4 criteria = 20%):

o  Navigable 5-page site with working URLs for the site hosted on the static web page system

o  Tidy directory structure and clear file naming

o  Site is accessible

o  Site has good content that matches the briefing document

.    HTML (3 criteria = 15%)

o  HTML is valid and well formed

o  HTML elements are well chosen, with semantic elements and attributes used where possible

o  Rich commenting of HTML

.    CSS (5 criteria = 25%)

o  Use of external stylesheets

o  CSS is used to make an appropriate, aesthetic design

o  Layout is appropriate and interesting, matching the planning goals

o  Website is responsive, with explicit responsive behaviour in stylesheets

o  Rich commenting of CSS

.    JS (4 criteria = 20%)

o  JavaScript. is successfully called and interacts with the DOM

o  JavaScript. has an essential role in some aspects of the website, satisfying planning goals

o  Advanced use is made of JavaScript, or JS library is used in a sophisticated way

o  JS is comprehensively commented

.    Report (4 criteria = 20%)

o  Wireframes are comprehensive and representative. Mockups (and, where relevant, wireframes) reflect the responsive aspects of the site

o  Accessible design

o  Design and planning is good (focus on Introduction, Inspiration, Usability and Learning sections), with clear relationship to briefing document and target audience

o  Reflection on work shows critical and analyticalawareness

SITE. Core functionality of the website as a whole				20 marks
Site 1 Navigable 5-page site with working URLs for the site hosted on the static web page system	No link provided or URL fails. Site has fewer than 5 pages 0 marks	URL works, but dead Web Development Coursework for the end of term: final website assignmentJava links are present or some resources fail to load; or navigation is confusing. 2 marks	URL works and all but a few very minor links and resources work.  Navigation is intuitive. 4 marks	URL and all links and resources load without error. Navigation is intuitive. 5 marks
Site 2 Tidy directory structure and clear file naming	All files in the same directory, directory structure confusing, or file naming confusing 0 marks	Subdirectories for media or CSS files but not both. Or directory structure good, but file naming confusing 2 marks	Subdirectories cleanly separate file type, file names would be clear to a competent newcomer 5 marks
Site 3 Site is accessible	No evidence of accessible code, or accessibility rules incorrectly applied (e.g. alt=”picture1”> 0 marks	Some evidence of accessible code (e.g. alt attributes) 1 marks	Broadly accessible code, but with notable flaws 4 marks	Excellent accessible code 5 marks
Site 4 Site has good content – using media where relevant. Content is integrated to draw a rich, coherent and compelling picture.	Content is poor, minimal or mostly placeholders 0 marks	Content is appropriate in quantity and target (within the scope of a short project). It matches the briefing and planning documents. 2 marks	Content is excellent and well- supported by media. It tells its story well 5 marks
HTML. Building a website HTML skeleton				15 marks
HTML 1 HTML is valid	HTML does not validate as HTML5 0 marks	HTML does not validate as HTML5, but there are very few issues – either previously valid syntax, minor typos or minor issues with external boilerplate code