XML com CSS

16/04, 2005 13:01 por Fellipe

Prólogo

Não é preciso ser expert para entender como as coisas funcionam na web. Muita gente que não tem o mínimo de interesse acha que é mágica, mas muitas sabem que não é. Inventaram o hypertexto, que caracteriza exatamente a web como muitos de nós estamos acostumados a usar e conhecê-la, e é através do hypertexto que as informações são divulgadas, ou pelo menos, maioria delas.

Primordialmente a internet surigu para a troca de informações… só que não existia nem existe nenhum tipo de política para tal. Isso é muito bom, pois qualquer tipo de coisa pode trafegar por ai, e também é muito ruim pois qualquer tipo de coisa pode trafegar por ai. A redundância foi para enfatizar, e é nesse ponto que eu quero chegar.

Meta-linguagens foram criadas, tecnologias surgiram e foram aprimoradas, tendências apareceram junto com costumes, e hoje no nosso dia a dia a web já faz tem um papel importante. Mas, enfim, cadê a informação?

Enfim, a informação

Eu sempre soube que o CSS era algo que se usado para ajudar as forças do bem poderia ser muito poderoso, mas percebi hoje que ele pode ser muito mais que isso. Um arquivo CSS anexado de forma correta em qualquer documento pode fazer coisas incríveis - e foi o que aconteceu com esse pobre feed RSS que eu havia gerado semana passada. Depois de algumas classezinhas criadas em uma folha devidamente alidada, obtemos o resultado incrível do nosso trabalho.

Pode parecer besta para quem está olhando de fora, mas quem está envolvido com a área chega a ser vibrante! Vou tentar colocar passo a passo como foi gerado o XML e o CSS, além do link entre os dois.

Primeiro : comece com o XML dentro das regras para gerar um feed RSS

<rss version=”2.0″>
<channel>
<title>ruf space</title>
<link>http://ruf.rockgrafia.com</link>
<image>
<title>ruf space</title>
<url>http://www.rockgrafia.com/ruf/thick/rufspace.png</url>
<link>http://ruf.rockgrafia.com</link>
</image>
<description>Blog sobre tecnologia, web e standards.</description>
<language>pt-br</language>
<copyright>copyleft : ruf space 2005</copyright>

Segundo : crie um engine em uma linguagem qualquer para capturar da base de dados do seu site os itens e estruturá-los assim

<item>
<title>Google video</title>
<description>
Hoje cedo me deparei com uma notícia que milhares de sites ainda irão
publicar, por isso resolvi traduzir e publicar antes .
Google quer seus vídeos
Você trabalhou duro fazendo seus videos, e sempre desejou um jeito
fácil de publicar para milhões de espectadores em potencial. Esta é
justamente a idéia por trás do anúncio do Google Video Upload Program,
onde você pode fazer upload do seu ví… publicado 14 de Abril por
Fellipe Cicconi sobre google. </description>
<link>http://ruf.rockgrafia.com?art_id=7</link>
</item>

Terceiro : crie uma folha de estilos

[…]
item {
display:block;
}
item description {
display:block;
font-size: 1em;
text-align:left;
padding: 10px;
}
item title {
background-color: #D5DFD5;
margin-top: 10px;
margin-bottom: 5px;
font-size: 1.5em;
}
[…]

Quarto : Linke as duas coisas com a instrução <?xml-stylesheet type=”text/css” href=”themes/xml/v1.css” ?> dentro do XML. Se tudo estiver certo, vai funcionar, qualquer coisa, clica em ver código fonte dos feeds e pronto.

Vou estar estudando e descrevendo tudo isso mais a fundo. O próximo passo é criar um XSL e ver como funciona. See ya!

Este artigo foi publicado Saturday, 16 de April de 2005 às 13:01 e foi categorizado como webstandards, Cookbook. Você pode acompanhar os comentários deste post assinando o comment RSS (RSS 2.0 [?]). Você também pode comentar ou atrelar um trackback [?] daqui no seu site.