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

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

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

Professora Dra. Carla Adriana B. ZanchettUniversidade Federal da Grande Dourados

Professor Msc. Rodrigo Funabashi JorgeUniversidade Federal da Grande Dourados

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 andXML) na programação Web. Seu foco inicial consiste em apresentar o contexto da expansãoda internet e a sua evolução nas últimas décadas, seguido pela compreensão das tecnologiasempregadas na programação AJAX, culminando no desenvolvimento de três aplicativos. Doisdeles com funções e aparências equivalentes, porém programados com técnicas distintas, ouseja, um com recuperação assíncrona de conteúdo (AJAX) e outro não, tendo estes a finalidadede comparar ambas as tecnologias (AJAX e tradicional), bem como avaliar a preferência dousuário. O terceiro aplicativo representa o produto final de toda fundamentação teórica e daexperiência prática sobre a metodologia de programação AJAX. Trata-se de um sistema decontrole de materiais que emprega a técnica AJAX e a tradicional, demonstrando assim umaperfeita 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 andXML) in the Web programming. Its initial focus is to show the context of the expansion ofthe internet and its evolution in the last decades, followed for the understanding of the usedtechnologies in the AJAX programming, culminating in the development of the three aplicati-ons. Two of them functions and equivalent appearances, however they are programmed withdistinct 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 (traditionaland AJAX) and avaliable the preferences of the users. The third application represents theend item of all theory and the practical experience on the programming methods AJAX. It’sabout a system of control of materials that uses the AJAX and traditional methodology, thusdemonstrating 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

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

(a) Browser modo texto - anterior a 1990. (b) Browser modo gráfico criado por TimBerners-Lee em 1993.

Figura 1: Browsers modo texto e gráfico1http://xanadu.com.au/ted2http://xanadu.com3http://historiadainternet.blogspot.com/2003/09/vannevar-bush.html4http://info.cern.ch/Proposal.html5http://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 MundoRegião População

(2006)População(% domundo)

Usuários daInternet

Penetra-ção (%da popu-lação)

Usuários(% domundo)

Cresci-mento(2000 até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 doNorte

331.473.276 5,1 % 229.138.706 69,1 % 21,1 % 112 %

América Lati-na/Caribe

553.908.632 8,5 % 83.368.209 15,1 % 7,7 % 361,4 %

Oceania/Aus-trália

33.956.977 0,5 % 18.364.772 54,1 % 1,7 % 141 %

Notas: (1) A Estatística sobre o Uso da Internet e População do Mundo foi atualizada em18 de setembro de 2006. (2) Os números demográficos (população) são baseados nos dadoscontidos no site world-gazetteer (http://www.world-gazetteer.com). (3) As informações sobreo uso da Internet provem dos dados publicados da Nielsen//NetRatings (http://www.nielsen-netratings.com), da International Telecommunications Union (http://www.itu.int), da NICse outras fontes de confiança.

Tabela 2: Uso da Internet no mundoFonte: 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 paraWeb 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.6http://maps.google.com7http://mail.google.com8http://del.icio.us9http://www.flickr.com

10http://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 trabalho11http://www.imasters.com.br12http://www.tableless.com.br13http://www.ajaxbox.com.br14http://www.big.com.br/alimentar15http://www.paodeacucar.com.br16http://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.1http://www.google.com2http://www.microsoft.com3http://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çãoWeb 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áginaWeb 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.

4http://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 paraWeb 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

ServidorWeb 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;5Nessa 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 tradicionalPergunta AJAX TradicionalVelocidade 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 seusite?

95 (84,82%) 17 (15,18%)

Notas: (1) Participaram da pesquisa 112 (cento e doze) pessoas; (2) Os resultados de cadapergunta representam o número de votos e, entre parênteses, o percentual que correspondedo total geral de votos. (3) A pesquisa esteve disponível de 01/02/2007 até 28/02/2007 noendereç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.

1http://www.empregonaweb.com/2http://idgnow.uol.com.br/empregos3http://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 nomundo 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óriada 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ívelem: <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>. Acessoem: 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: NewYork, 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 toWeb Applications. USA: San Francisco, 2005. Disponível em:<http://www.adaptivepath.com/publications/essays/archives/000385.php >. Acessoem: 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). 11aediçã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. ServidorWeb. 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 InThis 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 OneIn 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ívelem:<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 ObjetoXMLHttpRequest. Brasil, Rio de Janeiro: Alta Books, 2006, cap. 1, p. 23.

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

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

cio online ou e-commerce

termo utilizado para designar as compras realizadas

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

para Web

técnica de programação que não se vale da recupera-

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

LHttp

extensões não padronizadas no DOM, mas que acaba-

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órioWeb, 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

Documents