Tornando o RSS mais amigável

Venci a preguiça e fiz uma interface em XSLT bem simples para o RSS deste blog (update: versão antiga do CMS). Fica bem mais legível deste modo para um usuário totalmente perdido que clicou neste link por acidente.

Saiba agora como fazer o seu primeiro XSL em apenas três passos!

Para efeitos de exemplo, irei usar o RSS 2.0, mas o mesmo pode ser feito para Atom, OPML ou qualquer outro XML. Basta ir mudando os nomes dos campos (ou namespaces) que o arquivo XML traz. Para saber o nome dos campos, não tem jeito: tem que abrir o XML no seu bloco de notas favorito e olhar o código.

Importante: Antes de mais nada, você sabe onde está o seu RSS? E como editá-lo? Dependendo do sistema ele não estará disponível para edição. Veja as observações no final deste artigo.

Primeiro passo:

Achando o template do RSS, acrescente a linha em negrito logo no início do código:


<rss version="2.0">
  <channel></channel>></rss>

Esta linha diz que aquele XML irá usar o arquivo XSL rss20.xsl.

Segundo passo:

Crie o arquivo rss20.xsl e cole este exemplo de XSLT:


	xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Viu que o XSL é quase um HTML comum? Você pode acrescentar o conteúdo que desejar. Recomendo que coloque um link para algum artigo sobre o que é o RSS para usuários leigos, como faz o UOL ou link direto para o Projeto RSSficado.

Tome muito cuidado com a sintaxe do seu código. Qualquer erro no código e o XML pára de funcionar.

Para evitar problemas com o encoding, substitua acentos, cedilhas e quaisquer outros caracteres estranhos por entidades em formato decimal. Você pode obter a lista nas referências do Web Design Group

Terceiro passo:

Crie um arquivo CSS separado para os XSL e o nomeie de xslt.css. Eis uma sugestão:

body {
  font: 9pt Verdana, Geneva, Arial, Helvetica, sans-serif;
  padding: 50px 100px;
  background: url(bg_feed.png) #ffd;
}
p, ul {
  width: 520px;
  padding: 0;
  margin: 0;
}
a, a:visited {
  color: #f60;
}
a:hover, a:active {
  color: #f00;
}
h1 a {
  font: 500 2em Georgia, "Times New Roman", Times, serif;
  text-decoration: none;
}
ul {
  width: 490px;
  margin: 20px 0 40px 30px;
}
li {
  list-style: square;
  font-size: 0.9em;
  margin: 10px 0;
}
#cc {
  font-size: 0.8em;
}

Note que você pode manipular os dados da forma que bem quiser. Use imagens de fundo, fontes coloridas, efeitos de hover e o que mais quiser.

Prontinho! Agora veja o antes e o depois

Tutoriais sobre XSLT:
Observações:
  • MovableType: Todos os feeds podem ser alterados. Veja a seção de Templates do seu blog.
  • WordPress: Os feeds são gerados pelos arquivos wp-rss2.php, wp-rss.php e wp-atom.php que estão na raiz da instalação do WP.
  • Blogger.com: O sistema já possui um template padrão bem amigável, mas não customizável.

Este artigo está licenciado como Atribuição-Uso Não-Comercial-Compartilhamento pela mesma - Licença 2.5 Brasil.

Este artigo foi publicado por Simone Villas Boas no pixeladas aleatórias [http://s1mone.net] em 22/07/2005 às 19:30 na categoria Web Standards. Você pode acompanhar os comentários neste feed. Você pode deixar um comentário.

16 comentários para o artigo “Tornando o RSS mais amigável”

  1. Renato:
    24/07/2005 às 19:20

    Esse tutorial veio numa hora muito boa. To precisando gerar um xsl pra ler um xml vindo de outro site e não tinha a menor ideia de onde começar. Valeu!

  2. André M.:
    25/07/2005 às 10:51

    Ficou ótimo… pena que o Internet Explorer não suporta PNG com transparência. Aqui apareceu com o background cinza.

  3. s1mone:
    25/07/2005 às 11:38

    Pelo menos você conseguiu ver no IE. Não sei porque cargas d’água não consigo testar este XML aqui na minha máquina. 8:/

  4. Henrique Costa Pereira:
    25/07/2005 às 14:25

    Adorei este tutorial! Valeu demais garota!

  5. André M.:
    25/07/2005 às 14:57

    Funcionou aqui com a versão 6.0.2800.1106 no Windows 2000 Professional. Isso reforça cada vez mais quando eu digo que o IE não é compatível nem com ele mesmo, já que a mesma versão mostra resultados diferentes (em certas coisas) em sistemas diferentes. Se for Windows XP, mostra de um jeito. Se for 2000, mostra de outro e por aí vai. O que ocorre? Ele não mostra nada?

  6. Anderson:
    29/07/2005 às 01:27

    Muito boa iniciativa. Estava com preguiça de fazer um e o seu exemplo está bem prático.

    Sou um adepto do Firefox, mas já percebi diferenças em páginas com mesma versão desse navegador também.

  7. rAuL:
    04/08/2005 às 22:15

    Ótimo post … bem legal!

  8. Ciro Feitosa:
    05/08/2005 às 16:51

    Excelente artigo. Parabéns Simone. Bom tempo que não trocamos idéias né?! rs… Abraço!

  9. Leo Cabral:
    05/08/2005 às 20:19

    Curti um tanto. Taí uma coisa pra prestar mais atenção.

    Eu sei que é meio off-topic, mas já testou isso no novo IE? Funcionou?

  10. Ubiratan:
    12/08/2005 às 12:31

    Gostei muito da interface e achei interessante o uso de XSLT ! por coincidência eu comprei um livro de XSLT e estou estudando o assunto. E o bom que esses livros são bem baratos ( por volta de R$ 40,00 reais …) isso me encoraja a usar esta linguagem.

    Abraços

  11. zander catta preta:
    15/08/2005 às 11:13

    fiz o teste e postei lá.

    queria uma ajuda para arrumar o rss do meu blog.

    me ajuda, buda?

  12. s1mone:
    15/08/2005 às 11:21

    Zander, o Ivo postou hoje mesmo sobre RSS no WordPress: http://www.ivogomes.com/?p=159. []s

  13. Andre Nogueira:
    19/08/2005 às 12:45

    Parabéns por seu trabalho, foge dos padrões convencionais.

    Sou designer e estou me especializando (neofito) em projetos para web.

    Já lí alguma coisa sobre xml e achei interessante a possibilidade da atualização dos dados mais simples que o HTML. Porém o meu trabalho consiste na usablidade e na criação dos TEMPLATES para uso com o XML.

    Se você souber aonde posso buscar informações, agradeço sua ajuda

  14. William:
    03/11/2005 às 16:01

    Alguém poderia me ajudar a fazer um desses ai?? Obrigado
    William

  15. Marcus Vinicius Bastos LEandro:
    12/02/2008 às 15:36

    O depois fica a mesma coisa que o antes para mim.

    TEstei no IE e no FF.
    :(

  16. Apaixonado por Viagens:
    22/01/2009 às 19:09

    No meu browser (firefox) não deu diferença alguma. :(

Faça um comentário