eduardo lacorte » XHTML

Resolvendo a sobreposição de arquivos Flash em Lightbox

Eduardo Lacorte — Wed, 27 Jul 2011 07:10:44 +0000

Ministrando um treinamento no dia de hoje fui consultado sobre um problema bastante usual no Desenvolvimento Web: sites que utilizam o recurso de Lightbox (ou Shadowbox, Fancybox, etc), que escurece a tela do site para mostrar uma imagem, e que acabam tendo problemas com aplicativos Flash que se sobrepoem ao efeito de escurecimento da tela. E como resolver isso?

Simples. Não importando a maneira como se implementa o Flash no site, ele deve ter seu wmode setado para transparent. Veja abaixo duas maneiras bastante usuais da resolução do problema:

Modo 1

Se a chamada do Flash for via JavaScript sem parameters no código HTML basta implementar o código ‘wmode’,'transparent’ em algum ponto da chamada da função, como abaixo:

Modo 2

Se a chamada do Flash contiver parameters no código XHTML, fica da seguinte maneira:

Já em HTML 5, a diferença é que não há o fechamento da tag nela mesma. Veja abaixo:

Com isso, os arquivos Flash sempre aparecerão atrás dos Lightboxes e variantes do mesmo efeito.
Abraços!

Como resolver incompatibilidades entre IE7 e IE8

Eduardo Lacorte — Sat, 23 Jul 2011 08:02:35 +0000

Olá pessoal!

Nesse post quero explicar como resolver problemas de incompatibilidade entre os browsers Internet Explorer 7 e Internet Explorer 8, ambos ainda muito usados na Web.

É uma forma muito simples, que se fará valer do botão de compatibilidade que há no Internet Explorer 8, responsável por “emular” uma página acessada em IE8 como se estivesse sendo acessada em IE7 (estranho existir um botão desses de retrocesso, não??? rs).

Faremos uso de um código muito simples. Na verdade, uma única Meta Tag, conforme vemos abaixo:

Ao adicionar a Meta Tag acima ao do seu código HTML, a página sempre será acessada “emulada” automaticamente. Ou seja, quando o usuário acessar o seu site pelo IE8 (que não representa nenhum avanço na história da Web… rs) a página se comportará como se estivesse no IE7, e problemas como background-bottom (CSS) estarão automaticamente superados. O botão de emulação nem aparecerá, porque o browser entenderá que a página está sendo forçada a se comportar como se estivesse em IE7. Muito simples!

OBS: Se você trabalhar com HTML 5, o código é assim:

Isso porque na sintaxe do HTML 5 os fechamentos em caso de inexistência de fechamendo oficial de uma tag deixaram de existir.

Você usa o Dreamweaver? Muito bom!!! O código está presente no Painel Snippets (Shift + F9), na categoria Meta.

Abraços!

O problema da borda automática em imagens com links

Eduardo Lacorte — Mon, 20 Apr 2009 03:35:50 +0000

Olá, pessoal!

Pensando no que escrever, me lembrei de algo que eu sempre abordo nos meus treinamentos na Impacta, e por incrível que pareça, o Dreamweaver CS4 (e nem seus antecessores) não faz automaticamente: tratar a borda gerada pela inserção de um link em uma imagem como um estilo CSS.

Então… vamos fazer com que ele trate! Vamos lá:

- Insira uma imagem do seu site no seu arquivo (salvei o arquivo como demo.html).

- Clique nela e vá no painel Properties (Ctrl + F3). Lá coloque um link qualquer na sua imagem e coloque na opção border o valor 0.

- Verifique o código-fonte (modo Code). Você perceberá que o código border=”0″ foi inserido no HTML. Até aí tudo bem… mas se tivéssemos 483 imagens na nossa página seriam 483 border=”0″ pelo documento… além de border=”0″ ser atributo visual, não considerado pelo XHTML 1.0 Strict!!

- Volte para o modo Design, e retire o valor de border. Aproveite e tire os valores de largura e altura da imagem, sob o mesmo conceito de repetição desnecessária de código. Largura e Altura somente devem ser usados em caso de imagens com tamanho que não seja real, o que não é muito comum…

OBS: Nesse momento, ao clicar em algum outro ponto da página, você perceberá que a imagem ficou com a costumeira borda azulada.

- Acesse o painel CSS (Shift + F11) e crie uma nova regra (New CSS Rule).

- Crie uma regra que será aplicada a todas as imagens da sua página, conforme a figura abaixo.

OBS: Recomendável criar a regra em arquivo css externo, para que você possa controlar todas as imagens do site com uma única regra em um único arquivo.

- Na janela de configuração do CSS, vá à opção Border, e preencha sua largura como zero.

- Clique em Ok, volte ao arquivo. Repare que a borda da imagem sumiu. Vamos ao código:

- Dá para otimizá-lo com uma pequena regra, que pode ser aplicada assim:

- A linguagem CSS entende 0 como sendo valor absoluto. Você tem 0 pixels, 0 centímetros, 0 reais, 0 moedas… você não tem nada. É tudo 0, portanto a unidade de medida pode ser retirada. E também que podemos generalizar, querendo que TODAS AS BORDAS tenham valor zero.

E assim fica corrigido o problema. Anulamos todos os border=”0″ que poderiam aparecer em virtude da inseração de links em imagens, e implantamos o que deveria ser praxe para o Dreamweaver.

[]‘s!

Formatando Tabelas com CSS

Eduardo Lacorte — Wed, 15 Apr 2009 19:18:22 +0000

Olá, pessoal.

Vou demonstrar nesse tópico algo relativamente simples, mais uma vez voltado para o público iniciante em Dreamweaver e Desenvolvimento Web em geral, mas que já conhece um pouco de XHTML e CSS: como formatar tabelas de dados com CSS.

Muitos desenvolvedores fazem como no Word: selecionam as células da tabela e, através do Painel de Propriedades (CTRL + F3), centralizam os conteúdos das células, ou ainda aplicam cor de fonte, fundo e outras manobras que só fazem com que o código cresça exponencialmente (partindo do princípio que o site pode conter inúmeras tabelas). Embora seja uma manobra errada é a mais aplicada, pela sua comodidade e muitas vezes a falta de conhecimento dos desenvolvedores. E como eu sempre digo: formatar pelo Painel Properties é a pior roubada em que um desenvolvedor pode se meter (a não ser para aplicar regras CSS previamente criadas).

Vamos deixar de blá blá blá e mãos à obra!

Software Utilizado: Adobe Dreamweaver CS4
Requisitos: Conhecer um pouco de XHTML e CSS

Considere a tabela abaixo:

É uma tabela simples, sem formatação alguma, como realmente deve ser. É um grande erro o desenvolvedor gerar conteúdo e formatá-lo ao mesmo tempo. Primeiro faça o básico, depois se preocupe em formatar. =)

- Abra o Painel CSS Styles (Shift + F11)

- Declare uma nova regra CSS (New CSS Rule)

- Preencha a sua caixa de diálogo como mostra a figura abaixo:

OBS: Conforme solicitado um conhecimento mínimo de CSS, nesse exemplo irei colocar a Rule Definition em “This document only” (gerar código CSS para esse documento e nesse documento, em seu cabeçalho), mas fica a critério do desenvolvedor se o CSS deve ser gerado em um arquivo .css (New Style Sheet File), ou mesmo um CSS já existente.

- Defina a regra .dados. Utilizei configurações básicas como exemplo (atenção à última tela da imagem):

- Clique em OK.

- Volte à página, selecione a tabela pelas suas bordas ou pela tag

no navegador de tags, e aplique a classe dados, que estará disponível na opção Class no Painel Properties.

O resultado será uma tabela com textos centralizados e fonte Verdana, conforme formatado. Porém, perceba que as bordas não foram atribuídas às células, e sim à tabela apenas, ou as bordas exteriores. Para resolver o problema temos que criar outra regra CSS (Painel CSS Styles novamente – New CSS Rule), com o nome de .dados td, conforme a imagem abaixo:

Explicando:

Todas as tags

que estiverem dentro de uma tag tomada pela classe dados serão formatadas de acordo com a regra criada. Veja como podemos eliminar vários códigos, com o auxílio da programação abaixo:

- Ao configurar como a imagem acima, aperte Apply. Você perceberá que todas as células ficaram com suas bordas pretas. Poderiam, por exemplo, ter ficado maiores, caso eu tivesse declarado altura (atributo Height, na categoria Box)…

Assim como o exemplo acima, você também pode criar uma classe para os títulos das tabelas, chamada .dados .titulo (essa classe só funcionará se estiver dentro de um objeto que tenha a classe .dados), aplicar nas primeiras células ou linha da tabela, bem como outra regra chamada .dados .par (para as linhas pares dos dados da tabela) e obter um resultado como o da imagem abaixo:

Questionamento: uma classe ou um identificador?

Simples. Um identificador faria com que essa técnica fosse usada para uma tabela exclusivamente, ao passo que uma classe permite o uso em diversas tabelas ao mesmo tempo, controlando assim o visual dos dados do seu site como um todo. Eu poderia trocar as cores de todas as tabelas do meu site apenas com essas quatro configurações (desde que elas estivessem escritas em um arquivo .css externo, e não no mesmo arquivo, claro…).

As duas técnicas geram o mesmo resultado, com a diferença de ID ser destinado a uma região apenas. Aí vai de você definir… se será necessário aplicar a técnia em várias tabelas ao mesmo tempo (considerando mais de uma por página) ou se haverá apenas uma tabela por página. No primeiro caso a classe é o melhor modo. Já no segundo o identificador (ID) atende melhor, considerando até mesmo implantação de AJAX e menor uso de regras CSS.

É isso aí. Tópico simples de aplicar, e espero que simples de entender. Principiantes, mãos à obra! =)