Tableless - Padrões Web com Pastel e Caldo de Cana

Histórico do mês de Dezembro, 2007

« Posts antigos

Comentários Condicionais - Não use

A utilização de comentários condicionais não é uma excelente maneira de contornar bugs. Os comentários condicionais são comentários incluídos no código HTML escritos exclusivamente para fazer uma parte do código funcionar no Internet Explorer.

Normalmente o uso dos comentários condicionais servem para especificar uma parte do código para a interpretação exclusiva pelo Internet Explorer. Alguns desenvolvedores criam um CSS exclusivo para o IE e utilizam os comentários condicionais para que apenas o Internet Explorer entenda este CSS. Assim é possível corrigir bugs que acontecem apenas no Internet Explorer. Continuar lendo »

74 Comentários

Quem precisa de versão mobile?

Parece ser um erro comum dos novatos criar versões diferentes do mesmo site.

O ano era 1997. Eu e e todo mundo que eu conhecia usávamos Netscape Navigator. Foi o ano em que, pela primeira vez, fiz um site sozinho. Tudo, atendi o cliente, preparei textos, fotos, fiz o layout, se é que se pode chamar aquilo de layout, criei uma conta no Geocities e publiquei. Em seguida entrei no Yahoo! e cadastrei o site, para que aparecesse nas buscas.

Depois de alguns dias recebi um e-mail do Yahoo! dizendo que o site não poderia ser publicado no diretório porque não funcionava no Internet Explorer. Continuar lendo »

26 Comentários

Tableless.com.br - The Wonder Years

No dia primeiro de Janeiro de 2008, o Tableless.com.br faz 5 anos de idade. Por isso, uma reformulação total do site era bem vinda. Essa reformulação não será rápida e não envolve apenas a constante mudança do layout, mas também a filtragem de todo o conteúdo contido no site.

Durante muito tempo, principalmente no começo do site, o tableless.com.br foi apenas um blog. Conforme o tempo foi passando, o site foi se transformando sendo influenciado pelo mercado e pelas tendências da comunidade. Continuar lendo »

82 Comentários

Email bom é TXT

Você é um sujeito antenado e sabe disso. Mas talvez seu chefe não saiba. Talvez seu cliente não saiba. (Talvez você mesmo não saiba.) Ou por qualquer outro motivo, você pode se ver obrigado a enviar uma newsletter em HTML. E agora, o que você faz? Chuta o pau da barraca, abre o Dreamwaver e prepara “aquele” layout?

Você ainda pode, mesmo enviando emails em HTML, se preocupar em tornar melhor a experiência de seu usuário. Continuar lendo »

14 Comentários

Image-Replacement x Imagens

Este assunto é muito abrangente e divertido de ser debatido.
Portanto, se você discordar deste texto, quero que lembre que é minha opinião… claro, sempre podemos mudar de idéia. :-D

Para não viajarmos muito, vamos pegar como pauta deste texto, o ponto que discutimos na “Lições Sobre Semântica #3″.
O ponto era fazer títulos com imagens ou image-replacement?

Bem, felizmente temos uma base para nos guiar… O código deve ficar o mais semântico possível.
Se o código deve ser semântico, já sabemos que as tags Hn que são usadas para definir títulos não podem ser descartadas, então elas devem continuar.

Ótimo, sabendo disso, vamos analisar as opções:

  1. Colocoar a imagem dentro de uma tag Hn.
  2. Fazer image-replacement sem tag span.

Eu poderia colocar como opção a técnica de image-replacement com tag span. Acontece que a tag span, suja nosso código, e queremos ter um código descomplicado.

Colocando a imagem dentro de uma tag Hn

A solução seria:
<h1> <img src=”imagem.jpg” alt=”Texto” /> </h1>

Hmm… Essa solução é bastante atraente…
Se o usuário desabilitar as imagens, ou se por ventura a imagem aparecer quebrada, o texto alternativo (alt) irá aparecer no lugar da imagem.
Os browsers mais modernos como Firefox tratam esse texto como um texto normal, dando até para você selecionar. E esse texto pode ficar com o estilo que você definiu no CSS para a tag de título.

Fazer image-replacement

A solução seria:
<h1> Texto </h1>

E assim, sumir com o texto pelo css e colocar a imagem como background.

Essa solução é muito, muito atraente…
Seu código não fica sujo com tags span ou tags img. Se a pessoa entra no site com algum tipo de browser baseado em texto, ela não terá problemas… Existe um porém.
Se o usuário desabilitar apenas as imagens, o texto não aparece.

Mas, agora vem a vantagem que fará você decidir o que fazer.

Se você optar por Image-Replacement, você terá uma flexibilidade que se colocando apenas imagens, você não teria.
Imagine que você tenha um site grande, e que todos os títulos tem que usar uma fonte maluca que o designer escolheu… Fatalmente estes títulos terão que ser imagem.

Um certo dia, o cliente se encheu da fonte maluca e decidiu que a fonte dos títulos devem mudar para Verdana.
Se você tivesse colocado as imagens direto no código, você teria que procurar cada uma das imagens e mudar para texto.
Se você fez com image-replacement, bastava desabilitar a image do background e fazer o texto aparecer… Muito, mas muito mais fácil.

Agora é com você. Essa é a principal diferença.
Os robos de busca, indexam os texto alternativos das imagens bem como o texto do image-replacement, então, não há problemas com isso.

Como disse, o assunto é bastante abrangente. E não é só este “problema” que existe. Mas o importante é analisar o caso, e aplicar a melhor solução para o caso.

9 Comentários

Informação e Formatação; As duas camadas de desenvolvimento web

Se você já leu alguma coisa sobre Tableless, já deve ter percebido que nesse método nós separamos a informação da formatação.
Para fazer a formatação do site, ou seja, para literalmente aplicarmos o design do site, nós usamos o CSS (as famosas Folhas de Estilo), que eu julgo ser a principal ferramenta do desenvolvedor para criar sites tableless. Para a apresentação da informação, você pode usar HTML ou XHTML, o que você achar mais apropriado.

A separação entre informação e formatação traz muitas vantagens, mas vou citar apenas duas, divididos em dois artigos:

  1. Facilidade de Manutenção
  2. Maior produtividade

Então, vamos ao que interessa.

Facilidade de Manutenção

Separando a informação da formatação, você já organiza grande parte do código, pois você os separa em arquivos distintos, um arquivo .css para a formatação e outro arquivo .html (.asp, .php. seja lá o que for) para a informação. Esta simples organização, lhe permite fazer com rapidez e objetividade qualquer tipo de manutenção, sendo ela grande ou pequena.

Imagine a seguinte situação:
Você está no final daquele grande projeto, aquele site em que você fica horas desenhando tabelas, puxando daqui e dali, acertando medidas, etc… e quando você olha para o lado para descansar um pouco as vistas, você chega a pensar que seguiu o coelho branco…
Então, sem mais nem menos seu chefe lhe chama para conversar sobre o projeto e fala que o cliente pediu para que todos os títulos do site mudassem de cor, você o olha desacreditado, e já contando silenciosamente quantos títulos tem no site, se dirige para sua mesa e decide por onde começar.

Se você não passou por esta situação, acredite, muitos desenvolvedores já passaram por isso.

Vamos supor que o desenvolvedor do exemplo acima, usasse para apresentar os títulos a tag <h1></h1>, ele simplesmente atribuiria pelo CSS um valor para que todas as tags <h1> tivessem a cor desejada, em poucos segundos, ele mudaria a cor de todos os títulos do site, e isso tudo, sem mexer no arquivo HTML, economizando o tempo que ele levaria abrindo vários arquivos para procurar as intermináveis tags <font color=”#666666″></font> somente para mudar uma simples cor. Problemas como este, não vão mais tomar o precioso tempo do desenvolvedor.

Agora, e se a manutenção não fosse simples assim? E se fosse mais um pouco complicada, como do tipo mudar todo o layout do site? E se você pudesse mudar todo o layout do site, mudando apenas um arquivo .css?
Em um site tableless, o código HTML fica livre de tags desnecessárias do tipo: <font> <center>, deixando você à vontade para modificar o visual do site usando apenas CSS, te dando total controle sobre localização de objetos, tamanhos, cores e famílias de fontes, medidas, alinhamentos de texto, etc…

Fazendo isso, você pode escrever vários arquivos CSS distintos, que modifiquem o visual do site completamente, e o melhor, sem tocar numa letra do arquivo HTML, ele continua sendo o mesmo.

Vários sites usam está técnica, deixando o usuário escolher o layout que mais lhe agrada, veja alguns exemplos:

Realmente é uma mão na roda, não acha?
Tudo organizado, formatação de um lado, informação do outro, sem complicação… Seu código fica enxuto, limpo, muito menor do que se você tivesse feito do jeito tradicional, lhe dando menos dor de cabeça, e mais tempo. Ainda por cima, você contribui para uma web mais semântica.

No próximo artigo trataremos sobre o ganho de produtividade observado com a aplicação da metodologia tableless.

Leitura Recomendada:
http://www.pedromendes.com/words/molly-200211-truelanguage1.html

5 Comentários

HTML simples com XML e CSS

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:

  1. Um cliente liga reclamando que o site está dando um tal de “erro de script” quando clica num link, você
    tenta, mas não consegue reproduzir o erro em nenhum navegador.
  2. Alguém da diretoria resolve que os títulos devem ser azuis, não vermelhos. E você se
    põe a localizar <font face=”verdana” size=”5″ color=”red”> para poder mudar a cor.
  3. Alguma tabela não fechada corretamente estádando problemas no Netscape, mas o código tem cincotabelas aninhadas e você perde um dia tentando acharo defeito.
  4. Você percebe uma certa demora para carregar algumaspáginas, vai conferir o código e descobrealgumas coisas assim: <font face=”Verdana”><b></b><i></i><fontsize=”1″><b></b></font><fontface=”Arial”>Texto</font></font>

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:

XHTML

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.

CSS e a Abordagem Semântica

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.

No Tables

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.

No Frames, No Pop-ups, No DHTML

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:

Vamos com calma

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ários

Lidando bem com os bloqueadores de pop-up

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

Primeiro passo:

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.

Segundo passo:

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.

Terceiro passo:

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

Quarto passo:

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>

Palavras finais:

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.

4 Comentários

Criando efeito de ZOOM com CSS - usando imagem

Zoom em imagem

Que tal você fazer um zoom com css como este aqui?
Então, siga as instruções abaixo e bom estudo! :-)

Armando o documento:

Depois de ter escrito toda a estrutura do documento (<html><head>…) coloque no corpo do documento apenas um link e defina um ID para este link, neste caso, definimos como “foto”, veja abaixo:
<a href=”#” id=”foto”>Ver a foto ampliada</a>

Veja o html deste passo.

Fazendo a imagem:

Muitos podem não entender este passo, ele é muito importante, portante, preste o máximo de atenção.

Neste zoom, não vamos mudar a dimensão de uma imagem pequena, ou seja, não vamos aumentar literalmente a imagem, nós apenas vamos fazer uma pequena troca. Por isso, você deverá ter a imagem que você quer dar zoom em tamanho grande. Escolha uma imagem, e use um editor de imagem da sua preferência para diminuir a foto, e monte desta forma, a foto menor em cima da maior.

A menor é a que vai ser mostrada no documento, quando o usuário faz o zoom (que vai ser feito ao passar o mouse na foto menor) ele verá a foto grande.

Detalhe: As duas fotos (grande e pequena) devem estar juntas em uma única imagem, assim, isso é essencial para o truque dar certo.

Começando a escrever o css

No css, vamos começar a formatar o link!
Vamos começar definindo que ele deverá flutuar a esquerda (float:left;) está acompanhando?

a#foto {
float:left;
}

Veja o html deste passo.

Fazendo o texto do link sumir

Se você colocou algum texto dentro do link, vamos fazer ele desaparecer agora, defina que a identação de texto deste link será de 1000em (text-ident:-1000em;), pronto! Mas agora, temos um problema com o nosso amigo IE, na versão em que testei (Ie 5.0) o texto sumiu. Mas se resolveu quando eu defini que o link deveria ser mostrado como um bloco (display:block;). Para ficar melhor de visualizar, defina uma borda de 1px com a cor preta (border:1px solid black;). Ainda está acompanhando, veja como o css está.

a#foto {
float:left;
text-indent: -1000em;
display: block;
border:1px solid black;
}

Veja o html deste passo.

Definindo a dimensão

Lembra das imagens?! Então, defina o tamanho do link com as mesmas proporções que a foto pequena, neste exemplo, a foto pequena tem a largura de 150px (width:150px;) e a altura de 150px (height:150px;).

a#foto {
float:left;
text-indent: -1000em;
display: block
width: 150px;
height: 150px;
}

Veja o html deste passo.

Você deve estar visualizando um quadrado com uma borda preta, não é? O próximo passo vai dizer o segredo!

O começo do truque

Lembra da imagem que a gente fez? Aquela que tem a foto pequena e a foto grande? Então, você vai definir agora como sendo o background do link, este background não pode se repetir (background:url(”img.jpg”) no-repeat;

a#foto {
float:left;
text-indent: -1000em;
display: block
width: 150px;
height: 150px;
border:1px solid black;
background: url(”img.jpg”) no-repeat;
}

Veja o html deste passo.

O fim do truque

A foto deve aumentar quando o usuário passar o mouse sobre (a#foto:hover) ela, ou seja.
Defina que o link deverá ficar com as mesmas dimensões que a foto grande, neste exemplo, a foto tem a largura de 300px (width:300px;) e a altura de 300px (height:300px;), veja como ficou.

a#foto:hover {
width: 300px;
height: 300px;
}

Calma, calma! Vamos finalizar o truque.
Para ficar tudo nos conformes, temos que fazer a foto grande ficar na altura certa, isso é fácil! Apenas defina que ao passar o mouse no link, a altura do background seja negativa. Neste exemplo, bastou colocar o valor de -156px que a foto ficou no lugar certo. Você deverá ir testando até achar o valor em que a foto fique alinhada ao topo.

a#foto:hover {
width: 300px;
height: 300px;
background-position: 0 -156px;
}

Veja o resultado.

9 Comentários

Centralizando um objeto na Horizontal e Vertical com CSS

Objeto no centro da tela

Uma das dúvidas mais freqüentes é esta: Como fazer para que um objeto fique no centro da tela usando css?
A resposta está nos passos abaixo!

Colocando a imagem:

Neste exemplo vamos usar uma imagem, mas você pode perfeitamente usar um div, o processo é o mesmo.
Coloque na imagem (ou no div) um nome de ID… Colocamos neste exemplo o ID com nome “centro”.

<img src=”imagem.gif” id=”centro” />

Veja o html deste passo.

Definindo as dimensões do objeto:

Agora, no css, defina as dimensões do objeto (imagem ou div).
Nossa imagem tem 100 x 100 px’s, então vamos definir no css que a largura será de 100px (width:100px;) e que a altura também será de 100px (height:100px;).

#centro {
width:100px;
height:100px;
}

Veja o html deste passo.

Alinhando:

Estamos quase no final, você pode perceber que o objeto está um pouco desalinhado do centro. Vamos agora posicioná-lo… É aqui começa o truque.
Defina para nosso objeto, uma posição absoluta (position:absolute;), ele deverá ficar a 50% de distância do topo (top:50%;) e 50% de distância do lado esquerdo do documento (left:50%;).
O css não usa o centro do objeto como referência para o posicionamento, mas sim as extremidades, portanto, o que ficará no centro depois deste código, será o canto esquerdo superior do objeto.

#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
}

Veja o html deste passo.

O grande final:

Eis o truque para tirar a diferença, não é nada de outro mundo.
Você irá definir ao objeto duas margens negativas… a margem do topo (margin-top) e a margem da esquerda (margin-left). Na margem do topo, você simplesmente colocará um valor negativo, este valor será a metade da altura do objeto, neste caso, será -50px (margin-top:-50px;) e no lado esquerdo você fará a mesma coisa, mas o valor será a metade da largura do objeto, neste caso -50px (margin-left:-50px;).

#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

Veja o html final.

7 Comentários
« Posts antigos
Voltar para o topo

Outros posts

Aprenda

Histórico