Final Project Solution

Purpose: To design and develop a web site using recommended design practices. Your web site will contain a home page and at least six content pages. You are required to create an external style sheet (.css file) that configures text, color, and page layout. (No font tags, embedded CSS, or inline CSS may be used.)




The content pages will include at least:




One page containing a form with at least three elements (place a form content in an e-mail message)



A JavaScript alert to one of the pages so that when it loads, an alert appears and when they leave the same page another alert appears.



Appropriate meta tags



One page utilizing tables effectively



One animated image



One e-mail hyperlink



At least one page with 3 column layout



Five external hyperlink



Five internal hyperlink



Consistent banner logo area



Consistent main navigation



Association with external style sheet (.css file)



Mobile version of the web site (.css file)



Print version of the web site (.css file)



Both Google Chrome and Internet Explorer must render each page. Your web site project will be evaluated on the following criteria:




Including all required web page elements



Following recommended web site design practices (see http://terrymorris.net/bestpractices)



Visual appeal of site to target audience



Accomplishment of project’s objectives
Project Deliverables (put all in a folder, then compress and put your student ID as the name of the submitted file)




Project Information:









What is the purpose of the site?



Who is your intended audience?



What opportunity, problem, or issue is your site addressing?



What type of content might be included in your site?



List at least two related or similar sites found on the web.



Site Map:



Using a word processor, PowerPoint, or ruler and pencil, draw a flowchart (storyboard) of your web site that shows the hierarchy of pages and relations between the pages.




Project code:



Need to provide the HTML, CSS and any other resources you used.

Present your project




Your presentation should last between 5 and 8 minutes. Submit a recorded presentation of your project. There are several software available for screen recording. One recommendation is using Camtasia. You can download a free trial (which will last for a month) via http://www.techsmith.com/comtasia.html. You need to describe the project pages, and why you chosen this project.










Grade Distribution (200 Possible Points)



Project Information (15 Points)






Outstanding
Developing
Needs Improvement


3 point
2 point
0 points
Website Name and
Clearly stated
Unclear
Missing
Purpose






Intended Audience
Clearly described in
Unclear or missing
Missing or does not


terms of age, gender,
criteria
relate to the website


interests, and social-


purpose


economic criteria.




Content
The type of text,
Unclear or missing
Missing or does not


graphics, and media
criteria
relate to the website


needed for the


purpose


website are clearly






described.




Related or similar
Listed two URLs of
Listed on URL of a
Less than two URLs
websites
related/similar
related/similar website
listed or the websites are


websites


not related/similar








Mechanics
Well organized,
Complete sentences,
Incomplete sentences,


complete sentences,
disorganized, less than
three or more


correct grammar and
three grammar/spelling
grammar/spelling errors.


spelling
errors.






















Site Map: (10 Points)






Outstanding
Developing
Needs Improvement


4-5 points
2-3 points
0-2 points
Site organization
The site is organized
Only one area of the
Two or more areas of


in an appropriate and
site organization
the site organization


usable manner.
needs to be modified
need to be modified.




to result in a usable






product.


Web Pages
Lists each web page
Lists more than four
Lists less than five


(between 7 and 11
but less than seven
pages


pages)
pages











General Layout: (10 Points)










Satisfactory




Needs Improvement






1-2.5 points






0-1 points


Logo Area


Present


Missing












Navigation Area


Present


Missing












Content Area


Present


Missing












Footer Area


Present


Missing










Project Submission 45 Points)










































Very Good


Developing


Needs Improvement








5


2


0-1








Home Page
Page demonstrates


Page is developed


Pages are not








web design best


but does not follow


developed or more








practices, contains


one or more web


than three web








content of value to


design best


design best practices








the target audience.


practices and/or


are not followed or














content need some


content is not of value














improvement.


to the target




















audience.








Page demonstrates


Page is developed


Pages are not








Page 1










web design best


but does not follow


developed or more








practices, contains


one or more web


than three web








content of value to


design best


design best practices








the target audience.


practices and/or


are not followed or














content need some


content is not of value














improvement.


to the target




















audience.































Page 2
Page demonstrates
Page is developed
Pages are not




web design best
but does not follow
developed or more




practices, contains
one or more web
than three web




content of value to
design best
design best practices




the target audience.
practices and/or
are not followed or








content need some
content is not of value








improvement.
to the target










audience.


Page 3
Page demonstrates
Page is developed
Pages are not




web design best
but does not follow
developed or more




practices,
contains
one or more web
than three web




content of
value to
design best
design best practices




the target audience.
practices and/or
are not followed or








content need some
content is not of value








improvement.
to the target










audience.


Page 4
Page demonstrates
Page is developed
Pages are not




web design best
but does not follow
developed or more




practices, contains
one or more web
than three web




content of value to
design best
design best practices




the target audience.
practices and/or
are not followed or








content need some
content is not of value








improvement.
to the target










audience.


Page 5
Page demonstrates
Page is developed
Pages are not




web design best
but does not follow
developed or more




practices, contains
one or more web
than three web




content of value to
design best
design best practices




the target audience.
practices and/or
are not followed or








content need some
content is not of value








improvement.
to the target










audience.


Page 6
Page demonstrates
Page is developed
Pages are not




web design best
but does not follow
developed or more




practices, contains
one or more web
than three web




content of value to
design best
design best practices




the target audience.
practices and/or
are not followed or








content need some
content is not of value








improvement.
to the target










audience.


XHTML
-----
Each Page passes
No page passes


Validation




XHTML validation












External CSS file is
External CSS file is




CSS Validation
-----








present and passes
not present or does








validation
not pass validation


Other requirements: (80 Points)






Outstanding
Average
Needs Improvement


5
2.5
0
Visual Appeal
Use of color, contrast,
Appealing to target
Not appealing to target


text, graphics is
audience in all but
audience in more than


appealing to target
one area.
one area


audience




Navigation
Easy to use,
Inconsistent or
Missing


consistent
difficult to use


Page Titles/Logo
--
Description and
Missing or do not include
Area


include the
the site/company name




site/company name


Tables
--
Correct syntax
Missing or incorrect






syntax
Graphics
--
Correct syntax
Missing or incorrect






syntax
Animated Image
--
Correct syntax
Missing or incorrect






syntax Missing or






incorrect syntax
E-mail Link
--
Correct syntax
Missing or incorrect






syntax
Outside Link
--
Correct syntax
Missing or incorrect






syntax
Internal Link
Correct syntax
Some incorrect
Missing or incorrect




syntax
syntax
Meta tag
Correct syntax
Correct syntax
Missing or incorrect


(description meta
(description meta
syntax


tags), excellent
tags), adequate




selection of keywords
selection of




and meaningful
keywords and




description
description


Form Coding
Correct syntax,
Correct syntax
Missing


meaningful form






element names




Form Processing
Form invokes server-
Form information
Form not configured for


side processing to
not processed
processing


send information in e-
correctly




mail




JavaScript dialog
When a page is
The alert is not
The alert box is not
box
exited, an alert box
coded correctly
configured for any of the


will appear


pages
JavaScript dialog
When one page load,
The alert is not
The alert box is not
box
an alert will appear
coded correctly
configured for any of the






pages
XHTML Validation
Required number of
Less than the
No pages pass


pages pass
required number of






pages pass


CSS Validation
External CSS file is
External CSS file is
External CSS file is not


present and passes
present but does not
present or does not pass


validation
pass validation
validation
Mobile and Print (40 Points)






Outstanding
Average
Needs Improvement


10
5
0
Mobile layout
Mobile version has a
Website covers
Does not have mobile


good layout and
both mobile and
version.


automatically switches
desktop but the




between desktop and
client has to switch




mobile layout depending
manually.




on the client.




Mobile content
The content of the
Some content is not
Does not have mobile


website is suitable and
suitable for this
version.


readable in mobile view.
view.




Does not exceed the






device’s screen.




Print layout
Print version has a good
Some contents are
Does not have print


layout.
exceeding the
version.




width size.


Print content
All the contents are
Some contents do
Does not have print


readable and fit the
not fit or not
version.


paper.
readable.