CSS no Lanche

A maioria dos desenvolvedores web, na verdade, não sabem, ou têm apenas uma vaga idéia do que significa o termo, portanto, vou tentar explicar da forma mais simples possível o que é DHTML. Quando a versão 4 dos browsers Netscape e Internet Explorer foi lançada ocorreu uma pequena revolução na Internet. Enquanto o suporte a CSS nesses browsers era precário estava nascendo uma nova união de tecnologias que iria revolucionar a forma de desenvolver páginas web. Foi então que no final dos anos 90 e início do ano 2000 nascia o DHTML (Dynamic HTML).

DHTML é a união das tecnologias HTML, Javascript e CSS aliado ao Document Object Model (DOM), para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web. Quando você efetua mudanças de estilo em elementos HTML e a mudança é registrada imediatamente sem o recarregamento da página, você está vendo um exemplo de DHTML. Você também pode fazer o usuário integarir com a página escondendo e mostrando elementos, mover elementos na página, mudar cores.

Antes do surgimento do DHTML só podiamos utilizar páginas em HTML estático. Quando você carregava uma página, ela não podia ser alterada até você passar para a próxima página. Com o DHTML você poderia dar mais interatividade a página, lhe dando a possibilidade até de criar novos elementos na página para serem manipulados depois.

Atualmente existem 3 grandes empresas trabalhando por trás do DHTML: o W3C, a Netscape e a Microsoft, mas no passado, ele passou por um mal bocado. Na época do surgimento do DHTML, a Netscape e a Microsoft eram grandes rivais e não tinham nenhum interesse em trabalharem juntas em uma especificação do DHTML, e por isso era comum você ter um script que funcionava tão bem em um browser e nem sequer funcionava no outro. Quem naquela época não acessou um site e deu de cara com uma splash page com links apontando para páginas desenvolvidas para Netscape e Internet Explorer?

Mas nessa briga quem saiu ganhando foi a Netscape, pois por possuir um browser com melhor suporte ao DHTML, uma melhor documentação ele foi adotado como browser padrão para o DHTML. Rapidamente no entanto, a grande dificuldade de programação nesta nova geração de scripts, juntamente com o suporte precário dos navegadores, definiu a uma cruzada de pessoas que o DHTML estava morto. Com o tempo o W3C tomou frente no desenvolvimento e foram criadas as especificações e hoje você já pode utilizar o DHTML confortavelmente.

Aplicando dinamismo a página

Você pode estar meio confuso até aqui, mas efetuar manipulações dos elementos na página não é difícil. Vamos a simples exemplo para que possa entender melhor o que é DHTML. Observem a marcação HTML:

<div id="principal"></div>

Suponhamos que ele possua os seguintes estilos:

div#principal (color:#000000; border-left:1px solid red;)

O usuário ao acessar a página, esses estilos são computados pelo browser, e caso você queira efetuar alguma alteração nos estilos do elemento utilizando DHTML esses novos estilos serão adicionados ao seu HTML através da tag style diretamente no código HTML. Um exemplo de código para efetuar a alteração da cor seria o seguinte:

document.getElementById('principal').style.color = '#ff0000';

Para efetuar a alteração do elemento HTML, temos que acessar o elemento através do Document Object Model. Diversos browsers suportam diferentes modelos do DOM e nesse exemplo foi utilizada o DOM nível 1. Em seguida é acessada a sua propriedade style e o novo estilo é aplicado. A execução desse código no browser resultaria no seguinte em seu código HTML:

<div id="principal" style="color:#ff0000"></div>

Essa é um efeito bem simples que você pode conseguir através de DHTML. Mas não pare por aqui, na Internet hoje existem vários sites com tutoriais sobre DHTML com exemplos prontos que podem auxiliá-lo no desenvolvimento:

• QuirksMode – Site que contém tutoriais de como você pode escrever scripts que funcionem corretamente em todos os browsers.
• HTML & DHTML Reference no MSDN
• Exemplos de DHTML
• DHTML Demos

Livro recomendado

O livro JavaScript & DHTML Guia Prático oferece soluções práticas para problemas específicos da criação de scripts com que os desenvolvedores Web comumente se deparam. Cada receita se concentra em um trecho de código que você pode inserir diretamente em seu aplicativo.