Syllabus Fall 2014

Web Design 1
DM260
Mondays and Wednesdays 9:00am – 11:35am
Mac Lab 1
Fall 2014

Faculty
Zark Strasburger, Assistant Professor
E-mail: zstrasburger(at)mca{dot}edu
iChat: strazbot(at)gmail{dot}com (Google) or strazbot (for AOL)
Skype: zark.strasburger
Office Phone: 901.272.5117
Office Hours: Tuesday and Thursday 4:00-5:00, and Wednesday 11:45-12:45 in closet off Mac Lab 4,  Sleeze and Slime, or Gibson Hall (please text before visiting and you will be directed to the proper location).

Location
All classes start in Rust Hall in Mac Lab 4 at 9:00am unless otherwise instructed.

Goal: To learn the awareness, skills, and methodologies necessary to design and publish communicative structure and content in an open-source web-based format.

Course Outcomes: 
Upon successful completion of the course:

• Students will be able to hand code XHTL 1.0 and HTML 5
• Students will be able to hand code CSS 2 and CSS 3
• Students will be able to publish web content using FTP software
• Students will be able to design web user interfaces for non-linear navigation
• Students will be able to create a personal portfolio website
• Students will be able to effectively marry User Interface and Content
• Students will be able to develop commercial design outcomes in a collaborative environment 

Professional Practices (P2) Outcomes:
Upon successful completion of the course:

• Students will demonstrate the ability to write a resume.
• Students will demonstrate the ability to document their work.
• Students will demonstrate the ability to exhibit work beyond the classroom.
• Students will demonstrate basic computer/software literacy applicable to their field.
• Students will demonstrate the ability to give a public presentation about their work.
• Students will demonstrate development of a professional web presence.
• Students will demonstrate the ability to work collaboratively.

Course Description
DM260 stresses the conceptual and technical skills required for designing for the Internet (open source platforms). The social implications and development of new media and new social systems are discussed and researched. DM260 will cover the techniques of hand coding XHTML and CSS. Additionally, DM260 will introduce strategies for productive and effective design sequence and work process primarily from an applied art perspective.

Course Objectives

• To learn a Web Standards-based approach to web design, using contemporary best-practices of separating content, presentation, and behavior
• To develop an awareness of how the World Wide Web differs from other media as a mode of dissemination of information
• To develop a basic understanding of the many roles played by web designers and developers
• To develop a solid foundation in hand coding for the Web in (X)HTML and CSS
• To investigate the role of the Web and web design in contemporary culture
• To introduce sub-disciplines including, but not limited to, production web coding, user interface design, information architecture, usability, accessibility, web graphics production, content development, semantics, content integration and site management
• To develop the necessary skills to thoroughly critique web content and delivery

Methods
Students will practice communicating ideas in ways that demonstrate control and specificity by employing a Web Standards-based approach to web design and development. Web Design 1 will employ a hand-coding intensive approach to web design and development, primarily using a variety of text editors and web browsers. Our primary graphic development tools will be hand-coded CSS, Adobe Illustrator and Adobe Photoshop. The course will focus on the conceptual development, research, work process, content structuring, visual design, and coding of web content. Students will develop techniques for shepherding an idea from inception all the way to project presentation and beyond to live posting. This class will utilize linear design methodologies, common to the practice of graphic design (and IPC@MCA), in the context of web development. The role of function-oriented bias will be discussed in connection with critique of web content and design. Students will be asked to regularly review and evaluate the work of their peers and that of professional web designers. Students will be asked to anticipate the responses of different potential audiences as they create projects. Students will be encouraged to harness their own pre-existing technical skills and experience to serve their individual conceptual aims. Students will also be required to write and communicate through modern media fostering a broad digital awareness, competence, and professionalism. Accuracy and technique will be emphasized along with concept and process. Critique participation, writing and research will contribute to final evaluation, as will quizzes, design documents, concept models, UI and UX sketching exercises, wireframes, design comps, coded pages, and completed sites.

Course Outline
The first segment of the course will consist primarily of learning XHTML1 and HTML5 syntax and use, content structuring, and semantic markup. The second segment will focus on CSS2/3 and the presentational aspects of web coding. The first two segments will include a lot of short skill building exercises. The third segment will be devoted to learning about UI design, project management, site management, and production work process through a series of individual and group projects. The course will culminate with a competitive site design project. Other aspects of web development, such as file management, graphic production, accessibility, usability, standards compliance, and authoring tools, will be covered during the course when applicable.

Draft Course Schedule: 
Week 1: Introduction, nesting concepts, HTML, text editors, project concepts
Week 2: Document structure, HTML text markup, concept modeling, resume writing, PPS concept statement (1st draft)
Week 3: HTML images, linking, lists, and taxonomies, EINS concepts 1st draft
Week 4: HTML Tables, forms, and extra markup, PPS content audit
Week 5: Intro to CSS, the Zen Garden, text styling, UI design: EINS visual 2nd drafts
Week 6: CSS color, text, and the box model, PPS UI sketches
Week 7: CSS lists, table, forms, and intro to CSS layout, EINS linked 3rd drafts
Week 8: More CSS layout, PPS UI 2nd drafts
Week 9: Images, buttons, image replacement, nav list transformations, GCP Introduction and research, competitive audit
Week 10: From HTML template and comp to working HTML/CSS master page, PPS and GCP work week
Week 11: Intro to javascript and jQuery: Sliders, galleries, lightboxes, etc.
Week 12: PPS presentations


Week 13: Portfolio Development, PPS QA, and bug fixes for IE
Week 14: Group Project Production
Week 15: Final Personal Presentations, and Client Presentations

This schedule is subject to change.

Assignments & Requirements
Course work will include coding, image capture/production, sketching, writing, research, public speaking, documentation, project execution, project presentation, and critique. The first half of the semester will include a series of short narrowly focused projects, in-class exercises, and sizable weekly readings. The second of the semester will include a series of overlapping multi-week projects, and weekly readings. This course requires at least 6 hours of outside work each week.  Written work will be submitted in digital format (.doc or .docx) via e-mail or server posting. Students should check their MCA email accounts, student mailboxes, and course blogs frequently for assignment information and official course communication. Email communications and submission of written assignments should come from MCA addresses unless you are sure your non-MCA email address is in my address book (because mail from other addresses may be deleted by my spam filters). Written work should be brought to class for submission on the lab server (unless otherwise noted). If you have questions for me, please email them to my zstrasburger(at)mca{dot}edu address

Readings
Required textbooks:

HTML & CSS: design and build websites
by Jon Duckett
John Wiley and Sons; 1st edition, 2011
ISBN: 978-1-118-00818-8

CSS Pocket Reference
by Eric A. Meyer
O'Reilly Media; 4th Edition, 2011
ISBN: 978-1-449-39903-0

Recommended reading:
Transcending CSS: The Fine Art of Web Design, (Voices That Matter)
by Andy Clarke and Molly E. Holzschlag
New Riders Press; 1st edition (November 25, 2006)
ISBN-10: 0321410971
ISBN-13: 978-0321410979

Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics,
by Jennifer Niederst Robbins

• O'Reilly Media; Fourth Edition edition (August 24, 2012)
• Language: English
• ISBN-10: 1449319270
• ISBN-13: 978-1449319274

Additional required readings will be distributed via handout or email or will be on reserve in the MCA library. Weekly required readings will be announced in class.

Additional Reference Texts:
The Book of CSS3, Peter Gasston, No Starch Press
Seductive Interaction Design, Stephen P. Anderson, New Riders
Ordering Disorder: Grid Principles for Web Design, Khoi Vinh, New Riders
The CSS Detective Guide: Tricks for Solving Tough CSS Mysteries, Denise R. Jacobs, New Riders
Bulletproof Web Design, Dan Cederholm, New Riders
HTML5 and CSS3, Brian P. Hogan, Pragmatic Bookshelf
HTML & XHTML Pocket Reference, Jennifer Niederst Robbins, O'Reilly
Communicating Design: Developing Web Site Documentation for Design and Planning, Dan M. Brown, New Riders Press
Introducing HTML5, Bruce Lawson & Remy Sharp
CSS3 - Visual Quickstart Guide, Jason Cranford Teague, Peachpit Press
Don't Make Me Think - A Common Sense Approach to Web Usability, Steve Krug, New Riders Press
Flexible Web Design - Creating Liquid and Elastic Layouts with CSS, Zoe Mickley Gillenwater, New Riders Press
Designing with Web Standards, Jeffrey Zeldman, New Riders Press


Evaluation and Grading Policy
Evaluation of student engagement in the class is separated into three primary categories.
Process and development — How much progress did you make through the course of an assignment, as witnessed through the imaginative exploration of ideas and techniques? How thorough and involved is your process of working, including the extent and depth of ongoing research and self-evaluation?
Product and resolution — To what extent does the final execution of your ideas and plans express your intended concept and content successfully? How clear and concise is the final integration of concept, technique, content, and format?
Participation — How active are you, in terms of both quality and quantity, during critiques, discussions, and activities? Do you come to class prepared with all necessary materials and completed assignments? How fully are you engaged in all aspects of the class?

Evaluating process, product, and participation are a means toward measuring overall student commitment. A committed student demonstrates a willingness to explore and experiment beyond what is already established, to take initiative and to exceed basic requirements and expectations. For example, a committed student tries many different ideas, takes calculated risks, and does not hesitate to do something over if it does not work the first time.

Final grades are determined based on the following weighting structure (this is subject to change based on the speed of the class):

• Exercises: 20%
• Participation: 10%
• Final Portfolio Completeness: 5%
• Personal Portfolio Site: 25%
• Experimental Image Navigation Site: 20%
• Group Commercial Site: 20%

The faculty additionally reserve the right to raise or lower your grade by a third of a letter based on improvement or degradation of commitment. An acceptable attendance record is a pre-requisite for receiving a passing grade; see the attendance policy below.

Grading System
Individual project/exercise grades will be assigned as letter grades, percentage grades, or the abbreviated check system. Mid-term and final grades will be assigned as traditional letter grades.

Late Assignments
A digitally submitted assignment is late if it is not present and time stamped by the due date and time. Physically submitted work is late if it is not wholly present at the due date and time (9:00am sharp at the beginning of class, unless otherwise specified). Late work will not be critiqued in class. Late assignments will automatically be graded down a full letter grade (10%).

Attendance Policy
Attendance and class participation are mandatory and graded. Students are responsible for terms, concepts, materials, techniques, and assignments presented in class. Poor attendance will be a detriment to one’s final grade. Attendance will be taken at 9AM. Six (6.0) absences (for any reason) will result in failure of the course. Partial absences and lateness count toward your attendance. If you arrive late do not disturb the class already in progress. Leaving class early will be counted as late arrival. Two late arrivals are equal to one full absence. There are no such things as “excused” or “unexcused” absences. I assume all reasons for missing class are good ones: I do not need or want them explained. If you miss a class, you are still responsible for the class content and assignments, and should seek the help of your fellow students to catch up on course content. The class will move rapidly therefore, missing class will have a decidedly negative effect on your ability to absorb, understand, and practice the course content. Please plan to attend all classes.

Materials and Supplies
Required materials and supplies include the following:

Pad of sketch paper - 8.5” x 11” or larger – (nothing fancy)
Post-it notes
Writing/Drawing implements of choice (pencils, pens, markers)
--> 
8 Gb (min) USB flash drive or other portable file storage device

Domain Name Registration (approximately $15/ year)

Domain Hosting ($40-100/year)

While I do not require that you own a digital camera, I require that you have regular access to one. I believe that the digital camera has become a necessity for artists. A digital camera is one of the best tools for recording visual information quickly, accurately, and cheaply.

Learning Accommodations
I will try to make reasonable accommodations for students with documented learning disabilities. Please inform me of any relevant learning disability for which you are requesting accommodation by the end of the first day of class. For more information on procedures and requirements for alternate learning accommodations and college services for students with disabilities please refer to the Student Handbook.

School and Class Policies
I will not tolerate academic dishonesty (cheating, plagiarism, etc.) in any form. Please refer to the Student Handbook for detailed information on this and other school policies. Ignorance of the policies listed in this syllabus or in the Student Handbook does not constitute a valid defense for failure to follow said policies.

Additional Class Policies

• Do not eat or drink in the labs
• No cell phones calls in class
• No texting in class
• No headphones in class during lecture, demonstration, or discussion
• Non-class related computer activities such as random surfing, IMing/texting individuals outside our class, checking email, Facebook, myspace or similar activities will not be tolerated (except during break time). If you are found in violation of this policy you will be asked to leave for the day and you will be credited with an absence.

Six Important Things to Remember

1. Your first idea is rarely your best idea.
2. The ability to follow instructions accurately is an essential life skill.
3. Something is better than nothing.
4. It is more important to be able to ask the right question than to know the right answer.
5. Risk-taking paired with committed effort is more important than a specific outcome or product. Taking an intellectual risk and coming up short is more educational than having a safe “right” answer.
6. Don’t bang your head against a wall forever; ask a friend for help. Fresh eyes can often solve a seemingly unsolvable issue, particularly in code.