Open Source Resources for Web Application Developers

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

• 6 Comments

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

• 6 Comments

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

• 0 Comments

ScreenToaster is a free online screen recorder which allows you to Make screencasts, tutorials and demos. You can record your screen in one click without any downloads. It is compatible with Windows, Mac OS X, Linux. You can also share videos on the Internet in Flash, embed them on blogs/webpages or send them by email.

ScreenToaster is operated by Iteria, SARL with offices in the heart of Paris, France. They are a small team of high-skilled web engineers, developing state-of-the-art web 2.0 services for Internet users. They have already raised a first round of capital to actively support ScreenToaster. Look forward to see the on-going development of ScreenToaster.

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

• 4 Comments

The “seekAttention” plugin gracefully get’s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

The definable area (to be called “container” from this point forward) can be the entire page or any element which surrounds the target element and the colour which overlays the container can also be defined by you. Not only will it focus the element but it will automatically scroll the page if the element is out of the users view. It works very well in Firefox 2 or 3, Google Chrome and Safari (on Windows). It works quite well on IE7 and Opera as well.

Requirements: jQuery Framework
Demo: http://enhance.qd-creative.co.uk/demo/seekAttention/
License: MIT, GPL License

• 7 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

• 1 Comment

You might have encountered interactive demos created with screencasting and screengrabbing software (e.g. Amberjack, Demofuse or Jing) that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites. When you loaded this page and all went well you’ll have seen the examples, download and first paragraph section being highlighted and a small panel with information showing up in succession. This is done with this script.

Step by Step uses the Yahoo User Interface library, and pulls in most of its dependencies automatically. So, what you need to do is write a JSON object and either embed it in a script tag or link to it as an external file.

Requirements: Yahoo User Interface library, JSON
Demo: http://icant.co.uk/sandbox/stepbystep/
License: Creative Commons 3.0 License

• 1 Comment

You can create screenshots and screencasts easily for your web application easily now. Jing sits nicely on your desktop, ready to capture and share your stuff at a moment’s notice. Simply select an area of your screen, capture it as an image or record it as a video, and then click Share. Jing conveniently places a URL to your content on your clipboard ready for you to paste the URL into any of your conversations. Your content is hosted on Screencast.com, for which they are providing a complimentary account to all participants during this project. Users have 200MB of space for storing screenshots and screencasts and 1 GB of bandwidth that renews monthly. The Screencast.com account will remain available to you for the duration of the project.

Requirements: No Requirements
Demo: http://www.jingproject.com/
License: License Free

• 5 Comments

After we have developed a web service or web application, we need a way to teach users how to use it properly. A demo tour is what we are looking for. Demofuse allows us to creae tours that interact with your visitors browser by creating area highlights, emulating cursor movements, and even help by filling in forms.

Requirements: No Requirements
Demo: http://www.demofuse.com
License: License Free

• 3 Comments

Amberjack enables webmasters to create cool site tours like Demofuse. By guiding your site visitors, Amberjack tours can greatly improve the usability of your website. It is also a lightweight (4kb) cross-browsers javascript library under LGPL license. Best of all, nothing needs to be installed. Use the Tour Wizard to create great looking and helpful tours for your site or web application.

Requirements: Any Modern Browsers with Javascript Enabled
Demo: http://amberjack.org
License: LGPL License

• 0 Comments