Download 1_Project Submittals_F13 - Faculty Web Hosting

1. Project Submittals
This handout describes the required format for submitting project assignments. All projects must use
this format and the final submittal must be a bound report. Each assignment will be submitted in a
clear plastic binder. Attach firmly a USB flash drive.
The remainder of this handout contains a template for a project submittal, showing these parts:
1.
2.
2.
3.
4.
5.
6.
A title page, assignment title and student first and last names.
A problem description section with the objectives.
A Website organization (a site map) with a description.
Screenshots of the web pages.
A file source code (highlight the key component/attributes using a marker).
A test plan and results in the table format.
A file source code (using a marker highlight the key component/attributes and the code you
added or modified, otherwise expect up to 10% reduction of the project grade.
7. A test plan and results.
See details for each part in section 2. Project Evaluation
Repeat sequentially items 4 – 5 for each web page.
All parts include in your source and each of the sections is preceded by a divider as follows:
//====================================================================
use the following two pages (a cover page and a project evaluation page) in your report
//====================================================================
A regular project cover page:
1|Page
Course Name (CMPS-318)
Fall 2012
TR 12:40 – 2:10 pm
Assignment # and Title
Due Date: Enter date
First Last Name 1
First Last Name 2 – highlight only one name
Group #
e-mail addresses
Submitted to
Prof. Jozef Goetz
University of LA Verne, La Verne
Major : specify your major
Concentration: for example Internet Programming
Course Name (CMPS-318)
2|Page
Fall 2012
TR 12:40 – 2:10 pm
Final Project Title
Due Date: Enter date
(See section 4 Final Project)
My project is published at URL:
Each of you must stated
your contribution here:
 each website you developed,
 how much you contributed in the css file and
 in other components
 otherwise I will divide your grade by 2
Your Name(s)
Group #
e-mail address
Submitted to
Prof. Jozef Goetz
University of LA Verne, La Verne
Major : specify your major
Concentration: for example Internet Programming
2. Project Evaluation
3|Page
(scroll down to see requirements for the Final Project)
Grade:
Submitted
Description
Design
Screen
shots
Code
Test plan
Grading for each project/program will be as follows:
1. Problem Statement (10%) with the regular projects (very often you need to copy a
description from the textbook – usually the first paragraph of the case study)
Project case: Description with the purpose (10%)--A clear, correct description using
good grammar and spelling is worth 10%.
Moreover for the final project include the following questions and answers from your
phase 1.
1.
2.
3.
4.
5.
6.
2.
What is the purpose of the site?
What do you want the website to accomplish?
Who is your intended audience?
What opportunity, problem, or issue is your site addressing?
What type of content is included in your site?
List at least two related or similar sites found on the Web.
Design (10%). A website organization - always provide a short description with a site map
e.g. Figure 2.37 p.73 and starting from chapter 6 a wireframe e.g. Fig. 7.6 (p. 285) or 6.40
(p.272) or (Figure.2.38).
For the final project: Design only - A website organization (a site flowchart) with
the content sheet description (10%) – see phase 3 and 4:
 In your final project describe at least five (including item 1) out of
seven of the following issues (see references below in Class
Presentation section):
1. how CSS and JavaScript were used
2. website navigation
3. web design principles
4. web page design – best practices
5. page layout design techniques (Ice, Jello, Liquid)
a. tables,
b. CSS layout
6. content presentation
a. text design
b. fonts
c. paragraphs
d. color
e. graphic design
4|Page
f. multimedia
7. accessibility
Screenshots of the web pages (20%). Provide all webpage screenshots including for
mobile and print screenshots, moreover at least three (3) sets of sample screenshots to
demonstrates how it works your contact page with introducing errors and the screenshot
when the user enters the submit button. Capture of any test data content used as input to your
program if applicable. Capture the screen using ALT + PrntScrn keys, and paste into your
word doc. using CTRL + V
4. Website code (45%) – highlight HTML and CSS code and elements of code which you had
to add or modify, otherwise expect up to 10% reduction of the project grade.
 Each time when you change or insert a code you need to put a comment in front of
the code and sometimes at the end of the code as well.
 All Addition/ Modification/Deletion/Replacement should be abreviated to
AD/MOD/DEL/REP respectively.
 Students should follow the following format for comments :
//[date] [your name] [AD/MOD/DEL/REP] [efected # of lines] [-short
description of the code]
Example:
<!-- 3/8/13 JGoetz AD 5L - define the UriMapper object -- >
highlight new or modified or replaced code
<!—end of define the UriMapper object -- >
Note: The comment is indented by 5 spaces!
3.
Your code should be easy to read, well-organized, well-structured, wellcommented and well-documented code is worth 20%.
You will lose points for insufficient documentation, unnecessarily complicated
code, or bad style. As a general rule, the harder it is for me to understand your code,
the more points I will deduct
Fulfill all requirements of phase 4 (see below) for the final project only. Moreover,
highlight in red all CSS references you use in the body of each web page (e.g. <div
id="gallery"> ) for the final project.
5.
Test plan and results in the table format for each project (15%) – include items 10a –
10b, and 10d described at the Testing Your Project section. Moreover, the final project
should include the item 10c as well.
Your final project should accomplish all project objectives including all required web page
elements.
Use the following sections:
Webpage, code and validator screenshots
using a marker highlight the key component/attributes and the code you added or modified)
5|Page
… |etc.
Design with a site map
Sequence: Webpage, code and validator screenshots
using a marker highlight the key component/attributes and the code you added or modified)
Sequence: Webpage, code and validator screenshots
using a marker highlight the key component/attributes and the code you added or modified)
… |etc.
|
Test Plan and Results
|
References:
[1] Terry Felke-Morris, Web Development & Design Foundations with HTML 5 6/E, Addison Wesley
Higher Education - Pearson, 2013, Print ISBN-10: 0-13-278339-8, Print ISBN-13: 978-0-13-278339.
[2] Internet & World Wide Web: How to Program, 5/E by Harvey & Paul Deitel & Associates,
Prentice Hall, 2012, ISBN: 0-13-215100-6, ISBN-13: 978-0-13-215100-9.
3. Final Project Milestones and Requirements
All references below refer to:
[1] Terry Felke-Morris, Web Development & Design Foundations with HTML 5 6/E, Addison
Wesley Higher Education - Pearson, 2013, Print ISBN-10: 0-13-278339-8, Print ISBN-13: 978-0-13278339.
Phase 1. Conceptualization. Website Topic Approval: The topic of your website must be approved
by your instructor. Using a word processor, prepare a one-page double-spaced written questions
and answers separately as follows:
1.
2.
3.
4.
5.
What is the title and purpose of the site?
What do you want the website to accomplish?
Who is your intended audience?
What opportunity, problem, or issue is your site addressing?
What type of content might be included in your site?
6|Page
6.
List at least two related or similar sites found on the Web.
Phase 2. Planning Analysis Sheet: Using a word processor, write a Planning Analysis Sheet that
includes the following headings:
1.
2.
3.
4.
Website goal: describe the goal of your website in one or two sentences.
What results do I want to see?
List the working title of each page on your web.
What information do I need?
 List where you will obtain the content (facts, text, graphics, sounds, video) for the web
pages you listed above.
Phase 3. Design. Site Flowchart and Content Sheets: Using a word processor, PowerPoint, or Visio
draw a flowchart (storyboard) of your website that shows the hierarchy of pages and relationships
between the pages.
1. Website map that shows the navigational
flow of a website
2. Create a website before actually creating
and linking the site’s pages.
3. Create a content sheet (see Fig. 10.3 p.417
for a sample content sheet) to document
each page of the website.
Phase 4. Production. Source Code of Your Project: Your project should address the following
items in this phase:
1. Provide the URL of your website.
2. You must provide at least eight main pages (main menu) for a group of two and five for a single
student. Examples of pages are as follows: Home, Services, Products, Financing, Listings,
Activities, Jobs, Services, Reservations, News, FAQs, Ask for Help, Testimony, Event
Calendar, Documents, News Letter, Guest Book, Contact Us, Email Signup, About Us, Site
Map, Google or MapQuest Map Location for navigation on each page. You may use a right
column of the News to list links to other websites. Moreover, consider to add the following links
facebook, twitter, linked-in, youtube at the footer
3. Develop your Web project using CSS:
a. Use two (slide 53 HOP 6.7 ch6. or p.243-5) or three (ch7. p.285) Column Page layout for
your web pages
b. Use CSS imitation buttons for navigation (HOP 6.5 p. p.243-5) or CSS Vertical or
Horizontal Navigation Layout Using Unordered List (slide 38-39 ch6 or p.239-240)
7|Page
and the text-based navigation bar at the bottom of your pages (e.g. HOP 4.3 p.141-2).
Implement :link, :visited, and :hover pseudo-classes p.245.
c. Use breadcrumb trails (slide 14 ch5. or p.204).
d. Style form with CSS (ch9. p.379). Rather configure the form with HTML 5 attribute and
values (ch9. HOP 9.6 or p.391).
4. Use three different external style sheets for your browser, printer (slides 37-39 ch.7 or p.294-6)
and a mobile device (p.300, HOP 7.7 and Project ch.7 Task 5).
5. Highlight (use yellow color) elements of code which you had to add or modify in addition to
what you copied from the textbook/lecture notes or samples. Highlight in red all CSS references
you use in the body of each web page (e.g. <div id="gallery"> ).
6. All CSS group code lines should have comments using /* configure hyperlinks */
7. Embed another Web page using i-frames (such as News, you tube video clip etc.) in one of your
Web pages (p.533-36).
8. Add keywords and description meta tags to each page (p.523).
9. You may include the background sound if you like (section 11.2-11.3).
10. You may include a Site Map.
11. Provide the source files of your web pages and images.
You should have completed five (or eight for the group project) pages of your site.
Phase 5. Testing your final website project
1.
Use WAI Quick Tips to make accessible websites at
http://www.w3.org/WAI/References/QuickTips/ !!!
1.
Images & animations.
a. Use the alt attribute to describe the function of each visual.
2.
Image maps.
a. Use the client-side map and text for hotspots.
3.
Multimedia.
a. Provide captioning and transcripts of audio, and descriptions of video.
4.
Hypertext links.
a. Use text that makes sense when read out of context. For example, avoid "click here.“
5.
Page organization.
a. Use headings, lists, and consistent structure.
b. Use Cascading Style Sheets for layout and style where possible.
6.
Graphs & charts.
a. Summarize or use the longdesc attribute.
7.

8.
9.
Scripts, applets, & plug-ins.
Provide alternative content in case active features such as JavaScript, Java Applets, Flash are
inaccessible or unsupported.
Frames.
 Use the <noframes> element and meaningful titles.
Tables.
8|Page

2.
3.
4.
5.
6.
7.
8.
Make line-by-line reading sensible. Summarize.
Test for Accessibility: Use tools, checklist, and guidelines at
http://www.w3.org/TR/WCAG
Test on two different web browsers and browser versions.
Test 1024x768 and 1280*800 resolutions.
Test using different bandwidths.
Test from another location.
Validate your HTML website using http://validator.w3.org – Markup Validation Service
Validate your CSS with HTML or CSS documents using http://jigsaw.w3.org/cssvalidator/
Provide results in your final project as follows:
Table 5.1 p.211 with your answers in your final project or items from
http://terrymorris.net/bestpractices
10. A test plan in the form of table (specify all links and images for each Web page) as
follows:
9.
Page name
–
list all
pages/files
Test item
Validate
website using
http://validator.
w3.org and
http://jigsaw.w3
.org/cssvalidator/
Outcome
in Mozilla
-specify
version
Outcome
in
Internet
Explorer
or Chrome
- specify
version
Resolution
1024x768
Resolution
1280*800
index.html
Homepage
Correct using
http://validator.
w3.org – attach
a screenshot
Page
Reloads
Page
Reloads
All the
buttons
show
without
having to
drag the
horizontal
lift on the
right or left.
Good
display.
You can see
the table
together
with the
background.
Better
display.
index.html
Menu
index.html
index.html
Buttons
Text Links
Navigates
to the
Menu Page
?
?
Navigates
to the
Menu Page
?
?
?
?
?
?
?
?
index.html
Image
Links
?
?
?
?
?
main.css
?
?
?
Correct using
http://jigsaw.w3
.org/css-
9|Page
Changes
Needed?
Music.html
Music
Music.html
Greg
Thumbnail
Image
Music.html
Jobs
validator/ –
attach a
screenshot
Correct using
http://validator.
w3.org – attach
a screenshot
None yet as page
not made
Page
Reloads
Page
Reloads
Load up
the Full
size image
of Greg
Comes up
with error
as page
isn’t
defined
Load up
the Full
size image
of Greg
Page
saying
Internet
Explorer
cannot
display the
web page
None
None
Phase 6. Launch. Publish & Discuss Project. Publish your project to your website. Show your
website to the class, explaining the purpose behind each page / group of pages.
4. Final Project Report Submittal
Turn in your final project according to 1_Project_Sumittals.doc section “2. Project Evaluation” at
the beginning of the document. Please pay attention to all sections of a document – combine all
phases together in a document as described at the beginning of this document.
Submit your project hard copy in a clear plastic binder with the USB flash drive attached firmly
to your binder. The USB flash drive should include all source files, screenshots, the Power Point
presentation and the final project.
5. Testing Your Project
Follow phase 5.
6. Class Presentation



Your presentation will consist of two parts: the PowerPoint presentation and your website
presentation.
Show your website to the class, explaining the purpose behind each page / group of pages and
answer all questions from the Requirements section below.
Show your website map and address the testing issues by showing the test plan with results.
All the above information put on your Power Point slides.
Requirements:
10 | P a g e
During your presentation
 use Web Developer Add-ons for Mozilla Firefox as much as possible
 show to students CSS attributes for selected HTML elements using ALT+Shift+Y (or
Display Style Information from Web Developer Add-ons) and
 use ALT+Shift+D to display or edit CSS elements
During your presentation please address (have corresponding slides) the following design
issues as follows (see CMPS 318 Lecture Notes for chapter 5, 6 and 11):
1. website organization ch5. p.171
You must have at least 4 slides - one slide per each item number from 2 to 6 specified
below as proof of your implementation:
2. best practices - website navigation (CMPS 318 slides 13 – 19 ch5)
1. Provide:
1. clearly labeled navigation
2. “breadcrumb”
3. Navigation Bars: Graphics and Text based navigation
4. Site Map
5. No more than 3 screen length
3. design principles – CARP (CMPS 318 slides 20 – 22 ch5)
1. CONTRAST
2. ALIGNMENT
3. REPETITION
4. PROXIMITY
4. best practices - web page design (CMPS 318 slides 23 – 40 ch5)
1. Page layout design
2. Text
design
3. Graphic
design
4. Accessibility considerations
5. Above the Fold
6. Web Page “Real Estate”
7. Avoid wide pages
8. Adequate white space
9. Design for your target audience
10. Load time
11. Browser support
12. Screen resolution
13. Wireframe and page layout.
5. page layout design techniques (Ice, Jello, Liquid) (CMPS 318 slides 41 – 44 ch5)
1. tables (use Outline=> Outline Tables => Table Cells from Web Developer
Add-ons)
2. CSS layout (use CSS =>View Style Information from Web Developer
Add-ons)
6. content presentation (use Web Developer Add-ons for Mozilla Firefox as much as
possible):
1. best practices - text design (CMPS 318 slides 48 – 50 ch5)
1. fonts
11 | P a g e
2. paragraphs
3. color
2. best practices - graphic design (CMPS 318 slides 51 – 55 ch5)
3. accessibility (CMPS 318 slides 56 – 65 ch5)
7. Include in your power point results of your project testing from phase 5
8. Show your website (demo) from the university web server.
Power Point requirements:
 concepts should be presented as much as possible visually using diagrams, pictures
etc.
 corresponding words and pictures should be presented simultaneously rather than
successively
 context should be hierarchical
o slides should include nested bulleted or have numbered lists
 Higher level more general info
 Lower level more specific info
 contrast should fit information relevance
 key words should be presented in different color(s) and in bold
=======================================================================
Publishing on the Web CMPS 318 with a Lifelong Learning (UVLL) Attribute:
1. Demonstrate proficiency in skills that sustain lifelong learning, particularly the abilities to think
both critically and responsibly and to access, evaluate, and integrate information.
Students will demonstrate proficiency in skills that sustain lifelong learning by:
•analyzing the problem (overall goals),
•understanding the specific requirements including Web design best practices to build
websites,
•selecting tools and technologies (e.g. Adobe Dreamweaver CS5, Notepad++, WinSCP,
Firebug, Web Developer Add-ons for Mozilla Firefox, Mozilla Firefox and Internet Explorer)
needed to meet the objectives
•arriving at and implementing a solution by integrating programming method – X/HTML
and CSS,
•validating the solution against the requirements through a test phase,
•taking corrective action, if necessary, to address deficiencies discovered,
•integrating information by summarizing/publishing results through documentation and
publishing on the Web.
2. Demonstrate the ability to determine and use the appropriate technology to support information
search and discovery methods.
Students will use appropriate technology to support information search and discovery methods by:
12 | P a g e
•developing a project that involves scholarly information research and discovering the
differences between two types of tools (Adobe Dreamweaver CS5 and Web Developer Addons for Mozilla Firefox) in order to understand, build and test websites. Discover which tools
are more helpful to change HTML and CSS attributes in real time and see right away result
and choose the best fit to developer’s need.
•evaluating capabilities of Web page uploading tools (Open FTP in Internet Explorer and
FireFTP in Firefox Mozilla) first by using them, then using search engines (e.g. Google,
Google Scholar, Google Chrome, Yahoo etc.). Students will make a rubric with the features of
the tools in which they are interested.
13 | P a g e