e-Commerce em Rails – Spree em Português

Publicado Setembro 7, 2008
Arquivado em: Ecommerce | Tags: , , ,
* Deixe um comentário

by AkitaOnRails

O Sean acabou anunciando antes da hora :-) Mas tudo bem, vamos lá: tudo começou porque o Gregg lançou o EnvyCasts para vender seus excelentes screencasts. Obviamente ele precisava de algum sistema de e-commerce para isso.

Fazer um e-commerce do zero não se faz do dia para a noite. Daí entra o Spree, um projeto open source que implementa um e-commerce bem simples em Rails, mas que já deve servir para a maioria das pequenas lojas – não, não serve para ser a próxima Amazon :-)

Ele se utiliza da gem ActiveMerchant para se comunicar com os gateways americanos de pagamentos.

É aqui que eu entro: faltava uma aplicação como essa aqui no Brasil. Como ninguém fez, ontem de madrugada resolvi fazer a parte de localização que faltava para português. O resultado você pode ver no site de demonstração e clicar na nossa bandeira. A parte de localização tinha alguns defeitos, faltava separar strings, então eu dei um pequeno tapa em algumas áreas. O Sean já deu merge no projeto principal.

Depois de ter olhado o código já vi várias partes que podem melhorar. Uma das coisas que fiz foi adicionar suporte a localização às extensions. O Spree pode ser extendido via essas extensions, então era importante que ela também fosse localizada. Outra coisa que se ninguém começar eu quero acrescentar é Page Caching, pelo menos às páginas públicas de produtos.

Mas o projeto que quero tentar fazer é criar gateways para pagamentos em instituições financeiras do Brasil. A Locaweb tem suporte a isso e quero ver se consigo integrar. Se conseguir isso vai significar uma pequena loja feita em Rails que é viável para pequenos negócios e ainda extensível via Ruby. Só para garantir que eu não estou reinventando a roda, alguém já tentou fazer gateways desse tipo em ActiveMerchant? Se não, outra pergunta, alguém está a fim de ajudar nessa implementação? Só para terem uma idéia, dêem uma olhada nos exemplos em ASP e PHP que tem na atual Loja de exemplo da Locaweb.

Magento- The open source Ecommerce solution!

Publicado Setembro 7, 2008
Arquivado em: Ecommerce | Tags: , , ,
* Deixe um comentário

Site Management

  • Control multiple websites and stores from one Administration Panel with ability to share as much or as little information as needed
  • Multi-Lingual
  • Support for localization
  • Support for multiple currencies
  • Administration Permission System Roles and Users
  • Web Services API for easy integration between Magento and any third-party application
  • Flexible tax rate management with support for US and International markets
  • Fully 100% customizable design using templates
  • Customer Groups
  • One-Click Upgrades
  • Content Management System for Informational Pages

Mobile Commerce

<!– –>

Marketing Promotions and Tools

  • Flexible Coupons (pricing rules) with ability to restrict to stores, customer groups, time period, products, and categories. For example: Percent Discount | Fixed Amount Discount | Free Shipping | Buy x, get y free. | Buy x, get y with percent or fixed amount discount | Buy x, get free shipping on order | Buy x, get percent discount | Buy x, get fixed amount discount.
  • Catalog Promotional Pricing by percentage or fixed amount with ability to restrict to stores, categories, products
  • Free Shipping Option
  • Multi-Tier Pricing for quantity discounts
  • Bundled Products
  • Customer Group-specific pricing and group-specific tier pricing
  • Landing Page Tool for Campaigns
  • Search Engine Friendly URL’s
  • URL Rewrites
  • Recently Viewed Products
  • Recently Compared Items
  • New Items Promotional Tool
  • Up-sells in Shopping Cart
  • Cross-sells on product pages
  • Send to a Friend for all visitors, or registered users only
  • Send Wishlist to a Friend by Email or RSS
  • RSS Feeds for New Products, New Specials and New Tags
  • Auto-generated Site Map
  • Google Site Map
  • Polls
  • Newsletter Management

<!– –>

International Support

  • Multi-Lingual
  • Support for Multiple Currencies
  • Tax rate support
  • Localization
  • Configurable List of Allowed Countries for:
    • Site Registration
    • Shipping Destination Addresses with ability to specify per shipping method
    • Billing Addresses with ability to specify per payment method

<!– –>

Search Engine Optimization

  • 100% Search Engine Friendly
  • Google Site Map
  • URL Rewrites give full control of URL’s
  • Meta-information for products and categories
  • Auto-generated Site Map for display on site
  • Auto-Generated Popular Search Terms Page

<!– –>

Checkout

  • One-Page Checkout
  • SSL security support for orders on both front-end and back-end
  • Shipping to multiple addresses in one order
  • Checkout without account/Guest Checkout
  • Shopping Cart with tax and shipping estimates
  • Checkout with account to use address book
  • Option to create account at beginning of checkout
  • Accept gift messages per order and per item
  • Saved Shopping Carts with configurable expiration time

<!– –>

Shipping

  • Integrated for real-time shipping rates from:
    • UPS, UPS XML (account rates), FedEx (account rates), USPS and DHL
  • Shipping to multiple addresses in one order
  • On-site order tracking from customer accounts
  • Multiple shipments per order
  • Ability to specify allowed destination countries per method
  • Flat rate shipping per order
  • Flat rate shipping per item
  • Free Shipping
  • Table rates for weight and destination
  • Table rates for product sub-totals and destination
  • Table rates for number of items and destination

<!– –>

Payment

<!– –>

Order Management

  • View, edit, create and fulfill orders from admin panel.
  • Create one or multiple invoices, shipments and credit memos per order to allow for split fulfillment
  • Print invoices and packing slips
  • Call Center (phone) order creation
    • Includes ability to create new customer, or select existing customer and view shopping cart, wishlist, last ordered items, and compared products list, as well as select addresses, give discounts and assign custom prices
  • Create re-orders for customers from administration panel.
  • Email Notifications of Orders
  • RSS feed of New Orders

<!– –>

Customer Service

  • Contact Us form
  • Feature-rich Customer Accounts
  • Order History with Status Updates
  • Order Tracking from Account
  • Forgot Password Email from front-end and administration panel
  • Order and Account Update Emails
  • Customizable Order Emails
  • Create and Edit Orders from the Admin Panel

<!– –>

Customer Accounts

  • Order status and history
  • Re-orders from account
  • Recently ordered items
  • Address Book with unlimited addresses
  • Default Billing and Shipping addresses
  • Wishlist with ability to add comments
  • Email or Send RSS feed of Wishlist
  • Newsletter Subscription management
  • Product Reviews submitted
  • Product Tags submitted
  • Account Dashboard for overview of: recent orders, personal information, newsletter subscription status, primary billing address, primary shipping address, shopping cart, wishlist, recently ordered items, recently reviews and recent tags

<!– –>

Catalog Management

  • Inventory Management with Backordered items, Minimum and Maximum quantities
  • Batch Import and Export of catalog
  • Batch Updates to products in admin panel
  • Simple, Configurable (e.g. size, color, etc.), Bundled and Grouped Products
  • Virtual Products
  • Customer Personalized Products – upload text for embroidery, monogramming, etc.
  • Tax Rates per location, customer group and product type
  • Attribute Sets for quick product creation of different item types
  • Create Store-specific attributes on the fly
  • Media Manager with automatic image resizing and watermarking
  • Advanced Pricing Rules and support for Special Prices (see marketing tools)
  • Search Results rewrites and redirects
  • Approve, Edit and Delete Product Tags
  • Approve, Edit and Delete Product Reviews
  • RSS feed for Low Inventory Alerts

<!– –>

Catalog Browsing

  • Layered / Faceted Navigation for filtering of products
  • Static Block tool to create category landing pages
  • Ability to assign designs on category and product level (unique design per product/category)
  • Configurable search with auto-suggested terms
  • Recently viewed products
  • Product comparisons
  • Recently compared products
  • Cross-sells, Up-sells and Related Items
  • Popular Search Terms Cloud
  • Filter by Product Tags
  • Product Reviews
  • Product listing in grid or list format
  • Breadcrumbs

<!– –>

Product Browsing

  • Multiple Images Per Product
  • Product Image Zoom-in Capability
  • Product Reviews
  • Related Products
  • Stock Availability
  • Multi-Tier Pricing Upsell
  • Product Option Selection
  • Grouped Products View
  • Add to Wishlist
  • Send to a Friend with Email

<!– –>

Analytics and Reporting

  • Integrated with Google Analytics
  • Admin Dashboard for Report Overview
  • Sales Report
  • RSS feed for New Orders
  • Tax Report
  • Abandoned Shopping Cart Report
  • Best Viewed Products Report
  • Best Purchased Products Report
  • Low Stock Report
  • Search Terms Report
  • Product Reviews Report
  • RSS feed for New Reviews
  • Tags Report
  • RSS feed for New Tags
  • Coupon Usage Report
  • Total Sales Invoiced
  • Total Sales Refunded
  • Best Customers Report by Total and Number of Orders

Joomla CMS

Publicado Agosto 8, 2008
Arquivado em: CMS | Tags: , ,
* Deixe um comentário

Usability, Accessibility, Web Standards, SEO and You

Summary

Usability, accessibility and search engine optimization are all phrases used to describe high quality web pages in today’s world wide web. In reality, there is a significant amount of overlap between them and a web page that demonstrates the characteristics of one does so for all three. The easiest way to achieve these three goals is to do so using the framework laid out in the W3C web standards.

What makes a good website?

Your website should have a goal. A measure how how “good” the website is how successful it is in meeting that goal. The goal for an e-commerce site will be very different to a fan portal, but nonetheless, “good” websites share some common characteristics. In order to meet your goal:

  • Viewers have to find your site
  • Viewers have to be able to view it easily
  • Viewers have to be able to find what they want
  • Viewers must think your website is credible

There is significant overlap between these characterstics. The things that make a site easy to find are the same ones that make it viewable, navigable and credible. Let’s take these characterstics one at a time and see what they mean.

Viewers have to find your site

Most people on the web find a website through a search engine. According to Nielsen//NetRatings over 5 billion searches were carried out in October 2005, almost half of these were using Google. Unfortunately “build it and they will come” is not true on the web. A website with no traffic stands little chance of aceiving its goals. Potentially the most effective way to get traffic is through Search Engine Optimization (SEO). SEO is the strategies involved in increasing a website’s search engine ranking (SERP), where it appears in a search engine’s results page.

Viewers have to be able to view your site easily

Many things can get in the way of someone trying to view your site for various reasons. Vewiers with vision impariments, whether blind, color blind, old or simply viewing the site on a PDA/mobile phone need well laid out web sites both in terms of organization (semanitc layout) and graphical (white space/typography). Viewers on dial-up or older computers might need sites that use little graphics or Flash. Many users for various reasons will browse your site with JavaScript turned off. All of these groups need a website that is accessible to them, and these viewers, according to some studies, can account for up to 30% of the population on the internet.

Viewers have to be able to find what they want

If a viewer can’t find what they are looking for on your website easily, chances are they will leave and go elsewhere. Your website has to be useable. Studies vary in what they say about how long someone will take to figure out your website, but the figure quoted most often is about 8 seconds. More than 83% of Internet users are likely to leave a website if they feel they can’t find what they’re looking for (source: Arthur Andersen), and 58% of visitors who experience usability problems don’t come back (source: Forrester Research).

Viewers must think your website is credible

Once they have found your site, and figured out how to use it, they need to stay on it. “When a site lacks credibility, users are unlikely to remain on the site for long. They wonít buy things, they wonít register, and they wonít return” (Stanford-Makovsky 2002).

What makes a site credible? In the same study Stanford/Makovsky found that the “Design Look” or the site’s overall design or look accounted for 46% of a site’s credibility. This included layout, typography, white space, images, color schemes, and so on. This was followed by “Information Design/Structure” (28%) or poorly the information fit together, as well as how hard it was to navigate the site to find things of interest.

Many of the factors involved in being credible are the same for being accessible and usable.

SEO, Accessibility, Usability and Web Standards

So another way of looking at what makes a good website is to describe it in new terms. A good website is:

  • Search engine optimized
  • Accessible
  • Usable

Many of the factors that make a site better at one of these also improve it in another, there is lots of overlap between them. For example, a site that is (x)html semantically structured (the xhtml explains the document, not how it looks) will be easily read in a screen reader by someone who has poor vision. It will also be easily read by a search engine spider. Google is effectively blind in how it reads your website.

Another way of thinking about this is graphically.

A good web site will have lots of overlap. Here we have introduced the idea of a framework of W3C valid code. A site that is validates to the World Wide Web Consortium’s (W3C) web standards has a much better foundation for making it accessible, usable and search engine optimized. Think of these as building codes for your house. A website built with them is stronger and safer. You can check your pages with the W3C’s HTML validation service. for free. At its simplest, a site that meets W3C validation uses semantic (x)thml and separates content from presentation using CSS.

SEO

About half of searches on the web are done with Google. What does it take to get a good SERP with this search engine? Patent #20050071741 or “Information Retrieval Based on Historical Data” (Google) describes over 118 factors that effect a web site’s position in search engine’s rankings.

Some of the more important on-site factors are:

  • Keywords in title tag, h1/h2 etc tags, alt text, URL and site links
  • High keyword density in body, (content separated from presentation) preferably near beginning
  • Small Pages <30k
  • Themed pages
  • Efficient internal link structure

The negative on-page factors include:

  • Text presented in graphics
  • Excessive JavaScript
  • Excessive Flash

A well organized usable page that is designed to be accessible will have a better chance of acheiving high SERP. You can find more details about SEO at www.compassdesigns.net/articles/webmarketing/seo-guide.html

Accessibility

Web accessibility is about making your website accessible to all Internet users regardless of what browsing technology they’re using. Often accessibility is used in the context of blind users, but it is much more. It includes other vision-impaired users such as color blindless or the elderly, those using older browsers, users on mobiles phones or PDA’s, or simply someone on a slow internet conenction.

An accessible web site will:

  • Provide meaningful information in the title, h1/h2 and image alt tags
  • Have the most useful information near the top
  • Have pages that load fast
  • Have meaningful link text
  • Gives user control over pages, e.g. resizing text
  • Include a text-based sitemap

Factors that make a page less accessible are:

  • Text presented as graphics
  • No alternative to JavaScript, particualry for navigation
  • No alternative to Flash content

A page designed to be accessible will also be highly usable and include many of the factors for SEO.

Usability

Classically usability is defined as “a quality attribute that assesses how easy user interfaces are to use”. Steve Krug of “Don’t make me think” uses the example from his wife, “if I have to think more I just don’t use it as much”.

Another quote illustrates the importance of usabilty, albeit from a commercial perspective:

“Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that’s not even a square foot in size……. Corporate homepages are the most valuable real estate in the world. Space on a big company’s homepage is worth about 1,300 times as much as land in the business districts of Tokyo.”
(Source: Jakob Nielsen on Usability and Web Design)

Usable pages:

  • Employ scannable text and meaningful sub-headings
  • Use meaningful graphics, not just pictures of models.
  • Have small graphics whenever possible to reduce download time.
  • Avoid using graphics as links or content
  • Have a well-organized site
  • Use text-based navigation

To describe negative factors of usability, here are some of Jakob Nielson’s Top Web Design Mistakes :

  • Frozen font sizes and low contrast between text and background.
  • Non-standard JavaScript links
  • Flash navigation.
  • Browser Incompatibility
  • Frozen layouts with fixed page widths
  • Page titles with low search engine visibility

An analysis of web design award winners came to the conclusion that “if your goal is to win Web Awards, then it seems that you should design an aesthetically good looking Web site at the expense of usability. The Web site will look good, but will be slow and difficult to use for some viewers. But if your goal is to sell products or services, then we should look at the Web sites that succeed in this goal. Amazon is the leader when it comes to selling products, Yahoo is the most popular search directory, AOL has millions of users, and Microsoft, the most successful software company today. What do their Web sites have in common? As we have seen, they all focus on usability. The all have fast and easy to use Web sites.”

W3C Web Standards

You may have seen words such as “web standards” or “CSS“, but what exactly are they? “These technologies, which we call ìweb standards,î are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web” (source: webstandards.org/about/).

To help you understand where web standards came from, some history is helpful. Many web pages are actually designed for older browsers. Why? Browsers have continually evolved since the www started. New ones have appeared and old ones have disappeared (remember Netscape?). Another complicating factor is that different browser makers (like Microsoft) tend to have their browsers interpret html/xhtml in slightly different ways. This has lead to web designers having to design their websites to support older browsers rather than new ones. It’s often decided that the web page needs to appear properly to these “legacy” browsers.

Web standards put into place a common set of “rules” for all web browsers to use to show a web page. The main organization pushing these standards is the World Wide Web Consortium (WC3), whose Director, Tim Berners-Lee has the distinction of actually inventing the world wide web in 1989.

Ask five designers what web standards are and you will get five answers. But most agree that they are based on the following:

  • Valid code, whether html or xhtml (or others)
    Earlier we used an example of building codes for construction. The standards outlined for the code that makes a web page have been developed to acheive consistancy. It’s easy to check your code at validator.w3.org. Make sure you use the correct DOCTYPE when you try and validate your code. This article at Compass Design described valid Joomla doctype.
  • Semantically Correct Code
    We mentioned before that being semantic means that the (x)html in the web page describes only content, not presentation. In particular this means structured organization of h1/h2 etc tags and only using tables for tablular data, not to layout a web page.
  • Cascading Style Sheets (CSS)
    Closely related to having semantic code, is using cascading style sheets to control the look and layout of your web page. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. (Source: www.w3.org/Style/CSS/). They exist parallel to the (x)html code and so let you completely separate content (semantic code) from presentation (CSS). The best example of this is CSS Zen Garden, a site where the same semantic xhtml is shaped in different and unique ways with different CSS. The result is pages that look very different but have the same core content.

Summary

The following table shows how these factors are related:

Comparison of Design Factors
SEO
Accessibility
Usability
Positive
  • Keywords in URL, title tag, h1/h2 etc tags, alt text and site links
  • High keyword density in body, (content separated from presentation) preferably near beginning
  • Small Pages <30k
  • Themed pages
  • Efficient internal link structure
  • Provide meaningful information in the title, h1/h2 and image alt tags
  • Have the most useful information near the top
  • Have pages that load fast
  • Have meaningful link text
  • Gives user control over pages, e.g. resizing text
  • Include a text-based sitemap
  • Employ scannable text and meaningful sub-headings
  • Use meaningful graphics, not just pictures of models.
  • Have small graphics whenever possible to reduce download time.
  • Avoid using graphics as links or content
  • Have a well-organized site
  • Use text-based navigation
Negative
  • Text presented in graphics
  • Excessive JavaScript
  • Excessive Flash
  • Text presented as graphics
  • No alternative to JavaScript, particualry for navigation
  • No alternative to Flash content
  • Frozen font sizes and low contrast between text and background.
  • Non-standard JavaScript links
  • Flash navigation.
  • Browser Incompatibility
  • Frozen layouts with fixed page widths
  • Page titles with low search engine visibility

We can see that is significant overlap. Clearly to have a site that is both search engine optimized, accessible and usable you need to make sure that you have:

  • good semantic markup
  • small page sizes
  • efficient and meaningful link structure
  • meaningful graphics and no graphics as text
  • small amount of Javascript or flash

The most effective way to acheive these is to design web pages to current W3C standards. Using CSS in particular to separate content for presentation is highly effective in meeting these goals.

What does this mean for a Joomla Website?

Looking at the above criteria, all of these factors are currently controlled by the template designer, not the core of the Joomla CMS itself. The designer can create a template that incorperates good semantics, or small pages sizes. Currently the Joomla CMS does have issues where it outputs content in tables and is not using useful semantic headers (though this will be fixed in an upcoming release). However, advanced template designers are able to overcome this drawbacks and produce a template that results in a site that is accessible, usable and search engine optimized.