Web Design, Graphics, & Theory (COM 370) | College of Staten Island

Preamble

Course Title: Web Design, Graphics, & Theory, COM 370
Professor: Roy Vanegas
Office Address: 1P-232
Email Address: roy dot vanegas at csi dot cuny dot edu
Office Hours: Wednesdays, 3:30 PM—4:30 PM

Over the course of the semester, we will elaborate on various dialogues centering around the Internet. The first will be design, which we’ll discuss within a web context and a tangible framework, including typography. A key idea will be the understanding of why we appreciate and respond well to good design, and why we’re so very annoyed by bad forms of it.

Next we’ll discuss graphics: how to handle them for the web, which web technologies can be used in their place, and the meaning that a graphic can convey within its larger web surroundings.

Within the theory realm, we’ll examine the historical roots of the “information superhighway,” as a Vice President once called it, and track its explosive growth from a handful of users in 1969 to 34% of the world’s population in 2012. We’ll engage in conversations about how conversations morph into online collaborations, and how people collaborate today compared with how collaboration took place before the explosion of the Internet.

We’ll also talk about the social networking revolution, starting with the original Facebook — Friendster — and the original Twitter — text messaging. We’ll expound on the socio-economic impact that the Internet has had on societies throughout the world, from reactions to political elections to how we shop.

Lastly, we’ll talk web code and how to write it well — in HTML5 and CSS3 — so you can implement your digital voice in an aesthetic manner using the aforementioned tools.

Prerequisite

Theories of Communications, COM 203, and Digital Imaging I, COM 251, are prerequisites for this course. As such, students should possess an understanding of the cultural and media-centric importance of the Internet along with a knowledge of handling and manipulating digital images.

Objectives

You will

learn to hand-code a web site that fully conforms to the W3 standards for HTML5 and CSS3
understand the origins of the Internet
better understand the socio-economic impact that the Internet has had on world societies
learn to appreciate how easy collaboration is as a result of the Internet
acquire a knowledge of how to manipulate graphics for the web
recognize when to “roll your own” graphics for the web
learn to identify the aesthetically pleasing aspects of good web design, while understanding why bad design is “bad design”
develop a better understanding of typography
grasp how front-end, web-based technologies interact with each other
develop a thorough comprehension of user interface, or UX, interaction

Schedule

Where: 1P (Center for the Arts) 231 (DDM lab)
Day: Wednesday
Dates: 28 August 2013 — 23 December 2013
Time: 10:10 AM — 2:15 PM, with two short breaks — one at about 11:45 AM and the other at about 1:00 PM.

John Szeluga’s handout containing information about lab software, workstations, printers, etc, is available here.

Note: our class will not meet on 4 September and 27 November. The college’s academic calendar — in PDF — may be downloaded here.

The Topics section below lists the material we’ll cover during the week that intersects the table along the left column, and the Homework section lists the homework due the following week.

For example, on 28 August 2013, week 1, I’ll introduce the course, discuss the history of the Internet, and start talking about web code. Your homework for the following week will be to acquire the course textbook(s), watch the assigned YouTube videos, and read.

Week	Topics	Homework
1 (August 28)	Introduction to the course The history of the Internet: October 1957 — present An introduction to HTML5 Structure of a web page	Purchase the course textbook(s) Watch the 6-part YouTube video set by National Media Museum, How the Internet was Built 1969—1983 Read Understanding Visual Hierarchy in Web Design Read the excerpts from Thinking with Type.
2 (September 11)	Discuss readings (HTML) Head elements (HTML) Basic formatting tags for paragraphs, boldface, italics, underlines, rules (HTML) Block level elements (HTML) Inline elements (HTML) The DOM tree	Read Designing for the New Fold: Web Design Post Monitorism Read Great Design Hurts: Striving for Pixel Perfection
3 (September 18)	Discuss readings (HTML) Commenting and proper documentation techniques (HTML) Lists (nested and non-nested) Unordered Ordered Definition	Read What Is The Elephant in the Digital Room? from Digital Disconnect, pages 1—22 Read Mathematics and Web Design: A Close Relationship Read An Introduction to Color Theory for Web Designers
4 (September 25)	Discuss readings (HTML) Audio (HTML) Video (HTML) Tables	Read Does Capitalism Equal Democracy? from Digital Disconnect, pages 23—62 Read The Gestalt Principle: Design Theory for Web Designers Read The Scaling Fallacy and Web Design
5 (October 2)	Discuss readings Watch Code Rush (open source discussion) (CSS) General syntax and nomenclature (CSS) External, embedded/internal, and inline styles (CSS) Structure of a rule Quiz 1	Read How Can the Political Economy of Communication Help Us Understand the Internet? from Digital Disconnect, pages 63—95 Read Errors: Bad Decisions or Bad Design? Read Less is More: Fundamentals of Minimalist Web Design
6 (October 9)	Discuss readings (CSS) The CSS box model (CSS) Shorthand properties (CSS) Combinators and selectors (CSS) Specificity (CSS) Classes and IDs	Read The Internet and Capitalism I: Where Dinosaurs Roam? from Digital Disconnect, pages 96—129 Read Chapter 3. Open Source as Culture/Culture as Open Source from The Social Media Reader, pages 24—30 Read Understanding the F-Layout in Web Design Read Understanding the Z-Layout in Web Design
7 (October 16)	Discuss readings (CSS) Normal and !important declarations (CSS) The cascade (CSS) Floating (CSS) Boxes and Effects	Read The Internet and Capitalism II: Empire of the Senseless? from Digital Disconnect, pages 130—171 Read Chapter 5. What Is Collaboration Anyway? from The Social Media Reader, pages 53—66 Read Concept and Inspiration: Design Theory for Web Designers Read Visual Direction in Web Design
8 (October 23)	Discuss readings Midterm examination (CSS) Typographical properties Watch Helvetica	Read Journalism Is Dead! Long Live Journalism! from Digital Disconnect, pages 172—215 Read Chapter 7. From Indymedia to Demand Media: Journalism’s Visions of Its Audience and the Horizons of Democracy from The Social Media Reader, pages 77—93 Read The Web Designer’s Theory of Relativity Read Unity in Web Design
9 (October 30)	Discuss readings (CSS) WebFonts (CSS) Borders (CSS) Position properties	Read Revolution in the Digital Revolution? from Digital Disconnect, pages 216—232 Read Chapter 6. Participating in the Always-On Lifestyle from The Social Media Reader, pages 71-76
10 (November 6)	Discuss readings Helvetica (design; typography) (CSS) Browser-specific prefixes (also known as vendor-specific extensions) (CSS) Color and backgrounds (CSS) Media queries (responsive web design)	Read Chapter 18. DIY Academy? Cognitive Capitalism, Humanist Scholarship, and the Digital Transformation from The Social Media Reader, pages 257—272
11 (November 13)	Discuss readings (CSS) Structural pseudo-classes and pseudo-elements (CSS) Transformations (CSS) Transitions (CSS) Gradients	Read Chapter 14. Giving Things Away Is Hard Work: Three Creative Commons Case Studies from The Social Media Reader, pages 187—197
12 (November 20)	Discuss readings Objectified (design) Quiz 2	Read Chapter 17. Between Democracy and Spectacle: The Front-End and Back-End of the Social Web from The Social Media Reader, pages 242—254 Work on your presentations
13 (December 4)	Discuss readings Final presentations of web projects, part 1 of 2	Work on your presentations
14 (December 11)	Final presentations of web projects, part 2 of 2	Study for final examination
15 (December 18)	Final examination	Enjoy your break!

Code

20 November 2013: Floats.
13 November 2013: Gradients.
6 November 2013: Working with open source fonts, font pairings, background images, and the background shortcut.
16 October 2013: Tables.
16 October 2013: Using the div tag to group logical items together; working with CSS’ combinators.
9 October 2013: Working with fonts, borders, background colors, etc.
25 September 2013: Working with images, character sets, links, paragraphs, etc.
11 September 2013: This zip file contains the basic template code for an HTML document.

Textbooks

Title: Digital Disconnect: How Capitalism is Turning the Internet Against Democracy
Edition: 1
Author: Robert W McChesney
ISBN 13: 9781595588678

This book is about $24 in hardcover format from Amazon and about $10 in Kindle format. Note that the Kindle format lacks page numbers and instead has locations to indicate your position within the book.

[Cover image of The Social Media Reader.]

Title: The Social Media Reader
Edition: 1
Edited: Michael Mandiberg
ISBN 13: 9780814763025

This book is not stocked at the bookstore. You may purchase the book from Amazon for about $22 or NYU Press for about $30.

Alternatively, this book is available for free in PDF, EPUB, Kindle, DJVU, and Daisy formats from archive.org.

In addition to our textbooks, you’ll be required to read a collection of online articles and PDFs, all of which are downloadable from the Assigned Readings section.

Assigned Readings

You are required to read all of Robert McChesney’s Digital Disconnect, 7 of the 18 essays appearing in the following list from The Social Media Reader, along with every other item listed below. (See the Textbooks section for more about Digital Disconnect and The Social Media Reader.) The Schedule section of this syllabus lists on which day each reading is due.

In total, you’ll read about 450 pages for the entire semester. Dividing 450 pages by 14 weeks (450÷14) equals about 32 pages of reading per week, or about 4 pages per day. This is not burdensome, if you manage your time properly.

Title	Author	Topic	Where to Acquire	Comment
Iran Protests: Twitter, the Medium of the Movement	Lev Grossman	Political Social Networking	Web link	This article discusses Twitter’s role in the revolution following the 2009 Iranian elections.
Web Design Theory	Brandon Jones, Shaun Cronin, Daan Weijers, Thomas Cannon, Ahmed Hussam, Curt Ziegler, Connor Turnbull	Web Design; Web Theory	Web link	Web Design Theory is a group of fifteen articles — known collectively as a session at Webdesigntuts+ — that relates to every important aspect of web design. One reading from this group will be assigned each of the fifteen weeks of our semester. The schedule section lists the day on which each reading is due.
Artistic Distance	Paul Burton	Web Design	Web link	Paul Burton discusses the importance of having your web design work critiqued by others, and how crucial it is to distance yourself — literally — from it so that you’re afforded a different perspective on your design.
Stop Work-for-Hire	Professional Artists League	Copyright	PDF link (114KB)	Work-for-hire is a US copyright provision that grants authorship and ownership to any hiring party of an independent contractor, or freelancer.
Thinking with Type — various pages	Ellen Lupton	Type Design	PDF link (40MB)	A series of readings on how to work with type correctly.
Applying Divine Proportion To Your Web Designs	Vitaly Friedman	Web Design	Web link	An article about applying the golden ratio or the rule of thirds to web design.
Readings from The Social Media Reader
Chapter 3. Open Source as Culture/Culture as Open Source	Siva Vaidhyanathan	Social Media	Pages 24—30	Open source: its common good advantages over copyright.
Chapter 5. What Is Collaboration Anyway?	Adam Hyde, Mike Linksvayer, kanarinka, Michael Mandiberg, Marta Peirano, Sissu Tarka, Astra Taylor, Alan Toner, Mushon Zer-Aviv	Social Media	Pages 53—66	Reflections on different models of contemporary digital collaboration.
Chapter 6. Participating in the Always-On Lifestyle	dannah boyd	Social Media	Pages 71-76	The author sums it up quite well: “Being always-on and living a public life through social media may complicate our lives in new ways, but participating can also enrich the tapestry of life.”
Chapter 7. From Indymedia to Demand Media: Journalism’s Visions of Its Audience and the Horizons of Democracy	CW Anderson	Social Media	Pages 77—93	From the chapter: “The primary claim of this chapter is that this simple dichotomy between audience ignorance and audience responsiveness obscures as much as it reveals and that multiple, complex, and contradictory visions of the news audience are buried within popular understandings of the relationship between journalism and Web. ”
Chapter 14. Giving Things Away Is Hard Work: Three Creative Commons Case Studies	Michael Mandiberg	Social Media	Pages 187—197	From Prof Mandiberg: “The central question I seek to answer is if and how an art or design idea/project/product is helped, hindered, or not affected at all by its open licensing model.”
Chapter 17. Between Democracy and Spectacle: The Front-End and Back-End of the Social Web	Felix Stalder	Social Media	Pages 242—254	An article about how the information we generate in social networks is manipulated to be seen one way via your browser and handled a different way via the back store.
Chapter 18. DIY Academy? Cognitive Capitalism, Humanist Scholarship, and the Digital Transformation	Ashley Dawson	Social Media	Pages 257—272	From Ms Dawson: “In this essay, I situate discussion of the open-access movement within academia in the context of contemporary theories of the knowledge economy and immaterial labor.”

Announcements

11 September 2013: I’ve changed my office hours. See the Contact and Office Hours section.
24 August 2013: Using the email listed on CUNYfirst, I’ve added each enrolled student to the class’ Google group. (We’ll discuss what a Google group is on Wednesday.) If you prefer to use a different email address than the one listed on CUNYfirst for you, send a blank email to com-370+subscribe@googlegroups.com. If you haven’t received a message from Google saying that you’ve been added to the group, check your spam/junk folder. We’ll iron out any snags on Wednesday.; The most important announcements are made here and on our internal Google group. However, all announcements are always made on the Google group.

Software Requirements

Whether you use Windows or Mac, all the necessary software for this course is listed below. It’s all free and downloadable from their respective links.

Browsers

Download all the browsers available at Browse Happy. For Firefox, you’ll need to add all the plugins you see here.

Text Editor

The code you write will require a text editor. Mac users should download TextWrangler and Windows users should download Notepad++, choosing the “Notepad++ Installer” link from the download page.

Web Developer Tools

Chris Pederick’s Web Developer Firefox add-on is a helpful HTML and CSS debugging tool.

A Link Checker

The W3’s Link Checker isn’t software you download, but a utility that verifies links on a web page so you don’t have to. Bookmark it.

A Compression/Decompression Utility

If you’re using Windows and you don’t have a compression/decompression utility, download 7-Zip, which is free and open source. Mac and Linux/UNIX users already have free compression utilities installed at the command line.

Grading Guidelines

Your grade for this course will be computed entirely on the following:

Quiz 1 (15%)
Quiz 2 (15%)
Midterm examination (20%)
Cumulative final examination (25%)
Final web page project (25%)

Please, please do not try to negotiate a grade with me — before or after — any work due. By asking me to favor you (“I can’t have this class hurt my GPA,” “My student status depends on my doing well in this class,” or, “I need a B or better for my student loans”), you’re asking me to put you above your classmates. It’s a form of extortion, and I will remember your having asked me to treat you better than your peers. Therefore, please, do not have this conversation with me and make sure to manage your time well.

I do not accept late work; there is no extra credit; I do not curve grades. Your final letter grade is converted from a numerical grade based on the following table.

Numerical Range	Grade
97 — 100	A+
93 — 96	A
90 — 92	A-
87 — 89	B+
83 — 86	B
80 — 82	B-
77 — 79	C+
73 — 76	C
70 — 72	C-
68 — 69	D+
66 — 67	D
65	D-
Below 65	F

Web Programming Resources

HTML

CSS

Chris Coyier’s CSS-Tricks
The CSS Validation Service
Sitepoint’s CSS Reference
A CSS3 gradient generator
A JavaScript-based specificity calculator

Contact and Office Hours

My email address is roy dot vanegas at csi dot cuny dot edu. However, you’re strongly advised to see me if you have questions, as I rarely ever do email nowadays. I’m available after class on Wednesdays by appointment, usually between 3:30 PM — 4:30 PM. We can meet in 1P-232. You can also make an appointment with me if you cannot meet on Wednesdays.