Estilizando o RSS

Segunda-feira, 15 de Agosto de 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

Escreva o seu comentário!
  1. Gravatar

    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?

  2. Gravatar

    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

  3. Gravatar

    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

  4. Gravatar

    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. :)

  5. Gravatar

    Jorge Laranjo

    16 de Agosto de 2005, 01:40

    Simples fabuloso. O Ivo está mesmo na onda!

  6. Gravatar

    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.

  7. Gravatar

    andr3

    16 de Agosto de 2005, 14:08

    Obrigado :)

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

  8. Gravatar

    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 ;)

  9. Gravatar

    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).

  10. Gravatar

    Vitor

    17 de Agosto de 2005, 13:42

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

  11. Gravatar

    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

  12. Gravatar

    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

  13. Gravatar

    valderez baisi silveira

    24 de Setembro de 2005, 04:40

    vim dizer que recebi de um amigo e gostei muito

  14. Gravatar

    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

  15. Gravatar

    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”. ;)

  16. Gravatar

    Ivo Gomes

    4 de Novembro de 2005, 08:28

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

  17. Gravatar

    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: williamcalsolari@hotmail.com
    Obrigado cara,

    William

  18. Gravatar

    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

  19. Gravatar

    Ivo Gomes

    4 de Novembro de 2005, 14:57

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

  20. Gravatar

    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.

  21. Gravatar

    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

  22. Gravatar

    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

  23. Gravatar

    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. :)

  24. Gravatar

    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.

  25. Gravatar

    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.

  26. Gravatar

    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..

  27. Gravatar

    Ivo Gomes

    18 de Janeiro de 2006, 08:45

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

  28. Gravatar

    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.

  29. Gravatar

    Nuno

    25 de Janeiro de 2006, 20:45

    Estou a ver que ninguem sabe como é!!

  30. Gravatar

    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).

Comente!

Preencha o seu nome para assinar o comentário. O preenchimento deste campo é obrigatório.

Os comentários são as suas ideias ou opiniões em relação ao artigo que acabou de ler. Assine o seu comentário para dar a conhecer o seu ponto de vista. 
O seu endereço de e-mail não será publicado. O preenchimento deste campo é obrigatório.

Este site suporta a utilização de gravatars. Caso o seu endereço de e-mail esteja registado em gravatar.com, irá aparecer a sua imagem ao lado do comentário. 
Se tiver um website, este é um bom local para o publicitar.

Sempre que alguém ler o seu comentário, irá ver um link para o seu site. Se o seu comentário for relevante para os outros utilizadores, com certeza eles quererão saber mais sobre si e visitarão o seu site. 
Este formulário permite o uso de algumas tags em XHTML. As tags permitidas são as seguintes:

<a href="" title="">
<abbr title="">
<acronym title="">
<b> <blockquote cite="">
<code> <em> <i> <strike>
<strong>
 

Sobre este Artigo

 

Sobre o Autor...

Ivo GomesIvo Gomes tem 32 anos e é licenciado em Ergonomia pela FMH. Durante o curso especializou-se em Ergonomia de Sistemas de Informação e actualmente trabalha do Departamento de Usabilidade e Qualidade do Portal SAPO.

É sócio da Associação Portuguesa de Ergonomia, da Usability Professionals Association, e sócio fundador e membro do Conselho Directivo da Associação Portuguesa de Profissionais de Usabilidade.

Categorias do Blog

Arquivo

Consulte o arquivo para procurar algum artigo específico ou use o motor de busca.

|

Subscreva

Se preferir pode subscrever os artigos deste site via RSS para poder estar sempre actualizado.

O que são Feeds RSS e como as posso subscrever?