|
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
Uma forma de ampliar as imagens apresentadas nas páginas HTML.
O princípio de funcionamento é simples:
- Por cim da imagem original, cria-se uma camada (layer) com a imagem ampliada.
- A posição desta camada é associada à posição do cursor. A área visível é reduzida a uma pequena janela simulando o efeito da lupa.
- 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. |
|
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. |
|
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 |
|
→ WEB DESIGN |
|
Escrito em Abril 2002. Última alteração: Março 2005. |
|
|