Web Standards

As Brian's previous post says, we've had this idea for Druplash (which means Drupal, Flash, Services/AMFPHP, and most importantly SWFAddress) since last spring. We've both been involved in Drupal in the last several years. Brian got an earlier start, and I was first exposed to Drupal through Kevin Reynen's vision for its use at Bradley University.

Brian and I get ready to deliver the first incarnation of our presentation on Druplash/Druplex.

My feelings about Drupal are probably best expressed through a comment that webchick made in IRC last weekend, which I will poorly paraphrase here, "Whenever I have a website project, I look at how I can fit Drupal to it."

Drupal's an amazing project, and you get so much with an install of Drupal - user and role management, a very secure login system, the flexibility of using theme functions to easily change output, using locale to translate parts of the user interface you want to change, and FormAPI, which I have just started working with over the past two weeks.

I bring this up because Brian and I had both been using Drupal for at least a year and a half, yet we hadn't really jumped into the community yet. Brian had gone to one Central Illinois Drupal meetup which I couldn't attend due to a musical engagement, and we'd each submitted a patch or two: I did an exceedingly simple patch to Services, and Brian submitted some new functionality back to WebFM.

Regardless, DrupalCampWI would really open my eyes to how vast the Drupal community is and how I could take part.

Tonight, Steven Merrill and I committed and released our first beta version of SWFAddress.module for Drupal 5.x. We demo'd an early alpha version at DrupalCampWI a few weeks ago and Steve has been hard at work shoring it up for release.

Steve and I came up with the concept for Druplash and Druplex (what we call Drupal powered Flash and Flex sites) about a year ago and have just been toying with them ever since. We recently got ourselves in gear when Steve needed to build a new portfolio (link coming soon) for his future career as an opera singer.

Using the great SWFObject and SWFAddress javascript libraries and the Services and AMFPHP Modules for Drupal, we figured out how to build full Flash and Flex experience sites which degrade nicely to full HTML underneath for SEO.

There has been a bit of a buzz going around the Internet the last few days or so about Amy Gahran's post on Dreamweaver being taught to students at an unnamed J-School. Her stance, and she's been backed up by joshb and Ken Rickard, is that Dreamweaver is a poor tool to teach journalism students in their online journalism classes and that teaching students how to use content management systems like Wordpress or Drupal would be better.

After discovering that IE8 passes ACID2, I looked around the web a bit more. I linked to a video on MSDN's Channel 9, but there's another post on the IE blog that details a bit more information on the IE8 milestone, and it looks to include an entire code checkin report.

Straight from the horse's mouth, Microsoft's Channel9 blog has a video piece and blog post describing how IE8 is now passing the ACID2 test.

This is great news, since the included video states that they not only had to fix several bugs to do this, but there's also many CSS features they had to implement to do it.

The video is in WMV format, but it's worth a watch, since it sounds like the IE team is more standards-aware than their current browser releases would indicate :)

UPDATE: My childhood friend Jonathan Hoersch works at Microsoft, and we had a chat today about this excellent news, and he says: some of the things i worked on for acid2 include the nose (including the blue hover), borders, images (the eyes), and the hyperlink scrolling.

Here's one more excerpt from our IM conversation:

Jonathan: so you know the beginning of the video where we show the acid2 evolution?

Me: Yeah

Jonathan: its from an internal video where we had the 2001 theme in the background :-) unfortunately we couldn't include the sound

It looks like the IE8 team is working towards interoperability in this effort. Now if we can get IE6 out of the ecosystem, I think that we'll have a far happier ecosystem of web designers and developers.

Firefox is my web development platform of choice. The Web Developer toolbar gives us web developers and designers an amazing array of tools, and Firebug gives us not only JavaScript debugging, but also an array of helpful CSS tools, especially tools that will help sniff out traces of the browser's built-in stylesheet (margins remaining on headings and the like, which often confuses beginning web design students who aren't using some kind of browser-style reset.)

In any case, the new Safari Web Inspector, which will not be accessible until you turn on Safari's debug menu, looks to have most of the best qualities of Firebug and Web Developer built in, and enabled the aforementioned debug menu also gets you an Inspect This Element contextual menu item when you right click something, as I am doing with an a tag in the example below.

Bravo Apple! I'm still of the opinion that Safari's Activity Window kills every other solution for debugging issues with loading external data in Flash on the web, and building in a tool like this will make it infinitely easier to debug styling issues in Apple's browser.

(I recently got a new MacBook Pro with Leopard, and this was present. This new feature has been present in WebKit for awhile, but the updated interface is part of the Safari 3.0 release.)

Okay, Druplash isn't a real trademark, but I will say that I've been playing with the Drupal Services module and AMFPHP modules, and I think that the potential to serve up a site using SWFObject, SWFAddress and Drupal 5 is incredible. In a nutshell, Drupal 5 lets you send entire blocks of content into a Flash movie of your choosing, and there's no performance hit on the Flash side. AMFPHP sends objects to Flash / Flex in a native binary format, so that you don't have to spend processing power on the client computer decoding XML.

In combination with SWFObject and SWFAddress, you could also serve up HTML content under each Flash page, and with the Mobit module, you could also maintain a mobile version.

Grading quizzes is always fun. Last semester, I got my favorite answer yet from a student who remarked that:

"Standards-based web design uses XHTML and CSS to separate the men from the boys."

(The answer I was looking for, of course, was presentation from content.)

As I finished up some grading for midterms, I got a far funnier answer than that one. You will need to know something about web design to understand this one.

The question was "What is divitis?"

<div id="maincontainer">
<div id="insideContainer">
<div id="answerContainer">
<div id="answer">
<div id="answerTop"></div>
<div id="answerBody">
<div id="title"><h1>THIS IS DIVITIS</h1></div>
<div id="explanation">
It's where people use waaay to many unnecessary div's to basically fake the "power" they had with tables.
</div>
</div>
<div id="answerBottom"></div>
</div>
</div>
</div>
</div>

I won't post the author's identity, but I'm guessing he or she will comment and claim this massive, epic win.

An excellent interactive artist named Paul Catanese visited Bradley University on Thursday. He was part of this year's set of Visual Voices lectures, and his visit was excellent for a large number of reasons.

Paul is much like me, in that he teaches in the field of multimedia. We swapped notes on techniques in web design classes. (He was quite impressed with Chad's idea to use a del.icio.us account to keep track of pertinent web links.) We discussed quite a few issues in teaching web design:

1. In the span of only two classes, we must take folks who are used to the drag and drop ease of Flash, and show them that to truly write standards-compliant sites, you need to have a good understanding of the HTML code of a website. (Luckily, we've begun to introduce HTML and basic web design earlier into Bradley University's curriculum.)
2. Paul said that he'd love to be able to teach PHP and MySQL in his top-level web design course, but that he just feels that there isn't enough time.
3. I was showing my class some tips on producing sitemaps and wireframes in OmniGraffle when Paul came into my web design course. If you own a Macintosh, you owe it to yourself to at least download OmniGraffle, since there it a 20-node limited version available. There are excellent free stencils available to produce wireframes, UML diagrams, network layouts, and hundreds of other types of graphical documents. Paul showed me Graffletopia, which has literally hundreds of free documents and stencils available for download.

Then Paul left for a little bit as I went to gather the stable of mobile phones for my special topics course, and I offered to let him speak for quite awhile, since Paul has done some neat things with blending gaming appliances like the Game Boy Advance into his artwork.

You get photo posts working from your smartphone, and you don't think "Man, that's amazing!" but rather:

1. They're using align="right"? Why not put that logo paragraph first and set it to float: right instead?
2. I wonder if I can Lightbox those images automatically.

Mini-Update: After visiting every web designer's best friend, the W3C Validator, I have a few more comments.

3. ShoZu is a cool app, but it leaves off alt tags by default. No chance of validating the homepage without that.
4. This theme also has one validation error all its own. My next milestone in this blog's existance will be to get it validating.