CLASS WEBSITE : CLASS VIDEO TUTORIAL SITE (RonTube) : COURSE OUTLINE (subject to revision)

Transcription

1 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 : CLASS VIDEO TUTORIAL SITE (RonTube) : COURSE OUTLINE (subject to revision) WEEK 1 August 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 , 118 Cropping/resizing images in Photoshop 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 Review Saving for Web Creating HTML pages for Project 1 H&C pgs Specifying Image Links in HTML Work session Project 1

2 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 Alphablog assigned (Project 2) 74-80, 85 What makes a good photograph? Lists in HTML H&C pgs Creating a.gif animation in Photoshop 117 WEEK 4 September Review: Self-Portrait projects Color Concepts + Color Systems (RGB, CMYK, PMS) Hexadecimal color + Layers in Photoshop H&C pgs Type Hierarchy Reviewing/selecting photos in Bridge Cropping photos in Photoshop Review Project 2 photos one-on-one Work session Project 2

3 WEEK 5 September 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 Creating text and type links in Dreamweaver DW pgs 1-69, (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 , Work session Project DW pgs , , Purchasing a domain name and web hosting H&C pgs Crit Students present roughs for Project 3 Creating tight layout (comp) Work session Project 3

4 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 DW pgs Ease of Navigation + Interactivity in web sites CSS Divs H&C pgs Creating remote rollovers (JavaScript behaviors) in Dreamweaver DW pgs Review wireframes one-on-one Work session Project 3 WEEK 8 October 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 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)

5 WEEK 9 October Crit Project 4 roughs Work session Project 4 HTML5 + CSS3 H&C pgs Designing for multiple screen sizes Work session Project 4 WEEK 10 October 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 Converting roughs into CSS CSS Positioning H&C pgs 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)

6 WEEK 12 November In-class Group assignment (Day 2) Crit Project 5 roughs In-class Group assignment (Day 3) WEEK 13 November RonTube Video to watch Web Fonts Presentation In-class Group assignments Work session Project 5 Crit Project 5 - Homepage Wireframe + Comp DW pgs Web Fonts Work session Project 5 WEEK 14 November RonTube Video to watch jquery Slideshow Crit Project 5 Comps Work session Project 5 Creating site map DW pgs JQuery slideshow + HTML5 audio/video Work session Project 5

7 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. ron@ronandjoe.com Phone Office Hours Monday + Wednesday, 7 8 am

8 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: ($17.39 at Amazon.com) Dreamweaver CC Visual Quickstart Guide by Tom Negrino & Dori Smith (DW in reading list) Published by Peachpit Press ISBN: ($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)

9 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.

10 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) , 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.