Creating A Website 2

NGO Website Project

Objectives

Upon completing this assignment, you will be able to:

  • design and build a multi-page HTML website with a consistent look and style;
  • describe how hyperlinked documents use URLs to form connections between them;
  • Create internal and external hyperlinks;
  • use HTML tags to create semantic structure in a web document;
  • integrate images and other multimedia elements into a web document;
  • use lists and tables to organize and layout the elements of a web document;
  • create a blog or micro-blog using a free hosted service.

Overview

In this project you will design and implement a simple, small web site and blog for a fictitious Non-Governmental Organization (NGO). The focus will be on creating a well-structured, consistent design, with good connections to related sites on the WWW.

You will work in a small team of 2 – 3 students to complete this project and must learn to participate and share in all aspects of the project, from design and research, to implementation and testing.

The Scenario

You have been asked to design a website and blog for an NGO (e.g., an environmental, advocacy, health-watch, community group, or other non-profit organization) to help them promote their work on a particular issue. The goal of this web site is to inform people about the issue and to attract new supporters.
People visiting the site should get a balanced, well informed understanding of the issue, in addition to some information about the organization, its mission, and the actions it is taking. Since the NGO hopes to attract new members (and thus more funding!) with their on-line presence, you need to make the web site attractive to your potential members. It should be informative and easy to browse, allowing the user quick access to the information and features he or she needs, and providing links to related web sites.

Important Note: do not try to cram a lot of information about your topic onto your site. Rather concentrate on creating a nice design with basic information and links to web sites where related and more detailed information can be found. Your focus should be on layout and design, rather than packing in a ton of content!

Getting Started Tasks

  1. Select a team.
    You should work on this project in a team of 2 – 3 students. Be sure to choose a partner with similar interests and a compatible schedule!
  2. Select an environmental or social issue.
    Choose an issue that you feel is interesting, overly exaggerated, or urgently pressing. Use your imagination, and choose something that interests you. Be creative – make something up – use humour if you like. Some examples might include air pollution, homelessness, oil spills, drug addiction, climate change, nuclear waste, endangered species, alternative energy, poverty, sustainability, etc. The issue may be very general or quite specific. For example, one might choose “endangered species” in general, or focus specifically on “Mountain Gorillas”; or “animal cruelty” vs. “cruelty to slugs”.
  3. Select a name and a mission for your organization.
    Make-up an imaginary organization whose objective is to either to dismiss or raise awareness about this issue. Note that the organization may advocate any viewpoint on the issue, from “de-bunking a myth” to conservation and activism — it is up to you to decide on their “mission statement“.
  4. Research your issue.
    Research the issue with an aim of trying to understand the different viewpoints that exist. For example, what does this issue mean for individuals living in North America as opposed to Africa? What are the alternatives? What are the costs of dealing with it? What are the benefits of leaving the status quo? How will our actions affect future generations? etc.
    Be sure to “bookmark” useful sites or write down their URL’s so you can return to them later.

    Develop a basic outline that summarizes your research findings. This will help you to organize your thinking and select the most important pieces of information to use for your website.

Designing the website

Like you would in any real life web project, start by designing the overall structure and look of your website. No knowledge of HTML is required as this stage is done on paper.

Decide on the overall site “architecture”

How are you going to organize your site? What pages will it have? How will they be linked together? This is the initial phase of your web site design. Draw a diagram – a “site map” – of your overall design to show the main pages and the relationships and links between them.

Design the look and feel for pages on your site.

It is important that all the pages on your site have a consistent “look and feel”. Create a design theme for pages on your site — will they have a banner or a sidebar or a background image? what will the colour scheme be? will they have a navigation menu? will there be a logo on each page, and if so, where? will there be a footer? Have a look around the web for sites that you like and find attractive — what are the design elements being used?

Draw a sketch of a typical page to show how it will be laid out (e.g., show the locations of titles, graphics, text areas, navigation bars, etc.). While you are encouraged to be creative when designing your website, the web is primarily a communication tool and you must make sure that your site is usable and friendly. The guidelines established at http://usability.gov/guidelines/index.html will help, and the HTML hell page will identify some things you should really avoid!

Features of your site

  • Your site must include the following pages :
    • An “introduction” page to describing the general purpose of the site (your organization’s “mission”), in a file named index.html
    • A blog that will serve to keep your readers up to date with the latest news.
    • Details on the various activities/services/topics etc. (will vary based on site, but keep it simple!)
    • A “contact” page with your contact information, including the e-mail address of the person managing the site and the date that the site was last revised
  • To attract potential members, your site could implement a feature, such as:
    • a current top 10 list of corporate polluters,
    • tips for energy efficient living,
    • a simple game,
    • an annotated photo-gallery

    Use your imagination to choose something that will appeal to your potential members.

  • You must use appropriate images, graphics, and media to enhance the look of your site. Since these sites will be private, you do not need to worry about obtaining copyrights for any images you download from the WWW. However, at least one of the images used on your site must be an original – a photo taken by someone on your team.
  • You must provide links to at least 5 other relevant sites, such as home pages of other NGO’s and related government, university research sites, blogs, etc.

Select a Blog Platform

Do some research on the various free blog hosting, or micro-blogging services available. Decide on one to use for this project – make some notes about the criteria you used and the reasons why you choose it.

Create a blog on that service for your organization. During implementation, you will customize this blog and link it to your website!

mplementing Your NGO Website and Blog

Now that we have completed the website design on paper, we are ready to code! Your website must conform to these technical requirements.

  • The homepage for your website must be in a file named “index.html “.
  • The website must incorporate all of the the following HTML elements:
    • Different paragraph / heading styles (don’t go crazy, refer to the guidelines)
    • Links: both internal or external
    • Images (IMG) – at least one original image (e.g., taken with your phone or camera)
  • Your website must be free of HTML errors. You can tidy up your webpage using HTML Tidy.
  • Your website MUST validate correctly – be sure to pass each page through the HTML validator:
    https://validator.w3.org/nu/
  • Finally, of course, your site must use correct Canadian English spelling and grammar, to a standard appropriate for 100 level English at Capilano University.

Implement your blog

Create a blog or micro-blog on the hosting service on your choice, make sure that the theme is similar in style to your website (select a template with similar colours and/or layout, possibly customize the theme with your logo or other identifying images).

  • As your first blog post, provide a 1-2 paragraph explanation on why you chose that particular blogging service – what criteria did you use, why this service over the others?
  • Create at least one additional blog entry per person in your group.
    This blog post should provide feedback for team members and your instructor about how the project went for you.
  • Add a link from your website to the blog (ideally as a menu item)
  • Add a link from your blog back to your website

Evaluation Criteria

To complete this assignment, you must upload your complete website to the WWW for grading and public viewing. Submit the URL of your website on Moodle.

The work must be of a reasonable standard to be acceptable for grading.
Acceptable work will be evaluated on the following characteristics:

CriteriaEvaluationLayout, Design & Organisation :
– multi-page site with suitable layout
– consistency, structure, ease of browsing
– aesthetics (appropriate use of colour, fonts, formatting, etc).30

Requirements
– site has all required components
– site uses required HTML tags
– site validates correctly

10Media
– inclusion of appropriate media
– at least one original photo10Content:
– originality & quality of information (not quantity!)
– links are relevant and function correctly
– administrative & contact info, all team members clearly identified10Blog :
– successful setup of the blog site
– consistent style and theme
– linked with website
– required blog entries30Technical Requirements :
– homepage is named index.html
– spelling and grammar10

Total

100

Place this order or similar order and get an amazing discount. USE Discount code “GET20” for 20% discount