I may be one of the most conflicted web designers on the planet. Seriously. I write Flash/Flex code about as often as I work in HTML/CSS. I love ‘em both. I hate ‘em both. Each tool has their own pluses and minuses. I speak often about my love for Flash here, so let’s change gears for a second. Let’s get provocative even… It’s got to be said. What the fuck is the deal with these standards writers, working groups and developers these days?

Why do I ask this… Well, you all have Flash/Silverlight on the ropes, but you are giving them a free pass. How so? With the release of HTML 5’s video tag, canvas, yummy semantic tags and other advanced markup goodies… pretty much any major site, (eg, Facebook, YouTube, Google Video, Vimeo, etc), could just about up and walk away from Flash with the next major revision of Internet Explorer (hopefully 9 will come around). You see, Safari 4, Firefox 3.5 are out and they like to party. They’re out playing video all night long and swinging from the rafters. The biggest draw on the web today, video, is by and large delivered via Flash. Now, I wouldn’t be so brash as to say that Flash’s days are numbered by any stretch by this developing situation. There are a lot of things that Flash can do that simply can’t be replicated, even with JQuery (my fave JS framework), Processing.js or the new Scripty 2. However, these new browsers really take care of a ton of things that Flash is needed for right now like video playback and basic RIA implementations.

I don’t mean to be disrespectful to the standards group, W3C, etc, but with the competing standard, arguably, an anti-standard, Flash, on the ropes, why are you not focusing and assisting the devs in the trenches, the browser and tool developers and the web designers in the cube farms at MS, Adobe, etc? It seems as though there is a fracturing, rather than a coalescing of resources and forces in the standards arena. Don’t believe me? Check this out. And this. And then for a laugh, this. It’s a bit liek the wild west again. I’m getting flashbacks to 1999-2000, when tables and spacer.gifs were clutched in the dying grips of every SimpleText coder and every GifBuilder jockey.

Sound audacious? I know, right. But look at the evidence. Twitter is abuzz with the recent additions to HTML5, with new hot samples being posted in playgrounds daily, what it means for Flash devs and on and on (simply run a search there and see). Beyond that, a number of high profile standards focused designers are on the warpath right now, speaking out and writing with a virulence not seen since the height of the browser wars (yes, I’m that old). For example, Zeldman has had a series of fantastic posts lately laying it out on the line talking about the demise of the XHTML standards group, defending the use of standards in the face of adversity and Eric Meyer has recently started giving a talk on “how Javascript will save us all”, in which he recommends using Javscript (favoring no specific framework, really) to do things that CSS3 and HTML5 do quite well. There are a number of other examples out there just like this. ‚Äì Full disclosure, I use both Meyer’s and Zeldman’s books in my classes.

Talk about cutting off your nose and all of that rot. I love standards just as much as anyone, but when the big boys are changing their tunes about what constitutes good standards implementation (separate content – HTML from presentation – CSS and behavior – JS) in order to remain within the toolset and bowing down to the same boards they fought against a decade ago to get CSS2 adopted, I start to get a bit squeamish. You see, I have to teach this stuff to students. Teaching standards based design was before a lot like teaching a foreign language. A language a bit like Japanese in that it had rules that are reasonable cut and dry and work well with each other because agreement on how they work was decided upon and then used! Now, it’s like a mish-mash of bad drunken Engrish. Too many exceptions, IMHO. It’s like “i before e”, but with end tags and doctypes. *Blech*

Am I abandoning web standards? Nope. Though, I’ll probably be a little more likely to make an exception to the rule in what constitutes a good use case for it vs a plug-in, though. After all, we have until 2022, right? Thoughts? What are you doing to keep your standards based design skills sharp? My advice, just keep swimming.

I teach a web design course at Bradley University. “Designing for the World Wide Web” is the course title. The focus of the course is standards based web design using CSS and XHTML, coupled with a little bit of behavior layer DOM scripting using JavaScript. We use JS to place media files and validate some forms, etc. After the first couple classes and some demos on how to create a standards compliant XHTML document, we move on to teaching CSS. That’s where this post comes in. One of the best places on the web to see the power of CSS is of course CSSZenGarden.com, and I like to use that site as a good intro to CSS design and using web design tools like Firebug, and the WebDeveloper toolbar. The assignment is fairly straight-forward.

1. Visit the site, save the HTML file to your computer.
2. Make a CSS file and save it in the same directory as your HTML file.
3. You are allowed to make only one edit to the HTML file, changing the import statement to load in your newly created CSS file.
4. Choose a non Flash based web site design you would like to emulate and open it up in your web browser. (It works best if the site is a site designed with standards, using CSS for layout instead of tables, etc.) The idea is that you are attempting to recreate a site’s style, not one specific page. Therefore, it may be best to open up several pages of the site to see how images, lists, menus, headers, paragraphs etc are handled in various types of layouts and situations.
5. Use Firebug’s inspection tools or the WebDeveloper’s Toolbar inspection set to discern what sorts of CSS properties are being modified. Make note of these.
6. Apply the required CSS attributes to our local copy of CSS Zen Garden one by one.
7. Work the page’s typography first, then padding and element margins, borders and backgrounds next, finalizing on placing the elements on page using floats, positioning, etc. You may need to create, make or replicate images in order to fully realize your design.
8. Finish your work and upload it!

This is a relatively simple project and works well on so many levels. It gets you up to speed on what attributes CSS can modify on elements in an HTML page. It allows you as a designer to focus only on the style and not writing page structure or HTML markup. It serves a great introduction to advanced CSS concepts like contextual/descendant selectors in order to introduce variety in the designs and style the various lists in different fashions. It works as a job training aid because, often as a junior webdesigner on a project you may be required to follow the lead established by another designer on a project. It forces you to be creative with your CSS because you don’t have any flexibility to change the markup. It teaches you how to analyze a page’s design in a very methodical, detail oriented fashion. It requires that you be flexible and able to interpret rules that may use relative measurements that no longer apply to your more scaled back implementation. I like that the students are working towards a design goal in mind, rather then having to concept it themselves, allowing them to focus on the implementation. It’s easy to quantify how closely a design mimics the look of something else.

I am consistently amazed with the quality of work done by the students on this project. Sure there are stumbling blocks along the way, but overall it’s a resounding success and a great way to get student thinking about rules based design for the web.

Some things I don’t focus on in this assignment:

1. IE compatibility, since we can’t create conditional stylesheets in the markup it would be difficult to expect aesthetic parity in Internet Explorer.
2. Doing things the “exactly right” way. If a student needs to use large negative margins or non standard positioning techniques to achieve the look and feel of the other site, I’m fine with that.
3. Perfect image quality. It would be a lot to ask to have the new students attempt graphic design techniques used on some of these sites.

So, here are a couple sample pages I have created. This one is done in the style of my blog. This one looks like an Adobe.com page. Each one looks pretty darn close to the inspiration site and didn’t require and editing of the markup.

How about you? Have you ever created a CSSZen Garden page? If you are teaching CSS to students, how do you get them started? I’m always interested in hearing

Sorry for not posting more recently… I’ve been buried!

I spent the last few days in Colorado, it was beautiful! I was the best man in a wedding there (in Estes Park), you can see some photos from the trip here. CO is a nice place with fantastic scenery and super tasty microbrews. Highly recommended.

While I was there, I got to meet Juan Sanchez, designer at Effective UI, and one of the main contributors to DeGrafa. He mentioned that Scalenine’s skin contest had completed. What a great pile of entries! I can’t wait to see the library grow and serve as the premier resource for Flex Designers on the web. How cool. Even cooler, was the fact that my Coworker, Heather Ford, was one of the winners with her DiscoType Theme! Awesome.

Beyond that, my students are begnining to build some mashups and make some progress learning Flex… Some recent ones they’ve made… GeekVahalla (a tech focused RSS Reader), TweetTally (a Twitter Tag cloud search). Dropped Passes (a sports focused RSS Reader). I hope to continue to post more as they pile up.

Finally, at The Iona Group, we are hard at work on our eLearning development platform, Doctum. We’re gearing up to launch and start talking to people/demoing it at DevLearn08. If you’d like to be made aware when we launch, head on over to DoctumLearning.com to get on our list of contacts. We have a full site launching soon with features, videos etc explanining what makes it different, but for now it’s kind of in a hush hush mode. Needless to say lots of work is going on and the system is shaping up to be pretty amazing, if I do say so myself.

This one’s from my Mashups class. The first project, was to build an RSS Reader. I’ve already posted a quick tutorial on how to build an RSS reader with Adobe Flex. Here’s a simple one that uses JQuery to get the feeds and then loop through them to output them to the browser window. Piece of cake for many of you, yes, but if you have never used anything but the DOM and plain ol’ JavaScript, you may be scared by the whole AJAX fad on teh intarwebs these days. JQuery makes it super easy to look like a Javascript rockstar. I teach a lot of students that haven’t ever touched a library of code like JQuery before, so tutorials like this are pretty valuable to some readers..
(more…)

A little over a year ago, I converted my then dormant domain, Mediadinosaur.com, into a gossip focused news aggregator (previously, it was a media/celeb focused community and blog). It now captures feeds from a number of high profile celebrity rags (Egostastic, TMZ, E!, WWTD, etc) and lets you get your fan fix in one centralized place. I built it in Flex to highlight the ease of use of the Framework and the power that the HTTPService and E4X gives you in getting and parsing XML. I’m using the site as an exercise for my Mashups and RIAs class as an introduction to developing with Flex and a easing into the concept of reading and using XML feeds and services for students that may have never used either of them. So let’s take a look at how this all comes together. (more…)

Bradley is back in session. I have two classes I’m teaching this semester, so it’s going to be a busy one. MM365 ‚Äì Designing with Web Standards, this is one I have taught for 3 years now. It’s focused around CSS, XHTML and some simple JS, with an emphasis on using best practives and writing markup that validates. It’s a great class and one that serves the students pretty well. After that on Tuesdays, I am very happy to teach my MM491 ‚Äì Mashups and RIAs class… This is going to be great. I have a group of students I will be helping to learn Flex, AJAX and using Webservices to make web mashups… what gets better than that?

While I prepare for that (I have to build a few presentations, stat!), why don’t you take some time and watch this video that was taken at 360Flex’s keynote… It has some hot Thermo action in it at about 45:00. Hot stuff, indeed.

About a week ago, I sent out a tweet asking for ideas on new APIs that might be worth checking out. You see, I am teaching a mashup course this fall and I need some new source material. I’ve played with Kuler, ColourLovers, Delicious, Yahoo Pipes, Technorati and a couple others (mostly unpublished and just experimental), but I just feel like I was missing something. I needed to check some other things out. Of course the new AS3 APIs for Google maps are out, so those are absolutely on my list, but I wanted some more “content rich” APIs. I spent some time on programmableweb.com (a great source for mashups and APIs) but only found a couple that struck my fancy enough to think about spending what is virtually my nonexistant free time on building a toy.

Rachael Rubin (wildhoney on twitter) was kind enough to point me to the newly revised Last.FM API and I think I will definitely use it at some point, but without a a proper link to the streaming music in their library, building a non playing audio based mashup seems a little less fun that it should be. It seems as though they intentionally make accessing the streams a little difficult to discourage bandwidth abuse.

All that changed today when I came across Govtrack.us on programmableweb. Wow. What a useful API. Fun? Not really… it’s an interface to the mountains of data generated by our Congressional representatives day to day business. Deep stuff. With the ever growing need for governmental transparency in this somewhat crazy time, it’s a fantastic resource to have. Generate clean XML based on what your reps are voting on, meeting about and talking over. Combine this with Google maps or perhaps any number of other rich data sources and you have some amazing potential to bring visibility to a very opaque world. Providing a new or easier to use interface to the insurmountable volumes of legislation might uncover some realizations that may have gone unnoticed otherwise.

I’m definitely going to give this one a spin. Shall we find something out from all of this? It remains to be seen, I guess. I have a few ideas on things I might like to track… how about you?

I will be entering my fifth year of teaching at Bradley this fall. In that time I have taught several classes on multimedia authoring, using tools like Director and Flash to produce microsites, games and simple applications. I have also taught a senior level capstone class where Rich Internet Applications were designed and prototyped, then composited with devices in original video shot by my students in a “Starfire”-like what-if video depicting ubiquitous wireless connectivity. You can see that one here. Additionally, I have taught course on server side development using PHP/MySQL and a intro to web design class that focuses on web standards and covers XHTML/CSS and JS. Well, I have another one to add to that. Read on to find out more about it. (more…)

Some golfing, though. Feels good. The weather is looking nice and it’s Saturday, so there. But, before I go and enjoy the day, here are some really cool links for you to check out. A couple very talented friends of mine at cascadingstyle.net have a series of posts detailing their SMS/Drupal/Services/Flash integration project. That’s right. SMS. Drupal. Flash. All connected via web services. Displayed live on giganto screens for all to see. 1000 people in the audience. It was really cool. Here’s a video from Vimeo that shows a little bit about the show. I helped out by writing a generative screensaver that played while everyone enjoyed their dinners.

The Campaign for a Bradley Renaissance Text Messaging from Sven on Vimeo.
You gotta go read his posts. He shares code, process an everything. A blueprint for success, if you will.

My fellow Bradley Multimedia faculty members and many of my colleagues at Iona (some of them the same people ) have been working feverishly on the media for a large event Bradley University will be hosting next week to kick off it’s Renaissance Campaign. The work done thus far has been tremendous. A full week of green screen shooting, two full weeks of post and lots and lots of hours are going into this. I’ll let the respective people working on the shoot, motion graphics, quiz engine/SMS gateway and webservice powered live updating Flash trivia games and Dataton Watchout system powering the 4 high lumen linked projectors blog their own part of the production (I know I left some links out there, sorry all…). My good friend and a designer I respect, Jim Ferolo had asked me to help on the project. He wanted me to produce a generative drawing effect that would sample some HDR photos and use the campaign’s logo to create a graphic wash/drawing effect on the images. To see the results continue… (more…)