Manual HiperEditor e HiperNavegador

Transcrição

1 Manual HiperEditor

2 2007 Confea/Apla Info Informações obtidas do Manual CNPTIA

3 Apresentação Este tutorial objetiva apresentar as principais funcionalidades das ferramentas computacionais para criação, edição e navegação na Web de árvores hiperbólicas. Este documento mostra os passos a serem seguidos na instalação das ferramentas e as fases importantes nos processos de criação e de navegação de árvores hiperbólicas. Quando se está navegando por uma larga coleção de informações hierarquizadas, um dos principais obstáculos é a visualização dos milhares de objetos que fazem parte da coleção. Os métodos padrões de navegação e visualização estão baseados em descrever a hierarquia de objetos em forma de páginas da WEB referenciadas via link ou, quando muito, na forma de grafos bidimensionais que não suportam mais do que 120 nós sem que se perca a noção de toda a estrutura hierarquizada. Desta forma, uma coleção muito grande de informação pode conter milhares de páginas (documentos) sem que o usuário tenha noção da estrutura geral da coleção de documentos por qual navega. A navegação hiperbólica é uma alternativa para a navegação e visualização de hierarquias de larga escala. Ela é uma estrutura de visualização de hierarquias baseada na técnica foco e contexto que pode propiciar o aumento do grau de cognição humana sobre um determinado assunto. A árvore hiperbólica detalha os nós que estão em foco e mostra o contexto (outros nós ao redor do foco) com tamanho progressivamente reduzido à medida que se distancia da região focada. Este manual visa viabilizar a utilização das ferramentas para a criação, edição e navegação na Internet de hierarquia baseadas na geometria hiperbólica. 3

4 Sumário Apresentação Árvore Hiperbólica Instalação das Ferramentas de Edição e Navegação Orientações sobre Java e Variável CLASSPATH Instalação das Ferramentas de Edição e Navegação Requisitos de Instalação Criando e Editando uma Árvore Hiperbólica Edição de uma árvore no hipereditor Preparando uma Árvore para a Navegação na WEB Customizando o arquivo de nagevação Arquivos necessários para publicação de uma árvore Referência Bibliográfica de Cores... 21

5 1 - Árvore Hiperbólica A idéia central partiu da necessidade de se estruturar e organizar a informação para a comunicação e transferência tecnológica. De todos modelos testados, o mais promissor foi a representação do conhecimento em forma hierárquica e visual. O problema reside no elevado número de informações hierarquizadas que necessitam ser visualizadas ao mesmo tempo com o objetivo de se preservar a compreensão do contexto da informação. Desta forma, foi necessário se buscar uma solução em que uma pesada hierarquia pudesse ser navegada sem que o usuário perdesse noção do contexto da informação. Para realizar essa idéia, utilizou-se uma particular geometria na qual a informação é estruturada na forma de uma árvore definida em um espaço hiperbólico [Lamping, 1995] e depois mapeada em um círculo unitário no plano euclidiano. A árvore hiperbólica destina maior espaço para o nó que está em foco e mostra o contexto (outros nós ao redor do nó focado) com tamanho progressivamente reduzido à medida que se distancia do foco. Uma vantagem da representação hiperbólica é que ela pode ser utilizada tanto como um mapa do site bem como uma ferramenta de navegação, pois à medida que se clica em um nó, a página associada é aberta em uma nova janela do navegador. Esta técnica de visualização fornece uma visão geral da estrutura do site, mostrando ao visitante a localização corrente em relação ao panorama geral. Nesta geometria, os nós centrais aparecem maiores e os periféricos, menores. O usuário pode alterar o foco movendo suavemente toda árvore até o nó desejado entrar no foco. Quando isso ocorre, o nó desejado é transladado para o centro e todos os outros se reorganizam na periferia. Desta forma, além dos nós centrais são representadas várias gerações de nós associados, permitindo que o usuário explore toda estrutura sem se sentir perdido na hierarquia das informações. A Embrapa Informática Agropecuária desenvolveu dois softwares livres intitulados d e HiperEditor para a navegação e a criação na WEB de informações hierarquizadas. Foi utilizada como base de implementação do HiperNavegador e do HiperEditor a biblioteca para a visualização da geometria hiperbólica implementada por Bouthier [Bouthier, 2001]. O HiperNavegador é uma ferramenta computacional multiplataforma para a navegação de uma árvore hiperbólica a partir de um web browser. 5

6 O HiperEditor é uma ferramenta computacional multiplataforma para a criação e edição de uma árvore hiperbólica a partir de uma interface amigável e intuitiva. Este editor dirige os processos de criação, de edição e de publicação para WEB da árvore hiperbólica. O usuário pode definir os arcos e seus nós, bem como o conteúdo e propriedade dos mesmos. Cada nó possui uma forma, uma cor, um rótulo, uma aresta, um texto de descrição e um endereço URL para uma página ( ou não) associada. As ferramentas foram desenvolvidas tendo como infra-estrutura o serviço World Wide Web (WWW) da Internet e a tecnologia Applet Java. Elas podem ser executadas a partir de qualquer computador, sistema operacional ou navegador da Internet. 6

7 2 - Instalação das Ferramentas de Edição e Navegação 2.1 Orientação sobre Java e Variável CLASSPATH 1) Baixar uma versão do J2SDK: No link você poderá baixar 2) Instalar o J2SDK: Dê um duplo clique no arquivo baixado e a instalação terá início. Sugere-se instalar a SDK em um diretório padrão, por exemplo C:\j2sdk1.4.2_02. Também recomenda-se evitar espaços nos nomes. 3) Definir a JAVA_HOME: JAVA_HOME é uma variável de ambiente utilizada por diversos programas para encontrar o diretório onde a jdk foi instalado. Para instalá-lo, faça: No WinXP: Clique com o botão direito no ícone Meu Computador, vá em Propriedades, selecione a guia Avançado, clique em Variáveis de Ambiente e adicione uma nova Variável de Sistema denominada JAVA_HOME com o valor C:\j2sdk1.4.2_02" 4) Configurar o Path: Setar o Path permitirá que você possa chamar o java a qualquer momento sem ter que especificar o diretório onde o programa está. No WinXP: Clique com o botão direito no ícone Meu Computador, selecione Propriedades, vá na guia Avançado, clique em Variáveis de Ambiente, localize a variável PATH e adicione ";C:\j2sdk1.4.2_02". Lembre-se de incluir o ';', pois ele é utilizado como separador de valores pelo Windows. Isso é válido para todas as versões do Windows. 2.2 Instalação das Ferramentas de Edição e Navegação O processo de instalação é simples e não exige que o computador seja reiniciado. Descompacte o arquivo compactado ("hipervisual.zip ) em qualquer diretório de sua preferência*. Você deve ter copiado estes arquivos e pastas para o diretório escolhido: * Por questão de compatibilidade com os browsers, não utilize espaços em branco em nenhum dos nomes dos diretórios e subdiretórios (pastas) que compõem o caminho até o local escolhido para a instalação. 7

8 Configurar a máquina virtual Java para permitir que uma Applet possa ter privilégios em seu computador (por exemplo, gravar arquivos no disco local). Por questões de segurança, uma Applet Java não pode gravar no disco local, mesmo que ela esteja gravada na máquina do usuário. Para viabilizar a execução do Hipereditor, você deve copiar os arquivos: ".java.policy"e".keystore" para um diretório que a Applet do Hipereditor possa carregá-los e receber privilégios no computador do usuário. O diretório em questão depende do sistema operacional instalado no computador: Windows XP, 2000 e NT: Copie os arquivos para o diretório " C:\Documents and Settings\usuário". Por exemplo, se o usuário do computador se chama Pedro (login Pedro), o diretório destino seria: "C:\Documents and Settings\Pedro Windows 98 e me: Copie os arquivos para o diretório " c:\windows" Linux: Copie os arquivos citados para a sua área home. 2.3 Requisitos de Instalação A ferramenta para navegação (hipernavegador) exige apenas que o usuário possua um browser com capacidade para executar Applet Java. Em outras palavras, com a máquina virtual Java (Plug-in) ativada. A ferramenta de edição (HiperEditor) exige que a máquina virtual Java esteja atualizada (versão 1.4 ou superior). 8

9 3 - Criando e Editando uma Árvore Hiperbólica Todo o processo de criação de árvores hiperbólicas se inicia com a especificação de um arquivo *. Este arquivo possui todas informações necessárias para que o Web Browser instalado no computador possa carregar e estruturar uma árvore hiperbólica. Para a criação de uma árvore hiperbólica, crie um arquivo (por exemplo, editor.html) e insira os comandos abaixo neste arquivo. Observe que a árvore a ser criada é identificada no parâmetro htfile. Sendo assim, substitua o nome " gestao.htz" por qualquer outro, desde que a terminação htz seja mantida. Se o arquivo ". htz" existe, ele será aberto para edição. Caso ele não exista, o hipereditor criará um novo arquivo. <> <BODY> <applet code="htapplet.class" archive="ahypertreee.jar" WIDTH="99%" HEIGHT="99%"> <PARAM name=" htfile" value=" gestao.htz"> <PARAM name="htbackcolor" value="0x000000"> <PARAM name="htbackcoloredit" value="0xbbbbbb"> <PARAM name="htlinkcolor" value="0xffffff"> <PARAM name="htsearchcolor" value="0xff8000"> <PARAM name="hthintcolor" value="0xf0fff0"> </APPLET> </BODY> </> A partir deste ponto, para efeito de exemplificação, será assumido que o arquivo HMTL criado possuirá o seguinte nome: editor.html. * significa HyperText Markup Language, é uma das linguagens mais utilizadas para desenvolver páginas para WEB. 9

10 Basta abrir este arquivo com um Web Browser para que seja possível a criação de uma árvore hiperbólica. 3.1 Edição de uma árvore no hipereditor A interface do HiperEditor está ilustrada na figura ao lado: A barra de ferramenta possui todos os recursos necessários para edição da árvore: Gravar Inserir novo Nó Edição do conteúdo de um nó Undo Colar Link Escondido* Colar Centralizar a árvore Remover Busca por palavra chave na árvore Copiar * Link Escondido: Ao colar um conjunto de nós copiados, apenas uma referência, em forma de elipse, será mostrada. Desta forma, podem-se implementar ciclos na árvore. Durante a navegação, ao clicar-se no nó elipse, a árvore move-se para o nó apontado pela elipse. Operações de edição: Todas as operações de edição (exceto undo e centralizar) são executadas pela escolha do nó (clicando em cima do mesmo) e pela posterior definição da operação, clicando-se em cima da mesma. Por exemplo, Inserindo nó: Duplo clique em qualquer nó da árvore insere-se um novo filho ao nó clicado. Uma variação é: escolher um nó para inserção (teclando-se em cima do nó) e teclando-se em: 10

11 Editando do conteúdo de um nó: Clique em cima do nó desejado e clique a seguir em: A seguinte interface se abrirá: Nesta interface você pode definir ou redefinir: o título do nó, o rótulo para a aresta, a cor do nó (...), a cor do texto, o texto ( hint) que será exigido quando o cursor é deixado por alguns segundos sobre um nó, e a URL que será aberta quando a árvore estiver sendo navegada na WEB e o usuário proceder a um duplo sobre o nó. Importante: o endereço url pode ser absoluto ou relativo. Caso o endereço absoluto seja utilizado, não omitir a palavra http. Para endereçamento relativo, veja o item 4.1. A seleção da cor dar-se-á pela utilização da seguinte interface que possui três modelos para escolha de cores: As cores do nó e/ou do texto podem ser aplicadas a todos os seus filhos caso o botão "Ramo" seja clicado. 11

12 Copiando e colando um ramo: Clique em cima do nó origem e clique a seguir em (copiar): Clique em cima do nó destino e clique a seguir em (colar): O nó origem e todos os seus filhos serão inseridos (copiados) a partir do nó destino. A única restrição deste processo é a impossibilidade de se copiar uma subestrutura para dentro dela mesma. Criando ciclos: O HiperEditor permite que um nó filho tenha dois nós pais. Esta funcionalidade é conseguida a partir da inserção de um nó referência para indicar este ciclo. Clique em cima do nó origem e clique a seguir em (copiar): Clique em cima do nó destino e clique a seguir em (ciclo): A seqüência de figuras a seguir relata a cópia/criação de ciclo de um determinado ramo: Situação inicial: suponha que se deseja cria um ciclo entre o nós indicados na figura ao lado D (O-origem, D-destino) O 12

13 Situação final: foi criado um ciclo implícito entre os dois nós. A elipse indicada pela seta representa um ciclo para o nó origem (O). Situação de trabalho: se o usuário clicar sobre a elipse a árvore é transladada para o nó origem (O) e um caminho é desenhado para representar o caminho entre os dois nós. 13

14 Apagando nós: Clique em cima do nó origem e clique a seguir em (apagar): Uma janela de advertência será mostrada para pedir confirmação da operação. Recuperando operações anteriores: Clique no botão: Até 10 operações podem ser recuperadas. Centralizando a árvore: Clique no botão: Gravando a árvore: Clique no botão: Procurando texto nos nós da árvore: Basta inserir um texto no campo de busca. Caminhos serão desenhados na árvore para indicar o local exato da informação. Uma variação para a representação do texto procurado é realçar o foco apenas nos ramos que contenham a informação procurada (para conseguir este efeito veja item 4.1): 14

15 O texto de busca pode ser expandido com o conector e, representado pelo caractere &, para permitir a busca por duas ou mais palavras que ocorram simultaneamente do texto. Assim, o exemplo a seguir representa a busca dos termos: gestão & comunicação. Para quebrar a linha no hint basta digitar &crlf. 15

16 4 - Preparando uma Árvore para a Navegação na WEB A preparação da árvore gerada para a navegação na WEB é muito simples, bastando criar o arquivo apropriado para a navegação, por exemplo, com as seguintes linhas de código: Note que a Applet associada ao arquivo é: (applet de navegação) <> <BODY> <applet code="htapplet.class" archive=" hypertreen.jar hypertreen.jar " WIDTH="99%" HEIGHT="99%"> <PARAM name="htfile" value=" gestao.htz"> <PARAM name="htbackcolor" value=" 0xFFFFFF"> <PARAM name="htlinkcolor" value=" 0x000000"> <PARAM name="htsearchcolor" value=" 0xFF8000"> <PARAM name="hthintcolor" value=" 0xF0FFF0"> <PARAM name="htbordertype" value=" rounded"> <PARAM name="hthomeimage" value=" home.gif"> <PARAM name="htbackimage" value=" confea.jpg"> <PARAM name="hthelpimage" value=" info_cinza.gif"> <PARAM name="htopenwindow" value=" new"> <PARAM name="hthelpfile" value=" > <PARAM name="hturladr" value=" > 16

17 <PARAM name="hturladr" value=" file:///c:/pasta/texto.doc"> <PARAM name="htfont " value=" arial"> <PARAM name="htfontsize" value=" 12"> <PARAM name="htsearchtype" value=" blende"> </APPLET> </BODY> </> 4.1 Customizando o arquivo de navegação árvore: Os valores dos parâmetros associados ao arquivo podem ser alterados pelo usuário para permitir modificações no layout da htfile root.htz Árvore a ser navegada. Ela foi gerada pelo editor. htbackimage confea.jpg substitua por alguma imagem que você gostaria que estivesse no fundo da tela. htsearchcolor Cor do arco que indica o caminho até a informação desejada (resultado da operação de busca) Pode ser alterado com a seguinte regra: 0xRRGGBB RR Quantidade hexadecimal de Vermelho valores possíveis (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) GG Quantidade Verde valores possíveis (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) BB Quantidade Azul valores possíveis (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) Exemplos: 0xFF08AB 0x1122AC 0xAA00BF 17

18 Observe que os valores 0x (zero e x minúsculo) não podem ser alterados e devem ser preservados. htlinkcolor indica a cor do arco de conexão entre os nós; hthintcolor cor de fundo da janela de Hint. A janela que aparece com informações associadas ao nó; htbackcolor cor de fundo da janela ( background); htbordertype rounded ou normal. Indica o tipo de borda dos nós; hthomeimage imagem associada ao botão de centralização da árvore; hthelpimage imagem associada ao botão de ajuda da árvore; htopenwindow indica o modo utilizado pelo navegador para abrir as páginas associadas aos nós (operação ativada com o duplo clique) Valores: new Abrir páginas em uma nova janela self Abrir páginas na janela atual; hturladr este parâmetro é utilizado para indicar a parte fixa da url associadas aos nós. Se este parâmetro for utilizado, duas situações podem ocorrer: a) se o usuário especificou o endereço absoluto no nó: este endereço é obedecido; b) se o usuário especificou o endereço relativo no nó: o valor associado ao parâmetro urladr á concatenado ao endereço relativo. Para navegar na árvore gerada, basta dar um duplo clique no ícone que representa o arquivo criado. 4.2 Arquivos necessários para a publicação de uma árvore Uma vez criada a árvore pode ser levada para algum servidor WEB para ser publicada na Internet. Para que esta operação se realize a contento, os seguintes arquivos devem ser levados para o servidor. Arquivo. Por exemplo, navegador.html; 18

19 Applet hypertreen.jar; Arquivo que contém a árvore (arquivo HTZ associado ao parâmetro htfile), por exemplo: gestao.htz; Figura de fundo (se existir) (imagem associada ao parâmetro htbackimage); Figura do botão centralizar (imagem associada ao parâmetro hthomeimage); Figura do botão ajuda (imagem associada ao parâmetro hthelpimage). Estes arquivos devem ser colocados no mesmo diretório. 19

20 5 - Referência Bibliográfica [Bouthier, 2001] acessado em Setembro/2002. [Lamping, 1995] J. Lamping, R.Rao, P. Pirolli. A Focus+Context Technique Based in Hyperbolic Geometry for Visualizing Large Hierarchies. In Proc. of CHI'95 ACM Conference on Human Factors in Computing Systems, 1995, p Estes arquivos devem ser colocados no mesmo diretório. 20

21 Cor Snow #FFFAFA GhostWhite #F8F8FF WhiteSmoke #F5F5F5 Gainsboro #DCDCDC FloralWhite #FFFAF0 OldLace #FDF5E6 Linen #FAF0E6 AntiqueWhite #FAEBD7 PapayaWhip #FFEFD5 BlanchedAlmond #FFEBCD Bisque #FFE4C4 PeachPuff #FFDAB9 NavajoWhite #FFDEAD Moccasin #FFE4B5 Cornsilk #FFF8DC Ivory #FFFFF0 LemonChiffon #FFFACD Seashell #FFF5EE Honeydew #F0FFF0 MintCream #F5FFFA Azure #F0FFFF AliceBlue #F0F8FF lavender #E6E6FA LavenderBlush #FFF0F5 MistyRose #FFE4E1 White #FFFFFF Black # DarkSlateGray #2F4F4F Cor DimGrey # SlateGrey # LightSlateGray # Grey #BEBEBE LightGray #D3D3D3 MidnightBlue # NavyBlue # CornflowerBlue #6495ED DarkSlateBlue #483D8B SlateBlue #6A5ACD MediumSlateBlue #7B68EE LightSlateBlue #8470FF MediumBlue #0000CD RoyalBlue #4169E1 Blue #0000FF DodgerBlue #1E90FF DeepSkyBlue #00BFFF SkyBlue #87CEEB LightSkyBlue #87CEFA SteelBlue #4682B4 LightSteelBlue #B0C4DE LightBlue #ADD8E6 PowderBlue #B0E0E6 PaleTurquoise #AFEEEE DarkTurquoise #00CED1 MediumTurquoise #48D1CC Turquoise #40E0D0 Cyan #00FFFF Cor LightCyan #E0FFFF CadetBlue #5F9EA0 MediumAquamarine #66CDAA Aquamarine #7FFFD4 DarkGreen # DarkOliveGreen #556B2F DarkSeaGreen #8FBC8F SeaGreen #2E8B57 MediumSeaGreen #3CB371 LightSeaGreen #20B2AA PaleGreen #98FB98 SpringGreen #00FF7F LawnGreen #7CFC00 Green #00FF00 Chartreuse #7FFF00 MedSpringGreen #00FA9A GreenYellow #ADFF2F LimeGreen #32CD32 YellowGreen #9ACD32 ForestGreen #228B22 OliveDrab #6B8E23 DarkKhaki #BDB76B PaleGoldenrod #EEE8AA LtGoldenrodYello #FAFAD2 LightYellow #FFFFE0 Yellow #FFFF00 Gold #FFD700 LightGoldenrod #EEDD82 Cor goldenrod #DAA520 DarkGoldenrod #B8860B RosyBrown #BC8F8F IndianRed #CD5C5C SaddleBrown #8B4513 Sienna #A0522D Peru #CD853F Burlywood #DEB887 Beige #F5F5DC Wheat #F5DEB3 SandyBrown #F4A460 Tan #D2B48C Chocolate #D2691E Firebrick #B22222 Brown #A52A2A DarkSalmon #E9967A Salmon #FA8072 LightSalmon #FFA07A Orange #FFA500 DarkOrange #FF8C00 Coral #FF7F50 LightCoral #F08080 Tomato #FF6347 OrangeRed #FF4500 Red #FF0000 HotPink #FF69B4 DeepPink #FF1493 Pink #FFC0CB 6 - s de Cores Manual HiperEditor 21

22 Cor LightPink #FFB6C1 PaleVioletRed #DB7093 Maroon #B03060 MediumVioletRed #C71585 VioletRed #D02090 Magenta #FF00FF Violet #EE82EE Plum #DDA0DD Orchid #DA70D6 MediumOrchid #BA55D3 DarkOrchid #9932CC DarkViolet #9400D3 BlueViolet #8A2BE2 Purple #A020F0 MediumPurple #9370DB Thistle #D8BFD8 Snow1 #FFFAFA Snow2 #EEE9E9 Snow3 #CDC9C9 Snow4 #8B8989 Seashell1 #FFF5EE Seashell2 #EEE5DE Seashell3 #CDC5BF Seashell4 #8B8682 AntiqueWhite1 #FFEFDB AntiqueWhite2 #EEDFCC AntiqueWhite3 #CDC0B0 AntiqueWhite4 #8B8378 Cor Bisque1 #FFE4C4 Bisque2 #EED5B7 Bisque3 #CDB79E Bisque4 #8B7D6B PeachPuff1 #FFDAB9 PeachPuff2 #EECBAD PeachPuff3 #CDAF95 PeachPuff4 #8B7765 NavajoWhite1 #FFDEAD NavajoWhite2 #EECFA1 NavajoWhite3 #CDB38B NavajoWhite4 #8B795E LemonChiffon1 #FFFACD LemonChiffon2 #EEE9BF LemonChiffon3 #CDC9A5 LemonChiffon4 #8B8970 Cornsilk1 #FFF8DC Cornsilk2 #EEE8CD Cornsilk3 #CDC8B1 Cornsilk4 #8B8878 Ivory1 #FFFFF0 Ivory2 #EEEEE0 Ivory3 #CDCDC1 Ivory4 #8B8B83 Honeydew1 #F0FFF0 Honeydew2 #E0EEE0 Honeydew3 #C1CDC1 Honeydew4 #838B83 Cor LavenderBlush1 #FFF0F5 LavenderBlush2 #EEE0E5 LavenderBlush3 #CDC1C5 LavenderBlush4 #8B8386 MistyRose1 #FFE4E1 MistyRose2 #EED5D2 MistyRose3 #CDB7B5 MistyRose4 #8B7D7B Azure1 #F0FFFF Azure2 #E0EEEE Azure3 #C1CDCD Azure4 #838B8B SlateBlue1 #836FFF SlateBlue2 #7A67EE SlateBlue3 #6959CD SlateBlue4 #473C8B RoyalBlue1 #4876FF RoyalBlue2 #436EEE RoyalBlue3 #3A5FCD RoyalBlue4 #27408B Blue1 #0000FF Blue2 #0000EE Blue3 #0000CD Blue4 #00008B DodgerBlue1 #1E90FF DodgerBlue2 #1C86EE DodgerBlue3 #1874CD DodgerBlue4 #104E8B Cor SteelBlue1 #63B8FF SteelBlue2 #5CACEE SteelBlue3 #4F94CD SteelBlue4 #36648B DeepSkyBlue1 #00BFFF DeepSkyBlue2 #00B2EE DeepSkyBlue3 #009ACD DeepSkyBlue4 #00688B SkyBlue1 #87CEFF SkyBlue2 #7EC0EE SkyBlue3 #6CA6CD SkyBlue4 #4A708B LightSkyBlue1 #B0E2FF LightSkyBlue2 #A4D3EE LightSkyBlue3 #8DB6CD LightSkyBlue4 #607B8B SlateGray1 #C6E2FF SlateGray2 #B9D3EE SlateGray3 #9FB6CD SlateGray4 #6C7B8B LightSteelBlue1 #CAE1FF LightSteelBlue2 #BCD2EE LightSteelBlue3 #A2B5CD LightSteelBlue4 #6E7B8B LightBlue1 #BFEFFF LightBlue2 #B2DFEE LightBlue3 #9AC0CD LightBlue4 #68838B Manual HiperEditor 22

23 Cor LightCyan1 #E0FFFF LightCyan2 #D1EEEE LightCyan3 #B4CDCD LightCyan4 #7A8B8B PaleTurquoise1 #BBFFFF PaleTurquoise2 #AEEEEE PaleTurquoise3 #96CDCD PaleTurquoise4 #668B8B CadetBlue1 #98F5FF CadetBlue2 #8EE5EE CadetBlue3 #7AC5CD CadetBlue4 #53868B Turquoise1 #00F5FF Turquoise2 #00E5EE Turquoise3 #00C5CD Turquoise4 #00868B Cyan1 #00FFFF Cyan2 #00EEEE Cyan3 #00CDCD Cyan4 #008B8B DarkSlateGray1 #97FFFF DarkSlateGray2 #8DEEEE DarkSlateGray3 #79CDCD DarkSlateGray4 #528B8B Aquamarine1 #7FFFD4 Aquamarine2 #76EEC6 Aquamarine3 #66CDAA Aquamarine4 #458B74 Cor DarkSeaGreen1 #C1FFC1 DarkSeaGreen2 #B4EEB4 DarkSeaGreen3 #9BCD9B DarkSeaGreen4 #698B69 SeaGreen1 #54FF9F SeaGreen2 #4EEE94 SeaGreen3 #43CD80 SeaGreen4 #2E8B57 PaleGreen1 #9AFF9A PaleGreen2 #90EE90 PaleGreen3 #7CCD7C PaleGreen4 #548B54 SpringGreen1 #00FF7F SpringGreen2 #00EE76 SpringGreen3 #00CD66 SpringGreen4 #008B45 Green1 #00FF00 Green2 #00EE00 Green3 #00CD00 Green4 #008B00 Chartreuse1 #7FFF00 Chartreuse2 #76EE00 Chartreuse3 #66CD00 Chartreuse4 #458B00 OliveDrab1 #C0FF3E OliveDrab2 #B3EE3A OliveDrab3 #9ACD32 OliveDrab4 #698B22 Cor DarkOliveGreen1 #CAFF70 DarkOliveGreen2 #BCEE68 DarkOliveGreen3 #A2CD5A DarkOliveGreen4 #6E8B3D Khaki1 #FFF68F Khaki2 #EEE685 Khaki3 #CDC673 Khaki4 #8B864E LightGoldenrod1 #FFEC8B LightGoldenrod2 #EEDC82 LightGoldenrod3 #CDBE70 LightGoldenrod4 #8B814C LightYellow1 #FFFFE0 LightYellow2 #EEEED1 LightYellow3 #CDCDB4 LightYellow4 #8B8B7A Yellow1 #FFFF00 Yellow2 #EEEE00 Yellow3 #CDCD00 Yellow4 #8B8B00 Gold1 #FFD700 Gold2 #EEC900 Gold3 #CDAD00 Gold4 #8B7500 Goldenrod1 #FFC125 Goldenrod2 #EEB422 Goldenrod3 #CD9B1D Goldenrod4 #8B6914 Cor DarkGoldenrod1 #FFB90F DarkGoldenrod2 #EEAD0E DarkGoldenrod3 #CD950C DarkGoldenrod4 #8B658B RosyBrown1 #FFC1C1 RosyBrown2 #EEB4B4 RosyBrown3 #CD9B9B RosyBrown4 #8B6969 IndianRed1 #FF6A6A IndianRed2 #EE6363 IndianRed3 #CD5555 IndianRed4 #8B3A3A Sienna1 #FF8247 Sienna2 #EE7942 Sienna3 #CD6839 Sienna4 #8B4726 Burlywood1 #FFD39B Burlywood2 #EEC591 Burlywood3 #CDAA7D Burlywood4 #8B7355 Wheat1 #FFE7BA Wheat2 #EED8AE Wheat3 #CDBA96 Wheat4 #8B7E66 Tan1 #FFA54F Tan2 #EE9A49 Tan3 #CD853F Tan4 #8B5A2B Manual HiperEditor 23

24 Cor Chocolate1 #FF7F24 Chocolate2 #EE7621 Firebrick4 #8B1A1A Brown1 #FF4040 Brown2 #EE3B3B Brown3 #CD3333 Brown4 #8B2323 Salmon1 #FF8C69 Salmon2 #EE8262 Salmon3 #CD7054 Salmon4 #8B4C39 LightSalmon1 #FFA07A LightSalmon2 #EE9572 LightSalmon3 #CD8162 LightSalmon4 #8B5742 Orange1 #FFA500 Orange2 #EE9A00 Orange3 #CD8500 Orange4 #8B5A00 DarkOrange1 #FF7F00 DarkOrange2 #EE7600 DarkOrange3 #CD6600 DarkOrange4 #8B4500 Coral1 #FF7256 Coral2 #EE6A50 Coral3 #CD5B45 Coral4 #8B3E2F Tomato1 #FF6347 Cor PaleVioletRed2 #EE799F PaleVioletRed3 #CD6889 PaleVioletRed4 #8B475D Maroon1 #FF34B3 Maroon2 #EE30A7 Maroon3 #CD2990 Maroon4 #8B1C62 VioletRed1 #FF3E96 VioletRed2 #EE3A8C VioletRed3 #CD3278 VioletRed4 #8B2252 Magenta1 #FF00FF Magenta2 #EE00EE Magenta3 #CD00CD Magenta4 #8B008B Orchid1 #FF83FA Orchid2 #EE7AE9 Orchid3 #CD69C9 Orchid4 #8B4789 Plum1 #FFBBFF Plum2 #EEAEEE Plum3 #CD96CD Plum4 #8B668B MediumOrchid1 #E066FF MediumOrchid2 #D15FEE MediumOrchid3 #B452CD MediumOrchid4 #7A378B DarkOrchid1 #BF3EFF Cor DarkOrchid2 #B23AEE DarkOrchid3 #9A32CD DarkOrchid4 #68228B Purple1 #9B30FF Purple2 #912CEE Purple3 #7D26CD Purple4 #551A8B MediumPurple1 #AB82FF MediumPurple2 #9F79EE MediumPurple3 #8968CD MediumPurple4 #5D478B Thistle1 #FFE1FF Thistle2 #EED2EE Thistle3 #CDB5CD Thistle4 #8B7B8B grey11 #1C1C1C grey21 # grey31 #4F4F4F grey41 # grey51 # grey61 #9C9C9C grey71 #B5B5B5 gray81 #CFCFCF gray91 #E8E8E8 DarkGrey #A9A9A9 DarkBlue #00008B DarkCyan #008B8B DarkMagenta #8B008B Cor DarkRed #8B0000 LightGreen #90EE90 Chocolate3 #CD661D Chocolate4 #8B4513 Firebrick1 #FF3030 Firebrick2 #EE2C2C Firebrick3 #CD2626 Manual HiperEditor 24