Webord.net: WordPress, jQuery, SEO, .htaccess, xHTML, CSS, Desenvolvimento, Design

Esses dias, eu estava fazendo a avalização de vários sites que rodam em WordPress, e fiz um teste com 100 sites que acesso frequentemente e percebi, que apenas 1 em cada 10 faz o Cache de maneira eficiente.

Resolvi deixar aqui 3 dicas muito úteis para melhorar a performance do seu site com o .htaccess.

O .htaccess é uma forma bem simples de deixar comandos para o seu Apache, então faremos algumas configurações para os arquivos que estão em nosso servidor para que os Browsers interpretem-os da forma correta, sem redundância.

Configurar ETags

Bom vamos a parte interessante do artigo, primeiro vamos ver como acabar as ETags, que aparecem nos testes de Velocidade do YSlow e do Google Speed (ambos plugins para Firefox).

Abram o arquivo .htaccess que deve se encontrar na raiz do seu servidor. Caso ele não esteja lá você pode fazer o download no final do artigo.

Adicione o código a seguir, no final do arquivo:

Header unset ETag
FileETag None

Salve o arquivo e suba-o para o local onde ele se estava.

Configurar o Header Expire

Esta é uma parte muito interessante de se trabalhar com o cache, pois existem várias formas de se fazer, mas duas são bem simples de se fazer e muito efetivas, e como são, então tome cuidado para não deixar a data para um arquivo dinâmico, muito distante, pois pode te trazer problemas, como aconteceu no Guanabara.info que coloquei 10 dias e muitos usuários reclamaram de que estavam vendo conteúdo atrazado.

Bom se você não usa um sistema de gerenciamento de conteúdo e não tem problemas com setar uma data específica para que os arquivos expirem, segue a primeira solução:

Header set Expires "Sun, 15 Feb 2020 20:00:00 GMT"

Mas as vezes é necessário fazer com que esta data seja apenas para alguns arquivos, então vamos dar uma melhorada no código e teremos:

<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf|pdf)$">
Header set Expires "Sun, 15 Feb 2020 20:00:00 GMT"
</FilesMatch>

É bem simples de se configurar, mas tem uma grande desvantagem, a data é fixa, e não vai variar a não ser que você modifique o arquivo.

Existe uma outra maneira que altera esta data de maneira relativa, segue como contruir o código no .htaccess para que isso aconteça, veja abaixo: Leia Mais

Olá galera como eu havia prometido, segue uma listinha com os artigos sobre o segundo dia do Curso se SEO da MestreSEO.

Neste segundo dia nos foi explicado o que há de pior do SEO da internet, o Black Hat, e muito das melhores e mais atuais práticas.

Só para deixar claro que se você realmente quer aprender eu recomendo à você a Inscrição no Curso, pois com certeza existe muitas dicas que só com a prática você consegue, e o Fabio Ricotta passou de mão beijada.

7. Black Hat SEO

• O pior do SEO, o Black Hat! [Português]
• Entendendo os crimes do Chapéu Preto [Português]
• Um pouco mais sobre o Black Hat [Português]
• Quais são as técnicas de Black Hat? [Inglês]

8. Métricas de SEO

• As métricas vão muito além de análise On-Page! [Português]
• SEO, as Métricas que realmente importam [Inglês]
• Entenda mais sobre Métricas [Inglês]
• Quais sites ajudam com métricas? [Inglês]

9. Web Analytics e SEO

• Como se inscrever no Google Analytics [Inglês]
• Segmentando dados no Google Analytics [Português]
• Possibilidades de uso, oficial do Google [Português]
• Analizando um pouco de dados do Google [Inglês]
• Otimizando dados avançados do Google Analytics [Inglês]
• Um pouco mais sobre Análize de dados [Inglês - SlideShare]

10. Social Media Optimization

• 5 pequenas Regras do Social Media [Inglês]
• Será o SMO o novo SEO? Parte 1 [Inglês]
• Será o SMO o novo SEO? Parte 2 [Inglês]
• Qual é a real importância do SMO? [Português]

11. Resultados Universais

• Antes de mais nada, uma receita para resultados Universais [Inglês]
• Um pouco sobre o Resultados Universais [Inglês]
• O que são Resultados Universais? [Português]
• Estudando Resultados Universais no EUA [Português]
• Agora vamos ao Brasil, como são os Resultados Universais [Português]

12. Local Search SEO

• Como tirar proveito do LocalSearch, com o MestreSEO [Português]
• 3 Formas de melhorar seu LocalSearch [Inglês]
• Como Otimizar para o Local Search? [Inglês]
• Fatores para melhorar no Local Search ou Cair [Inglês]

13. Vertical Search SEO

• Alguns exemplos de Vertical Search [Inglês]
• Mais um pouco sobre Vertical Search [Inglês]
• O futuro do Vertical Search, pela Yahoo!

Carece de fontes, caso conheça ou queira achar bons artigos, indique para nós nos comentários.

14. Ferramentas de SEO

• 20 Ferramentas de SEO, indicadas pelo MestreSEO [Português]
• Mais ferramentas de SEO [Português]

15. Real Time Search

• Um pequeno vídeo sobre o Real Time Search [Inglês]

Por ser um assunto muito recente ainda carente de fontes, caso possa indicar.

16. Busca Personalizada

Infelizmente este conteúdo é muito específico, e os artigos sobre o assunto são muito escassos, contudo o curso é uma fonte de informações muito interessantes.

17. Fatores de Rankeamento

• Quais são os fatores de rankeamento conhecidos? [Inglês]
• Será que o Bounce Rate virá a ser um Fator de Rankeamento? [Português]
• Um geral de Fatores de Rankeamento, da SEOmoz [Inglês]

Galera é basicamente isso, deu muito trabalho montar o artigo e ainda assim falta muito para chegar ao que é passado no Curso do MestreSEO.

Agora falando um pouco da minha opinião sobre o geral do curso. Achei a comida fantástica, e também muito farta parabéns, sem falar no local que era maravilhoso, muito bem organizado e limpo.

Houve um problema com a internet que deixou o Fabio Ricotta e irritado e logo os organizadores tomaram as devidas providências, nada que pudesse comprometer a qualidade do Curso.

Em suma foi com certeza um dinheiro MUITO bem investido, espero poder contribuir com algo para a comunidade como a galera do MestreSEO vem fazendo.

PS: Galera tem alguns tópicos que não estão completos mas pretendo preenche-los assim que achar algum artigo de qualidade sobre o assunto, ou quanto alguém me mandar uma dica.

Obrigado, e compartilhem!

Estou no Curso de SEO do MestreSEO, fiz um comentário sobre a possibilidade de acabar com o Spam no seu site bloqueando o acesso ao arquivo de envio de comentários para quem não for comentar diretamente da URL do seu site. Porque normalmente quem faz Spam mesmo usa programas para poder enviar comentários em massa.

A forma de fazer este bloqueio é bem simples e deve ser feita por .htaccess, como faz? Leia Mais

Existem várias maneiras de se fazer isso, porém hoje irei falar sobre apenas uma delas.

Já vi muitas pessoas tendo problemas para, por exemplo em Blogs, fazer thumbnail de imagens para ilustrar o artigo, e esta imagem deve ter um tamanho fixo.

Bom este é um problema sério, porque se em um blog o usuário que normalmente não é uma das mentes mais brilhantes, então podemos imaginar que ele não deve saber mexer com imagens e provavelmente vai colocar imagens em tamanhos esdrúxulos, que vão acabar com o design que você havia desenvolvido.

Para acabar com este problema basta você tem que usar PHP, e desta vez iremos usar um script feito pelo Tim McDaniels o TimThumb. Ele suporta imagens em .gif, .png e .jpg, sendo assim vou explicar como esse simples código pode ser usado.

Então primeiramente você deve verificar se o seu o seu servidor permite que você faça tais modificações com PHP, alguns servidores não permitem algumas funções da linguagem pois elas consomem muita Memória do servidor, para que isso não aconteça entre em contato com o suporte do seu e peça para que liberem o uso da livraria GD, de manipulação de imagens. Se não funcionar apenas peça para que liberem o uso do timthumb.php pois você gostaria de usá-lo. Lembre-se de pedir para que façam isso apenas na sua conta, se não eles não irão fazer.

Agora que nosso acesso foi liberado, siga até o seu FTP e crie uma pasta e re-nomeie-a para cache após feito isso você deve mudar as permissões desta pasta para 777, onde você permite que sejam gravados dados dentro da pasta.

Após feito isso coloque na pasta raiz desta que você acabou de criar, o arquivo timthumb.php.Mude agora as permissões desta pasta raiz para 777.

Agora vamos para parte onde iremos usar este arquivo para redimensionar imagens.

É muito simples, ao invés de usar o link comum da imagem iremos trocar por um parecido com este:

timthumb.php?src=/imagem/qualquer.jpg&h=150&w=150&zc=1&q=100

No link acima estamos passando alguns parâmetros para o arquivo PHP, eles são:

• src : URL
• h : Altura
• w : Largura
• zc : Aumentar e Cortar [0 ou 1]
• q : Qualidade [0 até 100]

Dessa forma podemos passar para o script algumas informações como se você deseja que ele aumente sua imagem e corte para cortar exatamente nas proporções desejadas, caso contrário ele apenas irá redimensionar e você terá uma imagem desfigurada quando esta mudar de proporção.

Dicas ao usar o Timthumb.php

Para fazer um melhor uso do script é importante fazer algumas coisas, como por exemplo, habilitar o cache colocando em seu .htaccess:

RewriteEngine on
RewriteRule .* - [E=HTTP_IF_MODIFIED_SINCE:%{HTTP:If-Modified-Since}]
RewriteRule .* - [E=HTTP_IF_NONE_MATCH:%{HTTP:If-None-Match}]

Não tente usar imagens de outros sites, porque não irá funcionar. Apenas imagens em seu servidor serão redimensionadas corretamente e não coloque o arquivo timthumb.php na raiz do seu site, coloque-o dentro de uma outra pasta, pois a necessidade de usar o nível de permissão 777 torna seu servidor vulnerável.

Ola galera, mais uma vez estou aqui trazendo um artigo que pode ser interessante para a maioria dos desenvolvedores, pois é uma maneira de rotacionar textos em todos os navegadores sem ter que fazer uso de nenhum tipo de imagem, o que torna o site bem mais leve.

Quando eu falo todos os navegadores é porque existe uma maneira de fazer funcionar no Internet Explorer também.

Para rotacionar textos no Firefox e em outros navegadores que tem os padrões de CSS atualizados é muito simples rotacionar qualquer tipo de objeto na tela (Webkit e Firefox 3.5), basta utilizar uma propriedade e falar quantos graus devem ser modificados, da seguinte forma:

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);

Bem simples, porém como sempre temos um problema, chamado IE.

Que no meu ver não é tão ruim assim se você você estiver disposto em aprender como solucionar os seus problemas. São muitos mas boa parte deles já tem um bom Hack para consertar, basta ter interesse.

Para que rotacionar elementos funcione no Interent Explorer basta você usar os filtros que são fornecidos pelo MSDN no seu banco de dados para desenvolvedores.

No caso iremos usar o BasicImage, que é um filtro que te permite fazer vários tipo de manipulações com elemento, tipo transformá-lo em Preto e Branco.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Bom estermos usando a propriedade rotation do filtro, que nos permite girar o elemento em 4 ângulos diferentes com 4 inteiros diferentes, sendo eles: 0, 1, 2 e 3 e rotacionando em 0, 90, 180 e 270 graus respectivamente.

Essas propriedades só irão funcionar em elementos que tenham a propriedade de bloco, ou seja, para elementos de texto, como um span será necessário adiconar a seguinte propriedade ao elemento em CSS:

display:block;

Colocando em Prática os conhecimentos novos

Eu estava lendo um pouco do CSS-Tricks, um maravilhoso site sobre CSS, e me deparei com a dica de usar sprites para fazer as data dos artigos colocados no blog, para aqueles temas que usam um tipo de pequeno calendário para exibir a data.

Fiquei intrigado com a idéia, porém achei que era meio ruim para um site de longo prazo, que tem sei la uns 8 ou 9 anos de existencia, pensei que seria melhor apenas rotacionar os elementos. Mas ai me veio a idéia de que teria o Internet Explorer para me atrapalhar, e dias depois descobri o banco de dados para desenvolvedores da MSDN, e este tornou a idéia possível.

Então como fazer é bem simples, vamos aplicar o que aprendemos mais acima, vamos criar um código da seguinte forma:

<div class="data">
  <span class="dia">07</span>
  <span class="mes">Dez</span>
  <span class="ano">2009</span>
</div>

Após feito isso iremos adicionar um pequeno código CSS para que fique na posição que desejamos, e é claro adicionar a rotação:

<style type="text/css" media="screen">
	* { margin: 0; padding: 0px; outline:none; border:none; }
	body { padding:20px; font-family: Arial, Helvetica, sans-serif; }

	.data { background-color:#dedede; color:#3e3e3e; float:left; position:relative; padding:40px 5px 0px; }
	.data .mes { text-transform: uppercase; font-size:25px; }
	.data .dia { font-size:36px; line-height:45px; position:absolute; left:5px; top:0px; }
	.data .ano { display:block; font-size:12px; position:absolute; right:-5px; top:15px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);-o-transform: rotate(90deg);
 }

	div.footer { position: absolute; bottom:0px; width: 95%; height:30px; padding: 15px 2%; border-top:1px solid #e1e1e1;}
</style>
<!--[if IE]>
	<style>
		.data .ano { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); right:2px!important; top:8px!important; }
	</style>
<![endif]-->

Após adicionado este CSS deve ficar como na imagem abaixo:

Você pode dar uma olhada se funciona no seu navegador, caso não funcione da maneira que deveria, por favor deixe um comentário com as informações do seu navegador

Estes dias eu comecei a desenvolver um tema chamado de DevStart, o qual vou disponibilizar aqui no blog, e me deparei com um problema ao usar esta função maravilhosa do WordPress.

A função body_class(); é muito útil quando você tem que desenvolver um tema e gostaria de fazer um pouco de dinamismo nas cores, por exemplo, pois colocando-a dentro da tag <body> adicionamos classes à tag que dizem algumas informações sobre que página o usuário está visitando, e desta forma podemos aplicar o devido CSS.

O problema que eu me deparei ontem quando comecei a implementar esta função, foi que ela adiciona todo o texto class="classes", e isso é ruim, mesmo que a função nos permita adicionar nossas classes, não me permite usar um plugin em jQuery para descobrir qual navegador o sujeito usa. Então fiz um pequeno hack para fazer a função apenas adicionar as classes.

Bom primeiro vou explicar como é o uso normal da função. A função, como eu já citei anteriormente deve ser colocado dentro da tag <body>, da seguinte forma:

<!--Cabeçalho acima-->
<body <?php body_class(); ?>>
<!--Corpo da página abaixo-->

Se for usado desta forma teremos o seguinte resultado quando estivermos na home do nosso blog e logados no sistema:

<!--Cabeçalho acima-->
<body class="home blog logged-in">
<!--Corpo da página abaixo-->

O que eu fiz foi bem simples, utilizando uma função chamada get_body_class();, que é a função que faz todas as verificações e define em uma variável todas as classes que devem ser adicionadas e retorna um array, eu usando o implode(); do PHP eu criei uma função no arquivo function.php para solucionar o nosso problema e apenas escrever as classes.

Então vamos abrir o arquivo functions.php e vamos adicionar o seguinte código:

function echo_body_class() {
	echo implode(" ", get_body_class());
}

Este código cria a função echo_body_class(); e transforma o array retornado em apenas uma string separando cada um dos resultados com um espaço.

Bom agora acesse seu arquivo que contém a tag <body> e substitua-a pelo seguinte:

<!--Cabeçalho acima-->
<body class="<?php echo_body_class(); ?>>">
<!--Corpo da página abaixo-->

Então teremos o mesmo resultado que com a função body_class(); porém agora poderemos adicionar todas as classes que nos forem interessantes. Problema resolvido.

Ahh e sobre este tema que estou desenvolvendo, ele vai ser colocado aqui no blog para download, e sua principal função é servir como tema base para o desenvolvimento de outros.

Bom galera como você já sabem quando rola algum evento aqui no Rio de Janeiro e eu tenho a possibilidade de ir, vai ter uma cobertura no estilo M/M aqui no Webord. Basta o evento ter disponível uma rede Wi-Fi e uma tomada para a energia do LapTop!

Então para os que tem interesse, vocês podem ver qual é a programação do evento, na página inicial do site do evento. Abaixo vocês vão encontrar as atualizações do que está rolando no evento neste momento. Leia Mais

Bom galera, estou aqui neste, para dar uma dica de como facilitar a sua vida como desenvolvedor. Está é relacionada com a criação de um arquivo de CSS que pode e deve ser usado em qualquer tema de WordPress, para facilitar na hora do editor que já vem no próprio sistema.

Seguinte, o sistema vem com alguns padrões para alinhamento de textos, imagens e a criação de captions, e a implementação de todo esse código depende do Desenvolvedor, porém eu já a algum tempo criei um arquivo que uso como adendo, e este já contém todos os códigos que passam as informações referentes às classes usadas por padrão do WordPress.

Então você pode fazer o download do arquivo com esses códigos padrões do WordPress, e colocar na pasta do seu tema, e apenas adicionar o seguinte código na header.php do seu tema:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/wp.css" type="text/css" media="all" />

É basicamente isso, qualquer pergunta ou dúvida, comentem que eu vou responder.