IFPA-PA

Curso de Tecnologia em Análise e Desenvolvimento de

Sistemas

Engenharia da Web

Prof. Cláudio Martins

claudiomartins2000@gmail.com
 Cefet/PA
Curso de Tecnologia em Sistemas de Informação

Engenharia da Web

Aula 1: Introdução

Prof. Cláudio Martins

 O que é a Web (WWW)?
✔
A World Wide Web ("Rede de alcance mundial"),
também conhecida como Web e WWW) é um
sistema de documentos/conteúdo em hipermídia
que são interligados e executados na Internet.

Criada por Tim Berners-Lee entre 1980 e 1990.

✔

✔
No final de 1990, Berners-Lee já havia
construído as ferramentas necessárias para o
sistema:
✔
o navegador, o servidor web e as páginas
web.
 O que é a Web (WWW)?

✔
As páginas são documentos que podem conter
texto, vídeos, sons, hipertextos, figuras e outras
mídias.
Para visualizar a informação é necessário um
✔

programa de computador chamado navegador .

✔
O conteúdo (páginas e documentos) ficam
armazenados em servidores web e é necessário
um endereço registrado em um local (“site” ou
"sítio").
✔
O acesso aos “links” (hiperligações na página) para
outros documentos é um processo chamado de
"navegar" ou "surfar" na Web.
 Tecnologias fundamentais

A funcionalidade da Web é baseada em três

padrões tecnológicos:
- URI, um sistema que especifica como cada
página de informação recebe um "endereço"
único onde pode ser encontrada.
- HTTP, um protocolo que especifica como o
navegador e servidor web comunicam entre si.
- HTML, uma linguagem de marcação para
codificar a informação de modo que possa ser
exibida em uma grande quantidade de
dispositivos.
 URI

URI é o Identificador Uniforme de

✔

Recursos (Uniform Resource Identifier ).

URI é uma cadeia de caracteres usada

✔

para identificar ou denominar um recurso

na Internet, usando protocolos
específicos.
 URN e URL
Um URI pode ser um localizador (URL) ou um nome (URN), ou
✔

ambos.
✔
- Nome de Recursos Uniforme - URN (Uniform Resource Name) é
como o nome de uma pessoa
✔
- Localização de Recursos Uniforme - URL (Uniform Resource
Locator) é como o um endereço da pessoa – único para aquela
pessoa.
O URN define a identidade de um item, enquanto que o URL nos dá
✔

um método para o encontrar. Ambos se complementam.

Um URL é um URI que, além de identificar um recurso, provê meios
✔

de agir sobre obter e representar este recurso, descrevendo seu

mecanismo de acesso primário ou a localização na "rede".
✔
- Por exemplo, o URL http://www.wikipedia.org/ é um URI que
identifica um recurso (Wikipedia) e implica na representação deste
recurso (como o código HTML atual da página, como caracteres
codificados), está disponível via HTTP de um servidor (host) de redes
chamado www.wikipedia.org.
 A Evolução da Web (início)

No início da Web:

➢
- Conteúdo estático e textual
➢
- Interação limitada
➢
- Navegabilidade fácil
➢
- Desempenho não era essencial
➢
- Websites desenvolvidos apenas por uma
pessoa ou por um pequeno grupo
 A Evolução da Web (Atual)

Atualmente:

✔
Escopo e complexidade vêm aumentando
✔
Sons, imagens, animações, vídeo, etc.
✔
Navegabilidade complexa
✔
Desempenho essencial
 A Evolução da Web

Tempo médio (anos) para adoção da

tecnologia pelo povo americano.
 A Evolução da Web

Tempo estimado em anos que se leva para

atender a 50 milhões de usuários.

Telefone - 74 anos
Rádio - 38 anos
PC - 16 anos
TV - 13 anos
Internet - 4 anos
Skype - 2 anos
Redes sociais - 3 meses
 O cenário atual

➔
Websites feitos com pouca disciplina, sem
preocupação com técnicas e métodos
padronizados (sem controlar a qualidade)
➔
Muitos simplificam o processo
➔
acham que desenvolvimento para a Web é apenas
criação de páginas usando HTML, usando
ferramentas como Frontpage ou Dreamweaver
➔
Há uma demanda crescente por conteúdo e
aplicações com conteúdo dinâmico e baseado em
banco de dados.
 Engenharia para a Web

✗
Processo utilizado para criar software para o
ambiente web (aplicativos Web ou WebApps) de
alta qualidade.
✗
Não é igual a Engenharia de Software
tradicional, mas compartilha dos mesmos
conceitos e princípios.
✗
Incorpora novas abordagens, metodologias,
ferramentas, técnicas e normas para atender os
requisitos exclusivos dos sistemas para a Web.
 Engenharia da Web (definição)

 “A engenharia da web diz respeito ao

estabelecimento e uso de princípios científicos
sólidos, de engenharia e de gestão, e
abordagens disciplinadas e sistemáticas para o
bem-sucedido desenvolvimento, disposição e
manutenção de sistemas e aplicações de alta
qualidade baseados na web”
• Murugesan (apud Pressman)

14
 Engenharia da Web

 Aplicações Web (WebApps), envolvem um

mistura de
 publicação impressa e desenvolvimento de
software
 comercialização e computação
 comunicações internas e relações externas
 arte e tecnologia

15
 Engenharia da Web – Atributos de
WebApps
 Concentradas em Redes
 WebApps estão disponíveis em redes
• Internet: permitindo comunicação aberta ao mundo todo
• Intranet: implementando as comunicações dentro das
organizações
• Extranet: comunicação entre redes

 necessita atender às necessidades de uma

comunidade diversificada de clientes

16
 Engenharia da Web – Atributos de
WebApps

 Impulsionadas pelo conteúdo

 em muitos casos, a função primordial de um
sistema baseado na Web é usar a
hipermídia para apresentar conteúdo de
texto, gráficos, áudio e vídeo ao usuário
final

17
 Engenharia da Web – Atributos de
WebApps

 Evolução contínua
 ao contrário dos softwares tradicionais que
evoluem ao longo de uma série de versões
planejadas e cronologicamente espaçadas,
aplicações baseadas na Web evoluem
continuamente

18
Engenharia da Web – Características

 Imediatismo
 prazo de colocação no mercado é curto

 Segurança
 disponível em redes
 limitar a população de usuário que podem
ter acesso a WebApp
 proteger conteúdo reservado
 fornecer modos seguros de transmissão de
dados

19
 Engenharia da Web – Características
 Estética
 para vender idéia ou produto a apresentação é
aspecto que influencia no sucesso da aplicação

20
 Engenharia da Web – Categorias de
WebApps
Informacional
 conteúdo somente de leitura
 fornecido com navegação
 ligações simples

21
 Engenharia da Web – Categorias de
WebApps
Para baixar (download)
 Um usuário baixa informações de um servidor

22
 Engenharia da Web – Categorias de
WebApps
Interação / Redes Sociais
 comunicação entre uma comunidade ocorre por
intermédio de salas de bate-papos, quadros de aviso
ou mensagens instantâneas

23
 Engenharia da Web – Categorias de
WebApps
Entrada do usuário
 entrada baseada em formulários

24
 Engenharia da Web – Categorias de
WebApps
Orientada a transação
 o usuário faz uma solicitação (pedido) que é atendido
pela WebApp

25
 Engenharia da Web – Categorias de
WebApps
Orientada a serviços
 a aplicação fornece serviços ao usuário

26
 Engenharia da Web – Categorias de
WebApps
Portal
 a aplicação orienta o usuário para conteúdos ou serviços
da web fora do domínio da aplicação do portal

27
 Engenharia da Web – Categorias de
WebApps
De acesso a base de dados
 O usuário consulta uma grande base de dados e
extrai informações

28
 Exercícios

Abra os websites a seguir e identifique

as categorias (classes), conforme a
classificação mostrada nos slides
anteriores:
 http://www.americanas.com.br
 http://lattes.cnpq.br
 http://www.pa.gov.br
 http://www.receita.fazenda.gov.br
 http://www.downloads.com
 http://www.linkedin.com
29
Modelo de processo da WebE

(Pressman)
30
 Modelo de processo da WebE
 Iterativo e incremental
•O processo é realizado em fases que se
repetem ao longo do desenvolvimento (iterativo)
•É incremental, pois o software web é entregeu
em incrementos evolutivos.

 Formulação
 identificação das metas e dos objetivos da WebApp
 qual é a principal motivação da WebApp?
 por que a WebApp é necessária?
 quem vai usar a WebApp?
 estabelece o escopo do primeiro incremento
31
 Modelo de processo da WebE
 Planejamento
 estima-se o custo global do projeto
 avaliação dos riscos
 definição de cronograma detalhado para o
primeiro incremento
 previsão de cronograma para os
incrementos subseqüentes

32
 Modelo de processo da WebE
 Análise
 estabelecimento dos requisitos
 identificação do conteúdo
 definição do projeto gráfico (estética)
 documentação X evolução contínua: como
conciliar?

33
 Modelo de processo da WebE
 Engenharia
 Projeto do conteúdo e produção: projetar
e/ou adquirir todo o conteúdo de texto,
gráfico, áudio e vídeo, que deve ser
integrado na WebApp

 Projeto arquitetural: focaliza a

estrutura global de hipermídia

34
 Modelo de processo da WebE
 Engenharia
 Projeto navegacional
• definição dos caminhos de navegação que
permitem ao usuário ter acesso ao conteúdo e aos
serviços
• pode estar ligado ao tipo de usuário
• definição da mecânica da navegação: ligações
baseadas em texto, ícones, botões
• estabelecer convenções e ajudas à navegação

35
 Modelo de processo da WebE
 Engenharia
 Projeto da interface
• precisa “prender” um provável usuário
imediatamente
• evitar erros do servidor, sinais de “em
construção”, grande quantidade de texto
explicativo
• usuário prefere não rolar: uma informação
importante deve ser colocada dentro das
dimensões da janela
• a estética nunca deve sobrepujar a funcionalidade
• as opções de navegação devem ser óbvias

36
 Modelo de processo da WebE
 Geração de página
 o conteúdo produzido na engenharia é
combinado com o projeto arquitetural,
navegacional e de interface para produzir
páginas da web executáveis, utilizando uma
linguagem de programação

Testes
• exercita a navegação da WebApp
• tenta descobrir erros
• ajuda garantir a correta operação

37
 Modelo de processo da WebE
 Avaliação do Cliente
 revisão dos incrementos produzidos
 solicitação de modificações
 as modificações são integradas nos
próximos incrementos

38
 Equipe da WebE
 Desenvolvedores e provedores de
conteúdo
 geração ou coleta do conteúdo
 oriundos de diversas áreas: venda ou
comercialização, produtores de áudio e
vídeo, redatores, projetistas gráficos,
pessoal de pesquisa

 Editor da web
 organizar o conteúdo
 precisa conhecer tanto do conteúdo quanto
da tecnologia

39
 Equipe da WebE
 Engenheiro da web
 dedução de necessidades
 análise e Modelagem
 projeto arquitetural, navegacional e de
interface
 implementação e Teste
 sólidos conhecimentos de:
• arquiteturas cliente/servidor
• HTML/XML e tecnologias de bancos de dados
• multimídia
• plataformas de hardware/software
• segurança de redes

40
 Equipe da WebE
 Especialista de suporte
 dar continuidade ao suporte da WebApp
 correções
 adaptações
 aperfeiçoamento
 atualizações de conteúdo
 implementação de novos procedimentos e
formulários
 modificações no padrão de navegação

41
 Equipe da WebE
 Administrador (Web Master)
 desenvolvimento e implementação de
políticas de operação da WebApp
 estabelecimento de procedimentos de
suporte e realimentação
 implementação de procedimentos de
segurança e direitos de acesso
 medição e análise do tráfego no site de Web
 coordenação dos procedimentos de controle
de modificações
 coordenação dos especialistas de suporte

42
 Elementos técnicos para um
projeto efetivo

O dilema do projetista:
 O projeto deve resolver os problemas
urgentes
 É preciso criar uma arquitetura que
comporte uma evolução rápida
 Para isso, é necessário empregar:
 Métodos e Princípios de Projeto
 Regras de Ouro (Golden Rules)
 Padrões de Projetos (Design Patterns)
 Modelos (Templates)
43
 Métodos e Princípios de Projeto

 Modularidade eficiente (alta coesão e baixo

acoplamento) e outras heurísticas da
construção de software devem ser utilizadas
também para a Web.
 Emprego do paradigma de projeto OO (para
software orientado a objetos).
 a hipermídia define “objetos” que
interagem através de um protocolo de
comunicação que é bem parecido com o
utilizado na orientação a objetos.

44
 Regras de Ouro (Golden Rules)

Sistemas para a Web já vêm sendo

construídos há uma década. Neste
tempo, os projetistas desenvolveram um
conjunto de heurísticas que podem ser
reaplicadas durante o projeto de novos
aplicativos.
 Exemplo: heurísticas de Jacob Nielsen (
http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html
):
• Dar “feedback”ao usuário, falar a linguagem do
usuário, permitir que o usuário cancele a operação,
manter a consistência visual, prevenir de erros, etc.
 45
 Padrões de Projetos (Design Patterns)

São abordagens genéricas utilizadas

para resolver problemas genéricos que
podem ser adaptadas para resolverem
uma grande variedade de problemas
mais específicos.
 Ex: padrões web como Tabless (uso de css)
• Padrões de projeto arquiteturais como MVC
(separação de interesses, Modelo, Visão,
Controlador)

46
 Modelos (Templates)

Um modelo pode ser utilizado para

fornecer um esqueleto para qualquer
tipo de padrão de projeto que será
utilizado no aplicativo.
 Ex: modelos usados em Blogs, Portais,
Sites de Compras, etc.

47
 BIBLIOGRAFIA CONSULTADA

Engenharia de Software. Roger

Pressman. 6ª edição. 752 páginas,
McGraw-Hill Interamericana do Brasil. 2006.

Parte 3, Aplicação de
Engenharia da Web, apresenta uma
abordagem completa de engenharia
para análise, projeto e teste de
aplicações da Web.

48