Assignment 2: Website Development

Size: px

Start display at page:

Download "Assignment 2: Website Development"

Valerie Potter
5 years ago
Views:

1 Assignment 2: Website Development Overview In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1. You should avoid the mistakes made by the competition from your competitive analysis. The requirements for building the website are listed further below. Timelines and Expectations Percentage Value of Task: 20% Type A Due: Week 11, Friday 5pm Minimum time expectation: 20 hours Learning Outcomes Assessed The following course learning outcomes are assessed by completing this assessment: Knowledge: Recognise the importance of user analysis, content organisation, interface design, interface usability and the accessibility issues associated with multimedia and web design; Skills: Application: Values: Identify, explain and apply the design principles that underlie good multimedia and webpage design, from both a visual & content design perspective. Demonstrate the appropriate use of visual and content design tools, and multimedia and web authoring software; Develop a sophisticated web site from scratch, using information gathering and design techniques. Select appropriate design principles to design multimedia products and web pages that are align with project expectations; Operate appropriate software packages to build multimedia products and web pages that are align with project expectations. Appreciate ethical behaviour in relation to multimedia and web page design, in particular issues related to copyright. CRICOS Provider No D Page 1 of 5

2 Assessment Details Semester Overview Assessments Overview This semester you are required to design and develop a Personal Website that is: Small, unique and professional in appearance; About yourself and your career ambitions; A portfolio of your achievements; and A showcase to future potential employers. This task runs the entire semester and is broken down into two assignments and one in-class assessment. Early Intervention Task Assignment 1 Assignment 2 Competitive Analysis Week 4 In Lab Assessment Design Document Due Fri 5pm Week 7 Website Development Due Fri 5pm Week 11 Assignment 2 Details In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1. You should avoid the mistakes made by the competition from your competitive analysis. The requirements for building the website are listed below. All of the labs this semester are designed to help you with this assignment; learning HTML, CSS and JavaScript. Do not discount their potential to assist with parts of developing this website. For an overview of what each lab contains, please click on Moodle s Content section at the top of this Moodle course. and are two great websites to keep open while developing a website, to see examples of HTML and CSS code. Website Overall Requirements This website has a number of requirements which are detailed in the table below; you should adhere to these requirements when working on this assignment. General Requirements You must not use any existing templates, or frameworks that assist such as bootstrap. You are expected to create your website by yourself. (Lab and lecture materials can be used to help you with your website, BUT your design should be your own, not the lab exercise design.) You may not develop the website using server-side scripting languages, such as PHP, ASP, etc. Your design should focus on design rules learned during this course such as o Rules of good visual design; o Usability guidelines related to Colour, Typography, Placement of objects, Readability and Balance. o A solid understanding of the use of other elements such as; contrast, white space, layout, focal point, alignment, proximity, etc. All text should follow the rules of writing for the web, including appropriately chunked content, use of Plain Language and the Inverted Pyramid style of writing. Images, sound, and other media file sizes optimised for download and display. Well-designed unique and creative websites will be awarded appropriately. CRICOS Provider No D Page 2 of 5

3 HTML All html files must begin with the <!DOCTYPE html> declaration, to indicate HTML5 documents. The structure of your website should be built using HTML5 tags styled with CSS where applicable: o <header>, <nav>, <section>, <article>, <aside>, <footer>, <figure>, <figcaption> o HTML <div> s can be used for other structural elements. o Do not use a <div> where a standard semantic tag would be appropriate, such as for example the <h1> to <h6> tags for headings. o HTML <table>s should be avoided for structure. o Use id and class where necessary. Any HTML <form> used on the site should: o Be well-designed and styled with CSS, and their intent must be clear; o NOT use PHP or other server side technologies. Functionality of such forms may therefore be limited, and only have partial functionality (prototype stage), but should be fully designed, and; o Contain data validation, error messages, user feedback etc. (either in a pop-up window, or simple dialog boxes written with JavaScript) CSS All content should be formatted and styled using an external cascading stylesheet (CSS). o This is to keep content and style strictly separated. o A max of 2 external stylesheets are allowed. ITECH2106 students need to incorporate at least TWO of the CSS3 styles below: ITECH6106 students need to incorporate any SIX of the CSS3 styles below: o CSS3 transitions o CSS3 transforms (scale, skew, and/or rotate) o CSS3 rounded corners o CSS3 embedded fonts - or use Google / Adobe Fonts API o CSS3 multi-column o CSS3 shadows o CSS3 gradients JavaScript / jquery JavaScript, jquery and their libraries are allowed to be used (and some image galleries may require these languages) as long as it is all functional on the client side. No server-side scripting languages. You can use external sources of code/tutorials to help you with this, but you must reference the use of this code. Global content requirements for all webpages on your website Header To identify the website as a website dedicated to you personally, provide: o A relevant heading / title banner and/or image/logo Navigation There should be a clear, intuitive and consistent navigation structure on the website. You need to think about how you will provide navigation to the user, and whether some pages may be categorised together or not. o Example: A personal image gallery and a portfolio gallery may be categorised together under a main page called Gallery with the 2 pages linking from it locally, or within a main menu drop-down function. Types you can include (if applicable for your design and requirements): o Global (Primary and maybe Secondary), Local, Footer, In-text, Utility. Footer An appropriate and intuitive footer should be included on your website CRICOS Provider No D Page 3 of 5

4 Home Page Requirements Filename should be named index.html. Home page should indicate the purpose and identity of your website immediately via: Short blurb of your name and your career ambition. o Example: Joe Bloggs. Web Designer. I create beautiful websites. Short paragraph (15-45 words) providing more detail regarding your career ambition. No other body text should be present. It can be more flamboyant or flashy than the rest of your web pages. It should try to professionally represent yourself through: o Image(s) o Visual design (Composition, Colour and Typography) Remember this design is to reflect your style and personality (with the focus on your career ambitions), but not at the expense of good design. First impressions count! Requirements of SEVEN additional web pages In addition to the home page, you are given creative freedom to design and develop the rest of your personal website yourself with only a few specific requirements. You need to design and develop seven more web pages for a total of eight. Some suggestions (but you may think of your own) are shown below: o Achievements, Blog, Career, Contact, Design, Education, Experience, Gallery, Hobbies, Journal, Ideas, Photography, Portfolio, Testimonials, Travel. o Note that some of these suggestions above would technically require server-side scripting to fully function. In these cases (such as a blog), create a working prototype of this web page, focusing on design and layout, with sample content in place. Content Each web page should have: o Appropriate filenames, titles, headings (and subheadings) related to their content. o Appropriate text to complement the additional media. o At least one relevant piece of media (image/video/audio). Gallery One of your web pages must include an image gallery of at least six images The gallery must be dynamic, meaning it has an interactive visual feature such as: o Lightbox: Thumbnail images that link to a large sized version of that image. o Rollover: Thumbnail images that when the mouse hovers over it, displays the larger version of that image. o Slideshow: The first image displays large on the webpage and the user can cycle through the images. o Any other Dynamic Gallery that is designed and presented well. You may need to incorporate code (using CSS, JavaScript and/or jquery) from: o Free web design tutorials to get your galleries working, or Be sure to reference code that is not yours. o One of the lab exercises the labs have 4 different galleries which you can adapt. Galleries that function well and suit the design of your website will be awarded higher marks. ITECH6106 Students (and ITECH2106 Students that want a challenge!): Responsive Design Your website needs to be responsive. Create different styles for screen widths of: o 600 pixels and lower o 601 pixels to 960 pixels o 960 pixels and higher Use the query functions CRICOS Provider No D Page 4 of 5

Brief Report Together with the website, you must provide a brief report with the following details: Indicate the preferred browser and resolution for your website.

5 Brief Report Together with the website, you must provide a brief report with the following details: Indicate the preferred browser and resolution for your website. List in dot point, any changes you made to your design document and the reason you made that change. Indicate exactly where in your website you incorporated the CSS3 requirements. This will make it easier for markers to assess this requirement. Folder Structure Website-Name-ID This folder should have your name and ID and will hold all of the.html files css to hold the.css file(s) images to hold all image files othermedia to hold any video, audio, animation files scripts to hold any JavaScript files This will make it easier for you to manage and easier for markers to access your files. Submission Before submission, you should first test your website on a different computer to where you worked on it. This will confirm whether links, images and other media are referenced relative to the html file location, and not an absolute address on your personal computer! Submission is via Moodle. Please submit in the form of a ZIP file containing: The entire folder structure of your website; and Your brief report. Please refer to the Course Description for information regarding; late assignments, extensions, special consideration, and plagiarism. Students are reminded that all academic regulations can be accessed via the universities Website. Marking Rubric & Feedback A detailed marking rubric is appended to the end of this document. The marking scale for each item represents a scale of excellent (High Distinction level work), good (Competent to Distinction level work), average (Pass level work), poor (below Pass level) and not completed, and partial marks between may be awarded. You will receive marks and feedback within two weeks of submission (ideally before the exam period begins), uploaded to your Moodle submission. Plagiarism: Plagiarism is the presentation of the expressed thought or work of another person as though it is one's own without properly acknowledging that person. You must not allow other students to copy your work and must take care to safeguard against this happening. More information about the plagiarism policy and procedure for the university can be found at CRICOS Provider No D Page 5 of 5

Assignment 2: Website Development Marking and Feedback Student Name: ID: Section Marking Options Specific Web Page Requirements Home Page (20 marks) Excellent Good Average Poor Not Done Appropriate

6 Assignment 2: Website Development Marking and Feedback Student Name: ID: Section Marking Options Specific Web Page Requirements Home Page (20 marks) Excellent Good Average Poor Not Done Appropriate filename (index.html), <title>, headings Short Blurb (identifying name and career ambition) Expanded Career ambition paragraph (15-45 words) Professionally represent the student through the design/images First Impressions of the website through Home Page Markers: Deduct 2 marks for each piece of extraneous unnecessary text on the home page content area. Seven Additional Pages (28 marks) Appropriate filenames, titles, headings (and subheadings) Appropriately chunked text for each webpage At least one relevant piece of media per web page up to 2 marks per page (maximum 14) up to 1 mark per page (maximum 7) up to 1 mark per page (maximum 7) Markers: Partial marks can be awarded if the pages do not meet requirements or purpose of site completely Deduct 5 marks for each page missing completely (not including home page, there should be seven) Gallery on one web page (16 marks) Excellent Good Average Poor Not Done At least six Images in Gallery The gallery was one of the following and worked correctly: Lightbox, Rollover, Slideshow or other Dynamic The gallery's suitability to the design of the website Global Website Design Header & Footer (12 marks) Excellent Good Average Poor Not Done Header: Relevant identifying website heading/banner and/or image Header design attractiveness Markers: Deduct up to 5 marks for websites in which headers take up too much screen real estate Footer: An appropriate and intuitive footer Footer design attractiveness Navigation (16 marks) Excellent Good Average Poor Not Done Primary Navigation is sized well, and categorised appropriately Navigation intuitiveness and consistency Navigation design attractiveness (colours, rollover effects, etc) Appropriate usage of different types of navigation (such as global, local, footer, in-text and utility if necessary) Overall Web Site Design (50 marks) Excellent Good Average Poor Not Done Contrast between elements Writing for web practices (inverted pyramid, plain language, etc)

7 Whitespace used according to good design rules Images Optimised (small files sizes, appropriate dimensions) Layout & Consistency Balance of content Colour Scheme Typography (including readability and legibility) Creativity and Uniqueness Meets purpose of a professional career focused portfolio website Markers: Deduct 1 mark for each spelling or grammatical error found If an ITECH2106 student has a working responsive website (well designed), award them appropriately in this section. For ITECH6106 students, responsive design is marked further below and is a requirement. Code / Markup / Scripts HTML (18 marks) Excellent Good Average Poor Not Done All HTML files begin with <!DOCTYPE html> declaration All HTML files have correctly nested tags, including the use of HTML5 structural semantic tags HTML <div> is used appropriately (not used in place of semantic tags; eg. <h1>, <header>, etc. No <table>s for structure) Markers: Deduct 4 marks for JavaScript/jQuery not referenced that was written by someone else Deduct up to 4 marks for tags formatted with HTML attributes instead of using CSS CSS (20 marks) Excellent Good Average Poor Not Done Styles and CSS structure Markers: All/mostly Inline/Embedded CSS only award a Poor rating (External stylesheets more efficient) Deduct 4 marks for code not referenced written by someone else (eg. A CSS Gallery, Dropdown menus etc) Deduct 4 marks for each linked CSS file which is not used on the page Deduct 2 marks for each CSS file in addition to the maximum 2 CSS files allowed ITECH2106 ONLY. CSS3 (12 marks) Excellent Good Average Poor Not Done Any 2 CSS3 effects: Transitions, Transforms, Rounded Corners, Embedded Fonts (or an API), Multi-Column, Shadows, Gradients. Markers: Report should tell marker where to locate the above ITECH6106 ONLY. CSS3 & JavaScript (42 marks) Excellent Good Average Poor Not Done Any 6 CSS3 effects: Transitions, Transforms, Rounded Corners, Embedded Fonts (or an API), Multi-Column, Shadows, Gradients. Markers: Report should tell marker where to locate the above Responsive website queries Markers: Requirements are website styles are to respond to 600px and below, 601 to 960, and 961px and above Documentation Brief Report (8 marks) Excellent Good Average Poor Not Done Preferred browser, resolution and Design Doc changes/reasons CSS3 requirements noted

8 ITECH2106 Raw Marks Total (Out of 200) Total (out of 20% Type A Marks) Enter: <-- Number of Days Late 0 ITECH2106 Overall Mark 0.0 ITECH6106 Raw Marks Total (Out of 230) Total (out of 20% Type A Marks) Enter: <-- Number of Days Late 0 ITECH6106 Overall Mark 0.0

Assignment 1: Design Document

Assignment 1: Design Document Overview In this first assignment, you are required to prepare a Design document in the format of a report which will cover most of the analysis, planning, content and design