Desenvolvimento de Website e catálogo virtual utilizando WordPress, HTML5, CSS3 e jQuery

Criação de portal e blog utilizando WordPress, HTML5, CSS3 e jQuery.

O WordPress deixou de ser voltado para blogs há muito tempo, hoje podemos fazer praticamente tudo com ele, inclusive a criação de lojas virtuais. E é sobre este assunto que vou falar neste artigo. Vou mostrar o quanto é fácil criar sua loja virtual utilizando o plugin WP e-Commerce.

Para quem está iniciando no e-commerce, antes de começar é muito importante um planejamento completo da loja, onde um dos fatores principais é a plataforma tecnológica. Este será o assunto deste tutorial.

O plugin permite a integração com varias formas de pagamentos e através do próprio painel do WordPress você tem controle das vendas que foram efetuadas, giro mensal e dados do comprador.

Vamos à instalação do plugin WP e-Commerce que está disponível para download gratuitamente.

OBS: Esse artigo foi escrito com base na versão 3.8.4 do plugin. As versões anteriores são um pouco diferentes.

Feito o download é só seguir o procedimento normal de instalação de plugin. Após ativar o plugin no painel iremos perceber que foi criado um menu chamado Produtos com todas as opções do plugin.

Incluindo um Produto no WP ecommerce

Adicionar Novo Produto

A inclusão de produtos vai funcionar de forma bem parecida com a de um post, porém precisaremos preencher alguns campos a mais. Como as variações do produto logo abaixo da caixa de conteúdo.

Nessa nova versão do plugin é possível colocar uma url de um produto que está sendo vendido em outro site, basta colocar o link na caixa “Link de Produto Externo” e quando clicar em comprar será direcionado para o site que está o produto.

Na caixa frete precisamos especificar os valores como peso, altura e largura, para o cálculo de frete. É possível desconsiderar o frete para o produto selecionando “Desconsidere Frete para este Produto”.

As opções disponíveis para colocar o produto a venda são muitas, podemos colocar a quantidade de estoque para limitar a venda para não ser vendido sem ter no estoque, configurar  imagem destacada do produto, permitir comentários entre outras opções.

Categorias

Assim como em Posts é possível criar categorias para classificar os produtos e tonar mais fácil a busca em sua loja.

Variações

O item “Variações” lhe dá a opção de incluir tipos diferentes de Produto e valor para cada variação. Ex: Estou vendendo um tênis e tenho varias cores diferentes deste mesmo produto e quero colocar um valor diferente para cada cor. O valor vai alterar de acordo com a cor escolhida pelo comprador.

Cupons

É possível criar campanhas e gerar cupons de desconto para os produtos.

Configuração do plugin Wp e-commerce

Para quem já fez a configuração de uma loja virtual sabe o sofrimento que é montar o formulário dos valores que será enviado para a empresa responsável por receber o pagamento. No plugin wp e-commerce você pode ficar tranquilo que ele cria todo o formulário e pega todos os valores do produto e inclui no carrinho. O plugin também já vem com toda programação do carrinho de compra. Tudo em ajax.

No menu “Configurações” do WordPress clique no Item Loja. Irá abrir uma tela como menu da imagem abaixo.

Menu de configurações da loja do plugin wp e-commerce WordPress

Geral

Nessa aba você configura o País/Região “Selecione a localização principal do seu negócio”  e o tipo de moeda que será e o separadores de milhar e decimais.

Apresentação

Aqui controlamos toda parte visual de sua loja. O plugin vem com um tema default que pode ser alterado conforme sua necessidade. Você pode criar uma cópia do seu tema default clicando no botão de backup. Assim você poderá alterar tranquilamente os arquivos e caso ocorra qualquer problema, você retorna aos arquivos antigos pelo próprio painel administrativo.

Também é possível configurar o botão de compra (Adicionar ao Carrinho ou Compre Já ), configurar a página do produto, carrinho de compras, categoria de produtos, miniaturas, paginação e comentários. É possível personalizar muita coisa sem mexer no código do plugin.

Admin

Iremos configurar toda parte administrativa da loja. Podemos limitar quantidade de downloads por arquivos, bloquear downloads por endereço de IP, Configurar os emails e mensagens para onde serão enviados os relatórios de venda assim que alguém efetivar uma compra.

Impostos

Permite adicionar impostos e taxas para os produtos no caso de vender para outros países, pode deixar automático ou manual com um valor diferente para cada produto.

Frete

Se você está apenas vendendo serviços ou downloads por exemplo, você deve escolher NÃO para desativar o frete em seu site. Caso contrario, você deve preencher o tipo de calculadora que irá usar e os dados de onde o produto será enviado.

Pagamentos

Basta ativar as formas de pagamentos que você deseja disponibilizar para os clientes e preencher os dados fornecidos pela empresa contratada para fazer a transação.

Fechar Pedido

É onde iremos fazer a configuração da pagina de checkout. Podemos personalizar o formulário com a quantidade de campos que iremos precisar. Informamos também se os usuários devem se registrar antes de fechar o pedido, Habilitar a opção de Envio igual ao Faturamento e Forçar usuários a usar o SSL.

Marketing

Marketing é uma nova ferramenta que permite a integração com redes sociais.

Importação

É possível importar seus produtos a partir de uma arquivo (.CSV) delimitado por virgula.

Bom essas são as possíveis configurações que o plugin wp e-commerce disponibiliza para a criação de uma loja virtual. Como puderam observar é bem simples de configurar e temos total controle pelo próprio painel do WordPress. Qualquer dúvida sobre esse plugin por favor deixem um comentário que terei muito prazer em ajuda-los.

O crescimento do e-commerce segue muito acima da média da economia. Isto não é novidade. E também não é novidade a entrada de milhões de consumidores nesta modalidade de comércio. Principalmente no Brasil a criação de lojas virtuais segue em ritmo acelerado.

Este crescimento trás muitas oportunidades, mas a concorrência também é mais acirrada. Como se destacar neste cenário? Minha dica é Foco na Simplicidade.

Neste artigo vamos listar os pontos básicos que devem ser levados em consideração na hora de criar uma loja virtual. Ou seja, os pilares para uma operação de sucesso.

Imagem: Salvatore Vuono / FreeDigitalPhotos.net

Os Cinco Pilares Principais de uma Loja Virtual.

• Mercado
• Publicidade
• Logística
• Tecnologia
• Atendimento

Se você já é empreendedor ou administrador de empresas deve ter percebido que não há nada de novo ou extraordinário na lista acima. Pois é. Foco no simples! Uma loja virtual parte das mesmas práticas de uma loja tradicional, mas com os aspectos específicos do comércio eletrônico em cada um deles.

Mercado: Analise as oportunidades de sua área de atuação

As maiores lojas virtuais brasileiras já estão no mercado há mais de 10 anos. Outras novas lojas já surgiram como gigantes, por trás de marcas já consagradas do varejo nacional. A entrada da chamada Classe C no comércio eletrônico abre um variado leque de oportunidades em mercados de nicho, criando setores de atuação pulverizados neste novo retrato da economia. Identifique onde podem estar estas oportunidades.

Publicidade: Utilize o poder da internet

Utilize a internet ao favor de sua loja virtual. Parece óbvio mas muita gente se esquece desta prática. Veja a seguinte lista e certifique-se em quais destes pontos seu comércio eletrônico já atua de maneira eficiente.

• Informações claras e completas dos produtos
• Criação e atualização de um blog com dicas e informações úteis sobre os produtos ou serviços oferecidos.
• Produção de vídeos demonstrando o uso de produtos
• Redes sociais como ferramenta de divulgação espontânea de sua loja ou seus produtos
• Otimização para mecanismos de busca (Google, Bing, etc)
• Links Patrocinados
• E-mail marketing

Some aos itens acima a atuação em mídias tradicionais. Mais um ponto onde as lojas on line e off line se assemelham.

Logística: Não se esqueça. Vendeu tem que entregar!

É impressionante como este ponto é negligenciado em projetos de lojas virtuais. Antes de criar uma loja virtual e iniciar suas vendas on line escolha uma boa solução de entregas. A embalagem, o valor do frete, o prazo de entrega, e a PONTUALIADADE são pontos críticos e influenciam diretamente na experiência de compra do seu cliente.

Lembre-se. Sua venda não está concluída no momento que o cliente aperta o botão Confirmar Pedido e sim no momento em que ele recebe o produto perfeito e no prazo.

Tecnologia: Preocupe-se com a ferramenta de e-commerce

Uma loja virtual deve ser rápida, livre de erros, fácil de usar e ter altíssima disponibilidade. Você pode escolher ferramentas de e-commerce prontas ou contratar uma empresa para criar sua loja virtual sob medida. Em ambos os casos a reputação da solução tecnológica deve ser analisada com muita atenção. Neste momento também é muito importante escolher a ferramenta de pagamentos utilizada em sua loja virtual. Este ponto complementa sua estratégia de mercado.

Tenha um cuidado redobrado ao escolher uma plataforma para a hospedagem de sua loja. Esta deve ser confiável e robusta. Faça valer o lema do 24 horas disponível. 7 dias por semana.

Atendimento: Seu comércio é eletrônico, mas seu cliente não

Suprir a ausência do atendimento físico é um problema em ambientes virtuais. Seu cliente poderá desistir facilmente da compra caso tenha dúvidas sobre o produto e não encontrar facilmente as respostas. Isto vale também para depois da compra.

Mais uma vez afirmo que estes pontos acima devem fazer parte do cotidiano de profissionais de comércio, seja ele eletrônico ou não. Mas lembre-se: Fazer o simples melhor que a concorrência já é um diferencial competitivo.

Muitos clientes e amigos me peguntam: Como faço para colocar thumbnails (miniaturas) ao lado da descrição do post? O WordPress nos permitiu esse recurso na versão 2.9, antes tínhamos que usar campo personalizado, e isso era um grande problema para os clientes. Ainda hoje muita gente utiliza temas antigos que não dispõem desse recurso. Por isso resolvi mostrar como habilitar a função the_post_thumbnail em seu tema para poder adicionar um thumbnail para cada post e como editar essa imagem destacada.

Como habilitar a função the_post_thumbnail

Primeiro precisamos habilitar a função the_post_thumbnail em seu tema, para isso, basta abrir o arquivo functions.php e incluir o seguinte código:

add_theme_support('post-thumbnails');

Agora você vai perceber que no admin, na parte de criação/edição de posts e páginas, do lado direito, apareceu uma caixa chamada Post Thumbnail (imagem destacada). Agora precisamos chamar esse thumbnail no tema. Para isso você deve incluir o seguinte código dentro do loop que busca os posts.

the_post_thumbnail();

Você pode passar alguns parâmetros para está função e pegar a imagem do tamanho desejado. Para mais informações sobre as possibilidades dessa função, consulte a documentação.

Como inserir e editar a miniatura para o Post/Página

1. Encontre a página ou post que deseja inserir a imagem destacada. Clique em editar e encontre a caixa com o nome “Imagem destacada”, que fica ao lado direito.

2. Clique em “Configurar imagem destacada”, abrirá a janela para escolher a imagem. Se ainda não tiver feito o up-load clique em “Selecionar arquivos” . Para encontrar uma imagem que já foi feito up-load basta clicar em “Arquivos de mídia” no menu superior.

3. Feito o up-load da foto irá aparecer uma caixa (como na imagem abaixo) com todos os dados da imagem. No final da caixa encontram-se 3 botões, Inserir no post, Usar como imagem destacada e Excluir. Se a Imagem estiver do tamanho desejado basta clicar em “Usar como imagem destacada”(para redimensionar a imagem siga o item 5). Clicando, automaticamente ela aparece no quadro “Imagem destacada”, basta fechar a caixa “Configurar imagem destacada” e Clicar no botão “Atualizar” do post/página.

4. Para redimensionar a imagem, basta clicar no botão “Editar imagem” localizado logo abaixo da miniatura da imagem. Clicando em “Editar imagem” aparecerá uma caixa como na imagem abaixo. Aqui você pode recortar a imagem, girar e redimensionar. Do lado esquerdo superior clique em “Redimensionar a imagem”.

Ao clicar em “Redimensionar a imagem” abrirá uma caixa (como na foto ao lado) mostrando a medida da imagem. Para redimensioná-la basta preencher o campo com a medida (em pixels) desejada e clicar no botão “Redimensionar” ao lado da medida.

Como podem ver o WordPress está cada vez mais facilitando a vida dos desenvolvedores e usuários, e saber usar essas novas ferramentas que ele nos disponibiliza é muito importante para facilitar nosso trabalho. Espero que o artigo seja útil nesse aprendizado. Qualquer dúvida, elogio ou crítica não deixe de comentar que estarei a disposição de todos.

Sábado, 11 de junho de 2011 aconteceu a 16º edição do Encontro de Design e Tecnologia Digital, e eu Everton Lima, fiquei incumbido de representar a Contagia neste Evento. De certa forma, o EDTED é um evento especial pra mim, pois foi através dele que conheci a galera aqui da Contagia e pude ter o prazer de começar a trabalhar com eles.

Stands e Brindes do EDTED

Eventos como o EDTED, em minha opinião, são interessantes por causa disto, além de ótimas palestras, temos a oportunidade de conhecer pessoas e fazer negócios, que podem contribuir com nossa carreira profissional, que foi o meu caso.

Como todo evento, algumas palestras do EDTED são literalmente “um tapa na cara do individuo”, ou seja, nos fazem acordar e ver o que outros profissionais estão fazendo. Portanto, quem não tem o hábito de comparecer a eventos como este. Que comecem já! #ficadica

Quanto as Palestras

Criação: o poder da Simplicidade

Marcelo Albagli, Canvas

Palestra no espaço de Design e Marketing, Marcelo começou o discurso dizendo que o papel do design e de quem projeta interfaces, seja ela qual for, é o de linkar pessoas entre si, e não documentos.

Primeira Palestra do dia, pessoal ainda chegando.

Mostrou alguns vídeos muito interessantes de novas tecnologias, e concluiu dizendo que atualmente tudo tem uma tela, e que não adianta mais desenvolver apenas para o computador, e que é preciso humanizar a tecnologia, priorizando sempre a facilidade de uso e a criação de interfaces amigáveis, que faça com que o site ou sistema responda com familiaridade ao usuário.

“Você tem pouco tempo pra prender o usuário, se ele não gostar da sua interface, você pode perder um possível cliente.”

Realize mais com HTML5 e CSS3

Leo Balter

Foi uma excelente palestra! Eu que deveria, mas não estava acompanhando as novidades do HTML 5 e do CSS3 fiquei bem surpreso com os cases apresentados.

Léo nos mostrou a possibilidade de criar telas que se adaptam a qualquer resolução, sem o uso de diversos arquivos, nos mostrou que “o melhor hack é não usar hacks”.

A Palestra foi um pouco técnica, onde foram apresentados recursos das linguagens, que com certeza merece um único post. Vou deixar apenas uma frase da apresentação do Leo Balter, que muita gente gostou.

“Canvas, a ultima pá de cal no Flash”

Search Engine Optimization(SEO)

Fábio Ricotta, Mestre SEO

Em 30 minutos, Fábio Ricotta teve a missão de nos passar dicas rápidas de SEO, embora rápida, a palestra foi bem proveitosa, com dicas valiosas de link building, que abriram os olhos pra muita coisa simples, que podem ajudar e muito na otimização do site para buscas.

Fábio Ricota com algumas Dicas de SEO.

Vou deixar algumas das dicas, pra quem quiser melhorar um pouco a relevância do seu site no Google.

• Comentários relevantes em Blog
• Páginas de Vídeo, inscrições em canais e Comentários no Youtube
• Patrocínios de Eventos e promoções
• Twitter faz sim diferença

E a dica mais importante é: Construa conteúdo sobre o que as pessoas querem!

Search no e-commerce: como funciona e como gerar resultados com o Google

Tiago Luz, underDOGS

Sabem a vantagem de ter uma empresa com DOG no nome? É que você pode usar um monte de cachorrinhos bonitinhos em sua apresentação. Assim começou Tiago Luz com a melhor palestra que vi no EDTED deste ano.

Pelo título, achei que seria uma palestra técnica, sobre e-commerce, mas teve muito mais que isso, foi tão boa a palestra que ela terminou com uma lição pra vida.

A palestra me trouxe várias reflexões, e como é difícil escrever tudo aqui, vou ter que resumir um pouquinho.

A Melhor palestra do Evento pra mim, @DocLuz com seus óculos escuros.

Nós temos mais dinheiro do que tempo, é por isto que pedimos pizza, mesmo no balcão sendo mais barato, e é por isto que o comercio eletrônico dá tão certo.

Um ecommerce, pra vender e explorar todo o potencial tem que transmitir emoção ao visitante, pois ali não temos o toque do produto igual nas lojas físicas, e a compra pela internet é movida por emoção.

Como eu disse, o final da palestra até arrepiou, Tiago Luz nos mostrou em um ‘gráfico’ que independente do que você faça ou goste de fazer, no final o objetivo de todo mundo é ser feliz, e é o que importa na vida.

“Seja metade do que as pessoas pensam que você é, que você será feliz”

Como criar um Podcast

Gustavo Guanabara

Vou contar um segredo pra vocês, por aqui na Contagia estamos doidos para oferecer conteúdo em outros formatos, e o podcast é algo que nos interessa muito, portando eu não podia perder esta palestra.

Além de engraçada a palestra serviu pra dar uma base pra muita gente que não sabe por onde começar seu Podcast. Seguem algumas dicas do Guanabara:

• Crie conteúdo, você não vai alcançar visibilidade se não criar algo novo e que as pessoas queiram ouvir;
• Tente aproximar o público, e procure ouvi-lo;
• Não saia gastando fortuna em equipamentos, grave os primeiros podcasts com um microfone normal e veja se dá certo, tente fazer uns 10 podcasts antes de investir pesado;
• Tenha uma pauta;

Pra finalizar o evento rolou uma mesa com alguns palestrantes discutindo vários temas. O que foi bastante produtivo também.

Mesa com alguns palestrantes do EDTED

A propósito…

Maujor estava por lá \o/

Veja mais fotos do #EDTED aqui

Isto foi um pouco da minha passagem por SP. Quem quiser mais informações ou se interessou por alguma palestra, entre em contato, pois se eu for escrever tudo aqui o post vai ficar imenso. Também é impossível passar a experiência de um evento deste em um post, portanto, na próxima oportunidade, esteja lá, e troque uma idéia comigo.

Abraços.

Já tentou pesquisar a palavra “cliente” no twitter? Tente…

Você vai encontrar desde elogios, reclamações, e também muitas mensagens relatando clientes que “não entendem” como as coisas funcionam.
Nós que trabalhamos com internet presenciamos muito esta situação, não é algo que acontece porque a internet é uma mídia nova, que na realidade não é, mas sim pelo simples fato de que o cliente deve se concentrar naquilo que ele faz de melhor, que é cuidar da própria empresa. E nosso papel como profissional é orientá-lo, e ajudá-lo a tomar as melhores decisões, afinal, foi pra isto que fomos contratados.
Portanto, meu objetivo é mostrar algumas dúvidas e receios pertinentes, que muitos empresários têm ao contratar uma empresa para desenvolver um projeto web, vamos lá:

Beleza x Funcionalidade

Gosto de usar o exemplo da casa em construção, pois é algo que todos temos familiaridade, e fica bem fácil de entender. Assim como na construção, a beleza de um projeto web tem que estar em sincronia com a funcionalidade, se algo for bonito, mas difícil de usar, não vale a pena investir. Pense em um banheiro bonito, com um lavatório espetacularmente diferente de tudo que você já viu, ele é lindo, a única desvantagem é que, quando abrimos a torneira, a aguá espirra na roupa de quem está usando, nada elegante, não é mesmo?

Você pode ousar, mas sempre mantendo a usabilidade do projeto, como títulos e hierarquias.

Portanto, certifique-se sempre de que seu projeto segue as práticas mais atuais e eficientes de desenvolvimento, e se o profissional tem o cuidado de desenvolver de forma que o site funcione bem em todos navegadores, celulares, tablets, etc.
Tem um artigo super interessante em nosso blog abordando as Boas Práticas de uso de Animações em flash, vale o clique!

Quero vender na internet, é seguro?

Foi-se o tempo em que o comércio na internet estava restrito em grandes corporações, hoje, você pode criar uma loja virtual, vender produtos pela internet e realizar as transações financeiras de forma tranqüila e segura.
Para um site de comercio eletrônico, é imprescindível investir em um sistema de gestão de conteúdo, que vai permitir que você insira ou altere produtos através de um painel de controle.

Escolha uma empresa especializada para desenvolver sua loja virtual, e concentre-se apenas no seu produto.

A parte de pagamento, que é a mais temida por quem não tem costume de realizar transações na internet, fica a cargo de empresas especializadas neste segmento, conhecidas como intermediadores de pagamento. É através desta empresa, que será inserido em seu site a possibilidade de pagamento por cartões de crédito, parcelamento e boleto bancário.
Já utilizei estas ferramentas em projetos de clientes e pessoais, recomendo muito. Além de oferecer pra você e seu cliente total segurança nas transações, o fato de serem empresas conhecidas, transmitem a sensação de segurança ao seu cliente resultado em compras e lucro pro seu e-commerce.

Tenha Foco! Sempre!

Você já sabe que seu projeto precisa manter-se funcional, e também que existe formas seguras e muito interessantes de vender pela internet, porem, não se esqueça que é preciso ter foco, muito foco.

Destaque sempre a informação importante. Pergunte-se: O que meu visitante espera ver em meu site?

Não tente abraçar o mundo, tratar de vários assuntos, pra se destacar é preciso se tornar referência, só assim você ganha confiança, e em conseqüência seu projeto web tende a crescer cada vez mais.
Escolha um público, e mantenha-se fiel a ele, de nada adianta ter um catálogo imenso de produtos para vender na internet se eles não se relacionarem entre si, a chance de um visitante comprar mais de um produto, ou voltar pra comprar novamente tende a ir por água abaixo.
É claro que é possível ter um projeto atendendo vários nichos, oferecendo conteúdo ou produtos de diversos segmentos, mas tenha atenção redobrada na organização, deixando claro pro visitante em qual setor do site ele está. Você pode usar cores e títulos para identificar cada seção do seu site, e o visitante não se sentirá perdido

As dúvidas são muitas, pretendo tornar isto uma seção no site, onde periodicamente postarei algumas dúvidas, quero também permitir que vocês, leitores, nos enviem dúvidas próprias ou de clientes para discutirmos por aqui.

Até mais.