CIS 287 World Wide Web Development Fall 2010 - Blended Instructor: Jeni Patton Class Day: Tuesdays 515-5328 office LCC 1241 Class Time: 12:115 1:30 PM pattonj@cochise.edu Room: LCC 1203 IM jenipatton@hotmail.com (do not send email to this address) Office Hours: At these times, I am in my office and no appointment is necessary: Drop by, email, call or Instant Message. If you see me online at other times (evenings, weekends), IM or email pattonj@cochise.edu for a prompt response. Mon 8:30-11:30am, 1:30-2:30pm Tue 8:30-9:15am, 10:30-11:30am, 1:30-2:30pm Wed 10:30-11:30am Thur 10:30am-12:15pm Fri 8:30-9:00am Other times by appointment Textbook: Carey, P. (2008). New Perspectives on HTML and XHTML Comprehensive. 5 th ed. Course Technology. ISBN: 1-4239-2546-7. Student Online Companion: http://oc.course.com/np/html5 Required Materials: USB drive. Course Description: Provides learning opportunities in Web design and authoring. Emphasis is placed on cohesive Web design and Web authoring environments. Use and management of text, graphics, video, and audio through hypertext links are also covered. No programming experience is required. Prerequisite: CIS 185 with a "C" or better. Expected Outcomes: To complete this course, the student will: Design a Web site of at least 5 pages addressing a single topic Apply appropriate HTML tags to present the Web site Employ CSS, tables, frames, and forms to enhance the Web site Publish the Web site on the Internet Analyze an existing commercial Web site for effectiveness Attendance Policy: Plan to attend all classes. If you have more than one (1) absence from class, the instructor may drop you from the class. The effective date for reporting purposes will be the date of the first absence per Cochise College policy. If you must be absent for a class, contact the instructor and make alternate arrangements at the earliest possible opportunity. If you are absent from a class for any reason and miss an assignment due date, it is your responsibility to get that assignment to the instructor prior to the next class meeting. You are required to participate in class discussions and in-class assignments. You are expected to be on time for class and to stay for the entire class period. Unless prior arrangements have been made with the instructor, two late arrivals or early departures equal one unexcused absence. Time Requirement: This class is 3 semester credits over 16 weeks. A 3-credit class meets approximately 3 hours per week. This is a blended learning class: Our class meets for about 1½ hours in the classroom and the rest of the class meeting time is lab time on your own schedule. If you do not have a computer with high-speed access, you may use the Computer Lab on campus. Either way, it is your responsibility to make sure all work is done on time!
A 3-credit class requires reading and homework outside of class. Expect to spend an additional 6-9 hours per week outside of class working through the textbook and working on the assignments for your Web site. Plan your schedule accordingly. Helpful Hint: Do NOT try to do all the work for the class in one sitting; spread it out over the entire week. Take frequent breaks. If you get stuck on something, give it a rest and come back with a fresh perspective. Classwork/Assignments: Read and work through the tutorials in the book. During office hours and other times by appointment, the instructor is available to answer questions and help with problems. If you have questions, ask. If you need more details or more examples, ask the instructor. After you ve worked through the tutorial, work on the assignment. Assignments are to be uploaded to your Web directory (except the first, storyboard assignment). If you are also taking or have taken CIS 244, plan to incorporate your graphics from that class into your website for this class. Assignments are graded on meeting the assignment criteria (following good design principles helps). Assignments are due (via an email notification to the instructor) by Noon on the Thursday following the due date, unless changed by mutual agreement with the instructor. A late assignment will receive -5 points for every 24-hour period it is late. Be sure to put CIS287 in the subject line of emails. If your name is not obvious from your email address, be sure to put your full name (e.g. Jeni Patton) in the Subject line or body of the email. Exams: You will complete a take-home midterm exam (commercial site comparison), and a peer review as a final exam. You will have at least two weeks to work on each exam. Evaluation Tool Quantity Points per Total Points Web Site Assignments 10 100 1000 Mid-term Exam 1 100 100 Peer Review 1 100 100 Total 1200 Grades: Grades are assigned as follows: 90% - 100% A 80% - 89% B 70% - 79% C 60% - 69% D Below 60% F Withdrawal: A student who stops attending, responding to emails, and/or stops turning in assignments will earn a grade of 'W' in this class, unless prior arrangements have been made with the instructor. Students who are dropped by the instructor for non-attendance do not receive a refund. If you are receiving financial aid, a 'W' grade may affect you financially. It is the student's responsibility to fill out and turn in the paperwork to withdraw officially from any class. Failure: A student must have attempted 80% of the course work to earn a grade of 'F' in this class. Incomplete Grade: A student must have attempted the first 80% of the coursework for this class to request an Incomplete Contract and earn a grade of 'I' in this class. Both the student and the instructor must sign the Incomplete Contract. An incomplete allows one semester to complete the requirements for the course. If the incomplete is not replaced by another grade within one semester, the 'I' is automatically changed to an 'F' by the college. Academic Integrity: Cheating and plagiarism are not tolerated. Cochise College regards both as violations of Academic Standards. This policy includes copying someone else's work and having someone do the work for you. Any violation will result in a zero on the assignment and the student may be subject to academic discipline by the college per Policy 5763.
Problem Resolution: It is always best to discuss a problem with the person with whom the difficulty exists; therefore, the instructor appreciates having the opportunity to address any problems as soon as they occur. Should you have any problems with this class or this instructor that you are unable to resolve satisfactorily with the instructor, contact the CIS Department Chair, Clyne Namuo, namuoc@cochise.edu, 515-4516. ADA Statement: Students wishing to receive an accommodation for a disability should make an appointment with the Office of Disability Services, Ken Laux, lauxk@cochise.edu, 515-5337. MSDN Alliance Benefits: As a student taking a CIS course at Cochise College, you have access to selected Microsoft software at NO COST. You may borrow a CD and obtain a registration code from the library. No manuals are provided and you must return the CD. See the front desk of the library for a complete list of available software or visit http://msdn.microsoft.com/en-us/academic/bb676724.aspx
CIS 287 Assignments You will build a Web site that contains at least five pages. Choose a topic that interests you--it will make the course much more interesting. Suggestions include family, hobbies, or a business presence (an ecommerce site is beyond the scope of this class). All the assignments will build on this subject to add pages or enhancements to your Web site. Each time you add another element to your Web site you will be evaluated. I'll provide comments and a grade for each assignment. The completed Web site is your final project for the course. Assignment Information Due 1. Web Site Subject Turn in your topic and a detailed storyboard (hand-drawn is and Storyboard fine) of your planned Web site. Include navigation and where you anticipate having graphics. Aug 31 2. First Page Develop and publish the index.html page for your site. Carefully pick your layout and color scheme! 3. Links/Navigation Add at least two more pages to your site following your original storyboard. Provide links between the pages in a consistent navigation "bar." Include an email link to yourself (the web developer) on at least one page. 4. External Style Sheet Create an external style sheet for your site and link to it on all the pages you've created for a unified appearance. The style sheet must have at least five different object styles defined (e.g. body, h1, h2, p, div, a:link, a:visited). 5. Graphics Add appropriate graphics with alt attributes to your site. Include at least one GIF and one JPG. Be sure your graphics contribute to the story your site tells. 6. Box Model for Use the Box Model for an effective page layout on at least Page Layout/ Tables one page of your site. Use classes, pseudo-classes, and pseudo-elements. Also, add at least one table to your site that holds. 7. Forms To your site, add a form that sends an email message. It should also direct the user to a thank you page upon submission and contain site navigation consistent with the rest of the site. (Use geocities for this one.) 8. Your Choice Add two different elements of your choice, relevant to your site: A) Image map with at least three links (Tutorial 2.2) B) JavaScript (customized or modified) (Tutorial 10) C) Multimedia file (sound or video) (Tutorial 7) D) Java applet or ActiveX control (Tutorial 7) 9. Frames Incorporate frames on at least one page of your site. Divide your page into at least three areas. Links in one area should change the in another area. 10. XHTML Convert your HTML code on at least three pages to wellformed, valid XHTML 1.0 Transitional. Sep 7 Sep 14 Sep 21 Oct 5 Oct 19 Oct 26 Nov 9 Nov 23 Nov 30 The first assignment may be hand-drawn and turned in hardcopy in class. All other assignments should be submitted by sending an email with your name, CIS 287, the assignment you are submitting, and the URL of the page(s) to be graded. You will be graded on meeting the assignment criteria in addition to valid code, proofread, and good design. Assignments are due by Noon on the Thursday following the due date. Be sure to put CIS287 in the subject line of emails!
Storyboard Assignment Decide on a topic for your Website. Include a brief written statement about the audience and purpose for your planned site. The audience is the group of people who will use your website. The purpose of your website determines its and organization for your audience. Audience and purpose considerations will guide color selection and page design for your site. Pick your topic so that you can envision at least five different pages about it. If you already have a website from CIS 287, use that. CIS 287 develops a homepage (index.html), a page with frames, a form, and some tables. For CIS 244, you will develop a background graphic, site navigation graphics, a logo, an image map with links, and a photo gallery. Include as much information as you can in your storyboard to make things easier later. You are NOT stuck with what you put on your storyboard; things will change as you develop your Web site. Work on making a coherent, cohesive plan for your topic. Below is a storyboard overview. You might begin to consider details such as background image, background color, font, font size and color, text (), links (internal, external), and file naming conventions. logo logo Site Title index.html linka linkb linkc linkd pagea.html paged.html pageb.html pagec.html
Common Website Page Layouts The average page on the web is designed for a screen resolution of 1024x768 pixels. Therefore, a page width of about 900 pixels is a good choice. A fixed width layout in which the page is centered, and the is displayed in columns is the most common. (Fixed width layouts have limitations -- such as when viewed in Mobile browsers, but that is for later discussion). For more information about page elements, visit http://www.iteracy.com/resources/anatomy-of-a-webpage/ Here are pictures of some common site layouts: http://www.webdesignfromscratch.com/web-design/current-style.php So, to get started, I might choose a layout like this (choose your own and include relevant details): Logo Site title Primary Site Navigation Links/Buttons Secondary Site Navigation or Section Navigation Content Column 1 Content Column 2 For Future Development: Space for search box, ads, promos, pull quotes, pictures, newsletter signup, etc. Copyright statement, Email links
Week Date Topic Assignment 1 2 3 4 5 6 7 Aug 24 Introduction & Procedures Tutorial 1 Basic HTML Review, with Links Appendix E Aug 31 Color & Images Tutorial 2 (NOT Image Maps, pages 81-88) Design Issues for Usability & Accessibility Assignment 1 due (storyboard) Appendix A, Appendix D Sep 7 Cascading Style Sheets Tutorial 3.1, 3.2, Appendix F Assignment 2 due (index.html) Sep 14 Intro to Dreamweaver/HTML Editors Dreamweaver Tutorial Assignment 3 due (2 pages with links) Tutorial 4.1, 4.2 Sep 21 The CSS Box Model Tutorial 3.3, 4.3 Sep 28 Tables Tutorial 5 Assignment 4 due (CSS) midterm available Oct 5 Show & Tell Web Sites in Progress Assignment 5 due (graphics) 8 Oct 12 Forms Tutorial 6 9 10 11 12 13 14 CIS 287 - World Wide Web Development Fall 2010 - Blended Oct 19 Multimedia - Sound, Video, Applets Tutorial 7 Midterm Exam due Oct 26 Image Maps Tutorial 2.2 Nov 2 Frames Tutorial 8 Nov 9 Creating an XHTML Document Tutorial 9 Nov 16 JavaScript Tutorial 10 Assignment 6 due (page layout) Assignment 7 due (form) peer reviews assigned Assignment 8 due (2 multimedia) Peer Reviews due Nov 23 Career Applications (working with clients) Assignment 9 due (frames) 15 Nov 30 Web Design Review Assignment 10 due (valid XHTML 1.0 Trans) 16 Dec 7 Web Site Presentations 17 Dec 14 Intro to Photoshop