Category: Tutorials

Combining Modern CSS3 and HTML5 Techniques

Just because some techniques don’t work in decade old browsers doesn’t mean that you shouldn’t be learning everything you can! Stay on the cutting edge, as we use everything from CSS shadows and animations, to HTML 5 mark-up and local storage, to utilizing jQuery to work with the Picasa API. We’ll also take advantage of the excellent jQuery library, and review some best practices when coding.

Give back to Nettuts and sign up for a Premium membership!

---

Preview

---

You’ll Learn About:

• HTML5 Mark-up that you can use in all your projects today
• CSS transitions and shadows
• Making IE understand HTML5 mark-up
• Working with the Picasa API, combined with jQuery’s $.getJSON
• Best practices when coding
• How to take advantage of features in the yet to be released Firefox 3.7
• Drag and Drop with jQuery UI
• And plenty more in this in depth video tutorial

Join Net Premium

For those unfamiliar, the family of TUTS sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Give back to Nettuts and sign up for a Premium membership!

Quick Tip: Understanding CSS Specificity

The “C” in CSS stands for cascading. This means that that style rules that show up later in the stylesheet will override rules which appear earlier. But this isn’t always the case. There’s something else you have to take into consideration, as well: specificity. In this quick tip, I’ll show you how to do just that.

---

Specificity Rules

CSS Specificity is basically this: the more specific your selector is, the more precedence it will have. To figure out which selectors are worth more, use this system:

• Give each HTML element selector 1 point. Example: p
• Give each class selector 10 points. Example: .column
• Give each id selector 100 point. Example: #wrap
• Add up the points for each piece of the selector to get the full value of the selector.

---

For Example

#test { background: red; } /* specificity : 100 */

.item p { background: green; } /* specificity : 10 + 1 = 11 */

p { background: orange; } /* specificity : 1  */

body #wrap p { background: yellow; } /* specificity : 1 + 100 + 1 = 102 */

Crockford on JavaScript: The Complete Series

Douglas Crockford has been well described as the world’s foremost authority on JavaScript. His “JavaScript: the Good Parts” talks have been around for a while, but recently he concluded giving a five-part updated series, entitled Crockford on JavaScript. For any JavaScript developer, these videos are a must read; check them out below!

---

Volume 1: The Early Years

---

Chapter 2: And Then There Was JavaScript

---

Act III: Function the Ultimate

---

Episode IV: The Metamorphosis of Ajax

---

Part 5: The End of All Things

Magento for Designers: Part 2

Magento is a stunningly powerful e-commerce platform. In this miniseries, we’ll learn how to get started with the platform, getting to know the terminologies, setting up a store and all related aspects of it, and finally how to customize it to make it our very own.

In this second part, we’ll focus on short, simple steps to get your Magento store from installed to ready for deployment, which will cover setting up your products, product categories, taxes, shipping, payment gateways and much more! Excited? Let’s get started!

The Full Series

• Part 1: Installation and Setup
• Part 2: Products, Taxes, Categories, Payment Gateways, etc.

---

A Quick Recap

In the last part, we saw what Magento is, what features it brings to the table, how to install it and finally how to import details regarding your existing data.

Today, we’ll fast track through the set up process by eliminating all the fat and instead focusing on only the very important elements. In these short, simple steps, your fresh installation of Magento will turn into a fully functional e-commerce web site.

In the previous part, we looked at how to bulk import products but that method may not be suitable for all scenarios. Hence we’ll build up our catalog and store from scratch.

---

Step 1 : Setting up Categories

Creating categories for products and then using them for organizing them will definitely help you in the long run. Creating a category is very simple. Under the catalog menu, click on Manage Categories

The resulting form lets you manage the various properties of the category.

The Name field lets you set a name for your category. You can always refer to it by ID but a name is always easier to use. You are allowed to use any character here.

The Is Active toggle lets you decide whether to make it active straight away or wait for later. This is especially useful when you are making advance preparations for a special sale and do not need to make it live right away.

The Description and Image fields are self explanatory.

The Page Title, Meta Keywords and Meta Description fields are for SEO purposes and let you set and manage these attributes on a per-category basis.

For a quick setup, these are all the fields you need to complete. The rest of the options in the other tabs are rather advanced and are beyond the scope of this article.

---

Step 2 : Setting up Products

Products form the base of your store and so we’ll spend a little extra time here. To add a product, click on the catalog menu, click on Manage Products.

There are a number of types of products you can create in your store:

• Simple
• Configurable
• Grouped
• Virtual
• Bundled
• Downloadable

In the interest of getting our store up and running as quickly as possible, I’ll cover simple products and downloadable products here. In all honesty though, these are all you’ll need in most cases. We’ll take a look at how to create a simple product first.

You get a total of eleven tabs chock full of fields to enter data about your product. For now, you can safely ignore most of them and focus instead on the fields that matter.

The General tab covers the bulk of the necessary information you need to input to get started. Key in values for the name, description, short description, SKU and weight fields.

The status option lets you decide whether the product is enabled or disabled from the onset. For example, you can set the products status to disabled if it’s a special product that is meant to be sold only in a certain period.

The visibility options lets you fine tune where the product appears. For instance, you may want a product to appear in the catalog but not in a search or vice versa. You can set that option here.

In the Prices tab, you only need to fill out two fields. The price field is self explanatory. Tax class lets you define to which tax class the product belongs to. I’ll talk about taxes a little bit later below.

Setting up images for each product is not necessary but is highly recommended. The Images tab lets you pick out images for the product.

Each product needs 3 images. A big image, a smaller version and finally a thumbnail for displaying in search listings and so on.

Each image can have either or neither of these three. You are also allowed to have more than one image for a product. Magento provides a simple Flash based uploaded for you to directly upload the images you need.

In the Inventory tab, you can fill out the quantity you currently have stocked so the core engine can let the customer know when an item is sold out.

Finally, you’ll need to define which category the product belongs to. I only have a solitary category in my local server but you can nest it as needed.

Feel free to explore the others options present in each tab but these are the bare minimum you need to create a simple product.

For a downloadable product, you’ll need to look into one more tab: the Downloadable Information tab.

This tab let you do a number of things including letting you upload or point to a file you want as the demo or the main product, decide whether purchasers are allowed to share the link, how many times the purchaser is allowed to download it and so on. Once you’ve filled this out, you can sell digital, downloadable products like, say, music, lesson plans, photographs and so on.

---

Step 3 : Setting up Taxes

Using Magento, you can account for a myriad combinations of different locations and their resulting differing tax percentages. Setting up tax rates is easy. Under the Sales tab, click on Tax -> Manage Tax Zones and Rates and then click on the Add New Tax Rate button.

Now we’ll configure the core engine so that it adds a sales tax of 6% whenever a customer from Florida purchases an item.

The Tax Identifier field lets you name the rate to your choice. Next, choose your country and if necessary, drill down to state and finally to the zip code if taxes differ by zip codes.

You can then specify the tax rates for the location you’ve selected. If instead, the differing taxes only apply to a range of post codes, you can specify them in the range field.

For basic use, setting up a tax rate alone is sufficient. But if instead you want to drill down further; say, change the tax for different items or offer differ rates for wholesales purchasers, Magento still lets you do that. You need to make use of Customer/Product classes and then define rules for them. This feature, while simple, requires a bit more explanation to get started. We’ll look at this feature in another part of this series.

---

Step 4 : Setting up Shipping Rates

Magento can automatically calculate the shipping rate based from where your warehouse is and the customer’s address. First, you need to tell Magento where you’ll be shipping it from. On the System menu, click on configuration. The shipping settings can be found under the sales section on the left.

First, you’ll need to let the system know where you are located from or where your warehouse is so Magento can use it as a starting point in calculating the shipping rate.

Next, click on the shipping methods option. You can find it right under shipping settings.

Now, you can choose to charge a flat rate or to let Magento query a number of shipping services to find out their rates.

Here, you can modify a number of options including naming it, choosing whether the rate is calculated per item or per order, how much is to be taken for handling, the price itself and so on.

And here is where Magento shines. You can specify this is as an option for all allowed countries or just choose the countries you want to allow individually.

If instead, you’ve decided to let Magento decide the rate based on what each shipping company charges, you can select the service you like. Each of them, however, share the same options.

Most of the fields are rather self explanatory so I’ll go over the more pertinent ones here. First up, notice the gateway URL field. This is where the Magento polls for shipping rate data. If by chance, it gets outdated, feel free to update this field. You can also specify which types of shipping methods are allowed. As before, you can allow/disallow each method of each supported shipping company individually.

Please note that the User ID field is specific to each shipping company and may require registering with them. Depending on the company, DHL for instance, you may also be required to provide an access ID and password.

---

Step 5 : Setting up a Payment Gateway

Magento supports a number of payment methods right off the bat to simplify your life. Only the check/MO method and saved CC method are enabled by default so you’ll have to pop-in and enable the payment methods you need on the settings page.

You can find this on the sales portion of the configuration page. In case you forgot, you can reach this page through System->Configuration.

For example, to enable Express Checkout for Paypal account holders, you’d just need to click on the appropriate method and change the enabled field to yes.

If you’ve chosen a Paypal payment method, you’ll also need to provide your Paypal email address and other credentials depending on which method you chose.

Google Checkout and Moneybookers both get their own section, in case you’re wondering. Just like with Paypal, enabling them can be done in two simple steps.

---

Step 6 : Setting up your Inventory

Magento provides a robust inventory management system you can use of to avoid problems in the future. You can access it by clicking on the the inventory menu in the catalog section of the configurations page.

Here, you can specify a number of options including when to mark an item has sold out, maximum numbers of items allowed in the cart, whether back orders are allowed and so on.

You can also denote whether you want your inventory to be adjusted when an order has been placed. If instead you want to manually modify your stock when a product has been shipped out, disable this. You can also specify whether sold out items are displayed and the threshold number of items before an item is marked as out of stock.

---

Step 7 : Setting up Analytics

Now that we’ve got the brunt of the work done, we can focus on the smaller, often forgotten things. Analytics, for instance.

First, you’ll need to enable Google Analytics. You can do so by going to the Google API link of the sales section of the configuration page. Here choose to enable GA and keyin your account number.

Now, Magento automatically inserts the required Google Analytics code into each page of your web site.

---

Step 8 : Setting up Pretty URLs

The final step now is to make our store as SEO friendly as possible. While most of the onsite parts of SEO are dependant on the theme you use, user friendly, SEO friendly, semantic URLs are something you can do yourself through tools provided by Magento.

First, you’ll need to enable rewrites. You can do so by clicking on the web link under the general section of the configuration page.

The relevant option can be found under the SEO link.

Now, we can create our own custom URLs. Point to catalog->URL Rewrite Management.

The resulting form lets us manage our rewrite.

The type, ID path and target path are read-only fields. The request path however lets you keyin our own request path. Essentially, when a URL pointing to request path is requested by the browser, internal rewrites reroute it to the target path.

You can also denote whether the rewrite is permanent or temporary.

---

The Last Word

And we are done! We looked at how to convert your fresh installation of Magento into a fully working e-commerce powerhouse. We review how to set up your categories, products, taxes, shipping and much more. Hopefully, this has been useful to you. I’ll be closely watching the comments section so chime in if you’re having any concerns or questions.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Quick Tip: Notable New Features in Dreamweaver CS5

If you’re a Twitter user, it was difficult not to be aware of Adobe’s CS5 global launch presentation. While they did an excellent job of promoting Photoshop and Flash, other applications, such as Dreamweaver, only received limited coverage. Nonetheless, take a look at some of the awesome new features in Dreamweaver CS5, slated to be released in mid-May.

1. BrowserLab Integration

Adobe, for some time now, has offered a helpful, and free, service called Browserlab. For those unfamiliar, Browserlab is a Live service that allows you to view snapshots of your website in a variety of browsers, not too dissimilar from Browsershots.org. Luckily, with CS5, this service is fully integrated into Dreamweaver, even allowing us the ability to stack multiple snapshots of our designs, from various browsers, on top of one another. This is especially helpful for those of us with pedantic attentions to detail.

“Preview dynamic web pages and local content with multiple viewing, diagnostic, and comparison tools.”

---

2. CMS Support

Perhaps the most welcomed and exciting new addition to Dreamweaver, there is now a “live view” option, when working on, for instance, templates for a variety of CMSs, including WordPress! This means that you can browse pages, populated with postings from your database, directly within Dreamweaver. How cool is that?

“Enjoy authoring and testing support for content management system frameworks like WordPress, Joomla!, and Drupal.”

---

3. Site-Specific Code Completion

This is something to be excited about. WIth this latest release, we now can utilize intellisense on site specific coding. For example, imagine being able to access the various WordPress functions directly from the intellisense pop-up? Pretty cool!

“Benefit from code hinting on nonstandard files and directories in Dreamweaver..”

---

4. Adobe Business Catalyst Integration

This new feature is being promoted heavily, and, while it might definitely prove to be appealing to some designers and non-programmers, I doubt our particular community will utilize this new addition. Essentially, it allows you to design and build websites with minimal coding experience.

“Leverage integration between Dreamweaver and the Adobe Business Catalyst® service (available separately) to deliver powerful online businesses without programming.”

---

5. Improved CSS Inspection

The Dreamweaver team has added a new feature which allows us to, after clicking the “Inspect” button, click on various elements on our page, and immediately view the applicable styling associated with that particular element. If you’re familiar with the Web Developer Toolbar, and Firebug, you’ll be quite familiar with this. Nonetheless, it’s a nice addition to have available from directly within the IDE.

“Visually display the CSS box model in detail, and easily toggle CSS properties without reading code or needing to use a separate utility.”

---

Missed the Launch Video?

If you didn’t catch the live unveiling, you can watch it here. So what’s the consensus? Has Dreamweaver finally come through for us? Will it take the place of your IDE of choice?

Creative Sessions: A New Set of Educational Posts Every Month

We’re very passionate about teaching creative skills here at Tuts+, so over the last year we’ve been planning a new stream of educational content focused on the "Why?" instead of the "How". Today we’re unveiling the newest addition to the Tuts+ family: Creative Sessions.

Every month we’ll be running a two week ‘Session’ on a creative topic. Our first Session, beginning today, is on Character Illustration, and future Sessions will be on varied topics like interface design, illustrative typography and creative freelancing. Unlike regular Tuts+ content, Sessions content is more theoretical, opinion based and will often cross many disciplines.

Depending on the Session, each specific article will fit into one of our ten educational sites (including FreelanceSwitch and WorkAwesome). So they will be published on the appropriate site, while our central site Sessions.tutsplus.com/Creative will provide the hub for each Session. There you will be able to track each Session, grab the monthly wallpaper, participate in a community project, subscribe to the RSS feed, follow CS on Twitter and give feedback (or praise!) for the Session.

Sessions is a bit of a new take on teaching online and is one we hope will be really successful. It’s going to really take advantage of the increasing diversity of our Tuts+ network, meaning that for example we could have a session on web design that might have a ‘freelance web design’ post on FreelanceSwitch, a ‘build a web design’ post on Nettuts+, a ‘optimize a web design for the iphone’ on the upcoming Mobiletuts+ and much more!

Because it’s so new, you can expect to see us tweak and improve the model over the next year or so. The content is all free, and like the rest of Tuts+ will remain so. At some point we’ll investigate adding either a bit of premium content to each Session or possibly extended courses for subscribers to help pay for it all!

Finally each Session will feature cover artwork by a talented designer or illustrator. The artwork will be downloadable as a wallpaper and will help give each of our Sessions a bit of personality!

---

Session 1: Character Illustration

Sessions is already bubbling with activity. You can download a gorgeous desktop wallpaper by Ryan Putnam (Rype), take part in our ‘Create an Antihero’ community project, or dive straight into the fully-illustrated Principles of Cute Character Design by Sascha Preuss, exclusive to Creative Sessions.

---

Advertising: FusionAds

Our Creative Sessions hub-site displays only one ad on every page – an excellent opportunity for your product to cut through the noise and reach its target market. Create a campaign with FusionAds to be seen on Creative Sessions and many other high quality creative sites.

If you’d like to advertise elsewhere on the Tuts+ network, we are big fans of BuySellAds and you can purchase ad spots by heading over and searching for your favourite site!

Magento for Designers: Part I

Magento is a stunningly powerful e-commerce platform. In celebration of ThemeForest’s new Magento category, this mini-series will you teach how to get started with the platform, getting to know the terminologies, setting up a store and all related aspects of it, and finally how to customize it to make it our very own.

In this first part, we’ll get to know what Magento is, installing it, and importing some products. This is aimed expressly at the beginner; so you need not worry about lacking the requisite skills. We’ll walk you right through! Excited? Let’s get started!

---

What exactly is Magento?

Running an e-commerce site is a daunting task what with almost all of the current platforms being lumbering beasts ill-suited to current standards. Magento promises to fix this and a lot more.

Magento is an extremely powerful and feature filled e-commerce platform. And it’s open source to boot! It comes filled to the brim with all the features and tools you’d need to get your e-commerce web site up and running as quickly as possible.

---

What Features Do You Get?

Magento is replete with a number of features which are hard to find or maybe even unheard of in most of its competitors. Salient ones include:

Flexible Payments

Often used payment processors including Paypal, Google Checkout, USAePay and Authorize.net are supported along with support for traditional methods such as credit cards, money orders and checks. Plenty of modules are also available to make it works with a myriad other payment processors.

Robust Checkout Process

All the features you’d expect out of a mature product including 1-click checkout and full SSL support are present.

Full Fledged Analytics

Magento provides complete analytics and reports for your stores. No need to use a third party solution anymore!

Product Reviews and Ratings

Out of the box, you can setup the store so that a customer can rate an item up or down and leave a review.

Search Engine Optimized

Magento is 100% Google friendly and supports Google Site maps to boot.

Marketing Promotions

A number of different promotional options including coupons and discounts can be made use of right off the bat.

And many, many more

There are truly too many features to cover in a single article. To be frank, you’d need an entire book to cover what Magento can do. Magento almost has every facet covered.

---

Which Version to Choose?

Now that you’re excited about Magento, you probably can’t wait to get started. But before that, we need to choose which version to pick.

Magento comes in two flavors:

The Enterprise edition is for organizations running mission critical stores. It comes with 24/7 support and numerous features you’d expect out of an en enterprise level platform including a more robust CMS system, support for gift certificates and more. But on the flip side it weighs in at $11,125 per year.

The Community version meanwhile is completely free to download and use and you’re at complete liberty to modify it to suit your needs. The only thing you’d be giving up will be the robust support but the active community more than makes up for it.

We’ll be taking a look at the community edition today.

---

Server Requirements

Magento has modest server requirements but it doesn’t hurt to make sure we have everything in order. Here are the official requirements:

• Apache 1.3+
• PHP 5.2+
• mySQl 4.1.2+

There are ways to make it work with PHP 4 but honestly, it’ll be easier in the long run to just upgrade your PHP installation.

---

Prepping for the Installation

First, you need to obtain a copy of Magento. If you’re a SVN person, checkout a copy from http://svn.magentocommerce.com/source/branches/1.4. Else, you can just it get it from here.

We also need a database for Magento so we’ll set it up as it downloads. I’m assuming you already have a LAMP setup in place.

On successful database creation:

---

Importing the Sample Data

We’ll need to import some sample data to our newly created database before we install Magento.

First up, download the SQL for the data.

Import it through phpMyAdmin and let it do all the rest.

---

Installation

Now we can move on to the actual installation. Magento, being a mature platform, has a relatively simple installation process. All you need to do is input a few values, click on the continue button and you’ll be on your way to a working Magento installation.

First, up we need to accept the license agreement. It’s mostly boilerplate but give it a quick read. Finally accept the terms and click on the continue button.

Set up your location, preferred currency and time zone in the next screen. You can, of course, change all these later through the administration screens.

Like me, if you’re daft, you might have forgotten to enable some of the PHP extensions Magento needs. In that case, enable the extension Magento needs and then retry.

You can now input the database credentials Magento needs to set it all up. You can also adjust the base URL of the store and the path to the administrative panel.

You can also set up clean SEO URLs right off the bat here.

Finally, you need to setup your admin account so you can manage everything. Magento needs an encryption key for encrypting sensitive data. If you have one at hand, type it in. Else let Magento generate one for you.

And we’re done. Magento has been successfully been installed.

---

Fix for Local Test Servers

If you’ve tried logging on to your fresh installation, you’ll get errors asking you to enable your cookies. This is because browsers generally tend to not store cookies for URIs without a period in it. localhost thus fails to store a cookie which leads to problems logging in.

Solutions to this problem range from using 127.0.0.1/magento instead of localhost to modifying Windows’ host file to manually redirect it. Nonetheless, since this is only going to be the test setup, we can just bypass said cookie-check.

Open up Varien.php at magento\app\code\core\Mage\Core\Model\Session\Abstract and find the following snippet starting at line 77:

// session cookie params
        $cookieParams = array(
            'lifetime' => $cookie->getLifetime(),
            'path'     => $cookie->getPath(),
            'domain'   => $cookie->getConfigDomain(),
            'secure'   => $cookie->isSecure(),
            'httponly' => $cookie->getHttponly()
        );

        if (!$cookieParams['httponly']) {
            unset($cookieParams['httponly']);
            if (!$cookieParams['secure']) {
                unset($cookieParams['secure']);
                if (!$cookieParams['domain']) {
                    unset($cookieParams['domain']);
                }
            }
        }

        if (isset($cookieParams['domain'])) {
            $cookieParams['domain'] = $cookie->getDomain();
        }

Now comment out the relevant parts like so:

// session cookie params
        $cookieParams = array(
            'lifetime' => $cookie->getLifetime(),
            'path'     => $cookie->getPath(),
            'domain'   => $cookie->getConfigDomain(),
            'secure'   => $cookie->isSecure(),
            'httponly' => $cookie->getHttponly()
        );

       /* if (!$cookieParams['httponly']) {
            unset($cookieParams['httponly']);
            if (!$cookieParams['secure']) {
                unset($cookieParams['secure']);
                if (!$cookieParams['domain']) {
                    unset($cookieParams['domain']);
                }
            }
        }

        if (isset($cookieParams['domain'])) {
            $cookieParams['domain'] = $cookie->getDomain();
        }*/

---

Importing Custom Products

We’re all but done here. We’ve installed Magento and added some sample data to get a taste of the platform. But it’d be more useful if we could import some of our own products before leaving. For a few, manually importing them shouldn’t be a problem. But when they move into the tens, this should be a problem.

To that end, this simple technique should come in handy. There are, of course, more sophisticated ways to import data but they require a tad more Magento expertise so we’ll be tackling it later on in the series.

Step 1: Export the Sample Products

Step 2: Understand the way the CSV is Structured

Study the structure of the CSV. Once you’re understood it, you can easily just add products directly to the CSV file. Feed it into a spreadsheet program to make this part even more easier.

Step 3: Import the Updated CSV into Magento

---

The Last Word

And we are done! We looked at what Magento is, the features it offers, how to install it, how to get some sample data in and finally how to get our own product data in. If you think it was a little too beginner level, fret not. This first entry is aimed primarily at the designer who wants to get his/her feet wet with Magento. We’ll be ramping up the difficulty as the series moves forward.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

---

Purchase Magento Themes from ThemeForest

Did you know that your friendly neighborhood ThemeForest sells premium quality Magento themes? Whether you’re a skilled Magento developer looking to start profiting from your efforts, or a buyer, hoping to build your first eCommerce store, we’ve got you covered!