Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Apostila Guia
Disciplina
Docente
Lista de Figuras
Figura 1: Funcionamento de uma aplicao Web (ANTONIO, 2016) ................................................. 7
Figura 2: Primeira pgina Web. .......................................................................................................... 9
Figura 3: Definio de pargrafos .................................................................................................... 10
Figura 4: Tag <br> ............................................................................................................................. 10
Figura 5: Tag <pre></pre> ................................................................................................................ 11
Figura 6: Layout padro ................................................................................................................... 15
Figura 7: Layout utilizando a semntica do HTM5 ........................................................................... 16
Figura 8: Input Text .......................................................................................................................... 17
Figura 9: Input radio ......................................................................................................................... 17
Figura 10: Definio da estrutura de uma declarao CSS .............................................................. 18
Figura 11: Agrupamento de seletores .............................................................................................. 20
Figura 12: Espaamento entre elementos ....................................................................................... 26
Figura 13: Padding ............................................................................................................................ 27
Figura 14: Menu Dropdown ............................................................................................................. 35
Figura 15: Funcionamento de pginas web dinmicas. ................................................................... 46
Figura 16: Estrutura do projeto ........................................................................................................ 49
Figura 17: Modelo do banco - agendaWeb ...................................................................................... 50
Figura 18: Interface principal ........................................................................................................... 51
Figura 19: Interface do arquivo novoContato.html ......................................................................... 51
Figura 20: Editar contato por ID ....................................................................................................... 52
Figura 21: Tela editar contato .......................................................................................................... 53
Sumrio
1.
2.
Aplicaes Web.......................................................................................................................... 7
3.
4.
5.
6.
5.1.
5.2.
Pargrafo .......................................................................................................................... 10
5.3.
Ttulos ............................................................................................................................... 11
5.4.
5.5.
5.6.
Links .................................................................................................................................. 12
5.7.
Tabelas ............................................................................................................................. 13
5.8.
Listas ................................................................................................................................. 13
5.9.
5.10.
Layout ........................................................................................................................... 15
5.11.
Formulrios .................................................................................................................. 16
5.11.1.
5.11.2.
5.11.3.
6.2.
6.3.
6.4.
6.5.
6.6.
Cores................................................................................................................................. 24
6.7.
Backgrounds ..................................................................................................................... 25
6.8.
Bordas............................................................................................................................... 25
6.8.1.
Border-color ............................................................................................................. 25
6.8.2.
6.9.
6.10.
Margens............................................................................................................................ 26
Padding ......................................................................................................................... 27
3
6.11.
6.12.
6.12.1.
6.12.2.
Text alignment.......................................................................................................... 28
6.12.3.
6.12.4.
6.12.5.
6.13.
Fontes ........................................................................................................................... 29
6.13.1.
6.13.2.
6.13.3.
6.14.
Links .............................................................................................................................. 30
6.15.
Layout ........................................................................................................................... 30
6.15.1.
display ...................................................................................................................... 30
6.15.2.
Position ..................................................................................................................... 31
6.15.3.
6.15.4.
6.15.5.
Propriedade Clear..................................................................................................... 32
6.15.6.
6.16.
7.
JavaScript.................................................................................................................................. 35
7.1.
Introduo ........................................................................................................................ 35
7.2.
7.3.
Sintxe .............................................................................................................................. 36
7.3.1.
Valores...................................................................................................................... 37
7.3.2.
Operadores............................................................................................................... 37
7.3.3.
Expresses ................................................................................................................ 37
7.3.4.
7.3.5.
Comentrios ............................................................................................................. 38
7.4.
Identificadores ................................................................................................................. 38
7.5.
7.5.1.
Strings ....................................................................................................................... 39
7.5.2.
Nmeros ................................................................................................................... 39
7.5.3.
Boolean..................................................................................................................... 40
4
7.5.4.
Array ......................................................................................................................... 40
7.5.5.
Objetos ..................................................................................................................... 41
7.6.
Funes ............................................................................................................................ 43
7.7.
Datas................................................................................................................................. 43
7.8.
Eventos ............................................................................................................................. 44
7.9.
8.
Servlets ..................................................................................................................................... 46
9.
Apache Tomcat......................................................................................................................... 47
9.1.
9.2.
9.2.1.
10.
2. Aplicaes Web
Uma aplicao Web, diferentemente de uma aplicao desktop, tem seu processamento
feito em um servidor remoto e no localmente. Quando o usurio acessa uma pgina
Web por meio de um navegador, diversas operaes ocorrem implicitamente em
poucos segundos.
Tomando como exemplo a Figura 1 para envio de um formulrio, o usurio
digita o endereo do site no navegador e preenche o formulrio. Quando ele clica para
enviar os dados, o navegador enviar uma requisio utilizando o protocolo
HTTP/HTTPS para o servidor que est no endereo lhe passado. Chegando no servidor,
ele analisa o cdigo e envia para os interpretadores das linguagens especficas: PHP,
Java, Python, e Ruby. Depois do interpretador realizar as operaes que lhe foram
passadas, agora ele deve retornar para o servidor o resultado em formato HTML para
que o cliente (browser) consiga interpret-la.
3. Front-end e Back-end
Os termos front-end e back-end so comumente utilizados para designar um processo
de desenvolvimento de aplicaes Web.
O desenvolvimento front-end utilizado quando se deseja tratar apenas
detalhes relacionados a apresentao de pginas ao usurio, ou seja, a interface.
Detalhes como: cor, fonte, elementos visuais, udio, vdeo e animaes. Todas as
tecnologias que trabalham com front-end so executadas no lado cliente. Uma
tecnologia front-end o CSS Cascading Style Sheets, que ser abordada nos
prximos captulos.
7
Back-end
PHP
Java
.Net
Python
Ruby
especifica o tipo de codificao utilizada pela pgina, podendo ser ANSI, ASCII,
ISSO-8859-1 e UTF-8. J a tag content associa um valor as tags name, http-equiv e
charset. Veja abaixo algumas declaraes de meta tags.
5.2.
Pargrafo
Normalmente todo cdigo HTML que estiver dentro da tag <body> ficar
visvel na pgina, mas como o HTML se trata de uma linguagem de marcao
importante que todos dados pertenam a uma tag. Isso importante porque mais na
frente as tags sero mapeadas pela linguagem de folha de estilos, CSS.
Um pargrafo definido pela tag <p></p>, sendo que espaos em branco e
mudana de linhas no afetam a formatao do pargrafo. Veja abaixo, duas
declaraes que geram a mesma sada.
Nos casos de quebra de linha intencional, utiliza-se a tag <br>, que por
curiosidade, no tem barra de fechamento.
10
5.3.
Ttulos
5.4.
5.5.
11
5.6.
Links
Links so atalhos criados para ligar pginas web quando o usurio clica em
em um texto, imagem ou boto.
Um link definido pela tag <a></a> e um atributo chamado href que
contm o endereo da pgina referenciada. O trecho de cdigo a seguir mostra
como realizada a criao de um link chamado clique aqui que chama a pgina
cadastro.html.
<a href="cadastro.html">Clique aqui</a>
Tambm possvel criar um link a partir de uma imagem. Para isso, utilizase a tag <img> sem fechamento, com os atributos src para indicar o local da
imagem e alt para mostrar uma legenda flutuante, quando a imagem no pode ser
exibida. Veja o trecho de cdigo abaixo:
<a href="nova_pagina">
<img src="imagem.jpg" alt="minha legenda">
</a>
12
5.7.
Tabelas
Por padro a tabela vem sem borda, para adicion-las utiliza-se o atributo
border na tag <table>. Quanto maior o nmero maior a espessura da borda.
<table border="1">
5.8.
Listas
e so definidas pela tag <ul></ul>. Cada item da lista deve ter uma tag <li></li>,
como est no cdigo abaixo:
<ul>
<li>Caf</li>
<li>Leite</li>
<li>Po</li>
</ul>
List-style-type: disc
List-style-type: circle
List-style-type: square
List-style-type: none
<ul style=" list-style-type: disc"></ul>
5.9.
Blocos - div
14
<div style="color:#0000FF">
<h3>Isto um ttulo</h3>
<p>Isto um paragrafo.</p>
</div>
5.10. Layout
O termo Layout se refere a estrutura da pgina Web que normalmente
possui a estrutura da Figura 6. Essa estrutura normalmente codificada utilizando
divs, mas com a adoo do HTML5 foram criadas tags especficas para criao de
layouts, aproveitando a interpretao semntica que os navegadores oferecem a
elas.
15
5.11.
Formulrios
5.11.1.
Input Text
Esse tipo de input utiliza somente uma linha para entrada de textos.
Nome:<br>
<input type="text" name="nome"><br>
Idade:<br>
<input type="text" name="idade">
16
5.11.2.
Input Radio
5.11.3.
Input Submit
17
pgina HTML. Por exemplo, no cdigo abaixo, existe dois pargrafos, mas cada um
deles possui um atributo chamado id com um valor nico. Dessa forma, consegue-se
atribuir propriedades diferentes em elementos com tags semelhantes.
<head>
<style>
#p1{
color: red;
}
#p2{
color: black;
}
</style>
</head>
<body>
<p id="p1">Primeiro pargrafo</p>
<p id="p2">Segundo pargrafo</p>
</body>
</body>
6.1.
20
}
</style>
</head>
<body>
<div>
<p>Paragrafo 1 na div.</p>
<p>Paragrafo 2 na div.</p>
</div>
<p>Paragrafo 3 fora da div.</p>
</body>
6.2.
6.3.
21
6.4.
22
<p>Paragrafo 1 na div.</p>
<p>Paragrafo 2 na div.</p>
</div>
<p>Paragrafo 3 fora da div.</p>
<p>Paragrafo 4 fora da div.</p>
</body>
6.5.
<head>
<link rel="stylesheet" type="text/css" href="meu_Estilo.css"
>
</head>
6.6.
Cores
24
6.7.
Backgrounds
6.8.
Bordas
Propriedade utilizada para definir as cores das bordas. Ex: bordercolor: red;
6.9.
border-bottom-
Margens
<div class="container">
<p class="one">Vou herdar as margens
antecessor. (Da div container).</p>
</div>
do
meu
</body>
6.10. Padding
A propriedade padding utilizada para definir espaos entre o contedo do
elemento e suas bordas. A Figura 13 mostra a propriedade padding sendo aplicada a
uma imagem.
27
6.13. Fontes
O CSS trata a questo das fontes dividindo-as em dois grupos: generic
family e font family.
O grupo das fontes generic family so tipos mais simples como Serif, Sansserif e Monospace.
O grupo das fontes font family so tipos mais complexos derivadas do grupo
das generic family, o que pode acontecer de certos navegadores ou sistemas
operacionais no possurem tais fontes. Uma boa prtica de desenvolvimento com
esse tipo de fonte definir mais de um tipo, comeando com a fonte desejada e
finalizando com uma generic family. Sempre que um nome de fonte possuir mais
de uma palavra elas devem ficar entre aspas duplas.
Ex: font-family: "Times New Roman", Times, serif;
29
6.14. Links
Os links so utilizados para ligar pginas por meio de nomes. Alm de todas
as propriedades de texto citadas nas ultimas sees, os links tambm suportam
diferentes estados. O CSS define 4 estados para links:
6.15. Layout
6.15.1. display
30
Block Quando um elemento mostrado com esse valor significa que cada
elemento vai ocupar uma linha inteira, consequentemente cada elemento vai
ficar em uma linha.
Inline Os elementos que adotarem esse valor sero mostrados na mesma
linha, se houver espao suficiente. Caso contrrio, o elemento passar para a
linha subsequente.
None Define que o elemento no ser mostrado na pgina. Alm disso,
um elemento display com esse valor no deixa espao vazio ao contrrio da
propriedade visibility:hidden, que tambm esconde o elemento na pgina,
mas deixa um espao vazio em seu lugar.
Inline-block a combinao da propriedade display:inline com
display:block. Ao contrrio da inline, a inline-block permite atribuir uma
largura e uma altura ao elemento.
6.15.2. Position
32
33
34
7. JavaScript
O JavaScript uma linguagem de programao interpretada, ou seja, no
necessita de um compilador especfico, apenas necessrio um navegador que possa
suport-lo, o que no uma tarefa to difcil, pois a maioria dos navegadores atuais
oferecem esse suporte. A linguagem JavaScript do tipo client-side, ou seja, roda
apenas no lado do cliente. Assim, o usurio tem a autonomia de habilitar ou desabilitar
o JavaScript do seu navegador, cabendo a pgina web avisar ao usurio se o suporte
est habilitado ou no.
7.1.
Introduo
35
7.2.
Funes de Display
O JavaScript permite visualizar dados de diferentes maneiras:
7.3.
Sintxe
36
var x = 5;
var y = 6;
var z = x + y;
var x = 5;var y = 6;var z = x + y;
o Operadores lgicos: (&&, ||, ==, ===, !=, !==, >, <, >=, <=, ?)
Ex: a==b; 3!=5; 4>3;
7.3.3. Expresses
Var a =5; 4 * a + 3 = 23
7.3.5. Comentrios
7.4.
Identificadores
38
7.5.
Tipos de dados
O JavaScript possui muitos tipos de dados, entre eles esto String, Number,
Boolean, Array, Object. Veja alguns exemplos:
var
var
var
var
idade = 16;
sobrenome = "Johnson";
marcas = ["Saab", "Volvo", "BMW"];
x = {firstName:"John", lastName:"Doe"};
// Number
// String
// Array
// Object
7.5.1. Strings
7.5.2. Nmeros
39
// equivalente a 12300000
var y = 123e-5;
// equivalente a 0.00123
// x igual a 255
7.5.3. Boolean
// retorna false
Boolean(y);
// retorna true
Boolean(z);
// retorna false
7.5.4. Array
40
document.getElementById("demo").innerHTML
person["nome"];
41
: 5566,
nomeCompleto : function() {
return this.nome + " " + this.sobrenome;
}
};
42
7.6.
Funes
Uma funo pode retornar um valor. Para isso, utiliza-se a palavra reservada
return.
Ex: var x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
// chamando a funo
// Declarao da funo
//retornando o produto a * b
7.7.
Datas
O JavaScript trabalha com dois formatos de datas:
separadamente.
Veja alguns mtodos do objeto Date:
43
o
o
o
o
o
o
o
o
o
7.8.
Eventos
Eventos so aes que o JavaScript oferece aos elementos HTML para que
eles reajam a determinados estmulos. Tanto causado pelo usurio, quanto pelo
resultado de um processamento.
Os eventos mais comuns esto relacionados ao uso do mouse e teclado. O
HTML possui diversos atributos para se trabalhar com esses eventos. Segue uma
lista dos principais:
o Onclick ativado ao clicar em um elemento
o Onmouseover ativado ao mover o mouse sobre o elemento
o Onmouseout ativado ao sair com o mouse da regio do elemento
Exemplo de um elemento que recebe um evento onclick e mostra a data
atual.
<button onclick="displayDate()">Que horas so?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
7.9.
Validao de formulrios
44
45
8. Servlets
Quando a navegao em sites na internet se limitava apenas ao acesso de
pginas estticas em servidores web, ou seja, pginas criadas somente em HTML, CSS
e JavaScript. O usurio no tinha como interagir dinamicamente com o contedo, pois
todo o processamento era realizado somente no browse do cliente. O cliente solicitava
uma pgina e o servidor web a entregava.
Com o passar do tempo e a expanso da internet, surgiu o conceito de
pginas dinmicas. Agora o cliente poderia interagir dinamicamente com as pginas
web, e os sites tinham a capacidade de processar informaes especficas solicitadas
pelos clientes.
Mas como foi possvel realizar o processamento de informaes do lado do
servidor? A resposta para essa pergunta foi utilizar as linguagens j existentes como C,
C++, PhP, C#, e Java. Mas como o servidor web executa essas linguagens, recebendo
requisies em HTTP? Para isso foi criado o conceito de web container. Um container
criado especificamente para cada linguagem de programao, permitindo processar
informaes em uma linguagem especfica como Java, C++, e Python. Assim, quando
o cliente solicita informaes sobre sua conta bancria a um servidor web, o servidor
codifica essa requisio para uma linguagem especfica e a passa para o web
container, que se encarregar de acessar o banco de dados e retornar os dados para o
servidor, que em seguida retornar ao cliente.
A implementao do web container, em Java, baseada em Servlets, uma
tecnologia criada pela Sun para o desenvolvimento de aplicaes Web a partir de
componentes Java que executem no lado do servidor. Servlets so classes Java que so
instanciadas e executadas em associao com servidores web, de base de dados, de
email, e de arquivos. Com o objetivo de fornece uma comunicao entre clientes e
servidores por meio do protocolo HTTP.
46
9. Apache Tomcat
O Apache Tomcat um servidor web open source, que contm um web
container Java e implementa as tecnologias: Servlets, JSP - JavaServer Pages, Java
Expression Language e Java WebSocket.
9.1.
Instalao do Tomcat
O
Apache
Tomcat
pode
http://tomcat.apache.org/download-70.cgi.
ser
baixado
no
site:
47
9.2.
Projeto Web
48
49
50
feito,
chamando
o
mtodo
getServletContext().getRequestDispatcher(String string) que retorna um objeto
do tipo RequestDispatcher. E em seguida, chamando o mtodo
getRequestDispatcher(String string) do objeto RequestDispatcher.
52
10.
servidor local e recebe requisies via navegadores por meio do protocolo HTTP. No
entanto, para se desenvolver uma aplicao Web necessrio conhecer HTML, CSS e
JavaScript, o que muitas vezes pode gerar certa dificuldade para quem no est
familiarizado com o desenvolvimento Web.
Diante do contexto abordado, surgiram os frameworks web baseados em
componentes. Essas ferramentas buscam mesclar os dois estilos de desenvolvimento,
aproveitando as vantagens de cada um. Veja alguns exemplos desse tipo de
framework: JavaServer Faces (JSF), Apache Wicket, Vaadin, Tapestry ou GWT da
Google.
O JSF uma ferramenta que nos possibilita criar aplicaes Java para Web
utilizando componentes visuais pr-prontos, de tal forma que o desenvolvedor no se
preocupe com o CSS, HTML e JavaScript da pgina. Basta adicionar os componentes
e eles sero renderizados como HTML.
Por padro o JSF j vem com diversos componentes bsicos prontos como
inputs, botes, formulrios, calendrios e comboBoxes. No entanto, caso necessite de
componentes mais sofisticados possvel utilizar extenses do JSF como PrimeFaces,
RichFaces, e IceFaces. Essas extenses possuem um grande nmero de componentes
sofisticados, que podem suprir a maioria das necessidades dos desenvolvedores web.
54
Referencial bibliogrfico
ARNOLD, K.; GOSLING, J.; HOLMES, D. A Linguagem de Programao Java. 4. ed. Porto Alegre:
Bookman, 2007.
DEVCAST: Programao Web: Por onde comear?. Realizao de Jaison Schmidt. S.i:
Devmedia, 2016. P&B.
W3SCHOOLS. W3Schools. 2016. Disponvel em: <http://www.w3schools.com/>. Acesso
em: 08 jun. 2016.
ABREU, Karen Cristina Kraemer. Histria e usos da Internet. Disponvel em:
<http://www.bocc.ubi.pt/pag/abreu-karen-historia-e-usos-da-internet.pdf>. Acesso em: 08
jun. 2016.
ANTONIO, Gutierry. Introduo ao desenvolvimento web no Delphi. Disponvel em:
<http://www.devmedia.com.br/introducao-ao-desenvolvimento-web-no-delphi/34423>.
Acesso em: 08 jun. 2016.
PRIMEFACES. PrimeFaces. Disponvel em: <http://www.primefaces.org/>. Acesso em:
08 jun. 2016.
CAELUM. Lab. Java com Testes, JSF e Design Patterns. Disponvel em:
<https://www.caelum.com.br/apostila-java-testes-jsf-web-services-design-patterns/>.
Acesso em: 08 jun. 2016.
K19 TREINAMENTOS. Desenvolvimento Web com HTML, CSS e JavaScript. So
Paulo: K19, 2012.
CAELUM. Java
para
Desenvolvimento
Web. Disponvel
<https://www.caelum.com.br/apostila-java-web/>. Acesso em: 08 jun. 2016.
APACHE TOMCAT. Apache
Acesso em: 08 jun. 2016.
Tomcat. Disponvel
55
em:
em:
<http://tomcat.apache.org/>.
Apndices
Apndice A - Contato.java
56
Apndice B: Endereco.java
57
58
Apndice C: Telefone.java
59
Apndice D: ConnectionFactory.java
60
Apndice E: ContatoDAO.java
61
62
63
Apndice F: EnderecoDAO.java
64
65
66
Apndice G: TelefoneDAO.java
67
68
Apndice H: agendaWeb.jsp
69
70
Apndice I: agendaWeb.css
71
72
73
Apndice J: novoContato.html
74
75
76
Apndice K: novoContato.css
77
78
79
Apndice L: novoContato.java
80
81
82
Apndice M: form_editar.html
83
Apndice N: editar.java
84
Apndice O: editar_dados.jsp
85
86
87
Apndice P: excluirContato.html
88
Apndice Q: excluir.java
89
90
Apndice R: update.java
91
92
93