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
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 - 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
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
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>
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
Exemplo - Digital Home Exemplo - Digital Home
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 1989 - 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
TecWeb Synth Modelos de Navegação
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
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
Cameleon Reference Framework TecWeb Interface Abstrata
TecWeb Interface Abstrata TecWeb Interface Abstrata
TecWeb Interface Abstrata TecWeb Interface Abstrata
TecWeb Interface Abstrata TecWeb Interface Abstrata
Cameleon Reference Framework TecWeb Interface Concreta
Exemplo Reserva de Hotel Exemplo Reserva de Hotel
Exemplo Reserva de Hotel Abordagens
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
Exemplo de Composição Abstrata Exemplo de Composição Abstrata AbstractInterface name : main_page CompositeInterfaceElement name : header ElementExhibitor name : title SimpleActivator name : account_anchor
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
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 }]}
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 }]
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 }]}]}
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" "http://base#6a-b654-b1e28"> <WME "http://base#6a-b654-b1e28" "class" "SHDM::Index"> <WME "http://base#6a-b654-b1e28" "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>
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", :_
Regras de Seleção de Elementos Abtratos Regras de Seleção de Elementos Abtratos
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
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" }
Obrigado! laufer@globo.com