Webmaster.pt - Marketocracia Digital

Como Criar Uma Loja Com WordPress Em 15 Minutos

Rui Soares — Mon, 06 Sep 2010 09:59:59 +0000

Apresentação Do WP e-Commerce

O WP e-Commerce é um plugin que adiciona a funcionalidade duma loja de comércio electrónico ao WordPress. Já foi descarregado mais de 750 000 vezes, o que comprova a sua popularidade em todo o mundo.

Está habituado a usar o WordPress e precisa de criar uma loja online? Você pode usar o WordPress para vender os seus produtos, serviços e também produtos digitais para download com este plugin WP e-Commerce.

Vamos explicar como:

instalar a lingua portuguesa no WordPress, versão de Portugal e versão do Brasil
instalar o plugin WP e-Commerce
instalar a tradução portuguesa do plugin WP e-Commerce
traduzir o plugin WP e-Commerce

10 Lojas Que Usam O WordPress E O WP e-Commerce

Loja Online: chippiandchilli

Loja Online: innovateelectricalsupplies

Loja Online: pedalplay

Loja Online: panyizsuzsi

Loja Online: citysurfshops

Loja Online: northlandski

Loja Online: rubymae

Loja Online: papermagnolia

Loja Online: topqualityfabrics

Loja Online: ggverlag

Versatilidade Do WordPress

O WordPress é conhecido como o mais popular gestor de conteúdos para blogues, mas trata-se dum CMS (Content Management System) muito versátil, que pode ser usado para criar diversas aplicações web, por exemplo:

um blogue
um site duma empresa
uma revista
uma loja
uma galeria
um site de classificados
um diretório de sites

Neste tutorial, vamos criar uma loja online usando o WordPress. Será um processo rápido e fácil, como poderão ver na sequência que descrevemos.

Instalar O WordPress

O primeiro passo é instalar o WordPress.

Como o nosso serviço de hospedagem web usa o control panel cPanel com o Fantastico, que é uma ferramenta que automatiza a instalação de scripts open source, instalamos o WordPress através do Fantastico, como poderá ver neste tutorial: (abra numa nova TAB) Wordpress – Instalação Pelo Fantastico

Aqui estamos no interface de administração do WordPress, que está em Inglês:

No meu caso, uso o Inglês quase sempre. Mas, como vou precisar de instalar a língua portuguesa no plugin WP e-Commerce, para criar a loja, e como essa instalação do português no plugin está dependente da instalação prévia da língua portuguesa no próprio WordPress, vou mostrar-vos como é que se faz para instalar o Português no WordPress.

Instalar A Língua Portuguesa No WordPress

Há 2 versões do WordPress em português:

As instruções que seguem podem ser aplicadas nas 2 versões. Aceda nos links anteriores aos sites oficiais duma das versões da língua portuguesa. E faça download do WordPress. No meu caso, fiz o download da versão brasileira do português.

Como já instalei o WordPress, não vou instalar novamente o script. Preciso apenas dos ficheiros da língua portuguesa. Descomprimi o ficheiro do WordPress que descarreguei e acedi a wp-content/languages. Depois através dum cliente de ftp, no meu caso o Filezilla, acedi ao serviço de hospedagem web onde tinha instalado o WordPress e criei a pasta languages em wp-content.

De seguida, fiz o upload dos ficheiros que estavam na pasta languages do WordPress que descarreguei, para a pasta languages do WordPress que já tinha instalado:

Finalmente, no WordPress já instalado, editei o ficheiro wp-config.php, alterando:



define ('WPLANG', '');

para:



define ('WPLANG', 'pt_BR');

Se tivesse descarregado a versão portuguesa de Portugal, teria alterado para:



define ('WPLANG', 'pt_PT');

E aqui está o interface do WordPress já traduzido para português:

Fácil!

Instalar O Plugin WP e-Commerce

Vamos adicionar funcionalidades de Ecommerce ao nosso WordPress?

Temos que aceder ao site do plugin WP e-Commerce e descarregá-lo.

Depois de descomprimir o ficheiro, o plugin vai ficar dentro duma pasta wp-e-commerce. Através dum cliente de ftp, vamos carregar essa pasta para o nosso serviço de hospedagem web, onde temos o WordPress instalado, para a pasta wp-content/plugins:

De seguida, temos que ativar o plugin. No interface de administração do nosso WordPress, clicamos em Plugins > Plugins. Vai aparecer a lista dos plugins que foram carregados para a pasta wp-content/plugins. Por baixo de WP e-Commerce, vamos clicar em Ativar.

Vai aparecer uma opção no Menu chamada Store. Cliquei na opção Products e, como você pode ver, já podemos adicionar produtos à nossa loja.

Mas, a loja está em inglês. O plugin não inclui os ficheiros da língua portuguesa.

Tradução Portuguesa Do WP e-Commerce

Vamos explicar o processo de tradução. Porquê, se você não precisa de traduzir? Você poderá querer editar alguma expressão e, como não se trata dum processo complicado, faz sentido explicar como é que se faz a tradução.

O sistema de tradução é igual ao sistema que é usado no WordPress: GNU gettext localization framework. Pode ler mais sobre o GNU gettext no codex do WordPress.

Na pasta wp-content/plugins/wp-e-commerce/languages, temos vários conjuntos de ficheiros .po e .mo, são namorados , um par para cada língua disponível no WP e-Commerce:

Vou renomear os ficheiros wpsc-es_ES.po e wpsc-es_ES.mo para wpsc-pt_BR.po e wpsc-pt_BR.mo. Você lembra que usamos a versão português do Brasil e editamos o wp-config.php deste modo:



define ('WPLANG', 'pt_BR');

O plugin usa a língua configurada no wp-config.php, se os ficheiros dessa língua existirem na pasta wp-content/plugins/wp-e-commerce/languages. Caso contrário, usa o Inglês.

Vou editar os ficheiros que acabei de renomear num editor chamado Poedit. Vou aceder à página de download do Poedit, descarregar essa aplicação e instalá-la no meu pc.

De seguida, vou abrir o ficheiro wpsc-pt_BR.po e traduzir a versão castelhana do plugin para português. Poderá ver na imagem seguinte como é que se processa a tradução:

Feita a tradução, vou gravar o ficheiro wpsc-pt_BR.po. O ficheiro wpsc-pt_BR.mo vai ser actualizado automaticamente para a nova versão. Este ficheiro .mo é uma versão otimizada do ficheiro .po, para que o acesso às várias expressões da língua pelo servidor web seja mais rápido e eficaz. Não tente editar o ficheiro .mo. Não vai compreender o código binário…

Finalmente, deve efectuar o upload dos 2 ficheiros para a pasta wp-content/plugins/wp-e-commerce/languages.

Mas, você não precisa de traduzir. Já sabe como fazê-lo, se precisar de editar alguma expressão.

Pode descarregar a tradução portuguesa do WP e-Commerce no Blog Minacio.

Como esta tradução do plugin está em pt_PT, se você instalou a versão portuguesa de Portugal no próprio Wordpress, configurando o wp-config.php deste modo:



define ('WPLANG', 'pt_PT');

pode descomprimir o ficheiro zip da tradução no seu pc e efectuar o upload dos ficheiros sem qualquer alteração para a pasta wp-content/plugins/wp-e-commerce/languages.

Se você instalou a versão portuguesa do Brasil no próprio WordPress, configurando o wp-config.php deste modo:



define ('WPLANG', 'pt_BR');

depois de descarregar a tradução e descomprimir o ficheiro zip, terá que renomear o ficheiro wpsc-pt_PT.po para wpsc-pt_BR.po e o ficheiro wpsc-pt_PT.mo para wpsc-pt_BR.mo. Depois, faça o respectivo upload para a pasta wp-content/plugins/wp-e-commerce/languages.

Ao aceder ao interface de administração do WordPress, verifico que as opções de administração da loja já estão em português:

Opções De Pagamento Do WP e-Commerce

Explore a sua loja. Verifique todas as opções de configuração. Em relação às opções de pagamento, pode adicionar em Definições > Opções de pagamento > Seleccione um gateway de pagamento para o configurar > Manual Payment / Test Gateway os dados da sua conta bancária para o cliente pagar através de transferência ou depósito bancário ou a sua morada para o cliente pagar através do envio de cheque ou ainda informar que o pagamento será efectuado no acto de entrega da mercadoria.

Por defeito, tem estas opções de pagamento:

Chronopay
Google Checkout
Manual Payment / Test Gateway
Paypal Express Checkout
Paypal Payments Pro
Paypal Payments Standard
Paypal Payments Standard 2.0

4 Themes Grátis Para O Plugin WP e-Commerce

Gostou desta solução?

Como Criar Uma Loja Com WordPress Em 15 Minutos é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

Formulário De Registo E Login Animado Com jQuery

Zeeshan Rasool — Mon, 06 Sep 2010 08:51:16 +0000

O jQuery é agora parte integrate de qualquer site. Oferece muitas funcionalidades que não são possíveis sem o jQuery. Sistemas de rating, de comentários e formulários de login criados com jQuery acrescentam um visual com estilo a qualquer site. Espero que você goste do formulário de login. E obrigado por se interessar por este tutorial.

Demo Do Formulário De Registo E Login Animado Com jQuery

Código para download no fim do tutorial.

Código JQuery





$(document).ready(function(){  



  $('a#login').click(function(){

    

    var email_address = $('#email_address').val();

    var password     = $('#password').val();

    

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    

    if(!emailReg.test(email_address) || password == "")

    {

      alert('Enter valid input.');

      return false;

    }

    

    showLoader('login');

    

    $.post("login.php?email_address"+email_address+'&password='+password, {

      }, function(response){

      

      hideLoader('login');

    });

  });

  $('a#signUp').click(function(){

  

    var signup_email       = $('#signup_email').val();

    var signup_password     = $('#signup_password').val();

    var confirm_password     = $('#confirm_password').val();

    

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    

    if(!emailReg.test(signup_email) || signup_password == "" || confirm_password =='')

    {

      alert('Enter valid input. All fields are requied.');

      return false;

    }

    if(confirm_password != signup_password)

    {

      alert('Password must be same.');

      return false;

    }

    

    showLoader('signUp');

    

    $.post("register.php?signup_email"+signup_email+'&signup_password='+signup_password+'&confirm_password='+confirm_password, {

      }, function(response){

      

      hideLoader('signUp');

    });

  });



  $('a#register').click(function(){

    

    $('#first').animate( {

      width: '0px',

      opacity: 1,

      height: '0px'

    },function(){$('#first').hide();} );

    

  });

  

  $('a#back').click(function(){

    

    $('#first').animate( {

      width: '360px',

      opacity: 1,

      height: '200px'

    },function(){} );

    

  });

  jQuery(function($){



    $("#email_address").Watermark("Email");

    $("#password").Watermark("Passwrd");

  });



  jQuery(function($){



     $("#email_address").Watermark("watermark","#369");

     $("#password").Watermark("watermark","#EEEEEE");

     

  });  

  

  function UseData(){

     $.Watermark.HideAll();

     $.Watermark.ShowAll();

  }

});



//show loading bar

function showLoader(id){

  $('#'+id).fadeOut(200);

  $('#loader_'+id).html('Please wait...');

  

}

//hide loading bar

function hideLoader(id){

  

  $('#loader_'+id).html('Successfull');

};

Código HTML





  

  

    

    


    SignUp 
Login

    


    Email

    

    


    Password

    

    


    Confirm 

    

    

    



    

    Register


    

  


  

  

    


    Login
Register

    



    Email

    

    


    Password

    


    

    


    

    Login

Aqui está o CSS.

Código CSS



h2{text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;

  filter: dropshadow(color=#e5e5ee,offX=0,offY=1); 

  font-family:"Courier New", Courier, monospace;}

.form{ 

  height:200px; width:360px; border:solid #C7E69D 1px;

  -moz-border-radius: 6px;  position:absolute;

  -webkit-border-radius: 6px;

  background-color:#C7E69D;

  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  }

#demos{text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;

  filter: dropshadow(color=#e5e5ee,offX=0,offY=1); 

  font-family:"Courier New", Courier, monospace; font-size:14px; width:100%}

  

#s4{margin: 0 auto; width:30%;}



.login{

  display:block; width:100px; padding:5px; background:#FF3333;-moz-border-radius: 6px; 

  -webkit-border-radius: 6px;

  color:#FFFFFF;

  background-color:#FF3333;

  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  text-decoration:none;

  margin-left:35px;

  float:left;

}

.register{

  display:block; width:100px; padding:5px; background:#3093C2;-moz-border-radius: 6px; 

  -webkit-border-radius: 6px;

  color:#FFFFFF;

  background-color:#3093C2;

  float:left;

  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  margin-left:10px;

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  text-decoration:none;

}



.heading{ text-align:left; font-size:22px; font-weight:bolder; padding-left:20px; float:left;color:#999999}

#signup_email{ margin-top:7px;}

input{ border:solid #D4D4D4 1px; width:215px;float:left margin:2px 0 2px 0px; padding:5px; background:#F8F8F8;-moz-border-radius: 6px; 

  -webkit-border-radius: 6px;}

label{ width:50px; float:left; padding-left:20px; padding-top:3px; text-align:left}



.bottom{ padding-left:30px;}

Download do código usado neste tutorial: Formulário De Registo E Login Animado Com jQuery

Formulário De Registo E Login Animado Com jQuery é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

22 Imagens Espantosas De Movie Fan Art

Sérgio — Fri, 03 Sep 2010 13:23:36 +0000

Movie Fan Art

Sexta-Feira é o dia em que privilegiamos a arte aqui no blog. Seguindo essa tradição, publicamos hoje imagens de Movie Fan Art.

Últimos 5 artigos publicados sobre arte:

22 Imagens Espectaculares De Movie Fan Art

Transformers by Wanbao

Rocky by Ing1

The Lord of the Rings by D17rulez

Avatar by Patrick Brown

Stormtrooper by Jprart

Indiana Jones by Ssava

Jurassic Park by Ejp2007

District 9 by Patrick Brown

Godfather by Angelgaby

Schindler’s List by Twistedbrow

Batman by Chrisgabrish

Fight Club by Bluedicius

Cyborg Head (Terminator) by Mmarti

Saving Private Ryan by Dangerousbob

Avatar by Eggar919

Blade Runner by Ornicar

X Men Origins by Patrick Brown

The Matrix by Web-head-uk

Titanic by Bencurtis

Pirates Of The Caribbean by D17rulez

Alice in Wonderland by Mr–Jack

Predators by Patrick Brown

22 Imagens Espantosas De Movie Fan Art é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

Como Criar Sistema De O.S. / Orçamentos Parte2

Quemuel Aquino — Fri, 03 Sep 2010 10:27:18 +0000

Na matéria anterior falamos um pouco sobre o Sistema de O.S. e demonstramos seu funcionamento em telas printadas:

Como Criar Sistema De O.S. / Orçamentos Parte1

Na matéria de hoje estaremos postando parte do script para que você possa posteriormente dar manutenção e até mesmo melhorar a qualidade do que foi desenvolvido.

Conhecendo Os Ficheiros

Como disse anteriormente, os ficheiros que postamos não são dificeis de serem customizados.

Abaixo falaremos um pouco sobre alguns deles. ok?

Diretório: action

config.php:

Ele tem a finalidade de efetuar o acesso à base de dados e trazer em tela as principais variáveis que descrevem a empresa (ex.: Nome da empresa, URL, Telefones, Emails).

Veja o código a seguir:






// servidor

$database = "SERVIDOR"; // Nome do Servidor

$dbname   = "BASEDEDADOS"; // Nome da Base de Dados

$usuario  = "USUARIO"; // Usuário do MySQL

$dbsenha  = "SENHA"; // Senha do Usuário MySQL



$conexao=mysql_connect ($database, $usuario, $dbsenha);



if($conexao){

      if (mysql_select_db($dbname, $conexao)){

         print "";

      }else{

           print "Não foi possível selecionar o Banco de Dados";

           }

      }else{

           print "Erro ao conectar o MySQL";

           }



$query_email_admin = "SELECT * FROM dados_empresa WHERE id_empresa = '1'";

$rs_query_email_admin = mysql_query ($query_email_admin);



$rs_row_email_admin = mysql_fetch_array($rs_query_email_admin);



$email_comercial_cliente = $rs_row_email_admin["email_comercial"];

$email_suporte_cliente   = $rs_row_email_admin["email_suporte"];

$nome_empresa            = $rs_row_email_admin['nome_empresa'];

$descricao_empresa       = $rs_row_email_admin['nome_fantasia'];

$endereco_site_cliente   = $rs_row_email_admin['url'];

$ddd_fone_empresa        = $rs_row_email_admin['ddd_fone'];

$fone_empresa            = $rs_row_email_admin['fone'];

$ddd_fone_filial_empresa = $rs_row_email_admin['ddd_fone_filial'];

$fone_filial_empresa     = $rs_row_email_admin['fone_filial'];



$cidade_empresa          = $rs_row_email_admin['cidade'];



$data=date("d/m/Y");                                // DATA HJ

$hora=date("H:i");                                  // HORA AGORA



//================================

//DEFININDO OS CABEÇALHOS DE EMAIL

//================================



    $admail  = $email_comercial_cliente;   // EMAIL DE ADMINISTRADOR

    $ass_mail= "ORDEM DE SERVIÇO"; // ASSUNTO DO EMAIL ( AO EFETUAREM CADASTRO )



    // HEADER PARA ENVIO DO EMAIL

    $headers  = "MIME-Version: 1.0\r\n";

    $headers .= "Content-Type:text/html; charset=iso-8859-1\r\n";

    $headers .= "From:[$nome_empresa]<$email_comercial_cliente>\r\n";



# ===============================================================

#   Função para formatar o valor do preço.

# ===============================================================



function formata($valor){

     $negativo = false;

     $preco = "";

     $valor = intval(trim($valor));

     if ($valor < 0) {

         $negativo = true;

         $valor = abs($valor);

     }

     $valor = strrev($valor);

     while (strlen($valor) < 3) {

         $valor .= "0";

     }

     for ($i = 0; $i < strlen($valor); $i++)

     {

         if ($i == 2)

         {

             $preco .= ",";

         }

         if (($i <> 2) AND (($i+1)%3 == 0))

         {

             $preco .= ".";

         }

         $preco .= substr($valor, $i , 1);

     }

     $preco = strrev($preco);

     return ($negativo ? "-" : "") . $preco;

}

?>

validar.php

A página em questão como o nome já diz, tem a finalidade de efetuar validação.

A validação dela e simples e durante o SELECT ele busca o login (email) e senha na base de dados, finalizando com a criação de sessão (conforme o código a seguir).








include("config.php");



$login = $_POST['login'];

$senha = $_POST['senha'];



$query_validar = "select * from tbl_usuarios where usuarios_email ='$login' and usuarios_password = '$senha'";

$rs_validar    = mysql_query($query_validar);

if ($rs_validar){



$campo_validar = mysql_fetch_array($rs_validar);

$usuarios_id  = $campo_validar['usuarios_id'];

$nome_usuario  = $campo_validar['nome'];

session_start();



$_SESSION[id]    = $usuarios_id;

$_SESSION[nome]  = $nome_usuario;

$_SESSION[login] = $login;

$_SESSION[cod]   = $senha;



header("location:../principal.php");



}else{



echo"";

echo"";



}



?>

Diretório: session

logout.php

Como o nome já diz, este ficheiro tem a finalidade de efetuar o logout (saída) do sistema após destruir a sessão do Usuário conectado (conforme código a seguir).






unset($_SESSION[login]);

unset($_SESSION[cod]);



session_unregister("login");

session_unregister("cod");



session_destroy();



header("location:../index.php");



?>

prot.php

O código disponível nesta página deve ser inserido em cada página interna do sistema, de forma que nenhum usuário sem acesso possa acessá-la (conforme código a seguir).




if (!(isset($_SESSION[login]) AND (isset($_SESSION[cod])))){

header("location:index.php");

}



?>

Diretório: tpls

os.php

O diretório “tpls” tem a finalidade de gravar os templates, ou seja: arquivos em html que serão usados como padrão em nossas atividades.

O ficheiro os.php tem a finalidade de ser usado durante o envio da ordem de serviço através de email (sendo disparado através da página “os_listar.php”).

ass.html

Este ficheiro tem por finalidade confirmar o recebimento do orçamento e início das atividades.

OBS.: Como estes arquivos são padrão, porém, podem ser alterados conforme sua necessidade.

Agradecimentos

Quero agradecer ao Sr André Sam que há anos atrás disponibilizou gratuitamente na internet um sistema de Ordem de Serviços que me ajudou bastante.

Através dele aprendi a criar tal aplicação e hoje tenho condições de criar soluções infinitamente maiores.

Bem… ficamos por aqui com esta matéria. Espero que esta solução lhe seja útil.

Em caso de dúvidas ou sugestões para novas matérias, entre em contato conosco e teremos prazer em lhes ajudar.

Download dos arquivos usados neste tutorial: Como Criar Sistema De O.S. / Orçamentos

Como Criar Sistema De O.S. / Orçamentos Parte2 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

WordPress Themes – Instalação E Administração Parte9

Lindomar Goking — Fri, 03 Sep 2010 10:14:38 +0000

Olá caro leitor! Estamos aí trazendo mais um artigo para que você seja realmente chamado de “expert” em WordPress quando terminar de ler toda essa coletânea. Estamos tratando sobre temas, especificamente sobre o WP Coda e iremos abordar sobre seu cabeçalho nesse artigo.

A edição do cabeçalho do WP Coda realmente a mais difícil dos três temas que estamos estudando e ainda mais difícil para quem está começando agora nesse assunto, pois envolve muitos elementos de programação e design. Como já foi dito, não é objetivo dessa coletânea ensinar sobre a edição de temas, mas sim a busca de informações para configurações específicas dos temas para WordPress. É claro que sempre aparecem sugestões sobre edição, mas somente para mostrar seu “funcionamento”.

Os arquivos que compõem o cabeçalho desse tema encontram-se dentro da pasta ‘wp-coda\images’ e são os chamados ‘header_bg.png’ e o ‘header_links.png’. Como eu sei disso? Primeiro devido à nomenclatura que o autor usou (o nome header) e segundo no código do tema, mais especificamente nas folhas de estilo (style.css). O cabeçalho do WP Coda tem a seguinte aparência [figura 1]:

Porém olhando em detalhes os dois arquivos, temos:

header_bg.png:
header_links.png:

Calma, seu cérebro não vai dar um nó! Essa divisão existe, pois a segunda imagem vai ajudar no efeito nos botões do cabeçalho, como pode ser conferido na figura 4, no ‘Learn How’:

Não vou explicar detalhadamente o código desse botão dinâmico, feito em CSS, mas basicamente funciona assim:

No código CSS é definida a área do botão. Em nosso tema existem três botões: ‘Download’, ‘Learn How’ e ‘Talk Back’;
Na figura header_links.png estão contidos esses botões: na parte de cima é o que vai ser carregado normalmente e a parte de baixo quando o ponteiro do mouse estiver em cima desse botão, mais especificamente, em cima da área definida no código;
Em resumo e falando de uma forma simples: a parte de baixo da image header_links.png vai ser mostrada quando o mouse passar na imagem da parte de cima, que é carregada quando o WordPress for acessado;

No código CSS também é definido o enquadramento das imagens header_bg.png e header_links.png, formando assim parte do cabeçalho. São esses dois arquivos de imagem que precisam ser editados e salvos com o mesmo tamanho que o original.

Não sou bom de design, mas fiz algumas alterações somente para didática desse artigo [figura 5 e 6]:

Repare que na figura 5 está o cabeçalho normal e na figura 6 com o efeito no botão aplicado. Veja que é possível fazer as alterações, inclusive nas cores, da forma que você quiser. Aproveite e aprenda mais sobre design.

Observação: Eu sei que eu também preciso aprender um pouco mais. Se quiser comentar sobre o meu cabeçalho, sinta-se a vontade.

Outra coisa que é possível reparar na figura 6 é que o “fundo” ficou com uma cor diferente da imagem do cabeçalho. Isso acontece porque no código CSS é definido outra imagem, a body_bg.png, para ficar ‘repetindo’ no fundo do cabeçalho. Com tamanho de Width = 1 e Height = 330, essa imagem é parecida com uma tira e contém as cores da imagem do cabeçalho.

No exemplo desse artigo, quando aplicado, o cabeçalho ficará assim [figura 7]:

Veja que é possível realizar profundas mudanças com um pouco de estudo e prática. Os arquivos que montei e utilizei estou deixando em anexo para você possa baixá-los e verificar por si mesmo. Estão no formato do Photoshop (*.PSD) e espero que possam te ajudar.

Para aqueles que leram a página de suporte do WP Coda à procura de informações sobre edição do cabeçalho vão descobrir que o autor lançou outro tema, chamado WP Coda Blue, onde ele incluiu um arquivo PSD para uma edição completa no design do tema [figura 8]:

É necessário conhecer um pouco sobre a técnica de transformar arquivos PSD em temas do WordPress para tirar um bom proveito desse arquivo. Veja como é realmente interessante esse tema. Aprendemos e estamos descobrindo muita coisa.

Lembre-se: o objetivo dessa coletânea e “abrir o seu apetite” para que você possa saborear o “prato principal”, que a edição e programação de temas, uma coletânea de artigos aqui do Webmaster.pt que te deixará ‘expert’ nesse assunto.

Pensa que acabou? Engana-se, pois no próximo artigo falaremos de outro efeito no botão do cabeçalho, além do cabeçalho das páginas. Não deixe de ler! Qualquer dúvida, sugestão, elogio ou crítica pode fazê-lo nos comentários. Estou ansioso para te ouvir.

Download: Arquivos PSD usados neste tutorial

WordPress Themes – Instalação E Administração Parte9 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

Background Do Twitter Parte 1 – Fundamentos

Lindomar Goking — Thu, 02 Sep 2010 10:26:30 +0000

Olá Pessoal!

O Twitter realmente chegou e mudou alguma coisa em nossas vidas, principalmente nossa forma de relacionamento com os outros na Web. É uma ferramenta/microblog/rede social/bar (?) muito útil em nosso dia a dia.

O que você acha de criar um plano de fundo (background) exclusivo para o seu Twitter?

Para isso você pode utilizar qualquer editor de imagem disponível no mercado, tais como o Photoshop, Illustrator, Gimp, Corel Draw e outros. Na verdade, você poderá utilizar até o Paint do Windows, apesar disso ser desaconselhável.

Mas antes de partir para essas ferramentas, é necessário esclarecer alguns pontos essenciais, para o seu trabalho não seja feito em vão. Também é muito importante você conhecer alguns estilos de backgrounds e também o conceito de temas do Twitter.

Já publicamos um artigo com 100 backgrounds incríveis: 100 Contas Twitter Com Backgrounds Incríveis, que podem ser usadas como fonte de inspiração. Além disso, muitos outros estão disponíveis gratuitamente na internet. Mas é importante que você crie o seu baseado no seu estilo, pensando no que os seus leitores irão esperar de seus tweets.

Podemos fazer uma comparação com o papel de parede do computador. Não vai me dizer que quando você visita alguém não presta atenção nisso? Dependendo da imagem que ali estiver, você vai montando um “perfil” da pessoa, mesmo que errado.

E por isso é necessário tratar com carinho algo tão importante! Essa a proposta dessa pequena série de artigos. Iremos mostrar dicas, melhores práticas, tutoriais de criação e diversas ferramentas, inclusive on-line.

Conceito De Temas No Twitter

Para mudar o background é necessário conhecer o conceito de temas do Twitter, como já foi dito. Mas não se preocupe, pois isso é uma coisa muito simples de ser compreendida:

Tema do Twitter é a combinação de cores e background.

Por isso não adianta preparar um background “bem legal” e deixar as cores totalmente “anormais”, pois seu Twitter vai ficar totalmente “sem noção”, podendo ficar até ilegível. Se você quer ter um Twitter “maluco”, já sabe o caminho, mas caso o objetivo seja outro, então estude uma combinação de cores bem funcional e inteligente.

Gerenciando Temas

Outro ponto importante a conhecer é onde fazer as mudanças necessárias dentro do Twitter. Para isso siga os passos seguintes.

Acesse sua conta no Twitter, clique em Settings e depois em Design:

design" title="settings > design" width="600" height="129" class="aligncenter size-full wp-image-9391" />

Assim será apresentada a tela com as opções de design, com possibilidade de escolher os temas nativos do Twitter:

Basta clicar em qualquer tema disponível que automaticamente as cores e o fundo serão mudados. No momento em que este artigo foi escrito havia 20 disponíveis.

Caso você queria fazer essa mudança manualmente, duas opções estão disponíveis:

Change background image: permite a mudança somente da imagem de fundo, com algumas opções;
Change design colors: permite fazer a mudança nas cores do seu Twitter;

Mudando o Background

Ao clicar em ‘Change background image’ as seguintes opções são apresentadas:

Selecionar Arquivo: permite selecionar uma imagem do seu computador que será usado como background;
Preview: uma pré-visualização do background;
Sem Fundo: clicando aqui, nenhuma imagem será usada;
Tile Background: selecionando essa opção, o fundo irá repetir-se;
Cancel: descarta as mudanças feitas;
Save Changes: salva as mudanças;

Para fazer upload de uma imagem do seu computador, você deve seleciona-la em ‘Selecionar arquivo’ e então clicar em ‘Save changes’.

Vale lembrar que somente a imagem de fundo é mudada, sendo que as cores continuam as mesmas que você selecionou, quer seja por tema do Twitter (automático), quer seja na opção de mudança de cores (manual).

Um exemplo da opção ‘tile background’ aplicado você pode conferir na figura seguinte, usando um fundo do próprio Twitter:

Mudando as Cores

Ao clicar em ‘Change design colors’ as seguintes opções são apresentadas:

Cada um dos quadrados representa uma parte do Twitter que permite mudança na cor, que é selecionada ao clicar nesses quadrados:

É possível selecionar o tipo de cor e suas variações. Se quiser, você pode inserir diretamente o código hexadecimal dela. Assim que selecionada, basta clicar em ‘Done’ para confirma-la.

E assim chegamos ao fim da primeira parte. Não fique triste, pois você irá aprender muito mais nos artigos seguintes. Qualquer dúvida, estamos aí dispostos a ajudar. Um grande abraço e até a próxima!

Background Do Twitter Parte 1 – Fundamentos é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

Joomla – Menu – Favoritos Web – Parte2

Natanael Fornel — Thu, 02 Sep 2010 09:41:25 +0000

Olá, bem vindos a mais um artigo sobre Joomla.

Em nosso artigo de hoje daremos continuidade sobre o item de Menu Favoritos Web aprendendo sobre Disposição Padrão em Categoria. Em nosso artigo anterior aprendremos a criar uma categoria, favorito e a disposição em lista de categorias de favoritos.

Caso se sinta um pouco perdido no decorrer desse artigo, recomendo que dê uma lida em nosso Artigo anterior para que assim não fique com nenhuma dúvida ( mas caso permaneça com duvidas entre em contato via Comentários ).

Bem, tal item de Menu que iremos ver hoje tem a função de exibir uma única categoria de Favoritos Web. Simples não é mesmo ? Mas vamos ao que realmente interessa.

1.- Executamos o WampServer

2.- Abrimos o browser (o de sua preferência) e digitamos http://localhost/nomedapasta/administrator , no caso do nosso artigo nós atribuímos a pasta o nome de Joomla ficando então http://localhost/joomla/administrator. Faça o login normalmente, chegando até o painel administrativo.

3.- Estando novamente em nosso Painel de Controlo iremos fazer tal qual já vimos em nossos artigos anteriores, iremos fazer o seguinte, clicar sobre Menus -> Itens de Menú -> Novo e selecionaremos a opção Hiperligação Interna -> Favoritos Web -> Categoria -> Disposição padrão em Categoria conforme na imagem abaixo.

4.- Chegaremos até o item de menu que é igual aos outros que já vimos anteriormente. Apenas para nosso exemplo , estarei inserindo o Titulo de Disposição padrão em Categoria e Alternativo de descrição-padrao-em-categoria conforme imagem abaixo:

5.- Terminando a configuração dos detalhes de tal item iremos partir para a configuração Básica do Parâmetro que nesse caso não são muitas.

Categoria: Selecionaremos a categoria de Favorito Web que desejamos exibir. (Caso não apareça nenhuma categoria, leia nosso artigo anterior onde explicamos passo a passo como criar uma categoria de Favorito Web)

Exibir ligação para sinal: Selecione se deseja que os endereços (url) do sinal web devem ou não ser exibidos.

Após devidamente selecionadas as opções, teremos algo semelhante ao exibido pela imagem abaixo:

6.- Após inseridas as configurações dos Parâmetros Básicos, iremos checar os Parâmetros de Componente. Parâmetros que servem para dar um pouco mais de “funções” a nossos itens !

Descrição: Se será exibida a descrição ou não do Favorito Web.

Texto em Favoritos Web: Texto que será exibido na página principal do Favorito Web. Costuma-se inserir uma descrição sobre o que o membro / visitante poderá encontrar entre as categorias.

Acessos: Se será exibido um “contador” de acessos

Descrição das hiperligações: Se deseja exibir as descrições das hiperligações (configuradas no momento do cadastro dos sites )

Outras Categorias: Se deseja exibir outras categorias além da selecionada

Cabeçalho da Tabela: Se será exibido um cabeçalho contendo os títulos das colunas em exibição

Alvo: Selecione onde deseja que a hiperligação seja aberta ao clicar sobre ela.

Ícone: Icone para definir tal item de menu.

7.- Realizada todas essas configurações que tal darmos uma olhadinha como ficará ? Para isso, acessaremos nosso Front End e clicaremos sobre o Item de Menu recém criado obtendo um resultado semelhante ao exibido pela imagem abaixo:

Selecionando algumas outras opções dentro dos parâmetros podemos obter vários resultados:

Pois bem é é isso ai pessoal por hoje é só isso meus queridos, espero que estejam gostando de nossa serie de artigos. Os lembro que o que passamos aqui são noções gerais para a utilização das ferramentas.

Aproveito também para agradecer a quantidade de e-mails que venho recebendo, venho atendendo a todos por ordem de recebimento assim que se não recebeu seu e-mail aguarde que em um determinado momento irá chegar !!

Continuem nos visitando e continuem mandando suas sugestões, comentários, críticas que estarei atendendo a todos vocês na medida do possível.

Para sempre serem informados de todos nossos artigos (não só de Joomla) você pode estar assinando nosso Feed e assim ser avisado sempre que houver uma atualização e também pode estar seguindo a um dos colunistas em seus respectivos Twitters para isso selecione o perfil ao lado direito e prontinho, terás acesso a alguns dados do mesmo para contato !!

Nos vemos em nosso próximo artigo onde encerraremos sobre o item de menu Favoritos Web aprendendo um pouco mais sobre Disposição de Envio de Favoritos.

Meus Cumprimentos.

Joomla – Menu – Favoritos Web – Parte2 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

11 Dicas Para Você Reduzir O Bounce Rate

Rui Soares — Wed, 01 Sep 2010 15:30:44 +0000

O Que É O Bounce Rate Ou Taxa de Rejeição?

Um Bounce Rate elevado é um alerta de que o seu site não está sintonizado com os respectivos visitantes. E esse facto pode determinar o insucesso da sua presença online. Vamos analisar o que é o bounce rate, a importância dessa medida estatística e dicas para reduzir um bounce rate elevado.

Em termos básicos, um Bounce é uma visita que acede a uma página do seu site e sai sem visitar outra página. Portanto, é uma vista com um único pageview.



Bounce Rate = número de visitas que visualizaram apenas uma página  /  pelo número de visitas total

Este valor não pode ser interpretado em termos absolutos, porque representa comportamentos diferentes dos visitantes, que nem sempre são negativos. É necessário analisar esta medida em conjunto com outros dados estatísticos e tendo em conta a média para o mesmo tipo de site.

Um visitante acede a uma página do seu site, clica logo de seguida num link para outra página do seu site e sai poucos segundos depois, para nunca mais regressar. Este visitante não foi contabilizado como um bounce.
Um visitante acede a uma página do seu site, estuda detalhadamente o conteúdo dessa página, faz um pequeno intervalo para tomar um café, regressa e, 35 minutos depois de ter acedido à primeira página, clica num link para outra página do seu site. Este visitante foi contabilizado como um bounce. Uma sessão no Google Analytics dura 29 minutos de inactividade. Houve apenas 1 pageview durante a sessão. Contou como bounce.
Um visitante acede a uma página do seu site e sai 5 segundos depois para nunca mais regressar. Bounce. Um visitante acede a uma página do seu site, lê cada palavra do texto dessa página, durante 15 minutos, entusiasmado com a qualidade do mesmo, e sai para regressar todos os dias para ler o último artigo publicado. Bounce.

O facto de ser um valor relativo, não significa que você possa ignorar o bounce rate do seu site ou blog. Se o valor for elevado é exactamente igual ao problema de alguns homens que sofrem de ejaculação precoce. Pense um pouco. É essa a imagem que você quer associar ao desempenho do seu site ou blog? O blog dos 5 segundos…

Análise Comparativa Entre As Diferentes Origens Do Tráfego

Aceda no Google Analitics à opção Origens Do Tráfego. Clique em Todas as origens de tráfego e compare o Bounce Rate ou Taxa de Rejeição entre as diferentes fontes.

Este estudo comparativo pode ajudá-lo a trabalhar melhor fontes de tráfego onde o bounce rate é mais elevado ou a priorizar fontes de tráfego onde o bounce rate é menor. Inclusivamente, permite avaliar o seu investimento em marketing e publicidade. Se você investe tempo e dinheiro numa determinada fonte de tráfego cujo Bounce Rate é substancialmente mais elevado que o Bounce Rate doutras fontes, se não for possível diminuir esse valor, parece-me que a medida mais racional será investir o seu tempo e dinheiro em tráfego de qualidade, ou seja, em fontes de tráfego com Taxas de Rejeição Menores.

Bounce Rate No Comércio Electrónico

Num site duma empresa, que promove os seus serviços ou produtos, ou numa loja online, a taxa de conversão determina o sucesso ou insucesso da presença online, especialmente existindo um investimento em publicidade, como por exemplo no Google AdWords. Uma taxa de conversão abaixo dum determinado valor significa prejuízo.

Ora, para que um visitante aceda

ao formulário ou página de contacto e contacte a empresa
ao formulário de encomenda e submeta uma encomenda dum produto ou serviço
ao processo de checkout da loja online e finalize a compra

é necessário que o visitante clique em mais do que 1 página. Se esse visitante for um bounce, não vai somar na taxa de conversão.

Em qualquer site de comércio electrónico e processo de conversão, temos visualmente um funil:



O visitante acede à pagina inicial. > Seleciona uma categoria. > Acede à página com informação sobre um produto. > Adiciona o produto ao shopping cart. > Finaliza a compra.

Ora, em cada passo deste processo, nós queremos que o visitante dê o passo seguinte. Mas, para perceberem a importância do bounce rate, esse primeiro passo é o NÃO BOUNCE. O visitante, ao ser confrontado na primeiro página visitada com um Call To Action, responde positivamente e clica para aceder à página seguinte. Logo, não bounce. Não rejeitou o seu site.

Um site com um Bounce Rate elevado, está à partida a alienar uma percentagem elevada do seu tráfego. Já sabemos que não é uma valor absoluto. Mas, num site de comércio electrónico, um valor acima de 50% é preocupante. E acima de 35% deve ser objecto de análise.

O problema é fácil de entender. Você não consegue vender um produto a um visitante que não fica sequer 5 segundos no seu site.

Bounce Rate Nos Blogues

O Bounce Rate num Blog é mais elevado do que num site de comércio electrónico. E não é preocupante. Mas, também não significa que você não deva trabalhar para baixar esse valor. Quanto menor for esse valor, maior será a capacidade do seu blog para fidelizar leitores, converter nos links de afiliados, monetizar publicidade com base no modelo Custo Por Mil Impressões (CPM), alcançar os seus objetivos.

Mas, vamos focar a nossa atenção na razão pela qual o Bounce Rate nos blogues é maior do que num site de comércio electrónico.

Nos blogues que publicam 1 artigo diário, não é normal o comportamento do leitor (não é visitante, é leitor mesmo) que acede ao blog para ler o último artigo publicado? E, no dia seguinte, acede novamente para ler o artigo publicado nesse mesmo dia. Este visitante acede TODOS OS DIAS ao blog para ler o artigo publicado nesse dia. E não clica noutras páginas, porque o artigo está publicado na primeira página e porque já leu todos os artigos anteriores… É o visitante PERFEITO. E, no entanto, é um Bounce. Soma mais 1 no bounce rate.

E o comportamento do visitante que acede a uma página do seu blog, porque está pesquisando uma palavra chave no Google e o seu blog apareceu nos resultados orgânicos do Google para essa pesquisa? Leu com interesse o seu artigo, gostou muito, mas como tinha várias tabs abertas com outros sites com informação relevante para a pesquisa que estava a fazer, não clicou noutra página do seu blog. Este visitante até já conhecia o seu blog e visita regularmente. Bounce. Soma mais 1 no Bounce Rate.

No Google Analytics, podemos analisar o bounce rate de cada página clicando em Conteúdo > Principais páginas de destino. Depois, clicamos na página que queremos analisar, na lista que é apresentada.

No drop down menu do lado direito, eu gosto de selecionar a opção Tipo de Visitante, para comparar os dados estatísticos entre entre novos visitantes e visitantes que retornam ao blog. Qual a percentagem de visitantes que retornam nessa página com um Bounce Rate elevado? Qual o tempo médio na página para os novos visitantes?

Também seleciono a opção Palavra-chave, para verificar se há um percentagem relevante de visitantes que chegam a essa página, mas que estão a pesquisar palavras chave que não são relevantes para o conteúdo publicado nessa página. O que é que vai acontecer com esses visitantes? Não vão encontrar o que procuram e obviamente saem logo a correr.

Você ainda pode seleccionar a opção Origem, para comparar o bounce rate entre as diversas fontes de tráfego que trouxeram visitas para aquela página e retirar conclusões.

Relação Bounce Rate E SEO

O Google tem repetido em várias ocasiões que o algoritmo valoriza a felicidade dos usuários que pesquisam no Google. E essa felicidade manifesta-se concretamente através de várias acções:

bookmark do site
fidelização como leitores
links para o site

Em termos gerais, um visitante que acede a uma página e depois a outra e a mais outra tem uma experiência mais positiva do que um visitante que acede a uma página e fecha a tab ou o browser logo de seguida.

Portanto, o Bounce Rate também é um indicador de satisfação. Quanto menor o Bounce Rate, maior a satisfação dos visitantes, do Google e do webmaster…

www.youtube.com/watch?v=rasT-oQW3hY

11 Dicas Para Você Diminuir O Bounce Rate

1. Usabilidade

Um site ou blog com problemas de usabilidade, com um interface de navegação difícil de usar, que não respeita convenções, terá um bounce rate mais elevado do que um site fácil de usar.

Escrevemos um artigo sobre usabilidade e sugerimos que leia as dicas apresentadas nesse artigo:

15 Dicas Para Aumentar a Usabilidade Do Seu Website

2. Tipografia Web

Os visitantes examinam o conteúdo duma página dum site ou blog rapidamente, à procura da informação que procuram. Olham para as imagens, para os títulos e subtítulos, para qualquer texto destacado. E é com base nesse exame rápido que decidem se o texto merece uma leitura mais cuidada e atenta.

Se estudarmos os princípios da tipografia web, podemos apresentar o nosso conteúdo de modo a facilitar a leitura do visitante, seja no primeiro exame rápido ao conteúdo, seja numa leitura palavra a palavra do texto.

Um site ou blog com uma fonte demasiado pequena, com um contraste pobre entre a cor do background e da fonte, com demasiadas palavras por linha e com outros erros de tipografia terá um bounce rate mais elevado por essa razão.

Encontrará nestes artigos dicas importantes sobre tipografia web:

Venda Mais Na Sua Loja Online -- Procure tipografia
Princípios De Tipografia Para Web

3. Páginas De Erro 404

No Google Analytics, aceda a Conteúdo > Páginas principais de destino e clique Em Taxa De Rejeição na lista apresentada. Veja as páginas de erro 404. Qual o Bounce Rate ou Taxa de Rejeição das páginas de erro 404? 100% ?

Se alguém aceder ao seu site e aparecer uma página de erro 404, se essa página não estiver personalizada e não oferecer acções alternativas, o visitante vai sair do seu site. E vai somar mais 1 no Bounce Rate. Leia as nossas dicas para personalizar a sua página de erro 404:

4. Conteúdo

A qualidade do conteúdo do seu site, da informação que você publica, dos serviços e produtos que você está a vender tem um papel decisivo no interesse dos visitantes de explorarem o seu site. Se alguém aceder a um artigo dum blog e não gostar desse artigo ou não encontrar informação útil, dificilmente vai ler outras páginas. Se acederem a uma loja online e o preço dos produtos ou serviços for exorbitante, vão abandonar o barco num só salto.

Outro aspecto importante é a consistência entre o tema do site e o conteúdo publicado. Se o tema do seu blog é nutrição, talvez não seja boa ideia escrever a maioria dos artigos sobre temas diferentes, que não são relevantes para o tema nutrição.

Abro uma excepção para os blogues onde o tema é o próprio autor do blog. Esse autor até pode escrever sobre nutrição, mas como estabelece uma relação de tal forma pessoal com os seus leitores, através da sua foto, dos vídeos que publica, dos artigos que escreve sobre a sua vida privada, o tema nutrição deixa de ser o íman que atrai os visitantes ao blog, passando para um lugar subsidiário. Nestes blogues, não é necessário focar tanto no tema aparente do blog, porque nem sequer é esse o tema principal. Nos blogues onde não existe essa promoção do Eu Autor, é importante escrever artigos que são relevantes para o tema do blog.

5. Velocidade de acesso

Quem é que toma um chá e espera que o seu site entre? A expectativa dos usuários é que o seu site entre rápido. Se o tempo de acesso for muito lento, não vão esperar…

Leias estas dicas para tornar o seu site num Super Ferrari:

6. Palavras Chave

Já abordamos aqui a questão de você analisar as palavras chave que os visitantes estão a pesquisar para aceder às páginas com um bounce rate mais elevado. Se o conteúdo da página não for relevante para as pesquisa que os visitantes estão a fazer, você deve analisar porque razão é que a página está a aparecer nos resultados orgânicos dos motores de busca para a pesquisa dessas palavras chave e tentar afinar o on-site SEO dessa página.

Você poderá colocar um link no topo de página para o conteúdo que esses visitantes estão a procurar, caso seja relevante para a temática do seu site. Alterar o conteúdo dessa página de modo que seja relevante para esses visitantes. Ou otimizar melhor a página para as palavras chave relevantes, de modo a receber visitantes interessados no conteúdo essa página.

7. Title e Meta Description

Leia este artigo para compreender como é que o Google escolhe o título, a descrição e o URL do seu site que aparece nos resultados orgânicos do Google. Esse conjunto de 3 elementos principais chama-se Snippet.

Aprenda A Optimizar A Tag Title Para O Google

Ou veja este vídeo do Matt Cutts:

www.youtube.com/watch?v=vS1Mw1Adrk0

Ora, como é fácil de compreender, se não existir uma correspondência entre esse título e descrição nos resultados orgânicos do Google e o conteúdo da página, o bounce rate vai ser elevado. Os visitantes clicam no site, porque leram com interesse o título e descrição da página no Google, mas depois não encontram a informação prometida.

Outro aspecto importante é a falta de correspondência entre o título dum artigo e depois o respectivo conteúdo. O autor escrever um título sobre o tema A e depois escreve um artigo sobre o tema AB.

Finalmente, não escreva para si. Escreva para os seus visitantes e leitores.

8. Função De Pesquisa

Imagine que um visitante acede a uma página no seu site e não encontra a informação que procura.

Eu consigo imaginar essa situação com facilidade. Visito a Amazon com frequência, dado que tenho vício pela leitura. E normalmente não encontro o livro que procuro na página inicial. Tenho que procurar. Uso quase sempre a função de pesquisa da Amazon. Acho que não seria capaz de chegar ao livro pretendido através do interface de navegação. Experimente você. Aceda à Amazon e procure um livro específico. A função de pesquisa é uma benção de Deus!

Em qualquer site ou blog, a função de pesquisa é uma ferramenta que pode ajudar o visitante a procurar informação. E é mais um instrumento para combater o Bounce Rate.

9. Call To Action

Quem é que tem um Bounce Rate menor? O blogueiro que oferece no fim de cada artigo opções adicionais de leitura ou o blogueiro que obriga o visitante a voltar ao topo de página para procurar outros artigos interessante ou relacionados? A empresa que oferece produtos relacionados, promoções e os produtos mais populares nas páginas de cada produto ou a empresa que entrega ao visitante a responsabilidade exclusiva de encontrar o que procura.

Usa o WordPress? Experimente o Yet Another Related Posts Plugin para exibir artigos relacionados no fim de cada artigo.
Coloque uma lista com os seus artigos mais populares na barra lateral ou no footer.
Publique também uma lista dos artigos mais recentes e dos artigos mais comentados.
No próprio artigo, promova outros artigos já publicados e relevantes, com links para esses artigos.
Edite artigos mais antigos e adicione links para artigos mais recentes e relacionados.

10. Mídia

Uma imagem vale mil palavras.

Adicionar imagens ao conteúdo do seu site ou blog é importante. A leitura forna-se mais fácil, especialmente em artigos longos como este, dado que há pausas para olhar para as imagens e, desde que estas sejam relevantes, não se tornam uma distracção perigosa.

Complementar um artigo ou um tutorial com um vídeo também funciona muito bem. Você prefere ler um livro ou ver um filme?

11. Redes Sociais

Fomentar a interatividade entre o visitante e a empresa ou o autor do blog, através das redes sociais, vai criar um diálogo que é muito importante para o sucesso atual de qualquer presença online.

Você pode:

Conhecer as necessidades e expectativas do visitante.
Estabelecer um meio de comunicação duradouro com esse visitante, através do qual poderá promover novos produtos, serviços ou conteúdos.
Criar relação pessoais que reforçam a identidade entre o visitante e o site ou blog.

Essa interatividade pode ser incentivada através da publicação dos streams das suas conversas no Twitter e Facebook ou das suas fotos no Flickr, através de widgets com os últimos comentários no blog, com a identificação dos usários que mais comentam, com convites no fim de cada artigo aos visitantes para que participem nos comentários.

11 Dicas Para Você Reduzir O Bounce Rate é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

WordPress Themes – Instalação E Administração Parte9

Lindomar Goking — Wed, 01 Sep 2010 14:25:45 +0000

Olá leitor que está se profissionalizando em WordPress! Mais um artigo para aplacar a sede de conhecimento nesse maravilhoso CMS. Nesse continuaremos a tratar do tema WP Coda, que simplesmente promove muitas mudanças no seu blog, transformando-o num completo Web Site. E estamos estudando todas essas mudanças.

Continuando a ler as instruções, o quarto ponto informa que a galeria nativa do WordPress foi mudada para esse tema. Essa mudança se deu devido à instalação do plug-in que veio junto e que segundo o autor é baseado no plug-in Cleaner Gallery do autor Justin Tadlock.

Para quem não sabe o que é galeria do WordPress, leia o artigo WordPress – Adicionar Posts 5 Galeria, onde todas as dúvidas serão sanadas.

A mudança promovida pelo autor realmente deixa um efeito bem legal na galeria, dando uma espécie de Zoom na imagem, deixando-a totalmente visível na tela com o blog ao fundo. Para deixar um exemplo neste artigo, utilizei as fotos do meu casamento e montei uma galeria, que você pode conferir nas figuras 1 e 2:

Na figura 1 é possível visualizar o site com a página ‘Casamento’, exibindo a galeria inserida e a miniatura das imagens. Clicando-se numa delas, é aplicado um zoom na imagem e assim ela exibida cobrindo toda a tela, conforme mostra a figura 2. Nesse caso temos alguns controles destacados:

Fechar: a imagem “diminui” e a galeria volta a ser exibida. Outra maneira de “fechar” a imagem é clicar nela quando os controles ‘anterior’ e ‘próximo’ não estiverem na figura, ou seja, basta clicar com o mouse no centro da imagem;
Anterior: esse botão aparece quando o mouse é “levado” para a esquerda da imagem. Serve para exibir a imagem anterior à atual da galeria;
Próximo: esse botão só aparece quando o mouse é “levado” para a direita da imagem. Quando clicado exibe a próxima imagem da galeria;
Título: exibe o título da imagem, editado das opções da imagem;

Outra particularidade é que não é possível exibir a ‘Página de anexo’ e sim somente o ‘Arquivo de imagem’. Mais detalhes sobre esses dois recursos você encontra no artigo já citado, WordPress, leia o artigo WordPress – Adicionar Posts 5 Galeria e o artigo WordPress – Adicionar Posts 7 Mídias – Página De Anexo.

O ponto 4 do arquivo de instruções (ReadMe – Instructions.txt) dá mais detalhes sobre a galeria, informando inclusive que a opção galeria só funciona com imagens e não com arquivos multimídia. Para quem já leu os artigos citados, sabe que isso é natural do WordPress.

Ainda nesse ponto 4 existe outro detalhe interessante: informa que apenas é preciso inserir a frase



[gallery]

no editor de páginas que a galeria é automaticamente inserida. Realmente funciona, mas isso já é nativo do WordPress e não exclusivo do tema, conforme informa o site do Codex do WordPress .

A última informação do arquivo de instruções diz que:

To get the fancy image zooming effect, put your image(s) in a paragraph with a class name of “gallery”. If you want your image to have a title, put it as the title attribute of the link to the image.

Traduzindo:

Para adicionar o efeito fancy image zooming, coloque uma imagem num parágrafo com uma class chamada gallery. Se você gostaria que sua imagem tivesse um título, adicione-o ao atributo title do link.

Esse efeito a qual ele se refere é o mesmo efeito de zoom da imagem na galeria. É dito que existe a possibilidade de adicionar esse efeito a qualquer imagem da página, mesmo não estendo numa galeria, assim como mostram as figuras 3 e 4:

Na figura 3 repare que é uma página comum com duas imagens. Foram feitos os ajustes necessário para que, quando a imagem for clicada, utilizar o efeito de zoom da galeria, conforme mostra a figura 4. Repare que os controles ‘Anterior’ e ‘Próximo’ não existem.

As mudanças necessárias devem ser feitas no código xHTML da página [figura 5]:

Repare que assim como diz a instruções, a imagem está num parágrafo com uma class chamada gallery (em amarelo) e que para aparecer o título é necessário editar o title do link
(em verde). Veja que a imagem ‘17.jpg’ (da figura 4) também tem o atributo title=”Casal Feliz!” na imagem, porém o que prevalece é o title=”Casal Feliz e Apaixonado!” do link.

Esse efeito zoom realmente é bem interessante. Faça os testes necessários e aprenda o máximo que puder. Estamos aí para tirar qualquer dúvida. No próximo artigo vamos abordar o cabeçalho desse tema. Não deixe de ler! Até lá!

WordPress Themes – Instalação E Administração Parte9 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

9 Temas Gratuitos Para O WordPress 3

Lindomar Goking — Tue, 31 Aug 2010 13:17:29 +0000

O novo WordPress 3.0 vem recheado de recursos já mostrado em outro artigo aqui no Webmaster.pt, porém muitos estão querendo temas para aproveitar esses recursos e que sejam mais compatíveis. Por isso essa lista foi feita. Aproveite!

WordPress Theme Covenant

Pronto para o WordPress 3.0 com recursos como sliders em jQuery, menus e thumbnails customizados, adsense, banner ads, página de opções do tema e outros. Pronto para sistema de notícias e blog de jogos, filmes, seriados e outros.

WordPress Theme Mystique

Não deixando em nada se comparado aos temas comerciais, o Mystique inclui widgets, diferentes estilos de layout para páginas e uma avançada interface para as opções do tema.

WordPress Theme Magazine Basic

Com uma lista enorme de recursos, esse tema ainda inclui otimização para SEO, 100% de validação do código xHTML, além das funcionalidades do novo WordPress 3.0.

WordPress Theme Shaken Grid

Tema perfeito para galeria de fotos ou mostrar seu portfólio. Entre seus recursos está a capacidade de escolhe esquemas de cores, usar widget, o novo sistema de menus do WordPress 3 e muito mais.

WordPress Theme The Morning After

Com um layout estilo magazine esse tema inclui widget customizados, área de personalização, além de recursos do WordPress 3, como Posts customizados.

WordPress Theme Voidy

Tema usado pelo próprio autor, com um design claro e limpo e com diversos recursos, sendo um deles o sistema de menus do WordPress 3.

WordPress Theme The Erudite

Com um layout e recursos voltados especialmente para escritores, esse tema ainda inclui o sistema de menus do novo WordPress 3.

WordPress Theme Florance

Bem alegre e descontraído, esse tema inclui muito recursos que seus usuários irão adorar.

WordPress Theme Feed Me, Seymour

Tema refeito para suporte o novo WordPress 3 e com diversos outros recursos. Seu layout lembra um leitor de Feed RSS.

9 Temas Gratuitos Para O WordPress 3 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor: