DHTML: codificação dinâmica da Web

• Pode 12, 2024

DHTML significa Ddinâmico HyperText Markup euangguage e pode ser definida como a arte de tornar dinâmicas as páginas HTML, combinando HTML com Javascript e CSS (Cascading Style Sheets). Diferentemente das outras quatro variações de HTML estudadas nos quatro artigos anteriores desta série, o DHTML não é um padrão definido pelo Consórcio W3. Em vez disso, é um "termo de marketing usado pela Netscape e Microsoft para descrever as novas tecnologias que os navegadores da geração 4.x suportariam" (W3 Consortium). O HTML 4.0 introduziu dois componentes importantes que são inerentes à estrutura do DHTML:

• Folhas de estilos em cascata (CSS)
• Modelos de objetos de documento (DOM)

Tornando seu código dinâmico

O CSS fornece modelos de estilo e layout, enquanto o DOM fornece modelos de conteúdo para documentos HTML. JavaScript e VBScript adicionam a capacidade de escrever código de script para controlar elementos HTML. Juntos, esses três componentes somam páginas HTML dinâmicas. Um dos principais impedimentos é a incompatibilidade de navegadores - a Netscape e a Microsoft ainda não chegaram a um acordo sobre o que implementar em seus navegadores: portanto, escrever páginas DHTML que funcionam bem nos dois navegadores pode ser complicado. Para verificar por si mesmo, você pode acessar os padrões da Microsoft e Netscape on-line:

• Biblioteca MSDN na Microsoft
• HTML dinâmico no Netscape Communicator

"O DHTML se destaca na criação de efeitos de baixa largura de banda que aprimoram a funcionalidade de uma página da Web. Ele pode ser usado para criar animações, jogos, aplicativos, fornecer novas maneiras de navegar pelos sites e criar layouts de página fora deste mundo que simplesmente não são É possível apenas com HTML. Embora muitos dos recursos do DHTML possam ser duplicados com Flash ou Java, o DHTML fornece uma alternativa que não requer plug-ins e incorpora perfeitamente em uma página da Web. "(Dan Steinman, 1998).

Para entender as complexidades do DHTML, é útil examinar seus componentes com mais detalhes.

Folhas de estilo em cascata

CSS são códigos sofisticados que separam o conteúdo da web da exibição na web - o estilo, posicionamento, cores, fontes e assim por diante. O CSSP ou CSS Positioning permite controle no nível de pixel sobre o posicionamento do elemento HTML. A separação do estilo de apresentação dos documentos da Web do conteúdo com CSS2 (CSS nível 2) simplifica a criação da Web e a manutenção do site. "O CSS2 suporta folhas de estilo específicas da mídia, para que os autores possam adaptar a apresentação de seus documentos a navegadores visuais, dispositivos auditivos, impressoras, dispositivos braille, dispositivos portáteis, etc. Essa especificação também suporta posicionamento de conteúdo, fontes para download, layout de tabela, recursos para internacionalização, contadores e numeração automáticos e algumas propriedades relacionadas à interface do usuário "(Consórcio W3). O W3C oferece um excelente tutorial para aprender CSS2 chamado, Especificação CSS2.

Javascript

JavaScript é uma linguagem baseada em navegador de script especial usada para controlar elementos HTML e adicionar funcionalidade a formulários, quadros, janelas, sobreposições de imagens, controles de áudio e vídeo e manipular DHTML. O Netscape primeiro chamou esse script de JavaScript, então a Microsoft criou o termo JScript para sua marca específica de script. O resultado? Duas versões do JavaScript que podem ser irritantemente incompatíveis. Para explorar mais esse problema, visite o site da Netscape. JavaScript Central e da Microsoft JScript página de recursos. O segredo para os efeitos dinâmicos do conteúdo JavaScripted é o uso de objetos de camada. Objetos de camada alteram o texto quando o mouse passa sobre ele; faz imagens ou texto se moverem pela página da web; também faz com que os menus suspensos caiam. Os objetos de camada são organizados em tags div, com características definidoras como cor, posição e visibilidade.

Juntando-os

O DHTML é geralmente aplicado para realizar três tarefas:

• Posição ou colocar blocos de conteúdo na página e movê-los
• Modificações de estilo que alteram a aparência da página
• Manipulação de eventos ou relacionar eventos do usuário a alterações no posicionamento ou outras modificações de estilo

Nas versões mais recentes do Internet Explorer e Netscape (versões 5, 6 e posteriores), o DOM está se tornando o código de escolha para a maioria dos códigos DHTML. Depois de dominado, o DOM pode ajudar os web designers a manipular, adicionar, excluir e editar a codificação de documentos relacionados a todos os estilos, atributos (como um href) e elementos (como tags html) na página. Isso significa que todas as tags e atributos comuns a um documento html podem ser acessados ​​via DOM. Atualmente, os níveis de modelo de objeto de documento 0 e 1 são recomendados pelo W3C. O nível 2 também está em andamento, mas ainda não foi promovido como padrão para a codificação DHTML.

Um grupo útil de tutoriais está disponível no HTML Goodies, chamado Tutorial DHTML e Camada.

Os links incluídos neste artigo oferecem introduções e instruções para começar sua jornada no domínio deste mais novo desenvolvimento em codificação html.Qualquer pesquisa rápida no Google trará muito mais recursos à sua atenção, prontamente disponíveis na ponta dos dedos. À medida que os fabricantes de navegadores trabalham com sua incompatibilidade e o uso de navegadores de versão superior se torna mais comum, o DHTML se torna uma parte obrigatória do itinerário de qualquer designer profissional.

Artigo HTML Highlight Series

PARTE 1: Um designer credível deve saber HTML?
PARTE 2: HTML 3.2 - O nascimento de Wilbur
PARTE 3: HTML 4.0 e 4.01 - mais uma coisa boa!
PARTE 4: XHTML: codificação da Web para design refinado
PARTE 5: DHTML: codificação dinâmica da Web

Instruções De Vídeo: Como hacer un menu desplegable con HTML y CSS (Pode 2024).