![Page 1: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/1.jpg)
UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1
Fábio M. Pereira
![Page 2: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/2.jpg)
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
![Page 3: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/3.jpg)
![Page 4: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/4.jpg)
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
![Page 5: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/5.jpg)
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
![Page 6: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/6.jpg)
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
![Page 7: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/7.jpg)
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
![Page 8: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/8.jpg)
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
![Page 9: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/9.jpg)
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:
![Page 10: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/10.jpg)
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)
![Page 11: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/11.jpg)
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
![Page 12: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/12.jpg)
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
![Page 13: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/13.jpg)
![Page 14: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/14.jpg)
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
![Page 15: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/15.jpg)
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
![Page 16: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/16.jpg)
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
![Page 17: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/17.jpg)
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?
![Page 18: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/18.jpg)
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
![Page 19: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/19.jpg)
![Page 20: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/20.jpg)
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
![Page 21: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/21.jpg)
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
![Page 22: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/22.jpg)
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
![Page 23: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/23.jpg)
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
![Page 24: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/24.jpg)
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
![Page 25: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/25.jpg)
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
![Page 26: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/26.jpg)
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
![Page 27: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/27.jpg)
![Page 28: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/28.jpg)
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
![Page 29: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/29.jpg)
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
![Page 30: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/30.jpg)
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
![Page 31: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/31.jpg)
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
![Page 32: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/32.jpg)
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
![Page 33: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/33.jpg)
![Page 34: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/34.jpg)
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)
![Page 35: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/35.jpg)
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
![Page 36: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/36.jpg)
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
![Page 37: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/37.jpg)
Introdução Rápida a HTML
• Comparando a página com o seu código...
– http://www.learningwebdesign.com/4e/materials/chapter02/kitchen.html
![Page 38: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/38.jpg)
Introdução Rápida a HTML
![Page 39: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/39.jpg)
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
![Page 40: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/40.jpg)
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)
![Page 41: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/41.jpg)
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
![Page 42: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/42.jpg)
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)
![Page 43: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/43.jpg)
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)
![Page 44: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/44.jpg)
Trabalhando com Estilos
• Note a diferença da página exemplo com e sem estilo:
![Page 45: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/45.jpg)
Resumindo...
![Page 46: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/46.jpg)
Resumindo...
![Page 47: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/47.jpg)
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”
![Page 48: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/48.jpg)
![Page 49: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/49.jpg)
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/
![Page 50: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/50.jpg)
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)
![Page 51: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/51.jpg)
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
![Page 52: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/52.jpg)
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
![Page 53: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/53.jpg)
“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!”
![Page 54: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/54.jpg)
![Page 55: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/55.jpg)
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
![Page 56: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/56.jpg)
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"
![Page 57: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/57.jpg)
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
![Page 58: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/58.jpg)
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
![Page 59: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/59.jpg)
Exemplos
![Page 60: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/60.jpg)
![Page 61: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/61.jpg)
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
![Page 62: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/62.jpg)
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
![Page 63: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/63.jpg)
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?
![Page 64: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/64.jpg)
![Page 65: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/65.jpg)
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
![Page 66: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/66.jpg)
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)
![Page 67: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/67.jpg)
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)
![Page 68: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/68.jpg)
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
![Page 69: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/69.jpg)
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
![Page 70: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/70.jpg)
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
![Page 71: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/71.jpg)
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
![Page 72: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/72.jpg)
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
![Page 73: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/73.jpg)
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
![Page 74: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/74.jpg)
![Page 75: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/75.jpg)
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
![Page 76: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/76.jpg)
Arquitetura em Uma Camada
![Page 77: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/77.jpg)
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
![Page 78: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/78.jpg)
Arquitetura em Duas Camadas
![Page 79: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/79.jpg)
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
![Page 80: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/80.jpg)
Arquitetura em Três Camadas
![Page 81: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/81.jpg)
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
![Page 82: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/82.jpg)
Camada de Negócio/Aplicação
• Também chamada de Lógica empresarial, Regras de negócio ou Funcionalidade
• É nela que 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
![Page 83: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/83.jpg)
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
![Page 84: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/84.jpg)
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
![Page 85: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/85.jpg)
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
![Page 86: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/86.jpg)
Desvantagem
• Manter a aplicação pode se tornar uma tarefa complexa
![Page 87: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/87.jpg)
Evolução...
• Computação em Nuvem representa um retorno às origens (terminais “burros”)???
![Page 88: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/88.jpg)
![Page 89: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/89.jpg)
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
![Page 90: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/90.jpg)
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
![Page 91: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/91.jpg)
Mercado
![Page 92: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/92.jpg)
![Page 93: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/93.jpg)
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)
![Page 94: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/94.jpg)
Principais SGBDs Pagos
• Oracle
• MySQL da Oracle
• Microsoft SQL Server
• Microsoft Access
• Sybase
• IBM DB2
• IBM Informix
• Teradata
• Ingres da Actian
• SimpleDb da Amazon
![Page 95: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/95.jpg)
Principais SGBDs Gratuitos
• MySQL da Oracle
• MariaDB
• PostgreSQL
• SimpleDb da Amazon
• MongoDB
• Firebird
• SQLite
• Cassandra
![Page 96: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/96.jpg)
Ranking
Fonte: http://db-engines.com/
![Page 97: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/97.jpg)
Open Source
![Page 98: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/98.jpg)
![Page 99: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/99.jpg)
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
![Page 100: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/100.jpg)
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
![Page 101: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/101.jpg)
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
![Page 102: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/102.jpg)
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
![Page 103: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/103.jpg)
IDEs Mais Utilizadas
• Microsoft Visual Studio
• Eclipse
• NetBeans
• Kate, gedit, Vim (editores de texto linux)
• Flash Builder
• IntelliJ IDEA
• Delphi
• ...
![Page 104: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/104.jpg)
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
![Page 105: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/105.jpg)
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_development_environments
![Page 106: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/106.jpg)
![Page 107: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/107.jpg)
Referências
• Wikipedia (http://pt.wikipedia.org/)
• ROBBINS, J. N. Learning Web Design 4th ed. O’Reilly, 2012.
![Page 108: Desenvolvimento de Sistemas Web - Conceitos Básicos](https://reader031.vdocuments.com.br/reader031/viewer/2022020101/55844f76d8b42a6a6d8b4cc9/html5/thumbnails/108.jpg)
UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1
Fábio M. Pereira