Web Design COMM 306, Section 61 Fall 2011 Thursday, 6:15 9 PM

(1)

Web Design

COMM 306, Section 61 – Fall 2011

Thursday, 6:15–9 PM

Ryan Eanes, Adjunct Instructor Manhattan College

[email protected] Department of Communication

Course Description & Objectives

Much like a living organism, the Internet grows and changes every day. The medium of the web may be the single most important advancement in how we communicate since the invention of the

printing press. Because of the Internet’s pervasiveness and its near-ubiquitous role in our day-to-day existence, it is critical for future media practitioners, regardless of their specialty, to have a

fundamental grasp of the basics of the Internet and to be conversant in web technologies and techniques.

Over the course of the semester, COMM 306 will cover the following topics:  The history of the Internet and its precursors

 HTML, the primary “language” of the World Wide Web, and CSS, its stylistic companion  Basic web page design

 Website usability, usability testing and the web development process

Additionally, neurological and communication researchers have discovered in recent years that the Internet may actually be modifying the way we think, behave and interact with each other and information as a whole. We will make a brief detour during the semester to experience this

phenomenon first-hand, and to thoughtfully consider what these changes mean for us as a culture of information consumers.

Textbooks

The following three textbooks are required for this course:

Krug, Steve. Don’t Make Me Think!: A Common Sense Approach to Web Usability. 2nd_ed.

Berkeley: New Riders, 2005.

Boehm, Anne. Murach’s HTML, XHTML and CSS. Fresno: Mike Murach & Associates, 2010. Carr, Nicholas. The Shallows: What the Internet Is Doing to Our Brains. New York: W.W.

Norton, 2011. (Paperback or e-book version suggested.)

Suggested, but not required, for this course are the following two books:

McNeil, Patrick. The Web Designer’s Idea Book. Cincinnati: HOW, 2008.

As you will be expected to design your own web pages over the duration of this course, you may wish you use McNeil’s book as a starting point for your own ideas if you find yourself at a loss creatively.

McFarland, David. CSS: The Missing Manual. 2nd_{ed. Sebastopol: O’Reilly Media, 2009.}

Cascading style sheets, or CSS, are employed as the primary means of styling web pages in this course. They can be a bit unwieldy, and this book may prove useful as a ready reference in taming your style sheets.

(2)

Attendance and Participation

Because our class only meets once weekly, I must adhere to a strict attendance policy. You may miss one and only one class session without penalty. For each unexcused absence beyond that, your final grade will be docked by a full letter. As this could very easily mean the difference between passing and failing, I strongly encourage you to make every effort to attend every class session. Attendance is “self-managed;” after the first class, I will not call roll. Instead, you will be expected to sign in when you arrive to class. It goes without saying that you may not sign in for fellow

classmates. This is a direct violation of the college honor code and will not be tolerated—so don’t try it.

Your active participation in class is also essential. Class sessions oftentimes require student input, and your contributions will also provide me with a good gauge of your grasp of the material. Your contributions will also make the course more enjoyable and productive for your fellow classmates.

Grading Breakdown

Usability Test ...10%

Assignment I: Notepad HTML ...10%

Assignment II: Personal Website...20%

Floating Assignment: Disconnecting...20%

Final Project...40%

Grading Exceptions

Because this course is designed to help prepare you for the kinds of expectations placed on real-world practitioners of web design, there are two additional—but extremely important—course requirements that may (but hopefully will not) impact your grade. Please read them carefully.

 Any work containing more than threegrammatical, functional or typographical errors will receive an automatic grade of “F.”

 Any assignments completed using pre-made web templates (i.e., those included with iWeb or similar software) are unacceptable, and will receive an automatic grade of “F.” This does not include bare-bones CSS templates (those are OK). The difference between the two types of templates is significant and will be elaborated on more fully in class.

Because you are being made aware of these rules up front, there will be absolutely no exceptions. Check your own work carefully! If you have any doubts whatsoever, ask a classmate to check your work for you—and return the favor. Failing that, ask me, and I’ll be happy to provide an answer. Finally, as a student of Manhattan College, you are, of course, expected to abide by the school’s Statement of Academic Integrity, which is available from the Department of Communication if you wish to obtain a copy.

(3)

Course Assignments

 Usability Test (10%)

It is my sincere belief that understanding web usability—how people use the Internet—is the key to designing effective web sites that work. Therefore, at an unannounced point during the semester, you will be tested on your knowledge of web usability. Think of this as a “quiz” of your reading. It is a timed test taken online via Blackboard, and consists of multiple choice, true/false and “heat map” questions.

 Assignment I: Notepad HTML (10%)

Because we will be learning HTML from the ground up, I want you to gain an intimate familiarity with the way a HTML document should be structured, so your first assignment will be to construct a single web page using Notepad (or TextEdit or some other basic no-frills text editor). I will be scrutinizing this assignment, so be absolutely certain that it’s as perfect as you can make it!  Assignment II: Personal Website (20%)

Your first actual web construction assignment emphasizes basic functionality over style or aesthetic concerns—that is, everything must work and be functional. The site must include text, images and valid links to other pages (both your own and other sites on the Internet).

Design is a secondary consideration for this assignment. While I want you to at least give aesthetics some thought while constructing your site, your grade will not be dependent upon it. I will largely be considering usability above anything else when evaluating your site. A relatively unattractive site that is highly usable will score much higher than a heavily ornamented site that has an indecipherable navigation structure, for example.

 Floating Assignment: Disconnecting (20%) See next page for full details on this assignment.  Final Project (40%)

For your final assignment (in lieu of a written final examination), you will work in small groups to design and construct a website for a hypothetical entity (e.g., law firm, restaurant, library, doctor’s office, etc.). You will each be held equally responsible for the end result and will share one single final grade. How you divide your responsibilities, however, are entirely up to you. The trick to this assignment: Keep it simple. Ambition is certainly admirable, but don’t set a goal that is so high that you cannot reach it. Designing a website for a small family-owned restaurant, for example, would be far easier and more doable than redesigning the Food Network’s website. The ultimate purpose of this assignment is for you to display, through your teamwork and your craftsmanship, the information that you have learned (and taught yourself) over the duration of this course. You are expected to approach this assignment with the same sort of diligence that you would a real-world application. This is intended to be a practical and realistic learning

experience that reflects some of the same obstacles you would encounter in the workplace.

Final projects will be presented during the final exam period on December 15. The exam period is from 6:30 pm to 8:30 pm—please make a note of this different meeting time. We will meet in our regular classroom.

(4)

Floating Assignment: Disconnecting

In recent years, neuroscientists, communication scholars and computer science researchers (not to mention the researchers at web giants like Google) have begun to notice a fundamental shift in the way that human beings think and behave as a result of our increasingly extended use of the Internet in day-to-day life. It would seem that actual patterns of neural activity in our brains have begun to shift simply because of our dependence on the Internet. Are we losing something as a result of this shift? Are most people even aware of these changes?

Your assignment is to follow these steps:

1. Read the book. At some point during the semester, you are to read The Shallows: What the Internet is Doing To Our Brains by Nicholas Carr. (I highly suggest purchasing either the

paperback edition or the e-book version, if you have access to an e-book reader or iPad.) Read it cover-to-cover and consider it carefully; take notes, if you’d like, or highlight passages that strike you as interesting.

2. Disconnect. After reading the book, select a 48-hour period of your choosing—this can be a weekend, or any two sequential days—in which you will take a “technology sabbatical.” This means no computer use, no mobile phones, no television—in short, anything with a screen is off-limits for the full 48 hours (barring an emergency, that is—but needing to watch “True Blood” does not count as an emergency). Make a deliberate effort to stick to this, and keep a journal of your thoughts, feelings and behaviors, if you so choose.

3. Respond and react. Once your 48-hour “technology fast” has concluded, write a reaction paper on the entire experience. This reaction paper should attempt to conflate your own personal experience with what you gleaned from Carr’s book. Did you discover anything about yourself, your personal habits or your usage of technology? Draw a conclusion based on your own personal experience—this is, after all, a reaction paper; it should be personal in nature, and therefore reflective.

 3-page minimum (please do not exceed 10 pages)  1-inch margins, double spaced

 10- or 12-point type in a legible, standard typeface (Times, Garamond, Courier)  Email a Word document (.doc, .docx) or PDF to me at [email protected]

There is no question that this is an unusual assignment—perhaps one of the odder assignments you’ll receive during your entire college experience. That is by design. The idea is to expose yourself to conditions that are unfamiliar and confront the resulting emotions, thoughts and impulses.

There is no specific due date for this assignment. Because of the time requirement, this assignment is “self-managed.” I expect you to be able to manage your own time wisely, to calendar your

“technology fast,” and to allot sufficient time afterwards to thoughtfully complete your reaction paper. You may submit it at any time after completing all three steps. The final cut-off date for papers to be received is Thursday, December 1, 2011. NO PAPERS WILL BE ACCEPTED AFTER THIS DATE— NO EXCEPTIONS. I strongly encourage you to finish all phases of this assignment well before 12/1/11. The quality of your assignment will suffer significantly if you do it in a rush.

Finally… do not attempt to write your paper without reading the book and completing the “technology fast.” Your writing will betray you if you skip one or both of these steps—and I will grade

accordingly. Grades will be based on the thoughtfulness of your analysis and the quality of your reflection on your experience.

(5)

Course Calendar

The course calendar is tentative and subject to change.

Week 1 Thursday, September 1

Introduction

Intro to the course, history of the Internet, basic terms, mechanics of the web

“Brainlessness”

Understanding how people use the web, conventions, “average” users, learning from other people’s mistakes

HTML

Starting with HTML from scratch

More HTML

More nitty-gritty details of HTML

Images and Optimization

Types of images, image optimization using Photoshop, backgrounds

 ASSIGNMENT I DUE

Week 6 Thursday, October 6

More Images and Optimization

More Photoshop techniques, manipulating photos, more

Introduction to CSS

Differences between HTML & CSS, using CSS

More CSS

Layouts, positioning, templates, floating

Dreamweaver

Setting up and getting started with Adobe Dreamweaver

Week 10 Thursday, November 3

More Dreamweaver

Shortcuts, setups and templates

 ASSIGNMENT II DUE

In-class presentations

Students’ Choice

Tell me what you want to know— and we’ll figure it out together Time provided to work in class

More Students’ Choice

Tell me what you want to know— and we’ll figure it out together Time provided to work in class Thursday, November 24 Thanksgiving Break NO CLASS

Week 13 Thursday, December 1

The Internet and Our Brains

What the Internet is doing to the way we think, and more

Time provided to work in class

Week 14 Thursday, December 8

Professional Workflows

A look at how workflows occur in “the real world”

Time provided to work in class

Exam Period Thursday, December 15

 FINAL DUE