web de leve

Excelentes slides sobre o que pode ser aplicado hoje, como aplicar e o suporte do CSS3 nos principais browsers neste link -> http://maddesigns.de/css3/css3-im-praktischen-einsatz.html

Nos últimos dias vi alguns twitts sobre o compressor JPEGmini feito por uma startup israelita que reduz o tamanho dos arquivos jpegs em até 6 vezes sem perca de qualidade para o olho humano  -  ou seja, pelo o que entendi, aplica compressão para excessos/redundâncias e elementos que não interferem na imagem que conseguimos ver.

Testei e não notei perca de qualidade – acho que pode ocorrer mas não notei.

De qualquer forma vale o uso para diminuir o tempo de carregamento dos sites de nossos clientes.

Espero que criem um compressor semelhante para png.

Visite e teste  o JPEGmini ->  http://www.jpegmini.com

O site  catapulty.com traz para o webdev front-end dois favoritos que facilitam o teste nos diversos browsers instalados em seu sistema.

Acesse catapulty.com onde você verá os links Throw e Hit.  Favorite ambos links em todos os browsers instalados.

Escolha um browser, por exemplo o Firefox, e nele acesse um site qualquer. Com o site carregado clique em Throw.

Em outro browser, por exemplo o Chrome, clique em Hit.  O site carregado no Firefox será agora carregado no Chrome.

Esses dois favoritos agilizam um pouco os inúmeros testes locais rotineiros para todo webdev front-end.

O site fontdragr.com do Ryan Seddon ( The CSS Ninja ) traz uma ferramenta que permite o teste de fontes em qualquer site de um modo bem simples:

Acesse fontdragr.com e favorite o link do botão “font dragr”

Acesse um site para teste, clique no favorito “font dragr” para carregar a ferramenta e arraste e solte sobre ela um arquivo de fonte:

Para controlar em qual elemento a fonte será aplicada defina primeiro uma regra css no campo Selector e depois arraste e solte uma fonte sobre a ferramenta.

Conheci o fontdragr anteontem e resolvi compartilhar aqui pra tirar um pouco da poeira que tem esse blog ;]

Abraço/t+

Ano passado fiz um teste para alterar a seção administrativa para publisher da boo-box criando um script para ser usado com a dobradinha Firefox e  Greasemonkey ( antiga extensão que permite rodar facilmente scripts que alteram o comportamento de sites ).

Na seção de publisher da boo-box há uma listagem de campanhas com link para que você acesse as informações referentes como custo por clique, impressões, cliques, rendimento, opções de ativar e desativar a campanha e as visualizações dos banners e twitts ( seedings ) .

O script trás para a seção publisher todas essas informações e opções. Compare as duas listagens a seguir:

O script usa jquery hospedado pelo google e fancybox hospedado pela própria boo-box.

Para usar você precisa instalar a extensão Greasemonkey no seu Firefox e acessar o script aqui: http://webdeleve.net/BooBoxTools.user.js (  faltou criatividade pra criar o nome :/ ) .

Se quiser, acesse o link do script sem o Greasemonkey para ler o script antes de instalar.

O script é totalmente dependente do html que o pessoal da boo-box desenvolveu, portanto, se mudarem algo amanhã ( seja lá quando for amanhã ) o script pode falhar. Mas como disse no título deste post, é só um teste ;]

Talvez o primeiro load com a extensão tenha um tempo extra mas depois fica normal com o cache criado.

Tenho usado o script sem problema algum até este momento.

Instale acessando o script aqui -> http://webdeleve.net/BooBoxTools.user.js

Escrevi um código baseado na barra de opções que o Submarino mostra no topo do site quando o usuário rola a página.

Lembro que antigamente via barras semelhantes com opções de navegação e contato em sites de portfólios, texturas, recursos para designers, etc. Hoje em dia, aparentemente, é raro o uso desse recurso.

Bom, o código usa jquery para as ações de mostrar e esconder a barra e define em um cookie a preferência do usuário por deixar ou não visível a barra/toolbar.

Coisa simples e código tosco, nada d+. Confira o demo e código aqui.

As razões do hiato geraram um material com conteúdo muito além do escopo deste blog e, portanto, requer outro local para ser publicado. Assim que possível informo aqui. Obrigado.

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.