Revista de divulgao

tcnico-cientfica do ICPG

Vol. 2 n. 5 - abr.-jun./2004
ISSN 1807-2836

49

ENGENHARIA PARA APLICAES WEB

Deise Cechelero
Marlon Marcelo Volpi
Curso de Especializao em Desenvolvimento de Aplicaes Web
Resumo
A difuso da internet mudou conceitos de trabalho e de mercado em empresas de todo o mundo. Os sistemas e aplicaes para Web
cresceram em complexidade e importncia, abrangendo os mais diversos tipos de organizao e negcios. Diante desse cenrio,
tornou-se imprescindvel a utilizao de mtodos e princpios da engenharia para o desenvolvimento dessas aplicaes. O presente
artigo objetiva demonstrar a engenharia para Web, com destaque s suas principais atividades e aos modelos mais utilizados,
ressaltando toda sua importncia.

1. INTRODUO
A rede mundial de computadores cresceu de forma muita
rpida nos ltimos anos, abrangendo diversos segmentos de
mercado e diferentes tipos de organizao. A Web tornou-se uma
forma de proporcionar aumento na lucratividade das empresas
medida que possibilita realizar a divulgao, bem como a venda
de produtos e servios.
De acordo com Fernandes (1999), nada se faz sem informao, e j quase impossvel imaginar o mundo sem a internet. A
captura, a manipulao e o consumo do conhecimento na forma
digital tornaram-se funes vitais para a nossa civilizao. Devido a essa importncia, faz-se necessria a aplicao das abordagens utilizadas na engenharia de software tradicional, como tambm na construo de sistemas para Web. De acordo com
Pressman (2002, p.751),
medida que os sistemas e aplicaes baseados na Web (WebApps)
se tornam cada vez mais integrados nas estratgias de negcio, para
empresas pequenas e grandes (p.ex., comrcio eletrnico), a necessidade de construir sistemas confiveis, usveis e adaptveis cresce
de importncia. Por isso necessria uma abordagem disciplinada
para o desenvolvimento de WebApps.

Como inicialmente a Web era utilizada somente para compartilhar informaes, e seus contedos eram estticos, no havia preocupao em utilizar tcnicas e mtodos padronizados no
desenvolvimento de suas aplicaes. Porm, com o aumento da
complexidade e da importncia das aplicaes para a Web, tornou-se imprescindvel a utilizao da engenharia.
A engenharia para Web no igual engenharia de
software, mas utiliza muitos dos seus conceitos e princpios fundamentais, com nfase nas mesmas atividades tcnicas e de gesto. H pequenas diferenas no modo como essas atividades so
conduzidas, mas o princpio que dita uma abordagem disciplinada

para o desenvolvimento de um sistema baseado em computador

o mesmo.
As WebApps tm caractersticas particulares, diferentes
de outros sistemas. Existe maior preocupao com questes visuais e de usabilidade, alm de caractersticas especficas de segurana.
Nesse contexto, o presente artigo tem por objetivo apresentar aspectos relacionados engenharia para sistemas e aplicaes baseados na Web, ressaltando toda sua importncia. Inicialmente, sero abordadas as caractersticas dos sistemas para Web,
demonstrando suas diferenas em relao aos demais sistemas.
Na seqncia, ser demonstrada a engenharia para Web, destacando os modelos de processo mais utilizados e as principais
atividades para o desenvolvimento de WebApps com base na engenharia Web.
2. DESENVOLVIMENTO DE SISTEMAS WEB
O desenvolvimento de sistemas Web possui caractersticas distintas dos projetos de sistemas tradicionais. H maior preocupao com questes visuais e de usabilidade, alm das caractersticas especficas de segurana.
Para muitos desenvolvedores, o desenvolvimento de aplicaes Web se restringe apenas criao de pginas utilizando
HTML 1 , atravs de ferramentas como FrontPage ou
Dreamweaver2. Entretanto, existe muito mais que somente o aspecto visual e a interface com o usurio. Deve haver planejamento, projeto de sistema, testes, manuteno contnua, garantia de
qualidade e avaliao de desempenho. (MURUGESAN, 2000).
De acordo com Powell (apud PRESSMAN, 2002, p.753),
sistemas baseados na Web envolvem uma mistura de publicao impressa e desenvolvimento de software, de comercializao
e computao, de comunicaes internas e relaes externas, e de

Hypertext Markup Language - uma linguagem de elaborao (marcao) de documentos, cuja funo definir formatos para as pginas e possibilitar
a insero de links de hipertexto, permitindo a navegao entre pginas.
2

FrontPage (Microsoft) e Dreamweaver (Macromedia) so editores HTML.

50

Vol. 2 n. 5 - abr.-jun./2004
ISSN 1807-2836

Revista de divulgao
tcnico-cientfica do ICPG

arte e tecnologia.
Cada sistema baseado na Web tem um propsito especfico. A identificao desse propsito e de suas respectivas caractersticas um ponto-chave para a conduo da engenharia Web.

Uma WebApp pode apresentar propsitos de cunho informativo,

funcional ou de entretenimento. Algumas, porm, podem ter mltiplos propsitos, como esclarecem os exemplos demonstrados
na figura 1.

Figura 1 Propsitos de sistemas Web

Fonte: Leite (2002).

2.1. CARACTERSTICAS DE SISTEMAS WEB

Segundo Pressman (2002), WebApps so redes altamente
concentradas, impulsionadas pelo contedo e em contnua evoluo. Essas caractersticas, somadas ao imediatismo, aspectos
de segurana e esttica, so responsveis por guiarem o processo de engenharia para a Web.
O imediatismo merece destaque, pois o prazo de colocao de um site no mercado pode ser uma questo de alguns dias
ou semanas. Porm, essa caracterstica no justifica um trabalho
deficiente em termos de engenharia. Devem ser utilizados mtodos de planejamento, anlise, projeto, implementao e teste que
estejam adaptados para esses cronogramas comprimidos, necessrios no desenvolvimento para a Web.
McDonald e Welland (2001) concordam com essa questo
quando afirmam que um dos grandes obstculos para o sucesso
na adoo de uma metodologia no desenvolvimento Web o
curto ciclo de vida de seu desenvolvimento. Isso se d devido
s presses do mercado, freqentemente encontradas no desenvolvimento de aplicaes Web. Dessa forma, dispensada pouca
ateno s fases de anlise, avaliao, treinamento e manuteno
das aplicaes.
A preocupao com aspectos relacionados segurana
indiscutvel devido ao fato de os aplicativos para a Web estarem
disponveis via rede, sendo difcil limitar a populao de usurios
que ir acessar o aplicativo. preciso implementar medidas de
segurana no aplicativo e na sua infra-estrutura para a proteo
do contedo e fornecimento de mtodos seguros de transmisso
de dados.
Em relao aos aspectos visuais, quando um aplicativo
projetado para vender produtos ou idias, a esttica pode ser to
importante para o sucesso quanto o projeto tcnico. A impresso
que o site causa no visitante um cliente em potencial reflete na
credibilidade da empresa, podendo ocasionar at mesmo a perda
de negcios.

A evoluo contnua presente nas WebApps refora a necessidade de implementao da engenharia na Web como agente
facilitador na fase de manuteno. Em contrapartida, o imediatismo
se apresenta como grande obstculo. Dessa forma, preciso haver equilbrio e planejamento por parte da equipe de desenvolvimento.
3. ENGENHARIA PARA WEBAPPS
A engenharia para Web no igual engenharia de
software, mas utiliza muitos dos seus conceitos e princpios fundamentais, com nfase nas mesmas atividades tcnicas e de gesto. H pequenas diferenas no modo como essas atividades so
conduzidas, mas o princpio que dita uma abordagem disciplinada
para o desenvolvimento de um sistema baseado em computador
o mesmo.
De acordo com Murugesan (apud PRESSMAN, 2002,
p.752),
A engenharia da Web diz respeito ao estabelecimento e uso de princpios cientficos slidos, de engenharia e de gesto, e abordagens
disciplinadas e sistemticas para o bem-sucedido desenvolvimento,
disposio e manuteno de sistemas e aplicaes de alta qualidade
baseados na Web.

Ao mesmo tempo em que adota muitos princpios da engenharia de software, a engenharia para a Web incorpora novas
abordagens, metodologias, ferramentas, tcnicas e normas para
atender os requisitos exclusivos dos sistemas para a Web. Conforme afirma Murugesan (2000), o desenvolvimento de sistemas
para a Web significantemente diferente do desenvolvimento de
software tradicional e apresenta vrios desafios adicionais.
McDonald e Welland (2001), atravs de pesquisas, constataram que grande parte dos desenvolvedores para a Web no
utiliza um processo de desenvolvimento bem definido e documentado. Dos que utilizam, poucos fazem uso de modelos padro-

Revista de divulgao
tcnico-cientfica do ICPG

Vol. 2 n. 5 - abr.-jun./2004
ISSN 1807-2836

51

mento de uma aplicao, bem como a ordem em que elas devem

ser executadas.

nizados pela indstria de software, sendo que os demais utilizam

modelos criados dentro da prpria organizao.
Atualmente, a maioria das empresas de desenvolvimento
Web tem a atividade de implementao como o foco de seu processo. Etapas como anlise de requisitos e projeto, normalmente,
esto combinadas no comeo do projeto, e as atividades de teste
so conduzidas em conjunto com a implementao.
A aplicao da engenharia se d atravs da utilizao dos
modelos de processo de desenvolvimento. Um modelo de processo determina as fases e atividades necessrias ao desenvolvi-

3.1 MODELOS DE PROCESSO DE DESENVOLVIMENTO

Os modelos mais utilizados para WebApps so: modelo
cascata, modelo evolutivo baseado em prototipao e modelo
espiral. Esses modelos, detalhados a seguir, so extenses e adaptaes dos modelos utilizados na engenharia de software.

Figura 2 Modelo Cascata

Definio do problema
e explorao
Anlise e especificao
de requisitos
Design do web site e
prototipao
Implementao e testes
dos mdulos do site
Integrao e testes
completos do site
Instalao, operao e
manuteno
Fonte: Leite (2002).

A figura 2 mostra o modelo cascata. As atividades do processo de desenvolvimento so estruturadas em uma cascata de
etapas, onde a sada de uma a entrada para a prxima. O modelo
introduz a separao das atividades de definio, anlise e design
da atividade de implementao que o centro das atenes no

desenvolvimento Web.
Segundo Leite (2002), o modelo cascata criticado por ser
linear, ou seja, cada atividade apenas deve ser iniciada quando a
outra estiver terminada e verificada.

Figura 3 Modelo Evolutivo Baseado em Prototipao

Fonte: Leite (2002).

O modelo evolutivo, demonstrado na figura 3, descreve

um processo no qual o software deve ser desenvolvido de forma
a evoluir a partir de prottipos iniciais.

A vantagem desse modelo est em permitir a verificao

antecipada do produto final por clientes e usurios, permitindo a
correo dos problemas detectados. Por outro lado, como os re-

52

Vol. 2 n. 5 - abr.-jun./2004
ISSN 1807-2836

Revista de divulgao
tcnico-cientfica do ICPG

quisitos esto sempre sendo revistos a cada ciclo de desenvolvimento, torna-se praticamente impossvel estimar custos e prazos

e planejar as atividades de desenvolvimento.

Figura 4 Modelo Espiral

Fonte: Pressman (2002).

No modelo espiral, ilustrado na figura 4, o processo de

desenvolvimento representado como um espiral ao invs de
uma seqncia de atividades.
O processo incremental e iterativo, visando atender os
curtos prazos exigidos no desenvolvimento de WebApps. O fato
de ser incremental permite ao processo lidar melhor com um conjunto de requisitos incerto ou sujeito a alteraes.
Cada incremento produzido como parte do processo revisto durante a avaliao do cliente. Nesse ponto, pode haver
solicitao de mudanas, sendo estas ento integradas ao sistema no prximo ciclo do processo incremental. (PRESSMAN, 2002)
Cada um dos modelos anteriormente expostos tem suas
prprias caractersticas, particularidades e ordem para cada uma
das etapas. Porm, independente do modelo a ser seguido, a
implementao de engenharia para Web deve contemplar as seguintes atividades:
definio do problema;
anlise e especificao de requisitos;
design (estrutura organizacional, navegacional, contedo, interface da pgina, funcional);
implementao;
testes;
instalao;
evoluo e manuteno.
3.1.1. DEFINIO DO PROBLEMA
nessa atividade que cliente e desenvolvedor estabelecem as metas e os objetivos para a construo da aplicao Web.
So levantados os propsitos e a motivao para o site, como por
exemplo, aumentar as vendas, aprimorar o atendimento ao cliente,
oferecer novos servios e acessar as informaes.

Tambm so definidos os propsitos da aplicao e o pblico ao qual se destina. Para tanto, necessrio desenvolver um
perfil dos usurios. Esse perfil deve abranger as caractersticas
relevantes relacionadas aos usurios em potencial, como por exemplo, seus conhecimentos e preferncias.
Ainda na fase inicial, importante que, apontadas as possveis solues para que se atinjam os objetivos traados para a
aplicao, seja realizado um estudo de viabilidade das mesmas.
3.1.2. ANLISE E ESPECIFICAO DE REQUISITOS
Na anlise, so estabelecidos os requisitos tcnicos da
aplicao Web. So identificados requisitos de dados, funcionais
e comportamentais, a fim de criar um modelo completo de anlise
para a aplicao.
Pressman (2002) subdivide a anlise para a engenharia Web
em quatro tipos:
anlise de contedo: identificado todo o contedo que
ser fornecido pela aplicao; esse contedo pode ser
disponibilizado atravs de texto, grficos, imagens, vdeo
ou udio;
anlise de interao: descrito o modo como o usurio
ir interagir com a aplicao Web;
anlise funcional: so descritas todas as operaes e
funes da aplicao;
anlise de configurao: devem ser detalhados o ambiente e a infra-estrutura na qual a aplicao ir residir, podendo ser na internet, Intranet ou em uma Extranet.
A evoluo contnua das aplicaes Web torna obsoleta a
documentao desenvolvida na fase de anlise. Esse fato faz com
que os desenvolvedores simplesmente no faam a especificao
dos requisitos. Porm, necessria a definio de um modelo de
anlise como base para a atividade de design.

Revista de divulgao
tcnico-cientfica do ICPG

Vol. 2 n. 5 - abr.-jun./2004
ISSN 1807-2836

53

3.1.3. DESIGN

3.1.3.3. INTERFACE

A atividade de design, tambm conhecida como projeto,

abrange os aspectos relacionados estrutura global da aplicao, navegao e interface.

Em aplicaes para a Web, a interface tem um papel muito

importante pois causa a primeira impresso no usurio. Independente do contedo, uma interface mal projetada pode desapontar
o usurio, fazendo com que procure outro site. Conforme Pressman
(2002), uma interface bem projetada melhora a percepo do usurio em relao ao contedo ou aos servios oferecidos pelo site.
O aspecto mais relevante interface, ali-la usabilidade.
Muitas vezes, o projetista se preocupa em utilizar as mais recentes inovaes tecnolgicas e oferecer muitas opes na aplicao, mas acaba criando uma aplicao difcil de usar.
Nielsen (2000) sugere as seguintes diretrizes para criar uma
boa interface:
evitar erros do servidor;
criar pginas com pequenas quantidades de texto;
evitar avisos de Em Construo;
colocar informaes importantes no topo, de forma que
apaream logo que a pgina for carregada;
disponibilizar menus e barras de navegao em todas as
pginas em que o usurio ir navegar;
no contar com as funcionalidades do browser;
opes de navegao devem ser intuitivas.

3.1.3.1. ESTRUTURA GLOBAL DAAPLICAO

De acordo com Pressman (2002), a definio da estrutura
da aplicao para Web deve buscar atingir as metas estabelecidas,
levar em considerao o contedo que ser apresentado e os
usurios que iro utiliz-las.
Powell (apud PRESSMAN, 2002, p.762) apresenta quatro
diferentes estruturas para WebApps. So elas:
estrutura linear: utilizada quando h seqncia previsvel de interaes; um exemplo seriam apresentaes de
tutoriais com vrias pginas de informao, sendo que,
nesse caso, o contedo predominantemente linear;
estrutura em malha: aplicada quando o contedo pode
ser organizado em categorias de duas ou mais dimenses; um exemplo seria um site de comrcio eletrnico,
onde os produtos so apresentados por tipo ou fabricante, e o usurio tem a opo de escolher como deseja
navegar;
estrutura hierrquica: a estrutura mais comum e permite rpida navegao; o usurio pode navegar por toda a
hierarquia, tanto vertical como horizontalmente;
estrutura em rede ou pura teia: similar ao modo como
funciona a arquitetura de sistemas orientados a objetos;
cada componente (as pginas) projetado de modo que
possa passar comandos (via links de hipertexto) para
qualquer outro componente do sistema; essa abordagem cria bastante flexibilidade de navegao, mas pode
confundir o usurio.
Uma WebApp pode combinar diferentes estruturas. O objetivo deve ser criar a estrutura ideal para o contedo a ser apresentado.
3.1.3.2. NAVEGAO
No projeto de navegao, so definidos os caminhos de
navegao que permitem ao usurio ter acesso ao contedo e aos
servios da aplicao. Para isso, preciso identificar as permisses de navegao para diferentes usurios e definir os mecanismos para realizar a navegao.
Nessa etapa, determinada a maneira como os links sero
identificados. Dentre as opes, esto: textos, cones e botes. O
projetista deve escolher as opes apropriadas ao contedo, tendo como objetivo criar uma interface amigvel.
De acordo com Pressman (2002), alm de convenes como
utilizar cor para ressaltar links e para indicar links j percorridos,
um projeto de navegao deve incluir auxlios como mapas do
site, sumrios, ndices e mecanismos de busca.

3.1.4. IMPLEMENTAO
Essa atividade tambm chamada de programao, construo ou codificao da WebApp. A implementao o processo
onde a aplicao desenvolvida utilizando uma linguagem de
programao e deve atender as especificaes resultantes das
atividades anteriores.
3.1.5. TESTES
Assim como na engenharia de software, a engenharia para
a Web tem a atividade de teste, visando encontrar erros. Porm,
os testes em WebApps so um desafio ainda maior, pois esses
aplicativos podem ser acessados utilizando diferentes browsers,
sistemas operacionais, plataformas de hardware e protocolos de
comunicao.
Pressman (2002) apresenta uma abordagem que adota os
princpios bsicos para o teste de todo software e aplica estratgias e tticas que so recomendadas para sistemas orientados a
objetos:
revisar o contedo a fim de descobrir erros de grafia,
gramtica, consistncia do contedo, representaes
grficas, dentre outros;
revisar o projeto de navegao para descobrir erros nos
links e/ou na permisso de acesso de cada usurio;
testar cada pgina focando seu processamento;
testar a funcionalidade geral e contedo fornecido;
testar a compatibilidade da aplicao em diferentes configuraes (diferentes browsers, sistemas operacionais,
plataformas de hardware e protocolos de comunicao).

54

Vol. 2 n. 5 - abr.-jun./2004
ISSN 1807-2836

Por fim, de grande valia submeter um grupo de usurios

a testes da aplicao de forma monitorada, de modo a revisar
todos os itens acima, bem como encontrar erros de desempenho e
confiabilidade do aplicativo.
3.1.6. INSTALAO
A instalao visa implantao do sistema para a utilizao pelos usurios. Nessa atividade, tambm so realizadas as
configuraes, tanto de hardware como da aplicao (parmetros
iniciais), necessrias para que a aplicao tenha seu desempenho
conforme o planejado.
Realiza-se, tambm, a verificao da infra-estrutura definida na etapa de anlise e especificao de requisitos, envolvendo
banco de dados, servidores, estrutura de rede para a distribuio
da aplicao (internet, Intranet ou Extranet), entre outros.
3.1.7. EVOLUO E MANUTENO
De acordo com Leite (2002), a manuteno a atividade
destinada a assegurar a qualidade da aplicao durante a fase de
operao.
A manuteno se faz necessria para que o sistema possa
ser transportado para outras plataformas de hardware e de sistemas operacionais, para satisfazer novos requisitos dos usurios
ou para corrigir eventuais erros. Ela pode envolver a correo de
erros no detectados durante os testes, reviso da funcionalidade, da interface com o usurio, da arquitetura da aplicao, entre
outros, de forma que novos requisitos sejam satisfeitos.
4. CONSIDERAES FINAIS
A forma como as aplicaes para a Web so desenvolvidas reflete diretamente em seu desempenho, qualidade e integridade, tornando-se de vital importncia para seu sucesso.
Tipicamente, um sistema Web desenvolvido sem planejamento ou projeto, partindo-se diretamente para a implementao.
A engenharia Web surgiu com o objetivo de levar para a Web as
abordagens da engenharia de software, considerando-se suas
caractersticas especficas, como a maior preocupao com design
e segurana, bem como o fato de evolurem continuamente.
O processo de engenharia Web tem a relevante caracterstica de combinar tarefas tcnicas e no-tcnicas, requerendo o
envolvimento de diferentes habilidades. As competncias exigidas
so muitas e no costumam ser encontradas em um nico profissional, mas sim em uma equipe.
A constante evoluo das WebApps, certamente, o maior
empecilho para a adoo da engenharia Web nas organizaes.
Porm, todo processo envolvendo planejamento adequado traz
inmeras vantagens, como possibilidade de estimar de forma mais
precisa custos e prazos, facilidade de manuteno, suporte e administrao da aplicao.
Devido importncia da Web na atual era da informao,
torna-se imprescindvel a adoo das abordagens disciplinadas
da engenharia como forma de projetar aplicaes confiveis e de
qualidade.

Revista de divulgao
tcnico-cientfica do ICPG

5. REFERNCIAS
FERNANDES, Daniel Batista. Metodologia dinmica para o desenvolvimento de sistemas versteis. So Paulo: rica, 1999.
LEITE, Jair Cavalcanti. Desenvolvimento e design de sistemas
web. Natal, 2002. Disponvel em http://www.dimap.ufrn.br/~jair/.
Acesso em: 30 de julho de 2003.
MCDONALD, Andrew; WELLAND, Ray. Web Engineering in
Practice. University of Glasgow. Scotland, maio de 2001. Disponvel em http://www.dcs.gla.ac.uk/~andrew/. Acesso em: 02 de
agosto de 2003.
MURUGESAN, San. Web engineering for sucessful web
application development. University Of Western Sydney. Austrlia, outubro de 2000. Disponvel em http://aeims.uws.edu.au/
webehome/talks.htm. Acesso em: 30 de julho de 2003.
NIELSEN, Jacob. Designing Web Usability: The practice of
simplicity. Indianapolis: New Riders Publishing, 2000.
PRESSMAN, Roger S. Engenharia de software. 5.a ed. Rio de
Janeiro: McGraw-Hill, 2002.