INÍCIO
Livros do Prof.
Aula 4 – Páginas Estáticas e Dinâmicas
Aprenda as diferenças fundamentais entre páginas web estáticas e dinâmicas e desenvolva suas próprias aplicações dinâmicas utilizando tecnologias Java como Servlets e JSP.
Objetivos da Aula
Compreender Fundamentos
Entender as diferenças fundamentais entre páginas estáticas e dinâmicas, suas características distintas e quando utilizar cada abordagem.
Aplicações Práticas
Identificar casos de uso ideais para cada tipo de página e as tecnologias mais adequadas para diferentes cenários de desenvolvimento web.
Desenvolvimento em Java
Criar páginas dinâmicas utilizando tecnologias Java, com foco em Servlets e JavaServer Pages (JSP), integrando lógica de negócio com apresentação.
Estrutura da Carga Horária
Componente Teórico (1 hora)
A primeira hora da aula será dedicada à parte conceitual, onde exploraremos:
  • Definições e características de páginas estáticas e dinâmicas
  • Comparação detalhada entre os dois tipos
  • Aplicações ideais para cada abordagem
  • Arquitetura básica de sistemas web dinâmicos em Java
Componente Prático (3 horas)
As três horas seguintes serão dedicadas à prática intensiva:
  • Configuração do ambiente de desenvolvimento Java
  • Implementação de Servlets para processamento de dados
  • Criação de JSPs para apresentação de conteúdo
  • Testes e depuração das aplicações desenvolvidas
O que são Páginas Estáticas?
Páginas estáticas são documentos web cujo conteúdo permanece inalterado independentemente de quem as acessa ou quando são acessadas. Elas são criadas utilizando HTML e CSS, e eventualmente JavaScript para pequenas interações no lado do cliente.
Estas páginas são servidas exatamente como estão armazenadas no servidor, sem qualquer processamento adicional. Toda vez que um usuário solicita uma página estática, o servidor simplesmente transfere o arquivo HTML correspondente.
Principais características:
  • Conteúdo fixo e idêntico para todos os usuários
  • Desenvolvidas principalmente com HTML, CSS e JavaScript básico
  • Não requerem processamento no servidor além da entrega do arquivo
  • Ideal para informações que raramente mudam
O que são Páginas Dinâmicas?
Páginas dinâmicas são geradas em tempo real quando um usuário faz uma requisição. O conteúdo é processado no servidor antes de ser enviado ao navegador, permitindo personalização e interatividade avançada.
1
Geração sob demanda
O conteúdo é criado no momento da requisição, podendo utilizar dados de diversas fontes como bancos de dados, APIs ou interações do usuário.
2
Personalização
Cada usuário pode receber uma versão diferente da página, adaptada às suas preferências, histórico ou contexto atual.
3
Interatividade
Permitem funcionalidades como formulários, sistemas de login, carrinhos de compra e outras interações que necessitam processamento no servidor.
Principais Diferenças: Estática vs Dinâmica
A escolha entre páginas estáticas e dinâmicas depende das necessidades do projeto, especialmente considerando fatores como interatividade necessária, frequência de atualização de conteúdo e personalização para diferentes usuários.
Exemplos Reais: Estático
Casos de Uso Ideais
Páginas estáticas são perfeitas para conteúdos que raramente precisam ser atualizados ou que são idênticos para todos os usuários. Alguns exemplos comuns incluem:
  • Páginas institucionais "Sobre Nós" ou "Quem Somos"
  • Documentação técnica de produtos
  • Portfólios profissionais simples
  • Landing pages para campanhas de marketing
  • Currículos online
  • Cardápios digitais fixos para restaurantes
Estas páginas se beneficiam da simplicidade, velocidade e menor custo de hospedagem associados a conteúdos estáticos.
Exemplos Reais: Dinâmico
E-commerce
Lojas virtuais com catálogos de produtos, carrinho de compras, recomendações personalizadas e sistema de pagamento integrado.
Redes Sociais
Plataformas que exibem conteúdo específico baseado no perfil do usuário, conexões e interações anteriores.
Dashboards
Painéis administrativos que apresentam dados atualizados em tempo real, estatísticas e métricas personalizadas.
Estes exemplos requerem conteúdo personalizado, interação com bancos de dados, processamento no servidor e resposta a ações do usuário – características fundamentais das páginas dinâmicas.
Vantagens das Páginas Estáticas
1
Performance Superior
Carregam extremamente rápido por não requererem processamento no servidor. O servidor apenas entrega arquivos HTML, CSS e JavaScript, sem execução de código adicional.
2
Hospedagem Simplificada
Podem ser hospedadas em praticamente qualquer servidor web ou CDN com custos muito reduzidos, já que não necessitam de processamento no lado do servidor.
3
Segurança Aprimorada
Apresentam menor superfície de ataque para invasores, eliminando vulnerabilidades comuns como injeção SQL, XSS ou CSRF, por não possuírem conexão com banco de dados ou processamento de entrada do usuário.
4
Confiabilidade
Menor probabilidade de erros ou falhas, já que não dependem de processamento complexo, conexões com banco de dados ou integrações com outros sistemas.
Limitações das Estáticas
Restrições Significativas
Apesar das vantagens em termos de velocidade e simplicidade, as páginas estáticas apresentam limitações importantes que podem torná-las inadequadas para muitos projetos modernos:
  • Atualização trabalhosa: Cada modificação exige alteração direta no código-fonte HTML/CSS e novo upload dos arquivos
  • Falta de personalização: Todos os usuários veem exatamente o mesmo conteúdo, sem adaptação ao contexto
  • Interatividade limitada: Não podem processar formulários ou realizar operações que exijam banco de dados
  • Escalabilidade manual: Adição de novas páginas ou seções requer criação manual de novos arquivos
  • Sem funcionalidades avançadas: Não suportam autenticação, carrinhos de compras, áreas de membros ou outras funções complexas
Vantagens das Dinâmicas
Personalização
Adaptam o conteúdo automaticamente conforme o perfil do usuário, histórico de navegação, localização geográfica e preferências pessoais.
Integração
Permitem conexão com bancos de dados, APIs e outros sistemas para exibição de informações atualizadas em tempo real.
Atualização
Conteúdo pode ser modificado através de sistemas de gerenciamento (CMS) sem necessidade de alterar o código-fonte da aplicação.
Funcionalidades
Suportam recursos avançados como login, carrinho de compras, comentários, busca filtrada e outras interações complexas.
Estas vantagens tornam as páginas dinâmicas essenciais para websites modernos que necessitam oferecer experiências personalizadas e funcionalidades avançadas aos usuários.
Limitações das Dinâmicas

Atenção aos Desafios
Embora as páginas dinâmicas ofereçam grandes vantagens em termos de funcionalidade, elas trazem consigo desafios técnicos significativos que devem ser considerados durante o planejamento do projeto.
Desafios Técnicos
  • Requisitos de servidor: Necessitam de servidores com suporte à linguagem escolhida (Java, PHP, etc.) e geralmente mais recursos de processamento
  • Complexidade de desenvolvimento: Exigem conhecimento de linguagens de programação backend, além de HTML/CSS
  • Performance reduzida: Podem apresentar tempos de carregamento maiores devido ao processamento necessário para gerar a página
Desafios Operacionais
  • Custos elevados: Hospedagem mais cara para suportar processamento no servidor e banco de dados
  • Segurança: Maior superfície de ataque, exigindo cuidados com vulnerabilidades como injeção SQL e XSS
  • Manutenção: Necessidade de atualizações de segurança e compatibilidade com diferentes versões de linguagens/frameworks
Tecnologias Estáticas Populares
HTML5
Linguagem de marcação para estruturar o conteúdo das páginas web, oferecendo elementos semânticos, suporte a vídeo/áudio nativo e recursos de formulário avançados.
CSS3
Linguagem de estilização que controla a aparência visual da página, com recursos como animações, transições, layouts flexíveis e design responsivo.
JavaScript
Linguagem de programação para interações no lado do cliente, permitindo modificação dinâmica do conteúdo sem necessidade de processamento no servidor.
Geradores de Sites Estáticos
Jekyll
Ferramenta baseada em Ruby que converte arquivos de texto em sites HTML estáticos completos, muito utilizada para blogs e documentação.
Hugo
Gerador ultra-rápido escrito em Go, ideal para sites com grande volume de conteúdo, oferecendo compilação quase instantânea.
Gatsby
Framework baseado em React que gera sites estáticos com funcionalidades de aplicações web modernas e otimização de performance.
Tecnologias Dinâmicas Populares
Linguagens de Servidor
Sistemas de Gerenciamento de Conteúdo (CMS)
  • WordPress: CMS mais popular, ideal para blogs e sites de pequeno/médio porte
  • Drupal: Altamente personalizável, adequado para sites complexos
  • Joomla: Equilíbrio entre flexibilidade e facilidade de uso
  • Magento: Especializado em e-commerce
Websites Dinâmicos em Java: Visão Geral
O desenvolvimento de websites dinâmicos utilizando Java se baseia principalmente em duas tecnologias complementares: Servlets e JavaServer Pages (JSP), que juntas formam uma arquitetura robusta para aplicações web empresariais.
Arquitetura Básica
  • Servlets: Componentes Java executados no servidor para processar requisições e responder ao cliente
  • JSP: Páginas HTML com código Java embutido para renderização de conteúdo dinâmico
  • Contêineres: Ambientes de execução como Tomcat, Jetty ou servidores de aplicação como JBoss
  • JDBC: API para conexão com bancos de dados relacionais (MySQL, PostgreSQL, Oracle)
Vantagens da Plataforma Java
  • Orientação a objetos completa com reutilização de código
  • Portabilidade entre diferentes sistemas operacionais
  • Robustez e segurança para aplicações empresariais
  • Amplo ecossistema de frameworks e bibliotecas
  • Suporte a padrões como MVC (Model-View-Controller)
O que é um Servlet?
Um Servlet é uma classe Java que estende a funcionalidade de servidores web, processando requisições e gerando respostas dinamicamente. Servlets são componentes do lado do servidor que recebem solicitações HTTP, executam lógica de negócio e retornam resultados ao cliente.
Características Principais:
  • Executados dentro de um contêiner de servlets (como Apache Tomcat)
  • Permanecem em memória após primeira execução (singleton por padrão)
  • Orientados a objetos e baseados em threads
  • Processam requisições HTTP (GET, POST, PUT, DELETE)
  • Gerenciam sessões e cookies automaticamente
import jakarta.servlet.*;
import jakarta.servlet.http.*;

public class MeuServlet extends HttpServlet {
 
 public void doGet(HttpServletRequest request, 
 HttpServletResponse response) 
 throws ServletException, IOException {
 
 response.setContentType("text/html");
 PrintWriter out = response.getWriter();
 
 out.println("<html><body>");
 out.println("<h1>Olá do Servlet!</h1>");
 out.println("</body></html>");
 }
}
O que é uma JSP?
JavaServer Pages (JSP) é uma tecnologia que permite criar páginas web dinâmicas utilizando HTML/CSS padrão com código Java incorporado. JSPs são compiladas em servlets durante a execução, mas permitem uma abordagem mais orientada à apresentação.
Elementos de uma JSP:
  • Código HTML estático: Estrutura básica da página
  • Expressões Java: <%= variavel %> (para exibir valores)
  • Scriptlets: <% código Java %> (para lógica)
  • Declarações: <%! declarações %> (para métodos/variáveis)
  • Diretivas: <%@ page ... %> (para configurações)
  • Tags personalizadas: <c:forEach> (bibliotecas como JSTL)
As JSPs são ideais para a camada de visualização em aplicações que seguem o padrão MVC, permitindo separação clara entre apresentação e lógica de negócio.
Diferença entre Servlet e JSP
1
Servlet
  • Classe Java pura (.java)
  • Foco em processamento e lógica de negócio
  • Código Java com HTML embutido (se necessário)
  • Ideal para processamento de formulários, autenticação, controle de fluxo
  • Parte do Controlador no padrão MVC
2
JSP
  • Documento HTML com código Java (.jsp)
  • Foco em apresentação e interface do usuário
  • HTML com Java embutido
  • Ideal para exibição de dados e interface visual
  • Parte da Visão no padrão MVC

Dica de Boas Práticas
A abordagem recomendada é utilizar Servlets para processar dados e lógica de negócio, e JSPs apenas para apresentação. Esta separação de responsabilidades facilita a manutenção e promove código mais organizado seguindo o padrão MVC (Model-View-Controller).
Fluxo Básico Dinâmico Java (Servlet + JSP)
Usuário envia requisição
O navegador do cliente envia uma requisição HTTP (GET/POST) para o servidor web com parâmetros como formulários, cookies ou dados de sessão.
Servlet processa a requisição
O contêiner direciona a requisição para o Servlet correspondente, que processa os dados, executa a lógica de negócio e consulta banco de dados se necessário.
Servlet encaminha para JSP
Os dados processados são armazenados em objetos de requisição, sessão ou contexto e encaminhados para a JSP responsável pela visualização.
JSP renderiza a resposta
A JSP gera HTML dinâmico incorporando os dados recebidos do Servlet e envia a resposta completa de volta ao navegador do usuário.
Exemplo Prático: Servlet Simples
Implementação do Servlet
import jakarta.servlet.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;
import java.io.*;
import java.util.Date;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, 
                       HttpServletResponse response) 
                       throws ServletException, IOException {
        
        // Obtém parâmetro da URL
        String nome = request.getParameter("nome");
        if (nome == null) nome = "Visitante";
        
        // Define data atual
        Date dataAtual = new Date();
        
        // Armazena dados para a JSP
        request.setAttribute("usuario", nome);
        request.setAttribute("data", dataAtual);
        
        // Encaminha para JSP
        RequestDispatcher dispatcher = 
            request.getRequestDispatcher("/WEB-INF/hello.jsp");
        dispatcher.forward(request, response);
    }
}
JSP Correspondente
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Exemplo Dinâmico</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <h1>Olá, ${usuario}!</h1>
    
    <p>Bem-vindo à nossa página dinâmica.</p>
    <p>Data e hora atual: ${data}</p>
    
    <form method="get" action="hello">
        <label>Seu nome:</label>
        <input type="text" name="nome">
        <button type="submit">Enviar</button>
    </form>
</body>
</html>
Este exemplo mostra a integração entre Servlet e JSP, onde o Servlet processa a entrada do usuário e a JSP exibe o resultado formatado.