an ordinary blog — andr3.net

rss feed

my lifestream rss feed

are you tired of this? then return to latest posts

As feeds RSS não têm que ser feias

Porque é que 95% das feeds que encontro na web não têm nenhuma folha de estilos? Há alguma razão lógica por detrás disto? As feeds sem estilo nenhum são feias e desagradáveis, mas acima de tudo repelem os utilizadores comuns, que ao ver tal página irão julgar que ocorreu um erro.

Se um utilizador clicou numa feed, é porque existe algum interesse da parte dele nessa feed em particular. Agora, o que é melhor? Ele(a) vai-se embora frustrado(a) devido à sua própria ignorância ou guiá-lo – da melhor forma possível – até uma maneira de utilizar a feed de maneira apropriada?
De certeza que preferem a último hipótese.


Comparação entre Feeds sem folhas de estilo e Feeds com folha de estilos

Como é que isso é feito?

Então, já têm o ficheiro XML, certo? Agora, através da eXtensible Stylesheet Language (XSL) podemos fazer Transformações (XSLT) ao seu ficheiro, criando assim uma página (XHTML) dinâmica obtendo os dados a partir do seu ficheiro XML.

Passo um

Adicione a seguinte linha ao seu ficheiro XML

<?xml version="1.0" encoding="iso-8859-1"?>

<?xml-stylesheet type="text/xsl" href="transformations.xslt" media="screen"?>

<rss version="2.0">

(...)

O que esta linha faz é especificar qual a Folha de Estilos que deverá ser aplicada ao seu ficheiro XML.

Passo dois

Agora, crie um ficheiro chamado transformations.xsl e coloque-o no mesmo directório que o ficheiro XML.

A Folha de Estilos deve começar com a tag <xsl:stylesheet> e esta deve ser fechada no final do ficheiro. 

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">



</xsl:stylesheet>

Passo três

Agora temos de criar um template básico, que será o conteúdo estático da página. Iremos fazer isto definindo um <xsl:template>. Dentro do qual será posto o código XHTML que irá ser servido ao browser.
Depois de ter finalizado este passo, poderá percorrer todos os items da sua feed e mostrá-los da forma que quiser.

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">



<html>

    <head>

        <title>This is my feed</title>

        <link rel="stylesheet" type="text/css" href="style.css" />

    </head>

    <body>

        <h1>This is my RSS feed.</h1>

        <p>You shouldn't be accessing this through your browser.</p>

        <h2>Last posts</h2>

        <ul>



Aqui, irá especificar como deseja percorrer e mostrar cada item da sua feed

(o <xsl:for-each> deverá ser posto neste espaço)



        </ul>

    </body>

</html>



</xsl:template>

</xsl:stylesheet>

Passo quatro

Para percorrer todos os seus items, deverá usar o <xsl:for-each>, especificando o caminho para os items na sua feed.

<xsl:for-each select="rss/channel/item">



</xsl:for-each>

Como pode ver, seleccionamos o item através do seu caminho absoluto (rss / channel / item). Agora, qualquer código que esteja entre esta tag e a tua tag de fecho, será repetido N vezes, sendo N o número de items na feed.

Passo cinco

Para obter os valores de cada tag que constitui cada item, iremos usar o <xsl:value-of> Рṇo possui uma tag de fecho, por isso deve ser terminada com uma barra, assim: <xsl:value-of select="title"/>.

Um pormenor, já que não é possível inserir uma tag dentro de outra tag, não é possível inserir uma <xsl:value-of> dentro de uma âncora XHTML (<a>) para obter o URL da tag <link>. Contudo, pode-se usar a notação das chavetas { } para obter o valor do link do elemento actual, neste caso, um dos vários items presentes na feed.

Aqui está um exemplo.

<xsl:for-each select="rss/channel/item">

<li><xsl:value-of select="title"/>

<a href="{link}">{link}</a></li>

</xsl:for-each>

Já está!

Agora já consegue apresentar as suas feeds de forma legível e não afungentará utilizadores menos conhecedores.

Ficheiros relacionados

Links relacionados


Notas Finais

Eu aconselho vivamente a escreverem o vosso próprio template e a fazerem o vosso próprio código. Isto serve apenas de exemplo para mostrar o quão fácil é criar uma página usando XSLT a partir do vosso ficheiro de XML.

Note que há uma tag <link> na página que criámos. Ela especifica uma folha de estilos CSS para aquela página. Pode criar um ficheiro style.css no mesmo directório e pode utilizar o layout do seu site, integrando assim a feed num contexto. Certifique-se apenas que avisa o utilizador que ele chegou a uma Feed e não a uma página normal.

Não esqueçam este canto do vosso site. Se todos os vossos utilizadores adoptarem as vossas feeds, verão que eles voltarão. :)

↓ Comments

↑ top