Unless you're running a one-person blog or website, there is always a need for distributed content management.  The worst-case scenario with web management is that everybody emails changes to one person to post them online.  It's inefficient and it is no fun to be that content funnel. A better model is to give content editors tools they need to make changes themselves.

Adobe just updated the InContext Editing service, which is a system of distributed content management that could fill the gap for anybody not yet ready for a full web-based CMS. This is technically a product from Adobe, but it may be better described as a service, as it looks to be positioned as an entirely web-based subscription model for editing web content.

InContext editing is a web-based system that lets web developers give users the ability to edit content directly within the browser. Unlike Adobe Contribute, InContext Editing does not require a desktop software installation. It isn't as feature-rich as Contribute, but the Live Demo of InContext Editing shows that simple text editing is possible without much trouble. InContext Editing requires Adobe Dreamweaver CS4 to take advantage of all features, so this option ties you to the latest incarnations of Adobe's good (and not inexpensive) software tools.

[More]

The distributed screen capturing website BrowserShots.org recently released an online showcase of more than 32,000 image captures of website pages.  It looks like the content comes from sites their visitors have requested to have pictures taken of. 


You can browse sites, rate them, and search for text within the sites.  It's not clear if the text searches indexed terms or a version of the site source code.  For random design inspiration, this is a great site.  Another search option is to look for sites of a particular color.  For instance, here's a view of sites matching the hex color 003366.

It's especially nice because it includes many non-English sites, so you can just isolate design and feel without reading text. 

As an aside, if you need to get lots of screenshots for websites, it is very much worth it to pay for priority processing.  We needed to collect lots of images in a short period, and with priority processing, images were returned in one or two minutes.

On the law library's website, we have what's called the Feedback Blog.  This is a place where we post questions from students and any of our visitors, together with answers to those questions.  It's an informal dialogue of sorts, styled in a Jeopardy type fashion, where every post has to be in the form of a question.

On our library homepage, we present the one question and the first 100 characters of the answer to give a fragment of our response.  One problem with this approach is that we only have enough room for a single question.  As soon as a new question is posted, the most recent one disappears.  Instead of just listing more questions, we chose a sliding panel widget so people can page through recent questions and answers without leaving the page or forcing the page size any bigger.

Implementing this was pretty easy with Adobe's Spry Sliding Panel Widget. We went right to the Sliding Panels Sample page and reverse-engineered the code for a horizontal panel. A few checks in the documentation and some testing, and it's ready to go. Of course, it might have been better to read Adobe's entire explanation on Building a Spry Sliding Panels widget, but the code is pretty easy to figure out.

Now there's just one problem: IE6 works with the code, but it displays the widget box strangely. The problem is that IE6 doesn't render the CSS rule max-height properly. In fact, it flat-out ignores it.

Take a look at how it shows up in IE6:

We could have fixed this problem with a proprietary Internet Explorer trick such as this or this. The only problem is that it just seemed wrong to add bloat and hacks to the homepage, just so IE6 would look pretty. A quick check of Google Analytics shows that just over half our our users browse with Internet Explorer. Of those, less than a third use IE6. Given these numbers, we figured it was fine the way it is.

Web design site Smashing Magazine lists this technique, which they call Carousels (slideshows) as one of the Web Design Trends for 2009. It's nice to be trendy now and again. Oh, and it's even nicer to add functionality with little code and no loss of screen real estate.

People who develop websites have probably already heard of Firebug and the Web Developer Toolbar. They are two very popular addon tools for Firefox that let you analyze web content as delivered to the browser.  The beauty of tools like this is that you don't have to leave a page you're viewing in order to debug it or test code.  There's no need to transfer files to/from a server and reload the page.  If you like these two tools, then consider several others profiled in an article from Smashing Magazine called: 15 Helpful In-Browser Web Development Tools.
Tools they profile include the following:

• YSlow: a tool from Yahoo! that integrates with Firebug to test website speed and suggest ways to improve it
• Internet Explorer Web Developer Toolbar: A Microsoft program similar to the same addon for Firefox
• FireShot: A tool for capturing and analyzing parts of images delivered to the browser, falling somewhere between Screengrab! and Snagit in terms of features
  
• Fangs: A free screenreader tool to test oral rendering and navigation of websites (similar to the commercial product "Jaws")

There's some overlap in features between the programs profiled.  For instance, the toolbar from chrispederick.com includes color analysis options similar to those in Colorzilla (for color palette analysis). Nonetheless, it's nice to see a list of these tools that include addons for Internet Explorer, Opera and WebKit (aka Safari / Chrome).  Firefox isn't the only browser that supports in-browser editing, afterall!
Hat tip: Boagworld podcast (which mentioned the Smashing Magazine article).

One of the powers of the ColdFusion 8 tag CFPRESENTATION is that you can create presentations from dynamic database queries. A type of query introduced in Cold Fusion 8 is the CFFEED tag. This takes a feed (rss or atom) and turns it into a query that you can loop over as needed. Pairing the two together, following is a simple proof of concept that shows a series of slides using an RSS feed as the source.

The source for this example is a feed of Recently Redesigned Websites from the site eduStyle: Inspiration for Campus Web Designers. This was chosen as the source, as the feed output is very uniform, presenting two screenshot images and minimal but predictable text in the source of the feed.

First off, following is the pertinent code showing only the necessary CFFEED and CFPRESENTATION elements:

With this, it generates 15 swf slides, each representing a single entry from the feed source. If I want to do this in a week or a month, all I have to do is re-run the ColdFusion file and it will get results live from that point in time.

The best way to view this is to view the demonstration in a new browser window.

Alternately, you can also view an inline version of this presentation here.

One of the tags introduced in ColdFusion 8 is CFPRESENTATION, which allows you to create a Flash-based presentation that is very slick and can take full advantage of many ColdFusion tools. Also, once created, it's easy to tweak the content and render it anew.

For a recent talk I had to give, I used CFPRESENTATION mostly to learn more about it. Following are five tips from others trying this out, together with some thoughts about those considering it. In a separate post, I'll put up a simple proof of concept to show how it works.

Five Useful CFPRESENTATION Tips

1. Adding Attachments to a CFPresentation: As a mostly undocumented feature, you can add attachments to a presentation very easily. Attachments can be web links or file references
2. CFPresentation: Presenter image tips: design suggestions for including presenter photos and a logo in your presentation
3. Cool-feature-in-CFPRESENTATION: CF Guru Ray Camden shows a technique for storing presentations for offline use. I found that it works to set the directory path in the intro and then copy these from the server.
4. Tweaking CF 8 Presentations: Ben Forta points out tips on where to tweak some internal settings for a presentation done with CFPRESENTATION
5. Creating Slide Presentations: Adobe documentation and examples for creating a presentation with this tag

In my opinion, it's best not to think of this as a PowerPoint alternative. Instead, it's a slick way to create online (or offline) presentations where you want to include live content or render slides in a customizable manner. Output for presentations is stored as a series of SWF files. For this reason, don't expect to include hypertext links on your slides, as they won't work.

The rendered content is not as easy to control as standard web markup. When CFPRESENTATION converts images of webpages, it resizes everything to fit in a single screen. For this reason, slides with minimal text show larger type. Also, image presentation is a bit quirky. For example, I was unable to insert a JPEG in an HTML table with a width of 50% to balance text and graphics.

All in all, CFPRESENTATION is pretty useful, and it sure looks nice for the amount of code required (which is very minimal).

Internet Explorer users have a new tool to make use of Microformats even easier. The tool is called Oomph: A Microformats Toolkit, which was released as test software. Once installed, this runs as an addon in Internet Explorer to recognize pages that contain contact information or event details marked up with Microformat code. Then a nice little microformat icon shows up and you can interact with the data to save contacts to your address book or put events on your calendar.

Read more about the new tool in a blog post Microsoft and Microformats from John Allsopp, who literally wrote the book on microformats.

Here are some pictures:

Some screenshots of demonstrating microformat interaction in Internet Explorer.

You can already take advantage of microformats, even without creating them yourself. For instance, you might find events in Yahoo! Upcoming and add them directly to your calendar. Or you can search Google Maps or Yahoo! Maps and add them to your phone. There's a strange limitation to Yahoo! and Google address mark-up however. They don't include phone numbers or zip codes. I think this is by design and not a mistake. It's still pretty useful though.

Firefox users should still rely on the Operator Addon. Operator recognizes more microformats than Oomph, and there are more debugging tools for developers.

Beginning this year, several faculty members at Georgetown Law have started using the course management system TWEN (The West Educational Network).  Students can also find course materials on a courseware system developed in -house several years ago.  In addition, there are some reserve materials available in the library, and syllabus materials are distributed through a centralized service.  Because having so many options can be confusing to our students, we try to link to all services at the same time.  On websites we manage, this is easy enough, so we can provide course information links on a main student page, an orientation page designed for new students, and other places. Westlaw recently added a feature to TWEN to let law schools customize a banner on the system.  In addition to providing a logo and link back to the law school, there's enough room to include a few links.

To allow us to include several links, we looked at setting up a dropdown menu with categories of links.  While letting us provide course information sources in one place, this also lets us link to services like Hein Online and our E-Journal Finder, which provide important course materials not found on Westlaw, the quasi-default source for legal information on TWEN.  Here's what it looks like:
 

This menu uses a version of the something called the Sons of Ursidae Menu (thanks Sara K!) which requires no JavaScript and can be rendered with only a few lines of CSS code. The dropdown menus don't work in Internet Explorer 6, but the four links under the Georgetown logo point to pages that contain all items.  We're going to look at changing our main site navigation menu (which uses Open Cube's Infinite Menus), as it requires more complex CSS and complicated JavaScript.

One interesting thing about our custom menu is that Westlaw's blue and grey color scheme match nicely with the school's main colors.

There is much hype written about the semantic web, which is supposed to add context to content online, aiding computers and humans in better understanding information presented online.  One area where it's fairly easy to add content and context is by using microformats. This is a way to mark up information online so other applications can recognize events, contact details or reviews.  The mark-up is in the form of a common set of class codes that do nothing to change visual display, but can be read by computer programs recognizing this format.

We recently created a faculty events system for tracking on campus workshops and conferences.   For all events, we create a vCalendar file (used with a .vcs file extension) for import to programs like Microsoft Outlook and Entourage.  The problem is that Firefox and Internet Explorer handle .vcs files differently, forcing some users to first download the calendar file, then import it to another application. Also, .vcs files are not easy to import to services like Google Calendar.

Thankfully, we mark up all events with the hCalendar microformat, which contains all event details, even some not visible on the screen.  The easiest way to take advantage of this markup is to use the Operator Toolbar, which is a Firefox extension. This recognizes the hCalendar format, and lets visitors save items directly to Outlook, Google Calendar, Yahoo Calendar and other places.  The picture here shows the Operator toolbar in action.

Jesse Rodgers, a web developer at the University of Waterloo has written about How can Microformats help Higher Education, pointing out that and their university has an events system that has all events marked up with microformats.  It looks like they have decided to forego creating downloadable calendar files (e.g. vCal or iCal) altogether. Read Rodgers' research paper on microformats in higher education for a literature review on the topic, as well as a model for implementing microformats.

On the Georgetown Law Library website, we have a collection of research guides ranging from Accounting Research to Wyoming Resources. As noted in an earlier post, we've enhanced these guides by adding links to related resources.

Now we are also adding metadata to the guides, in the form of Dublin Core. This is descriptive information embedded in each guide used to uniformly describe its contents. This may help with search engine optimization, but we're mostly doing this to help researchers find and cite our materials. To view the metadata, you can install the Dublin Core Viewer, a handy Firefox extension. Here's a view of the embedded data for one of our guides using this viewer.

Also, you can take advantage of this metadata automatically if you use a program called Zotero to collect and manage your research citations. Zotero allows you to capture information directly from web pages to store in a local research database. By using Dublin Core metadata on our guides, Zotero recognizes this and provides a way to directly store citations to our guides in their database.

In the near future, we hope to add metadata to include abstracts for our guides, as well as usage information. If there are other ways we can help enhance the guides, please let us know.