Smashing CSS: Professional Techniques for Modern Layout, Meyer, Eric A., Wiley, 2011; ISBN: (Recommended)

Transcription

1 Syllabus AVT 217: Introduction to Web Design Instructor: Daniel Pegues Office Hours: By appointment only Term: Fall 2011 CRN: Prerequisite: AVT 180 New Media in the Creative Arts I. Catalog Description An introduction to contemporary web design, in particular to standards, as a successful tool in design communication. Students gain hand on experience on design issues specific to web-based presentations, learn web page layout, effective navigation and delve into the design process. Hours of Lecture or Seminar per week: 2 Hours of Lab or Studio per week: 4 II. Required and Recommended Texts: Learning Web Design: A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics, Robbins, Jennifer Niederst, 3d Edition, O'Reilly Media, 2007; ISBN: (Required) Smashing CSS: Professional Techniques for Modern Layout, Meyer, Eric A., Wiley, 2011; ISBN: (Recommended) III. Course Objectives Upon completion of the course students will be able to: A. Describe how the web environment functions. B. Have an understanding of how a website is constructed, from concept to implementation of a fully functional and live website. C. Be familiar with and have a general understand of the use of user interface (UI) tools, such as Firebug (Firefox), Web Inspector (Safari) and other tools that aid in development and troubleshooting. D. Identify and apply basic design concepts and principles for web delivery. E. Apply color theory, composition, and typography effectively. F. Demonstrate a basic understanding of the components and mechanics of a website. G. Mastery of Adobe Photoshop with the use of webpage layout, image slicing and image optimization. H. Ability to use Adobe Dreamweaver for webpage layout using proper HTML markup and CSS based on W3C standards. IV. Methods of Presentation Lecture and Studio V. Course Content Week One: Overview and General Discussion Class material overview, class rules, and projects. Nature of the web and differences compared to print media. Issues to consider: different browsers and user preferences, PC- Mac, connection speeds, resolution, color, types of websites and technologies used in

2 practice today, as well as consideration for audience. Design basics. Website critique: good and bad design examples. The web development industry. Hosts and domains. HTML: table, tr, td Homework: (T) Choose two examples of good design and two examples of bad design based on websites you are familiar with. For personal benefit, make a list, critiquing what you like and dislike about these websites. This technique will be done throughout the semester so you get into the habit of looking at a website from a designer/developer perspective. (Th) Design an Under Construction page in Photoshop. Memorize the basic table structure discussed in class. Purchase hosting plan and domain name, which will be used starting next week (hostgator.com [linux server hosting]). Once you ve purchased your web hosting and domain name, provide me, through , with your domain name so I have it on record. Reading: LWD: CH1, Ch2 and Ch3 Week Two: General Concepts and Simple Page Creation How websites work on the internet: Explore the file structure of a website through an FTP connection. Paths. File management. File naming etiquette: images, folders, index.html, etc. How to construct a web page (HTML, images, JavaScript, PHP/ASP.NET, etc.). Image optimization using Adobe Photoshop. When and how to use images. Terms: browser, URL, FTP, bandwidth, PHP, Flash, XHTML, HTML, CSS. HTML: html, head, title, body, span, h1, h2, p, img, br, hr, a CSS: What is a Style Sheet? What is an ID? What is a class? Inline styles, external styles, etc. Homework: (T) Get your website ready for publication. Save under construction page in the appropriate format. Name and organize your files properly (simple naming convention, along with an images and css folder. (Th) Browse themeforest.net, and pick 2 website templates you like and 2 you dislike. me the links to be discussed at the beginning of class on Tuesday. Reading: LWD: Ch4 (pay special attention to Naming Conventions, p 55) Week Three: Layout Design Process Basics Breaking down the design process is important to get a good understanding of where to start and how to progress with website development. We will look at sources of inspiration, type and color, color schemes, font and color palettes, and how to go about designing separate elements. Terms: type, color, layout, elements, buttons, menus, links, fonts, anchors, slicing HTML: h3, h4, h5, h6, blockquote, pre, br, ol, ul, li, dl, dt, dd, sub, sup, i, em CSS: What are selectors and pseudo-selectors? Targeting. Use of multi-classes. white-space Homework: (T) Make a list of 5 websites that you consider to have an appealing user interface, taking into account typography, color, layout, etc. Make a list of what you like most about each, from font size, placement of elements, accessibility, navigability, etc. (Th) Come up with the style for your company website. Establish your color scheme, fonts, navigation, graphics, design elements. Experiment with different types, color schemes and styles. All your design elements (buttons, menus, graphics, link styles, fonts) have to be consistent with the mood you are trying to establish. Also, learn the structures of unordered and ordered lists. What does deprecated mean? Reading: LWD: Ch5, Ch16 (p ) Midterm Project Assignment: Your midterm project will consist of creating your business website mockup design, which will be due by the end of week seven (7). This mockup

3 design, once finished, will be turned in for approval. If approval is not granted, you need to make any changes requested, and submit it again for approval by the following class. (Your grade will be decided based upon how well you incorporate color, typography, navigation and images to achieve a well-balanced and appealing layout). Each day your mockup design is late, your design will be deducted one (1) letter grade. Once you ve received approval on your mockup design, it will be graded. If your design is not approved, this is not bad. It is common for changes to be requested by the head of your team, a client, etc. The purpose of these changes is to meet the expectations of your client, boss or others. After several renditions, you will have provided them with the finished product and are ready to move to the next stage of development. Your midterm project is important because it will lay the groundwork for your final project due at the end of the semester. NOTE: Although everyone should try to incorporate all the elements mentioned in the Midterm Project Assignment, try to keep your design to within your skillset so it will be possible to slice it up and apply markup and CSS later in the semester. More will be said about this during class. Also, read and study Ch20 over the next three weeks as a guide (Ch20 will be revisited later in the semester [Week 11]). Week Four: Structure of a web page. HTML intro. CSS, Selectors and Typography Why learn HTML? Introduction to HTML, the anatomy of a web page, basic HTML tags, images, CSS and some introductory uses, browser reset and more. Terms: anchor, linking, root, directory, absolute path, relative path, URL/URI HTML: div, span, & < > etc. (p90), table, tr, td, border CSS: pseudo-classes (e.g., :hover), padding, margin, border-collapse: collapse; border, fontfamily, font-size, font-weight, color Homework: (T) Do exercises 5-1, p80 and 5-3, p91 of LWD. (Th) Do exercises 5-2, p84, 6-1, p97 and 6-2, p99 of LWD. Reading: LWD: Ch5 (p94 review), Ch8 (p ), Ch6 (p95-99), Ch11 Week Five: Formatting and adding links to your page. The different topics covered this week consist of: headings, creating new paragraphs, paragraph alignment, lists, document type overview, how to create links inside the page, how to link to other pages in your website, and create links. Terms: measurements, cascade, paragraph, alignment, HTML: a, href, mailto, background-color CSS: Continue practice of pseudo-classes. display: block; display: inline; display: none; textalign: left; text-align: right; text-align: center; text-align: justify. Homework: (Th) Hand-code a simple page with tables using HTML and CSS. Use a background color and image using CSS. Have the background image positioned top and center. Also, hand-code a simple page using CSS and divs. This will be due for a grade the beginning of next week. Reading: LWD: Ch6 (p ) Week Six: Using images in web development.

4 Tasteful images can bring a lot of life to your website, but when not used in moderation, or used without proper color and other considerations, you can take away that look and feel you are aiming for. This week will be used to cover: creating and manipulating images with Photoshop, optimizing images for the web, adding images, adding an image with a link and more. Terms: img, src, a, href, width, height, alt, title, align HTML: img, src, a, title, alt, width, height, float, margin, padding, border, background, background-color, display CSS: border, background, background-color Homework: On Tuesday, you will be provided 5 images in various sizes. You are to take those images, optimize them for the web using a suitable format (gif, png or jpg), then add those images to a page, using a basic HTML structure (html, head, body). There is no need to focus on CSS, but you can add CSS to your page if you wish to do so. Part of this task requires that you can properly name your files, and place them into the appropriate directory. Your images should not exceed 500px. What is the correct image resolution for the web? This will be due Tuesday of next week. Reading: LWD: Ch7 (p , Disregard Image Maps), Ch18 (p ) Week Seven: Intro to slicing and image optimizing in Photoshop. Midterm Project Due (Thursday). There are several ways to cut up a mockup design before converting it into small, fully optimized images that you can then use to construct your website using HTML and CSS. Terms: Save for Web and Devices (PS), Image Size (PS), Canvas Size (PS), Image Rotation (PS), Modify (PS), resolution, pixels, inches, cm, mm, Levels (PS), Color Balance (PS), alpha, transparency, mask HTML: img, src, width, height, alt, title CSS: width, border, background, background-image, background-color, img, float, margin, padding Homework: (T) Test Yourself (p ). (Th) Test Yourself (p402) Reading: LWD: Ch18 (p ), Ch19 and Week Eight: Advanced typography in your work. It s easy to create great looking typography with images, but how about using CSS instead of images? By using CSS in place of images, you significantly reduce the amount of load time a user has for your website to be fully displayed. Text styled with CSS is light-weight, and loads fast. This week will be used to explore all the different CSS styling parameters that can be used to style type in your markup. Terms: type, typography, color, block, inline, load time HTML: vertical-align, h1-h6, p, ul, ol, li, small, strong, i, em, u, align CSS: h1-h6, p, ul, ol, li, dl, dt, a, small, strong, i, em, u, font-size, font-weight, color, font-style, text-align, justify, left, right, center, padding, margin, position, line-height, letter-spacing, white-space, background-color, border, display Homework: On Tuesday, you will be provided a single-page website fully made (without content or images) with HTML and CSS. Due Tuesday of next week by the beginning of class, you are to take images from (or another source of your choosing), and incorporate those images into the single-page website you received. You should also populate the page with text. The purpose of this exercise is for you to demonstrate your use of HTML, CSS, color and other graphic design skills to enhance a page of content with

5 supporting elements. Make sure to keep the content in mind when choosing your images. Also remember to keep image optimization in mind. Reading: LWD: Ch12 Week Nine: CSS techniques to enhance your work CSS is at the very heart of web development. It is the glue that holds the look and feel of a website together, and without it would make the web a dull, boring and unappealing environment. Imagine blogging, or using an ecommerce website, or anything else you can think of on the web without styles? CSS has evolved a lot, but without knowing its capabilities, you will never know what is possible. We will cover CSS on a variety of levels, from constructing a website, to using it to enhance a website with JavaScript, programming HTML5, and more. We will also explore CSS3 and what it means for the web. Terms: CSS ID, CSS Class, spreadsheet, styles, import, CSS3, HTML5, JavaScript HTML: link, src, type, style /*, */ Homework: (Th) Create several stylesheets, named: template, stylesheet1, stylesheet2 and stylesheet3. Put all of your stylesheets into a css folder in the root level of your work. Import stylesheet1, stylesheet2 and stylesheet3 into your template stylesheet. Load your template stylesheet into a basic HTML page (html, head and body) in the root level. In the body of your basic HTML page, create h1 text, h2 text, h3 text and some paragraph text. You are to style your h1 text using the template stylesheet, style the h2 text using stylesheet1, style the h3 text using stylesheet2 and the paragraph text using stylesheet3. Your homework will be due for a grade Tuesday of next week. Reading: LWD: Ch17 Week Ten: Bringing everything together. You have your images, your content, your navigation laid out, and everything else you can think of. Now is the time to start the actual development process. Where do you begin? We will cover topics such as table vs tableless layouts, revisit some topics such as table structure, divs (using some of the basic techniques covered earlier in the semester), how to create one, two and three column layouts and more. Terms: FTP, localhost, WAMP, MAMP, server Homework: (T) Create a process of development, written out. Start with meeting the client, what questions to ask during your initial meeting, research, how you go about giving the client what they requested in the design, etc. We will talk more about this homework assignment during class so you have a better understanding of how to complete this task. This is due Thursday of next week. Reading: LWD: Ch13 and Ch14 Final Project Assignment: due Week Fifteen. Using your website mockup from midterm, you will continue development by creating a website with a minimum of 5 pages, all properly linked together with an HTML and CSScreated navigation. Your navigation can be either horizontal or vertical in nature. Your homepage must have a properly optimized banner image, images where necessary, and typography fully styled using CSS (proper headers and paragraph tags). You should also be able to fully demonstrate the difference between CSS IDs and classes in your work. Where solid colors are used in your design, use CSS to create those backgrounds. Also make sure your CSS contains the browser resets discussed throughout the semester. Most if not all links should contain some kind of hover effect using the :hover pseudo-class. You will be

6 graded based upon your use of design principles discussed throughout the semester, such as, but not limited to, color, typography, optimization, flow, and functionality. Both HTML and CSS are equally important, so always keep the two in mind when creating your designs. And no inline styles are allowed. All styles should be in your external style sheet(s). Week Eleven: Web Development, from start to finish (a reconstruct of the semester) Designing one website after another involves using the same processes and techniques time and time again. Although the user interface (UI) of a website may differ from one to the next, everything is the same under the hood. From research to development and completion, you should find the steps of constructing a website that works best for you. However, no matter what your steps may be, always be organized with the content you receive from a client, use a proper naming convention, properly organize your files, and be as concise as possible with your worth ethic. Terms: mockup, slice, pixel, layout, resolution, crop, resize, communication, milestone, developer, designer, FTP, domain, publish, author, UI Homework: Study the steps of creating a website, as discussed in class. Reading: LWD: Ch20 Week Twelve: Publishing your website in action, and more There are many ways to work on a website. The larger the site, the less likely you are to work directly from the server where your files are stored. You will find yourself working locally, then uploading your files as you meet milestones (What is a milestone?). FTP revisited, Content Management Systems (CMS), blogs, FTP clients, WAMP, LAMP, XAMP, MAMP, Microsoft Visual Studio, MySQL, PHP, Apache and more. Terms: CMS, blog, Joomla, Drupal, WordPress, Magento, ecommerce,.net, publish, dynamic, static, domain name, subdomain, , FTP, FTP client, TLD, register, upload, download, PHP, zip, compress, sort, locally, server Homework: Testing Yourself (p426) Reading: LWD: Ch21 (p are important) Week Thirteen: Advanced topics and semester review Revisit the material from throughout the semester, from topics such as table structure and optimizing images, to FTP, CSS and others. Homework: Review material from throughout the semester. Pay particular attention to topics stressed as important throughout the semester for these will most likely show up on your final examination. Week Fourteen: Final Exam. Testing Your Site. Uploading your files via FTP. Search Engines and SEO. What is SEO and what should it mean to you? Homework: Study for Final. Work on and complete Final Project due next week. Week Fifteen: Final Project Due. Final Project Due. Class Presentation and Critique.

7 VI. Materials Required: USB Flash storage device Website hosting + domain name VII. Methods of Evaluation: Actual point distribution will vary from instructor to instructor but approximate values are shown. Participation: 5% Exercises: 20% Midterm Assignment: 30% Final Project: 40% Final Written Exam: 5% Grading: A % B 80-89% C 70-79% D 60-69% F < 60% VIII. Classroom Policy: Absolutely no food or beverages are permitted in the classroom. No internet surfing or answering s while class is in session. Turn off cell phones while in class. No cell phone communication of any kind is allowed. If you commit two infractions, you will be dismissed from class and you will receive an absence for the day. If a quiz or exam is held that day, you will receive a zero (0) for that examination. If you are over 10 minutes late you will not be admitted into class. Three (3) unexcused absences will reduce your final grade by one-half (½) of a letter grade, four (4) absences by one (1) letter grade, five (5) absences by two (2) letter grades, and six (6) absences will result in failing the course. Projects have to be submitted on time as scheduled. Projects turned in late will be reduced by 10% from your graded score for each day late. ing late projects to the instructor is NOT allowed. ing the instructor to get the lecture material is NOT allowed. It is encouraged to exchange contact information with other classmates to get information on project specs, lecture notes and class assignments, if you cannot make it to class. If you have to miss class due to an emergency, please contact me via . Life happens, and I am more than understanding about personal situations that cannot be avoided.

8 University and AVT Department Policies In accordance with George Mason University policy, turn off all beepers, cellular telephones and other wireless communication devices at the start of class. The instructor of the class will keep his/her cell phone active to assure receipt of any Mason Alerts in a timely fashion; or in the event that the instructor does not have a cell phone, he/she will designate one student to keep a cell phone active to receive such alerts. Commitment to Diversity This class will be conducted as an intentionally inclusive community that celebrates diversity and welcomes the participation in the life of the university of faculty, staff and students who reflect the diversity of our plural society. All may feel free to speak and to be heard without fear that the content of the opinions they express will bias the evaluation of their academic performance or hinder their opportunities for participation in class activities. In turn, all are expected to be respectful of each other without regard to race, class, linguistic background, religion, political beliefs, gender identity, sex, sexual orientation, ethnicity, age, veteran s status, or physical ability. Statement on Ethics in Teaching and Practicing Art and Design As professionals responsible for the education of undergraduate and graduate art and design students, the faculty of the School of Art adheres to the ethical standards and practices incorporated in the professional Code of Ethics of our national accreditation organization, The National Association of Schools of Art and Design (NASAD). Open Studio Hours SOA teaching studios are open to students for extended periods of time mornings, evenings and weekends whenever classes are not in progress. Policies, procedures and schedules for studio use are established by the SOA studio faculty and are posted in the studios. ArtsBus The dates for Fall 2011 ArtsBus trips are Sept 24, Oct 22, and Nov 19 If you need ArtsBus credit for this semester, you must enroll in a section of AVT 300 (CRN # 71746, 71747, 71748) before September 6 (after Sept 6 LATE FEE is added). This also applies to anyone who intends to travel to New York independently, or do the DC Alternate Assignment. If you plan/need to go on multiple ArtsBus trips this semester and need them towards your total requirement, you must enroll in multiple sections of AVT 300. Please go to the ArtsBus website: "Student Information" for additional, very important information regarding ArtsBus policy. Non-AVT majors do not need Artsbus credit BUT may need to go on the Artsbus for a class assignment. You can sign up for AVT 300 or buy a ticket for the bus at the Center of the Arts. Visual Voices Lecture Series Visual Voices is a year-long series of lectures by artists, art historians and others about contemporary art and art practice. Visual Voices lectures are held on Thursday evenings from 7:20-9:00 p.m. in Harris Theater. September 8 Syllabus Presentation September 15 Henry Matthews, GVSU Developing a Vision September 29 Deborah Bright, RISD Destruction Layer: Palestine in Israel October 13 Robert Gleason, History Channel End of Days: Is It Closer Than You Think November 17 Wendy Ross, Sculptor Vital Order: A Conversation with Wendy Ross

9 Important Deadlines Last Day to Add (Full-Semester Course) September 6 Last Day to Drop (Full-Semester Course) September 6 Selective Withdrawal Period (Full-Semester Course) October 3 last day October 28 Incomplete work from Fall 2007 due to instructor October 28 Once the add and drop deadlines have passed, instructors do not have the authority to approve requests from students to add or drop/withdraw late. Requests for late adds (up until the last day of classes) must be made by the student in the SOA office (or the office of the department offering the course), and generally are only approved in the case of a documented university error (such as a problem with financial aid being processed), LATE ADD fee will apply. Requests for non-selective withdrawals and retroactive adds (adds after the last day of classes) must be approved by the academic dean of the college in which the student s major is located. For AVT majors, that is the CVPA Office of Academic Affairs, Performing Arts Building A407. Students with Disabilities and Learning Differences If you have a diagnosed disability or learning difference and you need academic accommodations, please inform me at the beginning of the semester and contact the Disabilities Resource Center (SUB I room 234, ). You must provide me with a faculty contact sheet from that office outlining the accommodations needed for your disability or learning difference. All academic accommodations must be arranged in advance through the DRC. Official Communications via GMU Mason uses electronic mail to provide official information to students. Examples include communications from course instructors, notices from the library, notices about academic standing, financial aid information, class materials, assignments, questions, and instructor feedback. Students are responsible for the content of university communication sent to their Mason account, and are required to activate that account and check it regularly. Attendance Policies Students are expected to attend the class periods of the courses for which they register. In-class participation is important not only to the individual student, but also to the class as a whole. Because class participation may be a factor in grading, instructors may use absence, tardiness, or early departure as de facto evidence of nonparticipation. Students who miss an exam with an acceptable excuse may be penalized according to the individual instructor's grading policy, as stated in the course syllabus. Honor Code Students in this class are bound by the Honor Code, as stated in the George Mason University Catalog. The honor code requires that the work you do as an individual be the product of your own individual synthesis or integration of ideas. (This does not prohibit collaborative work when it is approved by your instructor.) As a faculty member, I have an obligation to refer the names of students who may have violated the Honor Code to the Student Honor Council, which treats such cases very seriously. No grade is important enough to justify cheating, for which there are serious consequences that will follow you for the rest of your life. If you feel unusual pressure about your grade in this or any other course, please talk to me or to a member of the GMU Counseling Center staff. Using someone else s words or ideas without giving them credit is plagiarism, a very serious Honor Code offense. It is very important to understand how to prevent committing plagiarism when using material from a source. If you wish to quote verbatim, you must use the exact words and punctuation just as the passage

10 appears in the original and must use quotation marks and page numbers in your citation. If you want to paraphrase or summarize ideas from a source, you must put the ideas into your own words, and you must cite the source, using the APA or MLA format. (For assistance with documentation, I recommend Diana Hacker, A Writer s Reference.) The exception to this rule is information termed general knowledge information that is widely known and stated in a number of sources. Determining what is general knowledge can be complicated, so the wise course is, When in doubt, cite. Be especially careful when using the Internet for research. Not all Internet sources are equally reliable; some are just plain wrong. Also, since you can download text, it becomes very easy to inadvertently plagiarize. If you use an Internet source, you must cite the exact URL in your paper and include with it the last date that you successfully accessed the site. Writing Center Students who are in need of intensive help with grammar, structure or mechanics in their writing should make use of the services of Writing Center, located in Robinson A116 ( ). The services of the Writing Center are available by appointment, online and, occasionally, on a walk-in basis.