Observação:

a interface de usuário foi simplificada no Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das opções descritas neste artigo no Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo (em inglês).

Sobre os aplicativos da Web

Um aplicativo da Web é um site que contém páginas de conteúdo parcial ou inteiramente não determinado. O conteúdo final de uma página só é determinado quando o visitante solicita uma página do servidor Web. Como o conteúdo final da página varia de solicitação para solicitação com base nas ações do visitante, esse tipo é chamado de página dinâmica.

Os aplicativos da Web são criados para superar vários desafios e problemas. Esta seção descreve usos comuns para os aplicativos da Web e apresenta um exemplo simples.

Usos comuns dos aplicativos da Web

Os aplicativos da Web têm muitos usos tanto para os visitantes quanto para os desenvolvedores do site, inclusive os seguintes:

  • Permitem aos visitantes localizar informações de maneira rápida e fácil em um site rico em conteúdo.

    Esse tipo de aplicativo da Web oferece aos visitantes a possibilidade de pesquisar, organizar e navegar em conteúdo na medida em que acharem cabível. Os exemplos incluem intranets de empresa, Microsoft MSDN (www.msdn.microsoft.com) e Amazon.com (www.amazon.com).

  • Colete, salve e analise dados fornecidos por visitantes do site.

    Antigamente, os dados inseridos em formulários em HTML eram enviados como mensagens de email a funcionários ou aplicativos CGI para processamento. Um aplicativo da Web pode salvar os dados do formulário diretamente em um banco de dados, além de extrair os dados e criar relatórios baseados na Web para análise. Entre os exemplos estão páginas de bancos online, páginas de retirada de lojas, pesquisas e formulários com comentários feitos pelo usuário.

  • Atualize sites cujo conteúdo mude constantemente.

    Um aplicativo da Web evita que o designer fique atualizando continuamente o HTML do site. Provedores de conteúdo como, por exemplo, editores de notícias fornecem conteúdo ao aplicativo da Web, e este atualiza o site automaticamente. Os exemplos incluem o Economist (www.economist.com) e CNN (www.cnn.com).

Exemplo de aplicativo da Web

Janet é designer profissional e, há muito tempo, a usuária do Dreamweaver responsável pela manutenção de sites da intranet e de Internet de uma empresa de médio porte com 1.000 funcionários. Certo dia, Chris, dos Recursos Humanos, chega até ela com um problema. O RH administra um programa de condicionamento físico que dá aos funcionários pontos para cada quilômetro percorrido andando, de bicicleta ou correndo. Cada funcionário deve informar seu total mensal de quilômetros em um email enviado para Chris. Ao final do mês, Chris reúne todas as mensagens de email e dá aos funcionários pequenos prêmios em dinheiro de acordo com sua pontuação total.

O problema de Chris é que o programa de condicionamento físico cresceu muito. Assim, muitos funcionários estão participando, e Chris é sobrecarregado com emails ao final de cada mês. Chris pergunta a Janet se há uma solução baseada na Web.

Janet propõe um aplicativo da Web baseado na intranet que realiza as seguintes tarefas:

  • Permite aos funcionários inserir a quilometragem em uma página da Web usando um formulário em HTML simples

  • Armazena a quilometragem do funcionário em um banco de dados

  • Calcula os pontos de condicionamento físico de acordo com os dados da quilometragem

  • Permite aos funcionários controlar o andamento mensal

  • Dá a Chris o acesso com um clique à pontuação total ao final de cada mês

    Janet coloca o aplicativo em funcionamento antes do horário de almoço usando o Dreamweaver, que conta com as ferramentas de que ela precisa para criar esse tipo de aplicativo rápida e facilmente.

Como funciona um aplicativo de Web

Um aplicativo de Web é um conjunto de páginas de Web estáticas e dinâmicas. Uma página da Web estática é aquela que não se altera quando um visitante a solicita: o servidor Web envia a página para o navegador da Web solicitante sem modificá-la. Já uma página da Web dinâmica é modificada pelo servidor antes de ser enviada para o navegador solicitante. A natureza mutável da página justifica ela ser chamada de dinâmica.

Por exemplo, você poderia projetar uma página para exibir os resultados do condicionamento físico, ao mesmo tempo em que deixaria que determinadas informações (como, por exemplo, o nome do funcionário e os resultados) fossem determinadas quando a página fosse solicitada por um determinado funcionário.

As próximas seções descrevem mais detalhadamente como funcionam os aplicativos da Web.

Processar páginas da Web estáticas

Um site estático é formado por um conjunto de páginas em HTML relacionadas e arquivos hospedados em um computador com um servidor Web em execução.

Um servidor Web é o software que apresenta páginas da Web em resposta a solicitações de navegadores da Web. Uma solicitação de página é gerada quando um visitante clica em um link em uma página da Web, seleciona um marcador em um navegador ou digita um URL na caixa de texto de endereço do navegador.

O conteúdo final de uma página da Web estática é determinado pelo designer da página e não é alterado quando ela é solicitada. Eis um exemplo:

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
    </body> 
</html>

Todas as linhas do código em HTML da página são escritas pelo designer antes da página ser colocada no servidor. Como o HTML, uma vez no servidor, não é alterado, esse tipo de página é chamado de página estática.

Observação:

Mais especificamente, uma página “estática” pode não ser tão estática assim. Por exemplo, uma imagem de sobreposição ou um conteúdo Flash (um arquivo SWF) pode dar vida a uma página estática. No entanto, essa documentação se refere a uma página como sendo estática caso ela seja enviada para o navegador sem modificações.

Quando recebe uma solicitação de uma página estática, o servidor Web lê a solicitação, localiza a página e a envia para o navegador solicitante, como mostra o seguinte exemplo:

Processar página da Web estática
Processar página da Web estática

A. Navegador da Web solicita a página estática. B. Servidor Web localiza a página. C. Servidor Web envia a página para o navegador solicitante. 

No caso dos aplicativos da Web, certas linhas de código não são determinadas quando o visitante solicita a página. Para que a página seja enviada ao navegador, essas linhas devem ser determinadas por um mecanismo. O mecanismo é abordado na seguinte seção.

Processar páginas dinâmicas

Ao receber uma solicitação de uma página da Web estática, um servidor Web envia a página diretamente para o navegador solicitante. Porém, ao receber uma solicitação de uma página dinâmica, o servidor Web reage de maneira diferente: ele passa a página para uma parte especial do software responsável pela conclusão da página. Esse software especial é chamado de servidor de aplicativo.

O servidor de aplicativo lê o código na página, conclui a página de acordo com as instruções do código e, em seguida, remove o código da página. O resultado é uma página estática que o servidor de aplicativo passa para o servidor Web que, em seguida, envia a página para o navegador solicitante. Todo o obtido pelo navegador quando a página chega é HTML puro. Eis uma visualização do processo:

Processar páginas dinâmicas
Processar páginas dinâmicas

A. Navegador da Web solicita a página dinâmica. B. Servidor Web localiza e passa a página para o servidor de aplicativo. C. Servidor de aplicativo rastreia a página em busca de instruções e conclui a página. D. Servidor de aplicativo passa novamente a página concluída para o servidor Web. E. Servidor Web envia a página concluída para o navegador solicitante. 

Acessar um banco de dados

Um servidor de aplicativo permite trabalhar com recursos do servidor como, por exemplo, bancos de dados. Por exemplo, uma página dinâmica pode instruir o servidor de aplicativo para extrair dados de um banco de dados e inseri-los no HTML da página. Para obter mais informações, consulte www.adobe.com/go/learn_dw_dbguide_br.

O uso de um banco de dados para armazenar o conteúdo permite separar o design do site do conteúdo que você deseja exibir para os usuários do site. Em vez de escrever arquivos em HTML individuais para cada página, você só precisa escrever uma página, ou modelo, para os diferentes tipos de informações que deseja apresentar. Em seguida, você pode carregar o conteúdo em um banco de dados e, em seguida, fazer com que o site recupere esse conteúdo em resposta a uma solicitação do usuário. Você também pode atualizar as informações em uma única fonte e, em seguida, preencher essa alteração em todo o site sem ter que editar manualmente todas as páginas. Você pode usar o Adobe Dreamweaver para criar formulários da Web a fim de inserir, atualizar ou excluir dados do banco de dados.

A instrução para extrair dados de um banco de dados é chamada de consulta ao banco de dados. Uma consulta consiste em critérios de pesquisa expressados em uma linguagem de banco de dados chamada SQL (Linguagem de consulta estruturada). A consulta SQL é escrita em scripts ou tags do servidor da página.

Um servidor de aplicativo não pode se comunicar diretamente com um banco de dados porque o formato próprio do banco de dados processa os dados indecifráveis de maneira muito semelhante a um documento do Microsoft Word aberto no Bloco de Notas ou BBEdit talvez seja indecifrável. O servidor de aplicativo pode se comunicar com o banco de dados apenas por meio de um driver de banco de dados: software que funciona como um intérprete entre o servidor de aplicativo e o banco de dados.

Depois que o driver estabelece a comunicação, a consulta é executada no banco de dados e um conjunto de registros é criado. Um conjunto de registros é um conjunto de dados extraídos de uma ou mais tabelas de um banco de dados. O conjunto de registros retorna ao servidor de aplicativo, que usa os dados para completar a página.

Eis uma consulta ao banco de dados simples escrita em SQL:

SELECT lastname, firstname, fitpoints 
FROM employees

A instrução cria um conjunto de registros com três colunas e o preenche com linhas que contêm sobrenome, nome e pontos em condicionamento físico de todos os funcionários no banco de dados. Para obter mais informações, consulte www.adobe.com/go/learn_dw_sqlprimer_br.

O seguinte exemplo mostra o processo de consulta a um banco de dados e o retorno dos dados ao navegador:

Acessar um banco de dados
Acessar um banco de dados

A. Navegador da Web solicita a página dinâmica. B. Servidor Web localiza e passa a página para o servidor de aplicativo. C. Servidor de aplicativo rastreia a página em busca de instruções. D. Servidor de aplicativo envia consulta ao driver de banco de dados. E. Driver executa a consulta no banco de dados. F. Conjunto de registros é devolvido ao driver. G. Driver passa o conjunto de registros para o servidor de aplicativo. H. Servidor de aplicativo insere dados na página e, em seguida, passa a página para o servidor Web. I. Servidor Web envia a página concluída para o navegador solicitante. 

Você pode usar praticamente qualquer banco de dados com o aplicativo da Web, desde que o driver de banco de dados apropriado esteja instalado no servidor.

Caso pretenda criar pequenos aplicativos de baixo custo, você pode usar um banco de dados baseado em arquivo como, por exemplo, um criado no Microsoft Access. Caso pretenda criar aplicativos robustos, fundamentais à empresa, você pode usar um banco de dados baseado em servidor como, por exemplo, um criado no Microsoft SQL Server, no Oracle 9i ou no MySQL.

Caso o banco de dados esteja localizado em um sistema que não seja o servidor Web, verifique se há uma conexão rápida entre os dois sistemas para que o aplicativo da Web possa operar com rapidez e eficiência.

Criar páginas dinâmicas

A criação de uma página dinâmica consiste em escrever primeiramente o HTML e, em seguida, adicionar os scripts ou as tags do servidor ao HTML para tornar a página dinâmica. Quando você exibe o código resultante, a linguagem aparece incorporada ao HTML da página. Dessa forma, essas linguagens são conhecidas como linguagens de programação com HTML incorporado. O seguinte exemplo básico usa a Linguagem de markup do ColdFusion (CFML):

observação: o suporte para CFML foi removido do Dreamweaver CC e posterior.

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
        <!--- embedded instructions start here ---> 
        <cfset department="Sales"> 
        <cfoutput> 
        <p>Be sure to visit our #department# page.</p> 
        </cfoutput> 
        <!--- embedded instructions end here ---> 
    </body> 
</html>

As instruções incorporadas à página realizam as seguintes ações:

  1. Crie uma variável chamada department e atribua a sequência de caracteres "Sales" a ela.

  2. Insira o valor da variável, "Sales", ao código em HTML.

O servidor de aplicativo retorna a seguinte página ao servidor Web:

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
        <p>Be sure to visit our Sales page.</p> 
    </body> 
</html>

O servidor Web envia a página para o navegador solicitante, que a exibe da seguinte forma:

Sobre a Trio Motors

A Trio Motors é uma grande montadora de automóveis.

Não deixe de visitar a nossa página de vendas.

Você escolhe uma linguagem de script ou baseada em tag a ser usada de acordo com a tecnologia disponível no servidor. Estas são as linguagens mais conhecidas para as tecnologias de servidor que recebem suporte do Dreamweaver:

Tecnologia de servidor

Linguagem

ColdFusion

Linguagem de markup do ColdFusion (CFML)

ASP (Páginas ativas do servidor)

VBScript

JavaScript

PHP

PHP

O Dreamweaver pode criar os scripts ou as tags do servidor necessárias ao funcionamento das páginas, ou você pode escrevê-los manualmente no ambiente de codificação do Dreamweaver.

Terminologia do aplicativo da Web

Esta seção define os termos mais usados em relação aos aplicativos da Web.

Um servidor de aplicativo

Software que ajuda um servidor Web a processar páginas da Web que contenham scripts ou tags do servidor. Quando uma página dessas é solicitada no servidor, o servidor Web a entrega ao servidor de aplicativo para que ele a processe antes do envio da página para o navegador. Para obter mais informações, consulte Como funciona um aplicativo de Web.

Servidores de aplicativo comuns incluem ColdFusion e PHP.

Um banco de dados

Um conjunto de dados armazenados em tabelas. Cada uma das linhas de uma tabela constitui um registro e cada coluna, um campo no registro, como mostrado no seguinte exemplo:

Um registro de banco de dados
Um banco de dados

Um driver de banco de dados

Software que funciona como intérprete entre um aplicativo da Web e um banco de dados. Os dados em um banco de dados são armazenados em um formato próprio. Um driver de banco de dados permite ao aplicativo da Web ler e manipular dados que outrora seriam indecifráveis.

Um sistema de gerenciamento do banco de dados

(DBMS ou sistema de banco de dados) Software usado para criar e manipular bancos de dados. Entre os sistemas de banco de dados mais comuns estão Microsoft Access, Oracle 9i e MySQL.

Uma consulta ao banco de dados

A operação que extrai um conjunto de registros de um banco de dados. Uma consulta consiste em critérios de pesquisa expressados em uma linguagem de banco de dados chamada SQL. Por exemplo, a consulta pode especificar que apenas determinadas colunas ou certos registros sejam incluídos no conjunto.

Uma página dinâmica

Uma página da Web personalizada por um servidor de aplicativo para que a página seja enviada a um navegador.

Um conjunto de registros

Um conjunto de dados extraídos de uma ou mais tabelas em um banco de dados, como mostrado no seguinte exemplo:

Um conjunto de registros
Um conjunto de registros

Um banco de dados relacional

Um banco de dados que contém mais de uma tabela, com as tabelas compartilhando os dados. O seguinte banco de dados é relacional porque duas tabelas compartilham a mesma coluna DepartmentID.

Bancos de dados relacionais
Bancos de dados relacionais

Uma tecnologia de servidor

A tecnologia que o servidor de aplicativo usa para modificar páginas dinâmicas durante o runtime.

O ambiente de desenvolvimento do Dreamweaver dá suporte às seguintes tecnologias de servidor:

  • Adobe® ColdFusion®

  • Microsoft ASP (Páginas ativas do servidor)

  • PHP: PHP (Pré-processador de hipertexto)

    Você também pode usar o ambiente de codificação do Dreamweaver a fim de desenvolver páginas para qualquer outra tecnologia de servidor não listada.

Uma página estática

Uma página da Web não modificada por um servidor de aplicativo para que a página seja enviada a um navegador. Para obter mais informações, consulte Processamento de páginas da Web estáticas.

Um aplicativo da Web

Um site que contém páginas de conteúdo parcial ou inteiramente não determinado. O conteúdo final dessas páginas só é determinado quando um visitante solicita uma página do servidor Web. Como o conteúdo final da página varia de solicitação para solicitação com base nas ações do visitante, esse tipo é chamado de página dinâmica.

Um servidor Web

Software que envia páginas da Web em resposta a solicitações de navegadores da Web. Uma solicitação de página é gerada quando um visitante clica em um link em uma página da Web no navegador, seleciona um marcador no navegador ou digita um URL na caixa de texto de endereço do navegador.

Servidores Web populares incluem o Microsoft Internet Information Server (IIS) e o Apache HTTP Server.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online