Desenvolvimento de sites web -...

DESENVOLVIMENTO DE SITES WEB

Aquiles Burlamaqui

http://www.natalnet.br/

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


História de Internet

INTERNET

TCP

WWW (World-Wide 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


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.


Aplicação TCP/IP


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


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


Rede

Inter-Rede

Transporte

ClienteWWW

Aplicação

Rede

Inter-Rede

Transporte

ServidorWWW

Aplicação

Inter-Rede

Requisição

Arquitetura WWW


Rede

Inter-Rede

Transporte

ClienteWWW

Aplicação

Rede

Inter-Rede

Transporte

ServidorWWW

Aplicação

Inter-Rede

Reposta

Arquitetura WWW


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


Servidores WWW

Não necessitam ser dedicados

Exemplos

Apache

Internet Information Server (IIS)

Netscape Enterprise Server

NCSA httpd

Jigsaw


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)


Uniform Resource Identifier (URI) Uniform Resouce Identifier (URI)

URL ( Universal Resource Locator )

URN (Universal Resource Name )


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


Exemplos de URI


http://www.natalnet.br/~aquiles

Esquema Parte Especifica do esquema

Exemplos de URI


ftp://ftp.pop-rn.rnp.br/

Esquema Parte Especifica do esquema

URI


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


•http•https•ftp•telnet•file

•ldap•mailto•news•nntp

http://nbn-resolving.de/urn/resolver.pl?urn=urn:nbn:de:bsz:93-opus-15563





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


“http://” host [“:”port] “/” [abs_path [“?” query ]]

URL


Servidor DNS

Servidor de Recursos

Cliente

Rede

http://girafa.natalnet.br/icspace/index.html

URL


Servidor DNS


Cliente

Rede


www.google.com

Host:

URL


Servidor DNS


Cliente

Rede


139.82.95.14Endereço IP:

URL


Servidor DNS


Cliente

Rede


/google/index.html

URL


Servidor DNS


Cliente

Rede


index.html

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


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


Mensagens HTTP/1.1


RedeCliente Servidor

Pedido

GET /index.html HTTP/1.1Host: portela.telemidia.puc-rio.br

Mensagens HTTP/1.1


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


HTML

Standard Generalized Markup Language (SGML)

HyperText Markup Language (HTML)


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)


SGML

Conteúdo:

elementos lógicos estruturados hierarquicamente => Árvore do Documento (Document Tree)

Processamento automatizado do documento

índice, lista de figuras, tabelas


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)


<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


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>


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)


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


HTML

Estrutura básica de um documento HTML

HEAD: informações que descrevem o documento

BODY: conteúdo do documento


<HTML>

<HEAD>

<BODY>

HTML

<HEAD> - cabeçalho do documento

título do documento

metadados do documento (formato nome/valor)

...


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>


HTML


<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


index.htmlpagina.html

HTML

Links:

âncora de origem <A> especifica a URI do destino (atributo HREF):

âncora de destino (ID ou NAME):


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


<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


<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

Frames


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


HTML

FORM:


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

HTML

FORM:


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


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?


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


CSS

Formatação espacial dos elementos (box model)


Esse é um exemplo que ilustracomo um parágrafo (block-level

element) é tratado espacialmente.Left

Botton

Padding

Right

Up

Border

Margin

CSS

Tabelas:


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


<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}


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


@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


CSS

Style sheet externa referenciada no cabeçalho do documento :

através do elemento <LINK>


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


<HTML><HEAD><STYLE type="text/css"></STYLE></HEAD><BODY>...</BODY>

CSS

Diretamente em cada elemento do documento - inline style:

qualquer elemento, exceto <HTML>, pode ter um estilo associado


<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


HTML

Principal vantagem do HTML é simplicidade => SUCESSO

Mas apresenta muitas limitações como uma linguagem para especificação de documentos hipermídia


Javascript


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

Páginas HTML

Páginas Estáticas

HTML

Páginas Dinâmicas

JSP, PHP, ASP, etc...

Todos gerando HTML

Javascript x Java

Javascript x Java

Aplicativos java para a web

JSP ( Java Server Pages)

Executa no servidor

Applet

Executa no cliente


Desenvolvimento Ágil

Rails (Ruby)

Django (Python)

Desenvolvimento Ágil

Grails (Groovy)

Grails

Será que é ágil mesmo?

Vamos ver...

Criação de um simples controle de estoque web

Applet

<HTML>

<HEAD>

<TITLE>Cliente Vrml</TITLE>

</HEAD>

<BODY >

<APPLET code="ClienteVrml.class" width=255 height="555“/>

</BODY>

</HTML>


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


Applet


SandBoxJVM

Recursos do sistema

Aplicação Local

Applet

VRML

Virtual Reality Modeling Language

Baseados em hierarquia de nós.


#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

http://natalnet.dca.ufrn.br/

Tipos de Ambientes

Sites de distribuição de conteúdo

www.youtube.com

Tipos de Ambientes


www.odeo.com

Tipos de Ambientes


www.flickr.com

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

Futuro

DESENVOLVIMENTO DE SITES WEB

Aquiles Burlamaquihttp://aquilesburlamaqui.wikidot.com/[email protected]

http://www.natalnet.br/

http://aquilesburlamaqui.wikidot.com/apresentacoes

http://aquilesburlamaqui.wikidot.com/apresentacoes

mailto:[email protected]

Desenvolvimento de sites web -...

Documents

Transcript of Desenvolvimento de sites web -...