Gráficos e Multimédia

Gráficos e Multimédia

A característica visível mais espectacular em qualquer linguagem de programação é sempre a que se relaciona com a criação e manipulação de objectos gráficos e Multimédia.

O JavaScript disponibiliza um conjunto de ferramentas que permitem ao utilizador realizar algumas aplicações bastante interessantes no domínio gráfico e Multimédia, embora este tipo de funcionalidades não deva ser levado demasiado a sério (caso seja necessário o desenvolvimento de aplicações gráficas exigentes, tais como jogos de intenso grafismo, deverá ser utilizado outro tipo de tecnologia, tal como o Java).

Imagem

As imagens existentes nos formatos gráficos mais usuais (GIF, JPEG) integram-se nos documentos HTML de uma forma natural, por recurso ao elemento HTML <img …>. A sintaxe, é a seguinte:

<img src="URL_ficheiro_imagem.extensao" />

No atributo src indicamos a localização e o nome do ficheiro que contem a imagem a colocar na página HTML.

A sintaxe para a introdução de imagens é a seguinte :

<html>

<head>

<title> Imagem </title>

</head>

<body>

</body>

</html>

O JavaScript permite o tratamento dinâmico das imagens, sendo utilizado um array denominado images, para designar as diversas imagens que estiverem presentes no documento HTML.

Cada imagem é na verdade um objecta (Img) com o seguinte conjunto de propriedades:

Propriedades:

border

Corresponde ao atributo border do elemento HTML <img … >, que define se surge ou não uma linha à volta da imagem.

complete

Indica se a imagem já foi completamente carregada.

height

Altura em pixels da imagem.

width

Largura em pixels da imagem).

hspace

Define o número de pixels que a imagem irá aparecer deslocada em relação à margem esquerda da janela do browser.

vspace

Define o espaçamento em pixels da imagem em relação ao topo da janela do browser.

lowsrc

Especifica uma imagem de baixa resolução a ser carregada antes de a imagem completa estar carregada.

name

Nome da imagem.

src

URL do ficheiro de imagem.

Apesar de não ter métodos associados, o objecto image (img) tem várias funções gestoras de evento associadas:

Funções Gestoras de Evento:

onabort

Ocorre quando o utilizador pára o carregamento da imagem antes de este se completar.

onerror

Ocorre se a imagem não for encontrada ou o ficheiro desta for inválido.

onkeydown

Acontece se uma tecla é pressionada.

onkeypress

Idem quando uma tecla é pressionada e largada.

onkeyup onload

Idem quando uma tecla é largada.

onload

Ocorre quando a imagem termina de ser carregada.

Vejamos um exemplo para se familiarizar com este mecanismo A primeira coisa a fazer é criar algumas imagens que encadeadas dêem a ilusão de movimento:

<html>

<head>

<title> Rotação de imagens </title>

</head>

<body>

</body>

</html>

Naturalmente que, se pretendemos dar a ilusão do movimento, as imagens não podem aparecer todas ao mesmo tempo, como estamos a fazer com este exemplo.

Assim, o que há a fazer é carregar as imagens num array de imagens e fazer aparecer cada uma delas em sequência.

<html>

<head>

<title> Rotação de imagens </title>

function init() { // Inicializa o programa

// Carrega todas as figuras no array figuras

for (var k=0 ; k<=3 ; k++) {

figuras[k] = new Image();

figuras[k].src = "imagem" + (k+1) + ".jpg";

}

// Cria um timeout, para fazer a troca de imagem

window.setTimeout("troca_imagem()" ,1000);

}

// Troca de imagem para a imagem seguinte

function troca_imagem() {

if (corrente < 3) {

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;

// Novo timeout para trocar de novo em 1 Seg.

window.setTimeout("troca_imagem()" ,1000);

}

//Main

var figuras = new Array(4); // Array de imagens

corrente=0; // Figura Corrente

</script>

</head>

</body>

</html>

Este exemplo baseia-se num mecanismo de Timeouts, mecanismo que já vimos atrás. O primeiro Timeout é activado na função init(), que funciona como gestora de evento (load) associada à página HTML. Antes disso, nesta função são também carregadas num array (denominado "figuras ") as quatro figuras JPG que vão compor o movimento.

Quando o Timeout expira (ao fim de 1 segundo), a função "troca_imagem()” é chamada. Esta encarrega-se de trocar a imagem, bastando para tal alterar o atributo "src" do objecto JavaScript que representa a imagem colocada na página.

Após efectuada a troca da imagem, é iniciado novo timeout para a função ser de novo chamada em 1 segundo e haver nova troca. O controlo da imagem a entrar em cada instante é efectuado guardando o número da imagem na variável "corrente", que vai tomando valores entre 0 e 3 (índices das imagens no array figuras[]).

O efeito visual é interessante, com a imagem parecendo mover-se, rodando de segundo a segundo:

No JavaScript as imagens são referenciadas por um array images[], pelo que só existindo uma é referenciada por:

document.images[0];

(se existissem outras imagens na folha, elas seriam referenciadas por document.images[1], etc.. .).

Outro tipo de publicação que se pode fazer com imagens na World Wide Web consiste nos famosos "Mapas de Imagem" (Imagemaps), Estes são formados por imagens inseridas normalmente nas páginas, mas divididas em zonas lógicas seleccionáveis como qualquer vulgar link e com o mesmo efeito.

Vejamos um exemplo de um mapa de imagem, criado com o auxílio de um editor de mapas.

<html>

<head>

<title> Mapa de imagens </title>

</head>

function publicidade() { // Faz entrar a publicidade

document.images[1].src="pub.jpg";

}

function retira() { // Coloca o anuncio de defeito

document.images[1].src="def.jpg";

}

function limpa() { // Coloca o painel em branco

document.images[1].src="nada.jpg";

}

</script>

<body>

<table>

<tr>

</tr>

</table>

</body>

</html>

O evento de passar por cima de uma <area> é detectado utilizando a função gestora de evento de tipo "onrnouseover". Os painéis publicitários estão colocados em ficheiros JPG e são substituídos quando as funções gestoras de evento actuam sobre a propriedade SRC da segunda imagem da página HTML.

Som

O JavaScript não disponibiliza nenhum mecanismo especial para trabalhar com sons. Contudo, hoje em dia, todos os browsers têm a capacidade de leitura dos formatos mais importantes (AU e do WAV) e são utilizáveis aplicações exteriores (Windows Media Player) para ler todos os outros formatos.

O JavaScript pode, contudo, ser utilizado de forma a trazer algum valor acrescentado ao ser aplicado em páginas Web com som: a possibilidade de fazer corresponder sons a eventos. Por exemplo, pode querer fazer tocar uma determinada melodia quando se entra numa página ou fazer aparecer um som quando é seleccionado um link ou mesmo aparecer uma voz dando alguma indicação quando acontece algum evento.

A sintaxe é extremamente simples, uma vez que um som é tratado como qualquer outro ficheiro.

Vejamos um exemplo de aplicação muito simples, com uma página de demonstração com duas funcionalidades: música de fundo (carregada quando o utilizador faz o carregamento da página) e uma mensagem de voz (activada quando o utilizador pressiona um link em construção).

<html>

<head>

<title> Teste de sons </title>

</head>

A página dos Testes de Som. <p/>

<ul>

<li> <a href= "pag2.html" > Página seguinte </a> <p/> </li>

<li> <a href= "pagi.html" onclick="window.location.href= 'construct.wav' ;

return false"> Página de Índice </a> <p/> </li>

</ul>

</body>

</html>

Ao ser carregada a página, o som começa a ser interpretado pela aplicação que estiver configurada para interpretar o formato WAV

Se experimentar pressionar o segundo link, será lido um outro ficheiro WAV, que contém uma mensagem de voz dizendo que o índice ainda não esta disponível. Ambos são exemplos claros de sons como resposta a eventos.

Antes de se lembrar de começar a espalhar muitos sons pelas suas páginas, há alguns aspectos que deve ponderar. Em primeiro lugar, os ficheiros de som são grandes, especialmente se tiverem boa qualidade sonora.

Uma boa ideia na Internet é utilizar o formato MP3, que consegue uma excelente qualidade de som com baixos tamanhos de ficheiros.

Netscape Plug-ins

Os plug-ins são um conceito inicialmente desenvolvido pela Netscape para ultrapassar os problemas resultantes dos muitos tipos e formatos de Multimédia e outras aplicações que têm surgido. Se bem que o browser à partida esteja preparado para suportar um certo número de formatos (designados na parametrização do browser, no menu das Helper Applications), é necessário acrescentar pequenas aplicações para efectuar a interpretação de novos formatos que vão surgindo.

Um plug-in, por definição, é uma pequena aplicação de software que se integra de forma natural no browser.

Exemplos de plug-ins que estão espalhados por toda a Internet são certos formatos Multimédia, como o RealAudio, Flash, Shockwave, QuickTime, e muitos outros.

Os plug-ins mais famosos constituem a lista seguinte:

RealPlayer http://www.real.com

Som via Web. Utilizado para transmissões directas de Rádio via Internet

Flash http://www.macromedia.com/flash

Tecnologia muitíssimo usada em animações na Web. É muito comum os utilizadores da Internet terem este plug-in instalado.

Shockwave http://www.macromedia.com/shockwave

Vídeo, Som e Animação via Internet.

QuickTime http://quicktime.apple.com

Formato Vídeo da Apple.

Adobe Acrobat http://www.adobe.com/products/acrobat/main.html

Visualizador do formato de documentos PDF, da Adobe, para browsers Web.

BrowserWatch http://browserwatch.iworld.com/plug-in.html

Uma lista de plug-ins disponíveis na Web.

Os documentos que os plug-ins vão interpretar integram-se numa página Web de uma forma bastante simples, utilizando o elemento HTML <embed>.

Se, por exemplo, quiséssemos inserir um filme MOV num documento HTML, usaríamos a sintaxe seguinte:

<embed src="filme.mov" width="100" height="50">

Os atributos width e height são, respectivamente, a largura e altura em pixels que a janela de visualização do plug-in vai ter, mas podem ser omitidos.

O JavaScript pode ser utilizado para trabalhar com os plug-ins, tendo acesso à lista de plug-ins que o utilizador tem instalada no seu browser e, portanto, podendo procurar se um determinado plug-in existe, decidindo a acção a tomar de acordo com isso.

Numa das listagens de objectos, propriedades e métodos anteriores, havia um objecto denominado "navigator", parte do objecto JavaScript window, e que contém informação acerca do browser que está a ser utilizado. Este objecto (específico do Netscape) contém alguns objectos com informação útil acerca do contexto de utilização do browser

navigator.codename – code name do browser.

navigator.appname – nome do browser.

navigator.appversion – a versão do browser.

navigator.plugins – trata-se de um array com dados acerca dos plug-ins que estão instalados no browser.

navigator.mimetypes – trata-se de um array com os tipos MIME suportados.

navigator.useragent – o cabeçalho user agent enviado pelo browser ao servidor.

Os dois arrays referidos (plug-ins e mimetypes) são compostos por objectos que têm o seguinte conjunto de características:

plug-ins

Propriedades:

name

Nome do plug-in.

filename

Ficheiro executável usado para carregar o plug-in.

description

Descrição do plug-in.

array de objectos representando os tipos MIME que o plug-in suporta.

Métodos:

refresh()

Reinicializa a lista de plug-ins disponíveis.

mimeTypes

Propriedades:

type

Tipo de dados MIME.

description

Descrição do tipo MIME.

enabledPlugin

Nome do plug-in que suporta o tipo.

suffixes

Lista de extensões que são usadas nos documentos de um determinado tipo MIME.

Para além destas propriedades, podemos determinar o número de plug-ins ou de tipos MIME instalados, com as expressões:

window.navigator.plugins.length

window.navigator.mimetypes.length

Vejamos uma aplicação prática muito simples destes objectos que, simultaneamente, permite descobrir que plug-ins e tipos de dados MIME tem instalados no seu browser WWW:

<html>

<head>

<title> Plugins instalados </title>

</head>

<body>

document.write("<strong> Lista de Plug-ins instalados: </strong>");

document.write(" <table> ");

for (var k=0; k<window.navigator.plugins.length; k++) {

document.write(" <tr> <td> ", window.navigator.plugins[k].name);

document.write(" </td> <td> ", window.navigator.plugins[k].description);

document.write(" </tr> ");

}

document.write(" </table>");

document.write("<p/> <strong> Lista de Tipos MIME instalados:</strong>" );

document.write(" <table> ");

for (k=0; k<window.navigator.mimeTypes.length; k++) {

document.write(" <tr> <td> ", window.navigator.mimeTypes[k].type);

document.write(" </td> <td> ", window.navigator.mimeTypes[k].description);

document.write(" </tr> ");

}

document.write(" </table>");

</script>

</body>

</html>

Ao executar este programa, surge uma lista contendo todos os plug-ins e tipos MIME que estão instalados no browser local. Os dados são todos obtidos por utilização dos dois arrays de objectos navigator.plugins e navigator.mimeTypes.

Em ambos os casos, a propriedade "description" permite obter uma ideia muito clara do que é o plug-in ou de qual o formato do tipo MIME instalado.

Uma das utilizações mais práticas para o JavaScript em relação aos plug-ins consiste numa situação muito comum na Web: suponhamos que quer disponibilizar um ficheiro com um determinado formato não reconhecido à partida pelos browsers (por exemplo, um documento em PDF). Poderá existir um programa em JavaScript que verifique se o leitor tem ou não o plug-in Adobe Acrobat e, caso não tenha, disponibilize um link para o utilizador fazer a respectiva importação:

<html>

<head>

<title> Publicação em PDF </title>

</head>

<body>

if (window.navigator.plugins["Adobe Acrobat"])

document.write("<embed src='acrobat.pdf'>");

else {

document.write("Você não tem o plug-in para ler ficheiros PDF <p/>");

document.write("<a href='http://www.adobe.com/products/acrobat/readstep2.html' >

Carregue aqui </a> para importar...");

}

</script>

</body>

</html>

No caso de o utilizador não ter o plug-in instalado, bastará um clique de rato sobre o link apresentado para proceder à importação do software, bastando depois proceder à instalação.