INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Material cedido pelo prof. Francisco Dantas Nobre Neto Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com
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 Navegador (Firefox, Chrome, IE) Requisição HTTP Servidor Web (Apache, IIS) Client Side Resposta HTTP (Página Web, Imagens, JavaScript, etc) Server Side
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. aula01.html A <!DOCTYPE html> <html> <head> A <title>primeira Página Web</title> </head> <body> B <h1>minha primeira página Web</h1> C <p>aqui vai um parágrafo...</p> D <img src= web.gif /> </body> </html> D C B
Páginas Web Entendendo um documento HTML. <!DOCTYPE html> <html> <head> A <title>primeira Página Web</title> </head> <body> B C D <h1>minha primeira página Web</h1> <p>aqui vai um parágrafo...</p> <img src= web.gif /> </body> </html> aula01.html A B C D Título da página Web: aparece na barra de títulos do seu navegador Cabeçalho do texto Parágrafo <html>, <head>, <title>, <body>, <h1>, <p>, <img> são os Marcadores (ou Tags) HTML! Imagem adicionada no documento: Deve estar na mesma pasta do arquivo 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.