Tampilkan postingan dengan label design. Tampilkan semua postingan
Tampilkan postingan dengan label design. Tampilkan semua postingan

Minggu, 10 Oktober 2010

30 Auto Completion Scripts for Better User Experience

- 0 komentar
When developing web applications and you need to allow users of your application to choose some data like countries, currencies or even tags from a drop down, list or even from a text box, and the data is very large. You need to use an auto completion or suggestion script to make this task easier for the end user. You can always implement your own script if you have the knowledge and the time to do this, but if you can’t then you can use a ready to use script. In this article I compiled a list of 30 Auto Completion Scripts to use in you projects.

1. Spry Auto Suggest Widget, Demo

2. AutoSuggest: An AJAX auto-complete text field, Demo

3. Ajax-driven JavaScript ComboBox with Autocomplete

4. AutoCompleter, Demo

5. AutoComplete 1.2 Scriptaculous

6. YUI 2: AutoComplete, Demo

7. jqac

8. ASP.NET AJAX AutoComplete Control

9. Google Suggest Style Filter with the Ajax ASP.net AutoComplete Control, Demo

10. jQuery Tag Suggestion, Demo

11. Facebook Style Autosuggest with jQuery, Demo

12. Search AutoComplete with ASP.NET AJAX Extensions

13. jQuery Plugin: Tokenizing Autocomplete Text Entry, Demo

14. TextboxList meets Autocompletion, Demo

15. Proto! TextboxList meets Autocompletion, Demo

16. A fancy Apple.com-style search suggestion, Demo

17. AutoSuggest jQuery Plugin

18. Auto-complete Control

19. Autocompletion with Scriptaculous and Ajax, Demo

20. FlexBox, Demo

21. jQuery Autocomplete Plugin, Demo

22. Autocomplete edit control for Javascript

23. AJAX AutoComplete/AutoSuggest TextBox

24. Auto-suggest Control

25. Ajax Autocomplete Script using jQuery

26. Ajax AutoComplete for jQuery

27. Yet Another AutoComplete Script (YAACS)

28. New component (auto_complete) in prototype UI

29. Ajax autocomplete with jquery and php, Demo

30. jQuery autocomplete

Let us know if we have missed some thing awesome and we will be happy to update the article.

[Continue reading...]

Sabtu, 13 Maret 2010

5 Top jQuery Chart Libraries

- 1 komentar



Nowadays the need for an easy way to add interactive charts becomes essential because we are shifting from pc applications to web application. jQuery and other libraries allows to make accessible data visualization in (x)HTML, giving us this needed functionality.
In this article we are going to present 5 chart libraries that suit different needs from simple charts to high complex charts. Most of them are free for personal and commercial use.

1. jQuery Visualize Plugin

jQuery Visualize Plugin is the perfect plugin if you have a table and want to generate a chart out of it. It offers different types of charts such as Bar, Area, Pie & Line charts.
Examples

Type of Charts: Bar, Area, Pie & Line.
Requirements: jQuery, excanvas (included)
Browser Support: IE6*, IE7*, IE8*, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9.
* HTML 5 canvas element is not supported by IE but Google maintains a library that translates canvas scripting into VML, allowing it to work in all versions of internet explorer.
Demo: http://www.filamentgroup.com/examples/charting_v2/index_2.php
License: MIT and GPL licenses

2. Highcharts

Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Examples

Line and column example

Columns with rotated labels
Type of Charts: Bar, Area, Areaspline , Pie, Line, Spline, Column & Scatter.
Requirements: jQuery or MooTools
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and iPhone!
Demo: http://www.highcharts.com/demo/
License: Creative Commons Attribution  Non-Commercial 3.0 License. Free for personal website, a school site or a non-profit organization. For a single commercial Website the license costs $80.

3. Flot

Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Examples




Tracking curves with crosshair plugin
Type of Charts: Bar, Area, Point & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Konqueror 4+.
Demo: http://people.iola.dk/olau/flot/examples/
License: MIT License

4. jQuery Sparklines

Sparklines generates small inline charts either inline in the HTML or via JavaScript. It is really good for displaying mini graphs notably because most of them just take 1 line of HTML or JavaScript code. Another great feature is it self-refreshing capabilities. You can see it in their Mouse-Speed demo which shows you the power of live charting.
Example

Type of Charts: Bar, Tristate, Bullet, Box Plot & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://omnipotent.net/jquery.sparkline/
License: New BSD License

5. jqPlot

jqPlot did not catch my eye at first glance but after further research I found it to be one of the best and free jQuery chart library. Numerous graphical options are available you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Examples





Type of Charts: Bar, Pie & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://www.jqplot.com/tests/
License: MIT and GPL version 2 licenses

Conclusion

As you may have seen from this 5 jQuery chart libraries they suit different needs. First Sparklines generates a small inline chart which is perfect for charts where the precision is not important. You look at the small chart and you should directly know what happened.
Highcharts, Flot and jqPlot are very powerful jQuery chart libraries. My personal favourites is Highcharts and jqPlot. The visual quality of Highcharts charts are better than jqPlot but the last one is free. I recommend you to test at least one of them and you will see that they are really powerful.
Finally jQuery Visualize is really easy to use and specially adapted if you want to create a chart out of a table, just like you would do it in excel. This can be convenient when you need a table and a chart to visualize your thoughts. Feel free to give your feedback via comments section.:)
[Continue reading...]

Ultimate Roundup of Free User Interface Icons

- 0 komentar
The role and purpose of icons is user interaction is very important these days.  Icons can enhance the user experience and user friendly icons are really appreciative but they should be unique and easy to understand. There are so many icon websites available on the web but what we are presenting here is only high quality and web2.0 free icon packs collected from various websites ,designers galleries and blogs.
In this icons series we have divided the icon packs in to three main categories. Web and user interface icon-packs, Social-media packs and other icon packs.You might have seen these icons somewhere, But we narrated here some of them you might have not seen. Not all icon packs are for commercial projects, you can use some of them for your private projects and for your personal use. Please see the usage license and derivation rules carefully before using any icons.I’m 100% sure you will love this Huge and Extensive collection of icons.

Web and User interface icons:

In this category you can download the vector,dock and some illustrator icons for your web design and development system and your CMS too.

1.Scalable icons

This set contains 25 scalable Illustrator format icons.
Disclaimer & Conditions: The set is licensed under Creative Commons License.Redistribution, Release for Download, use for commercial purpose or selling of these icons on an another site without permission is completely prohibited.

2.Free vector icons

Here are 30 free vector icons with an apple touch to it. The download contains the PSD source file.These icons can also be used as iPhone menu bar icons.

3. Diagona-icons

400 (200+200) icons are included in PNG format (10×10 and 16×16 pixel).To remove the attribution, please purchase the license.

4. Free web development icons

Free web development icons icon set is done in web 2.0.
License: These icons are free to use in any kind of project unlimited times.
Amount of icons: 80 , Icon Sizes: 24×24
Amount of icons: 60 Icon Sizes: 24×24
Amount of icons: 26 Icon Sizes: 16×16
Amount of icons: 32 , Icon Sizes: 16×16
Amount of icons: 26 , Icon Sizes: 16×16

5. Blogging icon set

Specially designed for bloggers. There are totally 12 shiny and modern icons for your blog. Sizes 24×24, 36×36 and 48×48 in png format. Blogging Icons Set is released under Creative Commons License, please feel free to use it on your personal and commercial projects.Designed by Blog perfume.

6. Go-green-minimalistic-icons

In this icon pack, there are 108 different icons. You can use for your websites, blogs or applications. These icons comes with e Commerce icons, social media, computer accessories, multimedia icons.These icons are available in 64 x 64 px and in transparent PNG formats.It’s a freebie from Dawghouse design studio.

7. Tango icons

It’s a revision pack of the previous release in Tango style.licensed CC BY-SA.

8. Function-icon-set

A consistent style with a glossy look with a set of 128 Free Icons for you to use in any projects,These icons are absolutely free! You can use them anywhere.

9. One bit icons

Icon set of 50 icons.
License: These icons are free to use in any kind of commercial or non-commercial project unlimited times.

10. Vaga icon sets

Set of 60 icons, semi-transparent .png icons (16 x 16) ready to use and available for free download.

11. Woofunction-web design icons

The Woo Function icon set includes 178 amazing web-related icons in a sophisticated and glossy design style. All 178 icons are available at 32×32 pixel PNG files.This is a classy icon set from woo themes.It’s a collaboration of wefunction and woothemes.This icon set is released on the GNU general public license.

12. WIP-Web-Iconset

A beautiful icon set for web designer’s personal use.
License: For non-profit use ONLY. Commercial(e.g. for company website, application interface etc.) use is strictly forbidden.

13. Iconic project

Iconic is a minimal set of icons consisting of 103 marks in raster and vector formats — free for public use.This set is currently licensed under the Creative Commons Attribution-Share Alike 3.0 license.

14. Glossy Buttons

This set have clean and crispy look with consistency.The Glossy Buttons is a collection of 33 high-quality stylish icons ranging from 16×16 to 48 x 48 pixels.This icon collection is created for multiple uses.The icons can be used royalty-free by the license for any personal or commercial project including web application, web design, software application, mobile application, documentation, presentation, computer game, advertising, film, video.

15. Icons from iconblock

Snow pack
102 royalty free website & GUI icons in various formats that can be used for both personal and commercial purposes.

Blue Coral
More collection of 77 blue and grey rounded button icons designed for website use. These icons are perfect if your looking for simplicity and style as well as uniformity. A freeware release


Lingo
74 xp themed icons that will surely breath new life into your blog or website application.

16.ORB icons

Free to use,for more information contact the designer.

17.Mini icon collection

Here are 113 10×10 greyscale icons in .gif format. Creative Commons Attribution-ShareAlike 2.5 licence.


Just another mini icon set

Pretty small icons.Some rights reserved.This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

18.ColorCons icon set

ColorCons are 49 different icons available in 4 different colors.
Formats and sizes included in the package are.Terms of usage are in the  pack.

19.Sweetie–BasePack

The Sweetie family is cute and clean.And free! This set has been around for five years, but it’s still going strong.Creative Commons Attribution-ShareAlike 3.0

20.Milky icon set-All in one package

This is another lovely set of simple but nice icons happily created by IconEden.com. The Milky set contains more than 131 icons primarily colored in green, giving an eye-pleasant look and prominent display on either dark or bright backgrounds.

21.Adobe-creative-icons

A special icons of adobe’s master collection.For license please verify in icon page.

22.Bright free icon set

This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software.So you can use Bright! for free for your personal and commercial projects.

23.Hand pointer icons

Free icon set that includes 36 hand pointer icons of 6 different types with 6 color variants. Icon set also includes .psd source file.

24.Once from Delacro

You can use them on your personal blog. Just send me a mail and let.Non commercial use.

25.Webmaster icons-Dellipack 2.0

The DelliPack 2.0 icons are a high quality pack of developer icons and webmasters icons.

26.Designer icons

This set includes Adobe Graphic Icons, Designers Icon.For more information see in source page.

27.Icon pack by Psferox designs

Specifically these icons designed for designer’s use.

28.Free-Mobile-Berries

These icon sets are specifically made for mobile applications,websites and GUI designs.For license details please get more information from the source.

29.Free-iphone-icons

Specifically for i-Phone developers,Free for anyone to use under the Creative Commons Attribution 2.5 Canada license. You may use or modify these icons in any way as long as you credit www.pixelpressicons.com.

30.Web standard icons

28 icons for web designers and blogger.

31.Vector arrow icons

Freshly made, tasty vector icon with 64 icons.They’re entirely free.

32.Glossy Vector icons

This particular icon set falls into the “window” category. Nothing to do with “Windows” the operating system, but the adjustment of windows, panes, and closure icons.85 shining icons ready for your next design.

33.Icons for your photo editing app

Image related icons.-Some smiling lips, a camera lens, some vortex colour, a crop tool, a TV icon, and plenty more.they’re free to download and use as you wish!

FYI : Social media icons will be coming in the next part of the icon packs after that other icon packs too.
[Continue reading...]
 
Copyright © . Hilmi Ridho - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger