SMAD 307: Interactive Design for the Web I Section 1 (10724): Tuesday & Thursday, 2:00pm- 3:15pm, Harrison Hall, Lab 0101 Instructor: Katherine Hughes Office: Harrison Hall, 0249 Course Syllabus Spring 2011 E- mail: hugheska@jmu.edu ProfHughesJMU@gmail.com (available for chat during office hours) Office Hours: Monday: 1:00pm- 3:00pm; Tuesday: 3:30pm- 4:30pm; Wednesday: 1:00pm- 3:00pm; or by appointment. Course Description: Study of the principles of creating effective communication for the World Wide Web. Emphasis on the techniques used to design and integrate diverse media elements. Focus on the creation and manipulation of text, graphics, audio and video for the Web. Consideration of interface design and web delivery issues. Course Objectives: 1. Understand terminology, technologies and techniques used in the production of media content for the web; 2. Understand the issues related to web delivery of various media elements; 3. Understand web interface design considerations related to appearance, organization and interaction; 4. Understand advanced web technologies and their integration into a web site; 5. Demonstrate professionalism and good teamwork while producing a high quality, media rich web site; 6. Identify resources for web producers and professional development. Course Overview: Students will meet these objectives by reading and studying the principles and concepts in the assigned readings; by listening and participating in class lectures; and by applying concepts through computer- generated assignments. It is estimated that a minimum of four to six hours per week of independent computer laboratory time will be needed to become proficient in web creation. Assumptions & Expectations: Web developers are self- directed learners and are continually upgrading their skills. Although we will spend a considerable amount of time working with computer applications (i.e. Dreamweaver and Photoshop), no university- level class can or should be devoted exclusively or primarily to learning software - that is the task of trade schools and training programs. You need to have some ability to write HTML. You will get paid more if you know HTML and Web design companies want people who can do hand coding. You will be a more flexible employee if you can do things in different ways. Furthermore, larger web projects require pages that have special HTML code inserted into web pages, and tools like Dreamweaver won t be able to do it all for you. Course Materials: Texts: There are two (2) required texts for this class: - White space is not your enemy by Kim Golombisky & Rebecca Hagen, ISBN: 978-0- 240-81281- 6. - CSS: The Missing Manual (2 nd edition) by David Sawyer McFarland, ISBN: 978-0- 596-80244- 8. Complete the reading assignment before the class date on which it listed (refer to Course Schedule). We will also be accessing Atomic Learning Tutorials via the JMU Library s website throughout the semester. Note: If you re accessing these tutorials from off- campus, you must first login to the JMU network. Instructions for this are available at: http://www.lib.jmu.edu/proxy/default.aspx Required Supplies: - USB Pen Drive (at least 128 megabytes). The USB Pen Drive should be dedicated for use in this class. SMAD 307.1 Hughes Spring 2011 Page 1
Servers: We will be using the SMAD Max server. The IP Address for this server is: 134.126.97.239 Note: You can connect to this server using a Mac from off campus. Go > Connect to Server. Then enter the IP Address provided and login as you do on campus. Avoid working with files directly on the server. At the beginning of a class or lab session, you should copy the files you need to the local hard disk. At the end of the class or lab session, copy the files from your hard disk back to the server. REMEMBER: Just because a file is on the server does not mean you don't need to back it up to removable media. Only files related to this course (SMAD 307) should be stored in this area of the server. login: smad3071 password: ****** volume: In- Class folder: SMAD 307 > Section 1 Many of your assignments will be submitted on the WWW using JMU s Educ.jmu.edu web server (formerly known as: Pergrin.jmu.edu). If you have not previously created an account on this server (Educ or Peregrin), create an account via: https://remedy.jmu.edu/educ.asp (Reference document available on Blackboard). Dreamweaver: Dreamweaver CS5 is loaded on the computers in Harrison 0101. We will go over Dreamweaver in class; however, you ll need to work on assigned tutorials outside of class in order to get the most out of the application. If you have access to Dreamweaver CS4, feel free to use this version of the software. You will see that there are some differences between the versions; however, the differences are not large enough to discourage use. You can download trial versions of the Adobe products (CS5 versions) from: http://www.adobe.com/downloads You can search for JMU labs that support Dreamweaver at: https://remedy.jmu.edu/labs/allsoft.asp Lab Classroom: SMAD computer labs are open when the building is open. These hours will be posted outside of the labs. You will need to use your JAC card to access the computer lab. Other than bottled water, no food or drinks are permitted in the labs or studios. Grading & Course Requirements: Course Elements Projects... 35% Homework Assignments... 20% Quizzes & Chapter Responses... 15% Tests... 20% Test 1... Test 2... Final Exam... Attendance & Participation... 10% Grade Scale A = 94 100% A- = 90-93.9% B+ = 87-89.9% B = 83-86.9% B- = 80-82.9% C+ = 77-79.9% C = 73-76.9% C- = 70-72.9% D+ = 67-69.9% D = 60-66.9% F = 0-59.9% SMAD 307.1 Hughes Spring 2011 Page 2
Deadlines: Deadlines are important in web design, so you must meet them. Late assignments will result in a one- letter grade drop in your score and no late project will be accepted after one week from the due date. Attendance: Students are expected to attend all lectures, labs, and exams, arriving on time. Roll will be taken at the beginning of class and three late arrivals are equal to one absence. Two absences are the limit allowed before a student s grade is lowered. Please realize that these absences are not encouraged, but will be accepted without a grade deduction. Each additional absence will result in a reduction in your final one- third of a letter grade. The allowed absences are intended to accommodate illness, emergencies, religious holidays, and all other circumstances. If you are absent, it is your responsibility to get notes from a classmate and to makeup missed assignments; quizzes cannot be made- up following an absence. (The only reason for rescheduling a test would be a documented serious illness, hospitalization, profound family emergency, or a university- sponsored trip.) JMU Policy University Registration Regulation: Students are responsible for registering for classes and for verifying their class schedules on e- campus. January 18, 2011 Drop/Add Deadline; W (withdrawal) applies following this deadline. Under extenuating circumstances a student may request an I (incomplete) for this course. Extenuating circumstances are usually, but not limited to extreme health conditions. A student has one semester to make up the remaining work in the class or the I will revert to an F automatically. Once the student has completed the work, the I will be removed and a grade will be assigned. Important Details Inclement Weather Policy: In case of inclement weather, listen to AM 550 or 1610 for school closing information. You will be expected to follow the JMU weather delay or cancellation schedule. In the case of a class delay, any assignment scheduled for that day will be due that day unless informed otherwise via email. In the case of a class cancellation, any assignment scheduled is due at the beginning of the next scheduled class period unless informed otherwise via email. For additional closure information check online at the JMU Web site http://www.jmu.edu under JMU News ; or Phone 540.433.5300 for a recorded message. Honor Code: Students enrolled in this course must be familiar with and adhere to the JMU Honor Code. The Honor System web site is located at: http://www.jmu.edu/honor. If you have questions concerning the Honor Code, please see the instructor. All assignments and projects submitted in this course must be your own work. When images or text is gathered from the Internet, proper APA formatted citations must accompany the assignment. Use library resources available at http://www.lib.jmu.edu/help/checkcite/ to verify the format. Backups: It is the student s responsibility to backup all work. Loss of work due to pilot error (you make a mistake), vandalism (someone else messes up your work), or equipment malfunction (the computer eats your work) will not relieve you of the responsibility of having your work submitted on time. Students with Disabilities: JMU abides by Section 504 of the Rehabilitation Act of 1973 and the Americans with Disabilities Act, which mandate reasonable accommodations be provided for students with documented disabilities. If you have a disability and may require some type of instructional and/or examination accommodations, please contact me early in the semester so that I can provide or facilitate provision of accommodations you may need. If you have not already done so, you will need to register with the Office of Disability Services, the designated office on campus to provide services for students with disabilities. The office is located in Wilson Hall, Room 107 and you may call 540-568- 6705 for more information. SMAD 307.1 Hughes Spring 2011 Page 3
COURSE SCHEDULE SPRING 2011 WEEK #1 T. 1/11 Class #1 Th. 1/13 Class #2 WEEK #2 T. 1/18 Class #3 Th. 1/20 Class #4 WEEK #3 T. 1/25 Class #5 Th. 1/27 Class #6 WEEK #4 T. 2/1 Class #7 Th. 2/3 Class #8 WEEK #5 T. 2/8 Class #9 Th. 2/10 Class #10 WEEK #6 T. 2/15 Class #11 Th. 2/17 Class #12 Welcome to SMAD 307: Course Overview Topics covered: Web design overview; Communication cycle Topics covered: Basic design principles; Web Fonts; Web Colors; Web Images In- class exercise: Group site analysis Reading(s) due: G&H, ch. 14: Designing for the Web Topics covered: Accessibility; Section 508; WCAG 2.0; FTP Basics In- class activity: Upload personal page to Educ server (Introduce FTP) Reading(s) due: Web Design in a Nutshell (library online resource), ch. #5 Accessibility http://proquestcombo.safaribooksonline.com/0596009879 Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/tr/wcag20/#guidelines Due: Assignment #1: Personal page Topics covered: Usability; Site dimensions; Layout Reading(s) due: Interview with Web Usability Guru, Jakob Nielsen (9/28/09) http://www.webdesignerdepot.com/2009/09/interview- with- web- usability- guru- jakob- nielsen/ G&H, ch. 1: What is design?; ch. 2: Step away from the computer; ch. 3: I need to design this today; ch. 4: Layout sins. Topics covered: Interface Design; Design principles Group presentations: Elements of design on the Web Reading(s) due: G&H, ch. 5: Mini art school; ch. 6: What is a grid?; ch. 7: Layout. Topics covered: Type; Color Group presentations: Type and Color on the Web Reading(s) due: G&H, ch. 8: Type; ch. 9: Color basics Topics covered: Images; Multimedia Reading(s) due: G&H, ch. 10: Adding visual appeal; ch. 13: Multimedia components TEST #1 Topics covered: Brainstorming; Storyboarding; Style Guide; Site map Assignment Introduced: Site creation Reading(s) due: Listen to podcast: http://twit.tv/natn137 (duration: 1:06:21) Topics covered: Site organization; File management Assignment discussion. No Class. JMU Assessment Day. Topics covered: HTML & CSS; HTML Validation Reading(s) due: McFarland ch. 1: Rethinking HTML for CSS; ch. 2: Creating Styles and Style Sheets; ch. 3: Selectors: Identifying What to Style SMAD 307.1 Hughes Spring 2011 Page 4
WEEK #7 T. 2/22 Class #13 Th. 2/24 Class #14 WEEK #8 T. 3/1 Class #15 Th. 3/3 Class #16 Topics covered: CSS variations Reading(s) due: McFarland ch. 4: Saving Time with Style Inheritance; ch. 5: Managing Multiple Styles: The Cascade Due: Assignment: Proposal & draft due Topics covered: Formatting the basics using CSS Reading(s) due: McFarland ch. 6: Formatting Text; ch. 7: Margins, Padding, and Borders; ch. 8: Adding Graphics to Web Pages Topics covered: CSS driven layout and navigation Reading(s) due: McFarland ch. 9: Sprucing Up Your Site s Navigation; ch. 11: Introducing CSS Layout Due: Test #2 WEEK #9 T. 3/8 No Class. Spring Break. Th. 3/10 No Class. Spring Break. WEEK #10 T. 3/15 Class #17 Th. 3/17 Class #18 WEEK #11 T. 3/22 Class #19 Th. 3/24 Class #20 WEEK #12 T. 3/29 Class #21 Th. 3/31 Class #22 WEEK #13 T. 4/5 Class #23 Th. 4/7 Class #24 WEEK #14 T. 4/12 Class #25 Th. 4/14 Class #26 Topics covered: CSS refresher Topics covered: CSS positioning Reading(s) due: McFarland ch. 12: Building Float- Based Layouts; ch. 13: Positioning Elements on a Web Page Topics covered: CSS review; Acquiring a domain (http://www.1and1.com) Assignment: Personal Site Introduced Reading(s) due: McFarland ch. 15: Improving Your CSS Habits; Appendix A: CSS Property Reference In- class Skills Assessment Topics covered: Search Engine Optimization; Review of the details (favicon, copyright, contact, naming) Due: Sketches of personal site (paper) Topics covered: Dreamweaver Behaviors & Spry Assets Due: Sketches on screen Due: Purchase domain & web hosting through 1and1.com Topics covered: Uploading files to live server; File management Topics covered: JavaScript using someone else s code; Lightbox / Lightwindow Due: Two pages of personal site Group presentations: JavaScript Topics covered: Work session SMAD 307.1 Hughes Spring 2011 Page 5
WEEK #15 T. 4/19 Class #27 Th. 4/21 Class #28 Topics covered: Usability Testing of personal sites Topics covered: Work session Due: Final site WEEK #16 T. 4/26 Class #29 Th. 4/28 Class #30 Topics covered: Final site Due: Final site due live. Topics covered: Site archival; updating Final Exam: Thursday, May 5, 1:00pm- 3:00pm SMAD 307.1 Hughes Spring 2011 Page 6