E-Book Completo_Desenvolvimento de Aplicações pela Internet_DIGITAL PAGES_ajustado (1)

Prévia do material em texto

© Ser Educacional 2019
Rua Treze de Maio, nº 254, Santo Amaro 
Recife-PE – CEP 50100-160
*Todos os gráficos, tabelas e esquemas são creditados à autoria, salvo quando indicada a referência.
Informamos que é de inteira responsabilidade da autoria a emissão de conceitos. 
Nenhuma parte desta publicação poderá ser reproduzida por qualquer meio 
ou forma sem autorização. 
A violação dos direitos autorais é crime estabelecido pela Lei n.º 9.610/98 e punido pelo artigo 184 do 
Código Penal.
Imagens de ícones/capa: © Shutterstock
Presidente do Conselho de Administração 
Diretor-presidente
Diretoria Executiva de Ensino
Diretoria Executiva de Serviços Corporativos
Diretoria de Ensino a Distância
Autoria
Projeto Gráfico e Capa
Janguiê Diniz
Jânyo Diniz 
Adriano Azevedo
Joaldo Diniz
Enzo Moreira
Leandro Agostini do Amaral
DP Content
DADOS DO FORNECEDOR
Análise de Qualidade, Edição de Texto, Design Instrucional, 
Edição de Arte, Diagramação, Design Gráfico e Revisão.
SER_SER_ADS_DAI_UNID1.indd 2 21/10/2019 13:21:57
Boxes
ASSISTA
Indicação de filmes, vídeos ou similares que trazem informações comple-
mentares ou aprofundadas sobre o conteúdo estudado.
CITANDO
Dados essenciais e pertinentes sobre a vida de uma determinada pessoa 
relevante para o estudo do conteúdo abordado.
CONTEXTUALIZANDO
Dados que retratam onde e quando aconteceu determinado fato;
demonstra-se a situação histórica do assunto.
CURIOSIDADE
Informação que revela algo desconhecido e interessante sobre o assunto 
tratado.
DICA
Um detalhe específico da informação, um breve conselho, um alerta, uma 
informação privilegiada sobre o conteúdo trabalhado.
EXEMPLIFICANDO
Informação que retrata de forma objetiva determinado assunto.
EXPLICANDO
Explicação, elucidação sobre uma palavra ou expressão específica da 
área de conhecimento trabalhada.
SER_SER_ADS_DAI_UNID1.indd 3 21/10/2019 13:21:57
Unidade 1 - Introdução ao desenvolvimento de aplicações para internet 
Objetivos da unidade ........................................................................................................... 12
Introdução à web.................................................................................................................. 13
Client-side e server-side ................................................................................................ 13
Funcionamento básico do protocolo HTTP ..................................................................... 15
HTTPS ................................................................................................................................ 16
Cookies .............................................................................................................................. 17
Introdução à linguagem HTML .......................................................................................... 18
Versões da linguagem HTML ......................................................................................... 19
Prática de edição básica de documentos HTML ....................................................... 21
Geração dinâmica de documentos HTML ................................................................... 25
CSS ......................................................................................................................................... 27
Webfonts ........................................................................................................................... 28
Responsividade..................................................................................................................... 29
A pilha de desenvolvimento HTML, CSS e JavaScript e os frameworks de apoio..... 31
O framework Bootstrap .................................................................................................. 31
Biblioteca para JavaScript: o jQuery ........................................................................... 33
Prática de layout com HTML e CSS .................................................................................. 34
Java EE e suas principais APIs ......................................................................................... 36
Servidores de aplicação e web containers .................................................................... 38
Sintetizando ........................................................................................................................... 40
Referências bibliográficas ................................................................................................. 41
Sumário
SER_SER_ADS_DAI_UNID1.indd 4 21/10/2019 13:21:57
Sumário
Unidade 2 - Introdução ao desenvolvimento de aplicações para internet
Objetivos da unidade ........................................................................................................... 43
Ambiente de desenvolvimento .......................................................................................... 44
Java Development Kit (JDK) e o Java EE Web Profile SDK ..................................... 48
Eclipse ............................................................................................................................... 52
Apache Tomcat ................................................................................................................ 56
Servlet API ............................................................................................................................. 61
Geração de conteúdo dinâmico com Servlets ................................................................ 62
Parâmetros de requisição (GET e POST) ......................................................................... 65
Sintetizando ........................................................................................................................... 68
Referências bibliográficas ................................................................................................. 69
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 5
SER_SER_ADS_DAI_UNID1.indd 5 21/10/2019 13:21:57
Sumário
Unidade 3 - Deployment Descriptor, escopos de aplicação e scriplets
Objetivos da unidade ........................................................................................................... 71
Deployment descriptor (arquivo web.xml) ...................................................................... 72
Escopos de aplicação, sessão, requisição e página .................................................... 77
Páginas JSP........................................................................................................................... 79
Scriptlets e suas variantes ................................................................................................. 81
Diretivas ............................................................................................................................ 81
Objetos implícitos ................................................................................................................ 83
Funcionamento interno do JSP .......................................................................................... 88
Upload de arquivos ......................................................................................................... 94
Sintetizando ........................................................................................................................... 97
Referências bibliográficas ................................................................................................. 98
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 6
SER_SER_ADS_DAI_UNID1.indd 6 21/10/2019 13:21:57
Sumário
Unidade 4 - Escolha de opções na tecnologia Java para Web e arquitetura da 
aplicação
Objetivos da unidade ......................................................................................................... 100
Interação com banco de dados ....................................................................................... 101Criação e implantação de arquivos WAR ...................................................................... 104
Criando um arquivo WAR ............................................................................................. 105
Enviando um arquivo WAR para o servidor .............................................................. 108
Servlet X JSP ....................................................................................................................... 109
A arquitetura MVC .............................................................................................................. 111
A arquitetura MVC no desenvolvimento em Java para Web ................................. 112
Benefícios da arquitetura MVC ................................................................................... 116
O padrão Data Access Object (DAO) ......................................................................... 116
Request Dispatcher ............................................................................................................ 117
Obtenção da Request Dispatcher ............................................................................... 119
Método de inclusão (include) ...................................................................................... 120
Método de encaminhamento (forward) ..................................................................... 121
Adicionando atributos .................................................................................................. 122
Sintetizando ......................................................................................................................... 123
Referências bibliográficas ............................................................................................... 124
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 7
SER_SER_ADS_DAI_UNID1.indd 7 21/10/2019 13:21:57
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 8
SER_SER_ADS_DAI_UNID1.indd 8 21/10/2019 13:21:57
A área de desenvolvimento de aplicações para internet vem se desenvol-
vendo signifi cativamente para suprir uma demanda do mercado pelo desen-
volvimento de serviços que funcionem remotamente pela web, e utilizando 
sistemas de bases de dados e servidores na internet para facilitar ao usuário o 
acesso a serviços em diferentes locais e por variados dispositivos, desde com-
putadores desktop e notebooks até smartphones e tablets.
Assim, visamos propiciar ao aluno o aprendizado de conceitos teóricos e 
práticos para o desenvolvimento direcionado à web, suas linguagens de pro-
gramação e protocolos para comunicação.
Como linha tecnológica, será utilizada a plataforma Java EE e seus compo-
nentes, além de interface de programação, do termo em inglês bastante co-
nhecido Application Programming Interface (API). Para o bom funcionamento 
das aplicações, também será introduzido o estudo das tecnologias Servlet e JSP 
na arquitetura comumente utilizada no mercado Model View Controller (MVC). 
É importante ressaltar que essa arquitetura poderá ser utilizada em outras 
linguagens de programação para web, sendo esse um conhecimento impres-
cindível para manter a organização e a boa manutenibilidade dos artefatos de 
software produzidos.
Desejamos a todos um excelente estudo!
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 9
Apresentação
SER_SER_ADS_DAI_UNID1.indd 9 21/10/2019 13:21:57
Dedico este material primordialmente a Deus e a meus pais, Wilson e Marlene, 
que sempre me auxiliaram ao longo da minha formação, acreditando em mim 
e ressaltando a importância do esforço e do respeito ao próximo.
Agradeço, ainda, aos meus sábios mestres, que me guiaram nessa trajetória de 
aprendizado contínuo.
O professor Leandro Agostini do 
Amaral é doutor (2019) e mestre (2014) 
em Ciências de Computação e Mate-
mática Computacional, na linha de 
pesquisa de Engenharia de Software e 
Sistemas de Informação/Sistemas web 
e Multimídia Interativos, na Universida-
de de São Paulo - USP e graduado em 
Engenharia de Computação pela Uni-
versidade de São Paulo - USP (2010). 
Tem publicações em anais de congressos 
e periódicos importantes e possui expe-
riência, na área da indústria, com em-
preendedorismo em startups e pesquisa 
no desenvolvimento de sistemas web.
Currículo Lattes:
http://lattes.cnpq.br/6798864284254487
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 10
O autor
SER_SER_ADS_DAI_UNID1.indd 10 21/10/2019 13:21:58
INTRODUÇÃO AO 
DESENVOLVIMENTO 
DE APLICAÇÕES PARA 
INTERNET
1
UNIDADE
SER_SER_ADS_DAI_UNID1.indd 11 21/10/2019 13:22:18
Objetivos da unidade
Tópicos de estudo
 Fornecer ao aluno conceitos básicos de funcionamento das aplicações para 
internet, incluindo o protocolo de comunicação HTTP, que realiza a transferência de 
dados no modo cliente-servidor;
 Ampliar conhecimentos básicos de HTML com características da XHTML, JavaScript 
e detalhes de como funciona a geração dinâmica das páginas no servidor;
 Demonstrar como formatar páginas web utilizando folhas de estilos;
 Apresentar conceitos da plataforma Java EE e suas principais APIs, explicando os 
detalhes e as diferenças entre servidores de aplicação para web containers.
 Introdução à web 
 Client-side e server-side
 Funcionamento básico do proto-
colo HTTP 
 HTTPS
 Cookies
 Introdução à linguagem HTML 
 Versões da linguagem HTML
 Prática de edição básica de docu-
mentos HTML
 Geração dinâmica de documen-
tos HTML
 CSS
 Webfonts
 Responsividade
 A pilha de desenvolvimento 
HTML, CSS e JavaScript e os frame-
works de apoio
 O framework Bootstrap
 Biblioteca para JavaScript: o 
jQuery
 Prática de layout com HTML e CSS
 Java EE e suas principais APIs
 Servidores de aplicação e web 
containers
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 12
SER_SER_ADS_DAI_UNID1.indd 12 21/10/2019 13:22:18
Introdução à web
Tim Berners-Lee, cientista britânico, desenvolveu a World Wide web (WWW 
ou simplesmente web) no ano de 1989, enquanto trabalhava no CERN – Orga-
nização Europeia para a Investigação Nuclear. A web foi originalmente concebi-
da para atender à demanda de compartilhamento digital de informações entre 
cientistas de universidades e institutos em todo o mundo, segundo Barry M. 
Leiner, diretor do RIACS (Instituto de Pesquisa de Ciência da Computação Avan-
çada), em parceria com outros oito autores e pesquisadores no artigo “A brief 
history of the internet”, publicado em 2009 no periódico ACM SIGCOMM Computer 
Communicaton Review.
Em dezembro de 1990, Berners-Lee já havia fi nalizado a versão inicial das 
ferramentas necessárias para o uso da web: o protocolo de transferência de hi-
pertexto (HTTP), a linguagem de marcação de hipertextos (HTML), o primeiro 
navegador (browser), chamado WorldWideWeb, o primeiro servidor de HTTP e 
as primeiras páginas web descreviam o projeto todo.
Já em abril de 1993, o CERN declarou a WWW como domínio público. Assim, o 
número de servidores passou dos 500 daquele ano para mais de dez mil no ano 
seguinte e não parou mais de crescer, chegando a alcançar atualmente mais da 
metade da população mundial, revolucionando nossa comunicação.
Em 1994, é fundado o Consórcio World Wide web (W3C), uma organização 
internacional no qual entidades fi liadas, uma equipe operando em tempo inte-
gral e o público trabalham juntos para desenvolver padrões para a web. O W3C 
torna-se então o órgão ofi cial para a gestão da internet e seus padrões (gratuitos 
e abertos), que evoluem constantemente, trazendo novos recursos aos usuários.
Client-side e server-side
O modelo cliente/servidor é amplamente utilizado em redes de computadores 
nas quais as máquinas fornecem uma signifi cativa gama de informações ou bases 
de dados, chamadas de servidores, para se comunicarem com máquinas de clien-
tes. Nesse modelo, um único servidor pode cuidar de muitos clientes, utilizando 
uma rede de computadores para realizar a comunicação entre essas entidades, 
como afi rma AndrewTanenbaum no livro Redes de computadores, de 2003.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 13
SER_SER_ADS_DAI_UNID1.indd 13 21/10/2019 13:22:18
Esse modelo é adotado pelo fato de servidores serem tipicamente mais po-
derosos e confiáveis se comparados com dispositivos de usuários. Eles são alo-
cados com hardwares que usam componentes em duplicidade, e são mantidos 
sob condições de segurança rígidas, com controle de acesso. Atualmente, com a 
utilização de computação em nuvem, os custos de implementação desse modelo 
foram reduzidos.
Na web, o cliente utiliza um navegador, constituindo o que chamamos de 
client-side (lado do cliente) para se conectar a um servidor no server-side (lado 
do servidor) por meio de um endereço ou URL (Uniform Resource Locator) que, 
em português, é conhecido como localizador padrão de recursos. O uso da URL 
foi a forma textual encontrada para facilitar o direcionamento a um endereço 
Internet Protocol (IP), sendo que essa tradução é feita por meio de servidores de 
DNS (Domain Name Server, ou sistema de nomes de domínio).
Os softwares, divididos nos chamados scripts, que compõem uma aplicação 
web, realizam execuções tanto no client-side como no server-side. A execução de 
verificações no lado do cliente diminui a necessidade de comunicação com o lado 
do servidor para itens simples, como para verificar se determinado campo obri-
gatório de um formulário foi preenchido. Desse modo, executar ações no lado 
do cliente diminui a latência de resposta, por dispensar a necessidade de enviar 
requisições ao servidor.
O desenvolvimento da interação no client-side é feito 
quase exclusivamente na linguagem JavaScript (JS), 
além do código de hipertexto HTML e da folha de es-
tilos CSS. Tais códigos são recebidos pelo navegador, 
executando diferentes ações no lado do cliente após 
carregar uma página da web. 
EXPLICANDO
Apesar da similaridade de nomes, JavaScript não faz parte da plataforma 
Java da Oracle, correspondendo a linguagens diferentes.
O client-side agrega os elementos que o usuário visualiza em uma página, como 
imagens, texto, botões, campos de formulário e as ações executadas na interação 
desses com o navegador.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 14
SER_SER_ADS_DAI_UNID1.indd 14 21/10/2019 13:22:19
O server-side, por sua vez, inclui tudo que acontece no servidor, o que, de 
modo geral, inclui receber requisições dos clientes, efetuar seu processamento, 
com interações com bases de dados, e enviar requisições de resposta aos clientes.
É importante ressaltar que a utilização de validações no lado do cliente não 
dispensa a implementação dessas verifi cações no lado do servidor; isso ocorre 
porque não é possível garantir consistência nos scripts do cliente, pois esses po-
dem ser facilmente alterados pelo usuário junto ao navegador.
Funcionamento básico do protocolo HTTP
O Hypertext Transfer Protocol (HTTP) é o protocolo ofi cial de comunicação de 
dados da web, que permite a troca de dados padronizada, em nível de aplicação, 
entre um navegador cliente e o servidor.
O HTTP funciona a partir do protocolo de transporte Transmission Control 
Protocol (TCP), que realiza uma conexão ponto a ponto, geralmente utilizando 
a porta 80. Ele é um protocolo do tipo stateless, ou seja, que não armazena seu 
estado ou a memória sobre suas requisições e respostas recebidas.
O cliente envia uma solicitação HTTP para um servidor, chamada de requi-
sição, e então o servidor responde a essa solicitação por meio de uma ou mais 
mensagens de resposta.
Tanto a requisição quanto a resposta são feitas em texto puro, seguindo a 
tabela ASCII, por meio de comandos simples escritos na língua inglesa.
Uma solicitação/requisição HTTP é basicamente composta por três compo-
nentes, conforme Budi Kurniawan em seu livro Java para a web com Servlets, JSP 
e EJB, de 2002:
• Método – URI (Uniform Resource Identifi er – identifi cador de recurso unifor-
me) – protocolo/versão;
• Cabeçalhos de solicitação;
• Corpo da entidade. 
De modo análogo às solicitações, uma resposta HTTP também é formada por 
três componentes:
• Protocolo – código de status – descrição;
• Cabeçalhos de resposta;
• Corpo da entidade.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 15
SER_SER_ADS_DAI_UNID1.indd 15 21/10/2019 13:22:19
HTTPS
O Hyper Text Transfer Protocol Secure (HTTPS) se diferencia do HTTP prin-
cipalmente por realizar a encriptação dos dados trafegados, requerendo para 
isso a autenticação dos servidores e o recebimento de um certifi cado de uma 
autoridade certifi cadora (AC). Para tanto, ele utiliza a tecnologia Transport Layer 
Security (TLS), ou seu antecessor Secure Sockets Layers (SSL), para realizar o pro-
cesso de comunicação segura.
Para sua utilização, o usuário deve digitar “https://” antes do endereço do site 
e, geralmente, é utilizada a porta 443 com certifi cados validados nesse tipo de 
comunicação. Com a validação da comunicação segura, os navegadores são in-
formados desse status normalmente por meio de um ícone de cadeado fechado 
ao lado da URL, na barra do navegador.
A utilização do HTTPS nos servido-
res é altamente recomendada, visto 
que o HTTP é inseguro e sujeito a ata-
ques de escuta ilegais, que podem le-
var intrusos a terem acesso a informa-
ções alheias. Como modo de incentivo 
a esse uso, buscadores reconhecidos, 
como o Google, têm priorizado servido-
res que usam HTTPS nos seus resulta-
dos de pesquisa – conforme afi rmado 
por Zineb Ait Bahajji e Gary Illyes, ana-
listas de tendências para webmasters 
da Google, em 2014, no texto “HTTPS as 
a ranking signal”, disponível no Offi cial 
Google Webmaster Central Blog.
DICA
Desde 2015, já é possível utilizar uma autoridade certifi cadora gratuita, a 
Let’s Encrypt, que permite a geração e renovação de certifi cados de modo 
automatizado e aberto. Esse projeto surgiu graças à organização sem 
fi ns lucrativos Internet Security Research Group (ISRG) e visa promover a 
popularização e difusão da utilização de criptografi a na web.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 16
SER_SER_ADS_DAI_UNID1.indd 16 21/10/2019 13:22:29
Cookies
Um cookie HTTP é um conjunto de informações que um servidor envia para o 
navegador do usuário para armazenar dados, e os recebe de volta na próxima re-
quisição. Normalmente, ele é utilizado para identifi car as diferentes requisições 
que vieram do mesmo navegador e resgatar informações anteriores acerca dele, 
mantendo um usuário logado, por exemplo. Assim, tem por objetivo guardar in-
formações para o protocolo HTTP, que não faz esse papel, por ter a característica 
básica de não reter seu estado.
De modo geral, os cookies são utilizados pelos desenvolvedores com as se-
guintes fi nalidades:
• Gerenciamento de sessão: gerenciar logins em áreas restritas e carrinhos 
de compra;
• Personalização de interfaces: registro de preferências de usuário, temas e 
outras confi gurações de utilização de um determinado sistema;
• Rastreamento: gravação e análise de comportamento do usuário.
Existem dois tipos de cookies: os cookies de sessão e os transitórios. Os tran-
sitórios fi cam em uma memória temporária e são apagados quando o usuário 
encerra a sessão do navegador; eles normalmente não identifi cam o usuário 
pessoalmente. Já o cookie persistente ou permanente fi ca armazenado no disco 
rígido do usuário até que expire, ou seja, após a data de validade defi nida pelo 
desenvolvedor, ou até que o usuário o exclua; os cookies persistentes são, então, 
utilizados para coletar informações de identifi cação do usuário, como comporta-
mento de navegação ou de suas preferências para um site específi co. 
CURIOSIDADE
A inspiração para o nome cookie veio dos objetos do sistema operacional Unix, 
chamados de “cookies mágicos”, que são tokens associados a um usuário ou 
programa e que mudam de status, dependendo das áreas utilizadas por ele.
Os cookies têm seis atributos,a saber:
• Nome;
• Valor ou conteúdo;
• Data de validade;
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 17
SER_SER_ADS_DAI_UNID1.indd 17 21/10/2019 13:22:29
• O caminho (URL) para o qual é válido, ou seja, páginas da web fora desse 
caminho não podem usá-lo;
• O domínio para o qual o cookie é válido, tornando-o acessível para páginas 
em qualquer um dos servidores de um site (o que é útil para quando um site usa 
vários servidores em um domínio);
• A necessidade de uma conexão segura, logo, ele pode ser usado apenas em 
conexões que utilizam o protocolo HTTPS.
Com a evolução da web, cada vez mais requisitos de segurança e privacidade 
têm sido demandados e, por isso, os navegadores estão mais rígidos em relação 
aos cookies, para proteger ao máximo o usuário e suas informações. Atualmen-
te, os navegadores oferecem recursos de navegação anônima, que não regis-
tram cookies, e em seu modo de navegação normal também executam várias 
checagens para evitar acessos indevidos aos cookies, de acordo com Ben Gal-
braith e Justin Schuh, responsáveis da pela gestão e engenharia do Chrome no 
texto “Improving privacy and security on the web”, publicado em 2019 no Chro-
mium Blog da Google.
Introdução à linguagem HTML
A Hypertext Markup Language (HTML) é uma linguagem de hipertexto para 
descrever e formar a estrutura de páginas web. A HTML fornece aos autores 
meios para:
• Publicar documentos com títulos, texto, tabelas, listas, fotos etc.;
• Recuperar informações, por meio de links (ligações) de hipertexto, com o 
clique de um botão;
• Criar formulários para a realização de transações com serviços remotos, 
para utilização na busca de informações, reservas, pedidos de pro-
dutos etc.;
• Incluir planilhas, vídeos, arquivos de áudio e outros 
aplicativos diretamente em seus documentos.
Com HTML, os autores descrevem a estrutura 
das páginas usando marcações. Os elementos da 
linguagem rotulam partes do conteúdo, como “pa-
rágrafo”, “lista”, “tabela” e assim por diante.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 18
SER_SER_ADS_DAI_UNID1.indd 18 21/10/2019 13:22:29
Para realizar essa rotulagem, a HTML faz uso de tags, defi nindo sua abertura 
e fechamento. Por exemplo, <b> signifi ca início de negrito e </b> signifi ca fi m 
do negrito. Embora seja possível escrever páginas HTML com qualquer editor 
simples de texto, também é possível utilizar editores especiais de HTML (inclu-
sive alguns on-line), que auxiliam bastante na geração e validação do código, de 
acordo com Andrew Tanenbaum em seu já referido livro de 2003.
Versões da linguagem HTML
Entre os anos de 1993 e 1995, a linguagem HTML passou pelas versões HTML+, 
HTML 2.0 e HTML 3.0, sendo experimentadas melhorias para enriquecer as pos-
sibilidades da linguagem. Contudo, até então, a linguagem não era tratada como 
um padrão, o que difi cultava o desenvolvimento de documentos que pudessem 
funcionar de modo semelhante nos mais diversos clientes, de acordo com o ma-
terial preparado pela própria W3C para seu curso de HTML 5.
Como solução, em 1997, um grupo de trabalho do W3C produziu a versão 3.2 
da linguagem, conseguindo fazer com que ela fosse tratada como padrão.
A partir do desenvolvimento da versão 3.5 da linguagem HTML, em 1997, esse 
grupo de trabalho do W3C focou no desenvolvimento da XHTML, uma especi-
fi cação de sintaxe mais rigorosa, tida como possível sucessora da HTML. Esse 
desenvolvimento continuou para dar origem à XHTML 2, cuja proposta principal 
era a modularização e otimização da XHTML. Em paralelo foi lançada a versão 
4.01 da linguagem HTML, no fi nal de 1999, pelo W3C, mas que ainda não supria 
a demanda de melhor organização do extenso conteúdo já presente na web e a 
necessidade de melhorar a semântica (o signifi cado) do código. Essa versão tam-
bém não estava bem preparada para garantir a devida manipulação ágil e fácil 
dos elementos via JavaScript e com folhas de estilos CSS, novamente de acordo 
com a W3C no já mencionado material.
Em outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamen-
te com um grupo de empresas que compunham o web Hypertext Application 
Technology Working Group (WHATWG), que estava focado em desenvolver a 
HTML principalmente nas questões de interatividade. A parceria com o WHATWG 
foi então reconhecida pelo W3C, culminando na produção da versão 5 da HTML 
em detrimento da XHTML 2, descontinuada em 2009.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 19
SER_SER_ADS_DAI_UNID1.indd 19 21/10/2019 13:22:29
A versão 5 da HTML, disponibilizada em 2014, é uma signifi cativa evolução 
do padrão, com novos elementos, atributos e comportamentos. Ela também foi 
desenvolvida para operar com um conjunto maior de tecnologias, permitindo o 
desenvolvimento de aplicações chamadas ricas, com melhor controle semântico, 
e websites mais diversos.
Na Tabela 1 temos a sintetização da evolução da HTML.
Versão Ano
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
HTML 5.1 2016
HTML 5.2 2017
HTMLHTML
HTML 2.0HTML 2.0HTML 2.0
HTML 3.2HTML 3.2
HTML 4.01
HTML 3.2
HTML 4.01HTML 4.01
XHTML
1991
XHTML
HTML 5
1991
HTML 5
1995
HTML 5
HTML 5.1
1995
1997
HTML 5.1
HTML 5.2
1997
HTML 5.1
HTML 5.2
1999
HTML 5.2
1999
20002000
20142014
20162016
20172017
TABELA 1. EVOLUÇÃO DA LINGUAGEM HTML
 A XHTML é uma variante da HTML 
que usa a sintaxe do XML, a EXtensib-
le Markup Language. A XHTML possui 
os mesmos elementos da HTML, mas a 
sintaxe é um pouco diferente, mais rígi-
da. Como a XHTML é um artefato XML, 
é possível ainda usar outras ferramen-
tas XML (como a XSLT, uma linguagem 
para transformar o conteúdo XML).
A rigidez na codifi cação exigida na 
XHTML difi culta o trabalho, sobretudo 
para desenvolvedores inexperientes, diferentemente da HTML, em que não há 
tanta exigência na escrita do código da linguagem.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 20
SER_SER_ADS_DAI_UNID1.indd 20 21/10/2019 13:22:30
Prática de edição básica de documentos HTML
Partiremos, agora, para uma demonstração prática de como utilizar concre-
tamente a linguagem HTML. Antes, faz-se necessário conhecer as marcações 
que a constituem e que dão origem às diferentes funcionalidades.
Na Tabela 2, dispomos as principais marcações ou tags da HTML e suas 
fi nalidades: 
Marcação Categoria Finalidade
<!--…--> básica Cria um comentário
<a> link Cria um link para uma página ou outro documento
<abbr> formatação Cria uma abreviação
<area> imagem Defi ne uma área dentro de um mapa de imagem
<b> formatação Formata um texto para negrito 
<base> metadados Defi ne a URL de base para todos os links da página
<blockquote> formatação Cria uma citação longa
<body> básica Indica o início do corpo da página
<br> básica Insere uma quebra de linha 
<button> formulário Define um botão 
<caption> tabela Define o caption de uma tabela
<cite> formatação Defi ne uma citação
<code> formatação Defi ne o código-texto/fonte de computador
<col> tabela Defi ne os atributos da coluna da tabela
<colgroup> tabela Defi ne um grupo de colunas da tabela
<dd> lista Defi ne a descrição de um item em uma lista de defi nições
<div> estilo Define uma seção no documento
<dl> lista Define uma lista de definição
TABELA 2. PRINCIPAIS MARCAÇÕES OU TAGS DA HTML
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 21
SER_SER_ADS_DAI_UNID1.indd 21 21/10/2019 13:22:30
<dt> lista Define um termo de definição
<em> formatação Define um texto em ênfase
<fieldset> formulário Define um conjunto de campos
<form> formulário Cria um formulário
<h1> até <h6> básica Indica cabeçalhos por nível, do cabeçalho 1 até o 6
<head> metadados Indica o início de informações sobre o documento
<hr> básica Cria uma divisão horizontal
<html> básica Indica o início (raiz) de um documento HTML
<i> formatação Formata um texto para itálico
<iframe> frame Cria um quadro que pode incluir outro documento HTML
<img>imagem Insere uma imagem
<input> formulário Define um campo de entrada de dados
<ins> formulário Define um texto inserido
<label> formulário Cria uma etiqueta "label" em itens no formulário
<legend> formulário Define um título para campos
<li> lista Define um item da lista
<link> link Cria uma referência (não confundir com a marcação <a>)
<map> imagem Cria um mapa de imagens
<meta> metadados Cria metadados na página
<noscript> programação Define uma seção noscript
<object> programação Incorpora um objeto
<ol> lista Define uma lista ordenada
<optgroup> formulário Define um grupo de opções
<option> formulário Cria uma opção em uma lista (drop-down list)
<p> básica Adiciona um parágrafo
<param> programação Define um parâmetro para um objeto
<pre> formatação Define um texto pré-formatado
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 22
SER_SER_ADS_DAI_UNID1.indd 22 21/10/2019 13:22:30
<q> formatação Define uma citação curta
<samp> formatação Define um código de amostra
<script> programação Inicia um script
<select> formulário Cria uma lista selecionável
<small> formatação Define um pequeno texto
<span> estilo Define uma seção no documento
<strong> formatação Define um texto forte (similar ao negrito)
<style> estilo Define informações de estilo
<sub> formatação Formata um texto para subscrito
<sup> formatação Formata um texto para sobrescrito
<table> tabela Cria uma tabela
<tbody> tabela Cria o corpo da tabela
<td> tabela Cria uma célula da tabela
<textarea> formulário Define uma área de texto
<tfoot> tabela Cria um rodapé da tabela
<th> tabela Cria um cabeçalho da tabela
<thead> tabela Define o cabeçalho da tabela
<title> metadados Seta o título do documento
<tr> tabela Cria uma linha da tabela
<ul> lista Cria uma lista desordenada
Para a edição básica de documentos HTML, além de conhecer tais tags, é 
necessário um editor de texto e um navegador, sendo este último para efetuar o 
teste de visualização do resultado. Ao final da edição, o desenvolvedor 
faz upload do arquivo para um servidor web que responde por uma 
determinada URL.
Na Figura 1 é demonstrado, na parte (a), um código-
-fonte de uma página simples desenvolvida em HTML, 
com as marcações destacadas em azul, e, na parte (b), 
sua visualização em um navegador.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 23
SER_SER_ADS_DAI_UNID1.indd 23 21/10/2019 13:22:30
Figura 1. Capturas de tela: (a) o código HTML de um exemplo de página da web; (b) a página formatada visualizada em 
um navegador.
Como pode ser visualizado no código da Figura 1, logo no início há a declara-
ção do idioma da página sob a forma de metadado e a abertura de seu cabeçalho 
com a defi nição do tipo de caracteres utilizados, o charset, que, nesse caso, é o 
utf-8. Para funcionar bem a leitura dos caracteres textuais, sobretudo no que se 
refere à acentuação, é importante que o charset corresponda ao mesmo que foi 
salvo pelo editor de texto utilizado (nas opções avançadas de salvamento, geral-
mente é possível confi gurar o charset utilizado).
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 24
SER_SER_ADS_DAI_UNID1.indd 24 21/10/2019 13:22:32
Fechando o cabeçalho, na linha 5 do código, podemos ver a defi nição do títu-
lo, delimitado por <title> e </title>. Essa informação será utilizada por navega-
dores para defi nir o nome da página em suas abas. Mecanismos de busca como 
o Google também dão signifi cativo valor a essa informação.
Já no corpo da página (linhas 7 a 16) encontra-se o conteúdo propriamente 
dito, elencando os elementos que são visíveis ao usuário. Nesse caso, há textos 
de destaque gerados pela tag <h n>, onde n é um número de hierarquia no in-
tervalo 1 a 6 (sendo, portanto, <h1> o de maior importância). A página disposta 
como exemplo ainda faz uso da marcação <b> para texto em negrito, <i> para 
texto em itálico, <hr> para criar uma linha divisória horizontal e as tags <ul> e 
<li> para criar uma lista não numerada.
Note que, no exemplo apresentado, não houve preocupação com refi namen-
to estético, por não utilizar referência alguma a uma determinada folha de esti-
los. Isso foi proposital, justamente para seguir a importante recomendação de 
separação de conteúdo e estilos, facilitando futuras manutenções. No início da 
tecnologia web, sem boas opções para gerenciamento de estilos dos elementos, 
era comum desenvolvedores utilizarem tabelas da HTML e marcações de forma-
tação dos documentos para diagramarem as páginas. Tais práticas, apesar de 
ainda funcionarem, não são boas práticas de projeto.
Geração dinâmica de documentos HTML
No início da web, os servidores entregavam ao usuário apenas arquivos de 
páginas estáticas. Atualmente existem verdadeiros sistemas de informação, en-
tregando páginas web processadas aos usuários a partir de conexão com bases 
de dados. Esse processamento aumentou signifi cativamente a importância da 
web na sociedade para a realização dos mais diversos serviços 
(cadastros, governo eletrônico, compras e serviços bancários 
são alguns dos exemplos mais conhecidos).
Para processamento web no lado do servidor, geral-
mente são utilizadas as seguintes tecnologias: Perl, 
Microsoft .Net, Node.js, PHP, Ruby on Rails e Java 
Servlets e JSP, sendo essa última a que aborda-
remos adiante.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 25
SER_SER_ADS_DAI_UNID1.indd 25 21/10/2019 13:22:32
Também é possível realizar a geração dinâmica de documentos no lado do 
cliente via JavaScript, porém essa geração normalmente necessita de chamadas 
a um servidor para obter arquivos de dados, usando XML ou JSON – JavaScript 
Object Notation, isto é, notação de objetos JavaScript. Esse modo de construção 
de aplicativos tem a vantagem de diminuir a quantidade de dados transmitidos 
na comunicação cliente-servidor, pois, em vez de receber a página toda em no-
vas interações, apenas os novos dados são transmitidos. Na prática, geralmente 
boas aplicações web usam ambos os tipos de programação (no cliente e no ser-
vidor) para a geração dos documentos visualizados pelo usuário.
A Figura 2 demonstra as etapas para geração de páginas dinâmicas, desde 
a entrada inicial de informações do usuário, via requisição no navegador, até a 
consulta nas bases de dados e retorno do servidor.
Figura 2. Fluxo de processamento de páginas dinâmicas web. Fonte: TANENBAUM, 2003, p. 487. (Adaptado).
1 2
Navegador
CLIENT-SIDE SERVER-SIDE
Servidor web Base de dadosScripts
3 4
5678
1 – Usuário informa dados
2 – Dados enviados ao servidor
3 – Dados repassados para os scripts
4 – Consulta e/ou gravação na base de dados
5 – Retorno da base de dados
6 – Script gera a página ou dados em XML ou JSON
7 – Arquivo HTML, XML ou JSON retornado
8 – Página apresentada ao usuário
 Conforme relatado, frequentemente a aplicação web precisa apenas atua-
lizar os dados apresentados ao usuário no navegador, por exemplo, quando se 
avisa que chegou um novo e-mail. Nesses casos, não faz sentido receber toda 
uma página novamente, mas apenas as novas informações (neste contexto, o 
novo e-mail recebido) e, para tanto, o navegador receberá do servidor apenas os 
dados adicionais, em XML ou JSON.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 26
SER_SER_ADS_DAI_UNID1.indd 26 21/10/2019 13:22:32
Objetos em JSON fazem parte de uma tecnologia própria JavaScript, ampla-
mente utilizada em aplicações web modernas. Tais objetos estruturam informa-
ções de modo compacto e simples e, por isso, o JSON tem sido adotado por em-
presas como Google e Yahoo.
A título de exemplifi cação e comparação, demonstramos, na Figura 3, dados 
fi ctícios de dois funcionários, armazenados em arquivos, respectivamente, na 
tecnologia JSON e em XML. 
Figura 3. Exemplo simples de comparação de arquivos em JSON e XML.
Através da comparação apresentada na Figura 3, é possível perceber que a 
tecnologia JSON é mais leve (arquivo cerca de 50% menor, nesse caso) e apresen-
ta a vantagemde alta interoperabilidade com os navegadores, que tradicional-
mente já executam JavaScript, além de ser bem aceita no lado dos servidores.
No entanto, as duas tecnologias têm seu espaço, sendo que o XML tem uma 
gama grande de ferramentas no mercado, incluindo aquelas de alta complexida-
de, para transformações e buscas de informações, então cabe, ao desenvolver 
algo nesse sentido, decidir qual tecnologia mais deve agregar em sua pilha de 
desenvolvimento.
CSS
A Cascading Style Sheets (CSS) é a linguagem de estilo feita para descrever a 
apresentação dos elementos das páginas da web, incluindo cores, layout e fontes. 
Ela permite adaptar a apresentação a diferentes tipos de dispositivos, como telas 
grandes e pequenas ou impressoras.
A CSS é independente da linguagem HTML e pode ser utilizada com qualquer 
linguagem de marcação baseada em XML. A separação entre HTML e CSS facilita a 
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 27
SER_SER_ADS_DAI_UNID1.indd 27 21/10/2019 13:22:32
manutenção de aplicações web, o compartilhamento de folhas de estilo entre 
páginas e a adaptação das páginas para diferentes ambientes. Isso é chamado 
de separação da estrutura (ou conteúdo) da apresentação. 
É possível utilizar estilos CSS em uma página web de três modos distintos: 
adicionar o texto de comandos CSS internamente no arquivo HTML, usar CSS 
em linha para aplicar regras em elementos específi cos ou fazer um link para 
um arquivo .css externo. Este último modo é o mais aconselhado no desenvol-
vimento de sites por separar os estilos dos documentos HTML que contêm os 
elementos visuais e fazer com que um arquivo de estilos possa ser aplicado em 
diferentes páginas, facilitando a manutenção e conferindo estilos padrões a 
todas as páginas de um site.
A primeira versão do CSS foi lançada em dezembro de 1996 e defi niu proprie-
dades básicas para especifi car cores, fontes, margens, bordas e outros estilos 
básicos. A segunda edição do padrão, CSS 2, foi adotada em maio de 1998, defi -
nindo recursos mais avançados, como o suporte para posicionamento absoluto 
de elementos. Para a versão 3, a especifi cação CSS foi dividida em vários módu-
los especializados, que estão passando pelo processo de padronização.
DICA
Dispomos aqui os validadores on-line 
do W3C, que são gratuitos e podem ser 
usados para efetuar verificações, res-
pectivamente, de CSS e de HTML. Isso permite que, posteriormente, 
possíveis correções necessárias sejam realizadas.
Webfonts
Antes da versão 3 do CSS, os desenvolvedores estavam limitados a utilizar 
apenas elementos de tipografi a chamados de fontes, que são básicos dos dis-
positivos clientes. Como modo de desenvolver sites com diferentes 
tipos de fontes, os designers chegavam a usar imagens para 
escreverem textos, o que deixa geralmente mais pesado o 
carregamento da página e prejudica os aplicativos de lei-
tura de tela, utilizados por pessoas com defi ciência visual.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 28
SER_SER_ADS_DAI_UNID1.indd 28 21/10/2019 13:22:33
Responsividade
A responsividade é um atributo de qualidade das interfaces das aplicações 
que as permite funcionar bem em diversos dispositivos clientes, o que se dá 
por meio da adaptação do conteúdo. O design responsivo para web evita que 
os desenvolvedores tenham que criar múltiplas versões do hipertexto para 
cada variação de tela ou de resoluções do mercado.
Esse atributo está cada vez mais em evidência pelo crescimento expo-
nencial do acesso à web por dispositivos móveis, cujas telas são menores do 
que de desktops e notebooks. Um site responsivo reage às necessidades dos 
usuários e seus dispositivos. Por exemplo, em um smartphone, os usuários 
visualizam o conteúdo em uma só coluna, enquanto em um notebook o mes-
mo conteúdo pode ser visto em três colunas, pela largura maior de sua tela.
Um design com responsividade inclui:
• Adaptar o layout dos elementos web de acordo com a resolução do cliente;
• Redimensionar imagens para que caibam na tela;
• Simplifi car elementos da tela para dispositivos móveis;
• Ocultar elementos desnecessários nos dispositivos com telas menores;
• Adaptar o tamanho de botões e links para interfaces sensíveis ao toque 
(touch screen).
Na Figura 4 é possível visualizar um projeto do tipo wireframe de um site 
considerando a responsividade, por prever a realocação dos elementos vi-
suais em telas com a largura menor. Repare, portanto, que não só a fonte 
do título do site e a foto foram deixadas em menor tamanho, como as infor-
mações abaixo dela, em vez de se distribuírem em duas colunas lado a lado, 
assumiram uma forma vertical. 
Para resolução da questão, foi desenvolvida então a regra de CSS @font-face, 
que é utilizada para indicar fontes fora do padrão do sistema nos sites, com o res-
pectivo caminho para o arquivo da fonte. A sintaxe de utilização é simples e tem 
suporte à grande maioria dos navegadores atuais.
Existem ferramentas on-line gratuitas, como o Google Fonts e o Font Squirrel, 
que oferecem fontes e auxiliam na escrita do código CSS para utilização facilitada 
nos desenvolvimentos web.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 29
SER_SER_ADS_DAI_UNID1.indd 29 21/10/2019 13:22:33
Figura 4. Projeto wireframe de site responsivo. Fonte: Shutterstock. Acesso em: 11 set. 2019.
Projetos do tipo wireframe podem ser feitos manualmente em papel (com 
lápis ou caneta) ou em editores informatizados simples, e servem para represen-
tar o futuro produto, como um esqueleto, um protótipo ou uma versão bastante 
primitiva do visual de um projeto.
Assim, no wireframe há um auxílio ao designer na hora de prever a diagrama-
ção dos conteúdos e aplicar a identidade visual, facilitando a futura codificação, 
e ainda ser uma ferramenta de alinhamento da expectativa do cliente quanto ao 
que será produzido no layout.
Nesse contexto, considerando a grande proximidade atual das pessoas com 
seus smartphones, incluindo o aumento vertiginoso desses dispositivos, Luke 
Wroblewski, autor do livro Mobile First, de 2011, propôs uma técnica que está 
sendo bem aceita entre os desenvolvedores web: a mobile first ou, em tradução 
livre, dispositivo móvel primeiro. O conceito básico é o de criar um site pensando 
primeiro nos dispositivos móveis e só então ajustá-lo para o computador.
O desenvolvimento com a técnica mobile first apresenta a vantagem de mais 
fácil adaptação do que o processo inverso, isto é, do computador para o mobile. 
O conteúdo textual, por exemplo, quando pensado para ser apresentado em 
uma tela menor, tem de ser resumido, indo direto ao ponto desejado, e isso tam-
bém se torna útil nas telas maiores, segundo o próprio Luke Wroblewski em seu 
livro de 2011.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 30
SER_SER_ADS_DAI_UNID1.indd 30 21/10/2019 13:22:33
A pilha de desenvolvimento HTML, CSS e JavaScript 
e os frameworks de apoio
Na área de Tecnologia da Informação, em geral, há uma característica técnica 
muito perceptível no desenvolvimento para a web, que é a necessidade de uma 
soma de recursos de diferentes linguagens de marcação e programação para pro-
duzir o software fi nal.
Essa característica é conhecida como pilha de desenvolvimento e tem de-
safi ado os desenvolvedores a realizar uma integração transparente e adequa-
da, dependendo de um estudo contínuo desses profi ssionais.
Assim, no mercado de trabalho, na busca por esses profi ssionais, surgiu in-
clusive um termo para defi ni-los: profi ssionais de pilha completa ou full-stack.
No desenvolvimento web, na parte de interface de usuário, ou front-end, a 
pilha de desenvolvimento geralmente envolve:
• HTML: para escrita do conteúdo sob a forma de hipertexto;
• CSS: para formatação do conteúdo do hipertexto;
• JavaScript: para execução das ações de validação do client-side e chama-
das dinâmicas ao servidor de modo assíncrono, angariando maior interativida-
de à aplicação web.
O frameworkBootstrap
Considerando que as aplicações comerciais têm necessidades em comum de 
integração da pilha de desenvolvimento, incluindo agregação plena de requisitos 
de acessibilidade, usabilidade e responsividade, surgiram frameworks para au-
xiliar o desenvolvedor.
Como exemplo de sucesso nessa área de frameworks para apoio ao desenvol-
vedor web é possível citar o Bootstrap, um framework front-end de uso gratuito 
voltado para criação de sites responsivos, que permite ao desenvolvedor chegar a 
resultados rápidos e confi áveis a partir do uso de componentes (plugins) usando 
HTML, CSS e JavaScript.
Os principais componentes básicos disponíveis são:
• Alert: mostra um alerta ao usuário, podendo ter várias cores, de acordo 
com o signifi cado semântico, e ainda um botão de dispersão opcional;
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 31
SER_SER_ADS_DAI_UNID1.indd 31 21/10/2019 13:22:33
• Card: cria um container de conteúdo flexível e extensível, com opções para 
cabeçalhos e rodapés, cores de background contextuais e tipos diferentes de 
apresentação;
• Carousel: apresenta slides de uma série de imagens, texto ou marcação 
personalizada. Também suporta controles e indicadores (anterior e próximo);
• Modal: cria janelas internas (so-
brepostas a outros elementos ou não) 
para exibição e/ou coleta de dados, 
otimizando o uso do espaço da página. 
Esse elemento pode ser utilizado para 
manter mensagens (de confirmação, 
por exemplo) e formulários ocultos, 
exibindo-os somente quando for ne-
cessário. Note que esse componente é 
importante para evitar a necessidade 
de redirecionamento de usuário para 
outra página, otimizando a interação;
• Navbar: introduz uma barra de navegação que apresenta links em forma de 
menu com opção de itens drop-down;
• Progress: permite a criação de barras de progresso com diversas opções, 
como a inclusão de rótulos, indicação de nível de progresso em porcentagem, 
definição de preenchimento com cores, listras e animações;
• Tooltip: apresenta uma dica de algo quando o ponteiro do mouse passa em 
cima de determinado elemento.
No próprio portal do Bootstrap, é possível ter acesso a exemplos ilustrativos 
de tais componentes.
Além de componentes básicos, existem exemplos de casos corriqueiros do 
mercado já implementados no framework Bootstrap. Isso vem ao encontro da 
necessidade de desenvolvedores produzirem conteúdo de qualidade, de acordo 
com padrões de interação de sucesso, em curto espaço de tempo.
Dentre vários exemplos disponibilizados, destacam-se os seguintes:
• Album: página para galerias de fotos, portfólios, dentre outros;
• Blog: página em estilo de revista, com grande rolagem vertical, cabeçalho, 
navegação e conteúdo destacado;
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 32
SER_SER_ADS_DAI_UNID1.indd 32 21/10/2019 13:22:40
Biblioteca para JavaScript: o jQuery
O jQuery é uma biblioteca de componentes JavaScript criada em 2006 por 
John Resig muito utilizada por desenvolvedores, sendo pequena, rica em recur-
sos e bem integrada ao Bootstrap (geralmente são utilizados em conjunto).
O uso do jQuery auxilia no processo 
de passagem e manipulação de docu-
mentos HTML, manipulação de even-
tos, animação e Ajax, com uma API que 
funciona em diversos navegadores.
Para sua utilização, basta incorpo-
rar seu código na página usando a tag 
<script> e depois utilizar seletores para 
acessar os objetos e realizar ações:
• Pela sua identifi cação, única (cada 
elemento em HTML pode e deve ter um 
identifi cador chamado ID, nomeado pelo desenvolvedor na sua tag de abertura);
• Por sua classe CSS. Essa seleção e ação é feita com a sintaxe $(“#ID”).acao();.
• Checkout: página com formulário de checkout customizado para validar 
itens a serem comprados, mostrando componentes de formulário referentes a 
dados do cliente e informações para pagamento;
• Dashboard: painel de controle administrativo básico, com barras laterais e 
de navegação;
• Pricing: página de produtos e seus respectivos preços, feita com cards e 
incluindo cabeçalhos e rodapé personalizado;
• Product: página de marketing focada em apresentar detalhes de um produ-
to de modo bem trabalhado, com grid, textos e imagens;
• Sign-in: página com layout e design de formulário customizado para um 
login em determinada área restrita.
No próprio portal do Bootstrap é possível ter acesso a exemplos ilustrativos 
de tais componentes. No site do Bootstrap também é possível encontrar mais 
explicações sobre cada um deles, bem como respectivos códigos, exemplos (que 
podem ser reutilizados livremente) e demonstração de funcionamento.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 33
SER_SER_ADS_DAI_UNID1.indd 33 21/10/2019 13:22:49
Prática de layout com HTML e CSS
Para esta seção é apresentada uma prática para orientar os alunos a de-
senvolveram uma página web, utilizando HTML e CSS, em um padrão chamado 
landing page, ou página de aterrisagem em português. Esse padrão é bastante 
conhecido e amplamente utilizado atualmente para apresentação de uma em-
presa e venda de produtos e serviços.
A ideia é desenvolver uma página com grande rolagem vertical, permitindo 
fácil visualização das informações em dispositivos móveis. Isso se explica pelo 
fato de as pessoas estarem acostumadas a percorrer com rolagem vertical, em 
redes sociais, longos feeds, sendo uma experiência mais amigável do que fazer 
o usuário selecionar um link para ter de visualizar cada informação.
Esse tipo de página conta ainda com a característica de se iniciar com um 
título curto e de boa expressividade, textos pequenos e um destaque, logo no 
início, para a conversão desejada (conhecer a marca, entrar em contato com 
uma empresa ou mesmo comprar determinado produto ou serviço).
Fazem parte ainda desse padrão as seguintes características:
• Uso de frases curtas e claras em todos os textos, que devem ser separados 
por temas e objetivos;
• Destaque de termos relevantes em negrito;
• Grande uso de imagens e vídeos ilustrativos;
• Uso de mapas para indicar lugares (como o endereço do estabelecimento, 
do negócio etc.), geralmente no fi nal da página.
Para desenvolvimento da página, o primeiro passo é obter o Bootstrap, 
que será responsável por oferecer os elementos de HTML, CSS e JavaScript ne-
cessários para um site de qualidade, com ótima usabilidade e responsividade. 
Para tanto, para facilitar o aprendizado, basta copiar o código de template ini-
cial que apresenta um “Hello World”, ou “Olá mundo”, para um novo arquivo 
com extensão HTML em seu computador.
Com o texto “Olá mundo” aparecendo formatado em seu navega-
dor, você pode ir incrementando-o com os elementos neces-
sários para a landing page e testá-la aos poucos, até deixar 
o desenvolvimento melhor elaborado. Essa primeira versão 
da prática pode ser vista na Figura 5. 
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 34
SER_SER_ADS_DAI_UNID1.indd 34 21/10/2019 13:22:49
Figura 5. Captura de tela: (a) página simples com o código utilizando Bootstrap; (b) sua visualização no navegador.
Para chegar mais rápido ao resultado final, você deve utilizar o código 
exemplo Product do Bootstrap e realizar alterações dos textos de conteúdo 
e imagens (todas as programações de CSS e JavaScript podem ser mantidas).
No resultado exemplificado a seguir, os textos e imagens foram altera-
dos para uma empresa fictícia chamada “Max CSS Limpeza”. É possível ob-
servar que o uso do Bootstrap permitiu que o site funcionasse bem, com 
responsividade, tanto em dispositivos desktop, com tela maior, quanto em 
smartphones.
É possível constatar ainda que a responsividade atingida vai além de 
uma simples organização dos elementos. Houve a alteração completa do 
menu no smartphone, mudando sua organização para o padrão menu san-
duíche ou hambúrguer, em que um ícone, que lembra um sanduíche, serve 
como botão que, quando pressionado, abre uma caixa de opções, otimizan-
do espaço na tela.DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 35
SER_SER_ADS_DAI_UNID1.indd 35 21/10/2019 13:22:50
Figura 6. Página responsiva landing page de uma empresa fi ctícia feita com uso do Bootstrap.
Java EE e suas principais APIs
O Java Enterprise Edition (EE) é a especifi cação de uma plataforma am-
plamente utilizada para desenvolvimento de aplicações corporativas, incluindo 
as aplicações web, possuindo diversos recursos, como bibliotecas e funcionali-
dades implementadas. Esses recursos coordenados têm a intenção de reduzir 
signifi cativamente o custo e a complexidade do desenvolvimento, implantação 
e gerenciamento de aplicações de várias camadas centradas no servidor, agre-
gando maior padronização, portabilidade, robustez, escalabilidade, confi abili-
dade e segurança nos produtos desenvolvidos , de acordo com Budi Kurniawan 
na já mencionada obra de 2002. 
CURIOSIDADE
O Java EE, em suas versões antigas (até a 1.4), era conhecido pelo nome J2EE.
Na Tabela 3 indicamos os marcos da evolução da especifi cação Java EE. 
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 36
SER_SER_ADS_DAI_UNID1.indd 36 21/10/2019 13:22:51
Versão Ano de lançamento
Java EE 5 2006
Java EE 6 2009
Java EE 7 2013
Java EE 8 2017
Java EE 5Java EE 5
Java EE 6
Java EE 5
Java EE 6Java EE 6
Java EE 7Java EE 7
Java EE 8
Java EE 7
Java EE 8Java EE 8
20062006
20092009
20132013
20172017
TABELA 3. EVOLUÇÃO DA ESPECIFICAÇÃO JAVA EE
Uma signifi cativa mudança apresentada na versão 8 foi o anúncio da Ora-
cle, proprietária (após a compra da Sun Microsystems) dos direitos sobre a lin-
guagem Java, de ceder o Java EE para a organização sem fi ns lucrativos Eclipse 
Foundation. Isso foi feito com o objetivo de aumentar a colaboração entre indi-
víduos, pequenas empresas, empresas e os maiores fornecedores.
Nesse processo de transição de tecnologias para a Eclipse Foundation, um 
novo projeto foi iniciado, o Eclipse Enterprise para Java (EE4J), que utiliza o Java 
EE 8 e também outro projeto, chamado Jakarta, como base para a criação de 
novos padrões.
As principais APIs do Java EE, em sua versão 8, podem ser vistas na esque-
matização por grupos de perfi s hierárquicos de distribuição (profi les) de acor-
do com o apresentado na Figura 7. 
 w
eb p
rofi le do Java EE
Iten
s opcio
nais do Java EE
 
Ite
ns o
brigatórios do Java EE
 
w
eb
 co
ntainer do Java EEJav
a SE
Java EE Deployment, Entity Beans 
e JAX RPC
EJB, JavaMail, Batch, JSP Debugging, 
JMS e Connector
CDI, JTA, JSON binding e processing, JSF 
e Security API
HTTP, HTTPS, Servlet, JSP, JNDI e 
WebSocket
JDBC para conectar com bases de dados, 
objetos remotos RMI e Corba, JavaBeans e 
XML binding
Figura 7. Esquema das APIs do Java de acordo com seus grupos de perfi s hierárquicos de distribuição.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 37
SER_SER_ADS_DAI_UNID1.indd 37 21/10/2019 13:22:52
É possível compreender que a base de todos os perfi s é o Java Standard Edition 
(SE), que possui apenas as funções e os recursos básicos da plataforma, como cria-
ção e gerenciamento de objetos e a conexão com sistemas gerenciadores de banco 
de dados (SGBDs). Por outro lado, o conjunto completo da plataforma é disponibili-
zado no Java EE com seus opcionais (visto na extremidade da Figura 7).
Fica evidente que o Java EE é deveras extenso, não sendo o foco desse mate-
rial ensiná-lo em sua totalidade. Um resumo das funções e objetivos das princi-
pais APIs é apresentado a seguir:
• Jave Server Pages (JSP), Java Servlets e Java Server Faces (JSF): para de-
senvolvimento web, com geração dinâmica de páginas no servidor;
• Enterprise JavaBeans Components (EJB) e Java Persistence API (JPA): 
para instanciação e persistência (gravação e recuperação, distribuída ou não, 
de seus dados em memória) de componentes de software. Por meio da JPA, é 
possível interagir com bases de dados relacionais encapsulando os códigos de 
consulta do tipo Structured Query Language (SQL);
• Java API para XML Web Services (JAX-WS) e Java API para XML Binding 
(JAX-B): gerenciamento de arquivos do tipo XML e utilização de web services;
• Java Autenthication and Authorization Service (JAAS): para controle de 
autenticação e acesso para segurança das aplicações;
• Java Transaction API (JTA): objetiva o controle de transações em container;
• Java Message Service (JMS): tem por fi nalidade gerenciar o intercâmbio de 
mensagens;
• Java Naming and Directory Interface (JNDI): objetiva o gerenciamento de 
espaço de nomes e objetos.
Servidores de aplicação e web containers
Um servidor de aplicação Java EE é o conjunto de softwares responsáveis por 
prover a infraestrutura de programação e a utilização dos aplicativos seguindo 
a especifi cação da tecnologia. Várias empresas podem fornecer um servidor de 
aplicação, no entanto os mantenedores do Java EE defi nem uma implementação 
de referência completa, que é de código aberto (open source), chamada GlassFish 
Server Open Source Edition. Existem ainda implantações de referência parciais 
(para algum serviço específi co), como o Mojarra para a especifi cação do JSF.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 38
SER_SER_ADS_DAI_UNID1.indd 38 21/10/2019 13:22:52
Dentre servidores de aplicação desenvolvidos por outras empresas (não 
sendo a implementação de referência), é possível citar o JBoss, Wildfly, IBM 
WebSphere e Oracle WebLogic como implementações completas da platafor-
ma Java EE.
A implementação parcial do Java EE, que disponibiliza criação, processa-
mento e entrega de conteúdo dinâmico na web, é chamada de web container, 
sendo indicado para desenvolvimento de sistemas que utilizam apenas a parte 
web do ambiente (geralmente para aplicações de pequeno e médio porte). O 
exemplo mais conhecido de web container é o Apache Tomcat, que implemen-
ta as tecnologias Java Servlet e JavaServer Pages ( JSP) e não é um container 
Enterprise JavaBeans (EJB).
Os web containers não são tão completos quanto os servidores de aplica-
ção, porém já realizam o processamento de páginas que os chamados servido-
res web não fazem. Essa última categoria tem como exemplo bem conhecido o 
Apache web Server, que, em sua versão simples (sem complementos), apenas 
entrega conteúdo estático (hipertexto, imagens e vídeo) aos clientes.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 39
SER_SER_ADS_DAI_UNID1.indd 39 21/10/2019 13:22:52
Sintetizando
Essa unidade se iniciou com a apresentação de conceitos básicos de fun-
cionamento das aplicações para internet na web, apresentando um pouco 
de sua história e da parte técnica do protocolo que rege toda a comunicação 
cliente-servidor, o HTTP. Foi visto ainda que a versão segura desse protocolo, o 
HTTPS, é a opção mais indicada para uso atual.
A partir da base de conceitos, foram feitas a apresentação teórica e a de-
monstração prática das linguagens e tecnologias para desenvolvimento de 
páginas web, do hipertexto simples à sua formatação com folhas de estilo e 
controles de ações utilizando JS. O conteúdo prosseguiu explorando detalhes 
de funcionamento da geração dinâmica das páginas nos servidores.
Como parte final dessa unidade, foram vistos conceitos iniciais da platafor-
ma Java EE e suas principais APIs, explicitando seus detalhes de distribuição, 
com uma visão geral de sua quantidade de recursos existentes.
Nessa plataforma, considerando o foco em web da unidade, foram abor-
dados também os detalhes e as diferenças entre servidores de aplicação para 
web containers.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 40
SER_SER_ADS_DAI_UNID1.indd 40 21/10/2019 13:22:52
Referências bibliográficas
AMARAL, L. G. CSS – Cascading Style Sheets: guia de consulta rápida. 3. ed. 
São Paulo: Novatec. 2009.
BAHAJJI, Z. A.; ILLYES, G. HTTPS as a ranking signal. Official Google Webmas-
ter Central Blog, 6 ago. 2014. Disponível em: <https://webmasters.googleblog.
com/2014/08/https-as-ranking-signal.html>. Acessoem: 11 set. 2019.
GALBRAITH, B.; SCHUH, J. Improving privacy and security on the web. Chro-
mium Blog, 7 mai. 2019. Disponível em: <https://blog.chromium.org/2019/05/
improving-privacy-and-security-on-web.html>. Acesso em: 12 set. 2019.
KURNIAWAN, B. Java para a web com Servlets, JSP e EJB. Rio de Janeiro: Ciên-
cia Moderna, 2002.
LEINER, B. M. et al. A brief history of the internet. ACM SIGCOMM Computer 
Communicaton Review, v. 39, n. 5, 2009, p. 22-31. Disponível em: <http://www.
sigcomm.org/sites/default/files/ccr/papers/2009/October/1629607-1629613.
pdf>. Acesso em: 02 out. 2019.
MARCOTTE, E. Responsive web Design. A List Apart, n. 306, 25 mai. 2010. Dis-
ponível em: <https://alistapart.com/article/responsive-web-design/>. Acesso 
em: 13 set. 2019.
ORACLE. Java™ Platform, Enterprise Edition (Java EE) Specification. v. 8. Re-
dwood City: Oracle, 2017.
PRESSMAN, R. S.; LOWE, D. Engenharia web. Rio de Janeiro: LTC, 2009.
TANENBAUM, A. S. Redes de computadores. 4. ed. Rio de Janeiro: Campus-El-
sevier, 2003.
W3C. HTML 5 – Curso W3C Escritório Brasil. Disponível em: <https://www.w3c.
br/pub/Cursos/CursoHTML5/html5-web.pdf>. Acesso em: 12 set. 2019.
WROBLEWSKI, L. Mobile First. Nova Iorque: A book apart. 2011.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 41
SER_SER_ADS_DAI_UNID1.indd 41 21/10/2019 13:22:52
INTRODUÇÃO AO 
DESENVOLVIMENTO 
DE APLICAÇÕES PARA 
INTERNET
2
UNIDADE
SER_SER_ADS_DAI_UNID2.indd 42 21/10/2019 12:50:52
Objetivos da unidade
Tópicos de estudo
 Apresentar ao aluno detalhes de funcionamento do ambiente de 
desenvolvimento com a ferramenta Eclipse e com o contêiner Web Apache Tomcat;
 Ampliar o conhecimento básico do aluno sobre Servlet API, que faz parte da 
plataforma Java EE, e de detalhes de como funciona a geração dinâmica das páginas 
no servidor ao utilizar essa tecnologia; 
 Mostrar como funcionam as requisições GET e POST, incluindo detalhamento de 
sua parametrização.
 Ambiente de desenvolvimento 
 Java Development Kit (JDK) e o 
Java EE Web Profile SDK 
 Eclipse
 Apache Tomcat
 Servlet API 
 Geração de conteúdo dinâmico 
com Servlets
 Parâmetros de requisição (GET 
e POST)
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 43
SER_SER_ADS_DAI_UNID2.indd 43 21/10/2019 12:50:52
Ambiente de desenvolvimento 
Para desenvolver aplicações Web é necessária a utilização de boas ferramen-
tas e de um local para execução e teste dos artefatos produzidos. Assim, o de-
senvolvedor tem apoio ferramental de softwares, que o ajudam na escrita do 
código e na visualização do resultado de pequenas porções de seu projeto no 
local de execução. 
Atualmente, já existem editores de código on-line (via Web) que permitem 
programação, tanto da parte do cliente quanto da parte do servidor, com testes 
também realizados por meio do navegador. No entanto, as ferramentas mais 
robustas e completas ainda são do tipo desktop, instaladas no computador do 
desenvolvedor, com servidor integrado a elas. 
CURIOSIDADE
Para o desenvolvimento para Web usando Java, o desenvolvedor necessita 
de uma máquina com bom processador e memória RAM ideal de 4 GB ou 
superior, para utilização das ferramentas de edição e para manter um servidor 
local. Essa base de software necessária pode ser instalada nos mais comuns 
sistemas operacionais: Windows, Linux e MacOS.
O servidor usado para testes de códigos em desenvolvimento, geralmente, 
fi ca na própria máquina do desenvolvedor ou, em outra, na rede local de empre-
sas de desenvolvimento. 
Após o código testado em ambiente local, o software é validado e enviado 
para o servidor de produção, que é aquele acessado pelos clientes. Esse proces-
so é chamado de deployment.
Em sistemas críticos ou muito complexos, pode inclusive existir um servidor 
intermediário, chamado de staging server, ou servidor de estágio, que é um am-
biente idêntico ao de produção ou muito parecido com ele (incluindo software, 
hardware e confi guração).
No cotidiano das empresas de desenvolvimento de software, geralmente 
existe uma equipe de desenvolvedores trabalhando na mesma base de código, 
mas em ambientes de desenvolvimento diferentes. Nesse caso, são utilizadas 
ferramentas de gestão de confi guração como o GIT e o Subversion, que contro-
lam confl itos em código e replicam as alterações. 
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 44
SER_SER_ADS_DAI_UNID2.indd 44 21/10/2019 12:50:52
Para minimizar e melhorar o trabalho dos desenvolvedores em montar o 
ambiente de desenvolvimento, surgiram os ambientes de desenvolvimento in-
tegrado, do inglês Integrated Development Environment (IDE). Eles vão muito além 
de apoiar na edição de código fonte, também incluem a parte de realização de 
testes (unitários e de integração), o link com o compilador ou interpretador, a 
depuração de código para achar erros e o deployment.
Existem vários softwares do tipo IDE no mercado, como o Visual Studio, o 
NetBeans, o BlueJ, o IntelliJ e o Eclipse. Neste conteúdo, abordaremos Java como 
linguagem de programação, Java EE como plataforma de recursos, Eclipse como 
o IDE e como contêiner Web, o Apache Tomcat. Como sistema operacional utili-
zaremos o Windows, mas o desenvolvedor tem a liberdade de utilizar outro soft-
ware IDE, um sistema operacional ou usar um misto de sistemas na utilização da 
tecnologia Java.
De acordo com o site oficial do Java, em 2019, 3 bilhões de dispositivos execu-
tam Java e existem 12 milhões de desenvolvedores pelo mundo.
Além desse alto número de dispositivos e da grande comunidade de desen-
volvimento, a utilização de Java agrega vantagens em relação ao uso de outras 
tecnologias no lado do servidor, como: 
• De código portável: a aplicação desenvolvida pode ser servida em di-
versos sistemas operacionais, sem a necessidade de modificar códigos. Isso é 
possível, fundamentalmente, por todo código ser executado em uma máquina 
virtual Java;
• Orientada a objetos: todos os elementos da linguagem são chamados de 
objetos, que interagem entre si de diferentes modos, como ocorre no mundo 
real. Por implementar bem o conceito de orientação a objetos, os códigos Java 
tendem a se tornar intuitivos e mais fáceis de se entender; 
• Segura: tem vários recursos de proteção das classes e de seu ambiente 
como um todo, com bom suporte ao tratamento de exceções. Essa característica 
foi considerada fundamental para sua boa adoção em instituições financeiras;
• Multi-threaded: suporta processamentos múltiplos com gerenciamento de 
concorrência no comportamento de objetos;
• Robusta: como os códigos são executados na máquina virtual, não é neces-
sário que o desenvolvedor se preocupe com uso indevido de memória da apli-
cação e com a chamada coleta de lixo, que é feita de modo automático em Java;
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 45
SER_SER_ADS_DAI_UNID2.indd 45 21/10/2019 12:50:52
• Com evolução contínua: novas versões de Java e de seus componentes são 
sempre lançadas, apresentando inovações para a comunidade;
• De boa disponibilidade de IDEs: tem amplo suporte ferramental disponível 
no mercado (de modo gratuito e pago), auxiliando significativamente o trabalho 
dos desenvolvedores;
• Gratuita: é “free”, assim como possui ambientes de desenvolvimento tam-
bém gratuitos, tais como o Eclipse e o Netbeans.
Apesar dessas vantagens, Java apre-
senta alguns problemas que podem ser 
citados, como a significativa verbosida-
de, que corresponde à necessidade de 
grande volume de escrita de código, 
e velocidade de processamento. Esse 
último ponto vem sendo melhorado 
constantemente, porém a comunidade 
ainda reclama de lentidão, sobretudo 
por lembrar do passado de má integração dos chamados Applets no sistema ope-
racional Windows, em que o usuário sentia a demora na abertura das aplicações. 
Nessa questão de melhoria de desempenho, vale ressaltar que Java adotou 
um conceito de implementação Just in Time ( JIT), em que o código em linguagem 
de execução é geradoapenas quando o aplicativo chama o método correspon-
dente ao código, guardando o resultado para chamadas subsequentes.
Em relação à verbosidade, outras linguagens se aproveitaram desse fato para 
ganhar mercado. Esse é o caso que ocorreu na Kotlin, linguagem contemporânea 
que prega simplicidade e grande expressividade no código. 
Desse modo, Kotlin vem com a promessa de suprir a necessidade de desen-
volvimento rápido, com pouco código, sobretudo em dispositivos móveis, funcio-
nando com plena integração com Java, que anteriormente era a única linguagem 
oficial de desenvolvimento para Android. 
A título de curiosidade, é apresentado, no Diagrama 1, o modo de execução 
de uma aplicação em Java, desde a leitura de seu código-fonte até a geração dos 
bytecodes e interpretação usando a máquina virtual. É esse fluxo que também 
funciona quando se utiliza um contêiner Web, servindo uma página dinâmica ao 
usuário que é resultado de processamento na máquina virtual. 
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 46
SER_SER_ADS_DAI_UNID2.indd 46 21/10/2019 12:50:55
DIAGRAMA 1. MODO DE EXECUÇÃO DE APLICAÇÃO EM JAVA
.class .class
...
.jar .jar
...
Compilador Java
Interpretador Java (JVM)
.java .java
...
Java
Código-fonte
Compilação
Java bytecode
Interpretação
Execução
Fonte: SEBESTA, 2011. (Adaptado).
Como pode ser visto no Diagrama 1, após a leitura dos arquivos de código-
-fonte, são gerados arquivos em código de máquina, intermediários para exe-
cução, que são chamados bytecodes. 
O interpretador Java lê os bytecodes e os junta aos arquivos do tipo Java 
ARchive ( JAR), que compactam bibliotecas de classes e metadados associados, 
constituindo assim o programa.
Vale ressaltar que, uma vez gerados os arquivos de bytecodes com a exten-
são .class, não há necessidade de criá-los novamente a cada nova interpreta-
ção do código, pois essa nova criação por compilação deve ocorrer apenas se 
arquivos de código-fonte Java forem alterados.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 47
SER_SER_ADS_DAI_UNID2.indd 47 21/10/2019 12:50:55
Java Development Kit (JDK) e o Java EE Web Profile SDK
Para criar uma aplicação Java, é necessário utilizar o seu kit de desenvolvi-
mento que é chamado de JDK ( Java Development Kit – Kit de Desenvolvimento 
Java), que é encontrado no site ofi cial da linguagem Java. Esse kit também pode 
ser encontrado como Java SE Development Kit, pois faz parte do pacote Java 
Standard Edition (JSE).
Vale ressaltar que esse kit é considerado o requisito mínimo essencial para o 
desenvolvimento em Java, já que é focado na compilação dos códigos e na execu-
ção dos bytecodes da linguagem, não vindo com um contêiner para Servlets, por 
exemplo. Para a execução dos bytecodes, o JDK contém o chamado Java Runtime 
Environment (JRE). 
O JDK consiste, principalmente, de um compilador (javac), de uma ferramen-
ta de execução (java), de um utilitário para auxílio na geração de documentação 
(javadoc) e de bibliotecas básicas.
Para o download de todos os produtos da tecnologia Java, utilizamos o site 
ofi cial. Na Figura 1, apresentada a seguir, é possível ver a parte da página Web de 
distribuição do JDK, aqui chamado de Java SE Development Kit, em sua versão 13. 
Utilizaremos a versão executável de 64 bits para Windows, de arquivo nomeado 
como jdk-13_windows-x64_bin.exe. 
Figura 1. Captura de tela da caixa para seleção da distribuição desejada do Java SE Development Kit. 
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 48
SER_SER_ADS_DAI_UNID2.indd 48 21/10/2019 12:50:57
Conforme visto na Figura 1, existem várias opções do JDK, atendendo os mais 
conhecidos e utilizados sistemas operacionais do mercado. Isso é importante 
para permitir que o software desenvolvido funcione em ambientes diferentes. 
Se não fosse desse modo, o desenvolvedor teria que produzir software de modo 
específico para um sistema operacional. 
Após a tela inicial de apresentação, há a tela apresentada na Figura 2. Nela, é 
possível configurar em qual pasta ficarão os arquivos do JDK.
Figura 2. Captura da tela de configuração da instalação do JDK. 
 Você pode executar o JDK sem definir a variável de ambiente PATH (caminho) 
ou, opcionalmente, configurá-lo para poder executar os arquivos do JDK (javac.
exe, java.exe, javadoc.exe e outros) de qualquer diretório, sem ter que digitar o 
caminho completo do comando.
Assim, caso você opte por não definir a variável PATH, precisará especificar o 
caminho completo para o arquivo executável toda vez que executá-lo.
Para definir a variável PATH permanentemente, inclua o caminho completo 
do diretório do JDK na variável PATH do sistema operacional utilizado. Normal-
mente, no Windows, esse caminho completo é semelhante a C:\Program Files\
Java\jdk-13\bin. Defina a variável PATH do seguinte modo no Windows:
1. Clique em “Iniciar”, “Painel de controle” e “Sistema”.
2. Clique em “Avançado” e, em seguida, “Variáveis de ambiente”.
3. Adicione o local da pasta bin da instalação do JDK na variável PATH em 
“Variáveis do sistema”. 
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 49
SER_SER_ADS_DAI_UNID2.indd 49 21/10/2019 12:50:58
Na Figura 3, é apresentada a tela de configuração que adiciona o caminho 
do compilador e outros executáveis Java nas variáveis de ambiente do Windows. 
Figura 3. Captura de tela de como adicionar o caminho do compilador Java nas variáveis de ambiente do Windows. 
Conforme visto na Figura 3, é relativamente fácil inserir o caminho para os 
utilitários Java nas variáveis de ambiente do sistema Windows. Conforme dito 
anteriormente, essa é uma tarefa opcional, mas que pode ajudar o desenvol-
vedor em seu trabalho diário, principalmente caso ele deseje testar códigos via 
linha de comando. 
DICA
Tradicionalmente, os fornecedores da linguagem Java disponibilizam um 
tutorial básico a cada nova versão, que é chamado First Cup (primeiro 
copo). Esse nome faz uma alusão ao logo de Java, que é uma xícara de 
café, então representa uma metáfora ao primeiro copo de café tomado. 
Considerando o foco no desenvolvimento e na execução de aplicações Web, 
relatamos que existe um pacote específico chamado Java EE Web Profile SDK, 
que contém o servidor de aplicações chamado GlassFish Open Source Edition, 
que funciona também como servidor Web.
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 50
SER_SER_ADS_DAI_UNID2.indd 50 21/10/2019 12:50:59
A título de ilustração, utilizamos o download do arquivo compactado do 
Java EE 8 Web Profile SDK, conforme tela de disponibilização do fornecedor 
oficial, que pode ser vista na Figura 4. Também utilizaremos o Apache Tomcat, 
dispensando o uso do GlassFish em nossos exemplos, já que o Tomcat é leve 
e mais utilizado atualmente em pequenos projetos. 
Figura 4. Captura de tela da página de download do SDK. 
Após realizar o download do arquivo, é necessário realizar sua descom-
pactação. Em seguida, abra a pasta em que os arquivos foram descompac-
tados e execute o arquivo glassfish5\glassfish\bin\startserv.bat. Com isso, 
será iniciado o funcionamento do servidor Glassfish, que responderá requi-
sições Web. 
Então, para verificar seu funcionamento, basta acessar http://loca-
lhost:8080 em seu navegador para visualizar a página exemplo do Glassfish. 
Sua área administrativa pode ser vista em http://localhost:4848, conforme 
apresentado na Figura 5. 
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET 51
SER_SER_ADS_DAI_UNID2.indd 51 21/10/2019 12:51:00
Figura 5. Captura de tela de gerenciamento Web do Glassfi sh.
A área administrativa Web do Glassfi sh pode ser considerada como um 
recurso importante que facilita o trabalho de quem administra o servidor, 
evitando a necessidade de conexão por terminal na máquina, que é menos 
intuitiva do que esse modo de interação gráfi ca, como o status e as con-
fi gurações de servidor. Por padrão, o acesso a essa área não vem com a 
proteção por senha, então recomendamos que esse