Tuesday, April 8th, 2008
Category: JavaScript
, Component, UI
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.”
Wednesday, March 19th, 2008
Category: JavaScript, UI, iPhone
Vladimir Olexa of CNET has released CiUI a iUI inspired iPhone JavaScript libary that mimics the iPhone UI behavior.
It's already being used on CNET¹s iPhone page (http://iphone.cnet.com). It's been greatly inspired by iUI with a few key differences:
To create a sliding load you simply annotate the link (iUI takes over automatically, in contrast):
Check out the source and an enclosed working example or go to iphone.cnet.com to see it in live action. You can download the library from our download page.
Friday, January 25th, 2008
Category: UI
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:
Hopefully we don't get too much abuse of animated images like we did when animated gifs came around.
Sunday, January 20th, 2008
CuePrompter (via DownloadSquad) is an browser-based teleprompt tool. Cut-and-paste some or insert some text and the application will scroll it forward or back, at your desired speed. A variant of the Ajax e-reader concept.
Peeking at the source, it's been around since 2005. Implementation is small and straightforward. It works using a timer and manipulation of the top CSS property to continuously re-position the top of the entire text. (A negative top value means the top of the passage is "above" the browser window; hence you'll see text further along in the passage.)
Thursday, January 17th, 2008
Category: JavaScript, Utility, Showcase, UI
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”.
Monday, December 17th, 2007
Category: JavaScript, Library, UI, Canvas, Yahoo!, Widgets
Eric Abouaf has released WireIt, a library that answers the though: "wow, I wish there was an API that did the UI bits that Yahoo! Pipes does."
WireIt uses canvas, excanvas for IE, and YUI to get the job done. Take a look at the docs to see how it works.
Here is the code for simple terminals:
And there is even a fun game to check out:
Thursday, November 29th, 2007
Adding to the long list of generator-style sites is the latest addition called Genfavicon.
Using jQuery for it's DOM manipulation and Ajax work, the site actually does a pretty decent job of creating the cool little favicons used throughout the web. You have the option of either specifying a URL for the image you'd like to convert or uploading it to the site for processing. Once loaded, the full image is presented in a neat cropping pane letting you decide which section of the image you want as your favicon. Once you're ready, just choose an image size between 16x16 through 128x128, click the "Capture & Preview" button and download your favicon. Pretty painless.
The site was created by the group at Ferca Network as a pet project. If you can read Spanish, you can get more details via their blog.
Monday, November 26th, 2007
Category: Usability, Articles, UI
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:
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:
Thursday, November 22nd, 2007
Category: JavaScript, Library, UI, GWT
Ray Cromwell and the Timepedia team have released Chronoscope, a charting and visualization platform for Google Web Toolkit, as open source.
Chronoscope provides a rich Java API for you to play with:
We also have a piece over at devphone on GWT and Android: A marriage made in heaven?
Tuesday, November 20th, 2007
Category: UI, Canvas, MooTools
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:
Greg is also considering the following enhancements:
Monday, November 5th, 2007
Raymond Penners has launched sosymbol, a site with a collection of web2.0 (read: big?) style buttons and symbols that can be mashed up online and exported to svg/screensaver.
Thursday, October 25th, 2007
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:
- 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.
- 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.
- 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.
- 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.
- 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.
Monday, October 22nd, 2007
Max Kiesler has been doing some nice roundup posts recently. He just published Ajax Javascript Galleries, Slideshows and Effects Redux, a piece that goes through a large group of libraries and apps that show off image related functionality.
He ends up discussing:
Saturday, October 20th, 2007
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.
Monday, October 8th, 2007
Category: JavaScript, Library, Toolkit, UI, Tutorial
Sun Labs has released a new Lively Kernel project that takes the Morphic UI framework that Sun developed for Self, and implements it in JavaScript.
This enables you to run the kernel and start interacting with the world. There is one world.
Why did they do it?
The Lively Kernel places a special emphasis on treating web applications as real applications, as opposed to the document-oriented nature of most web applications today. In general, we want to put programming into web development, as opposed to the current weaving of HTML, XML and CSS documents that is also sometimes referred to as programming.
A key difference between the Lively Kernel and other systems in the same area is our focus on uniformity. Our goal is to build a platform using a minimum number of underlying technologies. This is in contrast with many current web technologies that utilize a diverse array of technologies such as HTML, CSS, DOM, JavaScript, PHP, XML, and so on. In the Lively Kernel we attempt to do as much as possible using a single technology: JavaScript. We have chosen JavaScript primarily because of its ubiquitous availability in the web browsers today and because of its syntactic similarity to other highly popular languages such as C, C++ and Java. However, we also want to leverage the dynamic aspects of JavaScript, especially the ability to modify applications at runtime. Such capabilities are an essential ingredient in building a malleable web programming environment that allows applications to be developed interactively and collaboratively.
Boot up Safari 3, and check out the interactive tutorial, and read the FAQ.
Tuesday, September 25th, 2007
Michal Migurski implemented the two-finger drag of a multi-touch interface in Flash:
In his example he visually shows how the implementation calculates a third point of the triangle. He explains this all:
There are two main difficulties: figuring out how precisely the two contacts should act on an object, and then translating those into the appropriate placement, sizing, and rotation of the object. We start with two rules: the object can be moved and turned, but not skewed, squashed, or otherwise deformed, and the fingers should stay in contact with the same points on the object throughout their movement.
Both troubles can be solved with the use of affine transformation matrices, the closest thing computer science has to a true, working hammer. I've described before how to derive a complete transformation from just three example points, so we need to figure out where to place a third point to complement the two fingers above. If we assume that the line between the two fingers is the hypotenuse of a right equilateral triangle, the we can guarantee a stable position for the invisible third finger by working out the two legs of the complete triangle. See it in action above when you drag.
