BR112016018388B1 - DEVICE IMPLEMENTABLE IN A WEBSITE CREATOR SYSTEM AND METHOD FOR A WEBSITE CREATOR SYSTEM - Google Patents

Abstract

DISPOSITIVO IMPLEMENTÁVEL EM UM SISTEMA CRIADOR DE WEBSITE E MÉTODO PARA UM SISTEMA CRIADOR DE WEBSITE. A presente invenção se refere a um dispositivo implementável em um programa de design de website inclui um comparador de versão com base em componente para comparar pelo menos duas versões de um website, pelo menos as duas versões tendo componentes em um conjunto de hierarquias e para gerar uma árvore de diferença que representa as diferenças nos componentes entre pelo menos duas versões do mesmo website, onde o comparador de versão pré-processa os componentes em cada versão única de pelo menos duas versões do website para determinar pelo menos uma dentre relações geométricas internas, semânticas, de conteúdo e atributo antes de comparar os componentes e as relações entre pelo menos duas versões do website utilizando pelo menos uma análise semântica, geométrica, de conteúdo e atributo. O dispositivo também inclui um combinador de versão para criar uma versão integrada das duas versões do website com base na árvore de diferença.DEVICE IMPLEMENTABLE IN A WEBSITE CREATOR SYSTEM AND METHOD FOR A WEBSITE CREATOR SYSTEM. The present invention relates to a device implementable in a website design program includes a component-based version comparer for comparing at least two versions of a website, at least two versions having components in a set of hierarchies, and for generating a difference tree representing the differences in components between at least two versions of the same website, where the version comparer pre-processes the components in each single version of at least two versions of the website to determine at least one of internal geometric relationships, semantic, content and attribute analysis before comparing the components and relationships between at least two versions of the website using at least a semantic, geometric, content and attribute analysis. The device also includes a version combiner to create an integrated version of the two website versions based on the diff tree.

Description

[001] Esse pedido reivindica a prioridade dos pedidos de patente provisórios norte-americanos 61/938,166 depositado em 11 de fevereiro de 2014 e 61/985,489 depositado em 29 de abri de 2014, todos aqui incorporados em sua totalidade por referência.[001] This application claims priority over US provisional patent applications 61/938,166 filed February 11, 2014 and 61/985,489 filed April 29, 2014, all of which are incorporated herein in their entirety by reference.

CAMPO DA INVENÇÃOFIELD OF THE INVENTION

[002] A presente invenção se refere a websites e aplicativos interativos geralmente e a comparação e combinação de versões de websites em particular.[002] The present invention relates to interactive websites and applications in general and the comparison and combination of website versions in particular.

HISTÓRICO DA INVENÇÃOBACKGROUND OF THE INVENTION

[003] Com o início da Internet, nos últimos anos, usuários têm acessado websites e aplicativos interativos cada vez mais utilizando smartphones, tablets e outros dispositivos móveis. Esses dispositivos vêm substituindo - ou complementando - o computador desktop pessoal de recursos totais, bem como os “telefones” menos capazes mais antigos. Isso se aplica a websites que residem em world-wide-web, bem como a outros aplicativos interativos que podem agora ser adquiridos de várias lojas de aplicativo oferecidas pelas maiores empresas como Apple, Google, Microsoft e Amazon.[003] With the onset of the Internet, in recent years, users have increasingly accessed websites and interactive applications using smartphones, tablets and other mobile devices. These devices have been replacing - or complementing - the full-featured personal desktop computer, as well as older, less capable "phones". This applies to websites residing on the world-wide-web, as well as other interactive applications that can now be purchased from the various app stores offered by major companies such as Apple, Google, Microsoft and Amazon.

[004] Websites e aplicativos interativos têm diferentes fatores de forma de exibição e características dependendo de onde eles são visualizados, como no desktop, no dispositivo móvel de pequena escala e no tablet móvel de escala média.[004] Interactive websites and apps have different display form factors and characteristics depending on where they are viewed, such as on the desktop, on the small-scale mobile device, and on the medium-scale mobile tablet.

SUMÁRIO DA INVENÇÃOSUMMARY OF THE INVENTION

[005] É provido, de acordo com uma realização preferida da presente invenção, um dispositivo implementável em um programa de design do website. O dispositivo inclui um comparador de versão com base no componente para comparar pelo menos duas versões de um website, pelo menos as duas versões tendo componentes em um conjunto de hierarquias, onde os componentes são pelo menos um dentre um componente visual, um container e um elemento de website não visual e para gerar uma árvore de diferença que representa as diferenças nos componentes entre pelo menos as duas versões do mesmo website e onde o comparador de versão pré-processa os componentes em cada versão única de pelo menos duas versões do website para determinar pelo menos uma dentre relações geométricas internas, semânticas, de conteúdo e atributo antes de comparar os componentes e as relações entre pelo menos as duas versões do website utilizando pelo menos uma dentre análise semântica, geométrica, de conteúdo e atributo. O dispositivo também inclui uma fusão de versão para criar uma versão integrada das duas versões do website com base na árvore de diferença.[005] According to a preferred embodiment of the present invention, an implementable device in a website design program is provided. The device includes a component-based version comparer for comparing at least two versions of a website, at least two versions having components in a set of hierarchies, where the components are at least one of a visual component, a container, and a non-visual website element and to generate a difference tree that represents the differences in components between at least two versions of the same website and where the version comparer pre-processes the components in each single version of at least two versions of the website to determine at least one of internal, semantic, content and attribute geometric relationships before comparing the components and relationships between at least the two versions of the website using at least one of semantic, geometric, content and attribute analysis. The device also includes version merging to create an integrated version of the two website versions based on the difference tree.

[006] Além disso, de acordo com uma realização preferida da presente invenção, o dispositivo também inclui o solucionador de versão para solucionar conflitos na geração da árvore de diferença.[006] Furthermore, according to a preferred embodiment of the present invention, the device also includes the version solver for solving conflicts in the generation of the difference tree.

[007] Ainda, de acordo com uma realização preferida da presente invenção, o dispositivo é implementável em pelo menos um dentre um servidor e um cliente.[007] Further, according to a preferred embodiment of the present invention, the device is deployable on at least one of a server and a client.

[008] Ainda, de acordo com uma realização preferida da presente invenção, pelo menos as duas versões do mesmo website incluem pelo menos uma versão de um sistema de controle de versão externa.[008] Furthermore, according to a preferred embodiment of the present invention, at least two versions of the same website include at least one version of an external version control system.

[009] Adicionalmente, de acordo com uma realização preferida da presente invenção, os componentes do website são armazenados em pelo menos um dentre um banco de dados, um armazenamento de objeto; arquivos de linguagem de marcação e arquivos de formato de intercâmbio de dados.[009] Additionally, according to a preferred embodiment of the present invention, the components of the website are stored in at least one of a database, an object store; markup language files and data interchange format files.

[0010] Além disso, de acordo com uma realização preferida da presente invenção, as hierarquias e a árvore de diferença são árvores e onde as árvores incluem nós que representam os componentes, os componentes tendo atributos.[0010] Furthermore, according to a preferred embodiment of the present invention, the hierarchies and the difference tree are trees and where the trees include nodes representing the components, the components having attributes.

[0011] Ainda, de acordo com uma realização preferida da presente invenção, o comparador de versão inclui um comparador de versão estrutural para comparar os nós através da comparação de suas relações geométricas, de conteúdo e semânticas; um comparador de versão com base na ordem para comparar os nós com base na ordem dos nós e para pré-combinar os nós de acordo com um identificador interno do sistema de design do website; um comparador de correspondência semântica para realizar a classificação semântica nos nós e combiná-los de acordo com suas classes semânticas e parâmetros geométricos; um seletor de comparação e coordenador para prover seleção e coordenação entre o comparador de versão estrutural, o comparador de versão com base na ordem e o comparador de correspondência semântica com base pelo menos em um dentre estrutura e atributos dos componentes e um gerador de árvore de diferença para gerar a árvore de diferença com base nos resultados de pelo menos um dentre o comparador de versão estrutural, o comparador de versão com base na ordem e o comparador de correspondência semântica.[0011] Further, according to a preferred embodiment of the present invention, the version comparer includes a structural version comparer for comparing the nodes by comparing their geometric, content and semantic relationships; an order-based version comparer to compare the nodes based on the order of the nodes and to pre-match the nodes according to an internal website design system identifier; a semantic matching comparator to perform semantic classification on nodes and match them according to their semantic classes and geometric parameters; a comparison selector and coordinator for providing selection and coordination among the structural version comparer, the order-based version comparer, and the semantic match comparer based on at least one of the structure and attributes of the components, and a tree generator difference to generate the difference tree based on the results of at least one of the structural version comparer, the order-based version comparer, and the semantic match comparer.

[0012] Ainda, de acordo com uma realização preferida da presente invenção, a árvore de diferença inclui pelo menos um dentre um nó de grupo e um nó de comparação.[0012] Further, according to a preferred embodiment of the present invention, the difference tree includes at least one of a group node and a comparison node.

[0013] Adicionalmente, de acordo com uma realização preferida da presente invenção, o solucionador de versão inclui um navegador de árvore de diferença para exibir a hierarquia da árvore de diferença para resolução manual de versão; um exibidor de página combinada para apresentar uma exibição de pelo menos um estado atual de uma página combinada; um navegador de atributo de componente para exibir os valores de um atributo de componente, incluindo exibir os dois valores para componentes para os quais há um nó de comparação; um seletor solucionador e coordenador para selecionar e coordenar entre o navegador de árvore de diferença, o exibidor de página combinada e o navegador de atributo de componente e um gerador de árvore de componente combinado para prover resultados combinados de pelo menos um dentre o navegador de árvore de diferença, o exibidor de página combinada e o navegador de atributo de componente e para gerar uma nova árvore de diferença solucionada.[0013] Additionally, according to a preferred embodiment of the present invention, the version solver includes a difference tree browser for displaying the difference tree hierarchy for manual version resolution; a combined page display for presenting a display of at least one current state of a combined page; a component attribute browser for displaying the values of a component attribute, including displaying the two values for components for which there is a compare node; a solver selector and coordinator to select and coordinate between the difference tree browser, the combined page viewer and the component attribute browser, and a combined component tree generator to provide combined results from at least one of the tree browsers difference tree, the combined page viewer and component attribute browser, and to generate a new resolved difference tree.

[0014] Além disso, de acordo com uma realização preferida da presente invenção, o comparador de versão estrutural inclui um aplicador de correspondência com base no ID para combinar todos os componentes nas árvores que têm o mesmo ID; um analisador de relação geométrica para realizar a correspondência geométrica para localizar pares entre componentes sem ID de correspondência nas árvores; um analisador de componente/atributo para verificar as mudanças nos atributos do componente; um analisador de semântica do componente para localizar pares entre componentes sem ID de correspondência; e um analisador de fusão de divisão para detectar a divisão e fusão dos componentes e containers e para ainda detectar as transformações de divisão de retenção de ID.[0014] Furthermore, according to a preferred embodiment of the present invention, the structural version comparer includes an ID-based matching applicator for matching all components in the trees that have the same ID; a geometric relation analyzer for performing geometric matching to find pairs between components without matching IDs in trees; a component/attribute parser to check changes to component attributes; a component semantic parser to find pairs between components with no matching ID; and a split merger analyzer to detect the split and merge of components and containers and to further detect ID-holding split transformations.

[0015] Ainda, de acordo com uma realização preferida da presente invenção, o comparador de versão com base na ordem inclui um pré-processador para analisar os componentes em cada árvore para extrair os conjuntos de componentes relevantes e para analisar e modificar os componentes para comparação onde necessário; um emissor da ordem para determinar uma ordem para os elementos dentro de cada nó; e um dispositivo de correspondência de sequência para realizar a correspondência de sequência nos componentes.[0015] Further, in accordance with a preferred embodiment of the present invention, the order-based version comparer includes a preprocessor for parsing the components in each tree to extract relevant component sets and for parsing and modifying the components to comparison where necessary; an order issuer for determining an order for the elements within each node; and a sequence matching device for performing sequence matching on the components.

[0016] Ainda, de acordo com uma realização preferida da presente invenção o comparador de correspondência semântica inclui um classificador de semântica para classificar os componentes em uma classificação semântica; e um dispositivo de correspondência de classe/atributo para criar uma correspondência entre os elementos de dois componentes compatíveis com base na classificação semântica.[0016] Further, according to a preferred embodiment of the present invention the semantic matching comparator includes a semantic classifier for classifying the components in a semantic classification; and a class/attribute matcher to create a match between the elements of two compatible components based on semantic classification.

[0017] Adicionalmente, de acordo com uma realização preferida da presente invenção, a relação geométrica é pelo menos um dentre sobreposição, intersecção, proximidade, posição relativa e tamanho relativo.[0017] Additionally, according to a preferred embodiment of the present invention, the geometric relationship is at least one of overlap, intersection, proximity, relative position and relative size.

[0018] Além disso, de acordo com uma realização preferida da presente invenção, o exibidor de página combinada inclui um animador para animar a exibição dos componentes conflitantes alternando entre pelo menos um dos estados.[0018] Furthermore, according to a preferred embodiment of the present invention, the combined page display includes an animator for animating the display of conflicting components by switching between at least one of the states.

[0019] Ainda, de acordo com uma realização preferida da presente invenção, o animador é pelo menos um dentre automático e controlado por usuário.[0019] Further, according to a preferred embodiment of the present invention, the animator is at least one of automatic and user-controlled.

[0020] Ainda, de acordo com uma realização preferida da presente invenção, o animador é integrado com o processamento de layout dinâmico.[0020] Further, according to a preferred embodiment of the present invention, the animator is integrated with dynamic layout processing.

[0021] Adicionalmente, de acordo com uma realização preferida da presente invenção, a coordenação é com base em uma métrica combinada de resultados retornados do comparador de versão estrutural, o comparador de versão com base na ordem e o comparador de correspondência semântica.[0021] Additionally, according to a preferred embodiment of the present invention, the coordination is based on a combined metric of results returned from the structural version comparer, the order-based version comparer, and the semantic matching comparer.

[0022] Além disso, de acordo com uma realização preferida da presente invenção, a métrica é uma média ponderada.[0022] Furthermore, according to a preferred embodiment of the present invention, the metric is a weighted average.

[0023] Ainda, de acordo com uma realização preferida da presente invenção, o navegador de árvore de diferença inclui um gerador do menu do sistema hierárquico para gerar uma exibição dos componentes conflitantes.[0023] Further, in accordance with a preferred embodiment of the present invention, the difference tree browser includes a hierarchical system menu generator for generating a display of conflicting components.

[0024] Ainda, de acordo com uma realização preferida da presente invenção, a exibição de pelo menos um estado atual da página combinada é com base em uma média ponderada dos estados.[0024] Furthermore, according to a preferred embodiment of the present invention, the display of at least one current state of the combined page is based on a weighted average of the states.

[0025] É provido, de acordo com uma realização preferida da presente invenção, um método. O método inclui comparar pelo menos duas versões de um website, pelo menos as duas versões tendo componentes em um conjunto de hierarquias, onde os componentes são pelo menos um dentre um componente visual, um container e um elemento de website não visual; gerar uma árvore de diferença que representa as diferenças nos componentes entre pelo menos as duas versões do mesmo website; pré-processar os componentes em cada versão única pelo menos das duas versões do website para determinar pelo menos uma dentre relações geométricas internas, semânticas, de conteúdo e atributo; comparar os componentes e as relações entre pelo menos as duas versões do website utilizando pelo menos uma dentre análise semântica, geométrica, de conteúdo e atributo; e criar uma versão integrada das duas versões do website com base na árvore de diferença.[0025] There is provided, in accordance with a preferred embodiment of the present invention, a method. The method includes comparing at least two versions of a website, at least two versions having components in a set of hierarchies, where the components are at least one of a visual component, a container and a non-visual website element; generate a difference tree that represents the differences in components between at least two versions of the same website; pre-process the components in each single version of at least two versions of the website to determine at least one of internal geometric, semantic, content and attribute relationships; compare the components and relationships between at least the two versions of the website using at least one of semantic, geometric, content and attribute analysis; and create an integrated version of the two website versions based on the difference tree.

[0026] Além disso, de acordo com uma realização preferida da presente invenção, o método inclui solucionar conflitos na geração da árvore de diferença.[0026] Furthermore, according to a preferred embodiment of the present invention, the method includes resolving conflicts in the generation of the difference tree.

[0027] Ainda, de acordo com uma realização preferida da presente invenção, o método é implementável em pelo menos um dentre um servidor e um cliente.[0027] Further, according to a preferred embodiment of the present invention, the method is implementable on at least one of a server and a client.

[0028] Ainda, de acordo com uma realização preferida da presente invenção, pelo menos as duas versões do mesmo website incluem pelo menos uma versão de um sistema de controle de versão externa.[0028] Further, according to a preferred embodiment of the present invention, at least two versions of the same website include at least one version of an external version control system.

[0029] Adicionalmente, de acordo com uma realização preferida da presente invenção, os componentes do website são armazenados em pelo menos um dentre um banco de dados, um armazenamento de objeto; arquivos de linguagem de marcação e arquivos de formato de intercâmbio de dados.[0029] Additionally, according to a preferred embodiment of the present invention, the components of the website are stored in at least one of a database, an object store; markup language files and data interchange format files.

[0030] Além disso, de acordo com uma realização preferida da presente invenção, as hierarquias e a árvore de diferença são árvores e onde as árvores incluem nós que representam os componentes, os componentes tendo atributos.[0030] Furthermore, according to a preferred embodiment of the present invention, the hierarchies and the difference tree are trees and where the trees include nodes representing the components, the components having attributes.

[0031] Ainda, de acordo com uma realização preferida da presente invenção, a comparação de pelo menos duas versões de um website, geração, pré-processamento, comparação dos componentes e das relações e a criação inclui comparar os nós através da comparação de suas relações geométricas, de conteúdo e semânticas; comparação dos nós com base na ordem dos nós e pré-correspondência dos nós de acordo com um identificador interno do sistema de design do website; realização da classificação semântica nos nós e fazendo a correspondência deles de acordo com suas classes semânticas e parâmetros geométricos, provisão da seleção e coordenação entre a comparação dos nós através da comparação de suas relações geométricas, de conteúdo e semânticas, a comparação dos nós com base na ordem dos nós e pré-correspondência e a realização da classificação semântica com base pelo menos em um dentre a estrutura e os atributos dos componentes; e geração da árvore de diferença com base nos resultados de pelo menos um da comparação dos nós através da comparação de suas relações geométricas, de conteúdo e semânticas, a comparação dos nós com base na ordem dos nós e pré- correspondência e realização da classificação semântica.[0031] Further, according to a preferred embodiment of the present invention, the comparison of at least two versions of a website, generation, pre-processing, comparison of components and relations and creation includes comparing the nodes by comparing their geometric, content and semantic relationships; comparing the nodes based on the order of the nodes and pre-matching the nodes according to an internal website design system identifier; performing semantic classification on nodes and matching them according to their semantic classes and geometric parameters, provision of selection and coordination between comparing nodes by comparing their geometric, content and semantic relationships, comparing nodes based on in the order of the nodes and pre-matching and performing the semantic classification based on at least one of the structure and attributes of the components; and generating the difference tree based on the results of at least one of comparing the nodes by comparing their geometric, content and semantic relationships, comparing the nodes based on the order of the nodes and pre-matching and performing the semantic classification .

[0032] Ainda, de acordo com uma realização preferida da presente invenção, a árvore de diferença inclui pelo menos um dentre um nó de grupo e um nó de comparação.[0032] Further, according to a preferred embodiment of the present invention, the difference tree includes at least one of a group node and a comparison node.

[0033] Adicionalmente, de acordo com uma realização preferida da presente invenção, a resolução inclui exibir a hierarquia da árvore de diferença para resolução manual de versão; apresentar uma exibição de pelo menos um estado atual de uma página combinada; exibir os valores de um atributo de componente, incluindo exibir os dois valores para componentes para os quais há um nó de comparação; selecionar e coordenar entre a exibição da hierarquia da árvore de diferença, a apresentação e a exibição dos valores de um atributo de componente; prover os resultados combinados a partir da exibição do navegador de árvore de diferença, da apresentação e da exibição dos valores de um atributo de componente; e gerar uma nova árvore de diferença solucionada.[0033] Additionally, according to a preferred embodiment of the present invention, resolution includes displaying the difference tree hierarchy for manual version resolution; present a display of at least one current state of a combined page; display the values of a component attribute, including displaying the two values for components for which there is a compare node; select and coordinate between the hierarchy display of the difference tree, the presentation and the display of the values of a component attribute; provide the combined results from the difference tree browser display, presentation and display of values of a component attribute; and generate a new solved difference tree.

[0034] Além disso, de acordo com uma realização preferida da presente invenção, a comparação dos nós com base na ordem dos nós e pré-correspondência inclui fazer a correspondência de todos os componentes nas árvores que têm o mesmo ID; realizar a correspondência geométrica para localizar pares entre componentes sem ID de correspondência nas árvores, verificando as mudanças nos atributos do componente; localizar pares entre componentes sem ID de correspondência; e detectar a divisão e fusão dos componentes e containers e ainda detectar as transformações de divisão de retenção do ID.[0034] Furthermore, according to a preferred embodiment of the present invention, comparing nodes based on order of nodes and pre-matching includes matching all components in the trees that have the same ID; perform geometric matching to find pairs between components without matching IDs in trees, checking for changes in component attributes; find pairs between components with no matching ID; and detect the splitting and merging of components and containers, and even detect the ID-holding split transforms.

[0035] Ainda, de acordo com uma realização preferida da presente invenção, a comparação dos nós através da comparação de suas relações geométricas, de conteúdo e semânticas inclui pré-processar os componentes em cada árvore para extrair os conjuntos de componentes relevantes e analisar e modificar os componentes para comparação onde necessário; determinar uma ordem para os elementos dentro de cada nó; e realizar a correspondência de sequência nos componentes.[0035] Further, according to a preferred embodiment of the present invention, comparing the nodes by comparing their geometric, content and semantic relationships includes pre-processing the components in each tree to extract the relevant component sets and analyze and modify components for comparison where necessary; determine an order for the elements within each node; and perform string matching on the components.

[0036] Ainda, de acordo com uma realização preferida da presente invenção, a realização da classificação semântica inclui classificar os componentes em uma classificação semântica; e criar uma correspondência entre elementos de dois componentes compatíveis com base na classificação semântica.[0036] Further, according to a preferred embodiment of the present invention, performing the semantic classification includes classifying the components in a semantic classification; and create a match between elements of two compatible components based on semantic classification.

[0037] Adicionalmente, de acordo com uma realização preferida da presente invenção, a relação geométrica é pelo menos um dentre sobreposição, intersecção, proximidade, posição relativa e tamanho relativo.[0037] Additionally, according to a preferred embodiment of the present invention, the geometric relationship is at least one of overlap, intersection, proximity, relative position and relative size.

[0038] Além disso, de acordo com uma realização preferida da presente invenção, a apresentação de uma exibição de pelo menos um estado atual de uma página combinada inclui animar a exibição dos componentes conflitantes alternando entre pelo menos um dos estados.[0038] Furthermore, according to a preferred embodiment of the present invention, presenting a display of at least one current state of a combined page includes animating the display of conflicting components by switching between at least one of the states.

[0039] Ainda, de acordo com uma realização preferida da presente invenção, a animação é pelo menos um dentre automático e controlado por usuário.[0039] Further, according to a preferred embodiment of the present invention, the animation is at least one of automatic and user-controlled.

[0040] Ainda, de acordo com uma realização preferida da presente invenção, a animação é integrada com o processamento de layout dinâmico.[0040] Further, according to a preferred embodiment of the present invention, animation is integrated with dynamic layout processing.

[0041] Adicionalmente, de acordo com uma realização preferida da presente invenção, a coordenação é com base em uma métrica combinada de resultados retornados do comparador de versão estrutural, do comparador de versão com base na ordem e do comparador de correspondência semântica.[0041] Additionally, according to a preferred embodiment of the present invention, the coordination is based on a combined metric of results returned from the structural version comparer, the order-based version comparer, and the semantic matching comparer.

[0042] Além disso, de acordo com uma realização preferida da presente invenção, a métrica é uma média ponderada.[0042] Furthermore, according to a preferred embodiment of the present invention, the metric is a weighted average.

[0043] Ainda, de acordo com uma realização preferida da presente invenção, a exibição da hierarquia da árvore de diferença para resolução manual de versão inclui gerar uma exibição de componentes conflitantes.[0043] Further, according to a preferred embodiment of the present invention, displaying the difference tree hierarchy for manual version resolution includes generating a display of conflicting components.

[0044] Ainda, de acordo com uma realização preferida da presente invenção, a exibição de pelo menos um estado atual da página combinada é com base em uma média ponderada dos estados.[0044] Furthermore, according to a preferred embodiment of the present invention, the display of at least one current state of the combined page is based on a weighted average of the states.

BREVE DESCRIÇÃO DOS DESENHOSBRIEF DESCRIPTION OF THE DRAWINGS

[0045] A matéria referida como a invenção é particularmente indicada e distintamente reivindicada na parte de conclusão do relatório descritivo. A invenção, entretanto, ambos para organização e método de operação, com os objetos, características e vantagens desta, pode ser melhor entendida com referência à seguinte descrição detalhada quando lida com os desenhos anexos nos quais:[0045] The matter referred to as the invention is particularly indicated and distinctly claimed in the concluding part of the specification. The invention, however, both for organization and method of operation, with the objects, features and advantages thereof, may be better understood with reference to the following detailed description when read with the accompanying drawings in which:

[0046] A Figura 1 é uma ilustração esquemática de um sistema para converter aplicativos virtuais entre plataformas, construídas e operativas de acordo com a presente invenção;[0046] Figure 1 is a schematic illustration of a system for converting virtual applications between platforms, built and operative in accordance with the present invention;

[0047] A Figura 2 é uma ilustração esquemática dos elementos de um processador, construída e operativa de acordo com a presente invenção;[0047] Figure 2 is a schematic illustration of the elements of a processor, built and operative according to the present invention;

[0048] A Figura 3 é uma ilustração esquemática da âncora de layout dinâmico que quebra quando os componentes são movidos;[0048] Figure 3 is a schematic illustration of the dynamic layout anchor that breaks when components are moved;

[0049] A Figura 4 é uma ilustração esquemática da razão pela qual as linhas verticais são irrelevantes em uma tela móvel;[0049] Figure 4 is a schematic illustration of why vertical lines are irrelevant on a mobile screen;

[0050] A Figura 5 é uma ilustração esquemática dos elementos de um criador de supernó, construída e operativa de acordo com a presente invenção;[0050] Figure 5 is a schematic illustration of the elements of a supernode creator constructed and operative in accordance with the present invention;

[0051] A Figura 6 é uma ilustração de um realinhamento de texto necessária devido à mudança de tamanho de fonte e tamanho de campo;[0051] Figure 6 is an illustration of a text realignment required due to changing font size and field size;

[0052] A Figura 7 é uma imagem que não parece correta quando redimensionada sem preservar a relação de aspecto;[0052] Figure 7 is an image that does not look correct when resized without preserving the aspect ratio;

[0053] As Figuras 8A, 8B e 8C são ilustrações esquemáticas do mapeamento entre o aplicativo visual e sua estrutura de supernó correspondente, conforme realizado de acordo com a presente invenção;[0053] Figures 8A, 8B and 8C are schematic illustrations of the mapping between the visual application and its corresponding supernode structure, as performed in accordance with the present invention;

[0054] A Figura 9 é uma ilustração esquemática dos componentes dentro dos containers antes da reorganização;[0054] Figure 9 is a schematic illustration of the components inside the containers before the reorganization;

[0055] A Figura 10 é uma ilustração esquemática dos componentes da Figura 9 após a reorganização;[0055] Figure 10 is a schematic illustration of the components of Figure 9 after reorganization;

[0056] A Figura 11 é uma ilustração esquemática dos elementos de um emissor da ordem, construída e operativa de acordo com a presente invenção;[0056] Figure 11 is a schematic illustration of the elements of a command issuer, constructed and operative according to the present invention;

[0057] A Figura 12 é uma ilustração esquemática de uma disposição de quatro parágrafos de texto com múltiplas ordens de leitura possíveis;[0057] Figure 12 is a schematic illustration of a layout of four text paragraphs with multiple possible reading orders;

[0058] A Figura 13 é uma ilustração esquemática de uma disposição que inclui dois parágrafos de texto e duas imagens que têm múltiplas ordens de leitura possíveis;[0058] Figure 13 is a schematic illustration of a layout that includes two paragraphs of text and two images that have multiple possible reading orders;

[0059] As Figuras 14A, 14B e 14C são ilustrações esquemáticas da conversão do conjunto de elementos dentro de um supernó em um gráfico de elemento e, então, uma ordem do elemento, realizada de acordo com a presente invenção;[0059] Figures 14A, 14B and 14C are schematic illustrations of the conversion of the set of elements within a supernode into an element graph and then an element order, performed in accordance with the present invention;

[0060] As Figuras 15A, 15B e 15C são um algoritmo que mostra a funcionalidade de uma direção primária com emissor da ordem de divisão e fusão, construída e operativa de acordo com a presente invenção;[0060] Figures 15A, 15B and 15C are an algorithm that shows the functionality of a primary direction with issuer of the division and merge order, constructed and operative according to the present invention;

[0061] As Figuras 16A, 16B, 16C, 16D, 16E, 16F, 16G e 16H são ilustrações esquemáticas do processo da direção primária com emissor da ordem de divisão e fusão das Figuras 15A, 15B e 15C, construída e operativa de acordo com a presente invenção;[0061] Figures 16A, 16B, 16C, 16D, 16E, 16F, 16G and 16H are schematic illustrations of the process of the primary direction with issuer of the order of division and merger of Figures 15A, 15B and 15C, built and operative in accordance with the present invention;

[0062] A Figura 17 é um exemplo de um layout do website;[0062] Figure 17 is an example of a website layout;

[0063] A Figura 18 é uma ilustração esquemática de divisões horizontal e vertical de supernós, construída e operativa de acordo com a presente invenção;[0063] Figure 18 is a schematic illustration of horizontal and vertical divisions of supernodes, constructed and operative in accordance with the present invention;

[0064] A Figura 19 é um exemplo para avaliar as divisões horizontal e vertical com base na análise de similaridade de padrão anterior, construída e operativa de acordo com a presente invenção;[0064] Figure 19 is an example for evaluating the horizontal and vertical divisions based on the previous pattern similarity analysis, constructed and operative according to the present invention;

[0065] A Figura 20 é uma ilustração esquemática de como uma divisão vertical de supernós é preferida conforme os componentes são mais bem alinhados em linhas horizontais, construída e operativa de acordo com a presente invenção;[0065] Figure 20 is a schematic illustration of how a vertical division of supernodes is preferred as the components are better aligned in horizontal lines, constructed and operative in accordance with the present invention;

[0066] A Figura 21 é uma ilustração esquemática de uma configuração do elemento de intertravamento;[0066] Figure 21 is a schematic illustration of an interlocking element configuration;

[0067] A Figura 22 é uma ilustração esquemática de pares de componente tendo localizações alternadas;[0067] Figure 22 is a schematic illustration of component pairs having alternate locations;

[0068] A Figura 23 é uma ilustração esquemática de como os quatro componentes de imagem podem ser divididos em pares em duas formas;[0068] Figure 23 is a schematic illustration of how the four image components can be paired in two ways;

[0069] A Figura 24 é uma ilustração esquemática de um formato de exibição não retangular remanescente após construir os componentes automaticamente adicionados;[0069] Figure 24 is a schematic illustration of a non-rectangular display format remaining after building the automatically added components;

[0070] A Figura 25 é uma ilustração esquemática dos elementos de um reconversor, construída e operativa de acordo com a presente invenção;[0070] Figure 25 is a schematic illustration of the elements of a reconverter, built and operative according to the present invention;

[0071] A Figura 26 é uma ilustração esquemática dos elementos de um adicionador de componente, construída e operativa de acordo com a presente invenção;[0071] Figure 26 is a schematic illustration of the elements of a component adder constructed and operative in accordance with the present invention;

[0072] A Figura 27 é uma ilustração esquemática da funcionalidade do reconversor da Figura 25, construída e operativa de acordo com a presente invenção;[0072] Figure 27 is a schematic illustration of the functionality of the reconverter of Figure 25, built and operative according to the present invention;

[0073] As Figuras 28A, 28B, 28C. 28D, 28E, 28F e 28G são ilustrações esquemáticas da colocação dos componentes ao converter ou reconverter uma página da web de uma configuração do layout do desktop em uma configuração de layout do dispositivo móvel, construída e operativa de acordo com a presente invenção;[0073] Figures 28A, 28B, 28C. 28D, 28E, 28F and 28G are schematic illustrations of the placement of components when converting or re-converting a web page from a desktop layout configuration to a mobile device layout configuration constructed and operative in accordance with the present invention;

[0074] A Figura 29 é uma ilustração esquemática dos métodos para inserir os componentes na versão do dispositivo móvel de uma página da web;[0074] Figure 29 is a schematic illustration of the methods for inserting components into the mobile device version of a web page;

[0075] A Figura 30 é uma ilustração esquemática da remoção dos componentes da versão do dispositivo móvel de uma página da web;[0075] Figure 30 is a schematic illustration of removing components from the mobile device version of a web page;

[0076] A Figura 31 é uma ilustração esquemática de um sistema utilizando um comparador e combinador para comparar e combinar os componentes de diferentes versões de um website, construída e operativa de acordo com a presente invenção;[0076] Figure 31 is a schematic illustration of a system using a comparator and combiner to compare and combine the components of different versions of a website, built and operative in accordance with the present invention;

[0077] A Figura 32 é uma ilustração esquemática de como as diferentes versões de um website podem ser criadas e combinadas ao longo do tempo;[0077] Figure 32 is a schematic illustration of how different versions of a website can be created and combined over time;

[0078] A Figura 33 é uma ilustração esquemática dos elementos do comparador e combinador da Figura 31, construída e operativa de acordo com a presente invenção;[0078] Figure 33 is a schematic illustration of elements of the comparator and combiner of Figure 31, constructed and operative in accordance with the present invention;

[0079] As Figuras 34A e 34B são ilustrações esquemáticas dos elementos do comparador de versão e solucionador de versão da Figura 33, construída e operativa de acordo com a presente invenção;[0079] Figures 34A and 34B are schematic illustrations of the elements of the version comparator and version solver of Figure 33, constructed and operative according to the present invention;

[0080] A Figura 35 é uma ilustração esquemática do uso de nós de comparação e de grupo;[0080] Figure 35 is a schematic illustration of the use of comparison and group nodes;

[0081] A Figura 36 é uma ilustração esquemática do uso de nós de comparação com containers de múltiplas páginas;[0081] Figure 36 is a schematic illustration of the use of diff nodes with multipage containers;

[0082] As Figuras 37A, 37B e 37C são ilustrações esquemáticas dos elementos do comparador de versão estrutural, do comparador com base na ordem e do comparador de correspondência semântica da Figura 34A, construída e operativa de acordo com a presente invenção;[0082] Figures 37A, 37B and 37C are schematic illustrations of the elements of the structural version comparator, the order-based comparator and the semantic matching comparator of Figure 34A, constructed and operative in accordance with the present invention;

[0083] A Figura 38 é uma ilustração esquemática da correspondência geométrica dos componentes;[0083] Figure 38 is a schematic illustration of the geometric correspondence of the components;

[0084] A Figura 39 é uma ilustração esquemática de uma transformação de divisão de retenção do ID;[0084] Figure 39 is a schematic illustration of an ID retention split transformation;

[0085] A Figura 40 é uma ilustração esquemática de uma simples hierarquia semântica;[0085] Figure 40 is a schematic illustration of a simple semantic hierarchy;

[0086] A Figura 41 é uma ilustração esquemática de correspondência do componente com base em classe/atributo que integra a informação de ligação semântica;[0086] Figure 41 is a schematic illustration of class/attribute-based component matching that integrates semantic linkage information;

[0087] A Figura 42 é uma ilustração esquemática de uma realização alternativa do sistema da Figura 31, construída e operativa de acordo com a presente invenção; e[0087] Figure 42 is a schematic illustration of an alternative embodiment of the system of Figure 31, constructed and operative in accordance with the present invention; It is

[0088] A Figura 43 é uma ilustração esquemática de um elemento do navegador de árvore de diferença da Figura 34B.[0088] Figure 43 is a schematic illustration of a difference tree browser element of Figure 34B.

[0089] Será observado que para simplicidade e clareza da ilustração, os elementos mostrados nas figuras não têm sido necessariamente desenhados em escala. Por exemplo, as dimensões de alguns dos elementos podem ser exageradas em relação a outros elementos para clareza. Ainda, onde considerado correto, os numerais de referência podem ser repetidos entre as figuras para indicar os elementos correspondentes ou análogos.[0089] It will be noted that for simplicity and clarity of illustration, the elements shown in the figures have not necessarily been drawn to scale. For example, the dimensions of some of the elements may be exaggerated relative to other elements for clarity. Also, where deemed correct, reference numerals may be repeated between figures to indicate corresponding or analogous elements.

DESCRIÇÃO DETALHADA DA PRESENTE INVENÇÃODETAILED DESCRIPTION OF THE PRESENT INVENTION

[0090] Na seguinte descrição detalhada, vários detalhes específicos são definidos a fim de prover um entendimento profundo da invenção. Entretanto, será entendido pelos técnicos no assunto que a presente invenção pode ser praticada sem esses detalhes específicos. Em outros casos, métodos, procedimentos e componentes bem conhecidos não têm sido descritos em detalhes para não ocultar a presente invenção.[0090] In the following detailed description, several specific details are defined in order to provide a thorough understanding of the invention. However, it will be understood by those skilled in the art that the present invention can be practiced without these specific details. In other cases, well known methods, procedures and components have not been described in detail in order not to obscure the present invention.

[0091] Os requerentes observaram que websites e aplicativos existentes são tipicamente desenhados para o PC desktop, com exibição em grande escala de alta resolução sendo muito comum. Ao acessar tais websites e aplicativos utilizando exibição em escala menor, inúmeros problemas são evidentes, incluindo (por exemplo): rolagem necessária excessiva (em particular, rolagem horizontal); condições difíceis de navegação; tamanhos de fonte adaptados não móveis; designs e componentes de exibição que não são adaptados para telas sensíveis ao toque móveis, etc.[0091] Applicants noted that existing websites and applications are typically designed for the desktop PC, with high-resolution large-scale display being very common. When accessing such websites and applications using a smaller scale display, a number of issues are evident, including (for example): excessive required scrolling (in particular, horizontal scrolling); difficult sailing conditions; non-mobile adapted font sizes; display designs and components that are not adapted for mobile touchscreens, etc.

[0092] Visto que esses websites podem ser visualizados em diferentes plataformas dimensionadas, como tablets e telefones móveis, um desenvolvedor seria solicitado para criar múltiplas versões do website ou do aplicativo para auxiliar esses múltiplos cenários de uso e para manter a aparência e sensação do website original. Essas versões podem diferir em múltiplas formas, incluindo a disposição visual, os componentes de exibição (widgets) em uso, orientação da tela sensível ao toque e mais.[0092] Since these websites can be viewed on different sized platforms such as tablets and mobile phones, a developer would be required to create multiple versions of the website or app to support these multiple usage scenarios and to maintain the look and feel of the website original. These versions can differ in multiple ways, including visual layout, display components (widgets) in use, touchscreen orientation, and more.

[0093] Os requerentes observaram também que os sistemas existentes para converter visualizações de website encaixam-se em plataformas de visualização pertinentes destinadas tipicamente a resolver os problemas para converter websites desenhados utilizando linguagens de marcação, como HTML (Hyper Text Markup Language) e XML (Extensible Markup Language). Esses poderiam ser websites desenhados diretamente na linguagem de marcação dada, ou criados utilizando um gerador de código que cria arquivos de linguagem de marcação para hospedagem posterior.[0093] Applicants have also noted that existing systems for converting website views fit into relevant view platforms typically intended to solve the problems of converting websites designed using markup languages such as HTML (Hyper Text Markup Language) and XML ( Extensible Markup Language). These could be websites designed directly in the given markup language, or created using a code generator that creates markup language files for later hosting.

[0094] Os sistemas existentes focaram também em analisar o website original, extraindo deles as informações de conteúdo e criando um website móvel modificado. Tal tecnologia se originou tipicamente do Reconhecimento Óptico de Caracteres (Optical Character Recognition - OCR) e de sistemas de análise de página, que tem como objetivo a extração de conteúdo ao invés da adaptação de conteúdo e design. Assim, sistemas existentes operam tipicamente para extrair o conteúdo e torná-lo legível em um dispositivo menor - enquanto desmantela muito do design e da aparência e sensação do website original.[0094] Existing systems also focused on analyzing the original website, extracting content information from it and creating a modified mobile website. Such technology has typically originated from Optical Character Recognition (OCR) and page analysis systems, which aim at extracting content rather than adapting content and design. Thus, existing systems typically operate to extract the content and make it readable on a smaller device - while stripping away much of the design and look and feel of the original website.

[0095] Será observado que a análise de websites existentes pode ser complicada. Em particular, algumas partes do website podem ser dinamicamente geradas, e a relação entre os elementos do website pode também ser implementada processualmente. Assim, é difícil entender precisamente o website - a menos que uma conversão seja realizada durante a operação do website (por exemplo, através de uma execução de um navegador sem cabeçalho em um servidor de conversão). Entretanto, esse último método tem uma sobrecarga considerável e, em particular, pode exigir que uma dada página possa ser adaptada a um tamanho móvel cada vez que é recuperada por cada usuário - ao invés de ser convertida uma vez com os resultados da conversão reutilizados por todos os usuários.[0095] It will be noted that the analysis of existing websites can be tricky. In particular, some parts of the website may be dynamically generated, and the relationship between website elements may also be procedurally implemented. Thus, it is difficult to accurately understand the website - unless a conversion is performed during the operation of the website (for example, through a headless browser running on a conversion server). However, this last method has considerable overhead and, in particular, may require that a given page be able to be adapted to a sliding size each time it is retrieved by each user - rather than being converted once with the conversion results reused by each user. all users.

[0096] Outro problema com sistemas existentes é o suporte de mudanças e edições ao website original após conversão. Será observado que alguns sistemas foram desenvolvidos para tentar comparar a versão mais recente da página às versões anteriores da mesma página, e tentar localizar as diferenças. Isso foi feito utilizando regras de comparação com base na similaridade do texto, na posição no arquivo fonte, no uso de fonte, etc. Isso geralmente exige que o designer crie manualmente um vínculo entre a versão do dispositivo móvel e os elementos da versão original do desktop.[0096] Another problem with existing systems is supporting changes and edits to the original website after conversion. It will be noted that some systems have been developed to try to compare the most recent version of the page to previous versions of the same page, and try to find the differences. This was done using comparison rules based on text similarity, position in the source file, font usage, etc. This often requires the designer to manually create a link between the mobile device version and elements of the original desktop version.

[0097] Entretanto, visto que a edição da página é realizada separadamente do processo de conversão, o website pode ter alterado drasticamente entre as duas versões. Por exemplo, um novo desenvolvedor (tendo um estilo completamente diferente) pode ter começado a trabalhar no website. Alternativamente, uma nova tecnologia ou biblioteca poderia ter sido combinada ao website. Os sistemas existentes podem tentar comparar as duas versões website - que podem ser muito diferentes (internamente) uma da outra embora elas pareçam as mesmas. A comparação de duas versões do mesmo website pode ser feita heuristicamente, mas ainda não será capaz de combinar elementos de website excessivamente modificados.[0097] However, since page editing is performed separately from the conversion process, the website may have changed dramatically between the two versions. For example, a new developer (having a completely different style) may have started working on the website. Alternatively, a new technology or library could have been combined with the website. Existing systems may try to compare the two website versions - which may be very different (internally) from each other even though they look the same. Comparing two versions of the same website can be done heuristically, but it still won't be able to match overly modified website elements.

[0098] Os requerentes observaram que as limitações mencionadas acima podem ser superadas utilizando um sistema de design visual orientado do objeto. Tal sistema pode ser utilizado para criar aplicativos e websites interativos e pode ser utilizado para manter e criar definições de layout paralelas entre diferentes plataformas de exibição para um dado aplicativo. Um sistema de design visual pode também prover um modelo de dados consistente interno do objeto do website, com atributos precisamente especificados para todos os objetos do website. Assim, um sistema de design visual pode prover múltiplos layouts visuais para um único website ou aplicativo com um único conjunto de componentes.[0098] Applicants have noted that the limitations mentioned above can be overcome by using an object-oriented visual design system. Such a system can be used to create interactive websites and applications and can be used to maintain and create parallel layout definitions across different display platforms for a given application. A visual design system can also provide a consistent internal data model of the website object, with precisely specified attributes for all website objects. Thus, a visual design system can provide multiple visual layouts for a single website or application with a single set of components.

[0099] Os requerentes observaram também que o uso de tal sistema de design visual pode incluir as informações de histórico da sessão de edição coletadas que podem ser utilizadas para detectar mudanças de componente e relações de componente. Assim, por exemplo, se um designer duplica um par de objetos (uma imagem e uma legenda) um número de vezes, pode ser inferido que esse par pode ser relacionado e que é provável que o par de membros deva permanecer próximo quando sendo convertido a móvel. Assim, objetos de containers, etc. podem ser convertidos enquanto mantêm sua hierarquia e relações de objeto originais. Outras informações podem incluir objetos que são editados ou movidos juntos, objetos que foram historicamente agrupados, objetos ou conjuntos de objetos que foram criados duplicando objetos ou conjuntos de objetos preexistentes e o tempo de edição do objeto, por exemplo, houve uma alteração específica aplicada em uma sequência para certo subconjunto dos objetos.[0099] Applicants have also noted that the use of such a visual design system may include collected editing session history information that may be used to detect component changes and component relationships. So, for example, if a designer duplicates a pair of objects (an image and a caption) a number of times, it can be inferred that this pair can be related and that it is likely that the pair of members should remain close when being converted to mobile. Thus, container objects, etc. can be converted while maintaining their original hierarchy and object relationships. Other information may include objects that are edited or moved together, objects that were historically grouped, objects or sets of objects that were created by duplicating pre-existing objects or sets of objects, and the time the object was edited, for example, was there a specific change applied at a sequence for a certain subset of the objects.

[00100] Os sistemas de design visual podem tipicamente ter um identificador único (ID) por objeto. Tal ID pode ser utilizado para combinar diferentes versões do website e manter mudanças do website consistentemente. Além disso, os sistemas de design visual podem empregar o layout dinâmico, incluindo âncoras entre componentes exibidos que controlam mudanças de layout feitas sobre eles. Tais âncoras podem ser utilizadas para derivar agrupamento e informações de layout adicionais e também ser utilizadas para ajustar precisamente o layout para diferentes tamanhos de tela móvel. O subsistema de conversão pode de fato gerar automaticamente âncoras adicionais de layout dinâmico para uso posterior durante a exibição.[00100] Visual design systems can typically have a unique identifier (ID) per object. Such an ID can be used to combine different versions of the website and keep changes to the website consistently. In addition, visual design systems can employ dynamic layout, including anchors between displayed components that control layout changes made to them. Such anchors can be used to derive additional grouping and layout information and also be used to precisely adjust the layout for different mobile screen sizes. The conversion subsystem can in fact automatically generate additional dynamic layout anchors for later use during display.

[00101] Além disso, visto que os smartphones se proliferaram, a navegação HTML avançada e em grande escala, similar ao que está disponível no desktop, se tornou comum no ambiente móvel também. Portanto, um sistema é exigido, que pode utilizar manipulação similar para todas as plataformas (desktop, tablet e móvel), para utilizar os navegadores avançados disponíveis em todas as plataformas.[00101] Furthermore, as smartphones have proliferated, rich and large-scale HTML browsing, similar to what is available on the desktop, has become commonplace in the mobile environment as well. Therefore, a system is required, which can use similar handling for all platforms (desktop, tablet and mobile), to utilize the advanced browsers available on all platforms.

[00102] Será observado que aplicativos virtuais podem ser sistemas autônomos, como o PowerPoint Presentation Program, comercialmente disponível do Microsoft Inc., ou podem ser incorporados dentro de um sistema de edição maior, como o Microsoft Word AutoShape Editor, também comercialmente disponível do Microsoft Inc. Tais aplicativos podem tipicamente compreender páginas e componentes que podem ainda ser dispostos em uma hierarquia de containers (página única e múltiplas páginas) dentro de uma página contendo componentes atômicos. Um container de múltiplas páginas pode também exibir múltiplas minipáginas.[00102] It will be noted that virtual applications may be stand-alone systems, such as the PowerPoint Presentation Program, commercially available from Microsoft Inc., or may be incorporated within a larger editing system, such as the Microsoft Word AutoShape Editor, also commercially available from Microsoft Inc. Such applications may typically comprise pages and components that may be further arranged in a hierarchy of containers (single page and multi-page) within a page containing atomic components. A multipage container can also display multiple minipages.

[00103] As páginas podem também incluir aplicativos de listas (como são discutidos na publicação de Patente Norte-Americana no US 2014/0282218 intitulado “WEBSITE BUILDING SYSTEM INTEGRATING DATA LISTS WITH DYNAMIC CUSTOMIZATION AND ADAPTATION” publicada em 18 de setembro de 2014 e atribuída ao titular comum da presente invenção) e aplicativos terceirizados. As páginas podem também utilizar modelos como modelos de página ou modelos de componentes gerais. Um caso específico é o uso de uma página mestre do aplicativo contendo componentes duplicados em todas as outras páginas regulares. A disposição de componentes dentro de uma página ou de um conjunto de páginas pode ser conhecida como o layout. Será observado que a discussão abaixo descreve layouts consistindo em componentes e containers retangulares paralelos ao eixo. Outros layouts podem também incluir componentes e containers não retangulares incluindo, em particular, classes de objetos, como objetos girados ou objetos distorcidos e objetos consistindo em múltiplas regiões, como um componente leitor de vídeo que pode ter uma área de exibição de vídeo e uma área de controle de vídeo. Tais regiões podem ser juntas, disjuntas ou intersecções. Outros layouts podem também incluir objetos consistindo em um formato geométrico arbitrário.[00103] Pages may also include list applications (as discussed in US Patent Publication No. US 2014/0282218 entitled “WEBSITE BUILDING SYSTEM INTEGRATING DATA LISTS WITH DYNAMIC CUSTOMIZATION AND ADAPTATION” published on September 18, 2014 and assigned to the common proprietor of the present invention) and third-party applications. Pages can also use templates as page templates or general component templates. A specific case is the use of an application master page containing duplicate components in all other regular pages. The arrangement of components within a page or set of pages can be known as the layout. It will be noted that the discussion below describes layouts consisting of axis-parallel rectangular components and containers. Other layouts may also include non-rectangular components and containers including, in particular, object classes, such as rotated objects or distorted objects, and objects consisting of multiple regions, such as a video player component that may have a video display area and a video display area. video control. Such regions can be joint, disjoint or intersection. Other layouts may also include objects consisting of an arbitrary geometric shape.

[00104] Será observado que a manipulação de tais objetos não retangulares de múltiplas regiões pode ser feita utilizando um retângulo de fechamento para cada objeto não retangular ou adaptando as primitivas geométricas para manusear objetos não retangulares estendidos. A adaptação pode incluir projeção ao eixo, distância entre formatos, distância direcional mínima/máxima entre formatos (por exemplo, distância vertical ou horizontal), detecção de intersecção de formato; detecção de intersecção de formato/linha; cálculo da região de intersecção e cálculo da área de formato.[00104] It will be noted that the manipulation of such non-rectangular objects from multiple regions can be done using a closing rectangle for each non-rectangular object or adapting geometric primitives to handle extended non-rectangular objects. Fitting can include axis projection, distance between shapes, minimum/maximum directional distance between shapes (eg vertical or horizontal distance), shape intersection detection; shape/line intersection detection; calculation of the intersection region and calculation of the shape area.

[00105] Será ainda observado que cada aplicativo pode ter múltiplas configurações do layout, por exemplo, desktop (retrato e paisagem) e móvel. Algumas propriedades de componentes do website podem também ter um valor por configuração do layout, como a inclusão de componente real (por exemplo, um componente específico pode ser apenas para o desktop/tablet ou ser apenas para móvel). Esse poderia ser um componente de container - com todos os equivalentes contidos sendo afetados juntos. Outras propriedades podem incluir tamanho (h,w), posição (x,y), informação de ordem z, estilo (fonte, tamanho, cor), cor, tipo de componente polimórfico (por exemplo, uma dada galeria pode utilizar um tipo de galeria diferente para componentes de lista de computador de mesa e de computador móvel), configurações de menu/galeria (por exemplo, galeria matriz # de colunas/fileiras), uma variante de aplicativo terceirizado (para aplicativos terceirizados que tem múltiplas variantes tendo diferentes tamanhos de exibição) e associação de visualização de aplicativo de lista - para um dado tipo e item ou item associado a uma visualização, visualizações diferentes podem ser especificadas por diferentes componentes de lista.[00105] It will also be noted that each application can have multiple layout configurations, for example, desktop (portrait and landscape) and mobile. Some website component properties may also have a value per layout configuration, such as actual component inclusion (for example, a specific component may be desktop/tablet only or mobile only). This could be a container component - with all contained equivalents affected together. Other properties may include size (h,w), position (x,y), z-order information, style (font, size, color), color, type of polymorphic component (for example, a given gallery may use a type of different gallery for desktop and mobile list components), menu/gallery settings (e.g. matrix gallery # of columns/rows), a third-party app variant (for third-party apps that have multiple variants having different sizes view) and list application view association - for a given type and item or item associated with a view, different views can be specified by different list components.

[00106] Também será observado que cada configuração do layout pode ter um valor de tamanho de tela padrão (em pixels). O tamanho de tela real pode diferir até certo ponto, com essa diferença manipulada através do suporte de layout dinâmico do sistema de design visual pertinente. A configuração do layout do desktop pode ser a configuração do layout principal visto que tem a maior largura de tela. Outras configurações do layout podem ser consideradas configuração de layout de sombras da configuração do layout principal e podem ter largura e altura de tela diferentes daquelas da configuração do layout principal. Em particular, a largura da configuração de layout de sombra pode ser menor que a configuração do layout principal (por exemplo, exibição de telefone móvel), similar (por exemplo, tablet) ou maior (por exemplo, tela de exibição grande).[00106] It will also be noted that each layout setting can have a default screen size value (in pixels). The actual screen size may differ to some extent, with this difference handled through the dynamic layout support of the relevant visual design system. The desktop layout setting can be the main layout setting as it has the largest screen width. Other layout settings can be considered the main layout setting's shadows layout setting and can have a different screen width and height than the main layout setting. In particular, the width of the shadow layout setting can be smaller than the main layout setting (eg mobile phone display), similar (eg tablet) or larger (eg large display screen).

[00107] Será ainda observado que ao converter páginas de aplicativo ou páginas de website a partir de um desktop para uma versão do dispositivo móvel, há duas metas conflitantes: preservar a legibilidade do conteúdo nas páginas da versão reduzida e preservar o layout visual da página. Os sistemas existentes são em sua maior parte focados em extrair conteúdo no custo da criação (como na Patente Norte-Americana no 7.203.901 intitulado “SMALL FORM FACTOR WEB BROWSING”). Esses sistemas são derivados dos algoritmos OCR/Page Analysis publicados que extraem texto de regiões de interesse, e não tentam (ou fazem o mínimo esforço para) preservar o design do website visual existente.[00107] It will further be noted that when converting application pages or website pages from a desktop to a mobile device version, there are two conflicting goals: preserving the readability of the content on the reduced version pages and preserving the visual layout of the page . Existing systems are mostly focused on extracting content at the cost of creation (as in US Patent No. 7,203,901 entitled “SMALL FORM FACTOR WEB BROWSING”). These systems are derived from published OCR/Page Analysis algorithms that extract text from regions of interest, and make no attempt (or make minimal effort to) preserve the existing visual website design.

[00108] Alguns algoritmos tentam preservar o design e/ou layout de alguns conteúdos diminuindo toda a página ou elementos desta. Entretanto, essa diminuição é muito limitada, visto que (em particular) o conteúdo de texto se torna rapidamente ilegível conforme o tamanho de fonte é reduzido.[00108] Some algorithms try to preserve the design and/or layout of some content by reducing the entire page or its elements. However, this decrease is very limited, as (in particular) text content quickly becomes unreadable as the font size is reduced.

[00109] A referência é agora feita à Figura 1 que ilustra um sistema 100 para converter aplicativos virtuais entre plataformas de acordo com uma realização da presente invenção.[00109] Reference is now made to Figure 1 which illustrates a system 100 for converting virtual applications between platforms according to an embodiment of the present invention.

[00110] O sistema 100 pode compreender um conversor de layout inicial 200, um reconversor de layout 300 e um banco de dados 50. O conversor de layout inicial 200 pode ainda compreender um receptor de página 210 e um processador 250. O conversor 200 pode converter uma configuração do layout principal de um desktop em uma configuração de layout de sombra para um dispositivo móvel pela primeira vez. O reconversor 300 pode reconverter a configuração do layout após o aplicativo da configuração do layout principal ter sido editado. Todos os aplicativos e configurações podem ser armazenados em banco de dados 50.[00110] The system 100 may comprise an initial layout converter 200, a layout reconverter 300 and a database 50. The initial layout converter 200 may further comprise a page receiver 210 and a processor 250. The converter 200 may convert a main layout configuration on a desktop to a shadow layout configuration for a mobile device for the first time. The reconverter 300 can reconvert the layout configuration after the main layout configuration application has been edited. All apps and settings can be stored in 50 database.

[00111] O sistema 100 pode ser instalado como parte de um sistema criador de website em um servidor 150 com a capacidade de se comunicar com os vários clientes 5 que representam várias plataformas como um desktop 5A, um smartphone 5B e uma interface do sistema de terceiros (comunicação programa para programa) 5C através de um meio de comunicação adequado como a Internet. O servidor 150 pode armazenar diferentes configurações do layout para cada uma das plataformas (incluindo múltiplas configurações do layout para cada plataforma única). Em uma realização alternativa, o sistema 100 também pode ser executado localmente em um cliente ou pode ser adaptado para prover serviços a outro sistema através de uma API (Interface de Programação de Aplicativo, Application Programming Interface) adequada.[00111] The system 100 can be installed as part of a website creator system on a server 150 with the ability to communicate with the various clients 5 representing various platforms such as a desktop 5A, a smartphone 5B and a system interface third parties (program-to-program communication) 5C via a suitable communication medium such as the Internet. Server 150 can store different layout configurations for each of the platforms (including multiple layout configurations for each unique platform). In an alternative embodiment, the system 100 can also run locally on a client or can be adapted to provide services to another system via a suitable API (Application Programming Interface).

[00112] Será observado que o conversor de layout inicial 200 pode converter cada página em um aplicativo em uma versão suficientemente mais restrita de modo que possa ser visualizado em uma tela mais estreita utilizando a rolagem vertical e exibição horizontal mínima (se houver). Será observado que quando o sistema 100 é corretamente integrado (por exemplo, execução no criador de website do cliente do sistema pertinente), o sistema 100 pode realizar a conversão no modo responsivo, no qual um novo layout é calculado toda vez que as dimensões da tela mudam.[00112] It will be noted that the initial layout converter 200 can convert each page in an application into a sufficiently narrower version so that it can be viewed on a narrower screen using vertical scrolling and minimal horizontal display (if any). It will be noted that when the system 100 is properly integrated (e.g., running on the relevant system's customer website builder), the system 100 can convert into responsive mode, in which a new layout is calculated each time the dimensions of the screen change.

[00113] A referência é agora feita à Figura 2 que ilustra os elementos do processador 250. O processor 250 compreende um pré-processador 201, um criador de supernó 230, um emissor da ordem 240, um posicionador 270 e um pós- processador 202. O pré-processador 201 pode compreender um manipulador modelo 206, um filtrador de componente 221, um adaptador de componente 225, um ajustador de componente 227 e um analisador de componente 229. O pós-processador 202 pode compreender um insersor de componentes automaticamente adicionados 281 e um coordenador de layout dinâmico 284. Será observado que a configuração do layout alvo resultante pode ser exibida pelo monitor 290 através do sistema criador de website pertinente. Pode ser observado que se o sistema 100 está completamente integrado com o sistema criador de website pertinente e modifica diretamente sua estrutura de dados, o pós-processador 202 pode também realizar uma fase de pós- processamento de recuperação de estrutura de dados, para assim adaptar as estruturas de dados modificadas do sistema criador de website para serem exibidas pelo monitor 290.[00113] Reference is now made to Figure 2 which illustrates the elements of the processor 250. The processor 250 comprises a pre-processor 201, a supernode creator 230, an order issuer 240, a positioner 270 and a post-processor 202 The pre-processor 201 may comprise a template handler 206, a component filter 221, a component adapter 225, a component adjuster 227 and a component parser 229. The post-processor 202 may comprise an inserter of automatically added components 281 and a dynamic layout coordinator 284. It will be appreciated that the resulting target layout configuration can be displayed by monitor 290 via the relevant website builder system. It can be seen that if the system 100 is fully integrated with the relevant website creator system and directly modifies its data structure, the post-processor 202 may also perform a post-processing phase of data structure recovery, to thus adapt the modified data structures of the website builder system to be displayed by monitor 290.

[00114] Será observado que o conversor de layout inicial 200 pode manipular cada página do aplicativo ou website separadamente. Em um modo regular, ele pode converter cada página em uma versão suficientemente mais restrita e tipicamente mais longa, de modo que possa ser visualizada em uma tela móvel mais estreita utilizando rolagem vertical e exibição horizontal mínima. Será ainda observado que alguns dispositivos alvo como tablets maiores e telas de exibição de ambientes externos podem ter uma tela mais ampla do que a tela do desktop original e, desse modo, o estreitamento pode não ser necessário, mas pode adaptar-se a uma largura de exibição maior.[00114] It will be noted that the initial layout converter 200 can handle each page of the application or website separately. In a regular mode, it can convert each page into a sufficiently narrower and typically longer version so that it can be viewed on a narrower mobile screen using vertical scrolling and minimal horizontal display. It will further be noted that some target devices such as larger tablets and outdoor display screens may have a wider screen than the original desktop screen and thus narrowing may not be necessary but can accommodate a wider width. larger display.

[00115] O conversor de layout inicial 200 pode processar o conjunto tridimensional (as coordenadas x, y da tela e a ordem-z da tela) de componentes e pode convertê-lo em um conjunto organizado no sentido matemático. A ordem total gerada pode representar a ordem na qual a informação é lida na página pertinente pelo usuário. O conversor de layout inicial 200 pode, então, exibir os componentes organizados na tela móvel mais estreita.[00115] The initial layout converter 200 can process the three-dimensional set (the x, y coordinates of the screen and the z-order of the screen) of components and can convert it into a set organized in the mathematical sense. The total order generated may represent the order in which information is read on the relevant page by the user. The initial layout converter 200 can then display the components arranged on the narrower mobile screen.

[00116] O conversor de layout inicial 200 pode processar a página a ser convertida dividindo a página pertinente em supernós com base em uma análise dos componentes e sua relação de conteúdo conforme descrito em mais detalhes aqui abaixo.[00116] The initial layout converter 200 may process the page to be converted by dividing the relevant page into supernodes based on an analysis of the components and their content relationship as described in more detail here below.

[00117] O pré-processador 201 pode analisar a adequação dos componentes da página pertinente para a layout de configuração alvo e pode fazer modificações aos componentes existentes onde necessário. Embora diferentes combinações de layouts possam ser configuradas, os exemplos abaixo discutem a conversão de uma configuração do layout do desktop em uma configuração de layout do dispositivo móvel. O manipulador de modelo 206 pode criar casos modificados de elementos nos modelos, se existirem. O filtrador de componente 221 pode filtrar os componentes em sua adequação para a configuração de layout do dispositivo móvel, o adaptador de componente 225 pode adaptar os componentes especialmente para a configuração de layout do dispositivo móvel, o ajustador de componente 227 pode ajustar os componentes especialmente para a configuração de layout do dispositivo móvel e o analisador de componente 229 pode analisar os componentes (incluindo seu conteúdo, geometria e quaisquer outros atributos) para, assim, determinar sua utilização real. Por exemplo, um componente de imagem pode ser uma imagem de fundo ou uma imagem de conteúdo - afetando sua manipulação pelas outras partes do sistema 100.[00117] The preprocessor 201 can analyze the suitability of the relevant page components for the target configuration layout and can make modifications to existing components where necessary. Although different combinations of layouts can be configured, the examples below discuss converting a desktop layout configuration to a mobile device layout configuration. Model handler 206 may create modified instances of elements in models, if they exist. The component filter 221 can filter the components on their suitability for the mobile device layout configuration, the component adapter 225 can adapt the components especially for the mobile device layout configuration, the component adjuster 227 can adjust the components especially for the mobile device layout configuration and the component analyzer 229 can analyze the components (including their content, geometry and any other attributes) to thereby determine their actual usage. For example, an image component can be a background image or a content image - affecting its handling by the other parts of the system 100.

[00118] O criador do supernó 230 pode localizar grupos de componentes que deveriam permanecer juntos (como componentes que são altamente sobrepostos). O criador do supernó 230 pode ainda criar uma hierarquia dos supernós com base na página atual e nos elementos dentro da hierarquia do container (possivelmente modificando a hierarquia do container como ainda descrito abaixo). O emissor da ordem 240 pode determinar uma ordem para os elementos de cada um dos supernós. O posicionador 270 pode colocar os elementos do nó dentro da área de layout do dispositivo móvel com base na ordem determinada e o pós-processador 202 pode fazer quaisquer ajustes finais ao layout conforme necessário. O insersor de componente adicionado automaticamente 281 pode inserir quaisquer componentes automaticamente adicionados (conforme discutido em mais detalhes aqui abaixo), bem como outros componentes relacionados ao móvel que deveriam ser inseridos após a organização (como menus específicos ao móvel) e o coordenador de layout dinâmico pode 284 modificar quaisquer âncoras existentes se necessário após a colocação. O monitor 290 pode exibir o novo layout na plataforma móvel, possivelmente realizando o ajuste final para a plataforma móvel específica conforme descrito em mais detalhes aqui abaixo.[00118] The creator of supernode 230 can find groups of components that should stay together (such as components that are highly overlapping). The creator of supernode 230 can further create a hierarchy of supernodes based on the current page and elements within the container hierarchy (possibly modifying the container hierarchy as further described below). The order issuer 240 may determine an order for the elements of each of the supernodes. Placer 270 can place the node elements within the layout area of the mobile device based on the determined order, and post processor 202 can make any final adjustments to the layout as needed. The auto-added component inserter 281 can insert any auto-added components (as discussed in more detail here below) as well as other furniture-related components that should be inserted after arranging (such as furniture-specific menus) and the dynamic layout coordinator you can 284 modify any existing anchors if necessary after placement. Monitor 290 can display the new layout on the mobile platform, possibly making final adjustments to the specific mobile platform as described in more detail here below.

[00119] O receptor de página 210 pode receber a página da web com uma configuração do layout do desktop a ser convertida e pode encaminhar a página ao pré-processador da página 201.[00119] The page receiver 210 can receive the web page with a desktop layout configuration to be converted and can forward the page to the page preprocessor 201.

[00120] Conforme discutido acima nesse relatório, pode haver uma hierarquia do container que provê informação adicional sobre a disposição lógica da página. A hierarquia pode incluir relações de restrição regular, bem como relações de restrição paralelas como múltiplas minipáginas paralelas contidas em um container de página múltipla. O pré- processador 201 pode analisar essa hierarquia e quaisquer relações específicas do container no início do processo a fim de coletar informações que podem ser úteis ao processo. O pré-processador 201 pode também determinar o tamanho da tela do aplicativo alvo e extrair os menus de navegação (website- global e específico por página) e combiná-los para criar um ou mais menus de página unidos como menus superior e inferior.[00120] As discussed earlier in this report, there may be a container hierarchy that provides additional information about the logical layout of the page. The hierarchy can include regular constraint relationships as well as parallel constraint relationships such as multiple parallel mini-pages contained within a multi-page container. The preprocessor 201 can analyze this hierarchy and any container-specific relationships early in the process in order to gather information that may be useful to the process. Preprocessor 201 may also determine the screen size of the target application and extract the navigation menus (website-global and page-specific) and combine them to create one or more page menus joined together as top and bottom menus.

[00121] Será observado que o sistema de design virtual pertinente pode suportar modelos, incluindo múltiplos níveis e múltiplas heranças dos modelos. Tais modelos podem incluir páginas únicas, múltiplas páginas ou elementos das páginas. O manipulador de modelo 206 pode criar casos modificados dos elementos dos modelos, assim um caso de um modelo pode consistir em componentes de modelo aos quais as modificações locais são aplicadas. O manipulador de modelo 206 pode ainda fazer as modificações específicas necessárias a fim de adaptá-lo à configuração de layout do dispositivo móvel. Por exemplo, se os componentes herdados estão suficientemente próximos à parte superior ou inferior da página, eles podem ser incluídos em um cabeçalho ou rodapé específico da página, conforme apropriado. Os componentes herdados podem ser logicamente duplicados (com modificação) em cada página que os herda.[00121] It will be noted that the relevant virtual design system can support templates, including multiple levels and multiple inheritance of the templates. Such templates may include single pages, multiple pages, or page elements. Model handler 206 can create modified instances of model elements, thus a model case can consist of model components to which local modifications are applied. The model handler 206 can further make the specific modifications needed to adapt it to the layout configuration of the mobile device. For example, if legacy components are close enough to the top or bottom of the page, they can be included in a page-specific header or footer, as appropriate. Inherited components can be logically duplicated (with modification) on each page that inherits them.

[00122] Também será observado que o sistema de design virtual pertinente pode reter as cópias únicas dos componentes herdados, mas pode permitir que um layout por página seja aplicado a eles (pois a adaptação ao móvel em cada página pode ser diferente). O manipulador de modelo 206 pode utilizar essa informação sobre o modelo original de um dado conjunto de componentes para criar um grupo do componente com base no modelo - garantindo melhor conformidade à intensão original do modelo. Para cada página do website pertinente individualmente, o pré-processador 201 pode revisar os elementos considerando os parâmetros como as dimensões da tela alvo. O filtrador de componente 221 pode remover ou esconder os componentes que não são adequados para tela móvel. Tais componentes podem incluir, por exemplo, linhas separadoras verticais (mas não linhas horizontais), conteúdo de Adobe Flash (que não pode ser reproduzido em alguns sistemas móveis) ou quadros ornamentais. Os componentes que são completamente inadequados para tela móvel são removidos antes do processamento adicional. Para componentes que não são recomendados para tela móvel, o filtrador de componente 221 pode eleger escondê-los ao invés de removê-los completamente. Nesse caso, o designer de website pode reinseri-los na configuração de layout do dispositivo móvel, pois seriam visíveis e reinseríeis através da GUI de exibição móvel de modificações, conforme descrito em mais detalhes aqui abaixo. Será observado que alguns componentes podem ser inadequados ou não recomendados para uma plataforma móvel, mas ainda proveem informação substancial ao conversor de layout inicial 200.[00122] It will also be noted that the relevant virtual design system may retain the unique copies of legacy components, but may allow one layout per page to be applied to them (as the mobile fit on each page may be different). The template handler 206 can use this information about the original template of a given set of components to create a component group based on the template - ensuring better conformance to the original template intent. For each pertinent website page individually, the preprocessor 201 can revise the elements considering parameters such as the dimensions of the target screen. Component filter 221 can remove or hide components that are not suitable for mobile screen. Such components may include, for example, vertical separator lines (but not horizontal lines), Adobe Flash content (which may not play on some mobile systems), or ornamental frames. Components that are completely unsuitable for the mobile screen are removed before further processing. For components that are not recommended for mobile display, the component filter 221 may elect to hide them instead of completely removing them. In that case, the website designer can reinsert them into the mobile device's layout configuration as they would be visible and reenterable through the mobile modification view GUI, as described in more detail here below. It will be appreciated that some components may be unsuitable or not recommended for a mobile platform, but still provide substantial information to the initial layout converter 200.

[00123] A referência é agora feita à Figura 4 que ilustra uma linha vertical E entre os componentes na versão do desktop. Por exemplo, uma linha vertical entre os componentes seria bem inútil na configuração de layout do dispositivo móvel conforme mostrado como seria tipicamente convertido em um longo (e vazio) espaçamento entre os conjuntos de componente. Como é ilustrado, quando os componentes A,B,C,D são reorganizados para serem empilhados verticalmente para uma tela móvel mais estreita, a linha vertical E teria desperdiçado espaço de exibição e, assim, deveria ser removida. Entretanto, a linha vertical é ainda muito útil ao sinalizar ao conversor de layout inicial 200 que os 4 componentes A, B, C e D deveriam ser dispostos como A+B e C+D e não como A+C e B+D. Para tirar vantagem dessa informação, o filtrador de componente 221 pode marcar a linha vertical como “remover completamente” ou “esconder posteriormente”, mas ainda adicionar uma linha invisível com 0 de largura que provê a informação necessária de divisão ao conversor de layout inicial 200.[00123] Reference is now made to Figure 4 which illustrates a vertical line E between components in the desktop version. For example, a vertical line between components would be pretty useless in the mobile device layout setup as shown as it would typically be converted into a long (and empty) spacing between component sets. As illustrated, when components A,B,C,D are rearranged to stack vertically for a narrower moving screen, the vertical line E would have wasted display space and thus should be removed. However, the vertical line is still very useful in signaling the initial layout converter 200 that the 4 components A, B, C and D should be laid out as A+B and C+D and not as A+C and B+D. To take advantage of this information, the component filter 221 can mark the vertical line as "completely remove" or "hide later", but still add an invisible 0-width line that provides the necessary division information to the initial layout converter 200 .

[00124] O adaptador do componente 225 pode empregar o meio de redução de largura, similar aos que podem ser empregados pelo posicionador 270 conforme detalhado aqui abaixo (sempre que tais meios podem ser ativados nesse estágio de pré-processamento). Por exemplo, o adaptador de componente 225 pode trocar os componentes para versões móveis “mais leves”. Por exemplo, trocar galerias que podem exibir múltiplas minipáginas (por exemplo, tipo acordeão) em galerias que exibem uma única minipágina contida por vez. O adaptador do componente 225 pode também prover uma versão “leve” específica de determinados componentes para uso em versões móveis dos aplicativos criados (através de uma versão separada ou uma visualização personalizada diferente para a tela móvel).[00124] The component adapter 225 can employ width reduction means, similar to those that can be employed by the positioner 270 as detailed here below (whenever such means can be activated at this pre-processing stage). For example, component adapter 225 can swap out components for mobile “lighter” versions. For example, swapping galleries that can display multiple minipages (for example, accordion type) into galleries that display a single contained minipage at a time. The component adapter 225 may also provide a specific "lightweight" version of certain components for use in mobile versions of the created applications (either through a separate version or a different custom view for the mobile screen).

[00125] O adaptador do componente 225 pode também manipular as adaptações relacionadas ao conteúdo como convertendo gráficos à base de caractere em gráficos escaláveis à base de vetor. Designers às vezes utilizam caracteres de texto como decorações ou separações, por exemplo, “///////////”,“----------------”, “-=-=-=-=-=-=“. Uma vez convertido em um formato à base de vetor similar, eles podem ser precisamente redimensionados sem exigir manipulação de texto.[00125] The component 225 adapter can also handle content-related adaptations such as converting character-based graphics to scalable vector-based graphics. Designers sometimes use text characters as decorations or separations, for example, “///////////”, “----------------”, “- =-=-=-=-=-=“. Once converted to a similar vector-based format, they can be precisely resized without requiring text manipulation.

[00126] O adaptador do componente 225 pode também unir os componentes do menu em um menu unificado facilmente móvel (pequeno formato). As páginas geralmente contêm múltiplos menus de navegação utilizados para ambas a navegação entre páginas e dentro da página. Além disso, algumas páginas podem conter múltiplos menus definidos em diferentes formas como menus definidos na própria página, menus resultantes dos modelos da página utilizados na página (por exemplo, cabeçalho e rodapé de aplicação global contendo menus) e menus definidos automaticamente com base na estrutura do aplicativo (por exemplo, um menu de navegação da página de nível superior). O adaptador do componente 225 pode ainda criar menus compostos (um ou mais) e combinar os menus a eles dependendo dos critérios como proximidade do menu avaliado ao dado menu composto criado (por exemplo, unir todos os menus começando nos 200 pixels mais elevados da página em um único menu de nível superior). O adaptador do componente 225 pode inserir os menus únicos (unificados e facilmente móveis ou os múltiplos menus modificados diretamente, ou pode “postá-los” para inclusão no estágio posterior (por exemplo, por posicionador 270 ou pelo insersor de componentes automaticamente adicionados 281). Isso é especificamente relevante se os (um ou mais) menus forem adicionados de modo que não sejam uma parte do layout de componente regular, mas ainda como “flutuantes”, condicionalmente ativados, etc.[00126] The 225 component adapter can also unite the menu components into an easily mobile unified menu (small format). Pages often contain multiple navigation menus used for both cross-page and within-page navigation. In addition, some pages may contain multiple menus defined in different ways such as menus defined on the page itself, menus resulting from the page templates used in the page (for example, global application header and footer containing menus), and menus defined automatically based on the structure of the application (for example, a top-level page navigation menu). The component adapter 225 can further create composite menus (one or more) and combine the menus to them depending on criteria such as proximity of the evaluated menu to the given composite menu created (e.g., joining all menus starting at the top 200 pixels of the page in a single top-level menu). The component adapter 225 can either insert the single menus (unified and easily moveable or the multiple menus modified directly, or it can “post” them for inclusion at the later stage (e.g. by positioner 270 or by the automatically added component inserter 281) This is specifically relevant if the (one or more) menus are added so that they are not a part of the regular component layout, but still as “floating”, conditionally activated, etc.

[00127] O ajustador de componente 227 pode modificar os parâmetros de componente para reduzir sua largura. Um exemplo disso é a modificação dos componentes da galeria matriz em 1 a 2 colunas apenas. O ajustador de componente 227 pode também modificar componentes definidos com grandes bordas ornamentais em uma versão mais simples, menos ornamental do mesmo componente.[00127] Component adjuster 227 can modify component parameters to reduce its width. An example of this is modifying the matrix gallery components by 1 to 2 columns only. Component Tuner 227 can also change defined components with large ornamental borders into a simpler, less ornamental version of the same component.

[00128] O ajustador de componente 227 pode redimensionar os componentes para refletir o tamanho real utilizado. Por exemplo, pode encolher os componentes de texto de acordo com o conteúdo de texto real utilizando retângulos de fechamento.[00128] The component adjuster 227 can resize components to reflect the actual size used. For example, you can shrink text components to match the actual text content using enclosing rectangles.

[00129] O ajustador de componente 227 pode também “dissolver” containers que envolvem firmemente um componente interno. Por exemplo, se um container envolve firmemente um subcontainer sem componentes adicionais no container maior, pode remover o container interno, combinando os dois containers em um. Será observado que nessa forma, um nível de hierarquia é salvo, pois o container é transparente ao processo.[00129] The component adjuster 227 can also “dissolve” containers that tightly wrap around an internal component. For example, if a container tightly wraps a subcontainer with no additional components in the larger container, you can remove the inner container, combining the two containers into one. It will be noted that in this form, a hierarchy level is saved, as the container is transparent to the process.

[00130] Designers, às vezes, adicionam múltiplas seções da mesma imagem que juntas formam visualmente uma imagem única. O ajustador de componente 227 pode empregar a “junção de imagens” e utilizar os atributos e conteúdo dos múltiplos componentes de imagem para detectar se eles deveriam ser unidos em uma única imagem. A decisão pode ser com base no histórico de edição - se as imagens foram criadas e/ou modificadas, com base na similaridade da dimensão nas margens da imagem adjacente, com base no comprimento da sobreposição das margens da imagem adjacente comparadas à separação entre as imagens ou com base no uso de cores/recursos similares no limite (detectado através do uso de um analisador do conteúdo de imagem).[00130] Designers sometimes add multiple sections of the same image that together visually form a single image. Component adjuster 227 may employ "image stitching" and utilize the attributes and content of multiple image components to detect whether they should be stitched together into a single image. The decision can be based on editing history - whether the images were created and/or modified, based on similarity of dimension at adjacent image edges, based on overlap length of adjacent image edges compared to separation between images or based on the use of similar colors/features at the threshold (detected using an image content analyzer).

[00131] O ajustador de componente 227 pode empregar o mapeamento do tamanho de fonte. O texto em qualquer determinado aplicativo ou página pode utilizar uma grande variedade de tamanhos de fonte. Esses tamanhos deveriam ser mapeados em uma dada faixa (menor) para uso em um dispositivo móvel - enquanto mantém as diferenças do tamanho de fonte, se possível. Alguns tamanhos de fonte seriam muito pequenos enquanto alguns seriam muito grandes. O mapeamento não é linear, ou seja, sem multiplicação por um fator fixo. Entretanto, é uma função monótona do tamanho de fonte. O ajustador de componente 227 pode coletar a faixa de tamanhos de fonte utilizada e mapear essa faixa de tamanhos de fonte móvel permitidos. O ajustador de componente 227 pode prover tal mapeamento que é por sistema, ou específico no usuário, aplicativo, página ou nível de componente.[00131] Component Tuner 227 can employ font size mapping. Text in any given application or page can use a wide variety of font sizes. These sizes should map onto a given (smaller) range for use on a mobile device - while keeping font size differences if possible. Some font sizes would be too small while some would be too large. The mapping is not linear, that is, without multiplication by a fixed factor. However, it is a monotonous function of font size. Component adjuster 227 may collect the range of font sizes used and map that range to allowable mobile font sizes. Component tuner 227 may provide such mapping that is per-system, or specific at the user, application, page, or component level.

[00132] No mapeamento do tamanho de fonte específico de aplicativo/página, o ajustador de componente 227 pode contar a quantidade de texto (caracteres) em cada dado tamanho de fonte e, então, utilizar uma função de distribuição cumulativa (Gaussiana), assim os tamanhos do caractere mais comuns são mapeados aos tamanhos de fonte no centro da faixa de tamanhos de fonte móvel permitidos. Será observado que tal tamanho de fonte pode ser ainda modificado por um ajuste do tamanho de fonte específico da configuração de layout do dispositivo móvel.[00132] In application/page specific font size mapping, the component adjuster 227 can count the amount of text (characters) in each given font size and then use a cumulative (Gaussian) distribution function, thus the most common character sizes are mapped to font sizes in the center of the range of allowable mobile font sizes. It will be noted that such font size can be further modified by a font size adjustment specific to the mobile device layout setting.

[00133] Será ainda observado que, ao processar a estrutura do componente, é importante fazer distinção entre as imagens de decoração e as imagens de conteúdo (com o último sendo parte dos dados específicos da página real). As imagens de decoração podem ser mais livremente escaladas e cortadas, pois seu conteúdo não é crítico ao uso real do aplicativo. Além disso, as imagens de conteúdo deveriam ser analisadas similares a outros componentes no algoritmo de análise abaixo, enquanto que as imagens de decoração não deveriam. O analisador de componente 229 pode reconhecer uma imagem de decoração com base em qualquer um dos específicos: tipo de componente específico da “imagem de decoração” ou por dicas específicas no modelo / objeto / tipo de componente / nível de designer. O analisador de componente 229 pode também reconhecer se as imagens cobrem uma área, por exemplo, a imagem cobre todo (ou maior parte) o container no qual reside, se a imagem for uma de fundo em múltiplos componentes ou se a imagem for adaptada a sua área de exibição de componentes utilizando um operador que significa que a foto serve como decoração, como “repetir foto em linhas”. As imagens de decoração sem sempre são “firmes” em relação aos componentes contidos dentro delas, geralmente devido à escolha da imagem específica envolvida.[00133] It will be further noted that, when processing the component structure, it is important to distinguish between decoration images and content images (with the latter being part of the actual page-specific data). Decoration images can be more freely scaled and cropped, as their content is not critical to the actual use of the application. Furthermore, content images should be analyzed similar to other components in the analysis algorithm below, while decoration images should not. The component parser 229 can recognize a decoration image based on either the specific component type of the "decoration image" or by specific hints at the model/object/component type/designer level. The component parser 229 can also recognize if the images cover an area, for example, the image covers all (or most of) the container in which it resides, if the image is a multi-component background or if the image is adapted to its component display area using an operator that means the photo serves as decoration, such as “repeat photo in lines”. Decor images are not always “tight” in relation to the components contained within them, usually due to the choice of the specific image involved.

[00134] Uma vez que os elementos foram modificados conforme descrito aqui acima, o criador de supernó 230 pode localizar grupos de componentes que podem ser altamente sobrepostos ou, de outra forma, relacionados e devem ser manipulados juntos. Isso é necessário visto que (por exemplo) os componentes altamente sobrepostos podem formar uma composição, dessa forma, eles podem ser colocados juntos a fim de manter a mesma proporção interna quando redimensionados. Será observado que, uma vez que todos os grupos foram localizados, o criador de supernó 230 pode, então, converter a configuração hierárquica resultante dos componentes em uma hierarquia de supernós com base na página atual e/ou na hierarquia do container de modo que há múltiplas ordens total em diferentes níveis de estrutura. Para cada página individual ou minipágina (dentro de uma única página ou container de múltiplas páginas), os supernós podem ser conhecidos como supernós de página. Também será observado que cada supernó pode ser considerado uma entidade separada e, uma vez definidos, os objetos dentro podem ser reorganizados conforme descrito em mais detalhes aqui abaixo.[00134] Once the elements have been modified as described here above, the supernode creator 230 can find groups of components that may be highly overlapping or otherwise related and must be manipulated together. This is necessary since (for example) highly overlapping components can form a composite, so they can be placed together to maintain the same internal proportion when resized. It will be noted that once all groups have been located, the supernode creator 230 can then convert the resulting hierarchical configuration of components into a supernode hierarchy based on the current page and/or container hierarchy so that there is Total multiple orders at different structure levels. For each individual page or minipage (within a single page or multipage container), the supernodes may be known as page supernodes. It will also be noted that each supernode can be considered a separate entity, and once defined, the objects within can be rearranged as described in more detail here below.

[00135] Será ainda observado que alguns grupos localizados também podem ser convertidos em supernós virtuais (conforme descrito em mais detalhes aqui abaixo) que podem, então, ser manipulados como um único componente similar aos supernós de página conforme descrito aqui acima. Será observado que cada tipo de supernó virtual pode ter um método de adaptação móvel associado definido quando for criado como reescala em uma forma particular, redimensionamento limitado, reorganização, etc.[00135] It will be further noted that some localized groups can also be converted into virtual supernodes (as described in more detail here below) which can then be manipulated as a single component similar to page supernodes as described here above. It will be noted that each type of virtual supernode can have an associated mobile adaptation method defined when it is created such as rescaling in a particular shape, limited resizing, reorganizing, etc.

[00136] A referência é agora feita à Figura 5 que ilustra os elementos do criador de supernó 230. O criador do supernó 230 pode compreender um localizador de grupo de sobreposição 232, um localizador de grupo de texto sobre imagem 234, um localizador de grupo predefinido 236, um criador de nó 238 e um marcador 500 cuja funcionalidade é descrita aqui abaixo em relação à Figura 11.[00136] Reference is now made to Figure 5 illustrating the elements of the supernode creator 230. The supernode creator 230 may comprise an overlay group locator 232, a text-over-picture group locator 234, a group locator preset 236, a node creator 238 and a marker 500 whose functionality is described here below in relation to Figure 11.

[00137] O localizador de grupo de sobreposição 232 pode determinar um conjunto de componentes altamente sobrepostos que podem tipicamente criar juntos um design específico e deveria reter a mesma proporção entre os componentes do grupo ao colocar o grupo em um novo layout. Por exemplo, uma imagem e um texto que formam um logo devem reter a mesma proporção e a localização relativa independentemente de seu tamanho e posição no novo layout, para manter a estrutura do logo.[00137] The Overlay Group Locator 232 can determine a set of highly overlapping components that can typically create a specific design together and should retain the same proportion between the group components when placing the group in a new layout. For example, an image and text that make up a logo must retain the same proportion and relative location regardless of their size and position in the new layout, to maintain the structure of the logo.

[00138] O localizador de grupo de sobreposição 232 pode amarrar todos os possíveis pares de componente dentro do supernó. Para cada par de componentes de intersecção, o localizador de grupo de sobreposição 232 pode calcular a quantidade de sobreposição relativa como a quantidade de sobreposição comparada ao menor valor entre os dois retângulos de fechamento dos dois componentes. O cálculo pode ser com base na área de intersecção ou por meio da combinação da intersecção relativa para cada eixo (por exemplo, utilizando uma média). Se essa intersecção relativa exceder um dado limite, o localizador de grupo de sobreposição 232 pode considerar o par de componentes como sobreposição. Uma vez finalizado o circuito, o localizador de grupo de sobreposição 232 pode combinar os pares de sobreposição em grupos de sobreposição de acordo com os membros comuns. Por exemplo, os pares de componente [a,b] e [b,c] podem ser combinados em [a,b,c]. Será observado que a área para cada componente virtual criado pode ser aquela com retângulo de fechamento mínimo para todos os componentes agrupados. Será ainda observado que os grupos de sobreposição podem tipicamente representar os elementos de design detalhados e, desse modo, deveriam, ser apenas redimensionados e não reorganizados. Em particular, o componente de texto em tal grupo deveria ser de acordo com seu tamanho original em vez de utilizar o mapeamento do tamanho de fonte conforme descrito aqui acima, conforme realizado pelo adaptador de componente 225. Assim, o texto deve ser escalado de modo que evita o mapeamento do tamanho de fonte completamente ou utilize um fato de escala que reverte o efeito do mapeamento do tamanho de fonte.[00138] Overlapping group locator 232 can tie all possible component pairs within the supernode. For each pair of intersecting components, the overlap group locator 232 can calculate the relative overlap amount as the amount of overlap compared to the smaller value between the two enclosing rectangles of the two components. The calculation can be based on the intersection area or by combining the relative intersection for each axis (for example, using an average). If that relative intersection exceeds a given threshold, the overlapping group locator 232 may consider the pair of components to be overlapping. Once the circuit is complete, the overlapping group locator 232 can combine the overlapping pairs into overlapping groups according to common members. For example, component pairs [a,b] and [b,c] can be combined into [a,b,c]. It will be observed that the area for each created virtual component can be the one with the minimum closing rectangle for all the grouped components. It will further be noted that overlay groups can typically represent detailed design elements and thus should only be resized and not rearranged. In particular, the text component in such a group should be sized according to its original size rather than using font size mapping as described hereinabove, as performed by component adapter 225. Thus, the text should be scaled accordingly. that avoids font size mapping completely, or use a scale factor that reverses the effect of font size mapping.

[00139] Será ainda observado que alguns componentes podem ser omitidos de uma definição do grupo de sobreposição. Esses podem incluir componentes específicos, como (por exemplo) linhas horizontais e containers de largura da tela e tamanho do texto maior do que um dado limite (por exemplo, 25 caracteres) que é interpretado como o texto sendo um parágrafo regular (que não deveria ser mascarado como grupo de sobreposição e redimensionado como uma composição) em vez de como um texto de logo.[00139] It will be further noted that some components can be omitted from an overlay group definition. These may include specific components such as (for example) horizontal lines and containers of screen width and text size greater than a given threshold (for example 25 characters) which is interpreted as the text being a regular paragraph (which should not be be masked as an overlay group and resized as a composition) rather than logo text.

[00140] O localizador de grupo de texto sobre imagem 234 pode agrupar um componente de texto que é sobreposto sobre uma imagem de fundo específica. Pode detectar casos nos quais um componente de texto é definido no topo de uma imagem de fundo e os dois deveriam ser manipulados juntos. O localizador de grupo de texto sobre imagem 234 pode procurar um par de texto e componentes de imagem no supernó atual no qual qualquer componente de texto é completamente contido dentro do componente de imagem ou em cada um dos quatro lados o componente de texto está suficientemente próximo (por um dado limite) ao componente de imagem circundante.[00140] The text over image group locator 234 can group a text component that is superimposed over a specific background image. Can detect cases where a text component is defined on top of a background image and the two should be handled together. The text-over-picture group finder 234 can look for a pair of text and image components at the current supernode in which either the text component is completely contained within the image component or on each of the four sides the text component is sufficiently close (by a given limit) to the surrounding image component.

[00141] Se o componente for um logo em vez de texto sobre imagem, o localizador de grupo de texto sobre imagem 234 pode ainda instruir o localizador de grupo de sobreposição 232 a criar um grupo de sobreposição em vez de um grupo de texto over imagem. Isso pode ser feito com base na pontuação de acordo com os seguintes critérios: a quantidade de caracteres de texto está abaixo de um dado limite, o uso de fontes ornamentais ou outras fontes altamente únicas ou o uso de uma linha de base de texto que não é linha horizontal regular (por exemplo, o texto é desenhado ao longo de uma curva).[00141] If the component is a logo instead of text over image, the text over image group locator 234 may further instruct the overlay group locator 232 to create an overlay group instead of a text over image group . This can be done based on scoring according to the following criteria: the amount of text characters is below a given threshold, the use of ornate fonts or other highly unique fonts, or the use of a text baseline that does not is regular horizontal line (for example, text is drawn along a curve).

[00142] O localizador de grupo predefinido 236, pode agrupar os componentes de acordo com as sugestões no modelo, no aplicativo, na página ou no nível dos componentes. Isso pode ser referido como uma versão permanente do agrupamento geralmente realizado utilizando a GUI do sistema de design específico de modo que múltiplos componentes possam ser manipulados juntos.[00142] The predefined group locator 236, can group the components according to the suggestions in the model, in the application, in the page or in the level of the components. This can be referred to as a permanent version of grouping usually accomplished using the specific design system's GUI so that multiple components can be manipulated together.

[00143] Será observado que uma vez que os grupos de elementos de sobreposição foram localizados e agrupados, o criador de nó 238 pode combinar e convertê-los em supernós virtuais conforme descrito em mais detalhes aqui abaixo e, então, pode criar os supernós finais (incluindo supernós virtuais e de página). Os elementos remanescentes podem ser considerados desunidos e, assim, podem ser mais fáceis de organizar, conforme discutido aqui abaixo.[00143] It will be noted that once the groups of overlapping elements have been located and grouped, the node creator 238 can combine and convert them into virtual supernodes as described in more detail here below and then can create the final supernodes (including virtual and page supernodes). The remaining elements can be considered disjointed and thus may be easier to organize as discussed here below.

[00144] A referência é agora feita às Figuras 8A, 8B e 8C que ilustram exemplos de como o criador de supernó 230 pode criar uma hierarquia de supernós. Conforme discutido acima nesse relatório, supernós criados das páginas e minipáginas podem ser considerados supernós de página e supernós criados de grupos detectados podem ser considerados como supernós virtuais. Para a página P1 na Figura 8A, uma página (ou minipágina) contendo três elementos de texto pode ser considerada um supernó de página (PSN1) com 3 elementos. Na Figura 8B, a página P2 pode ser considerada um supernó de página (PSN2) com um elemento de texto e um supernó virtual (VSN1) contendo um elemento de texto e um elemento de desenho. Se as páginas P1 e P2 eram minipáginas contidas dentro de uma Página P3, a estrutura de nó resultante pode ser um supernó de página (PSN3) tendo 2 supernós de página (PSN1 e PSN2) cada um tendo elementos conforme ilustrado na Figura 8C.[00144] Reference is now made to Figures 8A, 8B and 8C which illustrate examples of how the supernode creator 230 can create a hierarchy of supernodes. As discussed earlier in this report, supernodes created from pages and mini-pages can be considered page supernodes, and supernodes created from discovered groups can be considered virtual supernodes. For page P1 in Figure 8A, a page (or minipage) containing three text elements can be considered a page supernode (PSN1) with 3 elements. In Figure 8B, page P2 can be thought of as a page supernode (PSN2) with a text element and a virtual supernode (VSN1) containing a text element and a drawing element. If pages P1 and P2 were mini-pages contained within a Page P3, the resulting node structure could be a page supernode (PSN3) having 2 page supernodes (PSN1 and PSN2) each having elements as illustrated in Figure 8C.

[00145] Será ainda observado que o criador de nó 238 pode definir containers firmemente apertados como um container A residindo dentro de um container B onde A e B têm tamanhos muito similares (ou seja, há pequenas margens em todos os lados entre A e B e onde A é o único componente dentro de B). O criador de nó 238 pode também realizar a reorganização do container com base na análise semântica dos componentes em múltiplos containers. Por exemplo, como é ilustrado na Figura 9 à qual a referência é agora feita, os componentes de texto T1, T2 e T3 são contidos no container C1 e os componentes de imagem P1, P2 e P3 são contidos no container C2. O criador de nó 238 pode realizar a análise semântica para reconhecer os pares de componente de texto e foto relacionados com base em seu tipo, proximidade e relação a outros componentes como ainda descrito abaixo. Com base nessa análise, o criador de nó 238 pode reconhecer que T1 e P1 formam um par relacionado, bem como T2-P2 e T3-P3, e, assim, pode remover esses seis componentes (T1, T2, T3, P1, P2, P3) dos containers C1 e C2 e colocá-los na página de conteúdo, preservando as informações sobre as relações entre eles conforme mostrado na Figura 10 à qual a referência é feita agora.[00145] It will be further noted that the node creator 238 can define tightly packed containers as a container A residing inside a container B where A and B are very similar in size (i.e. there are small margins on all sides between A and B and where A is the only component within B). Node creator 238 may also perform container reorganization based on semantic analysis of components in multiple containers. For example, as illustrated in Figure 9 to which reference is now made, text components T1, T2 and T3 are contained in container C1 and image components P1, P2 and P3 are contained in container C2. Node creator 238 may perform semantic analysis to recognize related text and photo component pairs based on their type, proximity and relationship to other components as further described below. Based on this analysis, node creator 238 can recognize that T1 and P1 form a related pair, as well as T2-P2 and T3-P3, and thus can remove these six components (T1, T2, T3, P1, P2 , P3) of containers C1 and C2 and place them on the content page, preserving information about the relationships between them as shown in Figure 10 to which reference is now made.

[00146] Além disso, o criador de nó 238 pode classificar os componentes que substancialmente sobrepõem um dado container (por exemplo, acima de 75% de sobreposição da área) como membros do container específico para a finalidade de geração de supernó, assim para fazer a hierarquia do supernó refletir melhor a disposição visual. Isso é relevante aos sistemas de design visual nos quais os componentes que não são logicamente contidos em um dado container podem ainda sobrepor o container.[00146] In addition, the 238 node creator can classify components that substantially overlap a given container (for example, above 75% area overlap) as members of the specific container for the purpose of supernode generation, so to do the supernode hierarchy better reflect the visual arrangement. This is relevant to visual design systems in which components that are not logically contained within a given container can still overlap the container.

[00147] Uma vez que a estrutura do supernó foi definida, o emissor da ordem 240 pode criar uma ordem para o conjunto de componentes e os supernós de página e os supernós virtuais contidos dentro de cada supernó (separadamente). Será ainda observado que essa ordem específica pode ainda ser modificada como um resultado das constatações de um localizador definido de ordem parcial conforme descrito em mais detalhes aqui abaixo. A referência é agora feita à Figura 11 que ilustra os elementos do emissor da ordem 240. O emissor da ordem 240 pode compreender um emissor básico de ordem 247, um localizador de Ordem Parcial (POS, Partial Order Set) 250 e um integrador de ordem 245. O emissor básico de ordem 247 pode ainda compreender um emissor da ordem de direção primária 241, uma direção primária com emissor da ordem de divisão e fusão 242, e um segmentador H/V 243. O segmentador H/V 243 pode ainda compreender um divisor do elemento 244 conforme descrito em mais detalhes aqui abaixo.[00147] Once the supernode structure has been defined, the orderer 240 can create an order for the set of components and the page supernodes and virtual supernodes contained within each supernode (separately). It will be further noted that this specific order may still be modified as a result of the findings of a defined partial order locator as described in more detail here below. Reference is now made to Figure 11 illustrating elements of the order taker 240. The order taker 240 may comprise a basic order taker 247, a Partial Order Set (POS) locator (POS) 250 and an order integrator. 245. The basic order sender 247 may further comprise a primary direction order sender 241, a split and merge order sender primary 242, and an H/V segmenter 243. The H/V segmenter 243 may further comprise an element divider 244 as described in more detail hereinbelow.

[00148] O localizador POS 250 pode compreender um localizador de POS cluster 251, um localizador de POS de relação semântica 252, um localizador de POS padrão 253, um localizador de POS predefinido 254 e um localizador de POS com base em ESI (Editar Informação de Sessão, Editing Session Information) 255. Será observado que o localizador de POS 250 pode analisar a semântica, o conteúdo e a geometria dos componentes.[00148] The POS locator 250 may comprise a cluster POS locator 251, a semantic relationship POS locator 252, a standard POS locator 253, a predefined POS locator 254 and a POS locator based on ESI (Edit Information Session, Editing Session Information) 255. It will be noted that the POS locator 250 can analyze the semantics, content and geometry of components.

[00149] Será observado que o emissor da ordem 240 pode tentar emular a ordem na qual um leitor humano pode visualizar os elementos em uma página (ou dentro do supernó específico). Será ainda observado que visto que uma página é uma entidade bidimensional (ou ainda tridimensional com ordem-z incluída), essa ordem pode não ser tão bem definida mesmo para um leitor humano.[00149] It will be noted that the issuer of order 240 may attempt to emulate the order in which a human reader might view the elements on a page (or within the specific supernode). It will also be noted that since a page is a two-dimensional entity (or even three-dimensional with z-order included), that order may not be as well defined even for a human reader.

[00150] A referência é agora feita à Figura 12 que mostra uma disposição de quatro parágrafos de texto em uma disposição quadrada. Supondo que os parágrafos estão em inglês (que lê de cima para baixo e da esquerda para a direita) não está claro se a ordem de leitura deveria ser A1, A2, B1, B2 ou A1, B1, A2, B2. Ambas as ordens podem ser consideradas corretas. Além disso, se os elementos são textos e fotos como é ilustrado na Figura 13 à qual a referência é feita agora, não está claro quais são os elementos relacionados de texto e foto.[00150] Reference is now made to Figure 12 which shows an arrangement of four paragraphs of text in a square arrangement. Assuming the paragraphs are in English (which reads top to bottom and left to right) it's not clear whether the reading order should be A1, A2, B1, B2 or A1, B1, A2, B2. Both orders can be considered correct. Furthermore, if the elements are text and photos as illustrated in Figure 13 to which reference is now made, it is not clear what the related text and photo elements are.

[00151] O emissor da ordem de direção primária 241 pode predefinir uma direção primária (ou seja, classificando primeiro as fileiras ou colunas) e pode, então, tentar classificar os componentes na página bidimensional com base na direção primária e, então, na direção secundária. Por exemplo, o emissor da ordem de direção primária 241 que opera no modo fileiras primeiro pode classificar os elementos em um supernó de modo que o elemento A precede o elemento B se A e B têm uma sobreposição Y adequada (por exemplo pelo menos 25% da menor altura dos dois) e o elemento A está à esquerda (ou seja, ordem dentro da fileira) ou se A e B não tem sobreposição Y suficiente e A é mais alto (ou seja, ordem entre fileiras).[00151] The issuer of the primary direction order 241 may predefine a primary direction (ie sorting rows or columns first) and may then attempt to sort the components on the two-dimensional page based on the primary direction and then the direction secondary. For example, the issuer of the 241 primary direction order operating in rows-first mode may sort the elements in a supernode such that element A precedes element B if A and B have adequate Y overlap (e.g. at least 25% of the smaller height of the two) and element A is on the left (i.e. within-row order) or if A and B do not have sufficient Y overlap and A is taller (i.e. inter-row order).

[00152] A direção primária com emissor da ordem de divisão e fusão 242 (aqui emissor da ordem de PDSM 242) pode também predefinir uma direção primária e pode também tentar rastrear qualquer divisão e fusão de fileira/coluna. Isso pode ser considerado mais comum para colunas ao contrário das fileiras. A referência é agora feita às Figuras 14A, 14B e 14C que ilustram os componentes (1-10) dentro de um supernó. Será observado que os componentes podem ser organizados de acordo com sua ordem no gráfico gerado da coluna dentro do nó. O emissor da ordem de PDSM 242 pode converter essencialmente um conjunto de retângulos (conforme mostrado na Figura 14A) em um gráfico de colunas (que pode combinar, dividir ou continuar conforme mostrado na Figura 14B) que é, então, utilizado para gerar uma ordem dos componentes (conforme mostrado na Figura 14C). Os retângulos podem possivelmente intersectar.[00152] The primary direction with split and merge command issuer 242 (here PDSM command issuer 242) may also preset a primary direction and may also attempt to track any row/column split and merge. This can be considered more common for columns as opposed to rows. Reference is now made to Figures 14A, 14B and 14C which illustrate components (1-10) within a supernode. It will be noticed that the components can be arranged according to their order in the graph generated from the column within the node. The PDSM order sender 242 can essentially convert a set of rectangles (as shown in Figure 14A) into a column chart (which can combine, split or continue as shown in Figure 14B) which is then used to generate an order components (as shown in Figure 14C). Rectangles can possibly intersect.

[00153] A referência é agora feita às Figuras 15A, 15B e 15C e às Figuras 16A, 16B, 16C, 16D, 16E, 16F e 16G que ilustram as etapas realizadas pelo emissor da ordem de PDSM 242 para definir um gráfico de coluna e a ordem resultante. A Figura 16A ilustra um conjunto de elementos C que precisa ser processado. O emissor da ordem de PDSM 242 pode definir uma relação de dois elementos entre os elementos no conjunto (etapa 400) e, então, pode “alternar” os elementos a serem organizados (conjunto C) entre um elemento de cabeçalho artificial A e um elemento de rodapé artificial B (etapa 410) como é mostrado. O emissor da ordem de PDSM 242 pode, então, criar dois novos conjuntos - um conjunto X das colunas geradas (em seu estado atual) (etapas 420 e 430) e seus elementos e um conjunto Y de elementos a ser processado em colunas (etapas 440 e 450). O emissor da ordem de PDSM 242 pode, então, digitalizar os elementos do conjunto Y de cima para baixo de acordo com sua ordem y (etapa 470) e para cada elemento Q no conjunto Y selecionar um subconjunto R dos elementos (em todas as colunas em X) que controla Q. A referência é agora feita à Figura 16B que ilustra como os elementos A, E e F controlam Q. O emissor da ordem de PDSM 242 pode, então, remover quaisquer duplicatas do conjunto R. Como pode ser visto na Figura 16B, bem como A, E e F controlam Q, A controla E e E controla F. Nesse cenário, a única conexão necessária pelo emissor da ordem de PDSM 242 pode ser a conexão entre Q e F (o último elemento de controle). Será observado que se R estiver vazio, isso pode ser considerado o início de uma coluna órfã sem conexão e, dessa forma, uma nova coluna é aberta em X com o elemento Q como é ilustrado na Figura 16C à qual a referência é feita agora. Será ainda observado que se R tem mais do que um elemento, o emissor da ordem de PDSM 242 pode conectar o elemento Q às colunas contendo cada um dos elementos C1...Cn, criando uma continuação da coluna (se conectada no final da coluna) ou divisão da coluna (se conectada na coluna média) para cada. Se houver mais do que uma coluna, o emissor da ordem de PDSM 242 pode combinar as colunas como é ilustrado na Figura 16D à qual a referência é feita agora. Como é mostrado na Figura 16D, o emissor da ordem de PDSM 242 pode combinar colunas G e H em uma única coluna continuada pelo elemento Q. A referência é agora feita à Figura 16E que mostra uma coluna G que continua de um elemento que não é o último elemento na coluna G. Nesse elemento do cenário, Q cria uma divisão na coluna G que cria 2 colunas continuadas por F e Q.[00153] Reference is now made to Figures 15A, 15B and 15C and Figures 16A, 16B, 16C, 16D, 16E, 16F and 16G which illustrate the steps taken by the issuer of the PDSM order 242 to define a column chart and the resulting order. Figure 16A illustrates a set of C elements that need to be processed. The PDSM order issuer 242 may define a two-element relationship between the elements in the set (step 400) and then may "switch" the elements to be arranged (set C) between an artificial header element A and an element artificial baseboard B (step 410) as shown. The PDSM order issuer 242 can then create two new sets - a set X of the generated columns (in their current state) (steps 420 and 430) and their elements and a set Y of elements to be processed into columns (steps 440 and 450). The PDSM order issuer 242 may then scan the elements of the Y set from top to bottom according to their y order (step 470) and for each Q element in the Y set select a subset R of the elements (in all columns in X) which controls Q. Reference is now made to Figure 16B which illustrates how elements A, E and F control Q. The PDSM order issuer 242 can then remove any duplicates from the set R. As can be seen in Figure 16B, as well as A, E and F control Q, A controls E and E controls F. In this scenario, the only connection required by the issuer of the PDSM order 242 may be the connection between Q and F (the last control element ). It will be noted that if R is empty, this can be considered the start of an orphaned column with no connection, and thus a new column is opened in X with the Q element as illustrated in Figure 16C to which reference is now made. It will be further noted that if R has more than one element, the issuer of the PDSM order 242 may connect the element Q to the columns containing each of the elements C1...Cn, creating a continuation of the column (if connected at the end of the column ) or column division (if connected in the middle column) for each. If there is more than one column, the PDSM order issuer 242 may combine the columns as illustrated in Figure 16D to which reference is now made. As shown in Figure 16D, the PDSM order issuer 242 can combine columns G and H into a single column continued by element Q. Reference is now made to Figure 16E which shows a column G that continues from an element that is not the last element in column G. In this scenario element, Q creates a split in column G that creates 2 columns continued by F and Q.

[00154] Será observado que quando uma coluna divide-se em um dado ponto, o conjunto dividido é organizado da esquerda para a direita, ou seja, as múltiplas colunas continuando a coluna que foi dividida têm uma ordem definida para elas de acordo com a coordenada x de sua margem esquerda. O mesmo se aplica à fusão da coluna. Também será observado que o emissor da ordem de PDSM 242 pode ter uma situação de divisão e fusão combinada como é ilustrado na Figura 16F à qual a referência é feita agora. Como é ilustrado, o elemento Q pode criar uma divisão para as 2 colunas contendo elementos G e H. O emissor da ordem de PDSM 242 pode combinar imediatamente as divisões em uma única coluna continuada pelo elemento Q.[00154] It will be observed that when a column splits at a given point, the split set is arranged from left to right, that is, the multiple columns continuing the column that was split have a defined order for them according to the x coordinate of its left margin. The same applies to spinal fusion. It will also be noted that the PDSM order issuer 242 may have a combined split and merge situation as illustrated in Figure 16F to which reference is now made. As illustrated, the Q element can create a split for the 2 columns containing G and H elements. The issuer of the PDSM order 242 can immediately combine the splits into a single column continued by the Q element.

[00155] Dessa forma, o emissor da ordem de PDSM 242 pode transferir os elementos de Y a X e conectá-los a uma ou mais colunas existentes em X (ou possivelmente criando novas colunas) com base nos critérios geométricos. Será observado que esse processo de digitalização pode criar uma série de colunas em X que pode iniciar, dividir, combinar ou terminar. O processo termina quando o elemento de rodapé artificial B é obtido. O emissor da ordem de PDSM 242 pode, então, digitalizar o gráfico (definido de acordo com as colunas no conjunto X) para calcular a ordem resultante. O emissor da ordem de PDSM 242 pode, então, dispor os elementos de acordo com a ordem no gráfico de cima para baixo e da esquerda para a direita, como é ilustrado na Figura 16G à qual a referência é feita.[00155] In this way, the issuer of the PDSM 242 order can transfer the elements from Y to X and connect them to one or more existing columns in X (or possibly creating new columns) based on the geometric criteria. It will be noted that this digitizing process can create a series of X-columns that can start, split, combine, or end. The process ends when artificial baseboard element B is obtained. The PDSM order sender 242 can then scan the graph (defined according to the columns in the X set) to calculate the resulting order. The PDSM orderer 242 may then arrange the elements according to the order in the graph from top to bottom and from left to right, as illustrated in Figure 16G to which reference is made.

[00156] Será ainda observado que no caso de colunas órfãs, o emissor da ordem de PDSM 242 pode dispor essas colunas de acordo com a ordem X como é ilustrado na Figura 16H à qual a referência é feita agora. Se os pares de elementos a-c e b-d estão próximos suficientemente para serem conectados, eles podem formar colunas completas e a ordem entre elas pode ser a-c-b-d e não a-b-c-d. Visto que elas não estão próximas o suficiente, elas não são conectadas fazendo com que os elementos c e d sejam colunas órfãs e a ordem à ordem de número especificado seja modificada conforme descrito aqui acima.[00156] It will be further observed that in the case of orphan columns, the issuer of the PDSM order 242 can arrange these columns according to the X order as illustrated in Fig. 16H to which reference is now made. If pairs of elements a-c and b-d are close enough to be connected, they can form complete columns and the order between them can be a-c-b-d and not a-b-c-d. Since they are not close enough together, they are not connected causing elements c and d to be orphaned columns and the order to the specified number order is modified as described here above.

[00157] Será observado que a funcionalidade do emissor da ordem de PDSM 242 pode ser corretamente modificada para supernós que têm conteúdo disposto da direita à esquerda (em vez de esquerda à direita).[00157] It will be noted that the functionality of the issuer of the PDSM 242 order can be correctly modified for supernodes that have content arranged from right to left (instead of left to right).

[00158] O segmentador H/V 243 pode utilizar corte horizontal e vertical alternado dos elementos em um supernó para criar uma árvore interna de tais divisões e, assim, definem uma ordem de exibição entre os elementos. Será observado que tal árvore interna é específica à um dado supernó e não é relacionada à árvore de nível de supernó geral. Será observado que o segmentador H/V 243 é mais bem adaptado aos websites no estilo “tablete de chocolate” que são embutidos das seções horizontal e vertical - clássicas em layouts de jornal como a página exemplar, como é ilustrado na Figura 17 à qual a referência é feita agora. O segmentador H/V 243 pode considerar o conjunto de elemento de um único supernó e criar uma árvore interna de nós (que são diferentes dos supernós de nível mais elevado, pois cada supernó pode conter uma árvore interna separada). Os nós podem ser dos seguintes tipos:[00158] The H/V 243 segmenter can use alternating horizontal and vertical cutting of the elements in a supernode to create an internal tree of such divisions and, thus, define a display order between the elements. It will be noted that such an inner tree is specific to a given supernode and is not related to the general supernode level tree. It will be noted that the H/V 243 segmenter is best suited to “chocolate tablet” style websites that are embedded with horizontal and vertical sections - classic in newspaper layouts like the copy page, as illustrated in Figure 17 to which the reference is made now. The H/V segmenter 243 can take the element set of a single supernode and create an internal tree of nodes (which are different from higher level supernodes in that each supernode can contain a separate internal tree). Nodes can be of the following types:

[00159] Nós-V (nós verticalmente dispostos) - um conjunto de subnós / elementos que está disposto de cima para baixo.[00159] V-nodes (vertically arranged nodes) - a set of subnodes / elements that are arranged from top to bottom.

[00160] Nós-H (nós horizontalmente dispostos) - um conjunto de subnós / elementos que está disposto da esquerda à direita (a disposição direita à esquerda é descrita aqui abaixo).[00160] H-nodes (horizontally arranged nodes) - a set of subnodes / elements that are arranged from left to right (right to left arrangement is described here below).

[00161] Nós folha - nós que representam elementos finais da árvore interna - componentes ou supernós contidos. Um nó folha pode conter múltiplos componentes que ainda encaixam dentro da largura alocada.[00161] Leaf nodes - nodes that represent final elements of the internal tree - contained components or supernodes. A leaf node can contain multiple components that still fit within the allocated width.

[00162] Nós UR (nós não solucionados) - nós que incluem múltiplos elementos que não foram dispostos ainda. Esse é o estado inicial de qualquer nó antes de ser convertido em um nó V/H/Folha.[00162] UR nodes (unresolved nodes) - nodes that include multiple elements that have not been laid out yet. This is the initial state of any node before it is converted to a V/H/Leaf node.

[00163] Cada nó pode conter um conjunto de referência de elemento, bem como as coordenadas e tamanhos dos elementos subjacentes e um retângulo completo para os elementos dos nós. Toda a coleta de nós (dos quatro tipos acima) dentro de um único supernó pode ser conhecida como uma árvore interna. Será observado que o segmentador H/V 243 pode ajustar o procedimento para os supernós que são especificados ou detectados como contendo material da direita para a esquerda (R2L) ou tendo um layout R2L.[00163] Each node can contain an element reference set, as well as the coordinates and sizes of the underlying elements and a complete rectangle for the elements of the nodes. The entire collection of nodes (of the above four types) within a single supernode can be known as an inner tree. It will be noted that the H/V segmenter 243 can adjust the procedure for supernodes that are specified or detected as containing right-to-left (R2L) material or having an R2L layout.

[00164] O segmentador H/V 243 pode em uma chamada inicial, criar uma árvore interna com um único nó-UR e colocar as referências em todos os elementos no supernó dentro dele. O segmentador H/V 243 pode manipular o nó UR considerando todos os elementos no nó. Se o retângulo de retângulo de fechamento dos elementos encaixar na largura permitida, o segmentador H/V 243 pode converter o nó em um nó folha. O segmentador H/V 243 pode também chamar o divisor do elemento 244 que pode sugerir uma divisão específica (horizontal ou vertical) dos elementos do nó-UR em subgrupos.[00164] The H/V 243 segmenter can, on an initial call, create an internal tree with a single UR-node and place references to all elements in the supernode within it. The H/V segmenter 243 can manipulate the UR node considering all elements in the node. If the elements' enclosing rectangle rectangle fits within the allowable width, the H/V segmenter 243 can convert the node to a leaf node. The H/V segmenter 243 may also invoke the element divider 244 which may suggest a specific division (horizontal or vertical) of the UR-node elements into subgroups.

[00165] O segmentador H/V 243 pode, então, converter o nó-UR em um Nó-H ou nó-V conforme apropriado. Será observado que para cada um dos subgrupos retornados pelo divisor do elemento 244, o segmentador H/V 243 pode calcular um retângulo de fechamento R para os elementos no subgrupo. Se a largura de R encaixar na largura permitida, então pode criar um nó folha descendente do nó N do subgrupo. Caso contrário, se o subgrupo tem mais do que 1, o segmentador H/V 243 do componente pode criar um nó-UR descendente do nó N do subgrupo e manipulá-lo corretamente conforme descrito aqui acima (ou seja, através de um aplicativo recursivo do segmentador H/V 243). Se a largura de R não encaixa na largura permitida, o segmentador H/V 243 pode criar um nó folha descendente do nó N do subgrupo de único elemento de conteúdo. O segmentador H/V 243 pode, então, aplicar a redução da largura como redimensionamento, realinhamento de texto etc., conforme descrito aqui acima.[00165] The H/V segmenter 243 can then convert the UR-node to an H-node or V-node as appropriate. It will be seen that for each of the subgroups returned by the element divider 244, the H/V slicer 243 can compute a closing rectangle R for the elements in the subgroup. If the width of R fits within the allowed width, then it can create a descendant leaf node of subgroup node N. Otherwise, if the subgroup has more than 1, the H/V segmenter 243 of the component can create a descendant UR-node of the subgroup node N and handle it correctly as described here above (i.e. via a recursive application of the H/V segmenter 243). If the width of R does not fit within the allowable width, the H/V segmenter 243 may create a leaf node descendant from node N of the single content element subgroup. The H/V slicer 243 can then apply width reduction such as resizing, text realignment, etc., as described hereinabove.

[00166] O segmentador H/V 243 pode, então, digitalizar a árvore interna gerada recursivamente (utilizando profundidade da primeira digitalização) e emitir os componentes (como os nós folha), de acordo com a ordem de digitalização. O segmentador H/V 243 pode digitalizar cada nó-H/V de acordo com sua ordem natural (por exemplo, cima para baixo para nó-V). Será observado que no estágio, visto que a ordem básica dos elementos foi gerada, a árvore interna criada para esse supernó não será mais necessária.[00166] The H/V 243 segmenter can then scan the internal tree generated recursively (using the depth of the first scan) and output the components (such as the leaf nodes), according to the scanning order. The H/V segmenter 243 can scan each H/V-node according to its natural order (eg top to bottom for V-node). It will be noticed that in the stage, since the basic order of the elements has been generated, the internal tree created for this supernode will no longer be needed.

[00167] Conforme discutido acima nesse relatório, o divisor do elemento 244 pode calcular uma divisão para um grupo de elementos. É possível calcular um retângulo de fechamento para cada elemento, ignorando as bordas ornamentais. O divisor de elemento 244 pode, então, projetar esses retângulos em ambos os eixos X e Y.[00167] As discussed above in this report, the 244 element divisor can calculate a division for a group of elements. It is possible to calculate a closing rectangle for each element, ignoring ornamental borders. Element splitter 244 can then project these rectangles on both the X and Y axes.

[00168] O divisor de elemento 244 pode, então, dividir cada conjunto de projeções de eixo em segmentos com diferente número de componentes projetado neles. Os segmentos com zero componentes projetados neles representam lacunas na dada direção de projeção. Será observado que o divisor do elemento 244 pode prover componentes de linha separadora específicos (possivelmente não exibível) para ajudar a determinar a direção de divisão direita (por exemplo, para utilizar como sugestão do designer ao processo). Tais componentes podem também ter um “peso” atribuído, assim eles contam (para a contagem de retângulo projetada) como um ou mais componentes.[00168] The element splitter 244 can then split each set of shaft projections into segments with different number of components projected onto them. Segments with zero components projected onto them represent gaps in the given projection direction. It will be noted that the splitter element 244 may provide specific (possibly non-displayable) splitter line components to help determine the right splitting direction (eg, to use as a designer's cue to the process). Such components may also have an assigned “weight”, so they count (for the projected rectangle count) as one or more components.

[00169] Se as lacunas são encontradas em ambas as direções, o divisor do elemento 244 pode gerar as divisões horizontal e vertical dos elementos com base nos divisores ortogonais aos segmentos da lacuna. Por exemplo, como é ilustrado na Figura 18 à qual a referência é feita agora, o caso A é uma divisão horizontal (em colunas) utilizando um único divisor e o caso B é uma divisão vertical (em fileiras) utilizando dois divisores.[00169] If gaps are found in both directions, the element splitter 244 can generate the horizontal and vertical splits of the elements based on the splitters orthogonal to the gap segments. For example, as illustrated in Figure 18 to which reference is now made, case A is a horizontal division (into columns) using a single divider and case B is a vertical division (into rows) using two dividers.

[00170] O divisor de elemento 244 pode calcular uma Classificação de Qualidade de Divisão (DQR, Division Quality Rating) para cada uma das duas direções utilizando uma média ponderada do número máximo de divisores e o tamanho total máximo de lacunas encontrado e o número mínimo de casos no qual elementos similares são quebrados em subgrupo separados pela divisão. Essa informação pode ser disponível do localizador de POS padrão 253 (conforme descrito em mais detalhes aqui abaixo) no estágio de criação de supernó que define a relação de similaridade entre os supernós descendentes. Como é ilustrado na Figura 19 à qual a referência é feita agora, uma divisão vertical (em fileiras) pode ser preferível para manter os serviços / projetos / caixas de clientes (A, B e C) juntos.[00170] Element splitter 244 can calculate a Division Quality Rating (DQR) for each of the two directions using a weighted average of the maximum number of splitters and the maximum total gap size found and the minimum number of cases in which similar elements are broken into subgroups separated by division. This information can be available from the default POS locator 253 (as described in more detail here below) in the supernode creation stage which defines the similarity relation between descendant supernodes. As illustrated in Figure 19 to which reference is now made, a vertical division (in rows) may be preferable to keep the services / projects / customer boxes (A, B and C) together.

[00171] O divisor de elemento 244 pode também considerar em qual das direções os componentes estão mais bem alinhados. Por exemplo, como é ilustrado na Figura 20 à qual a referência é feita agora, no cenário A a divisão deveria ser vertical (ou seja, os componentes estão dispostos e alinhados em fileiras) embora haja lacunas maiores ao fazer a divisão horizontal (ou seja, em colunas). Isso pode ser mais bem observado quando as linhas de alinhamento são adicionadas no cenário B.[00171] The element divider 244 can also consider in which of the directions the components are better aligned. For example, as illustrated in Figure 20 to which reference is now made, in scenario A the split should be vertical (i.e. the components are arranged and aligned in rows) although there are larger gaps when doing the horizontal split (i.e. , in columns). This can be best observed when alignment lines are added in scenario B.

[00172] O divisor de elemento 244 pode também adicionar um fator de preferência constante à divisão horizontal (o que reduz a largura) vs. divisão vertical (que não). O divisor de elemento 244 pode, então, retornar a divisão com a DQR mais alta.[00172] The 244 element splitter can also add a constant preference factor to the horizontal split (which reduces the width) vs. vertical split (which it doesn't). Element divider 244 can then return the division with the highest DQR.

[00173] Se as lacunas são encontradas em apenas uma direção, o divisor do elemento 244 pode retornar a divisão nessa direção. Se nenhuma lacuna for encontrada, pode haver um caso de elementos de intertravamento. Nesse caso, o divisor do elemento 244 pode criar um divisor que cruza um dos elementos. Por exemplo, como é ilustrado na Figura 21 à qual a referência é feita agora, os elementos são divididos utilizando a linha divisora vertical A que pode cruzar p elemento B apenas. Todos os elementos marcados como R podem ser associados com o lado direito da divisão (incluindo o elemento B) e o elemento L pode ser associado com o lado esquerdo da divisão.[00173] If gaps are found in only one direction, the 244 element splitter can return the split in that direction. If no gaps are found, there may be a case of interlocking elements. In that case, the element divider 244 can create a divider that intersects one of the elements. For example, as illustrated in Figure 21 to which reference is now made, elements are divided using the vertical dividing line A which can intersect element B only. All elements marked as R can be associated with the right side of the division (including the B element) and the L element can be associated with the left side of the division.

[00174] Será observado que nesse cenário, o divisor do elemento 244 pode encontrar o segmento de projeção (dos segmentos de projeção em ambos os eixos X e Y) que tem um número mínimo de elementos cruzados. Se há apenas um desse segmento, o divisor do elemento 244 pode definir uma divisão com base nele. Se houver dois ou mais desses segmentos (em quaisquer direções) tendo número mínimo idêntico de elementos cruzados, o divisor do elemento 244 pode criar um conjunto de divisões de único divisor com base nos segmentos tendo o número mínimo de elementos cruzados.[00174] It will be noted that in this scenario, the splitter of element 244 can find the projection segment (of the projection segments on both the X and Y axes) that has a minimum number of cross elements. If there is only one such segment, the 244 element divider can define a division based on it. If there are two or more such segments (in either direction) having identical minimum number of cross elements, the element splitter 244 can create a single split split set based on the segments having the minimum number of cross elements.

[00175] Para cada uma dessas divisões, o divisor do elemento 244 pode, então, calcular uma DQR com base em uma média ponderada, os critérios para o cálculo de DQR regular (conforme discutido aqui acima), da área mínima do elemento cruzado e a definição do corte, ou seja, tendo a porcentagem mínima da área do elemento cruzado em um lado do divisor de cruzamento, de modo que o elemento cruzado pertence mais distintamente a um dos dois lados do divisor. De modo alternativo, o divisor do elemento 244 pode utilizar a divisão com a DQR mais alta.[00175] For each of these splits, the 244 element splitter can then calculate a DQR based on a weighted average, the criteria for calculating regular DQR (as discussed here above), the minimum cross-element area, and the definition of the cut, that is, having the minimum percentage of the cross element area on one side of the crossing divider, so that the cross element more distinctly belongs to one of the two divider sides. Alternatively, the element divider 244 may use the division with the highest DQR.

[00176] O divisor de elemento 244 pode, então, retornar a divisão selecionada, com cada elemento cruzado fixado ao lado do divisor que contém a área maior dos elementos cruzados.[00176] The 244 element splitter can then return the selected split, with each cross element pinned to the side of the splitter that contains the largest area of the cross elements.

[00177] Em uma realização alternativa, o divisor do elemento 244 pode tentar criar múltiplos divisores com base nos múltiplos segmentos de projeção tendo o mesmo número de elementos cruzados e avaliar as divisões contendo múltiplos elementos cruzados.[00177] In an alternative embodiment, the element splitter 244 may attempt to create multiple splitters based on multiple projection segments having the same number of cross elements and evaluate the splits containing multiple cross elements.

[00178] Será observado que o divisor do elemento 244 pode chamar um cálculo alternativo de DQR recursivamente para cada uma das possíveis divisões e pode verificar o valor de DQR as divisões criadas após cada uma das divisões potenciais ser tentada. Será ainda observado que, dessa forma, o divisor do elemento 244 pode encontrar o melhor elemento único para cruzar de modo que outras divisões possam ser bem-sucedidas.[00178] It will be noted that the divider of element 244 can call an alternative DQR calculation recursively for each of the possible splits and can check the DQR value of the splits created after each of the potential splits is attempted. It will further be seen that in this way the element splitter 244 can find the best single element to cross so that further splits can be successful.

[00179] Será observado que em paralelo ao emissor básico de ordem 247, o localizador de POS 250 pode detectar os conjuntos dos componentes que estão relacionados em alguma forma e deveriam possivelmente permanecer juntos quando os elementos são reorganizados para uma tela de dispositivo móvel. Por exemplo, os componentes podem ser um cabeçalho de texto e o parágrafo de texto correspondente.[00179] It will be seen that in parallel to the basic order sender 247, the POS locator 250 can detect sets of components that are related in some way and should possibly remain together when the elements are rearranged for a mobile device screen. For example, the components could be a text heading and the corresponding paragraph of text.

[00180] O localizador de POS cluster 251 pode detectar uma ordem parcial do cluster quando os componentes (de qualquer tipo) estão muito próximos comparados ao espaçamento regular entre os componentes em um supernó particular. O localizador de POS do cluster 251 pode calcular a distância média entre os componentes no supernó e, então, vincular todos os pares de componente no supernó, buscando pares de componente cuja distância é uma dada fração da distância média calculada. O localizador de POS do cluster 251 pode, então, unir esses pares de componente em conjuntos, executando uma distância máxima dada entre os dois componentes mais distantes em cada conjunto (especificado como uma fração da distância média). O localizador de POS do cluster 251 pode também utilizar uma média ou cálculo médio em vez do cálculo de média a fim de considerar um dado número de valores extremos que podem distorcer o valor da distância média. Em uma realização alternativa, o localizador de POS cluster 251 pode utilizar qualquer algoritmo de agrupamento conhecido na técnica. O localizador de POS 251 pode, então, verificar os clusters extraídos e se estão densos suficientemente (por exemplo, a distância máxima entre os membros do cluster está abaixo de um dado certo limite), criar uma ordem parcial do cluster.[00180] The POS cluster locator 251 can detect a partial cluster order when components (of any type) are very close compared to regular spacing between components on a particular supernode. Cluster POS locator 251 can calculate the average distance between components in the supernode and then link all component pairs in the supernode, looking for component pairs whose distance is a given fraction of the calculated average distance. Cluster POS locator 251 can then join these component pairs into sets by running a given maximum distance between the two farthest components in each set (specified as a fraction of the average distance). The cluster POS locator 251 may also use an averaging or averaging calculation instead of averaging to account for a given number of extreme values that may skew the average distance value. In an alternative embodiment, POS cluster locator 251 may utilize any clustering algorithm known in the art. The POS locator 251 can then check the extracted clusters and if they are dense enough (eg maximum distance between cluster members is below a given threshold), create a partial cluster order.

[00181] O localizador de POS de relação semântica 252 pode detectar uma ordem parcial de relação semântica quando há combinações específicas de componentes dos tipos de dados que estão próximos, por exemplo, uma foto e sua captura. O localizador de POS de relação semântica 252 pode digitalizar todos os possíveis pares de componentes dentro do supernó e para cada par potencial, verificar que cada um dos componentes tem o tipo correto (por exemplo, um é texto e um é foto), que os componentes estão próximos (distância está abaixo de um dado limite) e que não há componente de intervenção entre eles. O localizador de POS de relação semântica 252 pode verificar que para um par de componentes avaliado [A, B], que não há terceiro componente C que pode substituir B, é do tipo correto para B e está mais próximo à A do que B. O mesmo se aplica para a relação entre A e C.[00181] The semantic relationship POS locator 252 can detect a semantic relationship partial order when there are specific combinations of components of the data types that are close, for example, a photo and its capture. The semantic relation POS locator 252 can scan all possible pairs of components within the supernode and for each potential pair, verify that each of the components has the correct type (e.g., one is text and one is photo), that the components are close (distance is below a given threshold) and that there is no intervening component between them. The semantic relationship POS finder 252 can verify that for an evaluated component pair [A, B], that there is no third component C that can replace B, is of the correct type for B, and is closer to A than B. The same applies for the relationship between A and C.

[00182] Outra combinação de pares de componentes pode ser texto e uma ordem parcial de botão. Será observado que nesse cenário, o localizador de POS de relação semântica 252 pode conectar um botão que descreve um campo de texto ao campo de texto real. Será observado que a relação pode ser determinada de acordo com a posição apenas.[00182] Another combination of component pairs can be text and a partial button order. It will be noted that in this scenario, the semantic relationship POS locator 252 may connect a button describing a text field to the actual text field. It will be observed that the ratio can be determined according to the position only.

[00183] Outra combinação pode ser a ordem parcial de junção de texto. Nesse cenário, o localizador de POS de relação semântica 252 pode combinar múltiplos elementos de texto que continuam entre si. Será observado que o localizador de POS de relação semântica 252 pode apenas reconhecer um elemento de texto estando acima de outro elemento de texto. Será ainda observado que pode ter qualquer número desses elementos em um dado conjunto - não apenas 2 - que estão todos conectados juntos.[00183] Another combination can be partial text join order. In this scenario, the semantic relationship POS locator 252 may combine multiple text elements that continue with each other. It will be noted that the semantic relationship POS locator 252 can only recognize a text element being above another text element. It will further be noted that there can be any number of these elements in a given set - not just 2 - which are all connected together.

[00184] O localizador de POS 253 padrão pode detectar uma ordem parcial padrão quando há um padrão de repetição de um dado número de componentes (por exemplo, pares de componente ou tripletos) tendo tipo específico, propriedades e layout a uma dada distância. O localizador de POS padrão 253 pode também detectar as ordens parciais padrão no caso de padrões alternados ilustrados na Figura 22 à qual a referência é feita agora. Os pares de componentes A e C têm texto à esquerda e foto à direita, enquanto que os pares de componente B e D têm texto à direita e foto à esquerda. O localizador de POS padrão 253 pode detectar tal padrão com base nos pares de componente tendo tipos específicos e propriedades, mas com a distância horizontal sendo uma das duas opções (números negativos ou positivos tendo o mesmo valor absoluto) em cada um dos pares de componente. O localizador de POS padrão 253 (no exemplo de padrões de 2 membros que podem ser unificados posteriormente), pode digitalizar todos os componentes no supernó e para cada componente; localizar seus vizinhos mais próximos em todos os quatro lados do componente. O localizador de POS padrão 253 pode incluir vizinhos que sobrepõem o componente até um dado limite especificado. O localizador de POS padrão 253 pode, então, salvar uma lista de relações entre os componentes e seus vizinhos e, então, digitalizar a lista gerada de relações e selecionar os pares de relações que são similares de acordo com os seguintes atributos: os componentes têm os mesmos tipos (por exemplo, um componente [foto,txt] é similar a outro componente [foto,txt]), os componentes têm a mesma direção (incluindo as direções reversas se os padrões alternados são suportados e a distância similar (sujeita a um dado limite para diferença).[00184] The POS 253 pattern locator can detect a pattern partial order when there is a repeating pattern of a given number of components (eg component pairs or triplets) having specific type, properties and layout at a given distance. The pattern POS locator 253 can also detect pattern partial orders in the case of alternating patterns illustrated in Figure 22 to which reference is now made. Component pairs A and C have text on the left and photo on the right, while component pairs B and D have text on the right and photo on the left. The standard POS finder 253 can detect such a pattern based on the component pairs having specific types and properties, but with the horizontal distance being one of two options (negative or positive numbers having the same absolute value) in each of the component pairs . The standard POS finder 253 (in the example of 2-member patterns that can be unified later), can scan all components in the supernode and for each component; locate its nearest neighbors on all four sides of the component. The default POS locator 253 can include neighbors that overlap the component up to a given specified boundary. The standard POS finder 253 can then save a list of relationships between the components and their neighbors and then scan the generated list of relationships and select the pairs of relationships that are similar according to the following attributes: the components have the same types (for example, one component [photo,txt] is similar to another component [photo,txt]), components have the same direction (including reverse directions if alternating patterns are supported, and similar distance (subject to a given threshold for difference).

[00185] Será observado que dois componentes em uma relação selecionada deveriam ter diferentes tipos - caso contrário um conjunto de quatro componentes do mesmo tipo dispostos em um quadrado gerariam dois conjuntos conflitantes de pares de relação similar. Por exemplo, como é ilustrado na Figura 23 à qual a referência é feita agora, os quatro componentes de imagem podem ser divididos em pares horizontalmente (associações de par H1, H2) ou verticalmente (associações de par V1 e V2).[00185] It will be noted that two components in a selected relation should have different types - otherwise a set of four components of the same type arranged in a square would generate two conflicting sets of pairs of similar relation. For example, as illustrated in Figure 23 to which reference is now made, the four image components can be paired horizontally (pair associations H1, H2) or vertically (pair associations V1 and V2).

[00186] O localizador de POS padrão 253 pode digitalizar a lista de relações selecionadas e combiná-las em conjuntos (por exemplo, se r1==r2 e r2==r3, pode-se criar o conjunto [r1,r2,r3]). O localizador de POS padrão 253 pode também remover duplicatas. Será observado que um único conjunto de padrões (por exemplo, um conjunto de múltiplos [txt,txt,pic] conjuntos de componente) deveria ser manipulado junto.[00186] The default POS locator 253 can scan the list of selected relationships and combine them into sets (for example, if r1==r2 and r2==r3, you can create the set [r1,r2,r3] ). The standard POS finder 253 can also remove duplicates. It will be noted that a single set of patterns (eg a set of multiple [txt,txt,pic] component sets) should be handled together.

[00187] O localizador de POS 254 predefinido pode detectar as ordens parciais que são criadas com base nas dicas específicas que podem ser providas pelo designer do aplicativo ou dentro do modelo original do aplicativo. Tais dicas podem ter várias formas. Os componentes compostos específicos que incluem as dicas do sistema de ordem parcial predefinidas, como um componente de “captura de foto + texto” pode incluir o acoplamento dos dois em uma ordem parcial predefinida. Outra dica pode ser a associação explicitamente especificada dos componentes arbitrários na página ou uma associação relacionada ao móvel derivada de outras formas de associação disponíveis em um sistema de design visual como agrupamento para edição, pois muitos sistemas de design visuais têm a capacidade de associar os componentes em grupos, assim eles podem ser movidos, redimensionados ou, caso contrário, modificados juntos. Outra associação pode ser âncoras de layout dinâmico, visto que os sistemas de design visual podem suportar as âncoras de layout dinâmico (explicitamente especificada ou automaticamente criada da definição de layout). Tais âncoras podem servir adicionalmente como dicas para criação de ordem parcial. Ainda outra associação pode ser modelos - conjuntos de componentes criados de múltiplos casos do mesmo modelo de múltiplos componentes.[00187] The predefined POS locator 254 can detect partial orders that are created based on specific hints that can be provided by the application designer or within the original application template. Such hints can take many forms. Specific composite components that include predefined partial order system hints, such as a “picture + text capture” component can include coupling the two in a predefined partial order. Another tip could be the explicitly specified association of arbitrary components on the page or a furniture-related association derived from other forms of association available in a visual design system such as grouping for editing, as many visual design systems have the ability to associate the components together. into groups so they can be moved, resized, or otherwise modified together. Another binding can be dynamic layout anchors, as visual design systems can support dynamic layout anchors (explicitly specified or automatically created from the layout definition). Such anchors can additionally serve as hints for partial order creation. Yet another association can be templates - sets of components created from multiple instances of the same multi-component template.

[00188] Será observado que o localizador de POS 254 predefinido pode prover ambos os grupos predefinidos e as ordens parciais predefinidas. Esses são elementos diferentes do sistema e o localizador de POS predefinido 254 pode permitir que o designer especifique as dicas de grupo predefinidas (utilizadas para agrupar os componentes em um supernó virtual), bem como ordens parciais predefinidas/dicas de ordem (utilizadas para guiar o processo de organização).[00188] It will be noted that the predefined POS locator 254 can provide both predefined groups and predefined partial orders. These are different elements of the system and the predefined POS locator 254 can allow the designer to specify predefined group hints (used to group the components into a virtual supernode) as well as predefined partial orders/order hints (used to guide the organization process).

[00189] O localizador de POS com base em ESI 255 pode detectar a criação automática de ordens parciais com base na ESI (se disponível). Em particular, o localizador de POS com base em ESI 255 pode associar os (em uma ordem parcial) componentes com base na informação coletada das sessões de edição prévias como os conjuntos de componentes que criaram a duplicação ou cópia e colagem, conjuntos de componentes que foram agrupados e editados juntos (por exemplo, quando o sistema de design visual suporta apenas o agrupamento ad hoc para edição que não é preservada no banco de dados) e conjuntos de componentes que foram editados na sequência.[00189] ESI based POS locator 255 can detect automatic creation of partial orders based on ESI (if available). In particular, the POS locator based on ESI 255 can associate (in a partial order) components based on information gathered from previous editing sessions such as sets of components that created the duplication or copy and paste, sets of components that were grouped and edited together (for example, when the visual design system only supports ad hoc grouping for editing that is not preserved in the database) and sets of components that were edited in sequence.

[00190] Uma vez que o emissor da ordem 240 criou uma ordem básica e o localizador de POS 250 determinou quaisquer ordens parciais, o integrador de ordem 245 pode integrar a ordem básica e as ordens parciais detectadas para criar uma ordem modificada combinada (que é uma ordem total para todos os elementos envolvidos), solucionando as ordens parciais contraditórias ao longo do caminho.[00190] Once the order taker 240 has created a base order and the POS locator 250 has determined any partial orders, the order integrator 245 can integrate the base order and the detected partial orders to create a combined modified order (which is a total order for all elements involved), resolving contradictory partial orders along the way.

[00191] Será observado que alguns dos elementos do emissor básico de ordem 247 podem não criar uma ordem completa entre todos os componentes, mas podem dividir a página/o supernó em seções da página que encaixam na largura permitida. Isso pode ser relevante quando há uma necessidade de manter a estrutura básica, por exemplo, ao converter um aplicativo em dispositivo (por exemplo, tabela, grande exibição) tendo uma largura similar à ou maior que a exibição do desktop. Nesse cenário, uma decomposição completa em componentes disposta em uma linha pode destruir a disposição básica do componente subjacente e o “recorte” mínimo pode ser visualmente superior. A fim de fazer isso, os elementos do emissor básico de ordem 247 podem ser modificados para assim trabalhar nas seções da página (que ainda encaixam na largura disponível) em vez de componentes separados.[00191] It will be noted that some of the basic sender elements of order 247 may not create a complete order among all components, but may split the page/supernode into sections of the page that fit within the allowable width. This can be relevant when there is a need to maintain the basic structure, for example when converting an application to a device (eg table, large view) having a width similar to or greater than the desktop view. In this scenario, a complete decomposition into components laid out in a row can destroy the basic layout of the underlying component and the minimal “clipping” can be visually superior. In order to do this, the base sender elements of order 247 can be modified to thus work in sections of the page (which still fit within the available width) rather than separate components.

[00192] O emissor básico de ordem 247 pode, então, utilizar essa informação como uma diretriz de modo que as seções da página que são conectadas através das conexões de POS substanciais não sejam recortadas.[00192] The basic sender 247 can then use this information as a guideline so that sections of the page that are connected via the POS substantive connections are not clipped.

[00193] Será observado que o criador de supernó 230, o emissor básico de ordem 247 e o localizador de POS 250 podem ainda criar resultados que contradizem entre si. Por exemplo, um dos subelementos do localizador de POS 250 pode gerar uma definição específica de ordem parcial que envolve alguns elementos e outro elemento pode gerar uma definição de ordem parcial diferente e contraditória. O integrador de ordem 245 pode combinar resultados dos diferentes elementos e pode também solucionar quaisquer conflitos a fim de criar uma única saída.[00193] It will be noted that the supernode creator 230, the basic order sender 247 and the POS locator 250 can still create results that contradict each other. For example, one of the sub-elements of the POS 250 locator may generate a specific partial order definition involving some elements and another element may generate a different and contradictory partial order definition. The 245 order integrator can combine results from different elements and can also resolve any conflicts to create a single output.

[00194] Será ainda observado que a fim de solucionar tais conflitos, o criador de supernó 230, o emissor básico de ordem 247 e o localizador de POS 250 podem todos utilizar uma pontuação de qualidade. Por exemplo, um design com base nas solicitações explícitas do designer pode tipicamente ter a pontuação de qualidade máxima, como pode ser assumido que o designer está completamente ciente da composição de seu desenho. Será observado que o criador de supernó 230, o emissor básico de ordem 247 e o localizador de POS 250 podem todos verificar suas pontuações contra as pontuações de qualidade mantidas pelo marcador 500 que pode prover para cada resultado gerado uma pontuação de certeza de quanto o elemento está certo sobre a correção do resultado específico com base nos parâmetros analisados.[00194] It will be further noted that in order to resolve such conflicts, the supernode creator 230, the basic order issuer 247 and the POS locator 250 may all utilize a quality score. For example, a design based on the designer's explicit requests may typically have the maximum quality score, as it can be assumed that the designer is fully aware of the composition of his design. It will be noted that the supernode creator 230, the basic order sender 247 and the POS finder 250 can all check their scores against the quality scores maintained by the marker 500 which can provide for each result generated a certainty score of how much the element is right about correcting the specific result based on the analyzed parameters.

[00195] O integrador de ordem 245 pode coletar os resultados do emissor básico de ordem 247 e do localizador de POS 250 e tentar integrá-los. Será observado que os resultados que não se contradizem podem simplesmente ser combinados. Os resultados que se contradizem podem exigir que o integrador de ordem 245 selecione qual utilizar. Isso pode ser feito de acordo com um cálculo da qualidade combinada e pontuações de certeza para o resultado particular. Os resultados podem ser descartados se não atenderem um dado limite de certeza (opcional).[00195] The order integrator 245 can collect the results from the basic order sender 247 and the POS locator 250 and attempt to integrate them. It will be noted that results that do not contradict each other can simply be combined. Contradicting results may require the order 245 integrator to select which one to use. This can be done according to a calculation of the combined quality and certainty scores for the particular outcome. Results can be discarded if they do not meet a given certainty threshold (optional).

[00196] O integrador de ordem 245 também pode considerar a informação adicional como os resultados que são definidos sobre os componentes que residem em um modelo que pode ter uma certeza mais alta do que os resultados que apenas incluem os componentes definidos na página atual (por exemplo, devido aos modelos sendo mais bem desenhados do que as páginas regulares). Também pode-se considerar os resultados que podem ser similares aos resultados encontrados nas páginas anteriores ou supernós que foram manipulados antes e, desse modo, podem receber uma certeza mais alta.[00196] The 245-order integrator can also consider additional information such as results that are defined about components residing in a model that may have a higher certainty than results that only include components defined on the current page (e.g. example, due to templates being better designed than regular pages). You can also consider results that may be similar to results found on previous pages or supernodes that have been manipulated before and thus may be given a higher certainty.

[00197] O integrador de ordem 245 pode ser estendido para, assim, aprender a estrutura das páginas criadas por um dado designer, possivelmente utilizando o feedback desse designer para classificar os resultados do elemento.[00197] The 245 order integrator can be extended to thus learn the structure of the pages created by a given designer, possibly using that designer's feedback to rank the element's results.

[00198] Será observado que um elemento particular pode retornar um conjunto de resultados que deveria ser implementado junto ou de nenhuma forma. Por exemplo, o localizador de POS padrão 253 pode encontrar um padrão repetido de componentes. Tal padrão deveria ser utilizado para todos os componentes envolvidos, ou nenhum.[00198] It will be noted that a particular element may return a result set that should be implemented together or not at all. For example, POS pattern finder 253 can find a repeating pattern of components. Such a pattern should be used for all components involved, or none at all.

[00199] Uma vez que os componentes foram organizados corretamente, o posicionador 270 pode, então, posicionar os componentes e quaisquer componentes automaticamente adicionados (conforme descrito em mais detalhes aqui abaixo) em sua posição apropriada na página. Pode posicionar os elementos organizados conforme necessário nas linhas do componente assim para encaixar na largura disponível de acordo com a ordem total determinada e o espaço permitido. Será observado que a largura disponível pode ser definida pela largura do supernó de página, menos quaisquer margens predefinidas e outras restrições, como espaços reservados. Por exemplo, dado que a largura da página principal é 320px, a margem é 10px para esquerda e direita e nenhum espaço reservado, então, a largura disponível do supernó de página principal seria 320 - (2*10) = 300px. Um supernó de página que é contido no supernó de página principal e que tem a largura máxima disponível, teria a largura disponível de 300 - (2*10) = 280px etc.[00199] Once the components have been arranged correctly, the placer 270 can then position the components and any automatically added components (as described in more detail here below) in their appropriate position on the page. You can position the elements arranged as needed in the component rows so as to fit in the available width according to the given total order and the space allowed. It will be noted that the available width can be defined by the width of the page supernode, minus any predefined margins and other restrictions such as placeholders. For example, given that the main page width is 320px, the margin is 10px left and right, and no placeholder, then the available width of the main page supernode would be 320 - (2*10) = 300px. A page supernode that is contained within the main page supernode and that has the maximum available width would have an available width of 300 - (2*10) = 280px etc.

[00200] O posicionador 270 pode aplicar as dicas de layout fixadas ao componente como parte da configuração do layout do desktop se marcadas como “reter na configuração de layout do dispositivo móvel”. Tais componentes podem funcionar mais similar aos componentes automaticamente adicionados, pois se tornam parte da estrutura básica do container, que pode acionar a criação da linha do componente, em vez de fazer parte das próprias linhas do componente.[00200] The 270 placer can apply layout hints pinned to the component as part of the desktop layout setting if marked as “retain in mobile device layout setting”. Such components can function more similarly to automatically added components, as they become part of the basic structure of the container, which can trigger the creation of the component row, rather than being part of the component rows themselves.

[00201] O posicionador 270 pode, então, criar quebras de linha de acordo com as dicas explícitas (por exemplo, “colocar esse grupo/POS em uma linha separada”) criadas pelo criador de supernó 230 e pelo emissor da ordem 240. Quando um componente adicionado exceder a largura disponível (considerando os espaços reservados), o posicionador 270 pode tentar manter os grupos de componentes juntos, ou seja, se necessário criar uma quebra de linha antes de um grupo de modo que todo o grupo encaixaria na mesma linha do componente. O posicionador 270 pode evitar adicionar uma quebra de linha entre os componentes tendo uma relação semântica (conforme detectado previamente, por exemplo, pelo localizador de POS 250).[00201] Placer 270 can then create line breaks according to the explicit hints (eg “put this group/POS on a separate line”) created by supernode creator 230 and order issuer 240. an added component exceeds the available width (considering the placeholders), the placer 270 can try to keep groups of components together, i.e. if necessary create a line break before a group so that the whole group would fit on the same line of the component. Positioner 270 can avoid adding a line break between components having a semantic relationship (as previously detected, for example, by POS locator 250).

[00202] O posicionador 270 pode também aplicar o meio de redução de largura em cada elemento de acordo com seu tipo. O meio de redução de largura pode incluir modificar os componentes que podem ser adaptados (por exemplo, componentes de texto), de acordo com o tipo de componente - incluindo reescalonamento, mudança do tamanho de fonte, realinhamento do texto etc. A redução da largura pode também utilizar o método de manipulação prescrito para cada supernó virtual de acordo com seu tipo. Esse meio de redução de largura pode também incluir transformações similares a aquelas realizadas pelo ajustador de componente 227 (como um estágio de pré- processamento) - que podem agora ser realizadas com a informação adicionada sobre a posição final e tamanho dos componentes na configuração de layout do dispositivo móvel. O posicionador 270 pode também realizar a ampliação da largura, por exemplo, para ampliar um componente que foi colocado sozinho em uma linha do componente.[00202] The positioner 270 can also apply the width reduction means to each element according to its type. Means of reducing width may include modifying adaptable components (e.g. text components) according to the type of component - including rescaling, changing font size, realigning text, etc. Width reduction can also use the manipulation method prescribed for each virtual supernode according to its type. This means of reducing width can also include transformations similar to those performed by the component adjuster 227 (as a pre-processing stage) - which can now be performed with the added information about the final position and size of components in the layout configuration. of the mobile device. Positioner 270 can also perform width magnification, for example, to enlarge a component that has been placed alone on a component row.

[00203] O posicionador 270 provê meio de redimensionamento específico para tipos de elemento específicos. Por exemplo, o posicionador 270 pode redimensionar os supernós que representam o grupo de texto sobre imagens (conforme localizado pelo localizador de grupo de texto sobre imagem 234) utilizando a imagem de fundo como um container virtual. Depois o texto é redimensionado a fim de atingir a altura e a largura desejadas. Isso inclui o mapeamento do tamanho de fonte e o realinhamento do texto que pode mudar a relação de aspecto do componente de texto (por exemplo, fazendo um componente de texto maior com caracteres maiores dentro) como é ilustrado na Figura 6 à qual a referência é feita agora. Como é mostrado, ao mover do cenário 1 ao cenário 2, o tamanho de fonte é aumentado enquanto a largura do campo foi reduzida - exigindo um realinhamento do texto. O localizador de grupo de texto sobre imagem 234 pode também redimensionar o grupo quando a imagem de fundo é redimensionada ao próximo tamanho do texto - tipicamente mudando a relação de aspecto.[00203] Positioner 270 provides specific resizing means for specific element types. For example, the placer 270 can resize the supernodes representing the text-over-pictures group (as located by the text-over-pictures group locator 234) using the background image as a virtual container. Then the text is resized to reach the desired height and width. This includes font size mapping and text realignment which can change the aspect ratio of the text component (e.g. making a text component larger with larger characters inside) as illustrated in Figure 6 to which reference is made. done now. As shown, when moving from Scenario 1 to Scenario 2, the font size is increased while the field width is reduced - requiring a realignment of the text. The text-on-picture group locator 234 may also resize the group when the background image is resized to the next text size - typically changing the aspect ratio.

[00204] Será observado que isso poderia causar um “acidente visual” se a foto tiver um conteúdo real que não pareceria bem quando a relação de aspecto for modificada (por exemplo, uma foto de uma pessoa) como é ilustrado na Figura 7 à qual a referência é feita agora. O localizador de grupo de texto sobre imagem 234 pode tentar solucionar esse problema verificando o conteúdo de imagem para ver se contém informação detalhada ou preservando a relação interna de aspecto da imagem aplicando zoom e recortando a imagem em vez de redimensioná-la.[00204] It will be noted that this could cause a “visual accident” if the photo has real content that would not look good when the aspect ratio is modified (for example, a photo of a person) as illustrated in Figure 7 to which the reference is made now. The text-on-picture group locator 234 can attempt to solve this problem by checking the image content to see if it contains detailed information or by preserving the internal aspect ratio of the image by zooming and cropping the image instead of resizing it.

[00205] Alguns componentes têm um grau de autonomia ao realizar seu próprio redimensionamento. Por exemplo, componentes de aplicativo de terceiros (que podem suportar múltiplas variantes tendo diferentes tamanhos de exibição) e aplicativos em lista (que podem ter múltiplas associações da visualização). Tais componentes realizam seu próprio redimensionamento, com base em um tamanho alvo provido pelo posicionador 270.[00205] Some components have a degree of autonomy when performing their own resizing. For example, third-party application components (which can support multiple variants having different display sizes) and list applications (which can have multiple view associations). Such components perform their own scaling, based on a target size provided by positioner 270.

[00206] O posicionador 270 pode também redimensionar/repetir a imagem de decoração conforme necessário para encaixar o novo tamanho da imagem. Se a página exceder um dado parâmetro de comprimento, o posicionador 270 pode possivelmente criar um menu de navegação interna da página e adicioná-lo como um menu separado à página, ou a quaisquer menus unificados existentes conforme apropriado.[00206] Positioner 270 can also resize/repeat the decoration image as needed to fit the new image size. If the page exceeds a given length parameter, the positioner 270 may possibly create an in-page navigation menu and add it as a separate menu to the page, or to any existing unified menus as appropriate.

[00207] O posicionador 270 pode reescalonar ambas a altura e a largura, mantendo a relação de aspecto do componente. Alguns componentes podem reter sua a altura e mudar apenas sua largura (por exemplo, galerias que são modificadas para utilizar algumas colunas). Os componentes que têm que utilizar uma altura específica quando reescalonados (por exemplo, componente de mapa que tem rolagem interna e deve, assim, ter margem acima e abaixo dele para rolagem da página em vez de rolagem do mapa) podem ser manipulados corretamente. Será observado que a redução da largura pode ser manipulada da mesma forma.[00207] Positioner 270 can rescale both height and width, maintaining the aspect ratio of the component. Some components may retain their height and only change their width (for example, galleries that are modified to use some columns). Components that have to use a specific height when rescaled (eg map component that has internal scrolling and must therefore have margin above and below it for page scrolling rather than map scrolling) can be handled correctly. It will be seen that the width reduction can be handled in the same way.

[00208] O posicionador 70 pode também aplicar os processos de redução/ampliação de largura aos componentes, bem como recursivamente aos supernós e seus descendentes. Os processos podem incluir o redimensionamento do componente real, mapeamento do tamanho da fonte de texto, realinhamento do texto e redução do texto dividindo-o em parte visível e “mostrar mais” extensão (que é apenas exibido quando solicitado). Outros processos podem incluir alternar os componentes em versões móveis “mais leves”, modificando os parâmetros de componente para mudar sua largura. O processamento pode também incluir os componentes redimensionamento para refletir o tamanho real utilizado.[00208] The positioner 70 can also apply the width reduction/enlargement processes to the components, as well as recursively to the supernodes and their descendants. Processes can include resizing the actual component, mapping the text font size, realigning the text and reducing the text by splitting it into visible part and “show more” extension (which is only displayed when requested). Other processes might include switching components into “lighter” mobile versions, modifying component parameters to change their width. Processing can also include resizing components to reflect the actual size used.

[00209] Uma vez que o posicionador 270 colocou os componentes pertinentes em suas posições corretas dentro do layout de configuração móvel, o pós-processador 202 pode manipular quaisquer ajustes de layout final.[00209] Once the positioner 270 has placed the pertinent components in their correct positions within the mobile setup layout, the post processor 202 can handle any final layout adjustments.

[00210] O insersor de componentes automaticamente adicionados 281 pode inserir os componentes automaticamente adicionados à nova configuração de layout do dispositivo móvel como menus do sistema ou outros widgets relacionados móveis que podem ser adicionados em todos ou alguns aplicativos convertidos (em todas ou algumas de suas páginas). Tais componentes inseridos automaticamente adicionados podem também incluir (por exemplo) anúncios e/ou outro material promocional. Tais componentes automaticamente adicionados inseridos podem ser necessários (ou seja, sempre inseri-los) ou opcionais. No último caso, eles podem ser inseridos condicionalmente - com base nos parâmetros ou na combinação de parâmetros como (por exemplo) tipo ou perfil de usuário (por exemplo, inserir os componentes específicos automaticamente adicionados para todos os usuários na Europa) ou por tipo ou perfil de dispositivo móvel (por exemplo, inserir os componentes específicos automaticamente adicionados para todos os usuários com base em android tendo tamanho de tela de 480x320 ou maior). Eles podem também ser com base nos parâmetros de página específicos ou condições (por exemplo, inserir os componentes específicos automaticamente adicionados para páginas que não contêm um componente de imagem de tamanho 320x200 ou maior), comportamento do usuário ou histórico de uso do aplicativo, disponibilidade de espaço para inserir os componentes automaticamente adicionados, qualquer designer definiu os parâmetros e o sistema criador de website definiu os parâmetros.[00210] The automatically added components inserter 281 can insert the automatically added components to the new mobile device layout configuration as system menus or other mobile related widgets that can be added in all or some converted applications (in all or some of their pages). Such automatically added components may also include (for example) advertisements and/or other promotional material. Such inserted automatically added components can be required (that is, always insert them) or optional. In the latter case, they can be entered conditionally - based on parameters or combination of parameters like (for example) type or user profile (for example, insert the specific components automatically added for all users in Europe) or by type or mobile device profile (for example, insert the specific components automatically added for all android based users having screen size of 480x320 or larger). They can also be based on specific page parameters or conditions (for example, having specific components automatically added to pages that do not contain an image component of size 320x200 or larger), user behavior or application usage history, availability of space to insert the automatically added components, any designer defined the parameters and the website builder system defined the parameters.

[00211] Será observado que o insersor de componentes automaticamente adicionados 281 pode colocar tais componentes automaticamente adicionados em várias formas. Pode colocá-los como componentes automaticamente adicionados de posição absoluta que são inseridos em uma dada posição na página ou em containers específicos (ou seja, supernós) - tipicamente utilizando um espaço reservado, conforme descrito aqui abaixo. O insersor de componentes automaticamente adicionados 281 pode também inseri-los como componentes automaticamente adicionados de posição relativa inseridos em uma dada posição com relação a alguns elementos de página elementos (por exemplo, componentes predefinidos, componentes localizados através de consulta, etc.). Isso é similar à inserção de componentes no nível de configuração de layout do dispositivo móvel, conforme descrito em mais detalhes aqui abaixo.[00211] It will be noted that the auto-added component inserter 281 can place such auto-added components into various shapes. You can place these as auto-added absolute position components that are inserted at a given position on the page or into specific containers (ie supernodes) - typically using a placeholder, as described here below. The inserter of automatically added components 281 may also insert them as automatically added components of relative position inserted in a given position with respect to some page elements elements (eg predefined components, components located via query, etc.). This is similar to placing components at the mobile device layout configuration level, as described in more detail here below.

[00212] O insersor de componentes automaticamente adicionados 281 pode também adicionar componentes automaticamente adicionados como componentes automaticamente adicionados de espaço remanescente que são inseridos com base na disponibilidade de espaço no layout. Visto que os componentes são às vezes movidos para uma linha separada do componente, em alguns casos há espaços vazios adicionais na configuração de layout do dispositivo móvel comparado à configuração do layout do desktop que pode ser utilizada para tais componentes automaticamente adicionados.[00212] The auto-added components inserter 281 can also add auto-added components as remaining space auto-added components that are inserted based on space availability in the layout. Since components are sometimes moved to a separate component row, in some cases there are additional blanks in the mobile device layout configuration compared to the desktop layout configuration that can be used for such automatically added components.

[00213] Será observado que no caso de componentes automaticamente adicionados de posição absoluta, o insersor de componentes automaticamente adicionados 281 pode ser necessário para reservar espaço específico na área da tela móvel para esses elementos - criando a área da área retangular da tela móvel alocada à página / ao supercontainer e reservando-a. Assim, a área utilizada para linhas do componente pode ser não retangular. A referência é agora feita à Figura 24 que ilustra como a área remanescente no container principal C após criar a área reservada para componentes automaticamente adicionados A e B é um formato não retangular.[00213] It will be noted that in the case of auto-added components of absolute position, the auto-added component inserter 281 may be required to reserve specific space in the mobile screen area for these elements - creating the rectangular area of the mobile screen allocated to the page / to the supercontainer and reserving it. Thus, the area used for component lines can be non-rectangular. Reference is now made to Figure 24 which illustrates how the area remaining in the main container C after creating the area reserved for automatically added components A and B is a non-rectangular shape.

[00214] Será observado que o sistema de design virtual pertinente pode também suportar o layout dinâmico incluindo o uso de âncoras explícitas (específicas de designer) âncoras, bem como aquelas implícitas (automaticamente criadas) conforme descrito no Pedido de Patente Norte-Americano 2013-0219263 intitulado “WEB SITE DESIGN SYSTEM INTEGRATING DYNAMIC LAYOUT AND DYNAMIC CONTENT”, publicado em 22 de agosto de 2013 e atribuído ao depositante comum da presente invenção. Assim, o sistema de design visual pode ter âncoras (ambas implícitas e explícitas) que podem ser quebradas devido ao processo de reorganização inerente à adaptação à largura do dispositivo móvel.[00214] It will be noted that the relevant virtual design system may also support dynamic layout including the use of explicit (designer-specific) anchors as well as implicit (automatically created) anchors as described in the 2013 US Patent Application- 0219263 entitled “WEB SITE DESIGN SYSTEM INTEGRATING DYNAMIC LAYOUT AND DYNAMIC CONTENT”, published on August 22, 2013 and assigned to the common applicant of the present invention. Thus, the visual design system can have anchors (both implicit and explicit) that can be broken due to the reorganization process inherent in adapting to the width of the mobile device.

[00215] Uma vez que os componentes foram colocados corretamente, o coordenador do layout dinâmico 284 pode modificar quaisquer âncoras de layout dinâmico existentes de acordo com o novo layout. Por exemplo, o coordenador do layout dinâmico 284 pode remover as âncoras para componentes que foram movidos de modo que torne a âncora irrelevante como é ilustrado na Figura 3 à qual a referência é feita agora. Como é ilustrado, a âncora horizontal que existe entre os componentes A e B no cenário 1 deveria ser quebrada quando B é movido para estar abaixo de A no cenário 2.[00215] Once the components have been placed correctly, the dynamic layout coordinator 284 can modify any existing dynamic layout anchors to match the new layout. For example, the dynamic layout coordinator 284 may remove anchors for components that have been moved in a way that makes the anchor irrelevant as illustrated in Figure 3 to which reference is now made. As illustrated, the horizontal anchor that exists between components A and B in scenario 1 should be broken when B is moved to be below A in scenario 2.

[00216] O coordenador do layout dinâmico 284 pode também reter as âncoras que podem ser retidas (por exemplo, conjuntos de componente que não foram modificados, dentro dos containers que não foram modificados, etc.) O coordenador do layout dinâmico 284 pode também modificar as âncoras que podem ser retidas, mas precisaria de seus parâmetros modificados (por exemplo, mudança de comprimento da âncora para componentes que foram movidos mais próximos juntos). O coordenador do layout dinâmico 284 pode também criar novas âncoras de layout dinâmico entre os componentes colocados na proximidade (por exemplo, um acima do outro) - incluindo ambas as âncoras componente-para-componente e componente- para-container. Isso pode ser com base nos critérios de criação de âncora automática embutidas no sistema (por exemplo, com base na quantidade de sobreposição e distância entre componentes).[00216] The dynamic layout coordinator 284 can also retain anchors that can be retained (eg component sets that have not been modified, inside containers that have not been modified, etc.) The dynamic layout coordinator 284 can also modify the anchors that can be retained but would need their parameters modified (e.g. anchor length change for components that have been moved closer together). The dynamic layout coordinator 284 can also create new dynamic layout anchors between components placed in close proximity (eg, one above the other) - including both component-to-component and component-to-container anchors. This can be based on system-built auto-anchor creation criteria (for example, based on amount of overlap and distance between components).

[00217] Será observado que as âncoras criadas recentemente são importantes, pois o aplicativo adaptado móvel pode ainda ser um aplicativo de design visual de coordenadas absolutas. Assim, o aplicativo adaptado móvel pode ter que ser dinamicamente modificado devido às mudanças como modificações ao conteúdo de um componente como a quantidade de texto contido. Esses podem incluir mudanças que originam de uma fonte externa (por exemplo, inserção de dados externos, atividade de usuário simultânea, alternação entre os registros de dados em um aplicativo de lista). O coordenador do layout dinâmico 284 pode ter que implementar mudanças para ainda se adaptar às pequenas modificações no tamanho da tela do dispositivo móvel alvo. Assim o coordenador do layout dinâmico 284 pode modificar a estrutura da âncora e pode também implementar uma nova estrutura da âncora para adaptação final.[00217] It will be noted that the newly created anchors are important as the mobile adapted application can still be an absolute coordinate visual design application. Thus, the mobile tailored application may have to be dynamically modified due to changes such as modifications to the content of a component such as the amount of text contained. These can include changes that originate from an external source (eg, inputting external data, concurrent user activity, switching between data records in a list application). The dynamic layout coordinator 284 may have to implement changes to still adapt to small changes in the screen size of the target mobile device. Thus the dynamic layout coordinator 284 can modify the anchor structure and can also implement a new anchor structure for final adaptation.

[00218] Será observado que o layout alternativo resultante (incluindo o agrupamento, POS e informação de organização) pode ser armazenado em banco de dados 50 com o aplicativo ou separadamente para uso adicional, ou como a base para outras modificações, conforme descrito aqui abaixo.[00218] It will be noted that the resulting alternative layout (including grouping, POS and organization information) can be stored in database 50 with the application or separately for further use, or as the basis for further modifications, as described here below .

[00219] O monitor 290 pode exibir o layout recentemente modificado na plataforma alvo.[00219] Monitor 290 can display the newly modified layout on the target platform.

[00220] Conforme discutido acima nesse relatório, o reconversor de layout 300 pode combinar modificações realizadas em uma dada configuração de camada do desktop e modificações em sua configuração de layout do dispositivo móvel de sombra paralela para criar uma configuração de layout do dispositivo móvel atualizada.[00220] As discussed earlier in this report, layout converter 300 can combine modifications made to a given desktop layer configuration and modifications to its parallel shadow mobile device layout configuration to create an updated mobile device layout configuration.

[00221] Será observado que uma vez que o conversor de layout inicial 200 foi executado, há duas (ou mais) versões do aplicativo - a configuração do layout do desktop (principal) e uma (ou mais) configuração do layout móvel (sombra). Seria observado que ao se referir à uma configuração do layout móvel (ou sombra), nós podemos nos referir à outra configuração adicional como essas relacionadas aos tablets, exibição de tela ampla, etc. Um designer pode, então, aplicar (separar) as modificações através da ferramenta de edição do sistema de design virtual pertinente para ambas o desktop e a configuração de layout do dispositivo móvel, criando uma versão modificada de cada. O sistema de design visual pode prover um único editor para ambas as versões (possível restrito ao editar um layout móvel), ou separar o desktop e editores de website móveis.[00221] It will be noticed that once the initial layout converter 200 has been run, there are two (or more) versions of the application - the desktop layout configuration (main) and one (or more) mobile layout configuration (shadow) . It would be noted that when referring to a mobile (or shadow) layout setting, we may refer to additional other settings such as those related to tablets, widescreen display, etc. A designer can then apply (separate) the modifications via the relevant virtual design system's editing tool to both the desktop and mobile device layout configuration, creating a modified version of each. The visual design system can provide a single editor for both versions (restricted possible when editing a mobile layout), or separate desktop and mobile website editors.

[00222] Visto que a configuração de layout do dispositivo móvel é derivada da configuração do layout do desktop, o conversor de layout inicial 200 pode aplicar modificações (como adição e exclusão de páginas e componentes, bem como mudança de conteúdo de componente) feitas à configuração do layout do desktop para a configuração de layout do dispositivo móvel. O reconversor 300 pode combinar quaisquer modificações da configuração do layout do desktop e quaisquer modificações separadas da configuração de layout do dispositivo móvel na configuração de layout do dispositivo móvel modificada a fim de criar uma configuração de layout do dispositivo móvel final a ser exibida aos usuários móveis, mantendo o conteúdo da configuração de layout do dispositivo móvel melhor coordenado com a configuração do layout do desktop. Será observado que esse procedimento pode ser complicado, pois (por exemplo) se um componente é adicionado à configuração do layout do desktop que deveria também ser adicionado à uma configuração de layout do dispositivo móvel modificada (cujos componentes foram movidos, redimensionados ou excluídos incluindo ser movido de, dentro ou entre os containers), o reconversor 300 tem que determinar a posição correta para posicionar o componente adicionado dentro da configuração do layout modificada, bem como o layout a ser utilizado para os próprios componentes adicionados.[00222] Since the mobile device layout configuration is derived from the desktop layout configuration, the initial layout converter 200 can apply modifications (such as adding and deleting pages and components, as well as changing component content) made to the desktop layout configuration to mobile device layout configuration. The converter 300 can combine any desktop layout configuration modifications and any separate mobile device layout configuration modifications into the modified mobile device layout configuration to create a final mobile device layout configuration to be displayed to mobile users. , keeping the contents of the mobile layout configuration better coordinated with the desktop layout configuration. It will be noted that this procedure can be tricky, as (for example) if a component is added to the desktop layout configuration it should also be added to a modified mobile device layout configuration (whose components have been moved, resized or deleted including being moved from, within or between containers), the reconverter 300 has to determine the correct position to position the added component within the modified layout configuration, as well as the layout to be used for the added components themselves.

[00223] Será observado que nesse cenário, quaisquer modificações da configuração de layout do dispositivo móvel não são combinadas de volta dentro da configuração do layout do desktop. Ao editar o desktop, o website pode mudar o website móvel, editar o website móvel não afetará o website do desktop. Também será observado que mudanças puras de layout (ou seja, mudanças na posição e no tamanho) feitas à configuração do layout do desktop ou à configuração de layout do dispositivo móvel podem não afetar a outra configuração do layout - por oposição, por exemplo, às mudanças ou remoção do componente (que afetam a configuração de layout do dispositivo móvel se realizada na configuração do layout do desktop). Será ainda observado que o sistema 100 pode limitar a edição móvel de modo que os componentes possam ser removidos (ou escondidos) da configuração de layout do dispositivo móvel, mas não podem ser adicionados ou ter seu conteúdo editado - exceto possivelmente para alguns componentes orientados móveis, conforme discutido em mais detalhes aqui abaixo. Assim (por exemplo), um editor móvel pode não permitir que um componente na configuração de layout do dispositivo móvel seja movido de uma página à outra, pois isso pode resultar em adicionar componentes a uma página.[00223] It will be noted that in this scenario, any modifications to the mobile device layout configuration are not merged back into the desktop layout configuration. While editing the desktop website may change the mobile website, editing the mobile website will not affect the desktop website. It will also be noted that pure layout changes (i.e. changes in position and size) made to the desktop layout setting or the mobile device layout setting may not affect the other layout setting - as opposed to, for example, Component changes or removal (which affect the mobile device layout setting if performed in the desktop layout setting). It will be further noted that the system 100 can limit mobile editing so that components can be removed (or hidden) from the mobile device layout configuration, but cannot be added or content edited - except possibly for some mobile oriented components. , as discussed in more detail here below. So (for example) a mobile editor might not allow a component in the mobile device layout configuration to be moved from one page to another, as this could result in adding components to a page.

[00224] A referência é agora feita à Figura 25 que ilustra os elementos do reconversor 300. O reconversor 300 pode compreender um exclusor de página 310, um adicionador de página 320, um exclusor de componente 330, um adicionador de componente 340, um modificador de componente 350 e um manipulador móvel 360. O adicionador de componente 340 pode ainda compreender um identificador de componente adicionado 342, um pesquisador pai / precursor 344 e um adicionador de layout do dispositivo móvel 346 como é ilustrado na Figura 26 à qual a referência é feita agora. A funcionalidade desses elementos é descrita em mais detalhes aqui abaixo.[00224] Reference is now made to Figure 25 which illustrates the elements of the reconverter 300. The reconverter 300 may comprise a page deleter 310, a page adder 320, a component deleter 330, a component adder 340, a modifier of component 350 and a mobile manipulator 360. The component adder 340 may further comprise an added component identifier 342, a parent/precursor browser 344, and a mobile device layout adder 346 as illustrated in Figure 26 to which reference is made. done now. The functionality of these elements is described in more detail here below.

[00225] A referência é agora feita à Figura 27 que ilustra a funcionalidade do reconversor 300. O conversor de layout inicial 200 pode converter DP1 (página 1 do desktop) criando a configuração de layout do dispositivo móvel MP1 resultante. Um designer pode, então, editar MP1 utilizando o editor móvel local para criar MP2. Depois disso, o designer pode editar DP1 utilizando o editor de desktop local para criar DP2. O reconversor 300 pode, então, criar uma configuração de layout do dispositivo móvel atualizada que integra as mudanças feitas em DP2, bem como em MP2.[00225] Reference is now made to Figure 27 which illustrates the functionality of the reconverter 300. The initial layout converter 200 can convert DP1 (desktop page 1) creating the resulting MP1 mobile device layout configuration. A designer can then edit MP1 using the local mobile editor to create MP2. After that, the designer can edit DP1 using the local desktop editor to create DP2. The reconverter 300 can then create an updated mobile device layout configuration that integrates the changes made to DP2 as well as MP2.

[00226] Será observado que essa integração automática pode apenas ser relevante se a fase de edição do desktop (DP1 => DP2) for realizada após a fase de edição móvel (MP1 => MP2) (conforme mostrado na Figura 26). No caso reverso (a edição do desktop é realizada primeiro), o conversor de layout inicial 200 pode automaticamente reconverter a configuração do layout modificada do desktop DP2 em configuração de layout do dispositivo móvel MP2 quando a edição de DP2 estiver concluída. Dessa forma, o designer estaria realizando as mudanças de MP1=>MP2 na MP1 já modificada, exigindo uma integração manual das mudanças durante a edição móvel (posteriormente).[00226] It will be noted that this automatic integration can only be relevant if the desktop editing phase (DP1 => DP2) is performed after the mobile editing phase (MP1 => MP2) (as shown in Figure 26). In the reverse case (desktop editing is performed first), the initial layout converter 200 can automatically reconvert the modified DP2 desktop layout configuration into MP2 mobile device layout configuration when DP2 editing is completed. In this way, the designer would be performing the changes of MP1=>MP2 in the already modified MP1, requiring a manual integration of the changes during the mobile edition (later).

[00227] Será ainda observado que o objetivo de executar o mesmo website em múltiplas plataformas é ter o mesmo conteúdo em ambos os websites o máximo possível. Entretanto, conforme discutido aqui acima, nem todos os componentes do desktop são móveis compatíveis devido (por exemplo) ao uso de menus suspensos e linhas verticais.[00227] It will be further noted that the goal of running the same website on multiple platforms is to have the same content on both websites as much as possible. However, as discussed here above, not all desktop components are mobile compatible due to (for example) the use of dropdown menus and vertical lines.

[00228] Também será observado que uma exigência principal para aplicativos interativos com base na web (como websites) é a compatibilidade do motor de pesquisa. Dessa forma, ambos o desktop e a configuração de layout móveis deveriam apresentar a mesma estrutura de página geral ao motor de pesquisa e as mesmas páginas deveriam estar disponíveis em ambas as configurações do layout. Caso contrário, uma página pode ser indexada por um motor de pesquisa aranha que lê as páginas da configuração do layout do desktop, mas não estaria disponível quando um usuário atingi-lo diretamente através de um motor de pesquisa em um dispositivo móvel (gerando uma “página da web ausente” ou condição de erro similar). No caso inverso, uma página disponível na configuração de layout do dispositivo móvel, mas não na configuração do layout do desktop (indexada) não seria encontrada pelo motor de pesquisa. Alguns motores de pesquisa podem suportar diferentes estruturas de página para diferentes versões do website, mas o uso e disponibilidade de tal opção é uma propriedade interna do motor de pesquisa específico e não pode ser apoiado.[00228] It will also be noted that a primary requirement for interactive web-based applications (such as websites) is search engine compatibility. As such, both the desktop and mobile layout configuration should present the same general page structure to the search engine and the same pages should be available in both layout configurations. Otherwise, a page might be indexed by a search engine spider that reads pages from the desktop layout setting, but would not be available when a user hits it directly via a search engine on a mobile device (generating a “ missing web page” or similar error condition). In the opposite case, a page available in the mobile layout configuration but not in the desktop layout configuration (indexed) would not be found by the search engine. Some search engines may support different page structures for different website versions, but the use and availability of such an option is an internal property of the specific search engine and cannot be supported.

[00229] Será observado que embora o desktop e o website móveis possam ter diferentes aparências, eles podem compartilhar dados sempre que possível. Caso contrário, um usuário pode atingir uma página móvel buscando (por exemplo) uma dada frase de texto - que existe no conteúdo da página da página do desktop - apenas para localizar a página móvel é diferente e não contém a busca por frase. Em particular, a página móvel não deveria conter um componente, que não existe na página do desktop. Algumas exceções podem aplicar, como adicionar um novo menu adaptado móvel para substituir os menus existentes, ou exclusão de componentes de texto na configuração de layout do dispositivo móvel apenas.[00229] It will be noted that although the desktop and mobile website may look different, they can share data wherever possible. Otherwise, a user might reach a mobile page by searching for (for example) a given text phrase - which exists in the page's content from the desktop page - only to find the mobile page is different and does not contain the search phrase. In particular, the mobile page should not contain a component, which does not exist on the desktop page. Some exceptions may apply, such as adding a new mobile-friendly menu to replace existing menus, or deleting text components in the mobile-only layout setting.

[00230] Também será observado que ocasionalmente, um designer pode precisar fazer modificações específicas à configuração de layout do dispositivo móvel para torna-la intencionalmente diferente da configuração do layout do desktop em contradição à política do motor de pesquisa. Por exemplo, um sistema que exibe um feed de novos sumários de item pode exibir sumários mais longos na configuração do layout do desktop e sumários mais curtos na configuração de layout do dispositivo móvel. O designer pode certamente modificar o tamanho do componente, a posição e organização, e tais mudanças não deveriam afetar de modo geral a manipulação do motor de pesquisa do website móvel.[00230] It will also be noted that occasionally, a designer may need to make specific modifications to the mobile device layout configuration to intentionally make it different from the desktop layout configuration in contradiction to search engine policy. For example, a system that displays a feed of new item summaries might display longer summaries in the desktop layout setting and shorter summaries in the mobile device layout setting. The designer can certainly modify the component's size, position and organization, and such changes should not generally affect the mobile website's search engine handling.

[00231] A fim de solucionar esse conflito ou pelo menos atenuá-lo, o reconversor 300 pode limitar o escopo das modificações que o designer pode realizar na configuração de layout do dispositivo móvel. Por exemplo, o designer pode ser limitado às modificações que podem apenas afetar o layout móvel da configuração de layout, mas não o conteúdo real. Tal limitação pode ser realizada pelo editor móvel de sistemas antes de várias modificações serem manipuladas pelo reconversor 300.[00231] In order to resolve this conflict or at least mitigate it, the reconverter 300 can limit the scope of modifications that the designer can perform in the layout configuration of the mobile device. For example, the designer can be limited to modifications that can only affect the mobile layout of the layout configuration, but not the actual content. Such a limitation can be accomplished by the mobile systems editor before various modifications are handled by the reconverter 300.

[00232] As modificações de layout do desktop podem incluir adicionar páginas, remover páginas; adicionar componentes, remover componentes; mudar atributos de componentes, mover e redimensionar componentes e mudar o conteúdo do componente (por exemplo, o texto dentro de um parágrafo de texto). Conforme observado acima, as mudanças de layout limpo (por exemplo, mover e redimensionar) não afetam a configuração de layout do dispositivo móvel.[00232] Desktop layout modifications may include adding pages, removing pages; add components, remove components; change component attributes, move and resize components, and change component content (for example, text within a paragraph of text). As noted above, clean layout changes (eg moving and resizing) do not affect the mobile device layout setting.

[00233] Conforme discutido acima nesse relatório, um sistema de design visual pode ter ID único interno para cada componente que não muda quando um componente é modificado ou movido. Será observado que o reconversor 300 pode utilizar esses IDs para rastrear os componentes que foram modificados de uma versão de uma página à outra. Visto que o reconversor 300 assume que todas as modificações são realizadas através do editor de sistema de design visual e são completamente rastreadas, ao avaliar uma versão modificada, o reconversor 300 pode ter (para cada componente modificado) uma lista detalhada dos atributos modificados e as mudanças de valor (por exemplo, para componente X o estilo foi mudado de S1 para S2 e a largura de W1 para W2).[00233] As discussed earlier in this report, a visual design system can have a unique internal ID for each component that does not change when a component is modified or moved. It will be appreciated that the reconverter 300 can use these IDs to track which components have changed from one version of a page to another. Since the reconverter 300 assumes that all modifications are performed through the visual design system editor and are fully tracked, when evaluating a modified version, the reconverter 300 can have (for each component modified) a detailed list of the modified attributes and the value changes (for example, for component X the style was changed from S1 to S2 and the width from W1 to W2).

[00234] Quando uma página do desktop existente é removida, o exclusor de página 310 pode também remover a página da configuração de layout do dispositivo móvel. Será observado que isso implica que as modificações específicas da configuração de layout do dispositivo móvel feitas nessa página são perdidas. A única forma de recuperá-las é “desfazendo” a funcionalidade (por exemplo, desfazer o nível de sessão durante a sessão atual ou reverter a versão no nível do banco de dados).[00234] When an existing desktop page is removed, the 310 page deleter may also remove the page from the mobile device layout setting. It will be noted that this implies that mobile device specific layout configuration modifications made on that page are lost. The only way to recover them is by “undoing” the functionality (for example, session-level undo during the current session or rollback the database-level version).

[00235] Quando uma nova página é adicionada ao desktop, o adicionador de página 320 pode instruir o conversor de layout inicial 200 para converter toda a página em uma configuração de layout do dispositivo móvel conforme descrito aqui acima. Será observado que a página convertida pode parecer na posição correta na configuração de layout do dispositivo móvel. O adicionador de página 320 pode atualizar quaisquer menus de navegação móveis para incluir a página recentemente inserida.[00235] When a new page is added to the desktop, the page adder 320 may instruct the initial layout converter 200 to convert the entire page to a mobile device layout configuration as described hereinabove. You will notice that the converted page may look in the correct position in the mobile device layout setting. Page adder 320 can update any mobile navigation menus to include the newly inserted page.

[00236] Quando um componente é excluído de uma configuração do layout do desktop existente, o exclusor de componente 330 pode excluir o componente correspondente da configuração de layout do dispositivo móvel correspondente. O exclusor de componente 330 pode também instruir o manipulador móvel 360 para atualizar a exibição do layout móvel, fechando as lacunas em uma dada linha do componente ou excluindo toda uma linha do componente conforme descrito na descrição do manipulador móvel 360 abaixo.[00236] When a component is deleted from an existing desktop layout configuration, component deleter 330 can delete the corresponding component from the corresponding mobile device layout configuration. The 330 component deleter may also instruct the 360 mobile manipulator to update the mobile layout display, closing gaps in a given component row or deleting an entire component row as described in the description of the 360 mobile manipulator below.

[00237] Será observado que quando um ou mais novos componentes são adicionados a uma página do desktop, os novos componentes podem criar um novo componente hierárquico para a página do desktop modificada, incluindo os componentes recentemente adicionados. Para mudanças na configuração do layout do desktop apenas quando nenhuma mudança foi feita na configuração de layout do dispositivo móvel, o reconversor 300 pode instruir o conversor de layout inicial 200 para reconverter a página do desktop, pois não há necessidade de combinar a configuração do layout do desktop e as modificações da configuração de layout do dispositivo móvel.[00237] It will be noted that when one or more new components are added to a desktop page, the new components can create a new hierarchical component for the modified desktop page, including the newly added components. For desktop layout configuration changes only when no change has been made to the mobile device layout configuration, the reconverter 300 can instruct the initial layout converter 200 to reconvert the desktop page, as there is no need to match the layout configuration desktop and mobile device layout configuration modifications.

[00238] Será observado que o adicionador de componente 320 deve localizar o local apropriado na configuração de layout do dispositivo móvel para adicionar um componente que foi adicionado à configuração do layout. Essa tarefa pode ser especialmente complexa, pois os componentes poderiam ter sido movidos (incluindo entre containers), redimensionados, reorganizados ou removidos na configuração de layout do dispositivo móvel. Além disso, um componente da configuração do layout do desktop pode ter sido movido ou removido. Dessa forma, o adicionador de componente 320 deve localizar a posição apropriada para adicionar componentes - de acordo com o precursor e/ou pai, um desses sempre existirá.[00238] It will be noted that the component adder 320 must find the appropriate place in the layout configuration of the mobile device to add a component that has been added to the layout configuration. This task can be especially complex as components could have been moved (including between containers), resized, rearranged or removed in the mobile device's layout configuration. Also, a component of the desktop layout configuration may have been moved or removed. In this way, the component adder 320 must find the proper position to add components - depending on the precursor and/or parent, one of these will always exist.

[00239] Para cada componente X adicionado à configuração de layout do dispositivo móvel, o identificador de componente adicionado 342 pode identificar o componente adicionado (por exemplo, através da comparação de ID do componente, histórico de sessão de edição ou acesso de banco de dados subjacente). O identificador de componente 342 pode instruir o filtrador de componente 221 para operar sua função de filtragem de componente para determinar se o componente é adequado para a tela móvel (por exemplo, não é um componente vazio, tipo compatível não móvel, etc.).[00239] For each X component added to the mobile device layout configuration, the added component identifier 342 can identify the added component (e.g. through component ID comparison, edit session history or database access underlying). Component identifier 342 may instruct component filterer 221 to operate its component filtering function to determine whether the component is suitable for the mobile screen (e.g., not empty component, non-mobile compatible type, etc.).

[00240] O pesquisador pai / precursor 344 pode, então, realizar uma pesquisa pai / precursora a fim de localizar o componente precursor PD(X) mais próximo e/ou componente pai PT(X), que são os mais próximos ao componente adicionado X e que também existem na configuração de layout do dispositivo móvel (ou seja, eles não foram detectados da configuração de layout do dispositivo móvel explicitamente ou devido ao seu tipo). O precursor é determinado de acordo com a ordem especificada pelo emissor da ordem 240 - considerando o precursor mais próximo que aparece na configuração de layout do dispositivo móvel. O pai é determinado de acordo com a hierarquia do container da página - considerando o componente de container pai de nível mais próximo que aparece na configuração de layout do dispositivo móvel. Será observado que alguns componentes podem ter sido excluídos (ou escondidos) na configuração de layout do dispositivo móvel manualmente e, assim, seriam excluídos da pesquisa pai / precursora. Também será observado que o componente precursor mais próximo pode ser nulo, por exemplo, se X for o primeiro componente em sua página / container (ao excluir os componentes não visíveis no móvel) não há precursor. Será ainda observado que um componente pai, entretanto, não pode ser nulo, pois a pesquisa sempre atingirá a página de conteúdo que serve como um container de nível superior. Uma vez que o pesquisador pai / precursor 344 determinou o precursor e o pai (se disponível), o adicionador de layout do dispositivo móvel 346 pode posicionar o componente adicionado X após o componente precursor mais próximo em uma posição que suporta a mesma relação aos componentes precursor / pai na configuração de layout do dispositivo móvel, pois X estava nos mesmos componentes precursor / pai na configuração do layout do desktop e aciona todos os componentes que estão após o precursor.[00240] Parent / precursor searcher 344 can then perform a parent / precursor search in order to find the nearest PD(X) precursor component and/or PT(X) parent component, which are closest to the added component X and that also exist in the mobile device layout configuration (i.e. they were not detected from the mobile device layout configuration either explicitly or because of their type). The precursor is determined according to the order specified by the orderer 240 - considering the closest precursor that appears in the layout configuration of the mobile device. The parent is determined according to the page's container hierarchy - considering the closest level parent container component that appears in the mobile device's layout configuration. It will be noted that some components may have been excluded (or hidden) in the mobile device layout setting manually and thus would be excluded from the parent / parent search. It will also be noted that the nearest precursor component may be null, for example if X is the first component in your page/container (when excluding components not visible in the rover) there is no precursor. It will further be noted that a parent component, however, cannot be null, as the search will always hit the content page that serves as a top-level container. Once the parent/parent browser 344 has determined the parent and parent (if available), the mobile device layout adder 346 can position the added component X after the closest parent component in a position that supports the same relationship to the components forerunner/parent in the mobile layout setting as X was in the same forerunner/parent components in the desktop layout setting and triggers all components that are after the forerunner.

[00241] Será observado que ao manipular os múltiplos componentes adicionados da configuração do layout do desktop (X[1], X[2], ...) há dois métodos principais para implementar o procedimento acima - o método um por um ou método agrupado.[00241] It will be noticed that when handling the added multiple components of desktop layout configuration (X[1], X[2], ...) there are two main methods to implement the above procedure - the one-by-one method or the one-by-one method. grouped.

[00242] No método um por um, os componentes adicionados da configuração do layout do desktop X[i] são manipulados de acordo com suas ordens (conforme definido, por exemplo, pelo emissor da ordem 240). Para cada componente X[i], o pesquisador pai / precursor 344 realiza uma pesquisa precursora / pai que considera os componentes adicionados anteriores X[j] (1 <= j < i). Assim, cada componente X[i] é manipulado considerando os outros componentes adicionados.[00242] In the one-by-one method, components added from the desktop layout configuration X[i] are handled according to their orders (as defined, for example, by the issuer of order 240). For each component X[i], the parent/precursor searcher 344 performs a precursor/parent search that considers the previous added components X[j] (1 <= j < i). Thus, each component X[i] is manipulated considering the other added components.

[00243] No método agrupado, o pesquisador pai / precursor 344 pode realizar a pesquisa pai / precursora separadamente para cada um dos componentes adicionados da configuração do layout do desktop X[i], ignorando a existência de outros componentes adicionados da configuração do layout do desktop X[j] (para j ± i). Dessa forma, o pesquisador pai / precursor 344 realiza uma pesquisa precursora / pai para cada X[i] como se fosse apenas o componente adicionado à configuração do layout do desktop. Uma vez feito isso, e os componentes X[i] são agrupados de acordo com uma combinação comum de componente precursor PD(X[i]) e componente pai PT(X[i]). Os componentes em cada cluster podem ser agrupados como uma única página virtual (por exemplo, como um supernó virtual, possivelmente contendo outros supernós dentro dele). O adicionador de componente 340 pode, então, instruir o conversor de layout inicial 200 para executar em cada página virtual separadamente, executando um processo de conversão total recursivamente (incluindo o pré- processamento, análise, âncoras etc. conforme descrito aqui acima). O processo pode converter cada página virtual em uma página virtual convertida que o adicionador de layout do dispositivo móvel 346, então, posiciona uma unidade na configuração de layout do dispositivo móvel com base no precursor e pai comum para o cluster.[00243] In the bundled method, the parent / parent searcher 344 can perform the parent / precursor search separately for each of the added components of the desktop layout configuration X[i], ignoring the existence of other components added from the desktop layout configuration desktop X[j] (for j ± i). In this way, parent / parent searcher 344 performs a parent / parent search for each X[i] as if it were just the component added to the desktop layout configuration. Once this is done, the X[i] components are grouped according to a common combination of precursor component PD(X[i]) and parent component PT(X[i]). The components in each cluster can be grouped together as a single virtual page (for example, as a virtual supernode, possibly containing other supernodes within it). Component adder 340 can then instruct initial layout converter 200 to run on each virtual page separately, performing a full conversion process recursively (including pre-processing, parsing, anchors, etc. as described hereinabove). The process may convert each virtual page into a converted virtual page which the mobile device layout adder 346 then places a unit in the mobile device layout configuration based on the common parent and precursor for the cluster.

[00244] A referência é agora feita às Figuras 28A, 28B, 28C, 28D, 28E, 28F e 28G que ilustram diferentes cenários de edição e adição de componente, e como eles são manipulados pelo adicionador de componente 340.[00244] Reference is now made to Figures 28A, 28B, 28C, 28D, 28E, 28F and 28G which illustrate different editing and component addition scenarios, and how they are handled by the component adder 340.

[00245] A referência é agora feita à Figura 28A que mostra uma página do desktop DP1 contendo dois componentes, A e B. O conversor de layout inicial 200 pode converter essa página em uma página móvel MP1. Se um novo componente X for, então, adicionado entre A e B em DP1 para, assim, criar a página DP2, o pesquisador pai / precursor 344 realiza uma pesquisa pai / precursora para X, constatando que X segue A dentro da página de conteúdo (na configuração do layout do desktop). Assim, o adicionador de layout do dispositivo móvel insere X após A na página de conteúdo em MP1 para criar MP2.[00245] Reference is now made to Figure 28A which shows a DP1 desktop page containing two components, A and B. The initial layout converter 200 can convert this page into an MP1 mobile page. If a new component X is then added between A and B in DP1 to thereby create page DP2, parent/precursor searcher 344 performs a parent/precursor search for X, finding that X follows A within the content page (in the desktop layout setting). So the mobile layout adder inserts X after A in the MP1 content page to create MP2.

[00246] Em outro cenário, como é ilustrado na Figura 28B à qual a referência é feita agora, a página móvel MP1 é editada através do editor móvel para trocar as posições verticais de A e B, criando MP2. Após essa edição, o designer, então, insere o novo componente X entre A e B na DP1 para criar a página DP2. O adicionador de componente 340 pode reconciliar as mudanças feitas em DP2 e MP2. O pesquisador pai / precursor 344 pode realizar uma pesquisa pai / precursora para o componente X, constatando que X segue A (seu precursor mais próximo) dentro da página de conteúdo (seu pai mais próximo na configuração do layout do desktop). Assim, o adicionador de layout do dispositivo móvel 346 pode inserir X em MP2 na página de conteúdo seguindo o componente A (que está agora abaixo de B ao invés de acima de B), criando a página móvel MP3 atualizada.[00246] In another scenario, as illustrated in Figure 28B to which reference is now made, the mobile page MP1 is edited through the mobile editor to swap the vertical positions of A and B, creating MP2. After this edit, the designer then inserts the new X component between A and B in DP1 to create page DP2. Component adder 340 can reconcile changes made to DP2 and MP2. Parent / precursor searcher 344 may perform a parent / precursor search for component X, finding that X follows A (its closest precursor) within the content page (its closest parent in the desktop layout configuration). Thus, mobile device layout adder 346 can insert X in MP2 on the content page following component A (which is now below B instead of above B), creating the updated MP3 mobile page.

[00247] Ainda em outro cenário, como é ilustrado na Figura 28C à qual a referência é feita agora, a página móvel MP1 é editada através do editor móvel para remover (esconder) o componente B que reside abaixo de A e acima de C (criando MP2). DP1 é, então, editada através do editor do desktop para inserir o componente X após B e antes de C (criando DP2). O adicionador de componente 340 pode, então, reconciliar as mudanças feitas em DP2 e MP2. O pesquisador pai / precursor 344 pode realizar a pesquisa pai / precursora para o componente adicionado X e pode determinar que o precursor de X é A em vez de B, pois B é marcado como “removido em móvel”. Assim, o adicionador de layout do dispositivo móvel insere X após A (e antes de C) em MP2 para criar MP3.[00247] In yet another scenario, as illustrated in Figure 28C to which reference is now made, the mobile page MP1 is edited through the mobile editor to remove (hide) the B component that resides below A and above C ( creating MP2). DP1 is then edited through the desktop editor to insert the X component after B and before C (creating DP2). Component adder 340 can then reconcile changes made to DP2 and MP2. The parent/precursor searcher 344 may perform the parent/precursor search for the added component X and may determine that the precursor of X is A rather than B since B is marked as "removed in rover". So the mobile device layout adder inserts X after A (and before C) in MP2 to create MP3.

[00248] Ainda em outro cenário, como é ilustrado na Figura 28D à qual a referência é feita agora, a página DP1 contém um container A que contém um container interno B e outro componente D - todos são convertidos em MP1. A página móvel MP1 é, então, editada através do editor móvel para remover (esconder) o container interno B (criando MP2). DP1 é, então, editada através do desktop para inserir o componente C dentro do container interno B (criando DP2). O adicionador de componente 340 pode, então, reconciliar as mudanças feitas em DP2 e MP2. Nesse cenário, ao realizar a pesquisa pai / precursora para o componente adicionado C, o pesquisador pai / precursor 344 pode determinar que o pai é A em vez de B, visto que B está marcado como “removido em móvel”. O pesquisador pai / precursor 344 pode ainda determinar que C não tem precursor, visto que ele é o primeiro componente na (desconsiderando B). Assim, o adicionador de layout do dispositivo móvel 346 pode inserir C dentro de A (no topo e antes de D) na MP2 para criar MP3.[00248] In yet another scenario, as illustrated in Figure 28D to which reference is now made, the DP1 page contains a container A which contains an inner container B and another component D - all of which are converted to MP1. The MP1 mobile page is then edited through the mobile editor to remove (hide) the inner container B (creating MP2). DP1 is then edited through the desktop to place component C inside inner container B (creating DP2). Component adder 340 can then reconcile changes made to DP2 and MP2. In this scenario, when performing parent/parent lookup for added component C, parent/parent searcher 344 may determine that the parent is A instead of B, as B is marked as "removed in rover". The parent/precursor searcher 344 may still determine that C has no parent, as it is the first component in (disregarding B). Thus, mobile device layout adder 346 can insert C inside A (at the top and before D) in MP2 to create MP3.

[00249] Ainda em outro cenário, como é ilustrado na Figura 28E à qual a referência é feita agora, a página móvel MP1 é editada através do editor móvel para trocar as posições verticais de A e B, criando MP2. Posteriormente, um designer insere dois novos componentes altamente sobrepostos X1 e X2 entre os componentes A e B em DP1 para criar a página DP2. O adicionador de componente 340 pode reconciliar as mudanças feitas em DP2 e MP2 em uma das duas possíveis formas, gerando MP3 (para o método um por um) ou MP4 (para o método agrupado).[00249] In yet another scenario, as illustrated in Figure 28E to which reference is now made, the mobile page MP1 is edited through the mobile editor to swap the vertical positions of A and B, creating MP2. Later, a designer inserts two new highly overlapping components X1 and X2 between components A and B in DP1 to create page DP2. Component adder 340 can reconcile changes made to DP2 and MP2 in one of two possible ways, generating MP3 (for the one-by-one method) or MP4 (for the grouped method).

[00250] Será observado que se o método um por um for utilizado, e como X2 é geometricamente posicionado “posteriormente” á X1, o pesquisador pai / precursor 344 pode realizar a pesquisa precursora / pai para X1 primeiro, determinando que A é o precursor de X1. O pesquisador pai / precursor 344 pode, então, realizar a pesquisa pai / precursora para X2 (considerando X1) e pode determinar que X1 é o precursor de X2. Assim, o adicionador de layout do dispositivo móvel 346 pode, então, posicionar o componente X1 após A e posicionar o componente X2 após X1, assim criando MP3. Será observado que nesse método, os componentes X1 e X2 são analisados e movidos como entidades separadas e, assim, suas composições são separadas.[00250] It will be noted that if the one-by-one method is used, and as X2 is geometrically positioned “after” X1, the parent / precursor searcher 344 can perform the precursor / parent search for X1 first, determining that A is the precursor from X1. Parent/precursor searcher 344 may then perform the parent/precursor search for X2 (considering X1) and may determine that X1 is the parent of X2. Thus, mobile device layout adder 346 can then position the X1 component after A and position the X2 component after X1, thus creating MP3. It will be noted that in this method, the X1 and X2 components are parsed and moved as separate entities and thus their composites are separated.

[00251] Se o método agrupado for utilizado, o pesquisador pai / precursor 344 pode realizar a pesquisa pai / precursora para ambos X1 e X2 sem referir-se a X1 ou X2 (para a pesquisa) e pode determinar que ambos têm o mesmo pai (a página principal) e o mesmo precursor (componente A). Assim, o adicionador de componente 340 pode agrupar X1 e X2 juntos, pode criar um supernó virtual contendo X1 e X2, e pode instruir o conversor de layout inicial 200 para criar uma versão do dispositivo móvel pronta da composição de X1 e X2. Será observado que essa composição convertida seria colocada abaixo de A criando MP4. Visto que X1 e X2 estavam altamente sobrepostos, é provável que eles seriam redimensionados como para preservar sua composição (conforme descrito acima).[00251] If the pooled method is used, the parent / parent searcher 344 can perform the parent / parent search for both X1 and X2 without referring to X1 or X2 (for the lookup) and can determine that both have the same parent (the main page) and the same precursor (component A). Thus, the component adder 340 can group X1 and X2 together, can create a virtual supernode containing X1 and X2, and can instruct the initial layout converter 200 to create a mobile device ready version of the composition of X1 and X2. It will be noted that this converted composition would be placed below A creating MP4. Since X1 and X2 were highly overlapping, it is likely that they would be resized to preserve their composition (as described above).

[00252] Ainda em outro cenário, como é ilustrado na Figura 28F à qual a referência é feita agora, uma página do desktop DP1 original contendo dois componentes (A e B) é editada através do editor do desktop adicionando 4 novos componentes - dois pares de componentes de imagem e semanticamente relacionados ao texto (T1/I1 e T2/I2) - criando uma nova página DP2. Se DP2 for convertida em móvel utilizando o método um por um (conforme descrito aqui acima), o pesquisador pai / precursor 344 pode determinar que T1 é o precursor de T2. Assim, a sequência (vertical) gerada de componentes seria A-T1-T2-I1-I2-B (conforme mostrado em MP2) - quebrando a legenda de texto em conexões de imagem. Se DP2 for convertido em móvel utilizando o método agrupado (conforme descrito aqui acima, o pesquisador pai / precursor 344 pode determinar que T1/T2/I1/I2 têm o mesmo precursor (A) e pai (página principal). Assim, o adicionador de layout do dispositivo móvel 346 pode agrupar esses 4 componentes em uma nova página virtual e pode executar o conversor de layout inicial 200 neles. Visto que T1 é semanticamente relacionado a I1, e T2 a I2, esses pares seriam mantidos juntos. Assim, a sequência criada (vertical) seria A-T1-I1-T2-I-B (como em MP3) - preservando a informação semântica.[00252] In yet another scenario, as illustrated in Figure 28F to which reference is now made, an original DP1 desktop page containing two components (A and B) is edited through the desktop editor adding 4 new components - two pairs image components and semantically related to the text (T1/I1 and T2/I2) - creating a new DP2 page. If DP2 is converted to a rover using the one-by-one method (as described hereinabove), the parent/parent researcher 344 can determine that T1 is the parent of T2. So the generated (vertical) sequence of components would be A-T1-T2-I1-I2-B (as shown in MP2) - breaking the text caption into image connections. If DP2 is converted to rover using the clustered method (as described hereinabove, the parent/parent searcher 344 can determine that T1/T2/I1/I2 have the same parent (A) and parent (main page). Thus, the adder device layout editor 346 can assemble these 4 components into a new virtual page and can run the initial layout converter 200 on them. Since T1 is semantically related to I1, and T2 to I2, these pairs would be kept together. Thus, the created sequence (vertical) would be A-T1-I1-T2-I-B (as in MP3) - preserving the semantic information.

[00253] Ainda em outro cenário, como é ilustrado na Figura 28G à qual a referência é feita agora, a página do desktop DPI contém três componentes (A, B e C) e é convertida em móvel. A página móvel MP1 resultante é editada através do editor móvel, removendo o componente C e trocando a ordem de A e B para criar MP2. DP1 é, então, editada através do editor do desktop, adicionando dois componentes de sobreposição X1 e X2 entre B e C e um componente adicional X3 abaixo de C para criar DP2. O adicionador de componente 340 é configurado para utilizar o método agrupado e, assim, todos os três componentes adicionados (X1, X2 e X3) são grupados juntos, visto que o pesquisador pai / precursor 344 determinou que B é o precursor de todos os 3 novos componentes (visto que C foi removido na versão do dispositivo móvel). Assim, o adicionador de layout do dispositivo móvel 346 pode colocar todos os 3 novos componentes abaixo de B e acima de A, retendo a composição de X1 e X2 (conforme mostrado em MP3).[00253] In yet another scenario, as illustrated in Figure 28G to which reference is now made, the desktop DPI page contains three components (A, B and C) and is converted to mobile. The resulting MP1 mobile page is edited through the mobile editor, removing the C component and swapping the order of A and B to create MP2. DP1 is then edited through the desktop editor, adding two overlay components X1 and X2 between B and C and an additional component X3 below C to create DP2. Component adder 340 is configured to use the clustered method, and thus all three added components (X1, X2, and X3) are clustered together, as parent/parent researcher 344 has determined that B is the parent of all 3 new components (since C was removed in the mobile device version). Thus, mobile device layout adder 346 can place all 3 new components below B and above A, retaining the composition of X1 and X2 (as shown in MP3).

[00254] Será observado que a colocação de componentes adicionados pelo adicionador de layout do dispositivo móvel 346 pode ser implementada em uma versão limitada na qual os componentes são adicionados à versão do desktop ou são apenas adicionados à versão do dispositivo móvel verticalmente entre os dois componentes verticalmente separados.[00254] It will be noted that the placement of components added by the mobile device layout adder 346 can be implemented in a limited version in which the components are added to the desktop version or are only added to the mobile device version vertically between the two components vertically separated.

[00255] Em outra realização, o adicionador de componente 340 pode adicionar um “cluster” de componentes adicionados em qualquer lugar dentro de uma “linha” de componentes colocados na versão do dispositivo móvel, assim não limitam a inserção dos novos componentes para ficarem abaixo de um dado componente na versão do dispositivo móvel.[00255] In another embodiment, the component adder 340 can add a "cluster" of components added anywhere within a "line" of components placed in the mobile device version, thus not limiting the insertion of new components to fall below of a given component in the mobile device version.

[00256] Ainda em outra realização, o adicionador de componente 340 pode fixar um componente adicionado B ao container da configuração do layout do desktop que contém ele em vez de tê-lo como um precursor. Será observado que nesse cenário, o componente B permanece fixado ao container C contendo-o, e é colocado após o último elemento em C que existe em ambas no desktop e na configuração de layout do dispositivo móvel e que precede o componente B. Essa abordagem pode ser utilizada a menos que o container C (e o supernó correspondente) esteja vazio, ou seja escondido na configuração de layout do dispositivo móvel.[00256] In yet another embodiment, the component adder 340 can pin an added component B to the container of the desktop layout configuration that contains it instead of having it as a precursor. It will be noted that in this scenario, component B remains pinned to the container C containing it, and is placed after the last element in C that exists in both the desktop and mobile device layout configuration and precedes component B. can be used unless the C container (and corresponding supernode) is empty, or is hidden in the mobile device layout configuration.

[00257] Ainda em outra realização, o adicionador de componente 340 pode adicionar componentes à configuração de layout do dispositivo móvel dividindo a configuração de layout do dispositivo móvel horizontalmente em segmentos e adicionando o componente adicionado ou o cluster do componente após o segmento contendo o precursor em vez de diretamente após o precursor.[00257] In yet another embodiment, the component adder 340 can add components to the mobile device layout configuration by dividing the mobile device layout configuration horizontally into segments and adding the added component or component cluster after the segment containing the precursor instead of directly after the precursor.

[00258] Será observado que quando há mudanças nos atributos como estilo, fonte ou tamanho de texto de um componente do desktop incluindo mudanças gerais de propriedade, como mudar o número de fileiras ou colunas em um componente de galeria, o modificador de componente 350 pode modificar os componentes na configuração de layout do dispositivo móvel. Visto que a configuração de layout do dispositivo móvel define um aplicativo visual sujeito ao layout dinâmico, pode acomodar tais mudanças e reajustar o tamanho dos componentes e posições corretamente.[00258] It will be noted that when there are changes to attributes such as style, font or text size of a desktop component including general property changes such as changing the number of rows or columns in a gallery component, component modifier 350 may modify the components in the mobile device layout configuration. Since the mobile device layout setting defines a visual application subject to dynamic layout, it can accommodate such changes and resize components and positions accordingly.

[00259] Também será observado que enquanto as mudanças ao tamanho e posição de um componente do desktop afetam a configuração do layout do desktop, elas não afetam a configuração de layout do dispositivo móvel a menos que a configuração de layout do dispositivo móvel seja explicitamente gerada novamente, conforme descrito aqui abaixo. Isso é permitido, pois o sistema 100 pode permitir as diferenças na aparência (design) entre as múltiplas configurações do layout, desde que o conteúdo não mude.[00259] It will also be noted that while changes to the size and position of a desktop component affect the desktop layout setting, they do not affect the mobile device layout setting unless the mobile device layout setting is explicitly generated again, as described here below. This is permissible as the system 100 can allow for differences in appearance (design) between multiple layout configurations as long as the content does not change.

[00260] Quando há mudanças aos dados/conteúdo de um componente do desktop, o modificador de componente 350 pode atualizar a configuração de layout do dispositivo móvel corretamente. Similar à modificação de atributo, tal mudança de dados pode causar algumas reformatações de componentes na configuração de layout do dispositivo móvel, manipulado utilizando layout dinâmico.[00260] When there are changes to the data/content of a desktop component, the 350 component modifier can update the mobile device layout configuration correctly. Similar to attribute modification, such a data change may cause some component reformatting in the mobile device layout configuration, handled using dynamic layout.

[00261] Será observado que qualquer modificação à configuração de layout do dispositivo móvel pode ser realizada por um usuário tipicamente através de uma exibição GUI especializada (o editor móvel) ou de uma exibição de modificações móvel com uma configuração do layout de visualização móvel. Tal editor móvel pode apenas permitir o designer para realizar certas operações, como adicionar componentes móveis específicos, remover componentes (escondê- los), mover componentes ou modificar componentes apenas. Assim, o editor móvel pode interagir com o manipulador móvel 360 que manipula mudanças apenas no lado móvel.[00261] It will be noted that any modification to the mobile device layout configuration can be performed by a user typically through a specialized GUI display (the mobile editor) or a mobile modifications display with a mobile view layout configuration. Such a mobile editor might just allow the designer to perform certain operations, like adding specific mobile components, removing components (hiding them), moving components or modifying components only. So the mobile editor can interact with the mobile handler 360 which handles changes only on the mobile side.

[00262] O manipulador móvel 360 pode utilizar vários métodos para posicionar os componentes (móvel apenas) adicionados. O manipulador móvel 360 pode permitir a inserção de um novo componente apenas entre dois componentes em uma linha do componente ou em uma nova linha do componente seguindo ou precedendo um existente, como é ilustrado na Figura 29, à qual a referência é feita agora. Um novo componente X pode ser inserido entre A e B ou um novo componente Y pode ser inserido abaixo de P e acima de A, B e C. Ele pode também inserir quebras de linha antes/depois do componente adicionado.[00262] The mobile manipulator 360 can use various methods to position the added (mobile only) components. Movable manipulator 360 may allow insertion of a new component just between two components on a component line or on a new component line following or preceding an existing one, as illustrated in Figure 29, to which reference is now made. A new X component can be inserted between A and B or a new Y component can be inserted below P and above A, B and C. It can also insert line breaks before/after the added component.

[00263] O componente inserido (X ou Y) nesse caso pode ser ancorado ao componente anterior (ou container) e pode ser inserido novamente naquela posição se a configuração de layout do dispositivo móvel for gerada novamente e se a “preservação dos componentes móveis adicionados” for solicitada. Se a âncora não estiver disponível (por exemplo, o componente ancorado foi removido na configuração do layout do desktop), o manipulador móvel 360 pode pesquisar o componente ou container anterior mais próximo, conforme observado acima, para adicionar componentes à configuração do layout do desktop.[00263] The inserted component (X or Y) in this case can be anchored to the previous component (or container) and can be inserted again in that position if the mobile device layout configuration is regenerated and if the “preserving mobile components added” ” is requested. If the anchor is not available (for example, the anchored component was removed in the desktop layout configuration), the 360 mobile handler can search for the nearest previous component or container, as noted above, to add components to the desktop layout configuration .

[00264] O manipulador móvel 360 pode também permitir a colocação de um novo componente (móvel apenas) X em uma posição arbitrária na página. O manipulador móvel 360 pode, então, pesquisar um componente de ancoragem pesquisando o componente com a maior intersecção com X. Se nenhum desses componentes estiver disponível, o manipulador móvel 360 pode procurar o vizinho mais próximo (em todos os 4 lados) com base na média ponderada de distância e sobreposição e utilizando os limites de distância e sobreposição. Se nenhum desses componentes for encontrado, utilize o container contendo X, então, o manipulador móvel 360 pode utilizar a página inicial como uma âncora que pode ser definida como a âncora em termos de distância e compensação a partir da borda mais próxima da âncora.[00264] The mobile handler 360 may also allow placement of a new (mobile only) X component at an arbitrary position on the page. Movable manipulator 360 may then search for an anchoring component by searching for the component with the largest X-intersect. If none of these components are available, mobile manipulator 360 may search for the nearest neighbor (on all 4 sides) based on the weighted average of distance and overlap and using distance and overlap thresholds. If none of these components are found, use the container containing X, then the 360 mobile handler can use the homepage as an anchor which can be set as the anchor in terms of distance and offset from the nearest edge of the anchor.

[00265] Para evitar não conformidades com as políticas de pesquisa do motor de pesquisa, o reconversor 300 pode evitar isso oferecendo essa operação. De modo alternativo, o reconversor 300 pode ser limitado a adicionar componentes que não afetem a visualização do motor de pesquisa da página, como componentes de decoração (por exemplo, linhas, formatos de decoração), componentes sem conteúdo (por exemplo, menus internos de navegação da página que não adicionam informações extras de entrada de menu), componentes com conteúdo que não seja provido para o motor de pesquisas (por exemplo, imagem de fundos) e para componentes que sejam apenas relevantes para o ambiente móvel (como botões provendo funcionalidade colocar uma chamada telefônica, enviar uma mensagem de texto/MMS, navegar para uma localização dada ou mudar para a versão de website do desktop).[00265] To avoid non-compliance with the search engine's search policies, the reconverter 300 can prevent this by offering this operation. Alternatively, the reconverter 300 can be limited to adding components that do not affect the search engine's view of the page, such as decoration components (e.g., lines, decoration formats), non-content components (e.g., built-in menus of page navigation that do not add extra menu entry information), components with content that is not provided for the search engine (e.g. image backgrounds) and for components that are only relevant to the mobile environment (such as buttons providing functionality place a phone call, send a text/MMS message, navigate to a given location or switch to the desktop version of the website).

[00266] Também será observado que o editor móvel pode também colocar componentes móveis não recomendados inicialmente na exibição “componente removido”, e exigir uma segunda etapa para, na verdade, incorporá-los à configuração de layout do dispositivo móvel.[00266] It will also be noted that the mobile editor may also initially place unrecommended mobile components in the “component removed” view, and require a second step to actually incorporate them into the mobile device's layout configuration.

[00267] Os componentes adicionados podem ser listados na exibição de modificações móvel, conforme discutido aqui abaixo, para tornar mais fácil a remoção de componentes específicos adicionáveis apenas ao móvel.[00267] Added components can be listed in the rover modifications view as discussed here below to make it easier to remove specific components addable only to the rover.

[00268] O manipulador móvel 360 pode também remover um componente da configuração de layout do dispositivo móvel (que pode ser implementado, na verdade, removendo o componente ou apenas o escondendo). Será observado que quando um componente é removido da configuração de layout do dispositivo móvel, o manipulador móvel 360 pode não dispor novamente os componentes na mesma linha. Quando uma linha inteira do componente é removida, o manipulador móvel 360 pode mover os componentes abaixo para cima o mais próximo possível, como é ilustrado na Figura 30, à qual a referência é feita agora. Se quaisquer dos componentes A, B ou C (mas não os três) forem removidos, os componentes restantes na linha (A, B ou C) não são afetados ou movidos. Se todos os três componentes (A, B e C) forem removidos, o componente Q e os componentes seguintes serão movidos para cima próximos ao componente P. O(s) componente(s) removido(s) pode(m) ser listado(s) na exibição de modificações móvel, conforme discutido aqui abaixo, para tornar mais fácil inserir novamente os componentes escondidos ao aplicativo em um estágio posterior, se exigido.[00268] The mobile handler 360 can also remove a component from the mobile device's layout configuration (which can be implemented by actually removing the component or just hiding it). It will be noted that when a component is removed from the mobile device layout configuration, the mobile manipulator 360 may not rearrange the components on the same line. When an entire row of the component is removed, the movable manipulator 360 can move the components below to the top as close as possible, as illustrated in Figure 30, to which reference is now made. If any of the components A, B or C (but not all three) are removed, the remaining components in the line (A, B or C) are not affected or moved. If all three components (A, B and C) are removed, the Q component and the following components will be moved up next to the P component. The removed component(s) can be listed( s) in the mobile modifications view, as discussed here below, to make it easier to re-enter the hidden components to the application at a later stage, if required.

[00269] Também será observado que os componentes na configuração de layout do dispositivo móvel podem ser movidos por um usuário através do sistema de dados visuais de edição regular GUI. O manipulador móvel 360 pode reter as modificações até a página ser criada novamente e pode listá- las na exibição de modificações móvel, conforme discutido aqui abaixo, para tornar mais fácil desfazer mudanças específicas.[00269] It will also be noted that components in the mobile device layout configuration can be moved by a user via the regular GUI editing visual data system. The 360 mobile handler can retain the modifications until the page is rebuilt and can list them in the mobile modifications view, as discussed here below, to make it easier to undo specific changes.

[00270] O editor móvel pode também permitir que componentes também sejam movidos “para fora” (direita ou esquerda) da tira de exibição estreita móvel. Nesse cenário, o componente pode reter certa sobreposição horizontal mínima com a “tira”, e pode ser exibido recortado ao tamanho da tira. Caso contrário, essa opção pode se tornar equivalente à opção “esconder componente”. Essa opção pode ser utilizada para mostrar apenas parte de um componente/container ou para colocar temporariamente componentes ao lado a fim de ajudar na redisposição de componentes na configuração móvel;[00270] The movable editor can also allow components to be moved “outside” (right or left) of the movable narrow display strip as well. In this scenario, the component may retain some minimal horizontal overlap with the “strip”, and may appear cropped to the strip size. Otherwise, this option may become equivalent to the “hide component” option. This option can be used to show only part of a component/container or to temporarily place components on the side to help with rearranging components in the mobile configuration;

[00271] O editor móvel pode também permitir que um usuário mude seletivamente atributos do componente, propriedades e estilos em uma configuração de layout do dispositivo móvel. O editor móvel pode marcar tais atributos mudados como “mudado para móvel” de modo que uma mudança em um atributo específico na configuração do layout do desktop pode não afetar (e anular) a alteração feita a esse atributo na configuração de layout do dispositivo móvel.[00271] The mobile editor can also allow a user to selectively change component attributes, properties and styles in a mobile device layout configuration. The mobile editor can mark such changed attributes as "changed to mobile" so that a change to a specific attribute in the desktop layout configuration may not affect (and override) the change made to that attribute in the mobile device layout configuration.

[00272] Uma mudança específica que pode ser desejável como uma mudança específica de configuração de layout do dispositivo móvel é o tamanho de fonte. Isso pode ser necessário se o ajustador de componente 227 gera um tamanho diferente daquele que o designer pode exigir. Assim, uma mudança de tamanho de fonte específico (como um fator a ser aplicado sobre o tamanho de fonte gerado pelo conversor de layout inicial 200) pode ser adicionada e aplicada ao texto exibido numa base por campo. O editor móvel pode mudar o tamanho de fonte utilizando um atributo de “fator de escala” local, e (por exemplo) botões para aumento/diminuição de 5% do tamanho de fonte que pode afetar esse atributo. Será observado que o editor móvel pode ainda limitar os novos tamanhos de fonte a uma dada faixa de tamanhos de fonte facilmente móvel. Qualquer modificação de atributo (incluindo mudança no tamanho de fonte) pode ser listada na exibição de modificações móvel, conforme discutido aqui abaixo.[00272] One specific change that may be desirable as a specific mobile device layout setting change is the font size. This may be necessary if the 227 component fitter generates a different size than the designer may require. Thus, a specific font size change (as a factor to be applied over the font size generated by the initial layout converter 200) can be added and applied to the displayed text on a per-field basis. The mobile editor can change the font size using a local “scale factor” attribute, and (for example) 5% font size increase/decrease buttons that can affect this attribute. It will be noted that the mobile editor can further limit new font sizes to a given range of easily movable font sizes. Any attribute modifications (including font size change) can be listed in the mobile modifications view as discussed here below.

[00273] Conforme discutido acima nesse relatório, o reconversor 300 pode prover um GUI separado exibindo a lista de modificações específicas para uma dada configuração de layout do dispositivo móvel (por exemplo, componentes adicionados, componentes removidos e componentes modificados). Isso pode ser útil a fim de visualizar as modificações específicas da configuração de layout do dispositivo móvel e distinguir entre elas e outras modificações de layout feitas pelo conversor de layout inicial 200. Isso pode também ser útil a fim de rever diferentes mudanças feitas para diferentes configurações de layout do dispositivo móvel e para ser capaz de desfazer modificações específicas da configuração de layout do dispositivo móvel, como para reinserir um componente específico “removido”.[00273] As discussed above in this report, the reconverter 300 can provide a separate GUI displaying the list of modifications specific to a given mobile device layout configuration (eg, components added, components removed, and components modified). This can be useful in order to view specific modifications to the mobile device layout configuration and distinguish between them and other layout modifications made by the initial layout converter 200. It can also be useful in order to review different changes made to different configurations. device layout settings and to be able to undo specific modifications to the mobile device layout setting, such as reinserting a specific “removed” component.

[00274] Será observado que tal exibição pode ser dividida de acordo com a página em que a modificação foi realizada, ou seja, páginas atuais, outra(s) página(s) ou qualquer modelo ou página mestre ou de acordo com o tipo de modificação, ou seja, inserção, remoção ou modificação de componente.[00274] It will be noted that such a display can be divided according to the page on which the modification was performed, that is, current pages, other page(s) or any template or master page, or according to the type of modification, that is, inserting, removing or modifying a component.

[00275] A exibição pode ainda ser utilizada para classificar essas modificações, por exemplo, de acordo com a marcação de tempo e hora, localização na página ou tipo de componente afetado. O editor móvel pode suportar operações de anulação para um conjunto de modificações selecionado. O manipulador móvel 360 pode, então, desfazer quaisquer modificações, por exemplo, inserir novamente componentes removidos que são modificações de posição de componente inversas.[00275] The display can still be used to classify these modifications, for example, according to the timestamp, location on the page or type of affected component. The mobile editor can support undo operations for a selected set of modifications. Movable manipulator 360 can then undo any modifications, for example, reinsert removed components that are inverse component position modifications.

[00276] O reconversor 300 pode ainda suportar as opções de geração repetida da configuração de layout do dispositivo móvel. Quando ativado, o reconversor 300 pode instruir o conversor de layout inicial 200 a funcionar novamente na configuração do layout do desktop subjacente (que pode ter sido modificada, visto que conversor de layout inicial 200 foi executado pela última vez), e mudanças específicas na configuração de layout do dispositivo móvel podem ser possivelmente reaplicadas.[00276] The reconverter 300 can also support the repeated generation options of the mobile device layout configuration. When activated, the reconverter 300 can instruct the initial layout converter 200 to run again on the underlying desktop layout configuration (which may have been modified since initial layout converter 200 was last run), and specific changes to the configuration of mobile device layout can possibly be reapplied.

[00277] Será observado que a geração repetida pode ser aplicada às páginas que deveriam ser geradas novamente (página atual, páginas específicas, aplicativo inteiro) e mudanças na configuração de layout do dispositivo móvel que deveriam ser reaplicadas após a configuração de layout do dispositivo móvel ser gerada novamente. Elas poderiam ser selecionadas por categorias (como ocultação de componente apenas), incluir modificações específicas selecionadas ou incluir todas as modificações. Também será observado que se a geração repetida executada é realizada sem reaplicar mudanças da configuração de layout do dispositivo móvel a uma dada página ou páginas, as mudanças de configuração de layout do dispositivo móvel relevantes são descartadas.[00277] It will be noted that repeated generation can be applied to pages that should be regenerated (current page, specific pages, entire application) and changes in mobile device layout setting that should be reapplied after mobile device layout setting be generated again. They could be selected by categories (such as component hiding only), include selected specific modifications, or include all modifications. It will also be noted that if the repeated generation performed is performed without re-applying mobile device layout configuration changes to a given page or pages, the relevant mobile device layout configuration changes are discarded.

[00278] O monitor 290 pode exibir a nova configuração de layout do dispositivo móvel atualizada, conforme descrito aqui acima.[00278] Monitor 290 can display the new updated mobile device layout configuration as described here above.

[00279] O sistema conforme descrito acima pode ser integrado com o sistema criador de website pertinente de várias formas. Por exemplo, o sistema 100 poderia ser integrado ao código real do sistema criador de website - completamente ao lado do cliente, completamente ao lado do servidor ou ambos. O sistema 100 pode também ser operado sobre a mesma plataforma do servidor, conforme o sistema criador de website, ou em um servidor autônomo separado ou conjunto de servidores. O sistema 100 pode ser operado online (sempre que uma página do sistema criador de website é visualizada), off-line (também para versões convertidas armazenadas criadas do sistema criador de website) ou em uma combinação (com alguns estágios ativados off-line e outros online). Ele poderia operar diretamente nas estruturas de dados do sistema criador de website ou prover uma interface (como web serviço) chamada de sistema criador de website de modo a isolar o sistema 100 do conteúdo do sistema criador de website.[00279] The system as described above can be integrated with the relevant website builder system in various ways. For example, system 100 could be integrated into the actual code of the website builder system - completely client-side, completely server-side, or both. System 100 may also be operated on the same server platform, depending on the website builder system, or on a separate standalone server or set of servers. The system 100 can be operated online (whenever a page of the website builder system is viewed), offline (also for created stored converted versions of the website builder system) or in a combination (with some stages activated offline and others online). It could either operate directly on the data structures of the website builder system or provide an interface (as a web service) called the website builder system in order to isolate the system 100 from the content of the website builder system.

[00280] Será observado que em diferentes realizações da presente invenção, diferentes elementos do sistema 100 podem dividir suas funcionalidades em diferentes formas e podem realizar a funcionalidade mencionada acima em uma ordem diferente da descrita aqui acima. Será ainda observado que o sistema 100 pode também ser parcialmente implementado utilizando funcionalidade parcial.[00280] It will be seen that in different embodiments of the present invention, different elements of the system 100 may divide their functionalities in different ways and may perform the aforementioned functionality in a different order than described hereinabove. It will be further appreciated that system 100 may also be partially implemented using partial functionality.

[00281] Assim, uma configuração do layout do desktop de um aplicativo específico pode ser adequadamente convertida em uma configuração de layout do dispositivo móvel (ou quaisquer outros diferentes layouts alvo dimensionados) considerando a relação entre componentes. Além disso, após as conversões iniciais, modificações podem ser feitas para o desktop e as configurações de layout móveis para a mesma página e podem ser refletidas dentro de uma página móvel recentemente gerada.[00281] Thus, a desktop layout configuration of a specific application can be properly converted into a mobile device layout configuration (or any other different sized target layouts) considering the relationship between components. Furthermore, after initial conversions, modifications can be made to the desktop and mobile layout settings for the same page and can be reflected within a newly generated mobile page.

Sistema de Comparação com base em ComponenteComponent-Based Comparison System

[00282] Será observado que ao desenvolver o sistema criador de websites, há geralmente uma necessidade de comparar diferentes versões de um website, para integrar atualizações ao website (conteúdo e layout) vindo de diferentes fontes e também para realizar a resolução de conflitos quando necessário.[00282] It will be noted that when developing the website builder system, there is usually a need to compare different versions of a website, to integrate updates to the website (content and layout) coming from different sources and also to carry out conflict resolution when necessary .

[00283] Também será observado que sistemas de controle de versão existentes e outros sistemas que suportam mudanças combinando tipicamente utilizam algoritmos de comparação e fusão que são com base apenas em texto ou em byte. Tais sistemas não são adequados para sistemas criadores de website com base no objeto, que utilizam uma hierarquia de componentes multidimensionais como um modelo de dados subjacente.[00283] It will also be noted that existing version control systems and other systems that support changes merging typically utilize compare and merge algorithms that are either text-only or byte-based. Such systems are not suitable for object-based website design systems, which use a multidimensional component hierarchy as an underlying data model.

[00284] Os requerentes observaram que resultados superiores podem ser alcançados utilizando um sistema de comparação e combinação com base no componente que pode utilizar quaisquer dos seguintes: os IDs do componente do criador de website do sistema; localizar relações geométricas e semânticas entre os componentes; análise dos atributos e conteúdo do componente; análise do histórico de edição do componente; e organização inteligente dos componentes em cada nível de hierarquia (de modo que algoritmos de comparação e combinação lineares conhecidos na técnica possam ser utilizados).[00284] Applicants have noted that superior results can be achieved using a component-based compare and match system that may utilize any of the following: the website builder component IDs of the system; locate geometric and semantic relationships between components; analysis of component attributes and content; analysis of the component's editing history; and intelligent organization of the components at each hierarchy level (so that art-known linear comparison and combination algorithms can be used).

[00285] Os requerentes observaram ainda que essa organização inteligente de componentes pode ser alcançada utilizando a tecnologia de organização de componentes desenvolvida para suportar a conversão de websites para websites móveis, conforme discutido aqui acima com relação ao emissor da ordem 240. Os requerentes observaram também que a classificação semântica e a comparação de componentes podem também ser utilizadas para suportar o processo de comparação.[00285] The applicants further noted that this intelligent organization of components can be achieved using the component organization technology developed to support the conversion of websites to mobile websites, as discussed hereinabove with respect to the issuer of order 240. The applicants also noted that semantic classification and component comparison can also be used to support the comparison process.

[00286] A Patente Americana n° 9.805.134 intitulada “SYSTEM FOR SYNCHRONIZATION OF CHANGES IN EDITED WEBSITES AND INTERACTIVE APPLICATIONS”, depositada em 11 de fevereiro de 2015 e publicada em 31 de outubro de 2017 e atribuída ao titular comum da presente invenção descreve um sistema de sincronização de alteração do aplicativo para atualizar e editar objetos em um website que pode ser utilizado com e sem um sistema de controle de versão. O sistema descrito aqui pode ser de uso como um elemento de tal sistema de sincronização de alteração do aplicativo para edição do website.[00286] US Patent No. 9,805,134 entitled “SYSTEM FOR SYNCHRONIZATION OF CHANGES IN EDITED WEBSITES AND INTERACTIVE APPLICATIONS”, filed on February 11, 2015 and published on October 31, 2017 and assigned to the common owner of the present invention describes an application change synchronization system for updating and editing objects on a website that can be used with and without a version control system. The system described here may be of use as an element of such an application change synchronization system for website editing.

[00287] Conforme discutido aqui acima, um website pode ter disposições hierárquicas de componentes tendo atributos. Essas disposições hierárquicas podem também ser conhecidas como árvores de componentes. Cada nó em uma árvore de componente pode representar um componente e pode ter múltiplos subnós (por exemplo, para componentes dentro de um componente de container). Especificamente, cada nó pode ter atributos geométricos (posição e tamanho) relativos à entidade relativa.[00287] As discussed here above, a website can have hierarchical arrangements of components having attributes. These hierarchical arrangements may also be known as component trees. Each node in a component tree can represent a component and can have multiple subnodes (for example, for components inside a container component). Specifically, each node can have geometric attributes (position and size) relative to the relative entity.

[00288] A referência é agora feita à Figura 31 que ilustra um sistema de design de website 640 sendo executado em um servidor 600 tipicamente acessado a partir de múltiplas fontes, como clientes usuários 610 (incluindo usuários interativos, sistemas de gerenciamento de conteúdo, APIs, etc.) e clientes designers 620. O sistema de design de website 640 pode compreender um website 605 e um comparador e combinador 650 para comparar e diminuir os componentes a partir de diferentes versões do website 605 que podem ser armazenados em banco de dados 660 em conformidade com uma realização da presente invenção. Será observado que embora o sistema de design de website 640 seja mostrado implementado em servidor 600, em uma realização alternativa, ele pode ser implementado localmente no cliente usuário 610 e/ou cliente designer 620 - completamente ou parcialmente.[00288] Reference is now made to Figure 31 which illustrates a website design system 640 running on a server 600 typically accessed from multiple sources such as client users 610 (including interactive users, content management systems, APIs , etc.) and designer clients 620. The website design system 640 may comprise a website 605 and a comparer and combiner 650 for comparing and collating components from different versions of the website 605 which may be stored in a database 660 in accordance with one embodiment of the present invention. It will be appreciated that although website design system 640 is shown implemented on server 600, in an alternative embodiment, it may be implemented locally on user client 610 and/or designer client 620 - completely or partially.

[00289] Será observado que as disposições hierárquicas de componentes podem ser armazenadas em banco de dados 660 ou em um armazenamento de objeto separado, em um arquivo de linguagem de marcação ou arquivos de formato de intercâmbio de dados, conforme discutido em mais detalhes aqui abaixo. Será ainda observado que as edições feitas aos componentes podem ser armazenadas localmente, em clientes 610 e 620, e atualizadas ao banco de dados 660 mais tarde ou podem ser armazenadas diretamente em bancos de dados 660.[00289] It will be noted that the hierarchical arrangements of components may be stored in database 660 or in a separate object store, in a markup language file or data interchange format files, as discussed in more detail here below . It will further be appreciated that edits made to components can be stored locally on clients 610 and 620 and updated to database 660 later or can be stored directly in databases 660.

[00290] A referência é agora feita à Figura 32 que ilustra um cenário de versões de um website que pode ser armazenado em banco de dados 660. A versão publicada pode ser a versão do website disponível atualmente para ambos os usuários e designers, a versão editada 1 pode ser conteúdo adicionado por um usuário, a versão editada 2 pode ser mudanças reais a um esquema de objeto feito por um designer e a nova versão publicada pode ser a versão publicada com a versão editada 1 e a versão editada 2 integradas em conformidade.[00290] Reference is now made to Figure 32 which illustrates a scenario of versions of a website that may be stored in database 660. The published version may be the version of the website currently available to both users and designers, the version edited 1 can be content added by a user, edited version 2 can be actual changes to an object schema made by a designer, and new published version can be the published version with edited version 1 and edited version 2 merged accordingly .

[00291] A referência é agora feita à Figura 33 que ilustra os elementos do comparador e do combinador 650. O comparador e o combinador 650 podem compreender um gerenciador de componente 651, um gerenciador de versão 652, um editor 653, um integrador de versão 654 e uma fusão de versão 657. O integrador de versão 654 pode ainda compreender um comparador de versão 655 e um solucionador de versão 656. O editor 653 pode ainda compreender um banco de dados do histórico de edição 635 para armazenar edições feitas ao website 605 manipuladas pelo sistema de design de website 640.[00291] Reference is now made to Figure 33 which illustrates the elements of the comparer and combiner 650. The comparer and combiner 650 may comprise a component manager 651, a version manager 652, an editor 653, a version integrator 654 and a version merger 657. The version assembler 654 may further comprise a version comparer 655 and a version solver 656. The editor 653 may further comprise an edit history database 635 for storing edits made to the website 605 handled by the 640 website design system.

[00292] O gerenciador de componente 651 pode gerenciar o armazenamento de websites criados ou outros aplicativos virtuais criados e componentes armazenam e fornecem serviços de acesso ao editor 653 ao banco de dados 660, o gerenciador de versão 652 pode gerenciar e armazenar múltiplas versões dos websites criados ou outros aplicativos virtuais criados, o editor 653 pode suportar a edição do website por um designer, o integrador de versão 654 pode comparar e resolver diferenças entre diferentes versões e a fusão de versão 657 pode combinar versões uma vez que foram comparadas e resolvidas com base na análise realizada pelo integrador de versão 654.[00292] The component manager 651 can manage the storage of created websites or other virtual applications created and components store and provide access services to the editor 653 to the database 660, the version manager 652 can manage and store multiple versions of websites created or other virtual applications created, the editor 653 can support editing of the website by a designer, the version assembler 654 can compare and resolve differences between different versions, and the version merger 657 can combine versions once they have been compared and resolved with based on the analysis performed by the version 654 integrator.

[00293] Será observado que o comparador e o combinador 650 podem ser exigidos para comparar (e mais tarde combinar) duas árvores de componentes (por exemplo, a versão base e uma versão modificada) em uma única árvore de componentes. Tal combinação pode ser automática, guiada pelo usuário ou ambas.[00293] It will be noted that the comparer and combiner 650 may be required to compare (and later combine) two component trees (eg, the base version and a modified version) into a single component tree. Such a combination can be automatic, user-guided, or both.

[00294] O comparador e o combinador 650 podem também realizar uma combinação com base na decomposição hierárquica dos objetos sendo integrados ou com base em uma análise da geometria, de atributos e de conteúdo dos objetos e subobjetos comparados.[00294] The comparator and combiner 650 can also perform a combination based on the hierarchical decomposition of the objects being integrated or based on an analysis of the geometry, attributes and content of the objects and subobjects compared.

[00295] A referência é agora feita às Figuras 34A e 34B que ilustram os subelementos do comparador de versão 655 e o solucionador de versão 656 respectivamente. O comparador de versão 655 pode comparar duas ou mais versões do aplicativo visual criado gerando uma estrutura de dados intermediária descrevendo suas diferenças. O comparador de versão 655 pode ainda compreender um coordenador de comparação e seleção 699, um comparador de versão estrutural 701, um comparador de versão com base na ordem 702, um comparador de correspondência semântica 703 e um gerador de árvore de diferença 704. O solucionador de versão 656 pode compreender um seletor e coordenador solucionador 710, um navegador de árvore de diferença 711, um exibidor de página combinada 712, um navegador de atributo de componente 713 e um gerador de árvore de componente combinado 714. O exibidor de página combinada 712 pode ainda compreender um animador 715 e um navegador de árvore de diferença pode compreender um gerador de menu hierárquico 716.[00295] Reference is now made to Figures 34A and 34B which illustrate the sub-elements of the version comparator 655 and the version solver 656 respectively. Version Comparer 655 can compare two or more versions of the created visual application by generating an intermediate data structure describing their differences. Version comparer 655 may further comprise a compare and selection coordinator 699, a structural version comparer 701, an order-based version comparer 702, a semantic matching comparer 703, and a difference tree generator 704. of version 656 may comprise a selector and solver coordinator 710, a difference tree browser 711, a combined page player 712, a component attribute browser 713 and a combined component tree generator 714. The combined page player 712 it may further comprise an animator 715 and a difference tree browser may comprise a hierarchical menu generator 716.

[00296] O seletor e o coordenador de comparação 699 podem analisar as árvores de entrada e decidir quais dos comparadores 701, 702 e 703 utilizar com base na estrutura de árvores. O seletor e o coordenador de comparação 699 podem também coordenar entre o uso de mais de um dos comparadores 701, 702 e 703 quando exigido. Os comparadores 701, 702 e 703 podem todos primeiro pré-processar os nós de cada árvore de componente individual árvore estruturalmente, por sua ordem, ou semanticamente, para determinar uma ordem de objeto e as relações entre objetos antes de comparar as duas árvores de componentes estruturalmente, por sua ordem, ou semanticamente, conforme descrito em mais detalhes aqui abaixo.[00296] The selector and comparison coordinator 699 can analyze the input trees and decide which of the comparators 701, 702 and 703 to use based on the tree structure. The selector and comparison coordinator 699 may also coordinate between the use of more than one of comparators 701, 702 and 703 when required. Comparators 701, 702 and 703 may all first pre-process the nodes of each individual component tree structurally, in their order, or semantically, to determine an object order and relationships between objects before comparing the two component trees. structurally, in your order, or semantically, as described in more detail here below.

[00297] Será observado que o comparador e o combinador 650 podem basear sua funcionalidade na criação e posterior resolução de uma árvore de diferença. O gerador de árvore de diferença 704 pode criar uma árvore de diferença com base nos resultados dos comparadores 701, 702 e 703. Será ainda observado que uma árvore de diferença pode ser similar a uma árvore de componentes, mas pode incluir o resultado da comparação de duas árvores de componentes. Enquanto uma árvore de componentes consiste em nós regulares (tendo subnós) e nós folha, uma árvore de diferença pode conter nós de tipos adicionais.[00297] It will be noted that the comparator and combiner 650 can base their functionality on the creation and further resolution of a difference tree. Difference tree generator 704 can create a difference tree based on the results of comparators 701, 702 and 703. It will be further appreciated that a difference tree can be similar to a component tree, but can include the result of comparing two component trees. While a component tree consists of regular nodes (having subnodes) and leaf nodes, a difference tree can contain nodes of additional types.

[00298] Esse tipo de nó pode ser um nó de comparação que tem dois subnós, ambos os quais são as versões do nó encontrado em duas árvores de componentes comparadas (por exemplo, T1 e T2). Um (mas não ambos) subnó pode ser nulo em um caso no qual um nó de componente existe em somente uma das árvores de componentes comparadas (T1 ou T2), mas não na segunda árvore de componentes.[00298] This type of node can be a comparison node that has two subnodes, both of which are versions of the node found in two compared component trees (eg T1 and T2). One (but not both) subnode can be null in a case where a component node exists in only one of the compared component trees (T1 or T2), but not in the second component tree.

[00299] Outro nó desse tipo pode ser um nó de grupo. A referência é agora feita à Figura 35 que ilustra o uso de nós de comparação e de grupo. Um nó de grupo pode ser utilizado, se dois componentes (A e B) em T1 foram substituídos no aplicativo com um único componente C em T2. Nesse caso, o 1° subnó do nó de comparação X seria um nó de grupo Y recém-criado que inclui A e B, e o 2° subnó seria o componente C (e seus subcomponentes contidos).[00299] Another node of this type can be a group node. Reference is now made to Figure 35 which illustrates the use of compare and group nodes. A group node can be used, if two components (A and B) in T1 were replaced in the application with a single component C in T2. In this case, the 1st subnode of compare node X would be a newly created group node Y that includes A and B, and the 2nd subnode would be component C (and its contained subcomponents).

[00300] Será observado que uma árvore de diferença pode conter somente nós contendo diferenças entre T1 e T2. As sub-árvores (subnós) que são idênticas entre T1 e T2 são omitidas da árvore de diferença.[00300] It will be noted that a difference tree can only contain nodes containing differences between T1 and T2. Subtrees (subnodes) that are identical between T1 and T2 are omitted from the difference tree.

[00301] Quando um componente V difere entre T1 e T2, a árvore de diferença pode incluir o caminho a partir da raiz da árvore de diferença até o componente V.[00301] When a V component differs between T1 and T2, the difference tree can include the path from the root of the difference tree to the V component.

[00302] Uma árvore de diferença pode também ter como objetivo “empurrar as diferenças o mais baixo possível”, por exemplo, para incluir um nó de comparação no nível mais baixo (mais detalhado) no qual a diferença existe. Cada nó pode conter indicadores ou referências à versão do nó em ambos T1 e T2.[00302] A difference tree can also aim to “push the differences as low as possible”, for example, to include a comparison node at the lowest (most detailed) level at which the difference exists. Each node can contain pointers or references to the version of the node in both T1 and T2.

[00303] Uma realização alternativa pode utilizar, por exemplo, uma árvore contendo os nós não modificados também, com tipo de nó específico para essas sub-ramificações não modificadas adicionadas aos tipos de nós, conforme descrito em mais detalhes aqui abaixo. Ainda, outra realização alternativa pode incluir detalhes de diferenças em valores de atribuição de um dado componente Z (por exemplo, entre T1 e T2) dentro de um nó específico descrevendo Z, e utilizaria somente nós de comparação para diferenças no conjunto de subcomponentes contidos, conforme ainda descrito abaixo.[00303] An alternative realization could use, for example, a tree containing the unmodified nodes as well, with specific node type for those unmodified sub-branches added to the node types, as described in more detail here below. Yet another alternative realization might include details of differences in assignment values of a given Z component (e.g., between T1 and T2) within a specific node describing Z, and would only use comparison nodes for differences in the set of contained subcomponents, as further described below.

[00304] Um caso especial é quando uma árvore de diferença representa um componente (como container de múltiplas páginas) que tem múltiplos subcomponentes (que podem ser exibidos simultaneamente ou não). Nesse caso, os subcomponentes podem:[00304] A special case is when a diff tree represents a component (such as a multipage container) that has multiple subcomponents (which may or may not be displayed simultaneously). In this case, subcomponents can:

[00305] Existir em T1 e T2 e serem idênticos.[00305] Exist in T1 and T2 and be identical.

[00306] Existir em T1 e T2 e serem diferentes.[00306] Exist in T1 and T2 and be different.

[00307] Existir em T1 somente.[00307] Exist in T1 only.

[00308] Existir em T2 somente.[00308] Exist in T2 only.

[00309] A referência é agora feita à Figura que ilustra um container de múltiplas páginas A com os subcomponentes P1, P2, P3 e P4 (em T1) e com os subcomponentes P3, P4* (modificados), P5 e P6 (em T2). Como é mostrado, a árvore de diferença K criada pode ter um nó pai A. O nó pai A pode representar as duas variantes do container de múltiplas páginas A (de T1 e T2) que são diferentes somente por conteúdo. Será observado que, se houver diferenças adicionais, como atributos diferentes, uma estrutura diferente pode ser utilizada incluindo duas sub- árvores completas. O nó pai A pode compreender um nó de comparação C1 contendo [Para T1] P1 e [Para T2] Indicador Nulo (X). O nó pai A pode também conter o nó de comparação C2 contendo: [Para T1] P2 e [Para T2] Indicador Nulo (X); nó de comparação C3 contendo [Para T1] P4 [Para T2] P4*, nó de comparação C4 contendo [Para T1] Indicador Nulo e [Para T2] P5 e nó de comparação C5 contendo [Para T1] Indicador Nulo e [Para T2] P6.[00309] Reference is now made to the Figure illustrating a multipage container A with subcomponents P1, P2, P3 and P4 (in T1) and with subcomponents P3, P4* (modified), P5 and P6 (in T2 ). As shown, the difference tree K created can have a parent node A. The parent node A can represent the two variants of multipage container A (from T1 and T2) that are different only by content. It will be noted that if there are additional differences, such as different attributes, a different structure can be used including two complete subtrees. The parent node A may comprise a comparison node C1 containing [For T1] P1 and [For T2] Null Indicator (X). The parent node A may also contain the comparison node C2 containing: [For T1] P2 and [For T2] Null Indicator (X); comparison node C3 containing [For T1] P4 [For T2] P4*, comparison node C4 containing [For T1] Null Indicator and [For T2] P5, and comparison node C5 containing [For T1] Null Indicator and [For T2 ] Q6.

[00310] Será observado que nesse cenário, P3 foi filtrada no exemplo acima e não está incluída na árvore de diferença.[00310] You will notice that in this scenario, P3 has been filtered out in the example above and is not included in the difference tree.

[00311] O comparador e o combinador 650 podem comparar T1 e T2 para criar a árvore de diferença K.[00311] The comparator and combiner 650 can compare T1 and T2 to create the K difference tree.

[00312] O comparador e o combinador 650 podem digitalizar repetidamente T1 e T2 começando pela raiz de todas as árvores e em cada nível de nó pode combinar os subnós de T1 e T2, conforme descrito em mais detalhes aqui abaixo.[00312] The comparator and combiner 650 can repeatedly scan T1 and T2 starting from the root of all trees and at each node level can combine the subnodes of T1 and T2 as described in more detail here below.

[00313] A referência é agora feita à Figura 37A que ilustra os subelementos do comparador de versão estrutural 701, à Figura 37B que ilustra os subelementos do comparador de versão com base na ordem 702 e à Figura 37C que ilustra os subelementos do comparador de correspondência semântica 703. O comparador de versão estrutural 701 pode compreender um aplicador de correspondência com base no ID 721, um analisador de relação geométrica 722, um analisador do componente/atributo de conteúdo 723, um analisador de semântica do componente 724 e um analisador de fusão de divisão 725. O comparador de versão com base na ordem 702 pode compreender um pré-processador 731, um emissor da ordem 732 e um dispositivo de correspondência de sequência 733. O comparador de correspondência semântica 703 pode compreender um classificador de semântica 741 e um dispositivo de correspondência de classe/atributo 742. A funcionalidade desses elementos é discutida em mais detalhes aqui abaixo.[00313] Reference is now made to Figure 37A illustrating the sub-elements of the structural version comparator 701, Figure 37B illustrating the sub-elements of the version comparator based on order 702 and Figure 37C illustrating the sub-elements of the matching comparator 703. The 701 structural version comparer may comprise an ID-based matcher 721, a 722 geometric relation parser, a 723 content component/attribute parser, a 724 component semantic parser, and a fusion parser. of division 725. The order-based version comparer 702 may comprise a preprocessor 731, a sender of order 732, and a sequence matcher 733. The semantic matching comparer 703 may comprise a semantic classifier 741 and a class/attribute matcher 742. The functionality of these elements is discussed in more detail here below.

[00314] O gerenciador de versão 652 pode receber a partir do gerenciador de componente 651 as duas (ou mais) diferentes versões do website pertinente que exige comparação e combinação. Conforme discutido aqui acima, as disposições hierárquicas do componente em cada versão podem ser ligadas a uma árvore do componente tendo múltiplos subnós.[00314] The version manager 652 may receive from the component manager 651 the two (or more) different versions of the relevant website that require comparison and matching. As discussed here above, the component hierarchical arrangements in each version can be linked to a component tree having multiple subnodes.

[00315] O comparador de versão 655 pode ser executado repetidamente em cada par de nós e pode determinar se esse par deve ser incluído em uma árvore de diferença com base na existência de diferenças no nível mais baixo (conforme indicado pelos resultados da recursão). Se a comparação é uma comparação de nó folha, o comparador de versão 655 pode incluir um nó de comparação na árvore de diferença, se houver diferenças no valor de atributo entre os nós folha comparados (conforme descrito em mais detalhes aqui abaixo). Conforme discutido aqui acima, os elementos do comparador de versão 655 podem ser coordenados pelo seletor coordenador de comparação 699 e podem ser executados independentemente ou podem ser utilizados em paralelo para complementar entre si.[00315] The 655 version comparer can be run repeatedly on each pair of nodes and can determine whether that pair should be included in a difference tree based on whether there are differences at the lowest level (as indicated by the recursion results). If the diff is a leaf node diff, the version 655 diff can add a diff node to the difference tree if there are differences in attribute value between the compared leaf nodes (as described in more detail here below). As discussed hereinabove, version comparer elements 655 may be coordinated by compare coordinate selector 699 and may be executed independently or may be used in parallel to complement each other.

[00316] O comparador de versão estrutural 701 pode comparar a hierarquia estrutural de cada par de nós através da comparação das suas relações geométricas, de conteúdo e semânticas.[00316] The structural version comparer 701 can compare the structural hierarchy of each pair of nodes by comparing their geometric, content and semantic relationships.

[00317] Será observado que o comparador e o combinador 650 podem utilizar IDs únicos por componentes que podem ser preservados quando um componente é modificado (possivelmente mesmo em modificação de tipo). O dispositivo de correspondência com base em ID 721 pode combinar todos os nós que existem em ambos T1 e T2 e tem o mesmo ID. Também será observado que tal correspondência pode ser feita em cada nível de container (como representado pelos nós de árvore internos) sujeito a detecção de divisão/fusão geométrica, conforme descrito em mais detalhes aqui abaixo.[00317] It will be noted that the comparer and combiner 650 can use per-component unique IDs that can be preserved when a component is modified (possibly even on type modification). The ID based matcher 721 can match all nodes that exist in both T1 and T2 and have the same ID. It will also be noted that such matching can be done at each container level (as represented by the inner tree nodes) subject to geometric split/merge detection, as described in more detail here below.

[00318] O analisador de relação geométrica 722 e o analisador de semântica do componente 724 podem realizar a correspondência semântica geométrica em conformidade para tentar localizar pares entre os componentes restantes (de ID não compatível) em T1 e T2. Apesar de ter diferentes IDs, os componentes em T1 e T2 podem ainda ser conectados uns aos outros em sua função semântica (como identificado pelo analisador de semântica do componente 724 ou pelo analisador de relação geométrica 722), e devem ser referidos como um par “alterado” ao invés de um componente apagado e um componente adicionado.[00318] The geometric relation analyzer 722 and the component semantic analyzer 724 can perform geometric semantic matching accordingly to try to find pairs between the remaining components (of mismatched ID) in T1 and T2. Despite having different IDs, the components at T1 and T2 may still be connected to each other in their semantic function (as identified by component semantic parser 724 or geometric relation parser 722), and should be referred to as a pair " changed” instead of one component deleted and one component added.

[00319] O analisador de relação geométrica 722 pode combinar nós que existem somente em T1 com nós que não existem somente em T2 com base nos nós no par ocupando aproximadamente a mesma área. Isso pode ser feito com base na porcentagem de sobreposição (por exemplo, em termos de X/Y/área), com peso adicional dado ao tipo de componente e outros atributos.[00319] The geometric relation parser 722 can match nodes that exist only in T1 with nodes that do not exist only in T2 based on the nodes in the pair occupying approximately the same area. This can be done on a percentage overlap basis (eg in terms of X/Y/area), with additional weight given to component type and other attributes.

[00320] O analisador de relação geométrica 722 pode também combinar nós que existem somente em T1 com nós que existem somente em T2 com base na posição, tamanho e intersecção com relação a outros nós pareados. Conforme ilustrado na Figura 38, à qual a referência é feita agora, se o componente C existe em ambos T1 e T2, e tem um componente adjacente D1 em T2 e D2 em T2, então o analisador de relação geométrica 722 pode combinar D1 e D2.[00320] The geometric relation parser 722 may also match nodes that exist only in T1 with nodes that exist only in T2 based on position, size and intersection with respect to other paired nodes. As illustrated in Figure 38, to which reference is now made, if component C exists in both T1 and T2, and has an adjacent component D1 in T2 and D2 in T2, then geometric relation analyzer 722 can combine D1 and D2 .

[00321] O analisador de semântica do componente 724 pode verificar combinações (um dado subconjunto de componentes não compatíveis em T1 contra um dado subconjunto de componentes não compatíveis em T2). O analisador de semântica do componente 724 pode também combinar os componentes em dois conjuntos de componentes de acordo com seus IDs e atributos (como posição, tamanho e tipo). Ele pode realizar a correspondência semântica com base no tipo semântico de nível alto (por exemplo, um componente de parágrafo de texto, como comparado a um componente de linha de texto). Ele pode também depender das ligações semânticas criadas (por exemplo, dois pares de imagem correspondentes + componentes de legenda).[00321] The semantic analyzer of component 724 can check combinations (a given subset of non-compatible components in T1 against a given subset of non-compatible components in T2). The component semantic parser 724 may also combine the components into two sets of components according to their IDs and attributes (such as position, size, and type). It can perform semantic matching based on high-level semantic type (for example, a text paragraph component, as compared to a text line component). It can also depend on the semantic links created (for example, two matching image pairs + caption components).

[00322] Se o componente é um componente de nível folha, o analisador de conteúdo/atributo do componente 723 pode verificar valores dos atributos do componente (incluindo o atributo de conteúdo, por exemplo, o texto real incluído em um componente de texto). Ele pode então criar um nó de comparação somente se um atributo foi alterado. O analisador de conteúdo/atributo do componente 723 pode também filtrar quaisquer atributos que não sejam relevantes à comparação.[00322] If the component is a leaf-level component, the component's content/attribute parser 723 may check values of the component's attributes (including the content attribute, for example, the actual text included in a text component). It can then create a comparison node only if an attribute has changed. The content/attribute parser of component 723 may also filter out any attributes that are not relevant to the comparison.

[00323] O analisador de fusão de divisão 725 pode também classificar tal pareamento possível com base na área ocupada, tipos de componentes, conteúdo de componentes e subcomponentes relativos. Ele pode inserir tais pares agrupados gerados à árvore de diferença, criando um nó adicional para contê-los.[00323] The 725 split fusion analyzer can also classify such possible pairing based on occupied area, component types, component content, and relative subcomponents. It can insert such generated clustered pairs into the difference tree, creating an additional node to contain them.

[00324] O analisador de fusão de divisão 725 pode também realizar a detecção de divisão/fusão geométrica na divisão/fusão de retenção de ID, por exemplo, uma transformação de divisão/fusão na qual um componente de pré- transformação (e ID) é também um dos componentes de pós- transformação. A referência é agora feita à Figura 39 que ilustra uma transformação de divisão de retenção do ID. Um único componente container A pode ser dividido em dois (ou mais) componentes containers B e C ocupando a mesma área ou similar com o conteúdo do componente A dividido entre os componentes B e C.[00324] The 725 split merger analyzer can also perform geometric split/merge detection on ID-holding split/merge, for example, a split/merge transformation in which a pre-transformation (and ID) component it is also one of the post-transformation components. Reference is now made to Figure 39 which illustrates an ID-retaining split transformation. A single container component A can be divided into two (or more) container components B and C occupying the same or similar area with the contents of component A divided between components B and C.

[00325] Entretanto, se o ID do componente A foi preservado como um dos componentes divididos, o analisador de fusão de divisão 725 não pode realizar a correspondência de ID, mas, ao invés disso, o analisador de relação geométrica 722 e/ou o analisador de semântica do componente 724 pode realizar a análise para detectar as transformações de retenção de ID, conforme descrito em mais detalhes aqui abaixo.[00325] However, if the ID of component A was preserved as one of the split components, the split fusion parser 725 cannot perform ID matching, but instead the geometry ratio parser 722 and/or the Component 724's semantic analyzer can perform parsing to detect ID-holding transformations, as described in more detail here below.

[00326] O mesmo pode se aplicar à transformação de fusão (por exemplo, uma em que os componentes B e C são combinados em A), ou para uma transformação de separação- fusão combinada (por exemplo, uma em que os componentes B e C são convertidos nos componentes A e D).[00326] The same can apply to the merge transformation (for example, one where components B and C are combined into A), or for a combined split-merge transformation (for example, one where components B and C are converted into components A and D).

[00327] O analisador de fusão de divisão 725 pode tentar detector divisão e fusão de componentes (por exemplo, uma caixa de texto foi substituída por duas caixas de texto ocupando praticamente a mesma área). O analisador de fusão de divisão 725 pode também adicionar todos os componentes não compatíveis em ambos os lados na árvore de diferença (marcando um componente que foi adicionado ou removido) - criando nós de comparação de 1 subnó, conforme necessário. Se o analisador de fusão de divisão 725 encontra uma diferença (por exemplo, nem todos os subnós em T1 e T2 são idênticos), ele pode devolver uma sub-árvore de diferença criada ao chamador para adicioná-la à árvore construída formada no nível de recursão de chamada manuseando o relativo container.[00327] The split merging analyzer 725 may attempt to detect splitting and merging of components (eg one text box has been replaced by two text boxes occupying nearly the same area). The 725 split fusion analyzer can also add all non-compatible components on both sides in the difference tree (by marking a component that has been added or removed) - creating 1-subnode comparison nodes as needed. If the split merger parser 725 encounters a difference (for example, not all subnodes in T1 and T2 are identical), it may return a created difference subtree to the caller to add it to the constructed tree formed at the subtree level. call recursion handling the relative container.

[00328] O comparador de versão com base na ordem 702 pode comparar elementos pré-processando os elementos e criando uma ordem para comparar tais componentes. O pré- processador 731 pode realizar qualquer pré-processamento exigido nos conjuntos de componentes comparados para extrair a parte relevante dos conjuntos de componentes sets e pode também analisar a adequação dos componentes e pode fazer modificações aos componentes existentes, onde necessário. Pode também analisar quaisquer hierarquias e quaisquer relações de container específicas no início do processo para juntar informações que possam ser úteis ao processo. Será observado que a funcionalidade do pré-processador 731 pode ser similar à funcionalidade do pré-processador 201, conforme descrito aqui acima. Após os componentes terem sido pré- processados pelo pré-processador 731, o emissor da ordem 732 pode ordenar os componentes em conformidade para auxiliar o processo de comparação. Será observado que a funcionalidade do emissor da ordem 732 pode ser similar à funcionalidade do emissor da ordem 240, conforme descrito aqui acima.[00328] The order based version comparer 702 can compare elements by pre-processing the elements and creating an order to compare those components. The preprocessor 731 can perform any required pre-processing on the sets of components compared to extract the relevant part of the sets of components sets and can also analyze the suitability of the components and can make modifications to the existing components where necessary. You can also analyze any hierarchies and any specific container relationships early in the process to gather information that might be useful to the process. It will be appreciated that the functionality of preprocessor 731 can be similar to the functionality of preprocessor 201 as described hereinabove. After the components have been preprocessed by preprocessor 731, orderer 732 can sort the components accordingly to aid the comparison process. It will be appreciated that the functionality of ordering party 732 may be similar to the functionality of ordering party 240 as described hereinabove.

[00329] O emissor da ordem 732 pode definir uma ordem linear entre os componentes em cada nível de contenção em cada versão do aplicativo visual sendo comparada. O emissor da ordem 732 pode então converter cada container em cada aplicativo visual em uma “série” de componentes e então a correspondência entre os componentes nessas múltiplas séries de acordo com o comparador de versão estrutural de resultados 701. Será ainda observado que o emissor da ordem 732 pode levar em conta várias considerações relacionadas ao criador de website do sistema, como tipos de componente e de conteúdo e histórico de edição.[00329] The issuer of order 732 can define a linear order between the components at each containment level in each version of the visual application being compared. The order issuer 732 may then convert each container in each visual application into a "series" of components and then match between the components in these multiple series in accordance with the results structural version comparer 701. It will be further noted that the order issuer 701 732 order can take into account various considerations related to the system's website builder, such as component and content types and edit history.

[00330] O emissor da ordem 732 pode então converter cada uma das strings de uma “string de componentes” para uma string de símbolos (a partir de um alfabeto recém- criado que representa os componentes) utilizando símbolos idênticos para componentes compatíveis nas strings múltiplas, e símbolos únicos diferentes para os componentes incompatíveis. Pode-se então aplicar uma conhecida comparação de texto linear / algoritmo de combinação entre as múltiplas strings (como o algoritmo de combinação recursivo descrito em http://en.wikipedia.org/wiki/Merge_(revision_control)). Será observado que nesse cenário, o emissor da ordem 732 possa converter a combinação de componentes multidimensionais em uma combinação de texto linear, processo bastante conhecido na indústria.[00330] The issuer of order 732 can then convert each of the strings from a “component string” to a string of symbols (from a newly created alphabet representing the components) using identical symbols for compatible components in the multiple strings , and different unique symbols for incompatible components. One can then apply a well-known linear text comparison / merge algorithm between the multiple strings (such as the recursive merge algorithm described at http://en.wikipedia.org/wiki/Merge_(revision_control)). It will be seen that in this scenario, the issuer of order 732 can convert the combination of multidimensional components into a combination of linear text, a process well known in the industry.

[00331] Também será observado que o analisador de divisão-combinação 725 possa também ser utilizado como um estágio pré-processamento, já que ele altera a hierarquia de recipientes (por exemplo, dissolvendo ou reordenando recipientes).[00331] It will also be noted that the split-merge parser 725 can also be used as a pre-processing stage, as it alters the container hierarchy (eg, dissolving or reordering containers).

[00332] O dispositivo de correspondência de sequência 733 pode então aplicar um algoritmo de correspondência de sequência ao conjunto de componentes ordenado.[00332] Sequence matcher 733 may then apply a sequence matching algorithm to the sorted set of components.

[00333] O comparador de correspondência semântica 703 pode realizar a classificação semântica nos nós e fazer a correspondência deles de acordo com as classes semânticas e seus parâmetros geométricos.[00333] The semantic matching comparer 703 can perform the semantic classification on the nodes and match them according to the semantic classes and their geometric parameters.

[00334] O classificador de semântica 741 pode mapear os componentes em tipos semânticos (tais como visual (imagem, vídeo) e texto (linha única, multilinhas) que podem ser definidos hierarquicamente. Os tipos semânticos podem incluir tipos semânticos multicomponentes tais como ImageWithCaptionText -um tipo semântico criado pela união de um par que inclui componentes de imagem e texto como uma entidade semântica.[00334] The semantic classifier 741 can map components into semantic types (such as visual (image, video) and text (single line, multiline) that can be defined hierarchically. Semantic types can include multicomponent semantic types such as ImageWithCaptionText - a semantic type created by joining a pair that includes image and text components as a semantic entity.

[00335] O classificador de semântica 741 pode usar uma tabela de sistemas mapeando tipos (componentes únicos e multicomponentes) em tipos semânticos dispostos em uma hierarquia de tipos, por exemplo, “imagem” e “vídeo” são subtipos de “visual” que é um subtipo do “componente” de nível superior como mostrado na Figura 40 a qual referência está sendo feita. Ela pode também contar com análises de conteúdo/atributo do componente (por exemplo, analisar o conteúdo de componentes de imagem/texto através da identificação de conceito e extração para localizar componentes relacionados).[00335] Semantic classifier 741 can use a table of systems mapping types (single component and multicomponent) into semantic types arranged in a type hierarchy, for example, “image” and “video” are subtypes of “visual” which is a subtype of the top-level “component” as shown in Figure 40 being referenced. It can also rely on component content/attribute analysis (eg, analyze the content of image/text components through concept identification and extraction to locate related components).

[00336] O classificador de semântica 741 pode também usar informações adicionais de outros elementos do comparador de versão 655 e pode também usar resultados de separação e combinação de recipientes anteriores e vinculações semânticas previamente identificadas (por exemplo, criadas pelo analisador de semântica do componente 724).[00336] The semantic classifier 741 may also use additional information from other elements of the version comparer 655 and may also use results of separation and combination of previous containers and previously identified semantic links (for example, created by the semantic analyzer of component 724 ).

[00337] O classificador de semântica 741 pode trabalhar com componentes unidos / separados / redispostos conforme criado pelo analisador de separação/combinação 725 e pode contar com análises anteriores por analisador de conteúdo/atributo do componente 723.[00337] The semantic classifier 741 can work with joined / separated / rearranged components as created by the separation/combination analyzer 725 and can rely on previous analyzes by content/attribute analyzer of the component 723.

[00338] O dispositivo de correspondência de classe/atributo 742 pode tomar elementos das duas sub-árvores de componentes compatíveis e tentar criar uma correspondência com base na classificação semântica gerada pelo classificador de semântica 741. Isso pode se aplicar a todos os elementos, ou aos elementos restantes após o dispositivo de correspondência com base em ID 721 ter executado (sujeito ao analisador de separação/combinação 725). Será observado que isso pode ser muito útil quando aplicado a todos os elementos para a comparação de duas sub-árvores dissociadas que não são variantes da mesma sub-árvore (isto é, ao comparar duas páginas web que não tenham uma origem comum).[00338] The class/attribute matcher 742 may take elements from the two compatible component subtrees and attempt to create a match based on the semantic classification generated by the semantic classifier 741. This may apply to all elements, or to the remaining elements after the ID-based matcher 721 has run (subject to the split/combine analyzer 725). It will be seen that this can be very useful when applied to all elements for comparing two disassociated subtrees that are not variants of the same subtree (ie, when comparing two web pages that do not have a common origin).

[00339] O dispositivo de correspondência de classe/atributo 742 pode dividir os componentes em cada um dos conjuntos de componentes comparados em classes de acordo com seus tipos semânticos. Será observado que o comparador de correspondência semântica 703 pode usar geralmente tipos semânticos muito abstratos (isto é, alto na hierarquia do tipo semântico) como classes, para prover uma correspondência mais ampla. Por exemplo, o classificador de semântica 741 pode usar quatro classes com base em tipos semânticos principais tais como texto, imagem, galerias e “outros componentes”.[00339] Class/Attribute Matcher 742 may divide the components in each of the compared component sets into classes according to their semantic types. It will be noted that the semantic matching comparator 703 can generally use very abstract semantic types (i.e., high in the semantic type hierarchy) as classes, to provide broader matching. For example, semantic classifier 741 can use four classes based on major semantic types such as text, image, galleries and "other components".

[00340] Assim que o classificador de semântica 741 tiver terminado de classificar os componentes, o dispositivo de correspondência de classe/atributo 742 pode ordenar os componentes em cada classe de acordo com seu tamanho, ou possivelmente - em particular para texto - sua quantidade de conteúdo. O último é feito tal que uma grande área de texto contendo pequenas quantidades de texto possa ser correspondida com uma área de texto menor que pode ser mais adequado. O dispositivo de correspondência de classe/atributo 742 pode ainda classificar componentes tendo área idêntica (ou próxima a idêntica), de acordo com atributos adicionais tais como proporção de aspecto, posição na tela, etc.[00340] Once the semantic classifier 741 has finished sorting the components, the class/attribute matcher 742 may order the components in each class according to their size, or possibly - particularly for text - their amount of content. The latter is done such that a large text area containing small amounts of text can be matched with a smaller text area which may be more suitable. Class/Attribute Matcher 742 may further classify components having identical (or nearly identical) area according to additional attributes such as aspect ratio, screen position, etc.

[00341] Será observado que tal correspondência possa omitir componentes com tamanho extremo (muito grande ou muito pequeno) que não pode ser correspondido com componentes de tamanho similar nas páginas web ou recipientes correspondentes.[00341] It will be noted that such matching may omit components with extreme size (too large or too small) that cannot be matched with components of similar size in the corresponding web pages or containers.

[00342] Assim que o dispositivo de correspondência de classe/atributo 742 tiver terminado de ordenar, pode-se aplicar um algoritmo de correspondência para criar o pareamento tais como um algoritmo guloso, o algoritmo húngaro ou qualquer algoritmo similar. O dispositivo de correspondência de classe/atributo 742 pode associar componentes em cada categoria separadamente.[00342] Once the class/attribute matcher 742 has finished sorting, a matching algorithm can be applied to create the matching such as a greedy algorithm, the Hungarian algorithm or any similar algorithm. Class/attribute matcher 742 may associate components in each category separately.

[00343] O dispositivo de correspondência de classe/atributo 742 pode levar em conta vínculos semânticos como observado acima, por exemplo, os “componentes A e B deveriam estar muito próximos” ou o “componente A deve estar acima do componente B sem determinação de componentes”. Também se pode tentar satisfazer esses requisitos antes da correspondência dos componentes remanescentes.[00343] The class/attribute matching device 742 can take into account semantic bindings as noted above, for example, “components A and B should be very close” or “component A must be above component B without determination of components”. You can also try to satisfy these requirements before matching the remaining components.

[00344] O dispositivo de correspondência de classe/atributo 742 pode também usar informações de vínculos semânticos ao longo da categoria ao formar a correspondência. Em tal caso, a correspondência é realizada sequencialmente (por exemplo, primeiro correspondendo a todos os componentes de texto, em seguida componentes de imagem, etc.). A correspondência para uma dada categoria pode confiar na correspondência feita para as categorias anteriores.[00344] The class/attribute matcher 742 may also use semantic link information along the category when forming the match. In such a case, matching is performed sequentially (eg, first matching all text components, then image components, etc.). Matching for a given category can rely on matching made for previous categories.

[00345] Uma referência é agora feita à Figura 41 que ilustra componentes com bases em classe/atributo correspondendo a informações de vínculos semânticos de integração. O dispositivo de correspondência de classe/atributo 742 pode requerer uma associação das duas páginas P1 e P2. A página P1 contém 2 conjuntos de componentes (imagem + legendas) marcados [a]+[aa], [b]+[bb] e o analisador de semântica do componente 724 pode ter criado previamente os pareamentos semânticos [a]O[aa], [b]O[bb].[00345] Reference is now made to Figure 41 which illustrates class/attribute based components corresponding to semantic integration link information. The class/attribute matcher 742 may require an association of the two pages P1 and P2. Page P1 contains 2 sets of components (image + captions) tagged [a]+[aa], [b]+[bb] and the semantic analyzer of component 724 may have previously created the semantic pairings [a]O[aa ], [b]O[bb].

[00346] A página P2 contém 2 conjuntos de componentes (imagem + legendas) marcados [c]+[cc], [d]+[dd] (e possíveis componentes adicionais) e o analisador de semântica do componente 724 pode ter criado previamente os pareamentos semânticos [c]^[cc], [d]^[dd].[00346] Page P2 contains 2 sets of components (image + captions) tagged [c]+[cc], [d]+[dd] (and possible additional components) and the semantic analyzer of component 724 may have previously created the semantic pairings [c]^[cc], [d]^[dd].

[00347] O dispositivo de correspondência de classe/atributo 742 pode primeiro associar a categoria de texto (utilizando o algoritmo correspondente conforme discutido acima neste relatório descritivo), resultando na correspondência [aa]=>[cc], [bb]=>[dd]. Pode-se então associar a categoria de imagem.[00347] The class/attribute matcher 742 may first match the text category (using the matching algorithm as discussed above in this specification), resulting in the match [aa]=>[cc], [bb]=>[ dd]. You can then associate the image category.

[00348] Será observado que quando o dispositivo de correspondência de classe/atributo 742 tentar localizar a correspondência para [a], ele possa ver que [a] está pareado semanticamente com [aa] que foi associado a [cc]. Como [cc] está pareado semanticamente com um componente de imagem [c], o dispositivo de correspondência de classe/atributo 742 pode associar [a] a [c] diretamente e removê-los dos conjuntos de componentes a ser pareados ([a] do conjunto de P1, [c] ao conjunto de P2).[00348] It will be observed that when the class/attribute matcher 742 tries to find the match for [a], it can see that [a] is semantically paired with [aa] which was associated with [cc]. Since [cc] is semantically paired with an image component [c], the class/attribute matcher 742 can associate [a] with [c] directly and remove them from the sets of components to be paired ([a] from the set of P1, [c] to the set of P2).

[00349] Será observado que, assim que todas as comparações tiverem sido feitas, o gerador de árvore de diferença 704 possa criar uma árvore de diferença com base nos resultados dos comparadores 701, 702 e 703.[00349] It will be noted that once all comparisons have been made, difference tree generator 704 can create a difference tree based on the results of comparators 701, 702 and 703.

[00350] O solucionador de versão 656 pode pegar a árvore de diferença criada (contendo as diferenças entre T1 e T2) e “solucionar” ela, removendo todos os nós especiais e gerando uma árvore de componentes combinados. O solucionador de versão 656 também pode exibir componentes conflitantes enfatizados através da modificação dos seus atributos de exibição ou modificação dos atributos de exibição dos componentes não conflitantes. Isso pode ser feito através de interação com o usuário, automaticamente ou ambos.[00350] The version 656 solver can take the created difference tree (containing the differences between T1 and T2) and “solve” it, removing all special nodes and generating a tree of combined components. The version 656 solver can also display conflicting components emphasized by modifying their display attributes or modifying the display attributes of non-conflicting components. This can be done through user interaction, automatically, or both.

[00351] Conforme discutido acima neste relatório descritivo, o solucionador de versão 656 pode conter um seletor solucionador e coordenador 710, navegador de árvore de diferença 711, um exibidor de página combinada 712, um navegador de atributo de componentes 713 e um gerador de árvore de componente combinado 714.[00351] As discussed above in this specification, the version solver 656 may contain a solver selector and coordinator 710, difference tree browser 711, a combined page display 712, a component attribute browser 713 and a tree generator of combined component 714.

[00352] O navegador de árvore de diferença 711 pode pesquisar a árvore de diferença e solucionar os nós de comparação incluídos nela. O navegador de árvore de diferença 711 pode usar um navegador por hierarquia para exibir a hierarquia da árvore de diferença, permitindo ao usuário selecionar quais das duas opções (T1 ou T2) usar para cada nó de comparação.[00352] Difference tree browser 711 can search the difference tree and resolve the diff nodes included in it. Difference tree browser 711 may use a hierarchy browser to display the difference tree hierarchy, allowing the user to select which of the two options (T1 or T2) to use for each comparison node.

[00353] Será observado que em alguns casos um nó de árvore de diferença possa ter múltiplos subnós para o qual não há ordenação clara. Em tal caso, o gerador de menu hierárquico 716 pode criar um menu ordenado hierárquico com base em (por exemplo) análise geométrica dos componentes descritos pelos subnós. Um método de criar tal menu hierárquico é através do uso de um gerador de menu de modo expresso tais como aquele descrito na publicação de patente dos Estados Unidos 2013-0086496 A1 (Criação de Interface de Usuário Adaptável no Sistema de Design Criativo de Multimídia) publicado em 4 de Abril de 2013 e atribuído ao representante comum da presente invenção, o que cria um menu hierárquico como resultado de uma ordenação geométrica dos componentes.[00353] It will be noted that in some cases a difference tree node may have multiple subnodes for which there is no clear ordering. In such a case, the hierarchical menu generator 716 can create a hierarchical ordered menu based on (for example) geometric analysis of the components described by the subnodes. One method of creating such a hierarchical menu is through the use of an express mode menu generator such as that described in United States Patent Publication 2013-0086496 A1 (Building Adaptive User Interface in Multimedia Creative Design System) published on April 4, 2013 and assigned to the common representative of the present invention, which creates a hierarchical menu as a result of a geometric ordering of the components.

[00354] O exibidor de página combinada 712 pode exibir (em WYSIWYG) o estado atual da página combinada, incluindo as decisões atuais feitas para todos os nós de comparação solucionados. Será observado que a exibição possa exibir todos os componentes da página, incluindo aqueles que são idênticos entre as duas configurações, e são, portanto, omitidos da árvore de diferença. Isso pode ser feito com base no original T1 e T2.[00354] Combined page viewer 712 can display (in WYSIWYG) the current state of the combined page, including current decisions made for all resolved comparison nodes. It will be noted that the view can display all components on the page, including those that are identical between the two configurations, and are therefore omitted from the difference tree. This can be done based on the original T1 and T2.

[00355] O exibidor de página combinada 712 pode prover uma maneira de enfatizar os componentes cobertos por nós de comparação não solucionados, tais como destacando os componentes, desativando outros componentes e provendo uma interface de alternância para ligar/desligar a exibição do outro componente.[00355] Combined page display 712 may provide a way to emphasize components covered by unresolved diff nodes, such as highlighting components, disabling other components, and providing a toggle interface to turn on/off the display of the other component.

[00356] Será observado que o problema principal ao implementar tal exibição seja que, enquanto houver nós de comparação não solucionados, a árvore de diferença ainda pode representar estados múltiplos da aplicação criada.[00356] It will be noticed that the main problem in implementing such a view is that, while there are unresolved comparison nodes, the difference tree can still represent multiple states of the created application.

[00357] O exibidor de página combinada 712 pode exibir a média ponderada das duas configurações. O exibidor de página combinada 712 pode também possivelmente criar um contínuo de configurações entre as configurações T1 e T2. Por exemplo, para atributos numéricos regulares (por exemplo, posição ou tamanho), o exibidor de página combinada 712 pode usar um valor de atributo de média ponderada. Para alguns atributos (por exemplo, cor), o exibidor de página combinada 712 pode usar um método específico (por exemplo, criar um gradiente de cores em um dado espaço de cores entre as duas cores). Para um atributo de tipo binário, o exibidor de página combinada 712 pode alterná-los entre os dois estados em um ponto específico.[00357] Combined Page Display 712 can display the weighted average of the two settings. Combined page display 712 may also possibly create a continuum of settings between T1 and T2 settings. For example, for regular numerical attributes (eg, position or size), combined page viewer 712 may use a weighted average attribute value. For some attributes (eg, color), the combined page viewer 712 may use a specific method (eg, creating a color gradient in a given color space between the two colors). For a binary type attribute, the combined page player 712 may switch between the two states at a specified point.

[00358] O animador 715 também pode solucionar a emissão de estados múltiplos por prover ainda uma animação contínua da página se alterando entre os dois estados ou adicionando um alternador ou deslizador entre os dois estados. O animador 715 pode também prover uma maneira de selecionar qualquer estado ou possivelmente selecionar um dado valor de atributo que esteja entre os dois estados.[00358] Animator 715 can also solve the multi-state issue by further providing a continuous animation of the page changing between the two states or adding a toggle or slider between the two states. Animator 715 may also provide a way to select any state or possibly select a given attribute value that is between the two states.

[00359] O exibidor de página combinada 712 pode também modificar o outro componente na página exibida com base nas alterações para atributos (em particular para tamanho e posição) de alguns componentes. O exibidor de página combinada 712 pode também criar uma exibição combinada que mostre versões múltiplas de componentes relevantes simultaneamente. Essas últimas opções podem ser realizadas utilizando as técnicas de layout dinâmico conforme descrito na Publicação de Patente Norte-Americana 2013-0219263 (Um sistema de design de páginas web integrando o layout dinâmico e conteúdo dinâmico) publicado em 22 de agosto de 2013 e atribuído ao responsável atual da presente invenção.[00359] The combined page viewer 712 may also modify the other component on the displayed page based on changes to attributes (in particular for size and position) of some components. Combined page display 712 can also create a combined display that shows multiple versions of relevant components simultaneously. These latter options can be accomplished using dynamic layout techniques as described in US Patent Publication 2013-0219263 (A web page design system integrating dynamic layout and dynamic content) published on August 22, 2013 and assigned to current person responsible for the present invention.

[00360] O exibidor de página combinada 712 pode também estimar o grau de alterações entre as duas versões sendo comparadas (por exemplo, “cosméticas”/”pequenas”/”grandes”/”muitas alterações”), com base em um classificador com base na árvore de diferença tais como o número de componentes modificados, a quantidade de alterações em cada componente modificado, etc.[00360] The combined page viewer 712 can also estimate the degree of changes between the two versions being compared (for example, “cosmetic”/”small”/”big”/”many changes”), based on a classifier with based on the difference tree such as the number of components modified, the amount of changes in each component modified, etc.

[00361] O navegador de atributo de componente 713 pode exibir os valores de um atributo de componente, incluindo a exibição dos dois valores para componentes para o qual há um nó de comparação (isto é, o valor T1 e o valor T2). Pode-se atribuir uma modificação de atributo direta para solucionar as diferenças de versão e selecionar um valor provisório (por exemplo, usar uma exibição de gradiente de cores como discutido acima neste relatório descritivo).[00361] The 713 component attribute browser can display the values of a component attribute, including displaying the two values for components for which there is a comparison node (ie, the T1 value and the T2 value). You can assign a direct attribute modification to address version differences and select an interim value (for example, using a color gradient display as discussed earlier in this white paper).

[00362] Assim que a árvore de diferença tiver sido completamente solucionada, o gerador de árvore de componente combinado 714 pode gerar uma nova árvore de diferença solucionada e o combinador de versão 657 pode então aplicar a árvore de diferença solucionada para as árvores componentes originais para gerar uma árvore componente alvo que é a versão combinada.[00362] Once the difference tree has been completely resolved, the combined component tree generator 714 may generate a new resolved difference tree and the version combiner 657 may then apply the resolved difference tree to the original component trees to generate a target component tree that is the blended version.

[00363] Em uma realização alternativa à presente invenção, o sistema de design do website 640 pode empregar um sistema de controle de versão. Será observado que neste cenário, o integrador de versão 654 possa ser requerido para comparar e combinar três versões diferentes do website: a versão publicada do histórico (linha base) da qual se derivou a versão editada atual (A), a versão editada atual (B) e a versão publicada da versão atual (C - incluindo alterações feitas pelos outros usuários). Será observado que ambos, B e C possam ser com base em A. Entretanto, um cenário comum pode ser aquele em que as alterações A=>B tenham sido feitas através do cliente designer 620 enquanto as alterações A=>C tenham sido feitas ou através do cliente designer 620, através de várias interfaces cliente usuário 610 (incluindo alterações de gerenciamento de conteúdo externo) ou através de um sistema de controle de versão externo 615 que pode gerenciar uma versão do website armazenado como ilustrado na Figura 42 à qual é agora relevada.[00363] In an alternative embodiment of the present invention, the website design system 640 can employ a version control system. It will be noted that in this scenario, version merger 654 may be required to compare and combine three different versions of the website: the historical published version (baseline) from which the current edited version was derived (A), the current edited version ( B) and the published version of the current version (C - including changes made by other users). It will be noted that both B and C can be based on A. However, a common scenario could be that A=>B changes have been made through designer client 620 while A=>C changes have been made or through the designer client 620, through various client user interfaces 610 (including external content management changes) or through an external version control system 615 that can manage a version of the website stored as illustrated in Figure 42 to which it is now revealed.

[00364] Será observado que sistema de design do website 640 possa controlar todas as alterações feitas nos bancos de dados - incluindo aquelas feitas através de qualquer uma das interfaces de usuário do sistema, assim como aquelas realizadas (por exemplo) através de serviços web associados com o sistema de design do website 640. A única exceção podem ser alterações feitas aos bancos de dados externos que são refletidos pelo website, mas não são diretamente gerenciados pelo programa de website 640. Estas também podem incluir alterações resultantes de alterações de esquema que podem requerer várias transformações dos objetos de dados utilizando o esquema modificado. Será observado que essas possam ser alterações reais aos dados, ou aplicação automática de regras de transformação sem alterar os dados salvos.[00364] It will be noted that website design system 640 can handle all changes made to the databases - including those made through any of the system's user interfaces, as well as those made (for example) through associated web services with the website design system 640. The only exception may be changes made to external databases that are reflected by the website but are not directly managed by the website program 640. These may also include changes resulting from schema changes that may require multiple transformations of the data objects using the modified schema. It will be noted that these can be actual changes to the data, or automatic application of transformation rules without changing saved data.

[00365] Devido a essa integração, o gerenciador de versão 652 pode ter informações exatas sobre a série de passos tomados para chegar de A a B e possivelmente a C e pode armazená-los no banco de dados do histórico de edição 635, através do armazenamento de versões múltiplas ou revisões no banco de dados 660 ou ambos. A fusão de versão 657 pode usar essa informação para auxiliar na combinação de alterações seja por auxiliar (visualmente) o usuário no processo de combinação ou automaticamente. Em particular, o sistema de design do website 640 pode usar a série de passos de A até B/C, classificando-os em passos contraditórios e não contraditórios. Portanto, o sistema de design do website 640 pode realizar uma reconciliação parcial das versões combinadas.[00365] Due to this integration, the version manager 652 can have exact information about the series of steps taken to get from A to B and possibly C and can store it in the edit history database 635 through the storing multiple versions or revisions in the 660 database or both. The version 657 merger can use this information to aid in merging changes either by (visually) assisting the user in the merging process or automatically. In particular, the website design system 640 can use the series of steps from A to B/C, classifying them into contradictory and non-contradictory steps. Therefore, the website design system 640 can perform a partial reconciliation of the combined versions.

[00366] Portanto, versões diferentes de um website podem ser comparadas e combinadas com base nas diferenças entre os objetos em cada versão.[00366] Therefore, different versions of a website can be compared and combined based on the differences between the objects in each version.

[00367] Será observado que a discussão acima seja focada na comparação com base em componente e combinação de duas versões de um website sendo editado - possivelmente em relação a uma versão de ancestral comum da qual as duas versões comparadas tenham sido criadas. Entretanto, a descrição acima pode ser estendida por um técnico no assunto para uma comparação com base em componente e combinação de três ou mais versões de um dado website. Além disso, pode ser estendido por um técnico no assunto para uma comparação de websites não relacionados direcionados em encontrar similaridades ou seções comuns para uma variedade de aplicações.[00367] It will be noted that the above discussion is focused on the component-based comparison and combination of two versions of a website being edited - possibly against a common ancestor version from which the two versions being compared were created. However, the above description can be extended by one skilled in the art to a component-based comparison and combination of three or more versions of a given website. Furthermore, it can be extended by a person skilled in the art to a comparison of unrelated websites aimed at finding similarities or common sections for a variety of applications.

[00368] Ainda que certos recursos da invenção tenham sido ilustrados e descritos nesse relatório descritivo, muitas modificações, substituições, alterações, e equivalentes agora ocorrerão para técnicos no assunto. Deve- se, portanto, ser entendido que as reivindicações anexas se destinam a abranger todas essas modificações e alterações que estejam dentro do verdadeiro espírito da invenção.[00368] Although certain features of the invention have been illustrated and described in this specification, many modifications, replacements, alterations, and equivalents will now occur to those skilled in the art. It is, therefore, to be understood that the appended claims are intended to cover all such modifications and alterations as are within the true spirit of the invention.

[00369] A menos que especificado de outra forma, conforme aparente a partir de discussões anteriores, deve-se apreciar que, através da especificação, discussões utilizando termos como “processando,” “computando,” “calculando,” “determinando,” ou similar, referem-se à ação e/ou processos de um computador, sistema de computação, sistema cliente/servidor ou dispositivo de computação eletrônica similar que manipula e/ou transforma dados representados como físicos, tais como eletrônicos, quantidades dentro dos registros e/ou memórias do sistema de computação em outros dados representados similarmente como quantidades físicas dentro das memórias, registros do sistema de computação ou outros dispositivos de transmissão, exibição ou armazenamento de informações similares.[00369] Unless otherwise specified, as apparent from previous discussions, it should be appreciated that, throughout the specification, discussions using terms such as "processing," "computing," "calculating," "determining," or similar, refer to the action and/or processes of a computer, computing system, client/server system, or similar electronic computing device that manipulates and/or transforms data represented as physical, such as electronic, quantities within records, and/or or computing system memories into other data similarly represented as physical quantities within the computing system's memories, registers, or other devices for transmitting, displaying, or storing similar information.

[00370] Realizações da presente invenção podem incluir aparelhos para realizar as operações deste relatório descritivo. Esse aparelho pode ser construído especialmente para os propósitos desejados, ou ele pode compreender um computador de propósito geral ativado seletivamente ou reconfigurado por um programa de computador armazenado no computador. O aparelho resultante quando instruído pelo software pode transformar o computador de propósito geral em elementos inventivos como discutido nesse relatório descritivo. As instruções podem definir o dispositivo inventivo em operação com a plataforma de computador para a qual ele é desejado. Tal programa de computador pode ser armazenado em um meio de armazenamento legível de computador, tais como, mas não limitados a, qualquer tipo de disco, incluindo disquetes, discos ópticos, discos óptico- magnéticos, memórias somente leitura (ROMs), memórias somente leitura em disco compacto (CD-ROMs), memórias de acesso randômico (RAMs), memórias somente leitura programáveis eletricamente (EPROMs), memórias somente leitura apagáveis e programáveis eletricamente (EEPROMs), cartões magnéticos ou ópticos, memória flash, pen drives ou qualquer outro tipo de mídia adequada para armazenamento de instruções eletrônicas e capazes de serem acopladas a um barramento de sistema de computador.[00370] Embodiments of the present invention may include apparatus for performing the operations of this specification. Such apparatus may be specially constructed for the desired purpose, or it may comprise a general purpose computer selectively activated or reconfigured by a computer program stored in the computer. The resulting apparatus when instructed by the software can transform the general purpose computer into inventive elements as discussed in this specification. The instructions may set the inventive device into operation with the computer platform for which it is desired. Such computer program may be stored on a computer readable storage medium, such as, but not limited to, any type of disk, including floppy disks, optical disks, magnetic-optical disks, read-only memories (ROMs), read-only memories on compact disk (CD-ROMs), random access memories (RAMs), electrically programmable read-only memories (EPROMs), electrically erasable and programmable read-only memories (EEPROMs), magnetic or optical cards, flash memory, pen drives or any other type of media suitable for storing electronic instructions and capable of being coupled to a computer system bus.

[00371] Os processos e exibições apresentado neste relatório descritivo não são inerentemente relacionados a qualquer computador em particular ou outro aparelho. Vários sistemas de propósito geral podem ser utilizados com programas de acordo com os ensinamentos deste relatório descritivo, ou pode se provar conveniente construir um aparelho mais especializado para realizar o método desejado. A estrutura desejada para uma variedade desses sistemas aparecerá a partir da descrição abaixo. Além disso, as realizações da presente invenção não são descritas com referência a qualquer linguagem de programação em particular. Será observado que uma variedade de linguagens de programação pode ser utilizada para implementar os ensinamentos da invenção como aqui descrita.[00371] The processes and views presented in this specification are not inherently related to any particular computer or other apparatus. Various general purpose systems can be used with programs in accordance with the teachings of this specification, or it may prove convenient to build a more specialized apparatus to perform the desired method. The desired structure for a variety of these systems will appear from the description below. Furthermore, embodiments of the present invention are not described with reference to any particular programming language. It will be appreciated that a variety of programming languages can be used to implement the teachings of the invention as described herein.

[00372] A menos que especificado de outra forma, conforme aparente a partir de discussões anteriores, aprecia- se que, através da especificação, discussões usar termos como “processando,” “computando,” “calculando,” “determinando,” ou similar, refere-se à ação e/ou processos de um computador, sistema de computação, sistema cliente/servidor ou dispositivo de computação eletrônico similar que manipule e/ou transforme dados representados como físicos, tais como eletrônicos, quantidades dentro dos registros e/ou memórias do sistema de computação em outros dados representados similarmente como quantidades físicas dentro das memórias, registros do sistema de computação ou outros dispositivos de armazenamento de informações, transmissão ou exibição similares.[00372] Unless otherwise specified, as apparent from previous discussions, it is appreciated that throughout the specification, discussions use terms such as “processing,” “computing,” “calculating,” “determining,” or similar , refers to the action and/or processes of a computer, computing system, client/server system, or similar electronic computing device that manipulates and/or transforms data represented as physical, such as electronic, quantities within records, and/or computing system memories into other data similarly represented as physical quantities within the computing system's memories, registers, or other similar information storage, transmission, or display devices.

[00373] Realizações da presente invenção podem incluir aparelhos para realizar as operações desse relatório descritivo. Esse aparelho pode ser especificamente construído para os propósitos desejados, ou pode conter um computador de propósito geral seletivamente ativado ou reconfigurado por um programa de computador armazenado no computador. O aparelho resultante quando instruído pelo software, pode transformar o computador de propósito geral em elementos inventivos como discutido nesse relatório descritivo. As instruções podem definir o dispositivo inventivo em operação com a plataforma de computador para qual é desejada. Tal programa de computador pode ser armazenado em um meio de armazenamento legível de computador, tais como, mas não limitados a, qualquer tipo de disco, incluindo disquetes, discos ópticos, discos óptico-magnéticos, memórias somente leitura (ROMs), memórias somente leitura em disco compacto (CD-ROMs), memórias de acesso randômico (RAMs), memórias somente leitura programáveis eletricamente (EPROMs), memórias somente leitura apagáveis e programáveis eletricamente (EEPROMs), cartões magnéticos ou ópticos, memória flash, pen drives ou qualquer outro tipo de mídia adequada para armazenamento de instruções eletrônicas e capazes de serem acopladas a um barramento de sistema de computador.[00373] Embodiments of the present invention may include apparatus for performing the operations of this specification. Such apparatus may be specifically constructed for the desired purpose, or it may contain a general purpose computer selectively activated or reconfigured by a computer program stored in the computer. The resulting apparatus when instructed by the software, can transform the general purpose computer into inventive elements as discussed in this specification. The instructions may set the inventive device into operation with the computer platform for which it is desired. Such computer program may be stored on a computer readable storage medium, such as, but not limited to, any type of disk, including floppy disks, optical disks, magnetic-optical disks, read-only memories (ROMs), read-only memories on compact disk (CD-ROMs), random access memories (RAMs), electrically programmable read-only memories (EPROMs), electrically erasable and programmable read-only memories (EEPROMs), magnetic or optical cards, flash memory, pen drives or any other type of media suitable for storing electronic instructions and capable of being coupled to a computer system bus.

[00374] Os processos e exibições apresentados neste relatório descritivo não são inerentemente relacionados a qualquer computador em particular ou outro aparelho. Vários sistemas de propósito geral podem ser utilizados com programas de acordo com os ensinamentos deste relatório descritivo, ou pode se provar conveniente construir um aparelho mais especializado para realizar o método desejado. A estrutura desejada para uma variedade desses sistemas aparecerá a partir da descrição abaixo. Além disso, realizações da presente invenção não são descritas com referência a qualquer linguagem de programação particular. Será observado que uma variedade de linguagens de programação pode ser utilizada para implementar os ensinamentos da invenção como descrito nesse relatório descritivo.[00374] The processes and views presented in this specification are not inherently related to any particular computer or other device. Various general purpose systems can be used with programs in accordance with the teachings of this specification, or it may prove convenient to build a more specialized apparatus to perform the desired method. The desired structure for a variety of these systems will appear from the description below. Furthermore, embodiments of the present invention are not described with reference to any particular programming language. It will be appreciated that a variety of programming languages can be used to implement the teachings of the invention as described in this specification.

[00375] Ainda que certos recursos da invenção tenham sido ilustrados e descritos nesse relatório descritivo, muitas modificações, substituições, alterações, e equivalentes agora ocorrerão para técnicos no assunto. Deve- se, portanto, ser entendido que as reivindicações anexas se destinam a abranger todas essas modificações e alterações que estejam dentro do verdadeiro espírito da invenção.[00375] Although certain features of the invention have been illustrated and described in this specification, many modifications, replacements, alterations, and equivalents will now occur to those skilled in the art. It is, therefore, to be understood that the appended claims are intended to cover all such modifications and alterations as are within the true spirit of the invention.

Claims (26)

1. DISPOSITIVO IMPLEMENTÁVEL EM UM SISTEMA CRIADOR DE WEBSITE (WBS), sendo o dispositivo caracterizado por compreender: pelo menos um processador hardware; e uma unidade em execução no referido pelo menos um processador hardware, a unidade compreendendo: um comparador de versão com base no componente configurado para comparar pelo menos duas versões de um referido sistema criador de website (WBS), pelo menos as duas ditas versões tendo componentes em um conjunto de hierarquias, em que os ditos componentes são pelo menos um dentre um componente visual, um container e um elemento de site não visual, e para gerar uma árvore de diferença que representa as diferenças nos ditos componentes entre pelo menos as duas ditas versões do mesmo website, em que o dito comparador de versão processa os ditos componentes em cada versão única de pelo menos as duas ditas versões do dito website para determinar relações geométricas internas e semânticas antes de comparar os ditos componentes e as ditas relações entre pelo menos as duas ditas versões do dito website utilizando pelo menos um dentre análises semânticas e geométricas; e uma fusão de versão configurada para criar uma versão integrada das duas ditas versões do dito website com base na dita árvore de diferença.1. DEVICE IMPLEMENTABLE IN A WEBSITE CREATOR SYSTEM (WBS), the device being characterized by comprising: at least one hardware processor; and a unit running on said at least one hardware processor, the unit comprising: a component-based version comparer configured to compare at least two versions of said website builder system (WBS), said at least two versions having components in a set of hierarchies, wherein said components are at least one of a visual component, a container, and a non-visual site element, and to generate a difference tree representing the differences in said components between at least the two said versions of the same website, wherein said version comparer processes said components in each unique version of at least two said versions of said website to determine internal geometric and semantic relationships before comparing said components and said relationships between at least at least the two said versions of said website using at least one of semantic and geometric analyses; and a version merge configured to create an integrated version of said two versions of said website based on said diff tree. 2. DISPOSITIVO, de acordo com a reivindicação 1, sendo ainda caracterizado por compreender um solucionador de versão para solucionar conflitos na dita geração da dita árvore de diferença.2. DEVICE, according to claim 1, further characterized in that it comprises a version solver for resolving conflicts in said generation of said difference tree. 3. DISPOSITIVO, de acordo com a reivindicação 1, caracterizado por pelo menos as duas ditas versões do mesmo website compreenderem pelo menos uma versão de um sistema de controle de versão externa.3. DEVICE, according to claim 1, characterized in that at least the two said versions of the same website comprise at least one version of an external version control system. 4. DISPOSITIVO, de acordo com a reivindicação 1, caracterizado pelos ditos componentes do site serem armazenados em pelo menos um dentre um banco de dados, um armazenamento de objeto, arquivos de linguagem de marcação e arquivos de formato de intercâmbio de dados.4. DEVICE, according to claim 1, characterized in that said website components are stored in at least one of a database, an object store, markup language files and data interchange format files. 5. DISPOSITIVO, de acordo com a reivindicação 1, caracterizado pelo dito conjunto de hierarquias e a dita árvore de diferença serem árvores e em que as ditas árvores compreendem nós que representam os ditos componentes e os ditos componentes terem atributos e estrutura.5. DEVICE, according to claim 1, characterized in that said set of hierarchies and said difference tree are trees and in which said trees comprise nodes representing said components and said components have attributes and structure. 6. DISPOSITIVO, de acordo com a reivindicação 5, caracterizado pelo dito comparador de versão compreender pelo menos um de: um comparador de versão estrutural para comparar os nós através da comparação de suas relações geométricas, de conteúdo e semânticas; um comparador de versão com base na ordem para comparar os ditos nós com base na ordem dos ditos nós e para pré-corresponder os ditos nós de acordo com um identificador interno de dito sistema criador de website (WBS); um comparador de correspondência semântica para realizar a classificação semântica nos ditos nós e corresponde-los de acordo com suas classes semânticas e parâmetros geométricos; um seletor e coordenador de comparação para prover a seleção e coordenação entre o dito comparador de versão estrutural, o dito comparador de versão com base na ordem e o dito comparador de correspondência semântica com base pelo menos em um dentre estrutura e atributos dos ditos componentes; e um gerador de árvore de diferença para gerar a dita árvore de diferença com base nos resultados de pelo menos um dentre o dito comparador de versão estrutural, o dito comparador de versão com base na ordem e o dito comparador de correspondência semântica.6. DEVICE, according to claim 5, characterized in that said version comparator comprises at least one of: a structural version comparator for comparing nodes by comparing their geometric, content and semantic relationships; an order-based version comparer for comparing said nodes based on the order of said nodes and for pre-matching said nodes according to an internal identifier of said website builder system (WBS); a semantic matching comparator to perform semantic classification on said nodes and match them according to their semantic classes and geometric parameters; a selector and comparison coordinator for providing selection and coordination between said structural version comparator, said order-based version comparator and said semantic matching comparator based on at least one of the structure and attributes of said components; and a difference tree generator for generating said difference tree based on the results of at least one of said structural version comparer, said order-based version comparer and said semantic matching comparer. 7. DISPOSITIVO, de acordo com a reivindicação 2, caracterizado pelo dito solucionador de versão compreender pelo menos um de: um navegador de árvore de diferença para exibir a dita árvore de diferença para resolução de versão manual; um exibidor de página mesclada para apresentar uma exibição de pelo menos um estado atual de uma página mesclada; um navegador de atributo de componente para exibir os valores de um atributo de componente, incluindo exibir os dois valores para componentes para os quais há um nó de comparação; um seletor e coordenador de solucionador para selecionar e coordenar entre o dito navegador de árvore de diferença, o dito exibidor de página mesclada e o dito navegador de atributo de componente; e um gerador de árvore de componente mesclado para prover resultados combinados de pelo menos um dentre o dito navegador de árvore de diferença, o dito exibidor de página mesclada e o dito navegador de atributo de componente e para gerar uma nova árvore de diferença solucionada.7. DEVICE according to claim 2, characterized in that said version solver comprises at least one of: a difference tree browser for displaying said difference tree for manual version resolution; a merged page viewer for presenting a view of at least one current state of a merged page; a component attribute browser for displaying the values of a component attribute, including displaying the two values for components for which there is a compare node; a solver selector and coordinator for selecting and coordinating between said difference tree browser, said merged page display and said component attribute browser; and a merged component tree generator for providing combined results from at least one of said difference tree browser, said merged page display and said component attribute browser and for generating a new resolved difference tree. 8. DISPOSITIVO, de acordo com a reivindicação 7, caracterizado pelo dito exibidor de página mesclada compreender um animador para animar a exibição do conflito dos ditos componentes pela comutação entre pelo menos um do dito estado.8. DEVICE, according to claim 7, characterized in that said merged page display comprises an animator for animating the display of the conflict of said components by switching between at least one of said state. 9. DISPOSITIVO, de acordo com a reivindicação 8, caracterizado pelo dito animador ser integrado com o processamento de layout dinâmico.9. DEVICE, according to claim 8, characterized in that said animator is integrated with dynamic layout processing. 10. DISPOSITIVO, de acordo com a reivindicação 6, caracterizado pela dita coordenação ter como base uma métrica combinada de resultados retornados a partir do dito comparador de versão estrutural, do dito comparador de versão com base na ordem e do dito comparador de correspondência semântica.10. DEVICE according to claim 6, characterized in that said coordination is based on a combined metric of results returned from said structural version comparator, said order-based version comparator and said semantic matching comparator. 11. DISPOSITIVO, de acordo com a reivindicação 7, caracterizado pelo dito navegador de árvore de diferença compreender um gerador do menu do sistema hierárquico para gerar uma exibição de conflito dos ditos componentes.11. DEVICE according to claim 7, characterized in that said difference tree navigator comprises a hierarchical system menu generator for generating a conflict display of said components. 12. DISPOSITIVO, de acordo com a reivindicação 1, caracterizado pela dita árvore de diferenças compreender pelo menos um de um nó de grupo e um nó de comparação.12. DEVICE according to claim 1, characterized in that said difference tree comprises at least one of a group node and a comparison node. 13. DISPOSITIVO, de acordo com a reivindicação 1, caracterizado pela dita relação geométrica ser pelo menos uma de: sobreposição, interseção, proximidade, posição relativa e tamanho relativo.13. DEVICE, according to claim 1, characterized in that said geometric relationship is at least one of: overlap, intersection, proximity, relative position and relative size. 14. MÉTODO PARA UM SISTEMA CRIADOR DE WEBSITE (WBS), o dito método caracterizado por compreender: comparar pelo menos duas versões de um website criado usando o dito sistema criador de website (WBS), as ditas pelo menos duas versões tendo componentes em um conjunto de hierarquias, em que os ditos componentes são pelo menos um de um componente visual, um contêiner e um elemento de website não visual; gerar uma árvore de diferenças representando as diferenças nos ditos componentes entre as ditas pelo menos duas versões do mesmo website; pré-processar os ditos componentes em cada versão única das ditas pelo menos duas versões do referido website para determinar relações geométricas e semânticas internas; comparar os ditos componentes e as ditas relações entre as ditas pelo menos duas versões do dito website usando semântica e geométrica; e criar uma versão integrada das ditas duas versões do dito website com base na dita árvore de diferenças.14. METHOD FOR A WEBSITE CREATION SYSTEM (WBS), said method characterized by comprising: comparing at least two versions of a website created using said website creation system (WBS), said at least two versions having components in one set of hierarchies, wherein said components are at least one of a visual component, a container and a non-visual website element; generating a difference tree representing the differences in said components between said at least two versions of the same website; preprocessing said components in each single version of said at least two versions of said website to determine internal geometric and semantic relationships; comparing said components and said relationships between said at least two versions of said website using semantics and geometry; and creating an integrated version of said two versions of said website based on said diff tree. 15. MÉTODO, de acordo com a reivindicação 14, caracterizado pelas ditas pelo menos duas versões do mesmo website compreenderem pelo menos uma versão de um sistema de controle de versão externo.15. METHOD, according to claim 14, characterized in that said at least two versions of the same website comprise at least one version of an external version control system. 16. MÉTODO, de acordo com a reivindicação 14, caracterizado pelos ditos componentes do site serem armazenados em pelo menos um de um banco de dados, um armazenamento de objeto, arquivos de linguagem de marcação e arquivos de formato de intercâmbio de dados.16. METHOD, according to claim 14, characterized in that said website components are stored in at least one of a database, an object store, markup language files and data interchange format files. 17. MÉTODO, de acordo com a reivindicação 14, caracterizado pelo dito conjunto de hierarquias e a dita árvore de diferenças serem árvores e em que as ditas árvores compreendem nós que representam os ditos componentes e os ditos componentes têm atributos e estrutura.17. METHOD according to claim 14, characterized in that said set of hierarchies and said difference tree are trees and wherein said trees comprise nodes representing said components and said components have attributes and structure. 18. MÉTODO, de acordo com a reivindicação 14, caracterizado por compreender ainda solucionar os conflitos na dita geração da dita árvore de diferença.18. METHOD, according to claim 14, characterized in that it further comprises resolving conflicts in said generation of said difference tree. 19. MÉTODO, de acordo com a reivindicação 14, caracterizado pela dita comparação de pelo menos duas versões de um website, gerando, pré-processando, comparando os ditos componentes e as ditas relações e a criação compreende pelo menos um de: comparar os nós através da comparação de suas relações geométricas, de conteúdo e semânticas; comparar os ditos nós com base na ordem dos ditos nós e pré-corresponder os ditos nós de acordo com um identificador interno do dito sistema criador de (WBS) websites; realizar a classificação semântica nos ditos nós e corresponde-los de acordo com suas classes semânticas e parâmetros geométricos; fornecer a seleção e a coordenação entre a dita comparação dos ditos nós através da comparação de suas relações geométricas, de conteúdo e semânticas, a dita comparação dos ditos nós com base na ordem dos ditos nós e a pré-correspondência e a dita realização da classificação semântica com base em pelo menos um dentre estrutura e atributos dos ditos componentes; e gerar a dita árvore de diferença com base nos resultados de pelo menos um dentre a dita comparação dos ditos nós através da comparação de suas relações geométricas, de conteúdo e semânticas, a dita comparação dos ditos nós com base na ordem dos ditos nós e pré-correspondência e a dita realização da classificação semântica.19. METHOD, according to claim 14, characterized by said comparison of at least two versions of a website, generating, pre-processing, comparing said components and said relationships and the creation comprises at least one of: comparing nodes through the comparison of their geometric, content and semantic relationships; comparing said nodes based on the order of said nodes and pre-matching said nodes according to an internal identifier of said website builder system (WBS); perform the semantic classification on said nodes and match them according to their semantic classes and geometric parameters; providing selection and coordination between said comparison of said nodes by comparing their geometric, content and semantic relationships, said comparison of said nodes based on the order of said nodes and pre-matching and performing said classification semantics based on at least one of the structure and attributes of said components; and generating said difference tree based on the results of at least one of said comparing said nodes by comparing their geometric, content and semantic relationships, said comparing said nodes based on the order of said nodes and pre -correspondence and said realization of semantic classification. 20. MÉTODO, de acordo com a reivindicação 14, caracterizado pela dita árvore de diferença compreender pelo menos um dentre um nó de grupo e um nó de comparação.20. METHOD according to claim 14, characterized in that said difference tree comprises at least one of a group node and a comparison node. 21. MÉTODO, de acordo com a reivindicação 18, caracterizado pela dita solução de conflitos compreender pelo menos um de: exibir a dita árvore de diferença para solução de versão manual; apresentar uma exibição de pelo menos um estado atual de uma página mesclada; exibir os valores de um atributo de componente, incluindo a exibição de dois valores para componentes para os quais há um nó de comparação; selecionar e coordenar entre a dita exibição da dita hierarquia da árvore de diferença, a dita apresentação e a dita exibição dos valores de um atributo de componente; prover resultados combinados da dita exibição do dito navegador de árvore de diferença, a dita apresentação e a dita apresentação dos valores de um atributo de componente; e gerar uma nova árvore de diferença solucionada.21. METHOD, according to claim 18, characterized in that said conflict resolution comprises at least one of: displaying said difference tree for manual version resolution; present a view of at least one current state of a merged page; display the values of a component attribute, including displaying two values for components for which there is a compare node; selecting and coordinating between said display of said difference tree hierarchy, said display and said display of values of a component attribute; providing combined results of said display of said difference tree browser, said display and said display of values of a component attribute; and generate a new solved difference tree. 22. MÉTODO, de acordo com a reivindicação 14, caracterizado pela dita relação geométrica ser pelo menos um dentre sobreposição, intersecção, proximidade, posição relativa e tamanho relativo.22. METHOD, according to claim 14, characterized in that said geometric relationship is at least one of overlap, intersection, proximity, relative position and relative size. 23. MÉTODO, de acordo com a reivindicação 21, caracterizado pela dita apresentação de uma exibição de pelo menos um estado atual de uma página mesclada compreender a animação da exibição do conflito dos ditos componentes pela comutação entre pelo menos um do dito estado.23. METHOD, according to claim 21, characterized in that said presentation of a display of at least one current state of a merged page comprises animation of displaying the conflict of said components by switching between at least one of said state. 24. MÉTODO, de acordo com a reivindicação 23, caracterizado pela dita animação ser integrada com processamento de layout dinâmico.24. METHOD, according to claim 23, characterized in that said animation is integrated with dynamic layout processing. 25. MÉTODO, de acordo com a reivindicação 21, caracterizado pela dita coordenação ter como base uma métrica combinada de resultados retornados da dita comparação dos ditos nós através da comparação de suas relações geométricas, de conteúdo e semânticas, a dita comparação dos ditos nós com base na ordem dos ditos nós e pré-correspondência e dita realização da classificação semântica nos ditos nós e correspondendo os de acordo com suas classes semânticas e parâmetros geométricos.25. METHOD, according to claim 21, characterized in that said coordination is based on a combined metric of results returned from said comparison of said nodes through the comparison of their geometric, content and semantic relationships, said comparison of said nodes with based on the order of said nodes and pre-matching and said performing semantic classification on said nodes and matching them according to their semantic classes and geometric parameters. 26. MÉTODO, de acordo com a reivindicação 21, caracterizado pela dita exibição da dita árvore de diferença para a solução de versão manual compreender a geração de uma exibição de conflito dos ditos componentes.26. METHOD according to claim 21, characterized in that said display of said difference tree for the manual version solution comprises generating a conflict display of said components.

Images