Rodrigo Cristiano Silva rodrigo@facens.br 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? Vantagens e desvantagens das aplicações Web Plataformas de desenvolvimento Web Tecnologias Web

Principais serviços oferecidos pela Internet Protocolo World Wide Web HTTP / HTTPS / SOAP Correio Eletrônico SMTP / POP / IMAP Troca de Arquivos FTP / SFTP / FTPS Mensagem Instantânea Sockets Tecnologias Web

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

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

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

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

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

Como funcionam aplicações Web? Tecnologias Web

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

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

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

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

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

Cliente e 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

Comandos do HTTP Método Descrição GET Solicita uma página Web e envia dados através da URL HEAD Solicita a leitura do cabeçalho HTTP de uma página Web PUT Solicita o armazenamento de uma página Web POST Solicita uma página e envia dados no corpo da requisição DELETE Remove a página da Web Tecnologias Web

A plataforma Web Tecnologias Web

Principais métodos HTTP GET 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

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

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. 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

Comunicação HTTP Detalhes Tecnologias Web

HTML Hypertext 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

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

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

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

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

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

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

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

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

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

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

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

Partes de uma Aplicação ASP.NET Tipos de arquivos Descrição Conteúdo Web forms, HTML, imagens, áudio, vídeo e outros Arquivos de conteúdo determinam a aparência de uma aplicação Web. Eles podem conter textos estáticos e imagens assim como elementos que são criados durante a execução da aplicação pelo programa lógico. Programa lógico Arquivos executáveis e scripts O programa lógico determina como a aplicação responde às ações do usuário. Aplicações ASP.NET possuem uma dynamic-link library (DLL) que roda no servidor e também podem incluir scripts que rodam na máquina cliente Configuração Arquivo de configuração Web, folhas de estilo e configurações do IIS Os arquivos de configuração determinam como a aplicação roda no servidor, quem tem acesso, como os erros são tratados e outros detalhes. Tecnologias Web

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

Componentes do Web Form Exemplos Descrição Server controls TextBox, Label, Button, ListBox, DropDownList Estes controles respondem a eventos do usuário rodando procedures no servidor. Server controls podem manter seu estado. HTML controls TextArea, Table, Image, Submit Button, Reset Button Representam os elementos padrões HTML. HTML controls são usados quando não é necessário o conjunto completo de características dos server controls. Data controls SqlConnection, SqlCommand, OleDbConnection, OleDbCommand, DataSet Data controls oferecem maneiras para se conectar, executar comandos e recuperar dados de BDs e arquivos XML Tecnologias Web

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

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

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

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

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

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

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

Preservando dados de um Web Form Tecnologias Web

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

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

Eventos de Aplicação e Sessão Nome do Evento Ocorre quando Application_Start O primeiro usuário visita uma página da aplicação Web Application_End Não existem mais usuários da aplicação Application_BeginRequest No início de cada requisição ao servidor. Uma requisição ocorre toda vez que um browser navega em qualquer uma das páginas da aplicação Web Application_EndRequest No final de cada requisição ao servidor Session_Start Um novo usuário visita uma página da aplicação Web Session_End Um usuário para de requisitar páginas de uma aplicação Web e sua sessão expira. Uma sessão expira após um período de tempo especificado no arquivo Web.config Tecnologias Web

Eventos do Web Form Nome do Evento Ocorre quando Page_Init Os server controls são carregados e inicializados a partir do view state do Web form. É o primeiro passo do ciclo de vida de um Web form Page_Load Os server controls são carregados no objeto Page. As informações do view state estão disponíveis a partir deste ponto Page_PreRender A aplicação está prestes a renderizar o objeto Page Page_Unload A página é descarregada da memória Page_Disposed O objeto Page é retirado da memória. Este é o último evento na vida de um objeto Page Page_Error Uma exceção é disparada Page_AbortTransaction Uma transação é abortada Page_CommitTransaction Uma transação é aceita Page_DataBinding Um server control da página é montado através de uma fonte de dados Tecnologias Web

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

Eventos dos Server Controls Tecnologias Web

Eventos dos Server Controls Os controles Button, Link Button e Image Button causam postback events Os controles TextBox, DropDownList, ListBox, RadioButton e CheckBox causam cached events, embora seja possível mudar esse comportamento mudando a propriedade AutoPostBack para True Tecnologias Web

Web Namespaces Namespace Contém classes para System.Web Os objetos Application, Browser, Cache, Cookies, Exception, Request, Response, Server e Trace. Usamos essas classes na maioria das tarefas da programação Web. O objeto Application definido no Global.asax é baseado na classe Application. System.Web.SessionState O objeto Session. Usamos essas classes para salvar e restaurar itens salvos em variáveis de estado Session. System.Web.Services O objeto WebService. Usamos essas classes para criar e usar os Web Services. System.Web.UI Os objetos Page e Control. Usamos essas classes em um Web form para criar e controlar a UI da aplicação. Web forms são baseados na classe Page. System.Web.UI.WebControls Todos os objetos server controls. Usamos essas classes em um Web form. Tecnologias Web

Web Namespaces Namespace Contém classes para System.Web.UI.HTMLControls Todos os objetos HTML control. Usamos essas classes em um Web form. System.Web.Caching O objeto Cache. Usamos essas classes para controlar o cache no servidor para aumentar a performance da aplicação. System.Web.Mail Os objetos MailMessage, MailAttachment e SmtpMail. Usamos essas classes para enviar mensagens a partir de uma aplicação. System.Web.Security Os módulos e objetos de autenticação. Usamos essas classes para autenticar usuários e prover segurança para uma aplicação. Tecnologias Web

Objeto Application O objeto Application é usado para configurar a aplicação, salvar informações de estado e responder à eventos da aplicação Tem propriedades e métodos que oferecem acesso à outros objetos da aplicação Tecnologias Web

Objeto Application Propriedade / método Usado para Application Salvar dados no Application state. Context Acessar os objetos Handler, Trace, Cache, Error e outros no contexto atual. Modules Acessar módulos HTTP. Request Ler uma requisição e acessar os objetos Browser, Cookies, ClientCertificates e Files da requisição corrente. Response Escrever texto ou dados em uma resposta e acessar os objetos Cache, Cookies e Output da resposta corrente. Server Processar requisições e respostas. O objeto Server oferece métodos para URL encoding e decoding. Session Salvar dados no Session state. User Acessar informações de autenticação do usuário que está fazendo a requisição. Aplicações Web permitem acesso anônimo. Tecnologias Web

Objeto Page O objeto Page faz o controle da interface com usuário da aplicação Tem propriedades e métodos que oferecem acesso à objetos da interface com usuário Tecnologias Web

Objeto Page Propriedade / método Usado para Application Salvar dados no Application state. Cache Controlar como as respostas são armazenadas no cache do servidor. Controls Acessar os controles da página. Request Ler uma requisição e acessar os objetos Browser, Cookies, ClientCertificates e Files da requisição corrente. Response Escrever texto ou dados em uma resposta e acessar os objetos Cache, Cookies e Output da resposta corrente. Server Processar requisições e respostas. O objeto Server oferece métodos para URL encoding e decoding. Session Salvar dados no Session state. Trace Habilitar ou desabilitar o Trace e escrever no trace log. Tecnologias Web

Objeto Request O objeto Request contém informações enviadas pelo browser cliente quando uma página da aplicação é requisitada Tem propriedades e métodos que oferecem acesso à objetos que constroem a requisição Tecnologias Web

Objeto Request Propriedade / método Usado para Browser Determinar as capacidades do browser que está fazendo a requisição. As propriedades de Browser oferecem acesso à versão do browser, fabricante, se suporta cookies e outras informações. ClientCertificates Autenticar o cliente. Cookies Armazenar informações do cliente em cookies. Files Pegar arquivos enviados (upload) pelo cliente. InputStream Ler e escrever em dados brutos enviados na requisição. Tecnologias Web

Objeto Response O objeto Response é usado para formular a resposta enviada do servidor para o browser cliente Tem propriedades e métodos que oferecem acesso à objetos que compõem a resposta para o cliente Tecnologias Web

Objeto Response Propriedade / método Usado para Cache Determinar como o servidor armazena as respostas no cache antes de serem enviadas ao cliente. Cookies Configurar o conteúdo dos cookies para enviar ao cliente. Output Manipular os dados brutos retornados ao cliente como resposta. Tecnologias Web

Mantendo Estado Context.Handler: este objeto recupera membros públicos de uma classe de um Web form exibido subseqüentemente. Query strings: são usadas para passar informações entre requisições e respostas como parte de um URL. São visíveis ao usuário, portanto não podem conter informações de segurança tais como senhas. Cookies: são usados para armazenar pequenas quantidades de informações no cliente. Os clientes podem recusar cookies. View state: o ASP.NET armazena os itens adicionados à propriedade ViewState da página como campos ocultos. Session state: variáveis de estado Session são usadas para armazenar itens que queremos manter na sessão de um usuário. Application state: variáveis de estado Application são usadas para armazenar itens que queremos disponíveis para todos os usuários da aplicação. Tecnologias Web