2032 readers
Let’s imagine this scenario. We have a group of speakers and we want to show a few lines about who they are and what they do, followed by a large chunk of information. But, we want this block to remain hidden until visitors click on a More Info link. We’re going to create this using WordPress’ shortcodes a bit of jQuery magic.
Fact: most people choose the escalator instead of stairs leading to small rows of people waiting to jump on the escalator (ok, I’m one of them too). The Fun Theory was an initiative from Volkswagen to enhance everyday life by adding a dose of humor to it and one of the submitted projects was this staircase with piano keys for steps. I don’t need to mention how fun that would be. One more example proving that users love fun stuff!
The most important issues involved in the design of a web site or a web application are how the information is displayed to the user and how the user can interact with this information, whether it is to obtain more information about a particular topic, dismiss irrelevant information or process the information that he currently has. The rest is purely ornamental. In this post we will review a series of resources to achieve a better interface design.
One of the most exciting features in the upcoming WordPress 3.0, the custom Menus, has been updated and it now looks much more polished and integrated into the Admin back end of WordPress. You can now add a page, a post, media, tags, categories and even custom links with just a couple of clicks. There’s also a widget for you to drop your menu wherever you want.
The upcoming 3.0 version of WordPress will be featuring a sleek interface to arrange the menus in a drag & way interface. There were some mockups posted on the ticket for this feature. Let’s take a look at them.
Read more
One of the more interesting actions in visual interfaces is the ability to drag an object and drop it on a selected target. Pretty much like what we do in real life at the supermarket. Grab a beer – drag to cart – drop it in the cart. But there are attributes in the product that it would be interesting to unveil in an application. For example, when you grab a beer you can feel if it’s cold or not, and when you get to the checkout you pay the price of the bottle, which is a hidden attribute of the bottle. Today we will learn how to create drag & drop using jQuery and adding hidden attributes to the draggable items.
Some time ago I wrote an article about creating some tabs using jQuery, the Javascript library. One of the readers asked if I could devise a way to “add a code that will automatically and continuosly go to the next tab even without clicking on the tabs?”. Well, here it is. In addition to the rotating tabs, we also need to take care of the behaviour when the user actually clicks on a tab by stopping the cycling behaviour on the desired tab. Finally, we will also highlight the selected tab both in the cycling mode and when the user clicks on a tab.
A while ago the itpints’ manager, Javier Arias, approached me to redesign their site. He wanted a new experience of usability for the search engine and at the same time, a clean but artsy look. I started doing some research about many web search engines: classic engines where results are sorted mainly by relevance, (like Google’s search, whether it’s the old or the new infrastructure) and those that offer a real-time search, like SocialMention.
