Muita coisa sobre CSS, HTML, Javascript, Search engine optimization (seo), padrões e web
24 Jan
Um dos sites que está presente em meu del.icio.us é o blog de desenvolvimento do pessoal do Opera.
E lendo um dos posts do blog, encontrei um que falava sobre criar tabelas totalmente acessíveis (texto em inglês), algo por qual me interessei muito.
Sugiro que vocês dêem uma lida, pois facilita a leitura de tabelas pelos leitores de telas usados por pessoas com deficiência visual além de não exigir nenhum esforço a mais no desenvolvimento. Para os mais interessados no Google, sim isso também ajuda ao Google entender melhor o que significa todos aqueles dados e, possivelmente, retornar seu site em buscas relacionadas à eles.
Além de ajudar na leitura da tabela, ela irá também facilitar na criação do CSS quando determinadas colunas possuem um estilo diferente, por exemplo. Isso evita a utilização de uma class em todas as colunas e linhas da tabela.
Apesar de o texto estar em inglês, quem não entende muito - ou nada - conseguirá se virar bem. Só de ler o código é possível ver o que cada coisa faz.
16 Nov
Você quer ter um site que apareça no topo das buscas do Google, Yahoo ou MSN Search? Eu também. Muitos querem. Sabemos que a concorrência é grande e que alguns perdem a cabeça e partem para a ignorância, desenvolvendo os sites ou blogs para os robôs de busca e não para o usuário.
O Google está inteligente o suficiente para identificar aqueles que criaram o site para ele e aqueles que focaram no usuário. Isso faz diferença no ranking. Você pode ficar por algum tempo nas primeiras posições, mas não ficará muito por lá.
E lembre-se, os usuários não são robôs. Se eles entrarem em seu site, vão logo sair por não encontrarem de fato o que procuram.
Por isso, segue alguns conselhos:
H1. Se sua página possuir muitos títulos, use até o h6, levando em conta o peso de cada um deles. Caso contrário, o Google (e espero que outros buscadores) passa a considerar seu H1 como um simples p.table para criar templates e pára de usar onde era para continuar. Se você tem uma tabela, use então table e não um amontoado de div com um amontoado de regras CSS.O mais importante de tudo, pelo menos para mim, é ter um site ou blog porque gosta, não porque quer apenas lucrar com ele. Dessa forma ele não passa a ser uma obrigação ou um estorvo e sim uma distração e até mesmo uma biblioteca para futuras consultas.
16 Sep
Um erro muito comum por webmasters obcecados em colocar o seu respectivo site no topo de resultados do Google é encher a página de tags do típo título (h1, h2, h3, …, h6).
Na verdade, eles fazem pior. Usam apenas o h1 pensando que o Google irá considerar tudo com o mesmo peso. Errado. Se tiver muito h1 na página, o Google irá reduzir o peso de todos os títulos. Dessa forma, o título correto da página passará a ter peso reduzido.
O correto é usar todos os 6 tipos de título oferecidos pelo HTML. Por exemplo, o título de uma matéria deve ser h1. O nome de uma categoria deve estar em um h2 ou h3, e por aí vai.
O importante é dar o correto peso aos elementos, sem exagerar, pois o Google sabe que nem tudo na sua página é tão importante como o título.
3 Jul
Quem nunca transferiu seu site para outro domínio ou uma página importante de seu site para outro lugar? Fazemos isso até com uma certa freqüência e acabamos não percebendo o estrago que isso pode causar nas posições de busca.
Se eu tenho uma página com PageRank alto e, de um dia para o outro, altero o endereço dela, o Google ficará sem saber que ela ainda existe, mas que está em outro domínio. Dessa forma, a página passa a não mais existir e é retirada dos resultados de busca, tanto do Google como do Yahoo! e outros buscadores.
Para transferir o PageRank de uma página para outra e deixar que a nova página apareça nos resultados, é preciso criar um redirecionamento no servidor, que retorne no cabeçalho o código 301, ou seja, a página foi movida permanentemente.
Quando o robô de busca recebe esse código, ele vai para a nova página e remove de seus registros a antiga, transferindo todas as características - PageRank, peso de resultado, entre outras - para a nova.
Há pessoas que fazem esse redirecionamento com um arquivo HTML simples, utilizando a tag meta ou algum Javascript para redirecionar o usuário para a nova página. Entretanto, o robô de busca não percorre, ou tem dificuldades, de percorrer esse tipo de redirecionamento.
E mesmo que ele consiga seguir o redirecionamento, não haverá transferência de importância nem de PageRank de uma página para outra. Para o robô, ainda continuam existindo duas páginas.
O redirecionamento não precisa ser feito somente pelo servidor - Apache, IIS. Há outras formas de exibir o código 301 para o robô, como por exemplo usar uma linguagem server-side, como o PHP ou ASP.
O importante é passar o código 301 para o cabeçalho de resposta.
Link Relacionado: Códigos de status no cabeçalho de resposta
2 Jul
Você tem todo o direto de usar Javascript para criar animações, validar dados ou melhorar a interação com o usuário. Porém, não pode obrigar o usuário a ter o Javascript ativado para acessar seu site.
Criar scripts em Javascript não-obstrutivo é, relativamente, simples.
Mas, o que seria um script não-obstrutivo? Scripts não-obstrutivos são Javascripts que apenas complementam uma determinada ação. Ou seja, se você não estiver com o javascript habilitado, você conseguirá realizar a determinada ação, mas de forma mais direta e menos interativa.
Vamos a um exemplo de script obstrutivo:
<a href="#" onclick="if(confirm('Tem certeza de que deseja sair dessa página?')) window.close();">Sair</a>
Caso o usuário não esteja com o javascript habilitado, o link do código acima não irá realizar nenhuma função, já que o href é apenas uma âncora para o nada.
Para transformar o código acima em um código não-obstrutivo, um simples link resolve o problema:
<a href="http://www.google.com/" onclick="if(confirm('Tem certeza de que deseja sair dessa página?')) window.close();" onkeypress="if(confirm('Tem certeza de que deseja sair dessa página?')) window.close();">Sair</a>
Agora, se o usuário não estiver com o javascript habilitado, ele será redirecionado para o site do Google.
[Atualizado em 20/04/08]
Perceba que, além de colocada o evento onclick, adicionei também o evento onkeypress. Recomenda-se fazer isso para os deficientes visuais, que utilizam o teclado para navegação, ao invés do mouse. O mesmo deve-se fazer para os demais eventos:
Fonte: A Bengala Legal
[/atualizado]
Claro que o exemplo acima é muito simples, mas em sua grande maioria, simples observações como essa já ajudam os usuários - principalmente os deficientes visuais - e robôs de busca.
Uma forma fácil de desenvolver scripts não-obstrutivos é, antes de tudo, fazer seu site rodar 100% sem Javascript. Para isso, esqueça as funções interativas e pense somente no HTML, CSS e alguma outra linguagem server-side, como o PHP, caso venha a ter que usar.
Quando tudo estiver certo, rodando numa boa, você começa a preparar os Javascripts para interagir com o usuário. Após ter criado todas as funções em Javascript, desative ele em seu browser - no Firefox você faz isso em Tools > Options… > Aba Content > Deixar desligado a opção Enable JavaScript facilmente com a extensão Web Developer - e comece a navegar pelo site.
Se você fez bem suas funções, você nem deve perceber que o Javascript está desabilitado, ou seja, você deve conseguir realizar todas as ações disponíveis em seu site - adicionar comentários, navegar pelo menu, ler notícias, enviar e-mail (em formulários de contato) - igualmente antes de criar as funções.
Com a febre do Ajax, muitos sites não permitem que você navegue por eles sem ter o Javascript. Além de ser ruim para os usuários que desejam navegar com ele desativado - seja por segurança, preferência pessoal ou restrições físicas do computador - é ruim também para o site, pois o Google e outros buscadores não conseguirão indexar o site.
Você já tentou acessar o Gmail sem Javascript? Se não, então tente. Você irá se surpreender. Tudo funciona. Não há algumas funcionalidades que a versão com Javascript tem, mas o básico - que é checar e-mail - funciona muito bem.