Exploring the New Features of CSS3
There has been a tidal wave of buzz recently about all the new CSS3 features and properties. Just what exactly do these new properties mean for web designers, though? Well, CSS3 is pretty cool, no longer will you need to rely as much on graphics or Javascript, and more importantly it allows for better control over HTML elements, allowing you to create more flexible and even more complex web sites. Really, whats not to love about it all?
For today’s news we have collected the best articles that focus on CSS3 tutorials, and give you a little insight to what all the buzz is about.
Understanding The Basics Of CSS3
In this article,the author talks about some of the more popular features of CSS3 that have recently been spotted out in the wild among several popular websites. While most of these are only visible in some of the more modern web browsers (Mozilla, Chrome, Safari) it’s important to go ahead and get a grasp of exactly how they actually work.
Understanding The Basics Of CSS3
50 Excellent Tutorials for Web Development Using CSS3
In this emerging roundup they mphasis on some of the latest techniques: text-shadow, rounded box, box sizing, opacity handlers, multiple backgrounds, border images and also support for multi-column web layouts.
50 Excellent Tutorials for Web Development Using CSS3
Basic CSS3 Techniques That You Should Know
This article, from Six Revisions, takes a look at a few of the essential things you need to know about CSS3. With all of these new features, it’s important to place emphasis on the most important ones to get you up to speed. Even though only the most modern of web browsers (Safari, Mozilla, Opera) currently (partially or fully) support CSS3 specs, it’s an exciting time for those who like to experiment.
Basic CSS3 Techniques That You Should Know
15 CSS3 Navigation and Menu Tutorials and Techniques
Please bare in mind that for the most part all of these menu tutorials have not been written for usage in the wild, they are more experimental, a demonstration of what can be achieved and will be used in the near future.
15 CSS3 Navigation and Menu Tutorials and Techniques
By Paul Andrew (Speckyboy and speckyboy@twitter).
Free Magento Themes Collection
This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.This week was a surprise Magento week at WebResourcesDepot for getting you closer to this awesome open source e-commerce application.
2 posts are published to guide you on installing & customizing your e-store:
- The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 1)
- The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 2)
And here is the 3rd (last) one which will help you a lot in beautifying your shop with 20+ free Magento themes:
Foot Prints – demo
Magento Classic – demo
Modern
EversonStore – demo
Cloth Store – demo
Telescope – demo
Electronic Store – demo
Absolute – demo
Blue Skin
Eco Handbag – demo
Grayscale
Kalocsa – demo
Sigyn SM – demo
Glam – demo
Teal – demo
Linen – demo
Hardwood – demo
Inspire Blue
Refresh
mCommerce – iPhone Optimized
Books On Magento:
This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
Get The Details Of The “Server That Hosts Your Website”: phpSysInfo
phpSysInfo is a free PHP script that displays detailed information about the host it is placed.
It can show data like the CPU, Ram, OS, "since when it is up", installed devices, etc.
Also, phpSysInfo can collect the information required to analyze the server load which can effect website performances like the available Ram or network usage.
The script works on every PHP-enabled website & can display static information, generate XML outputs (which is nice for automated checks) or dynamically update itself.
It is multilingual & includes various ready-to-use themes for customization.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
Questions That Help Assess Website Usability
The level of usability on your website takes on a vital role when we’re designing for the end-user. If your web application isn’t easy to use and interact with, then chances are the services and information you offer will be valuable to a rare few. Usability aims to relieve some of the things that can make your website complicated to use and simplifies the interface so that the users overall experience is a pleasurable one.
When designing with usability in mind you must make sure you test extensively, and consider the fact that what may be easy for you to interact with, may be difficult for others. It is about finding the right balance that will allow a wide variation of users to exit your website satisfied with the user experience.
Why and What to Ask?
We’ve put together several questions (you might not have heard of) that will help you enhance and assess the quality of your websites usability. Not every question may apply to your case, however, these questions are meant to help you to think a bit more from a users perspective.
How Can I Enhance the Usability of My Links?
I was a bit hesitant to start off with this very question, mostly because some believe that links don’t play any part in a websites usability factor. However, from previous testing and links being a definite part of user interaction, we know that we must find ways to make links as clear and concise as possible.
A user must clearly be able to point out a link within a sentence, paragraph, or anywhere else on the site for that matter. Many designers have solved this issue by adding small icons to links through CSS, and adding anchor text. Links that are associated with your websites navigation need to be given even more attention. A sites navigation can make or break the user experience. This is especially true with tweaking your website for maximum accessibility.
What is the Five Second Rule?
When you refer to a websites usability, you’ll sometimes come across the “five second” rule. Even though there may be several versions of the five second rule such as three or two seconds instead of five, the general idea is that a user should be able to digest or have a quick break down of what your website is all about, as well as what you have to offer within the first few seconds of their visit. Anything after that will more than likely result in disinterest and may eventually drive visitors away.
The homepage is key, since it is the first thing users will become acquainted with. What does this have to do with usability? Everything. If your website fails to catch the attention of the targeted user, then there simply will be seldom interest in using your website. The Five Second Test (usability testing tool) goes hand-in-hand with the five second rule.
Are the Titles and Headings Distinctive?
This benefits every site, however, if you run a blog/magazine then this will be one of the most important elements of your websites usability. You should make sure that your titles for sections and posts are easily distinguishable and clear. They must be easy to read, understand, and remember. When you style your headings it’s important that you don’t over-do-it and you take your time in selecting the right type of font. Bad titles and headings can make sure site look convoluted and somewhat distorted.
Is the Content on My Site Displayed in a Consistent Manner?
The information displayed on your website should be structured in such a way that it represents consistency. Content that isn’t structured will make your website look messy and unappealing.
For example, if your blog posts are all aligned to the left, you should make sure that every post is aligned to the left. It wouldn’t make much of any sense to have one post center aligned, the next to the left, and a few to the right. Users will be confused and their eyes will most likely end up hurting after trying to read the mess on your site.
Do Clickable Items Lure Me to Click Them?
Simply said, what’s the point of having an item you want users to click on if it doesn’t even seem clickable? For example, if you have image ads on your website you’d definitely want users to click on them. A simple and straightforward way to do this is to add a property such as a drop shadow to all of your image related ads through your CSS.
CSS-Tricks is a reasonable example of what we’re talking about. Check out the sidebar with the 125×125 ads, see how they interact and the size of the border around them. All of these factors contribute to luring you in to clicking on the ads. In such a way, elements you want users to click on should be undeniably clickable and are expected to contrast the rest of the content one way or another. Make it easy for your users, guide them a bit and you’ll see that they’ll respond much better to anything you “throw” at them.
Is the Entire Site as Functional as It Is Appealing?
What’s the point of having a website that has been aesthetically “perfected” if it isn’t nearly as functional as it looks? Your website should respond well to actions performed by the users. If the site can’t deliver quality functionality, then you’ve more than likely defeated the purpose of usability. True usability is more than just design, it’s function. We’re not inferring that you should place more emphasis on the back-end of your website, however, there should be a balance between the front/back end design. These two will always work together to ultimately create a much better user experience.
Does the Site Load Quickly?
Even though this question is obvious to some, it’s still something that should be included within this article. The speed of which your pages load can drastically contribute to the usability of your website. If your web pages fail to load quickly, then this can put a strain on the time users have to interact with your website. The faster your pages load, the better users are able to interact with your website, resulting in a much more appealing UX.
Remember you can always post your usability related questions on Design Reviver Answers for accurate and informative responses.
The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 2)
This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.
In the first part of the Ultimate Magento Guide, we covered the back-end features of this open source e-commerce software. We also created a simple product and displayed it in our e-store.
Today we will focus on "customizing the basic layout of our e-store", "what Magento Connect is” and "how we can install themes + extensions".
Let's Turn Off The Cache
Before heading to the customization, we will turn off the cache mode of Magento so that we can see our changes. Otherwise, Magento will keep showing the cached pages.
We can turn off the cache from our back-end. Go to System>Cache Management. Choose "disable" from the drop down menu which is an option in "All Cache". Follow the screenshot below if you are having some problem.
After disabling the cache, we will now change the name of our e-store which appears on many places (like after a new user registration). We can change it by going to System> Manage Stores, click the "Default Store View" and put the actual name of the store there just like “WRD E-Store”.
We can now customize our homepage. Let's start with the default logo and default welcome message.
Upload your logo to the mag/skin/frontend/default/default/images/ folder. This is the images folder of the default theme we are using now.
Go to your Magento back-end> System> Configuration> General> Design> Header.
Define the logo image source here and we are done with customizing our logo.
You can now see your front-end showing the new logo. And also, it is possible to change the alternative text of your logo and default welcome message here.
After these updates, our header looks like this:
Now we will move to "changing the homepage layout" in order to show our products there.
In the first part of our guide, I had described the CMS capabilities of Magento. We use these CMS capabilities for changing the look of our front page on WRD E-Store as “HOME”. Consdering "HOME "is also a static page, different snippets can be used to show different arrangements of products.
Showing all products of your e-store on homepage
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}}
Showing only the new products
{{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}
Showing only the products from a specific category
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" category_id="4" template="catalog/product/list.phtml"}}
You can get the "category ID" at "Manage Categories" page under "Catalog". Then click on the specific category and you will get the "ID" in the header just like the following screenshot.
Now go to CMS> Manage Pages and select "homepage". You can add any of the previously mentioned snippets according to your needs. As we have only one product, I have used the 1st snippet. These snippets are actually "content blocks" of Magento.
You can also select the layout of your "homepage" from here. Go to "Custom Design" and choose a layout.
The default Magento theme comes with 5 layout options
- Empty
- No Sidebar
- Two-column layout with left sidebar
- Two-column layout with left sidebar
- Three-column Layout
I have selected 3-column layout and now we have a good-looking e-store.
Callouts
Callouts are the visuals (banners) for self-promotion like announcing special deals, new products, etc.
Now, we will upload new callouts for a small but awesome touch to our e-store as its still showing the default ones.
Customizing callouts:
- Simply replace your image with col_right_callout.jpg (right callout) or col_lef_callout.jpg (left callout) in \skin\frontend\default\default\images\media.
- You can change the alternative text and link for right callout by going to right_col.phtml in \app\design\frontend\default\default\template\callouts.
- You can change the alternate text and link for left callout by going to catalog.xml in \app\design\frontend\default\default\layout.
After changing the callouts, I have following the following output of the e-commerce store.
We are done with the customization of the home page. Now we will take a look on what is Magento Connect.
Magento Connect
Magento Connect is the brand name for the official marketplace of plugins and themes where you can download/buy free and premium themes and extensions.
For example, by default, Magento only supports the most popular shipping methods and payment gateways. You can download extensions to extend its payment capabilities.
How to install an extension?
First off all, select an extension from Magento Connect. You will get an extension key upon agreeing with their terms and conditions. As an example, I'm getting the key of mCommerce-iPhone Optimized Theme.
Copy that key and return back to your back-end. Go to System> Magento Connect > Magento Connect Manager. You will be prompted once again to enter your admin login details. Fill in your credentials, put the extension key and click connect. The same console is used for updating Magento.
How to install a theme?
You can install a new theme by following the same process as written above.
When the installation via Magento Connect is completed, go to System> Configuration> General> Design>Themes, put the name of the theme (for example: Modern Theme), save it and you are done.
After installing a new theme, your home page may not load appropriately because of the different layout options. Just go to CMS> Manage Pages and choose the appropriate column layout and everything will be fixed.
The "Magento Ultimate Guide Series" includes necessary information for beginner and intermediate users. If you are looking for advanced sources and want to design for Magento then I will highly suggest you to read the wiki page.
Saad Bassi
Saad Bassi is a 20 years old web developer from Pakistan who loves to create beautiful websites with great user experience.
He is the co-editor of CrispyTech and 1stWebDesigner, blogs about the next Windows at Windows8Geek and loves to make new friends, so, don't forget to say him a hello on Twitter.
Books On Magento:
This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
Test Drive IE9 With The Preview Release
Microsoft has announced the "Preview Release" of Internet Explorer 9 which seems to be a milestone for the IE family considering it gets closer to the standards.
The IE9 has a new JavaScript engine which performs much better than IE8 & some other browsers.
Another good news is, it supports HTML5, CSS3 & SVG almost completely.
The website includes speed, HTML5 & graphics demos besides the comparisons of the features with other browsers.
This new release requires Windows Vista SP2 or Windows 7 which hopefully changes with the stable release (otherwise, IE may continue to be a barrier on new standards as XP will probably live long).
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
10 Original and Creative Social Media Icon-Sets
There are hundreds and hundreds of social media icon-sets that you can choose to download. Most of the icon-sets are pretty basic and designed to be universally used on an average blog – but what if your blog is different, and in need of some social icons that are not only creative, unique and original but also darn right odd?
Well, that’s what we have for you today, a collection of the most creative and in some ways strange social media icon-sets, which I am sure you will love.
Hand Drawn Social Media Icons
Social Network Icon Set
Free Furry Cushions Social Icons Set
Extreme Grunge Social Icons
108 Free Retro Grunge Stripes Social Media Icons
Grass Textured Social Bookmarking Icon Set
Vintage Postage Stamps Social Media Icon Pack
20 Amazing 3D social icons
Jeans Social Media Icon Pack
Glossy Waxed Wood Social Networking Icons
By Paul Andrew (Speckyboy and speckyboy@twitter).
The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 1)
This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.
In the process of launching an e-store, when it comes to choosing the right solution, you will get puzzled by the hundreds of solutions available.
The options range from simple and free shopping cart systems to complex and paid e-commerce softwares which can charge you for both getting and “keeping” your shop online.
However, there are some applications which offer great features but still free.
One of the best and open source e-commerce solutions available for free is Magento.
In the following comprehensive tutorial, we will see what are the benefits and drawbacks of using Magento as your e-commerce application. We will make a demo store and take a look on some basic and intermediate features of Magento. So what are we waiting for? Let’s get started.
Why use Magento?
Pros:
- free (absolutely free, no charges at all for community version)
- open source (you can even make it better by writing your own code)
- easy upgrades (automatic upgrades without loosing your customizations)
- extensions, plugins (enhance your Magento installation with plugins just like WordPress)
- very comprehensive theming system (custom themes for your store similar to WordPress)
- downloadable goodies support
Cons:
- resource intensive (yes, Magento needs a lot of memory in order to work efficiently but don’t worry, we will also learn how to fix it up to run Magento in low cost hosting solutions.)
- latest version of PHP not supported (Magento only works with PHP 5.2)
Downloading Magento:
You can download Magento from their website. There are two versions available. One is the online installer and 2nd is the complete setup. I will recommend you to download the full package.
Another option on this page is of downloading sample data (it is like sample text to fill your e-shop). As we are going to make an original e-store, we will not download it.
I am using Magento 1.3.2.3 and you can download it by going to release archives on Magento download page. The latest stable release 1.4.1 came out but still has some errors. So I will not recommend you to use it. However, this guide should also work with it.
Installing Magento:
As said earlier, the latest stable release of Magento works only with PHP 5.2 which is installed on most servers and some web servers also come with a one-click install option.
For learning purposes, it is a good practice to install it on localhost using xampp. It is recommended to use xampp 1.7.0/1.7.1 for easy install of Magento as it comes with PHP 5.2. If you are using the latest version of xampp, you will have to manually install PHP 5.2 if you want to run Magento. I will show you how to install Magento on xampp 1.7.0/1.7.1. You can download old versions of xampp from its official source code repository.
After installing xampp, go to your xampp directory. In my case, it is c:\xampp.
The two directories, C:\xampp\php and C:\xampp\apache\bin include php.ini file which is the configuration file for PHP language. We will uncomment the following lines of code to enable some necessary add-ons required by Magento to work properly.
Line 582: ;extension=php_curl.dll Line 622: ;extension=php_mcrypt_filter.dll Line 624: ;extension=php_mhash.dll
You can uncomment the lines mentioned above by simply removing the semi-colon which is the first character for each line of code.
Now, we will have to replace the libmysql.dll contained in xampp 1.7.0/1.7.1 which is buggy and will crash apache server during Magento installation. You can download a better version from here (or it can be found inside the MySQL server downloads from mysql.com). After the download, replace it with the existing libmysql.dll in C:\xampp\php and C:\xampp\apache\bin.
The last step is to change some code lines in Magento’s files to disable some checks. Otherwise we will not be able to login on localhost. Go to your Magento folder (In my case it is C:\xampp\htdocs\magento) then go to app/code/core/Mage/Core/Model/Session/Abstract/Varien.php. Then point to line 78. You will see session cookie parameters. We will comment line 81,82,83 to disable cookies. I am writing down the difference between original and edited file to give you a better understanding.
Original varien.php (Line 78 to Line 84)
$cookieParams = array( 'lifetime' => $cookie->getLifetime(), 'path' => $cookie->getPath(), 'domain' => $cookie->getConfigDomain(), 'secure' => $cookie->isSecure(), 'httponly' => $cookie->getHttponly() );
Edited varien.php (Line 78 to Line 84)
$cookieParams = array( 'lifetime' => $cookie->getLifetime(), 'path' => $cookie->getPath() //'domain' => $cookie->getConfigDomain(), //'secure' => $cookie->isSecure(), //'httponly' => $cookie->getHttponly() );
We are done with all the fixes needed to run Magento on localhost. You have to fix these things only when you are installing it on localhost. On live servers, it doesn't need customizations
Now we will make a MySQL database in phpmyadmin as Magento uses MySQL to store its data.
Here we have created a MySQL database named Magento. So we are done. Let’s point our browser to http://localhost/magento.
Magento Installation Wizard
If you have followed all the steps correctly then you will get the welcome screen of Magento installation wizard.
Step 1:
The first step will show you the terms and conditions to use Magento, simply accept it and press next.
Step 2:
The second step is about localization. You will set default location, time zone and currency for your online shop. We are done here. Let’s move to the next step.
Step 3:
In the 3rd step, you will see a screen asking for the MySQL database. As we created one with the name Magento, we will fill the information with it. The default password for the administrator user “root” in xampp is blank. So you don’t have to put anything here.
You will also be asked for the table prefix in the database. As we are installing Magento on localhost, it is not that important. But when you are going to create a practical store online, always fill this field with something weird and unpredictable like any randomly generated number as it will save you from SQL injection hacking.
Second box on this step asks you the base URL which will be used by your customers to browse the e-store. Moreover, the admin backend link will also be given here. You can also enable mod_rewrite, an Apache module to create custom links for better search engine optimization. Mod_rewrite is offered in most hosting solutions. You can also enable SSL here.
The last option is session storage. If you are on a shared hosting solution, then I will suggest you to choose file system as choosing MySQL database can put a heavy load on your servers. However, using MySQL to store session data is good from a security point of view.
Step 4:
Last step in the Magento installation Wizard is to create the admin user. You will have to put your first, last name, e-mail, username and passwords. Magento will ask you for the encryption key as it encrypts all the data.
In case you want to decrypt it; you will have to give the encryption key. Leave this field empty and Magento will use some random key for this purpose which will be given to you in next step.
Keep this key in safe place as it is very important.
At this point we have successfully installed Magento on our localhost. As a last step, you will be asked whether you want to go to the front or backend.
Front-end: it is the website which will be shown to the user upon access.
Back-end: it is your admin dashboard. Here you will manage your e-store.
Front-end
We will first get familiarized with the front-end and then come back to the back-end. This is how our default/empty store looks like.
For now, we have no products and an empty store so we will head up to the live demo on Magento’s official website.
Let’s start from the header.
On the left side of the header, there is Magento logo which is actually the logo of your online shop. Later on, we will see how to customize it.
On the right side of the header, there is a search bar, a default welcome message after that, and some login/sign up links. You can also change your language here.
Category Bar: Magento uses categories to group same products. Each product should have at least one category. You can also use sub-categories for different products. Each category has its own page which you can customize from the back-end.
There are two sidebars on the demo store. Left sidebar is showing some offers and a popular tag block while right sidebar is showing your cart and the community poll.
The main content area is showing the landing page image and popular products of the store.
There are two other pages worth mentioning.
Category Page: This page shows up when a buyer clicks on a category link. It allows a buyer to sort products by position, name and price. Buyer can also choose the number of the products showing up on each page. Another feature of this page is grid and list view.
Product Page: This page shows up when a user clicks on a product to buy it. It contains short description of the product, a long description, price, and different images of the product just like Amazon.
Magento also has features for comparing products with each other and related products too. Now let’s move to our installation and have a look at the back-end (the admin area).
Back-end
Point your browser to http://locahost/magento/admin to login into the back-end. You will see a login area. Put your login information here which you created in step 2 of Magento installation wizard.
Here is how it looks like.
The following screenshots show you the Magento admin menu. We will explain each item separately and after that, we will create the e-store.
Dashboard: Gives an overview of your sales, orders and everything between them like customers, top products, etc. with the help of dynamic graphs.
The next tab is "sales". Let’s explore it.
Orders: All the orders by your customers are placed here. You can hold or unhold orders from this panel. You can also place new orders. Please keep in mind that it will be a temporary record and you can cancel these orders. At this step, the payment for the specific order is not yet confirmed.
Invoices: Invoice is the receipt of the payment for a specific order. After creating an invoice, the temporary order will be set as a permanent order and you will not be able to cancel it.
Shipments: All the shipped products are placed here.
Credit Memo: Holds the records for refunded payments. For example; if you shipped a product to a customer and the customer demanded the refund after that, the specific record will lie under this tab.
Terms & Conditions: You can apply specific terms and conditions to your e-commerce store here.
Taxes: A very important tab in managing your e-commerce store. You can apply specific taxes with respect to the specific products and locations. A lot can be written on this feature but it will go beyond the scope of this guide.
The next tab in Magento backend is called catalog. Everything related to the products are inside this tab.
Manage Products: You can see all the products of your store. New products can also be created from here.
Manage Categories: Category management can be done under this tab.
Manage Attributes: Create different attributes on specific products. Explanation of attribute is mentioned below
What are Attributes?
An Attribute is a specific property of a product. For example: "resolution" and "color" of a high definition LCD monitor are attributes of that specific product. Products can also be grouped with the help of attributes.
Difference between Categories and Attributes
A very important concept in handling Magento like a pro is to understand the difference between categories and attributes. Categories are the main navigation menu of your e-store. For example: if you are selling computer related accessories, mouse, keyboards, processors can be categories and you can apply attributes like cache, clock speed, bus speed, price and so for the processor category.
URL Rewrite Management: This is an awesome feature in Magento with respect to search engine optimization. You can change any link in your e-store to get a better place in search engines.
Search: This tab allows you to see what keywords were searched by your customers. It also tells you how many times a search has been made.
Tags: You can set tags for each product here. Tags are usually keywords which are good for SEO.
Google Base: An advanced feature. You will have to understand Google base before using this. Here is good explanation of Google Base.
Google Sitemap: You can generate the sitemap of your e-store for submitting it to the Google’s webmaster tools (another great feature when it comes to SEO).
The First Product
Now, we are able to create our first product as you have understood all the basic steps in maintaining Magento. After creating our demo e-store, I will explain you the remaining features. So let’s do it now.
Creating our first product
Each product should sit inside a category. Otherwise, it will not appear on your store. So, we will first create a category named "Mouse".
How to create a category in Magento?
The default store comes with an empty category named "default category". All the categories should be placed as sub-categories to this default category otherwise you will be unable to see them. Following screenshot shows the right method to add a category in Magento.
Let’s take a look at our first category.
You can choose the name + description to be displayed on category pages, the default image for the category and other options. Active option must be set to "yes". You will also be given the option here to set the meta keywords and description for this category which will appear on search engine listings.
When you will save the category, it will not appear under default category. You can do so by drag'n drop functionality.
Creating our first product with Magento
So, we have a category to group products. We are going to add the product now.
You will be asked to select the attribute set and type of the product.
Types of products:
- Single Products can be sold individually. You can also group a single product with other single products using "group products".
- Group Products contain many single products. They can be added to a customer’s cart with a single click. For example you can bundle an Apple magic mouse with a Macbook.
- Configurable products allow customers to change different properties of a product. For example: a customer can increase the ram of a specific processor if it is a configurable product.
- Virtual Products are those products which are not physical. You can add additional warranties to this product.
- Bundled Products are much like grouped products. There is not a big difference. Take a computer for example. You can remove monitor, graphics card and some other accessories from this product.
- Downloadable products are pretty much self explanatory. An example is "premium themes". When a customer purchases such a product, he will be sent an e-mail with the product download link.
We will create a "single product" now.
You will have to mention the name of the product, short description and long description.
Following screenshot gives you the look of "New Product Tab". There are 10 tabs on the left menu. I will explain only those who are necessary to get started.
SKU: is an abbreviation of "Stock Keeping Unit". It’s a general term used in stocking items. What you need to learn is that each product in your store should have a unique SKU. In simplest word, it is an identifier for products.
Weight: weight for the product which can be important in calculating the shipping.
This window will show some additional tabs depending on the "attribute set" selected. The manufacturer and color fields are actually a part of the default attributes set.
Magento has the feature of generating RSS feeds and newsletters which include new products. Moreover, the new products also show up on homepage. In the next two fields, you can choose the period for which a product will be marked as "new".
You can enable or disable a product. If the product is set to be disabled, Magento will not show it on the front-end.
Visibility: allows you to choose the pages on which you want to show the product.
Price: The fields here are pretty self-explanatory. Special price allows you to give the customers discount for some days. Just like a sale on Christmas. This feature is for discounts and promotions.
Next tab is Meta Descriptions which is used for SEO of your store. You can set Meta title, keywords and Meta description here.
4th tab is Images. You can upload product photos here. By default, there are three types of images which Magento uses.
And here they are:
Small: shows up on category page
Thumbnail: shows up in shopping cart and
Base Image: shows up on product page
Lets move to 5th tab.
Design tab allows you to customize the view of the product page. You can choose from different page layouts built in with Magento.
Inventory Tab allows you to set the quantity of number of products available in the store.
Category tab for selecting the category for your product . This is crucial. You will not be able to see your product until you select one category.
At this point you have a fully functional product and you can see your product on category pages. But we will take a look on remaining important tabs on creating a new product page.
Related Products tab allows you to select related products just like Amazon.
Up-Sells: Under this tab, you can select recommended products which the customer should buy instead of the one which we created now. The up-sells products can be of better quality and also expensive.
Cross-Sells: The products you want to show a customer on the shopping cart page before a user checks out can be set here.
Product Reviews: Ratings and product reviews for a specific product can be managed here.
Product Tags: You can set product tags here.
Customers Tagged Products: In Magento, customers can also tag products. They are shown under this tab.
Custom Options: You can add custom options for a product here. Like attributes, you can’t group custom options and each product has its own custom options. You can add text fields, radio buttons and other form fields for custom forms here. This is an advanced feature.
Let’s move to the front-end and see how our e-store looks like.
The home page is showing no products. In other words, Magento is still showing the default e-store layout . We will change it in the next part of this guide. Click on the "Mouse" tab in category menu and we will see the category page as below.
Select the Apple Magic Mouse product which we just created and now you will see the product page.
We’ve created our first product. But there is still so much to cover on Magento. Although we can’t cover all in this guide, I will give you an overview of all the features. So let’s move back to Magento' s back-end.
Customers: You can manage all the customers here. Magento allows shoppers to register for easy shopping. They don’t need to give their shipping addresses again and again. This can be done by shoppers.
However, you can create customers and customer groups to apply different discounts from the back-end. You can also view the online customers on that specific time. Everything about them is managed here.
Promotions: Product sales can be managed here. There are two types of promotions. "Catalog price rules" apply on the whole e-store while "shopping cart price rules" only apply during the checkout process.
Newsletters: Magento has the built in functionality to handle newsletters. You can create newsletter templates here and also see the customers who have signed up to receive them. The full-featured newsletter system allows you to create templates for your newsletters. Then you just have to insert the necessary information and you are done.
Content Management System Capabilities of Magento
Magento also has CMS capabilities. You can create static pages, static blocks and polls here. We will take an in-depth look at these features when we will customize the layout of our store.
Reports: You can get all type of reports here. Magento offers more than 20 types of reports which help you to get every detail of your store.
System: Holds the settings for the administrator account and the general settings of your store.
You can set roles of users, cache management, currency rate, etc. here.
Until now, we have taken an overview of all the backend features. I have tried my best to cover the most important features of Magento.
In the next part of this guide we will move to the front-end and will customize the default layout of Magento. We will see what content blocks are and how we can change the basic features.
Go to: The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 2).
Saad Bassi
Saad Bassi is a 20 years old web developer from Pakistan who loves to create beautiful websites with great user experience.
He is the co-editor of CrispyTech and 1stWebDesigner, blogs about the next Windows at Windows8Geek and loves to make new friends, so, don't forget to say him a hello on Twitter.
Books On Magento:
This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
Free Analytics Tool For PayPal: AnalyzePal
AnalyzePal is a free Adobe-AIR application that provides an easy way to measure your PayPal sales, performance & customer tracking.
It doesn't require any PayPal username-pass or API information as AnalyzePal works in an offline way with the transaction logs that can be downloaded from PayPal.
The application displays a snapshot of your last 3 months activities with charts or you can view the revenue for any given period.
AnalyzePal is also great for browsing past transactions quickly as it works offline.
Besides the free version, it has paid & more-featured versions that can filter data by customers, countries, etc.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
How To Create a Superhero Stephen Fry in Photoshop
In this tutorial, we’re going to paint a cartoon version of the ‘near-iconic’ Stephen Fry. The cartoon is styled in a comic book fashion but however, there’s still some painting to be done and this in the end, will be make the final image quite detailed.
Step 1
Starting off with a sketch of a younger Stephen Fry, I sketched out his prominent features such as his hair, slightly narrowed nose, dreamy eyes and chubby cheeks.
Step 2
Select the Pen Tool (P) and make sure the “paths” is chosen.
Step 3
I dragged the Fry sketch into the the main document window and resized it before tracing the face out in a layer above it. By the way, the document size is 1100 by 1300 and this makes the document window a portrait by orientation.
Step 4
After filling the path with a #f3dec6 colour, name the the layer “face base.”
Step 5
Secondly, make a pen selection for the neck. Note that I didnt select both the face and the neck at the same time in one layer. This was because, I wanted to have a clear outline of the jaw area when I start painting the face.
Step 6
Fill the selection with the same base colour as the face and name the layer “neck.”
Step 7
a Soft Round brush with a #bb856d colour and in between painting, switch its opacity back and forth between 20% to 30%. Name the layer “face shade.” Using the Sketch as reference, trace out the features of the face and neck as shown below. This would be called the “shade” layer.
Step 8
For another layer, “dark shade.” Change the brush colour to #050404 with its opacity reduced to 10%, add more shades to the face and neck. The features here are made more pronounced. Use the Blur Tool (R) to smooth out of the paintings of all the “shades” layers too.
Step 9
Over the “dark shade” layer, create another layer and call it “highlights.” Set brush colour to #fef4f0 and reduce its opacity to about 30%. Paint the around the areas of the forehead, nose, cheeks, necks and ears. The result is a splash of light over the face.We’ll now go on ahead to merge the “face shade” layers down to the “face base” layer by pressing Crtl+E. Also go to Filter>Noise>Add Noise and set the Ratio to give both the merged layers a slight grainy look.
Step 10
For the eyebrows we’ll go to the Brushes Palette and fade the brush with the Fade Size set at 50.
Step 11
Paint the eyebrows.
Step 12
Select the Burn Tool (O), and on the “face” layer (the previously merged layers), burn out the outlines of the face. That is, the wrinkles below the eyes, the outlines of the nose and so on. With a larger brush size, burn the ares of the cheeks, chin, jaw, neck etc. The Range of the brush must be set to Highlights and its exposure reduced to 20%.
Step 13
Now set the Burn Tool’s Range to Midtones (Exposure: 25%) and proceed to burn the same areas highlighted above. With the Burn brush size reduced to 1px to 2px, work on the outlines of the face and neck as well. Now the image is given more solidity.
Step 14
In a new layer, use the Pen Tool to trace out Fry’s hair.
Step 15
Fill the hair with a black colour.
Step 16
Still on the “hair” layer, select the Brush Tool (B) and set its colour to #53524f and paint strips of lines on the hair. Never mind exceeding the boundaries of the hair when painting over it.
Step 17
Now for the interesting part. Select the Smudge Tool (R) and set its Strength to 80% and smear the grey lines over the hair in the form of waves. On the edges of the hair, smudge inwards. It will take your intuition to get the desired look you prefer.
Step 18
Reduce the size of the Smudge brush to 2px and create thin strains of hair. Also select the Dodge Tool (O) with an Exposure of 30% to lighten up certain parts of the hair.
Step 19
Create a new layer, “eyes” and use the Pen Tool trace out the eyes of Fry and fill with a white colour.
Step 20
Use the Burn Tool to darken to the corners of the eyes.
Step 21
Draw two circles with the Ellipse Tool (U) and fill with a dark blue colour.
Have the circles halved by using the Marquee Tool (M).
A.
With the Soft Round Brush’s colour set to #acbaef and paint the insides of the eyes – the pupils to be exact.
B.
Change the brush colour to a white one to add a reflection to the eyes.
Step 22
Create a “lips” layer to draw the lips with the Pen Tool.
Step 23
Fill with a the colour #d16159. This colour would be used as the base and so its by no means a lady’s red lipstick colour.
Step 24
Lighten up the lips with the Dodge Tool and with a white brush, paint the lips concentrating most particularly around the edges.
Step 25
For a dark shade, use a Soft Round brush with colour: #3e0f06 and opacity at 30%.
Step 26
With a little more retouching, use the Burn Tool to make the lines of the face more prominent (the insides of the cheeks as well). The face is now complete.
Step 27
For a muscular physique (something Fry doesn’t possess), use the Pen Tool to trace out his body. You may use the Add Anchor Point Tool to create more anchor points to enable more smoother curves.
Step 28
Still with the Pen Tool, right click and select Stroke Path for a lighter lines (I had the foreground colour as ash colour).
Step 29
The resulting Stroke makes the body outlines faint.
Step 30
We’ll now create a superhero logo with the Ellipse Tool and by pressing Crtl+T, rotate the obilque circle.
Step 31
Fill the circle with a yellow colour: #faf574. Draw another circle of the same size and fill with black.Dont forget to clear the outlines of each shape after its been filled with a colour.
Step 32
In another layer, draw a five rectangles (rotating each rectangle) for a question mark shape. Fill with the same yellow colour as above. Draw another square in a new layer and add a Stroke Layer Style and change its default color to black. I just made this question mark logo for humour.
Step 33
Draw the hands of our ‘hero’ with the Pen Tool and with the colour #f3dec6.
Step 34
Set the Burn Tool’s Range to Midtones and Exposure to 28%. Burn the around the edges of the hands.
Step 35
Switch the Burn Tool’s Range to Highlights. I also shaped knuckles with the Erazer Tool (E) thereby making them more defined. A noise Ratio of about 2.9% was added was added as well.
Step 36
For the superhero costume with a synthetic look, apply a Soft Round brush with a #e7e4e1 colour within the body’s shape. Paint out a arms, abdomen and chest. Along the way, reduce the brush’s opacity to about 30% for a lighter shade within the body.
Step 37
Select the Burn Tool (Range: Highlights and Exposure: 15%) to and apply at the base of the logo. A light blue line (#e1ecf5) was added to the left side of the body for effects.
Step 38
Select the “face” layer and go to Image>Adjustments>Brightness/Contrast and set the Brightness to 16. Do same for the hands. We now have a brighter and smooth looking face.
Step 39
Up in the sky. Its a bird, its a plane, its…just Mr. Fry. The comic book styled version of Stephen Fry’s completed and I had the time, I would have created a more elaborated costume for him with a cape and all.
This is the final image with an added background.
By David Ella Ella