Desenvolvimento de Aplicações na Web Semântica Modelagem e Geração de Interfaces Dirigidas por Regras

Tamanho: px

Começar a partir da página:

Download "Desenvolvimento de Aplicações na Web Semântica Modelagem e Geração de Interfaces Dirigidas por Regras"

Lucca Veiga Pacheco
8 Há anos
Visualizações:

1 Desenvolvimento de Aplicações na Web Semântica Modelagem e Geração de Interfaces Dirigidas por Regras Carlos Laufer Tecweb - Departamento de Informática PUC-Rio

2 W3C Escritório Brasil Avenida das Nações Unidas, 11541, 7 o andar, Brooklin, São Paulo, SP Tópicos Design baseado em Modelos Camaleon Reference Framework SHDM - Synth Interface Abstrata Interface Concreta Geração de Interfaces Dirigidas por Regras

Modelos Camaleon Reference Framework SHDM - Synth Interface

3 Modelos - Lidando com a complexidade Modelos - Lidando com a complexidade Nível de abstração adequado Não acrescentar complexidade desnecessária Focado no aspecto apropriado do problema Preciso Não ambíguo Compreensível por vários perfis de usuários Cliente Diretoria, Marketing, Comunicação, RH, Sistemas Equipe de projeto Analistas, Conteudistas, Programadores, Designers Visuais

Preciso Não ambíguo Compreensível por vários perfis de usuários Cliente Diretoria, Marketing,

4 Design Baseado em Modelos Identifica modelos de alto nível (abstrato) Concentra em aspectos semanticamente significativos Não endereça imediatamente o nível de implementação Ferramentas que atualizam a implementação Útil no desenvolvimento e na manutenção Design de Interface Baseada em Modelos Abordagem em camadas com diferentes níveis de abstração no design de interfaces de usuário Benefícios esperados Melhorar qualidade Reduzir tempo e custo de desenvolvimento Melhorar comunicação dos times de desenvolvimento Facilitar testes Reduzir esforços para adaptação para mudanças de requisitos

Abordagem em camadas com diferentes níveis de abstração no design de interfaces de usuário Benefícios esperados Melhorar qualidade Reduzir tempo e

5 Cameleon Reference Framework Contexto de Uso Entidades relevantes para a interação Tripla - (U, P, A) U - Modelo de usuário Quem vai usar ou está usando P - Plataforma de hardware-software Conexão do ambiente físico com o mundo digital A - Ambiente físico e social Onde a interação está se estabelecendo <usuário, plataforma, ambiente>

Plataforma de hardware-software Conexão do ambiente físico com o mundo digital A -

6 Cameleon Reference Framework Requisitos Funcionais autenticar um usuário selecionar um aposento selecionar um dispositivo no aposento inspecionar e alterar o estado do dispositivo selecionado Contextos de Uso casa, computador rua, celular Exemplo - Digital Home

aposento inspecionar e alterar o estado do dispositivo

7 Exemplo - Digital Home Exemplo - Digital Home

8 TecWeb :: HDM OOHDM - SHDM Método de Autoria para Sistemas Hipermídia conjunto de modelos (com as respectivas notações) método de projeto Desde antes da Web! Várias Evoluções Independente de Plataforma Método Levantamento de Requisitos Modelo de Domínio Aplicação Modelo de Navegação Modelo de Interface e Comportamento Implementação

Várias Evoluções Independente de Plataforma Método Levantamento de Requisitos Modelo

9 TecWeb Synth Modelos de Navegação

10 Cameleon Reference Framework Concurrent Task Trees - CTT Notação para especificação de modelos de tarefas Estrutura hierárquica Sintaxe gráfica Foco nas atividades Notação flexível e expressiva Permite representar atividades interativas e concorrentes Compacta e de fácil entendimento

gráfica Foco nas atividades Notação flexível e expressiva Permite

11 Concurrent Task Trees - CTT Interleaving (T1 T2 TN) Order independence (T1 = T2 = TN) Synchronization (T1 [] T2 [] TN) Parallelism (T1 T2 TN) Choice (T1 [] T2 [] TN) Disabling (T1 [> T2 [> TN) Suspend-Resume (T1 > T2 > TN) Enabling (T1 >> T2 >> TN) Iteration (T*) Optional ([T]) Exemplo CTT

Choice (T1 [] T2 [] TN) Disabling (T1 [> T2 [> TN) Suspend-Resume (T1 >

12 Cameleon Reference Framework TecWeb Interface Abstrata

13 TecWeb Interface Abstrata TecWeb Interface Abstrata

14 TecWeb Interface Abstrata TecWeb Interface Abstrata

15 TecWeb Interface Abstrata TecWeb Interface Abstrata

16 Cameleon Reference Framework TecWeb Interface Concreta

17 Exemplo Reserva de Hotel Exemplo Reserva de Hotel

18 Exemplo Reserva de Hotel Abordagens

19 Processo de Definição da Interface Metamodelo da Interface Abstrata Os tipos dos widgets representam o papel desempenhado pelo elemento na interação com o usuário Tipos de Widgets Abstratos

20 Exemplo de Composição Abstrata Exemplo de Composição Abstrata AbstractInterface name : main_page CompositeInterfaceElement name : header ElementExhibitor name : title SimpleActivator name : account_anchor

21 Exemplo de Composição Abstrata {name: "main_page", widget_type: "AbstractInterface", children:[ {name: "header", widget_type: "CompositeInterfaceElement", children: [ {name: "title", widget_type: "ElementExhibitor"}, {name: "account_anchor", widget_type: "SimpleActivator }] } Exemplo de Composição Abstrata

22 Exemplo de Composição Abstrata CompositeInterfaceElement name : Content ElementExhibitor name : hotel_name CompositeInterfaceElement name : hotel_images repeatable : true ElementExhibitor name : hotel_image ElementExhibitor name : hotel_category ElementExhibitor name : hotel_address ElementExhibitor name : hotel_description Exemplo de Composição Abstrata {name: "content", widget_type: "CompositeInterfaceElement", children:[ {name: "hotel_name", widget_type: "ElementExhibitor"}, {name: "hotel_images", widget_type: "CompositeInterfaceElement", repeatable: true, children: [ {name: "hotel_image", widget_type: "ElementExhibitor }]}, {name: "hotel_category", widget_type: "ElementExhibitor"}, {name: "hotel_address", widget_type: "ElementExhibitor"}, {name: "hotel_description", widget_type: "ElementExhibitor }]}

23 Exemplo de Composição Abstrata Exemplo de Composição Abstrata {name: "search_rates", widget_type: "CompositeInterfaceElement", children: [ {name: "search_rates_title", widget_type: "ElementExhibitor"}, {name: "label_checkin", widget_type: "ElementExhibitor"}, {name: "checkin", widget_type: "IndefiniteVariable"}, {name: "label_checkout", widget_type: "ElementExhibitor"}, {name: "checkout", widget_type: "IndefiniteVariable"}, {name: "search", widget_type: "SimpleActivator }]

24 Exemplo de Composição Abstrata Exemplo de Composição Abstrata {name: "rates", widget_type: "CompositeInterfaceElement", children: [ {name: "rates_title", widget_type: "ElementExhibitor"}, {name: "rates_by_room", widget_type: "CompositeInterfaceElement, repeatable: true, children: [ {name: "room", widget_type: "CompositeInterfaceElement", children: [ {name: "room_type", widget_type: "ElementExhibitor"}, {name: "price", widget_type: "ElementExhibitor"}, {name: "availability", widget_type: "ElementExhibitor"}, {name: "book", widget_type: "SimpleActivator }]}]}

25 Regras Condição Regras de Ação Base de Conhecimento (Fatos) Triplas Condições fatos de qualquer modelo do SHDM (domínio, navegação, etc.) parâmetros de requisição informações de ambiente (user-agent, etc.) Fatos <WME "navigational_element" "uri" " <WME " "class" "SHDM::Index"> <WME " "index_title" "FlightsByAirport"> <WME "params" "airport_from" SDU"> <WME "params" "airport_to" BSB > <WME "params" "controller" "execute"> <WME "params" "action" "search_flights"> <WME "user_agent" "browser" "Chrome"> <WME "user_agent" "platform" "Windows"> <WME "user_agent" "mobile" false>

26 Regras Seleção de Interface has "user_agent, mobile, true has :_, class, gr::offering Seleção de Elemento Abstrato <abstract_element_id> do equal Time.now.day, 1 end Transformação Abstrato Concreto maps_to abstract: <abstract_element_id>, concrete_widget: <concrete_widget_id>, params: {<parameters>} do <conditions> end Regras de Seleção de Interfaces Seleção de Interface Regras de Seleção de Interface <WME "user_agent" "browser" "Firefox"> <WME "user_agent" "platform" "Windows NT"> <WME "user_agent" "mobile" false> <WME "params" "controller" "execute"> <WME "params" "action" book_hotel"> <WME "params" "id" "Rio Carioca Palace"> has "params", "action", book_hotel has "params", "id", :_

27 Regras de Seleção de Elementos Abtratos Regras de Seleção de Elementos Abtratos

28 Regras de Seleção de Elementos Abtratos Composição Abstrata Descrição Abstrata Regras de Seleção de Elementos Abstratos set "rates" do has "params", "checkin", :_ has "params", "checkout", :_ end set "search_rates" do neg "params", "checkin", :_ neg "params", "checkout", :_ end Regras de Mapeamento Concreto

29 Regras de Mapeamento Concreto maps_to abstract: "main_page", concrete_widget: "HTMLPage", params: { title: "mylogdings.com", include_css: /hotel_mob.css" } do end has "user_agent", "mobile", true maps_to abstract: "main_page", concrete_widget: "HTMLPage", params: { title: "mylogdings.com", include_css: "/hotel.css" } # Header block maps_to abstract: "header", concrete_widget: "HTMLComposition"... Regras de Mapeamento Concreto maps_to abstract: "availability", concrete_widget: "HTMLSpan", params: { content: "Sold out", css_class: "highlight" } do equal room[:status], 'sold-out' end maps_to abstract: "availability", concrete_widget: "HTMLSpan", params: { content: "Only #{room[:rooms_available]} left!", css_class: "highlight" } do equal room[:status], 'few-rooms' end maps_to abstract: "availability", concrete_widget: "HTMLSpan", params: { content: "Available", css_class: plain" }

30 Obrigado!

Documentos relacionados

5 Detalhes da Implementação

Detalhes da Implementação 101 5 Detalhes da Implementação Neste capítulo descreveremos detalhes da implementação do Explorator que foi desenvolvido usando o paradigma MVC 45 e o paradigma de CoC 46 (Convention