Usabilidade Aplicada no Campo de Busca

Um bom motivo para o cliente preferir uma loja virtual à uma loja física é o tempo gasto no processo de compra, o qual é indiscutivelmente reduzido no mundo da internet, onde segundos podem defnir a realização de uma compra ou não. É neste momento que um bom campo de busca pode fazer toda a diferença, otimizando o tempo gasto pelo cliente para encontrar seu produto.
Cerca de 1/3 dos clientes utilizam a funcionalidade do campo de busca para tentar encontrar um produto. Esta é mais uma evidência de que este é um elemento de grande importância no funcionamento de uma loja virtual, pois possibilita ao cliente fazer uma busca restrita a um produto específico que atenda suas necessidades.
Os resultados que poderão ser alcançados com um campo de busca bem desenvolvido vão desde uma maior satisfação do cliente até o aumento nas vendas.
Segue uma pequena lista de dicas que poderão ajudar na criação do elemento. Lembrando que são apenas dicas, que sempre deverão ser analisadas em relação ao conceito e estilo de cada projeto.

  • O local mais indicado para o campo  de busca é no topo da página, posicionado no centro ou lateral esquerda da página, por ser este o local mais popular na web.
  • Deverá estar disponível em todas as páginas da loja virtual.
  • O uso de ícones que remetam à pesquisa dão destaque ao elemento, sendo mais rápida a assimilação do usuário.
  • O contraste  de cores em relação ao background deve ser elevado, podendo ser idealizado no contorno do elemento e/ou no fundo do campo de texto, podendo ser utilizado itens como uma sombra, por exemplo.
  • Deve conter um título auxiliar no campo de texto que demonstre ao cliente qual ação deverá ser tomada, como por exemplo “O que você procura?” ou “Digite o que procura…”.
  • O tamanho deverá ser o suficiente para conter todos os caracteres existentes nos principais termos de busca, evitando a rolagem e o desaparecimento de palavras. Um número aconselhado, de acordo com heurísticas de usabilidade, é de 30 caracteres.

Seguindo estas dicas, sua loja virtual terá um campo de busca fácil de encontrar e com boa usabilidade.

Nenhum comentário

Compilar o PHP 5 no Debian 6 para Magento

Este tutorial ensina como instalar a linguagem de programação PHP (versão 5) diretamente dos fontes. Este tipo de instalação aumenta consideravelmente o desempenho das aplicações, afinal podem ser instalados apenas funções e módulos necessários para sua aplicação.

No caso deste tutorial, o PHP 5 será compilado visando atender os requisitos da plataforma de e-commerce Magento (http://www.magentocommerce.com/system-requirements).

Consideramos que você já tenha instalado em seu servidor, o Apache 2.2 e um compilador.

1- Antes de iniciar a compilação, é necessário instalar as bibliotecas essenciais – faça os todos os comandos como usuário “root”:

# aptitude install libtidy-dev curl libcurl4-openssl-dev libcurl3 libcurl3-gnutls zlib1g zlib1g-dev libxslt1-dev libzip-dev libzip1 libxml2 libsnmp-base libsnmp15 libxml2-dev libsnmp-dev libjpeg62 libjpeg62-dev libpng12-0 libpng12-dev zlib1g zlib1g-dev libfreetype6 libfreetype6-dev libbz2-dev libmcrypt-dev libxmp-dev libmcrypt4 libltdl-dev

2- Agora acesse o site oficial (http://www.php.net/downloads.php#v5) para baixar o código fonte, trabalharemos com a versão 5.3.23 (trabalhar com versões muito recentes podem acarretar problemas).

Após feito o download, acesse o diretório onde você baixou o pacote e descompacte os fontes (suponhamos que seja o diretório Downloads):

# cd ~/Downloads
# tar -xzf php-5.3.23.tar.gz

 

3- Um novo diretório foi criado, onde agora será compilada a linguagem:

#cd php-5.3.23/

 

4- Vamos iniciar a compilação:

# ./configure
--prefix=/usr/local/php-5.3.10 \
--with-config-file-path=/usr/local/php-5.3.10/etc \
--with-apxs2=/usr/bin/apxs2 \
--with-config-file-scan-dir=/usr/local/php-5.3.10/etc/php.ini.d \
--with-regex=php \
--enable-calendar \
--enable-sysvsem \
--enable-sysvshm \
--enable-sysvmsg \
--enable-bcmath \
--with-bz2 \
--enable-ctype \
--with-iconv \
--enable-exif \
--enable-ftp \
--with-gettext \
--enable-mbstring \
--with-pcre-regex \
--enable-shmop \
--enable-sockets \
--enable-wddx \
--with-libxml-dir=/usr \
--with-zlib \
--with-openssl \
--enable-soap \
--enable-zip \
--with-mhash=yes \
--with-mysql \
--with-mysqli \
--with-pdo-mysql \
--with-pear \
--with-jpeg-dir=/usr/lib64 \
--with-png-dir=/usr/lib64 \
--with-curl \
--with-mcrypt \
--with-gd

 

# make
# make install

Se não existir o comando make, basta instalá-lo

# apt-get install make

 

5- Com o PHP instalado, agora devemos integrá-lo ao Apache, acesse o diretório de módulos disponíveis do Apache 2.2:

# cd /etc/apache2/mods-available

 

6- Crie um arquivo com nome php5.load

# nano php5.load

 

e adicione o conteúdo abaixo:

LoadModule php5_module /usr/lib/apache2/modules/libphp5.so

 

7- Crie um arquivo com nome php5.conf

# nano php5.conf

e adicione o conteúdo abaixo:

AddType application/x-httpd-php .php .phtml .php3

AddType application/x-httpd-php-source .phps

 

8- E por fim habilite os módulos e reinicie o Apache:


# a2enmod php5

# /etc/init.d/apache2 restart

9- Para testar e ver os módulos do php instalados, crie um arquivo na raiz do seu servidor (geralmente /var/www):


# nano /var/www/teste.php

E insira:


<?php

phpinfo();

?>

Abra o navegador a acesse (http://127.0.0.1/teste.php) ou o ip do seu servidor.

Nenhum comentário

Testes Baseados em Risco no Magento, utilizando Google Test Analytics

Podemos utilizar uma ótima ferramenta para análise de riscos em nossa loja virtual. Desenvolvida pelos engenheiros do Google, é muito utilizada por suas equipes de desenvolvimento e testes. Uma ferramenta de interface simples mas com um conceito bem interessante, o Google Test Analytics usa uma abordagem baseada em riscos que mescla os Atributos, Componentes e Capacidades do software sob testes para derivar casos de teste e testes exploratórios. Em alguns casos, outros elementos podem ser usados para identificar os componentes ou atributos mais complexos, como por exemplo bugs.

Identificando Atributos Desejados

O objetivo é identificar os atributos desejáveis, no caso de uma loja Magento, precisamos que seja Interoperável, que funcione em diversos browsers e sistemas, Seguro, não deve expor os dados de
usuários e da plataforma, etc.

Identificando Componentes do Sistema

O segundo passo é identificar os componentes ou objetos de teste (o que será testado). O objetivo é mapear os principais elementos testáveis da loja, módulos, páginas, operações, etc.
No magento podemos incluir todas as partes importantes de funcionamento de uma loja, Checkout, Carrinho, Home, Minha conta, etc.

 

Estabelecendo as capacidades

As capacidades são as relações entre os componentes e os atributos, por exemplo:
Utilizando om componente Checkout e o atributo Interoperável, podemos definir a capacidade Deve funcionar no I.E9+.
E na inclusão da capacidade podemos definir com que frequência pode ocorrer esta falha, e qual o impacto que esta falha causaria.

 

Definição de Risco

Com a análise dos dados informados o Test Analytics fornece uma matriz, mostrando quais as capacidades mais “frágeis”. Com isso pode ser pensado em testes mais aprimorados para cada tipo de componente e atributo.

 

Mais:
Para ver o exemplo de teste da Loja Magento:
https://test-analytics.appspot.com/#/2779002/project-details

Para entender melhor a ferramenta e o conceito:
http://code.google.com/p/test-analytics/wiki/AccExplained
Referência:
http://www.bugbang.com.br/testes-baseados-em-riscos-com-google-test-analytics/

 

Nenhum comentário

Gateways de Pagamento

Gateways de pagamento - Magento

 O gateway de pagamento é uma aplicação instalada em um servidor remoto a fins de transmissão de dados entre bancos de clientes e comerciantes para pagamentos de transações online. Estes pagamentos podem ser feitos por diversos meios, sendo eles cartões de crédito, débito/transferência online, boleto bancário e etc, sem intermediação financeira (como PagSeguro, PayPal, MercadoPago, etc).

Alguns dos principais gateways de pagamentos são MundipaggBraspag, IPagare, CobreBem, BoldCron (grupo UOL), CobreDireto (grupo UOL), SuperPay, Locaweb,  entre outros.

Seu objetivo é facilitar as transferências de informações e dados e, também, proteger através de criptografia garantindo a segurança entre o tráfego de informações entre o cliente e o comerciante, e entre o comerciante e a instituição financeira responsável pelo processamento do pagamento.

As informações enviadas pelo cliente são recolhidas na loja online e a transação é criptografada. Então, as informações são submetidas para o gateway de pagamento. O gateway recebe essa informação criptografada e passa-a com o processador do banco do comerciante. Este processador apresentará as informações à controladora de bandeiras de cartões, que fará a operação e verificação das informações e dos fundos com o banco do cliente.

O saldo em conta corrente ou limite de cartão de crédito são consultados pelos bancos e operadoras de cartões, que ao validarem as informações de acordo com os dados recebidos através do gateway, retornam com a resposta autorizando ou não a transação. Caso seja autorizada, o gateway de pagamento envia os dados ao sistema de E-commerce responsável e direciona a autorização para a entrega do produto ou prestação do serviço.

Para finalizar a transação, o banco emissor do cartão envia os fundos para o processador do cartão, passando-os para depósito na conta bancária do comerciante.

Essas etapas garantem a proteção aos comerciantes contra cartões roubados, falsificados ou sem fundos suficientes e, ao mesmo tempo, garantem a proteção ao cliente com as criptografias das informações sensíveis, assim como números do cartão, códigos de verificação e informações pessoais.

Por mais que seja um procedimento complexo e regulamentado, normalmente sua conclusão ocorre em cerca de 2 a 3 segundos.

Um grande número de companhias oferecem serviços de gateway e as taxas podem variar dependendo das políticas da empresa e os tipos de serviços que oferecem. Geralmente, os planos de contratação são baseados em pequenas taxas fixas por transação, cobradas de forma pré-paga ou pós-paga com mensalidade, e ainda, eventualmente, é cobrada uma taxa de ativação.

Antes de contratar um sistema de pagamentos, é necessário avaliar os serviços oferecidos por cada empresa e, só então, adquirir o que mais se adequa às suas necessidades.

Nenhum comentário

Instanciando blocos em qualquer lugar do Magento

Os blocos são uma maneira pela qual Magento distingue a matriz de funcionalidades no sistema e cria uma forma modular para controlá-lo a partir de ponto de vista visual e funcional. Contudo não são em todas as páginas, ou em todos os blocos que podem ser inseridos novos blocos somente pelo arquivo de layout.xml .

Existem blocos do tipo “core/text_list” (ou que extendem essa classe) como o “content”, “left” e o “right”, quando estes blocos são renderizados, todos os seus blocos filhos são renderizados ​​automaticamente, sem a necessidade de chamar o método getChildHtml() nos arquivos de template.phtml. Estes blocos permitem facilmente que sejam instanciados novos blocos através de um arquivo de atualização de layout do seu módulo, sem ter que modificar nenhum arquivo de template.phtml do Magento.

Porém existem blocos de outros tipos que só permitem outros blocos dentro, com a chamada do método getChildHtml() nos seus arquivos .phtml. Este post tem por objetivo mostrar uma maneira modular para instanciar blocos dentro de blocos que não sejam “core/text_list” sem precisar alterar nenhum arquivo .phtml do Magento.

Então vamos aos códigos:

Neste exemplo irei instanciar um bloco na pagina do carrinho, segue o arquivo de layout .xml: 

 <?xml version="1.0" encoding="UTF-8"?>
 <layout version="0.1.0">
 <checkout_cart_index>
     <reference name="checkout.cart.coupon">
         <block type="fxplabs_teste/checkout_cart" name="checkout.cart.fxplabs-teste-block" as="fxplabs_teste_block" template="fxplabs_teste/template-teste.phtml" />
     </reference>
 </checkout_cart_index>
 </layout>

No seu config.xml declare um observer como a seguir:

 <config>
     <modules>
         <Fxplabs_Teste>
             <version>0.0.1</version>
         </Fxplabs_Teste>
     </modules>
     <global>
     <models>
         <fxplabs_teste>
             <class>Fxplabs_Teste_Model</class>
         </fxplabs_teste>
     </models
     <events>
         <core_block_abstract_to_html_after>
         <observers>
             <fxplabs_teste_model_observer_block_output>
                 <type>singleton</type>
                 <class>fxplabs_teste/observer_block_output</class>
                 <method>afterOutput</method>
             </fxplabs_teste_model_observer_block_output>
          </observers>
       </core_block_abstract_to_html_after>
     </events>
   </global>
 </config>
 

Dentro do observer:

class Fxplabs_Teste_Model_Observer_Block_Output extends Varien_Object {
    public function afterOutput($obj) {
     $block = $obj->getEvent()->getBlock();
     $transport = $obj->getEvent()->getTransport();
     // importante fazer essa verificação porque não funciona nas versões do Magento <= 1.3
     if(empty($transport)) {
         return $this;
     }
     $this->appendBlock($block, $transport);
     return $this;
 }
  public function appendBlock($block, $transport) {
     if ($block->getBlockAlias() == 'coupon' && $block->getChild('fxplabs_teste_block')) {
         $orignal_html = $transport->getHtml();
         $st_html = $block->getChildHtml('fxplabs_teste_block');
         $new_html = $st_html.$orignal_html;
         $transport->setHtml($new_html);
     }
     return $this;
 }
 }

Segue o resultado:

Instanciando bloco

 

Nenhum comentário

Criando campo select personalizado na área do administrador.

Para que um campo de seleção estilo dropdown personalizado possa ser criado, é necessário adicionar trechos de código em diversos arquivos do módulo, tais como System.xml e a pasta Model.
A função do arquivo System.xml é a de declarar campos de configuração na área do administrador, sendo assim, segue um breve tutorial de como criar os campos select e multi-select.
A primeira instância deve ser a criação de uma estrutura de pastas apropriada, considerando que sua pasta de módulo esteja na forma: app/code/community/Empresa/Nomedomodulo. A estrutura deve ficar assim:

 

Agora, dentro da pasta Dropdown crie um arquivo Sample.php, abra este arquivo para edição, ele deve ficar desta forma:

 

 

 O nome da classe deve ser o caminho do arquivo mais o nome do arquivo php (B), dentro da função “toOptionArray()” são criadas as opções para seleção e a elas atribuido o seu valor (value) e sua etiqueta (label), no campo value consta o valor atribuido a devida opção, já no campo label se encontra o nome da opção que o usuário verá (A). No exemplo o nome da opção será Sample 01, e seu valor será 1.
Terminada esta etapa devemos ir até app/code/community/Nomedaempresa/Nomedomodulo/etc e abrir nosso arquivo system.xml, onde iremos inserir entre as tags source_model o nome da classe anteriormente criada em Sample.php, vide código abaixo:

<sample translate="label">
<label>sample</label>
<frontend_type>select</frontend_type>
<source_model>Empresa_Nomedomodulo_Model_System_Config_Source_Dropdown_Sample</source_model>
<sort_order>1</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
</sample>
Agora basta salvar seu arquivo e tudo deve estar funcionando corretamente.
Lembrando que este exemplo serve apenas para a opção select e multi-select

 

Nenhum comentário

Atributos de um Produto Magento

        Um atributo representa uma característica ou propriedade de um produto, tal como o seu nome, imagem, SKU, fabricante, cor, tamanho e assim por diante. É um dos conceitos mais poderosos do Magento e fornece uma capacidade quase ilimitada de controlar os produtos. Os atributos são cruciais para tornar a loja de fácil utilização para os clientes e são atribuídos por você para os produtos de sua escolha, a fim de permitir que os seus clientes e as ferramentas de busca encontre-os mais facilmente.

        O Magento lhe permite escolher entre dois tipos de atributos: Atributos de Sistema e Atributos Simples. Com Atributos de Sistema (nome e preço, por exemplo), pode-se adicionar atributos para cada produto e exige que você atribua um valor para cada um deles obrigatoriamente. Já os Atributos Simples (cor e tamanho, por exemplo) são atributos opcionais e são criados pelo proprietário da loja.

        Além disso, permite que você organize atributos em conjuntos de atributos. Dessa forma, você pode ter diferentes conjuntos de atributos para diferentes tipos de produtos. Na verdade, o Magento exige que você defina um conjunto de atributos antes que você possa aplicar os atributos à seus produtos.

        Certifique-se de dar à esta parte do processo de configuração da loja um planejamento cuidadoso. Deve-se ter certeza de que para cada tipo de produto, incluirá todos os atributos que um cliente pode estar interessado. Lembre-se que se os clientes não conseguirem encontrar facilmente os produtos que desejam em sua loja, eles podem ir comprar em outro lugar. É melhor ter muitos atributos do que poucos, pois se acabar tendo que adicionar atributos mais tarde, será necessário atribuir valores para esses atributos à cada um de seus produtos.

        O proprietário de uma loja pode adicionar tantos atributos adicionais quanto desejar. Estes podem ser agrupadas em conjuntos de atributos, então os produtos semelhantes podem ser criados com os mesmos atributos. Se você vender TVs, sapatos, livros e ferramentas, você poderia criar quatro conjuntos de atributos: um específico para TVs, um para sapatos, um para os livros e um para ferramentas. Quando for adicionar novos produtos de ferramentas para o seu catálogo, basta selecionar o conjunto de atributos “ferramentas” que os campos apropriados serão adicionados para o respectivo produto.

        Por exemplo, vamos supor que sua loja venda aparelhos de som. Quando você cria um produto no Magento, você tem que especificar o preço, o título e a descrição, como apresentado abaixo:

        Você sabe que os clientes tomam importantes decisões de compra baseado no fabricante do aparelho. Com os atributos, você pode adicionar o fabricante para seu produto. Após fazer isso, você verá na página de criação do produto o novo campo:

        Observe que o fabricante(Manufacturer) foi adicionado.

       Configurar os atributos é de grande importância para sua loja, facilitando para o cliente comparar, filtrar, encontrar, enfim,  decidir qual produto comprar. Por isso, planeje bem e gerencie-os com inteligência para um melhor resultado!

Nenhum comentário

Tradução Magento

Olá Magento Guys,

Neste post vou disponibilizar o download da tradução Magento.

Trata-se da tradução Magento para o português brasileiro (pt_BR) feita pelo Mario Sam.

Para fazer o download da tradução Magento clique aqui

Estamos todos os dias ajudando a comunidade Magento. Se você gostaria de ver algum material aqui no blog, fique a vontade para sugerir!!

Até a próxima.

Comentários (6)

Templates para Magento

Um dos pontos fortes de um negócio online é o seu visual, que lhe permitirá ou não captar a atenção de um visitante, aumentando a probabilidade de este efetuar uma compra na sua loja. Para que não perca nenhum visitante e tenha uma boa taxa de conversão sua loja deve conter um template único com um design moderno, bem estruturado, e de fácil navigabilidade.

Um tema ou template é uma combinação de arquivos que criam uma experiencia visual para sua loja, no Magento esses arquivos são separados em duas pastas, primeira pasta é a /app/design/frontend, que contém os arquivos referentes ao esqueleto do tema, ou seja, as peças que constituirão a estrutura da página. No outro lado, na segunda pasta, em /skin/frontend, fica o acabamento da página, representado pelas imagens, estilos CSS e javascripts.

Uma breve explicação sobre os arquivos do tema:

Layout: são arquivos XML que definem a estrutura do bloco em paginas diferentes, assim como controle de META informações e encoding das paginas.

Templates: são arquivos PHTML que contem tags (X)HTML e tags em PHP necessárias para criar a lógica para apresentação visual.

Locale: são arquivos de texto simples organizados por linguagem que contem as traduções de textos utilizados no template.

Skins: são arquivos específicos em Javascript, Css e imagens específicas para um bloco que complementam seu (X)HTML.

Separamos 10 templates gratuitos para Magento disponíveis para download, um tutorial de como instalar o template pode ser encontrado aqui.

Continue lendo “Templates para Magento” »

Comentários (2)

O que é Magento?

O Magento é a plataforma de E-Commerce que mais cresce no mundo. Isso se deve ao fato de ser totalmente flexível, sendo possível adaptá-lo para qualquer tipo de negócio. O fato de ser open source também é um dos grandes fatores para a sua popularização. Desenvolvedores de todo o mundo desenvolvem funcionalidades (extensions ou módulos) e incrementam ainda mais esta plataforma sensacional.

Algumas características da plataforma:
- Painel com gerenciamento completo da loja;
- Cadastro de produtos e clientes;
- Ferramentas de marketing e promoções;
- Diversos relatórios;
- Otimizado para SEO;
- Compatível com dispositivos móveis;

Continue lendo “O que é Magento?” »

Nenhum comentário
Warning: include(../inc_footer.php): failed to open stream: No such file or directory in /var/www/html/fxplabs.com.br/blog/wp-content/themes/fxpblog/footer.php on line 2 Warning: include(../inc_footer.php): failed to open stream: No such file or directory in /var/www/html/fxplabs.com.br/blog/wp-content/themes/fxpblog/footer.php on line 2 Warning: include(): Failed opening '../inc_footer.php' for inclusion (include_path='.:/usr/share/pear:/usr/share/php') in /var/www/html/fxplabs.com.br/blog/wp-content/themes/fxpblog/footer.php on line 2