Qualquer um que codifique HTML, ou mesmo use um editor WYSIWYG, já esbarrou no problema. Se você trabalha com internet, já deve ter tido também esse problema. O código se tornou complexo, com várias tabelas, uma dentro da outra. Vários frames, com uma porção de scripts para manter o
conteúdo atualizado entre eles. Uma parte da aplicação rodando em um pop-up, com um script
que atualiza o conteúdo principal.
Então, cumprindo a lei de Murphy, um dos seguintes fatos indesejáveis acontece:
Que fazer? É claro que com muito cuidado e talentoesse tipo de problema pode ser evitado, mas isso envolve umaquantidade de trabalho insana. Já vi muitos projetosonde se gastou mais tempo preso nas entranhas de umcódigo complexo do que em qualquer outra fase doprojeto.
Tem um pessoal na web que propõe umasolução bastante interessante para isso.É a turma do WaSP (www.webstandards.org.) Assoluções não são apenas uma listade novas tecnologias, mas também uma filosofia dedesenvolvimento baseada na simplicidade.
Baseado nessa filosofia da simplicidade, que tem me rendidoresultados surpreendentes, gostaria de fazer algumassugestões interessantes:
Quem já trabalha com XML certamente percebeu o poderda flexibilidade e da simplicidade. Éimpossível escrever um XML com erros de sintaxe,porque os interpretadores reclamam imediatamente. Émuito simples escrever documentos XML, sendo fácilextrair dados de qualquer banco de dados etransformá-los em XML (a maioria dos SGBDs incorporaou tem planos de incorporar o suporte nativo a XML.)Através da poderosa linguagem XSL e da farta oferta deparsers gratuitos, XML pode ser transformado em praticamentequalquer formato de arquivo.
XHTML nada mais é do que uma forma de escrever umdocumento HTML de modo que ele também seja umdocumento XML válido. Ou seja, seu documento HTMLganha a coerência e flexibilidade de um documento XML,podendo ser facilmente lido por ferramentasautomáticas e convertido em outros formatos dearquivos. Com XHTML torna-se muito fácil oferecer osdados do seu site através de WAP ou de um RSS(http://rssficado.pilger.inf.br)por exemplo. Torna-se fácil também transformaro resultado de uma consulta a banco de dados ou um documentoXML numa página web.
A boa notícia é que é muito fácilescrever XHTML. Qualquer um que escreva HTML pode aprender afazê-lo sem muita dificuldade. Existem inclusive umasérie de ferramentas interessantes para tornar esseprocesso mais produtivo, como o excelente HTML Tidy(http://tidy.sourceforge.net)que tem uma eficiência impressionante para umaferramenta automática.
Como você cria um título num documento HTML?
O meio comum hoje em dia para fazê-lo é:<font face=”Arial” size=”4″ color=”blue”>Texto doTítulo</font>.
Quando eu estudei HTML, em 1996, aprendi que existia uma tagespecífica para criação detítulos. É a tag h1. Assim, a maneira de secriar um título em HTML seria: <h1>Texto doTítulo</h1>.
Extremamente mais simples, não é verdade? Etorna o código também mais significativo. Assimum interpretador pode saber, por exemplo, onde estãoos títulos no meio do texto. Ou seja, esta abordagemdá significado semântico ao código.Aquele tag passa a significar alguma coisa, mesmo quenão seja vista num browser que renderize a fonte maiore azul que você tinha planejado.
Aliás, por falar no texto azul, se você usar asegunda abordagem seu título será exibido comos estilos padrão do navegador, e seu azul vai para obeleléu. Como você não quer perder abonita formatação que havia planejado, aquientra uma segunda linguagem, o CSS. Com CSS você podecolocar toda essa informação sobreformatação num arquivo externo. Assimvocê fica com um arquivo HTML apenas cominformação (que fica muito mais simples,organizado e rápido de se escrever) e mantémtoda a formatação num arquivo externo. Se umdia seu chefe resolver que todos os títulos do sitetem que ser vermelhos ao invés de azuis (acredite,isso é muito comum) você sóprecisará alterar uma palavra em um únicoarquivo e todos os títulos do site estarãoautomaticamente ajustados.
Tabelas são um recurso muito útil do HTML. Semtabelas como exibiríamos informaçõescomo uma lista de produtos, um extrato bancário ou umcalendário? O problema é que tabelas tem sidousadas para muito mais do que isso. É preciso colocaro menu ao lado do texto? Cria-se uma tabela. É precisoque o texto tenha uma largura delimitada? Cria-se uma tabela.Imagem junto ao texto? Menu no cabeçalho? Duas colunasde texto? Tabela neles!
E como fica, nessa situação, a semânticado documento? Como você deve imaginar, nãohá aqui aquela prática separaçãoentre informação e formatação.Além disso, temos um outro sério problema: embrowsers antigos, ou mesmo em browsers modernos maldesenvolvidos, como o Internet Explorer, as tabelas sósão exibidas depois que a última tag</table> chega ao navegador.
É por isso que, quando você estáconectado via dial-up, em alguns sites a tela fica em brancodurante longos segundos (às vezes minutos) atéque é exibido de uma vez só.
Abrir mão de tabelas para montar layouts vai tornarseu código muito menor, mais simples e organizado. Vaitambém centralizar a formatação,colocando tudo que se refere a layout em um únicoarquivo. Imagine a facilidade de manutenção.Melhora também a experiência do usuário,pois a informação é exibida instantaneamente, assim que chega ao browser.
Dá-se a esta abordagem o nome de tableless. Apesar donome, não é a ausência total de tabelas,mas o seu uso apenas onde é semanticamentejustificável. De lambuja, um documento tableless bempensado vai funcionar em qualquer navegador, em qualquer sistema operacional, mesmo em PDAs.
Pense muito antes de aplicar uma solução
baseada em frames, DHTML, scripts absurdos, pop-ups, plugins,
ActiveX, Applets ou qualquer outra tecnologia que quebre
essas duas premissas da internet:
- A web é um ambiente multiplataforma.
- Cada documento na web tem um endereço associado a
ele.
Não vou me alongar nesse tópico, mas gostaria que você tomasse um tempo para ler:
O interessante dessa abordagem baseada na simplicidadeé que você não precisa fazer tudo de umavez. Se está inseguro para começar, pode apenaseliminar as tags <font> e criar um arquivo CSSúnico. Ou pode começar usando os recursos deXML do seu banco de dados para gerar XHTML, ou criando umRSS. O importante é começar a simplificar antes que você fique maluco!
7 ComentáriosTodo mundo que já experimentou ama bloqueadores de pop-ups. Navegando há anos com Opera e Konqueror e usando Firefox para acessar o Gmail, ainda me assusto quando preciso navegar no IE, seja num cybercafé ou na máquina de um amigo. Como é que as pessoas podem conviver com aquilo? Pop-ups são muito chatos, e se você não acha é porque ainda não experimentou viver sem eles tempo o suficiente.
Por outro lado, o advento dos bloqueadores de pop-up trouxe alguns desafios bastante específicos para o desenvolvedor. Por exemplo, o desafio de fazer sites compatíveis com qualquer navegador quando é obrigado a usar ferramentas de terceiros. É o caso, por exemplo, de alguns sistemas de pagamento nacionais, ferramentas essenciais para o desenvolvimento de qualquer e-commerce brasileiro. O fato é que muitos desses sistemas exigem dos seus usuários a exibição de um pop-up, seja em uma tela de pagamento ou, o que é mais comum, no recibo.
Para complicar, esses sistemas geralmente são submetidos a complexos e burocráticos processos de homologação, onde geralmente a pessoa que vai aprovar seu sistema usa Internet Explorer para Windows e não vai estar muito interessado em ouvir seus argumentos a respeito da inacessibilidade dos pop-ups. Vamos então criar uma solução para que o usuário de navegadores sem bloqueador de pop-ups possam ver normalmente seus pop-ups enquanto os que possuem bloqueador sejam servidos com um confortável link para o endereço do pop-up. Além disso, vamos fazer que aqueles que escolheram o gerenciamenteo inteligente de pop-ups possam ver um pop-up ao clicar no link, mantendo o layout do recibo como foi planejado pelo sistema de pagamento, e o que escolheu bloquear todos os pop-ups possa ver o conteúdo na mesma janela.
Telefonar e escrever para pessoal do sistema de pagamentos, avisando que pop-ups são uma solução ruim. Demonstre sua indignação pelo fato de o sistema deles precisar de uma ferramenta tão estúpida. De quebra, aproveite para perguntar como fazer o site deles, o módulo administrativo, ou o que mais eles tenham feito para que você e seu cliente acessem funcionar em seu navegador. Pergunte porque o manual fala sobre Internet Explorer e Netscape 4, mas não fala do Safari ou do Firefox. Apresente dessa maneira o Opera e o Mozilla. Se muitos de nós fizermos isso, eles vão ter que começar a considerar esses navegadores ao criar seus sistemas.
Entender os fatos básicos. Agora que você já ajudou a tornar a web um lugar melhor, vamos resolver o problema imediato do nosso cliente. Primeiro vamos ver como criar um link de pop-up que seja acessível a quem não quer ou não pode exibir pop-ups. Links para pop-ups geralmente são criados assim:
<a href="javascript:void(open('http://www.atipico.com.br','nova','width=800,height=600'))">Atípico</a>
O problema é que quem não tem javascript em seu navegador ou bloqueou todos os pop-ups não pode acessar o link. Muita gente por aí tem usado assim:
<a href="http://www.atipico.com.br" onclick="window.open(this.href,'nova','width=800,height=600');return false;">Atípico</a>
Assim, o link passa a ser um link HTML comum. Para quem tem javascript disponível, o evento onclick vai abrir o popup e o return false ao final vai cancelar o click, fazendo com que a página seja aberta apenas no pop-up, e não na janela atual. Apesar da beleza e da simplicidade, este código tem dois problemas. O primeiro é que o Internet Explorer 5.0, em algumas situações, não lida muito bem com comandos separados por ponto-e-vírgula em atributos HTML. O segundo, mais sério, é que navegadores como Konqueror e Firefox não interrompem um script ao bloquear um pop-up. Então, se o Konqueror estiver configurado para bloquear todos os pop-ups, o pop-up não vai aparecer, e o return false vai ser executado, fazendo com que o link também não seja carregado na janela atual.
De fato, o código acima era muito usado antes do advento dos bloqueadores de pop-up, para manter o site acessível en navegadores sem javascript. Ele funciona muito bem se não houver javascript disponível, mas falha em alguns navegadores se houver javascript e o bloqueador de pop-ups estiver habilitado.
Para entender mais de perto a problemática vamos verificar como os navegadores se comportam ao bloquear um popup. Para isso vamos usar o seguinte código:
<script>
alert("passo 1")
window.open("http://www.atipico.com.br","nova","width=800,height=600")
alert("passo 2")
</script>
<script>
alert("passo 3")
</script>
Fazendo o teste com este script você pode notar como os navegadores se comportam de maneira diferente ao bloquear um pop-up. Testei no Opera 7.52, no Firefox 0.8 e no Konqueror 3.2.2, todos em Linux. O Mozilla e o Konqueror exibem os três alerts. Ou seja, o pop-up é bloqueado mas o script segue sua execução normal. No Opera são exibidos os alerts 1 e 3. O Opera, portanto, interrompe a execução de um script ao bloquear um pop-up, mas executa normalmente outros scripts na mesma página. O Internet Explorer com a Google Toolbar se comportou de maneira idêntica ao Mozilla e ao Konqueror.
Vamos manter nosso pop-up automático, e inserir um link para abrir pop-up que poderá ser usado por quem usa bloqueadores (ou mesmo por alguém que tenha fechado o pop-up por engano):
<script>
pagina="http://www.atipico.com.br"
function abrir(){
newWindow=window.open(pagina,"nova","width=800,height=600")
if(newWindow)return false
}
abrir()
</script>
<a href='http://www.atipico.com.br' onclick='return abrir()'>Abrir</a>
Aqui criamos uma função, abrir, que abre o popup. Em seguida a executamos. Se não houver bloqueadores o pop-up será exibido automaticamente neste passo. Exibimos então um link “Abrir” que executa novamente a função quando clicado. Aqui está toda a mágica, o onclick do link contém return abrir(), ou seja, o evento será tratado de acordo com o retorno da função. O click somente será cancelado se a função retornar false.
Agora note que a função tem duas linhas. Na primeira abrimos a nova janela (pop-up) e armazenamos o resultado na variável newWindow. Na segunda linha testamos o valor de newWindow, se existir retornamos false. Assim, acompanhe nosso programa em três situações diferentes: primeiro, se não houver bloqueadores de pop-ups ou se o bloqueador estiver configurado em smart policy, ou seja, permitir os pop-ups requisitados por você. Neste caso, a primeira linha da função abre a janela e armazena o objeto na variável newWindow. A segunda linha testa o valor de newWindow, que existe, e retorna false, cancelando o click. Neste caso o usuário verá o pop-up e nada acontece com a janela original, perfeito. O segundo caso é o de bloqueadores de pop-ups que não permitem pop-up algum, mas não interrompem a execução do script. Neste caso, o pop-up não será aberto. Ao chegar à segunda linha da função, new Window é testada, e não existe. A função não retornará valor (na verdade retornará undefined, mas isso é outro assunto). O click não será cancelado e o usuário verá a página solicitada na janela original. A terceira situação é o caso dos bloqueadores de pop-up que interrompem a execução do script. Nestes o script sequer chegará à segunda linha da função, o javascript será interrompido e o evento não será cancelado, uma vez que o script sequer chegou a retornar algum valor. O resultado será idêntico ao segundo caso.
Há ainda uma quarta situação, a dos navegadores que não possuem javascript habilitado. Neste caso o link vai se comportar como um link normal, sem nenhum problema para o usuário (embora eu duvide que alguém sem javascript consiga usar qualquer sistema de pagamento eletrônico disponível no Brasil.)
Pra quê um quarto passo? O código anterior já funciona muito bem, resolvendo nosso problema. Bom talvez você seja curioso o suficiente para querer complicar um pouco as coisas. A questão agora é: como exibir conteúdo de acordo com o status do pop-up. Isto é, por exemplo, se não houver bloqueador de pop-up não exibir o link “Abrir”, uma vez que o usuário verá o pop-up automaticamente. Pois bem, vamos lá:
<script>
pagina="http://www.atipico.com.br"
abriu=false
function abrir(){
newWindow=window.open(pagina,"nova","width=800,height=600")
if(newWindow){
abriu=true
return false
}
}
abrir()
</script>
<script>
if(!abriu)document.write("<a href='http://www.atipico.com.br' onclick='return abrir()'>Abrir</a>")
</script>
Agora usamos uma variável, abriu, para guardar o status do pop-up. Começamos o script atribuindo false a esta variável. Depois, dentro do if que testa o pop-up, setamos seu valor para true. Se o pop-up for aberto o valor de abriu será true, caso contrário será mantido o false original.
No segundo bloco script testamos o valor de abriu. Se o pop-up não foi aberto, escrevemos no documento o link para abrí-lo. Colocamos esta linha em um segundo bloco script para que seja executada mesmo que o bloqueador interrompa o primeiro script ao cancelar o pop-up.
O script já faz o que propusemos, exibe o link apenas se o pop-up não for aberto automaticamente. Mas agora ele falha em navegadores sem suporte a javascript. Iso é fácil de resolver, basta colocar, depois dos scripts:
<noscript>
<a href="http://www.atipico.com.br">Abrir</a>
</noscript>
Como você viu, lidar com bloqueadores de pop-up é tarefa trivial, e você pode oferecer conteúdo ao seu usuário no formato que ele escolheu ver, pop-ups para quem não se importa com eles, ou mesmo para quem os deseja, e links comuns para quem escolheu não ver pop-ups. Claro, continuamos achando que pop-ups não são uma boa ferramenta, mas como você não pode trabalhar sempre sozinho, isto pode lhe ser útil ao lidar com código de terceiros, como os citados sistemas de e-commerce.
O código nesse artigo foi escrito apenas para estudo. É claro, quando for para valer, você deve escrever código melhor que o meu. Seus links precisam ter um atributo title que descreva bem seu destino, e “Abrir” não é um bom texto para se colocar em um link. Você sabe também que, neste último exemplo, depois de if(!abriu) você pode fazer o que quiser, e também deve saber que não é bom escrever scripts assim, no meio do seu HTML, e que document.write não é uma boa maneira de se exibir conteúdo. Esperamos que estas idéias lhe sejam úteis. Se você desenvolver algo útil com isso conte pra gente.
6 Comentários