Aarron Walter

The Web Standards Project has assembled a Dreamweaver task force to try to lobby Adobe to better implement web standards in their software (although Dreamweaver has come a long way in this respect already). One useful outcome of their efforts is an extension for Dreamweaver that simplifies the implementation of Microformats. Microformats is one of the hottest buzzwords as of late, and for good reason. It’s goal is to standardize the way in which we use XHTML to markup information such as calendar events, contact information, etc. so we can build scripts and applications that can see the meaning in this content and do something useful with it. An example might be a community calendar application that could gather all events from sites that list events in a certain area. A program could not make any sense out of this content unless it had a standardized way of identifying each piece. To learn more, visit Microformats.org.

The Microformats extensions allows you to quickly markup contact info, events, references to friends/colleagues sites, and site licensing in this standardized format. Learning to do this on your own is also pretty easy, as Microformats uses XHTML tags you already know, but names classes for these tags according to the data it encloses. Once you install the extension, look at your Insert palette in Dreamweaver where you will find the Microformats menu item added.

Yahoo! has a really nice style sheet that will reset all browser default rendering of padding, margins, fonts, etc. so you can build your style sheets for projects on a level playing field. This is going to prevent a lot of (though not all) cross-browser formatting issues as all browsers will get the same design instructions rather than inheriting default browser styles. Yahoo! has already done all of the cross browser testing to ensure that their reset style sheet forces all browsers to start on a consistent base.

Adobe has thrown their hat in the JavaScript framework ring (which is getting pretty flooded) with the introduction of Spry. What differentiates it from the dozens of other frameworks out there is the focus on XML as a central, dynamic data source fetched by Ajax. Their demos include some very slick utilities including a photo gallery, an RSS reader, and a product display system. The implementation of these complex utilities appears to be very simple. They highlight key sections in the their source code to make clear the ease of development. Of course, they also have the very familiar effects library that is virtually identical to its predecessors.

Because they are a bit late to market with their framework, I’m not sure how willing most people who are already using frameworks will be to abandon the ones they have already grown accustomed to, but people who are just getting started with JavaScript frameworks and Ajax may find this option especially enticing for its ease of use. Here’s how Adobe wants to position themselves in the framework world:

‚ÄúAs we looked at the landscape of Ajax frameworks, we realized that many of them were more oriented to the skills of a programmer and were focused on application development. Based on the needs of the design community, we wanted to put forth an approach that is very “HTML-centric” to help them add basic interactivity to their page designs.‚Äù

Spry FAQ

Slimbox is yet another Lightbox utility that modifies the original to use MooTools instead of Scriptaculous. Slimbox boasts a smaller file size, bug fixes for Flash movies behind the overlay, and a number of other minor improvements that improve usability. If you are already using MooTools in your site, Slimbox may be a better choice for you as you won’t have to access yet another JavaScript library.

It occurred to me as I while helping some of my students with their Interactive Design projects that it would be really great to have a comprehensive list of the most useful JavaScript libraries and utilities that would make building advanced interfaces a snap. So here are my personal favorites. There are many more great libraries and tool out there I am not listing, either because I just overlooked them, or because I think there is a better alternative. If you feel I’ve missed something here, I’d love to hear your suggestions.

The Essentials

• Prototype: First on the list for good reason. It’s a staple library on which so many other libraries are built. Development utilities and nice Ajax handling
• Scriptaculous: Effects galore. A bit on the heavy side, but can be worth it for the right use. A piece of cake to use lots of powerful features.
• Lightbox: A simple way of presenting photos and HTML chunks in modal windows, dimming the background of the page.
• Really easy field validation with Prototype: The name says it all
• Tabifier: A JavaScript implementation of the card stack design pattern. Show and hide divs, packing a lot of information into a relatively small area with comfort.
• Fade Anything Technique: Popularized by 37signals, a great way to tell users about errors or other critical feedback.
• New Window Link: A nice way to offer users the ability to launch a link in the same window, or spawn a new window.
• Sweet Titles: A beautiful, souped up alternative to the plain ol’ title attribute display.
• SWFObject: Detect the Flash player then embed a SWF in your page following web standards
• Tiny MCE: Turn any textarea into a WYSIWYG editor. Perfect for your next CMS or web app

The Runners Up

• Yahoo! UI Library: Many handy utilities for some advanced interface design patterns like accordion menus.
• Moo.fx: This may soon replace Scriptaculous as the de facto effects library because of its slim file size, it just hasn’t quite caught up with the documentation yet.

Did I miss any?