Open Source Resources for Web Application Developers

Chardin.js is a jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour. It is licensed under the Apache License, Version 2.0.

Requirements: jQuery Framework
Demo: http://heelhook.github.io/chardin.js/
License: Apache License 2.0

Intro.js is better introductions for websites and features with a step-by-step guide for your projects. User have the ability to navigate with the mouse, or the keyboard – ←, →, ENTER and ESC to exit. It’s fast and small, with only 4 KB JavaScript and 2 KB CSS.

Better compatibility is on the roadmap, but currently it should work in recent versions of Firefox and Chrome (probably IE10, too!). It’s Free and open-source (including commercial use). It is released under MIT license.

Requirements: JavaScript Framework
Demo: http://usablica.github.com/intro.js/
License: MIT License

Embedded Help System is “providing help where help is needed” concept that can be easily integrated into web interface. The point is to offer help to user in their working interface and actual situation.

jQuery E-Help is plugin for procedural (”How to …”) web user interface help and it’s easy to integrate into any web interface that supports Jquery. Useful for all web applications, CMS and E-commerce systems.

Requirements: jQuery Framework
Demo: http://embedded-help.net/
License: GPL, MIT License

Slippy is a HTML Presentation library written with jQuery, it takes a html file in and plays it in any browser. It is optimal for programming-related talks since it includes a syntax highlighter and is very easy to use since it’s just standard html markup with a few classes to enable specific functions.

If you are making a talk about Javascript, Slippy can even execute your code samples live and displays alert() boxes nicely instead of using the ugly browser dialog, which -I tried it today- works quite well to prove your point interactively.

Requirements: jQuery Framework
Demo: http://slides.seld.be/?file=2010-05-30+Example.html
License: GPL License

We have mentioned Amberjack long time ago. Amberjack enables webmasters to create cool site tours. By guiding your site visitors, Amberjack tours can greatly improve the usability of your website.

Now they have released Amberjack 2.0, which allows easy creation of On-Page Tutorials. Users can navigate with bubble arrows, keyboard right/left or mouse click left/right. Text bubbles explain page elements to your visitors. You can also use HTML and CSS knowledge to customize the bubbles as you like. Embed a video is also possible.

You can have a look at the source here. However, we have to wait a bit longer, in order to get more tutorials and documentation of Amberjack 2.0.

Requirements: -
Demo: http://amberjack2.org/
License: LGPL

Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. Great alternative to widely used Flash techniques. Stitched image is not required, but they do support them too.

Try reel for yourself. Place your mouse pointer over images below. And roll your mouse wheel up/down or drag the image left/right. Reel has been tested in Safari 3+, Firefox 3+, Chrome and IE 5.5+.

Requirements: jQuery Framework
Demo: http://jquery.vostrel.cz/reel
License: MIT and GPL License

GoView made screen recordings easy. You can start recording your computer’s screen and audio with just two clicks. Snipping out unwanted segments is as simple as using a pair of scissors. You can also insert title slides to add polish and act as section dividers. After all, your recording is instantly ready to be viewed an share online. It’s quick. It’s easy. And it’s free.

Requirements: Firefox 2.0+, Internet Explorer 6.0, 7.0
Demo: http://goview.com/
License: License Free

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css. First you’ll need content and it should be wrapped inside a div containing an ordered list where each list item represents one slide.

You can basically put whatever you want inside list items as long as you keep the same dimensions. Script automatically adds “previous” and “next” buttons in form of span elements with nested anchors just after the content element.

On each click (previous or next button) script calculates the current “position” and makes a one step in requested direction. So, the slider jumps from one slide to another. Once it reaches the end (last slide), the “next” button fades away and re-appears only if “previous” button is clicked again. Same goes for sliding towards the beginning.

Requirements: jQuery Framework
Demo: http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
License: MIT, GPL License

Product Planner was born out of the need to help people understand and create user flows for their web products. The idea is that by looking at examples of other successful web products, you can get a better idea of how to create your own.

Product Planner is actually useful for creating a demo tour for web applications too. You can create a work flow for performing a specific task with your web application. So that user can understand how to use your web application easily by reading the work flow step by step with screenshots.

Requirements: -
Demo: http://productplanner.com
License: License Free