1 / 62

Tecnologias Web

Tecnologias Web. Rodrigo Cristiano Silva rodrigo@facens.br. Agenda. O que é a Internet? Principais serviços oferecidos pela Internet Histórico da Internet O que é uma aplicação Internet? Tipos de aplicações Internet Como aplicações Web funcionam? Quais são as possibilidades na Web?

Download Presentation

Tecnologias Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Tecnologias Web Rodrigo Cristiano Silva rodrigo@facens.br

  2. Agenda • O que é a Internet? • Principais serviços oferecidos pela Internet • Histórico da Internet • O que é uma aplicação Internet? • Tipos de aplicações Internet • Como aplicações Web funcionam? • Quais são as possibilidades na Web? • Vantagens e desvantagens das aplicações Web • Plataformas de desenvolvimento Web Tecnologias Web

  3. Principais serviços oferecidos pela Internet Tecnologias Web

  4. O que é uma aplicação Internet? Uma aplicação Internet é qualquer aplicação que usa a Internet para acesso a informações e transferência de dados. Aplicações Web são um dos quatro tipos de aplicações Internet que podemos criar, a seguir temos um overview desses tipos. Tecnologias Web

  5. Tipos de aplicações Internet • Aplicações Web: estas aplicações fornecem conteúdo de um servidor para os computadores clientes através da Internet; • Web Services: estes componentes proporcionam o processamento de dados em um servidor Web para outras aplicações através da Internet; • Aplicações Conectadas: estas são aplicações stand-alone que incorporam aspectos da Internet para proporcionar ao usuário atualizações, ajuda ou outros serviços online; • Aplicações ponto-a-ponto: estas são aplicações stand-alone que usam a Internet para se comunicar com outros usuários executando sua instância da aplicação. Tecnologias Web

  6. Como funcionam aplicações Web? • Aplicações Web usam a arquitetura cliente/servidor. As aplicações residem em um servidor e respondem requisições de múltiplos clientes, como mostra a figura: Tecnologias Web

  7. Como funciona a arquitetura Cliente-Servidor? • Cliente-servidor é um modelo computacional que separa clientes e servidores, sendo interligados entre si geralmente através de uma rede de computadores. • Cada instância cliente pode enviar requisições de dados para um dos servidores conectados e esperar pela resposta. • Por sua vez, o servidor pode aceitar tais requisições, processá-las e retornar o resultado para o cliente. Tecnologias Web

  8. Como funcionam aplicações Web? • Cliente • A aplicação Web é hospedada por um browser; • A interface da aplicação assume a forma de páginas HTML que são interpretadas e exibidas pelo browser do cliente; • Servidor • A aplicação Web roda sob um servidor de aplicações Web como o Microsoft Internet Information Services (IIS); • O servidor de aplicações Web passa as requisições dos clientes para as aplicações e encaminha as respostas das aplicações para os clientes. Tecnologias Web

  9. Como funcionam aplicações Web? Tecnologias Web

  10. Como funcionam aplicações Web? • Web Site Tradicional versus Aplicação Web • Aplicações Web: as páginas entregues aos usuários são construídas dinamicamente por um executável; • Web sites tradicionais: as páginas entregues aos usuários são páginas estáticas armazenadas no servidor. Tecnologias Web

  11. Vantagens de aplicações Web • Distribuição das aplicações • Browser + conexão Internet • Dispensa a instalação no cliente • Atualização das aplicações • Centralizada • Instantânea • Não é necessário um supercomputador para executar as aplicações • Independente de plataforma Tecnologias Web

  12. Desvantagens de aplicações Web • A experiência do usuário é pobre se comparada com aplicações desktop • Drag-and-Drop • Número de controles é limitado • Baixa produtividade no desenvolvimento • É necessária grande quantidade de scripts de cliente (JavaScript) para melhorar a experiência do usuário • JavaScript é uma linguagem pobre e possui um ambiente de desenvolvimento e depuração bastante limitado Tecnologias Web

  13. HTTPHyperText Transfer Protocol “Protocolo de aplicação que possui um conjunto de regras definidas para comunicação entre servidores e navegadores Web” Tecnologias Web

  14. Características do HTTP • Utiliza o protocolo TCP para transporte • Presta o serviço na porta 80 • Utiliza pares de mensagens de solicitação e resposta • Cada transação resulta no estabelecimento de uma conexão TCP • Não armazena informações de estado entre transações (Stateless). Não mantém conexão aberta. • As conexões são iniciadas pelos navegadores e encerradas pelo servidor Web após enviar as respostas Tecnologias Web

  15. Cliente e servidor HTTP • Servidor HTTP • Gerencia sistema virtual de arquivos e diretórios • Mapeia pastas do sistema de arquivos local (ex: c:\htdocs) a diretórios virtuais (ex: /) acessíveis remotamente (notação de URI) • Papel do servidor HTTP • Interpretar requisições HTTP do cliente (métodos GET/POST/HEAD) • Devolver resposta HTTP: código de resposta (200, 404, etc), cabeçalho e dados • Papel do cliente HTTP • Enviar requisições HTTP (GET/POST/HEAD) a um servidor • Requisições contêm URI do recurso remoto, e opcionalmente, cabeçalho e dados (método POST) • Processar respostas HTTP recebidas (interpretar cabeçalhos, identificar tipo de dados e interpretar dados) Tecnologias Web

  16. Comandos do HTTP Tecnologias Web

  17. A plataforma Web Tecnologias Web

  18. Principais métodos HTTPGET • GET: pede ao servidor um arquivo (informado sua URI relativa à raiz do servidor) GET <uri> <protocolo>/<versão> <Cabeçalhos HTTP>: <valores> <linha em branco> • GET pode enviar dados através da URI (tamanho limitado) <uri>?dados • Método HEAD é idêntico ao GET mas servidor não devolve página, devolve apenas o cabeçalho HTTP Tecnologias Web

  19. Principais métodos HTTPPOST • POST: envia dados ao servidor POST <uri> <protocolo>/<versão> <Cabeçalhos HTTP>: <valores> <linha em branco> <dados> Tecnologias Web

  20. Cabeçalhos HTTP • Na requisição passam informações do cliente ao servidor • Fabricante e nome do browser, data da cópia em cache, cookies válidos para o domínio e caminho da URL da requisição, etc. • Exemplos: User-Agent: Mozilla 5.5 (Compatible; MSIE 6.0; MacOS X) If-Modified-Since: Thu, 23-Jun-1999 00:34:25 GMT Cookies: id=344; user=Jack; flv=yes; mis=no • Na resposta passam informações do servidor ao cliente • Tipo de dados do conteúdo (text/xml, image/gif) e tamanho, cookies que devem ser criados, endereço para redirecionamento, etc. • Exemplos: Content-type: text/html; charset-iso-8859-1 Refresh: 15; url=/pags/novaPag.html Content-length: 246 Set-Cookie: nome=valor; expires=Mon, 12-03-2001 13:03:00 GMT Tecnologias Web

  21. Comunicação HTTPDetalhes Tecnologias Web

  22. HTMLHypertext Markup Language • A HTML é uma linguagem de marcação cujo objetivo original era descrever a estrutura de documentos para Web e não a formatação • O que se pretendia era somente descrever os elementos que compõem uma página e não o modo como uma página se apresenta • As extensões aos elementos originais do HTML (<font>, <color>, etc) permitem que se ultrapasse o propósito inicial da linguagem • A HTML possui um conjunto definido de elementos e não podemos criar nossos próprios elementos Tecnologias Web

  23. Formulários HTML • Os formulários possibilitam colher qualquer tipo de informação para processamento imediato por um script ou para análise posterior usando outros aplicativos • Existem vários tipos de formulários, a seguir temos alguns exemplos: • Formulários de pesquisa • Formulários que nos registram nos sites da Web • Formulários de compra de produtos on-line • Os formulários são suportados desde o HTML 2.0 Tecnologias Web

  24. Formulários HTML • Cada formulário contém um elemento form (<form>) que tem controles específicos, como botões, caixas de texto, caixas de seleção e botões submit • Após o formulário ser preenchido, ele é submetido ao servidor, ou seja, os dados do formulário são codificados e enviados ao servidor • Para que o formulário seja bem-sucedido é preciso ter um script ou aplicativo no servidor que armazene ou manipule os dados enviados • O formulário pode enviar seus dados para uma outra página ou enviar e-mail contendo os dados Tecnologias Web

  25. Elemento form • O elemento form é base de todos os formulários criados em páginas Web • É considerado um elemento em nível de bloco • Elementos em nível de bloco iniciam uma nova linha no navegador • Sintaxe do form: • <form action=“algumaação” method=“get ou post”></form> • O atributo action define a ação tomada quando o formulário é submetido e geralmente contém o endereço URL do script ou aplicativo que receberá os dados do formulário • Se não usarmos o atributo action no elemento form, o formulário será submetido para o mesmo URL onde se localiza a página HTML • O formulário ainda pode ser submetido à um e-mail da seguinte maneira: • <form action=“mailto:alguem@provedor.com” method=“post”></form> Tecnologias Web

  26. Elemento form • O atributo method pode ter um entre dois valores: get ou post • O método get adiciona os dados do formulário ao URL da requisição. Os dados são separados do endereço URL com um ponto de interrogação • Exemplo com get: • http://www.exemplo.com/procura?procurastring=Engenharia • O método post envia os dados do formulário para o URL especificado no atributo action no corpo da requisição • O atributo method não é obrigatório. Se não for empregado, será usado o método get Tecnologias Web

  27. O que é DHTML • O DHTML ou HTML Dinâmico não é algo por si mesmo, mas sim uma coleção de tecnologias funcionando em conjunto para obter resultados interativos • O DHTML usa elementos HTML para criar uma página Web que depende de folhas de estilo para formatação e posicionamento de seus elementos, e scripts para alterar dinamicamente conteúdo HTML, estilo e posicionamento, sem ter que recarregar a página Tecnologias Web

  28. Características do DHTML • Para que o DHTML funcione, é preciso que três tecnologias sejam suportadas pelo navegador Web: • HTML • Folhas de Estilo (CSS) • Scripts (JavaScript) • Dispensa o uso de plug-ins ou de máquinas virtuais, pois os navegadores oferecem suporte nativo à JavaScript • Nasceu com o advento dos “quatro”: HTML 4, Internet Explorer 4 e Netscape 4 • Devido a diferenças existentes entre os navegadores do mercado, o maior desafio quando se usa DHTML é criar páginas Web dinâmicas para qualquer navegador • Os scripts são responsáveis pela natureza dinâmica do DHTML • O DHTML depende de um método de tratamento de eventos para acompanhar as ações do navegador Web e do usuário Tecnologias Web

  29. VB C++ C# JScript … Visual Studio.NET Common Language Specification ASP.NET Windows Forms Data and XML Base Class Library Common Language Runtime Plataforma .NET Tecnologias Web

  30. O que é o ASP.NET? • ASP.NET é a plataforma usada para criar aplicações Web e serviços Web que rodam abaixo do IIS • ASP.NET não é a única tecnologia usada para criar aplicações Web, outras tecnologias também são usadas, tais como JSP, PHP, CGI e Perl • O que torna o ASP.NET especial é a sua integração com a plataforma Microsoft Tecnologias Web

  31. Componentes do ASP.NET • O ASP.NET faz parte da .NET Framework e é composto por diversos componentes: • Ferramentas de desenvolvimento Web do Visual Studio .NET • System.Web namespaces • Controles de Servidor • Controles HTML Tecnologias Web

  32. Elementos chaves para programação ASP.NET • Microsoft Internet Information Services (IIS) • .NET Framework • Linguagens de programação • Microsoft Visual Basic .NET • Microsoft Visual C# • Microsoft Visual J# • Microsoft ADO.NET Tecnologias Web

  33. Partes de uma Aplicação Web • O ASP.NET divide uma aplicação Web em três partes: • Conteúdo • Programa lógico • Configuração Tecnologias Web

  34. Partes de uma Aplicação ASP.NET Tecnologias Web

  35. Web Form • O Web form é o elemento chave de uma aplicação Web • Um Web form é o cruzamento entre uma página HTML e um Windows form • Um Web form tem a mesma aparência e comportamento similar à uma página HTML, mas ele também tem controles que respondem a eventos e rodam código como um Windows form Tecnologias Web

  36. Componentes do Web Form Tecnologias Web

  37. Tempo de Vida de um Web Form • Windows forms são instanciados, permanecem na memória o tempo que for necessário e são destruídos • Web forms parecem se comportar da mesma forma, mas eles são instanciados, enviados para o browser e, em seguida, destruídos • Isso significa que todas as variáveis e objetos declarados em um Web form não estão disponíveis após ele ser exibido Tecnologias Web

  38. Eventos no ciclo de vida de uma aplicação Web • Uma aplicação Web vive enquanto existirem sessões de usuários ativas, já os Web forms vivem por instantes • A vida de uma aplicação Web começa quando um browser requisita a página inicial da aplicação. Nesse momento o servidor Web entra em ação, inicializando o assembly (dll) que responde a requisição • O assembly cria uma instância do Web form requisitado, gera o HTML para responder à requisição, envia a resposta ao browser e finalmente destrói a instância do Web form Tecnologias Web

  39. Eventos no ciclo de vida de uma aplicação Web Tecnologias Web

  40. Eventos no ciclo de vida de uma aplicação Web • Após o browser receber o HTML gerado, o usuário pode inserir texto nas caixas, selecionar opções e realizar outras tarefas até que um evento postback seja disparado, tal como um clique em um botão • Em um evento postback, o browser envia os dados da página (view state) de volta ao servidor • Quando o servidor recebe o view state, ele cria uma nova instância do Web form, carrega os dados do view state e processa qualquer outro evento ocorrido • Ao terminar o processamento, o servidor envia o HTML resultante ao browser e destrói a instância do Web form Tecnologias Web

  41. Eventos no ciclo de vida de uma aplicação Web Tecnologias Web

  42. Eventos no ciclo de vida de uma aplicação Web • Quando o usuário para de usar a aplicação Web por um período de tempo (o padrão é 20 minutos), sua sessão expira • Se não existirem sessões de outros usuários, a aplicação é finalizada. Isto nem sempre acontece pois a CLR gerencia a memória usando Garbage Collection • A coleta de lixo é feita periodicamente e quando encontra um objeto que há algum tempo não é usado, o destrói e libera a memória. Isto significa que não sabemos quando exatamente o evento Application_End ocorre Tecnologias Web

  43. Preservando dados de um Web Form • Devido ao fato dos Web forms terem um ciclo de vida muito curto, o ASP.NET executa passos especiais para preservar os dados inseridos nos controles de um Web form • Os dados inseridos nos controles são enviados a cada requisição e restaurados nos controles no evento Page_Init Tecnologias Web

  44. Preservando dados de um Web Form Tecnologias Web

  45. Preservando dados de um Web Form • Os dados preservados entre requisições são chamados de view state do Web form • Por padrão, o view state do Web form fica disponível somente para o mesmo Web form • Para disponibilizar os dados inseridos em um Web form para outros Web forms em uma aplicação, precisamos salvar os dados em variáveis de estado nos objetos Application ou Session • Variáveis Application: ficam disponíveis para todos usuários de uma aplicação • Variáveis Session: ficam disponíveis somente para uma sessão Tecnologias Web

  46. Eventos de Aplicação e Sessão • Podemos escrever código para responder à eventos de aplicação e sessão no arquivo Global.asax • Eventos de aplicação são usados para inicializar objetos que desejamos manter disponíveis para todas sessões de uma aplicação Web • Eventos de sessão são usados para inicilizar objetos que desejamos manter disponíveis para uma sessão individual e não desejamos compartilhar entre sessões Tecnologias Web

  47. Eventos de Aplicação e Sessão Tecnologias Web

  48. Eventos do Web Form Tecnologias Web

  49. Eventos dos Server Controls • Server controls, tais como Button, TextBox e DropDownList, têm seus próprios conjuntos de eventos que ocorrem em resposta às ações do usuário • Tipos de eventos para server controls: • Postback Events: estes eventos causam o envio da página Web de volta ao servidor para processamento imediato • Cached Events: estes eventos são salvos no view state do Web form para serem processados quando ocorrer um postback Tecnologias Web

  50. Eventos dos Server Controls Tecnologias Web

More Related