em Wordpress

Traga mais Readability para o seu blog

Meu amigo Rodrigo Ghedin conseguiu, sem querer, me deixar preocupado com a aparência: Não a minha, é verdade — já que neste caso nem as versões mais avançadas e recentes de Photoshop dariam jeito —, mas com a do meu blog. Tudo isso porquê, há alguns dias atrás, ele falou, em mais um de seus excelentes posts, sobre o conceito de readability.

Para quem não sabe o que readability significa, eu vou simplificar: Trata-se, basicamente, de tornar o processo de leitura mais fácil.

Ao encontrarem condições que lhes permitam ler mais facilmente, os seres humanos têm melhoradas suas capacidades de compreensão, retenção e velocidade de leitura. E para quem estiver se perguntando o que isso pode ter — ainda que de longe — a ver com os blogs que lemos no dia-a-adia, eu explico, mais uma vez. Só que desta vez vou usar um trecho do post onde o Ghedin menciona leituras realizadas na web:

(…) mesmo nas leituras mais rápidas, essenciais ao trabalho que desempenho e muito útil para ler muita coisa boa que aparece em blogs, sites e outros locais,  s vezes me sinto incomodado. Não pelo monitor, mas sim pelo layout. Tem gente que publica um texto com fonte branca em fundo preto! A mim, o efeito é o mesmo que ficar meia hora olhando diretamente para uma lâmpada acesa. Meus olhos sentem essa agressão.

E esse problema de contraste é apenas um dos vários que existem. Tipografia mal escolhida, espaçamento inadequado, excesso de anúncios inseridos dentro do texto. Eu costumava pregar a máxima de que não importa aonde você escreva, o que importa, mesmo, é a mensagem. Bobagem! Já deixei de ler muita coisa boa porque a apresentação não colaborava.

Notem que um site mal cuidado, com qualquer um dos deslizes mencionados acima, pode estar prejudicando a facilidade de leitura de seus visitantes. Na prática, isso pode, inclusive, acabar se traduzindo em falta de fidelização dos leitores, ou seja: Eles podem nunca mais querer voltar ao seu site, pois se lembrarão, por exemplo, que precisaram de óculos escuros para proteger os olhos na última vez em que ali estiveram.

Felizmente, visando auxiliar a leitura de informações por milhões de internautas, um pessoal muito bacana desenvolveu um projeto — também, obviamente, chamado de Readability —, onde se encontra disponível um bookmarklet configurável para tornar qualquer página mais agradável de ler. O Rodrigo, muito oportunamente, ensina como fazer a configuração, passo-a-passo.

Com a existência de plugins prontamente disponíveis para a implantação de readability no Firefox e Google Chrome, o lado dos internautas está ainda mais garantido.

Mas acontece que eu fiquei pensando em como garantir que qualquer um que me visitasse pudesse ter acesso aos recursos de readability sem necessariamente contar com bookmarklets, extensões ou plugins. Esse conceito é tão interessante que deveria ficar ao lado de botões como os de compartilhamento de links no del.icio.us, ou de retweet, que hoje são amplamente vistos nos blogs por aí. E felizmente, não é nada complicado deixar o seu blog readability-ready.

O primeiro passo para isso é dar uma olhada no código fonte do bookmarklet que o Rodrigo ensina a configurar. No Firefox, basta clicar o botão direito sobre ele e selecionar a opção Propriedades. Você logo se deparará com algo assim no campo endereço:

javascript:(function(){readConvertLinksToFootnotes=false;readStyle='style-novel';readSize='size-medium';readMargin='margin-medium';_readability_script=document.createElement('script');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.documentElement.appendChild(_readability_script);_readability_css=document.createElement('link');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';_readability_css.media='all';document.documentElement.appendChild(_readability_css);_readability_print_css=document.createElement('link');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);})();

Assustador, não é mesmo?

No entanto, não é necessário se preocupar com o que o código acima faz — que, na verdade, é somente aplicar readability   página que você está lendo. O importante é saber que é este o código que você precisará para permitir que qualquer um que visite seu site aplique readability nele. Na verdade, a coisa é tão simples que você precisará apenas criar um link em qualquer lugar da página onde escreveu um texto para que a pessoa possa clicar sobre ele. Vejamos a seguir como isso funciona no WordPress.

Acessando seu editor de temas, você precisará criar um link com o código acima no arquivo single.php — uma vez que o bookmarklet original é idealizado para transformar páginas com artigos individuais, e não sites inteiros, embora isso também possa ser feito. No meu caso, isso se traduziu da seguinte maneira:

<span class="readability">
 <a title="Torne este texto mais agradável de ler!" href="javascript:(function(){readConvertLinksToFootnotes=false;readStyle='style-novel';readSize='size-medium';readMargin='margin-medium'; _readability_script=document.createElement('script');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.documentElement.appendChild(_readability_script)_readability_css=document.createElement('link');_readability_css.rel='stylesheet'; _readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css'; _readability_css.media='all';document.documentElement.appendChild(_readability_css); _readability_print_css=document.createElement('link'); _readability_print_css.rel='stylesheet'; _readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css'; _readability_print_css.media='print'; _readability_print_css.type='text/css'; document.getElementsByTagName('head')[0].appendChild(_readability_print_css);})();">Readability</a>
 </span>

O único retoque que eu fiz foi acrescentar uma classe CSS para deixar a coisa um pouco mais bonita de se ver. Não sabia exatamente qual ícone utilizar, então optei por capturar o favicon do próprio projeto Readability:

.readability{
 display:line;
 background: transparent url(images/readability_16.png) no-repeat;
 margin-left: 5px;
 padding-left:26px;
 padding-bottom:5px;
 min-width:8px;
 }

O resultado já pode ser visto nas páginas individuais dos artigos aqui do blog. Espero, sinceramente, que desta maneira, eu esteja contribuindo para que as pessoas encontrem por aqui uma experiência de leitura um pouco mais agradável.

PS: Depois, com mais calma, pensarei em um jeito de tornar essa coisa um plugin para o WordPress.

Escreva um comentário

Comentário

11 Comentários

  1. Sensacional a ideia de trazer o bookmarklet para o blog em si!

    Pena que muito blogueiro vai abdicar passar batido por um efeito colateral do Readability: remoção de anúncios. Ainda bem que o bookmarklet só depende dessa ponta da relação — desde que o descobri, venho usando-o muito.

    []’s!

    • Não dá pra dizer que você esteja errado, Ghedin. Realmente muito blogueiro vai acabar deixando de lado o bookmarklet, sobretudo os que enchem seus sites com anúncios.

      No entanto, prefiro pensar que se trata de uma questão de consciência, já que existem dois tipos de leitores que visitam um blog. O primeiro tipo, é o, digamos, chamado paraquedista, que cai no site procurando por algo via Google, ou coisa assim. Como ele é eventual, acredito ser justo exibir propaganda pra ele.

      Mas existe o segundo tipo de leitor, o fiel leitor. Aquele que te acompanha não sei quanto tempo faz, faça chuva, faça sol. Esse volta sempre por conta da qualidade dos seus textos — e nesse caso, não merece, a meu ver, ter propaganda exibida em suas visitas. Merece, ao contrário, ser tratado bem, com a opção de readability.

      Por fim, há de se ver que o bookmarklet não elimina os anúncios. Apenas os oculta temporariamente, para que seja possível focar no texto, que, se bem escrito, é o que importa. Além disso, não são apenas as propagandas as que são temporariamente ocultas. Os comentários, as fotos, e tudo mais, também são.

      Abração!

  2. Boa iniciativa, embora o layout do seu blog esteja bom. Muitos (ok, nem tantos) sites que eu leio tem o layout quebrado, para contornar esse problema eu uso a extensão iReader, cópia idêntica do botão “reader” do Safari. Antes eu usava o Readability, gostei, mas cansei do nada.

    []’s!

    • Sinceramente, o que me deixa mais tranquilo é o feedback de que o layout aqui do blog já seja bom 🙂

      No entanto, vou manter o bookmarklet pois, como já disse antes na minha resposta ao Ghedin, acima, acredito que os leitores mais assíduos mereçam contar com opções que tornem suas experiências por aqui mais confortáveis.

      Valeu, abração!

    • Mudar o layout do blog sempre é bom. Ainda mais se for para manter a leitura de seus visitantes mais confortável, não é mesmo?

      Abraço, e obrigado pela visita!!

  3. Me diga se estou sendo muito leigo, mas se eu acompanho o feed de algum blog por exemploe pelo google reader eu não já teria essa questão de templates ruins fora de combate? Uma vez que o reader aparece o texto preto em fundo branco e sem possíveis firulagens do css tosco de um blog?

    Claro, quem não libera o feed completo merece a morte…

    • Marcio,

      Você está cobertíssimo de razão!! Ao fazer a leitura de seus blogs favoritos através dos feeds, você basicamente elimina todas estas questões. Mas a pergunta mais interessante é a seguinte: Será que o Google Reader é readable o suficiente?

      Eu até acho que sim… mas então encontrei isso (ahhhh, e isso também). Que tal?

      Abração!

      • Eu vi os links mas a apresentação do Google Reader é tão limpa que não vejo necessidade de ter um template “clean” para acessar meus feeds.

        Acho que estou mais do que satisfeito com essa ferramenta, só os sites que não disponibilizam os feeds completos é que não tem jeito.

  4. das extensões disponíveis eu preferi o TidyRead ao Readbility, pois ele oferece uma maior customização e um leque maior de opções.
    abração

    • Cumpádi, essa foi genial!!! Estou até tendo (mais) ideias!!! A possibilidade de formatar conforme bem entendermos os textos é realmente muito boa!!

      Acho que serei obrigado a trocar de favorito, hehehehe.
      Abração!!

Webmentions

  • Rodrigo P. Ghedin 19/07/2010

    Seguindo o tutorial do @danielsantos (http://j.mp/bPByaf), agora meu blog também tem um link do Readability: http://rodrigo.ghedin.me

  • Fatima Campilho 19/07/2010

    RT @danielsantos: Pergunta para você que exibe anúncios no próprio blog: Você é contra ou a favor de um Readability bookmarklet? http://bit.ly/aqco9r

  • Diego Ponciano 19/07/2010

    Traga mais readablity pro seu site: http://bit.ly/cTy7xq #UI

  • Fatima Campilho 19/07/2010

    RT @danielsantos: Traga mais Readability para o seu blog http://bit.ly/ayNAP7

  • Hilton Muccillo 19/07/2010

    RT @ghedin: Se seu blog é feito em WordPress, esse hack é obrigatório! — http://j.mp/bPByae

  • Rodrigo P. Ghedin 19/07/2010

    Se seu blog é feito em WordPress, esse hack é obrigatório! — http://j.mp/bPByae