![Page 1: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/1.jpg)
INTRODUÇÃO ÀS
APLICAÇÕES PARA WEB
Professor: Rhavy Maia Guedes
E-mail: [email protected], rhavymg.wordpress.com
Material cedido pelo prof. Francisco Dantas Nobre
Neto
![Page 2: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/2.jpg)
Sites vs Aplicativos Web
Aplicativos Web:
Possui maior interatividade com o usuário:
Recebimento, processamento e devolução da informação.
São leitura e escrita;
Além de apresentar conteúdo, também realiza alguma
tarefa no servidor:
Criação de conta de usuário, pagamento de uma compra.
Além de uma linguagem client side, geralmente,
possui também uma server side:
Java (Servlets/JSP ou JSF), PHP, Python, etc.
![Page 3: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/3.jpg)
Agenda
Sites vs Aplicativos Web
Servidores Web
Endereços IPs e DNS
Páginas Web
![Page 4: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/4.jpg)
Sites vs Aplicativos Web
Client
Side
Requisição HTTP
Resposta HTTP (Página Web, Imagens, JavaScript, etc)
Server
Side
Navegador
(Firefox, Chrome, IE)
Servidor Web
(Apache, IIS)
![Page 5: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/5.jpg)
Servidores Web
As aplicações desenvolvidas para Web devem
estar disponíveis em um computador que tenha um
servidor Web:
Esses computadores podem estar na Internet ou na
Intranet.
![Page 6: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/6.jpg)
Servidores Web
Ao acessar uma página Web, é realizada uma
troca de mensagens entre o cliente (navegador) e o
servidor (Web), através do protocolo HTTP:
Uma requisição HTTP é enviada ao servidor, solicitando
determinado recurso no servidor Web;
Ao responder, o servidor Web envia uma resposta
HTTP, com os recursos solicitados pela requisição.
Alguns exemplos de servidores Web são:
Apache; IIS (Microsoft).
![Page 7: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/7.jpg)
Servidores Web
Requisição em alto nível.
![Page 8: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/8.jpg)
Servidores Web
Entendendo a requisição.
![Page 9: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/9.jpg)
Endereços IPs e DNS
Em uma rede, os dispositivos conectados a ela possuem
um endereço IP:
Dentro de uma organização (Intranet), quem controla a
distribuição é a organização;
Na Internet, os provedores de acesso (ISP) controlam os
endereços IPs.
E, para acessar um servidor Web, você poderá digitar
o IP da máquina que possui o servidor instalado:
Ou digitar o nome do domínio:
www.ifpb.edu.br; www.google.com. O servidor DNS fará a tradução
do nome (domínio) para o
endereço IP.
![Page 10: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/10.jpg)
Páginas Web
Para desenvolver páginas Web, utilizamos a
linguagem HTML:
HyperText Markup Language;
Atualmente, está na versão 5 (HTML 5);
Para disponibilizar seu HTML na Internet, lembre-se,
você deverá ter um computador com um servidor Web
instalado!
O seu arquivo HTML deve ter
extensão .html ou .htm!
![Page 11: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/11.jpg)
Páginas Web
Exemplo de documento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Primeira Página Web</title>
</head>
<body>
<h1>Minha primeira página Web</h1>
<p>Aqui vai um parágrafo...</p>
<img src=“web.gif” />
</body>
</html>
aula01.html
B
A
C
D
A
B
C
D
![Page 12: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/12.jpg)
Páginas Web
Entendendo um documento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Primeira Página Web</title>
</head>
<body>
<h1>Minha primeira página Web</h1>
<p>Aqui vai um parágrafo...</p>
<img src=“web.gif” />
</body>
</html>
B
A
C
D
B
A
C
D
Título da página Web:
aparece na barra de
títulos do seu navegador
Cabeçalho do texto
Parágrafo
Imagem adicionada no documento:
Deve estar na mesma pasta
do arquivo aula01.html
<html>, <head>, <title>, <body>,
<h1>, <p>, <img> são os
Marcadores (ou Tags) HTML!
aula01.html
![Page 13: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/13.jpg)
Páginas Web
O que acontece se salvarmos o arquivo abaixo
como aula01_1.html, e abri-lo no navegador?
Sobre HTML e JavaScript
HTML (abreviação para a expressão inglesa HyperText Markup Language,
que significa Linguagem de Marcação de Hipertexto) é uma linguagem de
marcação utilizada para produzir páginas na Web.
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de
folhas de estilo utilizada para definir a apresentação de documentos
escritos em uma linguagem de marcação, como HTML ou XML. Seu
principal benefício é prover a separação entre o formato e o conteúdo de
um documento.
JavaScript é uma linguagem de programação interpretada. Foi
originalmente implementada como parte dos navegadores web para
que scripts pudessem ser executados do lado do cliente.
![Page 14: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/14.jpg)
Páginas Web
Não saiu como esperávamos. Por quê?
Faltaram os marcadores HTML
no arquivo aula01_1.html
![Page 15: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/15.jpg)
Páginas Web
Adição de marcadores HTML.
<!DOCTYPE html>
<html><head><title>Página alterada</title></head>
<body>
<h1>Sobre HTML e JavaScript</h1>
<p>HTML (abreviação para a expressão inglesa HyperText Markup
Language, que significa Linguagem de Marcação de Hipertexto) é
uma linguagem de marcação utilizada para produzir páginas na Web.</p>
<p>Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de
folhas de estilo utilizada para definir a apresentação de documentos
escritos em uma linguagem de marcação, como HTML ou XML. Seu
principal benefício é prover a separação entre o formato e o conteúdo de
um documento.</p>
<p>JavaScript é uma linguagem de programação interpretada. Foi
originalmente implementada como parte dos navegadores web para
que scripts pudessem ser executados do lado do cliente.</p>
</body></html>
![Page 16: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/16.jpg)
Páginas Web
Documento ajustado.
![Page 17: Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Material cedido pelo](https://reader034.vdocuments.net/reader034/viewer/2022051107/5bffa52709d3f2e3758c6f43/html5/thumbnails/17.jpg)
Referências
Apostila da K19. Desenvolvimento Web com HTML, CSS e
JavaScript. Disponível gratuitamente em
http://www.k19.com.br/downloads/apostilas/basica/k19-k02-
desenvolvimento-web-com-html-css-e-javascript.
Elisabeth Robson; Eric Freeman. Head First HTML and CSS!.
O’reilly.2012.