desenvolvimento de sistemas web - conceitos básicos

108
UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1 Fábio M. Pereira ([email protected])

Upload: fabio-moura-pereira

Post on 20-Jun-2015

1.005 views

Category:

Education


4 download

DESCRIPTION

Aula 01 - Desenvolvimento de Sistemas Web

TRANSCRIPT

Page 1: Desenvolvimento de Sistemas Web - Conceitos Básicos

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])

Page 2: Desenvolvimento de Sistemas Web - Conceitos Básicos

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
Page 4: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

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

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

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

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

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
Page 14: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

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
Page 20: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

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

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

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
Page 28: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

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
Page 34: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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 38: Desenvolvimento de Sistemas Web - Conceitos Básicos

Introdução Rápida a HTML

Page 39: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

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

Trabalhando com Estilos

• Note a diferença da página exemplo com e sem estilo:

Page 45: Desenvolvimento de Sistemas Web - Conceitos Básicos

Resumindo...

Page 46: Desenvolvimento de Sistemas Web - Conceitos Básicos

Resumindo...

Page 47: Desenvolvimento de Sistemas Web - Conceitos Básicos

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
Page 49: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

“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
Page 55: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

Exemplos

Page 60: Desenvolvimento de Sistemas Web - Conceitos Básicos
Page 61: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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
Page 65: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

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

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

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

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

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
Page 75: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

Arquitetura em Uma Camada

Page 77: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

Arquitetura em Duas Camadas

Page 79: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

Arquitetura em Três Camadas

Page 81: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

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

Desvantagem

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

Page 87: Desenvolvimento de Sistemas Web - Conceitos Básicos

Evolução...

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

Page 88: Desenvolvimento de Sistemas Web - Conceitos Básicos
Page 89: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

Mercado

Page 92: Desenvolvimento de Sistemas Web - Conceitos Básicos
Page 93: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

Principais SGBDs Gratuitos

• MySQL da Oracle

• MariaDB

• PostgreSQL

• SimpleDb da Amazon

• MongoDB

• Firebird

• SQLite

• Cassandra

Page 96: Desenvolvimento de Sistemas Web - Conceitos Básicos

Ranking

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

Page 97: Desenvolvimento de Sistemas Web - Conceitos Básicos

Open Source

Page 98: Desenvolvimento de Sistemas Web - Conceitos Básicos
Page 99: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

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

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

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

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

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

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
Page 107: Desenvolvimento de Sistemas Web - Conceitos Básicos

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

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])