Accessibility has been a driving force behind the urgency to find a solution for web management. The need to ensure that all of our pages are accessible along with the desire to streamline the process of creating websites has been combined under a new Web Governance plan. In the coming months, committees will be formed and discussions will take place about where the future direction of the Chico State web presence and how we will get there. Below, is a diagram of the problem as I see it and how I would go about implementing a solution.

Click for full size

Chico State Web Presence

This is the Vision. What’s the purpose of the Chico State web site? What message are we trying to communicate? Who is the audience? These are all questions that will have to be asked and will probably be answered in committees at a very high level.

Data and Presentation

This is the Message. At the heart of every web page lies the dichotomy of data and presentation. The Web Content Committee in conjunction with the Web Management Committee and members of campus will determine what is the message. Help from the Web Design Committee will shape how the message should be presented to the public.

The Implementation

This is the Medium. I should note that in this context I’m using the word design to refer to the technical design of the solution; visual design would be the product of the Presentation layer. You might notice a lot of jargon and buzzword in these two lower levels. To be honest, there are a lot of buzzwords that you could plug-in to these layers, but I’ve chosen to recommend the following because, as of this writing, they are what I consider to be the best means toward achieving the high goals of accessibility and consistency. Let’s explore some of these buzzwords to better understand how they can contribute to the solution.

REST

REST is a web service protocol that is almost an extension of the HTTP protocol. Data and be retrieved and stored through different HTTP states. This means that data can be transmitted through a REST protocol in a number of formats. It would be my recommendation that the university try to JSON and XML (ATOM would be ideal). Web Content Management extends beyond document management and includes data management. If possible, we should look to consolidate data where possible and make it available through a web API.

HTTP

This is pretty much a no brainer for non-web services. The catch here, is that we encourage and educate web developers how to craft their pages using POSH and Microformat. POSH is really just a fancy way of saying, “use semantically meaningful mark-up.” This is something everyone should be doing and will help pages become more accessible and the information on that page more findable. Microformats are a real simple way of adding semantic meaning to existing mark-up for objects like people, places, and events through a few extra tags and CSS classes. The tenant behind Microformats is that you make it human readable first, and machine readable second. Pages that include Microformats are parsable by some web browsers and plugins that allow users to easily get data out of a page an into another system, be it an address book or calendar.

XHTML

The WCMS will be crucial in delivering the content. ATI and the accessibility laws we need to be in compliance with expect XHTML documents. How will we ensure the output from the WCMS is XHTML? Template my friend… templates.

CSS

CSS are the preferred means for styling web pages. True story: it’s also the law. Well, actually, web pages simply need to be accessible without stylesheets enabled, but I digress. CSS is a great way to ensure consistency across browsers and platforms in addition. CSS can be leveraged to give each web site a customized look and feel that separates them from other sites on campus. In terms of delivery and organization, there is an opportunity to establish an Asset Library comprised of common styles that could be considered global to the Chico State web presence. In consolidating these styles in an asset library we could create a framework for others to use as is or extend locally. There are a few other benefits that can be derived from this approach: less code and centralized access.

DOM Scripting

Javascript has been around for years. Once considered a necessary evil by web developers it has made a remarkable comeback. Javascript will not be leaving anytime soon so it is important to educate and encourage best practices for Javascript. Most of the newer sites on campus are taking advantage of Javascript libraries such as jQuery or Prototype to make DOM manipulation easier. It is reasonable to expect that an asset library would a few different Javascript libraries available.

The Upshot

ATI and WCMS are giving the university a chance to start fresh with the web presence and build a web site properly. The separation and technologies that I have briefly outlined above are all modern standards that can help us achieve the goals of ATI and WCMS while also providing the campus with a platform to build upon as we move forward.

Cries for Consistency and Branding

I’ll just try to beat Tony to the punch on this one. I’m sure he’ll point out how I haven’t mentioned branding, consistency, relevancy, etc. Yes, those are all very crucial to a successful web site redesign. This post was intended to try and describe how we can piece various pieces of technology, like REST, Microformats, or jQuery, together to achieve those higher goals.

At the request of Public Affairs, we updated the Public Facilities page. With the ATI we’ve been cleaning up some of the pages on the campus web server as we go just to make sure we’re covering our basis. I noticed that the Public Facilities page was using a University template that appeared to be from the late 1990’s.

So, I cleaned-up the page and made it accessible and valid HTML, etc. In addition, I tossed the content into one of our “beta” templates that’s built upon the YUI Reset/Fonts/Grids foundation.

We hope that this foundation will eventually be made available to other web contributors on campus. Right now, we’re still finding corner cases and looking for ways to abstract CSS into components for more of an ala carte option.

Me? I’d take XML first…but then I’m an edge case.

If we add a few classes to this existing structure (plus a few @span@s) we could make the site microformat compatible.

Bam! Microformat compatible.

But the first step in taking advantage of a microfomat is knowing of it’s existence. For that, we have Tails, a nifty Firefox extension that alerts you to the presence of a microformat. You do use Firefox, don’t you?

About Microformats

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).

Ok, that’s nice, but what does it mean? Think of it with this example. If you have a page that contains contact information for a person, simply by adding a few classes to add some semantic meaning to the existing tags you could allow for a web browser or plugin to automatically recognize that there is contact information on that page and potentially prompt you to add it to your address book.

Campus Exercise

For this exercise, I’m going to take a sample page from the Campus Directory and using the hCard standard turn it into a Microformat compatible page.

Step 1: Code Clean-up

First step is to review the code that’s used to currently display the contact information.

The first glaring error in this code is the improper use of an unordered list tag (UL). Just reading the code aloud doesn’t make much sense. Now, I know the final product that the end user sees is understandable. However, Microformats are trying to make that code machine-readable and human-readable.

The final markup I came up with was this:

Finished Product

Ok, so now we’ve gone through and changed the markup to make it valid XHTML and semantically meaningful. Let’s take a look Looks about the same doesn’t it? I took out Department Phone because I imagine this is rarely used. If you’re looking for a person specifically you want to find their phone number. If you need their departments phone number you could look up the number on the department listing.

The Magic

I made a duplicate of the first version, and added the following code beneath the contact info which follows this basic format as a hyperlink:

Now when you view this version you’ll see a link that you can click that will convert the contact information on that page into a vCard file that will be downloaded to your computer and imported into either Apple’s Address Book or Microsoft Outlook.

Right now it’s using a utility on Technorati which could easily be reverse engineered to parse the hCard format. Want to make your own hCard? Try the hCard Creator It’s pretty simple.

Summary of Links

• Original page
• Valid HTML & hCard markup
• Final version with vCard link