Tecnologias Web

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