Home, Inicio João Gomes Mota contacto Web Design
JavaScript e DHTML
INVESTIGAÇÃO FOTOGRAFIA WEB DESIGN DESCOBERTAS
 

Se o leitor já se sente à vontade com o HTML encontrará aqui os meus exemplos de JavaScript comentados e também exemplos de Dynamic HTML. Encontrará também links e referências sobre JavaScript e DynamicHTML

 
 

Exemplos de JavaScript

A linguagem JavaScript permite correr programas relacionados com o conteúdo de uma página HTML. Todo o programa corre no computador do visitante da página sem ligação ao servidor onde está alojada a página.

As formas mais populares de JavaScript são os efeitos das imagens que mudam quando são apontadas (rollovers), mas muito mais pode ser feito.

Como fazer um Calendário de Advento em JavaScript

Com um Calendário de Advento prepara-se a chegada do Natal, representando cada um dos dias de 1 a 24 de Dezembro por uma porta ou janela numerada. A cada dia que passa, abre-se a porta com o número correspondente, revelando uma surpresa.

Mais do que mostrar o resultado, o objectivo deste Calendário é ilustrar a a metodologia de criação de uma aplicação em JavaScript com instruções passo a passo, usando um exemplo muito simples.

Publicado em Fevereiro 2004.

 

Codificação de e-mail

Um método simples para dificultar a leitura de endereços de e-mail por parte dos robots que reunem endereços para envio de spam.

Ver o Slide Show

Slideshow

Adaptação de um exemplo clássico; pode usá-los para fazer uma animação lenta, mas julgo que resulta melhor como um "projector de slides" informático.

Além deste exemplo explicado, consulte as aplicações de JavaScript.
 

 

Exemplos de DynamicHTML

Tendo o HTML estabilizado na versão 4.0, o desenvolvimento de novas técnicas de apresentação na Web passava por trilhar caminhos novos em vez de procurar avançar mais pelos mesmos trilhos.

Um dos caminhos novos foi o Dynamic HTML, que é tão-só a sobreposição de camadas definidas por Cascading Style Sheets, cuja posição e comportamento na página são controlados por JavaScript.

Infelizmente, os dois principais "estilistas" da moda Internet, Netscape e Microsoft, não se entenderam e cada um propôs uma sintaxe própria para chegarem, na maioria dos casos, ao mesmo resultado.

No período transitório até à aceitação de um formato único recomendado pelo W3C, os criadores de DHTML terão de duplicar o código para os dois browsers. Com o lançamento do Internet Explorer 6.0 e do Netscape Navigator 6.0 (e logo o 7.0), os principais browsers aproximam-se do formato comum, mas ainda é prudente manter as implementações correspondentes às versões anteriores dos browsers.

Como o DynamicHTML envolve programação adapta-se melhor ao artesanato do que à produção industrial de sites.

Apresento alguns exemplos de DHTML, com ênfase na visualização/ocultação e deslocamento de camadas na imagem. Em consequência das mudanças de sintaxe, estes exemplos podem não funcionar com todos os browsers, indicando-se aqueles nos quais foram testados.
 

Open Dynmenu

Introdução aos menus dinâmicos

Um manual passo a passo para aprender a utilizar menus dinâmicos (como os desta página), garantindo a compatibilidade com os vários browsers.

Este é o meu primeiro exemplo/aplicação escrito de raiz para o novo W3C Document Object Model, embora mantenha a compatibilidade com os browsers anteriores. Este manual aborda outros aspectos do DHTML e web design.

Netscape Navigator 4.0 e posterior, Internet Explorer 4.0 e posterior.
Primeira publicação em Outubro 2003.

Ver o aquario

Aquário

Um exemplo de DHTML puro, criado só para o prazer de olhar, sem qualquer funcionalidade. Uma janela onde se cruzam peixes variados em movimentos suaves, de uma ponta à outra do écran.

Cada peixe ou pequeno cardume está guardado numa camada (layer) própria e o script limita-se a ocultar/mostrar as camadas e a movê-las ao longo do écran. Como as camadas são transparentes é possível sobrepô-las criando a impressão de um aquário em três dimensões.

Netscape Navigator 4.0 e Internet Explorer 4.0 e 5.0
Primeira publicação em 1998.
 

Abrir a página da lupa

Lente

Uma forma de ampliar as imagens apresentadas nas páginas HTML.

O princípio de funcionamento é simples:

  1. Por cim da imagem original, cria-se uma camada (layer) com a imagem ampliada.
  2. A posição desta camada é associada à posição do cursor. A área visível é reduzida a uma pequena janela simulando o efeito da lupa.
  3. Ao arrastar o cursor, arrasta-se também a camada com a imagem ampliada e as coordenadas de origem (offset) são alteradas de modo a que a área visível da imagem ampliada coincida com a imagem original.

Netscape Navigator 4.0 e Internet Explorer 4.0 e 5.0
Primeira publicação em Julho 2000.

Ir para a cave

Lanterna

Exemplo semelhante ao anterior. Ao deslocar o rato desvenda-se um cenário escuro, tal como usando uma lanterna numa cave.

Este exemplo está explicado pormenorizadamente, incluindo o exemplo do código para duas versões.

Netscape Navigator 4.0 e Internet Explorer 4.0 e 5.0
Primeira publicação em Maio 2000.

Além destes exemplos didácticos, consulte as minhas aplicações de DynamicHTML.
 

 

Referências de JavaScript e DynamicHTML

Netscape's JavaScript Developer Central. A referência fundamental em JavaScript: especificações, manuais, exemplos, foruns, etc.

Voodoo JS Guide: um manual de aprendizagem de JavaScript em inglês. Muito eficaz, requerendo apenas conhecimentos básicos de programação.

The JavaScript Source: arquivo de scripts explicados passo a passo. O utilizador pode testar os exemplos e copiá-los directamente para as suas páginas.
 

JavaScript Source

Danny Goodman's Javascript pages: autor de livros e cursos on-line, com ênfase na função e não na aparência. Boa referência histórica sobre compatibilidade. Este site serve de apoio ao famoso livro "The JavaScript Bible" by Danny Goodman
 

 

Essential JavaScript for Web professionals by Dan Barret, Dan Livingston & Micah Brown (livro) - Um curso intensivo que conduz o principiante até ao domínio dos efeitos sofisticados mais comuns.

 

Dynamic HTML - The Definitive Reference by Danny Goodman (livro). Uma obra de referência para consulta e aprofundamento de conhecimentos.

Era "definitive" em 1999, hoje está parcialmente ultrapassado pelo novo DOM [Document Object Model] proposto pelo W3C e implementado no Internet Explorer 6.0, no Netscape Navigator 6.0 e posteriores.
 

 

Essential CSS & DHTML for Web professionals by Dan Livingston & Micah Brown (livro) - Uma obra que acompanha o leitor desde os primeiros passos até aos exemplos sofisticados. Pode revelar-se frustrante se aquilo que o leitor quer fazer não se aproxima dos assuntos abordados.
 

 

Mozilla.org: um browser desenhado em open-source destinado a múltiplas plataformas com o cuidado de cumprir as recomendações do W3C. Inclui vasta documentação sobre XML, Document Object Model, JavaScript, Style Sheets, etc..
 

 

Truques e Dicas - Um portal em português com introduções ao DHTML e JavaScript. Inclui dezenas de exemplos explicados e prontos a copiar.

EchoEcho.com - Um conjunto de guias em inglês para aprender JavaScript e DHTML, com exemplos explicados.

HTML Guru - um site espectacular associado a um livro (que não conheço). O prazer visual é garantido e lá encontra ponteiros para outras obras de arte.

DHTML Lab - Um local para aprender e partilhar conhecimentos.

 
©2002 João Gomes Mota
Home, Inicio  → WEB DESIGN
Escrito em Abril 2002. Última alteração: Março 2005. inicio da página