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 {ordered}.
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.

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

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

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

Confira outros conte�dos:

Por Arilo Em 2008

Black November

Desconto exclusivo para as primeiras 200 matrículas!

Pagamento anual

12x no cartão

De: R$ 69,00

Por: R$ 54,90

Total: R$ 658,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
12 meses de acesso

Pagamento recorrente

Cobrado mensalmente no cartão

De: R$ 79,00

Por: R$ 54,90 /mês

Total: R$ 658,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
Fidelidade de 12 meses
Não compromete o limite do seu cartão

<Perguntas frequentes>

Carreira

Metodologia

Assinatura e Pagamentos

Cadastro

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

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

Confira outros conte�dos:

<Perguntas frequentes>

Por onde devo iniciar os estudos?

Em quanto tempo vou me tornar um programador?

Eu preciso de um diploma de faculdade para come�ar a atuar como programador?

Por que a programa��o se tornou a profiss�o mais promissora da atualidade?

Quais s�o os principais diferenciais da DevMedia?

O que eu irei aprender estudando pela DevMedia?

Quais as vantagens de aprender programa��o atrav�s da linguagem JavaScript?

A plataforma oferece certificados?

A plataforma tem suporte ao aluno, como funciona?

A DevMedia me forma como programador Full Stack?

Tem hor�rio para as aulas?

Por que a DevMedia n�o usa videoaulas em sua did�tica?

Preciso de um computador espec�fico para estudar na DevMedia?

Eu consigo estudar pelo celular?

A DevMedia tem aplicativo?

Preciso estar na faculdade para acompanhar os estudos na DevMedia?

Quais s�o os planos de assinatura dispon�veis?

Adquirindo o plano, terei acesso a todo o conte�do?

A plataforma tem planos vital�cios?

A DevMedia tem fidelidade?

Como funciona o cancelamento?

A renova��o � autom�tica?

Como excluir meus dados da plataforma?