sábado, 29 de janeiro de 2011

Google privilegia conteúdo original e de qualidade

googleOntem, vários sites noticiaram uma importante mudança no algoritmo do Google, que irá priorizar páginas com conteúdo original nos resultados de busca.
Essa informação foi confirmada por Matt Cutts, engenheiro-chefe do Google, em seu blog pessoal e no blog oficial do Google.
Segundo o IG Tecnologia:
"Como o spam na web diminuiu ao longo do tempo, a atenção agora está em sites com conteúdo superficial ou que copiam outros", diz Matt Cutts, engenheiro-chefe do Google.
Já no O Globo online, encontrei:
A Google lançou uma alteração em seu algoritmo de buscas na web cujo efeito será elevar a classificação de sites que publiquem conteúdo original em detrimento de outros que simplesmente copiem esse conteúdo.
Com isso, esses sites originais aparecerão antes nos resultados de busca, para benefício dos internautas, que certamente preferem obter informações direto da fonte.
Isso quer dizer que sites que copiam e publicam artigos de outros ou mesmo os que possuem um conteúdo superficial e de baixa qualidade, sofrerão quedas no ranking de resultados em buscas feitas através do Google.
Explicando mais claramente, será o fim dos kibadores ;)
  1. Google lança mudanças no algoritmo de busca – Digital e Mídia
  2. Google ajusta algoritmo para priorizar conteúdo original na busca – IG Tecnologia
  3. Confirmed: Google's Content Farm Algorithm Live! Sites Are Dropping! – Search Engine
  4. Algorithm change launched -  Matt Cutts
Acredito que essa mudança,  só vem confirmar a preocupação da gigante de Mountain View em oferecer o que há de melhor na internet. E, para quem - como eu - já lutou muito contra o plágio na Blogosfera, traz alívio e a gratificante sensação de justiça.

sexta-feira, 28 de janeiro de 2011

Como colocar o contador Histats no Blogger

histats-counterApós fazer um post sobre o Histats - Histats - web analytics em tempo real - notei que vários leitores tiveram dificuldade para instalar o código de rastreamento. Sendo assim, resolvi fazer um tutorial explicando, passo-a-passo, como configurar o Histats.
Como se registrar no Histats
  1. Para fazer o cadastro, clique aqui. Preencha todos os campos solicitados.
  2. Na página seguinte, coloque os seus dados e configure o fuso horário.
  3. Leia e aceite os termos de uso
  4. Aguarde um email de confirmação do registro
  5. Caso você não receba o email, verifique a caixa de spam
  6. Clique no link de confirmação, volte ao site e faça login
Como adicionar um site ou blog
  1. Clique em add a website e preencha os campos com os dados do blog
  2. Ajuste o fuso horário e os demais dados.
  3. Em Stats visibility, escolha se as estatísticas ficarão visíveis aos visitantes
  4. Aparecerá então o painel de controle. Clique sobre o endereço do blog
Como colocar o contador do Histats no blog
Para que o Histats consiga medir os dados de acesso do seu blog, será preciso usar um código de rastreamento. Ao clicar no endereço do blog, aparecerá um sumário. Clique na aba “counter code” para configurar o contador de acessos.
histats-code
Na janela seguinte, clique em “add new counter” O Histats oferece muitos modelos de contadores. Escolha um deles, clicando sobre o modelo desejado. Depois, configure o que deverá ser mostrado no display do contador e clique em “save”
histats-counter
Na próxima página, clique sobre o número do contador e copie o código de rastreamento, que aparecerá logo abaixo.
No Blogger, entre em “design” e clique em “adicionar gadget”. Escolha o gadget “html/javascript”, cole o código do Histats e salve.
Como usar um contador invisível
  1. Clique na aba “counter code”>add new counter.
  2. Procure pela aba “hidden”
  3. Clique sobre “invisible counter”
  4. Clique em “save”
  5. Clique sobre o número do contador e copie o código
  6. Cole no Blogger
As principais ferramentas do Histats
Para verificar as estatísticas, basta navegar pela barra lateral esquerda.
histats-panel-control
Vou explicar o que quer dizer cada link da barra de ferramentas do Histats:
  1. Summary – mostra um resumos das estatísticas
  2. Users online – mostra os usuários online em tempo real
  3. Dayly stats – estatísticas do dia, em tempo real
  4. Monthly by day/month – estatísticas mês a mês
  5. Last 120 days – estatísticas dos últimos 120 dias
  6. Sources Overview – resumos das fontes de referência
  7. Referring Sites – sites que mais enviaram visitantes
  8. Search Engines – motores de busca e palavras-chave
  9. browsers / os / lang / – tipo de navegador, sistema operacional e idioma dos visitantes
  10. Geolocation – localização geográfica dos visitantes 
  11. Traffic by Url – tráfego por uRL
  12. Traffic by Title – tráfego por título
  13. Click count  - cliques no contador
Em usuários online, dá para descobrir muita coisa importante. Notem que existe um ícone com play e pause para controle das visualizações.
Em search engine, aparecem as palavras-chaves que foram usadas pelos visitantes - através dos motores de busca - para chegarem até o blog. É aí que vocês devem prestar muita atenção, a fim de saberem como o visitante se comporta.
search-engine
Basicamente é isso. Mexam no Histats, façam testes e descubram o quanto esta ferramente pode ser útil para potencializar seu blog.
RT image

quinta-feira, 27 de janeiro de 2011

Histats - web analytics em tempo real

web-analyticsEu gosto tanto de testar serviços do tipo contador de estatísticas, que aqui no blog tem até um marcador somente para posts com esse tema.
Para quem não sabe, web analytics é o processo de medição, coleta, análise e a produção de relatórios de dados de navegação e interação com o objetivo de entender e otimizar o uso dos sites e páginas na Internet (Wikipedia)
Parte da boa indexação deste blog, aconteceu graças à análise sistemática dos dados de navegação, especialmente através do que os visitantes digitavam nos mecanismos de busca (Google, Bing e etc) para chegarem até aqui.
O mais famoso e respeitado serviço de web analytics continua sendo o Google Analytics, mas ele tem uma limitação que muito me incomoda: não é possível saber exatamente a frase digitada pelo visitante e nem o posicionamento do post no ranking do Google. (se alguém souber como fazer isso, por favor, me avise)
Por causa disso, sempre tive um segundo contador. Usei por um bom tempo o Histats, mas ele também tinha limitações. Depois passei para o inesquecível Woopra, só que ele passou a ser pago e muito caro. Experimentei comprar uma licença do GetClicky, mas depois de quase 1 ano, notei uma discrepância de valores ( para menos) se comparado ao Analytics. Não renovei a licença e fiquei órfã.
Ontem resolvi visitar novamente o Histats e qual não foi minha surpresa ao descobrir que o site melhorou muito e que agora apresenta as estatísticas em tempo real, além de mostrar exatamente o que foi digitado e como os posts aparecem no Google.
Vejam no exemplo abaixo, os dados de acesso via Histats.
histats
Percebam que ao lado da palavra-chave, existe uma setinha. Clicando nela, chego em:
histats
Ou seja, sei exatamente o que o visitante escreveu e qual a posição do blog.
Além disso, ainda podemos verificar o número de usuários online, de onde eles vieram, quanto tempo ficaram no blog, se clicaram em outros links e etc, em tempo real:
histats
E tudo isso é oferecido GRATUITAMENTE – completely free!
histats
Saber o comportamento dos visitantes, os posts mais acessados, o rank de indexação e etc, é obrigatório para quem deseja profissionalizar seu blog e/ou monetizá-lo. Não tem como escapar disso. Mãos à obra! Para fazer o registro,  clique aqui e para aprender a usa´-lo com o Blogger, acesse Como colocar o contador Histats no Blogger

quarta-feira, 26 de janeiro de 2011

Palestra sobre profissionalização de blogs

Durante a Campus Party 4, aconteceu uma palestra muito interessante sobre profissionalização de blogs,  ministrada pelo Thiago Mobilon (@mobilon), fundador e editor-chefe do Tecnoblog – um dos blogs de tecnologia mais importantes do Brasil.

Pra nossa sorte, a palestra foi gravada  em vídeo e disponibilizada no site Ustream.

Thiago compartilha suas experiências como blogueiro, apontando os caminhos para a profissionalização. Dentre as várias dicas de estruturação, ele fala sobre a importância de um  design harmônico e organizado, com identidade visual exclusiva.

Não deixem de conferir, pois trata-se de um blogueiro que pode falar com propriedade sobre o tema e que tem muito para ensinar. #ficadica

Profissionalização de blogs, por Thiago Mobilon - Campus Party 2011 PARTE 1
Profissionalização de blogs, por Thiago Mobilon - Campus Party 2011 PARTE 2
Fontes: Códigos Blog e RCastrezana (Ustream)

Como colocar recursos nos posts via HTML

filetype_htmlAntes de mais nada, quero adiantar que este post é mais voltado a usuários que já possuem alguma noção sobre HTML e CSS. A idéia é auxiliá-los a colocar novos recursos em seus templates, mostrando onde ficam alguns códigos essenciais e exclusivos do Blogger.
Abordaremos os códigos que são responsáveis pela área de postagem, através das “divs”, que são tags HTML que delimitam espaços dentro de um layout.
Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id. Fonte: HTML.net
Para incluir anúncios, mensagens, botões do Twitter  ou quaisquer outros códigos/recursos nas áreas que englobam os posts, deve-se seguir estes critérios:
NA PRIMEIRA LINHA DO RODAPÉ DOS POSTS
<div class='post-footer-line post-footer-line-1'>
Código
</div>
NA SEGUNDA LINHA DO RODAPÉ DOS POSTS
<div class='post-footer-line post-footer-line-2'>
Código
</div>
ABAIXO DO TÍTULO
Código
<div class='post-header-line-1'>
ENTRE O TÍTULO E OS POST
<div class='post-header-line-1'>
Código
NO FINAL DO POST
Código
<div class='post-footer'>
Isso significa que, por exemplo, se eu quiser colocar um anúncio entre o título do post e o texto, eu devo procurar dentro do HTML do template por:
<div class='post-header-line-1'>
E colocar o código do anúncio logo embaixo dessa linha. Vejam estas imagens:
código-anuncios
anuncios
Percebam que o código do anúncios foi inserido entre o título e o post, ou seja, logo embaixo de <div class='post-header-line-1'>
Para encontrar as divs dentro do HTML, é preciso marcar a caixa “expandir modelos de widgets” e usar o Ctrl+F do teclado.
procurando-as-divs
Passemos agora para uma outra imagem, também aqui do Dicas Blogger:
classes
A área onde aparecem o meu nome, data e marcadores corresponde a <div class='post-header-line-1'> e fica logo embaixo do título da postagem. Nesse caso, ao contrário do anterior, o código foi inserido ANTES da linha 'post-header-line-1'.
Já a área onde aparecem os ícones de compartilhamento e os comentários, correpondem a <div class='post-footer-line post-footer-line-1'>, que é a primeira linha do rodapé dos posts, também chamado de post-footer.
Para modificar a disposição do nome do autor, marcadores, data e link para os comentários, basta ir movendo os códigos correspondentes, dentro das divs.
AUTOR DOS POSTS
<span class='post-author'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/> <data:post.author/>
          </b:if>
        </span>   
MARCADORES
<span class='post-labels'>
          <b:if cond='data:post.labels'>
            <data:postLabelsLabel/>
            <b:loop values='data:post.labels' var='label'>
              <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +  &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop>
          </b:if>
        </span>
A DATA
<b:if cond='data:post.dateHeader'>
<span class='date-header'>em <data:post.dateHeader/></span>
</b:if>
COMENTÁRIOS
<span class='post-comment-link'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <b:if cond='data:post.numComments == 1'>1 Comentário
    <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a>
    </b:if>
    </b:if>
    </span>
Vamos para um exemplo prático. Supondo que eu queira colocar os marcadores logo abaixo do título das postagens. Nesse caso, eu irei deslocar o código dos marcadores, para cima da div <div class='post-header-line-1'>
exemplo
Para aplicar estilos em CSS, é só encontrar o seletor de cada um deles. Exemplo:
<span class='post-comment-link'>
correspondente:
.comment-link
Claro que tudo isso irá variar de template para template. O segredo é, usando o Crtl+F, procurar a linha de códigos que mais se aproxima das que postei aqui e testar SEMPRE em um blog de testes, para evitar de fazer bobagem no blog principal.
Acessem os artigos abaixo, que mostrarm ótimos recursos que podem ser empregados, usando o tutorial de hoje:

segunda-feira, 24 de janeiro de 2011

Bitw.in Sorteios – Twitter e Google Buzz

bitw.inRecentemente, foi lançado o Bitw.in Sorteios. Um site com uma função muito simples e objetiva: Realizar sorteios poderosos no twitter e no Google Buzz, permitindo a você ter mais controle sobre quem pode participar do seu Sorteio de forma simples e prática.
Para utilizar o Bitw.in Sorteios, entre na página inicial e clique em Criar Sorteio, faça login através de sua conta no Bitw.in, Twitter, Google Buzz ou Facebook e defina um titulo para o seu sorteio, a quantidade de sorteados, o que o participante deve fazer para participar do seu sorteio e as demais opções, que são completamente opcionais, como agendar um sorteio, ignorar determinados usuários do sorteio e postar uma mensagem logo após a completa realização do sorteio.
Vale ressaltar que, por usar novas tecnologias, ao preencher o formulário e clicar no ‘Criar Sorteio’, deve-se aguardar alguns instantes enquanto o sistema processa o Sorteio, terminando após o redirecionamento para a página de resultados.
bitw.in
Se você quiser ainda mais personalização, pode usá-lo junto ao Bitw.in Dominios, que permite que você tenha um encurtador de urls em endereço personalizado, como no caso do Encurtador pessoal http://fjmota.tk .
O Sistema foi criado por mim, e quaisquer dúvidas serão respondidas nos Comentários.
Sobre o autor: Fernando Jorge Mota (@fjorgemota) tem 15 anos, é estudante, programador, editor do Blogueiros na Web e criador do encurtador de URLs Bitw.in

domingo, 23 de janeiro de 2011

Aprenda a mexer em códigos facilmente

notepadHoje eu vou dar uma dica de ouro pra quem gosta de mexer com códigos em geral, seja HTML, CSS, javascript e etc, mas que também serve para quem precisa apenas fazer edições nos códigos dos gadgets
Trata-se do aplicativo Notepad++, um editor de textos cheio de recursos e que trabalha com diversas linguagens de programação.
Notepad++ é um editor de texto e códigos fonte completo que suporta as mais diversas linguagens de programação e, sendo assim, uma ótima alternativa ao bloco de notas.
Dessa forma, com uma ferramenta mais avançada e versátil que outros editores de texto, você tem suporte às linguagens C, C++, Java, C#, XML, HTML, PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, TeX, TCL, Assembler, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell e InnoSetup. Fonte: Baixaki
Um dos recursos que pode ser muito útil para qualquer blogueiro, independente do nível de conhecimento, é o de substituir trechos dos códigos de forma automática.
Vamos para um exemplo. No post anterior - Pop-up assinar feeds – divulguei um código javascript para colocar uma janela pop-up, incentivando os visitantes a assinarem os feeds do blog. Nesse código, é preciso substituir a frase “nomedofeed” três vezes. Experimente encontrar tal frase no meio daquele código imenso, quando já foi colado no gadget HTML/javascript. Complicado, né?
Pra quem não tem o Notepad, um Crtl+F do teclado ajuda, mas mesmo assim é necessário digitar o nome do feed 3 vezes. Quando forem 20, 30 substituições – como em um template, por exemplo -  o gasto de tempo pode ser grande.
Agora vejam na imagem abaixo o que o Notepad++ é capaz de fazer.
notepad-substituir
Sim, com poucos cliques ele substitui trechos de códigos de uma só vez. No exemplo acima, escolhi substituir “nomedofeed”, pela URL final do feed do Dicas Blogger.
Para fazer substituições de trechos dos códigos, siga estes passos:
  1. Instale o Notepad++
  2. Abra o aplicativo e cole o código que será modificado
  3. Dê um Crtl+F com o teclado
  4. Clique na guia “substituir”
  5. Em “localizar” escreva o trecho que deverá ser substituído
  6. Em “substitua por”, escreva o novo trecho
  7. Clique em “Substituir todos”
Depois, é só copiar o código já modificado e colar no gadget HTML/javascript.
Para baixar o Notepad++, acesse um dos links abaixo:
  1. Notepad++ – site do desenvolvedor
  2. Notepad++ – Baixaki
  3. Notepad++ portable – Baixaki
Para editar templates, é só colar o código HTML inteiro no Notepad++, fazer as alterações e salvar no formato .XML; mas para isso eu ainda prefiro o próprio editor do Blogger que me permite ir editando e visualizando as mudanças ;)