IFPA-PACurso de Tecnologia em Análise e Desenvolvimento de

Sistemas

Engenharia da Web

Prof. Cláudio Martinsclaudiomartins2000@gmail.com

Cefet/PACurso de Tecnologia em Sistemas de Informação

Engenharia da Web

Aula 1: Introdução

Prof. Cláudio Martins

O que é a Web (WWW)?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)?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 fundamentaisTecnologias 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

✔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 URLURN 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)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)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 WebA Evolução da Web

Tempo médio (anos) para adoção da tecnologia pelo povo americano.

A Evolução da WebA 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 atualO 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 WebEngenharia 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.

14

Engenharia da Web (definição)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)

15

Engenharia da WebEngenharia 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

16

Engenharia da Web – Atributos de Engenharia da Web – Atributos de WebAppsWebApps

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

17

Engenharia da Web – Atributos de Engenharia da Web – Atributos de WebAppsWebApps

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

18

Engenharia da Web – Atributos de Engenharia da Web – Atributos de WebAppsWebApps

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

19

Engenharia da Web – CaracterísticasEngenharia 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

20

Engenharia da Web – CaracterísticasEngenharia da Web – Características

Estética para vender idéia ou produto a apresentação é

aspecto que influencia no sucesso da aplicação

21

Engenharia da Web – Categorias de Engenharia da Web – Categorias de WebAppsWebApps

Informacional conteúdo somente de leitura fornecido com navegação ligações simples

22

Engenharia da Web – Categorias de Engenharia da Web – Categorias de WebAppsWebApps

Para baixar (download) Um usuário baixa informações de um servidor

23

Engenharia da Web – Categorias de Engenharia da Web – Categorias de WebAppsWebApps

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

24

Engenharia da Web – Categorias de Engenharia da Web – Categorias de WebAppsWebApps

Entrada do usuário entrada baseada em formulários

25

Engenharia da Web – Categorias de Engenharia da Web – Categorias de WebAppsWebApps

Orientada a transação o usuário faz uma solicitação (pedido) que é atendido

pela WebApp

26

Engenharia da Web – Categorias de Engenharia da Web – Categorias de WebAppsWebApps

Orientada a serviços a aplicação fornece serviços ao usuário

27

Engenharia da Web – Categorias de Engenharia da Web – Categorias de WebAppsWebApps

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

28

Engenharia da Web – Categorias de Engenharia da Web – Categorias de WebAppsWebApps

De acesso a base de dados O usuário consulta uma grande base de dados e

extrai informações

29

ExercíciosExercí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

30

Modelo de processo da WebEModelo de processo da WebE

(Pressman)

31

Modelo de processo da WebEModelo 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

32

Modelo de processo da WebEModelo 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

33

Modelo de processo da WebEModelo 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?

34

Modelo de processo da WebEModelo 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

35

Modelo de processo da WebEModelo 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

36

Modelo de processo da WebEModelo 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

37

Modelo de processo da WebEModelo 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

38

Modelo de processo da WebEModelo 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

39

Equipe da WebEEquipe 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

40

Equipe da WebEEquipe 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

41

Equipe da WebEEquipe 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

42

Equipe da WebEEquipe 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

43

Elementos técnicos para umElementos técnicos para umprojeto efetivoprojeto 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)

44

Métodos e Princípios de ProjetoMé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.

45

Regras de Ouro (Golden Rules)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.

46

Padrões de Projetos (Design Patterns)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)

47

Modelos (Templates)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.

48

BIBLIOGRAFIA CONSULTADABIBLIOGRAFIA 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.