Open Source Resources for Web Application Developers

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself.

CrossSlide can do simple Static cross-fade, Slide + cross-fade and Ken Burns effect: panning, zooming and fading to specific points, to guide the eye of the viewer and convey meaning. This kind of effect relies on the browser for positioning, scaling and cropping images, through CSS and the DOM.

However it depends heavily on how the browser and the underlying graphics platform optimize these operations. Compared to native implementations of the same effects, CrossSlide is quite CPU-intensive, but recent hardware handles it without problems.

Requirements: jQuery Framework
Demo: http://www.gruppo4.com/~tobia/cross-slide.shtml
License: GPL License

• 3 Comments

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system. MenuMatic has the following main features.

• Search Engine Friendly: Only manipulates existing links, does not generate links with javascript.
• Usable: Adjust hide delay to keep menus from disappearing to quickly.
• Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys.
• Fails Gracefully: Falls back to suckerfish CSS based drop down menu system in the absence of javascript.
• Stylish: Control how menu looks with CSS, add flair with some effects.
• Flexible: With plenty of options (and more coming down the road) and the open source code, make it do your bidding.

Requirements: MooTools 1.2 Core
Demo: http://greengeckodesign.com/projects/menumatic.aspx
License: MIT License

• 8 Comments

Like Ruby on Rails, Merb is an MVC framework. Unlike Rails, Merb is ORM-agnostic, JavaScript library agnostic, and template language agnostic, preferring plugins that add in support for a particular feature rather than trying to produce a monolithic library with everything in the core. Merb is also thread-safe and was originally engineered to handle multiple file uploads concurrently.

Merb is a simple, clearly documented core. Rather than trying to cram every feature under the sun into a single code base, we keep things to the bare minimum, without sacrificing anything important. The core code in Merb is kept simple and well organised meaning it’s easier to understand, maintain and extend.

Merb is featureful, flexible and extensible. For any features that aren’t covered in Merb’s core, there are plugins. Rather than reinvent the wheel with a custom plugin framework, these are implemented as RubyGems, giving us easy plugin installation, updates and versioning.

Requirements: -
Demo: http://merbivore.com
License: MIT License

• 2 Comments

In today’s web2.0 era, more and more websites are user generated and boast dynamic content. Users sumbit text, images, videos, providing content for entire web sites. Most of the time, people submit photos straight from their camera because they don’t have photo editing programs or they don’t know how to use them. This simplified tool gives your users the ability to create a selection area that can be used to crop an image, live on your web site.

With UvumiTools Crop, you don’t have a dozen handles and double-click features. Drag from the middle to move, tug on the lower-right corner to resize, and that’s it. Simple. To use this plugin you’ll need Mootools 1.2. UvumiTools Crop must be paired with a server-side script that will actually be able to so something with the coordinates.

Requirements: Mootools Framework 1.2
Demo: http://tools.uvumi.com/crop.html
License: License Free

• 3 Comments

A while ago, we have introduced 220+ Glossy Flag Icons in PNG format, Bartelme Design Flag Button Devkit. If you are looking for mini flag icons, you should visit FAMFAM Flag Icons as well. Many websites / web applications have different versions for different countries, and some of them support different languages as well. I am sure a set of flag icons / pictures can help us so much.

Now we can create our own set of flag icons for our websites / web applications, because MSN Multimedia Center provides us a set of flags, including 192 Countries, Canadian Provinces & Cities, Islands and U.S. States, Territories, & Regions.

Requirements: -
Demo: http://encarta.msn.com/mediacenter_2.0.1/Countries.html
License: License Free

• 6 Comments

Quarkbase is a free tool to find complete information about a website. It is a mashup of over 30 data sources and many algorithms gathering information from Internet on various topics like social popularity, traffic, associated people, etc. Simple type in your webiste URL, you can get a detailed report about your website instantly.

Requirements: -
Demo: http://www.quarkbase.com
License: License Free

• 5 Comments

Jcrop is a powerful image cropping engine for jQuery. It’s been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility.

It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Jcrop also features clean, well-organized code that works well across most modern web browsers.

Requirements: jQuery Framework
Demo: http://deepliquid.com/projects/Jcrop/demos.php
License: MIT License

• 14 Comments

toksta* is a free instant messenger, which is easy to implement and customize. toksta* IM enables your users to chat via text chat or webcam in real time – without having to switch to programs like Skype, MSN or ICQ! The toksta* IM runs directly in the web browser and each user can be chatted with via his profile – no matter what he is doing in your social networking site at the time. Since the IM opens in a new window, your users can also continue to surf on your site while chatting.

The toksta* IM can be integrated into any social networking site based on PHP, Ruby or JSP. No installations or additional logins of any kind are necessary on the part of your users. It is absolutely free of charge. Hosting and traffic costs are assumed in total by toksta* and you will not be liable for any licensing or usage fees.

Requirements: -
Demo: http://www.toksta.com
License: License Free

• 4 Comments

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. MetaCarta developed the initial version of OpenLayers and gave it to the public to further the use of geographic information of all kinds.

OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a JavaScript API for building rich web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs, with one important difference – OpenLayers is Free Software, developed for and by the Open Source software community.

As a framework, OpenLayers is intended to separate map tools from map data so that all the tools can operate on all the data sources.

Requirements: Javascript Enabled
Demo: http://www.openlayers.org/
License: BSD License

• 2 Comments

Flowgram combines the advantages of slide presentations and screencasts with an interactive user experience that fully exploits the fact that almost all the information we might ever need is already on the web.

Using the zero download Flowgram Maker, creators can assemble and annotate web pages, photographs, videos etc on any topic, and add a voice narrative which provides context, emotion and consistency. This uniquely personalized package can be shared as an embeddable widget, email or as a link to either a private group or with the world. Flowgram recipients can interact with any of its pages by, for example, clicking on links, and playing and pausing videos.

Thousands of compelling Flowgrams have already been created for education, training, sales, photo journalism, humor, website walkthroughs, and tutorials etc. Would you like to use it for your website too? View the demo if you are not sure how it works.

Requirements: -
Demo: http://www.flowgram.com
License: License Free

• 2 Comments