Aula 5 - Topico Ambiente Web Unip

Prévia do material em texto

TAW - Tópicos de TAW - Tópicos de 
Ambiente WebAmbiente Web
Prof. Ricardo Veras
rveras@unip.br
Aula - 05
Desenvolvimento e Design de Site 
WEB
2TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Agenda
 Problemas Comuns
 Qualidades de Um Site WEB
 Engenharia de Site WEB
3TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Problemas 
Comuns
Problemas Comuns
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras4
Problemas Comuns
 Web Sites mal definidos e projetados
 Necessidade de atualização constante das informações: eternamente “em 
construção”
 Evolução extremamente rápida da tecnologia
 Falta de modelos do processo
 Planejamento errado e estouro dos prazos e custos
 Equipes mal organizadas e sem a competência adequada
 Falta de documentação e dificuldades de implementação e manutenção
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Categorias de Problemas
Questões de Usabilidade
• Onde posso encontrar a informação ou o serviço?
• Como posso solicitar este serviço? Quais informações devo fornecer?
• Qual foi o resultado? Era o que eu queria?
Questões de Funcionamento
• O site tem a informação ou serviço que eu preciso?
• Eu mandei os dados, mas o site processou errado!
Questões de Desempenho
• A página demora a carregar!
• O servidor não responde em tempo.
• A página demora a ser exibida!
Questões de Portabilidade
• Não é exibido corretamente neste browser!
• A linguagem script não funciona neste browser ou neste servidor (empresas).
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Exemplo de Problemas de Funcionamento
Usuário fez uma busca sobre “Patins”
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Por Que Eles Ocorrem?
 Tipicamente um Site Web é desenvolvido sem planejamento ou projeto, indo-se 
diretamente para a implementação 
 Normalmente não são feitas a definição de objetivos a análise dos requisitos, o 
design, os testes e a manutenção
 As pessoas consideram que basta saber HTML e um pouco de programação 
para desenvolver um Site Web
 As competências profissionais são muitas e não são encontradas num único 
profissional, mas em um time de profissionais qualificados.
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Qualidades de Um Site Web
 Legível
 Atrativo
 Organizado
 Correto
 Atualizado
 Adequado aos usuários (usabilidade)
 Adequado à tecnologia
 Adequado ao propósito
 Funcional
 Eficiente
 Robusto e confiável (possui toda informação necessária)
 Bem documentado
 Manutenível
 Testável
 Portável (W3C)
 Reutilizável
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Engenharia de Site WEB
Sites Web precisam ser desenvolvidos baseados em princípios de 
engenharia
Engenharia
• Desenvolvimento de um produto complexo
• Equipe de pessoas especializadas
• Aplicação de métodos, técnicas, ferramentas modelos e princípios
• Planejamento e gerenciamento de custos, prazos e pessoal
• Qualidade do produto e do processo
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Ciclo de Vida
Fases pela qual o site passa durante sua vida útil
Três fases principais:
• Definição
• Desenvolvimento
• Operação
11TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Fase de Definição
Análise de requisitos, restrições e recursos
Proposta de soluções
Estudo de viabilidade
Planejamento e gerenciamento do desenvolvimento
Estimativas e análise de riscos utilizando métricas
Protótipos de apresentação
12TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Fase de Desenvolvimento
Design de Software
• Design conceitual
• Design da interface de usuário
• Design da arquitetura de software
• Design de algoritmos e estruturas de dados
Implementação
• Codificação e Tradução
• Testes de programas e testes de usabilidade
• Homologação
13TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Fase de Operação
Implantação
• Instalação
• configuração
Operação e Suporte
Manutenção
• Correção
• Evolução
Atualização
Utilização
14TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Fase de Definição
Processo
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Propósito do Site Web
 Informativo
• Prestar informações
 Funcional
• Oferecer serviços
 Entretenimento
• Divertir pessoas
 Alguns sites têm múltiplos propósitos
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Exemplos
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Escopo de Web Sites
Quanto à ligação em rede
• Internet
• Intranet
• Extranet
Quanto à audiência (público)
• Coorporativo 
• Público restrito e acesso controlado.
• Público seletivo (por assunto)
• Aberto ao o público geral
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Descrevendo o Problema
Papéis:
• A empresa gasta uma grande quantidade de dinheiro com a elaboração de catálogos e folhetos 
informativos.
• Clientes estão constantemente solicitando os catálogos e eles precisam ser rapidamente atualizados e 
enviados 
• A empresa precisa aumentar as vendas em locais distantes
• Investidores têm interesses em obter dados financeiros da empresa
Conclusão: Espera-se que um Web Site atenda a estas necessidades. Pode-se economizar 
em catálogos e folhetos e oferecer dados financeiros a investidores. As vendas a clientes 
podem ser feitas remotamente.
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Possíveis Soluções
Solução A
• Um Web Site informativo que possibilite a divulgação de informações. Páginas 
ilustradas com informações sobre os produtos. Planilhas com dados financeiros em 
páginas (texto) e gráficos.
Solução B
• Um Web Site funcional com uma base de dados que possibilite a busca a diversos 
produtos. Os dados são fornecidos em tabelas. (Obs.: os dados financeiros provém 
de uma base de dados financeiros. A base de dados não armazena figuras ou 
gráficos)
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Estudo de Viabilidade
Cenário exemplo:
Solução A
• Tecnologia necessária: HTML, CSS, Servidor HTTP, Computador de X MHz e disco de 
Z GB
• Custos: Ex.: Hardware R$ 5000,00, Software R$ 1000,00
• Prazos: 3 meses
Solução B
• Tecnologia necessária: HTML, CSS, Servidor HTTP, JavaScript, CGI, Interpretador 
Perl, Servidor de Banco de dados, Computador de X+Y MHz e disco de Z+W GB
• Custos: Hardware R$ 7000,00, Software R$ 4000,00
• Prazos: 8 meses
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Análise de Usuários
Identificação dos papeis de usuários
• Quais papéis desempenham os usuários do site?
• Exemplos: comprador, funcionário, educador, aluno, etc.
• Diferentes atores possuem diferentes necessidades e realizam diferentes tarefas
Questões para identificar os usuário:
• Quem usa o site?
• Quem fornece informações ao site?
• Quem solicita de informações do site?
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Análise de Usuários
Levantamento do perfil dos usuários
• Capacidades e limitações físicas e cognitivas
– É necessário fornecer opções de acessibilidade?
• Conhecimentos
– Vocabulário específico ou geral?
– Possui conhecimento sobre a Web e Computadores?
– Será necessário fornecer informações de ajuda? Que tipo?
• Cultura e linguagem
– Questões de internacionalização.
– É necessário uma interface em outro idioma.
– Estou utilizando termos ou imagens de uma cultura específica.
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Análise de Tarefas
Descreve o conjunto de atividades mentais e físicas necessárias para atingir a 
meta (objetivo) do site.
As tarefas originam-se das necessidades dos usuários
As tarefas refletem o ponto-de-vista do usuário e não do site
Exemplo:
• Tarefa: “Tirar a conta-corrente do vermelho”– Verificar qual o meu débito na conta-corrente
– Verificar se eu tenho dinheiro em contas de investimentos
– Fazer a transferência entre as contas
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Requisitos
Requisitos operacionais
• Qual a tecnologia necessária? Qual é possível?
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 o site?
Requisitos de desenvolvimento
• Pessoal, prazos, custos e equipamentos
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Requisitos Operacionais
Tem por objetivo definir o ambiente operacional do site
São definidos com base no:
• Escopo do site: intranet, internet ou extranet
• Propósito do site: funcional, informativo, entretenimento
Fácil de definir numa intranet, mas imprevisível na internet.
Restrições de custos
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Requisitos Operacionais (cont.)
Lado servidor
• Capacidade do hardware
• Sistemas operacional
• Servidor Web
• Servidor de Banco de Dados
• Quantidade de Usuários (simultâneos ou não)
• Segurança
Lado Cliente
• Capacidade do hardware
• Softwares
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Requisito de Conteúdo
Quais informações incluir?
• Depende do propósito do site
Em um site coorporativo deve-se incluir:
• Informações gerais: objetivos, histórico da empresa,
• Informações sobre pessoal
• Informações sobre os serviços
• Informações de ajuda
Pode-se transportar, ou substituir, os conteúdos impressos, adaptando-o ao novo 
meio.
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Requisito de Funcionais
Determinam qual a funcionalidade do site
Quais os serviços serão oferecidos
Não deve determinar como o site será implementado
Exemplos:
• Busca de produtos, Cálculos de juros, Exibição de vídeo
Podem ser descritos através de modelos
29TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Fase de 
Desenvolvimento
Processo
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Design iterativo-evolutivo
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Visão da evolução e prototipação
Design do Site Web
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Design do Site Web
Design conceitual
• Descrição geral do domínio (web) e do site
Design do conteúdo
• Informações que deve fornecer ao usuário
Design da interface de usuário
• Como será a organização interna, a interação, a apresentação
Design funcional
• Arquitetura dos programas
• Projeto de banco de dados
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Design Conceitual
Descreve o vocabulário do domínio: conceitos e relacionamento
Direciona a funcionalidade e a arquitetura da informação
Podem ser descritos por Diagrama de Classes (OO) ou Entidade-
Relacionamento (BD)
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Design da interface do site
Organização
• Determinar como as páginas estão organizadas
Navegação
• Determinar como o usuário pode navegar
Interação
• Determinar como os serviços podem ser utilizados
Apresentação
• Aspectos estéticos e visuais
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Design Funcional
Arquitetura dos componentes funcionais
• Lógicos
• Físicos
Programas que implementam os serviços
• Processamento dos dados
• Acesso a banco de dados
Geração de páginas HTML
Projeto de bancos de dados
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Arquitetura Lógica
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Arquitetura Física
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Implementação
Design e montagem do Site em micro (pessoal, servidor)
• Linguagens:
– HTML - linguagem tradicional usada para criar páginas WEB com programação de hypertexto 
(documento com palavras ou imagens que levam para outras páginas com um clique - links).
– DHTML - linguagem que revoluciona a forma com que os desenvolvedores de páginas Web 
incluem recursos dinâmicos e interativos nas páginas.
– VRML - linguagem que permite através de elementos geométricos gerar ambientes virtuais pelos 
quais o usuário pode navegar e interagir com os componentes utilizados.
• Softwares (exemplos):
– Microsoft Frontpage
– Macromedia Dreamweaver
Desenho das imagens
Codificação dos programas em uma linguagem compatível com o servidor ou 
sistema operacional
Criação dos arquivos (tabelas) do banco de dados
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Teste e Avaliação
Correção do conteúdo
Verificação dos elos (links)
• Os links sempre devem levar ao “recurso desejado”
Testes de correção dos programas
• Os programas funcionam corretamente
Testes de usabilidade
• Facilidade de navegar
• Facilidade aprender e usar os serviços
Testes de portabilidade
• Funcionamento em todos os browsers e computadores
Teste de desempenho
TAW – Tópicos de Ambiente Web Prof. Ricardo Veras
Implantação
Carga das páginas no provedor de hospedagem
• Conexão com um servidor FTP
– uma janela mostra os diretórios de seu disco rígido;
– outra janela mostra o diretório de arquivos onde os arquivos poderão ser carregados.
Acionamento de Banco de Dados
• Carga de Dados
• Disponibilização de acesso – odbc, jdbc
Acionamento de Servidor de Aplicação
• Computação Distribuída
– Middleware
– Web-Services
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38
	Slide 39
	Slide 40