Creating accessible Web2.0 applications can be a tricky process. Many of the advanced widgets and controls we develop today don’t exist in the current HTML specification — there is no “slider” element. So Filament Group has developed an accessible slider based on the core principle of progressive enhancement with jQuery.

Filament Group designed and developed an accessible slider with a very nice interface which allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.

The code is open source and licensed under GPL. You can view source to grab the code from this working example.

Requirements: jQuery
Demo: http://www.filamentgroup.com/lab/developing_an_accessible_slider/
License: GPL License

• 3 Comments

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented. markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites.

markItUp! is released under both the MIT and GPL Open Source licenses. In short, this means that markItUp! is totally Free, and you can do whatever you want with it. You are only obligated to keep the credits in place. Check out the examples yourself.

Requirements: jQuery 1.2 Javascript library
Demo: http://markitup.jaysalvat.com/examples/
License: MIT / GPL License

• 3 Comments

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with. You can download a Zip file which contains PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML.

Requirements: -
Demo: http://960.gs/
License: MIT / GPL License

• 7 Comments

Password Strength Checker is an application that is designed to assess the strength of password strings. The instantaneous visual feedback provides the user a means to improve the strength of their passwords, with a hard focus on breaking the typical bad habits of faulty password formulation. Since no official weighting system exists, Password Strength Checker has created its own formulas to assess the overall strength of a given password.

Password Strength Check is written in Javascript and released under GPL License. You are allowed to download this application and integrate it into your web application. I am sure it will help users choosing a more secure password when filling in registration forms. However, this application is neither perfect nor foolproof, and should only be utilized as a loose guide in determining methods for improving the password creation process.

Requirements: Javascript Enabled
Demo: http://www.passwordmeter.com/
License: GPL License

• 9 Comments

FlowPlayer is a Flash media player. You can use it on your HTML pages to play video files. “It is your personal YouTube”. It is highly customizable which upports all the features you’ll possibly need and these features can be configured the way you like. Look and feel is important to us. FlowPlayer’s skin is flexible and will smoothly melt into your site. Progressive downloading, solid streming, long play features, playlists, fullscreen mode and etc… Everything you’ll need to provide rich user experience. Flowplayer is licenced under the GPL license so it’s free too.

Requirements: Flash 9
Demo: http://flowplayer.org/
License: GPL License

• 9 Comments

jQuery, jQuery, jQuery, jQuery again. There are lots of nice application written in jQuery. Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. The core of Galleria lies in it’s smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.

Above is a demonstration shows you some more advanced effects you can accomplish with the Galleria plugin. The history object is also active that you can click the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.

Requirements: jQuery Framework
Demo: http://www.monc.se/galleria/demo/demo_01.htm
License: GPL 3.0 License

• 10 Comments

Piwik is an open source web analytics software. It gives interesting reports on your website visitors, your popular pages, the search engines keywords and etc… Piwik is built with plugins: you can add new features and remove the ones you don’t need. Piwik being installed on your server, the data is stored in your own database. You can very easily embed your graphs in your blog or website or dashboard.

If you are a developer, you can definitely help. One of their main mid term objective is to make it easy for external developers to build plugins for Piwik. Help is also welcome if you want to work on the core of Piwik: there are lots of interesting problems to solve, new features to implement and bugs to fix.

Requirements: -
Demo: http://piwik.org/blog/piwik-open-source-web-analytics/
License: GPL License

• 14 Comments

Sliding Date-Picker enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates. Sliding Date-Picker is based on Prototype/Scriptaculous, but now combined with the DateJs library as well. It has been tested it in Firefox 2.x and IE6+ and it is licensed under the GPL license.

Requirements: Firefox 2.x and IE6+
Demo: http://www.ajaxorized.com/dateslider/slider.html
License: GPL License

• 4 Comments

Modern web sites and applications use Ajax to create engaging user experiences: the HTML and CSS are set in motion using JavaScript running in the browser and calling back the server. To achieve this, the server needs to prepare the web page appropriately, and to know what to do when the JavaScript calls it. But the server knows nothing about the HTML and CSS DOM, nor how to handle JavaScript data, and you can’t code it in JavaScript.

Jaxer changes all that. Jaxer is the world’s first true Ajax server. HTML, JavaScript, and CSS are native to Jaxer, as are XMLHttpRequests, JSON, DOM scripting, etc. And as a server it offers access to databases, files, and networking, as well as logging, process management, scalability, security, integration APIs, and extensibility.

Jaxer is licensed under the GPL, and leverages the ubiquitous Mozilla engine that is used in Firefox 3, which means that Jaxer is fully compatible with the latest JavaScript standards, including access to all of the features you are familiar with — from Date to Math to window and document, and even JavaScript 1.5, 1.7, and 1.8 — they’re all there. If you know JavaScript and HTML, you can already build Jaxer applications.

Requirements: -
Demo: http://www.aptana.com/jaxer/
License: GPL License

• 7 Comments

Do you need a spell checker for your forms? Spellify is an automatic text field spell checker. You just need to type or paste some text into the text field. No need to press the enter key. The spell checker automatically checks the text when you’re finished. It will suggest some words for you if it cannot find your text in dictionary. It is extremely useful if you need users to fill in forms or submit contents. It works in IE7, FF2, IE6, Opera 9, Safari 3.

Requirements: PHP4+, Script.aculo.us 1.8.0+
Demo: http://spellify.com
License: GPL License

• 4 Comments