Web Design Center: November 2011

Wednesday 23 November 2011

20 Awesome Jquery File Uploader Plugins

Post by web design company

Ajax Upload by Valums

Plupload v1.5.1.1
It allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms. It shows upload progress and also allow image resizing and chunked uploads.

Uploadify
Uploadify has multiple File Upload capabilities and uses a combination of javascript,action script or any popular server-side languages.Its large support community with many docs and examples make this plugin worth a try.

AJAX Multiple File Upload Form Using jQuery
This plugin features a nice user interface allowing users to upload multiple files with ease.

Multiple File Upload Plugin
This non-obstrusive plugin not only helps users easily select multiple files it also provides some basic validation functionality,like say differentiate different file types or restrict maximum upload files to 5 at a time,just to help developers idenfity simple errors, without having to upload files.

Uploadprogress v 0.3 – a jQuery + PHP plugin
This plugin allows users to choose files one by one and also shows the upload speed which is cool.

jQuery Form Plugin

FancyUpload – Swiff meets Ajax (v3.0)
This plugin is server independent and completely styleable via XHTML & CSS.

SWFUpload jQuery Plugin
SWFUpload plugin was rewritten by Adam Royle using jQuery to create a real event dispacther.

JqUploader
Input the email & choose a file ,this plugin will send the file to the email address.

JQuery Ajax File Upload

Multiple file uploader

jQuery File Upload
Allows to select multiple files or drag them all at once and upload them simultaneously.This plugin shows a progress bar for uploading progress.Stop individual uploads or all are other notable features.

Multiple File Upload With Progress Bar Using jQuery

jQuery.upload

Ajax File Upload Script Using jQuery

jQuery Custom File Upload Input
This plugin has neat input box and buttons when user selects a file to upload.

Image Upload and Cropping with PHP and Jquery
Image cropping is the most important part in social media networks & projects to limit the size of image.This plugin allows this kind of funtionality.

Uploading Files with AJAX

Monday 21 November 2011

5 Top jQuery Chart

1. GraphUp Jquery Plugin

“GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.”

Many options — Pick a data cleaner and a painter: fill, bars, bubbles; configurable decimal point (dot or comma); customizable color maps and CSS classes; and more.
Lightweight — The plugin takes only 4kB to load.

Extensible — Easily create your own cleaners, painters or color maps. Also, a callback is available to perform any operations on a cell before painting. Super flexible, endless possibilities! Check out the demos.

Progressive enhancement — Your original table is still viewable without JavaScript enabled.
Well documented — Check out the live examples and documentation.

Compatible Browsers: Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari

1.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.:)

Sunday 20 November 2011

Top 3 Keys For a Great Web Design Every Time

With the huge amount of web browsing done these days, a web designer can’t afford to let their viewers leave their website due to bad design. A well built website should have 3 key elements that help viewers find what they are looking for. These keys are structure, usability, and content. Using these three keys will help web designers create a well designed website every time.

Structure

————————————————————————————————————————

The idea behind having a well structured website is to help the viewer quickly find what they are looking for. The information super highway does not afford badly designed websites to attract and maintain viewership. There are many properties contained within the structure of a website.

Spaces and Shapes

The foundation of good structure is utilizing spaces and shapes which contain the majority of content within a website, as well as mold the website into a logical form. Choosing one shape as a template to structure the entire website is good practice. In other words, if rounded borders are to be used on some of the tables, they should be used on all of the tables. In fact, they should be the same radius as well. The reason being, according to author Lilian Garret, “The more clearly the forms follow a regular and predictable pattern, the more we see them as single, unified groups” (Garrett). Spacing is also important in the structure of a website. Lilian Garret also says, “The nearer visual elements are to each other, the more we tend to group them together” (Garrett). In the example of a blog, each post should be adequately spaced apart from another post, while the body of each post, should be closer together.

Colors

Colors also help distinguish the content of a website. A good rule of thumb is to use two contrasting color palettes and one neutral color. The two contrasting colors are for the body background and the body text (keep in mind if viewers are going to be spending time on reading the content of the website: it is easier to read black text on a white background than it is to read white text on a black background). Neutral colors are great for navigational menus, or supporting a background color. Having a white background and using light blue tables to hold the content of a page would be an example of having a neutral color supporting a background color.

Paragraph Properties

Setting the proper paragraph properties of a website is another element to providing great structure. Paragraph properties include font face, font size, line spacing, and letter spacing. By default, internet web browsers have already done most of the work for us and will use the most reader friendly fonts. Stay away from using artistic, decorative fonts, unless they are large. According to fonts.com, “decorative type faces can detract from the communication process”.

Rhythm

The last element of having good website structure is rhythm. Every page on a website should look and feel the same. Every page should flow from left to right and from top to bottom with the most relevant information in the top left, drawing down to the least relevant at the bottom right. The most important information can be centered in the middle of a web page if there is adequate spacing around it. An extreme of example of this would be Google.com.

Usability

————————————————————————————————————————

Usability is defined as the ease of navigating and finding information on a website. There are three elements or ways of having good usability.

Site Map

The first is having a site map. Site maps are important navigational pages that display all of the important and relevant links on an entire website. It’s important to note that if a website has a lot of links, the site map should have categories with drop down menus. This way the site map will always look neat with little clutter of information which might be of no use to a viewer. It’s also important to remember that a site map doesn’t have to include every page on a website, in fact sometimes it is better to leave out some links. A good practice is to leave out links that would have no benefit to someone viewing the website.

Search Bar

A search bar is another element that would increase a website’s usability. If a viewer knew exactly what they wanted from a website, they would be able to type it in the search bar instead of having to navigate around the website or the site map.

Navigation Menu

The last, but most important element of a website’s usability is the navigation menu itself. Links in a navigation menu should be categorized by relevancy of other web pages. If a website has a lot of links, it might want to use drop down menus. Drop down menus are a great way of organizing and categorizing web pages. Drop down menus can be used with horizontal navigation menus as well as vertical menus. For lots of links, it is recommended to use a vertical navigation drop down menu. Amazon.com is a great example of a clean vertical navigation drop down menu.

Content

————————————————————————————————————————

With good structure and good usability, great content is on the way. Make use of paragraph and header tags. Place headers in logical order from h1, down to h6. The h1 tag is generally static and takes on the name or overall theme of the website. The h2 through h6 tags should be used for titles of paragraphs and sub titles of paragraphs respectively. If a website has a lot of fresh content appearing regularly, a good method to handle it is by having a header tag with a small abstraction of the fresh content. When designing the website, keep the content in mind. When a new viewer visits a website, they should know what the website is about without having to scroll. Clearly defined titles and short descriptions in the top two to three inches of a website will let new users know what the website is all about.

After using the three keys to create a great web design all that is need is email hosting,correct grammar, creative writing, and interesting graphics or pictures explaining your website.

Web design company : Mr Web Limited

Wednesday 2 November 2011

10 New Free Fonts for Your Delight

Our readers are already used to finding beautiful and free fonts around here, and today, to keep you happy, we have a new round of free fonts for your delight. Since we love to hunt down nice freebies and fonts are always in high demand, here are 10 new fonts for you to use in your designs. Enjoy!

Click at the images to go to each website to download the fonts, enjoy!

GRN Burgy