17
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

Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy Maia Guedes E-mail: [email protected], rhavymg.wordpress.com Material cedido pelo

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.