Website design and development

Page 1 of 10 Web Presence Project

Computing Science Department

Web Presence Non-Profit/Small Business Project

Course: COMP 2680 F2019

Date due: November 28, 2019 (Start of Class)

[ABSOLUTELY NO LATE SUBMISSION, as this is the LAST day of classes!!]

Weight: 25% of final mark

NOTE:

1. ZERO [0] mark for LATE submission or submitting the wrong files, NO EXCPETIONS!!

2. In order to obtain a passing grade on the project component of this course, a MINIMUM of 60% (15

out 25) is required. Please refer to course outline.

Page 2 of 10 Web Presence Project

1. Web Page Development for Non-profit Organization or Small Businesses

1.1 Purpose /Objective

You will be able to develop and showcase your web design skills with an actual organization. The

contacts that you make with clients when you demonstrate your web presence prototype will be very rewarding. You will be designing something that you can present to a company and you will have fun in

the challenge that this will create. You will learn to apply the knowledge and skills you have learned during this course by either creating a brand new web site or updating an existing web site with a real

potential client. This would also provide good practice for improving your interviewing skills. Ultimately, you will practice your professionalism in handling the relationship and the rewards will be great.

Additionally, this would provide networking contacts with local, regional, provincial, national or

international businesses and communities depending on whom your contacts are.

1.2 Why a Web-based project?

You can learn programming and Information Technology by working on just about any kind of project -

computer games, scientific, accounting and other applications. We think a good learning project should

be fun, useful and real. It should be something you'll be proud to show to potential employers by

including it in your portfolio and curriculum vitae. It should demonstrate your technical mastery, creativity

and overall understanding of the software development process.

1.3 The Web was picked as the context for most of your learning project because:

• The Web is hot! It's everywhere. It's hitting every institution and organization like a tidal wave.

It will define the way we live for the next century just as the internal combustion engine has

defined how people lived in this century. Best of all, you can still get in on this technology at the

ground floor and that is exciting!

• The Web is cool! You can do lots of cool things on the Web. Your imagination and persistence

are the only limits! This technology is literally changing by the hour.

• The Web is green ($$$)! There are thousands of jobs for web developers. Proficiency in web

development is your gateway to a hot job. This project is your best chance to learn how to do it.

1.4 Before We Begin

There are some critical factors for success. They include

• A positive attitude about learning by doing. This is the single most important factor. If you

believe that you can learn web design like you learn History (i.e., by listening to someone talk or by reading a book, then you will likely FAIL). Remember that the best way to learn web design is

by DOING it.

• Willingness to explore, especially into cyberspace. Just about everything you need to

create a successful product can be found on the web. There are examples you can reference,

graphics you can download and more. If you're not motivated to explore, you'll only hand in a mediocre product.

• Hard work. Last but not least, you need to work hard, and you need to work smart.

Page 3 of 10 Web Presence Project

1.5 Setting the Scene

Just about every organization or business presently has a web presence to promote their products, attract investors and provide services. Professionals use the web to promote their expertise. The

possibilities are endless.

1.6 Goals

(a) Communication

• Develop verbal, listening, writing and reading skills

(b) Research

• Develop information on an actual organization

• Use interviews, the Internet, resource books and other research techniques

(c) Positive Professional Attitude

• Understand, analyze and diagnose business issues

• Demonstrate an understanding of the Company's needs

• Use collaboration strategies to ensure development of an application

• Work to meet established goals

(d) Work Ethic

• Schedule time and resources to meet time lines

(e) Creativity

• Use a broad scope of creativity in modeling a business and generating an application

(f) Consulting & Entrepreneurial Skills

• Gain insight into a functioning business operation

• Present a completed prototype to a real business

• Simulate a process similar to that of a consultant

• Simplicity, functionality and ease of navigation within the site are key and critical factors to be

borne in mind when doing this project.

(g) Problem Solving and Troubleshooting

• Isolate and solve application problems in code, design and development

(h) Stress Management

• Learn to balance your own as well as your peer’s interests, goals and expectations

• You should strive to be happy and balanced, not under stress and exhausted

Page 4 of 10 Web Presence Project

1.7 Monitoring Your Progress

Develop a project plan should always be front and center – keep a copy displayed somewhere where you

can constantly monitor and review. The effectiveness of your plan will determine the proficiency and

success of your web application.

A warning about a common planning pitfall is that in software application development, minor tasks may

require extensions in deadlines. Over the course of your project work, those delays in deadlines can turn

into serious time problems. Monitor your progress frequently to prevent this from happening. You

should identify where and how you will make up for even those minor deadline extensions, as this web

project has a zero extension of submission deadline. Time Management is key and fundamental. Waiting

and procrastinating till the eleventh hour is going to greatly affect the quality of your web project.

Page 5 of 10 Web Presence Project

2. Deliverables and Details

2.1 9 Web Sites in total are required from 9 different domains as listed below.

• 3 Web Sites – Similar sites to your site, re: similar business nature

o Links to three web sites similar to the site you are planning to build for the business. Give a one-sentence description what you like about each site.

• 3 Web Sites – Downloadable Sites

o Links to three sites from which you can download free components for use in your

project web site for the business (i.e., graphics, sound files, etc.). Give a one-sentence description what you like about each site.

• 3 Web Sites – Technical Information

o Links to three sites for technical information on technologies you’ll be using for the project web site you build for the business. (i.e., HTML5, CSS3, JavaScript, etc.). Give a

one-sentence description what you like about each site.

2.2 Cross Reference Page

• At the completion of the project, you will be asked to present a web page that links to all

requirements to aid in the marking of your web site. Now is a good time to begin that page by creating a list of all requirements and when completed, link the text to the location on the

project web site.

• Each item on the cross-reference page must be a hyperlink to the associated item within the web site and include a description of what the link is going to show. Your web site must

demonstrate the appropriate, relevant and functional use of each of the required features.

• The cross-reference page must be accessible from the Home Page of the web site. It must

be part of the project web site. The cross-reference page should be the last thing to be completed by you.

• Note: When submitting a copy of the completed web project to the business or organization,

remove the link to the cross-reference page. The link to the cross-reference page is only required for the copy of the web project that is submitted to me for marking purposes.

2.3 Web Site Design

• It is important for you to develop a flow of the web site. The flow essentially refers to how a

user will navigate through the site – how the pages will link to each other.

2.4 Minimum Requirements Features

2.4.1 HTML5

a) Appropriate HTML5 tags, including use of HTML5 structural tags, <a>, <p>, <hn>,

<blockquote>, <ol>, <ul>, <dd> to name a few.

b) Inline images both static and clickable.

c) Use of appropriate special characters.

d) Use of appropriate <meta> tags.

e) A footer on the home page indicating when the web site was last updated or

modified.

Page 6 of 10 Web Presence Project

2.4.2 CSS3

a) Use CSS3 to format the appearance of paragraphs, lists, headers, background images, tables, forms.

b) Use CSS3 contextual selectors (e1, e2, e3; e f; e > f; e + f) and at least two

attribute selectors, excluding class and id attribute selectors.

c) Use of CSS3 styles for color (RGBA & HSLA).

d) Use of dynamic pseudo-classes to highlight hyperlinks states of link, visited, active, hover; focus and two structural pseudo-classes: first-of-type and last-of-

type.

e) Use of CSS3 background styles (background size, background-clip, background-

origin, padding, margins, borders, use of an appropriate border style, use of

rounded corners.

f) Your home page should have a drop cap created with CSS3.

g) Define document content with the class and id properties and create styles for them.

h) Use cascading styles to control page layout by using either grid, flex, float,

positioning. The use of framework for layout is discouraged due to too many unknown factors.

i) Use of CSS3 text and box shadows.

j) Use of CSS3 transform rotate feature.

k) Use of CSS3 opacity applied to two images to appear semi-transparent.

2.4.3 Web Form

a) Use of appropriate form elements including some of the new HTML5 form

elements.

b) Apply appropriate styles to Web Forms.

c) Apply inline form validation by using the focus pseudo-class to appropriate form

elements.

2.4.4 Graphical Web Tables

a) Use of graphical web tables to depict relevant data that is appropriate to the

business.

2.4.5 Multimedia Minimum

a) Use sound, video somewhere on your site. Ensure these are of short duration

preferably about 30 seconds.

b) Use of transitions and animations

Page 7 of 10 Web Presence Project

2.4.6 JavaScript

a) Use of variables, arithmetic, comparison and logical operators, subroutines,

functions, arrays, conditional statements, conditional operators, running time

commands with system clock.

b) Use of system date (example: clock, countdown timer to an event) on your

web site.

c) Validating form input by using appropriate JavaScript functions.

d) Use of JavaScript alerts for validation purposes.

e) Use of BOM/DOM in emulating events through the use of event handlers.

2.4.7 Responsive Design

a) Your web site design should include responsive design implementation using

concepts covered in this course that would accommodate desktop, tablet and

mobile designs.

b) The use of contextual selectors to control sub level menus is required,

including navicon image for mobile design is required.

2.4.8 Call to Action (CTAs)

a) Your website must include at least three CTAs, in particular, on the

homepage of the website. A call to action (CTA) is a prompt on

a website that tells the user to take some specified action. A call to action is

typically written as a command or action phrase, such as 'Sign Up' or 'Buy Now'

and generally takes the form of a button or hyperlink.

Three Reasons a Call to Action is Important.

o Your call to action (CTA) is the chance to motivate your audience to take

real steps toward becoming a customer or client, i.e. CTAs motivate your

sales funnel

o Customers Want Them

o CTAs boost the success of digital advertising

Some Sources of CTAs:

https://www.vizioninteractive.com/blog/3-reasons-call-action-important/

https://blog.hubspot.com/marketing/call-to-action-examples

https://shanebarker.com/blog/call-to-action/

https://thrivehive.com/website-call-to-action-button-examples/

Page 8 of 10 Web Presence Project

2.5 Web Project Documentation

• You must include in your web project documentation the following elements in pdf

format.

o Front page (with your name(s) if work in a team, student id(s), course name and date)

o A paragraph entailing the business statement in about 100 words.

o Project objectives and a project description stated clearly.

o A brief explanation of how the business would benefit from your design in about 100 words.

o Any other appropriate relevant documentation pertaining to your site that

you wish to include.

2.6 Demonstration Evaluation Form

• Design a short evaluation form that the business would complete.

• The evaluation form should include opportunities for feedback on your design, its

usefulness, and the business personnel’s overall impression of your design.

2.7 Extended Features (Optional)

• What are extended features?

The extended features are what will make your web page stand out from the others. This

is also important for you if you want to impress employers. These features will be unique

ones that you research and choose. They can be whatever you want.

• What will extended features do for the project?

Extended features can be included to allow you to achieve a higher grade. Project marks

for extended features are given to encourage self - directed learning. So, do not ask the

instructor to show you how to do it. If you feel inclined to ask an instructor how to

implement an extended feature, you cannot receive credit for using that feature.

Extended Features cannot be considered for evaluation if required features are missing

or not working. Specifically, you must achieve a minimum of 90% on the required

features before any consideration will be given for bonus marks for extended features.

• Important Note to Students

Repeated use of any feature counts as one occurrence - one extended feature. All

required features of the project must be met before extended features will be

considered.

• More on Extended Features

If you are going to implement extended features in your project, a minimum of three (3)

extended features are required in order to achieve any bonus marks. You are required

to understand each and every one of the three extended features that has been

implemented – the instructor may require you to explain how each of the extended

features has been implemented and why those extended features were chosen.

Page 9 of 10 Web Presence Project

Additionally, all of the 3 extended features must be fully functional before any

consideration will be given for awarding any bonus marks.

All extended features included in the project must be relevant to the application you are

creating. For instance, password protecting a web site that isn't context sensitive would

limit access without any reason. However, password protecting a page on the web site

that customers use to view their account information would be relevant.

Extended Features are included within this web presence project and used as a

requirement to achieve a higher grade for a multitude of reasons, not the least of which

is that it requires you to learn a new component/technology in order to implement the

feature.

Remember, in the work place to do only what is required will not make you stand out to your supervisors. To do more than the minimum is what makes you, as an employee,

outstanding. The same is true as a student. Do more than what is expected by the instructor and you can be rewarded with higher marks for your efforts.

• Extended features for the project will NOT be considered from the following

sources:

Completed using HTML5, CSS3 and JavaScript covered in the curriculum or anything that

is spelled out in any of your required or recommended text books or lecture notes or class discussion material. Extras chosen by you should be original and beyond the scope

of the instructional material. In the event you are enhancing an existing web site, any

features already implemented previously, i.e. prior to you starting on improving or enhancing the web site will not be considered for credit for extended features.

Note: All extended features must be approved by the instructor before work commences for marks to be awarded.

2.8 Deliverable Submission

2.8.1 Guidelines for Submission

a. All deliverable must be placed on to a USB. Create a folder, with your Last Name & First

Name. On the outside of your folder, create and save a text file, indicating the file name for your home page.

NOTE: For consistency please ensure your home page is named index.html.

b. Ensure that your cross reference page is clearly numbered, e.g., 2.4.1 d) and all hyperlinks are functional to various parts of the project. This is KEY!!

c. The entire project submission MUST be on a USB.

Page 10 of 10 Web Presence Project

2.9 Marking Guide

Web Presence Project Marking Guide Points

9 Web Sites 5

Cross Reference Page with hyperlinks to all requirements 35

Web Site Documentation 15

Web project development/design (HTML5) 5

Web project development/design (CSS/JS/multi-media) 15

CTA’s properly implemented 5

Overall web site development/design including layout and responsiveness 20

Total Possible Points 100

2.10 Deliverable List Guide, checklist

1. Web sites (3)

2. Sites to download free components (3)

3. Sites for technical information (3)

4. Required HTML5 Features

5. Required CSS3 Features

6. Required JavaScript Features

7. Required Multimedia Features

8. Required HTML5 validation

9. Cross Reference Page

10. Web site function with appropriate JavaScript features

11. Mobile Design Responsiveness Implementation

12. Documentation (General & Technical)

13. CTA’s

14. Extended Features (If any)