O WordPress deixou de ser voltado para blogs há muito tempo, hoje podemos fazer praticamente tudo com ele, inclusive criar uma loja virtual. 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.

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.

Chegou a hora de avaliar, comparar e, o principal, entender as diferenças entre projetos pensados com o design ferramenta e objetos meramente estéticos, sem relevância de comunicação e opositores à experiência do usuário.

Antes é preciso lembrar que experiência do usuário não é apenas um termo aplicado a jogos e interações on-line ou off-line. Quando utilizamos o design ferramenta sempre visamos a interação, a máxima relação com o alvo do projeto, ou seja, privilegiamos a experiência do usuário.

Também é necessário ressaltar que, para uma avaliação concreta, precisamos de um modelo real, algo que tenha sido realmente feito com o foco na experiência do usuário. Portanto, antes de mais nada, preciso agradecer a colaboração do ETrilhas, que disponibilizou o recente projeto de redesign do site para que pudéssemos realizar esse estudo. O redesign do ETrilhas ainda está em fase de implementação pela equipe Contagia, portanto somos os primeiros a conhecer o novo projeto. O ETrilhas pode ser acessado através do endereço www.etrilhas.com

Hora de matar a cobra e mostrar o pau. Por mais que soe clichê, é exatamente esse o nosso objetivo. Vamos aos modelos:

Figura 1

Figura 2

A Figura 1 apresenta o antigo layout do ETrilhas e a Figura 2 o redesign, passando pela arquitetura da informação, necessidades estéticas e ergonômicas, tudo sempre pensando na experiência do usuário. Vamos retalhar a elaboração do projeto em segmentos que nos permitam seguir a trilha de como um objeto puramente estético pode se tornar um produto de design. Essa segmentação seguirá os pontos básicos levantados no quarto artigo dessa série Que Design é Esse?, que serão acrescidos de fatores de avaliação específicos para esse projeto.

Fatores Básicos

Cores – Basicamente esse quesito é o grande acerto do projeto anterior (Figura 01). As tonalidades predominantes representam bem o produto ao qual o projeto se refere, o turismo de aventura. No entanto, ao compararmos com o novo layout (Figura02), percebemos um excesso de tons e a falta de hierarquia entre as diferentes tonalidades. Os ícones coloridos das redes sociais são um bom exemplo do excesso, que leva o usuário a encaminhar sua atenção apenas às referidas ferramentas e deixar de lado, mesmo que momentaneamente, o conteúdo do site. No redesign também percebemos a hierarquia de informação criada pelas tonalidades, em níveis de importância, onde, Amarelo/Nível 01, Terra/Nível 02 e Branco/Nível 03. Esses níveis auxiliam o acesso a informação e elevam a experiência do usuário com o produto final.

Tipologia – Nesse fator encontramos o primeiro grande erro do projeto anterior. A miscelânea de famílias tipográficas utilizadas, dispersa a concentração do usuário e, sobretudo, dificulta o acesso ao conteúdo. Podemos, sem muito esforço, encontrar quatro tipos diferentes. Alguns desses tipos também pecam pela falta de clareza na leitura, o mais crítico é o que compõe o menu. No novo projeto encontramos apenas duas famílias tipográficas, uma destinada a títulos e destaques, e outra aplicada em textos corridos e mais densos. Ambos os tipos prezam pela boa leitura, e não apenas pela estética off-road apresentada no projeto anterior. Mesmo assim, o tipo destinado a títulos no redesign, consegue imprimir a força necessária para caracterização visual do conceito do produto.

Ergonomia – Alguns grandes erros vem de antigos acertos. Isso fica claro quando insistimos em projetos on-line que eliminem a barra de rolagem. No início da informação compartilhada na grande rede o ato de rolar a barra vertical era sinônimo de “perda de audiência” para o site. Hoje, com a popularização de portais e buscadores, somados a sofisticação do “scroll” no mouse, ou simplesmente arrastar o dedo em dispositivos touchscreen, formamos um usuário com características diferenciadas. Rolar verticalmente é uma ação natural para esse novo indivíduo. Portanto é desnecessário concentrar – apertar e massacrar – o conteúdo para “caber na página”. Deixar sempre o conteúdo “fluir” torna o produto web ergonomicamente correto.

Fatores Específicos

Existem aqui fatores técnicos que precisam ser respeitados (linguagem de programação, tecnologias de desenvolvimento). Um bom designer deve, e precisa, ter o mínimo de consciência desses aspectos e de como projetar para cada um deles. São esses fatores que definem outros aspectos importantes na avaliação, como interatividade e usabilidade.

Não existem grandes ferramentas de interação em nenhum dos dois projetos destinadas ao usuário final. Nesse produto, esse tipo de ferramenta está mais no background, destinadas a alimentação e manutenção do site. Portanto, vamos concentrar a comparação no item usabilidade e acrescer a este um fator que definiremos por “comunicabilidade”.

Usabilidade – Ambos os projetos são coerentes nesse fator, que é avaliado pela “resposta” do produto aos estímulos do usuário, ou seja, rapidez em se encontrar e desfrutar do conteúdo. Porém as características de hierarquia de informação conseguidas por meio dos itens “Cores” e “Tipologia” e algumas mudanças no posicionamento da informação auxiliam a experiência do usuário, o que eleva a eficácia do design ferramenta aplicado no segundo projeto.

Comunicabilidade – O design visual voltado ao consumo necessariamente tem o dever de comunicar conceitos e características do produto ao qual foi aplicado. A “templatização” do meio web é um dos grandes pontos negativos pra evolução dessa comunicação. Ao compararmos as figuras 01 e 02, o mal causado por essa prática fica evidente. Na Figura 01 a ideia que fica é “já vi isso antes” ou “serviria para qualquer outra empresa, é só trocar a cor”. Já na Figura 02 existe a integração entre a marca e o produto do design, existe a sensação de propriedade e representação dos atributos da marca.

Para apresentar uma análise completa desse projeto seria necessário rever muitos outros itens e outros aspectos referentes a cada página no site. No entanto, com essa pincelada, é possível analisarmos a aplicação do design ferramenta e compreender a necessidade de se “pensar” o design antes de executá-lo. Essa é a trilha para que o design deixe de ser meramente estético e passe a focar a experiência do usuário, isso certamente traz grandes resultados e agrega valor aos produtos.

Para pensar: Vamos analisar nossos projetos. Tentem refletir sobre os projetos apresentados pelos estúdios de design, de internet e agências de propaganda. Concentrem-se nas solicitações feitas para tais empresas. Estamos “pedindo” corretamente? Recebemos o necessário para cada projeto? Respondendo essas perguntas, mais uma vez, estaremos praticando o design ferramenta.

Em breve falarei aqui sobre um projeto de marca, comparando o “antes e depois”. Futuramente, segue a tarefa de “criar” um logotipo do zero, pelos menos conceitualmente, para que entendam como avaliar a eficácia dos mais diversos projetos.
Mas isso são outras histórias. Até a próxima.

Depois de uma série de posts fundamentando o design ferramenta, como entendê-lo e como saber a hora de usá-lo em sua marca, produto ou empresa, é claro que não iria demorar para chegarmos nessa pergunta: Mas, quanto custa um projeto de design?

Inúmeras variáveis precisam ser avaliadas para entender o custo estimado por um estúdio de design ou um profissional freelancer. Em uma rápida pesquisa pela internet encontramos muito posts que falam da importância do design, a importância de se procurar profissionais capacitados e até alguns que dizem que “não se deve pagar barato pelo design” ou que “o bom design é o mais caro”. No entanto, não encontramos nada que diga claramente quais são os parâmetros para o levantamento do custo.

É claro que existem tabelas de associações que estimam esses valores e que podem ser consultadas e praticadas pelos designers. Porém, a discrepante diferença entre essas tabelas pode causar ainda mais confusão na confecção do preço e na verificação desses valores por parte do consumidor de design.

Existem também livros como “Quanto Custa meu Design?” que auxiliam muito os profissionais da área, principalmente os em início de carreira, a entenderem seus custos e gerarem um preço satisfatório para trabalhos comuns na área. Mas, a questão aqui é: quanto pagar por um projeto de design? Para responder essa questão precisamos dividir a composição de custos em três grupos de avaliação: Custos de Designer/Empresa, Custos de Perfil/Carreira e Custos de Projeto.

Portanto, vamos entender cada um deles

Custos de Designer/Empresa

Esses custos são bem avaliados em livros como o citado acima e compreendem uma ampla gama de fatores concretos do dia a dia de quem irá executar o projeto. Desde o valor do aluguel, passando por remuneração de funcionários e/ou assistentes, até chegar em investimentos como tecnologia (hardwares e softwares) e atualização profissional (revista, cursos, congressos). Todos esses custos são difíceis de serem notados pelo consumidor do design. Por isso, fica a dica: conheça bem o designer/estúdio com quem vai trabalhar. Se possível faça um visita física, veja outros projetos e analise o currículo do indivíduo/empresa em questão, assim fica fácil perceber o investimento feito por estes e o que retornará em forma de expertise para o projeto.

Custos de Perfil/Carreira

Todo bom design tem uma assinatura e, certamente, esse DNA do projeto tem seu preço. Logo, quanto mais tempo o indivíduo/empresa estiver no mercado e quanto mais projetos de sucesso acumular, a assinatura irá pesar mais no preço final. Mas, e aí? Vale preferir designers/empresas desconhecidas em prol de uma economia significativa? Mesmo que você tenha avaliado o portfólio e o currículo dessa empresa/indivíduo; tenha feito uma visita física, conhecido o histórico de cabo a rabo e no fim saído confiante e com uma bela impressão, saiba: essa assinatura ou know how de mercado pode ser a diferença entre sucesso e erro. É claro que um jovem designer/empresa pode surpreender mas, se você não dispor de tempo para acompanhar e fiscalizar o projeto opte pela experiência, ela vale o quanto custa.

Custos do projeto

Além de todas essas bases de preço internas, do designer/estúdio, ainda temos que contar com as características próprias do projeto. As mais básica são o tempo e o volume de exposição no mercado. O volume de exposição é onde e para quem o projeto será veiculado, se o produto/serviço é local ou regional, deverá ter diferenças no cuidado, e consequentemente no valor, em relação a um nacional ou internacional. O tempo compreende ações finitas – promoções, hot sites, selo comemorativos – e projetos de longa duração como marcas, portais, programação visual entre outros. Somam-se a essas variantes inúmeras outras, como o valor da marca para qual será destinado o projeto, o mix de produtos de design que será trabalhado, tempo de execução, contratos de sigilo, exclusividade e tantos outros fatores.
Ok, é isso. Mas, e aí? Não ficou claro o quanto pagar pelo design? O mais importante desse post não era atingir um regra de três, ou prova dos nove, que gerasse um valor concreto ou estimado para cada produto do design, isso seria um grave erro, já que as facetas dessa ferramenta são tão complexas quanto o domínio e aplicação correta da mesma. A ideia central aqui é demonstrar tudo o que pode afetar a composição do preço em um projeto, esperando que ao entendermos essas variáveis possamos escolher corretamente qual a melhor equação custo x benefício para cada projeto gerido por nossa marca, produto, serviço, ideias ou empresa.

Para pensar: Sabendo-se de todas essa variantes, e levando em conta o “livre mercado”, ao decidir implementar o design ferramenta, pesquise, pesquise a fundo. Não apenas faça orçamentos, mas tenha um bom bate papo, conheça a fundo os designer/estúdios envolvidos nos processos e, se ainda restarem dúvida, inicie novamente todo o processo de avaliação.

Daqui para frente, em nosso próximos encontros, vamos avaliar projetos de design e diversas áreas. De um logotipo a um portal web, passando por catálogos, projetos de programação visual e outras “designices”. Da teoria à prática, veremos porque alguns são Design e outros, apenas design.

Forte Abraço.

Hoje iremos falar sobre um plugin que foi testado e aprovado por nossa equipe. O Flash MP3 Player.

Ao desenvolver um projeto necessitei de um plugin para criar um player, mas que fosse possível separar as músicas em grupos e inserir dois ou mais players diferentes na mesma página.

Comecei então uma a revirar a internet atrás de um plugin que funcionasse desta maneira. Testei varios e cheguei a conclusão que o plugin Flash MP3 Player era o que estava procurando.

Flash MP3 Player é um plugin bem completo porque permite configurar o player da forma que desejar, trocar a faixa da música apenas clicando e arrastando, mexer na estilização do player podendo até colocar uma foto como background.

Bom chega de papo e vamos aprender a utilizar este plugin.

Mas antes faça o download do Flash MP3 Player e siga as instruções de instalação.

Fazendo up-load do audio

No menu a esquerda clique em “Mídia”, depois “Adicionar nova” e “selecionar o arquivo”. Escolha o audio no formato mp3 que vai estar no seu computador.

Após o up-load do audio você irá nomeá-lo. No final da caixa você vai encontrar a URL do arquivo, copie esta URL para utilizarmos no futuro.

Criando o Playlist

No menu “Configurações” a esquerda, você irá encontrar os itens “FMP: Config Editor” e “FMP: Playlist Editor”.

No FMP: Config Editor é onde está disponível toda configuração da parte visual de seu player.

Clicando em FMP: Playlist Editor irá aparecer uma tela para criar um playlist e inserir ou excluir músicas do playlist existente.

Para criar um playlist encontre a caixa “Playlists Management” e clique em “novo”, basta colocar o nome desejado e clicar em “OK”.

Adicionando Músicas no Playlist

Depois de ter criado o Playlist é hora de adicionar as musicas que irão aparecer neste Player.

Primeiro selecione o playlist que você deseja inserir o audio. Ao lado da caixa que você criou o Playlist você irá encontrar as músicas que já foram adicionadas e no topo da caixa dois botões “novo e salvar”.

Clicando em “novo” aparecerá uma caixa pedindo para adicionar o Título e o link do audio. Agora você utilizará o link do audio que você copiou no item 1 (caso tenha perdido este link retorne ao item 1).

Após inserir o título e o link clique em “Add”, o audio irá aparecer na lista de Músicas do playlist selecionado.

Adicionando o player na página

Nos item acima criamos o Playlist e adicionamos as músicas. Agora é hora de colocar o player na página desejada.

Encontre a página desejada e clique em editar, ao entrar você irá perceber que foi adicionado um botão com um play azul no topo da página. É neste botão que você deve clicar para adicionar o Playlist. Mas antes você deve posicionar o cursor no local que deseja que o player apareça na página.

Clicando no play azul aparecerá uma caixa pedindo para preencher alguns campos, é necessário preencher apenas o “width:” (largura do player em pixels) e escolher o playlist em “Choose a playlist:”, feito isso basta clicar em “insert” para adiciona-lo à página.

Irá aparecer um código parecido com este ([mp3player width=400 config=fmp_jw_widget_config.xml playlist=276-config-2.xml]) na página.

Agora basta visualizar o post ou a página e ver se o player está funcionando corretamente.

Espero que tenham gostado deste plugin. Para nosso projeto, foi muito útil e o cliente gostou muito do resultado e aprendeu rápido a utilizar o plugin. Confira o plugin em ação no e-commerce Acedo Audio

Surgiu alguma dúvida? Comente que ajudaremos a utilizar este belo plugin.

O WordPress está sendo um dos CMS (Content Management System) mais usados no momento, e foi pensando nisso que decidi começar a minha coluna aqui no site da contagia mostrando para as pessoas que estão iniciando no mundo do WordPress como utilizar este CMS tão poderoso. Aqui na agência nós criamos os sites em WordPress, trazendo muitos benefícios aos clientes pela facilidade na administração do conteúdo.

No Painel de Administração do WordPress – Admin você pode ter acesso total ao conteúdo do seu Site/Blog. Como disse, o WordPress é uma ferramenta muito poderosa por isso vou tentar ser o mais breve possível e não vou me aprofundar muito na parte técnica.

Para ter acesso ao Admin basta digitar no navegador (http://seusite.com.br/wp-admin). Após você irá digitar o usuário e senha nos campos correspondentes.

Feito o login, na página principal do painel você vai encontrar todas as informações sobre seu site/blog. Como: Número de posts, páginas, categorias, tags, comentários (se estiverem habilitados) e um sidebar, menu do lado esquerdo que você vai utilizar para navegar.

No sidebar esquerdo você tem duas opções de postar conteúdo, como páginas ou posts. Mas antes de começar a postar você deve sabe a diferença entre eles.

Diferença entre post e página

Post é um conteúdo que será atualizado de tempos em tempos como num blog pessoal que você escreve diariamente, é diferente das páginas que tem seu conteúdo estático e que dificilmente será alterado.

Exemplo de post: Um posts de notícias (diariamente terá novas notícias).

Exemplo de página: Página “Quem Somos” num site institucional (dificilmente seu conteúdo será alterado).

Postando conteúdo

Menu Posts: Ao clicar na primeira opção “Posts” aparecerão todos os posts que poderão ser editados, é só escolher o post e clicar em editar no menu que aparece abaixo do título do post. Este menu surge ao passar o mouse sobre cada post.

Adicionar novo post: Clicando nesta opção você irá para uma página como na imagem abaixo:

Na caixa que se encontra logo abaixo de “Adicionar novo post” será incluído o título do post.

Obs: O WordPress transforma o título da página na URL do mesmo, caso esteja no modo URLs amigáveis.

Estilização de conteúdo:

Logo abaixo do título do post temos uma barra com botões como no “Word”, utilizada para estilizar texto, no caso do WordPress é possível inserir fotos e vídeos pela própria barra também. Ainda temos a opção de trabalhar no modo visual, que é “mais ou menos” como o conteúdo será visto no browser (navegador), e no modo HTML, que é a parte de código do conteúdo.

Como usar Categorias no WordPress:

Depois de ter colocado o título e o conteúdo você deve escolher uma categoria onde o post irá aparecer, é só selecionar no sidebar do lado direito a opção desejada (mais para frente neste artigo, vou mostrar como criar uma categoria).

Tags de Post:

As tags são palavras chaves que serão escolhidas por você para mostrar aos mecanismos de busca o tipo de conteúdo que existe naquele post, é muito importante não deixar de colocar estas tags, isso facilita o mecanismo de busca a encontrar seu site.

Quadro Publicar:

Após incluir seu conteúdo. É hora de definir se ele será publicado. Neste quadro ficam as opções de publicação do conteúdo. Você tem as seguintes opções:

Salvar como rascunho – Que é utilizado quando o post não está terminado ou você não pretende publicar o conteúdo naquele momento, clicando nessa opção ele vai salvar o post que foi criado, mas sem publicá-lo.

Visualizar: – Ao lado do botão “Salvar como rascunho” temos o botão visualizar, clicar nesta opção, abrirá seu post no site para ver como ficou a apresentação do conteúdo. Esta opção não salva o conteúdo, você apenas irá visualizar este conteúdo.

Status: – Abaixo do botão “Salvar como rascunho” está localizado o Status em que o seu post se encontra:

• Se ele foi publicado ou está como rascunho.
• A visibilidade, que é se está disponível para todos ou se é privado.
• A data e horário de publicação, caso queira agendar a publicação basta clicar em editar.

Miniatura do Post:

A partir da versão 2.9, o WordPress conta com uma função para inserir uma imagem de destaque (thumbnail) para o post. Verifique a versão da sua instalação e se a função está disponível em seu tema. Caso seu tema não tenha esta função veja aqui como adicionar miniaturas em posts ou páginas no WordPress.
No quadro Imagem Destacada, você irá relacionar uma imagem para o conteúdo que está publicando. Está imagem vai aparecer como uma miniatura ao lado da descrição da página ou post.
Para adicionar uma imagem é muito simples, basta clicar no link “configurar miniatura” e escolher a imagem do seu computador ou que já esteja na galeria do WordPress. No final da caixa da imagem existe a opção “inserir no post” e “usar como miniatura”, clique em “usar como miniatura” e pronto, está adicionado.

Como Adicionar Categorias no WordPress

Você pode adicionar categorias no WordPress através do menu Posts. Na sidebar do lado esquerdo, você tem a opção Categorias. Ao clicar nesta opção vai aparecer uma página como na imagem abaixo. No menu do lado direito estão as categorias que já foram criadas. Caso queira editá-las basta clicar sobre o nome da categoria (recomendo não editá-las, para não alterar a programação), neste menu você tem a descrição da categoria, o slug (é o nome que vai aparecer em sua URL, ou seja, na barra de endereços do navegador) e a quantidade de posts que existem em cada categoria. Para visualizar os posts basta clicar sobre este número.

Menu Mídia

Aqui você vai poder adicionar, remover, visualizar ou editar as imagens que estão no seu site/blog.

Páginas

A criação de páginas é bem parecida com a de um Post. No menu do lado esquerdo você encontra a opção “Páginas” nesta opção você pode adicionar uma nova página ou editar uma já existente.

Editar Página:

Clicar na opção editar vai listar todas as páginas existentes no seu site. No topo ao lado direito existe um campo para buscar a página desejada. Caso você não saiba o nome da página é possível ir navegando e visualizar cada uma delas. Após encontrar a página desejada basta colocar o mouse sobre o nome que irão aparecer as quatro opções (Editar | Edição rápida | Lixeira | Ver). É só escolher a opção desejada. Esta opção vale para Posts ou Páginas.

Adicionar nova página:

Clicando no menu “adicionar nova” abrirá uma página como na imagem abaixo. A criação é bem parecida com a de um post, abaixo da frase “adicionar nova página” é onde vai entrar o título da sua página. Depois temos a barra de ferramentas e a caixa onde será colocado o conteúdo.

Hierarquia da página

Após colocar o nome e o conteúdo, no sidebar do lado direito você irá encontrar abaixo da caixa de Publicar a caixa Atributos, onde definirá o nível hierárquico da página.

Por exemplo, você pode ter uma página “Sobre” que possui as páginas “Minha Vida” e “Meu Cachorro” abaixo dela. Depois você vai escolher na mesma caixa a ordem que irá aparecer na lista de links (Em geral, as páginas são ordenadas alfabeticamente, mas você pode indicar um número para alterar a ordem).

Usuários no WordPress

O usuários são as pessoas que terão acesso ao Painel de Administração do seu site.

Para criar um novo usuário basta clicar no menu Usuários, Adicionar novo. Abrirá uma página que deverá ser preenchida com os dados do usuário.

Nome de usuário (nome que irá utilizar para fazer o login).

Nome e Sobrenome (nome do usuário que irá aparecer nas postagens)

Email do usuário (o endereço que será enviado um e-mail com os dados da conta incluindo senha)

O site que ele terá acesso (no caso de gerenciamento de múltiplos sites no mesmo Admin) e a senha do usuário (que deverá ser digitada 2 vezes).

Por último e mais importante você deverá mostrar qual é a função do usuário. Na área administrativa do WordPress existem 5 tipos de usuários, sendo que eles podem administrar, publicar artigos e páginas, comentar e etc.

Os tipos de usuários do WordPress são:
Administrator, Editor, Autor, Colaborador e também o Assinante.

Sendo que todos tem diferentes tipos de “privilégios” dentro do WordPress:

• Administrador tem acesso completo à administração.
• Editor gerencia os Posts, também publica, apaga e escreve.
• Autor pode apenas gerenciar seus próprios posts.
• Colaborador apenas escreve e não tem privilégio de publicar seus posts.
• Assinante é praticamente um visitante, apenas pode escrever comentários e receber newsletters.

Resumo

Como disse, tentei ser o mais breve possível. Você pode notar que não falei de todos os menus. O WordPress tem inúmeras ferramentas e plugins que podem ser utilizados, acredito que com essa pequena introdução já é possível utilizar bem o Painel de Administração deste poderoso CMS.

Agora é sair usando sem medo, qualquer dúvida só postar que agente responde com carinho.

Em nosso último post falamos sobre as “escolas” do design e a importância do minimalismo para o mercado coorporativo, graças a sua capacidade de sintetizar significados. Podemos ver como a evolução de uma marca é proporcional a essa redução de elementos que representam seus conceitos. O fator “menos é mais” também é peça fundamental em projetos mais, onde existam um número maior de informações a serem hierarquizadas para alcançar níveis satisfatórios de entendimento do conteúdo.

Um projeto de design claro e conciso é o mínimo que uma empresa deve esperar para sua marca, produto ou ideia. Portanto, iremos perceber daqui para frente, que o design ferramenta não deve ser avaliado apenas esteticamente. Trocar corzinhas, colocar mais ou menos firulinhas, para ficar mais bonitinho, não são índices indicativos de coerência em um projeto de design.

Para entender que design é esse, e como avaliar sua solidez e objetividade, devemos nos atentar a fatores, ou elementos, específicos do design ferramenta. Abaixo podemos ver os que julgo essenciais, posteriormente, conheceremos outros fatores mais específicos para cada tipo de projeto.

Cores – Deixando de lado acepções puramente estéticas – preferência por essa ou aquela cor – no design ferramenta a paleta de cores, conjunto de matizes e tons utilizado em um projeto, deve ser aplicado para criar e influenciar sensações. Cada cor tem sua carga psicossomática, que nos leva a percebê-la como representação de um elemento, objeto ou ideia. Para quem produz design o conhecimento dessas representatividades é de extrema importância. Para quem consome, a fundamentação da paleta de cores é essencial. Imagine uma empresa de entretenimento infantil com um site baseado em tons de cinza ou pasteis. A representatividade com o imaginário de cores fortes e vibrantes das crianças será praticamente nula.

Tipologia – Tipos são o que usualmente chamamos de “fontes”, ou ainda, aquela “letrinha bonitinha”. Mais uma vez precisamos abandonar “esteticismos” e o gosto pessoal em prol de um bom projeto. A escolha de tipos adequados influenciará diretamente na compreensão da mensagem. Afinal, por mais que vivamos em uma sociedade de memória extremamente visual, quando procuramos nos aprofundar em informações para que decisões sejam tomadas – como exemplo, uma decisão de compra – é necessário que possamos entender, por meio do código escrito, qual o discurso, diferencial ou sensação que a marca ou produto irá nos proporcionar. Com o advento da internet é comum encontrarmos aplicações tipográficas sem qualquer propósito, como um texto de duas páginas escrito em todo letras maiúsculas, ou tipos tão fantasiosos que é impossível lê-los.

Ergonomia – Não só no design de produtos, onde interagimos corporeamente com o resultado do projeto, mas também em páginas impressas ou aplicações online, esse elemento é fundamental. A ergonomia de uma página de internet é que fará com que nossos olhos sigam o caminho correto da informação e possibilitem que nosso cérebro interaja com a interface proposta. É esse conceito, bem aplicado, que nos permite abrir um catálogo impresso e “navegar” por seus parágrafos, páginas e dobras, sem nos perdermos dentro do conteúdo. Objetos de design ergonomicamente pensados possibilitam a interação humana sem que o indivíduo seja afetado negativamente por distorções de compreensão do conteúdo.

Basicamente temos aqui a receita para um bom projeto de design. Ainda veremos outros elementos como usabilidade, movimento e forma, porém, esses devem ser analisados quando inseridos dentro de cada aplicação, pois o que funciona para um suporte nem sempre é aplicável a outro.

Para pensar: Analise os projetos de design da sua empresa. Suas cores correspondem ao perfil mercadológico idealizado para seus produtos e serviços? A tipografia utilizada é direta e concisa, evita dúvidas e aquela de sensação de “vista embaralhada”? É confortável procurar por informações em seu site, em suas embalagens ou projetos editoriais? Em caso de dúvidas, repense o valor que você dá ao seus projetos e procure um especialista. Certamente você perceberá que já perdeu muito sem um design adequado aos seus propósitos.

Em nosso próximo post vamos falar de valores, como é cobrado um proejto de design, quais os fatores que contribuem para a composição dos preços e, sobretudo, qual o momento para se repensar o investimento em design.

Ficamos por aqui, até a próxima.