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:
- The Extensible Stylesheet Language Family (XSL), no W3C
- W3Schools [tradução do texto do W3Schools]
- Tutorial de XML em português
- Making XML Beautiful Again: Introducing Client-Side XSL, por Ian Forrester no 24 ways
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.
Por Simone Villas Boas | Alterado em 01/08/11 às 12:08
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!
Ficou ótimo… pena que o Internet Explorer não suporta PNG com transparência. Aqui apareceu com o background cinza.
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:/
Adorei este tutorial! Valeu demais garota!
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?
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.
Ótimo post … bem legal!
Excelente artigo. Parabéns Simone. Bom tempo que não trocamos idéias né?! rs… Abraço!
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?
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
fiz o teste e postei lá.
queria uma ajuda para arrumar o rss do meu blog.
me ajuda, buda?
Zander, o Ivo postou hoje mesmo sobre RSS no WordPress: http://www.ivogomes.com/?p=159. []s
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
Alguém poderia me ajudar a fazer um desses ai?? Obrigado
William
O depois fica a mesma coisa que o antes para mim.
TEstei no IE e no FF.
:(
No meu browser (firefox) não deu diferença alguma. :(