Desenvolvim

ento Web

Ciclo de palestras de

Introdução à Com

putação

Vítor

E. Silva Souza

(vitor.souza@ufes.br)

http://

ww

w.inf.ufes.br/

~vitorsouza

Departam

ento de Informática

Centro Tecnológico

Universidade Federal do Espírito Santo

Este obra foi licenciada sob uma Licença C

reative Com

mons Atribuição 3.0 N

ão Adaptada.

Oqueéumaap

licaçãoW

eb?

•Umsiste

mad

istribuído;

•Acesso

vianave

gadorW

eb:

–HyperTextTran

sferProtocol(H

TTP);

–HTML,JavaScrip

t,CSS,…

;

–Softw

areclie

ntem

uito

popular(u

bíquito

).

•Sim

ilaràsaplicaçõ

esco

muns(n

ão-W

eb):

–Possu

eminterface

comusuário

,regrasd

enegócio

,dados,e

tc.;

–Podemvariard

eum“H

ello,w

orld

!”atésiste

mas

muito

complexos,m

ilhõesd

eusuário

seLO

Cs.

Julho2014

Desenvolvim

entoW

eb

2

De acordo com

http://ww

w.inform

ationisbeautiful.net/visualizations/million-

lines-of-code/, Facebooktem

aprox. 60 MLO

Cs

(incluindo backend)

Começouco

maW

WW

•Criad

aem1989co

moumsiste

mad

eco

municação

para

oCERN(European

Organ

izationforN

ucle

arResearch

).

Julho2014

Desenvolvim

entoW

eb

3

Requisição H

TTP

Resposta H

TTP

GET /index.html HTTP/1.0

Host: www.site.com

[...]

HTTP/1.1 200 OK

Date: Fri, 15 Apr 2005 22:12:30 GMT

Server: Apache/1.3.26 [...]

Last-Modified: Wed, 23 Mar 2005 00:43:22 GMT

Content-Length: 11379

Content-Type: text/html

[...]

Procura por index.htm

l, adiciona cabeçalhos e devolve.

Aoinvésd

eumarq

uivo

,umprogram

a

Julho2014

Desenvolvim

entoW

eb

4

Requisição H

TTP

Resposta H

TTP

GET /index.cgi HTTP/1.0

Host: www.site.com

[...]

HTTP/1.1 200 OK

Date: Fri, 15 Apr 2005 22:12:30 GMT

Server: Apache/1.3.26 [...]

Last-Modified: Wed, 23 Mar 2005 00:43:22 GMT

Content-Length: 11379

Content-Type: text/html

[...]

1: Roda um

program

a associado com

index.cgi;

2: Programa

retorna conteúdo em

HTM

L;

3: Adiciona cabeçalhos e devolve.

Nasce

,então

,odesenvolvim

entoW

eb

•Desenvolvim

entoW

ebco

nsiste

emescre

verp

rogram

asque:

–Respondemàre

quisiçõ

esu

sandoHTTP;

–Produzemre

sultad

ose

mumalin

guage

mco

mpatíve

lcomumnave

gadorW

eb(n

ãosó

HTML!).

•Muito

scomponentese

nvolvid

os:

–Ose

rvidorW

eb;

–Págin

asWeb,fo

lhasd

eestilo

,scripts,im

agens,e

tc.

–Código

emumalin

guage

mdeprogram

ação;

–APIs,fram

eworkse

bibliotecase

xistentes.

Julho2014

Desenvolvim

entoW

eb

5

Evolução

daste

cnologiasW

eb

•1993:C

GI–

CommonGate

wayIn

terface

–C,C++,

Fortran

,Perl,e

tc.;

•1994:M

acromediaC

oldfusio

n,PHP;

•1995:M

icrosoftA

SP;

•1996:JavaSe

rvlets;

•1999:JavaSe

rverPage

s(JSP

);

•…

•Hoje:ap

licaçõesricas

–AJAX;

–Flash

Actio

nScrip

t;

–HTML5,etc.

Julho2014

Desenvolvim

entoW

eb

6

Evolução

daste

cnologiasW

ebJava

•1995:lan

çamentooficial,n

oco

meçohaviaasA

pplets;

•1996:JavaSe

rvlets;

•1999:JavaSe

rverPage

s(JSP

);

•1999:p

lataform

aJ2EE(1.3em2001,1

.4em2003);

•2000:A

pach

eStru

ts,frameworkM

VCpioneiro

;

•2004:JavaSe

rverFace

s;

•2006:JavaE

E5;

•2009:JavaE

E6;

•2013:JavaE

E7.

Julho2014

Desenvolvim

entoW

eb

7

Demonstração

Julho2014

Desenvolvim

entoW

eb

8

AWebSem

ânticaNovasp

ossib

ilidadesco

mdadosa

berto

sinterliga

dos.

February2

014

WebDevelopmentin

Java-PartI

9

Inundação

dedados

•Novosd

adossão

publicad

osto

doso

sdias;

•Benefício

snoco

nsumodesse

sdados:

–Amazo

n:d

adosd

eprodutosd

isponíve

ispara

terce

iros,crian

doumecossiste

mad

eafiliad

os;

–Google

/Yahoo!:co

nsomemdadosd

evário

ssitese

provêemresultad

osd

ebuscam

elhores;

–ProjetoGenomaH

umano:co

operação

entre

cie

ntistasco

mtro

cadedadosd

epesquisa;

–theyw

orkfo

ryou.co

m:eleito

resd

oReinoUnido

podemavaliaro

desempenhodese

us

representan

tes.

Julho2014

Desenvolvim

entoW

eb

10

Qualé

om

elhorm

eio?

•Quefo

rmad

eace

ssoae

ssesd

adosp

oderiafacilitarao

máxim

oare

utilização

dosm

esm

os?

•Comoperm

itirquenovosd

adosre

levan

tesse

jam

desco

berto

snomeiodetan

tosco

njuntosd

edados?

•Comofaze

rcomqueap

licaçõesin

tegre

mdadosd

e

dife

rentesfo

ntes,até

mesm

oinicialm

ente

desco

nhecid

as?

Julho2014

Desenvolvim

entoW

eb

11

Porq

ueLin

kedData?

•Estru

tura:

–HTMLe

struturate

xto,n

ãodados;

–Masaté

oHTMLe

stáficandomaise

struturad

o...

June2014

LinkedData

12

<!–HTML 4 -->

<html>

<head>

<title></title>

</head>

<body>

<div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

</div>

</body>

</html>

<!–HTML 5 -->

<html>

<head>

<title></title>

</head>

<body>

<header> </header>

<nav> </nav>

<article> <

/article>

<footer> </footer>

</body>

</html>

Porq

ueLin

kedData?

•Apropostan

ãoénova,jáh

aviamalgu

masan

tes:

–Micro

form

atos(m

icroform

ats.org):p

equenos

conjuntosd

edados,co

mexpressivid

adelim

itada;

–APIsWeb(p

rogram

mableweb.co

m):X

ML,JSO

N,

serviço

sREST...N

ãoháp

adronização

,maio

resfo

rço

deintegração

.

•XML,JSO

N,etc.n

ãotê

malgo

queHTMLte

mhám

uito

tempo:hiperlinks!

Julho2014

Desenvolvim

entoW

eb

13

Hum

anos navegam,

softwares “rastejam

”

LinkedOpen

Data(LO

D)

June2014

LinkedData

14

Fonte: http://en.wikipedia.org/w

iki/File:Linked-open-data-Europeana-video.ogv

(Lenta)e

volução

daW

WW

WW

W (S

intática)

Web

Sem

ântica

Docum

entos possuem U

RIs

Coisas (conceitos) possuem

UR

IsH

TTP como m

ecanismo de

acessoU

sa o mesm

o mecanism

o, permitindo

que UR

Issejam

consultadasH

TML com

o formato padrão

(importante

para escalabilidade)R

DF com

o formato

padrão

Links HTM

L conectam

documentos e não possuem

tipoLinks R

DF conectam

qualquer coisa e possuem

tipos (moraEm

e trabalhaEmentre Pessoa e Lugar)

Espaço global de informação

(documentos interconectados)

Espaço global de dados (conceitos interconectados)

June2014

LinkedData

15

Requisição H

TTP

Resposta H

TTP

Conceito

spossu

emURIs

June2014

LinkedData

16

Consumodedadosp

orso

ftware

(1)

June2014

LinkedData

17

GET /people/matt-briggs H

TTP/1.1

Host: biglynx.co.uk

Accept: text/html;q=0.5, application/rdf+xml

1 HTTP/1.1 303 See Other

2 Location: http://biglynx.co.uk/people/matt-briggs.rdf

3 Vary: Accept

Matt Briggs

matt-briggs

matt-briggs.rdf

matt-briggs.htm

l

Consumodedadosp

orso

ftware

(1)

June2014

LinkedData

18

GET /people/matt-briggs.rdf HTTP/1.1

Host: biglynx.co.uk

Accept: text/html;q=0.5, application/rdf+xml

HTTP/1.1 200 OK

Content-Type: a

pplication/rdf+xml

<?xml version="1.0" encoding="UTF-8"?>

<rdf:RDF ...

Matt Briggs

matt-briggs

matt-briggs.rdf

matt-briggs.htm

l

Form

am-se

redesd

edados

June2014

LinkedData

19

Vocab

ulário

ssãocriad

os

•Conjuntodepredicad

os(e

suasU

RIs)p

rontosp

rauso;

•Exemplo:FO

AF(h

ttp://xm

lns.co

m/fo

af/spec/):

–Classe

s:Agent,D

ocument,G

roup,Im

age,La

belProperty,O

nlin

eAcco

unt,

Onlin

eChatAcco

unt,O

nlin

eEcommerce

Acco

unt,O

nlin

eGam

ingA

ccount,

Orga

niza

tion,Person

,Perso

nalProfile

Document,P

roject

–Proprie

dades:a

ccount,a

ccountName,acco

untSe

rviceHomepage,age,

aim

ChatID

,based_near,birth

day,cu

rrentProject,d

epictio

n,depicts,

dnaChecksu

m,fa

milyN

ame,fa

mily_

name,firstN

ame,fo

cus,fu

ndedBy,

geekco

de,ge

nder,give

nName,give

nname,holdsAcco

unt,h

omepage,

icqChatID

,img,in

terest,isP

rimaryT

opicO

f,jabberID

,knows,la

stName,

logo,m

ade,m

aker,m

box,m

box_sha1sum,m

ember,m

embersh

ipClass,

msnChatID

,myersB

riggs,name,nick,o

penid,page,pastP

roject,p

hone,

plan,prim

aryT

opic,p

ublica

tions,sch

oolHomepage

,sha1,skyp

eID,sta

tus,

surname,th

eme,th

umbnail,tip

jar,title

,topic,to

pic_

interest,w

eblog,

workIn

foHomepage,w

orkp

laceHomepage,ya

hooChatID

June2014

LinkedData

20

Efo

rma-se

anuvemdeLO

D

June2014

LinkedData

21

Fonte: http://lod-cloud.net

Aplicações operam

em cim

a desta nuvem

, recuperando dados conforme

necessário.

Exemplosd

evo

cabulário

s/conj.d

ados

Julho2014

Desenvolvim

entoW

eb

22

E muitos outros...

Mecan

ismosd

epesquisae

nave

gadoresLD

June2014

LinkedData

23

Linked Open Vocabularies (LO

V)

Ase

mânticafazd

iferença!

•Pesquisa:q

ueroaU

RLd

esite

s(ex.:b

logs)d

epesso

asqueTimBerners-Le

eco

nhece;

•Resultad

odepesquisasin

tática:

–Umap

áginaso

breTimBerners-Le

e;

–Outrap

áginaso

breTimBerners-Le

e;

–Etc.

•Resultad

odepesquisase

mântica:

–Umre

curso

Perso

np1(d

adoqueTBLkn

owsp1);

–Outro

recurso

p2(TBLkn

owsp2);

–Etc.

Julho2014

Desenvolvim

entoW

eb

24

Mecan

ismosd

ebuscan

ãoficam

paratrás!

•Google

provê“rich

snippets”p

arapesso

as,organ

izações,p

rodutos,e

ventos,m

úsica,e

tc.

June2014

LinkedData

25

Exemplosd

eap

licaçõesLD

•U.S.G

lobalFo

reign

AidM

ashup:http

://data-

gov.tw

.rpi.edu/demo/U

SForeign

Aid/demo-1554.htm

l;

–Combinagasto

snoexte

riord

edife

rentes

departam

entosd

ogo

vernoam

erican

o.

Julho2014

Desenvolvim

entoW

eb

26

Exemplosd

eap

licaçõesLD

•DBPediaMobile(w

iki.dbpedia.o

rg/DBpediaM

obile):

–Ajudam

turistasae

xploraru

macid

ade;

–Mostrain

form

açõesso

brelocaisp

róxim

os;

–Perm

itequeusuário

spubliquemch

eck-in

s,fotose

avaliaçõ

ese

mcim

adese

usd

ados.

Julho2014

Desenvolvim

entoW

eb

27

Exemplosd

eap

licaçõesLD

•Faviki:h

ttp://w

ww.faviki.co

m;

–Bookm

arkingsocial;

–Perm

iteusarco

nceito

sdaW

ikipediacomotags.

Julho2014

Desenvolvim

entoW

eb

28

Exemplosd

eap

licaçõesLD

•Curso

“Desenvolvim

entoW

ebeW

ebSe

mântica”e

m

2014/1–seráre

petid

oem2015/1,2016/1,...;

•Alunosp

roduziram

aplicaçõ

esW

ebco

malgo

daLD

:

–Código

-fonte:http

s://github.co

m/dwws-u

fes/

–Aplicaçõ

es:h

ttp://d

ev.n

emo.inf.u

fes.b

r:8180/dwws/

Julho2014

Desenvolvim

entoW

eb

29

http://nemo.inf.ufes.br/

Julho2014

Desenvolvim

entoW

eb

30