DHTML - Dynamic HyperText Markup Language

Material utilizado para a apresentação da disciplina de programação para WEB I.

1. DHTML
Dynamic Hyper Text Markup Language.

2. Equipe:
●Denilson Sousa
●Kamargo Leal

3. O que é?
O termo DHTML (ou Dynamic HTML) designa um conjunto de tecnologias que
inclui desde as extensões HTML até recursos de programação destinados a
permitir a criação de páginas mais interativas, que respondam às ações dos
utilizadores. O DHTML também proporciona gráficos e dados mais velozes e
mais ricos, com menos downloads de páginas da Web.
DHTML ou HTML dinâmico é um termo coletivo para uma combinação de
Hypertext Markup Language (HTML), tags e opções que podem tornar as
páginas da internet mais animadas e interativas do que as versões anteriores
do HTML.

4. Exemplos
Exemplos simples de recursos do DHTML incluem:
●A mudança de cor de um cabeçalho quando um utilizador passa o mouse
sobre;
●Quando permite que um usuário use o drag and drop (arrastar e soltar)
numa imagem de um lugar para o outro numa página da internet.

5. Histórico
Nos anos 80, com o advento dos computadores pessoais, surgiu uma
linguagem que permitia transportar arquivos gráficos no formato texto, e
depois eles seriam re-montados como gráficos para ser exibidos.
O HTML;
Com os avanços tecnológicos na área da Internet, logo foi possível enviar
esses arquivos HTML pela rede, e assim surgiram as Páginas Web. Mas neste
momento o HTML perdia muito em performance, pois era necessário enviar a
página pela internet, para que ela fosse visualizada no navegador cliente.

6. Histórico
A grande desvantagem do HTML sempre foi o fato de ser totalmente
estática, ou seja, depois de interpretado o código e montada a pagina
grafica, nada poderia acontecer. A primeira mudança nesse aspecto não veio
na linguagem, mas sim nos navegadores.
A partir da segunda geração de navegadores, os Links passaram a ser
sublinhados, tendo comportamento diferente do restante do texto. Mas isso
não estava ao alcance do programador, e sim pré-programado no
interpretador da linguagem.

7. Histórico
Os links ativos foram o pontapé inicial para uma grande revolução: se era
possível trocar a formatação do link em milésimos de segundos no browser,
porque não fazer o mesmo com o resto do texto??Assim surgiram os
primeiros esboços da linguagem JavaScript.
Os navegadores Internet Explorer e Netscape, à partir das versões 3.0,
passaram a ter suporte à essa linguagem, e assim as páginas HTML ganharam
vida nas telas do browsers.

8. Histórico
O conceito DHTML surgiu em meados dos anos 90 com o Netscape 3.0, que
trazia o reconhecimento de eventos, o que tornava o HTML interativo com o
usuário.
A Microsoft não ficou pra trás e lançou a versão 3.0 do IE, que também
trazia a interpretação de eventos, e ainda adicionava um novo conceito ao
DHTML, chamado CSS - Cascating StyleSheet que permitia armazenar em
um trecho de script separado do HTML as regras de formatação e que
passou a ser usado para configurar a atividade do JavaScript no que se
refere a mudança dinâmica de formatação.

9. DHTML
Como o HTML5 também é utilizado para se referir a união de HTML,
JavaScript e CSS; o termo DHTML passou a ser menos utilizado. Também
por conta do novo padrão HTML, todos os navegadores mais usados (Google
Chrome, Internet Explorer, Firefox, Opera e Safari) incluíram vários
recursos DHTML ao implementarem o JavaScript 1.8.5 e o CSS 3.

10. Tecnologias do DHTML
- HTML (Hyper Text Markup Language): A conhecida linguagem baseada
em tags para a construção de páginas web estáticas.

- CSS (Cascading Style Sheets): Conhecida como folhas de estilo, essa
tecnologia permite controlar a formatação dos diversos elementos que
compõem uma página web.

- CSS Positioning: Permite a alteração do posicionamento de um elemento
da página como textos e imagens dinamicamente, através de uma linguagem
client scripting.

11. Tecnologias do DHTML
- Client scripting: Trata-se de um pequeno programa, que será interpretado
pelo browser do cliente e não no servidor. Algumas linguagens de scripting
que podem ser utilizadas são JavaScript e VBScript.

- DOM (Document Object Model): Trata-se do modelo de objetos (com
suas propriedades e métodos) que são expostos ao programador DHTML.
Através do envio de mensagens a estes objetos, o programador pode
explorar a interatividade com o usuário.

12. Características de DHTML
-Performance
-Compatibilidade
-Orientada a objetos

13. Performance
Qual a performance que pode ser obtida com DHTML? Como vimos, o
processamento é realizado localmente, ou seja, no browser do usuário, o que
garante boa performance já que não exige o tráfego de informações pela
rede durante a interação.

14. Compatibilidade
O DHTML não apresenta boa compatibilidade entre os browsers. Na verdade
não existe um padrão para o DOM, que é o centro dessa tecnologia. Tanto a
Microsoft como a Netscape já suportam esse padrão a partir das versões
4.0 de seus browsers, mas cada uma com seu modelo de objetos. Logo, o
código client scripting deve ser escrito de acordo com o browser destino, a
menos que se faça uso das propriedades protegidas, que são um subconjunto
das funcionalidades comuns a ambos os browsers.

15. Orientado a objetos
Cada elemento de uma página HTML é visto como um objeto, que pode ser
acessado e ter suas propriedades, como cor e posicionamento, alteradas
dinamicamente.

16. Vantagens
●Maiores recursos estéticos: coisas que pareciam impossíveis para o
HTML, como: sublinhar com linhas duplas o texto ou trocar a cor do link
quando passamos o mouse por cima dele, para o DHTML é rotina;

●Maior controle dos objetos na página: agora podemos controlar o
posicionamento de cada campo, tabela, imagem, botão ou texto HTML de
forma exata. Isso ajuda a criar layouts mais bonitos e sofisticados,
inclusive com sobreposição de objetos;

17. Vantagens
●Identificação das formatações: quando estamos trabalhando em uma
equipe, fica difícil uma comunicação quando "O título principal da páginas
está em font, face Verdana, tamanho 4, negrito, itálico, cor vermelha e
sublinhado..." em vez de dizer "O título principal deve utilizar a classe
titulo1";

●Reaproveitamento de código: se utilizarmos uma fonte no parágrafo de
cima e quisermos utilizá-la novamente, devemos repetir a tag de font?
Não! Criamos uma folha de estilo e nossa formatação pode ser utilizada
por todas as páginas do site.

18. Exemplo prático
O exemplo consiste na criação de um efeito de menu para páginas web.
Quando o usuário passa o mouse sobre o texto de um item do menu, a
formatação do texto do item é alterada da seguinte forma:

>> adição de efeito "underline" (sublinhado) ao texto.
>> alteração de cor do texto.

19. Eventos
Clicar em um botão, mover o mouse sobre uma parte do documento,
selecionar texto... todas essas ações disparam eventos do DOM, que podem
ser programados através de client-scripting.

20. Eventos
Eventos de Mouse: Gerados quando o usuário:
onmouseout Move o ponteiro do mouse para fora da
área de um elemento.
onmousedown Pressionar qualquer um dos botões do
mouse.
onmouseup Libera qualquer um dos botões do mouse.
onmousemove Move o mouse dentro da área de um
elemento.

21. Eventos
onclick Clica o botão esquerdo do mouse sobre um
elemento.

ondblclick Efetua um duplo clique com o botão
esquerdo do mouse sobre um elemento.

onmouseover Move o ponteiro do mouse para dentro da
área de um elemento.

22. Eventos
Eventos do teclado: Gerados quando o usuário:
onkeypress Pressiona e solta uma tecla (o ciclo
completo).
onkeydown Pressiona uma tecla (ainda com a tecla
abaixada).
onkeyup Solta uma tecla

23. Conclusão
A tecnologia DHTML nos abre caminho para uma nova geração de aplicações
web. Através de DHTML é possível ter o total controle sobre os elementos
que compõe uma página HTML, o que nos fornece grande flexibilidade para
interagir com o usuário.