sorted by: recent | see : popular

Content Tagged with front + UI

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements and everything in between!

sIFR takes over the elements and puts small swf files into place. FLIR on the other hand generates images on the server and puts them in place. They both suffer from the progressive switch in place that you often see as you watch the page load.

Also, one downside is that once the text is an image you can't copy and paste it. Ben can once again drool over the typography.

Asad Sheth has been playing with a Starfield Sim Picasa Gallery using Prototype. He said:

I think it's an interesting way to think about temporally organized data (I could see RSS feeds navigated through some similar mechanism, with the z-axis being time and the x- and y-axes being some kind of similarity measure), and further display that graphical presentation is not the sole domain of Flash.

And now for something a little bit different on a Friday. Greg Brown from VMWare pointed us to the fruition of nearly a year's worth of R&D: Pivot, a new GUI toolkit for Java.

While traditionally Java Applets and the Web have mixed together about as well as concrete and peanut butter, the upcoming revised Java plug-in might give a window for Java-based GUI toolkits to be of interest to Web folks.

While Pivot's source code is still forthcoming, a quick glance at its classes shows an architecture with a strong resemblance to Java's built-in Swing GUI toolkit, but with many of Swing's rough edges smoothed out. As a long-time Swing developer, I'd characterize it as attempt to create Swing++.

Similarities to Swing include a light-weight rendering model (i.e., it doesn't wrap native components), a nearly identical component contract, a very similar system of UI delegates, and a very similar event model. Differences include a cleaner API (by virtue of nixing direct interoperability with Java's ancient AWT toolkit), different approach to layout, fresh implementations of common GUI components, and a new collections framework (inspired by Java's collections framework but... different).

Thinlet is another, older alternate GUI toolkit for Java that draws its own components and targets Applet developers (though a new version is under development).

The folks at Y!DN have released Yahoo! Design Stencil Kit 1.0, which contains a full set of stencils that cover Web components in various states including:

• Ad Units
• Calendars
• Carousels
• Charts and Tables
• UI Controls
• Form Elements
• Grids
• Menus and Buttons
• Mobile - General
• Mobile - iPhone
• Navigation and Pagination
• OS Elements
• Placeholder Text
• Screen Resolutions
• Tabs
• Windows and Containers

Whip out Omnigraffle or your tool of choice and get going :)

You can download the artifacts in various formats: OmniGraffle,
Visio (XML),
PDF,
PNG,
SVG.

Kristian Thornley had a unique requirement for displaying data change overtime and thought that he would build a Mac Leopard JS Time Machine.

Kristian told us that "currently the effect suffers if the data in the panels are too detailed and I will probably set up some event handlers e.g. onScale preScale postScale which could trigger Ajax calls and preload data a bit like Livegrid."

Firefox 3 has support for Animated PNG:

One of many new features added to Firefox 3 is the support of a new file format, the Animated PNG! Browsers have supported animated GIFs for more than a decade, but the GIF image format has a number of limitations and is overdue for replacement. The PNG image format is now widely accepted as a superior replacement for static GIF images, but for animated GIFs there has not yet been a clear successor. The new Animated PNG format (APNG) is a simple extension to PNG, making it superior for animations too.
-Justin Dolske

There are some fun examples, if you can fire up FF3:

• 3D Dolphin - January 24th, 2008
• 3D APNG’s - January 24th, 2008
• Brendan Sera-Shriar - January 24th, 2008
• Mozilla Labs - Justin Dolske - January 23rd, 2008
• William Wong - January 23rd, 2008
• Joanna Viera - January 23rd, 2008
• Daniel Coltri - January 23rd, 2008

Hopefully we don’t get too much abuse of animated images like we did when animated gifs came around.

Triggit has created a very interesting tool. The problem they are trying to solve is that many people want to muck around with their websites, but don't want to grok HTML. They want to integrate with services (mash them up in a manual one off way) such as insert their videos from YouTube, photos from Flickr, and other publishing items. One big one is being able to add advertising to the site.

As techies we often think that things are easy enough, "What? You just put in some embed code.... how hard is that!" Triggit allows you to go meta and put in only one embed code, and then offer a toolbar for users to add content in WYSIWYG style.

How does this all work?

When you put in that script code on your site, it has a hook back to the Triggit platform. Say you want to add a photo from Flickr: In the tool you find the photo and place it on the screen and hit save. The action is saved back to Triggit 'add this photo to that location with this style'. Then when a visitor hits the site, the page is loaded, the JavaScript is run, and the action is sent down to the browser and the DOM is changed to add this image. Zach said that one of the biggest challenges was getting this working across the various browsers, so when you put an image at some place using Firefox (the first browser that is supported for the editor side), it ends up in the right place no matter which browser is used from the visitor perspective.

This means that you now have a logical page, but content is split between you real backend, and the Triggit servers. The advantage to this method is that you can integrate with anything. You don't need to have special code that groks a particular backend service, it is all generic.

So, this is a little out there. You are balancing between making it incredibly easy to update pages, and adding complexity by having content in separate places. The page could jump a little depending on the amount of information coming down, if Triggit gets dugg, or what have you. If successful though, you can see as developers that you could write plugins for the system and allow John Doe to easily tie in your content. That is the future promise.

Fancy giving it a go? Zach gave Ajaxian readers 300 invites (as the product IS in beta!). Head over to the signup page and use the code "ajaxian" and if you are in the first 300 you should be good to go. Oh, and for coolness factor, I believe that Rails, Erlang, and crazy JavaScript skills were used to make this happen.

I got to sit down with Zach Coelius and he discusses the product, and gives us a walk through:

I also have a short demo of it running on my own blog:

And, finally, they have their own screencast of the tool at work.

Press Release

Triggit, a San Francisco based startup, with the aim of making life a lot simpler for web publishers, today announced the beta launch of the first ever WYSIWYG web application for integrating third party elements into websites.

With Triggit, any web publisher can now drag and drop advertisements, Flickr pictures, YouTube videos and more, directly into their site without any skills in web programming. Triggit is free to use, and works on any site that accepts JavaScript. It does not require any downloads, access to FTP, or APIs, and installs easily by pasting one small piece of code in the site.

“Triggit is here to help anyone who would like to take full advantage of the resources of the web for their site who isn’t a programmer and who doesn’t think in code,” says Susan Coelius-Keplinger, Triggit’s COO.

At a time when more and more non-technical publishers are coming online, Triggit is focused on removing the complexity of using code to add third party objects to a page. Whether it is widget, a video of a dog skateboarding, or a banner ad, current technology still requires the use of embedded code to integrate these elements into a website. For publishers accustomed to using graphical user interfaces for all their computing, it can be a daunting task to modify and integrate code into their websites. One area where this is a particular problem is for online advertising networks who continue to lose hundreds of millions of dollars of potential earnings annually to web publishers who can’t integrate and optimize their ad units.

Triggit’s goal is to serve as a feature-rich tool whereby publishers can quickly and easily integrate all manner of widgets, content, advertising units, APIs and data from third party sites. In doing so, it operates as a distribution arm for companies seeking to spread the reach of their advertisements, widgets, content and data on the web. By making it easier for web publishers to integrate these objects into their websites, Triggit helps to expand the ability of these companies to reach larger online audiences and add new revenue streams. Ryan Tecco, Triggit’s CTO says “It is really early days for this technology. There are a lot of things waiting in the wings that we haven’t yet put into the tool. We are very excited to see where this goes”.

Now and then we weave the Ajaxian car into the designer fast lane from the developer one as we see something interesting. This time around we have Amy Hoy talking about product pages as an example of how to do good UX(P|D|).

She starts out with UX 101:

• Be nice to your users and customers (and potential customers).
• Design as if your main goal is to inform and educate.
• Be honest and forthcoming, while you’re at it.
• Help your users and customers to do what they want, not what you want them to do.
• Be consistent with your message and quality of service (and I’m including software design here, folks).
• Scientific, measurable “usability” doesn’t necessarily make for a good experience.
• Good design makes people feel good.

And then continues to use these rules to rip apart landing pages for Opera and Firefox. You can see her red and green pens at work:

In an ongoing exercise to become more familiar with MooTools and Canvas, Greg Houston has created an extension to MooTools called Mocha UI which provides a new UI class made with canvas tag graphics.

The new class provides the following set of features:

• No images. The windows, including their controls, gradients and shadows, are drawn with the canvas tag.
• Adjustable rounded corner radius.
• Windows can be focused, dragged, resized, maximized, restored down and closed.
• Dynamically create new windows on demand.
• Fullwindow window size is adjusted if the browser window size changes.
• Minimal HTML markup required.
• Tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9.

Greg is also considering the following enhancements:

• Create custom canvas scrollbars.
• Add a modal window.
• Create more class options.
• Add minimize to windows.
• Add a sortable dock.
• Make shadows easier to adjust.

Glen Lipka has been thinking about Trees. He looked around for patterns for building them, and couldn't find anything. Then he looked at examples such as the Ext Tree component and ended up writing up his dream tree:

1. Hover.  This is a problem with Vista as well.  If it’s clickable, then it should afford clicking.  The best way to do this is with a color change in the background.  EXT and Vista do this very well in Menus, but they forget about it in the Tree.  Trees need clear hover states.  This is my number one pattern in general for trees and it is missing in tons of JS trees out there.
2. Bigger target.  The hover in the above step needs to be wide.  As wide as the whole tree.  Plus it needs to have a little padding.  Give the user a decent target to hit.  Don’t make them hit a tiny spot.  Give them breathing room. David Foltz says, “Don’t make the user play target practice”.  He is right.
3. Keyboard shortcuts are good when the tree is focused, but what about when it’s blurred.  Keyboard shortcuts don’t work when tree is blurred.  In Vista the “on state” changes to be lower contrast on blur, so that it’s easier to tell that moving the mouse will have no effect.  In the EXT example, it doesn’t change.  This causes issues.  I actually asked the engineers to turn keyboard shortcuts off, and it seems that the keyboard option is not easily turn-off-able.

   The pattern I actually like with keyboard shortcuts better than this example is to move the “selector” or “hover” with the keyboard, and NOT the onstate. Moving the onstate changes the right side.  This is OK in an operating system, but not OK in a web application, where latency is much greater.  Interestingly, Vista is different than XP on this score.  Vista moves the hover state, although it looks like the onstate.  And XP actually moves the onstate.  Ugh, this is all a mess.

   Ok, the bottom line is:  Keyboard shortcuts for web trees should move the hover state and require an enter or spacebar.  This is the same pattern as keyboard shortcuts in raw HTML.

4. Bigger On state.  It should be clearer that you are ON a selection.  It should be a background color going as wide as the whole tree.
5. Should not collapse the entire tree.  The root node on a tree with only one root node should not collapse.  Even though I see this in lots of trees including Microsoft, I think its terrible.  Why would the user want to collapse the tree down to one node?  It makes no sense to me.

TechCrunch reports Flickr is to gain photo editing. It will use IFrame-based integration with Flash editing tool Picnik.

Flickr has chosen Seattle-based Picnik (profile) to handle the long requested photo editing feature for Flickr users.

Currently, you can rotate photos on Flickr, but the editing stops there. When the new tools launch, users will be able to edit photos more extensively using the Picnik Flash based tools (see our review here).

With users relying on online storage more and more, it's a no-brainer for those tools to offer editing capability. We can expect to see the trend continue with image sites as well as audio and video. And while image editing is possible with pure HTML/Javascript, Flash is generally the platform of choice right now.

Aza Raskin, whose company created the Enso "Quicksilver-ish" PC launcher and the perpetual scrolling blog, wrote "Never Use a Warning When You Mean Undo" for A List Apart a few months ago, echoing the advice given by his father Jef Raskin in The Human Interface.

I don't think anyone refutes the wisdom of this suggestion, but many folks responded to Aza's article with the complaint that the implementation of undo is too hard to be generally feasible. Aza has now come back with his thoughts on a simple client-side implementation of undo for Ajax (part 1).

I admit I personally cut corners all the time in this matter, violating my own beliefs and issuing warnings. :-) Has anyone in the community had experience implementing a robust undo?

Interface Elements is to jQuery, as Script.aculo.us is to Prototype.

It contains a slew of UI controls such as:

• Animate
• Effects
• Draggables
• Droppables
• Sortables
• Selectables
• Resizables
• Slider
• Tooltips
• Slideshow
• Imagebox
• Autocompletion
• Autoscrolling
• Autoexpander
• Accordion
• Tabs in Textareas
• 3D Carousel
• Fisheye menu

You can see these all in action via the demos which include some real world-like examples.

Download the package here (zip).

Jesse Kuhnert was looking at the Google Rounded Corners and decided to implement his own, using the same URL structure.

You can see his demo at work, and you can add corners by doing this:

Kevin Miller has released LightWindow 1.1, another in the trend of light boxes.

Another one?

After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just hacks of another. None of them truly supported all of the features we needed and those that were close could not be easily adapted without a bottle of Prozac near by.

This puppy works nicely, and supports various media such as PDF, movies, Flash, and more. It also supports every way that you probably want to use a lightbox.

And, they do have a sense of humour:

This library is 52k uncompressed & requires both prototype 1.5+ and scriptaculous 1.7+, if you just screamed, then it's probably time to learn how to publish your files like a grown-up. Compressed, this library is 9k.