Upload
vuongnguyet
View
215
Download
0
Embed Size (px)
Citation preview
Roteiro
Teoria:
Fundamentos
História da Internet
World Wide Web
Conceitos Básicos
Tecnologias (Html, CSS, XML, SGML, Applet, Flash, VRML, Grails, etc).
Web 2.0
Futuro
Técnicas de Programação para WEB
História de Internet
ARPANET ( Departamento de Defesa dos EUA )
NCP (Network Control Protocol)
Computadores
13 em janeiro de 1971
23 em abril de 1972
38 em janeiro de 1973
> 400 milhões hoje
Técnicas de Programação para WEB
World Wide Web
Algumas Definições:
“a interface gráfica da Internet “
“Sistema de hipertexto global que utiliza a internet como mecanismo de transporte”
W3C – World Wide Web Consortium
Técnicas de Programação para WEB
World Wide Web
Aplicação TCP/IP
Mecanismos do WWW Um protocolo de transmissão de dados – HTTP.
Um sistema de endereçamento próprio – URI.
Uma linguagem de marcação, para transmitir documentos formatados através da rede - HTML.
Técnicas de Programação para WEB
Aplicação TCP/IP
Técnicas de Programação para WEB
Intra-Rede
Interface de Rede
Inter-Rede
Transporte
Aplicação
WWW
•Aplicação TCP/IP
•Utiliza o serviço confiável dacamada de transporte (TCP)
•Aplicação baseada no paradigmacliente/servidor
Paradigma Cliente/Servidor
Técnicas de Programação para WEB
RedeCliente
• O termo servidor se aplica a qualquer programa
que oferece um serviço que pode ser alcançado
através da rede.
• Um programa em execução torna-se um cliente
quando envia uma requisição a um servidor e
aguarda por uma resposta.
Servidor
Pedido
Resposta
Arquitetura WWW
Técnicas de Programação para WEB
Rede
Inter-Rede
Transporte
ClienteWWW
Aplicação
Rede
Inter-Rede
Transporte
ServidorWWW
Aplicação
Inter-Rede
Requisição
Arquitetura WWW
Técnicas de Programação para WEB
Rede
Inter-Rede
Transporte
ClienteWWW
Aplicação
Rede
Inter-Rede
Transporte
ServidorWWW
Aplicação
Inter-Rede
Reposta
Arquitetura WWW
Técnicas de Programação para WEB
Rede
Inter-Rede
Transporte
ClienteWWW
Aplicação
Rede
Inter-Rede
Transporte
ServidorWWW
Aplicação
Inter-Rede
HTTP
TCP
IP
Clientes WWW
Browsers (navegadores) exibem e permitem a navegação através de
documentos Exemplos: Opera Chrome Internet Explorer Mozila Firefox Lynx
Máquinas de Busca Qualquer programa utilizando os serviços
oferecidos por um servidor Web
Técnicas de Programação para WEB
Servidores WWW
Não necessitam ser dedicados
Exemplos
Apache
Internet Information Server (IIS)
Netscape Enterprise Server
NCSA httpd
Jigsaw
Técnicas de Programação para WEB
Conceitos Básicos na Web
Como identificar os recursos (documentos)?
URI (Uniform Resource Identifier)
Como recuperar um documento?
HTTP (HyperText Transfer Protocol)
Como definir o formato do conteúdo dos documentos?
HTML (HyperText Markup Language)
Técnicas de Programação para WEB
Conceitos Básicos na Web
Como identificar os recursos (documentos)?
URI (Uniform Resource Identifier)
Como recuperar um documento?
HTTP (HyperText Transfer Protocol)
Como definir o formato do conteúdo dos documentos?
HTML (HyperText Markup Language)
Técnicas de Programação para WEB
Uniform Resource Identifier (URI) Uniform Resouce Identifier (URI)
URL ( Universal Resource Locator )
URN (Universal Resource Name )
Técnicas de Programação para WEB
Uniform Resource Identifier (URI) Definição sintática
RFC 1630
Separação em duas partes
URI = scheme “:” scheme-specific-part
Definição semântica
dependente de cada esquema em particular
Técnicas de Programação para WEB
Exemplos de URI
Técnicas de Programação para WEB
http://www.natalnet.br/~aquiles
Esquema Parte Especifica do esquema
Exemplos de URI
Técnicas de Programação para WEB
ftp://ftp.pop-rn.rnp.br/
Esquema Parte Especifica do esquema
URI
Técnicas de Programação para WEB
URI
URNURL
Esquema A
Esquema B
Esquema C
Esquema X
Esquema Y
Esquema Z
URI
Principais esquemas de URL registrados:
Exemplo de URN
urn:nbn:de:bsz:93-opus-1556
Técnicas de Programação para WEB
•http•https•ftp•telnet•file
•ldap•mailto•news•nntp
URL para esquema HTTP
Sintaxe
Exemplos de URL (esquema HTTP)
http://www.ect.ufrn.br
http://www.altavista.com/cgibin/query?q=client%2Fserver
http://139.82.95.14/index.html
Técnicas de Programação para WEB
“http://” host [“:”port] “/” [abs_path [“?” query ]]
URL
Técnicas de Programação para WEB
Servidor DNS
Servidor de Recursos
Cliente
Rede
http://girafa.natalnet.br/icspace/index.html
URL
Técnicas de Programação para WEB
Servidor DNS
Servidor de Recursos
Cliente
Rede
http://girafa.natalnet.br/icspace/index.html
www.google.com
Host:
URL
Técnicas de Programação para WEB
Servidor DNS
Servidor de Recursos
Cliente
Rede
http://girafa.natalnet.br/icspace/index.html
139.82.95.14Endereço IP:
URL
Técnicas de Programação para WEB
Servidor DNS
Servidor de Recursos
Cliente
Rede
http://girafa.natalnet.br/icspace/index.html
/google/index.html
URL
Técnicas de Programação para WEB
Servidor DNS
Servidor de Recursos
Cliente
Rede
http://girafa.natalnet.br/icspace/index.html
index.html
Conceitos Básicos na Web
Como identificar os recursos (documentos)?
URI (Uniform Resource Identifier)
Como recuperar um documento?
HTTP (HyperText Transfer Protocol)
Como definir o formato do conteúdo dos documentos?
HTML (HyperText Markup Language)
Técnicas de Programação para WEB
HTTP
HyperText Transfer Protocol Objetivo original
capacidade de recuperar de um servidor, documentos simples baseados na mídia texto
protocolo leve e rápido
Baseado em um modelo simples de arquitetura cliente-servidor pedido/resposta protocolo sem estado
Utiliza um serviço de transporte confiável, orientado a conexão (TCP)
Protocolo mais utilizado na Internet, na atualidade
Versões: HTTP/0.9, HTTP/1.0 e HTTP/1.1
Técnicas de Programação para WEB
HTTP/1.1
Definido em janeiro de 1997 (RFC 2068, RFC 2616)
Melhora no modelo de uma conexão por requisição/resposta
HTTP persistente (P-HTTP)
manter uma conexão aberta durante várias requisições para um mesmo servidor
Técnicas de Programação para WEB
Mensagens HTTP/1.1
Técnicas de Programação para WEB
RedeCliente Servidor
Pedido
GET /index.html HTTP/1.1Host: portela.telemidia.puc-rio.br
Mensagens HTTP/1.1
Técnicas de Programação para WEB
Cliente Servidor
Resposta
HTTP/1.1 200 OKDate: Thu, 18 May 2000 18:41:46 GMTServer: Apache/1.3.9 (Unix) (Red Hat/Linux)Last-Modified: Tue, 21 Sep 1999 14:46:36 GMTEtag: “31282-799-37e79a4c”Accept-Ranges: bytesContent-Length: 1945Content-Type: text/html<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2Final//EN”><HTML>…</HTML>
Rede
Mensagens HTTP/1.1
Métodos de requisição
GET, POST, HEAD ...
Códigos de retorno (3 dígitos)
divididos em categorias em função do primeiro dígito 1xx (informativo)
2xx (sucesso)
3xx (redireção)
4xx (erro do cliente)
5xx (erro do servidor)
podem ser estendidos
Técnicas de Programação para WEB
Conceitos Básicos na Web
Como identificar os recursos (documentos)?
URI (Uniform Resource Identifier)
Como recuperar um documento?
HTTP (HyperText Transfer Protocol)
Como definir o formato do conteúdo dos documentos?
HTML (HyperText Markup Language)
Técnicas de Programação para WEB
HTML
Standard Generalized Markup Language (SGML)
HyperText Markup Language (HTML)
Técnicas de Programação para WEB
SGML
Standard Generalized Markup Language
ISO 8879 definido em 1986
Conceitos básicos: separação entre conteúdo e apresentação de
documentos conteúdo estruturado logicamente
informação específica à apresentação
objetivo principal do SGML é estruturar a informação, lidando com conteúdo e estrutura
apresentação é feita usando outros mecanismos (stylesheets)
Técnicas de Programação para WEB
SGML
Conteúdo:
elementos lógicos estruturados hierarquicamente => Árvore do Documento (Document Tree)
Processamento automatizado do documento
índice, lista de figuras, tabelas
Técnicas de Programação para WEB
SGML
Como representar o conteúdo estruturado, de tal forma a identificar o que é estrutura e o que é conteúdo do documento?
Marcação (markup): informação sobre o conteúdo do documento que está embutida no conteúdo identificada por algum caracter especial (ou seqüência de caracteres)
A informação estrutural é definida em termos de elementos que têm nomes únicos (capítulo, seção, ...)
delimitados através de tags de início e fim (start/end tags)
Técnicas de Programação para WEB
<chapter><heading>Standard Generalized Markup Language</heading><paragraph>SGML é um padrão ISO ...</paragraph>
</chapter>
SGML
Classe de documentos especificada através de uma DTD - Document Type Definition
os elementos de uma classe de documentos e seus atributos
as regras para combinar esses elementos, especificando o conteúdo permitido para cada elemento
Técnicas de Programação para WEB
SGML
<!ELEMENT book (author, heading, chapter+)>
<!ELEMENT chapter (heading, (paragraph|figure), section)>
<!ELEMENT section (heading, (paragraph|figure))>
<!ELEMENT (author|heading) (#PCDATA)>
<!ELEMENT paragraph ((#PCDATA|reference))>
<!ELEMENT reference EMPTY>
Técnicas de Programação para WEB
Exemplo de DTD de um livro:
<book>
<autor> <heading>
<heading> <paragraph>
<chapter>
<section>
<heading> <paragraph> <paragraph> <figure>
HTML
HyperText Markup Language
HTML 2.0, HTML 3.2, HTML 4.0, HTML 4.01
Objetivos do projeto do HTML: riqueza: deve ser poderoso para suportar um número
grande de aplicações
simplicidade: deve ser simples para um usuário não-expert entender seus conceitos e criar páginas HTML
acessibilidade e independência de plataforma: deve focar em conteúdo e não em apresentação
especificado em SGML (Declaração SGML e DTD específicas)
Técnicas de Programação para WEB
HTML
Apesar do HTML focar em conteúdo, as primeiras versões do HTML tinham elementos e atributos para especificar a apresentação do documento
itálico - <I>
sublinhado - <U>
negrito - <B>
tamanhos e cores das fontes - <FONT>…
a partir da versão 4.0, seu uso foi desaconselhado (deprecated), devendo ser substituídos por style sheets
Técnicas de Programação para WEB
HTML
Estrutura básica de um documento HTML
HEAD: informações que descrevem o documento
BODY: conteúdo do documento
Técnicas de Programação para WEB
<HTML>
<HEAD>
<BODY>
HTML
<HEAD> - cabeçalho do documento
título do documento
metadados do documento (formato nome/valor)
...
Técnicas de Programação para WEB
HTML
<BODY> - corpo do documento
texto estruturado
listas
tabelas
links
imagens
formulários
frames Se o documento contiver frames, <BODY> deve ser substituído
por <FRAMESET>
Técnicas de Programação para WEB
HTML
Técnicas de Programação para WEB
<HTML><HEAD><TITLE>Exemplo</TITLE></HEAD><BODY><H1>Exemplo de texto HTML</H1><P>Este é um exemplo de textoHTML.</P><P>Serve para ilustrar como as<EM>marcações</EM> são utilizadas.</P></BODY></HTML>
HTML
Links:
relacionamento entre uma única origem e um único destino
especificado embutido no conteúdo do recurso origem
Técnicas de Programação para WEB
index.htmlpagina.html
HTML
Links:
âncora de origem <A> especifica a URI do destino (atributo HREF):
âncora de destino (ID ou NAME):
Técnicas de Programação para WEB
... the <A HREF=“index.html”>index</A> can be found ...
... the <A HREF=“#copyright”>copyright notice</A> contains ...
<P><A NAME=“copyright”></A>The copyright of the ...<P ID=“copyright”>The copyright of the ...
HTML
Frames: permitem construir páginas que agregam vários documentos em uma janela
Técnicas de Programação para WEB
<html><head><title>Utilizando Frames</title></head>
<frameset cols="80,*" frameborder="NO" border="0" framespacing="0"><frame src="frame1.html" name="leftFrame" scrolling="YES" ><frame src="frame2.html" name="mainFrame">
</frameset>
<noframes><body></body>
</noframes></html>
HTML
Frames
Técnicas de Programação para WEB
<HTML><HEAD><TITLE>Frame 1</TITLE></HEAD><BODY><H1>FRAME 1</H1><P>Este é um exemplo de texto HTML.</P><P>eaqraeqtraerqtaeqraetrqaeqtraetrq.</P></BODY></HTML>
<HTML><HEAD><TITLE>Frame 2</TITLE></HEAD><BODY><H1>FRAME 2</H1><P>Este é um exemplo de texto HTML.</P><P>iuoieruoiewruoiewruewoiruweoiruwo.</P></BODY></HTML>
frame1.html frame2.html
HTML
<FORM> - possibilita a definição de formulário em páginas HTML, onde o usuário pode informar dados a serem submetidos a um servidor
Técnicas de Programação para WEB
HTML
FORM:
Técnicas de Programação para WEB
<HTML><HEAD><TITLE>Form</TITLE></HEAD><BODY><FORM action="http://somesite.com/prog/adduser"method="post"><P><LABEL for="firstname">First name: </LABEL><INPUT type="text" id="firstname"><BR><LABEL for="lastname">Last name: </LABEL><INPUT type="text" id="lastname"><BR><LABEL for="email">email: </LABEL><INPUT type="text" id="email"><BR><INPUT type="radio" name="sex" value="Male">Male<BR><INPUT type="radio" name="sex" value="Female">Female<BR><INPUT type="submit" value="Send"><INPUT type="reset"></P></FORM></BODY></HTML>
Style Sheets
Especificação do conteúdo estruturado logicamente SGML
HTML
Especificação sobre a apresentação do documento linguagens para especificação de style sheets DSSSL - Document Style Semantics and Specification Language
para SGML
CSS - Cascading Style Sheets para HTML
XSL - Extensible Style Language para XML
Técnicas de Programação para WEB
CSS
Cascading Style Sheets
Histórico
CSS1 - Cascading Style Sheets, level 1 -Recomendação W3C em dezembro de 1996
CSS2 - Cascading Style Sheets, level 2 -Recomendação W3C em maio de 1998
O que pode-se especificar com style sheets?
Técnicas de Programação para WEB
CSS
Informações sobre a apresentação do documento
• color
• background
color, image, repeat, attachment, position
• font
family, size, size-adjust, style, variant, weight, stretch, height
• text
vertical-align, text-align, text-decoration, text-indent, texttransform, word-spacing, letter-spacing, white-space, textshadow
• list-style
type, position, image
Técnicas de Programação para WEB
CSS
Formatação espacial dos elementos (box model)
Técnicas de Programação para WEB
Esse é um exemplo que ilustracomo um parágrafo (block-level
element) é tratado espacialmente.Left
Botton
Padding
Right
Up
Border
Margin
CSS
Por que usar style sheets? Especificar diferentes apresentações para um único documento Possibilitar uma aparência consistente para um conjunto de
documentos (site) HTML não foi projetado para especificar formatação, mas sim
conteúdo
se especificar apresentação junto com a conteúdo, tem que repetir a especificação várias vezes, o que dificulta a manutenção
se especificar apresentação em uma style sheet, é muito mais fácil fazer modificações que são refletidas em vários documentos
HTML não oferece suporte suficiente para controlar a apresentação ex.: espaçamento entre linhas, sombreado nas fontes, ...
Técnicas de Programação para WEB
<H1>A heading</H1>
<H1><FONT COLOR="yellow" FACE="Helvetica">A heading</FONT></H1>
H1 {font-family:Arial; color: green} H1 {color: red; background: blue}
CSS
Como especificar um estilo?
grupo de declarações: “propriedade1:valor1;propriedade2:valor2”
Ex.: color: red; font-size: 16px
associados a elementos HTML
Ex.: P{color: red; font-size: 16px}
Técnicas de Programação para WEB
CSS
Style sheets podem especificar como um documento será apresentado em diferentes dispositivos
em um monitor (screen), em papel (print), com um sintetizador de voz (aural), com um dispositivo braille (braille, embossed), all, handeld, projection, tty, tv
Técnicas de Programação para WEB
@import url(“loudvoice.css”) aural@media print {/* style sheet for print goes here */}@media screen {/* style sheet for screen goes here */}
CSS
Como associar uma style sheet ao conteúdo de um documento HTML?
em uma style sheet externa referenciada no cabeçalho do documento
em uma style sheet embutida no cabeçalho do documento
diretamente em cada elemento do documento
Técnicas de Programação para WEB
CSS
Style sheet externa referenciada no cabeçalho do documento :
através do elemento <LINK>
Técnicas de Programação para WEB
<HTML><HEAD><LINK rel="stylesheet" type="text/css" href="fluorescent.css"></HEAD><BODY>...</BODY></HTML>
BODY { color: black;font-family: Geneva, Helvetica, Arial, sans-serif;background-color: white}H1 { color:blue}
DocumentoHTML
Style Sheet
CSS
Style sheet embutida no cabeçalho do documento
através do elemento <STYLE>
Técnicas de Programação para WEB
<HTML><HEAD><STYLE type="text/css"><!--BODY {color: red}H1 {color: black}
--></STYLE></HEAD><BODY>...</BODY>
CSS
Diretamente em cada elemento do documento - inline style:
qualquer elemento, exceto <HTML>, pode ter um estilo associado
Técnicas de Programação para WEB
<P style="color: green">Este é um parágrafo.</P>
CSS
Versões atuais dos browsers suportam style sheets:
Firefox
Internet Explorer
Opera
Safari
...
nenhum deles suporta a especificação completa corretamente
Técnicas de Programação para WEB
HTML
Principal vantagem do HTML é simplicidade => SUCESSO
Mas apresenta muitas limitações como uma linguagem para especificação de documentos hipermídia
Técnicas de Programação para WEB
Javascript
Técnicas de Programação para WEB
<script language="javascript" type="">function fechar(){
document.getElementById('popup').style.display = 'none';}function abrir() {
document.getElementById('popup').style.display = 'block';setTimeout ("fechar()", 3000);
}</script>---<br /> <a href="javascript: abrir();">Abrir POPUP</a><br /> <a href="javascript: fechar();">Fechar POPUP</a>
Javascript x Java
Javascript x Java
Aplicativos java para a web
JSP ( Java Server Pages)
Executa no servidor
Applet
Executa no cliente
Técnicas de Programação para WEB
Applet
<HTML>
<HEAD>
<TITLE>Cliente Vrml</TITLE>
</HEAD>
<BODY >
<APPLET code="ClienteVrml.class" width=255 height="555“/>
</BODY>
</HTML>
Técnicas de Programação para WEB
Exemplo de um Applet incluso no HTML
Applet
Applets, por segurança, não tem a permissão de:
Ler/Escrever/apagar/adquirir arquivos do cliente.
Ler propriedades do sistema
Conectar a uma porta do cliente
Conectar a uma porta que não seja o host de origem
Carregar uma dll / ou executar um script
Etc...
Técnicas de Programação para WEB
VRML
Virtual Reality Modeling Language
Baseados em hierarquia de nós.
Técnicas de Programação para WEB
#VRML V2.0 utf8DEF FBOX Shape {
appearance Appearance {material Material { }
} geometry Box { }
}
Tipos de Ambientes
Chats / Instant Messengers
Texto
IRC
Bate papo UOL
Etc...
Voz Skype
Team Speak
Google Talk
Windows Live Messenger
Etc…
Video Skype
Windows Live Messenger
Etc…
Tipos de Ambientes
Sites de Relacionamentos Orkut Facebook 1Grau 8P Beltrano Clubão Digg EbaH Gazzag Hi5 Mingle Mixi MySpace Wallop
http://pt.wikipedia.org/wiki/Lista_de_redes_sociais
Tipos de Ambientes
Wiki
Páginas Wiki, são páginas web dinâmicas onde você pode editá-la de uma maneira colaborativa.
Exemplo de wiki free
http://www.wikispaces.com/
http://www.wikidot.com/
http://pbwiki.com/
http://www.wetpaint.com/
http://www.wikia.com
http://www.splitbrain.org/projects/dokuwiki
DESENVOLVIMENTO DE SITES WEB
Aquiles Burlamaquihttp://aquilesburlamaqui.wikidot.com/[email protected]
http://www.natalnet.br/