Tornando o RSS mais amigável

jul 22

Web Standards 16 comentários

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.

Tableless na Webdesign

abr 06

Web Standards 7 comentários

Já está nas bancas a edição 16 da revista Webdesign. A matéria de capa é sobre o desenvolvimento com a metodologia tableless. Colaborei com a matéria juntamente com o Diego Eis e Elcio Ferreira, do site Tableless. A matéria vai bem mais fundo e vê alguns aspectos dos padrões Web e acessibilidade. Corra até seu jornaleiro favorito e peça a sua!

XML e as possibilidades para o usuário comum

abr 05

Web Standards 2 comentários

Hoje me empolguei! Esqueci por alguns momentos que estou trabalhando há vários dias sem parar e achei disposição para fazer alguns testes no blog. Semanas atrás instalei o plug-in GetXML para Movable Type para colocar alguns links do del.icio.us. Não satisfeita, publiquei logo uma página inteira para todos os links. Acabei fazendo o mesmo para o blogroll. O que antes era apenas um link para o Bloglines e um download de um arquivo OPML, agora é conteúdo de verdade.

Leia mais

Guerra de pixels

mar 13

Web Standards 4 comentários

O CSS House é uma boa referência do que é possível fazer com o CSS. Mas estas demonstrações estão passando das meras demonstrações para o campo das batalhas pixelares. Até aonde se sabe, culpa do Maurício que criou a primeira bandeira feita com CSS. Inspirado nele, Stu Nicols fez a dele. Veja outras bandeiras:

Quem se atreve a criar a bandeira do Brasil?

Links obtidos em post no webgraphics

mais antigos mais novos