Sistemas Web

Prof.: Cssio Prazeres

(prazeres@dcc.ufba.br)
A WEB
Introduo
Hipermdia???
.... Mdia ?
Hiper.... ? Hiper.... ?
Multimdia??
2
Organizao das informaes
humanas
a mente humana organiza informaes de
maneira associativa... formando uma rede!
o fato de as pessoas se recordarem de algumas
informaes a partir de uma informao inicial informaes a partir de uma informao inicial
pode ser representado pelo percurso das ligaes
entre essas pores de informao armazenadas
nessa rede mental de conhecimento.
o que ocorre com a escrita que a informao
sofre uma linearizao para se tornar texto.
3
Terminologia
N Hipertexto a tecnologia que habilita intrinsecamente a
leitura no-seqencial, em contraste com a forma de leitura
seqencial disponvel nos livros-texto. (Nielsen)
Hipertexto consiste de pedaos de informao (ns)
4
Hipertexto consiste de pedaos de informao (ns)
interconectados pelos links
Sistemas hipertexto/hipermdia pr-Web
Hipertexto
Pedaos de textos conectados por ligaes (links)
que oferecem diferentes percursos ao leitor (Nelson,
1965)
5
Hipermdia
Inclui outros tipos de mdia: grficos, imagens, vdeos,
udios, etc.
Hiperdocumento
Base da tecnologia - rede de informaes que possui
interconexes que devem estar facilmente acessveis
pelos usurios.
Abriu novas fronteiras para o processamento de
6
Abriu novas fronteiras para o processamento de
Sistemas de Informao
Sistemas hipertexto possibilitam uma nova forma de
pensar, organizar e comunicar, habilitada
tecnologicamente
Pioneiros:
Bush (1945-memex): memoria associativa
A memex is a device in which an individual stores all his
books, records, and communications, and which is mechanized so that it
may be consulted with exceeding speed and flexibility. It is an enlarged
intimate supplement to his memory.
Sistemas Hipertexto clssicos da
literatura
7
intimate supplement to his memory.
It consists of a desk, and while it can presumably be operated
from a distance, it is primarily the piece of furniture at which he works.
On the top are slanting translucent screens, on which material can be
projected for convenient reading. There is a keyboard, and sets of buttons
and levers. Otherwise it looks like an ordinary desk.
Vannevar Bush; As We May Think; Atlantic Monthly; July 1945
Sistemas Hipertexto clssicos da
literatura
Pioneiros:
Engelbart (1968): NLS (oN Line System)
Primeiro sistema hipertexto funcional.
8
Pesquisa de artigos com referncia cruzada - distribudo.
Nelson (1965...web): Xanadu
Xanadu is supposed to provide a universal library, collaborative
editing, the ability to trace the changes in documents through
successive versions, a means to track and credit authorship, a royalty
system, and nonsequential writing.
Sistemas Hipertexto clssicos da
literatura
Sistemas de Segunda Gerao
Final 80-inicio 90
Apple: Hypercard "linear", simplicidade p/ qualquer
usurio, $, programvel, multmidia
CMU: KMS rede de computadores, hierarquico, n misto,
9
CMU: KMS rede de computadores, hierarquico, n misto,
$$$$$
Xerox: Notecards Aninhamento (floresta em grafos), LISP,
$$$,
Brown Univ: Intermedia, OO (extensibilidade)
Kent Univ: Guide, markup
Sistemas Hipertexto clssicos da
literatura
Problemas Bsicos
Intercmbio!
Lost in the hyperspace!
Autoria
10
Autoria
Problemas para a 3a. gerao:
Buscas, Composies, Estruturas virtuais, Computao,
Verses, CSCW, Personalizao/Extensibilidade
Arquitetura tpica de Hipertexto
11
Processos tpicos de sistema
Hipertexto
autoria autoria
escrita
12
Hiperdocumento Hiperdocumento
navegao navegao
apresentao apresentao
leitura
Autoria
processo de criao do hiperdocumento
*autoria em ponto pequeno
edio dos contedos dos ns
definio dos links
13
*autoria em ponto grande
lida com as informaes imprecisas, que caracterizam o
tipo do hiperdocumento de acordo com os diferentes
tipos de aplicao e diferentes leitores.
Apresentao
O nova modalidade de interface com o usurio : os
contedos dos ns e o resultado do acionamento do link
devem ser claramente exibidos.
frames
scrolling
14
scrolling
mltiplas janelas
hbridos
Navegao
^ mtodo de acesso base de ns (rede de informaes) atravs da
nova modalidade de interface.
^ possibilita ao leitor saltar para uma informao considerada
relevante por ele;
15
^ os links so as opes de interao que o leitor pode escolher
durante a apresentao do contedo do hiperdocumento.
Mquina Abstrata de Hipertexto
hypertext engine
responsvel pela resoluo das interligaes (links) entre
os componentes, cujo contedo se encontra disponvel nos
16
os componentes, cujo contedo se encontra disponvel nos
dispositivos de memria dos computadores.
Problemas tpicos:
desorientao do usurio (lost in space)
= tendncia do usurio perder o sentido de localizao e
direo no documento no-linear;
17
sobrecarga cognitiva (cognitive overhead)
=sobrecarga no esforo e concentrao exigidos do
leitor devido necessidade de se manter vrias trilhas
ao mesmo tempo.
APLICAES HIPERTEXTO
Cada vez mais requisitos necessrios dos sistemas
aplicativos:
alto grau de facilidade para o usurio que visa buscar e
obter informaes;
Aplicaes Hipertexto Aplicaes Hipertexto
19
interface simples, quase intuitiva, bem como a liberdade
de escolha na busca de informaes
PORM nem todas as aplicaes so adequadas
para contar com o suporte de hipertexto.
3 REGRAS de OURO:
1. existe um grande corpo de informaes organizado
em um grande nmero de fragmentos;
2. os fragmentos se relacionam entre si, e
20
3. o usurio precisa de somente uma pequena parte
desse corpo de informaes a qualquer momento.
Linking em Hipermdia
Links so conceitos de primeira classe
Separados e independentes de ns ou ncoras
21
Mecnica:
nica ou mltiplas origens / nico ou mltiplos destinos
Uni- / bi- direcional
Ancorar: links genricos, links dinmicos
Versionamento & Compostos & Estruturas Virtuais
link
Aplicao
WWW (World Wide Web)
22
23
O que Web?
O que Web?
Web = Internet?
24
Internet = Web?
Dentro do browser!!!
25
WWW
sistema de comunicao e informao hipertextual;
popularmente utilizado na Internet na qual a comunicao de
dados adota o modelo cliente/servidor;
clientes WWW(browsers) podem acessar informaes
hipermdia atravs de vrios protocolos atravs de um esquema
26
hipermdia atravs de vrios protocolos atravs de um esquema
de endereamento.
Histrico WWW
Tim Berners Lee prope Hypertext and CERN
(Conseil Europeen pour la Recherche Nucleaire):
interface consistente sobre todas as plataformas
permite acesso a informao nos mais diversos tipos de
27
permite acesso a informao nos mais diversos tipos de
ambientes computacionais
acesso a diversos tipos de documentos atravs de
diversos tipos de protocolos
esquema de acesso universal permite qualquer usurio
da rede a acessar informao
WWW
Tim Bernes-Lee criou os primeiros websites (ou sistemas Web)
Propsito de divulgao de pesquisa cientfica
servidor de arquivos baseado em URL (Universal
Resource Location)
28
Resource Location)
Os documentos eram simplesmente apresentados
no browser
Em 1990, uso comercial da rede
Histrico WWW Histrico WWW
29
Histrico WWW (1991)
maro: servidor www roda em uma rede de computadores
maio: cliente roda nos computadores centrais do CERN
inicia divulgao =em agosto, o servidor e sua interface so
divulgados nos Usenet newsgroup alt.hypertext e para a
comunidade dos fsicos em sua newsletter de dezembro.
30
Histrico WWW (1992)
interesse e crescimento continuam
janeiro: a interface & servidor tornam-se publicamente
disponveis a partir do servidor do CERN e durante todo o
ano o trabalho de divulgao continua.
31
ano o trabalho de divulgao continua.
Histrico WWW (1993)
50 servidores instalados
at ento a totalidade do desenvolvimento para
WWW centrado no CERN
primeiras interfaces grficas para X-Window &
32
primeiras interfaces grficas para X-Window &
Macintosh tornam-se disponveis
Marc Andreesen, aluno de graduao da U. Illinois,
trabalhando para o NCSA (National Center for
Supercomputing Applications) lidera a equipe que liberou
em fevereiro a verso alpha do Mosaic para X-Window
33
Histrico WWW (1993)
34
Histrico WWW (1993)
Mosaic
interface grfica point-and-click para a WWW
surpreendente aumento do interesse pela WWW
setembro: NCSA libera primeira verso operacional do
35
setembro: NCSA libera primeira verso operacional do
Mosaic para X-Window, Macintosh e MS Windows
dezembro: 500 servers instalados !!
Histrico WWW (1994)
companhias anunciam verses comerciais para seus
clientes
Surgem as primeiras pginsa Web no Brasil! (USP)
Marc Andreesen & colegas deixam NCSA e, com Jim
36
Clark (Silicon Graphics) fundam a Netscape Co.
(http://www.netscape.com).
maio: 1
a
conferncia internacional sobre WWW
Genebra e junho: 1.500 servers !!!
julho: fundada pelo MIT + CERN a WWW Organization
para direcionamento estvel (depois chamado WWW
Consortium ou W3C)
Histrico WWW (1995)
desenvolvimento marcado por modificaes tcnicas &
comercializao
Netscape Navigator (Mozilla) inclui mais extenses da
linguagem HTML
questes de segurana e transaes comerciais tornam-
37
questes de segurana e transaes comerciais tornam-
se centro das atenes
maio: 15.000 servidores !!!
empresas e provedores de servio entram para a WWW
lanados jornais e dezenas de livros sobre a web
Histrico WWW (Brasil)
1989 - Delegao do Cdigo de Pas de Domnio de topo
(ccTLD) .br ao Brasil
1994 - Alunos da USP criaram inmeras pginas na Web
1995 - Criao do Comit Gestor da Internet no Brasil (CGI.br)
1997 Pela primeira vez o imposto de renda pode ser entregue
38
1997 Pela primeira vez o imposto de renda pode ser entregue
pela internet
1998 - O Brasil j possui mais de 1,8 milhes de usurios
WWW (World Wide Web)
Protocolo de transferncia: HTTP (Hypertext Transfer
Protocol)
Permite a troca de informao entre os clientes e servidores Web
padronizando o dilogo
a linguagem de comunicao
39
a linguagem de comunicao
O servidor Web tambm chamado Servidor HTTP
Web (teia) Interligao entre recursos (navegao)
Interesse maior: especificao do HTML 2.0 em 1996
Formulrios HTML permitiu a criao de aplicaes mais
interativas
botes, caixas de seleo, caixas de texto,...
Internet
antes da web = usada principalmente por cientistas para e-mail
& newsgroups
depois da web =pode ser utilizada por qualquer audincia
pblico passa a requisitar que (qualquer) empresa tenha servio
de WWW e, possuir tais servios, passa a ser no s uma
40
de WWW e, possuir tais servios, passa a ser no s uma
questo de propaganda mas sim de sobrevivncia para as
empresas
Hiperdocumento da WWW
escrito em HyperText Markup Language (HTML),
uma aplicao de SGML (Standard Generalised Markup
Language - http://www.sgmlopen.org/)
assim, HTML delimita a estrutura da informao e sua
41
assim, HTML delimita a estrutura da informao e sua
forma de apresentao
objetivo de SGML =permitir a formatao de
informao de modo que sistemas de
divulgao/publicao possam partilhar essas
informaes com facilidade
WWWutilizado na Internet
os softwares (clientes & servidores) no precisam
rodar em uma rede
portanto no precisam fazer uso dos protocolos da
Internet
42
Internet
uma Intranet corresponde a um ambiente web usado
dentro de uma firewall
em sua forma mais popular, a web usada na Internet
atravs de servers que do acesso informao em
todo o mundo
Por que Hypertext Transfer Protocol
HTTP??
Dado um conjunto de arquivos correspondentes a um documento
HTML simples, como recuperar toda a informao
correspondente ?
vrias conexes ftp seriam necessrias.... alm disso,
anlise de cada arquivo .html para verificar que, por
43
anlise de cada arquivo .html para verificar que, por
exemplo, imagens devem carregadas...
conexo ftp pode durar muito tempo: o usurio pode ficar
conectado indefinidamente se o servidor no controla
tempo de acesso ocioso...
quando arquivo de outro servidor escolhido, nova
conexo tem que ser feita, e o trabalho comea todo
novamente...
Por que Hypertext Transfer Protocol
HTTP??
tal esquema, sem dvida, dificulta em muito a
divulgao e obteno de hiperdocumentos pela
Internet.... no existia, antes de HTTP, uma
maneira de requisitar informao hipermdia a
partir de um ponto da Internet ...
44
partir de um ponto da Internet ...
no havia um mtodo padronizado para algum
cliente solicitar e um servidor responder quela
solicitao...
Arquitetura da Web Arquitetura da Web
A Era do Hipertexto A Era do Hipertexto
Transferncia de documentos HTML multimdia Transferncia de documentos HTML multimdia
(estticos) (estticos)
Browser Browser : apresentador (interpretador) de pginas HTML : apresentador (interpretador) de pginas HTML
45
Browser
+
HTML
PC
Internet
Documentos
HTML
Servidor Web
(Web Server) HTTP
HTTP
HTTP
Cliente Servidor
Browser
+
HTML
MAC
Arquitetura da Web Arquitetura da Web
A Era Interativa A Era Interativa
Aplicao Web Aplicao Web
No cliente: funcionalidades de interao no navegador No cliente: funcionalidades de interao no navegador
Formulrios Formulrios
para construir interfaces de interao com a aplicao para construir interfaces de interao com a aplicao
46
para construir interfaces de interao com a aplicao para construir interfaces de interao com a aplicao
(botes, caixas de texto, caixas de seleo, ...) (botes, caixas de texto, caixas de seleo, ...)
Scripts (JavaScript) Scripts (JavaScript)
para controlar eventos sobre os elementos do formulrio para controlar eventos sobre os elementos do formulrio
Programas cliente Programas cliente
Applets Java Applets Java processamento de dados no cliente processamento de dados no cliente
No servidor: documentos HTML estticos + pginas
dinmicas com cdigo PHP, ASP, CGI, JSP, PHP, ASP, CGI, JSP, Servlet Servlet
Arquitetura da Web Arquitetura da Web
Interao Cliente/Servidor (criao de aplicaes web) Interao Cliente/Servidor (criao de aplicaes web)
Arquitetura Arquitetura 33--Tier Tier ((3 3 camadas) camadas) interativa interativa
Browser
Clientes
Servidor Web
(Web Server)
PHP
Mdulos
Acoplados ao
servidor
47
+
HTML
+
Forms e
Scripts
Internet
Documentos
HTML
HTTP
HTTP
CGI
ASP
Cliente
Servidor Base
de Dados
Sistema
Gerenciador
de Base
de Dados
Evoluo na Web Evoluo na Web
48
Documento da Web?
Um Documento HTML...
49
Um Documento HTML...
Na Web - HTML
HyperText Markup Language
Simples e flexvel
50
Na Web - HTML
HyperText Markup Language
Simples e flexvel
Simples? Conjunto limitado de marcaes
51
<title> ... </title>
<h1> ...</h1>
<a>...</a>
<img src=.. alt=...>
<hr>
Na Web - HTML
HyperText Markup Language
Simples e flexvel
Flexvel?
Contedo representado juntamente com sua
52
Contedo representado juntamente com sua
estrutura e forma de apresentao
Na Web Contedo.. Estrutura..
Apresentao ??
http://philip.greenspun.com/seia/html
53
54
Contedo.. Estrutura.. Apresentao ??
<html>
<head>
<title>HTML</title>
<LINK REL=STYLESHEET HREF="/seia/style-sheet.css"
TYPE="text/css"></head>
<body bgcolor=white text=black>
<h2>HTML</h2>
<span id="seia-web-header">
a reference chapter in
HTML: conjunto pr-definido
de elementos (tags) para
especificao das dimenses
de estrutura e apresentao
de um documento
55
a reference chapter in
<a href="/seia/">Software Engineering for Internet
Applications</a>; revised May 2003
</span><!-- seia-web-header -->
<hr>
Hypertext Markup Language, or HTML, is the language used
to specify how a browser should display a Web page.
HTML is a <i>markup<i> language, as opposed to a
programming language, meaning that it contains codes
that say how a page should be formatted, but does not
contain procedural code.
<p> Let's take a look at a simple example:
Iniciando em HTML
HTML consiste de tags, como <p>, intercalada no texto.
A tag <p> inicia um pargrafo;
</p> termina o pargrafo
56
Iniciando em HTML
Marcao lgica:
57
Iniciando em HTML
Marcao fsica:
58
Iniciando em HTML (estrutura
documento)
<html>
<head>
<title>ESTE o titulo</title>
</head>
59
</head>
<body>
... Este o contedo da pgina.
</body>
</html>
http://www.w3schools.com/tags/default.asp
MAS...
E as limitaes de HTML?
60
E as limitaes de HTML?
O que um conjunto pr-definido de
elementos no pode viabilizar?
a possibilidade de se estender/AUMENTAR o
conjunto de marcas original
permitir que autores ou comunidades criem seus
prprios conjuntos de marcas, definidos para melhor
caracterizaremos documentos de interesse.
61
caracterizaremos documentos de interesse.
isso permitiria que aplicaes pudessem associar
significado a dados e campos do documento e
viabilizaria o processamento automtico dos
documentos!
De onde veio HTML??
HTML foi definida com SGML [ISO 1986!]
http://www.iso.ch/cate/d16387.html
ISO 8879:1986: Information processing -- Text and office systems -- Standard Generalized
Markup Language (SGML)
SGML permite definir linguagens especficas!
62
SGML permite definir linguagens especficas!
Exemplo: documento SGML para um documento demo
<!doctype demo [
<!element demo o o (p*)>
<!element p - o (#pcdata)> ]>
<p>
O primeiro paragrafo.
<p>
O segundo paragrafo.
SGML na Web
Por que no usar SGML na Web?
Maior poder de expresso e flexibilidade que HTML
Autoria mais complexa que HTML
Documentos exigem um processamento por demais
63
Documentos exigem um processamento por demais
elaborado para ser realizado sob demanda na Web
Impasse:
SGML - poderosa, porm cara ...
HTML - prtica, porm limitada...
XML - Extensible Markup
Language
A soluo foi produzir uma verso enxuta e mais
disciplinada de SGML que permite a construo de
aplicaes mais apropriadas, por exemplo, para
dispositivos portteis e de poucos recursos.
64
Porque!
principais diferenas entre
XML e HTML
XML um complemento e no uma substituta para a
HTML.
XML foi projetada para descrever dados e se concentra no
que os dados so.
HTML foi projetada para apresentar os dados e se
65
HTML foi projetada para apresentar os dados e se
concentra em como eles parecem.
Resumindo
XML foi uma linguagem de marcao criada para
estruturar, armazenar e enviar informaes.
66
estruturar, armazenar e enviar informaes.
No foi projetada para apresent-las.
Por enquanto isso!!
67
Esses slides tm sido elaborados juntamente
com os profs. do grupo de pesquisa Sistemas
Web e Multimdia Interativos
do Laboratrio Intermedia ICMC/USP