Course
Assignments
   
  Activity due date

Textbook
case study

Grade alternative

Choose a case study from the back of the chapter in the Web Dev textbook (starting in chapter 2).  Complete the hands-on activites from each chapter as we move through the textbook.  Provide a link to this running implementation from your home page. (100 pts)

If you choose not to do a textbook case study then your final website grade will be doubled (milestone #8).

Nov 15
Week 1

Accessibility exercise: (6 pts)

Post the answers you found for the exercises and your experience on the "Week 1" discussion board on D2L.

Sept 2

 

Week 2

What do you think: (5 pts)

 

Post your opinion about the video on the "Week 2" discussion board on D2L.

 

Sept 9
week 3 Create a simple homepage with a simple CSS: (10 pts)
  • Create a simple webpage using the strict XHTML and proper doctype.
  • The page must include a picture of yourself, your name, and your preferred e-mail address (the one you check most often, and would like me to use).
  • Using the HTML/XHTML Validator (W3C) make sure the page passes the validator.
  • Create a new directory named CSCI304 in the public_html directory of your Linux account on the csci304zimmer server.
  • Place the simple webpage in that directory with the name index.html from which you will link subsequent assignments.
    (That means the url to the index.html page will be http://csci304zimmer.cs.edinboro.edu/~your-user-name/csci304/)

 Info about server: CSCI304_server_details.docx

Sept 14

 

 

 

 

Project assignment
Personal Web Site Project

Purpose: To design, develop, and publish a web site using recommended design practices. Your web site will contain a home page and at least six (but no more than ten) 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.)

You must publish your project to the Internet.

Required components for the website include:

  • Appropriate meta tags
  • One page utilizing tables effectively to display tabular information
  • One e-mail hyperlink
  • Integration of external hyperlinks
  • Consistent banner logo area
  • Consistent main navigation
  • Association with external style sheet (.css file)
  • Integration of web technologies:
    • database component - At least one multiple field table must be created. 
    • posting form - At least one form with multiple fields that post or update data in the database. 
    • query form - At least one form with multiple fields that retrieves data from a database table based on some input. 
    • form validation - client side or server side form validation of your forms should be provided. 
    • CGI scripts - Server-side scripts that use form data to update and/or retrieve data from the database .  
    • dHTML component - At least one component should be incorporated that makes the webpage dynamic (roll-over, hover, ...). 
    • Server-side authentication - Create a username "student" with password "edinboro", so that I can log into the password-protected section.  
    • Other technolgoies - Flash, Fireworks created graphics etc (BONUS)

Chrome, Safari, Firefox and Internet Explorer must render each page. Web site design and implementation should consider mobiel devices. You should use a mobile simulator to check page rendering.

Your web site project will be evaluated on the following criteria:

  • Project Milestones
  • Including all required web page elements
  • Following recommended web site design practices
  • Visual appeal of the site to the target audience
  • Appropriate inclusion of mobile device rendering
  • Accomplishment of project's objectives

 

FINAL DUE DATE:
NOV 30, 2012

 

 

 

 

 

 

 

 

 

 

 

 

 

Week 4

Project Milestone #1: Rubric

Web Site Topic Approval: The topic of your web site must be approved. Using a Word processor submit a one-page double spaced document answering the following questions

  • What is the purpose of the site?
  • What do you want the web site to accomplish?
  • Who is your intended audience?
  • What opportunity, problem, or issue is your site addressing?
  • What type of content would be included in your site?
  • What content should be available on a mobile device?
  • List at least two related or similar sites found on the Web.

Your instructor must approve your topic before you may begin to work on the next phase.

 

Sept 26
week 5

Project Milestone #2: Rubric

Design Document (part 1): Using a Word processor submit the following

Section 1 - Site Goals

  • Describe the goal(s) of your website

Section 2 - User Experience

  • Define the audience
  • List Scenarios
  • Competitive analysis of similar websites

Section 3 - Site Content (incorporate mobile page information)

  • List the working title of each web page
  • List the sources of content (facts, text, graphics, sounds, video, dynamic data) included on each page
  • List the functional requirements (forms and transactions) needed on each page where applicable

Example Completed Design Documents: #1 #2 #3

 

Oct 1

 

 

 

 

 

 

 

 

 

 

 

week 6

Project Milestone #3: Rubric

Site Map: Using a software tool draw a flowchart (storyboard) of your web site that shows the hierarchy of pages and relationships between the pages

Mobile Site Map: Using a software tool draw a flowchart (storyboard) of your web site that shows the hierarchy of pages and relationships between the pages.

 

Oct 8
week 7

Project Milestone #4: Rubric

Wireframe: Use a computer application to create a wireframe for a sample page on your web site that clearly shows the logo, navigation, content, and footer areas. Use a graphics application to create a wireframe and save as a .gif or .jpg file.

Mobile Wireframe: Use a computer application to create a wireframe for a sample page for a mobile device on your web site that clearly shows the logo, navigation, content, and footer areas. Use a graphics application to create a wireframe and save as a .gif or .jpg file.

Color Scheme: Indicate your color scheme for the site.

 

Oct 15

week 8

Project Milestone #5: Rubric

Design Document : Using a Word processor complete the design document. Provide a link to your design document (draft) from your webpage, post a copy on D2L in the dropbox "Design Document - draft", and print & staple a copy for me to markup.

 

Oct 22

week 9

Project Milestone #6: Rubric

Implementation: Three of the webpages should be implemented. Provide a link to your personal web site from your homepage.

Annotated CSS: Provide a separate webpage with an annotation of your CSS. Provide a link to this webpage from your homepage.

Meeting: Individual meetings to discuss your website will be conducted this week. Be prepared to present your website and discuss your design decisions.

Copy: Copy your current website to another directory and create another link from your homepage to the new and improved "final" personal Website. Leave the other directory of pages untouched and the link to milestone # 6 in place for comparison purposes.  Continue working on the copied website, making improvements and adding the technologies required.

 

Oct 29
week 10

Student Critic : Prepare an informal presentation of your website for critic.

 

 

week 11

Project Milestone #7: Rubric

Design Document : Using a Word processor update the design document to include your improvements and your database. Provide a link to your design document (final)from your webpage, post a copy on D2L in the dropbox "Design Document - final", and print & staple a copy for me to markup (if there are no errors, this can be the copy included in your portfolio).

Nov 16
week 12 & 13

Project Milestone #8: Rubric (may be doubled, see grade alternative at the top)
    webpage index for Milestone #8: rubric8.htm

Implementation: All of the webpages should be implemented. Provide a link to your "final" personal web site from your homepage. Leave the link to the original personal website created for milestone #6 for comparison purposes.

Annotated webpage(s): Provide separate webpage(s) with annotation of your final personal website identifying the technologies required. Provide a link to this from your homepage. There should be inclusion of the following in the indicated order below:

  • database component - At least one multiple field table must be created.  An annotated table(s) description should be provided.  If there are several tables then create a separate linked webpage with this information. MAKE IT READABLE!
  • posting form - At least one form with multiple fields that post or update data in the database.  A link & description to this form should be provided.
  • query form - At least one form with multiple fields that retrieves data from a database table based on some input.  This should verify the posted data from the posting form was successful.  A link and description to this form should be provided.
  • form validation - client side or server side form validation of your forms should be provided.  A description of the validation performed on each form should be incorporated in the form description.  If server side validation is used then a link to a webpage with the annotated script should be provided.
  • CGI scripts - Server-side scripts that use form data to update and/or retrieve data from the database .   A webpage with annotated script should be provided.
  • dHTML component - At least one component should be incorporated that makes the webpage dynamic (roll-over, hover, ...).  A description and link should be provided to demonstrate the dynamic component.
  • Server-side authentication - Create a username "student" with password "edinboro", so that I can log into the password-protected section.   A link and description should be provided to demonstrate this authentication.

I can only grade those things that are fully visible.  It is up to you to make sure I can see your server-side scripts, database, etc. through annotation.  Test your website and annotation pages completely.  I will not troubleshoot broken links etc.

 

Dec 3

week 14
&
finals week

Project Milestone #9: Rubric

Presentation: Prepare a 15 minute presentation on your website.   Include discussion of design decisions and demonstration of website transaction, security, and validation abilities.

 

 

Project Milestone #10: Rubric

Portfolio: Create a binder with the following sections and contents

Cover Page

Name
Website Title

URL to Website homepage
URL to your admin homepage
Linux password
MySQL password

Any other authentication pair needed for your website

Design Document Updated/corrected/complete design document
Implementation Identify/discuss design decisions (colors, images, etc)
Identify/discuss site limitations
Identify/discuss site dependencies
Identify/discuss areas of improvement/growth
Identify/discuss security problems and solutions
Identify/discuss site hosting options
Identify/discuss maintenance procedures
Identify/discuss search optimization related to your site
Site printouts

Annotated CSS
     followed by print out of CSS
Screen shot of webpages,
     each followed by the HTML and other supporting files
Print out of Database files

Bibliography Site all sources: printed, online, and human

 

Dec 3, 5, 7
Dec 12 10:15-12:15

 

 

 


Dec 3

Web page
updated
Nov 29, 2012