webDev Syllabus

Course Highlights

Target Population: This course is intended for students, professionals, and marketing people interested in creating and publishing web sites. No previous experience with HTML or programming is required.

Here's what you'll learn by taking this course:

A working knowledge of the XHTML elements (HTML using the new XML specifications). This is critical information that you'll use every time you work with web pages.
Design using CSS (Cascading Style Sheets).
SEO - Search Engine Optimization - Getting your clients' pages to display at the top of search engine listings.
Using DreamWeaver® as a professional, web-development tool (this is an optional section of the course)
Publishing pages to the Web using FTP (File Transfer Protocol)

The Capstone Project for this course involves creating a working web site, working with an actual business. These projects often turn into paying jobs for people completing this course. Here is the Student Showcase showing what other students have done for their capstone projects.

This course uses up-to-date teaching techniques allowing you to learn by reading, listening, experimenting, and writing your own code. Each module has specific learning activities designed to help you learn in an interesting and fun manner.

This course is part of the Web Programming Certificate program at South Central College.

Course Details

Web Development - COMP1140 - Spring 2009

Online and Face-2-Face via D2L. http://southcentral.edu/students/

Credits - 4 credits

Required Textbooks:
HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro, PeachPit Press ISBN 0321430840

Optional Texts:

Secrets of a Web Developer by Peter K. Johnson. This is a collection of all the tutorials presented as part of this class. This 300-page book is spiral bound so it will lay flat while you work through the tutorials.

Web Development and Design Foundations with XHMTL, Fourth Edition by Terry Felke-Morris, Pearson/Addison Wesley. ISBN 978-0-321-53019-6. This text has more step-by-step instructions which some students prefer.

Optional Text for DreamWeaver:
Adobe DreamWeaver CS4 Complete by Shelly Cashman, Thomson Course Technology, ISBN 978-0324788310.

Suggested Reference Tool:
XHTML Spark Reference Chart from Banes & Noble - Keep this chart handy to help you with the XHTML and CSS code you'll be using in this course.

Required Software:

NotePad++ (or a similar text editor that uses color coding) - Available free at NotePad++ . Text editors are used in several computer careers courses.

GIMP - The GNU Image Manipulation Program available from http://www.gimp.org. This is free, open-source software.
If you own a copy of PhotoShop you may use it as an alternative.

FireFox browser with the FireBug add-on. Available at http://www.mozilla.com/en-US/firefox/all.html. This is an open-source browser with many excellent extensions that will make your programming much easier.

Optional Software: DreamWeaver CS3 - Educational licensed versions are available at greatly reduced cost through the bookstore.

It is recommended that you have at least one flash drive to store you work and class information. (Please back up your data on a regular basis!)

For more information contact: Peter Johnson, Instructor
email: Peter.Johnson@southcentral.edu
phone: 507 389-7201

Prerequisites

Successful completion of Foundations of Computing (COMP1102 with a C or higher), or a working knowledge of the Windows operating system and file management.
Minimum typing speed of 20 wpm (35 wpm recommended). Find your typing speed at http://typingtest.com

Course Goals:

Communicate effectively using today's technologies. (email, discussion forums, and other Web- based tools)
Create and publish web pages on the World Wide Web.
Establish a professional, client-based attitude, toward web design.
Utilize the Web as an essential marketing tool.

Core Abilities:

Communication.
Communicate, Communicate, and Communicate.
Critical Thinking.
Demonstrate effective problem solving.
Citizenship and Professionalism.
Be professional by demonstrating integrity, honesty, and by meeting deadlines.
Technological Literacy.
Demonstrate effective learning using a computer as a tool

Learning Objectives

1. Demonstrate how to design a web page as a communication tool
a. Establish a method to determine a business partner's needs and expectations.
b. Describe the roles of a web designer, web developer/programmer, business partner, and end-user.
c. List characteristics on a web page that can slow or stop communications with the end-user.
d. List characteristics on a web page that enhances communications.

2. Utilize communication tools to meet the needs of a business partner.
a. Utilize email and the Web itself to maintain communications with a business partner.
b. Utilize diagrams and web sites to help explain how pages are "published" on the Web.
c. Utilized hand-drawn layouts as a communications tool.
d. Utilize a list of objectives and tasks to professionally communicate the web development process with your business partner.
e. Use face-to-face meetings (when feasible) to discuss ideas and show progress of the web site.

3. Describe how the World Wide Web works.
a. Conceptualize how the World Wide Web works.
b. Demonstrate how a browser parses text information.
d. Describe the W3C and its role with the Web.
e. Describe the relationship between client and server.
f. List various client/server relationships found on the Web.
g. Describe why the client/server concept is a critical element of the Web.

4. Use the basic HTML commands to create a web page.
a. Create an web page using the essential HTML commands common to every web page.
b. Display the web page file using a browser without going out to the Web.
c. Incorporate effective commenting in a web page.
d. Demonstrate the value of a header comment block for each web page.
e. Create a useful skeleton (template) to speed web page development.
f. Utilize at least three different heading tags in a web page.
g. Establish a working system for developing HTML code working between the HTML code editing window) and viewing the page (the browser).

5. Demonstrate the different LIST elements.
a. Demonstrate how to display a bulleted list on a web page.
b. Demonstrate how to display a lettered list on a web page.
c. Utilize at least three special characters on a web page.
d. Add a horizontal rule on a web page for increased readability.
e. Use the <img /> element to incorporate an image on your web page.

6. Utilize XHTML rules to create valid web pages.
a. List the advantages of XHTML.
b. List the five rules that must be followed when using XHTML elements.
c. Demonstrate what an empty element looks like.
d. Point out the difference between an element and an attribute.
e. Discuss what a document type definitions (DTD) is and why it is used with XHTML web pages.
f. Validate your XHTML web pages using a tool such as the W3C Validator or the Firefox HTML validator add-on.

7. Use a photo editing program to create graphics suitable for web use.
a. Download and install GIMP.
b. Modify a digital photo so it is web-ready.
c. Create a gradient to use as a background image.
d. Locate and use tutorials to expand your knowledge of the editing program.

8. Use color and graphics effectively on a web page.
a. Incorporate graphics on a web page.
b. Utilize the alt=" " attribute with all graphic images for the search engines and users who are blind.
c. Use an appropriate background color for your web pages using CSS.
d. Establish and document a color scheme for a web design.
e. Create web pages that communicate to all users (including those with color blindness).
f. Demonstrate knowledge of hex color codes by using them as part of your web pages.
g. Utilize the ALT attribute appropriately with all graphic images.
h. Use the basic CSS syntax to create a specific style for at least five different HTML elements.

9. Use hyperlinks and anchors on a web page.
a. Use relative file references instead of absolute references.
b. Create and use hidden anchors on a page.
c. Create hyperlinks to anchors located on the same web page.
d. Create hyperlinks to other pages.
e. Create hyperlinks to anchors on other pages.
f. Create hyperlinks to other web sites.
g. Make an image into a hyperlink.
h. Create hyperlinks to an email address using an email client.
i. Create hyperlinks that allow users to download files.

10. Publish a web page using FTP (File Transfer Protocol).
a. Draw a diagram demonstrating how FTP works.
b. Demonstrate use of FileZilla or similar software.
c. Determine why graphics must be FTPed separate from HTML files.
d. Demonstrate organization of web space using folders and sub folders appropriately.
e. Determine a useful and valid domain name for a customer.
f. Write meta tags that will increase page rankings on various search engines.

11. Demonstrate how the TABLE elements are used in a web page.
a. Create a simple web page containing a table with multiple rows and columns.
b. Incorporate a table with comments in the web template to speed development time and simplify maintenance.
c. Use CSS to style table components.
d. Create a table that does not have borders.
e. Create a table with cells that span several columns or rows.
f. Create a table inside a table, or nested tables.

12. Use the Design Principles and the Design Process as an integral part of your web design.
a. Demonstrate the design principle of PROPORTION using graphics and text on a web page.
b. Demonstrate the design principle of BALANCE between items on a web page.
c. Demonstrate the design principle of HARMONY using color a web page.
d. Demonstrate the design principle of CONTRAST using color and/or graphic elements on a web page.
e. Demonstrate the design principle of UNITY using a color scheme on a web page.
f. Demonstrate the design principle of RHYTHM between items on a web page using repetitive elements.
g. Demonstrate The Design Process in developing a professional web site

13. Utilize cascading style sheets (CSS) to control the style of a web page.
a. Use the class attribute to create styles that are repeated on the page.
b. Use the ID attribute to create a style for a single item on the page.
c. Use the pseudo attribute to create a "hover" affect with a hyperlink.
d. Demonstrate the use of comments in a CSS.
e. Utilize the three types of styles (external, internal, and inline) in different web pages.
f. Use CSS to create a position information on a web page (2 or 3 column layouts)
g. Use the <div> and <span> elements appropriately.

14. Use IMAGE MAPS on a web page.
a. Describe how an image map works from the browser's point-of-view (include the word "parsing" in your description).
b. Graph a printed picture 300x300 pixels to demonstrate the common coordinate system.
c. Graph a printed picture 100x100 pixels to demonstrate the common coordinate system.
d. Demonstrate what will happen if the size of the graphic is changed after the image is mapped.
e. Using a photo editing program such as GIMP or PhotoShop, create an obvious image map with at least three hyperlink areas.
f. Include normal links to meet Section 508 of the ADA guidelines.

15. Use MULTIMEDIA to enhance the user experience.
a. Discuss how plug ins work including advantages and disadvantages.
b. Embed a movie from an external site such as YouTube in a web page.
c. Embed a Windows Media Player or Quicktime file in your pages.
d. Include other multimedia files in your pages such as PDF and PowerPoint.
e. Include Java applets as part of your web site
f. Include Flash files as part of your web site.
g. Describe how the file size affects the user's experience, especially with the huge files that are common with multimedia.

16. Use FORMS to get information from the user.
a. List at least five different form objects that can be used to obtain information from users.
b. Create a form on a web page using the <form> tag.
c. Consistently use standardized prefixes for all form object names.
d. Demonstrate using input boxes within a form.
e. Demonstrate using radio buttons/option buttons within a form.
f. Demonstrate how to use selection lists within a form to obtain consistent input from users.
g. Demonstrate using check boxes for yes/no input within a form.
h. Demonstrate using text areas within a form for free-form input from users.
i. Demonstrate using submit and reset buttons to handle the information collected by a form.

Use a CMS (Content Management System) to create a dynamic web site.
a. Describe what a blog is and how they can be useful to an organization.
b. Create a new MySQL database on a web server using cPanel.
c. Install a CMS such as WordPress on a web server
d. Change the appearance of the CMS using pre-written themes
e. Customize a theme using CSS
f. Add at least three modules to increase the capabilities of the CMS.

Grading

A   97-100%
A- 90-96
B+ 87-89
B    84-86
B-   80-83
C+ 77-79
C    74-76
C- 70-73
D+ 67-69
D    64-66
D- 60-63
F    Below 60%

The grading for this course is performance-based. You will not be graded a curve. This means that your grade is based on the work you do and not on what grade others in the class receive.

As your instructor I am the record-keeper of your points. I do not “give you a grade”; I only keep track of the scores you receive.

You will earn your grade by demonstrating your knowledge of the learning objectives listed at the bottom of each learning activity page. Complete the work according to the specifications and you will receive points accordingly.

One hint: This is a project and participation-based course. For example, most projects are worth 25 points while a quiz in the same module might only be worth only 10 points. This focuses your efforts on demonstrating your knowledge in applying your learning, not just knowing the facts or memorized information. (It also makes the things you learn in this course much more useful in the real world!)

Course Policies

Be responsible for your own actions.

Respect due dates - No late projects, papers, or quizzes will be accepted unless you have made prior arrangements in writing with the instructor and have a valid and documented reason. All late projects that are accepted will automatically drop one letter grade.

Quizzes - Make-up quizzes must be done on or before the next class session. 10% will automatically be taken off the total available points on all make-up exams.

Incomplete - An incomplete is granted due to serious extenuating circumstances (e.g. a death in the immediate family, hospitalization, etc.) near the end of the semester when the majority of the coursework has been successfully completed. An incomplete will not be granted for failing work.

Cheating - All graded projects must be your own work only. Cheating or plagiarism is a serious breach of academic ethics and could lead to sanctions including expulsion from college. When taking tests, protect your answers from others. If cheating is discovered, all participants will be penalized.

Special Needs -
If you have a disability and need accommodations to participate in the course activities, please contact your instructor as soon as possible. This information will be made available in an alternative format, such as Braille, large print, or cassette tape, upon request.

Student contributions - Students are expected to:
-- Participate in course discussions and actively participate within their team.
-- Complete all projects on or before the deadline.
-- Read all assigned material before class or chat sessions.

The Bottom Line -
I am here to help you learn and understand the material presented in this course. Please let me know if you do not understand any concepts or projects in this class. Feel free to clarify any questions you may have during class, at my office, or via email. I am also open to any suggestions you may have that would make this course more interesting and/or useful.

Peter K. Johnson

Web Development

Syllabus - COMP1140