UOL XMLify: Um plugin do wordpress para propagandas do UOL XML

(Para os preguiçosos, o plugin está aqui: UOL XMLify )

Quando criei um novo blog com conteúdo que feria a licença de uso do google ad-sense (i.e. tinha mulépelada), fiquei sem opção de propagandas para colocar nos feeds. No blog em si não tinha muito problema, pois vários programas de afiliados aceitam esse tipo de conteúdo e são facilmente embutíveis em blogs, mas os feeds são outra estória. A maioria dos programas de afiliados usa javascript ou flash de uma forma ou de outra, inviabilizando o uso dos banners em leitores de feed (leia-se: não funciona no google reader).

Exemplo de anuncios XML UOL

Exemplo de anuncios XML UOL

Por sorte o UOL tinha uma modalidade nova no seu programa de afiliados: UOL XML. Esta modalidade consiste em uma API XML padrão onde eu poderia acessar a lista de produtos oferecidos, ofertas, etc, e processar e formatar da forma como bem entendesse. Primeiro pensei em fazer uma "gambiarra" como tinha feito pra embutir os anuncios do submarino (que são apenas imagens com um link padronizado), mas a coisa ficava mais complexa pois era preciso acessar o UOL e baixar os XMLs, processá-los e só então embutir no feed.

Tela de administração do plugin

Tela de administração do plugin

Optei pelo caminho mais difícil: desenvolvi um plugin. Ele está ainda em processo de aprovação pelo pessoal do wordpress para ser hospedado por lá, mas já coloquei a primeira versão aqui: UOL XMLify: Um plugin do wordpress para propagandas do UOL XML

Testem, usem e comentem!

Como "consertar" o position:fixed no IE.

Que era minha pergunta de ontem, mas ninguém respondeu... Apelei, claro, pro labirinto de Falken, que me respondeu em charadas, mas por fim respondeu. A dica que me foi útil veio daqui, e é uma gambiarra sem tamanho: Já que essa melda não funciona, use javascript e boas!

E foi o que fiz. Agora minha barra lateral de propagandas (aleatória, como sempre) funciona que é uma maravilha. Até no Internet Explorer (argh!). Então aqui vai o que eu fiz no wordpress pra funcionar:

Propagandas que ficam em posição fixa, fora da área útil da tela, no wordpress (e que claro, funcionem no Internet Explorer, senão era moleza).

Pois tudo começou assim: CSS é manha! basta então eu criar uma "div" com minha propaganda, e tacar um CSS pra colocar ela onde eu quero. E foi o que eu fiz: Acrescentei no "header.php", logo abaixo do <body> o seguinte trecho:

<div id="banner_vertical">
        <!-- ... Trecho contendo minha propaganda, favor consultar seu provedor de propagandas ... -->
</div>

Feita essa "moleza", fui atrás do CSS no arquivo "style.css" e lasquei-lhe um estilo correspondente à minha div:

#banner_vert {
        position: fixed;
        right: 1em;
        top: 2.5em;
        z-index: 0;
}
#page {
        z-index: 1 !important;
}

Tudo muito fácil, claro! E muito bom, no opera e no firefox a coisa tava maravilhosa! E eu lá lembrei de testar no IE? Claro que não... Até que fui testar outra coisa, sem a menor relação com isso e abri no IE. ARGH!!! A propaganda aparecia "centralizada" (sic, acho que o certo seria centrada, quem me corrige?), no alto da tela, jogando todo o resto pra baixo, fazendo até sumir tudo da tela! Desesperei! Tentei achar solução, e nada! O position:fixed simplesmente não funciona no IE. Pra poder ter tempo pra pensar, lasquei um "float: right" e torci pra dar certo. Até deu, mas o efeito não era nada do que eu queria. A página era "jogada" pra esquerda de uma distância correspondente à largura do banner. Mas eu não tinha o que fazer, era 1 da manhã, e eu resolvi ir dormir.

Dois dias depois, esperando que alguém respondesse meu post no blog, acabei desistindo. ninguém ia me dar essa dica, teria de descobrir sozinho. Mas pra isso que existe o gúgou, né verdade? E fui. Acabei achando uma página legal (ou pelo menos parece legal, não li tudo porque era grande e só copiei os exemplos, hehehehe): http://www.howtocreate.co.uk/fixedPosition.html.

Claro que os exemplos não eram aplicáveis to the foot of the letter... Mas juntando dois dos exemplos, tive exatamente o que eu queria. Que acabou se resumindo a acrescentar no meu "header.php" (de novo ele... mas é quem aparece em todas as páginas, então vai ele mesmo) o seguinte trecho de código:

<!-- hack for IE 5 fixed -->
<style type="text/css">
#banner_vert {
        /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
        position: absolute;
        right: 1em;
        top: 2.7em;
}
body > div#banner_vert {
        /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
        position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#banner_vert {
        /* IE5.5+/Win - this is more specific than the IE 5.0 version */
        left: expression( ( -12 - banner_vert.offsetWidth
                             + ( document.documentElement.clientWidth
                                 ? document.documentElement.clientWidth
                                 : document.body.clientWidth )
                             + ( ignoreMe2 = document.documentElement.scrollLeft
                                             ? document.documentElement.scrollLeft
                                             : document.body.scrollLeft ) )
                           + 'px' );
        top: expression( ( 6 + ( ignoreMe = document.documentElement.scrollTop
                                            ? document.documentElement.scrollTop
                                            : document.body.scrollTop ) )
                         + 'px' );
}
</style>
<![endif]>
<![endif]-->

Uh! Mas esse trem é grande... o que ele faz??? Bom, vamos destrinchar! comecemos pelo que vocês já tinham visto antes...

#banner_vert {
        /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
        position: absolute;
        right: 1em;
        top: 2.7em;
}
body > div#banner_vert {
        /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
        position: fixed;
}

Cara, é igualzinho eu tinha tacado no CSS, nem precisava copiar aqui, podia continuar lá... Mas eu quis ser consistente com o exemplo, então taquei aqui e tirei de lá do CSS. Basicamente, tem umas diferencinhas: só usa uns recursos pra browsers antigos (position: absolute) que eu num quero nem ver como fica, e pra garantir que só browsers novos vão ler a coisa direito, usa o "body > div#banner_vert". Isso aí só "diz" que o conteúdo ali se aplica só no que estiver dentro do "body", for declarado como "div" e tiver o "ID" igual a "banner_vert". E como essa sintaxe não existe em browsers velhos, browsers velhos vão ignorar (espero eu, nem quero estar vivo pra testar isso). Essa parte então foi manha, né? Vamos pro resto...

<!--[if gte IE 5.5]>
<![if lt IE 7]>
 ...
<![endif]>
<![endif]-->

Pra quem entende de CSS multibrowser, isso aí ficou fácil: fala que o que tá no meio (que eu substitui por "...") só vai precisar rodar se minha versão for "gte" (maior ou igual) que "IE 5.5" e também se for "lt" (menor) que "IE 7". Manha né? Então, próximo...

div#banner_vert {
        /* IE5.5+/Win - this is more specific than the IE 5.0 version */
        left: expression( ( -12 - banner_vert.offsetWidth
                             + ( document.documentElement.clientWidth
                                 ? document.documentElement.clientWidth
                                 : document.body.clientWidth )
                             + ( ignoreMe2 = document.documentElement.scrollLeft
                                             ? document.documentElement.scrollLeft
                                             : document.body.scrollLeft ) )
                           + 'px' );
        top: expression( ( 6 + ( ignoreMe = document.documentElement.scrollTop
                                            ? document.documentElement.scrollTop
                                            : document.body.scrollTop ) )
                         + 'px' );
}

Ugh! isso aí nem eu li direito! Basicamente, isso aí diz: use o seguinte código em javascript para ajustar a posição "left:" (ponta mais à esquerda) e "top:" (ponta mais ao alto) do meu "div" que se chama "banner_vert". O que tem depois de "expression" e entre parentes é o código javascript que calcula a posição ideal na tela do que que eu quero. Vou tentar destrinchar...

-12 (ou no de baixo 6):

Duh! é a posição em pixels que eu quero o div. O "-" é porque eu quero à direita, e não à esquerda!

- banner_vert.offsetWidth

É o tamanho do banner. Eu subtraio ele pelo mesmo motivo acima: estou setando a posição mais a esquerda do banner, mas quero que ele apareça a direita. então calculo a posição do final da tela MENOS o tamanho do banner MENOS a margem que eu vou querer 😉

( document.documentElement.clientWidth
  ? document.documentElement.clientWidth
  : document.body.clientWidth )

A largura da tela. Se eu estiver dentro de um frame ou outra coisa assim (documentElement) eu pego ele, senão pego logo o body! Sacou?

( ignoreMe2 = document.documentElement.scrollLeft
              ? document.documentElement.scrollLeft
              : document.body.scrollLeft )

Isso daí é pra forçar o cara a calcular o tamanho do "scroll" que foi feito. Aí eu vou e "adiciono" isso. Nesse caso o "scroll" horizontal e no caso de:

( ignoreMe = document.documentElement.scrollTop
             ? document.documentElement.scrollTop
             : document.body.scrollTop ) )

o scroll vertical.

E é isso, então o javascript se resume a calcular a posição desejada em relação ao início da página, e somar isso com o scroll que venha a ser feito. Simples né? Vamos torcer pra que funcione sempre em qualquer situação.

Novo blog (e seus problemas...)

É isso aí galera,

Aposentei meu antigo blog, aquele que ficava em http://www.girino.org/girinowiki/Especial:ListSubBlogs. Agora o blog novo é aqui mesmo (duh!). A idéia do blog original era mais um "capricho", ou uma prova de conceito, de usar o mediawiki para fazer um blog. De certa forma era muito bacana. Eu tinha a minha disposição todos os recursos do mediawiki (templates, redirects, includes, etc) mas no final faltavam as facilidades de um blog. a manutenção ficou difícil e meu tempo pra gastar "desenvolvendo" se acabou-se. Se ainda tiver alguém interessado na "prova de conceito", ficam os links para o código fonte: ListSubBlogs e ListSubBlogsRSS.

O último dos Moica^H^H^H^Hproblemas...

Mas aí vem a coisa nova, o wordpress. E aí a gente resolve customizar (nem que seja pra colocar só as propagandas, apesar de que eu coloquei os widgets de votações, etc...) e esbarra nos velhos problemas de sempre. E o meu não tem nada de diferente: É a merda do IE. é uma coisa simples... Tão vendo essa barra de propagandas que eu tasquei aí do lado? Pois é. Queria que ela ficasse "fixa" na lateral o tempo todo. se o cara faz scroll, a página não scrolla junto... E se você usa Firefox, não tá nem entendendo meu problema... Eu tasquei no CSS um treco mais ou menos assim:

#banner_vert {
float: right;
position: fixed;
right: 1em;
top: 2.5em;
z-index: 0;
}

(Mais ou menos o caramba, é exatamente isso, hehehehe). Mas o lance é que na melda do IE não funciona. Meu código original até nem tinha esse "float" aí. Eu tasquei ele como "solução técnica de contorno" pra que pelo menos não ficasse um banner vertical NO ALTO do meu site. Ficou tosco, e eu sei que a maioria do mundo civilizado usa IE... Então preciso, encarecido(s) leitores(s), de alguma boa alma que me ensine como fazer essa porra funcionar no IE. E aí? Alguém se habilita???