Back to blog
CSS & Webstandards

Estilizando o RSS

This is an archive post from 15 August 2005.

Seguindo a dica da Simone para tornar o RSS mais amigável, resolvi também incluir uma folha de estilos para as minhas Feeds RSS.
Desta forma, mesmo que o utilizador não saiba o que é uma Feed RSS/XML, não irá ver aquela página esquisita cheia de código! Em vez disso, verá uma versão com um layout semelhante ao do site mas mais simples.

Podem ver aqui o antes e o depois.

Como se faz?

Uma vez que uso o WordPress, bastou-me incluir um ficheiro CSS para alterar o layout do RSS (da mesma forma que se altera o layout de um ficheiro HTML).
Aqui está um tutorial muito bom para quem usa o WordPress, escrito pelo Fernando Graphicos e até tem um ficheiro CSS padrão que podemos fazer download e que funciona com o RSS do WordPress, depois é só alterar ao nosso gosto.

Actualização: Em vez de usar o método do Fernando (criação de uma folha de estilos para o RSS), o André e a Simone usam um ficheiro XSLT para estilizar o RSS. Desta forma não é necessário criar uma folha de estilos específica para as tags do RSS (como o Fernando fez). Em vez disso, cria-se um ficheiro XSLT que pode conter XHTML normal e tags XML onde devem aparecer os conteúdos das Feeds. Desta forma podemos criar uma página em XHTML que será mostrada quando alguém tentar visualizar a Feed num browser e indicar qual a melhor forma de visualizar aquele tipo de ficheiro.
A criação de um ficheiro XSLT é muito mais simples do que a criação de um ficheiro CSS com as tags de RSS.

30 comentários

Rodrigo

Rodrigo

15 de Agosto de 2005, 15:49

Ja algum tempo venho querendo implementar um feed em alguns clientes, mas a aparencia de código pouco legivel sem assustava. A idéia realmente foi excelente. mas pergunto : foi só um css ou usou xslt?

jose reis

jose reis

15 de Agosto de 2005, 18:02

puto!!! um gajo vem de férias e tu mudas todo o design do site…bem está muito fixe. gostei!!!

abração

Ivo Gomes

Ivo Gomes

15 de Agosto de 2005, 18:30

Rodrigo: Foi só um CSS. Pode vê-lo aqui . Não sei se funciona em todas as feeds porque foi feito para a feed do WordPress, mas é uma questão de experimentar e ver se funciona em outros sistemas.

Zé: Já vieste de férias ou estás a meio delas? He he!! Abraços

andr3

andr3

16 de Agosto de 2005, 00:03

Podes ir mais além e criar uma página dinamicamente com o XSLT. Não é nada complicado… (até parece de propósito, acabei de postar um mini how-to no meu site)

Isso permite-te criar links que funcionam, avisos para os utilizadores de como podem usar as feeds (para os que não sabem), etc.

E já agora, como é o primeiro comentário que deixo aqui, parabéns pelo site. Gosto bastante do layout e da usabilidade do site. :)

Jorge Laranjo

Jorge Laranjo

16 de Agosto de 2005, 01:40

Simples fabuloso. O Ivo está mesmo na onda!

Ivo Gomes

Ivo Gomes

16 de Agosto de 2005, 08:26

André adorei o layout da tua feed!! Está muito bom. Vou ler o artigo com mais atenção e tentar implementar qualquer coisa aqui!

Abraços.

andr3

andr3

16 de Agosto de 2005, 14:08

Obrigado :)

Se precisares de alguma ajuda, não hesites em me procurar.

Vitor

Vitor

16 de Agosto de 2005, 20:38

Bom trabalho neste novo layout!
Sugiro apenas que incluas a opção de autocomplete=off no código do livesearch ;)

Ivo Gomes

Ivo Gomes

16 de Agosto de 2005, 22:42

Qual é a função do autocomplete? Em todos os sistemas que testei nunca o texto da pesquisa se auto-completou ao escrever…

Removi o autocomplete porque o código não valida como XHTML. Não existe nenhum atributo chamado autocomplete e neste momento não sei qual é a sua utilidade, por isso, por enquanto, não faz falta (a não ser que alguém me diga o porquê dele estar ali).

Vitor

Vitor

17 de Agosto de 2005, 13:42

O autocomplete pretende evitar isto: print screen.
Aqui vai uma dica: Valiting Livesearch

Ivo Gomes

Ivo Gomes

17 de Agosto de 2005, 20:49

Espectáculo!

Obrigado Vitor. Já alterei o código para não ter o autocomplete e entretanto consegui também resolver outros problemas que tinha com o LiveSearch, nomeadamente:

1. A navegação com as teclas pelos resultados da busca não funcionava. Corrigido

2. Reparei que a busca não estava a funcionar correctamente porque sempre que escrevia uma palavra qualquer para pesquisar, o resultado eram sempre os últimos artigos publicados e não os artigos que continham essa palavra. Corrigido – faltava um “=” no código :/

Sendo assim, já posso remover o texto “Beta” da pesquisa porque a paretir de agora já funciona como devia!

Abraços

Gean

Gean

22 de Agosto de 2005, 14:23

Oi Ivo, meio atrasado na leitura dos feeds. Parabens pelo novo layout. Realmente ficou maravilhoso. Ja tinha visto essa dica na Simone tambem. Voce colocou e tambem esta excelente. Vou ver se crio coragem e faco o mesmo.

Um abraco

valderez baisi silveira

valderez baisi silveira

24 de Setembro de 2005, 04:40

vim dizer que recebi de um amigo e gostei muito

William

William

3 de Novembro de 2005, 18:47

Olá Ivo tudo bom, gostei da sua matéria cara, o problema que eu ainda sou um iniciante e não conheço muito bem´os códigos, será que você faria algo pra mim, com esse endereço http://www.estadao.com.br/rss/agestado.xml

Obrigado.
William

andr3

andr3

4 de Novembro de 2005, 00:27

William,

Não é nada difícil… se fizeres uma página em (X)HTML é bastante fácil fazeres uma folha de estilos XSL-T para a criar a partir de um XML. Chegaste a ler o meu post que o Ivo referiu no post dele? É que gostava de saber até que ponto aquilo é compreensível para “leigos”. ;)

Ivo Gomes

Ivo Gomes

4 de Novembro de 2005, 08:28

Também recomendo a leres o artigo do André!

William

William

4 de Novembro de 2005, 09:14

Bom Dia, ou André você não quer me ajudar a fazer não cara, eu precisava ver um pronto, para depois conseguir fazer.. eu descobri um cara que chegou a fazer mas quando pedi os fontes pra ele, ele simplesmente me disse se vira você não é quadrado, ai q raiva.. rsrsrs, mas fazer o q né, cada um passa o que pode. qualquer coisa me envie um e-mail: [email protected]
Obrigado cara,

William

William

William

4 de Novembro de 2005, 14:32

Bom gente, depois de tanto sofrimento eu descobri, não era bem o que eu queria, o que eu queria mesmo era criar algo que puxasse o xml de uma pagina e jogasse no browser automaticamente.. mas está bom vivendo e aprendendo, agora ivo eu gostaria de saber como você ver para incluir o arquivo xml no seu php, como mostra no arquivo depois do seu antes e depois.
Obrigado,

William

Ivo Gomes

Ivo Gomes

4 de Novembro de 2005, 14:57

Bom, mais uma vez eu limitei-me a seguir estas instruções

Gean Fonseca

Gean Fonseca

22 de Dezembro de 2005, 12:44

Ivo, eu li o seu artigo, o da Simone e o do Andr3, nesse link q vc passou acima.

porém o q estou fazendo é contruir uma página onde eu faça leitura de várias fontes de rss e disponibilizo aos usuários, como se fosse um netvibes da vida.

como não posso alterar o xml original q vem do site, não entendi como eu posso implementar folha de estilo ou converter as diversas fontes de noticias para um padrão meu, de apresentação no meu site.

nos tutoriais o primeiro passo é adicionar/alterar a linha:

xml-stylesheet type=”text/xsl” href=”transformations.xslt” media=”screen”
mas como fazer isso se não tenho acesso ao xml do rss original?

desculpe perguntar a vc, mas esse tópico era o mais atual, e talvez vc possa me ajudar ou indicar algum lugar prá pesquisar isso.

Obrigado,

Gean.

Ivo Gomes

Ivo Gomes

22 de Dezembro de 2005, 12:57

Olá Gean!

Em vez da técnica do XSLT em que é necessário adicionar uma folha de estilos, podes usar a técnica do Fernando.

Cada feed RSS tem tags que podem ser estilizadas. Se definires um CSS com essas tags podes estilizar qualquer feed (desde que esteja bem formatada).

Acho que o podes fazer seguindo estas instruções

Gean Fonseca

Gean Fonseca

22 de Dezembro de 2005, 13:08

Perfeito Ivo, muito obrigado…era mais ou menos o q eu estava procurando…acho q vou conseguir fazer o q preciso agora.

shift+[]´s

andr3

andr3

22 de Dezembro de 2005, 18:09

Gean,

Se o teu objectivo passa por mais do que ir estilizar as tags das feeds, podes usar linguagens server-side para aplicar folhas de estilo XSLT.

http://pt.php.net/manual/en/ref.xslt.php
http://www.sitepoint.com/print/transform-php-xslt

Pode é precisar de instalação de um módulo adicional ao PHP. Mas também, não sei qual a linguagem que tu usas no teu sistema… Fica a recomendação. :)

Gean Fonseca

Gean Fonseca

23 de Dezembro de 2005, 12:23

Andr3, obrigado pelas dicas…estou fazendo testes com os processos de transformação q vc citou nesses 2 links.

O q eu quero é criar uma página como se fosse um agregador de feeds, com portlets para cada rss, no estilo netvibes e windows live.

Eu achei q o processo de “mostrar” o conteúdo dos rss fosse mais fácil, mas estou vendo q vou ter bastante trabalho para criar os xls para os diversos padrões de conteúdo (rss 1.0, 2.0, atom).

Pergunto: é assim mesmo o processo? tenho q pegar os xml do rss e converter eles com xls? ou existe outra forma q não estou visualizando?

Obrigado “in advance” pela ajuda,

Gean.

Nuno

Nuno

17 de Janeiro de 2006, 23:35

Muito bom site mas tenho uma pergunta. Como posso criar feeds de um forum. Nao se arranja nenhum toturial que me diga isso.
Ps: sou admin desse forum.

andr3

andr3

18 de Janeiro de 2006, 01:59

Nuno,

Esse teu fórum, é baseado no phpBB? Se sim, creio que isto é o que procuras.

Senão, basta ter conhecimentos básicos na linguagem disponível (php, asp, etc…) para fazer uma query à base de dados. Claro que depende da plataforma que estás a usar, mas criar uma feed RSS não deverá ser muito complicado. ;) Diz qual a plataforma e qual a linguagem do teu fórum..

Ivo Gomes

Ivo Gomes

18 de Janeiro de 2006, 08:45

Se usares o SMF essa funcionalidade já vem instalada. Basta activá-la na administração.

Nuno

Nuno

18 de Janeiro de 2006, 18:53

tenho um forum em php num servidor gratis, e um em invisionfree. Estava mais intereçado um por feeds no invisionfree. Nesse dá??
Se nao der ponho no outro que tambem precisava k esta em php. Ja agora andr3 a pag k me indicaste nao abre.

Nuno

Nuno

25 de Janeiro de 2006, 20:45

Estou a ver que ninguem sabe como é!!

Ivo Gomes

Ivo Gomes

26 de Janeiro de 2006, 09:30

Acho que devias procurar no suporte do fórum que usas. EU quando quero saber alguma coisa sobre o SMF (O fórum que uso) vou ao fórum de suporte e lá de certeza que tenho a resposta.

Aqui estás a comentar num post que não está directamente relacionado com fóruns por isso é natural que não te respondam a essa pergunta…

Fazendo uma breve pesquisa por “Invision+RSS” cheguei à página oficial do Invision onde estão identificadas as suas funcionalidades e uma delas é o RSS (canto inferior direito da página).