pixeladas aleatórias

Tornando o RSS mais amigável

em Web Standards

Venci a preguiça e fiz uma interface em XSLT bem simples para o RSS deste blog. 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:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="rss20.xsl"?>
<rss version="2.0">
  <channel> ...

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:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="4.0"/>
  <xsl:template match="rss/channel">
    <html>
    <head>
      <title><xsl:value-of select="title"/></title>
      <link rel="stylesheet" type="text/css" href="xslt.css"/>
    </head>  
    <body>
      <h1>
         <a href="{link}"><xsl:value-of select="title"/></a>
      </h1>
      <p><xsl:value-of select="description"/></p>
      <ul><xsl:apply-templates select="item"/></ul>
      <p id="cc">(cc) some rights reserved</p>
    </body>
    </html>  
  </xsl:template>
  <xsl:template match="item">
    <li>
      <strong><xsl:value-of select="title" /></strong>: 
      <xsl:value-of select="substring(description,1,180)"/>...
      <a href="{link}">leia mais &#187;</a>
    </li>
  </xsl:template>
</xsl:stylesheet>

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.

publicado em 22/07/2005, às 19:30 | comentários: 14 | comente!

 

Comentários

Renato diz:
Gravatar
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!
enviado em 24/07/2005, às 19:20
André M. diz:
Gravatar
Ficou ótimo... pena que o Internet Explorer não suporta PNG com transparência. Aqui apareceu com o background cinza.
enviado em 25/07/2005, às 10:51
s1mone diz:
Gravatar
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:/
enviado em 25/07/2005, às 11:38
Henrique Costa Pereira diz:
Gravatar
Adorei este tutorial! Valeu demais garota!
enviado em 25/07/2005, às 14:25
André M. diz:
Gravatar
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?
enviado em 25/07/2005, às 14:57
Anderson diz:
Gravatar
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.
enviado em 29/07/2005, às 01:27
rAuL diz:
Gravatar
Ótimo post ... bem legal!
enviado em 04/08/2005, às 22:15
Ciro Feitosa diz:
Gravatar
Excelente artigo. Parabéns Simone. Bom tempo que não trocamos idéias né?! rs... Abraço!
enviado em 05/08/2005, às 16:51
Leo Cabral diz:
Gravatar
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?
enviado em 05/08/2005, às 20:19
Ubiratan diz:
Gravatar
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
enviado em 12/08/2005, às 12:31
zander catta preta diz:
Gravatar
fiz o teste e postei lá. queria uma ajuda para arrumar o rss do meu blog. me ajuda, buda?
enviado em 15/08/2005, às 11:13
s1mone diz:
Gravatar
Zander, o Ivo postou hoje mesmo sobre RSS no WordPress: http://www.ivogomes.com/?p=159. []s
enviado em 15/08/2005, às 11:21
Andre Nogueira diz:
Gravatar
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
enviado em 19/08/2005, às 12:45
William diz:
Gravatar
Alguém poderia me ajudar a fazer um desses ai?? Obrigado William
enviado em 03/11/2005, às 16:01