JB 3623 Internet Communications

Tonight we look at typography for the web. Compared to the dark ages of 10 years ago, you have a wealth of options that can make any web page look as good as a magazine page.

Just today, there was a really good post listing 15 sites that do an excellent job with typography, many of which are among my favorites. Another good resource is The Elements of Typographic Style Applied to the Web, which looks at some of the finer points of the art.

If you’re experimenting with fonts, a good site to play around with possibilities is Type Tester. It lets you compare various font faces with the corresponding CSS properties that we’ll be covering tonight.

Here’s a good site that shows many of the possibilities that CSS and lists have to offer…

Up until now, we’ve looked at some pretty boring HTML documents. Tonight that changes as we begin the first of four lectures covering Cascading Style Sheets, the standard for presenting web documents.

One of all-time favorite sites is called CSS Zen Garden. The concept is very simple: take one simple, well structured HTML page and apply different style sheets to it, radically modifying the look and feel of the document with hundreds of different designs.

We’ve looked at ways to apply this concept to your class projects, but until now you haven’t had all the tools and knowledge to apply concept. Listen carefully and read the class notes…

…is the star of tonight’s class as we cover basic web graphics and generating some initial designs for your web sites. This Photoshop file is a pretty good example of some of the things you can do using photoshop to edit graphics, including mixing up photos, adding text, adding drop shadows and other special effects.

In a few weeks, you learn that much of what you can do with Photoshop, you can now accomplish with plain text html using cascading style sheets. But for now, we’ll look at how you can add graphic images to your web sites and begin working on a basic design.

Don’t forget to review notes from the previous lectures for tonight’s quiz…

When you miss a class, don’t forget to check the class notes for any presentation you might have missed.

…that you’ve been added to Student list on the student page located in the right sidebar.

In addition, there’s a more general student list located here…

You should have a pretty good idea by now of what you want your site to be about. If you’re still undecided, let’s talk about it and also look at what some students have done in the past. Between now and next Tuesday, I want you to complete your about page with a description of what your site will be about.

Tonight we begin a new class.

The syllabus should tell you everyhing you need to know…

The calendar might also be helpful.

Have you seen the new ocolly.com web site?

The final for this class is scheduled for 8 p.m. on Tuesday. As noted in class on Thursday, I will here at our regular class time of 6:45 p.m. and any student who comes between then and 9:50 p.m., when the final is scheduled to be over, can take it when they get here. I would encourage you to come at 6:45 p.m. because I’m sure you have better things to do than wait an hour an a half to take your final exam in our class.

In preparing for the final, you should review these items:

• Quizzes
• Final Exam Review
• Mid-Term Exam

As noted in class, emphasis will be place on html markup and cascading style sheets. Some of the questions will be taken directly from the mid-term, such as the diagram for the box model. Because of the length of time we spent on your projects, you should do well, but there’s no substitute for an appropriate amount of time spent studying the material.

Good luck!

In past semesters, projects have been turned in during class. The procedure has been pretty basic and was meant, in part, to provide a sense of closure to the semester.

A couple of students have conflicts with tonight’s class so I’ve come up with a simplified way to submit your projects from anywhere. Here are the steps I need to know that you have completed your assignment:

1. Log into your site’s admin area.
2. Go to Presentation->Theme Editor and the default document will be your stylesheet.
3. The fifth line is Author. Change “Dennis Whiteman” to your name and click the “Update File” at the bottom of the editing area.
4. In your browser, navigate to your stylesheet, which will be located somewhere like this:

   http://jb3623.com/students/yourusername/wp-content/themes/jb3623txt/style.css

5. Choose Save As from the File menu in your browser and, instead of style.css, rename it with your user name, something like username.css. If you know how, you might archive it as a zip archive as some e-mail servers block files like css files, but it’s only necessary that I receive the file, zipped or not.
6. Send that file as an attachment to ultimate@jb3623.com with a note saying that you are submitting your project in final form.

Once I receive that message from you, I will know you have turned in your project. Following class tonight, I will be taking your sites offline while I grade them. That means they won’t be available on the web until I’ve finished grading them around April 24.

On that day, you’ll receive a copy of your site on CD along with a document explaining how you need to do on the final exam to get a certain grade based on the cumulative total of 80 percent of the grade components having been completed for this class.

To repeat, as long as you complete the above steps, sending me the stylesheet for your web site along with an e-mail, your semester project will be considered completed. You still need to meet the minimum criteria of 30 posts, pages or a collection of links. You can submit your project in class or from outside of class.

By default, your sites are set up as XHTML strict document types. If you run into validation problems, you can possibly solve some problems by lowering your standard to the transitional document type.

To change the document type:

1. Go to the presentation section in the admin area and choose to edit the header.php document
2. Replace the first line of the document with this code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

We’ve talked about this in class, but here are two tools, one for validating your pages and one for validating your CSS:

• Validate HTML — Validates the current page at W3.org
• Validate CSS — Validates the current page’s stylesheet at W3.org

You can add these tools to your browser by dragging the link to your bookmarks bar in Safari or Firefox.

If you are using Firefox, you probably have the web developer tools installed. Under the tools menu, there is a similar link for validating the current page.