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!

Find and Replace (Avançado) – Como utilizar?

Eduardo Lacorte — Sat, 09 May 2009 18:27:56 +0000

Salve galera!

Essa semana começou bem: renovei minha certificação de Dreamweaver, e agora tenho a Adobe Certified Expert (ACE) em Dreamweaver. A anterior era a de Dreamweaver MX2004 Developer (nem a do 8 eu tinha feito.. hahahaha). Devido a isso vou mostrar algo interessante para vocês…

Essa matéria consiste em explicar da maneira mais simples possível o Find and Replace, um recurso fantástico do Dreamweaver. Bom, na verdade todos os softwares têm esse recurso, mas no Dreamweaver a coisa é fantástica mesmo… principalmente no quesito MANUTENÇÃO!

É simples:

A localização dele é a mesma. Vá em Edit – Find and Replace (Ctrl + F). A caixa de diálogo aparecerá para você.

Primeiramente, vamos analisar as opções que temos de Find And Replace:

Find in:

- Selected Text: Buscará a informação desejada dentro do texto selecionado na página.
- Current Document: Buscará a informação desejada dentro do documento todo.
- Folder…: Buscará a informação desejada dentro do diretório escolhido, em qualquer página.
- Selected Files in Site: Buscará a informação desejada dentro dos arquivos que vierem a ser selecionados com a tecla Ctrl no painel Files do Dreamweaver (F8).
- Entire Current Local Site: Buscará a informação desejada dentro de todo o site especificado nas configurações do Dreamweaver (Site – Manage Sites)

Após selecionar o local de pesquisa, devemos informar o que estamos procurando:

Search:

- Source Code: Realiza a pesquisa de código. Ignora Design. Veja abaixo um exemplo:

- Text: Realiza a pesquisa de texto. Ignora tags e programação. Veja abaixo um exemplo:

- Text (Advanced): Realiza a pesquisa de texto dentro ou fora de tags específicas. Veja abaixo um exemplo:

OBS: Os sinais de + e – refletem a possibilidade de incrementar tal pesquisa com combinação de tags dentro tags ou fora de tags.

- Specific Tag: Realiza a pesquisa de Qualquer coisa. Veja as imagens explicativas abaixo:

A imagem acima reflete a seguinte pesquisa: “Todas as tags td que tiverem o atributo bgcolor com qualquer atributo que seja terão esse atributo removido. De todas as páginas do site” – (ahá… repare na imagem que deixei Entire Current Local Site na opção Find In)

Já a imagem abaixo mostra as possibilidades de pesquisa:

- With Attribute: Pesquisa tags com o atributo especificado.
- Without Attribute: Pesquisa tags sem o atributo especificado.
- Containing: Verifica conteúdo da tag selecionada anteriormente (td, no caso).
- Not Containing: Verifica ausência de conteúdo na tag selecionada anteriormente (td, no caso).
- Inside Tag: A tag selecionada (td, no caso) deve estar dentro de outra tag. Bom, seria mais útil se quiséssemos analisar todos os parágrafos dentro de células… (p inside td).
- Not Inside Tag: A tag selecionada (td, no caso) não deve estar dentro de outra tag. O oposto da explicação anterior.

Veja na imagem abaixo o que podemos fazer após a seleção de caso e pesquisa:

- Replace Tag & Contents: Com essa opção podemos substituir os ítens localizados pelo bloco de códigos que quisermos. Ao selecionarmos essa opção uma caixa de texto se abrirá para a digitação do código.
- Replace Contents Only: Somente o conteúdo das tags localizadas será substituído.
- Remove Tag & Contents: As tags localizadas e seus conteúdos serão removidos.
- Strip Tag: A tag é removida, tanto sua abertura quanto seu fechamento. Ex: Conteúdo – A tag font é removida, e seu conteúdo permanece.
- Change Tag: Troca uma tag por outra. Ideal para localizar todas as tags e substituí-las por .
- Set Attribute: Configura um atributo para as tags localizadas. Uma boa prática para se aplicar classes em massa…
- Add Before Start Tag: Adiciona um bloco de códigos antes do início da tag em questão.
- Add After End Tag: Adiciona um bloco de códigos após o fim da tag em questão.
- Add After Start Tag: Adiciona um bloco de códigos após o início da tag em questão.
- Add Before End Tag: Adiciona um bloco de códigos antes do fim da tag em questão.

Opções

Há também opções complementares às pesquisas, conforme vemos abaixo:

- Match case: Diferencia a pesquisa em maiúsculas e minúsculas. edu é diferente de Edu.
- Match whole word: Analisa a palavra como sendo inteira, e não parte de outra palavra. Nesse caso, Edu não faz parte de Eduardo, por exemplo.
- Ignore whitespace: Com essa opção o Dreamweaver passa a ignorar espaços em branco nas sequências, como o Tab, Enter, por exemplo.
- Use regular expression: Com essa opção habilitada o Dreamweaver passa a permitir o uso de Expressões Regulares (Regex) em suas pesquisas.

Tudo explicado. Basta utilizar de acordo com a necessidade, com os botões Find Next (Localizar próximo), Find All (Localizar Tudo), Replace (Substituir Próximo) ou Replace All (Substituir Tudo).

Salvando Pesquisas

Se você tem a intenção de executar a mesma rotina futuramente, seja ela qual for (retirar tag , remover atributo bgcolor, etc…), fique tranquilo. Você terá a possibilidade de salvar sua pesquisa, e carregá-la quando quiser. Ao salvar, o tipo de arquivo será .dwr. Basta guardar esse arquivo e carregá-lo quando necessário. Veja como fazer:

Para refletir

Atendi um cliente em um desenvolvimento em 2003. O site dele tinha 63 páginas. Em 2008 refiz esse trabalho, com exatos 5.542 códigos a menos!!! E o melhor de tudo: retirados do conteúdo total (que seria utilizado novamente) em quarenta minutos, aproximadamente!!! Como será que consegui isso???

Simples! Analisando todo o código que eu precisava retirar, estudando seus casos (remover bgcolor de td, class de qualquer tag, remover font de todo o site…), salvando cada pesquisa e aplicando tudo com a opção Entire Current Local Site. Simples, não?

Bom, galera… é isso aí! Espero ter explicado com clareza um pouco dessa ferramenta excepcional do Dreamweaver. Até a próxima!

Eduardo Lacorte
Adobe Certified Expert – Dreamweaver

Enviar artigo em PDF

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!

Enviar artigo em PDF

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! =)

Enviar artigo em PDF