web de leve

Semanas atrás tive que bloquear em um site a indexação de algumas páginas que já existiam e de outras que seriam criadas pelo o CMS do mesmo.

Bom, eu não quis programar o header do site com um condicional para que as páginas que deveriam ser bloqueadas tivessem “noindex” na meta robots:

<meta name="robots" content="noindex">

E não era possível ficar bloqueando manualmente todas as páginas no robots.txt:

Disallow: /pagina-nao-indexar-numero-999.php

Fui pesquisar e encontrei no Yahoo! uma solução: o asterisco no robots.txt.

Faz de conta que o Sr.Cliente, dono daquela fábrica de ferramentas multi-uso, que vem em kits com zilhões de pecinhas junto ( parece lego ) invocou que não quer mais saber de ver nos resultados do Google qualquer um daqueles 5000 modelos que tenham no nome do modelo o código: “ESSENÃO“.

Hey, estou dando um exemplo ( um faz de conta mesmo ) e você, como desenvolvedor, sabe muito bem que do cliente pode vir quase qualquer coisa, até mesmo o pedido ( ordem ) de ter algumas páginas de produtos fora do alcance das search engines.

Pois bem, use o asterisco da mesma forma que você o usa para pesquisar um arquivo no seu pc, use-o como um coringa:

Disallow: /*ESSENÃO*.php

Com a linha acima, por exemplo, a indexação estará desabilitada para arquivos como:

furadeiraESSENÃOplusplus.php
listadafuradeiraESSENÃOplusplus.php

Você também pode desabilitar a indexação para arquivos que estão na raiz e em outros diretórios desta forma:

Disallow: /*ESSENÃO*

Os arquivos, por exemplo, bloqueados para a indexação com a regra acima são:

/qualquercoisaESSENÃO.jsp
/modelos2007/qualquercoisaESSENÃOqualquercoisa.php
/modelos2007/qualquercoisaESSENÃOqualquercoisa.asp
/modelos2006/qualquercoisaESSENÃO.txt

Bom, o asterisco no robots.txt me foi útil no momento que precisei e talvez um dia seja para você também ;]

O processo de mudar um site de domínio ou até mesmo a renomeação de algumas páginas deixa muitos desenvolvedores preocupados pois tal processo gera vários links mortos ( dead links/ broken links/ erro 404 - página não encontrada ) que prejudicam o PageRank do site.

Perder todos os links que referenciam um site é voltar à estaca zero, é como ser o novato da área, ou melhor, é como ser um desconhecido na web.

Para evitar prejuízos ao PR e, principalmente, para evitar que o usuário receba um erro 404 na tela e vá procurar a concorrência, o Google tem algumas recomendações que você pode conferir aqui: http://googlewebmastercentral.blogspot.com/2008/04/best-practices-when-moving-your-site.html.

Para quem não compreende o idioma inglês vou dar uma geral com alguns pitacos no texto deles. Confira:

1) Use o redirecionamento 301 ( redirecionamento permanente ) das antigas páginas para as novas páginas do site.

Esse procedimento informa aos mecanismos de busca que aquela página ( conteúdo ) está em outro lugar e evita que o usuário tenha em sua tela o erro 404.

Tente fazer o redirecionamento para todas as páginas do site. Quando não for possível redirecionar para uma nova página que tenha o conteúdo referente redirecione para uma página similar.

Isso é muito interessante e pode ter um uso mais corriqueiro, por exemplo: em um site de vendas de notebooks é normal ter que retirar um notebook de grande procura para anunciar um modelo mais novo. Isso é normal mas cria um link morto e o site deixa de entregar ao internauta o conteúdo requisitado.

Para não perde o tráfego que tal notebook concedia ao site posso criar um redirecionamento temporário ( 302 ) para uma página que lista notebooks similares e, obviamente, informar ao internauta que o produto que ele procurou não está mais à venda no site.

2) Algo que o post original sugere que é claramente impraticável na maioria dos casos é solicitar aos sites que possuem os velhos links que façam uma atualização dos mesmos, ou seja, troquem os velhos links pelos novos links.

Para links que geram um bom tráfego ou que sejam de sites importantes ( para o seu “nicho” ou com PR alto ) tente fazer o contato com os donos dos referentes sites, para os demais deixe que o redirecionamento tome conta da situação.

3) Crie um sitemap xml ( arquivo que contém a relação de todas as páginas do site a serem indexadas ) com os novos links e coloque no arquivo robots.txt a seguinte linha:

Sitemap: http://www.meusite.com/sitemap.xml

Com essa linha no robots.txt você informa para alguns mecanismos de busca ( Google, Yahoo e MSN Live que sei ) as urls do seu site, ou seja, informa os novos links.

Com isso não é mais preciso enviar o sitemap para cada mecanismo de busca ( processo válido há um bom tempo mas pouca gente sabe ).

4) Verifique se os redirecionamentos estão funcionando corretamente e quais são os erros de página não encontrada através da seção Web Crawl do Google Webmaster Tools.

Bom, é isso ae =]

Espero que esse post te ajude com a mudança do seu site hoje ou no futuro ;]

Qualquer correção, dúvida ou crítica… comente. Valeu!!

Obs: esse post não é uma tradução maquiada como alguns blogs, principalmente blogs sobre SEO, tem feito para aparecerem originais/inéditos. Novamente, o link para o post original está aqui: http://googlewebmastercentral.blogspot.com/2008/04/best-practices-when-moving-your-site.html ;]

É de conhecimento comum dos desenvolvedores web que as páginas de um mesmo site que tenham o mesmo conteúdo para o elemento Title geram problemas de indexação fornecendo nos resultados de buscas links com títulos não muito claros sobre o conteúdo das páginas ou links para páginas com conteúdo não desejado pelo internauta.

Se você ainda não sabia dessa confira na imagem abaixo um exemplo desse fato onde os títulos e snippets ( baseados na meta description ) são os mesmos para 3 diferentes páginas no site da Nestlé.

Você, como desenvolvedor web, identifica facilmente que os links são diferentes mas o usuário comum não.

Ter um título e uma descrição para cada página do site ajuda o internauta a encontrar a página correta com a informação desejada.

Os mecanismos de busca trabalham essas informações ( title e meta description ) para entregar um bom resultado. Páginas que compartilham os mesmo títulos e descrições perdem “pontos”, não são corretamente indexadas.

Veja se não ficaria melhor assim:

( Suprimi o 3º resultado pois ele tem o mesmo conteúdo que o segundo, só trocaram o nome da seção e mais um elemento de navegação… vai entender ¬¬ )

Mesmo com a popularização das técnicas de seo a repetição de títulos e descrição acaba ocorrendo, principalmente, em páginas estáticas de seções como contato, empresa, suporte e outras.

A identificação de tais páginas pode ser feita manualmente olhando cada página do site ou você pode usar a seção Content Analysis do Google Webmaster Tools.

( A imagem já diz tudo mas se você nunca usou o Google Webmaster Tools aguarde um futuro post sobre como usá-lo )

Eu mesmo descobri que nas últimas alterações que fiz no site da SolutionShop acabei por cometer tal erro com algumas páginas estáticas. Confira:

Corrigi os títulos e descrições das páginas estáticas suportedownloads.asp, ss-intel-core-duo.asp, contato.asp e empresa.asp.

As páginas dinâmicas que aparecem no relatório serão removidas dos mecanismos de busca pois há uma página estática feita pelo o meu sistema com os devidos títulos e descrições para cada uma delas. Ficou faltando um “nofollow” nos links para elas e por isso as mesmas foram indexadas ;]

Bom, agora é só esperar os bots visitarem o site para ver o resultado.

É isso aí, bem simples: verifique os titles e as metas description dos seus sites na seção Content Analysis do Google Webmaster Tools.

Os mecanismos de busca e os internautas agradecem.

No dia 30 de março a Locaweb teve uma interrupção no fornecimento de energia para alguns servidores ( segundo eles mesmos ) e publicaram tal fato no Statusblog da empresa para que os clientes pudessem acompanhar o que estava acontecendo.

Eu desconhecia o blog, fiquei sabendo sobre ele via twitter e gostei, achei bom, ótimo.

Apesar de ser um blog com um foco importante pra quem tem clientes na Locaweb acabei por não assinar o feed mas me lembrei dele hoje e fui lá assinar o dito.

Mas ao acessar o blog ( que tem poucos posts ) notei que o post sobre o problema do dia 30 de março não estava mais no blog, sumiu.

Perderam? Deletaram? O que aconteceu?

Será que faz parte da política do blog a retirada dos posts sobre problemas depois que os mesmos foram resolvidos?

Deve ser isso mesmo. Veja só o que diz o primeiro parágrafo do primeiro post do blog: “Transparência é um de nossos valores mais prezados, e decidimos levar esse conceito adiante através deste blog, cujo objetivo é informar a respeito de problemas técnicos em andamento, que envolvam os clientes da LocaWeb tão logo estes ocorram. Para problemas passados, basta entrar em contato via HelpDesk.”

Parece que o trecho “Para problemas passados, basta entrar em contato via HelpDesk” justifica a retirada de posts sobre problemas que já se passaram. Certo?

Bom, nada contra, só acho estranho o uso de um blog como um sistema de recados tipo post-it, entende?

Tu cola aqui ou ali e deixa o amarelinho a vista enquanto ele lhe for útil, depois tu amassa e joga no lixo.

Pra quem quiser conferir, o Google ainda tem em cache o post do dia 30.

E via bloglines descobri mais dois “posts fantasmas”:

O blog com certeza tería muito mais valor se os problemas e soluções ficassem por lá.

Se eu estiver equivocado sobre o fato, por favor, comentem. Abraço.

Trabalhando no redesign de um site tive a oportunidade de implantar um menu de atalhos no topo do mesmo com links como “Pular para o conteúdo”, “Ir para a busca” e outros.

Esse menu de atalhos se refere a uma questão de acessibilidade na web; depois ler alguns textos sobre o assunto chega o momento de colocá-lo em prática, nem que for aos poucos.

São poucos sites que possuem um menu de atalhos ou aos menos um link para o conteúdo.

Navegando um pouco encontrei 4 tipos de menu de atalhos:

1 - Visível e acessível para leitores de tela

Embora qualquer usuário, com ou sem deficiência, possa usar esse menu não são todos os usuários desprovidos de deficiências que irão entendê-lo.

Neste caso o menu de atalhos pode se tornar um elemento extra no site que pode tirar o usuário do foco para o qual o site foi desenvolvido - entenda que o elemento extra é desnecessário à tarefa que o usuário realiza.

A interface, o site, deve ser na medida do possível livre de “ruídos”… dê ao usuário somente o que ele precisa ( Krug e 37signals me vêem a cabeça agora ).

2 - Invisível ( oculto ) mas acessível para os leitores de tela

Usa-se regras CSS para ocultar o menu de atalhos.

O http://wenetus.com/pt do Walmar Andrade tem um link para pular o menu e ir para o conteúdo.

Carregue o site, navegue nele com a tecla tab e fique de olho na barra de status do browser pois você verá a informação sobre um link, oculto, para o conteúdo.

O site do Jornal Inverta, como outros sites feitos com o CMS Plone, possue um menu de atalhos com links para o menu secundário ( http://www.inverta.info/jornal#portlet-navigation-tree ) e para o conteúdo ( http://www.inverta.info/jornal#documentContent ).

Não sei como o Plone trabalha com esse links mas todos os sites feitos com ele, que visitei, possuem o mesmo menu de atalhos que o site do Jornal Inverta.

Algo que não gostei neste tipo de menu de atalhos é que o usuário que utiliza o tab para navegar e não usa um leitor de tela fica sem saber que está com o foco em um link. Quantos mais links existirem nesse menu oculto mais “tabs” serão necessários para que o usuário encontre o outline ( a linha tracejada que indica um elemento com foco ) na tela.

Tudo bem que a barra de status, se ativa, pode informar o usuário mas será que é o suficiente?

3 - Item do menu visível quando tem foco e acessível para leitores de tela

Esse terceiro tipo de menu de atalhos acredito ser uma segunda versão do anterior onde a única diferença prática é que os links ficam visíveis quando recebem o foco.

O único site no qual encontrei ele foi no site sobre acessibilidade do SERPRO: http://www.serpro.gov.br/acessibilidade

4 - Invisível (oculto) e inacessível para leitores de tela

Devo não ter entendido algo, o JAWS está com problemas ou é outra coisa mas há sites que utilizam “display:none” para ocultar esse menu ( e/ou seus itens ) deixando ele inacessível para leitores de tela.

Devo realmente não estar entendendo o propósito do desenvolvedor que tem tal prática.

Quem souber, por favor, me fale, explique. Quer um exemplo? Visite: http://papodehomem.com.br/

Bom, por enquanto vou usar o menu de atalhos número 1 mas gostei do 3.

E você?
“Menu de atalhos“… 1, 2 ou 3?

Depois de 1 ano com disfonia e apnéia provocados pelo bloqueio de uns 60% da laringe começo a retomar de fato a vida.

Houve dias nos quais o meu fôlego era inexistente, nulo. Por vezes, depois de alguns passos tinha que parar de andar e retomar o fôlego para mais alguns passos ( entenda “passos” como uns 5 passos, essa era a minha marca ).

O prato de todo dia passou a ser sopa, sopa e sopa.

Quatro meses de regime forçado me fizeram perder 12/13 quilos. Calças e bermudas caíam literalmente.

Sem fôlego as histórias de ninar cessaram e uma pequena começou a reclamar.

Academia… nem pensar.

A vida social não definhou totalmente pois bons amigos estavam sempre presentes e fizeram da minha casa a “balada certa” todo fim de semana. Simplesmente, demais esses caras. Amigos pra toda a vida.

E então, depois de 7 meses, mais ou menos, passei por uma cirurgia para remover o “tecido” extra, um tipo de tumor benigno. Sobrou um pouco para preservar as cordas vocais mas está tudo bem e é assim que deve ser, segundo os médicos.

Até a última quarta-feira, dia 14, respirava através de uma cânola pois passei por uma traqueostemia para poder respirar durante e após a cirurgia na laringe mas agora tenho somente o orifício no pescoço que já está se fechando, então, uma nova fase da minha recuperação começou.

Ainda estamos em novembro mas o ano logo se acaba e não por costume, mas pelo o que realmente sinto, é hora de recomeçar, mudar alguma coisas, planejar e executar.

Bom, este é um post off-topic… obrigado por lê-lo, obrigado pela a sua atenção

Pra começar bem a semana, pra começar bem o dia: http://www.iamfantastic.co.uk/

Não sei de quem é essa campanha mas com certeza quem a fez a defende com todas as suas letras: “Já tentei de tudo” - www.jatenteidetudo.com.br .

O blog da campanha tem um banner que me chamou a atenção. Vi ele na home do estadão.

[clique na img para ampliar]

Tem também a bela senhorita “Paloma” ( será que essa campanha é para a Colgate-Palmolive? =] )…

…que está com sérios problemas com o cabelo dela e que pede a ajuda da “amiga” que visita o blog:

Irresistível, sugeri ovo =]

Ótimo, engraçado, inédito ( ao menos para mim )… mas e o resto do blog? Tente usar tudo o que tem lá.

Já tentei ver as fotos… não deu.

Já tentei me cadastrar… não deu.

Já tentei deixar comentários… não deu.

Agora são 12:43 horas do dia 4 de outubro, quinta-feira, e de acordo com os posts o blog foi publicado há 4 dias.

Um banner na tela inicial do site do estadão e um blog que pede socorro, pede a participação do usuário através de comentários - leia os posts da Paloma - e não tem um formulário pra deixar os comentários é uma baita mancada.

A brincadeira de falar, sugerir, o que você quiser para que Paloma resolva o problema do cabelo salva o blog ( se é que se pode chamar isso de blog ).

Embora pareça não haver muitas opções já valeu por ver a moça se virar com o ovo, a cerveja e o chocolate quente =]

Claro, daqui há pouco eles podem dar um up e resolver esses “detalhes” mas por enquanto você pode visitar o site e falar com todas as letras: já tentei de tudo

//———————–

Update by Jairo Mendes: essa campanha é para a Unilever

Table Layouts e CSS Layouts apresentam diferenças no desenvolvimento que nos fazem questionar qual é a melhor opção e às vezes querer voltar atrás e resolver alguns problemas à moda antiga com as velhas e boas tabelas*.

Na real, esse “querer voltar atrás” possui poucos adeptos e é mais freqüente durante o período de transição entre os dois tipos de layouts mas depois de conhecer o mundo dos CSS Layouts o desenvolvedor quer no mínimo um código limpo e validado pelo w3c com um DTD Strict, seja ele html ou xhtml, e então de fato os problemas aparecem.

Problemas de posicionamento, alinhamento, altura de colunas e outros.

Diante de problemas com CSS Layouts uma boa pedida é procurar a solução entre outros desenvolvedores e neste ponto temos, entre outros, os fóruns como o “Webstandards: CSS / XML / XHTML/ HTML” do Imasters onde questões problemáticas como a do vertical-align recebem diferentes soluções.

Tanto pelas soluções quanto pela interação entre os membros do fórum confira o tópico: “{ Tableless } Alinhamento Vertical - O MITO, vertical-align funciona? Como?”

Eu mesmo dei dois palpites para a questão do vertical-align ( veja aqui e aqui ) mas você também pode contribuir lá no tópico com a sua solução e aumentar a discussão.

É isso mesmo, você pode interagir em fóruns da mesma forma como você interage em blogs deixando o seu palpite, opinião e conhecimento.

Oks, oks. Isso não é nenhuma novidade mas recentemente notei que esqueci que fóruns existem e acredito que isso aconteceu logo depois que me viciei em blogs, em bons blogs.

Bons blogs trazem informações consistentes, questionadoras e algumas boas sacadas.

Depois disso… fóruns?? Pra quê?? Por quê??

Não sei exatamente, revisite aquele que você é membro e redescubra.

Voltei a visitar o fórum do Imasters e de vez em quando dou os meus palpites.

Se der, apareça por lá você também

//———————–

Links Relacionados

Vertical-Align: IE5/6/7, FF, OPERA [va-i567fo]: http://www.solutionshop.com.br/webdeleve/vertical-align-ie567-ff-opera.htm

Vertical-Align: IE6/7, FF, OPERA [va-i67fo-redim]:
http://www.solutionshop.com.br/webdeleve/vertical-align-ie67-ff-opera-redimensionavel.htm

//———————–

Fóruns

http://www.webly.com.br/forum/

http://tableless.com.br/forum/

http://forum.imasters.com.br/

//———————–

Meu nível de vício em blogs

Faça o teste você também: http://mingle2.com/blog-addiction

//———————–

* se você é das antigas as tabelas já te garantiram aquele din-din que tanto precisava então não cuspa no prato que já comeu

//

update - 07.09.27: Vertical-align solução: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Foi por acaso nesses dias que ao usar o pseudo-elemento first-letter notei uma certa, digamos, intolerância do IE6 referente a falta de um espaço entre o seletor e a chave de abertura que antecede as declarações css.

A regra CSS abaixo não funciona no IE6.

p:first-letter{ color:orange; }

Só funciona se existir um espaço antes da chave de abertura:

p:first-letter { color:orange; }

Veja:

O mesmo fato acontece com first-line:

Fiz uma página para você testar essas diferenças neste link.

Tendo notado essa pequena intolerância quanto a falta de um espaço antecedendo a chave de abertura em uma regra CSS fui verificar a especificação CSS para saber se tal espaço é ou não obrigatório.

Não encontrei informação referente mas a explicação sobre a sintaxe das regras CSS têm o espaço e ponto final, se eu o tenho omitido é bom começar a usá-lo para evitar esse e talvez outros problemas.

Algo que achei muito curioso é o IE5.5 fuinciona como o IE7, tanto faz se tem ou não o espaço:

(clique na imagem para vê-la na íntegra)

Bom, acredito que a maioria dos designers utilizam esse espaço nas regras CSS mas não custa nada dar uma olhadinha nos seus arquivos css pra confirmar se está tudo certinho, com o devido espaço