Metodologias de desenvolvimento de Aplica��es Web

Guia do artigo:

Caracter�sticas de Aplicaç�es Web
Aplicaç�es Web x Sistemas Tradicionais
Aplicaç�es Web x Web site
Dimens�es de Projeto
Estudo de Caso
Aplicaç�o de WAE
Modelo Estrutural
Modelo de Composiç�o
Modelo Navegacional
Modelo de personalizaç�o
Aplicaç�o de WebML
UML-based Web Engineering
Projeto Conceitual
Projeto Navegacional
Projeto de apresentaç�o
Modelagem de aplicaç�es Web
Modelo navegacional
Modelo de apresentaç�o
Aplicaç�o de UWE
Ferramentas de modelagem das metodologias
Conclus�o

Parte - 1

O constante crescimento da Internet e a necessidade de serviços r�pidos e instant�neos t�m ocasionado uma demanda significativa no desenvolvimento de aplicaç�es que utilizam a Web como ambiente operacional.

Al�m disto, as aplicaç�es desenvolvidas para Web est�o se tornando cada vez mais complexas devido �s caracter�sticas de neg�cio da aplicaç�o a ser desenvolvida, acrescida dos v�rios aspectos espec�ficos que devem ser considerados para o desenvolvimento destas aplicaç�es.

Tendo em vista essas informaç�es sobre aplicaç�es Web, diversas metodologias espec�ficas para o desenvolvimento dessas aplicaç�es t�m sido utilizadas. Baseando-se neste cen�rio, este artigo visa descrever tr�s metodologias para o desenvolvimento de aplicaç�es que utilizam a Web como plataforma de execuç�o e os passos para a modelagem de uma aplicaç�o Web real com cada metodologia apresentada atrav�s de um estudo de caso.

Caracter�sticas de Aplicaç�es Web

A Internet tornou-se um grande mecanismo para realizaç�o de neg�cios. As caracter�sticas da Internet que influenciaram esse crescimento s�o: simplicidade aos usu�rios; informaç�es din�micas; facilidade de utilizaç�o independente do local que o usu�rio se encontra. Essas caracter�sticas resultam no crescimento do desenvolvimento de sistemas que utilizam este ambiente para execuç�o, tornando esses sistemas cada vez mais complexos.

Aplicaç�es Web possuem caracter�sticas espec�ficas comparadas a outros tipos de aplicaç�es. Observamos, principalmente, duas formas pontuais de diferenciarmos aplicaç�es Web: aplicaç�es Web x sistemas convencionais e aplicaç�es Web x Web sites.

Aplicaç�es Web x Sistemas Tradicionais

A primeira forma consiste nas diferenças entre aplicaç�es Web e sistemas convencionais. A engenharia de um sistema para Web envolve, al�m dos aspectos definidos na Engenharia de sistemas convencionais, aspectos que s�o relevantes apenas para esse tipo de sistema, como o ambiente explorat�rio baseado em navegaç�o e navegaç�o personalizada entre usu�rios, ou seja, o acesso �s informaç�es independente de outras pessoas. A Figura 1 expressa que a Engenharia de aplicaç�o Web envolve outras caracter�sticas al�m da Engenharia de software para sistemas convencionais.

Figura 1. Engenharia de aplicaç�es Web

Aplicaç�es Web x Web site

Em outra perspectiva, podemos diferenciar aplicaç�es Web de Web sites. Uma aplicaç�o Web consiste em Web sites que permitem ao usu�rio interagir com a aplicaç�o, ou seja, aplicaç�o Web seria a composiç�o de Web sites que disponibilizam um determinado serviço aos seus usu�rios.

Uma aplicaç�o Web enfatiza principalmente os aspectos relacionados � aplicabilidade e funcionalidade enquanto um Web Site tem �nfase na apresentaç�o, apar�ncia e navegaç�o.

Dimens�es de Projeto de uma aplicaç�o Web

Uma aplicaç�o Web pode ser caracterizada por tr�s dimens�es do projeto: estrutural (ou conceitual), navegacional e de apresentaç�o. A dimens�o estrutural define a organizaç�o das informaç�es a serem tratadas pela aplicaç�o e os seus relacionamentos, a dimens�o navegacional define como as informaç�es ser�o acessadas atrav�s da aplicaç�o e a dimens�o de apresentaç�o define como as informaç�es e o acesso a essas informaç�es ser�o apresentados ao usu�rio da aplicaç�o.

Tendo em vista essas informaç�es e caracter�sticas de aplicaç�es Web, torna-se necess�ria a utilizaç�o de metodologias que auxilie no desenvolvimento da aplicaç�o, evitando-se o desenvolvimento de maneira �ad hoc�, ou seja, implementar e testar.

Parte - 2

Metodologias de desenvolvimento de software buscam guiar os desenvolvedores nas suas atividades e facilitam a construç�o de sistema atrav�s de alguns aspectos:

Ger�ncia da complexidade, visualizando de maneira simples o dom�nio do problema em partes gerenci�veis;
Comunicaç�o entre as pessoas envolvidas no projeto, visando um aprofundamento no problema existente antes de seu desenvolvimento;
Reduç�o dos custos de desenvolvimento, evitando alocar recursos sem uma pr�via an�lise da aplicaç�o;
Manutenç�o e documentaç�o melhores, atrav�s de um desenvolvimento definido.

Existem diversas metodologias dispon�veis para a utilizaç�o em um desenvolvimento de aplicaç�es Web, dentre eles ser�o discutidas tr�s. Para cada uma a ser apresentada, ser�o separados os conceitos de acordo com as dimens�es de projeto definidas anteriormente para uma aplicaç�o Web: projeto conceitual, projeto navegacional e projeto de apresentaç�o, e ao final da cada uma ser� apresentado a sua aplicaç�o em um estudo de caso real.

A seguir, ser�o apresentadas tr�s metodologias de desenvolvimento para aplicaç�es Web e sua aplicaç�o em um estudo de caso real.

Estudo de Caso

Nosso estudo de caso � um sistema de consulta a ve�culos denominado AutoLopes Multimarca. Esta aplicaç�o deve apresentar informaç�es sobre carros usados, divididos em quatro categorias: vans, off-roads, motos e carros. Para cada categoria � apresentada a lista de ve�culos associados, e para cada ve�culo, h� a possibilidade de visualizar suas informaç�es espec�ficas. A aplicaç�es permite tamb�m o contato com os respons�veis pela empresa atrav�s do envio de um e-mail pela aplicaç�o.

Lista de funç�es

Deve permitir a consulta � lista de ve�culos de cada categoria: vans, off-roads, motos e carros;
Deve permitir a consulta �s informaç�es espec�ficas de um ve�culo espec�fico: modelo, f�brica, ano, cor, combust�vel que utiliza e duas fotos;
Deve permitir o envio de e-mail aos respons�veis pelo sistema;

Parte - 3

WAE � Web Application Extension

Web Application Extension consiste em uma extens�o da notaç�o UML proposta a partir de 1998. � uma forma de usar a especificaç�o padr�o UML, que estende estere�tipos (Nota 1) para mapear estruturas t�picas da arquitetura Web, como p�ginas, applets, componentes servlets, etc.

Esta extens�o busca solucionar o problema da sem�ntica de representaç�o dos elementos presentes na modelagem de aplicaç�es Web atrav�s da modelagem conceitual (dados do sistema) e arquitetural (composiç�o f�sica). Estes estere�tipos representam a composiç�o f�sica da aplicaç�o a ser desenvolvida e o relacionamento dos seus componentes (modelo navegacional).

Uma metodologia proposta para aplicaç�o de WAE no desenvolvimento de um sistema � na seguinte: inicialmente desenvolve-se um modelo conceitual representado pelo diagrama de classes da UML; ap�s isto � desenvolvido um modelo navegacional utilizando os estere�tipos de classes estendidas pela notaç�o WAE atrav�s do relacionamento entre essas classes para representaç�o navegacional e arquitetural da aplicaç�o. Eventualmente, para a representaç�o da iteratividade entre as classes do modelo navegacional pode ser utilizado o diagrama de sequ�ncia da UML.

Os elementos de WAE s�o: estere�tipos de p�ginas, relacionamentos entre p�ginas, forms e framset.

Estere�tipo de P�ginas
As p�ginas existentes em uma aplicaç�o Web apresentam caracter�sticas distintas de acordo com o local onde seus m�todos s�o executados. Uma p�gina que roda no servidor � completamente diferente de p�ginas que rodam em browsers de clientes, possui acesso a informaç�es que n�o s�o acess�veis ao cliente e s�o controladas de maneira distinta.

A extens�o da UML (WAE) representa essas p�ginas no modelo como duas classes distintas: P�gina servidora �server page� e P�gina Cliente �client page� (Figura 2).

Uma p�gina servidora relaciona-se com componentes que existem no servidor e ser�o utilizados nestas p�ginas. Uma p�gina cliente relaciona-se com componentes que existem no cliente (browsers).
Relacionamento entre p�ginas
Existe um fundamental relacionamento entre p�ginas clientes e servidoras, entre p�ginas servidoras e entre p�ginas clientes visando � comunicaç�o entre essas classes. O relacionamento entre as p�ginas ajuda a definir o mapa do site. Existem diferentes mecanismos de relacionamento entre essas classes, s�o eles:
- Builds: relacionamento unidirecional entre uma �server page� e uma �client page�, indicando que uma p�gina servidora geralmente � respons�vel pela construç�o de p�ginas clientes. Representado pelo estere�tipo �build�.
- Redirect: outra facilidade das tecnologias de desenvolvimento de aplicaç�es Web � a habilidade para redirecionar o processamento para outra �server page�. Este relacionamento pode ser expresso no modelo com o estere�tipo de associaç�o �redirects�.
- Links: um relacionamento adicional e fundamental no projeto de aplicaç�es Web � hyper link. P�ginas Clientes possuem hyper links (�ncoras) para outras p�ginas Web (p�ginas servidoras ou clientes). O estere�tipo: �links� � definido pra associaç�o entre p�ginas clientes e outras p�ginas.
Forms (Formul�rios)
Formul�rios (Figura 2) s�o expressos no modelo como uma agregaç�o de p�ginas clientes. Um objeto �form� existe somente no contexto de p�ginas clientes. Este objeto � uma coleç�o de elementos de entrada padr�o que aceita entradas do usu�rio e submete � p�gina servidora para processamento. Em uma mesma p�gina pode haver diversos forms, cada um possuindo uma aç�o diferente na p�gina.

Uma classe form tem como atributos campos a serem preenchidos pelos usu�rios. M�todos em uma p�gina cliente t�m acesso a todos os atributos do forms que est�o associados p�gina. Portanto, p�ginas clientes cont�m forms.

Um estere�tipo de associaç�o �submits� representa o relacionamento entre um formul�rio e a p�gina Web que a processa.
Frameset
Frames permitem que o projetista Web possa dividir a janela do browser em sub-�reas retangulares, cada uma com uma diferente p�gina (Figura 2).

Coordenar atividades entre p�ginas em frames requer habilidade para referenciar p�ginas contendo frames. Target � o termo usado quando uma p�gina cliente referencia outra p�gina Web ou frame. Um target n�o tem propriedades ou atributos, ele � simplesmente uma refer�ncia poss�vel para uma p�gina cliente. Uma classe frameset pode conter um target, ou um target pode existir independentemente (como no caso de janelas de browser separadas).

Um estere�tipo precisa ser definido para associaç�o que indica que uma p�gina cliente est� requerendo um link para ser rodado em uma outra janela. Um estere�tipo �targeted link� � aplicado para associaç�o entre p�ginas clientes e targets com quem elas interagem. Par�metros que s�o passados para o servidor com o targeted link podem ser identificados com um atributo link da UML.

Figura 2. Estere�tipos na notaç�o WAE

Nota 1 � Estere�tipo da UML

Estere�tipo consiste em um mecanismo de extens�o da UML que permite a classificaç�o de seus elementos originais de uma outra forma a partir da definiç�o de restriç�es a esses elementos. Ex: P�gina cliente � um estere�tipo do elemento Classe da UML, pois � um tipo de classe restrita ao dom�nio de aplicaç�es Web.

Aplicaç�o de WAE no estudo de caso AutoLopes Multmarca

A modelagem de uma aplicaç�o seguindo a metodologia apresentada para WAE resultou em dois modelos: modelo conceitual (Figura 3) e modelo navegacional (Figura 4).

O modelo conceitual (diagrama de classes) representa a estrutura dos dados do sistema, onde temos informaç�es sobre a loja, contato (e-mails), ve�culo e categorias representados atrav�s de classes e seus relacionamentos.

Figura 3. Modelo conceitual para AutoLopes Multimarca

O modelo navegacional gerado a partir da notaç�o WAE representa a estrutura da aplicaç�o atrav�s das p�ginas da aplicaç�o e seus relacionamentos. A p�gina principal da aplicaç�o � composta um menu com links para as p�ginas de cada de categoria de ve�culos (Figura 4 -[marca azul]: pgVans, pgOff-roads, pgCarro e pgMoto) e um link para envio de e-mails atrav�s da aplicaç�o (pgContato).

Para cada p�gina de uma categoria � carregada a lista de ve�culos. Caso o usu�rio escolha um ve�culo espec�fico, o sistema construir� (build) a p�gina espec�fica do ve�culo (pgVeiculo) com as suas informaç�es atrav�s de um processamento feito na p�gina servidora IdentificarVeiculo (Figura 4 � [marca amarela]). Para o envio e e-mail, o sistema apresenta um formul�rio (frmContato) para preenchimento dos dados do e-mail (Email, TipoContato e CorpoEmail) e ap�s confirmaç�o, envia o e-mail aos respons�veis pelo sistema atrav�s da p�gina servidora GravarContato (Figura 4 � [marca vermelha]).

Figura 4. Modelo navegacional para AutoLopes Multimarca

Confira tamb�m

UML

Guia

O que � UML?

Curso

Especificaç�o de Casos de Uso

Curso

Parte - 4

WebML � Web Modeling Language

A WebML � uma notaç�o para especificaç�o de Web sites em n�vel conceitual e permite a descriç�o alto n�vel de um Web site sobre distintas dimens�es ortogonais: seu conte�do de dados (modelo estrutural), a p�ginas que comp�e o site (modelo de composiç�o), a topologia de links entre as p�ginas (modelo navegacional) e a customizaç�o das caracter�sticas de conte�do de acordo com o perfil do usu�rio (modelo de personalizaç�o).

A especificaç�o da WebML � feita com a definiç�o de modelos, sendo que cada um deles j� tem uma sintaxe XML definida, facilitando dessa forma a manipulaç�o dos resultados da modelagem para a geraç�o autom�tica de p�ginas. Sendo esses modelos: Modelo Estrutural, Modelo de Hipertexto (formado pelos modelos de Composiç�o e Modelo Navegacional), Modelo de Personalizaç�o.

Modelo Estrutural

O Modelo Estrutural consiste no conte�do de dados da aplicaç�o Web. A WebML n�o prop�e uma nova notaç�o de modelagem para essa estrutura, permitindo a utilizaç�o de notaç�es como a Modelo de Entidade e Relacionamento ou Diagrama de Classes UML.

Os elementos fundamentais para a Definiç�o do Modelo Estrutural s�o entidades que cont�m os dados armazenados, e relacionamentos que permitem a ligaç�o sem�ntica de entidades. As entidades s�o formadas por um nome e atributos associados a um tipo de dado. Os relacionamentos s�o definidos atrav�s do nome e da cardinalidade das entidades que o comp�em.

O modelo conceitual para o estudo de caso AutoLopes Multimarca � id�ntico ao apresentado na Figura 3.

Modelo de Composiç�o

O Modelo de Composiç�o permite a definiç�o de unidades de conte�do e das p�ginas. As unidades de conte�do determinam a forma pelo quais os dados de uma determinada entidade v�o ser exibidos, customizando os atributos desejados. As principais unidades de conte�do dispon�veis na WebML s�o as seguintes (Figura 5):

Data unit: Mostram informaç�es relativas a um simples objeto, por exemplo, uma inst�ncia de uma entidade. S�o definidos atrav�s da definiç�o dos atributos de uma entidade. Mais de um data unit pode ser criado para uma mesma entidade, oferecendo v�rias maneiras de se ver um mesmo dado.
Multidata units: Mostram a informaç�o referente a um conjunto de objetos, por exemplo, todos as inst�ncias de uma determinada entidade.
Index units: Mostram os objetos de uma entidade em uma lista, denotando cada objeto como um link para outra unidade de conte�do.
Scroller units: Mostram comandos para acessar os elementos ordenados em uma lista de objetos, por exemplo, todas as inst�ncias de uma entidade ou todos os objetos associados com outro atrav�s um determinado relacionamento. Estes comandos s�o: primeiro, �ltimo, pr�ximo e anterior.
Filter units: Mostram campos que permitem que o usu�rio entre com valores para uma pesquisa, resultando apenas nos objetos validados por uma condiç�o. Normalmente s�o usados em conjunto com o index unit ou multidata unit, que apresentam os valores correspondentes a pesquisa realizada.

Figura 5. Principais elementos da WebML

Ainda no modelo de composiç�o, a WebML apresenta um suporte � entrada de dados e operaç�es. Para a inclus�o dos mesmos, o modelo de composiç�o apresenta links com propriedades de ativar a operaç�es. As unidades de entrada de dados s�o formadas por campos que fornecem par�metros para as operaç�es a serem processadas. As unidades de operaç�o recebem informaç�es por meios um ou mais links, sendo que um deles tem que ser declarado como ativador da operaç�o para quando a navegaç�o pelo link ocorrer, este possa executar a operaç�o. A WebML apresenta algumas unidades de operaç�es definidas, sendo elas respons�vel por criar, atualizar e remover uma entidade e de criar e remover um relacionamento.

Modelo Navegacional

As unidades de conte�do e as p�ginas formadas nos modelo de composiç�o n�o podem existir isoladamente, devem estar conectadas para formar o modelo de hipertexto. Esse � o prop�sito do modelo navegacional, especificar a maneira pela qual as unidades de conte�do e as p�ginas est�o relacionadas, definindo os seus links que podem ser de duas formas:

Links Contextuais: Conectam as unidades com informaç�es sem�nticas referentes � aplicaç�o, dessa forma carregando informaç�o da unidade de origem para a de destino (Figura 6).

Figura 6. Exemplo de link usado para definir o contexto de um data unit
Links N�o Contextuais: Conectam p�ginas totalmente livres, independentemente das unidades que est�o contidas nas p�ginas ou suas relaç�es sem�nticas.

Modelo de personalizaç�o

Define caracter�sticas individuais do conte�do de cada usu�rio ou grupo de usu�rio. WebML fornece o conceito de entidades de Usu�rios e Grupo de Usu�rios, permitindo modelar esquemas personalizados de conte�do e apresentaç�o, regras de acesso, segurança, atualizaç�o do conte�do.

A separaç�o entre o modelo estrutural e o de hipertexto permite que a WebML forneça meios de especificar v�rias vis�es de um mesmo site, possibilitando o atendimento de requisitos mais complexos. Essas diferentes vis�es do site podem estar associadas ao dispositivo pelo qual se est� acessando o site ou por grupos de usu�rios.

Aplicaç�o de WebML no estudo de caso

A modelagem de uma aplicaç�o seguindo a metodologia apresentada por WebML para o estudo de caso consiste na definiç�o do modelo de Hipertexto (Figura 7).

Figura 7. Modelo de Hipertexto para AutoLopes Multimarca

O modelo representa a exist�ncia de uma p�gina principal (AutoLopes Multimarca) com uma lista de opç�es com links para as p�ginas das categorias (Motos, Vans, carros, Off-roads) que cont�m, cada uma, a lista de ve�culos (Index Unit Ve�culos). Essa lista possui um link contextual para a p�gina de detalhe de um ve�culo (AutoLopes � Detalhes), indicando que o ve�culo escolhido � passado como par�metro para a p�gina de detalhe.

O envio de e-mail � feito atrav�s da p�gina Contatos que possuem um formul�rio a ser preenchido e enviado para a criaç�o de um novo objeto do tipo Contato.

Parte - 5

UWE � UML-based Web Engineering

Esta metodologia foi desenvolvida na Universidade de Munique � Alemanha e aborda as tr�s dimens�es de um projeto de aplicaç�es Web: conte�do, navegaç�o e apresentaç�o, utilizando elementos padr�es da UML juntamente com a notaç�o UWE e define uma seq��ncia de passos para a modelagem de uma aplicaç�o Web.

A modelagem para desenvolvimento de aplicaç�es Web pode ser realizada usando t�cnicas propiciadas pela UML junto com a sua notaç�o UWE. Desenvolvedores de aplicaç�es Web normalmente fazem uma separaç�o do contexto em conte�do, navegaç�o e apresentaç�o, ou seja, dividem, mesmo que involuntariamente, o desenvolvimento nos seguintes passos: projeto conceitual, de navegaç�o e de apresentaç�o.

Parte das atividades do projeto conceitual, de navegaç�o e de apresentaç�o � a construç�o de modelos e sua representaç�o gr�fica. Esses modelos consistem de elementos de modelagem da UML padr�o ou elementos de modelagem especificados � estere�tipos � definidos atrav�s do mecanismo de extens�o da UML (Nota 1).

Projeto Conceitual

O Projeto Conceitual produz um Modelo Conceitual que descreve o dom�nio do problema atrav�s de classes e suas associaç�es entre essas classes. � representado atrav�s de um Diagrama de Classe da UML.

Projeto Navegacional

A base no Projeto Navegacional � o Modelo Conceitual, e seu resultado � o Modelo Navegacional que pode ser visto como uma vis�o definida do modelo conceitual. O modelo navegacional � definido em dois passos. No primeiro passo o Modelo de espaço navegacional � definido mostrando quais as classes do modelo conceitual podem ser visitadas por navegaç�o na aplicaç�o Web. Um diagrama de classe da UML � utilizado para representar graficamente o modelo conceitual. Este modelo que � constru�do com estere�tipos de classes � classe navegacional � e associaç�o � navegabilidade direcionada.

O Modelo de estrutura navegacional define a navegaç�o da aplicaç�o, isto �, como os objetos navegacionais s�o visitados. Este modelo � baseado no modelo de espaço navegacional, mas elementos de modelagem adicionais s�o inclu�dos no diagrama de classe para representar a navegaç�o entre objetos navegacionais: menus, guide tours e queries. Todos esses estere�tipos ser�o definidos ao longo desta seç�o.

Projeto de apresentaç�o

O projeto de apresentaç�o suporta a modelagem de uma interface abstrata de usu�rio exibindo como a estrutura navegacional � apresentada ao usu�rio. Projeto de apresentaç�o como os n�s de navegaç�o aparecer�o, selecionando objetos de interface de usu�rio a serem exibidos e determinando as transformaç�es que ocorrer�o em cada interface definida. Esta notaç�o prop�e a construç�o de um modelo de apresentaç�o.

O Modelo de apresentaç�o � representado por um diagrama de composiç�o da UML que descreve como as interfaces de usu�rios s�o constru�das. Um objeto de interface de usu�rio pode ser um objeto de interface de usu�rio primitivo como texto, imagem e bot�o, ou uma composiç�o de objetos de interface de usu�rios. Para a definiç�o de objetos de interface de usu�rio foram definidos estere�tipos de acordo com o mecanismo de extens�o propiciado pela UML. Esses objetos s�o: �ncora, texto, imagem, �udio, v�deo, bot�o, coleç�o, coleç�o ancorada.

Estere�tipos para modelagem de aplicaç�es Web

Esta extens�o da UML define um conjunto de estere�tipos que s�o usados na construç�o dos modelos definidos para o desenvolvimento de aplicaç�es Web. A seguir ser�o apresentados os estere�tipos definidos para a modelagem de aplicaç�o Web segundo a notaç�o UWE separados pelo modelo j� definido anteriormente.

Modelo navegacional

Classe Navegacional: representam uma classe conceitual cuja inst�ncia podem ser visitadas por usu�rios durante a navegaç�o.O �cone usado para o estere�tipo �navigational class� � mostrado na Figura 8.
Navegabilidade Direcionada: associaç�o no modelo navegacional � interpretada como navegabilidade direcionada da classe navegacional de origem para a classe navegacional de destino. Possui sem�ntica diferente de uma associaç�o no modelo conceitual. Ela determina a direç�o de navegaç�o entre as classes, e s�o exibidas por setas direcionadas ou bidirecionadas (navegaç�o em ambos os sentidos).
Index: � modelado por um objeto composto que cont�m um n�mero arbitr�rio de itens de index. Cada item de index possui um nome e um link para uma inst�ncia de uma classe navegacional. Qualquer index � um membro de alguma classe index que � estereotipada por �index� com um �cone correspondente como mostrado na Figura 8.
Guide Tour: � um objeto que permite acesso seq�encial para as inst�ncias de uma classe navegacional. O �cone correspondente para o estere�tipo �guide Tour� � mostrado na Figura 8. qualquer classe guide tour ser� conectada a uma classe navegacional por uma associaç�o direcionada que tenha a propriedade .
Query: � representado por um objeto que tenha uma string de consulta como atributo. O �cone para o estere�tipo �query� � mostrado na Figura 8.
Menu: � um objeto composto que cont�m um n�mero fixo de itens. Cada item de menu tem um nome e um link para a instancia de uma classe navegacional, index, guide tour ou query. Qualquer menu � uma instancia de uma classe menu que � estereotipada por �menu� com um �cone correspondente mostrado na Figura 8.

Figura 8. Estere�tipos para o modelo navegacional

Modelo de apresentaç�o

Classe de apresentaç�o: modela a apresentaç�o de uma classe navegacional ou primitiva de acesso, como index, guide tour, query ou menu. Instancias de classes de apresentaç�o recebem elementos de modelagem como texto, imagens, v�deos, �udio, �ncoras, coleç�es, coleç�es ancoradas, etc. A Figura 9 mostra o �cone correspondente.
Frameset e Frame: � um elemento de alto n�vel que � modelado por uma composiç�o de objetos de apresentaç�o ou outros framesets. Uma �rea de um frameset � associada a cada elemento de baixo n�vel, chamado frame. Os �cones para os estere�tipos �frameset� e �frame� s�o apresentados na Figura 9.
Janela: � a �rea de interface de usu�rio onde framesets e objetos de apresentaç�o s�o exibidos. Uma janela pode ser movida, maximizada ou minimizada a um �cone. Ela possui dois pequenos bot�es, um para transformar a janela em �cone (minimizar) e outro para fechar a janela. A Figura 9 apresenta o estere�tipo de classe para janela.

Figura 9. Estere�tipos que comp�em o modelo de apresentaç�o

Figura 10. Estere�tipos de apresentaç�o

A Figura 10 mostra os �cones escolhidos para os estere�tipos de elementos de modelagem apresentados abaixo. Eles s�o usados no projeto de apresentaç�o de aplicaç�es Web em adiç�o aos objetos de apresentaç�o, janelas, frameset e frames.

Texto: � uma seq��ncia de caracteres.
�ncora: � um texto que pode ser clicado que � o ponto de partida para o relacionamento entre outros n�s.
Bot�o: � uma �rea que pode ser clicada que tem uma aç�o associada a ela.
Imagem, v�deo, �udio: s�o objetos multim�dia. Uma imagem pode ser exibida. �udio e v�deo podem ser iniciados, parados, podemos volt�-los, ou adiant�-los.
Form: � usado para receber informaç�es do usu�rio que passam informaç�es em um ou mais campos de entrada ou opç�es de seleç�o do browser ou checkbox.
Coleç�o: � uma lista de elementos de texto que � introduzida como estere�tipo que prover uma representaç�o conveniente desta composiç�o.
Coleç�o ancorada: � uma lista de �ncoras que � introduzida como estere�tipo que prover uma representaç�o conveniente de uma coleç�o de �ncoras.

Aplicaç�o de UWE no estudo de caso

A modelagem de uma aplicaç�o seguindo a metodologia apresentada por UWE para o estudo de caso consiste na definiç�o de tr�s modelos: Modelo conceitual (id�ntico ao da Figura 3), Modelo navegacional (Figura 11) e Modelo de apresentaç�o (A Figura 12 apresenta o modelo de apresentaç�o para a p�gina de ve�culos).

Figura 11. modelo navegacional

O modelo navegacional da Figura 11 indica que a classe navegacional Loja � composta por um item menu (Menu Principal) com 4 links para a classe Categoria, que apresenta a lista de ve�culos de acordo com a categoria (Index � Lista de Ve�culos). A partir desta lista pode ser acessada um ve�culos espec�ficos (classe Ve�culo).

Figura 12. modelo de apresentaç�o

O modelo de apresentaç�o para a p�gina de ve�culo apresenta os elementos desta p�gina de acordo com o seu tipo. A p�gina � composta pelas informaç�es de Ve�culos (Classe de apresentaç�o Ve�culo) que contem seus dados (fotos, ano, cor, etc) e por um menu principal (Classe de apresentaç�o Menu Principal) com links para outras �reas do site.

Ferramentas de modelagem das metodologias

O desenvolvimento de uma aplicaç�o Web atrav�s das metodologias apresentadas neste artigo requer a utilizaç�o de ferramentas CASE para facilitar a tarefa de modelagem atrav�s de cada uma das metodologias. Abaixo, apresento uma descriç�o sobre ferramentas existentes para as metodologias.

ArgoUWE: O ArgoUWE � uma ferramenta CASE que permite a modelagem de aplicaç�es Web atrav�s da metodologia UWE. Esta ferramenta � instalada como extens�o da ferramenta de modelagem ArgoUML atrav�s de bibliotecas especiais para a notaç�o UWE. Obs: a ferramenta neste momento n�o suporta a modelagem do modelo de apresentaç�o.
Estere�tipos para o Rational Rose: O Rational Rose � uma ferramenta CASE propriet�ria desenvolvida pela empresa IBM que permite a modelagem de sistemas utilizando-se a notaç�o UML. Para que seja poss�vel a modelagem de sistemas utilizando a notaç�o WAE, � necess�ria a instalaç�o dos estere�tipos estendidos da UML atrav�s desta ferramenta.
Visual UML: O Visual UML � uma ferramenta CASE propriet�ria desenvolvida pela empresa Visual Object Modelers, que � uma empresa membro da OMG (Object Management Group), que permite a modelagem de objetos para todos os diagramas da UML 1.3 e 1.4. Visual UML inclui extens�es da UML para modelagem de objeto de neg�cio, modelagem de aplicaç�es Web (usando a notaç�o WAE) e modelagem XML.
WebRatio: � uma ferramenta CASE que permite a modelagem e a geraç�o de aplicaç�es Web utilizando como base a notaç�o WebML. O WebRatio � uma ferramenta propriet�ria desenvolvida pela empresa WebModels S.r.I. com o aux�lio dos criadores da WebML. Esta ferramenta possui uma vers�o de teste dispon�vel aqui.

Conclus�o

Este artigo tem como objetivo apresentar ao leitor as principais diferenças no desenvolvimento de uma aplicaç�o que utiliza a Web como plataforma, destacando tr�s metodologias de desenvolvimento dessas aplicaç�es. A import�ncia destas metodologias se d� devido � necessidade de definiç�o de aspectos particulares destas aplicaç�es e que n�o podem ser desenvolvidos como sistemas convencionais.

Atualmente, n�o h� um padr�o de modelagem de aplicaç�o Web (como existe para aplicaç�es tradicionais atrav�s da UML). V�rias metodologias com caracter�sticas e notaç�es distintas est�o dispon�veis e podem ser utilizadas no projeto dessas aplicaç�es.

Confira tamb�m

Diagrama de Casos de Uso na Pr�tica

Curso

O que � Levantamento de Requisitos?

Curso

Curso Ger�ncia de Projetos

Curso

Metodologias de desenvolvimento de aplica��es Web � Parte 01

Este artigo visa descrever três metodologias para o desenvolvimento de aplicações que utilizam a Web como plataforma de execução.

Guia do artigo:

Caracter�sticas de Aplicaç�es Web

Aplicaç�es Web x Sistemas Tradicionais

Aplicaç�es Web x Web site

Dimens�es de Projeto de uma aplicaç�o Web

Estudo de Caso

WAE � Web Application Extension

Aplicaç�o de WAE no estudo de caso AutoLopes Multmarca

Confira tamb�m

UML

O que � UML?

Especificaç�o de Casos de Uso

WebML � Web Modeling Language

Modelo Estrutural

Modelo de Composiç�o

Modelo Navegacional

Modelo de personalizaç�o

Aplicaç�o de WebML no estudo de caso

UWE � UML-based Web Engineering

Projeto Conceitual

Projeto Navegacional

Projeto de apresentaç�o

Estere�tipos para modelagem de aplicaç�es Web

Modelo navegacional

Modelo de apresentaç�o

Aplicaç�o de UWE no estudo de caso

Ferramentas de modelagem das metodologias

Conclus�o

Confira tamb�m

Diagrama de Casos de Uso na Pr�tica

O que � Levantamento de Requisitos?

Curso Ger�ncia de Projetos

Artigos relacionados