Experimento de Avaliação Dos Benefícios Da Tecnologia AJAX

Universidade Federal da Grande Dourados
Faculdade de Ciências Exatas e Tecnológicas
Gilberto Pederiva
Wandner Valdivino Meirelles
Experimento de Avaliação dos Benefícios da

Tecnologia AJAX
Dourados-MS
março de 2007
Faculdade de Ciências Exatas e Tecnológicas
Gilberto Pederiva
Wandner Valdivino Meirelles
Experimento de Avaliação dos Benefícios da

Tecnologia AJAX
Trabalho de Conclusão de Curso apresentado

para obtenção do Grau de Bacharel em Aná-
lise de Sistemas pela Universidade Federal da
Grande Dourados.
Orientação: Professor Especialista Marcelo

de Castro Carvalho
Dourados-MS
março de 2007
Projeto Final de Graduação sob o título "Experimento de Avaliação dos Benefícios da
Tecnologia AJAX", defendido por Gilberto Pederiva e Wandner Valdivino Meirelles e aprovado
em março de 2007, na cidade de Dourados, Mato Grosso do Sul, pela banca examinadora
constituída pelos professores:
Professor Esp. Marcelo de C. Carvalho

Orientador
Professora Dra. Carla Adriana B. Zanchett

Professor Msc. Rodrigo Funabashi Jorge

Dedicatória
Dedicamos este trabalho às nossas famílias por constituirem o elemento principal de

nossas motivações. Impulsionaram-nos a buscar vida nova a cada dia. Agradecemos por te-
rem aceito se privar de nossas companhias pelos estudos, concedendo-nos a oportunidade de
realização pessoal.
Agradecimentos
Agradecemos primeiramente à Deus que nos conduziu e sustentou durante essa trajetó-
ria acadêmica. Concedeu-nos perseverança e disposição para a conquista de nossos objetivos.
A nossas famílias que souberam compreender o tempo de ausência durante o desenvol-

vimento de nossos trabalhos acadêmicos, fortificando nossos ideais.
Ao nosso orientador, professor Marcelo de Castro Carvalho, que contribuiu para o nosso
aprimoramento intelectual, profissional e pessoal durante o desenvolvimento desse projeto.
Resumo
Este trabalho compreende o estudo da tecnologia AJAX (Asynchronous Javascript and

XML) na programação Web. Seu foco inicial consiste em apresentar o contexto da expansão
da internet e a sua evolução nas últimas décadas, seguido pela compreensão das tecnologias
empregadas na programação AJAX, culminando no desenvolvimento de três aplicativos. Dois
deles com funções e aparências equivalentes, porém programados com técnicas distintas, ou
seja, um com recuperação assíncrona de conteúdo (AJAX) e outro não, tendo estes a finalidade
de comparar ambas as tecnologias (AJAX e tradicional), bem como avaliar a preferência do
usuário. O terceiro aplicativo representa o produto final de toda fundamentação teórica e da
experiência prática sobre a metodologia de programação AJAX. Trata-se de um sistema de
controle de materiais que emprega a técnica AJAX e a tradicional, demonstrando assim uma
perfeita integração entre elas.
Palavras-chaves: AJAX, assíncrono, comparação, programação e Web.
Abstract
This work represents the study of the AJAX technology (Asynchronous Javascript and
XML) in the Web programming. Its initial focus is to show the context of the expansion of
the internet and its evolution in the last decades, followed for the understanding of the used
technologies in the AJAX programming, culminating in the development of the three aplicati-
ons. Two of them functions and equivalent appearances, however they are programmed with
distinct techniques, one with asynchronous recovery of content (AJAX) and other without,
having in these a aplications there is a purpose to compare both the technologies (traditional
and AJAX) and avaliable the preferences of the users. The third application represents the
end item of all theory and the practical experience on the programming methods AJAX. It’s
about a system of control of materials that uses the AJAX and traditional methodology, thus
demonstrating a perfect integration between them.
Keywords: AJAX, asynchronous, comparison, programming and Web
Lista de Figuras
1 Browsers modo texto e gráfico . . . . . . . . . . . . . . . . . . . . . . . . . . p. 16
2 Modelo de sincronia das aplicações Web tradicionais e AJAX. [11]. . . . . . . p. 23
3 Ciclo de vida das aplicações Web clássicas [14]. . . . . . . . . . . . . . . . . . p. 24
4 Ciclo de vida das aplicações AJAX [14]. . . . . . . . . . . . . . . . . . . . . p. 25
5 Exemplo de utilização da tecnologia AJAX [15]. . . . . . . . . . . . . . . . . p. 26
6 Dados acumulados em uma aplicação clássica e AJAX [14]. . . . . . . . . . . p. 27
7 YouOS - Sistema Operacional Web. . . . . . . . . . . . . . . . . . . . . . . . p. 27
8 Estrutura básica de um documento HTML . . . . . . . . . . . . . . . . . . . p. 31
9 Sintaxe da linguagem CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 33
10 Estrutura de um documento XML . . . . . . . . . . . . . . . . . . . . . . . . p. 35
11 Exibição de documento XML . . . . . . . . . . . . . . . . . . . . . . . . . . p. 36
12 Criação do Objeto XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . p. 38
13 Sintaxe da básica da linguagem PHP . . . . . . . . . . . . . . . . . . . . . . p. 39
14 Script SQL para a criação do banco de dados "biblioteca" . . . . . . . . . . . p. 42
15 Script SQL para a criação da tabela "livros" . . . . . . . . . . . . . . . . . . p. 43
16 Script SQL para a inserção de dados na tabela "livros" . . . . . . . . . . . . p. 43
17 Fragmento de código do arquivo "lista_livros.php". . . . . . . . . . . . . . . p. 45
18 Fragmento de código do arquivo "lista_livros.php". . . . . . . . . . . . . . . p. 46
19 Primeiro bloco de código do arquivo XHTML "index.html". . . . . . . . . . . p. 47
20 Segundo bloco de código do arquivo HTML "index.html". . . . . . . . . . . . p. 47
21 Terceiro bloco de código do arquivo HTML "index.html". . . . . . . . . . . . p. 48
22 Criação do arquivo CSS "estilo.css". . . . . . . . . . . . . . . . . . . . . . . p. 49

23 Script do arquivo "option_lista.js". . . . . . . . . . . . . . . . . . . . . . . . p. 49
24 Script do arquivo "detalhe_lista.js". . . . . . . . . . . . . . . . . . . . . . . p. 50
25 Arquivo principal "index.html". . . . . . . . . . . . . . . . . . . . . . . . . . p. 51
26 Dados na tabela inseridos dinamicamente . . . . . . . . . . . . . . . . . . . . p. 51
27 Diagrama de Entidade de Relacionamento do aplicativo OurMarket. . . . . . p. 53
28 Diagrama de Caso de Uso do aplicativo OurMarket. . . . . . . . . . . . . . . p. 54
29 Diagrama de Entidade de Relacionamento. . . . . . . . . . . . . . . . . . . . p. 59
30 Diagrama de Caso de Uso do aplicativo Material. . . . . . . . . . . . . . . . p. 61
31 ourMarket sem AJAX - Tela principal. . . . . . . . . . . . . . . . . . . . . . p. 92
32 ourMarket sem AJAX - Tela de gerenciamento de produtos. . . . . . . . . . p. 92
33 ourMarket com AJAX - Tela principal. . . . . . . . . . . . . . . . . . . . . . p. 93
34 ourMarket com AJAX - Tela de gerenciamento de produtos. . . . . . . . . . p. 93
35 Controle de Materiais - Tela principal. . . . . . . . . . . . . . . . . . . . . . p. 94
36 Controle de Materiais - Tela de gerenciamento de materiais. . . . . . . . . . p. 94
37 Página de consulta de opinião. . . . . . . . . . . . . . . . . . . . . . . . . . . p. 95

Lista de Tabelas
2 Uso da Internet no mundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 17
3 Pesquisa Online de Opinião . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 57

Lista de Abreviaturas e Siglas
AJAX Asynchronous Javascript And XML

ARPA Advanced Research Project Agency
ARPANET Advanced Research Projects Agency Network
API Application Programming Interface
CERN Conseil Européen pour la Recherche Nucléaire
CGI Common Gateway Interface
CIOPS Centro Integrado de Operações de Segurança
CP Código Patrimonial
CSS Cascading Style Sheets
DER Diagrama de Entidade de Relacionamento
DOM Document Object Model
GNU General Public License
HTTP Hyper Text Transfer Protocol
IIS Microsoft Internet Information Server
IP Internet Protocol
NCSA National Center for Supercomputing Applications
Perl Practical Extraction and Report Language
PHP Personal Hypertext Preprocessor
SGDB Sistema Gerenciador de Banco de Dados
SGML Standard Generalized Markup Language
SSL Secured Socket Layer
SQL Structured Query Language
TCP Transmission Control Protocol
TI Tecnologia da Informação
UML Unified Modeling Language
XHTML Extensible HyperText Markup Language
XML eXtensible Markup Language
XSL Extendible Stylesheet Language
W3C World Wide Web Consortium
WAIS Wide Area Information Server
WAP Wireless Application Protocol
WML Wireless Markup Language
WWW ou Web World Wide Web
Sumário
Introdução p. 15
1 Programação AJAX p. 22
1.1 O que é AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 22
1.2 Por que usar AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 26
1.3 Tecnologias envolvidas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 28
1.3.1 Servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 29
1.3.2 HTML e XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 30
1.3.3 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 32
1.3.4 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 34
1.3.5 Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 35
1.3.6 Recuperação assíncrona de dados . . . . . . . . . . . . . . . . . . . . p. 37
1.3.7 Linguagem de programação e banco de dados . . . . . . . . . . . . . p. 38
2 AJAX na prática p. 42
2.1 Criação do banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 42
2.2 Criação do XML dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 44
2.3 Criação do HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 46
2.4 Criação do CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 47
2.5 Criação do Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 48
2.6 Resultado final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 49
3 Aplicativos de comparação p. 52
3.1 Delimitação do módulo implementado . . . . . . . . . . . . . . . . . . . . . . p. 52
3.1.1 Diagrama de Entidade de Relacionamento e Use Case . . . . . . . . . p. 53
3.2 Resultados da pesquisa de opinião online . . . . . . . . . . . . . . . . . . . . p. 57
4 Produto final de trabalho p. 58
4.1 Descrição do aplicativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 58
4.1.1 Diagrama de Entidade de Relacionamento e Use Case . . . . . . . . . p. 59
5 Conclusões p. 71
Referências p. 73
Glossário p. 76
Anexo A -- Telas dos aplicativos gerados p. 92
A.1 ourMarket sem AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 92
A.2 ourMarket com AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 93
A.3 Produto final de trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 94
Anexo B -- Consulta de opinião p. 95
B.1 Tela da página de consulta de opinião . . . . . . . . . . . . . . . . . . . . . . p. 95
B.2 Anúncios da consulta de opinião . . . . . . . . . . . . . . . . . . . . . . . . . p. 96
Anexo C -- Ferramentas utilizadas p. 97

Introdução
A Internet pode ser definida como um conjunto de redes que utilizam o protocolo
TCP/IP com um espaço de direcionamento uniforme para o intercâmbio de dados entre os
equipamentos ligados em rede [1].
No Brasil, a Internet completou 10 anos em 2005 e está em franco crescimento no

mundo, isso porque ela quebrou o paradigma da distância e mudou a forma de interação
com a informação. A segurança encontrada nesse universo se reflete em estatísticas otimistas:
vendas eletrônicas na América Latina devem atingir 23,1 bilhões de dólares até 2010, obtendo
um crescendo anual de 40% (quarenta por cento); América Latina e Caribe foram a terceira
região com maior crescimento das conexões de banda larga em 2005; o Brasil possui mais de
um milhão de domínios próprios e é o sexto do mundo [2] [3].
Leila Maria Pinheiro Fernandes em seus comentários sobre a questão do crescimento

da Internet estabelece:
O crescimento da Internet em pouco tempo foi gigantesco. Em 1990

ela possuía 3 000 redes e 200 000 computadores; em 1992, atingiu a
marca de um milhão de computadores. Em 1995, aproximadamente
40 milhões de computadores já estavam conectados à rede. Estima-
se que o número de computadores dobrará a cada ano [4].
Tecnicamente a Internet por si só não foi auto-suficiente para conquistar grande popu-
laridade, ela necessitou da World Wide Web para ganhar mais recursos, inclusive uma interface
gráfica.
Início da expansão da Internet

A Internet foi desenvolvida em 1969 pela ARPANET, criada pela ARPA, que era uma
subdivisão do Departamento de Defesa dos Estados Unidos, com o objetivo de trocar informa-
ções a uma longa distância e através de um rápido acesso entre as bases militares dos Estados
Unidos, haja visto que o mundo vivia o período de Guerra Fria [1].
A forma de editoração textual que acabou por determinar a estrutura básica da rede
mundial de computadores foi o hipertexto, uma forma intuitiva e dinâmica de apresentação
Introdução 16
textual. O termo, mencionado inicialmente por Ted Nelson1 , tomou forma em 1965 com o
projeto Xanadu2 , porém já havia sido exemplificado nas experimentações do físico e matemá-
tico americano Vannevar Bush3 , que em 1945 apresentou seu famoso artigo intitulado As We
May Think [5].
Em Outubro de 1972 a ARPANET foi aberta ao público na First International Con-

ference of Computers and Communication, que ocorreu em Washington D.C., os cientistas
da ARPA demonstraram o sistema interligando computadores em localizações diferentes. A
possibilidade de compartilhamento de arquivos e a agilidade de comunicação ficou logo notó-
ria como uma potencial ferramenta para o mundo acadêmico e empresarial, estimulando as
pesquisas e causando o surgimento de outras redes. Isso culminou no crescimento exponencial
da rede que passou a ser chamada de Internet no final dos anos 80 [1].
O início da explosão da Internet nasceu com a World Wide Web, que foi proposta
por Tim Berners-Lee4 , da CERN, em 1989. A WWW representa uma rede de computa-
dores conectados a Internet que fornece informação em forma de hipermídia, como vídeos,
sons, hipertextos e figuras. Inicialmente a sua utilização foi restrista a CERN e em 1991 foi
disponibilizada mundialmente [6].
Nesse contexto histórico merece destaque, também, a formação da World Wide Web
Consortium 5 , por Tim Berners-Lee em 1994, que hoje assume a função de direção das políticas
e padrões da Web.
A compreensão da grande expansão da Web pode ser compreendida observando a evo-

lução dos primeiros browsers, conforme ilustrado nas Figuras 1(a) e 1(b) abaixo.
(b) Browser modo gráfico criado por Tim

(a) Browser modo texto - anterior a 1990.
Berners-Lee em 1993.
Figura 1: Browsers modo texto e gráfico

1
http://xanadu.com.au/ted
2
http://xanadu.com
3
http://historiadainternet.blogspot.com/2003/09/vannevar-bush.html
4
http://info.cern.ch/Proposal.html
5
http://www.w3.org
Introdução 17
De 1968 a 1984 a Internet passou de 4 (quatro) para 1.000 (um mil) de terminais
conectados. Entre 1985 e 1992 a rede expandiu-se para mais de 1.000.000 (um milhão) de
conexões, iniciando seu iminente caráter comercial. O desenvolvimento do protocolo TCP, em
1974 pelos cientistas da ARPA, foi crucial para a rápida expansão da Internet, pois antes o
acesso remoto ao recursos compartilhados era permitido a apenas para um terminal de cada
vez. Esse padrão de protocolo permitiu o acesso simultâneo aos programas [1].
Importância econômica e tecnológica

Abaixo, a Internet World Stats apresenta dados estatísticos esclarecedores acerca do
crescimento dos acessos à Web.
Uso da Internet e População do Mundo
Região População População Usuários da Penetra- Usuários Cresci-
(2006) (% do Internet ção (% (% do mento
mundo) da popu- mundo) (2000 até
lação) 2006)
África 915.210.928 14,1 % 32.765.700 3,6 % 3% 625,8 %
Ásia 3.667.774.066 56,4 % 394.872.213 10,8 % 36,4 % 245,5 %
Europa 9807.289.020 12,4 % 308.712.903 38,2 % 28,4 % 193,7 %
Leste Central 190.084.161 2,9 % 19.028.400 10 % 1,8 % 479,3 %
América do 331.473.276 5,1 % 229.138.706 69,1 % 21,1 % 112 %
Norte
América Lati- 553.908.632 8,5 % 83.368.209 15,1 % 7,7 % 361,4 %
na/Caribe
Oceania/Aus- 33.956.977 0,5 % 18.364.772 54,1 % 1,7 % 141 %
trália
Notas: (1) A Estatística sobre o Uso da Internet e População do Mundo foi atualizada em
18 de setembro de 2006. (2) Os números demográficos (população) são baseados nos dados
contidos no site world-gazetteer (http://www.world-gazetteer.com). (3) As informações sobre
o uso da Internet provem dos dados publicados da Nielsen//NetRatings (http://www.nielsen-
netratings.com), da International Telecommunications Union (http://www.itu.int), da NICs
e outras fontes de confiança.
Tabela 2: Uso da Internet no mundo
Fonte: Internet World Stats [7].
A tabela 2 mostra o quanto vem crescendo a penetração da Web no mundo. De todos

os casos o menor crescimento entre 2000 e 2006 foi superior a 100% (cem por cento), chegando
a 625.8% (seiscentos e vinte e cinco ponto oito por cento) na África.
Outro grande motivo que alavanca o crescimento da Web é a disponibilidade de serviços

de pesquisas, compartilhamento de dados e aplicativos online que ajudam aos usuários a
descobrir as informações de que precisam. Grande parte desses serviços surgiu em função de
pesquisas universitárias que evoluíram para serviços comerciais, entre os quais se incluem o
Introdução 18
WAIS (Wide Area Information Service), o Yahoo, de Stanford, o The McKinley Group e o
InfoSeek, que são empresas privadas localizadas no Vale do Silício.
A quantidade de pessoas conectadas a rede saltou de um milhão e quinze mil para vinte
e cinco milhões e noventa mil usuários entre 1997 e 2005, abrangendo 0.7% (zero ponto sete
por cento) contra 13.9% (treze ponto nove por cento) da população brasileira nesse período [8].
Esse saldo positivo se deve ao rompimento do tradicional paradigma de distância, comunicação
e comércio. O crescente público que utiliza a Web levou às empresas a preocupação de se
estabelecer um vínculo de confiança com o internauta, ocasionando a elevação da qualidade
dos serviço online.
O comércio online é um dos grandes atrativos para os acessos à rede. De um lado o

consumidor que deseja a comodidade e versatilidade para escolher suas compras e do outro
as empresas e profissionais que tentam fazer seus produtos mais atraentes. Casos de sucesso
como o da empresa Submarino, que teve suas vendas aumentadas em 56% (cinqüenta e seis
por cento) com relação ao ano passado [2], é o grande incentivo para a utilização da Web como
um verdadeiro centro de movimentação financeira.
A boa perspectiva e prosperidade do comércio online trouxe uma esperada disputa

pela preferência do internauta, desencadeando um aprimoramento dos sites. Design convida-
tivo, interatividade e facilidade de navegação são algumas das importantes estratégias para
conquistar esse mercado consumidor.
Nesse contexto, e com o objetivo de cativar o usuário com uma concepção diferente de
Internet, surge a Web 2.0. A história tem início em outubro de 2004 na reunião entre O’Reilly
Media e MediaLive, com o cunho do termo e o surgimento das primeiras conferências sobre o
assunto [9].
No começo a Web era feita de sites que publicavam conteúdo. Era uma forma digital
de fazer exatamente a mesma coisa que a mídia impressa já fazia. Tim O’Reilly em seu artigo
"What Is Web 2.0" [9] descreveu a Web 2.0 como uma plataforma central suceptiva ao usuário,
o retorno ao simples e agradável, sempre orientada a serviços. A compreensão do usuário como
um cooperador, um parceiro, é fundamental para essa nova abordagem. Na Web 2.0 o usuário
não somente lê a informação, ele interage com ela.
A Web é cada vez mais o espaço de representação de coletividade, na medida em que

abriga as mais diversas manifestações de cooperação entre os usuários: sites de relacionamento,
fóruns de discussões, salas virtuais de bate-papo e sites pessoais de conteúdo aberto são
alguns exemplos de ferramentas de interação entre os usuários. Em épocas anteriores não
se imaginava, por exemplo, que o jornalismo seria tão rico em informações e disponibilizado
Introdução 19
gratuitamente.
Simultaneamente e complementar à Web 2.0 surgia uma nova forma de conceber aplica-
ções para Internet chamada AJAX. Essa não é uma tecnologia nova, mas sim um agrupamento
de tecnologias que culminam numa aplicação em que o Cliente Web responde atualizando ape-
nas o que for necessário, tornando a navegação pela Internet muito mais rápido e muito
semelhante a um aplicativo standalone [10][11].
Tecnologicamente o AJAX é fundamentado principalmente no uso dos padrões XHTML

e CSS para apresentação do conteúdo, DOM para apresentação dinâmica e interação com o
Cliente Web, XML e XSLT para manipulação de dados, XMLHttpRequest para recuperação
assíncrona de dados e JavaScript para unir os padrões empregados [11].
O uso da metodologia AJAX de desenvolvimento de aplicação para Web tornou possível,

diminuir a distância que existia entre as aplicações para desktop e as online, no que diz respeito
à riqueza de conteúdos e à capacidade de resposta das aplicações desktop.
As vantagens trazidas pelas aplicações Web, aliadas à possibilidade das técnicas AJAX
em oferecer velocidade semelhante a um software desktop, têm cultivado maciços investimentos
e cooperação na multiplicação desse conhecimento. Afinal, AJAX une-se perfeitamente com
o definição de uma Internet dinâmica e atraente. Aplicativos como Google Maps6 , Gmail7 ,
Del.icio.us8 , Flickr9 e Start10 mostram bem a amplitude e aceitabilidade dessa nova forma de
conceber soluções para a Web.
Objetivos do trabalho
Elaborar um tutorial básico para compreender como a técnica de programação AJAX
provê a recuperação assíncrona de conteúdo, bem como produzir dois aplicativos Web que
se diferenciam apenas na técnica de programação utilizada: AJAX e tradicional, os quais
serão submetidos a uma pesquisa de opinião online que estará disponível no endereço eletrô-
nico <http://www.wannd.com> entre os dias 01/02/2007 à 23/02/2007, pesquisa essa que
avaliará a sensação do internauta quanto a velocidade, a facilidade, o designer, a avaliação
geral e a preferência entre as duas técnicas programação utilizadas nos aplicativos. Também
é foco desse trabalho a concepção de um aplicativo de controle patrimonial para demonstrar
o enriquecimento que a técnica AJAX pode proporcionar aos aplicativos Web.
6
http://maps.google.com
7
http://mail.google.com
8
http://del.icio.us
9
http://www.flickr.com
10
http://www.start.com
Introdução 20
Metodologia
O estudo foi iniciado com revisão bibliográfica do termo AJAX na Web, por meio de
ferramentas de busca na Internet: Google, Yahoo e Cadê. A pesquisa foi o subsídio para
seleção das bibliografias e linhas de pensamento, das quais o primeiro foco foi lançado sobre o
artigo de Garret [11], devido ao seu pioneirismo na abordagem desse assunto.
O estudo das bibliografias foi o primeiro passo para compreensão da programação

AJAX, seguido pela implementação dos exemplos do livro AJAX for Dumiens, AJAX In
Action, bem como de alguns tutoriais de sites especializados em programação como o Imas-
ters11 , Tableless12 , AJAXBox13 e outros. O elemento de conhecimento central adquirido com
essa pesquisa foi o domínio do Javascript, uma vez que é através dele que se torna possível
unir e controlar as tecnologias de apresentação do conteúdo Web.
A coleta de fundamentações teóricas trouxe algumas dificuldades pelo fato do assunto

ser bastante recente e com poucos trabalhos relevantes em língua portuguesa. Dessa forma,
tornou-se exigência consultar bibliografias em língua inglesa.
A preparação para construir o aplicativo de comparação da programação AJAX com a

tradicional se deu com base em dois exemplos de e-commerces dessa natureza: supermercado
Big14 e Pão de Açucar15 .
A etapa seguinte foi a publicação das duas versões do aplicativo de comparação16 , a fim
de identificar a sensação do internauta quanto as diferenças que a programação AJAX pode
proporcionar comparada a forma tradicional de programação para Web.
O último passo foi construir um aplicativo que comprovasse que uma aplicação Web
tradicional pode ser enriquecida com a técnica AJAX. Daí surgiu o produto final de nossos
estudos, ou seja, um sistema de controle de controle patrimonial que foi programado unindo
a técnica AJAX com a forma tradicional de programação.
A partir do conhecimento proporcionado pela implementação dos três aplicativos e das

pesquisas feitas ao longo de todo o trabalho, montou-se uma conclusão contextualizada com
o conhecimento técnico e com a análise da opinião do usuário final.
Estrutura do trabalho
11
http://www.imasters.com.br
12
http://www.tableless.com.br
13
http://www.ajaxbox.com.br
14
http://www.big.com.br/alimentar
15
http://www.paodeacucar.com.br
16
http://www.wannd.com
Introdução 21
No Capítulo 1, são abordados aspectos relativos a programação Web, com foco principal
na técnica AJAX. Posicionamento histórico, elenco e discussão das tecnologias que compõem
a programação com recuperação assíncrona de conteúdo são os pontos precípuos dessa seção.
No Capítulo 2, exemplificamos a programação AJAX por intermédia da construção,

passo-a-passo, de um código para exibição de livros armazenados num banco de dados. Trata-
se de um pequeno tutorial para nortear como acontece a integração das tecnologias que com-
põem o termo AJAX.
O Capítulo 3 provê um aplicativo de comparação que objetiva descrever e implementar

duas versões equivalentes de parte de um e-commerce: uma programada com a técnica AJAX
e outro sem recuperação assíncrona de conteúdo. Com o qual pretende-se tornar palpável a
diferença de velocidade de navegação existente quando se utiliza a técnica de programação
AJAX.
O Capítulo 4 descreve a criação do aplicativo final desse estudo. Trata-se de um sistema

de controle de materiais programado mesclando a técnica tradicional de programação para
Web com a AJAX. O objetivo é aplicar o conhecimento adquirido e demonstrar que qualquer
aplicação Web pode ser melhorada com a recuperação assíncrona de dados.
O Capítulo 5 vale-se da disponibilização, na Web, das duas versões do aplicativo de

comparação para identificar a sensação do internauta quanto a navegação em um aplicativo
implementado em AJAX e outro que utiliza a técnica tradicional de programação. Também
apresenta a coexistência da programação AJAX e tradicional como uma possibilidade produ-
tiva de conceber aplicações para Web.
1 Programação AJAX
A Web está evoluindo a medida que seus usuários se tornam mais exigentes e propícios
de serem alcançados remotamente. Sites graficamente bem elaborados, interativos, repletos de
conteúdo atrativo e as crescentes possibilidades comerciais foram ferramentas decisivas para
conquistar os internautas. Contudo, a limitada velocidade das aplicações Web sempre foi uma
barreira que impedia uma concorrência direta com os programas standalone. Atualmente,
essa barreira já não é mais tão distante como nos anos 90, isso graças a grande aceitação e
popularidade da Internet.
O AJAX simboliza a velocidade das aplicações standalone na Web. Tecnologicamente,

representa a união dos potenciais de ferramentas que separadas proviam melhorias em sites
Web. Grandes corporações com Google1 , Microsoft2 e Yahoo3 vêm aumentando a expectativa
do público sobre o que o AJAX pode fazer.
1.1 O que é AJAX
O termo AJAX foi usado pela primeira vez em fevereiro de 2005 com a publicação do
artigo Ajax: A New Approach to Web Applications de Garrett. Nesse ensaio, Garrett define
AJAX como um agrupamento das seguintes tecnologias: (X)HTML e CSS para apresentação
de conteúdo; Document Object Model para prover uma maneira comum de se acessar e alterar
objetos (X)HTML via Javascript; XML e XSLT para manipulação de dados; XMLHttpRequest
para recuperação assíncrona de conteúdo e JavaScript para unir todas as tecnologias [11].
A intenção inicial do AJAX é eliminar, ou minimizar, as interações síncronas com o

servidor Web, ou seja, uma aplicação tradicional exige a atualização completa da página a
cada solicitação feita ao servidor. Abaixo segue a ilustração dos modelos de sincronia das
aplicações Web.
1
http://www.google.com
2
http://www.microsoft.com
3
http://www.yahoo.com
1.1 O que é AJAX 23
Figura 2: Modelo de sincronia das aplicações Web tradicionais e AJAX. [11].
A Figura 2 mostra o modelo síncrono no gráfico superior, característico pelas seqüências

uniformes de intercâmbio de dados entre o lado cliente e o servidor. O gráfico inferior evidencia
que no modelo assíncrono a interface com o usuário não interage diretamente com o lado
servidor. A engenharia AJAX é responsável pela intermediação da troca de dados com o lado
servidor, possibilitando assim que a interface trabalhe independente da responsabilidade de
comunicação com o servidor.
No ciclo de vida de um aplicação Web clássica, existe uma interação estrita de requisição
e resposta entre o lado cliente e o servidor, ou seja, o usuário cria uma requisição clicando,
por exemplo, em um link e o navegador de Internet gera uma solicitação HTTP. Por sua
vez, o servidor recebe a requisição e a processa, gerando uma resposta que geralmente é um
documento (X)HTML. Portanto, o fluxo de dados para navegação é controlado apenas pelo
servidor, como mostra a Figura 3.
Figura 3: Ciclo de vida das aplicações Web clássicas [14].
Já no ciclo de vida de uma aplicação AJAX o navegador não fica limitado a tarefa
pura e simples de exibição do conteúdo recebido do servidor. O navegador de Internet passa
a participar diretamente do gerenciamento da aplicação, ou seja, controla eventos, executa
scripts e remodela páginas (X)HTML, como mostra a Figura 4. Nesse novo cenário, quando
o usuário inicia a aplicação o código gerado é entregue ao navegador, o qual permanece com
essa página durante toda a sessão com o usuário. A partir daí, por intermédio de ações
programáticas feitas em Javascript, o navegador faz os processamentos necessários (seja no
lado do cliente ou servidor), sem carregar um novo documento a cada requisição disparada
pelo usuário.
Figura 4: Ciclo de vida das aplicações AJAX [14].
Uma exemplificação objetiva de como as ações acontecem no modelo clássico de uma

página Web pode ser representada pelo seguinte cenário: um usuário digita um endereço de site
e o navegador retorna uma página que contém textos, imagens, links, formulários etc. Agora
imaginemos que o usuário queira efetuar uma busca. Ele digita alguns caracteres no campo
apropriado do formulário e pressiona o botão “buscar”. Conseqüentemente, o navegador envia
uma requisição para o servidor, que processa um script PHP e devolve uma nova página que
é aberta novamente no navegador do usuário.
A busca acima descrita poderia ser melhorada utilizando o AJAX para exibir e executar
as informações de acordo com o que é fornecido ao navegador, sem carregar toda a página
novamente. Isso seria possível graças a combinação das seguintes tecnologias: servidor Web,
(X)HTML, Javascript, XML e XMLHttpRequest.
Abaixo segue a descrição seqüencial de acontecimentos que o AJAX provê para executar
o exemplo de busca ilustrado na Figura 5:
1. o usuário acessa uma página Web de busca de cidades, digita os caracteres “são” no
campo apropriado do formulário e pressiona o botão “buscar”;
2. o Javascript, por intermédio do objeto XMLHttpRequest, invoca o script apropriado no

1.2 Por que usar AJAX 26
servidor para buscar no banco de dados as cidades que iniciam com a palavra “são”;
3. os resultados da busca são estruturados em um XML que é retornado ao Javascript,

novamente, por intermédio do objeto XMLHttpRequest;
4. por fim, o conteúdo XML é adicionado ao (X)HTML pelo Javascript.
Figura 5: Exemplo de utilização da tecnologia AJAX [15].
1.2 Por que usar AJAX
Tecnologicamente o AJAX representa muito dos potenciais não realizados na metodo-

logia clássica de programação para Web. Com AJAX, os usuários não precisam esperar que
toda a página seja processada a cada vez que uma ação é acionada no browser. Ele pode inte-
ragir com uma parte da página enquanto aguarda o retorno de outra. Com isso a navegação
torna-se mais eficiente, atrativa e literalmente lembra um programa standalone.
Uma característica das aplicações Web clássicas é a substituição desnecessária de con-

teúdo já carregado, que é conseqüência do grande acúmulo de dados no servidor, ou seja, tanto
para uma entrada pequena quanto para uma grande o servidor sempre processa e devolve o
conteúdo completo da página. Já com o uso do AJAX, existe uma considerável diminuição
do tráfego de dados na rede, diminuindo o uso de banda e tornando a navegação muito mais
1.2 Por que usar AJAX 27
rápida. A Figura 6 apresenta a comparação de dados acumulados em uma aplicação clássica

e AJAX.
Figura 6: Dados acumulados em uma aplicação clássica e AJAX [14].
O conjunto de tecnologias que compõe o AJAX é extremamente poderoso e não apre-

senta custo para utilização. Isso motiva a criação de aplicações com alta capacidade de in-
teratividade e usabilidade, expondo ao máximo a capacidade criativa dos desenvolvedores.
Basta observar o YouOs 4 , que é um sistema operacional Web com editor de texto, prompt de
comando, navegador Web, comunicador instantâneo e outras ferramentas.
Figura 7: YouOS - Sistema Operacional Web.
4
http://www. youos.com
1.3 Tecnologias envolvidas 28
1.3 Tecnologias envolvidas
O desenvolvimento para Web envolve principalmente dois grupos de profissionais: os

Webdesigners e os Programadores. Um grupo trabalha com a apresentação gráfica e multi-
mídia e o outro desenvolve as regras de negócio, tornando o tratamento de dados persistente.
Os Webdesigners, além da concepção visual, cuidam da codificação do HTML, que é uma
linguagem de marcação processada no browser. Os desenvolvedores utilizam linguagens de
programação processadas nos servidores, como ASP, Java, PHP etc.
Para as aplicações Web simples pode-se projetar uma arquitetura em que os clientes
utilizem um navegador para fazer requisições a um servidor Web, que localiza o arquivo soli-
citado e o devolve processado ao cliente. A forma mais usual de tratamento de dados do lado
do servidor é utilizando o tratamento dinâmica dos dados, ou seja, empregam-se técnicas mais
aprimoradas, como a utilização de banco de dados ou da linguagem de marcação XML, para
prover as alterações do conteúdo Web em tempo de execução.
Diversas tecnologias dão suporte ao conteúdo dinâmico de criação de páginas do lado

do servidor. A linguagem PHP e Java são duas delas, mas com abordagem e abrangência
distintas: a primeira utiliza o paradigma estruturado e a outra o orientado a objeto. Contudo,
independente do paradigma a programação para Web possui um amplo conjunto de tecnologias
[12], das quais podemos agrupar como básicos:
• Apresentação de conteúdo: linguagem HTML ou XHTML, que pode ser incrementada

com o uso do Javascript e CSS;
• Persistência de dados: banco de dados com suporte a alguma linguagem de programação

para Web. O MySQL é um dos mais utilizados;
• Programação: linguagem para tratamento dinâmico de dados. Entre as mais utilizadas

estão: ASP, PHP e Java.
O surgimento do AJAX ocorreu graças ao agrupamento de algumas dessas tecnologias

em torno de um protocolo de comunicação chamado XMLHttpRequest que realiza a comu-
nicação assíncrona entre a aplicação para a Internet e o servidor Web. Cada uma dessas
tecnologias possuem características distintas, mas quando agrupadas corretamente propor-
cionam ferramentas incríveis para a criação de páginas de Internet com conteúdo dinâmico
e interativo com o usuário. Nessa seção serão examinadas as principais características dos
componentes que fazem parte da tecnologia AJAX.
1.3.1 Servidor Web
Servidor Web pode ser designado como um computador composto de hardware e softwa-
res específicos ou um programa de computador o qual é responsável por aceitar e respon-
der requisições de outras aplicações realizadas através do protocolo HTTP. Essas requisições
referem-se habitualmente a páginas de Internet e são feitos normalmente através de browsers
[16].
Essas requisições ocorrem quando uma página de Internet necessita de alguma informa-
ção. Ela então o solicita ao servidor Web o qual recebe o pedido, processa e devolve os dados
necessários para a exibição correta do site. Por essa razão o servidor Web é de fundamen-
tal importância para o desenvolvimento de aplicativos para a Internet, sem ele não haveria
a possibilidade de linguagens com o PHP e Perl existirem, pois são processadas dentro do
servidor.
Atualmente os servidores Web mais utilizados são o Apache desenvolvido pelo grupo
Apache com 58.62% (cinqüenta e oito ponto sessenta e dois por cento) e o Internet Information
Services (IIS) desenvolvido pela Microsoft com 31.02% (trinta e um ponto zero dois por cento)
do mercado de servidores Web do mundo [17].
A tecnologia AJAX não exige um servidor Web específico, assim o desenvolvedor tem a
liberdade de escolher um de sua preferência, desde que esse tenha suporte as diversas linguagens
de programação que compõem o AJAX. Nesse contexto destaca-se o Apache, que além de ser
o mais utilizado possui inúmeros recursos, dentre os quais destacam-se [18][19]:
1. Altamente configurável e desenvolvido em módulos. É extremamente fácil estender as

capacidades do Apache. Qualquer desenvolvedor que tenha conhecimento na linguagem
de programação C ou Perl pode escrever módulos para executar funções especiais dentro
do servidor;
2. Tecnologia livre e de código aberto. Dentre essas característica a fundamental é o código

aberto, possibilitando a contribuição de programadores de todo o mundo, e sendo livre
qualquer pessoa pode utilizá-lo sem a necessidade de pagar algo por isso;
3. Compatibilidade com PHP, Perl e outras linguagens em script. A maioria das aplicações
Web ainda são escritas em script, o que torna perfeita a integração com o Apache;
4. Compatibilidade com Linux e outros Sistemas Operacionais. A aceitação do Linux no

mundo empresarial facilitou a entrada do Apache tornando ambos uma combinação
poderosa. Outros sistemas operacionais como o UNIX, o FreeBSD, o Mac OS X e
o Solaris possuem também grande papel, ampliando assim o número de usuários que
utilizam o Apache;
5. Suporte para o protocolo HTTP 1.1. O Apache foi um dos primeiros servidores a serem
compatíveis com a versão 1.1 do protocolo HTTP. Essa nova versão possibilita que uma
conexão seja estabelecida para enviar várias requisições em seqüência sem a necessidade
de esperar por cada resposta;
6. Arquivo de configuração customizável às necessidades do usuário. Todas as configurações

do Apache estão centralizadas em um único arquivo chamado http.conf, o qual pode ser
alterado facilmente;
7. Suporte para CGI. Importante tecnologia que permite gerar páginas dinâmicas e passar
parâmetros para um programa alojado em um servidor Web;
8. Suporte para FastCGI. Possui as mesmas características da tecnologia CGI, contudo são
mais persistentes, ou seja, quando uma aplicação em FastCGI estabelece uma conexão
com um banco de dados ela a mantém para todos os pedidos subseqüentes;
9. Suporte para Hosts Virtuais. Um host representa um computador ou outra máquina co-
nectado a uma rede, sendo assim Hosts Virtuais representam endereços de computadores
virtuais que não existem fisicamente;
10. Suporte para Java Servlet, possibilitando que página de Internet criadas com a tecnologia
Java Servlet sejam executadas;
1.3.2 HTML e XHTML
HTML é uma linguagem de marcação utilizada para estruturação e apresentação vi-

sual de documentos em um browser. Esses documento podem ser compostos por conteúdo e
informações de como esse será apresentado, assim uma página de Internet em HTML pode
conter textos, imagens entre outros elementos e informações sobre a forma de como serão
apresentados ao usuário [20].
O principal elemento do HTML, assim como nas linguagens de marcação, são as tags.
Elas são rótulos usadas para informar ao navegador como deve ser apresentado o site, todas
possuem o mesmo formato, começam com um sinal de menor "<" e terminam com o sinal
de maior ">". Existem dois tipos de tags: de abertura (<comando>) e a de fechamento
(</comando>). Existem ainda elementos que são constituídos de uma única tag, nesse caso
a deve-se usar o seguinte formato: (<comando / >)[21].
Todos os documentos escritos em HTML são divididos em três partes: delimitação do

documento, cabeçalho e corpo. Essa estrutura pode ser observada na Figura 8, cada um desses
elementos serão descritos a seguir:
1. Delimitação do documento. São usadas as tags <html> e </html> para delimitar a

estrutura do documento, assim todas os demais elementos serão inseridos entre elas.
2. Cabeçalho. É composto das tags <head> e </head>, vários elementos são inseridos
entre elas, como a de título <title></title>.
3. Corpo. Formado pelas tags <body> e </body>, agrupam os demais elementos que não
são inseridos dentro do cabeçalho, formando assim o corpo do documento.
Figura 8: Estrutura básica de um documento HTML
XHTML é a abreviação de Linguagem Extensível de Marcação de Hipertexto e repre-

senta uma reformulação da linguagem HTML baseada em XML. Ela utiliza as tags do HTML
com regras do XML, esse processo de padronização tem em vista tornar o conteúdo portável
a outros dispositivos, tais como telefones celulares [22].
Criada para ser uma linguagem de conteúdo em conformidade com o XML ela segue
algumas diretrizes simples de compatibilidade com o HTML 4. Sua primeira versão a 1.0 foi
disponibilizada em 26 de janeiro de 2000 pela W3C [23].
As vantagem que mais se destacam no uso do XHTML é a compatibilidade com futuras

aplicações, permitindo que documentos criados usando essa linguagem se tornem estáveis por
longos anos, pois atualmente a tendência é que futuras versões dos browsers deixem de suportar
elementos e atributos que estão em desuso no HTML. Também vale ressaltar as seguintes
vantagens [24]:
1. É uma linguagem de código consistente, em conformidade com o XML;

2. Possui uma escrita limpa e evidente;
3. O tempo de carregamento de uma página XHTML é menor;
4. Uma página XHTML tem compatibilidade maior com os browsers e outros aplicações,
incrementando interoperabilidade e portabilidade aos documentos Web.
Existem algumas diferenças do XHTML em relação ao HTML, isso se deve a padroni-

zação exigida na linguagem pelo XML. Entre as diferenças vale ressaltar [24]:
1. Todas as tags devem ser escritas com letras minúsculas. O XML é uma linguagem
case-sensitive e como o XHTML possui características do XML, também herdou essa
propriedade;
2. Os documentos devem estar bem formatados. Todos os elementos XHTML devem estar
corretamente aninhados dentro do elemento raiz <html ></html >;
3. O uso do fechamento das tags é obrigatório. O HTML permitia em determinadas cir-

cunstâncias a omissão do fechamento de algumas tags, o que não é permitido no XHTML;
4. Os elementos vazios devem ser fechados. Todos os elementos vazios devem ter tags de
fechamento ou a tag de abertura deve terminar com "/>";
5. Diferenças nos atributos. Assim como as tags, os atributos também são case-sensitive,
desta forma todos os atributos devem ser escritos com em letras minúsculas;
6. Pontos de âncoras. No HTML elas são determinadas atribuindo um nome, já no XHTML

deve-se atribuir uma identificação chamado de id ;
7. Em XHTML o uso do atributo alt para todas as imagens é obrigatório. Caso for uma
imagem decorativa, deve-se usar o atributo alt vazio;
8. Caracter "&" deve vir acompanhado das letras "amp" sendo a sua forma correta "&amp";
9. É obrigatório a declaração do elemento DOCTYPE, bem como dos elementos <html>,

<head>, <title> e <body>;
1.3.3 CSS
CSS é uma linguagem de estilo utilizado para definir a apresentação de documentos

feitos em linguagens de marcação como o HTML, XHTML e XML. Ela controla fontes, cores,
margens, linhas, alturas, larguras, imagens de fundo, posicionamento dos elementos além de
outras características, possibilitando assim separação entre o conteúdo e a formatação do
documento [25].
Originalmente a linguagem HTML era utilizada somente para estruturação e apresenta-

ção de documentos, mas com o decorrer dos anos a necessidade de um visual mais aprimorado
nos sites foi intensificado e novos elementos foram adicionados a linguagem tais como a tag
<font> que controla cor, o tipo e o tamanho da fonte do texto [25].
Apesar desses novos recursos serem interessantes, a dificuldade na criação e manuten-

ção de páginas HTML foi evidente, isso devido ao fato do conteúdo estar misturado com a
apresentação do documento. Havia então a necessidade da criação de uma linguagem que
separasse o conteúdo da apresentação, culminando assim no surgimento do CSS que significa
Folha de Estilos em Cascata [26].
A sintaxe da linguagem CSS é muito simples como pode ser observada na Figura 9
sendo dividida em três elementos principais:
1. Seletor - Define em qual tag será aplicado a nova propriedade. Exemplo: "body";
2. Propriedade - Define qual atributo será modificado. Exemplo de modificação do plano

de fundo de uma página HTML: "background-color";
3. Valor - Define o novo valor da propriedade. Exemplo a cor vermelha: "#FF0000";
Figura 9: Sintaxe da linguagem CSS
Existem três formas de aplicar os estilos CSS a um documento HTML:
1. In-line. O estilo é adicionado diretamente na tag HTML através do atributo style.

Exemplo: <body style="background-color: #FF0000;">;
2. Tag style. O estilo é adicionado entre as tags "<style ></style>". Exemplo: <style
type="text/css"> body {background-color: #FF0000;} </style>;
3. Externo. O método mais recomendado é criar um arquivo com a extensão ".css" contendo
todos os estilos a serem aplicados ao documento e adicionar a referência para esse entre as
tags <head > e </head > do HTML. Exemplo: <link rel="stylesheet"type="text/css"
href="estilo.css"/>.
O uso do CSS em páginas de Internet traz muitos benefícios, pois além de permitir a
separação entre conteúdo e apresentação possibilita a formatação de vários documentos a partir
de uma simples folha de estilo, assim como uma maior precisão no controle da formatação,
tornando essa linguagem uma ferramenta indispensável no desenvolvimento de sites.
1.3.4 XML
XML é uma linguagem de marcação capaz de estruturar, organizar e descrever docu-

mentos que podem conter diversos tipos de dados. Apesar de ser uma linguagem de marcação
como o HTML ela possui uma característica própria que a difere das demais, a ausência de tags
pré-definidas, assim o próprio programador tem a liberdade de definir suas próprias tags[27].
A sintaxe do XML é muito simples devido a possibilidade da criação das tags. A criação
de um arquivo deve seguir quatro regras simples, o resultado por ser observado na Figura 10:
1. Cabeçalho. É obrigatório sua declaração, o qual contém a versão do XML e a codificação

dos caracteres. Exemplo: <?xml version="1.0" encoding="UTF-8"?>.
2. Tag de abertura e fechamento. Assim como no HTML, mas de forma obrigatória toda
tag de abertura deve ter uma de fechamento. Exemplo: <comando> </comando>.
3. Tag raiz. É obrigatório sua declaração, pois todas as demais tags estarão dentro dela.
4. Tag sub raiz. É obrigatório sua declaração quando o documento contém diversas infor-
mações com a mesma estrutura. Exemplo: Figura 11.
Apesar de ser uma excelente linguagem o XML não é um substituto para o HTML pois
cada uma tem utilizações distintas. Enquanto o XML estruturas os dados, o HTML formata
e exibe os mesmos em uma página de Internet [27].
A utilização do XML é muita ampla e está crescendo cada vez mais, dentre essas
destacam-se [28]:
Figura 10: Estrutura de um documento XML
1. Separação de dados do código HMTL. Através do XML a apresentação do documento é

separado dos dados, assim modificações futuras podem ser feitas facilmente, pois estarão
localizadas em um só arquivo;
2. Troca de dados. A troca de informações entre sistemas distintos pode ser facilmente
implementada com o XML, fazendo com que diversas aplicações possam ler esses dados;
3. Criação de novas linguagens. Por ser uma metalinguagem, existe a possibilidade de criar
novas linguagens a partir dela como a WAP e WML, destinadas a aparelhos portáteis
como telefones celulares;
1.3.5 Javascript
Javascript é uma linguagem em script destinada a tornar páginas HTML dinâmicas.

Por ser uma linguagem do lado do cliente, ou seja, executada dentro do browser, permite uma
maior interatividade com o usuário, pois não depende do servidor Web para executar suas
funções.
Por permitir essa interatividade existem diversas utilizações para o Javascript, que vão
desde uma simples saudação quando um site é carregado até validação de formulários, criação
de menus, criação dinâmica de elementos dentro do código HTML e a orientação a objeto.
O código em Javascript assim como em outras linguagens em script é embutido dentro

da página HTML de duas formas:
1. O código Javascrit é embutido diretamente no HTML através das tags:

Figura 11: Exibição de documento XML
• <script language="javascript"> </script>;
• <script type="text/javascript"> </script>;
• <script type="text/javascript" language="javascript"> </script>
2. O código Javascript é utilizado em páginas HMTL através de um arquivo externo com

a extensão ".js", o qual é referenciado através da propriedade "src" da tag <script> da
linguagem HTML definindo assim o caminho onde esse arquivo esta localizado:
• <script type="text/javascript" src="nomeArquivo.js"> </script>;
• <script language="javascript" src="nomeArquivo.js"> </script>;
• <script language="javascript" type="text/javascript" src="nomeArquivo.js">

</script>
Os recursos disponíveis no Javascript tornam a linguagem uma ferramenta extrema-

mente importante e versátil na construção de aplicativos Web, dentre os mais importantes
estão [29]:
1. Controle do conteúdo. Com um simples comando "document.write(’texto a ser inse-

rido’)" o Javascript pode adicionar textos dinamicamente em páginas HTML;
2. Tratamento de eventos. Permite que eventos possam ser adicionados as páginas de

Internet. Exemplo: quando um botão é acionado pelo usuário o Javascript pode executar
um código pré-definido pelo desenvolvedor para essa ação;
3. Pode ler e alterar elementos em HTML. Isso é possível através do atributo id

que define o elemento como único dentro da página de Internet. Especificadamente o
comando usado é o "document.getElementById(’idElemento’)", e para modificá-lo usa-se
"innerHTML", onde "idElemento" será definido pelo programador;
4. Validação de formulários. O procedimento de verificação das informações antes de se-

rem submetidas ao servidor é extremamente importante, evitando assim muitos erros e
processamento extra;
5. Identificação do browser. Essa funcionalidade do Javascript é muito importante pois ao

detectar qual o browser que o usuário está usando o programador pode pré-determinar
qual código será executado, dependendo da compatibilidade com a linguagem;
6. Controle de cookies. Pode-se guardar informações sobre cada visita do usuário a deter-
minada página de Internet;
1.3.6 Recuperação assíncrona de dados
XMLHttpRequest é um objeto que permite a um código Javascript enviar e receber

dados do servidor Web sem a necessidade de recarregar todo o conteúdo do site. Desta ca-
racterística vem o termo Asynchronous do AJAX (Asynchronous Javascript and XML) ou
Assíncrono em língua portuguesa, pois não há a necessidade de sincronia no carregamento dos
dados com o da página de Internet.
Originalmente implementado no Internet Explorer 5, lançado em 1999, como um com-

ponente do Active X, o XMLHttpRequest só funcionava no browser da Microsoft, impedindo
que a maioria dos desenvolvedores o utilizassem. Posteriormente o padrão foi adotado pelo
Mozilla 1.0 e Safari 1.2 e hoje a maioria dos Navegadores tem suporte a essa tecnologia [30].
Antes de poder usar o objeto XMLHttpRequest é necessário criá-lo, mas como esse não
é um padrão da W3C cada Navegador tem uma implementação diferente. O Internet Explorer
o implementa como um objeto ActiveX e outros Navegadores como o Firefox, NetScape, Opera
e Safari como um objeto nativo do Javascript [30].
Para que esse problema seja contornado não existe a necessidade de identificar qual o
Navegador do usuário, apenas é verificado se esse tem suporte ao ActiveX. Caso tenha, deve-
se criar o objeto XMLHttpRequest através do ActiveX, caso contrário ele é criado usando a
técnica de objeto nativo do Javascript [31]. Processo simples o qual é demonstrado na Figura
12:
Figura 12: Criação do Objeto XMLHttpRequest
O fragmento de código da Figura 12 é responsável por verificar se o browser tem suporte

a tecnologia AJAX.
1.3.7 Linguagem de programação e banco de dados
O Javascript oferece ao programador uma infinidade de ferramentas que possibilitam a

criação de sites dinâmicos e interativos, mas apesar disso não tem suporte a banco de dados,
limitando a recuperação de informações dentro de um servidor Web. Para solucionar esse
problema o AJAX recupera os dados através da linguagem XML, porém essa também não
tem acesso a banco de dados. Para resolver todos esses problemas é necessário a utilização de
uma linguagem que possui esse suporte para criar dinamicamente um arquivo XML.
Existem várias linguagem de programação e banco de dados que podem ser utilizados
para a criação de arquivos XML dinâmicos, assim o desenvolvedor pode optar por linguagens
como o Java, ASP, PHP entre outras, assim também pode optar por qualquer banco de dados
para armazenar as informações como o PostgreSQL, MySQL, Oracle entre outros. Nesse
contexto são utilizados a linguagem de programação PHP e o banco de dados MySQL, os
quais possuem vários recursos na criação de sites, além de serem gratuitos e de fácil utilização.
PHP
PHP é uma linguagem em script Open Source muito utilizada em aplicativos Web.
Diferente de outras linguagens executadas no lado do cliente, ou seja, dentro do browser como
o Javascript, ela é executada dentro do servidor Web, possibilitando entre outras funções o
acesso a banco de dados característica que o Javascript não possui [32].
A sintaxe do PHP é de fácil compreensão como pode ser observada na Figura 13 pois
possui características de linguagens conhecidas como o C e Perl. Todo código pode ser embu-
tido dentro ou fora do código HTML, mas para ser reconhecido pelo servidor o arquivo deve
ter uma das extensões do PHP como por exemplo ".php", também deve ser delimitado por
duas tags que possuem quatro formas distintas [33]:
1. <?php ?>;
2. <? ?>;
3. <script language="php"> </script>5 ;
4. <% %>.
Figura 13: Sintaxe da básica da linguagem PHP
Uma das principais características da linguagem é o suporte a vários banco de dados,

permitindo assim o envio e recebimento de informações para a geração de páginas com conteúdo
dinâmico [34]. Além dessa característica o PHP destaca-se nas seguintes áreas [35]:
1. Linguagem gratuita. Não existe custo na utilização do PHP;
2. Código Aberto (Open Source). Por ser uma linguagem de código aberto o PHP pode
receber contribuições de desenvolvedores de todas as partes do mundo;
3. Licença GNU. Esta licença garante que o PHP seja distribuído e utilizado livremente
por todas as pessoas;
4. Fácil de usar. É considerada uma linguagem de fácil aprendizagem comparado com

outras linguagens, lembrando muito a sintaxe do C, Java e Perl;
5
Nessa forma o código escrito em PHP só é executado se estiver dentro da tag <head> do HTML.
5. Compatível com várias plataformas. O PHP pode ser executado em plataformas Win-
dows, UNIX e inclusive em Mac OS X. Além disso é compatível com os três principais
servidores Web, o Apache, o Microsoft Internet Information Server e o Netscape Enter-
prise Server;
6. Estabilidade. É considerável extremamente estável, principalmente quando é utilizado

com servidor Apache;
7. Velocidade. Extremamente veloz, principalmente quando é executado com o servidor

Apache;
MySQL
MySQL é um servidor e gerenciador de banco de dados (SGBD) completo, robusto e
extremamente rápido que utiliza a linguagem SQL como interface, projetado inicialmente para
trabalhar com aplicações de pequeno e médio porte, hoje atende também aplicações de grande
porte.
Inicialmente o MySQL enfrentou algumas dificuldades de aceitação pelo fato de não

possuir algumas funcionalidades da linguagem SQL, no entanto isso logo foi contornado pelo
fato de ser de livre uso, muito veloz e de fácil utilização, além de várias tecnologias como o
PHP, Java, Perl darem suporte a ele. O Mysql tem evoluído muito, algumas funções que nas
primeiras versões não existiam foram adicionadas, como os subselects e chaves estrangeiras que
apareceram a partir da versão 4.1 [36]. Atualmente ele encontra-se na versão 5.2.3 lançada
em 15 de fevereiro de 2007 [37] .
O Mysql possui muitas características que o tornam um dos bancos de dados mais
aceitos e utilizados em sites, principalmente por integrar-se perfeitamente com o PHP. Também
vale ressaltar as seguintes características[38]:
1. Portabilidade. Desenvolvido utilizando as linguagens de programação C e C++ que

unido com o uso de GNU Automake, Autoconf e Libtool, torna o MySQL uma aplicação
altamente portável entre diferentes sistemas, plataformas e compiladores. Além disso,
fornece sua API para várias outras linguagens, como Java, Python, PHP, Perl, C, C++,
entre outras.
2. Multithreads. Usa a programação de threads que utilizando-as diretamente no kernel do

sistema operacional aumenta significativamente sua velocidade de processamento.
3. Segurança. Sistema gerenciador de conexões que trabalha com criptografia no tráfego

de senhas, possibilitando ainda habilitação de uma espécie de firewall de autenticação.
4. Velocidade. Maior rapidez no acesso aos dados em razão de vários fatores em seu de-
senvolvimento, tais como tabelas ISAM, além de caches para consultas e utilização de
algoritmos de busca.
2 AJAX na prática
A programação AJAX oferece ao desenvolvedor inúmeros recursos para a criação de

sites interativos. Porém, é de fundamental importância o domínio das tecnologias que compõe
essa técnica.
Neste capítulo, será desenvolvido um código que recupera de forma assíncrona infor-
mações básicas sobre os livros de uma biblioteca fictícia. Para obtenção de um resultado
satisfatório cada seguimento do desenvolvimento será analisado de forma detalhada, permi-
tindo assim uma melhor compreensão do exemplo proposto.
2.1 Criação do banco de dados
O primeiro procedimento que deve ser realizado é a criação do banco de dados como
pode ser observado no script SQL da Figura 14. O comando "create database" é responsável
por criar o banco de dados "biblioteca".
Figura 14: Script SQL para a criação do banco de dados "biblioteca"
Criação da tabela principal

O passo seguinte é a criação da tabela principal, a qual terá a função de armazenar
toda a estrutura de dados pertinente aos livros, como código, título, autor, editora, cidade,
estado, país e ano de lançamento. O script SQL responsável pela criação da tabela "livros"
pode ser observado na Figura 15.
2.1 Criação do banco de dados 43
Figura 15: Script SQL para a criação da tabela "livros"
Na criação da tabela "livros" (Figura 15) foram utilizados vários comandos da lingua-
gem SQL, os quais serão analisados a seguir:
1. "CREATE TABLE". Comando utilizado para criar uma tabela em um banco de dados.
2. "varchar" e "int". Esses comandos definem o tipo do dado dos campos da tabela.
O primeiro comando (varchar ) permite que qualquer caracter seja inserido no campo,
podendo esse ser composto de números, letras ou símbolos, o segundo comando (int)
permite que somente números inteiros sejam inseridos no campo.
3. "NOT NULL". Esse comando não permite que o campo tenha o valor nulo.
4. "PRIMARY KEY". Define a chave primária da tabela, ou seja, um campo que é definido
como primary key não pode ter seu valor repetido tornando-se assim único.
Inserção dos dados

Para que seja possível a recuperação das informações dos livros é necessário antes inseri-
las na tabela "livros" (Figura 15). Esse processo de inserção de dados é realizado de maneira
simples através do comando "insert", como mostra o script SQL da Figura 16.
Figura 16: Script SQL para a inserção de dados na tabela "livros"
A estrutura básica para a inserção dos dados em uma tabela é definido a seguir:
• insert into nome_da_tabela (campos_da_tabela) values (valores_a_serem_inseridos);

2.2 Criação do XML dinâmico 44
2.2 Criação do XML dinâmico
Para que o AJAX recupere as informações referente aos livros é necessário a criação de
dois arquivos XML dinâmicos. Para isso, utilizaremos a linguagem PHP. O primeiro arquivo
nomeado de "lista_livros.php" é responsável pela recuperação do "título" e "código" do livro,
os quais serão inseridos dinamicamente no componente "combobox" da página principal (Figura
25). O segundo arquivo nomeado de "detalhe_livros.php" é responsável pela recuperação de
todas as informações referentes ao livro selecionado no componente "combobox" da página
principal. Os detalhes de cada livro são exibidos em uma tabela que é carregada dinamicamente
no centro da página.
O script para a criação do arquivo "lista_livros.php" será dividido em 2 (duas) partes

para uma melhor compreensão. A primeira parte do código compreende as linhas 1 à 13
(Figura 17) e possuem as seguintes funções:
1. Linha 1. Tag de abertura do script em PHP ("<$php");
2. Linhas 3 e 4. O comando "mysql_connect(’local_do_servidor’,’usuario’,’senha’)" esta-

belece a conexão com o servidor de banco de dados MySQL, armazenando os parâmetros
de conexão na variável "$con";
3. Linhas 6 e 7. O comando "mysql_select_db(’banco_de_dados’, ’conexão’)" é responsá-

vel por selecionar a base de dados a ser utilizada, inserindo esses parâmetros na variável
"$db";
4. Linha 9. O comando "select" é responsável por selecionar os dados de uma ou mais

tabelas. A variável "$sql" recebe o parâmetro da busca "select codigo, titulo from livros",
isso significa que serão selecionados o código e título do livro na tabela "livros";
5. Linha 11. O comando "mysql_query" tem a função de executar um comando da lin-

guagem SQL, nesse contexto o comando da variável "$sql" do item acima é executado e
seu resultado é armazenado na variável "$sql_res";
6. Linha 13. O comando "mysql_num_rows" retorna o número de livros selecionados,

inserindo essa quantia na variável "$row";
A segunda parte do código compreende as linhas 15 à 37 da Figura 18 e sua função é

criar o arquivo XML dinamicamente, as quais são detalhadas a seguir:
2.2 Criação do XML dinâmico 45
Figura 17: Fragmento de código do arquivo "lista_livros.php".
1. Linha 15. O comando "if" verifica se a variável "$row" possui algum valor. Caso pelo
menos 1 (um) livro tenha sido selecionado, o bloco de código compreendido entre as
linhas 17 e 33 é executado;
2. Linhas 17 e 18. Todo o código gerado para a criação do arquivo XML dinâmico é arma-
zenado dentro da variável "$xml". Nessas duas linhas foram adicionados o cabeçalho e
a tag raiz do XML;
3. Linha 20. O comando "for" é responsável por criar uma repetição dos comandos entre as
linhas 22 a 28. Esse processo é repetido até que os dados de todos os livros selecionados
sejam adicionados à variável "$xml";
4. Linhas 22 e 23. O comando "mysql_result" é responsável por extrair os dados contidos

na variável "$sql_res" e inseri-los nas variáveis "$codigo" e "$titulo";
5. Linhas 25 a 28. São responsável pela criação das tags que conterão os dados dos livros;
6. Linhas 31 e 33. A tag raiz é fechada na linha 31 e o cabeçalho de todo o documento é

inserido na linha 33, definindo o tipo de codificação e que se trata de um arquivo XML;
7. Linha 36. O comando "echo" é responsável pela visualização de todo o arquivo XML
dinâmico;
8. Linha 37. Tag responsável pelo fechamento do script PHP.
O script para a criação do arquivo "detalhe_livros.php" possui praticamente as mesmas

características do arquivo "lista_livros.php", com exceção de alguns comandos adicionais os
quais passamos a detalhar:
1. Linha 3. O comando "$cod = $_POST[’codigo’]" é responsável por receber o código do

livro e inseri-lo dentro da variável "$cod";
2.3 Criação do HTML 46
Figura 18: Fragmento de código do arquivo "lista_livros.php".
2. Linha 11. O código do livro é adicionado ao parâmetro de pesquisa, assim somente o

livro que possui esse código é selecionado;
2.3 Criação do HTML
O arquivo HTML é responsável pela apresentação das informações ao usuário. Esse

também contém referências para os arquivos externos com os códigos em Javascript e CSS.
Para uma melhor compreensão dos principais elementos que compõem o arquivo HTML,
esse foi dividido em 3 (três) blocos, os quais serão analisados a seguir:
1. Primeiro bloco compreende as linhas 1 a 20 (Figura 19):
• Linha 1 e 2. Definição do tipo do documento HTML;
• Linha 3 e 4. Definição das tags <html> e <head>;
• Linhas 5, 6 e 7. Definição das referências para os arquivos externos que serão

utilizados;
• Linhas 8 a 18. Definição do código Javascript, o qual verifica a compatibilidade do

navegador com a tecnologia AJAX.
• Linha 19. Definição do título do documento;
• Linha 20. Fechamento do cabeçalho do documento;
2. O segundo bloco compreende as linhas 21 a 26 (Figura 20):

2.4 Criação do CSS 47
• Linha 21. Definição da tag <body> e do evento "onload". Toda vez que o docu-
mento é carregado o método definido nesse evento é executado.
• Linhas 22 a 26. Essa estrutura é responsável por criar o componente "combobox"
que receberá dinamicamente o "título" e o "código" do livro.
3. Terceiro bloco compreende as linhas 27 à 61 (Figura 21):
• Linhas 27 a 59. Definição da estrutura da tabela que receberá as informações do

livro selecionado.
• Linha 60. Fechamento do corpo do documento.
• Linha 61. Fechamento do documento HTML.
Figura 19: Primeiro bloco de código do arquivo XHTML "index.html".
Figura 20: Segundo bloco de código do arquivo HTML "index.html".
2.4 Criação do CSS
O código CSS utilizado (Figura 22) é responsável por alguns efeitos na página principal,
como pode ser observado nas Figuras 25 e 26. A tabela contendo os dados dos livros não é
visível logo no início, mas ao ser selecionar-se algum livro os dados aparecem automaticamente.
Esse efeito é realizado através da propriedade "visibility" do CSS que define a visibilidade dos
elementos, a qual é alterada pelo Javascript.
2.5 Criação do Javascript 48
Figura 21: Terceiro bloco de código do arquivo HTML "index.html".
2.5 Criação do Javascript
O Javascript tem a finalidade de recuperar as informações do arquivo XML através

do protocolo XMLHttpRequest e inseri-las dinamicamente na página principal. Foram criados
dois arquivos Javascript com finalidades diferentes:
• Arquivo "option_livro.js". O código desse arquivo (Figura 23) é responsável por retirar
as informações do XML criado dinamicamente (Figura 17 e 18) e inseri-los dentro
do componente "combobox" (Figura 25). O primeiro bloco de código (linhas 1 à 17 da
Figura 23) é responsável por recuperar as informa do arquivo "lista_livros.php", já o
segundo bloco (linhas 18 à 32 da Figura 23) é responsável por inseri-las dinamicamente
no componente "combobox" na página principal (Figura 25).
• O arquivo "detalhe_livro.js" (Figura 24) tem a função de buscar os dados do livro

selecionado e inseri-los dentro da tabela do arquivo "index.html" (Figura 26). O primeiro
bloco de código (linhas 01 à 17 da Figura 24) funciona de forma quase idêntica ao descrito
no item anterior, a única diferença é o envio de um parâmetro através do método "send"
do protocolo XMLHttpRequest, o qual tem a função de enviar o código do livro à página
2.6 Resultado final 49
Figura 22: Criação do arquivo CSS "estilo.css".
"detalhe_livro.php", retornando assim somente as informações desejadas.
Figura 23: Script do arquivo "option_lista.js".
2.6 Resultado final
Por meio da implementação proposta obtém-se uma aplicação que recupera dinamica-
mente as informações sobre os livros de uma biblioteca. A Figura 25 apresenta o componente
"combobox" o qual possui uma lista de todos os livros cadastrados no banco de dados. Ao
selecionar um desses livros a tecnologia AJAX encarrega-se de recuperar dinamicamente as
informações, exibindo-as em uma tabela, conforme mostra a Figura 26.
Figura 24: Script do arquivo "detalhe_lista.js".

Figura 25: Arquivo principal "index.html".
Figura 26: Dados na tabela inseridos dinamicamente

3 Aplicativos de comparação
A comparação entre a programação AJAX e a tradicional é demonstrada por intermé-

dio de duas implementações semelhantes, as quais simulam parte do módulo de cadastro de
produtos de um e-commerce. As aplicações foram desenvolvidas em duas versões - um com
AJAX e outro sem - e submetidas a avaliação do internauta de 01/02/2007 até 23/02/2007
no endereço eletrônico http://www.wannd.com.
3.1 Delimitação do módulo implementado
O e-commerce escolhido como base para a implementação das duas versões do módulo
de comparação da programação AJAX e tradicional foi um supermercado. Trata-se de prover
um ambiente Web para cadastro e apresentação de produtos, conforme descrito a seguir:
1. Cadastro de grupos e subgrupos de produtos, com geração dinâmica de menu. Assume-se

que todo item cadastrado é agrupado em grupos e subgrupos de produtos semelhantes, ou
seja, uma mercadoria chamada "Vinho Tinto Real" pode pertencer ao subgrupo vinhos
que, conseqüentemente, integra o grupo bebidas. Esse princípio é de fundamental
importância para facilitar a localização de um item cadastrado, uma vez que os grupos
e subgrupos corresponderão, respectivamente, aos menus e submenus do site;
2. Cadastro de produtos. As informações solicitadas são básicas e objetivam subsidiar

dados para a apresentação dos itens na página de exibição de produtos. Dados neces-
sários ao cadastro de um produto: grupo e subgrupo a que pertence, preço, quantidade
em estoque, nome, chamada que aparecerá em destaque na tela de exibição e descrição
detalhada;
3. Exibição dos itens cadastrados na página principal do site. Todo item incluído é apre-
sentado na tela principal do site, possibilitando a visualização dos seguintes atributos:
imagem ilustrativa (quando cadastrada e atribuída ao produto), chamada de destaque e
preço;
3.1 Delimitação do módulo implementado 53
Os demais detalhes referentes ao módulo implementado são apresentados no diagrama

Use Case e DER da seção seguinte, bem como nas Figuras do anexo A.
3.1.1 Diagrama de Entidade de Relacionamento e Use Case
Figura 27: Diagrama de Entidade de Relacionamento do aplicativo OurMarket.
Abaixo segue a significação de cada tabela da Figura 27:
1. Privilegio: separa os usuários em níveis de acesso. Exemplo: usuário, administrador,

etc.;
2. Pagina: armazena um identificador para cada página que compõe o sistema;
3. Privilegio_acessa_Paginas: define quais páginas podem ser acessadas por cada privi-
légio. Exemplo: usuário tem permissão para acessar a página de id (identificador da
página) número 1 e 2;
4. Usuario: armazena os usuários cadastrados no sistema;
5. Imagem: representa as imagem de materiais;
6. Produto: armazena os dados dos produtos cadastrados;
7. Grupo: define um grupo de produtos semelhantes. Exemplo: arroz;
8. Subgrupo: representa outro nível dentro do grupo;
Figura 28: Diagrama de Caso de Uso do aplicativo OurMarket.
Caso de Uso Gerenciar Produto:
Pré-condição: o ator deve estar logado
1. O ator inicia o Caso de Uso escolhendo a opção "Cadastros base" ou logando no sistema;
2. O sistema oferece uma interface para cadastro e lista os materiais já cadastrados logo
abaixo;
3. O ator seleciona um grupo e subgrupo para o produto. Informa um nome, uma descrição
detalhada, uma chamada que irá aparecer na tela principal e o valor e seleciona salvar; [A1,
A2]
4. O sistema emite uma mensagem de confirmação da operação e finaliza o Caso de Uso; [A3]
Fluxo alternativo A1 - Atualizar produto
3. O ator escolhe um produto e seleciona a opção de alterar;

4. O sistema oferece uma interface para edição do produto. Retorna ao passo 3 do Fluxo
Básico;
Fluxo alternativo A2 - Excluir produto
3. O ator escolhe um produto e seleciona a opção de excluir;

4. O sistema solicita confirmação da decisão de excluir. Retorna ao passo 4 do Fluxo Básico;
Fluxo alternativo A3 - Erro
4. O sistema emite uma mensagem com os erros encontrados;

5. O Caso de Uso é finalizado sem executar a ação selecionada;
Caso de Uso Gerenciar Grupo:
1. O ator inicia o Caso de Uso escolhendo "Novo", da subopção "Produtos", da opção

"Cadastros base"; [A1, A2, A3]
2. O sistema oferece uma interface para cadastro e lista os produtos cadastrados abaixo;
3. O ator informa um nome e uma descrição para o grupo e seleciona salvar; [A4, A5]
Fluxo alternativo A4 - Atualizar Grupo
3. O ator escolhe um grupo e seleciona a opção de alterar;

4. O sistema oferece uma interface para edição. Retorna ao passo 3 do Fluxo Básico;
Fluxo alternativo A5 - Excluir grupo
3. O ator escolhe um grupo e seleciona a opção de excluir;

Fluxo alternativo A1 - Incluir subgrupo:
1. O ator inicia o Caso de Uso escolhendo escolhendo "Subgrupo", da subopção "Produtos",

da opção "Cadastros base";
2. O sistema oferece uma interface para cadastro e lista os subgrupos cadastrados abaixo;
3. O ator seleciona o grupo a que o subgrupo pertence, informa um nome e uma descrição e
seleciona salvar. Retorna ao passo 4 do Fluxo Básico;
Fluxo alternativo A2 - Atualizar subgrupo
1. O ator inicia o Caso de Uso escolhendo "Subgrupo", da subopção "Produtos", da opção

"Cadastros base";
2. O ator escolhe um subgrupo e seleciona a opção de alterar;
3. O sistema oferece uma interface para edição. Retorna ao passo 3 do Fluxo Alternativo A1;
Fluxo alternativo A3 - Excluir subgrupo
1. O ator inicia o Caso de Uso escolhendo "Subgrupo", da subopção "Produtos", da opção

"Cadastros base";
2. O ator escolhe um subgrupo e seleciona a opção de excluir;

Caso de Uso Atribuir Imagem:
1. O ator escolhe um produto;

2. O ator seleciona a opção de atribuir imagem;
3. O sistema lista todas as imagem cadastradas;
4. O ator clica sobre a imagem que deseja atribuir ao material;
5. O sistema emite uma mensagem de confirmação da operação e finaliza o Caso de Uso;
Caso de Uso Gerenciar Imagem:
1. O ator inicia o Caso de Uso escolhendo "Imagens", da opção "Cadastros base";

2. O sistema oferece uma interface para cadastro e lista as imagens já cadastradas abaixo;
3. O ator seleciona uma imagem do arquivo e informa um título; [A1, A2]
Fluxo alternativo A1 - Atualizar imagem
3. O ator escolhe uma imagem e seleciona a opção de alterar;

4. O sistema oferece uma interface para edição de imagem. Retorna ao passo 3 do Fluxo
Básico;
Fluxo alternativo A2 - Excluir imagem
3. O ator escolhe uma imagem e seleciona a opção de excluir;

3.2 Resultados da pesquisa de opinião online 57

3.2 Resultados da pesquisa de opinião online
A pesquisa de opinião online comparando os dois aplicativos que utilizam metodologias

diferentes de programação (AJAX e Tradicional) foi realizada entre os dias 01/02/2007 e
23/02/2007 no endereço eletrônico http:\\www.wannd.com.
Os participantes foram submetidos a 5 (cinco) perguntas com valores de 1 (um), cor-

respondendo a nota mais baixa, e 10 (dez), que corresponde a nota mais alta, como pode ser
observado na tabela 3 e Anexo B.
Participaram da pesquisa 112 (cento de doze) pessoas que deram suas opiniões sobre
os aplicativos. Os resultado obtidos podem ser observados na Tabela 3, os quais indicam a
preferência do usuário pela programação AJAX em relação a Tradicional.
Pesquisa de opinião comparando a programação AJAX com a tradicional

Pergunta AJAX Tradicional
Velocidade no carregamento do conteúdo 800 (71,45%) 320 (28,55%)
Facilidade de utilização das funções disponíveis 730 (65,18%) 390 (34,82%)
Designer 840 (75%) 280 (25%)
Avaliação Geral 880 (78,57%) 240 (21,43%)
Qual técnica de programação você escolheria para seu 95 (84,82%) 17 (15,18%)
site?
Notas: (1) Participaram da pesquisa 112 (cento e doze) pessoas; (2) Os resultados de cada
pergunta representam o número de votos e, entre parênteses, o percentual que corresponde
do total geral de votos. (3) A pesquisa esteve disponível de 01/02/2007 até 28/02/2007 no
endereço eletrônico http://wwww.wannd.com
Tabela 3: Pesquisa Online de Opinião
A preferência do internauta à tecnologia AJAX foi notória como mostra a Tabela 3. Os

itens pesquisados avaliaram a velocidade, a facilidade, o designer, a avaliação geral das duas
aplicações e a preferência o usuário em relação a uma das metodologia, os quais obtiveram
resultados favoráveis ao AJAX em relação a Tradicional, demonstrando assim uma enorme
preferência e satisfação do internauta em relação a essa tecnologia.
4 Produto final de trabalho
Neste capítulo, será apresentado um sistema de controle patrimonial, o qual foi pro-
gramado mesclando a técnica AJAX com a tradicional. O trabalho exemplifica como uma
aplicação Web tradicional pode ser aprimorada empregando os conceitos AJAX.
O sistema tem o objetivo de gerenciar informações referentes aos materiais da carga

de um determinado estabelecimento. Ele foi concebido obedecendo o princípio de que todo
material tem uma lotação e sublotação e pertence a um grupo e subgrupo de materiais seme-
lhantes. Portanto, uma cadeira, por exemplo, poderia pertencer a lotação: Sala de Recursos
Humanos; sublotação: Estação de trabalho 01; grupo: Móveis; subgrupo: Cadeiras.
4.1 Descrição do aplicativo
O propósito fundamental foi produzir um sistema que possibilite os seguintes controles:
1. Usuários - além das operações padrões de administração de usuários (inclusão, exclusão

e atualização), possibilita criar restrições de acesso dentro do sistema;
2. Grupos e lotações - refere-se ao tratamento das operações de administração de grupos

e lotações de materiais, tais como exibição, busca, inclusão, atualização e exclusão. Os
itens cadastrados são organizados conforme grupos e subgrupos de materiais semelhantes,
bem como por lotação e sublotação a que pertencem. Desta forma, um material pode
ser listado por sua lotação ou grupo, otimizando as possibilidades de apresentação dos
materiais cadastrados;
3. Registro do histórico das alterações - o registro de uma alteração obrigatoriamente

vincula um material, possibilitando que cada patrimônio apresente um histórico de acon-
tecimentos. Esta funcionalidade é importante para manter o controle de qualidade do
material;
4. Gerenciamento de materiais com foto ilustrativa - ambiente principal do sistema.

4.1 Descrição do aplicativo 59
Concentra as funcionalidades de administração geral (inclusão, exclusão e atualização),

bem como de exibição de diferentes atributos, tais como nome, código patrimonial, grupo
e lotação a que pertence e foto ilustrativa.
5. Relatórios de materiais por lotação - essa página possui como principal caracte-
rística a simplicidade, pois apresenta de forma objetiva as possibilidades de emissão de
relações de materiais para cada lotação. Os relatórios disponíveis são: Relação de Geral
de Materiais (com ou sem histórico de alterações) e Relatório de Materiais por Lotação
(com ou sem histórico de alterações);
4.1.1 Diagrama de Entidade de Relacionamento e Use Case
Figura 29: Diagrama de Entidade de Relacionamento.

A Figura 29 representa a modelagem relacional criada no SGDB MySQL. Trata-se da

apresentação física dos relacionamentos implementados entre as entidades. Abaixo apresenta-
mos o propósito de cada tabela:
1. Privilegio: separa os usuários em níveis de acesso. Exemplo: usuário, administrador,

cadastrador etc.;
2. Pagina: armazena um identificador para cada página que compõe o sistema. Através
dessa tabela torna-se possível estabelecer uma conexão lógica para determinar as páginas
que podem ser acessadas por cada privilégio;
3. Privilegio_acessa_Paginas: define o relacionamento entre a tabela Privilegio e Pagina

para determinar quais páginas podem ser acessadas por cada privilégio. Exemplo: usuá-
rio tem permissão para acessar a página de id (identificador da página) número 1 (um)
e 2 (dois);
4. Usuario: armazena os usuários cadastrados no sistema. O principal ponto a ser obser-

vado é o relacionamento com a tabela Privilegio, pois essa ligação é responsável pela
delimitação do nível de acesso de cada usuário;
5. Imagem: representa as imagem de materiais;
6. Material: tabela para armazenamento dos materiais cadastrados. Destaque para o rela-
cionamento com as tabelas Imagem, Sublotacao e Subgrupo, pois assim torna-se possível
representar um material por intermédio de um imagem, bem como identificar sua lotação
e grupo;
7. Lotacao: define os locais de armazenamento de materiais. Exemplo: vários materiais

podem estar armazenados numa sala identificada por uma empresa como Sala de Servi-
dores;
8. Sublotacao: representa um local dentro de uma lotação. Exemplo: uma Sala de Servi-
dores pode possuir um rack para organização de equipamentos de rede;
9. Grupo: define um conjunto de materiais semelhantes. Exemplo: monitores, teclados e

gabinetes certamente podem pertencer ao grupo de materiais de informática;
10. Subgrupo: representa outro nível dentro do grupo. Exemplo: um grupo de materiais de
informática possui um subgrupo de monitores, bem como um grupo eletroeletrôni-
cos pode ter um subnível de condicionadores de ar.
Figura 30: Diagrama de Caso de Uso do aplicativo Material.
Caso de Uso Selecionar Material:
1. O ator inicia o Caso de Uso selecionando a opção de busca de material;

2. O sistema exibe a interface de busca;
3. O ator informa um nome de material [A1];
4. O sistema exibe os dados do material.
Fluxo alternativo A1 - Busca pelo número de patrimônio
1. O ator informa um número de código patrimonial. Retorna ao passo 4 do Fluxo Básico.

Caso de Uso Verificar Permissão:
1. O sistema identifica o usuário logado por intermédio de uma variável de sessão criada
durante a entrada no sistema;
2. O sistema identifica a página que se quer acessar por intermédio de uma variável
específica;
3. O sistema confirma, por intermédio de consulta no banco de dados, que o usuário tem
permissão de acesso à página pretendida. O Caso de Uso é encerrado normalmente [A1];
Fluxo alternativo A1 - Usuário não tem permissão de acesso
3. O sistema identifica que o usuário não tem permissão de acesso à página pretendia.
4. O sistema emite uma mensagem de permissão de acesso negada, redireciona para a tela de
login e encerra o Caso de Uso.
Caso de Uso Consultar Material:
1. O ator inicia o Caso de Uso escolhendo a opção "Página principal" ou logando no sistema;
2. O ator seleciona uma lotação e sublotação de material; [A1]
3. O sistema exibe o nome e número de patrimônio de todos os materiais que pertencem à
sublotação selecionada.
Fluxo alternativo A1 - Busca de material
2. O ator buscando um material; [usa: Selecionar Material]

3. O sistema exibe o nome, número de patrimônio, lotação e sublotação do material;
Caso de Uso Gerenciar Material:
1. O ator inicia o Caso de Uso escolhendo "Gerenciar", da opção "Materiais";

2. O sistema verifica a permissão de acesso e lista todos os materiais já cadastrados; [usa:
Verificar Permissão]
3. O ator seleciona a opção de incluir novo material; [A1, A2]
4. O sistema verifica a permissão de acesso; [usa: Verificar Permissão]
5. O sistema oferece uma interface para cadastro;
6. O ator seleciona uma lotação e sublotação, bem como o grupo e subgrupo para o material.
Informa um nome e uma descrição para o material e seleciona salvar;

Fluxo alternativo A1 - Atualizar material
3. O ator seleciona um material e escolhe a opção de alterar; [usa: Selecionar Material]

5. O sistema oferece uma interface para edição do material. Retorna ao passo 6 do Fluxo
Básico;
Fluxo alternativo A2 - Excluir material
3. O ator seleciona um material e escolhe a opção de excluir; [usa: Selecionar Material]


Caso de Uso Gerenciar Lotação:
1. O ator inicia o Caso de Uso escolhendo "Lotações", da opção "Materiais"; [A1, A2, A3]
2. O sistema verifica a permissão de acesso e lista todas as lotações já cadastradas; [usa:
3. O ator seleciona a opção de incluir nova lotação; [A4, A5]
6. O ator informa um nome e uma descrição para a lotação e seleciona salvar;
Fluxo alternativo A4 - Atualizar Lotação
3. O ator escolhe uma lotação e seleciona a opção de alterar;

Fluxo alternativo A5 - Excluir lotação
3. O ator escolhe uma lotação e seleciona a opção de excluir;

Fluxo alternativo A1 - Incluir sublotação:
1. O ator inicia o Caso de Uso escolhendo "Sublotações", da subopção "Lotações", da opção

"Materiais";
2. O sistema verifica a permissão de acesso e lista todas as sublotações cadastradas; [usa:
3. O ator seleciona a opção de incluir nova sublotação de materiais;
6. O ator seleciona a lotação a que a sublotação pertence, informa um nome e uma descrição
e seleciona salvar. Retorna ao passo 7 do Fluxo Básico;
Fluxo alternativo A2 - Atualizar sublotação

"Materiais";
3. O ator escolhe uma sublotação e seleciona a opção de alterar;
4. O sistema verifica a permissão de acesso;[usa: Verificar Permissão]
Fluxo alternativo A3 - Excluir sublotação

"Materiais";
3. O ator escolhe uma sublotação e seleciona a opção de excluir;

Caso de Uso Gerenciar Grupo:
1. O ator inicia o Caso de Uso escolhendo "Lotações", da opção "Materiais"; [A1, A2, A3]
2. O sistema verifica a permissão de acesso e lista todos os grupos cadastradas;[usa: Verificar
Permissão]
3. O ator seleciona a opção de incluir novo grupo; [A4, A5]
6. O ator informa um nome e uma descrição para o grupo e seleciona salvar;
Fluxo alternativo A4 - Atualizar Grupo
3. O ator escolhe um grupo e seleciona a opção de alterar;

Fluxo alternativo A5 - Excluir grupo
3. O ator escolhe um grupo e seleciona a opção de excluir;

Fluxo alternativo A1 - Incluir subgrupo:
1. O ator inicia o Caso de Uso escolhendo "Subgrupos", da subopção "Grupos", da opção

"Materiais";
2. O sistema verifica a permissão de acesso e lista todos os subgrupos cadastradas; [usa:
3. O ator seleciona a opção de incluir novo subgrupo de materiais;
6. O ator seleciona o grupo a que o subgrupo pertence, informa um nome e uma descrição e
seleciona salvar. Retorna ao passo 7 do Fluxo Básico;
Fluxo alternativo A2 - Atualizar subgrupo
1. O ator inicia o Caso de Uso escolhendo "Subgrupos", da subopção "Grupos", da opção

"Materiais";
3. O ator escolhe um subgrupo e seleciona a opção de alterar;
Fluxo alternativo A3 - Excluir subgrupo

"Materiais";
3. O ator escolhe um subgrupo e seleciona a opção de excluir;

Caso de Uso Extrair Relatórios:
1. O ator inicia o Caso de Uso escolhendo "Relação de materiais", da opção "Relatórios";

3. O ator seleciona um tipo de relatório e seleciona a opção de gerar;
5. O sistema apresenta o relatório;
Caso de Uso Gerenciar Alteração:
1. O ator inicia o Caso de Uso escolhendo "Alterações";

2. O sistema verifica a permissão de acesso e lista todas as alterações cadastradas; [usa:
3. O ator seleciona a opção de incluir nova alteração; [A1, A2]
4. O sistema verifica a permissão de acesso;[usa: Verificar Permissão]
6. O ator seleciona um material e informa a data, um resumo e uma descrição detalhada
para a alteração e seleciona salvar; [usa: Selecionar Material]
Fluxo alternativo A1 - Atualizar alteração
3. O ator escolhe uma alteração e escolhe a opção de alterar;

5. O sistema oferece uma interface para edição da alteração. Retorna ao passo 6 do Fluxo
Básico;
Fluxo alternativo A2 - Excluir alteração
3. O ator escolhe uma alteração e seleciona a opção de excluir;


Caso de Uso Atribuir Imagem:
1. O ator seleciona um produto; [usa: Selecionar Material]

2. O ator seleciona a opção de atribuir imagem;
3. O sistema lista todas as imagem cadastradas;
4. O ator clica sobre a imagem que deseja atribuir ao material;
5. O sistema emite uma mensagem de confirmação da operação e finaliza o Caso de Uso;
Caso de Uso Gerenciar Imagem:
1. O ator inicia o Caso de Uso escolhendo "Imagens", da opção "Materiais";

2. O sistema verifica a permissão de acesso e lista todas as imagens cadastradas; [usa:
3. O ator seleciona a opção de incluir nova imagem; [A1, A2]
6. O ator seleciona uma imagem do arquivo e informa um título;
Fluxo alternativo A1 - Atualizar imagem
3. O ator escolhe uma imagem e seleciona a opção de alterar;

5. O sistema oferece uma interface para edição de imagem. Retorna ao passo 6 do Fluxo
Básico;
Fluxo alternativo A2 - Excluir imagem
3. O ator escolhe uma imagem e escolhe a opção de excluir;


Caso de Uso Gerenciar Permissões:
1. O ator inicia o Caso de Uso selecionando "Gerenciar", da opção "Usuários"; [A1, A2, A3,
A4]
2. O sistema verifica a permissão de acesso e lista todos os usuários cadastrados; [usa:
3. O ator seleciona a opção "Novo Usuário"; [A5, A6]

6. O ator seleciona um privilégio e informa um nome, um e-mail e uma senha para o novo
usuário e seleciona salvar;
Fluxo alternativo A5 - Atualizar Usuário
3. O ator escolhe um usuário e seleciona a opção de editar;

Fluxo alternativo A6 - Excluir Usuário
3. O ator escolhe um usuário e seleciona a opção de excluir;

Fluxo alternativo A1 - Incluir Privilégio
1. O ator inicia o Caso de Uso selecionando "Privilégios", da opção "Usuários";

2. O sistema verifica a permissão de acesso e lista todos os privilégios cadastrados; [usa:
3. O ator seleciona a opção "Novo Privilégio";
6. O ator informa um nome e uma descrição para o privilégio e seleciona salvar. Retorna ao
passo 7 do Fluxo Básico;
Fluxo alternativo A2 - Atualizar Privilégio
1. O ator inicia o Caso de Uso selecionando "Privilégios"de "Usuários";

3. O ator escolhe um privilégio e seleciona a opção de editar;
5. O sistema oferece um interface para edição. Retorna ao passo 6 do Fluxo Alternativo A1
Fluxo alternativo A3 - Excluir Privilégio
1. O ator inicia o Caso de Uso selecionando "Privilégios"de "Usuários";

3. O ator escolhe um privilégio e seleciona a opção excluir;
5. O sistema solicita confirmação da opção de excluir. Retorna ao passo 7 do Fluxo Básico;
Fluxo alternativo A4 - Atribuir Permissões
1. O ator inicia o Caso de Uso selecionando "Permissões"de "Usuários";

2. O sistema verifica a permissão de acesso e lista todos os privilégios e suas respectivas
permissões; [usa: Verificar Permissão]
3. O ator escolhe um privilégio e seleciona a opção editar permissões de acesso;
4. O sistema oferece uma interface de edição;
5. O ator marca um ou mais permissão disponível e seleciona salvar. Retorna ao passo 7 do
Fluxo Básico;

5 Conclusões
A tecnologia AJAX (Asynchronous Javascript and XML) é certamente uma das mais
inovadoras dos últimos anos, pois possibilita que as páginas de Internet assemelhem-se muito
a aplicações desktop.
A possibilidade de otimização de uma aplicação Web tradicional foi o principal motivo

para o desenvolvimento desse Trabalho de Conclusão de Curso, o qual nos trouxe um ver-
dadeiro e instigante desafio tanto na fundamentação teórica da tecnologia AJAX quanto no
desenvolvimento dos aplicativos apresentados.
Figuram como principais fundamentações desse trabalho a tecnologia Javascript, a

linguagem de marcação HTML ou XHTML, o CSS e o XML. Juntos, e em conformidade com
os padrões da WWW, formam a base da programação AJAX, por meio da integração dessas
tecnologias com qualquer linguagem de programação para Web, tais como PHP, Java, Asp e
outras.
O fator determinante do sucesso do AJAX é a recuperação assíncrona de dados do

servidor Web, possibilitada pelo objeto XMLHttpRequest que, apesar de possuir pequenas
variações de identificação, está presente na maioria dos navegadores Web. A manipulação e a
integração de seus recursos com as demais tecnologias, incluindo as linguagens de programação,
são providas pelo Javascript.
Com a pretensão de identificar a sensação do internauta, foi desenvolvido um módulo de

dois aplicativos equivalentes, exceto pela forma como foram concebidos: um com AJAX e outro
sem a recuperação assíncrona de conteúdo. As implementações foram disponibilizadas na Web
e compararam as duas formas de programação por meio de 5 (cinco) perguntas. Houve uma
preferência de mais de 84% dos participantes para a utilização do AJAX em aplicativos Web,
demonstrando a superioridade do AJAX em todos os itens questionados, os quais levavam em
consideração a velocidade do carregamento do conteúdo, a facilidade na utilização das funções
disponíveis, o designer, a avaliação geral das duas aplicações e por fim indagava ao usuário
sobre qual técnica de programação esse escolheria para seu site.
5 Conclusões 72
Foi desenvolvido como produto final de trabalho um sistema de Controle Patrimonial

online o qual encontra-se em uso no CIOPS (Centro Integrado de Operações de Segurança)
de Dourados-MS no endereço eletrônico http://www.wannd.com/material. Nesse aplicativo
foi utilizando tanto a tecnologia AJAX quanto a tradicional, aliando assim a facilidade de
implementação e amplitude de recursos tradicionalmente utilizados em páginas de Internet
com a recuperação assíncrona de dados, comprovando que o AJAX além de ser uma ferramenta
incrível na construção de um site completo, prove ainda uma ótima integração com página de
Internet que utilizam outras linguagens, permitindo que essas sejam incrementadas de maneira
que se tornem mais dinâmicas e interativas.
A tecnologia AJAX vem se tornando cada vez mais importante no desenvolvimento

Web, isso graças ao conforto de eliminar a necessidade de recarregar todo conteúdo de um
página de Internet a cada clique. Contudo, o AJAX ainda está em expansão e sua aplicação
depende de considerável conhecimento técnico, o que nos remete à coexistência da programa-
ção AJAX e tradicional. Esse princípio foi utilização na produção do aplicativo de controle
patrimonial e, certamente, resultou no enriquecimento desse sistema Web.
Profissionalmente, o AJAX representa um diferencial na concorrência por um emprego

na área de Tecnologia da Informação. A lista de currículos do site EMPREGONAWEB.COM1 ,
consultada no dia 05/03/2007, trouxe uma lista com 89 (oitenta e nove) pretendentes a um
emprego, dos quais 65 (sessenta e cinco) mensionavam possuir algum conhecimento sobre
programação AJAX. Já em sua seção de empregos, foram oferecidas 6 (seis) vagas para pro-
gramadores AJAX. Da mesma forma, o banco de oportunidades do site IDGNOW2 , consultado
no mesmo dia, mostrou 25 (vinte e cindo) empregos que exigiam conhecimento em AJAX.
Bruno Martins dos Santos, gerente de hunting da consultoria paulista Conquest One3 ,
em entrevista concedida a revista info no dia 13/12/2006, assevera que os projetos voltados
para AJAX ainda são poucos no Brasil. Na prática existem muitos profissionais com algum
conhecimento de AJAX, mas poucos com o gabarito para tornar uma aplicação totalmente
assíncrona. Na prática, o AJAX é aplicado de forma seletiva, servindo como complemento à
criatividade do programador, sem, no entanto, cercear sua liberdade de explorar os diversos
recursos presentes na Web.
1
http://www.empregonaweb.com/
2
http://idgnow.uol.com.br/empregos
3
http://www.conquestone.com.br
73
Referências
[1] MAÑAS, José Antônio. Mundo IP. In: . Internet: Funciona no ¡lo toques!. Espa-
nha, Madrid: Ediciones Nowtilus S.L., 2004. cap. 3, p. 25-28.
[2] AMÉRICAECONOMÍCA. Relatório completo sobre o comércio ele-

trônico na América Latina. Brasil: São Paulo, 2006. Disponível em:
<http://pdf.americaeconomia.com/RepositorioAmeco/Ediciones/E_56/V_29/S_165/
A_1621/325_Por_ecomerce_ptg.pdf>. Acesso em: 25 out. 2006.
[3] COMITÊ Gestor da Internet no Brasil Brasil é o sexto país no

mundo em domínios próprios. Brasil: São Paulo, 2006. Disponível em:
<http://www.nic.br/imprensa/clipping/2006/midia02.htm>. Acesso em: 24 out.
2006.
[4] FERNANDES, L. M. P.; OLIVEIRA, R. S. Organizacao de Sistemas. In: . História

da Internet. Brasil, Rio de Janeiro: SENAC, 1998. cap. 6, p. 83.
[5] BUSH, Vannevar. As We May Think. USA: Boston, 1945. Disponível em:
<http://www.theatlantic.com/doc/194507/bush >. Acesso em: 30 out. 2006.
[6] CERN. The website of the world’s first-ever web server. France. Disponível em:
<http://info.cern.ch/>. Acesso em: 02 nov. 2006.
[7] MINIWATTS Marketing Group. Usage and Population Statistics. USA. Disponível
em: <http://www.internetworldstats.com/>. Acesso em: 02 nov. 2006.
[8] E-COMMERCE.ORG.BR. Dados Estatísticos sobre a Internet e Comércio Ele-

trônico. Brasil. Disponível em: <http://www.e-commerce.org.br/STATS.htm>. Acesso
em: 03 nov. 2006.
[9] O’REILLY, Tim. What Is Web 2.0. USA: Sebastopol, 2005. Disponível em:
<http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-
20.html?page=1>. Acesso em: 24 out. 2006.
[10] MCLAUGHLIN, Brett. Mastering Ajax, Part 1: Introduction to Ajax. USA: New
York, 2005. Disponível em: <http://www-128.ibm.com/developerworks/web/library/wa-
ajaxintro1.html>. Acesso em: 24 out. 2006.
[11] GARRET, Jesse James. Ajax: A New Approach to

Web Applications. USA: San Francisco, 2005. Disponível em:
<http://www.adaptivepath.com/publications/essays/archives/000385.php >. Acesso
em: 24 out. 2006.
[12] W3C. Technology. Disponível em: <http://www.w3.org/Consortium/technology>.

Acesso em: 04 nov. 2006.
Referências 74
[13] BRASIL, Cyclades. Guia Internet de Conectividade. In: . Wide Area Networks
(WANs). 11a edição. São Paulo: SENAC, 2004. p. 64.
[14] CRANE, D.; PASCARELLO, E.; JAMES, D. Ajax In Action. USA, Greenwich, CT:
Manning Publications, 2006.
[15] BAUDISCH, A. O que é AJAX e como aplicá-lo com PHP, parte 1. Brasil. Dispo-
nível em: <http://www.plugmasters.com.br/sys/materias/251/1/O-que–AJAX-ecomo-
aplic-lo-com-PHP,-parte-1>. Acesso em: 10 out. 2006.
[16] WIKIPEDIA. Servidor Web. Disponível em: <http://pt.wikipedia.org/wiki/Servidor_-

Web >. Acesso em: 27 fev. 2007.
[17] NETCRAFT. March 2007 Web Server Survey . Disponível em:

<http://news.netcraft.com/archives/2007/02/index.html >. Acesso em: 20 mar.
2007.
[18] KABIR, Mohammed J. Apache Server 2 Bible. In: . Apache: The Number One In
This Chapter Web Server. USA, New York: Hungry Minds, Inc., 2002, cap. 1, p. 03.
[19] KABIR, Mohammed J. Apache Server 2 Bible. In: . Apache: The Number One
In This Chapter Web Server. USA, New York: Hungry Minds, Inc., 2002, cap. 1, p.
05-07.
[20] GUIMARÕES, Célio. Introdução a Linguagens de Marcação: HTML,

XHTML, SGML, XML. Disponível em: <http://www.dcc.unicamp.br/ celi-
o/inf533/docs/markup.html >. Acesso em: 27 fev. 2007.
[21] HTML.NET. Lição 3: O que é HTML?. Disponível em: <http://pt-

br.html.net/tutorials/html/lesson3.asp >. Acesso em: 28 fev. 2007.
[22] WIKIPEDIA. XHTML. Disponível em: <http://pt.wikipedia.org/wiki/XHTML >.

Acesso em: 28 fev. 2007.
[23] W3C. XHTML 1.0 The Extensible HyperText Markup Language (Second Edi-
tion). Disponível em:<http://www.w3.org/TR/2002/REC-xhtml1-2002801/#xhtml>.
Acesso em: 05 nov. 2006.
[24] SILVA, Samy Maurício. Tutorial XHTML. Brasil. 2003. Disponível

em:<http://www.maujor.com/tutorial/xhtml.php>. Acesso em: 05 nov. 2006.
[25] HTML.NET. Lição 1: O que é CSS?. Disponível em: <http://pt-

br.html.net/tutorials/css/lesson1.asp >. Acesso em: 27 fev. 2007.
[26] W3C. Introduction to CSS. Disponível em: <http://www.w3schools.com/css/css_-

intro.asp >. Acesso em: 05 de nov. 2006.
[27] W3C. Introduction to XML. Disponível em: <http://www.w3schools.com/xml/xml_-

whatis.asp >. Acesso em: 08 nov. 2006.
[28] W3C. How can XML be Used?. Disponível em:

<http://www.w3schools.com/xml/xml_usedfor.asp >. Acesso em: 09 nov. 2006.
Referências 75
[29] W3C. Introduction to JavaScript. Disponível em:

<http://www.w3schools.com/js/js_intro.asp >. Acesso em: 05 nov. 2006.
[30] ASLESON, R.; SCHUTTA, N. T. Fundamentos do Ajax. In: . Usando o Objeto

XMLHttpRequest. Brasil, Rio de Janeiro: Alta Books, 2006, cap. 1, p. 23.
[31] ASLESON, Ryan; SCHUTTA, Nathaniel T. Fundamentos do Ajax. In: . Usando o

Objeto XMLHttpRequest. Brasil, Rio de Janeiro: Alta Books, 2006, cap. 1, p. 23 e
24.
[32] PHP.NET. Capitulo 1: Introdução. Disponível em:

<http://www.php.net/manual/pt_BR/introduction.php >. Acesso em: 01 mar.
2007.
[33] PHP.NET. Capitulo 10: Sintaxe Básica. Disponível em:

<http://www.php.net/manual/pt_BR/language.basic-syntax.php# language.basic-
syntax.phpmode >. Acesso em: 01 mar. 2007.
[34] PHP.NET. O que o PHP pode fazer?. Disponível em:

<http://br.php.net/manual/pt_BR/intro-whatcando.php >Acesso em: 08 nov.
2006.
[35] CONVERSE, T.; PARK, J.; MORGAN, C. PHP5 AND MySQL Bible. In: . PHP:
The Basics. USA. Indianapolis, Indiana: Wiley Publishing, Inc., 2004, cap. 1, p. 03-12.
[36] CONVERSE, T.; PARK, J.; MORGAN, C. PHP5 AND MySQL Bible. In: . PHP:
The Basics. USA. Indianapolis, Indiana: Wiley Publishing, Inc., 2004, cap. 1, p. 04.
[37] MySQL. Appendix B. Changes in MySQL 5.2 Falcon. Disponível em:

<http://dev.mysql.com/doc/falcon/en/news-falcon.html >. Acesso em: 05 mar. 2007.
[38] MILANI, André. Mysql - Guia do Programador. In: . Bem-Vindo ao MySQL. Brasil,
São Paulo: Novatec. 2007, cap. 1, p. 26 e 27.
Glossário
API método específico recomendado por um sistema ope-

racional de computador, aplicativo ou ferramenta de
terceiros, pelo qual um programador escrevendo um
aplicativo pode fazer requisições do sistema operaci-
onal. Também conhecido por Application Program-
mers Interface.
Assíncrono (Asynchronous) modo de transmissão no qual os dados são transmiti-

dos sem periodicidade constante (no modo síncrono,
os dados são transmitidos seqüencialmente).
Banda larga termo empregado para designar uma conexão a In-

ternet de alta velocidade. Usualmente no Brasil a ve-
locidade varia de 300 até 800 kilo bytes por segundo
(kbps).
C e C++ é uma linguagem de programação estruturada e pa-

dronizada, criada na década de 70 por Dennis Ritchie
e Ken Thompson para ser usada em sistemas opera-
cionais UNIX, mas desde então espalhou-se para ou-
tros sistemas operacionais tornando-se uma das lin-
guagens de programação mais usadas. A linguagem
C++ é derivada da linguagem C, designada para tra-
balhar com a orientação a objeto.
Glossário 77
Cache é um dispositivo de acesso rápido, interno a um sis-

tema, que serve de intermediário entre um operador
de um processo e o dispositivo de armazenamento.
Case-Sensitive é definido como a diferenciação das letras escritas

em maiúsculo das escritas em minúsculo, quando um
programa ou linguagem de programação são case-
sensitive elas consideram totalmente diferentes duas
letras que são iguais mas escritas com letras em mi-
núsculo ou maiúsculo.
CERN um dos mais importantes centros mundiais de pes-

quisas avançadas em Física Nuclear e de Partículas,
localizado em Genebra-Suíça. Um de seus pesqui-
sadores, Tim Berners Lee, foi o inventor, em 1989,
do HTTP (Hypertext Transfer Protocol ), o protocolo
usado na WWW para transferir arquivos HTML.
Cliente Web também conhecido como Navegador Web, permite

que seus usuários interajam com documentos HTML
hospedados em um servidor Web.
Código Patrimonial número específico que representa a identificação única

de um patrimônio.
Combobox é um componente presente em diversas interfaces grá-

ficas. Possui quase a mesma aparência de uma lista,
porém as informações contidas nele só são visíveis
quando o usuário realiza um evento, como um clique
do mouse sobre esse.
Glossário 78
Comércio eletrônico, comér- termo utilizado para designar as compras realizadas

cio online ou e-commerce por meios eletrônicos, usualmente a Internet.
Cookie é um grupo de dados trocados entre o navegador e o

servidor de páginas, colocado num arquivo de texto
criado no computador do usuário. A sua função prin-
cipal é a de manter a persistência de sessões HTTP.
CSS linguagem de estilo utilizada para padronizar a apre-

sentação de documentos escritos em linguagens de
marcação como o HTML, XML e XHTML.
DER O Diagrama de Entidade de Relacionamento é um

modelo diagramático que descreve o modelo de da-
dos de um sistema com alto nível de abstração. Ele é
a principal representação do Modelo de Entidades e
Relacionamentos. Sua maior aplicação é para visua-
lizar o relacionamento entre tabelas de uma banco de
dados, no qual as relações são construídas através da
associação de um ou mais atributos destas tabelas.
Desktop Área de trabalho de um computador, onde o usuário

concentra os atalhos para suas principais ferramentas
de trabalho e documentos. Constantemente usá-se
a referência aplicativo desktop para nomear um pro-
grama que executa em um computador pessoal.
Design entende-se o design como o esforço criativo relacio-

nado à configuração, concepção, elaboração e defi-
nição de algo, como um objeto, uma imagem, entre
outros, em geral voltados a uma determinada função.
Glossário 79
DOCTYPE Document Type Definition, consiste em um conjunto

de regras que define o tipo ou a versão da linguagem
de marcação que será usada na página de Internet
DOM padrão para estruturação de um documento.
Domínio é um nome que serve para localizar e identificar con-

juntos de computadores na Internet.
Estático não sofre alteração em tempo de execução. Termo

freqüentemente usado para designar documentos Web
que são disponibilizados apenas para leitura, ou seja,
não possuem ações programática que recebem dados
e mudam conforme a interação do usuário.
Evento em informática refere-se a algum acontecimento que

é iniciado pelo usuário ou pré-determinado pelo pro-
gramador ao desenvolver o programa de computador.
FreeBSD é um sistema operacional livre do tipo Unix descen-

dente do BSD desenvolvido pela Universidade de Ber-
keley.
Firewall é o nome dado ao dispositivo de uma rede que tem

por função regular o tráfego de redes entre redes dis-
tintas e impedir a transmissão de dados nocivos ou
não autorizados de uma rede a outra.
Front-end interface gráfica com o usuário para interagir com

programas em modo texto.
GNU é a designação da licença para software livre idea-

lizada por Richard Stallman no final da década de
1980, no âmbito do projeto GNU da Free Software
Foundation.
Glossário 80
Hipertexto forma dinâmica de apresentação textual, onde um

texto direciona para outro e assim sucessivamente.
HTML linguagem de marcação para apresentar um conteúdo

ao Cliente Web.
HTTP conjunto de regras para permuta de arquivos (texto,

imagens gráficas, som, vídeo e outros arquivos multi-
mídia) na World Wide Web.
Hunting técnica de “caça” a profissionais para cargos de chefia,

gerência ou posições que exigem qualificação técnica
especializada
Internauta designa uma pessoa que utiliza a Web.
InfoSeek ferramenta avançada de busca. É projetada para ex-

trair informação adequada às necessidades do cliente,
tal como endereços de correio eletrônico, números de
fone/fax, arquivos em discos locais, etc.
In locu expressão do latin que denota algo feito no local, de

perto, pessoalmente.
Interface Gráfica é um conjunto de componentes gráficos que compõem

um sistema operacional um um programa de compu-
tador, nesse conjunto de componentes estão presentes
as janelas, os botões, listas, menus, e diversos outros
componentes.
Glossário 81
Internet rede mundial de computadores que utiliza a ar-

quitetura de protocolos de comunicação TCP/IP.
Originou-se de um sistema de telecomunicações des-
centralizado criado pelo Departamento de Defesa dos
Estados Unidos durante a Guerra Fria. Durante os
anos 70 e 80, cresceu entre os meios acadêmicos,
quando sua principal aplicação era o correio eletrô-
nico. Com a aparição da World Wid Web em 1993, a
Internet se popularizou.
Java é uma linguagem de programação orientada a objeto

desenvolvida na década de 90 pelo programador Ja-
mes Gosling, na empresa Sun Microsystems. Diferen-
temente das linguagens convencionais, que são com-
piladas para código nativo, a linguagem Java é com-
pilada para um "bytecode" que é executado por uma
máquina virtual.
Javascript linguagem específica, e nativa dos Clientes Web, para

realizar a manipulação de conteúdo em aplicações
para Web.
Java Servlet são componentes que possibilitam ao programador da

linguagem Java uma interface para o Servidor Web
através de uma API. As aplicações baseadas no Ser-
vlet geram conteúdo dinâmico (normalmente HTML)
e interagem com os clientes.
Glossário 82
Kernel é o núcleo do sistema operacional. Ele representa

a camada mais baixa de interface com o hardware,
sendo responsável por gerenciar os recursos do sis-
tema operacional como um todo.
Login efetuar login é a ação necessária para acessar um sis-

tema computacional restrito inserindo uma identifi-
cação e uma senha. Uma vez logado, o usuário passa
a ser identificado no sistema, sendo restringido ou
permitido a acessar recursos do sistema.
Lotação represente um local de responsabilidade. Exemplo:

se um computador da empresa A estiver na escritório
de contabilidade, sua lotação será o escritório de
contabilidade da empresa A;
Metadados são informações adicionais necessárias para que os da-

dos se tornem úteis. É informação essencial para que
se possa fazer uso dos dados. Em suma, metadados
são um conjunto de características sobre os dados que
não estão normalmente incluídas nos dados propria-
mente ditos.
Mac OS X é um sistema operacional criado pela Apple destinado

aos computadores Macintosh
Metalinguagem são linguagens de programação que dão origem a ou-

tras linguagens de programação.
Middleware é um termo geral que serve para mediar dois progra-

mas separados e normalmente já existentes. Aplica-
ções diferentes podem comunicar-se através do ser-
viço de mensagens, proporcionado por programas
middleware.
Glossário 83
MySQL é um sistema de gerenciamento de banco de dados

(SGBD), que utiliza a linguagem SQL (Structured
Query Language - Linguagem de Consulta Estrutu-
rada) como interface. É atualmente um dos bancos
de dados mais populares, com mais de 4 milhões de
instalações pelo mundo.
Navegadores de Internet são programas que se comunicam com servidores Web

usando primariamente o protocolo HTTP para recu-
perar páginas Web, que são identificadas pela URL
http:. O protocolo HTTP permite aos navegadores
tanto recuperar como submeter informações para um
servidor. O formato de arquivo que uma página usa
é normalmente o HTML, sendo identificado no pro-
tocolo HTTP através de um indicador do seu tipo de
conteúdo
NCSA (National Center for Supercomputing Applications,

que significa Centro Nacional de Aplicações de Super-
computação em inglês) é um organismo dos Estados
Unidos da América relacionado com a investigação no
campo da informática e telecomunicações. Teve um
papel importante no desenvolvimento da World Wide
Web dado que introduziu o navegador Mosaic.
Network corresponde a um sistema de comunicação de dados

que conecta entre si sistemas de informação situados
em diferentes lugares.
Objeto representa uma entidade que pode ser física, concei-

tual ou de software. É uma abstração de algo que
possui fronteira definida e significado para a aplica-
ção.
Glossário 84
Online termo que designa um trabalho executado conectado

a Web. Comumente aplica-se esse termo para de-
signar uma aplicativo que para produzir resultados
necessita estar conectado a Web.
Open Source software livre, segundo a definição criada pela Free

Software Foundation é qualquer programa de com-
putador que pode ser usado, copiado, estudado, mo-
dificado e redistribuído com algumas restrições. A
maneira usual de distribuição de software livre é ane-
xar a este uma licença de software livre, e tornar o
código fonte do programa disponível.
Perl é uma linguagem de programação estável e multipla-

taforma, usada em aplicações de missão crítica em
todos os setores, e é bastante usada para desenvolver
aplicações Web de todos os tipos.
PHP é uma linguagem de programação de computadores

interpretada, livre e muito utilizada para gerar con-
teúdo dinâmico na Web. Apesar de ser uma lingua-
gem de fácil aprendizado e de uso para pequenos
scripts dinâmicos simples, o PHP é uma linguagem
poderosa orientada a objetos.
Programação AJAX técnica de programação para Web que foca a recu-

peração assíncrona do conteúdo. Os principais ele-
mentos dessa técnica é o (X)HTML, DOM, XML e
Javascript.
Glossário 85
Protocolo é um padrão que especifica o formato de dados e as

regras a serem seguidas na comunicação de dados e
na interligação em rede. Sem protocolos uma rede
não funciona.
Programação tradicional técnica de programação que não se vale da recupera-

para Web ção assíncrona do conteúdo.
Prompt de comando local a partir do qual o usuário digitar instruções de

comando. No MS-DOS, por exemplo, o formato mais
comum é uma letra que representa a unidade de disco,
seguida do sinal “maior que”. Exemplo: C>.
Rede conjunto de computadores ou equipamentos conecta-

dos entre si com o intuito compartilhar informações
e recursos.
Scripts são arquivos contendo linguagem interpretada; nor-

malmente chamados de arquivos de script ou scripts
em vez de executáveis. Os scripts precisam de softwa-
res interpretadores porque são blocos de códigos não
compilados, que são interpretados no tempo de exe-
cução.
Servidor Web computador responsável por aceitar e responder a pe-

didos HTTP de outras aplicações.
SGDB sistema gerenciador de banco de dados ou SGDB é um

conjunto de programas utilizados para criar e manter
um banco de dados. O principal objetivo é retirar
da aplicação cliente a responsabilidade de gerenciar
o acesso, manipulação e organização dos dados. O
SGBD disponibiliza uma interface para que os seus
clientes possam incluir, alterar ou consultar dados
Glossário 86
SGML Standard Generalized Markup Language é uma meta-

linguagem através da qual se pode definir linguagens
de marcação para documentos. A SGML é uma des-
cendente da Generalized Markup Language (GML) da
IBM, desenvolvida na década de 60 por Charles Gold-
farg, Edward Mosher e Raymond Lorie (cujas inici-
ais dos sobrenomes por acaso coincidem com GML).
A SGML não deve ser confundida com a Geography
Markup Language (GML) desenvolvida pelo consór-
cio Open GIS.
Síncrono (synchronous) termo associado a distintos dispositivos e processos

que necessitam obedecer uma ordem para que o pro-
cessamento ocorra corretamente.
Site também conhecido como website, é um conjunto de

páginas Web.
Solaris é um Sistema Operativo UNIX desenvolvido pela Sun

Microsystems. As primeiras versões do Solaris (ba-
seadas no código do BSD) foram chamadas SunOS,
tendo o seu nome alterado para Solaris 2 quando pas-
sou a ser baseado no System V.
Software Livre programa de computador disponível através de seu

código-fonte e com a permissão para qualquer um
usá-lo, copiá-lo e distribuí-lo, seja na sua forma origi-
nal ou com modificações, seja gratuitamente ou com
custo. O software livre é necessariamente não propri-
etário, mas é importante não confundir software livre
com software grátis.
Glossário 87
SQL é uma linguagem de pesquisa declarativa para banco

de dados relacional.
Standalone o termo referencia uma aplicação que executa local-

mente, ou seja, utiliza apenas os recurso do próprio
computador onde está instalada.
Sublotação Representa um local de responsabilidade dentro de

um lotação. Exemplo: se um computador da em-
presa B está na sala de recursos humanos, especifica-
mente na estação de trabalho 01, sua sublotação será
a estação de trabalho 01 da sala de recursos
humanos da empresa B.
Tag são estruturas de linguagem de marcação que consis-

tem em breves instruções, tendo uma marca de início
e outra de fim. Há uma tendência nos dias atuais para
se usar as tags apenas como delimitadores de estilo
e/ou conteúdo, tanto em HTML quanto em XML.
TCP/IP consiste em dois protocolos de comunicação, o TCP

(Transmission Control Protocol - Protocolo de Con-
trole de Transmissão) e o IP (Internet Protocol - Pro-
tocolo Internet), sendo os mais importantes para a
transmissão de dados através da Internet ou de Re-
des Locais.
Threads ou linha de execução em língua portuguesa, é uma

forma de um processo dividir a si mesmo em duas u
mais tarefas que podem ser executadas simultanea-
mente.
Glossário 88
UML a Linguagem Unificada de Modelagem permite que

desenvolvedores visualizem os produtos de seu tra-
balho em diagramas padronizados. Junto com uma
notação gráfica, a UML também especifica significa-
dos. É uma notação independente de processos.
Tempo de execução momento em que um aplicativo está executando.
UNIX é um sistema sistema operacional portável, multi-

tarefa e multiusuário originalmente criado por um
grupo de programadores da AT&T da Bell Labs,
General Electric (GE), que incluem Ken Thompson,
Dennis Ritchie, Douglas McIlroye Peter Weiner.
Vale do Silício como é conhecido, na Califórnia EUA, o Silicon Val-

ley, um conjunto de empresas implantadas a partir da
década de 1950 com o objetivo de inovar científica e
tecnológica, destacando-se na produção de Chips, na
eletrônica e informática. O Vale do Silício abrange
várias cidades de estado da Califórnia, ao sul de São
Francisco, como Palo Alto e Santa Clara, estendendo-
se até os subúrbios de San Jose.
Venda eletrônica termo utilizado para designar as vendas realizadas

por meio eletrônico, usualmente a Internet.
Variável de sessão armazena dados em uma variável durante o tempo

em que o navegador estiver aberto e o usuário estiver
logado.
XHTML linguagem de marcação idêntica HTML que usa o

padrão de estruturação XML. Existem diferenças se-
mânticas entre o XHTML e o HTML.
Glossário 89
XMLHttpRequest e XM- extensões não padronizadas no DOM, mas que acaba-

LHttp ram sendo suportadas pela maioria dos Navegadores
Web. Facilitam o processo de efetuar chamadas as-
síncronas, pois são especificamente projetados para
trabalhar em segundo plano.
XML linguagem de marcação flexível que pode criar forma-

tos de informações comuns e compartilhar ambos os
formatos e os dados na World Wide Web, nas intra-
nets e em qualquer lugar. O XML é extensível por-
que, diferentemente do HTML, os símbolos markup
são ilimitados e se autodefinem.
XLS linguagem de criação de planilhas que descreve como

um dado é mandado por meio da Web, usando o
XML, e é apresentado ao usuário. O XSL é uma
linguagem para formatar um documento XML.
Yahoo é uma empresa norte-americana de serviços de Inter-

net com a missão de ser "o serviço de Internet global
mais essencial para consumidores e negócios". Opera
um portal de Internet, um diretório Web, e outros ser-
viços, incluindo o popular Yahoo! Mail. Foi fundado
por David Filo e Jerry Yang, formandos da Univer-
sidade de Stanford em janeiro de 1994 e incorporado
no dia 2 de março de 1995. A sede da empresa é em
Sunnyvale, Califórnia.
Glossário 90
W3C World Wide Web Consortium é um consórcio de em-

presas de tecnologia (atualmente cerca de 500 mem-
bros) fundado por Tim Berners-Lee em 1994 para
levar a Web ao seu potencial máximo, por meio do
desenvolvimento de protocolos comuns e fóruns aber-
tos que promovem sua evolução e asseguram a sua
interoperabilidade. O W3C desenvolve tecnologias
denominadas padrões da Web para a criação e a in-
terpretação dos conteúdos para Web. Sites desen-
volvidos segundo esses padrões podem ser acessados
e visualizados por qualquer pessoa, independente da
tecnologia de hardware ou software utilizados.
WAIS protocolo que vem do termo "Wide Area Information

Server" e foi desenvolvido pela Thinking Machines
Corp, a KPGM (empresa de consultoria mundial) e
pela Apple em 1992. Consiste em um sistema que
permite a procura de informações em base de dados
distribuidos cliente/servidor (serviço fornecido de ser-
vidor para o usuário) através de linguagem natural
(palavras-chaves), rastreando palavras ou expressões
que estão dentro de arquivos individualmente pela
Web e não somente pelo nome do arquivo.
Glossário 91
WWW ou World Wide Web área da Internet que contém documentos em formato
de hipermídia, uma combinação de hipertexto com
multimídia. Os documentos hipermídia da WWW
são chamados de páginas de Web e podem conter
textos, imagens e arquivos de áudio e vídeo, além
de ligações com outros documentos na rede. A carac-
terística multimídia da Web, tornou-a a porção mais
importante da Internet.
& conhecido como "E" comercial. Substitui a conjun-

ção aditiva "E". Comumente utilizado em nomes de
comércio ou empresa, daí o seu nome incluir a palavra
comercial. No contexto das linguagens de programa-
ção, o "&"simboliza operações computacionais.
92
ANEXO A -- Telas dos aplicativos gerados
A.1 ourMarket sem AJAX
Figura 31: ourMarket sem AJAX - Tela principal.
Figura 32: ourMarket sem AJAX - Tela de gerenciamento de produtos.

A.2 ourMarket com AJAX 93
A.2 ourMarket com AJAX
Figura 33: ourMarket com AJAX - Tela principal.
Figura 34: ourMarket com AJAX - Tela de gerenciamento de produtos.

A.3 Produto final de trabalho 94
A.3 Produto final de trabalho
Figura 35: Controle de Materiais - Tela principal.
Figura 36: Controle de Materiais - Tela de gerenciamento de materiais.

95
ANEXO B -- Consulta de opinião
B.1 Tela da página de consulta de opinião
Figura 37: Página de consulta de opinião.

B.2 Anúncios da consulta de opinião 96
B.2 Anúncios da consulta de opinião
Para a realização da pesquisa de opinião com os internautas foram feitos anúncios em

foruns especializados em desenvolvimento Web no dia 01 de fevereiro de 2007, são estes os
Foruns:
1. Oficina da NET(http://www.oficinadanet.com.br/webforum/index.php?showtopic=250);
2. Web Forum (http://forum.wmonline.com.br/index.php?showtopic=170436);
3. CódigoFonte.NET (http://forum.codigofonte.net/index.php?showtopic=7441);
4. Imasters (http://forum.imasters.com.br/index.php?showtopic=213536);
5. Forum da Revista Info (http://forum.abril.com.br/info/topicos.php?area=339)

97
ANEXO C -- Ferramentas utilizadas
Foram usadas as seguintes ferramentas na produção desse Trabalho de Conclusão de

Curso:
1. Apache (http://www.apache.org) - servidor Web;
2. DBDesigner (http://fabforce.net/dbdesigner4) - para criação do Diagrama de Entidade

de Relacionamento (DER);
3. Eclipse (http://www.eclipse.org) - para edição de arquivos HTML, PHP, Javascript e

CSS;
4. Gimp (http://www.gimp.org) - editor de imagem;
5. Kile (http://kile.sourceforge.net)- front-end para editor Tex;
6. Mysql (http://www.mysql.com) - SGDB;
7. Tex (http://www.tug.org/teTeX) - editor de texto;
8. Umbrello (http://uml.sourceforge.net) - editor UML.

Experimento de Avaliação Dos Benefícios Da Tecnologia AJAX

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Experimento de Avaliação Dos Benefícios Da Tecnologia AJAX

Uploaded by

Copyright:

Available Formats

Universidade Federal da Grande Dourados

Faculdade de Ciências Exatas e Tecnológicas

Experimento de Avaliação dos Benefícios da

Experimento de Avaliação dos Benefícios da

Trabalho de Conclusão de Curso apresentado

Orientação: Professor Especialista Marcelo

Professor Esp. Marcelo de C. Carvalho

Professora Dra. Carla Adriana B. Zanchett

Professor Msc. Rodrigo Funabashi Jorge

Dedicamos este trabalho às nossas famílias por constituirem o elemento principal de

A nossas famílias que souberam compreender o tempo de ausência durante o desenvol-

Este trabalho compreende o estudo da tecnologia AJAX (Asynchronous Javascript and

1 Browsers modo texto e gráfico . . . . . . . . . . . . . . . . . . . . . . . . . . p. 16

2 Modelo de sincronia das aplicações Web tradicionais e AJAX. [11]. . . . . . . p. 23

3 Ciclo de vida das aplicações Web clássicas [14]. . . . . . . . . . . . . . . . . . p. 24

4 Ciclo de vida das aplicações AJAX [14]. . . . . . . . . . . . . . . . . . . . . p. 25

5 Exemplo de utilização da tecnologia AJAX [15]. . . . . . . . . . . . . . . . . p. 26

6 Dados acumulados em uma aplicação clássica e AJAX [14]. . . . . . . . . . . p. 27

7 YouOS - Sistema Operacional Web. . . . . . . . . . . . . . . . . . . . . . . . p. 27

8 Estrutura básica de um documento HTML . . . . . . . . . . . . . . . . . . . p. 31

9 Sintaxe da linguagem CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 33

10 Estrutura de um documento XML . . . . . . . . . . . . . . . . . . . . . . . . p. 35

11 Exibição de documento XML . . . . . . . . . . . . . . . . . . . . . . . . . . p. 36

12 Criação do Objeto XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . p. 38

13 Sintaxe da básica da linguagem PHP . . . . . . . . . . . . . . . . . . . . . . p. 39

14 Script SQL para a criação do banco de dados "biblioteca" . . . . . . . . . . . p. 42

15 Script SQL para a criação da tabela "livros" . . . . . . . . . . . . . . . . . . p. 43

16 Script SQL para a inserção de dados na tabela "livros" . . . . . . . . . . . . p. 43

17 Fragmento de código do arquivo "lista_livros.php". . . . . . . . . . . . . . . p. 45

18 Fragmento de código do arquivo "lista_livros.php". . . . . . . . . . . . . . . p. 46

19 Primeiro bloco de código do arquivo XHTML "index.html". . . . . . . . . . . p. 47

20 Segundo bloco de código do arquivo HTML "index.html". . . . . . . . . . . . p. 47

21 Terceiro bloco de código do arquivo HTML "index.html". . . . . . . . . . . . p. 48

22 Criação do arquivo CSS "estilo.css". . . . . . . . . . . . . . . . . . . . . . . p. 49

24 Script do arquivo "detalhe_lista.js". . . . . . . . . . . . . . . . . . . . . . . p. 50

25 Arquivo principal "index.html". . . . . . . . . . . . . . . . . . . . . . . . . . p. 51

26 Dados na tabela inseridos dinamicamente . . . . . . . . . . . . . . . . . . . . p. 51

27 Diagrama de Entidade de Relacionamento do aplicativo OurMarket. . . . . . p. 53

28 Diagrama de Caso de Uso do aplicativo OurMarket. . . . . . . . . . . . . . . p. 54

29 Diagrama de Entidade de Relacionamento. . . . . . . . . . . . . . . . . . . . p. 59

30 Diagrama de Caso de Uso do aplicativo Material. . . . . . . . . . . . . . . . p. 61

31 ourMarket sem AJAX - Tela principal. . . . . . . . . . . . . . . . . . . . . . p. 92

32 ourMarket sem AJAX - Tela de gerenciamento de produtos. . . . . . . . . . p. 92

33 ourMarket com AJAX - Tela principal. . . . . . . . . . . . . . . . . . . . . . p. 93

34 ourMarket com AJAX - Tela de gerenciamento de produtos. . . . . . . . . . p. 93

35 Controle de Materiais - Tela principal. . . . . . . . . . . . . . . . . . . . . . p. 94

36 Controle de Materiais - Tela de gerenciamento de materiais. . . . . . . . . . p. 94

37 Página de consulta de opinião. . . . . . . . . . . . . . . . . . . . . . . . . . . p. 95

2 Uso da Internet no mundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 17

3 Pesquisa Online de Opinião . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 57

AJAX Asynchronous Javascript And XML

1.1 O que é AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 22

1.2 Por que usar AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 26

1.3 Tecnologias envolvidas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 28

1.3.1 Servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 29

1.3.2 HTML e XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 30

1.3.6 Recuperação assíncrona de dados . . . . . . . . . . . . . . . . . . . . p. 37

1.3.7 Linguagem de programação e banco de dados . . . . . . . . . . . . . p. 38

2.1 Criação do banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 42

2.2 Criação do XML dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 44

2.3 Criação do HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 46

2.4 Criação do CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 47

2.5 Criação do Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 48