Engenharia Web

5/13/2018 Engenharia Web - slidepdf.com

http://slidepdf.com/reader/full/engenharia-web 1/28

UNIVERSIDADE DO SAGRADO CORAÇÃO

ENGENHARIA WEB

BAURU - 2007



UNIVERSIDADE DO SAGRADO CORAÇÃO

ENGENHARIA WEB

Orientador: Profº Ms. Ronaldo Martins da

Costa

Andréa Luisa de MATOS

Talita Cristina Pagani BRITTO

BAURU - 2007



SUMÁRIO

LISTA DE FIGURAS.....................................................................................................................4

LISTA DE TABELAS.....................................................................................................................5

1. INTRODUÇÃO...........................................................................................................................6

2. JUSTIFICATIVA........................................................................................................................7

3. OBJETIVOS................................................................................................................................8

3.1. Objetivos Gerais....................................................................................................................8

3.2. Objetivos Específicos............................................................................................................84. DESENVOLVIMENTO..............................................................................................................9

4.1. Considerações sobre WebApps............................................................................................9

4.1.1. Como funciona a web..............................................................................................................................94.1.2. O que são WebApp.................................................................................................................................9

4.2. Engenharia Web..................................................................................................................13

4.2.1. Definição...............................................................................................................................................134.2.2. Problemas atuais com as aplicações web..............................................................................................13

4.2.3. Conceitos complementares à Engenharia de Software clássica............................................................154.3. Nova abordagem de desenvolvimento baseada na Engenharia Web.................................18

5. CONCLUSÃO...........................................................................................................................22

6. REFERÊNCIAS BIBLIOGRÁFICAS......................................................................................23

ANEXO: ANÁLISE DE APLICAÇÕES WEB............................................................................25

3



LISTA DE FIGURAS

Fig. 1 – Representação sintética do acesso a serviços da web........................................................9

Fig. 2 – Representação do modelo de janelas em cascata............................................................10

Fig. 3 – Fluxo de navegação em rede (teia).................................................................................11

Fig. 4 – Síntese do modelo comum de desenvolvimento de aplicações web...............................15

Fig. 5 – Proposta de Modelo de desenvolvimento baseado na Engenharia Web.........................19

Fig. 6 – Tela de cadastro do Remember the Milk.........................................................................25

Fig. 7 – Feedback após a realização do cadastro..........................................................................26

Fig. 8 – Tela de utilização do Remember the Milk.......................................................................26

Fig. 9 - Slideshare..........................................................................................................................27

Fig. 10 – Wikipédia.......................................................................................................................27

Fig. 11 – GoogleDocs....................................................................................................................28

4



LISTA DE TABELAS

Tabela 1 – Comparações do Software Tradicional com o Software Web....................................12

Tabela 2 – Acréscimos nos requisitos funcionais das aplicações web.........................................17

5



1. INTRODUÇÃO

Podemos definir um software como um conjunto composto pelos programas,

pelas especificações de requisitos, a documentação do sistema e a manutenção dosistema.

A Engenharia de Software é uma disciplina ligada a Ciência da Computação,

que surgiu justamente da necessidade de criar procedimentos adequados para

resolução de problemas de software e, com isso, construir produtos funcionais de

alta qualidade, ou seja, “ela se ocupa de todos os aspectos de produção de

software” (SOMMERVILLE, 2003).

Atualmente, a sociedade de um modo geral depende do uso de software,pois, entre suas diversas funções, ele facilita o acesso à informação, agiliza a

produção e o fluxo de trabalho dentro das empresas, possibilita gerenciar e controlar

de modo eficiente as informações e permite criar um ambiente seguro de interação

entre os usuários, etc.

A Engenharia de Software atualmente é acrescida de novos paradigmas, se

comparada com os seus primórdios, concentrando também seus esforços nas

tecnologias e práticas que englobam as linguagens de programação, bases de

dados, ferramentas, plataformas, standards e processos.

Neste contexto, a Engenharia Web surgiu como uma nova disciplina apoiada

na Engenharia de Software, pois os processos de desenvolvimento de software têm

passado por grandes transições ao longo dos anos, e "com o advento das

aplicações de e-Business e e-Commerce, e ainda mais com aplicações para a Web

2.0, este tipo de engenharia tornou-se mais relevante para as equipes de

desenvolvimento" (Wikipédia), criando um cenário mais desafiador para a

Engenharia de Software, cujos paradigmas não estão sendo suficientes para atender

às características destas novas aplicações.

Considerando estes aspectos, podemos afirmar que as aplicações Web

“possuem um comportamento mais complexo e possuem necessidades específicas

quanto à usabilidade, performance, segurança e evolução” (Wikipédia), requerendo,

dessa forma, uma abordagem diferenciada para atender a estes novos requisitos.

6

http://pt.wikipedia.org/wiki/Web_2.0






2. JUSTIFICATIVA

O software esta cada vez mais presente na rotina das pessoas e com a

intensa massificação da internet e as novas tecnologias incorporadas a ela, asWebApp – nome dado às aplicações desenvolvidas para internet – caracterizam

uma nova categoria de software, ainda em expansão, mas já amplamente utilizadas

e que possuem características que não estão definidas na engenharia de software

convencional e por isso merecem uma abordagem diferenciada.

Segundo um levantamento da Cutter Consortium, em novembro de 2002, as

métricas sobre os problemas encontrados no projeto de websites apontavam que

84% não satisfaziam as necessidades do cliente, 53% não possuíam asfuncionalidades, 79% atrasaram o cronograma, 63% excederam o orçamento e 52%

possuíam qualidade pobre.

7



3. OBJETIVOS

3.1. Objetivos Gerais

Os principais objetivos a serem atingidos por este trabalho são:

a) expor as diferenças entre o software convencional e o software na

plataforma Web;

b) conceituar a Engenharia Web;

c) identificar novas abordagens da Engenharia de Software para a Web.

3.2. Objetivos Específicos

Os objetivos específicos são:

a) Identificar o funcionamento da Web e com base nisto comparar o

funcionamento de aplicações convencionais e aplicações Web;

b) Abordar limites da Engenharia de Software clássica;

c) Expor problemas encontrados no desenvolvimento das aplicações;

d) Propor padrões e modelos de processos eficientes para a Engenharia Web.

8



4. DESENVOLVIMENTO

4.1. Considerações sobre WebApps

4.1.1. Como funciona a web

A web é um dos principais serviços da internet que possibilita acesso a

diversos conteúdos de hipertexto, tais como textos, gráficos, vídeos, etc., por meio

de páginas que são acessadas via hiperlink, um texto clicável capaz de realizar a

ligação entre uma página e outra.

Diferentemente do software tradicional que, em sua maioria, executa namáquina do cliente e necessita de instalação e configuração específica, os serviços

da web são centralizados em um servidor, onde diversas pessoas podem realizar

requisições ao conteúdo que deseja acessar, por meio de um browser .

Fig. 1 – Representação sintética do acesso a serviços da web

No modelo orientado a hipertexto, por mais que a ligação entre as páginas

seja estruturada de modo hierárquico, não é possível determinar a linearidade da

navegação realizada. Apesar de a organização hierárquica ser mais recomendada

(Leite, 2004). a organização em rede tem sido mais utilizada atualmente, porém,

ainda representa um problema no desenvolvimento de aplicações web, como será

visto nos próximos tópicos.

4.1.2. O que são WebApp

O termo WebApp é nomenclatura geral a todo tipo de aplicação desenvolvida

em plataforma web, incluindo websites com uma finalidade específica, sistemas

administrativos/comerciais, e intranets. Frequentemente, o termo webware também

é usado para descrever aplicações web, referindo-se mais especificamente às

aplicações para Web 2.0, considerada uma nova geração dos serviços baseados na

web e que trouxe novos paradigmas para estas aplicações caracterizadas

9



principalmente pelos conceitos de interação, compartilhamento, comunicação e

projeto centrado no usuário, ou seja, aproveitamento da inteligência coletiva. Os

webwares têm sido considerados uma tendência para a substituição do software

desktop pela aplicação web.

4.1.3. Comparações entre o software convencional e o software web

Baseado nos modelos de navegação, os softwares convencionais

consolidaram o modelo de janelas em cascata, onde uma tela da aplicação leva a

outra em uma direção linear, possuindo uma janela pai e as janelas filhas, e onde as

ações realizadas se restringem apenas ao escopo da aplicação.

Fig. 2 – Representação do modelo de janelas em cascata

Já as WebApps, como visto anteriormente, possuem um modelo de

navegação em rede, ou teia, como também é chamado. Mesmo existindo a

hierarquia entre determinadas páginas, diversos elementos contribuem para aformação de um fluxo de navegação não-linear, como os botões de voltar e avançar

no navegador, o acesso direto através da URL ou links contidos em diversas

páginas que apontam para o mesmo caminho. Nas WebApps é possível, inclusive,

concluir um processo referenciando um aplicação externa, um outro website, saindo

do escopo daquela aplicação.

10



Fig. 3 – Fluxo de navegação em rede (teia)

Através das observações feitas sobre diversas aplicações e sistemas web e

com base em algumas considerações de Murugesan and Ginige (2004), foi possível

identificar as principais características que diferem o desenvolvimento de um

software tradicional e de um software para a web:

Software Convencional Software Web

Consolidou o modelo de janela em

cascata

Modelo de navegação e interação por

meio de hipertextoPadrão de interface (cores, iconografia,

posicionamento dos elementos)

semelhante, ou seja, é mais consistente

Interface possui características distintas

dependendo do foco do projeto (usuário

precisa aprender a utilizar vários

softwares de modo diferente)Geralmente é desenvolvido com base

em apenas uma linguagem de

programação

Envolve técnicas e procedimentos com

uso de várias linguagens para fins

específicos (Ex.: PHP, HTML,

JavaScript, XML, CSS, etc.)

Aplicações homogêneas, desenvolvidaspara rodar em ambiente específico

Aplicações heterogêneas: é mais difícildefinir perfil de hardware, plataforma,

largura de bandaTempo de resposta rápido, pois

geralmente o sistema atua na mesma

máquina

Tempo de resposta relativamente mais

demorado, depende de N fatores:

pessoas acessando a aplicação no

mesmo momento, conexão com o

servidor, etc.

Descentralização de informações, excetoquando o software é de uso

Centralização das informações, sempre,pois o usuário não precisa instalar a

11



compartilhado através de uma rede aplicação e os dados estão sempre

disponíveis no servidor Linearidade e consistência de

navegação: o usuário não consegueacessar uma tela da aplicação

diretamente sem interagir com um

componente como, por exemplo, um

botão

Usuários podem acessar as páginas

através da URL. Em alguns casos estaoperação é valida e desejada e outras

vezes não, podendo prejudicar a

segurança do sistema

Geralmente, precisam estar disponíveis

apenas para um tipo de dispositivo

Precisam estar disponíveis em diferentes

formatos e dispositivos e suportar

hardware, software e redes com grande

variedade de velocidade de acessoConteúdo é fixo e são

inseridas/alteradas apenas as

informações inseridas no sistema

Não dependem do usuário somente para

a alimentação de informações, mas de

conteúdo também. Dependem, em maior

parte, de conteúdo produzido pelos

próprios usuários. Principalmente com o

advento da web 2.0, estas aplicações

tiveram uma tendência a aumentar ograu de interatividade e conteúdo

colaborativo. As informações estão disponíveis

apenas na máquina onde está instalada

a aplicação

Portabilidade e mobilidade: as

informações podem ser acessadas a

partir de qualquer computador com

acesso à internet e, em alguns casos,

em outros tipos de dispositivos tambémTabela 1 – Comparações do Software Tradicional com o Software Web

12



4.2. Engenharia Web

4.2.1. Definição

Apesar de a engenharia de software estar em constante processo de

evolução, muitos de seus paradigmas deviam receber uma nova abordagem para

atender os requisitos dos produtos e serviços baseados na web. Desta premissa

surge a Engenharia Web, uma disciplina que acrescenta novas competências à

Engenharia de Software clássica, como o modelo de Orientação a Objetos e a

Engenharia de Conhecimento. Por ser mais complexa, é preciso levar em

consideração outros fatores que vão além dos processos de especificação,

documentação, testes e codificação, pois, segundo Formaggio (18/04/2007), "Um

processo de engenharia web deve ter também a preocupação com questões

relacionadas à SEO1, design, ergodesign, conteúdo, entre outras disciplinas, que

deverão produzir artefatos importantes para o processo de desenvolvimento", ou

seja, o desenvolvimento para uma aplicação web deve conter uma equipe com uma

multidisciplinariedade maior que a Engenharia de Software clássica. Além disso, o

processo deve envolver planejamento, arquitetura web e de sistemas, testes,

controle de qualidade, avaliação de performance e atualização contínua(manutenção evolutiva).

A essência da Engenharia Web, de acordo com Murugesan (2004) é

“gerenciar com sucesso a diversidade e complexidade do desenvolvimento de

aplicações web e evitar potenciais falhas que podem ter sérias implicações”.

4.2.2. Problemas atuais com as aplicações web

Com o crescente desenvolvimento das WebApps, elas têm se tornado maiscomplexas e necessitam de uma atenção especial a questões de escalabilidade,

conteúdo, performance, segurança e etc. Entre os principais problemas enfrentados

no desenvolvimento de websites, é possível citar a rápida evolução tecnológica,

demanda constante de atualização das informações, falta de modelo de processos,

grau de complexidade, falta de testes eficientes para mensurar a usabilidade,

planejamento e métodos inadequado, falta de documentação e dificuldades de

implementação e manutenção, etc.

1 Search Engine Optimization: conjunto de técnicas que tem por objetivo otimizar o conteúdo de um site para que ele seja melhor

indexado pelos mecanismos de busca.

13



Entre os problemas mencionados acima, os problemas constantes têm

sido com relação ao planejamento, usabilidade, manutenção e escalabilidade.

Abaixo são listadas as principais implicações no desenvolvimento de WebApps:

• Planejamento e metodologias de desenvolvimento: Com a rápida

evolução tecnológica, há um surgimento massivo de novas técnicas que tem

por finalidade facilitar o desenvolvimento das WebApp e algumas destas

práticas acabam se tornando padrões. Em alguns casos, uma aplicação web

não está planejada e organizada para que possa aplicar estes padrões;

• Escalabilidade: Uma aplicação web deve ser capaz de suportar um

crescente número de usuários utilizando o sistema e ter a capacidade de

incrementar seus recursos e funcionalidades. Esta ainda é uma questão

complexa no desenvolvimento web e envolve outras características, incluindo

o modelo de processo adotado;

• Metodologia de Processos: Apesar de uma consciência maior dentro das

empresas quanto a esta questão, muitas ainda adotam uma metodologia de

processo seqüencial, em cascata ou camadas (ver figura 4);

• Qualificação da Equipe de Desenvolvimento: Muitos profissionais nãoestão devidamente capacitados para atuar em determinada etapa do

desenvolvimento e há casos em que um desenvolvedor deve assumir

diversos papéis dentro do processo de desenvolvimento, sobrecarregando o

profissional e prejudicando a qualidade do sistema;

• Usabilidade de sistemas: devido ao modelo de navegação de hipertexto,

projetar a facilidade de uso das aplicações web têm se tornado uma tarefa

mais intricada para os engenheiros de software. Isso porque é preciso levar em consideração aspectos diretamente relacionados com os campos de

design e IHC, entre outros, tais como ergonomia, design de interfaces,

arquitetura de informação, diagramação, gestalt, etc. O conjunto das técnicas

destes aspectos têm grande relevância comprovada na usabilidade de

interfaces web, segundo diversos autores e pesquisadores da área, tais como

Nielsen(2002), Norman(2003) e Memória(2005);

• Manutenibilidade: muitas aplicações web dependem, em grande parte, do

grande tráfego de informações providas pelos usuários. Neste contexto,

falhas no sistema podem ocorrer e, segundo Moraes apud Pressman (2001),

14



a o sistema deve possuir facilidade de correção, adaptabilidade e

extensibilidade, para que possa atender às necessidades da aplicação e dos

próprios usuários;

• Aplicação de novas tecnologias: muitas tecnologias relativamente novas

têm sido incorporadas em larga escala nos projetos de aplicações web. Estas

tecnologias ainda podem apresentar implicações que podem prejudicar a

performance e confiabilidade do sistema se não forem bem aplicadas.

Tomando como exemplo o AJAX: é uma técnica que tem auxiliado muito no

desenvolvimento de WebApps e que trouxe estas aplicações mais próximas

do comportamento das aplicações desktop, mas seu uso tem se intensificado

sem que fossem analisados os contras que as tecnologia pode vir a trazer se

não for bem aplicada e tratada de modo eficiente nas aplicações.

Fig. 4 – Síntese do modelo comum de desenvolvimento de aplicações web

4.2.3. Conceitos complementares à Engenharia de Software clássica

15



A escalabilidade de Aplicações Web é uma das principais características a ser

considerada no desenvolvimento das WebApp, pois estas necessitam de uma

atualização e evolução mais intensa do que as aplicações convencionais, afinal, as

mudanças nas práticas e nas tecnologias aplicadas são constantes. Por isso, a

estrutura de códigos e estrutura de diretórios (inclusive considerada uma melhor

prática de desenvolvimento por "modularizar" as aplicações) devem permitir o

crescimento da aplicação, sem alterações nas regras de negócio.

Outro fator altamente relevante é o planejamento e a construção de

interfaces, que tem influenciado, inclusive, as interfaces dos softwares

convencionais. Segundo WILEY (2003):

"Devido à grande disponibilidade de Web browsers e a eficiência do

HTML e de suas capacidades de processamento associadas, cada

vez mais as interfaces com o usuário estão sendo construídas como

interfaces com base na Web. [...] As interfaces com base na web

estão substituindo as interfaces com base em formulários, para uma

grande variedade de sistemas ligados."

Como visto anteriormente o design tem grande influência no modo como aspessoas irão utilizar com sucesso uma aplicação web e está diretamente

relacionado à usabilidade. Isso porque os princípios do design de interface que

incluem também as leis da gestalt2 contribuem para orientar os usuários dentro de

aplicações web e unificar consistentemente todas as partes da aplicação de modo

que o acesso às informações seja facilitado. O design é um elemento importante não

somente para compor produtos esteticamente agradáveis, mas de fácil utilização por

parte dos utilizadores. A especificação de requisitos funcionais de aplicações web não diferem muito

do modo como é feito para aplicações desktop. Já para os requisitos não funcionais,

algumas propriedades requerem métricas diferentes para mensurar a qualidade e

eficiência do produto, como descrito na tabela abaixo:

Requisito não funcional Métrica

2 O termo Gestalt, no seu sentido mais amplo, significa uma interação de partes em oposição à soma do “todo”. É comumente

traduzido para o inglês, espanhol e português como estrutura, figura, forma. A teoria da Gestalt, gerada através de pesquisa eexperimentação, sugere uma resposta ao porquê de umas formas agradarem mais e outras não. Ela afirma também que o

cérebro só consegue perceber, decodificar e assimilar uma imagem ou conceito pela sua totalidade e não pelas partes separadas

que formam este todo.

16



Velocidade Tempo de resposta usuário/servidor

(requisição), incluindo o carregamento

de páginas e o processamento de

transações efetuadas do lado do

servidor Tamanho Espaço utilizado em disco e quantidade

de RAM para rodar o servidor. Porém, o

tamanho total que os arquivos do

sistema ocupa não influencia

diretamente na performance, uma vez

que as páginas são carregadasindividualmente e somente o conteúdo

necessário é processado. Além disso, a

aplicação não precisa ser carregada na

memória da máquina do usuário, exceto

no caso de Java Applets e

Frameworks .NET, que podem rodar na

estação de trabalho do cliente.Facilidade de Uso Tempo que os usuários utilizam para

encontrar uma informação ou

funcionalidade

Tempo para realizar tarefasPortabilidade Como na maioria nos projetos de

aplicações web não há precisão quanto

aos sistemas-alvo, as WebApp devem

manter a capacidade de seremexecutadas em diversos navegadores,

resoluções de tela e sistemas

operacionais distintosTabela 2 – Acréscimos nos requisitos funcionais das aplicações web

Outra grande questão a ser considerada cada vez mais pelos projetistas de

software é o foco no usuário. Este quesito hoje é fundamental para direcionar o

17



processo de desenvolvimento em todas as etapas. Isso porque, mais do que

ferramentas de BI (Business Inteligence)3, as WebApps têm tido papel como

ferramentas de gerenciamento e aproveitamento da inteligência coletiva. Este é um

dos princípios da Web 2.0, um movimento que surtiu efeito inclusive dentro das

organizações, nas intranets, com a utilização de ferramentas de comunicação

multidirecional para compartilhar informações (no caso, as “wikis”, bibliotecas

coletivas, comunidades, fóruns), até aplicações que auxiliam no gerenciamento de

tarefas e fluxo de trabalho (workflow), etc. Em suma, as pessoas têm sido

importantes para o desenvolvimento de WebApps, desde o planejamento (projetar

de acordo com as necessidades do usuários) até os testes (participação ativa para

detectar problemas). Saber projetar de modo a transformar a aplicação web em uma

aplicação eficiente para o maior aproveitamento da inteligência coletiva é uma

tendência presente no mercado e um desafio para os desenvolvedores.

4.3. Nova abordagem de desenvolvimento baseada na Engenharia Web

Considerando todos os conceitos vistos até o momento, é possível propor melhores práticas na metodologia de desenvolvimento de aplicações web a fim de

torná-las mais flexíveis, escaláveis e usáveis.

• Equipe de desenvolvimento: Se na Engenharia de Software eram

necessários Gerentes de Projetos, Analistas e Programadores, um

ambiente de desenvolvimento web deve conter uma equipe

completamente multidisciplinar. Isso inclui: Engenheiros de Software, Analistas, Desenvolvedores, Designers, Arquitetos de Informação e

Engenheiros de Usabilidade.

• Metodologia de Desenvolvimento e Testes de Usabilidade: O

modelo visto na Fig. 4 tem certos custos no desenvolvimento de

WebApps. Atualmente, é possível adotar um modelo onde os

profissionais poderão trabalhar paralelamente em cada etapa do

desenvolvimento, devido a outro fator, a ser visto no item seguinte.

3 O termo Business Intelligence (BI), pode ser traduzido como Inteligência de negócios, refere-se ao processo de coleta,

organização, análise, compartilhamento e monitoração de informações que oferecem suporte a gestão de negócios.

18



Dessa forma, há a redução de tempo no desenvolvimento e a

produtividade aumenta. Baseado nos conceitos de Memória(2005) e

aprimorando-os de acordo com padrões web, a serem tratados a

seguir, tem-se a a figura 5 que ilustra este modelo:

Fig. 5 – Proposta de Modelo de desenvolvimento baseado na Engenharia Web

Neste modelo, as etapas envolvendo design e tecnologia ocorrem

concorrentemente, dando maior independência aos profissionais e maior agilidade

no desenvolvimento. Note que na etapa de Prototipação da Interface devem ser

aplicados testes de usabilidade preliminares que podem ajudar a minimizar outros

erros usabilidade do sistema provenientes das etapas posteriores e que irão gerar um retrabalho. Os testes de usabilidade devem ser aplicados durante todo o

19



processo e, segundo Memória apud Nielsen(2005), testes com 5 usuários são

capazes de detectar até 85% das ocorrências de erros. Outra forma de aplicar os

testes sem a presença de usuários é a Avaliação Heurísticas, que consiste de um

conjunto de normas de usabilidade onde os próprios analistas de usabilidade

realizam um check list para verificar se estes erros ocorrem dentro da aplicação.

Abaixo, as 10 heurísticas de Nielsen:

1. Visibilidade da situação atual do sistema: o sistema deve oferecer

feedback aos usuários para que eles se mantenham informados sobre o

status do sistema;

2. Compatibilidade do sistema com o mundo real: o sistema precisa

utilizar diálogos e simples e linguagem que sejam familiares aos usuários,

evitando os termos técnicos e a informação deve aparecer na ordem

natural e lógica de realização de tarefas segundo o modelo mental do

usuário;

3. Controle e liberdade do usuário: O sistema deve ter funções que faça

com que o usuário possa sair de uma parte do sistema rapidamente e sem

danificar a aplicação;

4. Consistência e Padrões: As ações e situações devem ser aplicáveis eobter resultados similares em diferentes partes do sistema. Os usuários

devem saber o que vai acontecer;

5. Prevenção de Erros: Os erros devem ser analisados e evitados;

6. Ajuda no reconhecimento de erros: Caso ocorram erros no sistema, as

mensagem devem ser amigáveis, informando sobre o erro e ajudando o

usuário a solucioná-lo;

7. Reconhecer ao invés de relembrar: O usuário não deve se lembrar dascoisas de uma ação para outra. Os elementos devem estar visíveis e

facilmente recuperáveis quando necesário;

8. Flexibilidade e eficiência de uso: O sistema deve ajudar o usuário em

suas ações mais freqüentes, acelerando a interação. Prover atalhos é uma

boa escolha;

9. Design minimalista e estético: Evitar diálogos com informações

irrelevantes e desnecessárias. Informações desnecessárias reduzem a

visibilidade relativa da informação relevante. No design estético deve

prevalecer a satisfação, o design visual e a legibilidade;

20



10. Oferecer documentação e informações de ajuda: o sistema deve

possuir documentos de fácil acesso que expliquem claramente as

diretrizes de utilização do sistema e informações sobre os processos,

focando nas tarefas do usuário.

• Adoção de Padrões de Desenvolvimento: os diversos padrões de

desenvolvimento utilizados atualmente, tanto no campo de design como de

programação, permitem, segundo a W3C, para o desenvolvedor: a) sites bem

construídos e estruturados; b) facilidade de manutenção; c) redução de

custos; d) redução de dificuldade de criação; e) compatibilidade entre diversas

plataformas. Para os usuários, significa aplicações acessíveis para usuários

de diversos browsers ou pessoas com deficiências, fácil navegação e acesso

aos recursos e ao conteúdo, dinamismo e “leveza” das aplicações. A W3C

trata especificamente de padrões para HTML, XHTML, DOM e CSS, porém, a

Orientação a Objetos e Design Patterns também estão presentes nas

WebApps. A junção de todas estas técnicas culmina em aplicações portáveis,

de fácil utilização e escaláveis, uma vez que os padrões tendem a prover

melhores práticas para a organização e estruturação de aplicações. No caso

do XHTML – nova versão do HTML que incorpora características do XML –semântica de código é um dos princípios para se construir aplicações bem

estruturadas;

• Arquitetura e Organização do Sistema: é um quesito também relacionado

ao item acima. Com a adoção de padrões de desenvolvimento, a organização

dos componentes do sistema deve ser coerente. Dessa forma, classes,

bibliotecas de funções, estilo, conteúdos, regras de negócio e scripts devem

ser permanecer devidamente organizados em diretórios e arquivos distintos,modularizados, sendo linkados conforme a necessidade nas páginas

necessárias, produzindo um código mais limpo e com maior manutenibilidade.

21



5. CONCLUSÃO

A utilização de serviços e aplicações web tem crescido exponencialmente nomundo e estes produtos possuem um papel importante nas diversas tarefas

realizadas pelas pessoas, seja dentro das organizações, na indústria, no comércio,

instituições de ensino, etc. Apesar deste crescimento massivo, os produtos

desenvolvidos possuem baixa qualidade e a Engenharia Web surgiu como uma

disciplina disposta a otimizar o projeto destas aplicações.

Através desta pesquisa foi possível identificar os principais problemas que

desencadeiam a baixa qualidade das WebApps, que vão desde a qualificaçãoinadequada da equipe de desenvolvimento e metodologia adotada para os projetos

de WebApp até o mal planejamento de interfaces, que gera diversas implicações na

usabilidade destes sistemas. Através de um comparativo entre o software tradicional

e o software web e, baseado nos problemas encontrados, foram identificados os

novos conceitos a serem acrescentados nos projetos de aplicações web e, a partir

disso, propor soluções e metodologias que visam resolver os problemas de

planejamento, cronograma, portabilidade, usabilidade, escalabilidade e

manutenibilidade.

Os resultados da análise e as soluções propostas não são completamente

precisos e conclusivos, visto que as aplicações web evoluem rapidamente. Além

disso, seria necessária uma pesquisa mais extensa para levantar outras questões

não abordadas nesta pesquisa, porém, as soluções aqui propostas são suficientes

para dar continuidade a esta pesquisa.

22



6. REFERÊNCIAS BIBLIOGRÁFICAS

ATTERER, Richard et. al. Extending Web Engineering Models and Tools for Automatic Usability Validation. Journal of Web Engineering, v. 5, n. 1, 2006.

FORMAGGIO, Erick Beltrami. Engenharia de Software x Engenharia Web.Disponível em: <http://www.sembrasil.com.br/artigos/engenharia-de-software-x-engenharia-web.html>. Acesso em: 15 set. 2007

FORMAGIO, Alexandre. Web 2.0 + Foco no Usuário. Disponível em:<http://www.slideshare.net/alexandre.formagio/web-20-foco-no-usurio-149531/download>. Acesso: 11 nov. 2007.

MACEDO, M. S. Construindo sites adotando padrões Web. Rio de Janeiro: EditoraCiência Moderna Ltda., 2004. 249 p.

MEMÓRIA, F. Design para a Internet: projetando a experiência perfeita. Rio deJaneiro: Elsevier, 2005. 171 p.

Modelagem Orientada as Objetos de Websites. Disponível em:<https://www.dct.ufms.br/~karen/parte1.ppt>. Acesso em: 14 set. 2007

NIELSEN, J.; TAHIR, M. Homepage Usabilidade: 50 websites desconstruídos. EUA:New Riders Pub, 2002. 315 p.

NORMAN, D. A. Emotional Design: Why We Love (or Hate) Everyday Things. NewYork: Basic Books, 2004. 256 p.

PFLEEGER, S. L. Engenharia de Software: Teoria e Prática. 2ª Edição. São Paulo:Prentice Hall (Pearson), 2004.

Processo de Desenvolvimento de Software. Disponível em:

<http://inf.upf.br/pos/pds/engenharia%20da%20web.ppt>. Acesso em: 15 set. 2007

SEGUINDO os Padrões. Tableless. Disponível em:<http://tableless.com.br/aprenda/seguindo-os-padroes/>. Acesso em: 11 nov. 2007.

SOMMERVILLE, I. Engenharia de Software. 6ª Edição. São Paulo: Pearson AddisonWesley. 2003.

SUH, Woojong. Web Engineering: Principles and Techniques. Estados Unidos /Reino Unido: Idea Group Publishing, 2005. 381 p.

WERNECK, V. M. B. Uma Abordagem de Avaliação de Qualidade de AplicaçõesWeb. Cadernos do IME, v. 14, jun. 2003. Disponível em:

23



<http://magnum.ime.uerj.br/cadernos/cadinf/vol14/6-vera.pdf>. Acesso em: 11 nov.2007.

Wikipédia. Business Intelligence. Disponível em: <http://pt.wikipedia.org/wiki/

Business_intelligence>. Acesso em: 11 nov. 2007

Wikipédia. Engenharia de Software. Disponível em:<http://pt.wikipedia.org/wiki/Engenharia_de_software>. Acesso em: 12 set. 2007

Wikipédia. Web. Disponível em: <http://pt.wikipedia.org/wiki/Web>. Acesso em: 12set. 2007

Wikipédia. Web 2.0 . Disponível em: <http://en.wikipedia.org/wiki/Web_2.0>. Acessoem: 13 set. 2007

Wikipédia. Web Engineering . Disponível em:<http://en.wikipedia.org/wiki/Web_engineering>. Acesso em: 06 set. 2007

Wikipédia. WebApp. Disponível em: <http://en.wikipedia.org/wiki/WebApp>. Acessoem: 12 set. 2007

24

http://www.google.com.br/url?sa=X&start=0&oi=define&ei=kCLpRpqdMYKiigH6-bTJBg&sig2=Oos5FuF9nkc-tblc5DF0kQ&q=http://en.wikipedia.org/wiki/Web_2.0&usg=AFQjCNGj90_ghMZ_WKoW2mzbodQOJIRnAw

http://www.google.com.br/url?sa=X&start=0&oi=define&ei=vZXmRtSDE6SSiwGFnqSDDA&sig2=K-IU6GFh0RkD1jxziBK3YA&q=http://en.wikipedia.org/wiki/WebApp&usg=AFQjCNHgrcbRDrrGHPva3qMVt8oqBe3gqg

http://www.google.com.br/url?sa=X&start=0&oi=define&ei=kCLpRpqdMYKiigH6-bTJBg&sig2=Oos5FuF9nkc-tblc5DF0kQ&q=http://en.wikipedia.org/wiki/Web_2.0&usg=AFQjCNGj90_ghMZ_WKoW2mzbodQOJIRnAw

http://www.google.com.br/url?sa=X&start=0&oi=define&ei=vZXmRtSDE6SSiwGFnqSDDA&sig2=K-IU6GFh0RkD1jxziBK3YA&q=http://en.wikipedia.org/wiki/WebApp&usg=AFQjCNHgrcbRDrrGHPva3qMVt8oqBe3gqg



ANEXO: ANÁLISE DE APLICAÇÕES WEB

Remember the Milk

O Remember the Milk é uma aplicação que permite ao usuário organizar sua lista de

tarefas de modo fácil. Desde a tela de cadastro, já é possível perceber a usabilidade

do website. A interface é simples, intuitiva e os dados são validados no exato

momento em que são digitados, campo a campo, evitando assim que os usuários

tenham que voltar para corrigir os erros depois do formulário ter sido submetido. Em

algumas aplicações, onde passam despercebidos os campos obrigatórios ou como

eles devem ser preenchidos, o usuário precisa revisar seu formulário e submetê-lo

uma série de vezes.

Fig. 6 – Tela de cadastro do Remember the Milk

Em termos de portabilidade e interoperabilidade, a aplicação possui integração com

outros dispositivos, tais como Skype, MSN, SMS, entre outros, e permite que as

tarefas possam ser acessadas, inseridas e gerenciadas através do celular.

25



Fig. 7 – Feedback após a realização do cadastro

A mensagem exibida após o cadastramento possui fácil linguagem e conteúdo

informativo, não deixando dúvidas sobre como o usuário deve prosseguir e oferece

uma opção de navegação (efetuar login).

Fig. 8 – Tela de utilização do Remember the Milk

A interface é altamente usável. A técnica de AJAX é usada intensamente nesta

aplicação, mas de modo eficiente. A rapidez com que podem ser executadas asações se assemelha muito com o software desktop. Além disso, possui uma

interface bem organizada, de modo que todos os item são bem visualizados e o

26



usuário consegue encontrar de modo fácil todas as opções, e permite que algumas

ações sejam executadas pelo teclado.

Fig. 9 - Slideshare

O slideshare permite que uma pessoa compartilhe apresentações em slides com

outras pessoas e ainda pode montar sua rede social. A interface também é simples,

mas possui unicidade e organização. A aplicação é um forma diferenciada para que

profissionais, alunos, professores ou qualquer pessoa compartilhe conhecimento.

Fig. 10 – Wikipédia

A Wikipédia é um dos diversos produtos da Wikimedia, uma empresa que produz

diversos softwares baseados em web e que têm como principal característica o

27



aproveitamento da inteligência coletiva por meio da colaboração e

compartilhamento. A Wikipédia é uma enciclopédia livre, onde qualquer pessoa pode

escrever artigos sobre qualquer assunto e qualquer pessoa pode contribuir com os

artigos, seja expandindo-os, corrigindo, colocando-o em conformidade com os

padrões da Wikipédia, etc. É possível baixar este software para “instalá-lo” em

qualquer lugar. Este modelo de enciclopédia colaborativa tem sido amplamente

utilizada por intranets e portais de universidades.

Fig. 11 – GoogleDocs

O GoogleDocs é uma aplicação experimental da empresa Google e é um editor de

textos – assim como o Microsoft Word – online. As principais funções de um editor

de textos desktop estão presentes no GoogleDocs (formatação, alinhamento, listas,

tabelas, imagens), mas outros recursos importantes são acrescentados: é possívelcompartilhar online o documento com outra pessoa que possui uma conta Google e

duas ou mais pessoas podem estar editando o documento ao mesmo tempo, sem

dados; o usuário tem controle sobre as revisões, pode ver o que foi modificado e

quando foi, é um controle de versões; exporta rapidamente em diversos formatos,

inclusive PDF e apresentação; permite publicar o documento para que esteja

acessível em modo de leitura a qualquer pessoa; centraliza as informações, pois as

pessoas não precisam trocar e-mails a cada vez que o documento for alterado. Esta

alternativa tem sido adotada por diversas empresas, pois podem compartilhar de

modo seguro e centralizado certos documentos com outros membros da equipe.

28

Documents

Engenharia Web