SYLLABUS : ART 146 : WEB DESIGN : EL CAMINO COLLEGE : RON ROMAIN : FALL 2014 SECT 5251 : 3 UNITS : RM ARTB5 : MON Lec 8 8:50am, Lab 8:50 10:55am WED Lec 8 9:05am, Lab 9:05 11:10am CLASS WEBSITE : www.professordesign.org CLASS VIDEO TUTORIAL SITE (RonTube) : www.professordesign.org/rontube/ COURSE OUTLINE (subject to revision) WEEK 1 August 25 27 File Organization Web File Naming Overview of class, syllabus, materials and software applications File Paths What do you know? What do you want to know? HTML Basics HTML Basics Saving Images for Web HTML exercise Project: Self-Portrait assigned (Project 1) (Discussion) What is good/bad about the internet? Image resolution and web image formats H&C pgs 2-10 107-115, 118 Cropping/resizing images in Photoshop 99-102 Saving for Web in Photoshop Inserting image in web page using HTML Review Project 1 photos one-on-one Work session Project 1 WEEK 2 September 1 3 RonTube Video to watch Local & Remote Servers Labor Day Holiday No class Local/Remote Servers File/Directory/Root Relationships H&C pgs 81-84 Review Saving for Web Creating HTML pages for Project 1 H&C pgs 12-38 Specifying Image Links in HTML Work session Project 1
WEEK 3 September 8 10 RonTube Video to watch Writing HTML Laws of Gestalt Text Links in HTML Getting a blog In-class Assignment Project: Self-Portrait Project due H&C pgs 40-60 Alphablog assigned (Project 2) 74-80, 85 What makes a good photograph? Lists in HTML H&C pgs 62-72 Creating a.gif animation in Photoshop 117 WEEK 4 September 15 17 Review: Self-Portrait projects Color Concepts + Color Systems (RGB, CMYK, PMS) Hexadecimal color + Layers in Photoshop H&C pgs 251-253 Type Hierarchy Reviewing/selecting photos in Bridge Cropping photos in Photoshop Review Project 2 photos one-on-one Work session Project 2
WEEK 5 September 22 24 GIF Animation Parts 1 & 2 Setting Up Your Site (DW) The Design Process Setting Up Your Desktop (DW) Formatting Text (DW) Creating animated slide show using Photoshop Creating Text Links (DW) Exporting slide show as a MP4 Work session Project 2 Setting up a site in Dreamweaver H&C pgs 264-298 Creating text and type links in Dreamweaver DW pgs 1-69, 83-95 (cont.) Project: Alphablog Project due (all posts complete before start of class) Site Homepage Re-design assigned (Project 3) WEEK 6 September 29 October 1 Inserting Images (DW) Inserting Audio (DW) Student presentation of site homepage they will re-design Inserting Video (DW) Creating tables + Inserting images/videos in Dreamweaver H&C pgs 452-460, Work session Project 3 126-134 DW pgs 131-135, 154-159, 257-277 Purchasing a domain name and web hosting H&C pgs 487-490 Crit Students present roughs for Project 3 Creating tight layout (comp) Work session Project 3
WEEK 7 October 6 8 CSS Basics The Box Model Cascading Style Sheets (CSS) Inserting Rollovers (DW) Internal vs External Style Sheets Converting comp into wireframe Utilizing CSS in Dreamweaver Review comps one-on-one Work session Project 3 H&C pgs 226-244 463-464 DW pgs 185-218 221-236 Ease of Navigation + Interactivity in web sites CSS Divs H&C pgs 300-328 Creating remote rollovers (JavaScript behaviors) in Dreamweaver DW pgs 333-341 Review wireframes one-on-one Work session Project 3 WEEK 8 October 13 15 Setting Up Your Web Server (DW) Syncing Local & Web Servers (DW) File Transfer Protocol (FTP) Swap Image Behavior (DW) Understanding your remote server + FTP login info Open New Browser Window (DW) Uploading files to your remote server Project: Domain + Web Hosting purchased DW pgs 39-52 Project: Award-winning type designs Creating type arrangements in Illustrator + Saving for Web Review remote rollovers + other JavaScript behaviors Site Homepage Re-design Project due Quotation Site assigned (Project 4)
WEEK 9 October 20 22 Crit Project 4 roughs Work session Project 4 HTML5 + CSS3 H&C pgs 377-388 Designing for multiple screen sizes Work session Project 4 WEEK 10 October 27 29 Normal Document Flow CSS Positioning Crit Project 4 comps Creating CSS Rules (DW) Creating & Styling DIVs (DW) (cont.) Work session - Project 4 Inserting DIVs (DW) Debugging DW pgs 454-456 221-230 Converting roughs into CSS CSS Positioning H&C pgs 358-376 Work session Project 4 WEEK 11 November 3 5 As necessary Work session Project 4 In-class Group assignment (Day 1) Project: Quotation Site Project due Portfolio Site assigned (Project 5 Final Project)
WEEK 12 November 10 12 In-class Group assignment (Day 2) Crit Project 5 roughs In-class Group assignment (Day 3) WEEK 13 November 17 19 RonTube Video to watch Web Fonts Presentation In-class Group assignments Work session Project 5 Crit Project 5 - Homepage Wireframe + Comp DW pgs 109-114 Web Fonts Work session Project 5 WEEK 14 November 24 26 RonTube Video to watch jquery Slideshow Crit Project 5 Comps Work session Project 5 Creating site map DW pgs 351-361 JQuery slideshow + HTML5 audio/video Work session Project 5
WEEK 15 December 1 3 Due: Project 5 Comps/Wireframes/Site Map One-on-one review of Project 5 Work session Project 5 Work session Project 5 WEEK 16 December 8 10 Exam: Final Exam Practical Crit Student Presentations of Final Project Crit Student Presentations of Final Project COURSE INFORMATION WHO IS RON ROMAIN AND HOW CAN I FIND HIM? I, Ron Romain, am an adjunct faculty member (i.e. a part-timer). I work full-time running a stock image, licensing and creative services business called Ron and Joe, Inc. Joe is either my partner, or a figment of my imagination. I ve been teaching on and off for 30 years for the past 13+ years in the COMM department at CSUF, and I m just starting my third year here at El Camino. Because I am a part-timer, I m only on campus the days that I teach. E-mail ron@ronandjoe.com Phone 714.673.9365 Office Hours Monday + Wednesday, 7 8 am
COURSE DESCRIPTION, OBJECTIVES AND OUTCOMES In this course, students design and create websites through hands-on experience with graphics software (Adobe Dreamweaver, Photoshop and Illustrator). Topics covered include the effective use of typography, images, and layout, organizing content, and designing an effective interface. Technical issues such as file formats, compression, testing and debugging will also be covered. Learning Objectives: 1) Operate the computer and related hardware and software, HTML, image and web authoring software. 2) Optimize image and media files for the web. 3) Demonstrate solutions to creative problems involving evaluation of aesthetic and conceptual issues. 4) Apply traditional twodimensional design concepts of line, value, texture, pattern, scale, and various compositional strategies to content for the Web. 5) Utilize effective graphic design techniques to combine text and images in designing pages for the Web. 6) Complete visuals from preliminary roughs, to computer production, to final presentation on the Web. 7) Analyze design and structure of various web sites. 8) Organize the flow of content and create links to make an effective interface. Learning Outcomes: 1) HTML code: Students will be able to demonstrate correct use of HTML code, industry-standard web authoring software and Cascading Style Sheets (CSS) to create well-organized, interactive websites. 2) Navigational Links: Students will be able to demonstrate ability to create navigational links, simple JavaScript interactivity, and insert properly formatted image and multimedia files into a web page. 3) Content Maintenance: Students will be able to demonstrate the ability to correctly organize files on a local server, upload files to a remote (web) server, and maintain all content and functionality. 4) Problem-Solving: Students will be able to apply visual communication problemsolving skills and two-dimensional design concepts to create multi-paged websites. PREREQUISITE AND RECOMMENDED COURSES Completion Art 141 with a minimum grade of C. Recommended: Art 142 and either Art 132 or Art 143. TEXT BOOK + MATERIALS HTML&CSS design and build websites by Jon Duckett (H&C in reading list) Published by John Wiley & Sons Inc. ISBN: 978-1-118-00818-8 ($17.39 at Amazon.com) Dreamweaver CC Visual Quickstart Guide by Tom Negrino & Dori Smith (DW in reading list) Published by Peachpit Press ISBN: 978-0321929518 ($29.06 at Amazon.com) Digital storage device (usb thumb/flash drive or portable hard drive) - at least 1 GB (approx $10) Second portable drive or CDRs (minimum of 15 pack) for double-backup (approx $10-15) Purchase Domain Name + Web Hosting (approx $30) Access to a digital camera. (Borrow or beg, don t steal)
WHAT I EXPECT FROM YOU IN THIS CLASS Most importantly, I expect you to care. To treat this class as what it is: A valuable resource that will serve you well in your future career. I also expect you to be professional. We will certainly have a lot of fun in this class, but what I bring into the classroom as someone who uses these applications and technologies in my business is a touch of real life. Treat this class as you would your job. Good communication is key. Finally, I expect what all teachers expect of their students: To want to learn. And to work hard in the process. COURSE REQUIREMENTS + ATTENDANCE Attendance: This course consists of both lecture and lab periods. Students are expected to attend both the lecture and lab portions of the class. I will pass around a sign-in sheet at the beginning of each lecture period. Students whose absences exceed 10% of the scheduled class meetings may be dropped by the instructor. Tardies: I also keep track of tardies. Occasionally being late can happen to any of us (myself included), but chronic tardiness is not acceptable and will affect the participation portion of your grade. Course Requirements: In addition to the lectures, labs and reading assignments, considerable outside work is necessary to complete the class assignments. Also note that all images and designs must be your own original work unless stipulated otherwise. All work must be executed during the current semester. LATE ASSIGNMENTS I will accept late work. But note that your work will lose 10% of the project value for each class session it is late. For instance, if you turn in your assignment two classes late, and the project is worth 50 points, the maximum grade you could receive would be 40 points. EXTRA CREDIT There is no extra credit. EXAMS Since I wish to accomplish as much hands-on, project-based work as possible this semester, we will only have a single exam the Final.
GRADING Each project, project step, in-class assignment and final exam will have a point value. You will be notified of the point value when assigned. Your points will be tallied at semester s end and will account for 90% of your final grade (In-Class Assignments = 10%, Projects = 75%, Exam = 5%). Participation in class will account for 10% of your final grade. Participation includes constructive feedback during class critiques and lab sessions, blog/social media postings on other students work, and good communication with instructor relative to projects and class attendance. I do not utilize plus/minus grading. At semester s end, I will determine your grade based on the percentage of points you ve earned relative to the above. Grades to be determined as follows: A= 90%+ B= 80 89% C= 70 79% D= 60 69% F= less than 60% ACADEMIC INTEGRITY El Camino College places a high value on the integrity of its student scholars. When an instructor determines that there is evidence of dishonesty in any academic work (including, but not limited to cheating, plagiarism, or theft of exam materials), disciplinary action appropriate to the misconduct as defined in BP 5500 may be taken. A failing grade on an assignment in which academic has occurred and suspension from class are among the disciplinary actions for academic dishonesty (AP 5520). Students with any question about the Academic Honesty or discipline policies are encouraged to speak with their instructor in advance. CLASSROOM RULES Computers must be turned off or in sleep mode during critiques and lectures; students caught messaging, browsing, typing, or otherwise being distracted by the computer during critiques and lectures will be given one warning and then asked to leave. Critiques include yielding constructive feedback to your peers based on aesthetic, conceptual and technical aspects of their work. Students are required to participate in this process, but should be sensitive to the ego and understanding of their peers. Students will turn off their cell phones before entering the classroom. There is no food allowed in the lab. Drinks: Only bottled water (with cap) set on the floor. During demos and labs, remember that students learn at varying rates. Please be patient. SPECIAL NEEDS Accommodations: It is the policy of the El Camino Community College District to encourage full inclusion of people with disabilities in all programs and services. Students with disabilities who believe they may need accommodation in this class are asked to contact the campus Special Resource Center (310) 660-3295, as soon as possible. This will ensure that students are able to fully participate. Also, please feel free to see me privately to discuss your concerns.