nextwebgen.com

Link Thumbnail: Photo Mouse Over

Filed under: Web 2.0 News, Front Page, JavaScript, Library, UI — Dion Almaer at 9:24 am on Tuesday, July 25, 2006

When Ben and I were at an “Under the Radar” O’Reilly event, one of the companies was trying to push a product that allowed you to mouseover a link and see what comes next.

People doubted whether a company could be made around that idea, and now we are seeing more and more ways where developers can add that functionality.

The latest is Link Thumbnail which is:

A little bit JavaScript, a little bit CSS and a little bit clairvoyance, Link Thumbnail shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It’s a nice visual cue that serves a very real purpose: providing a clearer picture (no pun intended) of what’s ahead.

Comments (0)

Breaking User Interfaces for Fun and Profit

Filed under: Web 2.0 News, Front Page, JavaScript, Usability, UI — Chris Cornutt at 7:26 am on Tuesday, July 25, 2006

For all of the good uses of Ajax out there, there are still some really really (*really*) bad ones that come to mind. Unfortunately, some site developers just don’t quite know when to stop, and this post on SitePoint.com today (by Alex Walker) points out just such a perpetrator - Art.com.

Art.com is a large, commerical art site selling prints to the public—over 300,000 of them, framed, mounted or otherwise. Their display pages are a model of efficient elegance—not dissimilar in style to Flickr in some ways—generally letting the artwork speak for itself.

But apparently, there wasn’t enough ‘wow-factor’. “We’re paying these developers—get them to come up with something that’s cool or hot or sick or whatever it is the kids want to be these days”.

So, what exactly is it that makes their implementation a pain? Try something out - go to this page and try to use the drop-down list. Fun, huh? It’s a good idea to break a web standard and use a custom solution when all someone wants is a simple option. Plus, the grow effect causes some distortion in Firefox (and other issues, try dragging the window too. and don’t get me started on what happens if Javascript is disabled) .

Okay, so we can all agree that Ajax is cool, and yes, there are some cool user interface additions that can be made with its help, but if you make a drop-down box, make it work like a drop-down box. Web users look for interface items they know and like to use them - don’t mess with that.

Comments (0)

Ningbar: Customizable, Dynamic JS top bar

Filed under: Web 2.0 News, Front Page, Showcase, UI — Dion Almaer at 2:03 pm on Friday, July 21, 2006

Ning has replaced their bulky sidebar that “formerly hogging the right hand column of every Ning app” with a new Ningbar which is a nice JavaScript drop down.

The closed Ningbar

One opened state

The folding down top bar seems to be a new favourite pattern these days.

To begin with we saw “Login / Register” actions used as drop downs, and now it has grown to any other action.

The good news is that you get to reuse screen realestate. The bad news is that a user can not see what is in the drop downs until they click on it.

This means you need to think hard about what you place in the drop down.

Comments (0)

Y! UI Carousel Component

Filed under: Web 2.0 News, Front Page, Toolkit, UI, Yahoo!, Component — Dion Almaer at 9:36 am on Friday, July 14, 2006

Bill Scott of Yahoo! has written up a nice new component on top of the Yahoo! UI library.

The Carousel component lets you flick left and right through content (images).

You will quickly see that there is a lot of documentation and a real API that allows for many uses:

Static HTML - Carousel content expressed
solely in HTML markup.
DTHML Load - Carousel content loaded via
JavaScript (client side load) displayed horizontally.
DTHML Load (Vertical) - Carousel
content loaded via JavaScript (client side load) displayed horizontally.
Bounded DHTML Load - Loading
Carousel via JavaScript (client side load) with the size constrained.
Ajax Load - Loading Carousel via Ajax (server side load).
Ajax Load - Two Carousels - Loading two Carousels on same page via Ajax (server side load).
Slide Show - Showing a carousel managing one large image at a time.
No Animation - Carousel configured for no animation.
Module Scrolling - Example of a news module supporting scrolling of content.
Module Tabset - Example of showing one page of
content at at time in tabs.

Comments (0)

JFK Assassination Timeline

Filed under: Web 2.0 News, Front Page, Showcase, UI — Dion Almaer at 8:03 am on Friday, July 7, 2006

The JFK Assassination Timeline is a nice example of a dragable clickable pure JS UI.

The demo shows off SIMILE:

SIMILE is a joint project conducted by the W3C, MIT Libraries, and MIT CSAIL. SIMILE seeks to enhance inter-operability among digital assets, schemata/vocabularies/ontologies, metadata, and services. A key challenge is that the collections which must inter-operate are often distributed across individual, community, and institutional stores. We seek to be able to provide end-user services by drawing upon the assets, schemata/vocabularies/ontologies, and metadata held in such stores.

Comments (0)

Slightly ThickerBox

Filed under: Web 2.0 News, Front Page, JavaScript, Library, UI — Admin at 11:34 pm on Thursday, July 6, 2006

Lightboxes seem to be as hot as auto complete widgets or mashups these days!

Jason Levine has modified Cody Lindley's Thickbox code to create Slightly ThickerBox.

The modifications allow the script to generate "Previous Image" and "Next Image" links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a "rel" attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)

Usage

To use Slightly ThickerBox, add the following HEAD section of your website.

Now, where you want the images to appear, add the following code:

Comments (0)

Similie: Draggable Timelines

Filed under: Web 2.0 News, Front Page, UI — Admin at 2:54 am on Saturday, July 1, 2006

Similie is a neat way to view timeline data. Instead of paginating, it offers a continuous strip which you can drag back and forth with your mouse, a la Google Maps. It’s open-source from MIT. You only have to point the widget at an XML date file:

The detailed text is revealed in a popup balloon, when you click on the event. You can also have synchronized “bands” alongside each other, showing the time on different scale. Web timeline, anyone?

Comments (0)

Cellsea Image Manipulation

Filed under: Web 2.0 News, Front Page, Showcase, UI — Michael Mahemoff at 5:25 pm on Sunday, June 25, 2006

Update (June 28, 2006): Beau Hartshorne of Snipshot (formerly Pixoh) says “massive chunks” of Cellsea code are identical to Snipshot. “This is not an accidental inspiration. Check out the cropping code, the resizing code, and so on. We’ve also noticed that portions of their website are also stolen directly from ours … We are contributors to MochiKit open source project. However, the code in question is proprietary and was taken directly from out site. “

Cellsea has a well-featured image manipulation tool.

You start off by uploading or providing a URL. One smart thing about the URL is it can be a web page URL, not just an image URL - not everyone knows that images have their own URL! Choosing a web page opens up a menu of images on that page.

Anyway, onto the tool itself. It’s billed as an “editor”, though it’s more about managing and running transformations, and there’s no tools for drawing, filling, etc. As a transformation tool, though, it has all the functionality you’d expect from a typical desktop system. Most of the transformations produce a windows-like dialog allowing you to set up the algorithm’s parameters. Each transformation is followed by a delay of several seconds, as the server processes the image and returns it back. During the wait, a neat little transparent progress indicator is overlayed on the image - there seems to be a general trend (looking at some of the video sites) for this sort of thing (semi-transparent controls over graphics).

It’s easy to see how image/photo sites could benefit from a tool like this. It would also be useful for many people (e.g. most bloggers) who republish existing web material.