Aula 01 - Introdução a Web

7/23/2019 Aula 01 - Introduo a Web

1/61

Lara Popov Zambiasi Bazzi OberderferProgramao para WEB IProgramao para WEB I 1

Programao para WEB IProgramao para WEB I

Introduo a WEB

Contato: ite: !ttp:""professores.c!apeco.ifsc.edu.br"lara"


2/61

Lara Popov Zambiasi Bazzi Oberderfer

Programao para WEB IProgramao para WEB I #

Introduo

Histrico da Internet Cliente e Servidor Introduo aos protocolos da Internet Objetivos

Contextualizar o desenvolvimento Web

Apresentar uma viso inicial de conceitosque sero teis no decorrer da disciplina


3/61


Programao para WEB IProgramao para WEB I $

!"deo#

Como Funciona a Internet


4/61


Programao para WEB IProgramao para WEB I %

Histrico da Internet

$m %&'( a )nio Sovi*ticalanou ao espao o primeirosat*lite arti+icial da ,erra- oSputinik.

O /overno norte americanoento criou o Advanced0esearc1 2rojects A/enc34A02A5- uma diviso do

6epartamento de 6e+esa paratentar voltar a liderar a corridaespacial.


5/61


Programao para WEB IProgramao para WEB I &

6evido a imin7ncia de uma /uerranuclear e o +ato de os sistemas dede+esa serem extremamente

dependente dos computadores- a redede computadores deveria serextremamente con+i8vel.

9oi dado inicio ao desenvolvimento de

uma rede distribu"da- que no dependiade um computador central.



6/61


Programao para WEB IProgramao para WEB I '


Sur/iu como iniciativa dos militaresamericanos 4Arpanet %&:&5

;anuteno de dados e redes de

comunicao e se/urana em caso deataque 2rojeto em conjunto com )niversidades

e centros de pesquisa 4)C


7/61


Programao para WEB IProgramao para WEB I (

Internet

A02A=$, possibilitava# ,rans+er7ncia de arquivos

Compartil1amento de dispositivos

=ovas redes paralelas independentes+oram criadas 4%&>& ? +im da arpanet5

=ovas redes no se comunicavam entre si

=ecessidade de criar um 20O,OCO


8/61


Programao para WEB IProgramao para WEB I )

Como tudo comeou

,im Berners


9/61


Programao para WEB IProgramao para WEB I *

Navegador Nexus


10/61


Programao para WEB IProgramao para WEB I 1+

Internet no Brasi

%&>' ? Criao do dom"nio .brJ %>&( ? )S2 propKe uma rede de

pesquisa entre v8rias universidades %&&D ? primeira conexo :Lbps de

lon/a distGncia * estabelecida %&&: ? sur/imento dos provedores de

acesso dando in"cio ao crescimento dapopulao na internet


11/61


Programao para WEB IProgramao para WEB I 11

!r"uitetura Ciente # Servidor


12/61


Programao para WEB IProgramao para WEB I 1#

$odeo ciente%servidor

=o modelo clienteservidor- a aplicao est8dividida em duas partes# =o lado do cliente ns temos a tela e a l/ica de

apresentao 4entrada de dados5- e do lado do

servidor a l/ica de inte/ridade e o m*todo deacesso- ou seja- a arquitetura clienteservidoraproveita o que tem de mel1or de cada um- clientee servidor.

=o lado do servidor- um ambiente multiusu8rio- com

administrao de dados centralizada e se/uranaso+isticada. 6o lado do cliente um ambienteindividual- com inter+ace /r8+ica e interativa.

Servidor

Cliente


13/61


Programao para WEB IProgramao para WEB I 1$

Ciente

Computador- terminal ou servio quenecessita de al/uma in+ormao.

=ormalmente a in+ormao est8

armazenada em outra m8quina na rede-denominada de servidor. $xemplo# o nave/ador Web do seu

computador * um cliente e ir8 acessar

servios de diversos servidores pelainternet


14/61


Programao para WEB IProgramao para WEB I 1%

Servidor

Computador dedicado a +ornecer servios quepodem ser requisitados pelos clientes

$xemplo de servios o+erecidos# Arquivos- correio eletrMnico 4email5- banco de

dados- p8/inas Web- etc. Neralmente os servidores so m8quinas mais

potentes e se/uras que as convencionais O termo servidor nomeia tamb*m o pro/rama

que +ornece um determinado servio. $x.#Apac1e- IIS


15/61


Programao para WEB IProgramao para WEB I 1&

&e"uisitando um recurso na We'

Atrav*s de um nave/ador 4broser5 As p8/inas Web so requisitadas

utilizando o protocolo H,,2 4protocolo

simples- de modo a possibilitar a trocade in+ormaKes de uma +orma 8/il


16/61


Programao para WEB IProgramao para WEB I 1'

Protocoos e

Protocoo H((P


17/61


Programao para WEB IProgramao para WEB I 1(

!"deo#

)*+, . /0123.4 10 )56.25.6


18/61


Programao para WEB IProgramao para WEB I 1)

Protocoos da Internet7 8e9inio

Protocoo#

2adro de comunicao que possibilitaa conexo- comunicao e@ou

trans+er7ncia de dados entre doissistemas computacionais. P um idiomacomum- con1ecido pelos sistemasinterli/ados.J


19/61


Programao para WEB IProgramao para WEB I 1*

Protocoos da Internet

,C2@I2# Conjunto de protocolos ,C2- I2- H,,2- 9,2 e outros

2odem ser utilizados para comunicao

de qualquer rede. 2ara esta unidade curricular usaremos

o protocolo H,,2


20/61


Programao para WEB IProgramao para WEB I #+

Protocoo H((P


21/61


Programao para WEB IProgramao para WEB I #1

&e"uisio H((P

Requisio cont*m o endereo dap8/ina@arquivo requisitado.

ex.# 1ttp#@@./oo/le.com.br $ssa requisio * traduzida no +ormato

do protocolo H,,2 Cont*m o camin1o para o servidor e

dados que podem ser teis ao servidor.


22/61


Programao para WEB IProgramao para WEB I ##

&e"uisio H((P

O servidor recebe a requisio edevolve para o cliente 4nave/ador5 oresultado do seu processamento.

2or ex.# uma p8/ina H,;< ou um arquivo 28/ina de erro retornada

Caso o recurso solicitado no exista noservidor

Caso o servidor esteja +ora do ar


23/61


Programao para WEB IProgramao para WEB I #$

Exempo7:ttp7;;


24/61


Programao para WEB IProgramao para WEB I #%

!guns m>todos H((P

?E(# solicita al/um recurso ao servidor-como uma p8/ina Web- uma +i/ura- etc.P o m*todo mais utilizado. ,oda vezque di/itamos um endereo nonave/ador- * enviado um pedido N$,para o recurso solicitado.


25/61


Programao para WEB IProgramao para WEB I #&

!guns m>todos H((P

HE!8# solicita apenas in+ormaKessobre um recurso. Ou seja- retornaapenas os cabealhosH,,2 contendoin+ormaKes sobre o recurso.


26/61


Programao para WEB IProgramao para WEB I #'

!guns m>todos H((P

P@S(# utilizado para enviar in+ormaKespara o servidor. $x.# dados de+ormul8rios- uma nova mensa/em detexto 4titter- blo/-etc5- um dado que ir8atualizar um bando de dados.


27/61


Programao para WEB IProgramao para WEB I #(

Exempo de ?E(A&7 :ttps7;;intranet=i9sc=edu='r;ogon=p:p

!r"uivo "ue ser enviado ao servidor re"uisitando apagina ogon=p:p7

N$,# lo/on.p1p

HOS,# intranet.i+sc.edu.br

)serA/ent# ;ozilla@'.F 4WindosQ )Q Windos =, :.FQ ptB0Q

rv#%.&.E5 NecRo@EF%FF%%' 9ire+ox@D.: 4.=$, C>'&%-ut+>QqTF.(-UQqTF.(


28/61


Programao para WEB IProgramao para WEB I #)

&esposta H((P para a soicitao

H,,2@%.% EFF OL6ate# Sat- F: ;ar EF%F %>#DE#E N;,

Server# Apac1e

2oeredB3# 2H2@'.E.:%lenn3E

$xpires# ,1u- %& =ov %&>% F>#'E#FF N;,Cac1eControl# nostore- nocac1e- must

revalidate- postc1ecRTF- prec1ecRTF

2ra/ma# nocac1e

...

OBS # Aqui v7m o cdi/o H,;< da p8/ina-

que ser8 exibido pelo nave/ador


29/61


Programao para WEB IProgramao para WEB I #*

8esenvovimento para o ciente

O usu8rio 4cliente5 acessa recursosarmazenados no servidor

2ara criar p8/inas Web- o computador

cliente deve ter no m"nimo# =ave/ador eb

$ditor de texto simples

Conexo com a internet


30/61


Programao para WEB IProgramao para WEB I $+

Conceitos

Bsicos


31/61


Programao para WEB IProgramao para WEB I $1

@ "ue > We' designD


32/61


Programao para WEB IProgramao para WEB I $#

@ "ue > We' designD

Web desi/n *- em in/l7s- o nome da artepraticada pelos seres artrpodes da ordemAracneae- ou aracn"deos- mais popularmente

con1ecidos como as aran1as. ;as isto era 18 %F anos atr8s. Hoje- Web desi/n *

a arte de tecer uma outra teia- muito maisdesor/anizada e catica- e que no * /overnadapor nen1uma aran1a. Web desi/n * a concepo

e projeto da inter+ace interativa do servio Web-+ormado por Vp8/inasV.


33/61


Programao para WEB IProgramao para WEB I $$

@ "ue > We' designD

Al/uns anos depois das aran1as- a administrao daWeb cabia pro/ramadores que precisavam codi+icartoda a in+ormao usando uma lin/ua/em# o H,;


34/61


Programao para WEB IProgramao para WEB I $%

@ "ue > We' designD

O desi/n de p8/inas para a Web 1oje seassemel1a mais editorao eletrMnicaque pro/ramao.

Os camin1os do Web desi/n- por*m- sobem di+erentes daqueles se/uidos nacriao para m"dia impressa.

O Web desi/ner deve con1ecer no s

as possibilidades do meio onde publicar8a sua in+ormao- como suas limitaKes.


35/61


Programao para WEB IProgramao para WEB I $&

@ "ue > We' designD

A arte do Web desi/n consiste em aproveitar ao m8ximo osrecursos o+erecidos pela Web- /arantindo a mel1orapresentao- nave/abilidade e interatividade de um Website.

A ideia * atrair os visitantes e estimul8los a voltar outrasvezes. Ys vezes * necess8rio sacri+icar a qualidade daapresentao ou deixar de usar al/um recurso til devido alentido da rede ou incompatibilidades de brosers.

P importante que o Web desi/ner aprenda a traar umalin1a de equil"brio entre os impedimentos tecnol/icos e aspossibilidades criativas desta nova m"dia- para tirar o maiorproveito do seu potencial.


36/61


Programao para WEB IProgramao para WEB I $'

@ "ue > We' designD

O bom Web desi/n comea +ora docomputador.

2lanejar a estrutura da teia e sua identidadecom base nos objetivos que se destina4comercio- in+ormao- promoo- intranet-captura de insetos5 antes de iniciar aimplementao- preserva o conceito por tr8s

do desi/n da inter+ace e diminui a limitaoda tecnolo/ia dispon"vel.


37/61


Programao para WEB IProgramao para WEB I $(

!


38/61


Programao para WEB IProgramao para WEB I $)

!


39/61


Programao para WEB IProgramao para WEB I $*

!


40/61


Programao para WEB IProgramao para WEB I %+

! Word Wide We' e a Internet

A World Wide Web * o nome do mais popular dosservios da Internet. 2or esse motivo- *+req[entemente con+undida com a prpria Internet.;as Web e Internet no so a mesma coisa- eprecisamos con1ecer bem a di+erena entre as

duas antes que possamos comear a desenvolverp8/inas e aplicaKes para a Web. Internet * o nome dado ao conjunto de

computadores- provedores de acesso- sat*lites-cabos e servios que +ormam uma rede mundialbaseada em uma coleo de protocolos decomunicao con1ecidos como ,C2@I2.


41/61


Programao para WEB IProgramao para WEB I %1

Protocoos

P atrav*s de protocolos decomunicao que um computador podese comunicar com outro atrav*s de umalin1a tele+Mnica ou placa de rede sem

que o usu8rio precise se preocupar emsaber qual o meio +"sico que est8 sendoutilizado.


42/61


Programao para WEB IProgramao para WEB I %#

Endereos Internet

)m dos protocolos mais importantes da suite ,C2@I2 *o protocolo de rede I2 ? Internet 2rotocol. $le de+ine a +orma de endereamento que permite a

localizao de um computador na Internet- atrav*s deum conjunto de d"/itos c1amado de endereo I2.

Zualquer m8quina acess"vel atrav*s da Internet temum endereo I2 exclusivo. $sse endereo pode sertempor8rio ou permanente. Zuando voc7 se conecta aum provedor via lin1a tele+Mnica- ele atribui um nmeroI2 tempor8rio sua m8quina que permitir8 que ela

+aa parte da Internet enquanto durar a sua sesso noprovedor.

E d I


43/61


Programao para WEB IProgramao para WEB I %$

Endereos Internet

S assim * poss"vel receber in+ormaKes em umbroser ou enviar email. Computadores que 1ospedam p8/inas Web e que

o+erecem outros servios pela Internet precisam

de um endereo I2 +ixo- para que voc7 possalocaliz8los a qualquer 1ora. 2or exemplo- EFF.ED%.%&%.%F * o endereo I2 da

m8quina onde est8 localizado o servidor Web doIB2I=$, em So 2aulo. !oc7 pode localiz8lo

di/itando 1ttp#@@EFF.ED%.%&%.%F@ no campo deendereos do seu nave/ador.

Servio de Nomes 8NS 8omain


44/61


Programao para WEB IProgramao para WEB I %%

Servio de Nomes 8NS 8omainName ServiceG

$mbora cada computador seja identi+icado de +ormaexclusiva atrav*s de um endereo I2- no * dessa +ormaque costumamos localiz8los na Internet. )m dos servios+undamentais ao +uncionamento da Internet * o servio denomes de dom"nio.

$sse servio * o+erecido por v8rias m8quinas espal1adaspela Internet e que /uardam tabelas que associam o nomede uma m8quina ou de uma rede a um endereo I2.

Zuando voc7 di/ita o nome de uma m8quina no seubroser 4por exemplo- .ibpinet.net5- o broser primeirotenta localiz8la consultando uma outra m8quina 4cujoendereo I2 o broser j8 con1ece5 que o+erece o serviode nomes.

Servio de Nomes 8NS 8omain


45/61


Programao para WEB IProgramao para WEB I %&

Servio de Nomes 8NS 8omainName ServiceG

$ssa m8quina consulta outros servios denomes espal1ados pela Internet e em poucotempo devolve o endereo I2correspondente ao nome solicitado

4.ibpinet.net devolver8 EFF.ED%.%&%.%F5. Se o sistema de nomes +al1ar- o broser

no conse/uir8 o nmero I2 que precisa eassim no localizar8 a m8quina

correspondente 4mesmo que ela no esteja+ora do ar5.

P t i d I t t


46/61


Programao para WEB IProgramao para WEB I %'

Portas e servios da Internet

Os principais servios utilizados na rede eram atrans+er7ncia de arquivos entre computadores4usando aplicaKes que se comunicavamatrav*s do protocolo 9,2 9ile ,rans+er2rotocol5- o correio eletrMnico e a emulao de

terminal- que permitia o acesso a computadoresremotos. $sses servios eram o+erecidos emal/umas m8quinas onde rodavam pro/ramasservidores- permanentemente no ar a/uardandoa conexo de um cliente em uma de suas portasde comunicao.

! pata9orma We'


47/61


Programao para WEB IProgramao para WEB I %(

! pata9orma We'

A World Wide Web * um servio ,C2@I2baseado no protocolo de n"vel deaplicao H,,2 4H3per,ext ,rans+er2rotocol5 ? 2rotocolo de ,rans+er7ncia de

Hipertexto. A plata+orma Web * o meiovirtual +ormado pelos servidores H,,24servidores Web que mant*m sites5-clientes H,,2 4brosers5 e protocolo

H,,2 4a l"n/ua comum entre o cliente e oservidor5.

Hipertexto


48/61



%)

Hipertexto

Hipertexto * uma +orma no linear de publicao dein+ormaKes onde palavras que aparecem nodecorrer do texto podem levar a outras seKes de umdocumento- outros documentos ou at* outros

sistemas de in+ormao- +u/indo da estrutura linearori/inal de um texto simples.

O 1ipertexto baseiase em li/aKes entre dois pontosc1amados de Gncoras. As li/aKes entre as Gncorasso c1amadas de v"nculos 4linRs5. !"nculos de1ipertexto so implementados em textos publicadosna Web usando uma lin/ua/em declarativa c1amadaH,;< H3per,ext ;arRup


49/61



%*

H($

H,;< * usada para marcar um arquivode texto simples 4texto simples * textosem +ormatao al/uma- visualiz8velem qualquer editor de textos5. Se um

arquivo de texto simples receber umaextenso de nome de arquivo .1tmlJ ou.1tmJ- um nave/ador como o Internet$xplorer ir8 tentar interpret8lo comoH,;


50/61


Programao para WEB IProgramao para WEB I&+

Servidor H((P

O servio H,,2 +unciona de +ormasemel1ante ao servio 9,2 9ile,rans+er 2rotocol 4protocolo decomunicao usado na Web para

operaKes de trans+er7ncia dearquivos5.

A&s


51/61


Programao para WEB IProgramao para WEB I&1

A&s

,odas as comunicaKes na plata+orma Webutilizam uma sintaxe de endereamentoc1amada )0I )ni+orm 0esource Identi+ier para localizar os recursos que so trans+eridos.

O servio H,,2 depende da )0I que * usadapara localizar qualquer coisa na Internet.Cont*m duas in+ormaKes essenciais# %5CO;O trans+erir o objeto 4o protocolo5Q E5O=6$ encontr8lo 4o endereo da m8quina e o

camin1o virtual5.

A&s


52/61



A&s

)0Is tipicamente so constitu"das de tr7s partes# mecanismo 4protocolo5 usado para ter acesso aos

recursos 4/eralmente H,,25 nome da m8quina 4precedido de @@ 5 onde o servio

remoto * o+erecido 4e a porta- se o servio no estiver

em uma porta padro5 ou outro nome atrav*s do qual oservio possa ser localizado 4sem @@ 5.

nome do recurso 4arquivo- pro/rama5 na +orma de umcamin1o 4no sistema de arquivos virtual do servidor5onde se possa encontr8lo dentro da m8quina.

Sintaxe t"pica# protocolo#@@maquina#porta@camin1o@recurso

Bro


53/61


Programao para WEB IProgramao para WEB I&$

Bro


54/61


Programao para WEB IProgramao para WEB I &%

(ipos $I$E

;I;$ * uma sintaxe universal paraidenti+icar tipos de dados ori/inalmenteutilizada para permitir o envio dearquivos anexados via email.

O servidor Web possui- internamente-tabelas que relacionam os tipos dedados 4na sintaxe ;I;$5 com a

extenso dos arquivos por ele/erenciados.

(ecnoogias de !presentao


55/61


Programao para WEB IProgramao para WEB I &&


As tecnolo/ias utilizadas na plata+ormaWeb podem ser classi+icadas de acordocom sua +inalidade em tecnolo/ias deapresentao e tecnolo/ias interativas.

As tecnolo/ias de apresentao soaquelas que se destinam unicamente +ormatao e estruturao das p8/inas

Web.



56/61


Programao para WEB IProgramao para WEB I &'


2odem ser usadas tamb*m paraconstruir a inter+ace de aplicaKes Webno broser. Os principais padrKes emuso atualmente so H,;


57/61


Programao para WEB IProgramao para WEB I &(


As tecnolo/ias interativas so as quepermitem o desenvolvimento deaplicaKes e p8/inas com alto n"vel deinteratividade com o usu8rio.

$m /eral consistem da combinao deuma lin/ua/em de pro/ramao comuma arquitetura ou modelo que

possibilita a sua inte/rao com umap8/ina H,;< ou servidor H,,2.



58/61


Programao para WEB IProgramao para WEB I &)


2odem- portanto- executar do lado doservidor 4como CNI- AS2- A6O-Servlets- ISA2I- \S2- 212- Cold 9usione


59/61


Programao para WEB IProgramao para WEB I &*

%. Como +unciona a arquitetura cliente x servidorE. O que * um protocolo] Cite exemplos.D. O que * a requisio H,,2]. O que * N$,- H$A6 e 2OS,- cite exemplos.'. O que * Web desi/n]:. Como se +ormam os endereos na internet# qual protocolo

utiliza e como +unciona](. O que * 6=S]>. O que * Hipertexto]&. O que * um servidor H,,2]%F. O que so )0


60/61


Programao para WEB IProgramao para WEB I '+

Aprendemos um pouco sobre osprotocolos da internet Conceitos b8sicos de internet.

&e9erKncias Bi'iogr9icas


61/61


Programao para WEB IProgramao para WEB I '1

g

;$

cssE'F%F&&:]+romsearc1T%. Acesso em#%F@FE@EF%.

Documents

Aula 01 - Introdução a Web