Aula 2 Arquitectura da camada de interface.! Programação Web - 1! Mestrado em Engenharia Informática Universidade do Minho! 44! Programa Métodos! &! Tecnologias!! Conceitos de IHC!! Programação web client side!! Concepção centrada no utilizador!! Model-based design!! Programação web server side!! Avaliação de interfaces! Mestrado em Engenharia Informática Universidade do Minho! 45!
First principles (1) Focus on the user and their tasks, not on the technology (Johnson, 2008)!! O ponto fulcral!!! Para quem é o software?!! Para que é o software?!! Que problemas têm os utilizadores agora?!! Qual as capacidades e conhecimento dos utilizadores?!! Como pensam os utilizadores nos dados?!! Como vai afectar os utilizadores?! Mestrado em Engenharia Informática Universidade do Minho! 46! Mestrado em Engenharia Informática Universidade do Minho! 47!
Programação Web! ARQUITECTURA DA IU Mestrado em Engenharia Informática Universidade do Minho! 48! Arquitectura em camadas Mestrado em Engenharia Informática Universidade do Minho! 49!
Importância da separação de camadas UIs sujeitas a muitas alterações! Novas features na aplicação! Diversidade de dispositivos! Novas tecnologias de input/output! Separação de camadas! Portabilidade! Reutilização! Uma aplicação, múltiplas interfaces! Customisation! User Interface Management Systems (UIMS)! Geração/gestão/adaptação automática de interfaces (?)! Evolução para Model-Based User Interface Development (MBUID)! Mestrado em Engenharia Informática Universidade do Minho! 50! Modelo de Seeheim! 1st UI software tools workshop, Seeheim, Alemanha. 1-3 Nov., 1983.!! Modelo lógico de um UIMS! Mestrado em Engenharia Informática Universidade do Minho! 51!
Componentes do Modelo de Seeheim Presentation! lê dados do input! gera o output! Dialogue Control! define a estrutura do diálogo! faz ponte entre Presentation e Application! Mestrado em Engenharia Informática Universidade do Minho! 52! Components of Seeheim Model (ctd) Application Interface Model! representação da aplicação na perspectiva da interface! inclui:! especificação dos dados da aplicação! especificação das operações da aplicação! mapeamento dos dados e operações da interface para dados e operações da aplicação! Mestrado em Engenharia Informática Universidade do Minho! 53!
Seeheim Model Prós and Contras Prós! separation of concerns! possibilitou a utilização de técnicas e ferramentas de processamento de linguagens! Contras! multi-threaded interaction?! low-level ʻsemanticʼ feedback?! cada componente é monolítico! Mestrado em Engenharia Informática Universidade do Minho! 54! MVC Arquitecture Mestrado em Engenharia Informática Universidade do Minho! 55!
MVC: Model-View-Controller! Arquitectura do Smalltalk-80 (Burbeck, 1987)!! Divide aplicações interactivas em três tipos de componentes:! - Model:!! Contém os dados e a lógica de negócio! - View:!! Faz o rendering fo modelo (interface) para o utilizador!! Que parte do modelo é apresentada?!! Como é apresentada?! - Controller!! Processa user input!! Transforma eventos da interface em chamadas à funcionalidade! Mestrado em Engenharia Informática Universidade do Minho! 56! MVC-like no Swing Delegate Mestrado em Engenharia Informática Universidade do Minho! 57!
Web Apps Data sources / services! Mestrado em Engenharia Informática Universidade do Minho! 58! MVC-like em Web Apps Web page (Controller) JavaScript 1 2 Web Server (Model) Browser 3 4 HTML/CSS (View) Mestrado em Engenharia Informática Universidade do Minho! 59!
Conteúdo vs. Forma HTML (HyperText Markup Language)! propósito original: definir o conteúdo de um documento! HTML com tags de formatação (HTML 3.2)! Uma má ideia!! Formatação feita página a página!!! CSS (Cascading Style Sheets)! Aparecem no HTML 4.0! Definem como o HTML deve ser apresentado! Permitem remover a informação de formatação do HTML! Exemplo: Mestrado em Engenharia Informática Universidade do Minho! 60! Separar o conteúdo do layout Mestrado em Engenharia Informática Universidade do Minho! 61!
Web apps! Aplicação acedida via um browser!! Acesso (tipicamente) baseado em contas de utilizador!! Dados dos utilizadores guardados de forma centralizado no servidor! Mestrado em Engenharia Informática Universidade do Minho! 62! Web vs. Desktop - desenvolvimento Web!! multi-plataforma com uma única code base!! Manutenção facilitada!! Maior facilidade de logging!! Fim da pirataria!?!! Acesso limitado aos recursos das máquinas cliente!! Investimento em hardware e desempenho!! Segurança de dados e privacidade! Desktop!! Tecnologia estável! Grrr!! Maior controlo do utilizador!!?!!! Acesso directo às máquinas! Responsabilidade do utilizador!! Responsabilidade do utilizador! Mestrado em Engenharia Informática Universidade do Minho! 63!
Web vs. Desktop - utilizadores Web!! Acesso facilitado!! Necessidade de conectividade!! Manutenção facilitada!! Maior riscos de segurança/ privacidade!! Maior segurança dos dados!! Menor segurança dos dados!! Pior desempenho!! Pior hardware!! Modelo de negócio baseado em subscrições! Desktop!! Requerem instalação!! Acesso facilitado!! Utilizador mantém controlo!! Menores riscos de segurança/ privacidade(?)!! Necessidade de gerir backups!! Possibilidade de gerir backups!! Melhor desempenho!! Melhor hardware!! Modelo de negócio baseado em compra (?)! Mestrado em Engenharia Informática Universidade do Minho! 64!! Aplicação desktop para o projecto?! - Sim/Não?! - Porquê? (Ganhos/Perdas)! - Existe meio termo?! Mestrado em Engenharia Informática Universidade do Minho! 65!