BRPI0719484B1

BRPI0719484B1 - Método, equipamento e programa para dar suporte à seleção de objeto na criação de páginas da web

Info

Publication number: BRPI0719484B1
Application number: BRPI0719484-6A
Authority: BR
Inventors: Yoshio Horiuchi
Original assignee: International Business Machines Corporation
Priority date: 2006-12-28
Filing date: 2007-12-20
Publication date: 2023-04-04
Also published as: JP2008165033A; BRPI0719484A2

Abstract

MÉTODO, EQUIPAMENTO E PROGRAMA PARA DAR SUPORTE À SELEÇÃO DE OBJETO NA CRIAÇÃO DE PÁGINA DA WEB A presente invenção facilita a seleção de tag (etiqueta) na criação ou desenvolvimento de página da web sem reduzir o efeito de WYSIWYG quando da edição de uma tela. A pre-sente invenção inclui as etapas de determinar um ponto de referência para seleção de objeto em resposta a uma ação do usuário executada em uma tela de edição de página da web, estabelecendo uma área de referência que envolve o ponto de referência, selecio-nar o objeto de visualização que estiver localizado mais próximo do ponto de referência como um objeto de visualização de referência dentre os objetos de visualização incluídos na área de referência, selecionar um objeto de visualização relacionado ao objeto de visualização de referência dentre objeto de visualização incluídos na área de referência, e desenhar um primeiro retângulo que represente o objeto de visualização de referência e um segundo retângulo que represente o objeto de visualização relacionado com um espa-ço entre eles que permita a seleção de objeto, de modo que o primeiro e o segundo retângulos sejam independentes do objeto de visualização de referência e do objeto (...).

Description

ÁREA TÉCNICA

A presente invenção refere-se a criação de páginas para a web. Em particular, a presente invenção diz respeito a um método, um equipamento, e um programa para dar suporte à seleção de objeto na criação de página web.

TÉCNICA ANTERIOR

As páginas da web são escritas em linguagens baseadas na utilização de etiquetas (tags) de destaque (HTML, XML, JSP, etc.) Quando da edição de uma página da web, a edição de operações tais como a inserção e remoção de tags e a configuração de propriedades de tag são basicamente operações baseadas em tag, isto é, as operações são realizadas por meio da seleção de uma tag a ser editada. Muitas ferramentas fornecem telas de edição nas quais as tags são visualizadas como se aparecessem em um navegador (doravante denominadas telas de edição WYSIWYG), o que aumenta a facilidade de uso. No entanto, recentemente, o grau de complexidade de páginas web vem aumentando. Essas páginas complexas da web possuem tags dispostas proximamente e densamente, dificultando a seleção da tag a ser editada em uma tela de edição WYSIWYG.

Se uma área correspondente a uma tag for completamente sobreposta por uma área correspondente a uma outra tag, é difícil para um usuário visualizar se uma tag desejada é selecionada quando ele ou ela clica em um determinado ponto.

Por exemplo, até mesmo para uma simples tela de edição tal como ilustrada na Fig. 1, um arquivo fonte HTML correspondente possui uma estrutura aninhada como ilustrada na Fig. 2.

Assim, uma tag desejada pode não ser selecionada apenas clicando-se em uma parte da tela de edição.

Para resolver esta questão, uma ferramenta comum de criação de página da web tal como a Page Designer (veja "Page Designer", http://www- O6.ibm.com/jp/software/websphere/developer/wsad/workshop/pdf/8.pdf) tem uma interface especial de usuário (UI) em que tags de HTML são exibidas de forma hierárquica. No entanto, esta UI tem uma estrutura normal de árvore e como a disposição de uma tela de edição WYSIWYG, não está refletida na UI.

Se o código fonte ilustrado na Fig. 2 for apresentado diretamente, a seleção de tag pode ser facilmente realizada. No entanto, o visor de código fonte aparece acentuadamente diferente da tela de edição WYSIWYG correspondente. Assim, pode não ser possível reconhecer quando uma área correspondente à tag selecionada está localizada em uma página da web propriamente dita simplesmente por se visualizar a exibição do código-fonte. Uma técnica já é conhecida, na qual ícones que correspondem a abrir / fechar uma tag são exibidos numa tela de edição com vista a aumentar a conveniência na seleção de uma tag. No entanto, esta técnica reduz o efeito WYSIWYG para toda a página.

Como descrito acima, a seleção de tag tem sido convencionalmente realizada às custas, ou por desconhecimento, do efeito WYSIWYG para uma tela de edição de página da web.

SUMÁRIO DA INVENÇÃO

Assim, um dos objetos da presente invenção é facilitar a seleção de tag na edição de página web sem diminuição do efeito WYSIWYG para uma tela de edição.

A presente invenção se propõe a resolver o problema de como selecionar uma tag de uma página da web numa tela de edição WYSIWYG. Na edição de página da web, selecionar uma tag significa na prática selecionar um objeto de visualização especificado pela tag como um objeto a ser editado. Assim, a seleção de uma tag e a seleção de um objeto de visualização (também simplesmente referido como um objeto) são aqui utilizadas de forma alternativa

De acordo com um primeiro aspecto da presente invenção, é fornecido um método para auxiliar na seleção de um objeto na edição de página da web, que inclui as etapas de determinação de um ponto de referência para seleção de objeto em resposta a uma ação do usuário executada em uma tela de edição de uma página da web, estabelecimento de uma área de referência envolvendo o ponto de referência, a seleção do objeto de visualização que estiver localizado mais próximo do ponto de referência como um objeto de referência de visualização, dentre objetos de visualização incluídos na área de referência, seleção de um objeto de visualização relacionado com o objeto de visualização de referência dentre os objetos de visualização incluídos na área de referência, e desenhar um primeiro retângulo que represente o objeto de visualização de referência e um segundo retângulo que represente o objeto de visualização relacionado, com um espaço entre eles que permita a seleção de objeto, o primeiro retângulo e o segundo retângulo sendo desenhados independentemente do objeto de visualização de referência e do objeto de visualização relacionado.

De acordo com um segundo aspecto da presente invenção, é fornecido um aparelho de apoio para selecionar objeto quando da edição de uma página da web, o qual inclui uma unidade determinante de ponto referência para determinar um ponto de referência de seleção de objeto em resposta a uma ação do usuário realizada em uma tela para editar uma página da web, uma unidade de definição de área de referência para definição de uma área referência que envolva o ponto de referência, uma unidade para selecionar o objeto de visualização de referência que estiver localizado mais próximo do ponto de referência como objeto de visualização de referência dentre os objetos de visualização incluídos na área de referência, uma unidade de desenhar para desenhar um primeiro retângulo que represente o objeto de visualização de referência e um segundo retângulo que represente o objeto de visualização relacionado, com um espaço entre eles que permita selecionar objetos, o primeiro retângulo e o segundo retângulo sendo desenhados independentemente do objeto de visualização de referência e dos objetos de visualização relacionados.

De acordo com um terceiro aspecto da presente invenção, é fornecido um programa de apoio para a seleção de objeto na criação de uma página da web, o que faz com que o computador execute as etapas de determinar um ponto de referência para a seleção de objeto em resposta a uma ação do usuário executada em uma tela para editar uma página da web, estabelecendo uma área de referência que envolva o ponto de referência, selecionar o objeto de visualização localizado mais próximo do ponto de referência como um objeto de visualização de referência dentre os objetos de visualização incluídos na área de referência, selecionar um objeto de visualização relacionado ao objeto de visualização de referência dentre os objetos de visualização incluídos na área de referência, e desenhar um primeiro retângulo que represente o objeto de visualização de referência e um segundo retângulo que represente o objeto de visualização relacionado, com um espaço entre os dois que permita a seleção do objeto, o primeiro e o segundo retângulo sendo desenhados independentemente do objeto de visualização de referência e do objeto de visualização relacionado.

A presente invenção destina-se a apoiar a seleção de um objeto em uma tela de edição WYSIWYG na criação ou desenvolvimento de uma página da web. Uma vez que, na criação de uma página da web, o que deve ser editado é a tela de edição WYSIWYG, a presente invenção sempre permite que uma tela seja uma tela editada, o que equivale a edição de resultados, durante as operações de edição.

BREVE DESCRIÇÃO DOS DESENHOS

A Fig. 1 é um diagrama que ilustra resumidamente um exemplo de uma página da web a ser apoiada pelo presente invenção. A Fig. 2 é um diagrama que ilustra um arquivo de fonte HTML da página da web ilustrada na Fig. 1.

A Fig. 3 é um diagrama que ilustra um exemplo de um ambiente para a aplicação da presente invenção. A Fig. 4 é um diagrama que ilustra um bloco funcional de configuração de um cliente, de acordo com a presente invenção.

A Fig. 5 é um fluxograma ilustrando as operações de um cliente de acordo com a presente invenção. A Fig. 6 é um diagrama que ilustra uma página da web da Fig. 1 juntamente com uma estrutura de tag.

A Fig. 7 é um diagrama que ilustra uma situação em que uma área de referência é definida na página da web da Fig. 1. A Fig. 8 é um diagrama que ilustra o arquivo fonte HTML da Fig. 2 sob a forma de uma árvore.

A Fig. 9 é um diagrama que ilustra um conceito básico para desenhar objetos selecionados e relacionados com ícones por uma unidade de desenho de um cliente de acordo com a presente invenção.

A Fig. 10 é um diagrama que ilustra um exemplo de um desenho real resultado obtido por uma unidade de desenho de um cliente de acordo com a presente invenção.

A Fig. 11 é um diagrama de bloco que ilustra um exemplo de um sistema de processamento de dados que pode ser implementado como um cliente de acordo com a presente invenção.

MELHOR MODO PARA REALIZAÇÃO DA INVENÇÃO

A Fig. 3 ilustra um exemplo de um ambiente para implementação da presente invenção. Um sistema 10 inclui um servidor 14 e um cliente 16, que estão conectados a uma rede 12. No sistema 10, uma página da Web armazenada no servidor 14 pode ser editada no cliente 16. A Rede 12 pode ser qualquer rede, como a Internet, uma rede de área local (LAN), ou uma rede de área ampla (WAN). Também é possível ligar uma pluralidade de clientes na rede de modo que os clientes possam editar cooperativamente uma página da web. Esse processo de edição é chamado colaboração web ou simplesmente colaboração e é empregado em diversas áreas, bem como na criação de páginas da web. Escusado será dizer que a presente invenção pode ser implementada não apenas no ambiente de rede ilustrado na Fig. 3, mas também em cliente autônomo ou “stand alone”.

A Fig. 4 ilustra um exemplo de uma configuração funcional de cliente 16 que desenvolve a criação de uma página da web, de acordo com a presente invenção. O cliente 16 possui uma unidade de armazenamento 20, uma unidade determinante de ponto de referência 22, uma unidade de definição de área de referência 24, uma unidade de seleção de objeto de visualização de referência 26, uma unidade de seleção de objeto de visualização relacionada 28, e uma unidade de desenho 30. A unidade de armazenamento 20 armazena os dados de um página da web (por exemplo, um arquivo de fonte HTML) recebido do servidor 14 através da rede 12. A unidade de determinação de ponto de referência 22 determina um ponto de referência para a seleção de objeto em resposta a uma ação do usuário executada em uma tela para editar uma página da web. A unidade de determinação de área de referência 24 define uma área de referência que inclui o ponto de referência determinado pela unidade de determinação de referência 22. A unidade de seleção de objeto de visualização de referência 26 seleciona o objeto de visualização mais próximo ao ponto de referência como um objeto de visualização de referência dentre uma pluralidade de objetos de visualização incluídos na área de referência fixada pela unidade de determinação de área 24.

A unidade de seleção de objeto de visualização relacionado 28 seleciona um objeto de visualização que esteja relacionado ao objeto de visualização de referência dentre os objetos de visualização incluídos na área de referência fixada pela unidade de determinação de área de referência 24.

A unidade de desenho 30 desenha um primeiro retângulo que representa o objeto de visualização de referência e um segundo retângulo que representa o objeto de visualização relacionado, com um espaço entre eles que permite a seleção de objeto. Estes primeiro e segundo retângulos são desenhados independentemente do objeto de visualização de referência e objeto de visualização relacionado.

A unidade de desenho 30 gera um resultado de desenho para um monitor (não mostrado) do cliente 16.

Com referência agora para o fluxograma da Fig. 5, uma operação de seleção de objeto na criação de página da web realizada pelo cliente 16 será descrita em pormenores. Considera-se aqui que a página da web ilustrada na Fig. 1 é exibida no visor do cliente 16, tal como uma tela de edição WYSIWYG, e o código fonte ilustrado na Fig. 2 está armazenado na unidade de armazenamento 20 do cliente 16. Note-se que os números de linha de 1 a 62, ilustrados no código fonte são fornecidos para facilitar a descrição e não estão incluídas no código fonte de fato.

Antes de proceder à descrição pormenorizada da operação, uma estrutura de tags da página web da Fig. 1 será brevemente descrita, com referência à Fig. 6. Na Fig. 6, cada campo de uma tag aberta para uma correspondente tag fechada no código fonte da Fig. 2 é indicado utilizando um retângulo. A tabela 50, que constitui a página da web inclui uma primeira coluna 54A com um cabeçalho 52A "Menu" e um cabeçalho 52B "Conteúdo" (correspondentes às linhas de 8 a 11 do código fonte da Fig. 2) e uma segunda coluna 54B, que não tem um cabeçalho (correspondente às linhas 12 a 58 do código fonte da Fig. 2). A coluna 54B tem uma primeira célula de dados 56A contendo seis seqüências de caracteres (correspondentes às linhas 13-44 do código fonte da Fig. 2) e uma segunda célula de dados (tabela) 56B contendo três imagens (correspondentes às linhas 45 a 57 do código fonte da Fig. 2). A tabela 50 também tem um campo "tbody", mas o campo "tbody" é omitido no presente exemplo, e campos "tbody" de outras tabelas são similarmente omitidos.

A primeira célula de dados 56A tem uma tabela 58 (correspondente às linhas 14 a 43 do código fonte da Fig. 2). A tabela 58 contém quatro fileiras 60a (correspondente as linhas 16 a 32 do código fonte da Fig. 2), 60B (correspondente às linhas 33 a 35 do código fonte da Fig. 2), 60C (correspondente às linhas 36 a 38 do código fonte da Fig. 2), e 60D (correspondente às linhas 39 a 41 do código fonte da Fig. 2). A coluna 60a contém uma célula de dados 61 (correspondente às linhas de 17 a 31 do código fonte da Fig. 2) e uma tabela 63 (correspondente as linhas 18 a 30 do código fonte da Fig. 2). A tabela 63 contém três colunas contendo as células de dados "Sol", "Nuvem" e "Lua", respectivamente. A coluna 60B contém um célula de dados "Iteml" (correspondente à linha 34 do código fonte da Fig. 2). A coluna 60C contém uma célula de dados "Item2" correspondente à linha 37 do código fonte da Fig. 2). A coluna 60D contém uma célula de dados "Item3" (correspondente à linha 40 do código fonte na Fig. 2).

A segunda célula de dados 56B tem uma tabela 62 (correspondente as linhas 46 a 56 do código fonte da Fig. 2). A tabela 62 contém duas colunas 64A (correspondente para as linhas 48 a 51 do código fonte na Fig. 2) e 64B correspondente às linhas 52 a 54 do código fonte da Fig. 2). A coluna 64A inclui uma célula de dados 66A contendo uma imagem de "Sol" (correspondente à linha 49 do código fonte da Fig. 2) e uma célula de dados 66B que contém uma imagem de "Nuvem" (correspondente à linha 50 do código fonte da Fig. 2). A coluna 64B inclui uma célula de dados 68 contendo uma imagem da "Lua" (correspondente à linha 53 do código fonte da Fig. 2).

Reportando-se a Fig. 5, na etapa S1, o cliente 16 verifica se uma ação do usuário para selecionar um objeto (tag) foi realizada na tela de edição da Fig. 1. Esta ação do usuário é predefinida. Por exemplo, uma ação de pressionar uma tecla Ctrl enquanto se clica no botão direito do mouse pode ser definido como um gatilho para a seleção do objeto. Escusado será dizer, uma outra operação de mouse / tecla pode ser definida como a de desencadeamento da seleção de objeto.

Se uma ação do usuário tiver sido realizada, determina um ponto de referência para seleção de objeto na etapa S2. Por exemplo, a unidade determinante de ponto de referência 22 pode determinar uma posição de um sinal de interpolação ou um cursor de mouse como o ponto de referência. Quando o ponto de referência for determinado, a unidade de definição de área de referência 24 define uma área de referência que inclui o ponto de referência na etapa S3. Esta área de referência é definida para ter uma dimensão predeterminada que permita a seleção de vários objetos na proximidade do ponto de referência. Por exemplo, a altura e largura da área de referência pode ser configurada para ser um terço daquelas da tela de edição. Um exemplo de uma área de referência é ilustrado na Fig. 7. Quando um cursor 74 está colocado em uma posição conforme ilustrado na Fig. 7 em uma tela de edição 70, uma área de referência 76 é estabelecida e indicada por uma linha grossa. No exemplo da Fig. 7, a área de referência 76 tem uma forma de um retângulo, mas a forma da referência área 76 não se limita a um retângulo.

Reportando-se de novo a fig. 5, quando a área de referência estiver definida, a unidade de seleção de objeto de visualização de referência 26 seleciona, na etapa S4, o objeto que estiver colocado mais próximo do ponto de referência dentre os objetos de visualização incluídos na área referência. Tal objeto mais próximo do ponto de referência pode ser um objeto que inclua o ponto de referência, um objeto cujo perímetro esteja adjacente ao ponto de referência, etc. e é selecionado com base na estrutura de árvore mostrada na Fig. 2. Explicando com os exemplos de Fig. 6 e da Fig. 7, como o ponto de referência indicado pela posição do cursor 74 está localizado em uma célula de dados 58A contendo a cadeia de caracteres "Sol", a unidade de seleção de objeto de visualização de referência 26 pode selecionar a célula dados como 58A um objeto de visualização de referência.

Quando o objeto de visualização de referência é selecionado, seleciona, na etapa S5, o objeto de visualização que está relacionado com o objeto de visualização de referência selecionado pela a unidade de seleção de objeto de visualização de referência 26 dentre os objetos de visualização incluídos na área de referência. Este objeto de visualização relacionado é, pelo menos, um objeto irmão, um objeto pai, e um objeto filho do objeto de visualização de referência. Em seguida, a seleção do objeto de visualização relacionado será descrita com referência a estrutura de árvore mostrada na Fig. 8.

A Fig. 8 mostra o código fonte da Fig. 2 sob a forma de uma árvore. A unidade de armazenamento 20 também armazena esta estrutura de árvore. As relações de correspondência entre os nós individuais da árvore e os números de linha do código-fonte são os seguintes, corpo 82 (nó raiz): linhas 5-61 Tabela 84: linhas 6-60 tr 86A: linhas 8-11 tr 86b: linhas 12-58 th 88A: linha 9 th 88B: linha 10 td 90A: linhas 13-44 td 90B: linhas 45-57

Menu 91: linha 9 Conteúdo 92: linha 10 Tabela 93: linhas 14-43 Tabela 94: linhas 46-56 tr 96A: linhas 16-32 tr 96B: linhas 33-35 tr 96C: linhas 36-38 tr 96D: linhas 39-41 tr 98A: linhas 48-51 tr 98B: linhas 52-54 td 99: linhas 17-31 td 101: linha 34 td 102: linha 37 td 103: linha 40 td 105A: linha 49 td 105B: linha 50 td 104: linha 53 Tabela 100: linhas 18-30 Iteml 108: linha 34 Item2 110: linha 37 Item3 112: linha 40 imagem Sol 114: linha 49 imagem Nuvem 116: linha 50 imagem Lua 118: linha 53 tr 106A: linhas 20-22 tr 106B: linhas 23-25 tr 106C: linhas 26-28 td 120: linha 21 td 122: linha 24 td 124: linha 27 Sol 126: linha 21 Nuvem 128: linha 24 Lua 130: linha 27

A unidade de seleção de objeto de visualização relacionado 28 busca na estrutura de árvore do código fonte armazenado na unidade armazenamento 20 por um objeto irmão, um objeto pai, e um objeto filho do objeto de visualização de referência naquela sequência dentre uma pluralidade de objetos de visualização incluídos na área de referência. Quando um objeto pai ou objeto filho é encontrado, a unidade de seleção de objeto de visualização relacionado 28, em seguida, procura por um objeto irmão, um objeto pai, e um objeto filho do objeto pai ou objeto filho encontrado naquela sequência. A unidade de seleção de objeto de visualização relacionado 28 repete a mesma seqüência de pesquisa até que nenhum objeto seja encontrado.

Especificamente, nos exemplos da Fig. 6 e da Fig. 7, uma vez que a célula de dados 58A contendo a cadeia de caracteres "Sol", foi selecionada como o objeto de visualização de referência, a unidade de seleção de objeto de visualização relacionado 28 primeiro busca por um objeto irmão da célula de dados 58A dentre os objetos incluídos na área de referência 76 indicada na Fig. 7. Na Fig. 8, a célula de dados 58A corresponde ao nó 120. Contudo, como o nó 120 não tem um nó irmão, a unidade de seleção de objeto de visualização relacionado 28 busca por um nó pai e um nó filho do nó 120. O nó 120 tem um nó pai 106A e um nó filho 126. Uma vez que tanto o nó 106A e o nó 126 estão incluídos na área de referência 76, a unidade de seleção de objeto de visualização relacionado 28 seleciona esses nós como objetos de visualização relacionados.

Posteriormente, a unidade de seleção de objeto de visualização relacionado 28 busca por um nó irmão do nó pai 106A.

No exemplo da Fig. 8, o nó 106A tem nós irmãos 106B e 106C. Uma vez que tanto os nós irmão 106B e 106C estão incluídos na área de referência 76, a unidade de seleção de objeto de visualização relacionado 28 seleciona esses nós como objetos de visualização relacionados. Além disso, a unidade de seleção de objeto de visualização relacionado 28 busca por um nó pai dos nós 106A, 106B e 106C, e nós filhos dos nós 106B e 106C e, assim, seleciona os nós 100, 122, 124, 128, 130. Do mesmo modo, a unidade de seleção de objeto de visualização relacionado 28 continua a busca por um nó irmão, um nó pai, e um nó filho até que nenhum objeto de visualização relacionado incluído na área de referência seja encontrado.

De acordo com a presente invenção, as buscas por um nó irmão, um nó pai, e um nó filho podem ser realizadas em qualquer ordem, e não é necessário realizar primeiro uma busca por um nó irmão.

Quando a sequência de busca acima estiver concluída, a unidade de seleção de objeto de visualização relacionado 28 armazena os objetos selecionados na unidade de armazenamento 20, sob a forma de uma estrutura de árvore tal como a mostrada na Fig. 8. Além disso, a unidade de seleção de objeto de visualização relacionado 28 fornece um ponteiro para a especificação do objeto de visualização de referência para a unidade de desenho unidade 30.

Quando a seleção de objetos de visualização relacionados estiver concluída, a unidade de desenho 30 desenha, na etapa S6, um primeiro retângulo que representa o objeto de visualização de referência e um segundo retângulo que representa um objeto de visualização de relacionado com um espaço entre eles que permite a seleção de objeto. Nesta ocasião, a unidade de desenho 30 desenha o primeiro retângulo e o segundo retângulo independentemente do objeto de visualização de referência e do objeto de visualização relacionado, em uma janela de interface UI pop-up, por exemplo. Alternativamente, pode ser possível reescrever temporariamente peças associadas na tela de edição WYSIWYG. Um exemplo da operação de desenho é ilustrado na Fig. 9. A unidade de desenho 30 primeiro desenha um retângulo 200 que representa o objeto de visualização de referência especificado pelo ponteiro usando um resultado de layout do objeto de visualização de referência original. O tamanho do retângulo 200 pode ser determinado tendo em conta a dimensão de uma tela de edição de página da web e as posições do objeto de visualização de referência e do objeto de visualização relacionado. Se, por exemplo, uma cadeia de caracteres "AAAAAAABBBBBBBBCCCC" for separada em "AAAAAAABBBBB" e "BBBCCCC" devido ao envolvimento da cadeia de caracteres, dois retângulos podem ser fornecidos. A combinação desses retângulos é também aplicada a presente invenção.

Para um objeto de visualização relacionado que seja objeto pai, a unidade de desenho 30 desenha um segundo retângulo 202 que representa o objeto de visualização relacionado com um espaço que permite a seleção de objeto (indicado pelo sombreamento na Fig. 9) entre os retângulos 200 e 202. Um usuário pode temporariamente selecionar o objeto de visualização relacionado, ou seja, uma tag desejada, clicando, por exemplo, o perímetro do retângulo 202.

Assim, é preferível desenhar um perímetro que tenha uma espessura suficiente para a operação de seleção. A largura do espaço pode ser fixada arbitrariamente. Por exemplo, a largura pode ser determinada em função da altura de uma fonte padrão (default) de uma página da web. Se o número de nós pais obtidos pelo rastreio para cima da estrutura de árvore criada pela unidade de seleção de objeto de visualização relacionado 28 for muito grande, resultando em um tamanho excessivo da UI pop-up a ser desenhada, o desenho de objetos pais pode ser interrompido. Em vez disso, um ícone 204 indicando que há mais objetos pais pode ser exibido na parte superior esquerda da tela.

Para um objeto filho, o a unidade de desenho 30 desenha o segundo retângulo no interior do retângulo 200 do objeto de visualização de referência. Também neste caso, um espaço pré-determinado é fornecido entre o primeiro e o segundo retângulos. Se o número de objetos filho (descendentes) obtidos pelo rastreio para baixo da estrutura de árvore criada pela unidade de seleção de objeto de visualização relacionado 28 for demasiado grande para desenhar todos os retângulos correspondentes aos objetos filho no interior do retângulo 200, um ícone 206 indicando que há mais objetos filho pode ser fornecido, por exemplo, no interior do retângulo 200. Quando o usuário clica no ícone 204 ou o ícone do 206, a unidade de desenho 30 redesenha todos os retângulos, incluindo o objeto pai ou objeto filho omitido(s) como um novo objeto de visualização de referência.

Quando há espaço no interior do retângulo 200, a unidade de desenho 30 pode desenhar um caráter ou imagem correspondente dentro de um objeto filho desenhado por último. Além disso, pode haver um caso onde objeto de visualização de referência tem uma pluralidade de objetos filho que são irmãos e cada um dos objetos filho tem muitos descendentes e, portanto, todos os objetos descendentes não podem ser desenhados no interior do retângulo 200. Nesse caso, o ícone 206 é exibido dentro de um retângulo correspondente para cada objeto filho.

Para um objeto irmão, o acima disposto não é necessário, uma vez que um objeto irmão não é sobreposto com o objeto de visualização de referência. No entanto, um espaço entre os retângulos correspondente ao objeto de visualização de referência e o objeto irmão pode ser determinado como descrito acima.

A Fig. 10 ilustra uma janela pop-up da UI que resulta eventualmente de uma operação de desenho realizada pela unidade de desenho 30. Uma janela pop-up de UI 250 pode ser exibida separadamente de uma janela da tela de edição ilustrada na Fig. 1 ou exibida de modo a ficar parcialmente sobreposta na janela mas não para ser sobreposta com a área de referência. A pop-up UI 250 contém uma janela tag, na qual os retângulos correspondentes a objeto de visualização de referência e objetos de visualização de relacionados são desenhados, e os campos 254 e 256 cada um indicando o status de uma tag selecionada. O campo 254 contém o nome de uma tag que se encontra atualmente selecionada temporariamente por um usuário. O campo 256 é uma área de visualização antecipada que indica as tags selecionadas temporariamente. No exemplo da Fig. 10, uma tag indicada por uma linha grossa 252 para ressaltar foi selecionada temporariamente. O usuário pode selecionar uma tag específica exibida na janela de tag, clicando em um retângulo específico exibido na janela de tag ou buscando por uma tag a ser selecionada no sentido ascendente ou sentido descendente usando um triângulo ou um triângulo invertido, respectivamente, disposto na extremidade direita do campo 254.

Quando uma tag desejada for encontrada, um usuário pode ativar a seleção, por exemplo, ao pressionar uma tecla Enter. Neste caso, uma área correspondente à tag selecionada pode ser destacada do modo determinado na tela de edição da Fig. 1, de modo que o usuário possa facilmente reconhecer que parte da tela real foi selecionada.

A Fig. 11 ilustra um exemplo de uma configuração de equipamento de processamento de dados que pode ser implementado como o cliente 16. Um equipamento de processamento de dados 300 emprega uma arquitetura de barramento local PCI. Neste exemplo, embora o sistema de processamento de dados 300 empregue um barramento PCI, outras arquiteturas de barramento, como AGP e ISA podem ser utilizados. Um processador 302 e uma memória principal 304 estão ligadas a um barramento PCI local 306 através de uma ponte PCI 308. A ponte PCI 308 pode incluir um controlador de memória integrado e uma memória cache para o processador 302. Outras ligações com o barramento PCI 306 local podem ser feitas através da interligação de componentes ou por meio de placas add-in. No exemplo do Fig. 11, um adaptador LAN 310, urn adaptador de cabo SCSI 312, e uma interface de cabo de expansão 314 estão ligados ao PCI de cabo local PCI 306 por conexão direta de componente. Em contraste, um adaptador de áudio 316, um adaptador gráfico 318, e um adaptador de áudio / vídeo 319 estão ligados ao barramento PCI local 306 por placas add-in inseridas em slots de expansão. A interface de expansão de cabo 314 fornece uma ligação para o adaptador de teclado e mouse 320, um modem 322, e uma memória adicional 324. O barramento SCSI adaptador hospedeiro 312 fornece conexão para uma unidade de disco rígido 326, uma unidade de fita 328, e uma unidade de CD-ROM 330. Implementações típicas de barramento PCI local suportarão três ou quatro slots de expansão PCI ou conectores add-in.

Um sistema operacional é executado no processador 302 para controlar diversos componentes do equipamento de processamento de dados 300 da Fig. 3. O sistema operacional pode ser um sistema operacional comercialmente disponível, tal como o sistema operacional Windows (R) XP, que é disponibilizado pela Microsoft Corporation. Um programa elaborado segundo a presente invenção é executado sob o sistema operacional para desempenhar as diferentes funções acima descritas. O sistema operacional e o programa elaborado de acordo com a presente invenção são armazenados em um dispositivo de armazenamento, como a unidade de disco rígido 326 e carregados para a memória principal 304 quando executados pelo processador 302.

Aqueles de habilidade normal na técnica irão apreciar que o equipamento da Fig. 11 pode variar dependendo da implementação. Outros dispositivos internos ou periféricos, como uma ROM flash (ou uma memória equivalente não- volátil) e uma unidade de disco óptico podem ser utilizadas adicionalmente ou no lugar do equipamento ilustrado na Fig. 11.

Embora as concretizações da presente invenção tenham sido descritas acima com referência aos desenhos, as concretizações descritas são meramente ilustrativas e não são destinadas a limitar o alcance de aplicação da presente invenção tal como definido nas reivindicações anexadas. Aqueles com habilidades normais na técnica apreciarão com facilidade que várias modificações e mudanças podem ser aplicadas às concretizações acima sem se afastar do espírito da presente invenção.

Claims

1. Método para dar suporte à seleção de objeto na criação de página web, dito método sendo implementado por um sistema (10) incluindo um servidor (14) para armazenamento de uma página da web e um cliente (16) para edição da página da web por um usuário, o cliente (16) compreendendo uma tela de edição (70) da página da web, o método sendo caracterizado pelo fato de que compreende as etapas de: - recebimento (S1) de uma entrada do usuário selecionando um objeto na tela de edição (70) de uma página web; - determinação (S2) de um ponto de referência na tela de edição (70) mediante recebimento (S1) da entrada do usuário; - definição (S3) de uma área de referência (76) na tela de edição (70) que inclui o ponto de referência; - seleção (S4) de um objeto de referência colocado mais próximo ao ponto de referência dentre os objetos incluídos na área de referência (76); - seleção (S5) de um objeto relacionado ao objeto de referência dentre os objetos incluídos na área de referência (76); e - geração (S6) de um primeiro retângulo (200) que represente o objeto de referência e um segundo retângulo (202) que represente o objeto relacionado, o primeiro retângulo (200) e o segundo retângulo (202) possuindo um espaço entre eles para identificação do objeto selecionado, onde cada retângulo (200, 202) indica uma tag aberta e uma corresponde tag fechada do código fonte da página web.

2. Método para dar suporte à seleção de objeto na criação de página web, de acordo com a reivindicação 1, caracterizado pelo fato de que a etapa de recebimento (S1) da entrada do usuário inclui a leitura da localização de um ponteiro (74) na tela de edição (70).

3. Método para dar suporte à seleção de objeto na criação de página web, de acordo com a reivindicação 1, caracterizado pelo fato de que a área de referência (76) ser de um tamanho predeterminado e sendo centrada no ponto de referência selecionado.

4. Método para dar suporte à seleção de objeto na criação de página web, de acordo com a reivindicação 1, caracterizado pelo fato de que a etapa de seleção (S5) de objeto relacionado define ao menos um objeto irmão, um objeto pai ou um objeto filho do objeto de referência.

5. Método de apoio à seleção de objeto na criação de uma página da web, de acordo com a reivindicação 1, caracterizado pelo fato de que compreende ainda a etapa de armazenamento de dados da página da web em uma árvore.

6. Método de apoio à seleção de objeto na criação de uma página da web, de acordo com a reivindicação 5, caracterizado pelo fato de que a seleção (S5) de objeto relacionado inclui a busca da árvore.

7. Equipamento para dar suporte à seleção de objeto na criação de uma página da web, o equipamento sendo caracterizado pelo fato de que compreende um sistema (10) incluindo um servidor (14) para armazenamento de uma página da web e um cliente (16) para edição da página da web por um usuário, o cliente (16) compreendendo uma tela de edição (70) da página da web, sendo eu o sistema (10) está configurado para: receber (S1) de uma entrada do usuário selecionando um objeto na tela de edição (70) de uma página web; determinar (S2) um ponto de referência na tela de edição (70) mediante recebimento (S1) da entrada do usuário; definir (S3) uma área de referência (76) na tela de edição (70) que inclui o ponto de referência; selecionar (S4) um objeto de referência colocado mais próximo ao ponto de referência dentre os objetos incluídos na área de referência (76); selecionar (S5) um objeto relacionado ao objeto de referência dentre os objetos incluídos na área de referência (76); e gerar (S6) um primeiro retângulo (200) que represente o objeto de referência e um segundo retângulo (202) que represente o objeto relacionado, o primeiro retângulo (200) e o segundo retângulo (202) possuindo um espaço entre eles para identificação do objeto selecionado, onde cada retângulo (200, 202) indica uma tag aberta e uma corresponde tag fechada do código fonte da página web.

8. Equipamento para dar suporte à seleção de objeto na criação de uma página da web, de acordo com a reivindicação 7, caracterizado pelo fato de que o recebimento da entrada do usuário inclui a leitura da localização de um ponteiro (74) na tela de edição (70)

9. Equipamento para dar suporte à seleção de objeto na criação de uma página da web, de acordo com a reivindicação 7, caracterizado pelo fato de que a área de referência (76) ser de um tamanho predeterminado e ser centrada no ponto de referência selecionado.

10. Equipamento para dar suporte à seleção de objeto na criação de uma página da web, de acordo com a reivindicação 7, caracterizado pelo fato de que a seleção (S5) de objeto relacionado define ao menos um objeto irmão, um objeto pai ou um objeto filho do objeto de referência.

11. Equipamento para dar suporte à seleção de objeto na criação de uma página da web, de acordo com a reivindicação 7, caracterizado pelo fato de que o sistema (10) é configurado para o armazenamento de dados da página da web em uma árvore.

12. Equipamento para dar suporte à seleção de objeto na criação de uma página da web, de acordo com a reivindicação 11, caracterizado pelo fato de que a seleção (S5) de objeto relacionado inclui a busca da árvore.