Klaus Paiva

Um vídeo bastante interessante que mostra vários recursos provenientes do HTML 5: canvas e SVG, <video>, geolocation, app cache e banco de dados local, e web workers. (aliás, eu já falei sobre web workers aqui no blog )

Have fun! Vi aqui.

Em primeiro lugar, eu não morri. Estou aqui, firme e forte!

Quero aproveitar este texto e anunciar que a monografia que trabalhamos ao longo deste ano está praticamente pronta! Isto significa que nosso TCC está chegando ao fim.

Foi um trabalho bem legal de desenvolver e construir, uma experiência bastante interessante. Quero deixar aqui um grande "obrigado!" a todo mundo que apoiou o nosso trabalho, seja por comentários aqui no blog, seja pela participação na pesquisa sobre supermercados, ou falando conosco durante o nosso dia-a-dia de trabalho.

Por fim, a quem interessar possa, deixo aqui para download a versão quase final da nossa monografia. O conteúdo dela não deve mudar muito até a versão final que iremos entregar para avaliação da banca. Nesta monografia há tudo o que desenvolvemos neste período e os resultados obtidos (como se espera de uma monografia ). Há também um sumário dos resultados obtidos com a pesquisa mencionada acima no apêndice B.

Atualização! Nossa apresentação foi feita na sexta passada (dia 18) e tudo deu muito certo! Conseguimos a maior nota possível e também recebemos um ótimo feedback, tanto na monografia quanto no protótipo desenvolvido. Novamente, obrigado a todos que participaram deste trabalho!

Esse texto surgiu de uma necessidade que é bastante comum pra nós, seres programadores de interfaces web.

Sabe quando o webdesigner desenha uma caixa de tamanho fixo (e largura variável, pra complicar um pouco), em que o texto deverá ficar contido ali dentro da caixa, e no caso do texto ser maior que o tamanho disponível, os famosos "três pontinhos" devem aparecer?

Pra ilustrar isso melhor, veja a imagem abaixo:

Caixa com dimensões fixas e conteúdo "ajustado" para caber

Um método comum de se fazer isso é contar o número de caracteres e colocar "...", caso o número de caracteres ultrapasse o número máximo de caracteres que ficarão visíveis. Claro que esse número máximo é uma estimativa e nem sempre o resultado fica bom. Além disso, pode acontecer do "corte" no texto acontecer no meio de uma palavra, gerando um resultado estranho ao visitante, "tipo isso aq...".

Nas CSS existe uma propriedade chamada "text-overflow" que, sob certas circustâncias, adiciona automagicamente "..." ao final do texto que não coube na área visível. OK! Problema resolvido então? Não exatamente...

O problema não está resolvido por conta de duas outras questões. Uma delas é que o Firefox ainda não implementa essa propriedade (sim, o IE tem! Moderno hein? ). A outra questão é que essa propriedade não se aplica nos casos em que o texto ocuparia mais de uma linha.

Se você quiser uma explicação mais detalhada (e exemplos) sobre a propriedade "text-overflow", acesse este texto no blog do PPK.

Voltando ao assunto original, agora precisamos resolver aquelas duas questões. Felizmente, com algum tempo de Google e mais algum tempo de pesquisa em fóruns, consegui encontrar algo capaz de ajudar nesta tarefa: o jQuery textOverflow Plugin.

O código é relativamente simples e oferece várias opções de customização. Aqui tem uma página de exemplo (exemplo 1) gerando algo similar ao que foi mostrado na imagem acima.

Caso você tenha vários elementos na página que vão receber esse tratamento, deixo uma dica: tome cuidado com a performance! Como é uma operação intensiva no DOM, a chance desse código deixar o navegador bastante lento é bastante alta.

Pra esses casos, se você realmente precisa dos "...", acho que vale a pena tentar juntar esse código com a solução de "execução de Javascript com pausas", proposta pelo Nicholas Zakas.

Fiz uma proposta com essa combinação. Ela pode ser vista aqui no exemplo 2 (com 100 elementos). Embora seja visualmente mais lenta, ela não trava o navegador em momento algum, mesmo no IE 6.

Bom, o texto ficou bem longo... mas acho que deu pra passar bem a ideia. Sugestões ou comentários, é só usar o formulário abaixo.

Pra quem não entendeu o motivo da questão no título deste texto, uma breve explicação: as duas opções são formas válidas para se definir qual é a versão "original" em casos de conteúdo duplicado.

Mas se são duas formas diferentes de se chegar ao mesmo resultado, qual delas escolher? Há vantagens e desvantagens? Há casos em que só uma delas se aplica? São essas perguntas que eu tentarei responder aqui neste texto.

Entendendo o problema do conteúdo duplicado

Para entender onde e como aplicar corretamente as soluções acima, é importante entender qual é o real problema com conteúdo duplicado. Para entender isso, vamos precisar de um exemplo: a página inicial desse blog encontra-se em http://blog.klaus.pro.br/ - mas nada impede que alguém faça um link para ela assim: http://blog.klaus.pro.br/?home. Note que ambos os endereços funcionam perfeitamente.

No caso acima, os dois endereços exibem a (mesma) página inicial deste blog. Agora pense como um robô indexador, será que os dois endereços mostram o mesmo conteúdo porque alguém quer me enganar, dando a impressão de que há mais conteúdo do que realmente há no site, ou simplesmente os dois endereços são considerados a mesma página pelo sistema do site em questão. E se os dois endereços realmente apontam para uma mesma página, qual deles eu devo considerar como "principal" ou "original"?

Para resolver essa ambiguidade e, de quebra, definir qual é a página "original", as duas soluções acima podem ser empregadas.

Onde as duas soluções se aplicam

Quando você está resolvendo a questão de conteúdo duplicado apenas dentro do domínio de seu site, as duas soluções são aplicáveis. Ou seja, usar a meta tag canonical ou um redirecionamento 301 resolve perfeitamente a questão, levando-se em conta a restrição de domínio acima.

Desta forma, para resolver o problema citado no começo deste texto usando a meta tag canonical bastaria eu colocar isso na página incial do meu blog:

<link rel="canonical" href="http://blog.klaus.pro.br/" />

Onde apenas a meta tag canonical se aplica

Nota: Este exemplo foi retirado deste vídeo.

Se no seu site você possui uma versão "normal" da página e uma versão para impressão, muito provavelmente as páginas serão muito parecidas, a ponto de parecerem conteúdo duplicado para um indexador de conteúdo.

Se você colocar um redirecionamento 301 na página de impressão, nenhum usuário vai conseguir ver a página, o que definitivamente não é uma solução para o problema . Já com a meta canonical você pode informar sem problemas que a página "normal" é a versão "original" daquele conteúdo.

Onde apenas um redirecionamento 301 (ou 302) se aplica

A meta canonical não é válida (ou seja, ela é ignorada) quando a página referenciada encontra-se em outro domínio. Nesses casos, para indicar que o conteúdo original encontra-se em outro lugar, sua única opção é fazer um redirecionamento permanente ou temporário (301 ou 302, respectivamente) para o conteúdo "original".

Conclusão

Se você precisa resolver o problema de conteúdo duplicado em páginas de domínios diferentes, suas opções são os redirecionamentos 301 ou 302. Se ambas as páginas precisam ser acessíveis pois seu conteúdo é muito parecido mas não é igual, use a meta tag canonical.

É isso!