ir para conteúdo

  Home       Pesquisar       Contacto       Guestbook       Links Úteis       Webmaster

 

Menu

 
 

 

 

 

 

Valid XHTML 1.0 Transitional

Aumentar o tamanho do texto   Diminuir o tamanho do texto

∞ Utilizando o JavaScript ∞

Agora vamos utilizar aquilo que aprendemos, com a finalidade de dar um pouco mais de "vida" às páginas Web. Depois de uma curta introdução, onde se procurará sistematizar os principais objectivos e vantagens na utilização do JavaScript, seguir-se-ão três exemplos práticos de aplicação.

Como tornar "vivas" as suas páginas Web

Com esta expressão pretende-se significar a utilização de elementos diversos que distingam uma página Web das antigas páginas HTML, perfeitamente estáticas, que mais não eram do que a publicação na Internet de painéis de texto e imagem para consulta de informação, sem nenhum grau de interactividade com o utilizador, nem nenhum elemento variável.

Algumas das facetas interessantes do que pode ser feito em termos de páginas Web:

  • Design baseado em frames.
  • Elementos de animação gráfica.
  • Painéis publicitários apelativos.
  • Interacção com o utilizador.
  • Processamento de dados local.
  • Validação de dados a passar para um servidor (CGI, ASP, PHP, JSP, etc.).
  • Sequências HTML dependentes do contexto.
  • Acesso à leitura e modificação de aspectos relacionados com o browser.
  • Acesso e utilização de elementos diversos, tais como, a data e hora local da máquina em que o browser é utilizado e outros objectos JavaScript.
  • Integração JavaScript / Java.

 

Os exemplos que se seguem foram escolhidos de forma a demonstrar aquilo que é possível fazer para animar as suas páginas Web. Eles demonstram apenas uma pequena parte daquilo que está ao alcance dos designers de páginas de hoje e que está em constante evolução.

Exemplo prático 1

Este primeiro exemplo é construído com base em técnicas de frames e JavaScript, com a finalidade de trazer animação e interactividade aos elementos apresentados. O conjunto de páginas é composto por um largo número de ficheiros que a seguir se apresentam.

A página principal contém apenas a descrição global do documento em termos de frames. Trata-se de um frameset, em que são indicadas as dimensões pretendidas para as frames que vão evoluir no browser.

index.html

<html>
<head>
<title> Aquario Home Page </title>
</head>

<frameset rows = "15%, *, 17%">
   <frame name = "A" src = "ecran1.html" scrolling = "no" noresize marginheight = "1">
   <frameset cols = "30%, 70%">
      <frame name = "B" src = "ecran2.html" scrolling = "auto" marginwidth = "1">
      <frame name = "C" src = "ecran3.html">
   </frameset>
   <frame name = "D" src = "ecran4.html" scrolling = "no" marginheight = "1">
</frameset>

</html>

 

Seguidamente, temos o código HTML descritivo das diversas frames que compõem o documento. A primeira frame é a de topo, que tem um fundo azulado, descrito pela cor RGB em Hexadecimal 057DA5, o que dá aproximadamente Vermelho: 1,96% Verde: 49% Azul: 65% e a palavra "Aquario" em destaque

ecran1.html

<html>
<head>
</head>

<body bgcolor = "#057DA5">
<h1 align = "center"> Aquario </h1>
</body>
</html>

 

A frame 2 é a da esquerda. Nela fica colocado um Imagemap que está dividido em várias áreas de selecção. Cada uma delas corresponde a um link. O fundo é da mesma cor da frame de topo. Para construir o mapa, poderá utilizar um utilitário de construção de Imagemaps que encontrará com facilidade na Internet, como por exemplo o Mapedit.

ecran2.html

<html>
<head>
<base target = "C">
</head>

<body bgcolor = "#057DA5">
<h4>
   <img src="mapa.jpg" usemap="#mapa" >
</h4>
<map name = "mapa">
   <area shape = "rect" coords = "3,7,159,61"    href = "geral.html">
   <area shape = "rect" coords = "4,64,159,118"  href = "tech.html">
   <area shape = "rect" coords = "4,121,160,175" href = "links.html">
   <area shape = "rect" coords = "4,178,159,232" href = "market.html">
   <area shape = "rect" coords = "4,235,159,288" href = "search.html">
   <area shape = "rect" coords = "2,291,162,334" href = "calc.html">
   <area shape = "default" nohref>
</map>
</body>

</html>

 

A frame 3 é a principal, do lado direito. Inicialmente ela vai apenas conter uma imagem, colocada num ficheiro JPG, contudo, vai ser nela que as páginas HTML seleccionadas pelos links do Imagemap vão aparecer, pelo que a imagem inicial é somente transitória.

ecran3.html

<html>
<head>
<base target = "_parent">
</head>

<body bgcolor = "#FFFFFF">
<img src = "fish.jpg">
</body>

</html>

 

A última frame é aquela que neste exemplo mais tem de animação JavaScript. Ela cumpre duas funções: o entretenimento (um peixe a circular de um lado para o outro sem parar) e a publicidade, com três painéis publicitários fictícios a irem aparecendo sucessivamente.

O mecanismo que é utilizado para estes dois efeitos especiais é o mesmo e já foi visto e demonstrado atrás: da substituição de imagens após o expirar de um Timeout. A animação é feita recorrendo a mais de quarenta imagens que simulam o movimento.

ecran4.html

<html>
<head>
<base target = "_parent">
</head>

<body bgcolor = "#FFFFFF" onLoad = "init()">

 <script language="Javascript" type="text/javascript">
   function init()
   {
      // inicializa o programa e carrega todas as figuras no array figuras
      for (var k = 0 ; k <= 43 ; k++)
      {
         figuras[k] = new Image();
         figuras[k].src = "peixe" + (k+1) + ".jpg";
      }

      // Cria timeouts, para fazer a troca das imagens
      window.setTimeout("troca_imagem()", 100);
      window.setTimeout("troca_banner()", 5000);
   }

   // Troca de imagem para a imagem seguinte
   function troca_imagem()
   {
      if (corrente < 43)
      {
         corrente++;
      }
      else
      {
         corrente = 0;
      }

      // A troca faz-se por alteração de uma propriedade do objecto images[0]
      document.images[0].src = figuras[corrente].src;
      window.setTimeout("troca_imagem() ",100);
   }

   function troca_banner()
   {
      if (banner < 3)
      {
         banner++;
      }
      else
      {
         banner = 1;
      }

      document.images[1].src = "banner" + banner + ".jpg";
      window.setTimeout("troca_banner() ", 5000);
   }

   //Main
   var figuras = new Array(45);    // Array de imagens
   corrente = 0;                   // Figura Corrente
   banner = 1;
</script>

<table>
   <tr>
      <td> <img src = "peixe1.jpg" /> </td>
      <td> <img src = "banner1.jpg" /> </td>
      <td> Para qualquer esclarecimento contactar: <a href = mailto:aquario@aquario.pt> Aquário </a> </td>
   </tr>
</table>

</body>
</html>

 

O efeito conseguido é espectacular e apelativo. A página tem movimento, acção e vida, e o painel publicitário chama a atenção pelas cores e pela mudança de slogan.

 

Vejamos agora os ficheiros HTML de segundo nível, correspondentes aos links que podem ser seguidos. A primeira opção chama um ficheiro geral.html, que contém uma série de links para páginas de aquariofilia. Para comodidade de quem está a consultar as páginas, o carregamento da página remota é feito não na frame de reduzidas dimensões, mas em toda a janela do browser, tal como indicado no qualificador target = "top".

ecran4.html

<body bgcolor = "#FFFFFF">
<h3>
   <ul>
      <li>
         <a href = "http://www.aquario.com" target = "_top"> Saltwater Solotions</a>
      </li>
      <li>
         <a href = "http://www.aka.org" target = "_top"> American Killifish Association </a>
      </li>
      <li>
         <a href = "http://www.badgerstate.com/JAWS" target = "_top "> JAWS </a>
      </li>
      <li>
         <a href = "http://www.aqualink.com" target = "_top"> Aqoalink </a>
      </li>
   </ul>
</h3>
</body>
</html>

 

Ao ser seleccionado o link no mapa de imagem na frame da esquerda, a página HTML é carregada na frame do lado direito.

A segunda opção do mapa tem uma série de links de natureza mais técnica:

tech.html

<html>
<head>   </head>

<body bgcolor = "#FFFFFF">
<h3>
   <ul>
      <li>
         <a href = "http://www.actwin.com/fishlgloss/" target = "_top"> Gloss&aacute;rio de Aquariofilia </a>
      </li>
      <li>
         <a href = "http://www.cco.caltech.edu/~aqoario/Faq" target = "_top"> FAQ de Aquariofilia </a>       </li>
      <li>
         <a href = "http://home.earthlink.net/~usurper3/index.html" target = "_top"> Atlantis Home Page </a>       </li>
   </ul>
</h3>
</body>
</html>

 

Segue-se uma página com links portugueses:

links.html

<html>
<head>   </head>

<body bgcolor = "#FFFFFF">
<h3>
   <ul>
      <li>
         <a href = "http://www.yi.com/home/JorgeFlora/" target = "_top"> Jorge Flora Aquarium </a>       </li>
      <li>
         <a href = "http://www.cidadevirtual.pt/mrf/fixe/p_index.html" target = "_top"> Peixe Fresco </a>       </li>
   </ul>
</h3>
</body>
</html>

 

A próxima página também é uma vulgar página de links para empresas que vendem artigos para aquário via Internet.

market.html

<html>
<head>   </head>

<body bgcolor = "#FFFFFF">
<h3>
   <ul>
      <li>
         <a bref = "http://www.actwin.com/AquaticTech/index.html" > Aquatic Technology </a>       </li>
      <li>
         <a bref = "http://www.exoticaquario.com/" > Exotic Aquário </a>       </li>
      <li>
         <a bref = "http://www.trop-treasures.com/" > Tropical Treasures </a>       </li>
      <li>
         <a bref = "http://www.globalfishnet.com/" > Global FishNet </a>       </li>
      <li>
         <a bref = "http://www.aqualink-too.com/vendors/" > Online Aquário Marketplace </a>       </li>
      <li>
         <a bref = "http://petsforum.com/wwff/" > World Wide Fish Farm </a>       </li>
      <li>
         <a bref= "http://www.ffexpress.com/" > Flying Fish Express</a>       </li>
   </ul>
</h3>
</body>
</html>

 

Segue-se uma página que permite ao utilizador fazer a procura directa do tema nos motores de busca da Internet. Repare-se como é feita a ligação directa desta página aos mecanismos de pesquisa e como é colocada, à partida, a palavra a procurar, para que o utilizador só tenha de pressionar um botão para a realizar.

search.html

<html>
<head>   </head>

<body bgcolor = "#FFFFFF">
<strong>
   <h3> (via <a href = "http://www.google.com/"> Google </a>) </h3>
</strong>

<form method = "get" action = "http://search.google.com/search" target = "_top">
   <input size = "30" name = "q" value = "aquario">
   <input type = "submit" value = "Pesquisar no Google ">
</form>

</body>
</html>

 

Ao ser pressionado o botão correspondente, é activada a pesquisa e o resultado devolvido na janela inteira do browser para maior comodidade do utilizador.

Para terminar, o último ponto seleccionável do mapa é uma pequena aplicação JavaScript para fazer o cálculo do número de litros de um aquário e do seu peso aproximado. Utiliza-se um form e recorre-se ao JavaScript para fazer as contas e colocar os resultados nos campos respectivos.

calc.html

<html>
<head>   </head>

<body>
<script language="JavaScript">
   function calcula(form) {
      var k = 1;        // Aproxima-se 1 litro = 1 kg agua
      var h = eval(form.altura.value);
      var l = eval(form.largura.value);
      var c = eval(form.comprimento.value);
      form.agua.value = (l*h*c )/1000;
      form.peso.value = k*(l*h*c)/1000;
   }
</script>

<form>
   <table>
      <tr>
         <td> Altura do Aquário: </td>
         <td> <input type = "text" name = "altura"> </td>
      </tr>
      <tr>
         <td> Largura do Aquário: </td>
         <td> <input type = "text" name = "largura"> </td>
      </tr>
      <tr>
         <td> Profundidade do Aquário: </td>
         <td> <input type = "text" name = "comprimento"> </td>
         <td> <input type = "button" value = "Calcular!"onClick = " calcula(this.form)"> </td>
      </tr>
      <tr>
         <td> Įgua em litros: </td>
         <td> <input type = "text" name = "agua"> </td>
      </tr>
      <tr>
         <td> Peso em Kg: </td>
         <td> <input type = "text" name = "peso"> </td>
      </tr>
   </table>
   </form>

</body>
</html>

 

Para utilizar esta folha, basta preencher os campos altura, largura e profundidade, depois pressionar o botão.

 

 

               

 

 

 

     Página 1   Página 2   Página 3  

 
 


© 2007 - 2010 - Miguel Moreira | Todos os direitos reservados