teorico_II

Prévia do material em texto

Modelagem de 
Sistemas para Internet
Responsável pelo Conteúdo:
Prof. Dr. Cleber Silva Ferreira da Luz
Revisão Textual:
Caique Oliveira dos Santos
Engenharia Web
Engenharia Web
 
• Apresentar os principais conceitos sobre Engenharia Web.
OBJETIVO DE APRENDIZADO 
• Introdução;
• Engenharia Web;
• Conclusão e Resumo da Unidade.
UNIDADE Engenharia Web
Introdução
Há alguns anos, as tecnologias web abrangiam apenas tags HTML e informações 
simples. Todavia, nos últimos anos, essas tecnologias passaram por grandes mudanças. 
Com os avanços da internet, atualmente, são gerados milhões de terabytes de dados 
por segundos. Armazenar, processar e gerenciar tais dados é importante para a socie-
dade. A partir do processamento desses dados, é possível extrair informações. Assim, 
as aplicações web precisam de boas tecnologias capazes de processar e gerenciar um 
grande volume de dados. 
Hoje em dia, diversos serviços são fornecidos via internet. Serviços web necessitam 
de sistemas web robustos e confiáveis. Atualmente, tais aplicações são grandes e com-
plexos sistemas que fornecem algum tipo de serviço interativo, customizado e acessível 
por diferentes dispositivos. Pelo fato de esses sistemas serem complexos e grandes, 
muitas vezes, eles são desenvolvidos com falta de funcionalidade, baixo desempenho, 
baixa qualidade, com manutenção totalmente difícil, entre outros aspectos negativos. 
Assim, como forma de melhorar o desenvolvimento dessas aplicações, a comunidade 
científica propõe metodologias baseadas na Engenharia de Software para aplicações 
web, chamadas de Engenharia Web. À vista disso, nesta Unidade, iremos estudar todos 
os aspectos importantes sobre a Engenharia Web. Na próxima seção, são apresentados 
mais detalhes sobre essa engenharia. 
Engenharia Web
Com o avanço da internet, sistemas web estão passando por uma profunda estruturação 
e amadurecimento. Trata-se, atualmente, de grandes e complexos sistemas que gerenciam e 
processam enormes quantidades de dados. Cada vez mais, sistemas web necessitam de altas 
tecnologias, boas infraestruturas e bons projetos. Para supor essa necessidade, pesquisado-
res e profissionais da tecnologia da informação se juntam com a finalidade de propor um 
conjunto de métodos para auxiliar o desenvolvimento de sistemas web. Tal conjunto ficou 
conhecido como Engenharia Web, que é um conjunto de métodos sistemáticos que visa 
melhorar o projeto de sistemas web. Ela nasceu da Engenharia de Softwares, isto é, inicial-
mente, a Engenharia Web foi definida dentro da Engenharia de Software.
Em outras palavras, podemos definir a Engenharia Web como um conjunto de abor-
dagens sistemáticas e quantificáveis para eficiente análise de requisitos, projetos, imple-
mentações, testes, processamentos e manutenção de aplicações web de alta qualidade e 
performance. Segundo )NETO, 2008) a Engenharia Web possui como princípios básicos:
• a definição de objetos e requerimentos do sistema de forma clara;
• a projeção e o desenvolvimento de aplicações web em fases;
• o planejamento de fases;
• o gerenciamento de processos de forma contínua. 
Antes de aprofundarmos o estudo sobre Engenharia de Web, vamos observar algu-
mas características importantes sobre o desenvolvimento de sistemas web.
8
9
Características Fundamentais Presentes no 
Desenvolvimento de Aplicações Web
O desenvolvimento de sistemas web compartilha alguns aspectos semelhantes aos 
do desenvolvimento de software tradicional. Todavia, também há alguns aspectos ex-
clusivos que só encontramos no desenvolvimento web. A seguir, são apresentadas as 
principais etapas encontradas no desenvolvimento web e presentes na Engenharia Web 
(MEDEIROS, 2014).
Algumas dessas etapas são executadas sequencialmente, e outras são executadas em 
paralelo ao longo do desenvolvimento. A primeira etapa a ser realizada é a análise de 
contexto, que é uma das mais importantes etapas no desenvolvimento de sistemas web. 
A etapa de análise de contexto se resume nas atividades de gerenciamento de requisito, 
isto é, levantamento, validação, entre outras atividades necessárias ao gerenciamento 
dos requisitos (MEDEIROS, 2014). 
A segunda etapa no desenvolvimento de sistemas web consiste na descrição do pro-
jeto de arquitetura do sistema. Essa etapa diz respeito à transição entre a análise de 
contexto e a implementação do sistema; aqui, definimos quais serão os elementos da 
arquitetura com base nos requisitos na etapa de análise de contexto. Os elementos que 
irão compor a arquitetura referem-se a softwares e servidores. Além disso, há uma pre-
ocupação em relação a manutenção, performance, funções desempenhadas, eficiência, 
implantação, confiabilidade etc.
A terceira etapa representa a escolha do modelo de processo. Esse modelo é res-
ponsável por organizar o desenvolvimento do sistema, definindo normas e padrões. 
Aborda questões globais acerca de todo o processo de desenvolvimento do sistema. 
A quarta etapa abrange o planejamento do projeto. Neste, são definidos quais e 
quando as atividades serão realizadas. Essa etapa almeja melhorar o aproveitamento 
dos recursos e de tempo para que a aplicação seja concebida dentro do prazo e com 
funcionalidade satisfatória. 
A quinta etapa constitui a fase do desenvolvimento do sistema web. Aqui, são im-
plementados os principais módulos do sistema web. Vale a pena ressaltar a importância 
de usar boas tecnologias de desenvolvimento, tanto para os módulos dos clientes como 
para os módulos dos servidores (MEDEIROS, 2014).
A sexta etapa refere-se à implantação, em que é disponibilizado o sistema web para 
o usuário on-line. Assim, o sistema web é instalado no servidor. 
Logo em seguida, vem a sétima etapa, que consiste na avaliação e manutenção 
do sistema. Nessa etapa, verificamos se o sistema responde aos requisitos levantados 
na primeira fase de forma confiável. O sistema deve se manter disponível e confiante. 
Também é necessário mantê-lo atualizado de acordo com as mudanças de tecnologias, 
inclusive com a demanda do usuário (MEDEIROS, 2014). 
Outra etapa importante no desenvolvimento de sistemas web é a de gerenciamento 
de projeto, a qual visa garantir que os processos e as atividades trabalhem em harmo-
nia. Podemos observar que o gerenciamento de projeto é responsável por coordenar 
9
UNIDADE Engenharia Web
todo o processo de desenvolvimento. Assim, essa etapa está presente em todas as eta-
pas do desenvolvimento do sistema web. 
Ainda sobre as etapas no desenvolvimento web, temos a etapa de controle de qua-
lidade. Ela objetiva avaliar a qualidade do desenvolvimento do sistema web. É realizada 
em paralelo com todas as etapas anteriormente mencionadas. 
Para finalizarmos o estudo sobre as etapas do desenvolvimento web, temos a eta-
pa de documentação, que almeja realizar registros sobre requerimentos, resultados e 
codificação, entre outros. Podemos usar tanto texto como diagramas para registrar a 
documentação do desenvolvimento do sistema. 
Todas essas etapas devem estar presentes em um método de processo de desen-
volvimento de sistema web. A Engenharia Web possui um conjunto de métodos que 
visa aprimorar o desenvolvimento de aplicações web. Atualmente, ela possui diversos 
métodos, alguns deles são: WebSA, WebML, OOWS, Hera, OOH, HDM, HDM-Lite, 
WAE, OOHDM, WAE, RMM, W200, WSDM e UWE (MEDEIROS, 2014). 
Nesta Unidade, vamos focar a UWE (Engenharia Web baseada na UML). Conside-
rada uma extensão da UML, a UWE é abordada nas próximas seções; todavia, antes, é 
necessário entender o que é UML. A seguir, é apresentada uma definição básica dessa 
linguagem, mas, para saber mais, há um profundo estudo sobre ela na Unidade 1. 
A Linguagem Modeladora Unificada (do inglês, UML – Unified Modeling Language) 
é uma linguagem-padrão utilizada para a estrutura de projetos de software. Na En-
genharia de Software, a UML possui um papel fundamental na especificação, cons-
trução e documentação do software, isto é, a UML é uma linguagem demodelagem 
que permite representar sistemas de forma padronizada.
Agora que já entendemos o que é UML e qual o seu principal objetivo, podemos 
começar o estudo sobre a Engenharia Web baseada na UML, a qual está apresentada, 
com detalhes, na próxima seção.
Engenharia Web baseada na UML
A Engenharia Web baseada na UML, conhecida também como UWE (UML – Based 
Web Engineering), define um conjunto de modelos para serem usados no desenvolvimento 
de aplicações web. Definida como uma linguagem modeladora para o desenvolvimento de 
aplicações web, a UWE tem como objetivo principal a unificação de todos os elementos 
do processo de desenvolvimento de aplicações web. Foi proposta por Koch, Hennicker e 
Kraus e é baseada tanto na linguagem UML quanto no Processo Unificado (UP).
A UWE possui como principais características: a divisão dos problemas nas etapas 
iniciais e a implementação do processo de desenvolvimento orientado ao modelo. Um 
processo de desenvolvimento orientado a modelos permite não apenas uma visão geral 
dos componentes do sistema mas também uma maior facilidade para a manutenção do 
sistema. Ademais, processos baseados em orientação de modelo permitem uma fácil 
transição entre as etapas do processo de desenvolvimento.
10
11
A engenharia Web baseada na UML (UWE) possui uma abordagem própria para a 
modelagem que inclui três modelos. Cada modelo foca um aspecto central do siste-
ma web: modelo conceitual, modelo navegacional e modelo de apresentação. 
Esses modelos utilizam estereótipos propostos nas Extensões de Aplicações Web 
(Web Application Extensions – WAE). Assim, antes de apresentar detalhes sobre tais 
modelos, faz-se necessário um estudo prévio dessas extensões.
Extensões de Aplicações Web 
(Web Application Extensions – WAE)
Antes de continuarmos o estudo sobre os modelos da UWE, vamos falar um pouco 
das Extensões de Aplicações Web, que, ao longo deste texto, será referida simplesmente 
como WAE. Presente na Engenharia Web, a WAE pode ser considerada como exten-
são da UML utilizada para modelar características específicas de sistemas web. Com a 
utilização da WAE, é possível usar tais extensões para criar a documentação e facilitar 
o processo de desenvolvimento. A partir dessas extensões, podemos construir modelos 
bem expressivos e intuitivos, aplicando uma linguagem formal de fácil entendimento 
entre todos da equipe. 
Utilizando a WAE, é possível representar páginas, links e o conteúdo dinâmico, 
tanto do lado do cliente como do lado do servidor. Essas extensões são específicas para 
modelar os componentes do desenvolvimento de sistemas web, usando componentes do 
metamodelo da UML. A WAE define extensões para aplicações web a partir da UML. 
Podemos citar como mecanismos de extensão:
• Estereótipos: são definições de novos elementos a partir de outros já existentes. 
Habitualmente, são representados por meio de texto limitado por “<<” e “>>”. 
• Restrições: são regras pertinentes aos elementos e às propriedades da aplicação web. 
• Valores rotulados: novas propriedades para elementos já existentes. 
A WAE apoia a elaboração de modelos para projeto, o qual é dividido em duas visões: 
visão lógica e visão de componentes. A primeira é mais abstrata, já a segunda objetiva 
o tratamento dos arquivos (elementos) que irão compor o sistema web. 
A WAE define estereótipos tanto para a visão lógica como para a visão de compo-
nentes. Esses estereótipos são usados nos diagramas, para que estes contenham mais 
detalhes e especificações. 
Quadro 1 – Estereótipos de classes e associação
<<server page>>
É utilizado para representar uma página web dinâmica que realiza 
algum tipo de processamento no servidor, e, habitualmente, suas 
operações representam funções de script.
<<client page>> Representa uma página web estática acionada quando o cliente a requisita. Essa página pode conter scripts do lado do cliente. 
<<html form>> Representa formulários html para entrada de dados. Nesse este-reótipo, os atributos representam os campos do formulário. 
11
UNIDADE Engenharia Web
<<image>> É semelhante à tag do img do html. Muitos estereótipos são seme-lhantes às tags html, porque WAE é uma extensão.
<<submit>>
Está relacionado com o direcionamento entre um formulário html 
e um server page. De forma simples, esse estereótipo representa 
o envio de dados por meio dos formulários html para serem pro-
cessados pelo servidor.
<<redirect>> Representa uma ação de redirecionamento de uma página web para outra página web.
<<text>> Permite colocar texto na página web. Esse estereótipo é seme-lhante à tag text do html.
<<forward>>
Representa uma ação de delegação de uma página web para 
outra página. Diferentemente do estereótipo <<redirect>>, o 
<<forward>> mantém o contexto da requisição feita pela pri-
meira página.
<<object>> Representa um relacionamento de confiança entre uma página web e um objeto.
<<menu>> Permite declarar menus nas páginas web da aplicação.
<<dinamic page>> Representa páginas web com comportamento dinâmico, isto é, o com-portamento da página pode mudar conforme a dinâmica da página.
<<text input>> Permite inserir texto para ser processado. É semelhante ao input text do html.
<<build>> Este estereótipo está relacionado com o direcionamento entre uma server page e um client page.
<<physical root>> Representa um pacote de componentes abstratos com os recursos disponíveis do sistema web. 
<<button>> Semelhante ao button do html, permite declarar botões.
<<navigation 
property>>
Representa as propriedades de navegações.
<<include>> Representa uma associação direcional entre uma server page e ou-tra página web, esta que possui o conteúdo que será processado.
<<static page>> Representa páginas web estáticas, ou seja, sem processamento no lado do servidor.
<<link>> Representa um link comum entre páginas web. Ele é similar a tag <a> em html.
<<process link>> Representa um link de processo.
Fonte: Adaptado de WAGNER, 2015
Além dos estereótipos apresentados na quadro anterior, existem os seguintes: <<process 
class>>, <<page>>, <<navigation class>>, <<navigation link>>, <<presentation 
property>>, <<process property>>, <<presentation class>>, <<presentation group>>, 
<<anchored collection>>, <<guided tour>>, <<index>> e <<choice>>. 
12
13
A WAE pode parecer um pouco complexa, porém é um conceito muito fácil de 
compreender. Para tanto, segue um resumo bem básico de tudo que vimos até aqui 
sobre WAE. Em palavras bem simples, podemos dizer que a WAE propõe extensões 
da linguagem UML para modelar aplicações web. As extensões propostas podem ser 
do tipo: estereótipos, restrições e valores rotulados. O principal objetivo da WAE é 
facilitar o desenvolvimento realizando uma modelagem mais detalhada sobre a aplicação 
web. A WAE divide o projeto em duas partes: visão lógica e visão de componentes. 
A primeira consiste em um nível mais alto de abstração, definindo classes e associações. 
Nessa visão, podemos criar um diagrama com um nível alto de abstração. Já a segunda 
trata dos elementos que realmente vão compor o sistema web, tais como páginas, ima-
gens, menus, entre outros. Nesse tipo de visão, criamos um diagrama de componente.
Visão Lógica da WAE
Para a visão lógica, são estabelecidos três estereótipos principais: <<client page>>, 
<<server page>> e <<html form>>. Esses estereótipos podem ser utilizados na criação 
do diagrama de classe. 
Agora que a compreensão sobre WAE ficou mais clara, vamos avançar um pouco 
mais. A seguir, estudaremos, com um pouco mais de detalhes, os principais estereótipos 
da visão lógica, começando pelo <<client page>>. 
O estereótipo <<client page>> é uma página web que utiliza as tags HTML e é 
acessada e visualizada por meio do browser do cliente. Pode possuir scripts que são 
executados no lado do cliente. Assim como a server page, um client page possui atribu-
tos e operações (métodos). As client pages podem conter associações com outras client 
pages ou, até mesmo, com server page (MARTINS, 2015).Um <<server page>> consiste em uma página web com scripts executados no ser-
vidor. A execução se dá por meio da interação do script com os recursos do servidor, 
tais como base de dado, regra de negócios, entre outros. As variáveis definidas na server 
page representam os atributos, já as funções do script presente na página representam 
as operações (métodos) da classe. Uma server page apenas pode interagir com os ob-
jetos que estejam no servidor. Considerando uma solução baseada em JAVA, podemos 
ter Servlets e JSP de controle (MARTINS, 2015).
O estereótipo <<html form>> é um conjunto de campos de entrada que pertence 
a uma página HTML. Aqui, os atributos representam os campos de entrada, tais como 
check boxes, input text, buttons, entre outros.
Estereótipos de associações da visão lógica da WAE
Ainda sobre a visão lógica, a WAE define estereótipos especiais usados nessa visão 
para realizar associações (associar classes, páginas, entre outros elementos). Segundo 
Martins (2015), a WAE propõe os seguintes estereótipos para associações: <<link>>, 
<<submit>>, <<build>>, <<redirect>> e <<forward>>. Vamos estudá-los com um 
pouco mais de detalhes, começando pelo <<link>>. 
13
UNIDADE Engenharia Web
Um <<link>> é um apontador de uma página de cliente (client page) para outra pági-
na. Em um diagrama de classe, um link é uma associação entre duas <<client page>>. 
Este estereótipo também pode fazer a associação entre <<server page>>. 
Por sua vez, o estereótipo <<submit>> é utilizado entre form e um server page, 
porque um form envia os dados existentes nos campos para serem processados por 
uma server page. O servidor recebe a server page e processa os dados fornecidos pelo 
form submetido. 
Já o <<build>> é um estereótipo de associação utilizado de ponte entre as client pa-
ges e as server pages. As páginas do servidor somente existem no servidor e são utiliza-
das para compor as páginas do cliente. O build especifica quais páginas web do servidor 
são responsáveis por compor as páginas do cliente. É importante ressaltar também que 
uma associação é unidirecional, isto é, aceita somente uma página servidor para uma 
página cliente. Uma server page pode criar várias client pages, todavia uma client page 
apenas pode ser criada por uma página de servidor build (MARTINS, 2015). 
Igualmente, o <<redirect>> é um estereótipo que permite uma associação somente 
unidirecional. Ele indica o redirecionamento de navegação de uma página para outra. 
Esse estereótipo atualiza o endereço na página (MARTINS, 2015). 
Por fim, o <<forward>> é semelhante ao estereótipo <<redirect>>, mas ele não 
retorna a resposta para o client page que é exibida ou atualizada no browser, e sim uma 
chamada direta à página no próprio servidor, que, posteriormente, repassa a resposta 
para o browser (MARTINS, 2015). 
Para um aprendizado mais prático, vamos considerar o mesmo projeto apresentado 
na Unidade 1 e vamos criar um diagrama de visão lógica para esse projeto. O “projeto 
exemplo” apresentado na Unidade 1 é sobre um sistema de venda de calçados web, 
lembra? Nesse sistema, um dos requisitos era que, para o cliente poder realizar uma 
compra, ele deveria estar cadastrado no site e fazer neste o login. Aqui, vamos modelar 
uma situação de login para o site. O diagrama de visão lógica é apresentado na Figura 
1, observe que esse diagrama utiliza os estereótipos apresentados neste livro.
<<client page>>
TelaLogin
+ veri�carFormulario(): void
<<HTML Form>>
FormLogin
- usuario : Text
- senha : Password
- botao : login
<<link>>
<<submit>>
<<build>>
<<client page>>
Home
<<build>>
<<client page>>
ErroLogin
<<server page>>
ProcessarLogin
+ validarLoginSenha() : void
Figura 1 – Diagrama de visão lógica – login
Fonte: Adaptada de MARTINS, 2015
14
15
Visão de componentes 
A visão de componentes permite realizar uma modelagem que mapeia os arquivos 
físicos com as representações lógicas na visão lógica, estudada anteriormente. Aqui, 
criamos um diagrama de componente. Este permite também realizar a visão física do 
modelo, que consiste na visualização da organização dos softwares que compõem a 
aplicação web. 
Com o diagrama de componentes é possível extrair informações sobre os componen-
tes de software, arquivos executáveis e bibliotecas para o sistema. Esse diagrama mostra 
a organização e dependência entre os componentes de software, incluindo código-fonte, 
componentes executáveis, código binário, entre outros.
A WAE define três estereótipos que são utilizados no diagrama de componentes, 
apresentados a seguir:
1. <<static page>>: representa páginas estáticas, isto é, sem nenhum processa-
mento no servidor;
2. <<dinamic page>>: representa páginas dinâmicas;
3. <<physical root>>: representa pacote de componentes, criando uma abstra-
ção de hierarquia de arquivos.
Vamos considerar, mais uma vez, o nosso “projeto exemplo” para ilustrar o diagrama 
de componentes. Nosso sistema deve conter um robusto banco de dados. A equipe de-
cidiu que será utilizado o SQLServer. Para fazer a conexão com o banco, iremos utilizar 
a biblioteca SQLServer. A equipe também decidiu que será usada a biblioteca LogRun 
no projeto. Assim, o nosso sistema de venda web depende dos componentes: driver 
SQLServer e biblioteca LogRun. A Figura 2 apresenta um exemplo de diagrama de 
componentes considerando esse cenário. 
Vendas
SQLSERVER
LogRun
Figura 2 – Diagrama de componentes
Fonte: Adaptada de MARTINS, 2015
Igualmente, podemos criar um diagrama de componentes ligado à visão lógica do siste-
ma. Vamos considerar o nosso “projeto exemplo” para criar um diagrama que faça a ligação 
dos componentes com a visão lógica do sistema. Tal diagrama é apresentado na Figura 3.
15
UNIDADE Engenharia Web
<<client page>>
TelaLogin
<<client page>>
Home
<<client page>>
ErroLogin
<<HTML Form>>
FormLogin
<<static page>>
index.html
<<dinamic page>>
processaLogin.php
<<server page>>
ProcessarLogin
<<submit>>
<<build>> <<build>>
<<link>>
Figura 3 – Diagrama de componentes ligado à visão lógica do sistema
Fonte: Adaptada de MARTINS, 2015
Agora que estudamos todos os detalhes da WAE, voltamos a estudar os modelos da 
UWE, cujos detalhes são apresentados na próxima seção. 
Modelos da UWE
Nesta seção, vamos aprofundar o estudo nos modelos da UWE, modelo conceitual, 
modelo navegacional e modelo de apresentação. Antes, devemos falar que a fase de 
requisitos é de suma importância para o projeto. A UWE inicia-se com a fase de análise 
de requisitos, identificando os casos de uso que resultam em um diagrama de caso de 
uso (MEDEIROS, 2014). Diagramas de casos de usos são abordados com detalhes na 
Unidade 1. Todavia, a Figura 4 apresenta um exemplo desse diagrama. 
Escolher Produto
Cliente
Efetuar o Pagamento
Figura 4 – Diagrama de caso de uso
O diagrama de caso de uso é um dos principais diagramas utilizados na UWE, sendo 
a base para outros diagramas. Após criá-lo, podemos construir o modelo conceitual, o 
qual é representado por um diagrama de classe. Assim, depois da criação do diagrama 
de caso de uso, elaboramos o diagrama de classe para representar o modelo conceitual. 
Diagrama de classe é estudado com mais detalhes na Unidade 1. Entretanto, a Figura 5 
apresenta um simples tipo desse diagrama. 
16
17
Cliente
 - email: String
- senha: String
- endereco: String
+ imprimirDados(): void
Produto
- valor: double
- numeroDoCalcado: int
- marca: String
+ buscarProduto(): void
1 *
Figura 5 – Diagrama de classe
Dessa maneira, o diagrama de classe contempla o modelo conceitual. Após a ela-
boração desse modelo, devemos realizar o modelo de navegação, que corresponde à 
construção de mais dois modelos, o modelo de espaço de navegação e o modelo da 
estrutura de navegação.
O modelo do espaço de navegação é construído levando em consideração o dia-
grama de classes (modelo conceitual) e o diagrama de caso de uso. Esse modelo visa 
especificar quais classes do diagrama de classe serão visíveis ao usuário e comodesen-
volvê-las da melhor forma possível. Já o modelo de estrutura de navegação refere-se à 
estrutura de navegação do sistema web. Aqui, descrevemos os elementos de navegação, 
como menu, índices, tabelas, entre outros. A Figura 6 ilustra um exemplo de modelo de 
navegação (MEDEIROS, 2014). 
<<index>>
Relatórios
Estatísticas
Gerenciar
<<index>>
<<Menu>>
<<Navigation Class>>
PublicacoesDeRelatorios
PublicacoesDoUsuario
Lista de Publicação
Utilitário
<<index>>
Figura 6 – Exemplo de um modelo de navegação
Fonte: Adaptada de MEDEIROS, 2014
O último modelo da UWE é o modelo de apresentação. Este corresponde à for-
ma como os objetos de navegação serão apresentados para o usuário. Nesse modelo, 
realizamos a transformação do modelo de estrutura de navegação em um conjunto de 
modelos que mostram o local, os esquemas e o comportamento dos objetos que serão 
visíveis ao usuário. O modelo de apresentação se concentra na organização estrutural 
da apresentação, por exemplo, imagens, textos, menus etc. (MEDEIROS, 2014). O foco 
17
UNIDADE Engenharia Web
é na estrutura desses elementos e como estes se relacionam. A Figura 7 apresenta um 
exemplo de modelo de apresentação.
<<page>>
Sistema de Venda de Calçado
<<presentation unit>>
Gerenciar Vendas
<<text>>
Publicação 1 
<<text>>
Publicação 2 
<<button>> <<button>>
Con�rmar
Pagamento Voltar
Figura 7 – Exemplo de um modelo de apresentação
Fonte: Adaptada de MEDEIROS, 2014 
Existem diversas ferramentas que permitem realizar uma modelagem de sistemas 
com base na UWE. A ferramenta ArgoUWE, por exemplo, é baseada na ArgoUML, 
que permite criar os modelos da UWE. De fácil acesso e com interface simples (MEDEI-
ROS, 2014), o ArgoUWE pode ser obtido a partir do site. 
ArgoUWE – CASE Tool for Modelling Web Applications. Disponível em: https://bit.ly/326LInz
Finalizamos o estudo sobre UWE, mas ainda vamos falar um pouco sobre a WebML, 
que é outra metodologia para o desenvolvimento de aplicações web. Na próxima seção, 
iremos falar um pouco sobre ela. 
WebML
Trata-se de uma metodologia para projetos de aplicações web complexas, que ge-
ralmente processam dados em larga escala. Ela disponibiliza uma gama de notações 
gráficas para serem utilizadas durante o projeto de desenvolvimento web (NETO, 2008). 
Nessa metodologia, o desenvolvimento de software é realizado de modo interativo. 
Além disso, a WebML permite expressar as características principais de uma aplicação 
web de forma bem abstrata e com alto nível. Atualmente, existem diversas ferramentas 
CASE que suportam a WebML, sendo a WebRatio um exemplo. 
A WebML disponibiliza quatro modelos para especificar uma aplicação web: 
1. Modelo estrutural: expressa o conteúdo de dados do site;
2. Modelo hipertexto: permite especificar quais hipertextos podem ser publica-
dos na aplicação web;
18
19
3. Modelo de apresentação: defi ne o layout e a aparência das páginas do pro-
jeto web;
4. Modelo de personalização (adaptação): determina características individuais 
do conteúdo de cada usuário ou grupo de usuários. 
A WebML é, portanto, uma metodologia interessante para o desenvolvimento de 
aplicações web. O foco desta Unidade foi UWE, todavia convidamos você a estudar um 
pouco mais sobre a WebML em Neto (2008).
Conclusão e Resumo da Unidade
Novas tecnologias web estão surgindo a todo o momento e gerando novos desafios 
à Engenharia de Softwares para aplicações web. É importante ressaltar também que 
o desenvolvimento de aplicações web possui características e métodos diferentes do 
desenvolvimento de aplicações de computadores e softwares tradicionais. Assim, tais 
características e métodos distintos, inclusive os novos desafios lançados constantemente 
com o advento de novas tecnologias, impulsionaram o surgimento da Engenharia Web. 
Engenharia Web pode ser definida como um conjunto de métodos, técnicas e ferra-
mentas voltados para o desenvolvimento de aplicações web. Nesta Unidade, focamos 
a Engenharia Web baseada na UML. Em poucas palavras, podemos dizer que a Enge-
nharia Web baseada na UML (UWE) define um conjunto de modelos a serem utilizados 
no desenvolvimento de uma aplicação web. Podemos ainda afirmar que a UWE é uma 
linguagem modeladora baseada em modelos para o desenvolvimento de aplicações web. 
Na UWE, as principais atividades realizadas no processo de modelagem de sistema são: 
análise de requisitos, modelo conceitual, modelo de navegação, modelo de apresenta-
ção, modelagem de tarefas e modelo de implantação. 
A Engenharia Web baseada na UML (UWE) suporta o desenvolvimento de sistemas 
web focando a sistematização e a geração automática de código. Na UWE, utilizamos 
caso de uso para levantar os requisitos, então conseguimos elaborar o modelo conceitual 
do sistema, que é baseado no diagrama de classe.
O modelo de navegação usa os diagramas de classes criados na modelagem con-
ceitual como base. Ele é dividido em duas etapas: modelo de espaço de navegação e 
construção do modelo de estrutura de navegação. O primeiro mostra quais objetos 
podem ser vistos na navegação da aplicação; logo, podemos dizer que se trata de um 
modelo de análise. Por sua vez, o segundo (modelo de estrutura de navegação), além de 
ser base no modelo de espaço de navegação, define como os elementos serão visitados 
e apresentados. 
Na UWE, o modelo de apresentação consiste na modelagem da interface com o usu-
ário. Ele mostra como a estrutura de navegação será apresentada ao usuário. 
Por último, realizamos um estudo sobre a WebML, que constitui outra metodologia 
para o desenvolvimento de aplicações web. Ela age de forma interativa no projeto e 
estabelece modelos que são utilizados para especificar complexos e robustos projetos de 
aplicações web.
19
UNIDADE Engenharia Web
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Vídeos
O que é Engenharia Web
Esse vídeo discute a Engenharia Web, principais características, métodos e modelos 
aplicados no desenvolvimento de aplicações web. 
https://youtu.be/FAidHIDgHHM
 Leitura
Modelagem incremental de aplicações web com abordagem UWE: um sistema para registro de 
publicações acadêmicas
Nesse artigo, é possível aprendermos um pouco mais sobre a Engenharia Web 
baseada na UML. Ele tem como objetivo central apresentar uma abordagem incre-
mental para aplicações web. Assim, podemos expandir nossa compreensão sobre 
a filosofia de desenvolvimento web utilizando uma abordagem incremental. 
https://bit.ly/3uPmU03
WebML 
Com esse manual técnico, podemos aprofundar o conhecimento da webML e estu-
dar, com mais detalhes, todos os modelos propostos por essa metodologia. 
https://bit.ly/39ZJbjI
Engenharia da Web 
Nesse relatório de aula, é possível absorver mais conhecimento sobre a Engenharia 
Web de forma clara e simples. 
https://bit.ly/3t54Azr
20
21
Referências
COSTANTIN, C.; RODRIGUES, C. A.; MALANOVICZ, A. V. Modelagem incremen-
tal de aplicações web com abordagem UWE: um sistema para registro de publicações 
acadêmicas. In: Simpósio de Engenharia de Produção, 2014, Brasil. Disponível em: 
<https://rl.art.br/arquivos/5054906.pdf?1417440407>. Acesso em: 31/05/2020.
MARTINS, C. Modelagem UML para web. 2015. Disponível em: <https://pt.slideshare.
net/claudiomartins2000/modelagem-aplicaes-web-com-uml>. Acesso em: 05/08/2020.
MEDEIROS, H. Engenharia Web baseada na UML. 2014. Disponível em: <https://www.
devmedia.com.br/engenharia-web-baseada-na-uml/31001>. Acesso em: 27/07/2020.
NETO, A. Metodologias de desenvolvimento de aplicações web – parte 01, 2008. 
Disponível em: <https://www.devmedia.com.br/metodologias-de-desenvolvimento-de-
-aplicacoes-web-parte-04/9819>. Acesso em: 27/07/2020.
WAGNER, J. Engenharia de componentes – parte 1. 2015. Disponível em: <http://
www.linhadecodigo.com.br/artigo/3119/engenharia-de-componentes-parte-1.aspx>. 
Acesso em: 03/08/2020.
21