SIW_Aula03

Prévia do material em texto

Sistemas Web 
Prof.: Cássio Prazeres 
(prazeres@dcc.ufba.br) 
Sistemas Hipermídia: conceitos de base 
Hipertexto é... 
• “Uma abordagem para a organização das 
informações na qual os dados são 
armazenados numa estrutura em rede de 
fragmentos de informações (nós) 
associados de diferentes formas por elos 
(links)” 
 
• FUNDAMENTAL: acesso não linear à 
informação 
 
Hypertext 
A hypertext is 
defined as ... 
This is an example of 
a hypertext. The 
anchors are the basis 
of links. 
http://www.w3c.org/ 
âncora 
elo/link 
nó 
Um hipertexto intuitivamente... 
Links are the 
components that 
connect by means 
of anchors, nodes 
or concepts. 
Same or in 
different 
Databases [W3C]. 
Hipermídia é ... 
• Não existe definição padrão... Diferentes 
pontos de vista: 
 “Estrutura na qual as informações são 
organizadas de maneira associativa” 
 “Um novo paradigma de organização da 
informação” 
 Várias outras ... 
• Hipermídia associada a um conjunto 
numeroso de funcionalidades para 
estruturação, organização, acesso e busca 
de informação 
– Atualmente: hipermídia  hipertexto 
Hipermídia é... 
• “A combination of natural language text with the computer‟s 
capacity for branching, or dynamic display” (Ted Nelson, 1967) 
• “Multimedia hypertext, Hypermedia and Hypertext tend to be 
used loosely in place of each other. Media other than text 
typically include graphics, sound and video.” 
• “Text which is not constrained to be linear” (W3C, „Hypertext 
Terms‟, April 1995) 
• “An application which uses associative relationships among 
information contained within multiple media data for the purpose 
of facilitating access to, and manipulation of, the information 
encapsulated by the data.” (Hypermedia and the Web , Lowe 
and Hall, 1999) 
Notas da Profa. Renata P. M. Fortes, ICMC/USP, Hipermídia SCE-5811, 2010 
Hipermídia 
• “Aplicação permitindo a navegação através de 
um espaço de informação usando elos (links) 
associativos durante o percurso (De Bra, 1990)” 
• “Um estilo de construir sistemas para 
organização, estruturação e acesso à informação 
em torno de uma rede de nós multimídia 
interconectados através de elos (Concklin, 
1987)”. 
• Inclui ainda outras funcionalidades 
– Paradigma de navegação, forma de organização 
das informações na base de dados, controle de 
versões, colaboração, notificação de controle, ... 
Limitações e Problemas 
• A flexibilidade na representação do conhecimento 
leva a desorientação do usuário 
• Overhead cognitivo exigido do usuário: cabe a ele 
a tarefa de definir a sequência de acesso às 
informações e a forma de aprendizado 
• Não existe um modelo poderoso o suficiente para 
o desenvolvimento: a rede de informações 
hipermídia ainda é definida manualmente em 
alguns casos 
• Dinamismo da informação: atualização complexa 
das informações (elos, sites, ...), desatualização 
rápida do conteúdo, copyright, ... 
Multimídia x Hipermídia 
• Sistema Multimídia: 
– Sistema capaz de manipular ao menos um tipo de 
mídia discreta e um tipo de mídia contínua na 
forma digital de maneira sincronizada 
• Sistema Hipermídia: 
– Sistema Multimídia capaz de tratar eventos 
causados pela interação com o usuário e reagir a 
esses eventos 
Hipertexto, Multimídia e 
Hipermídia 
Documentos Hipermídia 
• Componentes de um documento hipermídia 
– Objetos de mídia 
• Texto, imagem, gráfico, áudio, vídeo, animação ... 
– Relacionamentos entre os objetos 
Relações Hipermídia 
• Relações de referência 
– Ex.: relação hipermídia tradicional (elo HTML - Web) 
• Relações de sincronização 
– definem o posicionamento temporal e espacial dos objetos (em cada 
nó) 
• Relações de estruturação 
– especificam a estrutura lógica de um documento, tal como um livro e 
seus capítulos, os capítulos e suas seções etc. 
• Relações semânticas 
– Ex.: aquela entre um professor e as várias disciplinas que ele leciona 
ou entre um fabricante e os diversos produtos fabricados 
• Relações de derivação 
– Ex.: aquelas que indicam os objetos que deram origem a outros 
objetos 
Conceitos de base (1) 
• Espaço de Informação: 
– Qualquer coleção de materiais ou objetos que 
podem ser “apresentados” 
– Pode separar documentos ou partes do 
documento 
– Pode incluir objetos multimídia 
Conceitos de base (2) 
• Navegação: 
– Ações através das quais os usuários selecionam 
quais documentos (ou partes dele) serão 
apresentadas ou em que ordem isso deve ser feito 
– Pode ser “livre” (ao menos a princípio) ou 
“restrita” a alguma sequência predefinida de elos 
– Pode ser linear ou não-linear: daí a essência da 
hipermídia 
Conceitos de base (3) 
• Associatividade: 
– Forma pela qual a memória humana trabalha, em 
especial para busca de informações 
– Define o relacionamento (i.e., uma associação) 
entre peças de informação 
– Essencialmente não-linear, mas forçada a 
trabalhar num formato linear devido às 
características físicas de apresentação (um livro, 
uma música, etc) 
Conceitos de base (4) 
• Nó hipermídia: 
– Blocos de informação 
– Representa um objeto de mídia abstraindo como 
seu conteúdo está representado 
– Modelagem do conteúdo não faz parte do modelo 
conceitual 
• Nó serve para representar texto, imagem, áudio, vídeo 
... 
Conceitos de base (5) 
• Elos ou links 
– Um elo define a ligação entre um trecho de um 
documento a um outro documento, ou trecho de 
outro documento 
– Fornecem um mecanismo que permite ao usuário 
decidir qual documento (ou parte dele) será 
selecionada e sob que ordem 
– O somatório destas seleções define formas de 
navegação possíveis através das informações 
contidas no documento 
Conceitos de base (6) 
• Âncora 
– Representa uma região do conteúdo de um nó que pode ser 
usada para criar elos 
– Também permite a criação de relacionamentos entre partes 
internas ao conteúdo de um nó 
• A definição da região depende do tipo do nó. Exemplos: 
– Texto: string de caracteres (posição inicial e final) 
– Imagem: conjunto de pixels (área retangular – coordenadas do 
pixel superior esquerdo e do inferior direito) 
– Áudio: sequência de amostras (amostra inicial e final) 
– Vídeo: sequência de quadros (quadro inicial e final) 
– Mídias contínuas: Instante de tempo inicial e final 
• A lista de âncoras de um nó define a sua interface 
 
Conceitos de base (7) 
• Âncoras origem e destino 
– Elos são definidos por âncoras origem e destino 
• A âncora origem é o trecho do nó exibido que quando 
clicado “leva” ao nó destino 
• A âncora destino é um nó completo ou o início de um 
trecho do nó 
Conceitos de base (8) 
Framework para estudo da 
Hipermídia 
Domínio, Escopo Extensibilidade, 
Aplicabilidade 
Browsing x 
Autoria 
Dimensões Fundamentais 
Desenvolvimento Hipermídia 
Sub-Modelo de 
Dados 
Modelo Hipermídia 
Sub-Modelo de 
Processo 
Interface Usuário 
Autores 
Usuários 
Usuários Finais e 
Leitores 
Modelo Hipermídia 
• É necessário um modelo conceitual hipermídia 
para expressar os componentes de um 
documento 
• Diversos modelos são propostos na literatura 
– Intermedia, HyperCard, KMS, Neptune, NoteCards, 
etc. 
– CMIF, AHM, FireFly, I-HTSPN, Madeus, Microcosm, 
Trellis, IMAP, Labyrinth, NCM, etc. 
– Modelo Dexter – modelo de referência 
• Componentes de um documento são 
representados pelas entidades do modelo 
Modelo Hipermídia 
Modelo Hipermídia 
Sub-Modelo de Dados 
Estrutura 
Âncoras 
Elos 
Nós 
Sub-Modelo de Processo 
Busca 
Navegação 
Guided Tours 
Metáfora Paths Browsers 
HistoryTrilha 
Backtrackig 
Direcionada 
Não direcionada 
Domínio, Escopo 
• Diferentes “intenções” na criação de um SH 
• Sistemas hipermídia podem ser vistos como 
mecanismos para : 
– Espelhar a forma de pensar (Memex); 
– Armazenagem e busca de literatura (Xanadu); 
– Ambiente de suporte para uso de informações 
– Ferramenta para organização de ideias e processos 
– Substituição da leitura e escrita tradicionais 
– Interface para outros Sistemas de Computação 
– Veículo para suporte ao aprendizado 
– Suporte ao trabalho cooperativo (colaborativo) 
• Hipermídia: Filosofia ou Tecnologia? 
Autoria x Browsing 
• Sistema Hipermídia para “folhear informações” 
(browsing): 
– Construídos para dar ao usuário-final um espaço de 
informação “bem-construído” (apresentação, 
interface, navegação) 
• Sistema Hipermídia para “autoria de aplicações”: 
– Ferramentas para construção e modificação da 
hiperbase são usadas; navegação não é tão 
importante... 
– Usados para autoria de documentos ou 
processamento de ideias 
Possibilidade de Extensão 
• Sistemas Hipermídia podem ser aplicados 
em um grande número de domínios de 
usuário e tarefas 
• MAS... Apesar da sua aparente flexibilidade 
em termos de domínio, não é fácil identificar 
como a hipermídia pode ser aplicada em 
determinada tarefa! 
• A extensão/reuso é muito pequena(o) na 
maioria dos casos: geralmente, restrita a 
mudanças na interface com o usuário 
 
Modelo Hipermídia Básico 
• Sistemas Hipermídia são fundamentados sobre 
um modelo hipermídia de base 
• Modelo hipermídia composto por : 
– Sub-modelo de dados – nós e elos para formar a rede 
– Sub-modelo de processamento – mecanismos de 
acesso às informações (navegação e busca) 
Modelo Hipermídia Básico 
Modelo de Dados Modelo de Processos 
Nós interconectados 
por elos direcionados 
criando uma estrutura 
em rede hipermídia 
Navegação como 
forma primária de 
acesso à rede 
hipermídia 
Busca x Navegação 
• Navegação não é efetiva em muitas aplicações 
(ex, redes hipermídia grandes com estrutura 
desconhecida) 
• Mecanismos de busca devem ser usados de 
forma a complementar o acesso via navegação 
• Entretanto, mecanismos de busca em SH são 
ainda insatisfatórios (busca por palavra, não-
uniformidade no tratamento das informações, 
fraudes, etc...) 
• Soluções: filtragem (mineração), descrição do 
conteúdo (metadados), semântica, ... 
Navegação (1) 
• Forma primária de acesso de vários Sistemas 
Hipermídia (exceto os de busca de informação...) 
 
• Em geral, modelos ou esquemas são utilizados para 
a orientação do usuário 
 
• Mecanismos comuns: 
– Trilhas de nós (guided tours): como devo atravessar a 
rede 
– History, Backtracking: voltar a um “terreno familiar” 
– Bookmarks: listas reduzidas de informações de interesse 
– Caminhos: impõe uma sequência de navegação 
 
• Navegação x Estruturação : Problema! 
Navegação (2) 
Duas estruturas paralelas em hipermídia: 
1. Hiperespaço = nós + elos 
– Procura e localização da informação 
– Em geral: navegação  hiperespaço 
2. Espaço Conceitual = conhecimento implícito ou 
explícito derivado da associação entre elos e 
nós 
– Compreensão da informação 
 Futuro (?): navegação “inteligente”, adequada 
ao perfil do usuário (regras de inferência para 
definir elos e nós) + busca associada à I.A. 
Interface com o Usuário 
• Representação esquemática para facilitar a 
localização das informações na rede 
• Navegadores: baseada em Frames, baseada 
em Janelas, ... 
• Diferentes níveis de detalhes das 
informações 
• Interesse crescente de pesquisas: 
visualização dos dados, definição de formas 
de busca mais efetivas, mapas de sites, 
usabilidade em geral, ... 
Sistemas Hipermídia 
Um Sistema Hipermídia “básico” 
• Base de dados composta por um conjunto 
de nós hipermídia 
• Janelas/frames para apresentação dos 
conteúdos dos nós 
• Um sistema padrão para controle das 
janelas (tamanho, fechar, iconizar, etc) 
• Marcações no conteúdo para definição de 
elos 
• Usuários podem criar e modificar elos 
• Hiperbase pode ser explorada seguindo 
elos hipertexto, através de busca de 
elementos-chave ou através do mapa da 
estrutura 
H G 
A 
B 
C 
D 
E 
F 
a 
b 
d 
f 
c 
h g 
e 
Exemplo de SH 
Hiperbase 
Janela e browser para a 
apresentação do 
documento e mapa da 
estrutura 
b 
D 
a 
b 
a 
c 
d 
h 
A 
B 
C 
D 
E 
F 
H G 
e 
f 
g 
e 
c 
f 
A 
Estruturação da Informação 
• Bush e Nelson visualizam estruturas criadas 
dinamicamente pelo usuário assim como eles 
pensam de maneira associativa (abordagem 
“hiperbase”) 
• Entretanto, boa parte dos Sistemas “reais” são 
formados por informações estruturadas 
estaticamente através de elos definidos pelos 
autores dos documentos (abordagem 
“documento ou hipertexto”) 
– Separação dos tipos de conteúdos: texto, áudio, 
vídeo, ... 
– Definição de relações estruturais ou referenciais 
entre partes do conteúdo 
– Estruturação hipermídia: define diferentes topologias 
Estrutura Hipermídia 
• Modelo básico hipermídia de nós e elos 
pode ser diretamente visto como um grafo 
direcionado 
• Diversas proposições para a estruturação do 
hiperespaço: 
1. Hierarquia 
2. Agregações 
3. Conjuntos 
4. Redes semânticas 
5. Redes de Petri 
6. Hipergrafos (Web) ... 
 
Estruturação em Sequência 
Estruturação Web 
? 
? ? 
? 
Estruturação Hierárquica 
Estruturação Matricial 
Estruturas em comparação 
Autoria Hipermídia 
• Definir por que criar o espaço de informação (contexto global): 
– Distribuir informação, publicidade, venda,... 
• Definir como as pessoas escolheriam os caminhos para navegar no 
espaço (e o que elas deveriam esperar fazendo isso): 
– Pesquisa, diversão, educação, ... 
• Definir as características da “audiência” (usuários típicos do 
espaço): 
– Público em geral, especialistas, colecionadores, ... 
• Pensar nas limitações técnicas impostas aos conteúdos e à 
estrutura e as limitações físicas dos usuários 
– Conexão, suporte multimídia, combinação sensorial das informações, 
dispositivos de acesso, ... 
Informações de Base 
• Quem, o que, quando, onde 
– Quem: garantir a confiabilidade da 
informação 
– O que: títulos claros definem o contexto 
– Quando: datas são importantes (versões) 
– Onde: localizar a fonte das informações 
 
Definindo a forma de Navegação 
• Documentos devem dar a exata noção do 
contexto e da organização em qualquer 
condição 
 
• Informações de navegação consistente e 
previsíveis 
Elos e Navegação 
• Definir botões de “avançar” e “voltar” 
• Definir botões “próximo” e “anterior” (fixos 
e não relativos como nos navegadores) 
Web site I 
Web site II 
(seq. de páginas) 
Previous Next 
Go forward 
Go back 
Elo hipertexto 
Previous Next 
4 5 6 7 8 
Prev Page Next page 
Organização da Informação 
• Por trás de todas as formas de organização estão 
as limitações do cérebro humano (pessoas em 
média conseguem “reter na memória recente” de 
4 a 7 “pedaços” de informação apresentados) 
• Objetivo da organização: guardar um número 
mínimo de “pedaços pequenos” (informações para 
“memória recente”) e organizar o restante num 
esquema consistente de organização (menus, 
convenções, etc) 
• Tamanho das partes: suficiente para determinar o 
contexto da apresentação (consistência) 
4 Passos Básicos para 
Organizar a Informação 
1. Dividir a informação em unidades lógicas 
(pedaços) não muito longos e consistentes 
2. Estabelecer “hierarquia deimportância” 
entre os pedaços de informação 
3. Usar a “hierarquia” para estruturar as 
relações entre as partes da informação 
(métodos para agrupar, ordenar, rotular e 
arranjar graficamente as informações devem 
ser aplicados) 
4. Analisar a “funcionalidade” e a “estética” do 
sistema desenvolvido 
Modelo a ser utilizado 
• Questão em aberto... 
• Existem várias propostas de sistemas e 
metodologias de desenvolvimento, mas 
ainda é um tópico de pesquisa 
• Situação atual: Boa parte do 
desenvolvimento hipermídia é feito ainda a 
mão ou usando ferramentas inadequadas... 
– Engenharia Hipermídia é uma disciplina que vem 
ganhando espaço nos últimos anos