Conceitos de Programação Web
Programação Java para Web
Prof. Wagner Macedo
HTML 5
Não precisa ser a versão 5, mas é melhor 😄
Revisão de tags
Relembrando as principais tags de HTML.
<p>
Eu sou um parágrafo
Eu sou outro parágrafo
<br>
Serve para
quebras
de linha
Quebras no código HTML não surtem efeito na renderização,
você ainda precisa do <br>
Serve para
quebras
de linha
Tag de hyperlink
<div>
Tag usada para agrupar elementos de bloco para formatá-los com CSS.
Este é um título
Este é um parágrafo.
<span>
Tag usada para agrupar elementos em linha.
Coco verde faz bem!
Elementos de bloco e elementos em linha
Todo elemento HTML tem um parâmetro de exibição padrão, dependendo do tipo de elemento que é.
A exibição padrão para a maioria dos elementos é bloco (block) ou em linha (inline).
Bloco
Um elemento de bloco sempre começa uma nova linha e ocupa toda a largura disponível.
Título, parágrafo e listas são de bloco.
Em linha
Um elemento em linha não começa uma nova linha e só ocupa a largura necessária.
As tags de formatação são em linha.
block / inline
Um elemento <span> em linha dentro de um parágrafo.
Elementos semânticos
HTML 5 adicionou elementos de agrupamento com significado,
de forma a substituir o <div> em diversas situações.
Alguns desses elementos
<header>
<footer>
<nav>
<main>
<section>
<article>
<aside>
<dialog>
<details>
<summary>
<figure>
<figcaption>
Multimídia
Leitura Recomendada 🔖
- Capítulo 1
- Visão geral de HTML 5
- Capítulo 2
- Apresenta as tags semânticas
- Capítulo 3
- Mais sobre <audio> e <video>
Formulários
O elemento <form> define um formulário usado para coletar entradas do usuário.
Aula de Formulários
O formulário é um dos elementos mais importantes da programação web.
Por isso, teremos uma aula dedicada a eles.
Exemplo completo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minha página de teste</title>
<link rel="stylesheet" href="assets/main.css">
<script src="assets/modernizr.js"></script>
</head>
<body>
<h1>Minha página HTML</h1>
<p>Seja bem vindo!</p>
<img src="assets/minha-foto.png">
</body>
</html>
CSS
O estilista da web
Como CSS funciona
Atributo style
Sou um parágrafo azul
Regras CSS
<!-- Arquivo HTML -->
<p id="principal" class="azul">
Sou um parágrafo azul
</p>
/* Arquivo CSS */
#principal {
color: blue;
}
Aprenda mais CSS 🔖
JavaScript
A linguagem de programação da Web
JavaScript não é Java
Não confunda 😉
São linguagens utilizadas na programação web, mas com propósitos completamente diferentes.
Camadas da web
Navegador e o JavaScript
Tempero da web
Quando uma página web faz mais que mostrar informação estática, você pode apostar que o JavaScript provavelmente está envolvido.
🌶Exemplo 1: JavaScript puro
Exemplo 2: jQuery
Aprenda mais 🔖
- JavaScript
- Mozilla Developer Network
- W3Schools
- jQuery
- Manual de jQuery
Como a web funciona
Clientes e Servidores
A web é como uma estrada.
O que acontece quando você digita um endereço no browser?
O servidor web é como um mordomo
Endereço IP e Portas
Portas conhecidas
| HTTP | 80 |
| HTTPS | 443 |
| FTP | 21 |
| SMTP | 25 |
| SSH | 22 |
A Internet e a World Wide Web
Veja mais 🔖
Websites
- Sites Estáticos
- Fornece o conteúdo de arquivos hospedados.
- Não há interação com o cliente.
- Sites Dinâmicos
- Fornece a saída gerada por um programa.
- Sofrem alterações em determinadas condições.
| Estático | Dinâmico |
|---|---|
| O conteúdo, criado previamente, é o mesmo toda vez que a página é carregada. | O conteúdo é gerado "na hora" e muda regularmente. |
| O conteúdo só muda quando alguém atualiza os arquivos hospedados no servidor. | A página contém código no lado servidor, o que permite gerar conteúdo diferente a cada requisição. |
| Código HTML+CSS+JavaScript | PHP, ASP.NET, JSP, Ruby, Java. Pode acessar banco de dados. |
Sites Estáticos
- Vantagens 👍
-
- Fácil de criar
- Hospedagem barata
- Custo baixo
- Desvantagens 👎
-
- Requer desenvolvedor web para atualizar site
- Funcionalidades limitadas
Sites Dinâmicos
- Vantagens 👍
-
- Não requer desenvolvedor para atualizar o site
- Funcionalidades de acordo com a necessidade
- Desvantagens 👎
-
- Difícil de criar
- Hospedagem mais cara
- Custo mais alto
Servidor web estático
Servidor web dinâmico
Lado cliente vs Lado servidor
A programação web acontece em códigos relevantes para o cliente e códigos relevantes para o servidor.
👆 websites dinâmicos- Lado Cliente
-
- HTML+CSS+JavaScript
- O código é executado no navegador
- Acesso ao ambiente do navegador
- Incompatibilidades entre navegadores 😠
- Lado Servidor
-
- Qualquer linguagem pronta para web
- O código é executado no servidor
- Acesso a recursos no servidor e em outros servidores 😁
Frontend vs Backend
Frontend
Backend
HTTP
O protocolo dos navegadores e servidores web
O HTTP é o protocolo de comunicação utilizado pelos navegadores e servidores web. Quando o navegador solicita uma página web é chamado de requisição e quando o servidor web envia a página solicitada de volta é chamado de resposta.
O que é um protocolo de comunicação?
Protocolos não se misturam
Características de HTTP
- 🔁 Requisição-Resposta
- 🖼️ Independente de mídia
- 📨 Sem estado
Equivalência de Nomes
| Português | Inglês |
|---|---|
| Requisição | Request |
| Resposta | Response |
| Método | Method |
| Caminho | Path |
| Cabeçalhos | Headers |
| Conteúdo/Corpo | Content/Body |
| Código de estado | Status code |
A requisição feita pelo cliente
GET /?page_id=220 HTTP/1.1
Host: portal.fanese.edu.br
Esta requisição tem o conteúdo vazio!
A resposta entregue pelo servidor
HTTP/1.1 200 OK
Date: Mon, 31 Jul 2017 21:15:35 GMT
Content-Type: text/html; charset=UTF-8
Server: Apache
<!DOCTYPE html>
<html lang="pt-BR">
…
URI/URL
O identificador de endereços na Internet.
Exemplos de URI/URL
- https://www.facebook.com/zuck
- ftp://ftp.uhserver.com
- tg://resolve?domain=wagnermacedo
- mailto:wagnermacedo@prof.fanese.edu.br
URL HTTP
A requisição HTTP
Métodos de requisição HTTP
| GET |
A requisição mais comum de todas. Usamos para obter um recurso do servidor. |
|---|---|
| POST | Usamos para solicitar alterações no lado servidor. |
| PUT | Substitui o conteúdo de um recurso. |
| DELETE | Remove um recurso especificado. |
| TRACE | Raramente usados por desenvolvedores web |
| OPTIONS | |
| PATCH | |
| CONNECT | |
| HEAD |
Cabeçalhos de requisição importantes
GET /blog/ HTTP/1.1
Host: www.exemplo.com.br
User-Agent: Mozilla/5.0 (Linux x86) Chrome/59.0
Accept: text/html
Accept-Charset: UTF-8
Accept-Language: pt-br
Cookie: Variant=1; Theme=blue;
Referer: http://exemplo.com/index.html
If-Modified-Since: Sat, 07 Aug 2017 21:18:31 GMT
↔️ O nome do servidor desejado
↔️ Uma string que identifica o browser.
↔️ O tipo de conteúdo esperado pelo browser
↔️ A codificação de caracteres esperada
↔️ O idioma esperado pelo browser
↔️ O browser envia os cookies armazenados
↔️ Browser envia site que originou a requisição.
↔️ Faz uma requisição condicional
POST /blog/cadastro.php HTTP/1.1
Host: www.exemplo.com.br
Accept: text/html
Accept-Charset: UTF-8
Accept-Language: pt-br
Content-Type: application/x-www-form-urlencoded
Content-Length: 35
Cookie: Variant=1; Theme=blue;
name=John+Darling&address=Neverland
↔️ O tipo de conteúdo do corpo da requisição
↔️ O tamanho em bytes do corpo da requisição
A resposta HTTP
Códigos de resposta HTTP
Cabeçalhos de resposta importantes
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Lenght: 27855
Set-Cookie: Variant=1; Theme=blue;
Cache-Control: max-age=3600
<!DOCTYPE html>
<html lang="pt-BR">
…
↔️ O tipo de conteúdo do corpo da resposta
↔️ O tamanho em bytes do corpo da resposta
↔️ O servidor envia cookies para o browser armazenar
↔️ O servidor indicando para o cliente fazer cache
HTTP/1.1 301 Moved Permanently
Location: https://www.wikipedia.org/
Content-Type: text/html; charset=iso-8859-1
Content-Length: 234
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
…
↔️ Local para onde o browser deve redirecionar
Negociação de Conteúdo
Entendendo a negociacao de conteúdo via cartasMIME-type
Estrutura geral
tipo/subtipo
Exemplos
text/plain
text/html
text/css
text/javascript
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/octet-stream
Prática HTTP 2
Usando o https://www.hurl.it ou o Postman, faça as seguintes requisições GET e observe as respostas.
- Acesse https://wikipedia.org/
-
Acesse https://speakerfight.com/ usando o cabeçalho
Accept-Language: pt-br- Refaça a requisição com o valor en (de inglês)
- Refaça a requisição com o valor fr (de francês)
-
Acesse http://httpbin.org/image usando o cabeçalho
Accept: image/png- Refaça a requisição com o valor image/jpeg
- Refaça a requisição com o valor image/webp
Leitura recomendada 🔖
Dúvidas?
Este slide pode ser encontrado em:
http://prof.wagnermacedo.com/2017-2/PJW/2