1stwebdesigner

Posted by | Posted on 17:19

1stwebdesigner


Presenting the Great New Features of jQuery UI 1.8

Posted: 25 Mar 2010 02:00 PM PDT

The final version of jQuery UI 1.8 just got released a few days ago. I will go through all new features and also show you some examples with the new widgets.

Along with the hundreds of bug fixes and improvements, 5 new plugins and 1 new effect found the way into the bundle.

What's New in jQuery UI 1.8?

The jQuery UI team worked hard to make the framework even lighter, more modular and flexible. If you are a developer, it's now even easier for you to build your own widgets or extend the pre-built ones.

To start right now, take a look at the new Widget-Factory and the jQuery UI CSS-Framework.

Also don't forget about the ThemeRoller Firefox Developer Bookmarklet. This brings the ThemeRoller into any page on the web! To install it, simply drag the link into your Firefox toolbar. (or just click it right now to give it a try!).

The Position Utility

With this, you can position any element relative to any other, or even relative to the parent window or your mouse. Like in the "Write Less. Do More"-fashion, you just have to select the element you want and configuring which part of it should be positioned relative to which part of another element. That's all!

Take a look at the official documentation here.

You can also take a look at the two provided demos which are included.

Position Utility – Demo 1:

Link to the Demonstration

jQuery UI 1.8 Position Demo 1

You can use the form controls to configure the positioning or you can drag the positioned elements to modify the offsets.

Just drag around the orange parent element to see the collision detection in action!

Position Utility – Demo 2:

Link to the Demonstration

jQuery UI 1.8 Position Demo 2

This is a prototype of the photo-viewer using the Position Utility to place the images at the center, left and right of your parent and cycle them.

To cycle them, just click the "Previous" and "Next" links at the top or on the images on the left or right. Also take a look how the images are repositioned after you re-size the window.

The Button Widget

With the button widget you can create a fully theme-able button from any imaginable element you want to use as a native button.

Use them right now in your dialog boxes or forms.

Take a look at the official documentation here.

They have also provided 6 different demonstrations there. Two of them I will show you now:

Button Widget – Demo 1:

Link to the Demonstration

jQuery UI 1.8 Button Demo 1
You can use any markup for create your buttons: An ordinary button element, a form-input element with the submit type or an anchor tag.

 	$("button, input:submit, a", ".demo").button(); 	$("a", ".demo").click(function() { return false; }); 

Button Widget – Demo 2:

Link to the Demonstration

jQuery UI 1.8 Button Demo 2
On this Demonstration you will see a (not functional) media player toolbar, filled with all types of buttons you can create with the new widget. Buttons with icons, checkbox-type buttons ("Shuffle") and three radio-type buttons ("No Repeat", "Once" and "All").

Don't forget to take a look at the source code. The setup/code is really very easy.

The Autocomplete Widget

This is maybe the most requested feature, which made it into the latest release of jQuery UI – The Autocomplete. Now you are able to make any text input field pop up a menu to help the user in completing their search or entry, provide suggestions or show all allowed values.

You are able to provide static data using the source option, or provide a callback function as the data source which can get the data from a server via Ajax.

Also there are a lot of demonstrations on the official documentation page. You can take a look at it here: Official Autocomplete Documentation. I will again present you two of them:

Autocomplete – Demo 1:

Link to the Demonstration

jQuery UI 1.8 Autocomplete Demo 1

This is the demonstration with the default functionality. When you start typing, you will get static suggestions on the pop up box. The data source is a simple JavaScript array.

 	var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; 	$("#tags").autocomplete({ 		source: availableTags 	}); 

Autocomplete – Demo 2:

Link to the Demonstration

jQuery UI 1.8 Autocomplete Demo 2
In this demonstration, the data source is a remote JSONP. In this case: geonames.org webservice. While you will end up with only the city name itself in the input box, more info is displayed in the suggestions box to help you find the correct entry.

This data is also available in callbacks, as you will get it illustrated in the results area below the text input field.

Take A Look At The Complete Changelog

jQuery UI 1.8 – Final Changelog

jQuery UI 1.8 Changelog

Click the link above to take a look at the full list of changes between jQuery UI 1.7.2 and jQuery UI 1.8.

Downloading jQuery UI 1.8

jQuery UI 1.8 Download It!Of course, you have a few options again to get the latest build of jQuery UI.

The Complete Package:

With the jQuery UI 1.8 Starter Pack you will get all components and the default themes. Also it is optimized to use it along the Getting Started Guide, in case you're new to this all.

The Full Development Bundle:

Of course you can also get the full jQuery UI 1.8 Development Bundle, which also contains all components and the base theme. This package is optimized for development of jQuery UI itself or the redistribution of your own builds – not for the "Getting Started Guide".

The Full Theme Pack:

With the jQuery UI 1.8 Themes Pack you will get all of the 21 Themes of the ThemeRoller Gallery. You can just take one and use it, or take one as a starting point and tweak it to your wishes. For example you can use it along this bookmarklet.

Customized Download:

If you know exactly what you want, you can go to the jQuery UI 1.8 Download Builder to customize your build and download it as a custom zip file. Of course it still takes care of plugin dependencies, so you don't have to worry about that!

Other Download Sources:

Now jQuery UI 1.8 is also hosted on Google's AJAX Libraries API page. As Usual you can directly use them in your script sources so you disburden your server.

Of course you can still go to GitHub to get the latest version there too.

Last Words And Links

If you are ready for jQuery UI 1.8, make sure to use it along the latest jQuery build (1.4+) so you get the full performance and compatibility.

The Core of jQuery UI is now 71% smaller. They have achieved this optimization by pulling the already modular but bundled components mouse and widget.

The new mouse plugin file makes the average jQuery UI 14% smaller. This plugin is not new, but now it is moved to its own file, where before it was in the core.

If you're upgrading from 1.7 to 1.8, be sure to take a look at their comprehensive Upgrade Guide here. If you're coming from an even older version, take a look at the 1.7 Upgrade Guide first.

Most interesting links:

What can we expect from jQuery UI 1.9? I'm already very excited – Discuss in the comments and have fun trying out all new features and lets fill the web with some nice jQuery User Interfaces!

Happy developing! :)

Choosing Right E-Commerce Software For Your Online Store

Posted: 25 Mar 2010 03:00 AM PDT

There are numerous options available when it comes to choosing right e-commerce software for creating your online shop. From free shopping cart solutions to those who charge you a bill of thousands dollars for keeping your shop online, there are actually hundred of shopping solutions available out there. In this article we will dig deep in to the world of some most famous e-commerce solutions. Let's get started.

Cheap SSL CertificatesE-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Check their site to get the cheap SSL certificates.

We can divide the whole section in three parts. First we will cover free and open source options and then we will cover pre hosted and paid options. We will also take a look on e-commerce modules available for extending your CMS to e-commerce website.

Open Source & Free E-Commerce Softwares

1. osCommerce

osCommerce is an award winning e-commerce shopping cart solution which has more than 200000 community members. osCommerce is released under GPL which means its open source and any one can modify its code adhering to the license under which it is released. You can download it for free and can create your shop online without paying a single penny to the developers of osCommerce.

oscommerce-e-commerce-softwares

The last update (3.0 Alpha 5) in osCommerce was in March 2009 so there are rumors that the project is dead. There are 5600 different modules available on their official repository which shows that community of osCommerce is really supportive.

2. Magento

Magento is the second big guy in the world of e-commerce solutions. Like osCommerce, Magento is also released under GPL and you can download it for free. With a very active development schedule, it got the latest update (1.4.1) on 19 February 2010. There is a big list of features which you can read there. But the biggest problem with Magento is that it's heavy software and needs a huge amount of resources to work efficiently.

magento-e-commerce-softwares

This is my personal choice and I use it for my client works. The community of Magento is still growing as it is new in the game. Recently the official extensions repository crossed the number of 2000 extensions. Varien, the company behind Magento also offers an enterprise version of Magento starting from only 8999$$$/year. The have previously worked with osCommerce and now they have developed their own solution.

3. Zen Cart

Zen Cart is a forked version of osCommerce, licensed under GPL and free for every one. The major difference between osCommerce and Zen Cart is the templating engine and some additional features which are not available in its superior. Templating engine of Zen cart makes it very easy to create custom themes for your online shop as compared to Magento and osCommerce. There are more than 1000 free addons available in their plugin repository.

zen-cart-e-commerce-softwares

4. PrestaShop

PrestaShop is also open source and free solution for creating your online store. It has a big community with more than 50000 community members. The best thing in PrestaShop is its light weight and fast speed. If you compare PrestaShop with Magento in terms of speed and size, it's a lot better. One thing for sure, you will love its back end design. It's really awesome, simple and easy to use. Even a beginner can set up an online store. We published a beginner’s guide for prestashop. You can check it out here.

prestashop-e-commerce-softwares

Pre hosted and Paid Solutions

5. Shopify

Shopify is a pre hosted e-commerce solution which charges you for keeping your store online. You don't need to set up anything technical. All you have to do is just adding your products. SSL, payment gateways and all the security measures are the responsibility of Shopify Team. You can setup your custom domain and you can also create custom themes.

shopify-e-commerce-softwares

Each shop owner can change the html/css of his store to customize the look of his store. All you have to do is just to pay their bills/month which depends upon your sales and the package plan you take. If you are totally scratch and want to make things easier for yourself then I will suggest you to go for it.

6. FoxyCart

FoxyCart is also a pre hosted version of e-commerce solutions but it's a bit different from Shopify. Actually Foxy Cart is only a shopping cart (not a cms) which integrates in to your already existing website. You can customize the look of your shopping cart by changing the html and css of your shopping cart. Just take the code, put it into your website and you are done. At the end, you will have to pay them a monthly fee for all their efforts.

foxycart-e-commerce-softwares

E-Commerce Modules for your CMS

7. Ubercart for Drupal

Ubercart is an e-commerce module for people who want to create an e-commerce store on the top of Drupal. It's a fact that Ubercart is an almost complete solution for anyone who wants to create an e-commerce store but I will not recommend it those people who don't have experience with Drupal.

drupal-e-commerce-ubercart

8. WP e-Commerce for WordPress

WP e-Commerce is the most trusted and complete solution for people who want to include e-commerce functionality in their WordPress blog or website. We have already covered it out. You can check the detailed explanation here.

9. Virtue Mart for Joomla

Virtue Mart is an addon for creating online store using Joomla. There are 2 other plugins out there for same functionality but Virtue Mart is the oldest one and most comprehensive solution for creating e-commerce websites with Joomla. My personal opinion about Joomla is not good as I think a newbie will get puzzled with dozens of premium modules which have same functionally.

joomla-e-commerce-virtuemart

E-Commerce is an enormous subject to cover and each option has its own pros and cons. I have tried my best to write those options which are trusted ones and mostly people are happy with those options. There is always chance for improvement. Let me know if I have missed your favorite option and I will be happy to discuss it with you.:)

Cheap SSL CertificatesE-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Besides standard SSL certificates, wildcard and EV certificates are offered with discounts too. Check their site to get the cheap SSL certificates.

Comments (0)

Post a Comment