Introdução às Aplicações para Web · INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Professor: Rhavy...

Preview:

Citation preview

INTRODUÇÃO ÀS

APLICAÇÕES PARA WEB

Professor: Rhavy Maia Guedes

E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com

Material cedido pelo prof. Francisco Dantas Nobre

Neto

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.

Agenda

Sites vs Aplicativos Web

Servidores Web

Endereços IPs e DNS

Páginas Web

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)

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.

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).

Servidores Web

Requisição em alto nível.

Servidores Web

Entendendo a requisição.

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.

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!

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

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

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.

Páginas Web

Não saiu como esperávamos. Por quê?

Faltaram os marcadores HTML

no arquivo aula01_1.html

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>

Páginas Web

Documento ajustado.

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.

Recommended