Schedule
September | October | November | December
.:Class meets Mondays, 10AM-12:50PM
.:Room4M03 (The Schedule of Classes says 2A05, but we need computers!)
.:Our Text is Designing Effective Websites, by Johndan Johnson-Eilola
.:Flash Drive required (128mb minimum. Spend $40-50 and get 512mb, or more.)
This schedule is written for electronic media. Use the months above to jump down to the class meeting you want. The schedule is available 24/7, and one click will take you to the assignment you need. In fact, all of our course materials (except for our book and some materials I'll put on reserve) are accessible any place you have an internet connection. There are no paper handouts. Print if you must, but I suggest you go "Skinless" first (see page bottom).
Each class meeting description begins with a "Got a minute?" link to an electronic text. I have chosen these awesome texts for various reasons, though it won't always be clear why I have chosen them. I encourage you to explore them, to think about them in relation to what we're learning, and to post a comment about them on the course blog. Each week you'll find a course blog post for the Got a Minute? link. Writing for electronic media takes place in many different environments, and I encourage you to work in several of them each week.
I'll add assignment links as the semester unfolds.
Week 1 - September 6 (I know it's Wednesday, but c'est CUNY)
Got a minute for Gecko & Fly?
While this is our first class meeting, we'll roll up our sleeves and get right to work. We won't need a textbook to get started when so much of what we need is already accessible on the world wide web. We'll introduce ourselves and fire up our computers, then I'll give us all a brief tour of the course. It may seem like a lot, and by the end of the term you'll be amazed at what you've accomplished, but it isn't so tough.
We'll start our work by thinking broadly about writing and the purposes for writing in electronic environments. Your mission for today is to claim some space for your personal weblog (Blog), give it some style, and make a post. Before you realize it, you'll have a customized Blog running and a personal website under development.
Classwork
.:Introductions and Inaugural Post to Course Blog
.:Multiple Purposes, Multiple Media - a warmup exercise
.:Coding Assignment 1 - Personal
Weblog (Blog)
.:Writing Assignment 1 -
Make a Blog Post
.:Design Assignment 1 - Choose
a Visual Theme
Homework
.:Writing Assignment 2 -
Content Generation - Personal Website
.:Decide on a topic for your personal blog, and get blogging
(See Writing Assignment 1)
.:Visit It's
a Web Thang's "Learn HTML in 3 Days" tutorial. Read through
Day 1, and the section on "links" from Day 2. (Don't care for
Web Thang, or find the server down? Read the comparable tuts at W3Schools
or HTMLDog
by reading the individual tutorials, up to and including "links".)
Week 2 - September 11 (No, that's not a typo. We meet on 9/11)
Got a minute for Crucial Limit?
Today we'll share the fruits of our first week's labor by showing off our blogs! We'll talk about what we're doing when we select a theme for our blog, and work on a language for discussing what we see when we look at an electronic text like a blog.
While it is really easy to simply apply a ready-made theme to the blogs we're using, thinking a little about what's going on "behind the scenes" gets us ready for what we'll be doing when we're really writing our own websites!
Then we get down and hand code HTML! Relax. This isn't hard. You really only need to know about 15 little things and they're fairly easy to learn. You don't need to memorize or anything. And before too long we'll use an HTML editor to make it easier to quickly work up our websites.
Due Today
.:Writing Assignment 2 -
Content Generation - Personal Website
.:Personal Blog Post
Classwork
.:Elements of Electronic Texts - an exercise
.:Discuss & Share Theme Choices and Blog Topics
.:Introduction to HTML (I'll help, but do visit Jennifer's
basic tutorial on hand coding in HTML at It's a Web Thang, or W3Schools,
or HTMLDog.)
.:Begin Coding Assignment
2 - First Draft, Personal Website
Homework
.:Finish Web
Thang's Day Crash Course on HTML at It's a Web Thang (You can skip forms
and checkboxes.)
.:Writing Assignment 3 -
Users, Audiences, and the Course Weblog (Reading and Analysis)
.:Finish Coding Assignment
2 - First Draft, Personal Website
.:Design Assignment 2 - Style
Personal Website (HTML, in-line attributes)
.:Remember to make a post on your personal weblog!
Week 3 - September 18 (In the groove. Nothing odd about this meeting day.)
Got a minute for Aaron J. Hudson?
We'll continue working on our Personal Website projects today, and start some graphics work. But before we get too far along on the technical side of things, we need to think about the writing piece. What are we writing for? Why would someone read what we're writing about on our websites? We need to put ourselves in the shoes of our audience! We'll talk about web users, some of the complications of writing/designing for the web, and explore what we found in Writing Assignment 3.
Due Today
.:Writing Assignment 3 -
Users, Audiences, and the Course Weblog (Reading and Analysis)
.:Design Assignment 2 - Style
Personal Website (HTML, in-line attributes)
Classwork
.:Users, Audiences, and Graphics - an interactive exercise
.:Bandwidth, GIF vs. JPG, and the Adobe Photoshop Interface
- an introduction
.:Header Graphics Tutorial
- Postponed
.:Buttons Tutorial - Postponed
.:Begin Design Assignment
3 - Graphics for Personal Website - Postponed for one week
Homework
.:Finish Design Assignment
3 - Graphics for Personal Website - Postponed for one week
.:Writing Assignment 4 -
Describing Graphics Process - Postponed for one week
.:Design Assignment 4- Storyboard
Personal Website
.:Revisit It's
a Web Thang's Day 2 tutorial, focusing on graphics/gif/jpg, and read
W3Schools'
or HTMLDog's
tutorials on tables
.:Remember to make a post on your weblog!
Week 4 - September 25 (Wow! Two regular meetings in a row. Can it last? No.)
Got a minute for Newark1?
We have more coding and graphics fun in store for today. We're also going to look at that important HTML element called TABLE and use it to structure a layout for our hand coded personal websites. And since we can only understand a software program by playing with it, we'll be playing with Photoshop again today.
Note: We meet on Tuesday next week!
Due Today
.:Design Assignment 3 - Graphics
for Personal Website - Postponed for one week
.:Writing Assignment 4 -
Describing Graphics Process - Postponed for one week
.:Design Assignment 4- Storyboard
Personal Website
Classwork
.:Color & Contrast - an exercise
.:Begin Coding Assignment
3 - Add Graphics and Layout to Personal Website (Update: Layout Optional!)
.:Begin Design Assignment
5 - More Graphics
Homework
.:Continue Design Assignment
5 - More Graphics
.:Remember to make a post on your weblog!
Week 5 - October 3 (Today is Tuesday, but CUNY hath decreed it Monday)
Got a minute for Mira Borukhova?
How is it going? It takes a while to get a feel for the code, and there is no way we'll fully understand the code by the end of the term. (I'm always visiting W3Schools for help, and I've been coding for nearly 6 years!) Hand coding is frustrating at times, but it is important to be able to poke through the source when things go awry. I hope you're at least starting to be able to see through the code to the way it will look on the page. And this is why we're doing some of it.
Think like Cipher. He knows he doesn't fully understand the Matrix but he can see the pieces that he focuses on. After an exercise on layout, we'll get right into a heavy dose of coding, with me floating around to help you realize your vision.
Due Today
.:Progress on Coding Assignment
3 - Add Graphics and Layout to Personal Website
Classwork
.:Emphasis, Alignment, Layout - an exercise
.:Hand Coded Personal
Website - Checklist
.:Continue Design Assignment
5 - More Graphics
Homework
.:Finish Hand Coded
Personal Website - Checklist
.:Writing Assignment 6 -
Interpret Your Visual Design
.:Writing Assignment 8 -
Introduction to DMX
.:Finish Design Assignment
5 - More Graphics
.:Remember to make a post on your weblog!
Week 6 - October 9 (College is Closed for Columbus Day!)
Got a minute for Columbus: Secrets from the grave ( Discovery Channel)?
We're not meeting today, but this doesn't excuse us from work. Each day for us is like two for everyone else. So, consider it a 1/2 day off! You really should take this opportunity to make solid progress on your Major Web Development Project. You'll need to survey what's already out there on your topic, assemble some good links on your topic, and begin to get inspired about a design. Since your topic is something that already interests you and cool websites are really eye candy, this is actually fun.
And if you feel a need for some learning that's good for you, check out the Discovery Channel's program on Christopher Columbus!
Classwork
.:No class meeting today, but we have some important work due
next week!
Homework
.:Finish Hand Coded
Personal Website - Checklist
.:Writing Assignment 6 -
Interpret Your Visual Design
.:Writing Assignment 8 -
Introduction to DMX
.:Finish Design Assignment
5 - More Graphics
.:Remember to make a post on your weblog!
Week 7 - October 16 (Welcome back!)
Got a minute for Jason Kottke?
Congratulations on completing your first full website project. Cool! Was hand coding really necessary when good HTML editors exist to do the coding for you? Um, yes.
Like Daniel-san (aka the Karate Kid) who must "wax on, wax off" Mr. Miyagi's classic cars before he can learn karate, you had to have some understanding of the basic elements, tags, attributes, and values. You can't understand that stuff by simply reading about it, and it isn't about memorizing either. Much like Daniel-san, you'll soon discover that all your work waxing on and waxing off elements, attributes, and values in the BODY has actually taught you a whole lot about developing a webpage.
Today we fire up Dreamweaver (aka DMX) and hear the roar of a high-performance WYSIWYG HTML editor. You'll find out that you have been working a lot harder than you had to work. But you'll also find out that when DMX misbehaves (and it will!) you know enough to get your hands dirty in the code. Armed with DMX, we'll quickly rework our personal websites, learn to use templates and Cascading Style Sheets (CSS) to generate websites that meet W3C Recommendations for XHTML. How's that for a paragaph full of acronyms and abbreviations. DMX, WYSIWYG, HTML, CSS, W3C, XHTML. Oh boy!
Two significant projects will occupy your time for the rest of the term: a cool version of your Personal Website built using DMX Templates and CSS, and the "Major Web Development Project". We'll get a feel for the DMX interface by beginning work on a DMX-generated version of our Personal Websites. (It's time to pull out that storyboard you drew a few weeks ago and begin rethinking the whole design of your Personal Website!)
Due Today
.:Hand Coded Personal
Website - Checklist
.:Writing Assignment 6 -
Interpret Your Visual Design
.:Writing Assignment 8 -
Introduction to DMX
.:Design Assignment 5 - More
Graphics
.:ARGH! Confused? See my "model" at http://students.york.cuny.edu/~mcripps
Classwork
.:Touring DMX and Defining our Sites (links, images and ALT
attribute, rollover image javascript)
.:Coding Assignment 4 - DMX
Personal Webpage
.:Tutorial/Resource - Learnthat's
DMX Tutorial (pp. 1-30; 39-47)
Homework
.:Finish Coding Assignment
4 - DMX Personal Webpage (basic version)
.:Writing Assignment 5 -
Major Website Project Idea
.:Writing Assignment 7 -
Links Assignment
.:Remember to make a post on your weblog!
Week 8 - October 23 (We're halfway through the term; it's all downhill from here - just kidding)
Got a minute for Sandra Rios?
This week we get more comfortable with DMX and take a closer look at using TABLE to control layout. While the TABLE element is no longer the recommended approach to layout for XHTML, it really is the easiest way to reliably control page layout on a website. And since this is not a class on XHTML or World Wide Web Consortium recommended standards, we'll keep it light to keep it moving.
More importantly, we'll learn more about a very powerful tool in our web development kit, Cascading Style Sheets (CSS). You're getting tired of "remaking" your Personal Website (I can't blame you!), but we're going to do it again. This time, however, you'll make it sooooooo much cooler. And it will be easier to make changes too!
And while you're learning this cool new tool, you're doing a lot of the important research, planning, design, and writing for your major web project. In short, you're "doing" the Major Web Development Project.
Due Today
.:Writing Assignment 5 -
Major Website Project Idea
.:Coding Assignment 4 - DMX
Personal Webpage (basic version)
Classwork
.:Separating structure and presentation in web development -
CSS
.:Layout in web development - TABLE
.:Working on Personal Website/Portfolio
.:Tutorial/Resource - Learnthat's
DMX Tutorial for CSS (pp. 31-38)
.:Tutorial Resource - WebThang's
DMX Tutorial for Tables
Homework
.:Design Assignment 6- Designing
Major Project
.:Writing Assignment 7 -
Links Assignment (Part I)
.:Remember to make a post on your weblog!
Week 9 - October 30 (Halloween's tomorrow! Optional: wear a costume to class!)
Got a minute for Eccentris?
We have been reworking our personal websites using DMX and CSS over the last two weeks, and making progress on our major web development project. We're going to continue that progress today by turning our layout for our new and improved personal sites into a template. This should be fairly easy to implement since we have already got the basic page for the personal website and its associated CSS. After today, I'll bet that you'll never go back to in line attributes and copy-paste code-snipping web development!
We first saw the beauty of the DMX template a couple weeks ago when we remade our personal site and were able to quickly replicate that work over all the pages. One page, the template or .dwt file, controls the layout of all the pages on which it's based. Templates do to structure what CSS does to presentation! Have your website all done? Then usability tests and the client's fickle husband say the vertical navigation should be on the right side of the website and not on the left, where you put it when you created the 150 pages of the site. Do you go into each page and move the navigation? Not if you have a template. Move the navigation on the template page, hit save, and DMX changes every page in your website!
Due Today
.:Design Assignment 6 - Designing
Major Project
.:Writing Assignment 7 -
Links Assignment (Part I)
Classwork
.:Separating content from structure and presentation - Templates
.:Working on Personal Website/Portfolio
Homework
.:Begin Writing Assignment
9 - Feature Article
.:Design Assignment 7 - Storyboard
Major Project
.:Remember to make a post on your weblog!
Week 10 - November 6 (No note this week.)
Got a minute for Maria Q. Stultz?
For the last few weeks we've been working on two kinds of projects. We've been updating our Personal Websites as a mechanism to learn DMX, CSS, and Templates, and doing a lot of research, design, and writing for our Major Website Projects. We now shift our web development attention to the Major Project. I strongly encourage you to continue to work on your Personal Portfolio and have placed it in the category of Homework for the rest of the term. But we will no longer focus classroom attention on the portfolio, at least not until the end of the term.
Today we'll be working in groups to solidify our Final Website Projects. You're bringing to the table a set of good links on your topic, together with your evaluation of those links. And you have both a design rationale and storyboard for your major project. You are going to share your ideas with peers, give them a tour of your design inspirations, think about your layout grid, consider possible graphics (buttons, headings, etc), and explore ideas for relevant visuals, other areas of the site, etc.
Due Today (Bring to Class!)
.:Design Assignment 7 - Storyboard
Major Project
Classwork
.:Organization - an exercise
.:Workshop Storyboard, Links, Feature, & Visuals
.:Introduction to Final
Project Criteria Checklist
Homework
.:Continue Writing Assignment
9 - Feature Article
.:Writing Assignment 7 -
Links Assignment (Parts I & II)
.:Writing Assignment 10
- Organization
.:Remember to make a post on your weblog!
Week 11 - November 13 (Now is about when the Fall term starts to seem like it just won't quit. Only 5 weeks left to get those projects together.)
Got a minute for Natalie Diffloth?
Armed with fresh ideas from conversations with our peers, a draft of our Visual for the Major Website Project, and anticipating feedback on our Feature Article drafts, we'll spend the day turning our ideas for our Major Project Websites into reality. Today is a free lab day in the sense that you are welcome to work on your Major Website Project, your Final Personal Portfolio, or both. I encourage you to take on design and coding elements that you find difficult so you can get help on them in class. You have plenty of coding work, graphics work, research, and writing to keep you occupied. But I'm throwing in an interactive warm-up exercise to get us thinking about the overall structure of our website projects.
Due Today
.:Writing Assignment 9 -
Feature Article (Draft 1)
.:Writing Assignment 10
- Organization
.:Writing Assignment 7 -
Links Assignment (Parts I & II)
Classwork
.:Coding Assignment 5 - Template
& CSS, Major Project
.:Design Assignment 8 - Major
Project Graphics
.:Continue Final Project & Personal Portfolio
Homework
.:Finish Coding Assignment
5 - Template & CSS, Major Project
.:Finish Design Assignment
8 - Major Project Graphics
.:Continue Final Project
Development
.:Continue Personal Website/Portfolio
Development
.:Remember to make a post on your weblog! (Final Reminder)
Week 12 - November 20
Got a minute for David Fardan Nodal?
We're doing some more coding today. Again, focus on whichever project makes the most sense for you right now. Since the graphics for your Major Website Project are due today, you probably want to start by getting those into the draft index.html page and template page for that site. This will enable you to troubleshoot any problems while you have some support on hand.
Next week working drafts of our major projects are due and we'll do some usability testing, so you definitely want to get things up and running on that site. And since you have a draft Feature Article and Links assignment done, you probably want to pour some content! This will give you website that is starting to look like something. Add your draft visual page material before next Monday and you're getting close to something like a finished product.
None of this will happen until after we spend some time thinking about sequencing, visuals, and web development.
Due Today
.:Coding
Assignment 5 - Template & CSS, Major Project
.:Design Assignment 8 - Major
Project Graphics
Classwork
.:Sequence - an exercise
.:Continue Final Project
Development
.:Continue Personal Website/Portfolio
Development
Homework
.:Writing Assignment 11
- Visual Page (Draft 1)
.:Finish Working Draft,
Major Website Project
.:Continue Personal Website/Portfolio
Week 13 - November 27
Got a minute for Bloody Suckers?
Today will be interesting. You'll bring to the table a working draft of your Major Website Project and we'll do some show and tell in groups.We're just back from Thanksgiving, we're going to explore issues of Usability, Functionality, Validity, and Accessibility. This will be both fun and provocative. You'll learn a lot, though you might wish you hadn't run your project through the process.
Due Today
.:Writing Assignment 11
- Visual Page (Draft 1)
.:Working Draft, Major
Website Project
Classwork
.:Functionality, Accessibility, Validity, and Usability (FAVU)
.:Writing Assignment 12
- FAVU Report
Homework
.:Writing Assignment 12
- FAVU Report
.:Continue Final Project
.:Continue Personal Website/Portfolio
Week 14 - December 4 (Coming Together.)
At this point in the term, you should have a working (though somewhat rough) Major Project Website. Your usability, functionality, and accessibility testing is done, and you're revising based on feedback you have received. Today, you'll be revising the Major Website Project based on what you learned last week and getting your Final Personal Portfolio into shape. We have only two weeks to make it all work seamlessly, so let's leave it all on the table over these last two weeks.
Due Today
.:Writing Assignment 9 -
Feature Article (Draft 2)
.:Writing Assignment 12
- FAVU Report
Classwork
.:Coding Assignment 6 - Addressing
FAVU
.:Continue Final Project
Criteria Checklist
.:Continue Personal Website/Portfolio
Checklist
Homework
.:Continue Coding Assignment
6 - Addressing FAVU
.:Continue Final Project
Criteria Checklist
.:Continue Personal Website/Portfolio
Checklist
Week 15 - December 11 (Last Class? No Way! Way. That was quick.)
Got a minute for Joshua M. Taron?
No point belaboring the issue. This is the last class meeting before the final, and we all know what to do! If you've done your work along the way, you should be mostly tweaking glitches in the display of your Major Project website, double-checking for broken links, continuing cross-browser, -platform, -display resolution functionality, validating your XHTML and CSS, and maybe inserting the revised content for your Visual Page into page. You should also be getting that project into your Final Personal Portfolio site, and checking that site for issues. This isn't the most creative work, but it is absolutely necessary if your user is to spend time at your site.
Due Today
.:Writing Assignment 11
- Visual Page (Draft 2)
Classwork
.:Coding Assignment 6 - Addressing
FAVU
.:Finishing Final
Project Criteria Checklist
.:Finishing Personal
Website/Portfolio Checklist
Homework
.:Finishing Final
Project Criteria Checklist
.:Finishing Personal Website/Portfolio
Criteria Checklist
Week 16 - Final Exam (TBA)
On this, our last day of class, we will show off our Personal Portfolios, including our Major Website Projects, and take the final exam. Be prepared to talk about your site and to critically assess and evaluate websites today.
Due Today
.:Personal Website/Portfolios Due!
.:Final Project Due!
Classwork
.:Final Exam!
.:Oral/Visual Presentations of Final Projects and Personal Websites/Portfolios