Raindrop is an exploration in messaging innovation being led by the team responsible for Thunderbird, to explore new ways to use Open Web technologies to create useful, compelling messaging experiences.
A central principle behind Raindrop is that messaging should be personal — they want Raindrop to be people-centric both in how they process messages, and in how they can help give people control over their personal data and experiences.
When a friend’s link from YouTube or flickr arrives, your messaging client should be able to show the video or photos near or as part of the message, rather than rudely kicking you over to a separate browser tab.
Notifications from computers and mailing lists should be organized for you, not clutter your Inbox or require tedious manual filter setup. It should be easy to smoothly integrate new web services into your conversation viewer entirely using open web technologies.
Source: http://mozillalabs.com/raindrop/
Do you remeber we have published a post of Accessible Very Tall Menus with jQuery and CSS? Some people found it not a good way to present information, because we cannot see everything on the menu in one go.
Now SohTanaka has come up with another solution – Mega Drop Down Menus. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
License: License Free
Pluralink is an amazing javascript plugin to arrange multiple links in your text. Here is how it works. Suppose you have to include 3 links in a text. What you usually do is that you list it one after the other in a single line which gives a feeling of repetition. For example, if you want to link to google, yahoo and bing in a single line, you will write as “the three top search engines google, yahoo, bing contribute …â€.
But with Pluralink you can show all your links as a drop down list from which the user can choose any of those. It gives a nicer look as well. You can download either the pure pluralink version or the wordpress plugin version for free.
Requirements: –
Demo: http://pluralink.com/
License: License Free
Validatious 2.0 is an easy form validation with unobtrusive JavaScript. Validatious requires no JavaScript library. However, if you’re already using one, Validatious can easily work with it, and even benefit from it.
There are several settings allow you to control how and when Validatious does validation, how it displays errors and more. If configuring isn’t enough, callbacks and easy overriding gives you complete control.
You can also add custom validators with only a couple of lines of JavaScript. If your site’s language is not english, you probably don’t want error messages in english. There are several ways of changing languages as well.
Requirements: Javascript Enabled
Demo: http://validatious.org/learn/examples
License: BSD License
We need to be inspired to be in style. All of us are looking to give the website the edge to make it one in a million. We look for the style that allows the website to speak for itself, because a picture is tantamount to a million words. Last but not the least, it is always the first impression that leaves a touch; sometimes it might even metamorph in to first love.
Here we have showing you the top 20 designs that have inspired us; we are sharing the web app designs that have made the difference; we have been eclectic with an esoteric collection.
1) Reinvigorate
A tool to track real time traffic to your web with many features including heat sensing
2) Moodstream
A powerful tool to find you the images, footage or audio you are looking for.
Read the rest of this entry »
After the success of Vista-like Ajax Calendar, dev.base86 has recently released Calender Eightysix. It is completely built from scratch with pure javascript, making use of some of the superb features the latest MooTools javascript framework has to offer.
Calender Eightysix is an unobtrusive developer friendly javascript calendar and datepicker offering a better user experience for date related functionalities. Calendar Eightysix has a variety of options to style and format the calendar to your needs. This is done by providing options while instantiating the class.
Requirements: Mootools Framework
Demo: http://dev.base86.com/scripts/datepicker_calendar_eightysix.html
License: Creative Commons 3.0 License
Nettus has published a tutorial: Learn how to Create a Retro Animated Flip-Down Clock. In the tutorial, we will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, we are trying to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website.
The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the “flip” effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes.
Requirements: Mootools Framework
Demo: http://nettuts.s3.amazonaws.com/470_clock/Source/index.html
License: License Free
Facebook Connect is way to make your application more social. With it you gain access to: Identity: the user’s name, photo and more. Social Graph: the user’s friends and connections. Distribution: the Stream, and the ability to communicate. Integration: publishers, canvas pages, profile boxes & tabs.
This guide is for using the Mu JavaScript library to access the above on your site. Mu is a very lightweight library which you can use Facebook Connect on your site along with your favourite JavaScript library such as Dojo, jQuery, MooTools, Prototype or YUI.
Requirements: Facebook Connect
Demo: http://mu.daaku.org/console/
License: License Free
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
Styles can be applied through external CSS, the options object, or both. The CSS options for the modal overlay, container, and data elements are: overlayCss, containerCss and dataCss, all which take a key/value object of properties.
Requirements: jQuery Framework
Demo: http://www.ericmmartin.com/projects/simplemodal-demos/
License: MIT License
On the internet there are many applications and sites that help people to improve the way they work. Notable is an interesting result which is based on giving users an opening to use a feedback program which is created for teams that need to assist in improving many websites’ design, content, and code. Notable, designed by ZURB, makes sharing web page design and collecting feedback very simple.
You can give feedback quickly and easily on design, content and code of a website or application on any page. One of the finest things about this tool is that now it is easy to contribute with any page of a website. You can do it without leaving the browser.
Using this product, your team will be able to participate through visual feedback on screenshots. It is a page capture utility. It has got strong annotation features which allow you pinpoint copy, design elements and even code which needs to be tweaked. Notable is the best comprehensive feedback tool on the Web.
Read the rest of this entry »
