Archive for the ‘User Interface’ category

Extract Colors from CSS Code

October 1, 2007

css-color-extractor_1191268352898.pngGetting the colors right in CSS can be a bit of a pain without the right tools. An interesting tool I came across extracted the colors from a published site.

But I needed something (easy) to use in development. So I wrote a little tool I’d like to share with you!



Part Two: How to Create an Image Selection & Upload Plugin for tinyMCE with Ruby on Rails

August 28, 2007

Update: A sample project is now available

In the first part of our how-to we created a tinyMCE plugin with a dynamic image selector panel based on the advimage plugin. Now we will add functionality to upload images or select an existing image.

Our plugin needed to satisfy the following requirements:

  • Use the existing inline popup (IFRAME) adding a form for uploading an image. We did not want the user to be directed to another page or create a pop up window.
  • In javascript determine which controller to call in the form because we can not pass a variable from the parent to the image selection IFRAME.
  • The image selection IFRAME should not reload when the form is submitted. Reloading the IFRAME would trigger another fetch of uploaded images and that should be avoided.
  • After an image is successfully uploaded the source and alternative text fields should be set as if the user had clicked on an existing image and the IFRAME should then disappear using the plugins existing functionality.

picture-1.png (more…)

How to Create an Image Selection Plugin for tinyMCE with Ruby on Rails

August 23, 2007

TinyMCE is a great content editor written in javascript from the folks at Moxiecode systems. We created a plugin for tinyMCE that allows users to select images from a selection of thumbnails instead of having to type a URL into a popup. This is part one of a two part tutorial on creating a custom tinyMCE plugin for image selection. Part one covers the basics of getting the plugin created. Part two will add image upload functionality. At the end of this tutorial you should have a tinyMCE popup window like this:


Some administrative details before we get started. You will need a couple things before you can follow along:

  1. A working rails project and some images.
  2. TinyMCE installed and working – A tutorial for that is here


UI Tip: Be Physical & Real

June 1, 2007

BuzzWord (Beta)I was playing around with a new web app the other day, called BuzzWord. I play around with as many new services as I can so I can get as many ideas as I can for new styles of user interface. (Screenshot included). Despite the fact that it was flash (I said it!), something struck me about the program: it was a joy to use. But I couldn’t figure out why. I knew I definitely didn’t get that feeling from using another online word processor.

Google Doc
And then it hit me – it actually graphically displayed the concept of pages, and more natural spacing between words. And that made all the difference. I started looking around the web a bit more, and indeed, many layouts are starting to incorporate more real-life physicality and images into their layouts. It just makes people want to use the applications more. Don’t get me wrong – features are equally if not more important too (which is why I will continue to use the product displayed on the left). There is a company that is doing this really well right now: Apple. If you look at their products, from the iPod, to Pages, to iTunes, many of them incorporate real life, realistic graphics, not to mention a great tactile experience.

The new Microsoft Surface

… And then I saw Microsoft Surface (at techcrunch, of course!). I have been koolaided. Multi-input, context aware, graphical interface is the next biggest thing in user experience since the window manager and the mouse! Yes, it’s been around since the ’80s, yes other companies might succeed over Microsoft at making this actually work, but the possibilities with this are endless. Combine it with a Wii controller (or something that takes gestures from a distance away), and you’re golden. Put your planner on the surface, and all your favorite web services talk to it and tell you what you should be doing when. Oy vey, I’m getting too excited – I need to rest.