Unidade: Sistemas Hipermidia Multimidia. Unidade I:

Transcrição

1 Unidade I: 0

2 Unidade: Sistemas Hipermidia Multimidia Engenharia de Websites Por que realizar uma Engenharia de websites: Devemos seguir Princípios básicos de Engenharia (passos bem definidos); Websites e também sistemas desktop precisam ser desenvolvidos baseados em princípios de engenharia Princípios básicos de ES: desenvolvimento de um produto complexo equipe de pessoas especializadas (analistas, programadores, testes). aplicação de métodos, técnicas, ferramentas, modelos e princípios Planejamento e gerência de custos, prazos e pessoal; Podemos utilizar na Engenharia Web (EW) os métodos e técnicas da Engenharia de Software (ES)? Não, a EW não é um clone da ES, embora envolve programação e processo de desenvolvimento ES x EW Apresentação x Funcionalidade Aplicações: ênfase na funcionalidade e aplicabilidade Website: ênfase na apresentação, aparência, navegação e outras qualidades estéticas Tradição x Experiência Existe mais experiência no desenvolvimento de software convencional, possibilitando planejamento e gerência mais realística 1

3 Evolução Tecnológica A tecnologia para o software convencional está um pouco mais estável APIs para interfaces gráficas Banco de Dados relacionais com SQL Tecnologias para web mudam bastante: HTML, XML, ASP, PHP,... etc Público alvo (Classe de usuários) Aplicações convencionais: classe de usuários mais definida websites temos diferentes tipos de usuários (crianças, adolescentes, idosos, etc) Navegação Aplicações convencionais: menus, janelas, botões Web: menus de navegação, hipertexto, link em imagens, figuras, etc. A EW é mais multidisciplinar do que a ES, ela envolve: Engenharia de software, Hipermídia e Multimídia, Interação usuáriocomputador, banco de dados, artes, comunicação visual, linguística computacional, gerência de projeto, projeto e apresentação gráfica, computação gráfica, etc. Eng. Software X Eng. Web Características avaliadas: Público e Finalidade Maturidade da Tecnologia Diferenças na Complexidade Diferenças no ciclo de vida Público Alvo Engenharia de Software - Público bem definido - Ênfase na aplicabilidade e funcionalidade Engenharia Web - Público diversificado - Ênfase na apresentação, aparência, navegação e outras qualidades estéticas 2

4 Maturidade da Tecnologia Engenharia de Software Tecnologia mais estável Excelentes ferramentas disponíveis (Análise, Projeto, Implementação, Testes) Engenharia Web Tecnologia em constante evolução Ferramentas disponíveis a nível de implementação, mas existem poucas para Análise, Projeto e as outras atividades da EW. Propósitos de websites Informativo fornecer informações (jornais e revistas, manuais online) Entretenimento divertir pessoas (livros, parques temáticos) Funcional oferecer serviços (banco, comércio) Informativo e Funcional (biblioteca digital) Entretenimento e Funcional (rádios, video sob demanda) Informativo e Entretenimento (museus) Informativo, Funcional, Entretenimento (portais) Características da Engenharia Web Multidisciplinaridade Mecanismos para gerenciamento de conteúdo Mecanismo de controle de versões Suporte a diversas línguas 3

5 Engenharia Web Atividades 1) Análise de Requisitos 2) Design Estrutura Organizacional Navegacional Conteúdo Interface da Página 3) Implementação 4) Testes 5) Instalação e Manutenção 6) Evolução Categorias de Aplicações Web 1. Informativas (jornais, manuais, catálogos de produtos e livros online, por exemplo) 2. Interativas (formulários de inscrição e jogos online) 3. Transacionais (compras eletrônicas e serviços de banco online) 4. Workflow (sistemas de gerência, planejamento e acompanhamento online. Correios é possível verificar andamento da entrega, Amazon também...) 5. Comunidades online (grupos, chat, leilão online) 6. Portais (portais sobre educação, UOL, Terra) Projeto de websites: Classificação -Simples informação textual Páginas estáticas 4

6 Navegação simples Desenvolvido por equipe pequena - Avançado informação multimídia Páginas dinâmicas (o conteúdo é alterado várias vezes no dia...) Busca de informação na navegação é complexa Desenvolvido por grande equipe Requisitos para EW Prover mecanismo de atualização simples para gerência de conteúdo; Prover suporte a várias línguas; Prever extensões de serviços futuros (após a entrega) ou seja, o sistema não deve ser fechado, deve ser possível extensões futuras; Capacidade de integrar componentes de software de prateleira, por exemplo, para um ecommerce, devemos possibilitar a integração com o sistema da operadora de cartão de crédito; Independente de plataforma (browser): existem tecnologias que só funcionam bem em determinados browsers, por ex, javascript no internet explorer. Processo de Desenvolvimento Determina as fases e atividades necessárias no desenvolvimento de um website; Associado a um modelo de desenvolvimento tem-se métodos, técnicas, ferramentas, etc; Protótipos (próx. página) devem ser utilizados para auxiliar na definição do problema e a especificação dos requisitos: podem ser construídos utilizando desenhos (papel ou computador), usando UML, modelos de sites, etc. 5

7 Protótipos - podem ser utilizados para exploração ou experimentação - facilitam a definição do problema e a especificação dos requisitos - possibilitam testes com usuários e testes de programas - podem ser construídos utilizando-se materiais plásticos ou computacionais - podem evoluir para o produto final Principais tipos de requisitos em websites (casos de uso) Requisitos Operacionais qual a tecnologia necessária? Requisitos de Conteúdo quais informações o site deve conter? Requisitos Funcionais quais serviços o site deve oferecer? Requisitos de Interação como o usuário vai utilizar/interagir/navegar no site? Requisitos de Desenvolvimento pessoal, prazos, custos e equipamentos? Design do website Estrutura Organizacional visão global do site (idéia geral, objetivo, público que se quer atingir, etc) Navegacional visão de navegação Conteúdo visão e modelagem das informações do site 6

8 Interface da Página organização, interação e apresentação Funcional arquitetura dos programas, projeto de banco de dados, plataforma de desenvolvimento, etc. Homepage Página de entrada do site É importante o acesso direto à homepage a partir de qualquer ponto do site Deve refletir o propósito do site Deve indicar quais os objetivos, as informações e ou serviços Deve conter links para acesso aos recursos Deve indicar o responsável pelo site e como entrar em contato ( do onbudsman) Dever ter link para o mapa do site Deve ter link para ferramentas de busca Diretrizes para Homepages Ser leve e ter poucas figuras para ser carregada mais rapidamente Ter pouco texto para que o usuário não seja obrigado a ler (e usar o barra de rolagem evita-la ao máximo) criar páginas icônicas, ou seja, visuais, com muitas imagens, figuras; Bem organizada para que o usuário encontre rapidamente os recursos oferecidos; Os links devem dar noção dos recursos oferecidos; Os links devem estar bem definidos (nomes claros) e fáceis de encontrar (existem sites onde determinada palavra/texto parece um link mas não é, e vice-versa). 7

9 8 Lições para EW 1- Investir no Processo de Design 2- Treinar Gerentes de Conteúdo 3- Escolher Flexibilidade sobre Funcionalidade 4- Documentar o sistema 5- Reengenharia é mais difícil do que Engenharia 6- Estar preparado para mudanças de requisitos 7- Escolher qualidade sobre deadlines (datas) 8- Gerenciar versões Design da Interface Organização determinar como as páginas estão organizadas (estrutura hierárquica é a mais utilizada na internet, rede mais inviável de ser implementada, linear pode ser usada em sites que demandem usar uma estrutura linear, como dicionários, glossários, etc; ou ainda pode ser usada juntamente com outras estruturas, por exemplo, podemos usar a estrutura hierárquica em um site de ecommerce, e especificamente na parte de fechamento de compras, usarmos a estrutura linear). Interação menus, clique em âncoras, botões e ícones, etc. Apresentação determinar os aspectos estéticos e visuais do site diagramação das páginas (área de navegação, conteúdo, notícias, etc) uso de imagens e ícones, idioma escolha das cores, tipo de fontes, plano de fundo, etc. 8

10 9

11 Tecnologias Utilizadas Imagens: Adobe Illustrator, Photoshop, Corel Draw, Adobe Fireworks Design: Dreamweaver, Frontpage Diagramação: Adobe Pagemaker Animações: Macromedia Flash Linguagens: HTML, DHTML, Javascript, CGI, Perl, ASP, PHP, Java Servlets, XML,... 10

12 Referências Básica GLOOR, P. A. Elements Of Hypermedia Design: Techniques For Navigation And Visualization In Cy. Boston: Birkhauser - Publishers For Ar, HALSALL, F. Multimedia Communications: Applications, Networks, Protocols And Standards. 5. ed. England: Addison Wesley Longman, SAYOOD, K. Introduction To Data Compression. 3. ed. New York: Morgan Kaufmann Publishers,inc, NIELSON, J.; LORANGER, H. Usabilidade na Web. Rio de Janeiro: Campus, PAULA FILHO, W. P. Multimídia: Conceitos e Aplicações. Rio de Janeiro: Ltc-Livros Técnicos e Científicos, Complementar BAEZA-YATES, R.; RIBEIRO NETO, B. Modern Information Retrieval. England: Addison Wesley Longman, LOWE, D.; HALL, W. Hypermedia & The Web: An Engineering Approach. Inglaterra: John Wiley & Sons, SAUCIER, C. Animação e Interatividade na Web. Sao Paulo: Market Books Brasil, NIELSEN, J. Projetando Websites. Rio de Janeiro: Campus,

13 12 Responsável pelo Conteúdo: Prof. Dr. Juliano Schimiguel Campus Liberdade Rua Galvão Bueno, São Paulo SP Brasil Tel: (55 11)