Introdução à programação para a Web
Computação II - Ciência da Computação
Prof.: Danilo S. Carvalho
Nessa aula, começaremos a aprender sobre o mundo do desenvolvimento de sistemas para a Web.
Ao final da aula, vamos entender alguns elementos básicos da Web, como páginas, URLs e requisições.
A World Wide Web (WWW), também conhecida apenas como "a Web", é um sistema de informação onde:
- Recursos como documentos e mídia podem ser acessados através de identificadores públicos chamados Uniform Resource Locators (URLs), através da Internet.
- Documentos podem estar conectados uns aos outros através de hipertexto.
- Os recursos podem ser acessados através de uma aplicação conhecida como "Web browser" (navegador).
A World Wide Web foi criada em 1989 por Tim Berners-Lee e entrou em operação em 1991, tornando-se uma das principais tecnologias usadas na Internet.
Foi um dos pilares da expansão do acesso à rede mundial de computadores, e à rápida aceleração da chamada "era da informação" na sociedade moderna.
A maior parte da informação que acessamos diretamente na Internet é obtida através da Web.
A Web é fundamentada em alguns elementos básicos, sob os quais todas as suas aplicações são construídas:
1. Um protocolo de comunicação, com o qual os dados são transmitidos: Hypertext Transfer Protocol (HTTP).
Funciona em uma estrutura de rede cliente-servidor, onde o computador cliente envia uma mensagem requisitando uma ação por parte do computador servidor e fornecendo dados, que por sua vez responde completando a ação e devolvendo dados de acordo com os dados recebidos.
2. Uma linguagem para representação de documentos, para apresentação e consumo das informações transmitidas: Hypertext Markup Language (HTML).
Permite a criação de documentos flexíveis e interativos, que ligam-se a outros documentos através de hipertexto: texto associado a metadados que acrescentam informações como origem, propósito e formato, e que incluem elementos de multimídia como imagens, sons e vídeo.
3. Um sistema de identificadores globais para os recursos disponibilizados na rede: Universal Resource Identifier (URI), do qual destaca-se o subtipo URL (Uniform Resource Locator).
Identifica um recurso único na rede, indicando sua localização e como deve ser acessado.
A forma básica de uso do protocolo HTTP é o envio de requisições por um computador cliente e de respostas por um computador servidor.
Uma requisição obedece a um formato específico, contendo um verbo de ação, uma URL, cabeçalhos, e opcionalmente dados adicionais, que são utilizados pelo servidor para produzir um recurso relativo à requisição.
Por exemplo, a requisição mostrada abaixo faz o servidor produzir a página desta disciplina como resposta.
Os verbos mais utilizados são o GET (obter recurso) e POST (enviar informações). Ambas resultam em uma resposta do servidor, tipicamente carregando um documento.
A operação das requisições HTTP geralmente fica a cargo do navegador, mas pode também ser feita através de outras aplicações.
Consulte o material de apoio para uma visão geral mais completa do HTTP.
GET /teaching/comp2/PLE/ HTTP/2
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.danilosc.com
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
A linguagem HTML é responsável por definir os documentos da Web, tal que possam ser produzidos e acessados por qualquer navegador compatível, dando o caráter universal e interligado da WWW.
É uma linguagem de marcação, onde cada elemento de um documento é declarado de forma hierárquica usando "tags" para marcar o seu tipo, escopo e conteúdo.
Um documento HTML é composto por:
uma instrução de formato;
um delimitador de documento;
um cabeçalho, onde são declarados os metadados, como codificação de texto, língua, título, entre outros;
e um corpo, onde o conteúdo visível do documento é colocado.
Consulte o tutorial do DevMedia ou o do W3Schools para aprender mais sobre a linguagem HTML.
A linguagem HTML é complementada pela linguagem de folhas de estilo em cascata (Cascading Style Sheets - CSS) que permite separar forma como o documento é apresentado (fontes, cores, posicionamento, etc.) da sua semântica (o significado de cada elemento).
Também é complementada pela linguagem de programação JavaScript (JS) que permite a manipulação dinâmica de documentos, oferecendo maior interatividade ao usuário da Web.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Título do documento</title>
</head>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Título do documento</title>
</head>
<body>
<p id="par1">Um parágrafo</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title<Título do documento</title>
</head>
<body>
<p id="par1">Um parágrafo</p>
</body>
</html>
body {
background-color: #FFFFE6;
}
p {
color: blue;
}
function mostraMensagem() {
alert("Mensagem importante!");
}
document.getElementById("par1").addEventListener("click", mostraMensagem);
Um sistema projetado para funcionar usando a Web consiste de componentes que realizarão a manipulação de documentos HTML e outros recursos em um servidor, em resposta à requisições HTTP.
Precisamos então escrever um programa que fará uso dos recursos do servidor para produzir as respostas adequadas às requisições.
Nesse curso alcançaremos esse objetivo usando recursos da linguagem java: a API Servlet e o Java Server Pages.
Temos agora uma noção elementar do componentes envolvidos na criação de um sistema para a World Wide Web.
Leiam o material de apoio referenciado nos slides anteriores dessa aula e façam os exercícios propostos pelo material de apoio e aqui.
Na próxima aula aprenderemos sobre o endereçamento de recursos e como enviar requisições HTTP usando a API HttpClient.
Perguntas:
- Que dados são tipicamente enviados para um servidor através de um POST HTTP?
- Podemos enviar dados via GET? Como?
- Em que situações estamos usando a Internet mas não estamos usando a Web? Justifique.
Exercício:
- Crie um documento HTML com um parágrafo contendo um link, uma tabela representando as entradas e saídas da operação lógica AND e uma figura de um computador.
Até a próxima aula!