Webpage Design and Development
Unit Code: WPDD202
Type of Assessment: Assessment 3 (Group Assignment)
Outcomes addressed: Information strategy, Business strategy and planning and Technical strategy and planning
a)To gather, critically analyse, manage and present in meaningful ways information and data, and
Systems development and User experience
a) To act as an ethical practitioner while demonstrating skills in data analysis, database design, system design, web design and software development and testing,
b) To implement and document user experience analysis, design and testing.
a)To prepare design and system documentation and written reports
Teamwork and self-management skills
a) To work collaboratively in small teams on a variety of large and small projects to produce models, software, documentation and reports
b) To take responsibility for their own time management delivering quality required material on time in dynamically changing technological and communication contexts whether as an individual or member of a small team.
Outcomes addressed: Upon successful completion of this unit students should be able to:
a. Describe and use the client-server internet model, W3C standards, mark-up languages, client-side scripting, server-side scripting to access and manipulate data, database access and internet security
b. Analyse and model requirements and constraints for the design of client-server internet applications
d. Identify problems, opportunities and challenges in creating Webpages
e. Make recommendations based on accessibility, ethics, and website promotion strategies
Assessment Task: A written assignment undertaken in groups of three or four students in the form of a webpage design, implementation, test and evaluation. Your Project will demonstrate mastery of the web development skills and concepts learned in this unit.
The project must be your own design and be completed by you — the use of free or purchased web site templates is not permitted (for example, those found in Dreamweaver, purchased or free, blog or social networking templates such as Drupal, WordPress, Blogger, Facebook as well as the textbook’s Case Study Lab). If it is perceived that a web template has been used, the project grade will be no more than -below average-.
30% of the unit total marks
Students are advised that any submissions past the due date without an approved extension or without approved extenuating circumstances incurs a 5% penalty per calendar day, calculated from the total mark
E.g. a task marked out of 40 will incur a 2 mark penalty per calendar day.
More information, please refer to (Documents Student Policies and Forms POLICY –
Assessment Policy & Procedures – Login Required)
ABOUT THE ORGANISATION
Think Green Foundation was founded in October 2010 and is a non-profit organisation that aims to assist and uplift rural communities with the support of environmental projects. We have raised more than AUD 3 million to date and have won the UN Champions of the Earth Award in 2017 and 2018. To date, we have assisted 40 rural communities in South Africa, Botswana and Zambia and planted more than 40,000 trees.
Our staff currently includes three full time project coordinators, a marketing coordinator and seven administrative staff members. We also have eight part time volunteers during various stages of the year.
Our main message is that poverty and environmental degradation are intrinsically linked. By educating communities to respect the environment, opportunities for income generation are created.
1. The general public. 80% of our funding comes from individuals who hear about our message through our marketing channels. The remainder comes from corporate sponsorship and internal profit generation (such as fundraising activities and sale of our branded merchandise).
2. Businesses. Businesses contribute 10% to our funding. We would like to strengthen our focus on corporate sponsorship during 2020 and use the website to support co-branded sponsorship projects like the Go Green campaign.
3. Volunteering students. Once a year we run a volunteer program in conjunction with University of Melbourne. Social sciences students donate 100 hours of their time to an NGO of their choice as part of their year-end thesis. We typically receive 600 hours donated each year. The website should act as a recruitment drive for these volunteers, as well as other non-student volunteers.
4. Accreditation agencies. We are in the process of securing accreditation from ACNC (Australian Charities and Not-for-profits Commission) and CMA. A professional web presence will assist in this evaluation.
5. Partners. We are continually expanding our partnership network to environmental organisations and lateral NGOs. The website should act as a vehicle to strengthen our network.
6. Employees. The strength of our efforts relies on the quality of our people. We would like the website to attract job applications from qualified individuals in the fields of marketing, accounting and project management. The website should advertise the uniqueness of our offering.
7. Photographers. Photographers typically spend 40 hours a year to profile our projects. They are selected on a competitive basis but often donate free hours to capture specific projects and events. We would like the ‘photo gallery’ to inspire professional photographers to get involved.
8. Design students. We sell branded merchandise (t-shirts, caps and bags) in our online shop as part of our fundraising. The designs and illustrations are donated by designers and design students. We would like the site to attract further contributions in this area. An online competition platform would be ideal.
9. Media. We have been featured in a variety of local magazines and radio stations. We would like the website to attract further positive media attention and enable interested parties to download our press kits.
Website activities and objectives
We would like the general user to engage in the following activities on our website. Items are listed in order of importance:
? Donate online
? Subscribe to our newsletter
? Follow us on social media channels like twitter and Facebook
? Purchase our merchandise
? Download resources on “Think Green”
This ties in with our major website objectives:
? Create awareness about our organisation
? Generate donations and merchandise sales
? Build an online community
? Build a repository for resources and materials on “Think Green”
? Advertise uniqueness of organisation to partners, volunteers and the media
The website will contain the following navigation structure. Alternate suggestions on page structure are welcome:
• About Us
• Mission and vision
• Board (6 members) Staff (12 members)
• Partners • Projects
? Outline per project with image galleries and videos (2 projects for launch)
• Subscribe to our newsletter
• Online shop (15 products for launch)
• Think Green (resources centre with 10 articles for launch)
• Events calendar
• Image galleries (2 albums for launch, approx. 10 images per album)
• Careers (4 vacancies currently)
• Contact Us
Website main features
• Newsletter subscription
• Home page banner
• Online donation form with ability to pay via EFT, PayPal or credit card. We would like users to choose between recurring and once-off donations (please see Template 1 as a reference)
• Interactive image galleries
• Online shop selling our branded merchandise (also ability to pay via EFT, PayPal or credit card); delivery is included in the purchase price and we post orders internationally; we currently have 20 products in our shop ranging from branded t-shirts to bags
• Visual events calendar (we would like a full page calendar that highlights specific dates and allows users to toggle between months)
• Website keyword search
Competitor website worth referencing are:
Bill and Melinda Gates Foundation – https://www.essaybishop.com/write-my-essay/gatesfoundation.org/
We like the home page banner animation, the breadth of information as well as the extensive use of multimedia throughout the site. The world map on the home page is a good reference for the interactive project map.
Plant with Purpose – https://www.essaybishop.com/write-my-essay/plantwithpurpose.org/
We like the design of the website as well as the interactive village feature.
The design should be clean and ‘organic-looking’. We are leaning towards green as the dominant hue together with neutral colours like beige and grey. We would like to feature a mixture of object and people-based photography.
The home page design should tie in with our main message, which is:
Uplifting communities through environmental projects
Where people photography is concerned, a mixture of races and ages should be represented.
We are looking for an affordable and reliable hosting solution. We require 500 MB of disk space and up to 10 GB monthly traffic. This excludes email hosting. We already have a domain secured.
Website Design and Development Assignment
For this assignment you will work with a team to develop a website. Your team will need to conduct some research to find the information for the topic. The goal is to present the information (website) in such a way that customers can use your website effectively. In addition, you will submit a brief individual report about this assignment.
You will be expected to choose your own teams for this project. Teams may consist of three or four students. Your team needs to choose a team name and contact person. Students who are not in a group must contact the lecturer.
Good web design suggests that dividing material into bite-sized pieces relating to a portion of the overall topic.
Good practice of web design is expected – e.g. appropriate navigation, a good writing style for the web, well-thought out design to make material easily read on screen, and appropriate fonts and colors. The home page should be index.html.
One of the pages (references.html) should contain accurate and detailed information about the sources of information (contents and images) used in the web pages. It is expected that the references be accurate and complete and follow an appropriate format.
Your website project must follow the hierarchical structure and file naming conventions given below. Your marks will be deducted if you don’t follow this structure in your project.
The Group Report:
Write a three page paper describing the process of creating your website, working with your client and learning the technical skills necessary to do so. Discuss the things that went well on the site, the things that you found difficult, things you would change if you could do it again and what your group did on the project and how each of the group member personally contributed to the project.
Remember, unlike some of the other papers we have done in class, this is an actual essay, not a rough designs or notes. Pay attention to grammar and spelling.
Make sure the name of your group and a listing of the members of your group are clearly identified on the first page of this document.
Word limit: equivalent to 1200 words
Plagiarism and Collusion of Material:
One of the most common reasons for programming plagiarism is leaving work until the last minute. Avoid this by making sure that you know what you have to do (not necessarily how to do it) as soon as an assessment is set. Then decide what you will need to do in order to complete the assignment. Since the web pages are submitted as a group, ensure that all members of your group follow strict guidelines to avoid plagiarism.
? Website should have 18 (references page included) pages.
? Each of those pages should use same or similar style, so that the pages look like they belong to the same website.
Validate your Webpage:
? Each HTML page and CSS should pass the W3C validation.
? Validate the webpage using the W3C validator. All errors must be eliminated before assignment is submitted.
? Include the validation icon on your valid page *inside* your closing body tag at the base of your page/web site.
? Each page should have a meaningful title (using the same title for all the pages is not considered meaningful).
? You should have a consistent navigation, for example if you have a menu which links to different pages, the menu should appear in the same place in all pages, so that users can easily find the menu and able to navigate to different pages.
? Website demonstrates accepted graphic design principles (repeated elements throughout, contrast, proximity, and alignment as well as uncluttered space and subdued backgrounds).
? Website uses coordination of colors which do not hamper usage; this includes text contrasting well with background
? Consistent design throughout the website
? You should use one external stylesheet, and optionally internal stylesheets in different pages. The stylesheet should contain only the rules which are common more than 2 pages or all the pages. The internal stylesheet should contain rules which are used only in one particular page.
? You should organize all the pages in a good structure.
? You should layout your web pages using one of the layout techniques. You should use div to layout your pages, using table for laying out is not allowed.
? Your pages should be easy to read, easy to navigate. The text, border, background etc. should be contrasting, and don’t use too many different colors.
? You should have enough text and 20 images in your website. You must add multi-media contents (audio, video etc.).
? You should have at least a list in your website.
? You should have one contact form and one online booking form by using the valid HTML5 form elements.
? If you’re using an image or some text from somewhere else, you must clarify the origin of that resource in a comment in your HTML or CSS file, right before the resource you’re using.
? Create the company logo and navigation bars by using the Font Awesome (Font Awesome is a font and icon toolkit based on CSS and LESS.).
? You should only use Google fonts in your website. Your marks will be deducted in case of using other generic fonts by using the html font tags.
? Add social media (Facebook, LinkedIn, Google +, Pinterest, Instagram and Twitter) links in the footer section of each webpage by using the Font-Awesome toolkit.
? The website to be designed in wide screen format.
? The website to be developed to be a responsive website.
? The target audience is all users of mobile, tablet, desktop and laptops.
? Use of TABLE tags are not allowed to layout the webpage
? Each page must contain: A Header, Footer, Body section and common elements (logo, menu)
? Use of multiple versions of images and CSS3 styling rules to render web pages based on user platform and screen resolution.
This assessment is a group project and students are required to work with their respective groups. No individual submission will be accepted. You will not receive any marks for this assignment if your group members collectively report against you for non-participation or noncooperation.
You have to nominate someone as your group leader to coordinate the assignment submission. Only one submission is accepted for each group.
? The assignment must be submitted online in Moodle.
? You should compress all your files into a zip (.zip) file
and name like -project_ Your Group Number .zip-.
? No paper based or hardcopy submission will be accepted.
The assessment process may require some students to attend an interview in order to explain aspects of their assignment.
Marking Criteria Max Marks Lecturer’s Expectation Marks Assigned Comments
Use of completed Assignment 3 task’s Website.
5 Meet all basic requirements of the Assignment
Home page (index.html) 3 Clear design and content
Webpage 2 (about.html) 3 Clear design and content
Webpage 3 (mission.html) 3 Clear design and content
Webpage 4 (history.html) 3 Clear design and content
Webpage 5 (boards.html) 3 Clear design and content
Webpage 6 (partners.html) 3 Clear design and content
Webpage 7 (projects.html) 3 Clear design and content
Webpage 8 (volunteers.html) 3 Clear design and content
Webpage 9 (donate.html) 3 Refer to Template1 at the end of assessment brief to design this form.
Webpage 10 (products.html) 3 Clear design and content
Webpage 11 (payonline.html) 3 Refer to Template2 at the end of assessment brief to design this form.
Webpage 12 (tgreen.html) 3 Clear design and content
Webpage 13 (calendar.html) 3 Clear design and content
Webpage 14 (gallery.html) 3 Clear design and content
Webpage 15 (faqs.html) 3 Clear design and content
Webpage 16 (contact.html) 3 Refer to Template3 at the end of assessment brief to design this form.
Webpage 17 (careers.html) 3 Clear design and content
Webpage 18 (reference.html) 3
Use of Multimedia 2 Use multimedia only on Webpages 3 and 5.
Company logo and Navigation by using the combination of FontAwesome and Google fonts. 3
Use of Font-Awesome 2.5
Use of Google Fonts 2.5
Social Media Links 2
Widescreen layout 5
Responsive layout 9 Web site is interactive and adjusts based on device
Use of CSS3 media style rules 4 Use of proper HTML5 and CSS3 design guidelines
Correctness of HTML, CSS usage 5
Group Report 4
Total Max Marks 100 Total Marks assigned
Downgraded out 30
GENERAL NOTES FOR ASSIGNMENTS:
Assignments should usually incorporate a formal introduction, main points and conclusion, and will be fully referenced including a reference list.
The work must be fully referenced with in-text citations and a reference list at the end. We strongly recommend you to refer to the Academic Learning Skills materials available in the Moodle. For details please click the link http://moodle.kent.edu.au/kentmoodle/course/view.php?id=5 and download the file “Harvard Referencing Workbook”. Appropriate academic writing and referencing are inevitable academic skills that you must develop and demonstrate.
We recommend a minimum of FIVE references, unless instructed differently by your lecturer. Unless specifically instructed otherwise by your lecturer, any paper with less than FIVE references may be failed. Work that includes sources that are not properly referenced according to the “Harvard Referencing Workbook” will be penalised.
Marks will be deducted for failure to adhere to the word count – as a general rule you may go over or under by 10% than the stated length.
GENERAL NOTES FOR REFERENCING:
High quality work must be fully referenced with in-text citations and a reference list at the end. We recommend you work with your Academic Learning Support (ALS) site (http://moodle.kent.edu.au/kentmoodle/course/view.php?id=5) available in Moodle to ensure that you reference correctly.
References are assessed for their quality. You should draw on quality academic sources, such as books, chapters from edited books, journals etc. Your textbook can be used as a reference, but not the lecturer notes. We want to see evidence that you are capable of conducting your own research. Also, in order to help markers determine students’ understanding of the work they cite, all in-text references (not just direct quotes) must include the specific page number/s if shown in the original. Before preparing your assignment or own contribution, please review this ‘YouTube’ video by clicking on the following link: Plagiarism: How to avoid it
PLAGIARISM: HOW TO AVOID IT
You can search for peer-reviewed journal articles, which you can find in the online journal databases and which can be accessed from the library homepage. Wikipedia, online dictionaries and online encyclopaedias are acceptable as a starting point to gain knowledge about a topic, but should not be overused – these should constitute no more than 10% of your total list of references/sources. Additional information and literature can be used where these are produced by legitimate sources, such as government departments, research institutes such as the NHMRC, or international organisations such as the World Health Organisation (WHO). Legitimate organisations and government departments produce peer reviewed reports and articles and are therefore very useful and mostly very current. The content of the following link explains why it is not acceptable to use nonpeer reviewed websites: Why can’t I just Google? (Thanks to La Trobe University for this video).
Make a Difference. Donate Now.
Contact us form
If you can’t find what you’re looking for, or if you wish to be contacted by one of our advisors, please fill in the form below so we can get back to you.
To telephone us, visit our contact pages.
Purchase Order Form
1. BILLING ADDRESS
2. DELIVERY METHOD
3. PAYMENT METHOD