0
Unidade I:
1 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a
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
2 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a 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ário-computador, 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
3 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a 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ões4 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a
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
5 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a 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, porexemplo, 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 umwebsite;
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),
6 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a 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
7 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a 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 (e-mail 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 barrade 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 recursosoferecidos;
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).
8 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a 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
9 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a
10 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a 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, Java11 Uni d ad e : S is tem as Hi pe rm idi a Mu lti mi di a
Referências
Básica
GLOOR, P. A. Elements Of Hypermedia Design: Techniques For Navigation And Visualization In Cy. Boston: Birkhauser - Publishers For Ar, 1997.
HALSALL, F. Multimedia Communications: Applications, Networks,
Protocols And Standards. 5. ed. England: Addison Wesley Longman, 2001.
SAYOOD, K. Introduction To Data Compression. 3. ed. New York: Morgan Kaufmann Publishers,inc, 2006.
NIELSON, J.; LORANGER, H. Usabilidade na Web. Rio de Janeiro: Campus, 2007.
PAULA FILHO, W. P. Multimídia: Conceitos e Aplicações. Rio de Janeiro: Ltc-Livros Técnicos e Científicos, 2000.
Complementar
BAEZA-YATES, R.; RIBEIRO NETO, B. Modern Information Retrieval. England: Addison Wesley Longman, 1999.
LOWE, D.; HALL, W. Hypermedia & The Web: An Engineering Approach. Inglaterra: John Wiley & Sons, 1999.
SAUCIER, C. Animação e Interatividade na Web. Sao Paulo: Market Books Brasil, 2000.
12 Responsável pelo Conteúdo:
Prof. Dr. Juliano Schimiguel
www.cruzeirodosul.edu.br Campus Liberdade Rua Galvão Bueno, 868 01506-000
São Paulo SP Brasil Tel: (55 11) 3385-3000
