metodologias de modelagem web marcelo brandão theodoro júnior
TRANSCRIPT
![Page 1: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/1.jpg)
Metodologias de
modelagem Web
Marcelo Brandão Theodoro Júnior
![Page 2: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/2.jpg)
UWEUML-based Web Engineering, criado em 2000 por Nora Parchus de Koch
Trata-se de um conjunto de ferramentas de modelagem para sistemas web baseado na UML
Constituído por 4 fases e 5 diagramas (artefatos
Estudo de caso: sistema de submissão de artigos
![Page 3: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/3.jpg)
UWE - Fases
Análise de requisitos
Projeto conceitual
Projeto de navegação
Apresentação
![Page 4: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/4.jpg)
UWE - Artefatos
Modelo de casos de uso
Modelo conceitual
Modelo espacial de navegação
Modelo de navegação estrutural
Modelo de apresentação
![Page 5: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/5.jpg)
UWE - Análise de RequisitosOs requisitos são levantados e modelados com diagramas de casos de uso.
![Page 6: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/6.jpg)
UWE - Modelo ConceitualCriação de um diagrama de classes para representar a lógica de negócio da aplicação. Não se considera a interação do usuário com a interface.
![Page 7: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/7.jpg)
UWE - Navegação EspacialIdentifica quais objetos serão visitados durante a navegação na aplicação
Classes de navegação: classes visitadas pelo usuário na navegação
Navegabilidade direta: associações entre as classes
Exemplo:
![Page 8: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/8.jpg)
UWE - Navegação EstruturalDefine como a navegação é conduzida a partir dos elementos de acesso: indexes, guided tours, queries e menus
Index: acesso direto aos objetos das classes de navegação
Guided tour: acesso sequencial as classes de navegação
Queries: consultas a base de dados para carregamento do conteúdo da página
Menu: indíces para os demais elementos de acessoou outros menus
Index Guided Tour Queries Menus
![Page 9: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/9.jpg)
UWE - Navegação EstruturalBase: modelo de navegação espacial
Substituir as associação de multiplicidade maior que 1 por associações unidirecionais
Substituir as associações bidirecionais com extremos de multiplicidade maior que 1 por duas associações unidirecionais
Guiar a navegação entre as classes de navegação pelos elementos de acesso
![Page 10: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/10.jpg)
UWE - Navegação Estrutural
![Page 11: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/11.jpg)
UWE - ApresentaçãoConjuto de views que representam o conteúdo e estrutura de cada página da aplicação e a forma de interação do usuário com cada uma delas.
Introdução dos elementos das páginas (HTML) para montagem de cada página.
Construção dos cenários para simulação das interações.
Esboço das interfaces do sistema.
![Page 12: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/12.jpg)
UWE - Apresentação
Exemplo
![Page 13: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/13.jpg)
WebML
Uma linguagem de modelagem de aplicações Web
Composta de 5 fases
Associa os conceitos propostos com uma notação gráfica e uma sintaxe XML.
![Page 14: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/14.jpg)
WebML - Modelo EstruturalTrata-se de um esquema de baseado em entidades com atributos e relacionamentos.
Modela contéudo (dados) e a lógica da aplicação.
Gera um diagrama parecido com o de classes da UML.
Similar a fase de modelagem estrutural do UWE.
![Page 15: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/15.jpg)
WebML - Modelo de composição
Identifica os componentes da interface e as páginas da aplicação.
Visa organizar a resposta (hipertexto) as requisições do cliente.
Possui 6 unidades que compõem o hipertexto
![Page 16: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/16.jpg)
WebML - Modelo de composição1. Unidades de dados: componentes de informação unitários.
2. Dados compostos: várias instâncias das unidades de dados.
3. Indices: lista de instâncias de uma entidade ou unidade de dados.
4. Unidades navegáveis: comandos de navegação entre os dados. Por exemplo, paginação de uma busca.
5. Filtros: restrições de conteúdo.
6. Páginas: composição dos demais elementos. Trata-se da resposta a uma requisição.
![Page 17: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/17.jpg)
WebML - Modelo de composição
Unidade de dadosDados compostos Indice
Unidade navegável Filtro Página
![Page 18: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/18.jpg)
WebML - Modelo de navegaçãoTrata da interação do usuário com as páginas
Cria uma relação de navegação entre cada página
Esquema de navegaçãoSeleção de navegação
por REQUEST
![Page 19: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/19.jpg)
WebML - Modelo de navegação
Exemplo: Esquema de navegação entre páginas
![Page 20: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/20.jpg)
WebML - Modelo de apresentação
Levantamento e modelagem dos requisitos gráficos para renderização das páginas
Por exemplo: Combinação de cores, fontes, estilos
Projeto de interface visual
![Page 21: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/21.jpg)
WebML - Modelo de personalizaçãoCustomização do conteúdo e da interface por usuário ou por tipo de requisição.
Ex: Sistema de “templates” ou “temas”
Ex: Personalização do posicionamento dos elementos da página
Ex: Recuperação de preferências e configurações (cookie ou sessão)
![Page 22: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/22.jpg)
Conclusão
A modelagem de projetos de aplicação Web pode ser feita de várias formas, inclusive usando ferramentas comuns ao projeto Desktop, como mostra o UWE.
Porém existem modelos adaptados ao escopo da Web e ajudam o desenvolvedor a construir aplicações de melhor qualidade e mais fácil extensão.
![Page 23: Metodologias de modelagem Web Marcelo Brandão Theodoro Júnior](https://reader035.vdocuments.site/reader035/viewer/2022062404/552fc103497959413d8bea76/html5/thumbnails/23.jpg)
BibliografiaEstudo de caso: UML-based Web Engineering. DC-UFSCar, MDS 2008-2. Manera, Aline; Gracioso, Caroline; Ferreira, Tatiane. Professora Rosângela Dellosso Penteado.
Koch, N.;Klaus, A.; Hennicker, R. “The Authoring Process of the UML-based Web Engineering Approach”.
UWE: http://uwe.pst.ifi.lmu.de/index.htmlVisitado em 27/04/2010
WebML: http://webml.org/Visitado em 27/04/2010
Ceri, S.; Fraternali, P.; Bangio, A. “Web Modeling Language: a modeling language for designing websites”.