CMXtraneous: CSS

Right on the edge of useful

A teacher's look at CMX JumpStarts

Posted Friday, October 29, 2004 7:21:23 AM by Sheri German

Sheri German

I have been teaching Dreamweaver, among other Macromedia programs, at the Government Printing Office and Trinity University for the last five or so years. Kim's post about "friends don't let friends use fonts" really got me thinking about the evolution of my curriculum for web related classes. Macromedia has released a lot of versions of its various programs during that time, and this means I've needed to keep revising the exercises I give my students.

At some point I realized that it wasn't necessarily in my students' best interest to show them every single bell and whistle in Dreamweaver. In my enthusiasm, I would demonstrate everything from layout view to automatic table formatting to HTML Styles, whether I thought they should use that feature or not. I finally came to the conclusion that teaching a "best practice" workflow, as opposed to revealing every possibility, gave my students real concepts they could hang on to after they finished the course.

This brings me to the revolution that probably brought the biggest change to what I teach: Web standards. I now take my students through a very prescribed set of exercises that begins with basic (X)HTML, progresses through hand-coded CSS, and ends with two template pages: one a hybrid CSS table structure, and the other a CSS positioned page. To relieve some of the seriousness, I give Fireworks breaks. The kinds of graphics we make are determined by the needs of our Cascading Style Sheet, but we try to have a lot of fun with effects and creative commands.

Why am I babbling about all of this? In addition to the fact that it's one of my favorite subjects, it is also because I am very excited about the new CMX JumpStarts. These are exactly the kind of learning experience my students (and we all) need. By examining the extensively commented files, students can deconstruct the very usable two column layout and get a crash course in how to make a CSS positioned page work well in all standards compliant browsers.

And that is something smile about. Because teachers don't let students use font tags...

Category tags: CSS, Dreamweaver

sIFR -- the Release Candidate

Posted Thursday, October 07, 2004 1:30:11 AM by Stephanie

Stephanie

I just noticed that Mike and Mark have a release candidate of the sIFR technique (pronounced "siffer"). Can't wait to put it up on a couple sites. I think I'll put it here on the blog for you guys to see over the weekend (if I can find some extra time. :)

The technique grew out of Shaun Inman's IFR technique which wasn't scalable. You had to export the swf in the size you wanted it rendered in. This technique is scalable and dynamic. Shaun writes, 'IFR is just an anagram of FIR, and pays homage to Fahrner Image Replacement. And it's "Flash Replacement" instead of "Text Replacement" for the same reason, to parallel FIR.'

Read their notes and download release candidate one. If you put it on a site, leave me a note and let me know how it works out for you.

Category tags: Accessibility, CSS, Dreamweaver, Flash, JavaScript

Accessible, Beautiful Flash Text

Posted Friday, October 01, 2004 5:27:02 PM by Stephanie

Stephanie

I've got to hand it to Mike Davidson. He's putting together one of the most inventive things I've seen in quite some time. I'll be writing an article about it soon. But for now, I'll give you the basics.

Mike's developing a way to use an image replacement technique (obviously most useful for headings) using JavaScript, Flash and CSS. You simply style your headings as always using your h1, h2, h3 elements and cascade the fonts as always. The technique then uses JavaScript (if installed), and replaces whatever text you've put into the heading element with dynamic text (using Flash). This means that we can use beautiful fonts, not installed on the user's system, on our web pages. This rocks!

I've been playing around with it and so far I'm excited about the results. The method is due out of beta soon and I've already got two client sites I'll be adding it to. The thing I like best is that if the surfer's browser does not have the Flash 6 player installed or has JavaScript turned off, the text renders using the CSS and they don't feel they're missing anything. This is not only good for accessibility, but it's also wonderful for search engines. This text can be indexed and read by all. Excellent!

You can read Mike's very long explanation at Introducing sIFR: The Healthy Alternative to Browser Text. And the most recent beta (check his site's blog for releases after this date) is version 2.0b2. You can download and play with the files -- sans instructions for now -- at sIFR 2.0b2: The Mo’ Betta Beta.

Category tags: Accessibility, CSS, Dreamweaver, Flash, JavaScript