Árvore hiperbólica - Projetos e Redes do Macroprograma 1 - Embrapa

Organização do Conhecimento
Através da Árvore Hiperbólica
Fernando Attique Maximo
Pesquisador da Embrapa Informática Agropecuária
fernando@cnptia.embrapa.br

Ementa do Curso
1.Estabelecendo os fundamentos
2.Instalação da Árvore Hiperbólica
3.Construindo uma Árvore
4.Inserindo nós criativos
5.“Salvar como” uma árvore
6.Configurando uma Árvore Hiperbólica
7.Associando informações aos nós
8.Impressão da AH em forma textual
9.Mesclando árvores
10.Aplicação
2

1. Estabelecendo os Fundamentos
Informação e conhecimento
Temos muitas informações, mas
nem todas são necessárias
O conhecimento está no meio
das muitas informações
3

1. Estabelecendo os Fundamentos
Desafio: organização do conhecimento
O que organizar?? O teu conhecimento, da
empresa
Onde organizar??
Como organizar??
Que ferramentas usar?
Micros, cadernos, Palm...
Definir critérios que o ajude
achar o que precisa quando
quiser
Depende das opções
4

1. Estabelecendo os Fundamentos
Software para Web
Aqui, o foco é utilizar a Tecnologia de
Informação para organizar
Por que a Web?
A manutenção é centralizada
A difusão é mais rápida
O acesso é feito em qualquer lugar
5

1. Estabelecendo os Fundamentos
Árvore Hiperbólica - Inspiração
Heaven and Hell de Escher (1960) Árvore Hiperbólica (Lamping et al., 1996)
6

1. Estabelecendo os Fundamentos
Árvore Hiperbólica – O que é
É um tipo de mapa conceitual
É uma interface olho-de-peixe (fish-eye): os componentes
diminuem e aumentam de tamanho exponencialmente em função à
sua distância ao centro de um círculo de raio unitário;
− Utiliza a técnica foco + contexto;
− Provoca uma sensação de que todas as informações estão
infinitamente disponibilizadas e de fácil acesso.
7

1. Estabelecendo os Fundamentos
Árvore Hiperbólica – Sistema
Sistema implementado em linguagem Java Applets
Dividido em dois aplicativos: o HIPEREDITOR E O HIPERNAVEGADOR
A árvore é criada e atualizada por meio do HIPEREDITOR
Funciona no próprio navegador web
Possui interface WYSIWYG (“What You See Is What You Get”)
Fácil para alterar a cor e outro atributos de um nó
Incluir ou alterar links (URL) associados aos nós e removê-los.
8

1. Estabelecendo os Fundamentos
Embrapa Informática – por que construir
uma Árvore Hiperbólica (AH)
Doutorado do pesquisador Sílvio – interface gráfica
Agência de Informação – sendo implementada sem a AH
Sílvio propõe para o projeto e chefia uma AH - AH da Xerox
179 dólares a licença => 40 Agências
Depois de um ano, a licença foi para 25.000 dólares...
O problema: os clientes já conheciam e gostaram da
solução da AH
Solução: construir!!
Surgiu a partir de uma solução livre e simples (Pierre
Bouthier)
9

2. Instalação da Árvore Hiperbólica
Crie um diretório chamado HT
− Faça na raiz do seu computador - C:\ (windows) e
/home/usuario (linux)
“Baixe” o arquivo contido no link:
− http://www.agritempo.gov.br/tmp/HT/HT.ZIP
Descompacte o arquivo HT.ZIP
Instale o java (jre-1_5_0_06-windows-i586-p)
(se não tiver instalado na sua máquina)
10

2. Instalação da Árvore Hiperbólica
Para viabilizar a execução do Hipereditor
− Copie os arquivos “.java.policy” e “.keystore”
Windows XP, 2000 e NT
− “C:\Documents and Settings\usuario”
Linux/UNIX:
- /home/usuario
11

3. Construindo uma Árvore Hiperbólica
Abra o arquivo HTML de edição (editor.html)
(com o browser - firefox)
Esse applet
indica que é
o arquivo de
edição
Não
abriremos
como html,
agora, OK?
12

3. Construindo uma Árvore Hiperbólica
Interface do HiperEditor
13

3. Construindo uma Árvore Hiperbólica
Barra de ferramentas do HiperEditor
14

3. Construindo uma Árvore Hiperbólica
Barra de ferramentas do HiperEditor
Inserindo nó: duplo clique em qualquer nó da
árvore
Editando um nó: clique em cima do nó desejado
Interface da edição
15

3. Construindo uma Árvore Hiperbólica
Barra de ferramentas do HiperEditor
Nome do
nó
Nome da
aresta
Cor do nó
Para trocar a
cor do pai e dos
descendentes
Cor da
letra
Para trocar a
cor do pai e dos
descendentes
16

3. Construindo uma Árvore Hiperbólica
Para trocar
as cores, há três opções...
17

3. Construindo uma Árvore Hiperbólica
Barra de ferramentas do HiperEditor
Copiando e colando um ramo:
● Clique em cima do nó origem e clique em seguida em copiar
● Clique em cima do nó destino e clique a seguir em colar
Colar arco “direcionado ou não”:
● Clique em cima do nó origem e clique em seguida em copiar
● Clique em cima do nó destino e clique a seguir em ciclo
Não_direcionado
Direcionado
18

3. Construindo uma Árvore Hiperbólica
Arco não direcionado – Situação Inicial
Destino
Origem
19

3. Construindo uma Árvore Hiperbólica
Arco não direcionado – Situação final
20

3. Construindo uma Árvore Hiperbólica
Arco direcionado – Situação final
21

3. Construindo uma Árvore Hiperbólica
Barra de ferramentas do HiperEditor
Apagando nós: Clique em cima do nó origem e clique em
seguida em apagar (será pedido confirmação)
Para apagar arcos, desative
Mostra Grafo e apague-o
Recuperando operações anteriores: Clique no botão
Recupera até 10 operações (diferente de apagar nós)
Centralizando árvore: clique no botão
22

3. Construindo uma Árvore Hiperbólica
Barra de ferramentas do HiperEditor
Procurando texto nos nós da árvore
23

4. Inserindo nós criativos
Formas (arquivo com extensão SVG)
● Selecione o nó desejado
● Edite o nó
● Clique em “Formas”
24

4. Inserindo nós criativos
Selecione a forma desejada e dê OK
25

4. Inserindo nós criativos
Nó selecionado para colocar
figura
Clique em imagem para
escolher
26

4. Inserindo nós criativos
27

5. “Salvar como”
Para gravar minha árvore:
✔ clico no botão
Então,
salvo
Dois arquivos:
✔ Um arquivo *.htz: é executável, significa que
não consigo ler >> é a minha árvore
✔ O arquivo editor.html

Firefox (um browser)
5. “Salvar como”
Eu abro o
arquivo
editor.html
WordPad (no Windows)
Kate (linux)
Edito a minha árvore Edito um arquivo html

O arquivo.htz é o meu
projeto – é minha árvore
5. “Salvar como”
Para começar um projeto novo
é só trocar o nome do arquivo
*.htz

Três possibilidades
5. “Salvar como”
− A primeira (na mesma pasta)
Manter fixo o nome do arquivo html (por exemplo,
editor.html)
Ao começar uma árvore nova, troque o nome do
arquivo htz
− A segunda (na mesma pasta)
Trocar o nome do arquivo html e htz
− A terceira (pastas diferentes)
Fazer uma cópia do diretório (que não é grande)
Mantenha o nome do arquivo html
Troque o nome do arquivo htz
Vantagem da terceira:
Os arquivos associados aos nós (documentos, por exemplo) podem ser
guardados de acordo com os seus projetos, evitando se misturarem

6. Configurando uma Árvore
Hiperbólica
Arquivo de navegação é um arquivo HTML
Esse applet
indica que é
o arquivo de
navegação
32

6. Configurando uma Árvore
Hiperbólica
Endereço onde
estão seus arquivos
Para mudar
cores, clique
Fontes de letras
e tamanho
Figura de
fundo
33

6. Configurando uma Árvore
Hiperbólica É possível mudar as
opções de cores
34

6. Configurando uma Árvore
Hiperbólica
Para ver a navegação, ainda na edição
Desmarque
inserção
35

7. Associando informações aos nós
● Sites...
● Um documento:
texto, planilha etc
● Uma figura
● Arquivo de som e
filme
● Outra árvore
hiperbólica
● ...
36

7. Associando informações aos nós
● Sites...
● Um documento:
texto, planilha etc
● Uma figura
● Arquivo de som e
filme
● Outra árvore
hiperbólica
● ...
37

7. Associando informações aos nós
file:\\\c:\newht1 (formato para arquivos)
38

8. Impressão da AH em forma textual
39

9. Mesclando árvores
Escolha o nó onde vai “concatenar” a outra árvore e...
Escolha a árvore que está no formato “htz” a ser
“concatenada”
40

10. Aplicação 1
Construir uma árvore hiperbólica
Uma lista de compras
● Faça uma divisão do tipo de compras:
● Por exemplo: perecíveis e não perecíveis ou café da manhã, almoço e
jantar, lanches
● Crie novos ramos a partir dos ramos iniciais
● Crie um documento a partir de um ramo
● Chame algum sítio relacionado a partir de um ramo
● Chame uma árvore a partir de um ramo
● Inove no fundo de tela, nas cores, informações escondidas
● Apresentação dos resultados
41

10. Aplicação 2
Construir uma árvore hiperbólica
Macroprojeto 1
● Abrir arquivo “macroprojeto1.pdf”
42