O documento resume os principais tópicos sobre desenvolvimento de sistemas web, incluindo: (1) a diferença entre Internet e Web, como a Web usa a Internet para compartilhar hipertextos; (2) o modelo cliente-servidor e como ele funciona; (3) URLs e como elas localizam recursos na Web.

1. UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA
CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2015.2
Fábio M. Pereira
(fabio.mpereira@uesb.edu.br)

2. Roteiro
• Internet e Web
• Cliente/Servidor
• Navegação
• URLs
• Anatomia de Uma Página Web
• Web Sites x Web Apps
• Web 2.0
• Rich Internet Applications (RIA)
• Computação em Nuvem
• Arquitetura em Três Camadas
• Web Server
• Bancos de Dados
• Frameworks e Linguagens
• Referências

4. Internet X Web
• Internet
– Uma rede de computadores conectados
– Um esforço cooperativo governado por um sistema de padrões
e regras
– A finalidade de se conectar computadores – compartilhar
informação
– Existem várias maneiras pelas quais a informação pode ser
passada entre computadores, incluindo e-mail, transferência de
arquivos (FTP) e muitos outros modos especializados sobre os
quais a Internet é construída
– Estes métodos padronizados para transferência de dados ou
documentos sobre uma rede são conhecidos como protocolos

5. Internet X Web
• Web
– Originalmente chamada de World Wide Web, daí o “www” no
endereço de sites
– É apenas uma das maneiras de como a informação pode ser
compartilhada na Internet
– Ela é única por permitir que documentos possam ser ligados
uns aos outros utilizando links de hipertexto – formando uma
grande “teia” de informação conectada
– A Web utiliza um protocolo chamado HTTP (HyperText Transfer
Protocol), as primeiras quatro letras de todo endereço de site
web

6. Internet – Histórico
• A pesquisa sobre a comutação de pacotes começou na década
de 1960:
– Redes de comutação de pacotes, como Mark I, no NPL no Reino
Unido, ARPANET, CYCLADES, Merit Network, Tymnet e Telenet foram
desenvolvidas em final dos anos 1960 e início dos anos 1970, usando
uma variedade de protocolos
• A ARPANET, em particular, levou ao desenvolvimento de
protocolos para internetworking, onde várias redes separadas
poderiam ser unidas em uma rede de redes
• Os dois primeiros nós do que viria a ser a ARPANET foram
interconectados entre o Network Measurement Center de
Leonard Kleinrock na Escola de Engenharia e Ciências
Aplicadas da UCLA e o sistema NLS de Douglas Engelbart no
SRI International (SRI), em Menlo Park, Califórnia, em 29 de
outubro de 1969

7. Internet – Histórico
• O terceiro nó da ARPANET era o Culler-Fried Interactive
Mathematics Center da Universidade da Califórnia em Santa
Bárbara e o quarto era o Departamento Gráfico da
Universidade de Utah
• Em um sinal precoce de crescimento futuro, já havia quinze
sites conectados à jovem ARPANET até o final de 1971
• Em dezembro de 1974, o RFC (Request for Comments) 675 -
Specification of Internet Transmission Control Program, de
Vinton Cerf, Yogen Dalal e Carl Sunshine usou o termo
Internet como uma abreviação para internetworking e RFCs
posteriores repetiram esse termo
• Em 1982, o Internet Protocol Suite (TCP/IP) foi padronizado e
o conceito de uma rede mundial de redes TCP/IP totalmente
interligadas chamado de Internet foi introduzido

8. Internet – Histórico
• O acesso à rede TCP/IP expandiu-se novamente em 1986,
quando o National Science Foundation Network (NSFNET)
proveu acesso a sites de supercomputadores nos Estados
Unidos a partir de organizações de pesquisa e de educação, o
primeiro a 56 kbit/s e, mais tarde, 1,5 Mbit/s e 45 Mbit/s
• Os primeiros fornecedores de acesso à internet (ISPs)
comerciais começaram a surgir no final dos anos 1980 e início
dos anos 1990
• A ARPANET foi desmantelada em 1990
• A internet foi totalmente comercializada nos Estados Unidos
em 1995, quando a NSFNET foi desmantelada, removendo as
últimas restrições sobre o uso da internet para transportar o
tráfego comercial
• A internet começou uma rápida expansão para a Europa e
Austrália em meados da década de 1980 e para a Ásia no final
dos anos 1980 e início dos anos 1990

9. Internet – Histórico
• Durante a década de 1990, estimou-se que o tráfego na internet
pública cresceu cerca 100% ao ano, enquanto estima-se que o
crescimento anual do número de usuários seja de algo entre 20% e
50%
• Gráfico mostrando a proporção de usuários de Internet a cada 100
pessoas:

10. Internet – Brasil
• A internet no Brasil se desenvolveu junto ao meio
acadêmico e científico, e no seu início, o acesso era
restrito a professores e funcionários de universidades e
instituições de pesquisa
• Somente no ano de 1995 a internet deixou de ser
privilégio das universidades e da iniciativa privada para se
tornar de acesso público
• No Brasil existe o Comitê Gestor da Internet e um órgão
para o registro de domínios (FAPESP - Fundação de
Amparo à Pesquisa do Estado de São Paulo)
• 57,6% da população tem acesso a Internet (Argentina –
55,8%, China – 45,8%, Índia – 25%, EUA – 81%, Japão –
79%, Alemanha – 84%, Suécia – 94%)

11. Web - Histórico
• A Organização Europeia para a Investigação Nuclear (CERN)
foi a responsável pela invenção da World Wide Web
• O responsável pela invenção chama-se Tim Berners-Lee, que
construiu o seu primeiro computador na Universidade de
Oxford, onde se formou em 1976
• Quatro anos depois, tornava-se consultor de engenharia de
software no CERN e escrevia o seu primeiro programa para
armazenamento de informação – chamava-se Enquire e,
embora nunca tenha sido publicada, foi a base para o
desenvolvimento da Web
• Em 1989, propôs um projeto de hipertexto que permitia às
pessoas trabalhar em conjunto, combinando o seu
conhecimento numa rede de documentos
– Foi esse projeto que ficou conhecido como a World Wide Web

12. Web - Histórico
• A Web funcionou primeiro dentro do CERN, e no Verão
de 1991 foi disponibilizada mundialmente
• Em 1994 Berners-Lee criou o World Wide Web
Consortium (W3C - http://www.w3.org/), onde
atualmente assume a função de diretor
• Mais tarde, e em reconhecimento dos serviços prestados
para o desenvolvimento global da Web, Tim Berners-Lee
foi nomeado cavaleiro pela rainha da Inglaterra

14. Cliente/Servidor
• Por disponibilizar documentos sob demanda, alguns
computadores são conhecidos como servidores
• Mais precisamente, o servidor é o software (não o
computador em si) que permite aos computadores se
comunicarem com outros computadores
– Embora seja comum utilizar a palavra “servidor” para se referir
também ao computador
• O papel do software servidor é esperar por uma
requisição de informação, então reter e enviar a
informação de volta tão rápido quanto possível
• Não há nada de especial com o computador em si – é o
software servidor que faz tudo acontecer

15. Cliente/Servidor
• Para que um computador possa fazer parte da Web, ele
deve estar rodando um software especial para servidor
Web que permita a manipulação de transações HTTP
– Servidores Web também são conhecidos como servidores HTTP
• Existem muitas opções de software, mas os dois mais
populares são:
– Apache (de código aberto) – livremente disponível para
computadores baseados em Unix, Mac OS e Windows
– Microsoft Internet Information Services (IIS) – parte da família
de soluções de servidores da Microsoft
– Glassfish da Oracle

16. Cliente/Servidor
• Para todo computador e dispositivo (modem, roteador,
smartphone, carros, etc.) conectados à Internet é atribuído
um único endereço IP (Internet Protocol) numérico
– Por exemplo, o computador que hospeda oreilly.com tem o endereço
IP 208.201.239.100
• Como esses números podem confundir, felizmente o Domain
Name System (DNS) foi desenvolvido para permitir a nós nos
referirmos a um servidor pelo seu nome de domínio, no caso
“orelly.com”
– O endereço IP é útil para software, enquanto o nome de domínio é
mais acessível para humanos
• Combinar o texto dos nomes de domínios com seus
respectivos endereços IP numéricos é o trabalho de um
servidor DNS

17. Cliente/Servidor
• É possível configurar o servidor web para responder a
mais de um nome de domínio
– Mapeados para um único endereço IP
• Permitindo que vários sites compartilhem um único
servidor
• Questões para discussão:
– Quais outros tipos de software para servidor você conhece?
– Qual a relação entre configuração do computador servidor
(equipamento) e tipo de serviço oferecido?

18. Fim dos Endereços IP
• A IANA, organização que designa números IP, distribuiu o seu
último pacote de endereços IP em 3 de fevereiro de 2011
– Não existem mais IPs no estilo ###.###.###.### (chamado IPv4), que
tem a capacidade de produzir 4.3 bilhões de endereços únicos, que
parecia suficiente quando o “experimento” da Internet foi
inicialmente concebido em 1977
• Não havia como os criadores poderem antecipar que um dia
cada telefone, televisão e objetos em uma prateleira de uma
loja, poderiam solicitar um endereço IP
• A solução é um novo formato (IPv6, já em funcionamento)
que permite que trilhões de números IP únicos sejam
utilizados
• O IPv6 é incompatível com a rede atual baseada em IPv4
– Então ela irá operar como um tipo de Internet paralela à que temos
hoje
– Eventualmente, IPv4 irá desaparecer, mas alguns dizem que isto
demorará décadas

20. Navegação
• O software que faz as requisições é chamado de cliente
• Pessoas utilizam navegadores desktop, navegadores
móveis e outras tecnologias assistivas (como leitores de
telas), como clientes para acessar documentos na Web
• O servidor retorna o documento para o navegador
(também conhecido como agente do usuário), para que
possa ser exibido
• A requisição e a resposta são manipuladas pelo protocolo
HTTP
– Embora falemos em “documentos”, HTTP pode ser usado para
transferir imagens, filmes, arquivos de áudio, dados, scripts, e
todos os outros recursos utilizados na construção de sites e
aplicações Web

21. Server-side vs. Client-side
• Frequentemente em web-design, ouvimos referências a
aplicações “client-side” (lado cliente) ou “server-side”
(lado servidor)
• Estes termos são utilizados para indicar qual máquina
realiza o processamento:
– Aplicações “client-side” rodam na máquina do usuário
– Aplicações e funções “server-side” utilizam o poder de
processamento de computadores servidores

22. Navegação
• É comum pensar em um navegador como uma janela em
um monitor com uma página exibida nele
– Estes são conhecidos como navegadores gráficos ou de desktop
– Por um longo período de tempo foram a única forma de acesso
à Web
• Os navegadores mais populares de desktop incluem:
Internet Explorer, Chrome, Firefox, Safari e Opera
• Atualmente mais e mais pessoas estão acessando a Web
utilizando navegadores criados dentro de telefones
móveis ou tablets

23. Navegação
• É também importante manter em mente experiências
alternativas na Web
• Usuários com deficiência de visão devem poder ouvir o
conteúdo de uma página Web através de um leitor de
tela, ou simplesmente tornando o texto extremamente
grande
• Usuários com mobilidade limitada podem utilizar
dispositivos assistivos para acessar links e digitar
• Os sites que construirmos devem poder ser acessados e
utilizáveis por todos os usuários, independentemente de
suas experiências de navegação

24. Navegação
• Mesmo em navegadores desktop páginas podem parecer
e funcionar de maneira diferente de navegador para
navegador
• Isto ocorre pela variedade de suporte à tecnologias Web
e a habilidade do usuário para atribuir suas próprias
preferências de navegação

25. Intranets e Extranets
• Quando pensamos em um site Web, geralmente
assumimos que ele está acessível a qualquer pessoa
navegando na Web
• Entretanto, muitas empresas se utilizam das vantagens
do compartilhamento e troca de informações dos sites
Web apenas dentro de seus próprios negócios
• Estas redes especiais baseadas na Web são chamadas de
Intranets
– Elas são criadas e funcionam como sites Web comuns, mas
utilizam dispositivos de segurança especiais (chamados
firewalls) que previnem o acesso externo
– Intranets possuem vários usos, como acesso a informações de
recursos humanos ou de bancos de dados de inventário

26. Intranets e Extranets
• Uma Extranet, assim como uma Intranet, somente pode
ser acessada por usuários selecionados, mas fora da
empresa
– São informações corporativas acessadas, de forma limitada,
pela Internet
• Por exemplo, uma fábrica pode fornecer a seus clientes
uma senha que permita que eles verifiquem a situação
de seus pedidos no banco de dados de pedidos da
empresa
• A senha determina qual parte da informação da empresa
está disponível

28. URLs
• Cada página ou recurso na Web possui seu próprio
endereço especial chamado de URL, acrônimo de
Uniform Resource Locator (Localizador Padrão de
Recursos)
• Algumas URLs são curtas, outras podem parecer com
enormes strings de caracteres separados por pontos,
traços e barras

29. Partes de uma URL
1. http://
– Indica o protocolo utilizado para a operação
– As letras HTTP indicam ao servidor para utilizar o Hypertext Transfer
Protocol, ou entrar no “modo Web”
2. www.example.com
– Identifica o site Web por seu nome de domínio
– O nome do domínio é example.com
– A parte “www.” do início é o nome de um host (máquina) em
particular naquele domínio
– O nome do host “www” se tornou uma convenção, mas não é uma
regra, e muitas vezes pode ser omitido
– Pode haver mais de um site Web em um mesmo domínio, por
exemplo, development.example.com, clients.example.com

30. Partes de uma URL
3. /2012/samples/first.html
– Caminho absoluto através das pastas no servidor, onde está
localizado o documento HTML, first.html
– As palavras separadas por barras são os nomes das pastas,
iniciando na pasta raiz do host (como indicado pelo sinal /)
– Como a Internet originalmente foi projetada para rodar no
sistema operacional Unix, a maneira atual de fazer as coisas
ainda seguem muitas regras e convenções do Unix, como a /
para separar nomes de pastas

31. Arquivos default
• Obviamente, nem todas as URLs possuem tanta informação
• Muitos endereços não incluem um nome de arquivo,
simplesmente apontam para uma pasta
– http://www.oreilly.com
– http://jendesign.com/resume/
• Quando isto ocorre, o servidor busca por um documento
default, tipicamente chamado de index.html
• Assim o exemplo anterior seria visto como:
– http://www.oreilly.com/index.html
– http://jendesign.com/resume/index.html
• O nome do arquivo padrão pode variar e depende de como o
servidor está configurado
– Neste exemplo o nome é index.html, mas poderia ser default.htm

32. Arquivos default
• Se utilizarmos programação do lado servidor, o arquivo
padrão poderia ser nomeado index.php ou index.asp
• Uma outra coisa a ser notada no primeiro exemplo é a
falta da barra para indicar uma pasta
– Quando a barra é omitida, o servidor simplesmente a adiciona
se encontrar uma pasta com aquele nome
• O arquivo índice também é utilizado para segurança:
– Alguns servidores (dependendo da configuração) mostram o
conteúdo da pasta caso o arquivo padrão não seja encontrado
– Uma das maneiras de evitar que pessoas fiquem fuçando em
seus arquivos é colocar um arquivo índice em todas as pastas

34. Anatomia de Uma Página Web
• A página Web simples apresentada a seguir, apesar de
parecer como uma única página coerente, é construída a
partir de quatro arquivos separados:
– Um documento HTML (index.html), uma folha de estilos (style
sheet – kitchen.css), e dois gráficos (foods.gif e spoon.gif)

35. Documentos HTML
• Páginas Web são geralmente geradas por documentos de
textos simples, formados por marcas (tags) especiais
(indicadas pelos sinais < e >) que descrevem cada elemento
da página
• Adicionar tags descritivas a um documento é conhecido como
“marcar” o documento
– Páginas Web utilizam uma linguagem de marcação conhecida como
HyperText Markup Language (HTML), que foi criada especialmente
para documentos com links de hipertexto
• HTML define dúzias de elementos de texto que compõem um
documento, como cabeçalhos, parágrafos, texto enfatizado, e
claro, links
• Também existem elementos para adicionar informação sobre
o documento (como o seu título), mídia (como imagens e
vídeos) e componentes (widgets) para criação de formulários,
apenas para citar alguns

36. Documentos HTML
• Pior ainda é o fato de que existem várias versões de
HTML em uso hoje em dia
• A mais fortemente estabelecida é a 4.01 e seu “parente”
mais próximo XHTML 1.0
• Mas já está em funcionamento a versão mais recente,
HTML5, que foi projetada para um melhor
desenvolvimento de aplicações Web e que está
gradualmente ganhando suporte dos navegadores

37. Introdução Rápida a HTML
• Comparando a página com o seu código...
– http://www.learningwebdesign.com/4e/materials/chapter02/ki
tchen.html

38. Introdução Rápida a HTML

39. Introdução Rápida a HTML
• Primeiro devemos notar que o texto marcado (entre < e
>) não é mostrado na página final
– O navegador mostra apenas o que estiver entre as tags – o
conteúdo do elemento – a marcação é escondida
• A tag fornece o nome do elemento HTML
– Geralmente uma abreviação, como “h1” para “heading level 1”,
ou “em” para “emphasized text”
• Em segundo lugar, devemos notar que a maioria das tags
HTML aparecem em pares em volta do conteúdo do
elemento
– No nosso exemplo, <h1> indica que o texto seguinte deve ser
um cabeçalho de nível 1
– </h1> indica o final do cabeçalho

40. Introdução Rápida a HTML
• Alguns elementos, conhecidos como elementos vazios,
não possuem conteúdo
– No exemplo, a tag <hr> indica um elemento vazio que informa
ao navegador para “inserir um divisor temático aqui” (na
maioria dos navegadores, uma linha horizontal – horizontal
rule)

41. Inserindo Imagens
• Obviamente, um arquivo HTML não pode conter
imagens, então cada imagem deve estar em um arquivo
separado
• As imagens são colocadas entre o texto através do
elemento image do HTML (img), que informa ao
navegador onde encontrar o gráfico (sua URL)
– Quando o navegador encontra o elemento img, ele faz uma
outra requisição ao servidor pelo arquivo de imagem
– Vídeos e outros arquivos de mídias embutidos são tratados
geralmente da mesma forma

42. Inserindo Imagens
• A montagem da página geralmente acontece de maneira
instantânea, aparecendo como uma página completa
carregada de uma só vez
– Em conexões lentas ou páginas que incluam imagens ou
arquivos de mídia grandes, o processo de montagem pode ser
mais aparente, com imagens aparecendo depois do texto
– A página pode ser até mesmo redesenhada quando novas
imagens chegam (a não ser que possamos construir a página de
maneira a prevenir este acontecimento)

43. Trabalhando com Estilos
• Próximo do início do documento HTML existe um
elemento link que aponta para o documento de folha
de estilo kitchen.css
• Esta folha de estilos inclui poucas linhas de instruções
para a forma como a página deve parecer no navegador
• São instruções de estilo escritas de acordo com as regras
CSS (Cascading Style Sheets)
• CSS permite que designers adicionem instruções de estilo
visual (conhecidas como apresentação do documento) no
texto de marcação (estrutura do documento em
terminologia de projeto Web)

44. Trabalhando com Estilos
• Note a diferença da página exemplo com e sem estilo:

45. Resumindo...

46. Resumindo...

47. Adicionando Comportamento
• Em uma página Web, além da estrutura e da
apresentação, existe também um componente de
comportamento que define como as coisas funcionam
• Na Web comportamentos são definidos por uma
linguagem de script chamada JavaScript
• Muitos projetistas Web recorrem a profissionais mais
experientes para adicionar funcionalidade aos seus sites
• Entretanto, saber como escrever JavaScript está se
tornando mais essencial à profissão de “Web designer”

49. Web Sites x Web Apps
• Nas últimas duas décadas a Internet cresceu, expandiu,
explodiu e tornou impossível ignorá-la, tornando qualquer
teclado sem conexão com a Internet muitas vezes inútil
• Nos últimos anos, surgiu na Web um novo termo que pode
ser tanto interessante como confuso ao mesmo tempo: “Web
app”
• Hoje, existe um debate na comunidade sobre onde termina o
“Web site” e onde começa a “Web app”
• Apresentamos um resumo do artigo de Ciprian Borodescu
sobre a opinião de diferentes figuras influentes no domínio de
tecnologia Web e da discussão sobre a “app-ification” da Web
– http://www.visionmobile.com/blog/2013/07/web-sites-vs-web-apps-
what-the-experts-think/

50. Definição
• Na era da pré-app-história, a palavra “aplicação” era aplicada
a sites Web que forneciam interações avançadas a seus
usuários e capacidades previamente disponíveis apenas
através de software instalado
– Exemplos iniciais de aplicações Web incluem Webmail, Google Maps
e Google Docs
• Comparados à Web clássica, por exemplo blogs e sites de
notícias, Web apps permitiam uma experiência rica do usuário
e acesso a capacidades avançadas dos navegadores
• Hoje, páginas de sites Web ainda podem ser referenciadas
como Web apps, mas está mais focada na tarefa que na
tecnologia em si
– “O use case de uma aplicação é sempre FAZER alguma coisa”
(Christian Heilmann)

51. Definição
• Uma Web app é sempre voltada a tarefas:
– Pensando em smartphones ou tablets, uma aplicação poderia
ter como objetivo realizar uma tarefa específica, como fazer
uma ligação, verificar o e-mail ou encontrar um táxi próximo
• Algumas definições simples:
– Web sites são somente leitura (read only), Web apps são de
leitura-escrita (read-write)
– Web sites são para consumo, Web apps são para criação

52. Atributos de Uma Web App
• Auto-contida
• Interface do usuário rica/interativa, possivelmente
imitando a interface nativa do dispositivo
• Utilizar capacidades avançadas do dispositivo
– Localização geográfica, integração com câmera ou outras
tecnologias
• Orientação à ação em vez de orientação à informação
• Não utilizar pesadamente (ou esconder quando possível)
operações do navegador (botão voltar, recarregar, barra
de endereços)
• Funcionar offline
– Por exemplo, utilizando HTML5 ApplicationCache,
armazenamento local ou bancos de dados indexados

53. “App-ification” da Web
• Existe um número crescente de desenvolvedores mobile de
Web apps
• Baseado em uma pesquisa da Developer Economics de 2014
com mais de 7.000 desenvolvedores...
– 71% dos desenvolvedores para plataformas móveis desenvolvem para
Android
– 37% utilizam HTML5 como plataforma
– 83% desenvolvem para tablets, mas apenas 12% tratam esta
plataforma como alvo principal
– 60% estão “abaixo da linha de pobreza das apps” – ganham menos de
$500 por aplicação por mês
– 23% dos desenvolvedores HTML5 desenvolvem Web apps,
comparados a 38% que desenvolvem Web sites
• Como disse Sir Tim Berners-Lee em 2012: “the solution is in
your hands: develop web apps!”

55. Web 2.0
• Termo polêmico criado pela O’Reilly Media em 2004 para
designar uma segunda geração de comunidades e
serviços tendo como conceito a “Web como plataforma”
• Embora o termo tenha uma conotação de uma nova
versão para a Web, ele não se refere à atualização nas
suas especificações técnicas, mas a uma mudança na
forma como ela é encarada por usuários e
desenvolvedores, ou seja, o ambiente de interação e
participação que hoje engloba inúmeras linguagens e
motivações

56. Definição de Tim O’Reilly
"Web 2.0 é a mudança para uma internet como
plataforma, e um entendimento das regras
para obter sucesso nesta nova plataforma.
Entre outras, a regra mais importante é
desenvolver aplicativos que aproveitem os
efeitos de rede para se tornarem melhores
quanto mais são usados pelas pessoas,
aproveitando a inteligência coletiva"

57. Regras
• Beta perpétuo
– o software não é um artefato e sim um processo de
comprometimento com seus usuários
• Pequenas peças frouxamente unidas
– abra seus dados e serviços para que sejam reutilizados por
outros
– reutilize dados e serviços de outros sempre que possível
• Software acima do nível de um único dispositivo
• Dados são o novo “Intel inside”
– infoware X software

58. Regras
• Software usados na Internet como serviços e não vendidos
como pacotes
– Pagos mensalmente como uma conta de água
– A Web é a plataforma, o software um serviço
• Experiência do usuário mais rica
– interfaces mais rápidas e mais fáceis de usar
• Posicionamento do usuário: você controla os seus próprios
dados
• Arquitetura de participação
– aproveitamento da inteligência coletiva
– muitos serviços online pretendem oferecer além de um ambiente de
fácil publicação e espaço para debates, recursos para a gestão coletiva
do trabalho comum
– não é uma ideia nova e sim um dos princípios da Internet desde a sua
criação

59. Exemplos

61. Rich Internet Application (RIA)
• Aplicação de Internet Rica
• Aplicações Web que possuem muitas das características
de software de aplicação desktop
• RIA utiliza um modelo de distribuição de cliente rico –
distribuição de uma aplicação cliente compilada através
de um navegador
– Em vez de um modelo cliente-servidor leve – onde a visão do
usuário é em sua maior parte controlada pelo servidor
• Tipicamente são distribuídas através de um navegador
específico, um plug-in do navegador, uso extensivo de
JavaScript ou uma máquina virtual

62. Rich Internet Application (RIA)
• Usuários geralmente instalam um ambiente de software
(framework) antes de poder executar a aplicação, que
tipicamente realiza download, atualiza, verifica e executa
a RIA
– Esta é a principal diferença de alternativas baseadas em
HTML5/JavaScript, como Ajax, que utilizam funcionalidades
nativas do navegador para implementar interfaces comparáveis
• Plug-ins mais conhecidos:
– Adobe Flash, presente em 96% dos navegadores desktop (2011)
– JavaFX, com 76%
– Microsoft Silverlight, com 66%
– Java Applet, em desuso

63. Rich Internet Application (RIA)
• Estas plataformas limitam a quantidade de dados
baixados durante a inicialização a apenas o que é
necessário para mostrar a página
• O plug-in é baixado apenas uma vez, reduzindo o tempo
de carga da aplicação, requisitos de velocidade de
conexão e carga do servidor
• Muito utilizada para jogos nos navegadores
– Sons, vídeos, movimentos, gráficos, ...
• Principais problemas:
– Soluções proprietárias
– Concorrência com o HTML5
– Realmente precisamos disso em aplicações comerciais?

65. Computação em Nuvem
• O conceito de computação em nuvem (em inglês, cloud
computing) refere-se à utilização da memória e das
capacidades de armazenamento e cálculo de
computadores e servidores compartilhados e interligados
por meio da Internet
• O armazenamento de dados é feito em serviços que
poderão ser acessados de qualquer lugar do mundo, a
qualquer hora, não havendo necessidade de instalação
de programas ou de armazenar dados
– O acesso a programas, serviços e arquivos é remoto, através da
Internet - daí a alusão à nuvem
– O uso desse modelo (ambiente) é mais viável do que o uso de
unidades físicas

66. Computação em Nuvem
• Num sistema operacional disponível na Internet, a partir
de qualquer computador e em qualquer lugar, pode-se
ter acesso a informações, arquivos e programas num
sistema único, independente de plataforma
– O requisito mínimo é um computador compatível com os
recursos disponíveis na Internet
– O PC torna-se apenas um chip ligado à Internet — a "grande
nuvem" de computadores — sendo necessários somente os
dispositivos de entrada (teclado, mouse) e saída (monitor)

67. Tipologia
• IaaS - Infrastructure as a Service ou Infraestrutura como
Serviço
– quando se utiliza uma percentagem de um servidor, geralmente com
configuração que se adeque à sua necessidade
• PaaS - Plataform as a Service ou Plataforma como Serviço
– utilizando-se apenas uma plataforma como um banco de dados, um
web-service, etc. (p.ex.: Windows Azure e Jelastic)
• DevaaS - Development as a Service ou Desenvolvimento como
Serviço
– as ferramentas de desenvolvimento tomam forma na computação em
nuvem como ferramentas compartilhadas e ferramentas de
desenvolvimento web-based
• SaaS - Software as a Service ou Software como Serviço
– uso de um software em regime de utilização web (p.ex.: Google Docs,
Microsoft SharePoint Online)

68. Tipologia
• CaaS - Communication as a Service ou Comunicação
como Serviço
– uso de uma solução de Comunicação Unificada hospedada em
Data Center do provedor ou fabricante (p.ex.: Microsoft Lync)
• DBaas - Data Base as a Service ou Banco de dados como
Serviço
– quando utiliza a parte de servidores de banco de dados como
serviço
• EaaS - Everything as a Service ou Tudo como Serviço
– quando se utiliza tudo, infraestrutura, plataformas, software,
suporte, enfim, o que envolve T.I.C. (Tecnologia da Informação e
Comunicação) como um serviço

69. Características
• Provisionamento dinâmico de recursos sob demanda,
com mínimo de esforço
• Escalabilidade
• Uso de "utilility computing", onde a cobrança é baseada
no uso do recurso ao invés de uma taxa fixa
• Visão única do sistema
• Distribuição geográfica dos recursos de forma
transparente ao usuário

70. Modelos de Implantação
• Público
– as nuvens públicas são aquelas que são executadas por terceiros
– as aplicações de diversos usuários ficam misturadas nos sistemas de
armazenamento
• Privado
– as nuvens privadas são aquelas construídas exclusivamente para um único
usuário (uma empresa, por exemplo)
– diferentemente de um data center privado virtual, a infraestrutura utilizada
pertence ao usuário, e, portanto, ele possui total controle sobre como as
aplicações são implementadas na nuvem
• Comunidade
– a infraestrutura de nuvem é compartilhada por diversas organizações e
suporta uma comunidade específica
• Híbrido
– nas nuvens híbridas temos uma composição dos modelos de nuvens públicas
e privadas
– elas permitem que uma nuvem privada possa ter seus recursos ampliados a
partir de uma reserva de recursos em uma nuvem pública

71. Vantagens
• A maior vantagem da computação em nuvem é a
possibilidade de utilizar software sem que estes estejam
instalados no computador
• Na maioria das vezes o usuário não precisa se preocupar com
o sistema operacional e hardware que está usando em seu
computador pessoal
• As atualizações do software são feitas de forma automática,
sem necessidade de intervenção do usuário
• O trabalho corporativo e o compartilhamento de arquivos se
tornam mais fáceis, uma vez que todas as informações se
encontram no mesmo "lugar", ou seja, na "nuvem
computacional"
• O software e os dados podem ser acessados em qualquer
lugar, basta apenas que haja acesso à Internet

72. Vantagens
• O usuário tem um melhor controle de gastos ao usar aplicativos,
pois a maioria dos sistemas de computação em nuvem fornece
aplicações gratuitamente e, quando não gratuitas, são pagas
somente pelo tempo de utilização dos recursos
– Não é necessário pagar por uma licença integral de uso de software
• Diminui a necessidade de manutenção da infraestrutura física de
redes locais cliente/servidor, bem como da instalação de software
nos computadores corporativos, pois esta fica a cargo do provedor
do software em nuvem, bastando que os computadores clientes
tenham acesso à Internet
• A infraestrutura necessária para uma solução de computação em
nuvem é bem mais enxuta do que uma solução tradicional de
hospedagem ou alojamento, consumindo menos energia,
refrigeração e espaço físico e consequentemente contribuindo para
a preservação e o uso racional dos recursos naturais

73. Desvantagens
• A maior desvantagem da computação em nuvem vem
fora do propósito desta, que é o acesso a Internet
– caso você perca o acesso, comprometerá todos os sistemas
embarcados
• Velocidade de processamento
– caso seja necessário uma grande taxa de transferência, se a
Internet não tiver uma boa banda, o sistema pode ser
comprometido
– um exemplo típico é com mídias digitais ou jogos
• Assim como todo tipo de serviço, ele é custeado
• Maior risco de comprometimento da privacidade do que
em armazenamento off-line

75. Arquitetura em Uma Camada
• Nos tempos antigos do reinado do grande porte
(mainframes) e do computador pessoal independente,
um aplicativo era desenvolvido para ser usado em uma
única máquina
• Geralmente este aplicativo continha todas as
funcionalidades em um único módulo gerado por uma
grande quantidade de linhas de código e de manutenção
nada fácil
• A entrada do usuário, verificação, lógica de negócio e
acesso a banco de dados estava presente em um mesmo
lugar
• Podemos definir este tipo de aplicação como aplicação de
uma camada ou monolítica

76. Arquitetura em Uma Camada

77. Arquitetura em Duas Camadas
• A necessidade de compartilhar a lógica de acesso a dados
entre vários usuários simultâneos fez surgir as aplicações
em duas camadas
• Nesta estrutura a base de dados foi colocada em uma
máquina específica, separada das máquinas que
executavam as aplicações
• Nesta abordagem temos aplicativos instalados em
estações clientes contendo toda a lógica da aplicação
(clientes ricos ou gordos)
• Um grande problema neste modelo é o gerenciamento
de versões pois para cada alteração os aplicativos
precisam ser atualizados em todas as máquinas clientes

78. Arquitetura em Duas Camadas

79. Arquitetura em Três Camadas
• Com o advento da Internet houve um movimento para
separar a lógica de negócio da interface com o usuário
• A ideia é que os usuários da Web possam acessar as mesmas
aplicações sem ter que instalar estas aplicações em suas
máquinas locais
• Como a lógica do aplicativo, inicialmente contida no cliente
rico, não reside mais na máquina do usuário, este tipo de
cliente passou a ser chamado de cliente pobre ou magro (thin
client)
• Neste modelo o aplicativo é movido para o Servidor e um
navegador Web é usado como um cliente magro
• O aplicativo é executado em servidores Web com os quais o
navegador Web se comunica e gera o código HTML para ser
exibido no cliente

80. Arquitetura em Três Camadas

81. Camada de Apresentação
• É a chamada GUI (Graphical User Interface), ou
simplesmente interface
• Esta camada interage diretamente com o usuário, é
através dela que são feitas as requisições como consultas,
por exemplo
• Oferece conteúdo estático e conteúdo dinâmico
personalizado, que pode ser apresentado nos mais
variados formatos disponíveis, como HTML, Windows
Forms ou XML
• As classes dessa camada utilizam os serviços oferecidos
pela camada de negócios

82. Camada de Negócio/Aplicação
• Também chamada de Lógica empresarial, Regras de
negócio ou Funcionalidade
• É nela onde as funções e regras de todo o negócio são
implementadas
– Nela estão todas as classes inerentes ao domínio da aplicação
• Não existe uma interface para o usuário e seus dados são
voláteis, ou seja, para que algum dado seja mantido deve
ser utilizada a camada de dados

83. Camada de Dados
• A terceira camada é definida como o repositório das
informações e as classes que a manipulam
• É responsável pela persistência e acesso aos dados da
aplicação
• Esta camada recebe as requisições da camada de
negócios e seus métodos executam essas requisições em
um banco de dados
• Ela isola o resto da aplicação do meio de armazenamento
usado de maneira que, se o meio de armazenamento for
trocado, apenas as classes desta camada precisarão ser
modificadas ou substituídas

84. Objetivos da Arquitetura em Camadas
• Modularidade
– dividir a aplicação em módulos tão independentes quanto
possível
• Manutenibilidade
– reduzir o custo de manutenção da aplicação
• Extensibilidade
– permitir que novas funcionalidades sejam adicionadas sem
grande impacto nas já existentes
• Reusabilidade
– permitir que classes e componentes sejam reusados em outros
módulos da mesma aplicação ou em outras aplicações

85. Vantagens
• O desenvolvimento da aplicação é feita de forma rápida,
simples, fácil e com um custo mais baixo
• O acesso à fonte de dados esta separada em seu próprio
componente de forma que o código da aplicação de
apresentação não possui código SQL embutido
• A informação da conexão é mantida somente no serviço
XML, minimizando a manutenção do cliente
• A camada de acesso a dados pode ser atualizada em um
único local centralizado
– Não é preciso distribuir componentes ao cliente quando houver
alterações nesta camada
• O modelo de 3 camadas tornou-se a arquitetura padrão
para sistemas corporativos com base na Web

86. Desvantagem
• Manter a aplicação pode se tornar uma tarefa complexa

87. Evolução...
• Computação em
Nuvem representa
um retorno às
origens (terminais
“burros”)???

89. Web Server
• Programa de computador responsável por aceitar
pedidos HTTP de clientes, geralmente os navegadores, e
servi-los com respostas HTTP, incluindo opcionalmente
dados, que geralmente são páginas Web, tais como
documentos HTML com objetos embutidos (imagens,
sons, etc.)
– ou um computador que executa um programa que provê a
funcionalidade descrita anteriormente
• O uso mais comum é a hospedagem de sites Web, mas
também podem ser usados para jogos, armazenamento
de dados, execução de aplicações empresariais,
manipulação de e-mail, FTP ou outros usos da Web

90. Web Servers Mais Populares
• Apache Tomcat da Apache
– http://tomcat.apache.org
• Internet Information Server (IIS) da Microsoft
– http://www.iis.net
• Nginx (engine-ex) da Nginx, Inc.
– http://nginx.com/
• Google Web Server (GWS) da Google
• Glassfish da Oracle

91. Mercado

93. Bancos de Dados
• Um Sistema de Gerenciamento de Banco de Dados (SGBD) –
do inglês Data Base Management System (DBMS) – é o
conjunto de programas responsáveis pelo gerenciamento de
uma base de dados
• Seu principal objetivo é retirar da aplicação cliente a
responsabilidade de gerenciar o acesso, a manipulação e a
organização dos dados
• O SGBD disponibiliza uma interface para que seus clientes
possam incluir, alterar ou consultar dados previamente
armazenados
• Em bancos de dados relacionais a interface é constituída pelas
APIs (Application Programming Interface) ou drivers do SGBD,
que executam comandos na linguagem SQL (Structured Query
Language)

94. Principais SGBDs Pagos
• Oracle
• MySQL da Oracle
• Microsoft SQL Server
• Microsoft Access
• Sybase
• IBM DB2
• IBM Informix
• Teradata
• Ingres da Actian
• SimpleDb da Amazon

95. Principais SGBDs Gratuitos
• MySQL da Oracle
• MariaDB
• PostgreSQL
• SimpleDb da Amazon
• MongoDB
• Firebird
• SQLite
• Cassandra

96. Ranking
Fonte: http://db-engines.com/

97. Open Source

99. IDE
• IDE, do inglês Integrated Development Environment ou
Ambiente Integrado de Desenvolvimento, é um programa
de computador que reúne características e ferramentas
de apoio ao desenvolvimento de software com o objetivo
de agilizar este processo
• Geralmente os IDEs facilitam a técnica de RAD (de Rapid
Application Development, ou Desenvolvimento Rápido de
Aplicações), que visa a maior produtividade dos
desenvolvedores

100. Características
• Editor
– edita o código-fonte do programa escrito na(s) linguagem(ns) que a
IDE dá suporte
• Compilador (compiler)
– compila o código-fonte do programa, editado em uma linguagem
específica e a transforma em linguagem de máquina
• Linker
– une os vários "pedaços" de código-fonte, compilados em linguagem
de máquina, em um programa executável que pode ser executado em
um computador ou outro dispositivo computacional
• Depurador (debugger)
– auxilia no processo de encontrar e corrigir defeitos no código-fonte
do programa, na tentativa de aprimorar a qualidade de software

101. Características
• Modelagem (modeling)
– criação do modelo de classes, objetos, interfaces, associações e
interações dos artefatos envolvidos no software
• Geração de código
– característica mais explorada em Ferramentas CASE, a geração de
código também é encontrada em IDEs, contudo com um escopo mais
direcionado a templates de código comumente utilizados para
solucionar problemas rotineiros
– Todavia, em conjunto com ferramentas de modelagem, a geração
pode gerar praticamente todo o código-fonte do programa com base
no modelo proposto, tornando muito mais rápido o processo de
desenvolvimento e distribuição do software
• Distribuição (deploy)
– auxilia no processo de criação do instalador do software, ou outra
forma de distribuição, seja discos ou via Internet

102. Características
• Testes Automatizados (automated tests)
– realiza testes no software de forma automatizada, com base em
scripts ou programas de testes previamente especificados,
gerando um relatório, assim auxiliando na análise do impacto
das alterações no código-fonte
• Refatoração (refactoring)
– consiste na melhoria constante do código-fonte do software,
seja na construção de código mais otimizado, mais limpo e/ou
com melhor entendimento pelos envolvidos no
desenvolvimento do software

103. IDEs Mais Utilizadas
• Microsoft Visual Studio
• Eclipse
• NetBeans
• Kate, gedit, Vim (editores de texto linux)
• Flash Builder
• IntelliJ IDEA
• Delphi
• ...

104. IDE x Linguagem de Programação
(http://programmers.stackexchange.com/)
• C# - Visual Studio, SharpDevelop
• Java - Eclipse, NetBeans, IDEA
• Objective-C - Xcode
• Delphi - RAD Studio
• Object Pascal - Delphi, Lazarus
• C, C++ - Visual Studio, Vim
• ASP - Visual Studio
• PL/SQL - RapidSQL, Oracle SQLDeveloper
• PHP - Eclipse, NetBeans, Nusphere PHPed
• Actionscript (AS2, AS3) - FlashDevelop

105. IDE x Linguagem de Programação
(http://programmers.stackexchange.com/)
• Flex - Flash Builder 4
• Python - Eclipse, IDLE
• Perl - Padre
• Common Lisp - Lispworks, Emacs
• Ruby - TextMate
• Haskell - Vim
• Fortran - Vim
• Visual Basic - Visual Studio
• Para melhor análise ver:
http://en.wikipedia.org/wiki/Comparison_of_integrated_developm
ent_environments

107. Referências
• Wikipedia (http://pt.wikipedia.org/)
• ROBBINS, J. N. Learning Web Design 4th ed. O’Reilly,
2012.

108. UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA
CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2015.2
Fábio M. Pereira
(fabio.mpereira@uesb.edu.br)