AMBIENTE WEB
Prof. Danilo Ricardo Barbosa de Araújo
•
O protocolo HTTP. A linguagem HTML, XML, Java Script e CSS.
IDE para desenvolvimento WEB. Introdução ao JEE.
•
Objetivos:
•
Entender quais são as tecnologias típicas que estão relacionadas
com um ambiente de desenvolvimento WEB.
•
Entender os benefícios associados ao uso de um ambiente
integrado de desenvolvimento WEB.
•
Possuir habilidade para criar protótipos de aplicações WEB usando
o protocolo HTTP e as tecnologias HTML, Java Script e CSS com
suporte de um servidor WEB típico, como o Apache.
•
Aulas expositivas, dialogadas e interativas.
•
Uso de laboratório de informática para prática das tecnologias.
•
Serão usados como meios auxiliares de ensino um projetor de
slides e quadro branco.
•
Avaliação:
•
Avaliação por frequência e participação ativa nas aulas
•
Realização de exercícios que serão passados no final de cada aula
•
50% da nota final.
•
Protótipo de aplicação WEB que deverá ser desenvolvido em sala
de aula
mais 50% da nota total na disciplina.
•
Quando: As aulas serão nas terças e quintas durante 4
semanas
19h
–
22h
•
Head First HTML e CSS. Elisabeth Robson e Eric Freeman.
O'Reilly Media; Second edition, 2012. 764p.
•
The Java EE 7 Tutorial: Basic Concepts. Eric Jendrock, Ricardo
Cervera-Navarro, Ian Evans, Kim Haase, William Markito. Oracle,
2014. 980p..
•
Desenvolvendo Aplicações Web com JSP e JSTL. Peter Jandl
Junior. Editora: Novatec, 2009.
•
Beginning JSP, JSF and Tomcat: Java Web Development. Giulio
Zambon. 2nd edition. Apress, 2012. 436p.
•
Guide to Web Development with Java. Tim Downey. Springer,
2012. 401p.
•
Desenvolvimento para WEB com Java. Everton Coimbra de
Araújo. Visual Books, 2010.
•
Professional jQuery. Cesar Otero e Rob Larsen. Wrox, 2012. 336p.
Arquitetura
Web e HTTP
HTML e CSS
JavaScript
XML
Ambiente
Java Web
1
2
3
4
Arquitetura Web e HTTP
HTML e CSS
JavaScript
XML
Arquitetura Web e HTTP
HTML e CSS
JavaScript
XML
•
Entender o papel do cliente Web e do servidor Web
•
Entender o protocolo HTTP
•
Compreender a estrutura básica de uma requisição HTTP
•
Conhecer os métodos HTTP
•
Compreender a estrutura básica de uma resposta HTTP
•
A Web (WWW- World Wide Web) é uma estrutura arquitetônica
que permite o acesso a documentos vinculados espalhados por
uma infinidade de máquinas na Internet
•
World Wide Web Consortium (W3C)
Organização
voltada para:
•
O desenvolvimento da Web
•
A padronização de protocolos
•
Incentivo à interoperabilidade entre os sites
Cliente
(browser)
Servidor web
(APP)
Cliente
Verifica uma requisição do cliente e retorna algo de volta!
•
Esse algo é um recurso (PDF, HTML, imagem, etc)!
requisição
?
resposta
GET /upe/alunos.html HTTP 1.1
Host www.upe.br
A resposta contém o
recurso (ou código de erro)
•
Solicita o conteúdo ao servidor e exibe na tela
•
O cliente aqui é o navegador (browser) e não a pessoa!
(a) Um plug-in de navegador
(b) Uma aplicação auxiliar
Interface plugin-browser
Estação do Cliente
Kernel do
Browser
Plugin
Estação do Cliente
requisição
resposta
2
Servidor procura a página inicial
e devolve para o cliente
É o tal de HTML?
representar a estrutura
da página. Os clientes
e servidores se
comunicam usando um
protocolo chamado
usam para se comunicarem na Web
•
HyperText Transfer Protocol
•
É fundamentado em um tipo de comunicação simples
solicitação x resposta
•
HTML informa ao navegador como exibir o
conteúdo para o usuário
•
HyperText Markup Language
estão fundamentadas sobre o protocolo HTTP
•
Entender HTTP
entender fundamentos de
aplicações cliente-servidor na Web
•
HTML define como exibir conteúdo, mas possui
limitações
Web ocorrem usando o protocolo HTTP
•
Iteração com padrão
“solicitação – resposta”
•
O cliente envia uma requisição HTTP e o servidor
devolve uma resposta HTTP
•
Requisições subsequentes do mesmo cliente são
independentes
•
Por definição, o servidor não lembra do cliente!
•
TCP é responsável por garantir que um
arquivo enviado de um nó da rede para
outro alcance o destino íntegro
•
Ainda que dividido em vários pacotes...
•
HTTP acrescenta características
específicas da Web, mas depende do
demais protocolos da pilha TCP/IP
TCP
IP
Ethernet
100Base-TX
Porta. A porta padrão
para servidores Web é
80 (caso omitida).
http://www.upe.br:80/portal/.../upe-logo.png
Protocolo de
comunicação
Nome do servidor.
É mapeado para um
IP único (xxx.yyy.zzz.aaa)
Caminho (path) no
Servidor (hierarquia de
pastas no servidor)
a autoridades locais!
•
Após verificar se o domínio pretendido está disponível, você
precisará pagar uma taxa anual...
•
Tecnicamente há uma distinção entre estes termos!
•
URL - Uniform Resource Locator
foco em localizar o conteúdo
•
URN - Uniform Resource Name
foco em identificar um conteúdo
•
URI - Uniform Resource Identifier
pode ser URL, URN ou ambos!
•
Exemplos de URI:
•
http://upe.poli.br/absolute/URI/with/absolute/path/resource.txt
(URL)
•
urn:issn:3546-2671 (URN)
solicitação
resposta
> Método HTTP
> A página a acessar (URL)
> Parâmetros do Form
Elementos-chave:
> Código de status
> Content-type
•
GET
•
POST
•
HEAD
•
TRACE
•
PUT
•
DELETE
•
OPTIONS
conteúdo ao Web Server!
•
Exemplo: o clique em um link para exibição de uma imagem
invocará uma solicitação HTTP usando GET
GET
...
Linhas de
Cabeçalho
O método
HTTP
O caminho do
recurso no
Servidor
Usando GET, parâmetros
podem ser adicionados na
URL
protocolo
enviada pelo
browser
GET /?gfe_rd=ctrl&ei=AHcTU4CuKImj8weMvYCoCg&gws_rd=cr HTTP/1.1
[CRLF]
Host: www.google.com.br
[CRLF]
Connection: close
[CRLF]
User-Agent: Web-sniffer/1.0.47 (+http://web-sniffer.net/)
[CRLF]
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
[CRLF]
Cache-Control: no-cache
[CRLF]
usuário para o servidor!
•
É como se fosse um GET++, pois além de enviar
dados também pode solicitar conteúdo!
POST
...
30
Linhas de
Cabeçalho
No caso do POST, os parâmetros
são colocados no final da solicitação
O método HTTP
O caminho do recurso no servidor
O corpo da
Mensagem
(
payload
)
A versão do protocolo
enviada pelo browser
POST /portal/ HTTP/1.1[CRLF]
Host: www.upe.br[CRLF]
Connection: close[CRLF]
Não entendi. Se o método
POST envia dados do
usuário e o método GET
deve preferir POST para estes casos. As razões são:
•
A quantidade total de caracteres é limitada usando GET
•
Os dados enviados pelo GET ficam expostos no final da
URL, então todos poderão ver essas informações. Ou
seja, você enviaria a senha de um usuário usando
GET?
•
Proteger o uso para bookmark (no caso de POST não
seria possível)
expostos na barra do
navegador
O símbolo ? separa a URL
original dos dados
o status do retorno
status do retorno
do servidor
A linha de cabeçalho Content-type também é
conhecida como MIME type. Informa ao
browser que tipo de documento está sendo
enviado!
Linhas de
cabeçalho
HTTP/1.1 200 OK
Date: Sun, 02 Mar 2014 19:50:52 GMT
Server: Apache/2.2.15 (CentOS)
Código
Significado
Exemplos
1xx
Informação
100 = server agrees to handle client's request
•
Padrão da Internet que descreve o tipo de conteúdo de mensagens
•
Especificado no Content-type
Tipo/Subtipo
Extensão
application/pdf
application/zip
zip
image/gif
gif
text/html
html, htm
text/plain
c, h, txt
adequado para o caso relacionado. Caso possam ser aplicados os dois métodos
circule ambos. Justifique as respostas.
GET POST Um usuário está enviando os valores de login e senha de um site
GET POST Um usuário está solicitando uma nova página via hiperlink
GET POST Em uma sala de bate-papo o usuário enviará uma resposta da conversa
GET POST Um usuário clica no botão NEXT de um site para ir para a próxima tela
GET POST Um usuário clica no botão de LOGOUT em um site seguro de um banco
GET POST Um usuário clica no botão voltar (BACK) do navegador
meio de sniffers:
•
Acesse o site http://web-sniffer.net/
•
Informe alguma URL como http://www.upe.br:80/portal/
•
Descubra a reposta para as questões abaixo, apenas olhando a
resposta HTTP:
1.
Qual foi o servidor que respondeu esta requisição?
2.
Qual foi o Content-type?
3.
Qual o título que deveria aparecer no browser para esta requisição?
4.
Informe pelo menos o caminho de uma imagem que aparece no site.
Arquitetura Web e HTTP
HTML e CSS
JavaScript
XML
desenvolvimento (IDE) para programação Web
•
Entender as marcações básicas da linguagem HTML
•
Entender os elementos básicos e formatos usados no
CSS
•
Conseguir construir uma página Web simples usando
HTML e CSS
usam para se comunicarem na Web
•
HyperText Transfer Protocol
•
É fundamentado em um tipo de comunicação simples
solicitação x resposta
•
HTML informa ao navegador como exibir o
conteúdo para o usuário
•
HyperText Markup Language
editor de textos comum como o Notepad...
O que você escreve
ferramentas voltadas para o desenvolvimento Web!
•
A criação de um projeto Web completo usando um “
notepad
” é
uma insanidade
•
Integrated Development Environments (
IDE’s
):
•
Ambiente de Desenvolvimento Integrado!
•
Fornecem suporte para todas as fases de um projeto, ou seja da
criação até a execução, em uma única ferramenta!
•
Facilitam a edição dos programas, com coloração de elementos
sintáticos, recurso de auto-completar, etc.
•
Facilitam as etapas de compilação/interpretação, deployment,
execução e depuração.
•
Solução completa para aplicações Java SE e Java EE
•
É possível desenvolver para outras plataformas e linguagens,
como PHP
•
O Eclipse usa o conceito de perspectivas
•
Produtividade na escrita e execução
possui browser integrado!
•
Recursos para geração automática e refatoração de código
•
Gratuito e código aberto (software livre)
•
Comunidade forte
•
Acesse o site eclipse.org para obter a versão mais recente do
“
Eclipse IDE for Java EE
Developers”
•
http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/marsr
•
Faça o download compatível com o seu sistema operacional
•
Escolha sempre um workspace diferente para cada ambiente de
trabalho
•
Ex: projetos profissionais, projetos pessoais, trabalhos da pós, etc
apresentada
•
A tela de boas vindas permite a consulta de tutoriais, exemplos, etc
•
A perspectiva JEE possui alguns painéis específicos para ajudar
na criação de aplicações Java Web...
Perspectiva selecionada
Listagem de projetos e
recursos dos projetos
O código-fonte ficará
aqui...
Detalhamento da
estrutura de um recurso
•
Clicando no menu “File > New > “ ou
•
Clicando com o menu de contexto sobre o Project Explorer
•
Botão direito do mouse sobre a janela “Project Explorer”
1
2
Web Project”
•
Informe o nome lanchonete no
campo “Project
name
”
•
Clique em Finish
Serão criados projetos do tipo “
Dynamic
Web Project” a medida que
•
Expanda a árvore do projeto
•
Clique com o botão direito do mouse em WebContent
•
Expanda a árvore do projeto
•
Clique com o botão direito do mouse em WebContent
•
Clique com o botão direito sobre o documento e acione
cardápio da lanchonete da POLI
•
Siga as instruções abaixo:
•
O título da página deve ser “Lanchonete Seu Mário”
•
Use um marcador de cabeçalho de 1º nível (H1) para o título do
cardápio
•
Crie uma mensagem de boas vindas usando <p>
•
Use marcadores de cabeçalhos de 2º nível para “nome do produto
+ preço” e <p> para a descrição dos pratos
•
Exemplos:
Cuscuz com charque R$ 7,00
Delicioso prato de milho com charque acebolada
Macaxeira gratinada R$ 8,50
Macaxeira suculenta com queijo coalho e charque gratinada no forno
apresentar uma aparência semelhante à esta:
title
h1
p
•
Uma tag é delimitada por parêntesis angulares (< e >)
•
Uma tag pode delimitar a porção do HTML que sofrerá
a ação da tag, através da seguinte sintaxe:
<p> ... </p>
(delimitação de um parágrafo)
•
Dizemos que esta tag possui um corpo!
•
Ou pode apenas inserir uma marcação (tag vazia):
<br> ou <br/>
(quebra de linha)
valores, definindo características para a tag:
<
table
width
=
“100%"
border
=
“2"
>
...
</
table
>
Valor do
atributo border
Determina o início
de uma tabela
Determina o fim
de uma tabela
<!-- -->
comentários HTML
<a>
âncora (normalmente para hiperlinks)
<body>
define os limites do corpo do HTML
<br>
quebra de linha
<h1>
um título de seção de 1o nível
<head>
seção do cabeçalho do HTML
<html>
define os limites do HTML
<p>
define um parágrafo
<title>
o título do documento HTML
•
A explicação da grande popularidade inicial de HTML foi permitir
saltar de uma página para
o conceito de hiperligações
•
Uma tag <a> permite que o usuário navegue para outra página!
•
Sintaxe básica:
•
<a href
=“página de destino”
target
=“
_blank|_
self”>Texto do link</a>
•
Exemplo:
•
<a href
=“
cardapio
/bebidas.html”>Bebidas</
a>
•
É possível aninhar tags!
•
Exemplo:
<a href
=“bebidas.html”>
•
O que significa “../
images
/caipirinha.jpeg” no exemplo anterior?
<a href
=“bebidas.html”>
<img src
=“../
images
/caipirinha.jpeg”
alt
=“Bebidas”>
</a>
•
Se a página atual estiver em uma pasta interna, como cardapio, o
símbolo ”../” redireciona para o diretório pai
•
Neste exemplo o caminho é redirecionado para a raiz e as imagens
podem ser acessadas!
•
Linguagem de estilo utilizada para definir a
apresentação de documentos elaborados em
uma linguagem de marcação como HTML
•
Idéia:
•
HTML
Conteúdo do documento
•
Seletor
: elemento HTML a ser formatado
•
Declaração CSS
: é um par (propriedade, valor)
•
A
propriedade
é a característica do seletor que deseja-se
modificar usando-se o
valor
informado
•
Arquivo externo
•
CSS definido no head
<head>
<link
rel
=
"stylesheet
“
type
=
"text/css
“
href
=
"mystyle.css"
/>
</head>
•
Como definir diretamente no head?
<head>
<style
type
=
"text/css"
>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
<p
style
=
"color:blue;margin-left:20px"
>
Isto é um parágrafo.
</p>
#divGeral {
text-align: center;
color: red;
}
•
É aplicado ao elemento HTML que possua o
id=“
divGeral
”
.center {text-align:center;}
de futebol
Bola Murcha Futebol Clube
. Após alguns
meses o clube
Unidos do Agreste Futebol Clube
acusou o primeiro clube de ter plagiado o seu brasão
e as cores do time. Depois de um acordo entre as
partes, ficou acertado que o desenvolvedor iria
reformular o site (usar um novo brasão e cores), mas
mantendo o mesmo
conteúdo
.”
serviços de “pet shop” para a empresa
Cachorro
Feliz
. Após alguns meses uma Ong de defesa dos
direitos dos animais, denominada
Amigos do
Melhor Amigo
, entrou em contato para produzir um
site para divulgação do seu trabalho. O
desenvolvedor percebeu que estava precisando dos
mesmos motivos gráficos
(figuras, cores) para
conteúdos diferentes.”
•
Quais os benefícios de usar HTML + CSS neste
previamente criados:
usando apenas HTML e outra usando HTML +
CSS?
•
Apenas HTML: não conseguimos separar conteúdo de
formatação
•
HTML + CSS: é possível separar conteúdo e
apresentação
necessidade desenvolver pensando neles!
•
O ideal é criar um site que possa ser acessado por qualquer dispositivo
(computador pessoal, tablet, smartphone)
•
O desenvolvedor precisa conhecer ferramentas que facilitem o trabalho de
criar front-end compatível com vários disposititivos
•
Exemplos de frameworks para design responsivo:
•
Bootstrap (
http://getbootstrap.com/
)
melhorias!
•
Formate o visual da página de acordo com suas preferências
usando CSS (cores, estilo de fonte, etc)
•
Promoções devem estar destacadas usando CSS!
•
Crie dias páginas adicionais para conter os dados dos pratos
principais e das bebidas
inclua imagens!
•
Em seguida use hyperlinks na página principal para redirecionar
•
Siga a estrutura de páginas a seguir:
/
index.html
/imagens
/cardapio
bebidas.html
comidas.html
Em projeto padrão do Eclipse a
1989-1991:
HTML 1.0/2.0
•
Homepages
•
Hyperlinks
1995:
HTML 3.0
•
Guerra dos
browsers
•
Falta padrão
1998:
HTML 4.0
•
Criação da
W3C
•
Separação
HTML x CSS
1999:
HTML 4.01
•
Correções
da 4.0
•
De pé por
10 anos
2001:
XHTML 1.0
•
HTML mais
estrito
•
APP x
DOC
2009-2012:
HTML 5.0
•
Recursos
inexistentes
correta que uma página está usando?
•
Conceito de doctype!
•
1ª linha do documento HTML que indica qual a versão usada...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!doctype html>
HTML5
o conceito de “padrão livre” deixou as
•
Será usado o conceito de compatibilidade retroativa!
Funciona no IE9,
Chrome 17,
Firefox 10, Safari
5, Opera II
Funciona
nos antigos
e nas
versões
novas deles
Funciona
nos antigos
e nas
versões
novas deles
Funciona nos
antigos, nas versões
novas deles e em
novos browsers que
apareçam!
Cada versão está ficando maior porque novos recursos foram
adicionados, mas tudo das versões antigas ainda funcionam!
Se o site
estiver no ar
Se o site está no seu
computador
upload
2 erros e 4
warnings
Não foi informado o DOCTYPE
anterior:
•
Use o doctype do HTML5.0 e coloque um alt para a imagem
era criada usando tags <div> formatadas por id:
<div
id=“header”>
<div
id=“
sidebar
”>
<div
id=“
main
”>
estrutura na página!
<header>
<aside>
<section
id=“
main
”>
Tag
Função
<article>
Composição similar ao post de um blog, artigo de revista, etc
<audio>
Usado para adicionar um som à página
<nav>
Destinado para navegação na página
<header>
Fica na parte superior da página ou de uma <section>
<footer>
Fica na parte inferior da página ou de uma <section>
<time>
Pode conter uma data, hora, ou ambos
<aside>
Conteúdo complementar à página, como uma barra lateral
<section>
Grupo temático de elementos, possivelmente com header e footer
<video>
Usado para adicionar um vídeo à sua página
Mário” para HTML5, usando essa estrutura:
LOGOMARCA DA LANCHONETE
Conteúdo de acordo com o
escolhido na navegação
Ex: lista de bebidas com os preços
Propaganda de
fornecedores
Ex: dizer que a
carne é Friboi :P
uma tabela?
•
O segredo é entender as tags <table>, <tr>, <th> e <td>
Tag
Função
<article>
Composição similar ao post de um blog
<audio>
Usado para adicionar um som à página
...
...
usando CSS:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: green;
}
Tag
Função
<article>
Composição similar ao post de um blog
<audio>
Usado para adicionar um som à página
...
...
possuíam interação com dados dos usuários
•
HTML permite a criação de formulários para
obter dados de usuários e processá-los!
•
Como criar páginas para comprar produtos?
•
Como criar páginas para coletar votos de um concurso/enquete?
•
Como criar a página de um jogo?
requisição
resposta
1
Usuário escreve no texto do formulário e clica na lupa
4
O cliente recebe os dados, interpreta o código e
exibe a página com textos, figuras e outros recursos
controles de edição de formulários
•
Caixas de texto, caixas de seleção, botões de rádio, etc
•
Um botão de “
submit
” pode ser usado para enviar os
dados para o servidor
•
Diversos controles foram acrescentados em HTML5
Controles
para
enviar os
dados
Botão de submit
Tag
Função
Atributos importantes
<form>
Define um novo formulário
action
define a URL no servidor;
method
define o método HTTP
<input>
Define a criação de um
controle
type
define o controle (text,
submit, radio, checkbox)
<textarea> Controle para entrada de
texto com várias linhas
rows
define quantidade de linhas
e
cols
quantidade de caracteres
<select>
Lista de seleção
size
especifica número de linhas
(padrão é 1 linha)
<options>
Especifica cada opção de
um <select>
Restringe a entrada de texto
apenas a números. Pode-se
definir um mínimo e máximo
Alguns browsers
acrescentam setinhas
“
number
”
espera-se só números!
max e min
restringem valores
Similar a number mas o controle
Variantes do tipo text
Fazem mais diferença quando
exibidos em smartphones
Se não for suportado pelo
browser é exibido um campo
•
A lista de produtos (bebidas e comidas) devem aparecer em uma
tabela com cores alternadas em cada linha
•
Na barra lateral deve haver um campo de formulários que permita
o envio de sugestões para melhoria da lanchonete
•
Use um controle que permite escrever várias linhas e inclua um botão
para enviar os dados
Dados de localização da lanchonete, telefone, etc
NAVEGAÇÃO NO CARDÁPIO (bebidas, comidas, etc)
Produto Preço
Sugestões...
Arquitetura Web e HTTP
HTML e CSS
JavaScript
XML
•
Conseguir interoperar JavaScript com HTML5
•
Conseguir usar JavaScript para executar validações
simples no lado cliente
•
Conseguir usar JavaScript para melhorar a aparência do
front-end no lado cliente
•
Melhorar a estruturação de páginas usando tags específicas como
header, nav, section, footer
•
Facilitar a entrada de dados do usuário com controles específicos
como calendário, máscara de telefone, e-mail, etc
<header>
<aside>
<section
id=“main”>
toda a formatação visual deve ficar por conta de CSS!
<header>
<aside>
<section
id=“main”>
